/* Steady Learners for Schools — the setup guide: contents, in-page search, print (the PDF is this page printed). */
.guide .kicker { color: var(--indigo); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; margin: 0 0 4px; }
.guide .lede { font-size: 18px; }
.guide .lede .pdf { font-weight: 800; }
.guide .updated { color: var(--muted); }
.guide .search { margin: 18px 0 8px; }
.guide .search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; border: 2px solid var(--indigo-soft); border-radius: 12px; outline: none; }
.guide .search input:focus { border-color: var(--indigo); }
.guide .count { color: var(--muted); font-size: 14px; min-height: 1.4em; margin: 6px 0 0; }
.guide .toc ol { columns: 2; column-gap: 28px; padding-left: 20px; margin: 10px 0 20px; }
.guide .toc li { break-inside: avoid; margin: 3px 0; }
.guide section.g { padding-top: 8px; border-top: 1px solid var(--indigo-soft); margin-top: 18px; }
.guide section.g h3 { margin: 18px 0 6px; font-size: 18px; }
.guide .tip { background: #F0F4FF; border-left: 4px solid var(--indigo); padding: 10px 14px; border-radius: 8px; }
.guide mark { background: #FFE89A; padding: 0 2px; border-radius: 3px; }
.guide .hidden { display: none; }
.guide code { background: #F3F4F8; padding: 1px 6px; border-radius: 6px; }
@media (max-width: 640px) { .guide .toc ol { columns: 1; } }
@media print {
  .guide .search, .guide .pdf, .guide footer, .guide header a { display: none !important; }
  .guide section.g { break-inside: avoid-page; }
  .guide details { display: block; }
  .guide details > * { display: block; }
  .guide summary { font-weight: 800; }
  a { color: inherit; text-decoration: none; }
}
.guide table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0 18px; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--indigo-soft); }
.guide th { background: #F0F4FF; }
@media (max-width: 640px) { .guide table { display: block; overflow-x: auto; } }

/* Pictures of the app with numbered callouts (guide.js from shots.json). */
.guide .shots { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0 6px; align-items: flex-start; }
.guide figure.shot { margin: 0; flex: 1 1 380px; max-width: 620px; }
/* A laptop's screen: a thin dark bezel, a base under it. */
.guide .shot .frame { position: relative; border: 6px solid #1E2235; border-radius: 12px 12px 4px 4px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(43,45,66,.14); }
.guide .shot .frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.guide .shot figcaption::before { content: ''; display: block; height: 8px; margin: 0 -4% 10px; border-radius: 0 0 10px 10px; background: #343A55; }
.guide .shot img { display: block; width: 100%; height: auto; }
.guide .shot .co { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 800; font-size: 14px; line-height: 26px; text-align: center; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.25); }
.guide .shot figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.guide .shot figcaption ol { margin: 4px 0 0; padding-left: 18px; }
.guide .shot figcaption li { margin: 1px 0; }
.guide .shot figcaption li::marker { color: var(--orange-deep); font-weight: 800; }
@media print { .guide .shots { break-inside: avoid; } .guide figure.shot { max-width: 48%; } .guide .shot .frame { box-shadow: none; } }