/* ============================================================================
   Franklin Yard Proctor Guide: digital practice SAT

   Register: FY reference document. Light-blue page field, white top bar,
   sidebar and cards, softened borders with slight rounding, Instrument Sans
   for text, Instrument Serif for page titles and serif italic for section names
   on buttons and links, sentence case.
   Brand tokens come from the build brief; the field, edge and CTA magentas
   match the FY class platform (fy-class-platform, src/app/globals.css), so
   the two products read as one family. Fonts are the brand's own files
   (SIL Open Font License, copied from reference/fonts), served from
   assets/fonts so nothing loads from another site.

   Departure notes (brand rule → what we did → why). Each reverts in one line.
   1. fy-brand puts internal pages on a white field (the brief said bone) →
      light-blue field #F2F3FB, the practice platform's field → operator's
      call, 2026-10-05: bone read as unfriendly.
   2. Cards: 1px ink border, square corners → ink at 50%, 6px radius →
      operator's call, 2026-10-05. Same edge as the class platform's
      --border-container; still 3.2:1 on white, a real boundary.
   3. Links in magenta text → ink text with a magenta underline → magenta text
      on the page is 3.5:1, under the WCAG AA floor of 4.5:1. Links between
      pages ("Running the test") are the exception: serif italic in #C9217D,
      FY's deeper CTA magenta, 4.75:1 on the field and 5.25:1 on white.
   4. Call bar numbers in #EE3292 → #F0499E, magenta lifted 11% toward white →
      #EE3292 on ink is 4.1:1; the lifted tone is 4.6:1 and reads the same.
   5. Muted text at ink 60% → ink 65% → 60% is 4.1:1 on bone and 4.3:1 on
      white; 65% is 4.8:1 on the field and 5.0:1 on white.
   6. Sections button filled #EE3292 → #D81F87, FY's CTA magenta (class
      platform D23) → white on #EE3292 is 3.8:1; on #D81F87 it is 4.7:1.
   7. Brief: one family, Instrument Sans, no italics → page titles (h1, h2)
      in upright Instrument Serif; section names on the previous / next
      buttons and on links between pages in Instrument Serif italic, as on
      FY's other guides → operator's call, 2026-10-05 (italic titles tried
      and dropped). Revert: --font-serif, h1/h2, .page-nav-name, .section-link.
   ============================================================================ */

/* ---------- Fonts (brand files, OFL; licenses sit next to them) ---------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; /* one variable file covers every weight used */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:     #162144;   /* type */
  --magenta: #EE3292;   /* the one accent */
  --bone:    #F5F5F2;   /* text on ink */
  --cream:   #EEEEEB;   /* placeholder fill */
  --stone:   #E5E5E2;   /* optional deeper field; unused */
  --white:   #FFFFFF;   /* top bar, sidebar, cards */
  --border-light: rgba(22, 33, 68, 0.12);

  /* Field, edge and radius (departure notes 1 and 2) */
  --field:  #F2F3FB;
  --edge:   rgba(22, 33, 68, 0.5);
  --radius: 6px;

  /* Derived for contrast (departure notes 3, 4, 5 and 6) */
  --magenta-on-ink: #F0499E;
  --magenta-cta: #D81F87;
  --magenta-cta-hover: #C9217D;  /* also the text color of links between pages */
  --ink-meta:    rgba(22, 33, 68, 0.65);  /* brief: ink at 60% */
  --ink-caption: rgba(22, 33, 68, 0.70);  /* brief: ink at 70% */

  --font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; /* departure note 7 */
  --topbar-h: 52px;
  --sidebar-w: 220px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Upright type everywhere, including elements browsers slant by default.
   The one exception: section names on buttons and links (departure note 7). */
em, i, cite, dfn, var, address { font-style: normal; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 22px; }
li + li { margin-top: 14px; }
strong, b { font-weight: 600; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

/* Links to another page of the guide: the section name in serif italic, deeper magenta,
   no underline until hover (departure notes 3 and 7). The serif runs small, so it's sized up. */
a.section-link {
  color: var(--magenta-cta-hover);
  font-family: var(--font-serif);
  font-size: 1.15em;
  font-style: italic;
  line-height: 1;
  text-decoration: none;
}
a.section-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- Buttons (secondary style: ink outline) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .btn:not(:disabled):hover { background: var(--ink); color: var(--bone); }
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}
.topbar-logo { display: flex; flex: none; }
.topbar-logo img { display: block; width: auto; height: 28px; }
.topbar-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-actions { display: flex; flex: none; gap: 8px; margin-left: auto; }

/* Sections: filled magenta so it can't be missed (shown under 900px) */
.sections-toggle { display: none; }
.btn.sections-toggle {
  background: var(--magenta-cta);
  border-color: var(--magenta-cta);
  color: var(--white);
}
@media (hover: hover) {
  .btn.sections-toggle:not(:disabled):hover {
    background: var(--magenta-cta-hover);
    border-color: var(--magenta-cta-hover);
    color: var(--white);
  }
}
html:not(.js) .print-button { display: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column; /* lets the on-call note sit at the bottom */
  width: var(--sidebar-w);
  padding: 28px 20px 24px;
  overflow-y: auto;
  background: var(--white);
  border-right: 1px solid var(--border-light);
  font-size: 14px;
}
.sidebar-heading { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.sidebar-list { margin: 0 0 24px; padding: 0; list-style: none; }
.sidebar-list li + li { margin-top: 2px; }
/* Pairs of sections, set apart by a faint line */
.sidebar-list li.group-start {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.sidebar-list a {
  display: block;
  margin-left: -15px;
  padding: 6px 0 6px 12px;
  border-left: 3px solid transparent;
  line-height: 1.35;
  text-decoration: none;
}
.sidebar-list a:hover { text-decoration: underline; text-decoration-color: var(--magenta); }
.sidebar-list a.is-current { border-left-color: var(--magenta); font-weight: 600; }
/* On-call note pinned to the bottom of the sidebar (it follows the list if space runs short) */
.sidebar-note {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  font-size: 13.5px;
  line-height: 1.5;
}

.overlay { display: none; }

/* ---------- Main column ---------- */
.main { display: block; }
.main:focus { outline: none; }
.column {
  box-sizing: content-box;
  max-width: 740px;
  margin: 0 auto;
  padding: 36px 40px 0;
}

.section { scroll-margin-top: calc(var(--topbar-h) + 20px); }
.section + .section { margin-top: 48px; }

/* One section (page) at a time once app.js runs; without it, one long page. */
.js .section:not(.is-current) { display: none; }
.js .section + .section { margin-top: 0; }

/* Page headings take focus on a page change; no ring for that. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; }

/* Page titles in upright Instrument Serif (departure note 7). It only comes in 400.
   Italic titles were tried in round 5 and dropped for readability. */
h1, h2 { font-family: var(--font-serif); font-weight: 400; }
h1 { margin-bottom: 8px; font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; }
h2 { margin-bottom: 14px; font-size: 32px; line-height: 1.1; letter-spacing: -0.005em; }
h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.3; }

.page-meta { margin-bottom: 18px; font-size: 13.5px; line-height: 1.45; color: var(--ink-meta); }
.lead { margin-bottom: 20px; font-size: 17px; }

/* ---------- Card + key-value list ---------- */
.card {
  margin: 20px 0;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.card-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.kv { margin: 0; }
.kv > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: center; /* labels sit mid-height beside longer answers */
  gap: 2px 20px;
  padding: 10px 0;
}
.kv > div + div { border-top: 1px solid var(--border-light); }
.kv > div:first-child { padding-top: 0; }
.kv > div:last-child { padding-bottom: 0; }
.kv dt { font-weight: 500; color: var(--ink-meta); }
.kv dd { margin: 0; }
.kv dd > :last-child { margin-bottom: 0; }
.kv-list { margin: 0 0 6px; padding-left: 20px; }
.kv-list li + li { margin-top: 2px; }

/* ---------- Checklist (CSS boxes, not inputs) ---------- */
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: "";
  position: absolute;
  top: calc((1.55em - 15px) / 2);
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}

/* ---------- Note ---------- */
.note { margin: 24px 0 0; padding-left: 14px; border-left: 3px solid var(--ink); }

/* ---------- Screenshot figure + missing-file placeholder ---------- */
.screen { margin: 20px 0 24px; }
.screen img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.screen figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-caption); }
.screen-placeholder { display: none; }
/* is-missing goes on the image's own box: the figure, or one slide of a carousel */
.is-missing > img { display: none; }
.is-missing > .screen-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 180px;
  padding: 16px;
  background: var(--cream);
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  text-align: center;
}
.screen-placeholder-title { font-size: 14px; font-weight: 500; }
.screen-placeholder-file { font-size: 13.5px; color: var(--ink-caption); }

/* ---------- Screenshot steps (Extended time): one at a time, arrows below ---------- */
.slide-label { margin: 0 0 8px; font-size: 13.5px; font-weight: 500; }
.carousel-controls { display: flex; gap: 8px; margin-top: 10px; }
.carousel-controls .btn { min-width: 44px; min-height: 40px; padding: 6px 12px; font-size: 17px; }
.js .slide:not(.is-active) { display: none; }
html:not(.js) .carousel-controls { display: none; }
html:not(.js) .slide + .slide { margin-top: 20px; }

/* ---------- Times table (Extended time) ---------- */
/* Inset a little from the text column so the table reads as its own element */
.table-wrap {
  margin: 24px 5%;
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.times { width: 100%; border-collapse: collapse; }
.times th,
.times td { padding: 10px 16px; text-align: left; vertical-align: top; }
.times thead th {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-caption);
  border-bottom: 1px solid var(--edge); /* same line as the table's border, so the header stands apart */
}
.times tbody th { font-weight: 500; }
.times tbody tr + tr > * { border-top: 1px solid var(--border-light); }
.times td,
.times thead th + th { text-align: right; white-space: nowrap; }
.times td:last-child { font-weight: 600; }

/* ---------- Call bar ---------- */
.callbar {
  margin: 20px 0;
  padding: 16px;
  background: var(--ink);
  border-radius: var(--radius);
  color: var(--bone);
}
.callbar a {
  color: var(--magenta-on-ink);
  font-weight: 600;
  text-decoration-color: currentColor;
  white-space: nowrap;
}
.callbar a:focus-visible { outline-color: var(--bone); }

/* ---------- Stage deck ---------- */
.deck {
  margin-top: 20px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.stage-chips li + li { margin-top: 0; }
.chip {
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.chip[aria-current="step"],
.chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
@media (hover: hover) {
  .chip:not([aria-current="step"]):not([aria-selected="true"]):hover { background: var(--field); }
}

.stage-counter { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; }
.stage-title { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.25; }
.stage-timing { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-caption); }
.stage .screen { margin: 16px 0 0; }
.stage-block { margin-top: 20px; }
.stage-block ul { margin: 0; }
.stage-label { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-caption); }
.say { padding-left: 14px; border-left: 3px solid var(--magenta); }
.say p:last-child { margin-bottom: 0; }

.deck-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.deck-nav .btn { min-height: 44px; padding: 10px 18px; }
.deck .callbar {
  margin: 24px -24px -24px;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

/* One stage at a time once app.js runs; without it, every stage shows in order. */
.js .stage:not(.is-active) { display: none; }
html:not(.js) .stage-chips,
html:not(.js) .deck-nav { display: none; }
html:not(.js) .stage + .stage { margin-top: 36px; }

/* ---------- Tabs (Troubleshooting): the same chips as the deck ---------- */
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 16px;
}
.tab-panel:focus-visible { outline-offset: 4px; }

/* One list at a time once app.js runs; the tab says which, so the heading hides.
   Without it (and in print) both lists show under their headings. */
.js .tab-panel:not(.is-active),
.js .tab-panel > h3 { display: none; }
html:not(.js) .tab-list { display: none; }

/* ---------- Troubleshooting cards ---------- */
.trouble-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: trouble;
}
.trouble-list > li {
  position: relative;
  padding: 20px 20px 20px 52px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  counter-increment: trouble;
}
.trouble-list > li + li { margin-top: 12px; }
.trouble-list > li::before {
  content: counter(trouble);
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--magenta);
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
}
.trouble-list p { margin: 0; }
.trouble-list p + p { margin-top: 4px; }
.trouble-problem { font-weight: 600; }

/* A "Common Fix 4" link lands here: a short magenta outline marks the card. */
.trouble-list > li:focus { outline: none; }
.trouble-list > li.is-target { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* ---------- Previous / next section (bottom of each page) ---------- */
/* Two equal halves that reach toward each other, as on FY's other guides */
.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
.page-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 24px 18px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  text-decoration: none;
}
.page-nav-prev { grid-column: 1; }
.page-nav-next { grid-column: 2; align-items: flex-end; text-align: right; }
.page-nav-dir { font-size: 13.5px; color: var(--ink-caption); }
.page-nav-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic; /* departure note 7 */
  font-weight: 400;
  line-height: 1.2;
}
@media (hover: hover) {
  .page-nav-link:hover { border-color: var(--magenta); }
}
html:not(.js) .page-nav { display: none; }

/* ---------- Footer ---------- */
.page-footer {
  margin-top: 64px;
  padding-bottom: 48px;
  font-size: 13.5px;
  color: var(--ink-meta);
}

/* ---------- Wide screens: fixed sidebar ---------- */
@media (min-width: 900px) {
  .main { margin-left: var(--sidebar-w); }
}

/* ---------- Narrow screens: sidebar becomes a drawer ---------- */
@media (max-width: 899px) {
  .js .sections-toggle { display: inline-flex; }
  .column { padding: 24px 20px 0; }

  .sidebar {
    width: min(280px, 85vw);
    visibility: hidden;
    transform: translateX(-100%);
  }
  .sidebar.is-open { visibility: visible; transform: none; }

  .overlay {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    background: rgba(22, 33, 68, 0.4);
  }
  .overlay[hidden] { display: none; }
}

@media (max-width: 719px) {
  .topbar-title { display: none; }
}

@media (max-width: 599px) {
  .topbar { gap: 10px; padding: 0 16px; }
  .topbar-logo img { height: 26px; }
  .topbar-actions .btn { padding: 6px 10px; }

  .kv > div { grid-template-columns: minmax(0, 1fr); }

  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .page-nav { gap: 10px; }
  .page-nav-link { padding: 12px 14px 14px; }
  .page-nav-name { font-size: 19px; }
  .table-wrap { margin-left: 0; margin-right: 0; }
  /* Narrow: let headers and times wrap ("52 min" / "30 sec") instead of scrolling sideways */
  .times th,
  .times td { padding: 10px; }
  .times td,
  .times thead th + th { white-space: normal; }

  .deck { padding: 16px; }
  .deck .callbar { margin: 20px -16px -16px; }
  .deck-nav .btn { padding: 10px 14px; }
}

/* Small phones (360–374px): keep the top bar inside its padding. */
@media (max-width: 374px) {
  .topbar-logo img { height: 24px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { padding: 6px 8px; }
}

/* ---------- Print: the fallback copy for test day ---------- */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #fff; }
  body { color: var(--ink); }

  .skip-link,
  .topbar,
  .sidebar,
  .overlay,
  .stage-chips,
  .deck-nav,
  .print-button,
  .sections-toggle,
  .tab-list,
  .page-nav,
  [data-stage-status] { display: none !important; }

  .main { margin-left: 0; }
  .column { max-width: none; padding: 0; }

  .section { break-before: page; }
  .section:first-child { break-before: auto; }
  .section + .section { margin-top: 0; }
  h1, h2, h3, h4, .stage-counter, .stage-title, .stage-timing { break-after: avoid; }

  a { text-decoration: none; }

  /* Every stage, in order, each under its own title */
  .js .section:not(.is-current) { display: block; }
  .js .tab-panel:not(.is-active),
  .js .tab-panel > h3 { display: block; }

  .deck { margin-top: 12px; padding: 0; background: none; border: 0; }
  .js .stage:not(.is-active),
  .stage { display: block; }
  .stage + .stage { margin-top: 32px; }
  .stage-block,
  .card,
  .trouble-list > li,
  .table-wrap,
  .slide,
  .screen { break-inside: avoid; }
  .carousel { break-inside: auto; }

  /* All three extended-time screenshots, in order */
  .carousel-controls { display: none; }
  .js .slide:not(.is-active) { display: block; }
  .slide + .slide { margin-top: 16px; }

  .screen img,
  .is-missing > .screen-placeholder { max-width: 60%; }

  /* Call bar as plain text: no ink field, which printers drop */
  .callbar,
  .deck .callbar { margin: 16px 0; padding: 0; background: none; color: var(--ink); }
  .callbar a { color: var(--ink); }
}