/* SAT Prep — "Study desk": a paper-grey desk with a sidebar that follows the theme (white by day, graphite by
   night), and a #2-pencil yellow accent used sparingly
   (active navigation, the daily goal ring, badges and highlights). Semantic green/amber/red are separate. */

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #ECEFF3;
  --ink: #1A1F25;
  --muted: #636D78;
  --rule: #E0E4E9;
  --side: #FFFFFF;
  --side-ink: #3A424C;
  --side-strong: #14181D;
  --side-muted: #616A75;
  --side-raise: rgb(20 25 35 / 0.05);
  --side-on: rgb(20 25 35 / 0.07);
  --side-track: rgb(20 25 35 / 0.09);
  --side-edge: #E0E4E9;
  --accent: #F2B01E;
  --accent-ink: #7A5500;
  --accent-soft: #FDF1D3;
  --good: #2F8A5B;
  --good-soft: #E2F2E9;
  --mid: #B37A06;
  --mid-soft: #FBF0D9;
  --low: #C4473A;
  --low-soft: #FBE7E4;
  --mark: #FFE08A;
  --focus: #1A1F25;
  --pop: 0 16px 40px -12px rgb(20 25 35 / 0.35);
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sticky-top: 0px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121518;
    --surface: #1B1F25;
    --surface-2: #252B32;
    --ink: #E8EBEE;
    --muted: #9AA3AD;
    --rule: #2B3139;
    --side: #0B0D10;
    --side-ink: #C3CAD2;
    --side-strong: #FFFFFF;
    --side-muted: #7D8792;
    --side-raise: rgb(255 255 255 / 0.06);
    --side-on: rgb(255 255 255 / 0.09);
    --side-track: rgb(255 255 255 / 0.12);
    --side-edge: transparent;
    --accent: #F5C24A;
    --accent-ink: #F5C24A;
    --accent-soft: #3A3017;
    --good: #5CC28A;
    --good-soft: #173524;
    --mid: #E3B04B;
    --mid-soft: #3A2F14;
    --low: #EE7C6F;
    --low-soft: #3D1F1C;
    --mark: #6B5A12;
    --focus: #F5C24A;
    --pop: 0 16px 40px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); }
a { color: inherit; text-underline-offset: 2px; }
p a, .hint a, .note a, .eyebrow a { color: var(--ink); font-weight: 600; }
/* A primary button made from a link keeps its own ink inside a note, or it is ink on ink. */
.note a.button.primary, .hint a.button.primary, p a.button.primary { color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0 0 0.6rem; }
h1 { font-size: clamp(26px, 3.2vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 19px; font-weight: 700; line-height: 1.25; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 0.6rem; }
p:last-child { margin-bottom: 0; }
ul { padding-left: 1.2rem; margin: 0; }
li + li { margin-top: 6px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; background: var(--surface-2); padding: 0 0.3em; border-radius: 4px; }
.muted { color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); }
.warn { color: var(--mid); }
.nowrap { white-space: nowrap; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.big { display: block; font: 800 34px/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.range { display: block; color: var(--muted); font-size: 14px; }
.note { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; color: var(--muted); font-size: 15px; }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns 0.18s ease; }
.shell.collapsed { grid-template-columns: 68px minmax(0, 1fr); }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 16px;
  background: var(--side); color: var(--side-ink);
  border-right: 1px solid var(--side-edge);
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.brand { min-width: 0; overflow: hidden; font: 800 20px/1 var(--display); letter-spacing: -0.01em; color: var(--side-strong); text-decoration: none; padding: 4px 10px 4px 4px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.brand-logo { flex: none; width: auto; height: 44px; }
.collapse { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--side-muted); }
.collapse:hover:not(:disabled) { background: var(--side-raise); color: var(--side-strong); }
.collapse .icon { width: 18px; height: 18px; transition: transform 0.18s ease; }
.test-picker { display: grid; gap: 4px; }
.test-current, .test-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--side-ink); text-align: left; font: inherit;
}
.test-current { background: var(--side-raise); }
.test-current:hover:not(:disabled), .test-menu button:hover:not(:disabled) { background: var(--side-on); color: var(--side-strong); }
.test-code {
  flex: none; display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 6px; border-radius: 8px;
  background: var(--side-track); color: var(--side-strong); font: 800 12.5px/1 var(--display); letter-spacing: 0.02em;
}
.test-current .test-code, .test-menu button.on .test-code { background: var(--accent); color: #1A1F25; }
.test-picker .label { display: grid; gap: 1px; min-width: 0; flex: 1; }
.test-picker .label strong { color: var(--side-strong); font-weight: 600; font-size: 14px; line-height: 1.25; }
.test-picker .label small { color: var(--side-muted); font-size: 12px; line-height: 1.3; }
.test-current .label small { text-transform: uppercase; letter-spacing: 0.07em; font-size: 10.5px; font-weight: 700; }
.test-caret { flex: none; width: 18px; height: 18px; color: var(--side-muted); transition: transform 0.16s ease; }
.test-picker.open .test-caret { transform: rotate(180deg); }
.test-menu { display: grid; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid var(--side-edge); }
.test-menu[hidden] { display: none; }
/* Collapsed, the picker is just the test's code, as the pages below it are just icons. */
.shell.collapsed .test-picker .label, .shell.collapsed .test-caret { display: none; }
.shell.collapsed .test-current, .shell.collapsed .test-menu button { justify-content: center; padding-inline: 0; }
/* On wide screens the sidebar is where the test is chosen; phones have no sidebar, so they keep the page's own. */
@media (min-width: 821px) { .page-tools .exam-switch { display: none; } }
.side-nav { display: grid; gap: 2px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); text-decoration: none; white-space: nowrap; }
.side-nav a:hover { background: var(--side-raise); color: var(--side-strong); }
.side-nav .icon { width: 19px; height: 19px; color: var(--side-muted); }
.side-nav a:hover .icon, .side-nav a.on .icon { color: var(--side-strong); }
.side-nav a.on { background: var(--side-on); color: var(--side-strong); box-shadow: inset 3px 0 0 var(--accent); }
.badge { margin-left: auto; background: var(--accent); color: #1A1F25; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 7px; }
.badge.live { font-size: 0; width: 9px; height: 9px; padding: 0; flex: none; }
.streak { margin-top: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.streak-count { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; background: var(--side-raise); color: var(--side-muted); font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.streak.on .streak-count { background: var(--accent); color: #1A1F25; }
.streak .label { display: grid; gap: 1px; min-width: 0; flex: 1; white-space: nowrap; }
.streak strong { color: var(--side-strong); font-weight: 600; font-size: 15px; }
.streak .label > span { font-size: 13px; color: var(--side-muted); }
.goal-bar { display: block; height: 4px; margin-top: 5px; border-radius: 999px; background: var(--side-track); overflow: hidden; }
.goal-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.sync { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); font-size: 14px; text-decoration: none; white-space: nowrap; }
.sync:hover, .sync.on { background: var(--side-raise); color: var(--side-strong); }
.sync .label { min-width: 0; }
.sync small { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: var(--side-muted); font-size: 12px; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--side-muted); }
.dot.ok { background: var(--good); }
.dot.bad { background: var(--low); }

/* Collapsing only narrows the column and fades the text. Icons, links and the streak count keep their size and
   position in both states, so nothing jumps or rewraps while the width animates. */
.side .label, .side .brand { transition: opacity 0.12s ease 0.1s, visibility 0s linear 0s; }
.shell.collapsed .side .label, .shell.collapsed .side .brand { opacity: 0; visibility: hidden; transition: opacity 0.1s ease, visibility 0s linear 0.1s; }
.shell.collapsed .collapse .icon { transform: rotate(180deg); }
.shell.collapsed .side-nav .badge { position: absolute; top: 2px; left: 20px; margin: 0; font-size: 10.5px; padding: 2px 5px; }
.shell.collapsed .side-nav .badge.live { font-size: 0; width: 9px; height: 9px; padding: 0; top: 6px; left: 26px; }

.topbar, .tabs, .sheet { display: none; }

#view { width: 100%; max-width: 1100px; justify-self: center; min-width: 0; padding: 30px clamp(16px, 3.5vw, 40px) 64px; container-type: inline-size; }
#view > * { margin-top: 0; margin-bottom: 0; }
#view > * + * { margin-top: 16px; }
#view > .page-head + *, #view > h1 + * { margin-top: 18px; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-more { fill: currentColor; stroke: none; }

@media (max-width: 820px) {
  :root { --sticky-top: 56px; }
  /* Rows: the top bar keeps its height and the page takes the rest, even when the page is shorter than the screen. */
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { display: none; }
  .topbar {
    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 30;
    height: 56px; padding: 0 8px 0 max(16px, env(safe-area-inset-left)); background: var(--side); color: var(--side-ink);
    border-bottom: 1px solid var(--side-edge);
  }
  .topbar .brand { font-size: 18px; padding: 0; margin-right: auto; gap: 8px; }
  .topbar .brand-logo { height: 36px; }
  .top-streak { display: flex; align-items: center; gap: 4px; padding: 8px 10px; color: var(--side-muted); font-weight: 700; font-size: 16px; text-decoration: none; font-variant-numeric: tabular-nums; }
  .top-streak .icon { width: 20px; height: 20px; }
  .top-streak.on { color: var(--side-strong); }
  .top-streak.on .icon { color: var(--accent); fill: color-mix(in srgb, var(--accent) 35%, transparent); }
  .top-sync { display: grid; place-items: center; width: 40px; height: 40px; }
  .tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--side); border-top: 1px solid var(--side-edge); padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .tabs a, .tabs button {
    position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; min-height: 52px;
    border: 0; border-radius: 10px; background: none; color: var(--side-muted); font: 600 12px/1.2 var(--body); text-decoration: none;
  }
  .tabs .on { color: var(--side-strong); }
  .tabs .on .icon { color: var(--accent); }
  .tabs .badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; font-size: 11px; padding: 2px 5px; }
  .tabs .badge.live { font-size: 0; width: 9px; height: 9px; padding: 0; top: 6px; left: calc(50% + 9px); }
  .sheet {
    display: grid; gap: 2px; position: fixed; z-index: 31; left: 12px; right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--pop);
  }
  .sheet a { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
  .sheet a.on { background: var(--accent-soft); }
  .sheet a span { color: var(--muted); font-size: 20px; line-height: 1; }
  #view { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- controls ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 15px/1.2 var(--body); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
button:hover:not(:disabled), .button:hover { border-color: var(--ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--rule); }
.ghost.active { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.small { padding: 6px 12px; font-size: 14px; }
.danger { color: var(--low); }
.danger:hover:not(:disabled) { border-color: var(--low); }
.chip { padding: 6px 12px; font-size: 14px; }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card .actions, .empty .actions { margin-top: 14px; }
input, select { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); max-width: 100%; }
input:focus-visible, select:focus-visible { outline-offset: 0; }
.field { display: grid; gap: 4px; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.field input { font-weight: 400; font-size: 16px; width: 100%; max-width: 300px; }

/* ---------- surfaces ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.card + .card { margin-top: 14px; }
.cards > .card + .card { margin-top: 0; }
.card > .big + .muted { margin-top: 2px; }
.empty { background: var(--surface); border-radius: 14px; text-align: center; padding: 48px 20px; }
.empty > p { max-width: 52ch; margin-inline: auto; color: var(--muted); }
.empty .actions, .empty > .button, .empty > button { justify-content: center; margin-top: 14px; }

.bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.bar h1 { margin: 0; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.seg a { padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.seg a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); }
.tally { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- dashboard ---------- */
.page-head h1 { margin: 2px 0 0; }
.today-mobile { display: none; }
.next { background: var(--surface); border-radius: 14px; padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.next h2 { font-size: 20px; font-weight: 600; margin: 3px 0 2px; }
.next p { margin: 0; }
.scores { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.score { background: var(--surface); border-radius: 14px; padding: 14px 18px 16px; display: grid; align-content: start; gap: 2px; }
.score.total { background: var(--accent-soft); }
.score.total .eyebrow, .score.total .range { color: var(--accent-ink); }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.skills > section { background: var(--surface); border-radius: 14px; padding: 18px 20px; }
.skill-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(3.6rem, auto); gap: 12px; align-items: center; padding: 4px 0; font-size: 15px; }
.skill-row .name { min-width: 0; overflow-wrap: anywhere; }
.track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fill { height: 100%; border-radius: inherit; background: var(--ink); }
.fill.high { background: var(--good); }
.fill.mid { background: var(--mid); }
.fill.low { background: var(--low); }
.pct { text-align: right; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.domain-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
h2 + .domain-label { margin-top: 4px; }

@media (max-width: 820px) {
  .today-mobile { display: block; }
  .today-mobile .streak { max-width: 360px; }
  .today-mobile .streak-count { background: var(--surface-2); color: var(--muted); }
  .today-mobile .streak.on .streak-count { background: var(--accent); color: #1A1F25; }
  .today-mobile .streak strong { color: var(--ink); }
  .today-mobile .streak .label > span { color: var(--muted); }
  .today-mobile .goal-bar { background: var(--surface-2); }
}
@container (max-width: 760px) {
  .scores { grid-template-columns: 1fr 1fr; }
  .score.total { grid-column: 1 / -1; }
  .skills { grid-template-columns: 1fr; }
  .next .button { width: 100%; }
}
@container (max-width: 420px) {
  .skill-row { grid-template-columns: minmax(0, 1fr) 56px minmax(3.2rem, auto); gap: 10px; }
  .big { font-size: 30px; }
}

/* ---------- questions ---------- */
.question { background: var(--surface); border-radius: 14px; padding: 20px 22px; }
.question .meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.q-read { margin-bottom: 16px; }
.passage { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; font-size: 16.5px; line-height: 1.7; }
.passage p { margin-bottom: 0.8em; }
.passage p:last-child { margin-bottom: 0; }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.highlighting .passage { cursor: text; }
.figure, .qimg { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 6px; }
/* Export crops are sized for about 12px text. On narrow screens they shrink to at most 80% of that and scroll
   sideways inside their own box, rather than shrinking until the text can't be read. */
.qimg[style*="--w"] { width: min(var(--w), max(100%, calc(var(--w) * 0.8))); max-width: none; }
.prompt-image, .answer-image, .rationale, details.original { overflow-x: auto; }
.choice-btn .qimg { max-width: 100%; }
/* Exported question images are black on white; in dark mode, invert them so they don't glare. */
@media (prefers-color-scheme: dark) { .figure, .qimg, .zoom-img { filter: invert(0.9) hue-rotate(180deg); } }
.figure { margin: 12px auto 0; }
.stem { font-weight: 600; font-size: 16.5px; margin-bottom: 14px; }
.prompt-image { margin-bottom: 14px; }
@container (min-width: 820px) {
  .question.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
  .question.split .meta { grid-column: 1 / -1; margin: 0; padding: 14px 24px 0; }
  .question.split .q-read { margin: 0; padding: 20px 26px 26px; border-right: 1px solid var(--rule); }
  .question.split .passage { background: none; padding: 0; border-radius: 0; }
  .question.split .q-work { padding: 20px 26px 26px; }
}

.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.choices li { display: flex; gap: 6px; align-items: stretch; margin: 0; }
.choice-btn {
  flex: 1; min-width: 0; justify-content: flex-start; gap: 12px; text-align: left;
  padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--surface);
  font: 400 16px/1.4 var(--body);
}
.choice-btn:hover:not(:disabled) { border-color: var(--muted); }
.choice-btn:disabled { opacity: 1; cursor: default; }
.letter { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.choice-btn .qimg { min-width: 0; flex: 0 1 auto; }
.selected .choice-btn { border-color: var(--ink); background: var(--accent-soft); }
.selected .letter { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.eliminated .choice-btn > span:not(.letter):not(.tag) { text-decoration: line-through; opacity: 0.5; }
.eliminated .choice-btn .qimg, .eliminated .letter { opacity: 0.45; }
.correct .choice-btn { border-color: var(--good); background: var(--good-soft); }
.correct .letter { background: var(--good); border-color: var(--good); color: var(--surface); opacity: 1; }
.wrong .choice-btn { border-color: var(--low); background: var(--low-soft); }
.wrong .letter { background: var(--low); border-color: var(--low); color: var(--surface); }
.tag { margin-left: auto; flex: none; padding-left: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tag.ok { color: var(--good); }
.tag.bad { color: var(--low); }
.strike { flex: none; width: 42px; padding: 0; border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--muted); font-size: 14px; }
.strike:hover:not(:disabled) { border-color: var(--rule); color: var(--ink); }
.eliminated .strike { background: var(--surface-2); color: var(--ink); }
.spr { display: grid; gap: 6px; max-width: 300px; font-weight: 600; font-size: 14px; }
.spr input { font-size: 18px; font-weight: 400; }

.feedback { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.feedback.ok { background: var(--good-soft); }
.feedback.bad { background: var(--low-soft); }
.feedback.ok > strong { color: var(--good); }
.feedback.bad > strong { color: var(--low); }
.feedback .actions { margin-top: 12px; }
.rationale { margin-top: 10px; }
.answer-image .qimg, .rationale .qimg { margin-top: 6px; }
details.original { margin-top: 12px; }
details.original summary { cursor: pointer; color: var(--muted); font-size: 14px; }
details.original .qimg { margin-top: 8px; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reasons > span { color: var(--muted); font-size: 14px; margin-right: 4px; }

/* ---------- timed test ---------- */
.test { display: grid; gap: 14px; }
.test-bar {
  position: sticky; top: var(--sticky-top); z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  background: var(--surface); border-radius: 14px; padding: 8px 10px 8px 16px; box-shadow: 0 1px 0 var(--rule), 0 6px 16px -12px rgb(0 0 0 / 0.3);
}
.test-bar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); }
.timer.warn { color: var(--low); background: var(--low-soft); }
.timer.concealed { visibility: hidden; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; }
.test-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.panel { background: var(--surface); border-radius: 14px; padding: 14px; }
@container (min-width: 900px) {
  .test-body.with-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .test-body.with-panel .panel { position: sticky; top: calc(var(--sticky-top) + 70px); }
}
.q-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qnum { background: var(--ink); color: var(--bg); font-weight: 700; padding: 2px 10px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.flag.on { color: var(--low); }
.test-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin-top: 12px; background: var(--surface); border-radius: 14px; padding: 14px; }
.card .grid { background: none; padding: 0; }
.grid button { position: relative; padding: 9px 0; border-radius: 10px; font-variant-numeric: tabular-nums; }
.grid .answered { background: var(--accent-soft); border-color: var(--accent); }
.grid .current { outline: 2px solid var(--ink); outline-offset: 1px; }
.grid .flagged::after { content: "⚑"; position: absolute; top: -8px; right: -4px; color: var(--low); font-size: 13px; }
.legend { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ref dl { margin: 0; }
.ref dt { font-weight: 700; margin-top: 10px; }
.ref dd { margin: 0; }
#view > .review-item + .review-item { margin-top: 6px; }
details.review-item { background: var(--surface); border-radius: 12px; }
details.review-item summary { cursor: pointer; padding: 11px 14px; display: flex; gap: 10px; }
details.review-item .question { border-top: 1px solid var(--rule); border-radius: 0 0 12px 12px; }
.mark-ok { color: var(--good); font-weight: 700; }
.mark-bad { color: var(--low); font-weight: 700; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
@container (max-width: 560px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td:first-child { font-weight: 600; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 14px; }
}

/* ---------- resources ---------- */
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.links li { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.links a { font-weight: 700; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ---------- calculator ---------- */
.desmos { height: 460px; }
.sci input[name="expr"] { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.sci-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
.sci-history { list-style: none; padding: 0; margin: 6px 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- depth: resting surfaces, featured surfaces, and hairlines in dark mode ---------- */
:root {
  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-2: 0 1px 2px rgb(16 24 40 / 0.05), 0 10px 24px -8px rgb(16 24 40 / 0.16);
  --card-border: 1px solid transparent;
  --chart: #B37A06;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px -10px rgb(0 0 0 / 0.75);
    --card-border: 1px solid #2B3139;
    --chart: #B98529;
  }
}
.card, .question, .empty, details.review-item, .plan-card, .table-card, .rail-card, .score-hero, .kpi { border: var(--card-border); box-shadow: var(--shadow-1); }
.plan-card, .score-hero { box-shadow: var(--shadow-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede { max-width: 75ch; }

/* ---------- page header: title, test switch, "Jump to" ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.page-title { min-width: 0; }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exam-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.exam-switch button { border: 0; background: none; border-radius: 8px; padding: 6px 12px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.exam-switch button:hover:not(:disabled) { color: var(--ink); }
.exam-switch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.jump { gap: 8px; border-radius: 10px; padding: 7px 10px; color: var(--muted); font-weight: 400; font-size: 14px; }
.jump .icon { width: 17px; height: 17px; }
.jump kbd { font: 600 11px/1 var(--body); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 5px; }
@media (max-width: 820px) {
  .jump { display: none; }
  .page-tools, .exam-switch { width: 100%; }
  .exam-switch button { flex: 1; padding-inline: 6px; }
}

/* ---------- "Jump to" palette and confirmations ---------- */
.palette { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); margin-top: 12vh; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--pop); }
.palette::backdrop { background: rgb(10 12 16 / 0.45); }
.palette-box { display: grid; }
.palette input { border: 0; border-bottom: 1px solid var(--rule); border-radius: 14px 14px 0 0; padding: 14px 16px; font-size: 17px; background: transparent; width: 100%; }
.palette input:focus-visible { outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.palette li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; margin: 0; }
.palette li small { color: var(--muted); white-space: nowrap; }
.palette li[aria-selected="true"], .palette li:hover { background: var(--accent-soft); }
.palette .palette-empty { color: var(--muted); cursor: default; background: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: var(--pop); transition: opacity 0.18s ease, transform 0.18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 820px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- dashboard workspace ---------- */
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.ws-main { display: grid; gap: 16px; min-width: 0; }
.ws-rail { display: grid; gap: 12px; }
@container (max-width: 900px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-rail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.plan-card { background: var(--surface); border-radius: 14px; padding: 18px 20px 8px; }
.plan-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.plan-top h2 { font-size: 20px; font-weight: 600; margin: 3px 0 0; }
.tasks { list-style: none; padding: 0; margin: 12px 0 0; }
.tasks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); margin: 0; }
.task-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.tasks .done .task-check { background: var(--good); border-color: var(--good); color: var(--surface); }
.tasks .done .task-label { color: var(--muted); text-decoration: line-through; }
.tasks small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
button.link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: left; justify-content: flex-start; border-radius: 4px; }
button.link:hover:not(:disabled) { text-decoration: underline; }
.table-card { background: var(--surface); border-radius: 14px; padding: 14px 18px 8px; min-width: 0; }
.table-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 6px; }
.table-card-head h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-table th, .skills-table td { padding: 8px 12px 8px 0; vertical-align: middle; }
.sort { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: 4px; }
.sort:hover:not(:disabled) { color: var(--ink); }
.mastery { display: inline-flex; align-items: center; gap: 8px; }
.mastery .track { display: block; width: 80px; }
.mastery .fill { display: block; }
.rail-card { background: var(--surface); border-radius: 12px; padding: 14px 16px; }
.rail-label { font: 600 11.5px/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.rail-big { font: 800 24px/1.15 var(--display); margin: 0; font-variant-numeric: tabular-nums; }
.rail-big small { display: block; font: 600 13px/1.4 var(--body); color: var(--muted); margin-top: 2px; }
.rail-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 14px; }
.week { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11px; color: var(--muted); }
.week li { margin: 0; }
.week i { display: block; height: 16px; border-radius: 5px; background: var(--surface-2); margin-bottom: 3px; }
.week .on i { background: var(--accent); }
.queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.queue li { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.queue li span:last-child { color: var(--muted); white-space: nowrap; }

/* ---------- scores ---------- */
.score-hero { background: var(--surface); border-radius: 14px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; }
@container (max-width: 820px) { .score-hero { grid-template-columns: 1fr; } }
.hero-score { font: 800 52px/1 var(--display); letter-spacing: -0.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.hero-empty { font: 700 24px/1.2 var(--display); margin: 6px 0; }
.scale { margin-top: 18px; }
.scale-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); }
.scale-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.scale-target { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--muted); transform: translateX(-1px); }
.scale-dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface); transform: translate(-50%, -50%); }
.scale-ticks { position: relative; height: 16px; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scale-ticks span { position: absolute; transform: translateX(-50%); }
.scale-ticks span:first-child { transform: none; }
.scale-ticks span:last-child { transform: translateX(-100%); }
.scale-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.scale-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.scale-legend .key-dot { background: var(--ink); border-radius: 50%; }
.scale-legend .key-band { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.scale-legend .key-target { background: var(--muted); width: 3px; }
.chart { position: relative; min-width: 0; }
.chart h3 { margin: 0; font-size: 15px; }
.chart > p { font-size: 13px; margin: 0; }
.chart svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.chart-grid line { stroke: var(--rule); stroke-width: 1; }
.chart-axis text, .chart-note { fill: var(--muted); font: 12px var(--body); }
.chart-target { stroke: var(--muted); stroke-width: 1; }
.chart-area { fill: var(--chart); opacity: 0.1; }
.chart-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart-end { fill: var(--ink); font: 700 13px var(--body); }
.chart-cross { stroke: var(--muted); stroke-width: 1; }
.chart-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: var(--ink); color: var(--bg); border-radius: 6px; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
.chart-table { margin-top: 6px; font-size: 13px; color: var(--muted); }
.chart-table summary { cursor: pointer; }
.chart-empty { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 16px; border-radius: 12px; background: var(--surface-2); }
.kpis, .section-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border-radius: 12px; padding: 12px 16px; display: grid; gap: 2px; align-content: start; }
.kpi strong { font: 800 24px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.kpi .muted { font-size: 13px; }
.skill-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.skill-lists .card + .card { margin-top: 0; }
/* Four sections (the ACT, the MCAT) would make four narrow cards whose skill names wrap a word a line; two by two instead. */
.skill-lists:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.merit { margin-bottom: 14px; }
.merit p { max-width: 68ch; font-size: 14px; }
.merit-index { margin: 6px 0 10px; }
.merit-index strong { font-size: 34px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.official { margin-bottom: 14px; }
.official-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 8px; }
.official-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.official-form input[type=number] { width: 84px; font-variant-numeric: tabular-nums; }
.official-form input[type=text] { width: 180px; }
.lesson-list { margin-bottom: 14px; }
.lesson-list ul { list-style: none; margin: 6px 0 0; padding: 0; }
.lesson-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.lesson-list li:first-child { border-top: 0; }
.lesson-list li a { display: flex; gap: 12px; align-items: baseline; color: var(--ink); text-decoration: none; font-weight: 600; }
.lesson-list li a:hover span:last-child { text-decoration: underline; }
.lesson-code { min-width: 2.6em; font-variant-numeric: tabular-nums; color: var(--accent-ink); font-weight: 800; }
.lesson { max-width: 76ch; }
.lesson > p { line-height: 1.6; }
.lesson h2 { margin: 22px 0 8px; font-size: 17px; }
.terms { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.terms dt { font-weight: 700; }
.terms dd { margin: 0; color: var(--body); }
.worked { padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); }
.worked ol { margin: 6px 0; padding-left: 20px; line-height: 1.6; }
.lesson .links { padding-left: 20px; line-height: 1.8; }
.lesson .links a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .terms { grid-template-columns: 1fr; } .terms dd { margin-bottom: 6px; } }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.skill-list { list-style: none; padding: 0; margin: 0; }
.skill-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); margin: 0; }
.mastery-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mastery-chip i { width: 7px; height: 7px; border-radius: 50%; }
.mastery-chip.low { background: var(--low-soft); }
.mastery-chip.low i { background: var(--low); }
.mastery-chip.mid { background: var(--mid-soft); }
.mastery-chip.mid i { background: var(--mid); }
.mastery-chip.high { background: var(--good-soft); }
.mastery-chip.high i { background: var(--good); }
@container (max-width: 480px) {
  .skill-list li { gap: 8px; }
}

/* ---------- loading skeleton ---------- */
.skeleton { display: grid; gap: 16px; }
.sk { border-radius: 12px; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }
.sk-title { height: 48px; width: min(340px, 70%); }
.sk-card { height: 160px; }
.sk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sk-tile { height: 90px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ==========================================================================
   Appearance settings (js/settings.js). Theme, accent, text size, contrast and
   animation are data- attributes on <html>, applied before the first paint by
   index.html so nothing flashes while the app loads.
   ========================================================================== */

/* ---------- accent packs ---------- */
/* Each pack names its own light and dark values; the three theme blocks below pick a side.
   Nothing else in the palette changes with the accent. */
:root[data-accent="pencil"] {
  --a-light: #F2B01E; --a-ink-light: #7A5500; --a-soft-light: #FDF1D3; --a-on-light: #241A00; --a-chart-light: #B37A06;
  --a-dark: #F5C24A; --a-ink-dark: #F5C24A; --a-soft-dark: #3A3017; --a-on-dark: #241A00; --a-chart-dark: #B98529;
}
:root[data-accent="ocean"] {
  --a-light: #2E7FE8; --a-ink-light: #17529B; --a-soft-light: #E4EDFC; --a-on-light: #FFFFFF; --a-chart-light: #2E6FD0;
  --a-dark: #74AAF7; --a-ink-dark: #9CC5FA; --a-soft-dark: #17293F; --a-on-dark: #0B1A2E; --a-chart-dark: #6C9FE8;
}
:root[data-accent="forest"] {
  --a-light: #2F8A5B; --a-ink-light: #1D5B3B; --a-soft-light: #E2F2E9; --a-on-light: #FFFFFF; --a-chart-light: #2F8A5B;
  --a-dark: #5CC28A; --a-ink-dark: #86D6AA; --a-soft-dark: #14301F; --a-on-dark: #06180E; --a-chart-dark: #4FA877;
}
:root[data-accent="grape"] {
  --a-light: #7C5CD6; --a-ink-light: #513A93; --a-soft-light: #ECE7FB; --a-on-light: #FFFFFF; --a-chart-light: #6F4FC8;
  --a-dark: #A78BF0; --a-ink-dark: #C0ACF6; --a-soft-dark: #241B45; --a-on-dark: #140C2B; --a-chart-dark: #9070DE;
}
:root[data-accent="ember"] {
  --a-light: #D2542F; --a-ink-light: #8D3316; --a-soft-light: #FBE7E0; --a-on-light: #FFFFFF; --a-chart-light: #C24D2B;
  --a-dark: #F08A6A; --a-ink-dark: #F4A88E; --a-soft-dark: #3A1C12; --a-on-dark: #2A0D05; --a-chart-dark: #D97A55;
}

/* ---------- which side of each pack is in use ---------- */
/* Light is the default. The dark block repeats the palette from the top of this file so that an explicit
   light choice can win it back; the explicit blocks come last so a chosen theme beats the device setting. */
:root {
  --accent: var(--a-light, #F2B01E); --accent-ink: var(--a-ink-light, #7A5500);
  --accent-soft: var(--a-soft-light, #FDF1D3); --on-accent: var(--a-on-light, #241A00);
  --chart: var(--a-chart-light, #B37A06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: var(--a-dark, #F5C24A); --accent-ink: var(--a-ink-dark, #F5C24A);
    --accent-soft: var(--a-soft-dark, #3A3017); --on-accent: var(--a-on-dark, #241A00);
    --chart: var(--a-chart-dark, #B98529);
  }
}
:root[data-theme="dark"] {
  --bg: #121518; --surface: #1B1F25; --surface-2: #252B32; --ink: #E8EBEE; --muted: #9AA3AD; --rule: #2B3139;
  --side: #0B0D10; --side-ink: #C3CAD2; --side-strong: #FFFFFF; --side-muted: #7D8792; --side-raise: rgb(255 255 255 / 0.06);
  --side-on: rgb(255 255 255 / 0.09); --side-track: rgb(255 255 255 / 0.12); --side-edge: transparent;
  --good: #5CC28A; --good-soft: #173524; --mid: #E3B04B; --mid-soft: #3A2F14; --low: #EE7C6F; --low-soft: #3D1F1C;
  --mark: #6B5A12; --focus: var(--accent); --pop: 0 16px 40px -12px rgb(0 0 0 / 0.7);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px -10px rgb(0 0 0 / 0.75);
  --card-border: 1px solid #2B3139;
  --accent: var(--a-dark, #F5C24A); --accent-ink: var(--a-ink-dark, #F5C24A);
  --accent-soft: var(--a-soft-dark, #3A3017); --on-accent: var(--a-on-dark, #241A00);
  --chart: var(--a-chart-dark, #B98529);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #ECEFF3; --ink: #1A1F25; --muted: #636D78; --rule: #E0E4E9;
  --side: #FFFFFF; --side-ink: #3A424C; --side-strong: #14181D; --side-muted: #616A75; --side-raise: rgb(20 25 35 / 0.05);
  --side-on: rgb(20 25 35 / 0.07); --side-track: rgb(20 25 35 / 0.09); --side-edge: #E0E4E9;
  --good: #2F8A5B; --good-soft: #E2F2E9; --mid: #B37A06; --mid-soft: #FBF0D9; --low: #C4473A; --low-soft: #FBE7E4;
  --mark: #FFE08A; --focus: #1A1F25; --pop: 0 16px 40px -12px rgb(20 25 35 / 0.35);
  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-2: 0 1px 2px rgb(16 24 40 / 0.05), 0 10px 24px -8px rgb(16 24 40 / 0.16);
  --card-border: 1px solid transparent;
  --accent: var(--a-light, #F2B01E); --accent-ink: var(--a-ink-light, #7A5500);
  --accent-soft: var(--a-soft-light, #FDF1D3); --on-accent: var(--a-on-light, #241A00);
  --chart: var(--a-chart-light, #B37A06);
  color-scheme: light;
}
/* Export crops are black on white, so they are inverted on a dark background and left alone on a light one. */
:root[data-theme="dark"] .figure, :root[data-theme="dark"] .qimg, :root[data-theme="dark"] .zoom-img { filter: invert(0.9) hue-rotate(180deg); }
:root[data-theme="light"] .figure, :root[data-theme="light"] .qimg, :root[data-theme="light"] .zoom-img { filter: none; }

/* Text on the accent: the yellow needs dark ink, the blues and purples need white. */
.badge, .streak.on .streak-count, .today-mobile .streak.on .streak-count { color: var(--on-accent, #241A00); }

/* ---------- text size ---------- */
/* Defined unconditionally so the first paint is correct even before js/settings.js stamps <html>, and in
   the case where localStorage is blocked and the attributes are never stamped at all. */
:root { --on-accent: #241A00; }
:root { --text-scale: 1; }
:root[data-textsize="small"] { --text-scale: 0.94; }
:root[data-textsize="large"] { --text-scale: 1.12; }
:root[data-textsize="xlarge"] { --text-scale: 1.26; }
body { font-size: calc(16px * var(--text-scale)); }
h1 { font-size: calc(clamp(26px, 3.2vw, 30px) * var(--text-scale)); }
h2 { font-size: calc(19px * var(--text-scale)); }
h3 { font-size: calc(16px * var(--text-scale)); }
.passage, .stem { font-size: calc(16.5px * var(--text-scale)); }
.choice-btn { font-size: calc(16px * var(--text-scale)); }
.spr input { font-size: calc(18px * var(--text-scale)); }
.hint, .note, .feedback, .rationale { font-size: calc(14.5px * var(--text-scale)); }
button, .button { font-size: calc(15px * var(--text-scale)); }

/* ---------- high contrast ---------- */
:root[data-contrast="high"] {
  --muted: #333B45; --rule: #8D97A2; --card-border: 1px solid var(--rule);
  --shadow-1: none; --shadow-2: 0 2px 0 var(--rule);
}
:root[data-theme="dark"][data-contrast="high"],
:root[data-contrast="high"]:not([data-theme="light"]) { --muted: #C6CDD5; --rule: #6E7883; }
:root[data-contrast="high"] .card, :root[data-contrast="high"] .question, :root[data-contrast="high"] .kpi,
:root[data-contrast="high"] .rail-card, :root[data-contrast="high"] .plan-card, :root[data-contrast="high"] .table-card,
:root[data-contrast="high"] .empty, :root[data-contrast="high"] .score-hero, :root[data-contrast="high"] details.mistake {
  border: 1.5px solid var(--rule);
}
:root[data-contrast="high"] p a, :root[data-contrast="high"] .links a { text-decoration: underline; }
:root[data-contrast="high"] :focus-visible { outline-width: 3px; }
:root[data-contrast="high"] u.ul { text-decoration-color: currentColor; text-decoration-thickness: 3px; }

/* ---------- animation ---------- */
/* `rise` starts from a visible element and only moves it. An earlier version faded from opacity:0 with
   fill-mode `both`, which pinned a whole page at zero opacity whenever the animation was deferred rather than
   run -- the Library page was observed blank with all four children at opacity 0 seconds after load. Nothing
   that carries content may depend on an animation actually starting. */
@keyframes rise { from { opacity: 0.001; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { transform: scale(0.82); } to { transform: scale(1); } }
@keyframes slide-down { from { opacity: 0.001; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes celebrate { 0% { transform: scale(0.94); opacity: 0.001; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } }

/* Each page settles in from below, a little after the one above it.
   The fill mode is deliberately `backwards` and never `both`. With `both`, a page whose animation has not yet
   started stays pinned at the keyframe's opacity:0 indefinitely, and the whole page renders blank; that was
   observed on the Library page with every child still at opacity 0 four seconds after load. `backwards` holds
   the start state only during the delay, so content can never be gated behind an animation that fails to run.
   The delays are kept under a tenth of a second for the same reason. */
#view > * { animation: rise 0.26s cubic-bezier(0.2, 0.7, 0.3, 1); }
/* A redraw nobody asked for — the shared question library arriving and changing the counts — updates
   the page in place. Animating it in again reads as the whole screen glitching. */
#view[data-quiet] > * { animation: none; }
#view > *:nth-child(2) { animation-delay: 0.03s; }
#view > *:nth-child(3) { animation-delay: 0.05s; }
#view > *:nth-child(4) { animation-delay: 0.07s; }
#view > *:nth-child(n + 5) { animation-delay: 0.09s; }
/* Nothing moves during a timed test: the clock is running and the question should just be there. */
#view > .test, #view > .test * { animation: none; }

.side-nav a, .sync, .tabs a, .tabs button { transition: background-color 0.16s ease, color 0.16s ease; }
.side-nav a.on { animation: slide-down 0.22s ease both; }
.badge { animation: pop-in 0.22s cubic-bezier(0.2, 1.4, 0.5, 1) both; }
button, .button, .chip, .swatch, .exam-switch button { transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease; }
button:active:not(:disabled), .button:active { transform: scale(0.97); }
.choice-btn { transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.12s ease; }
.choice-btn:active:not(:disabled) { transform: scale(0.99); }
.card, .kpi, .rail-card, details.mistake { transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.kpi:hover, .rail-card:hover, details.mistake:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.fill, .goal-bar > i, .scale-band, .scale-dot { transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), left 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }
.feedback { animation: rise 0.26s ease; }
.correct .letter, .wrong .letter { animation: pop-in 0.28s cubic-bezier(0.2, 1.4, 0.5, 1) both; }
.tag { animation: rise 0.24s ease 0.06s both; }
.mistake[open] .mistake-body { animation: slide-down 0.2s ease; }
.empty.celebrate { animation: celebrate 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
.week .on i { animation: pop-in 0.3s cubic-bezier(0.2, 1.4, 0.5, 1) both; }
.streak.on .streak-count { animation: pop-in 0.3s cubic-bezier(0.2, 1.4, 0.5, 1) both; }

/* "Reduced" in Settings, and any device that asks for less movement, stop all of it. */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- more colour across the app ---------- */
.page-head { border-bottom: 0; background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 12%, var(--rule)) 42%, var(--rule)); background-repeat: no-repeat; background-position: bottom left; background-size: 100% 2px; }
.plan-card { border-left: 3px solid var(--accent); }
.score-hero { background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 58%); }
.rail-label { color: var(--accent-ink); }
.kpi { border-top: 3px solid var(--rule); }
.kpis .kpi:nth-child(1) { border-top-color: var(--accent); }
.kpis .kpi:nth-child(2) { border-top-color: var(--good); }
.kpis .kpi:nth-child(3) { border-top-color: var(--mid); }
.kpis .kpi:nth-child(4) { border-top-color: var(--low); }
.section-scores .kpi { border-top-color: var(--accent); }
.week .on i { background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--ink))); }
.qnum { background: var(--accent); color: var(--on-accent, #241A00); }
.seg a.active { color: var(--accent-ink); }
.eyebrow { color: var(--accent-ink); }
.page-title .eyebrow { color: var(--muted); }

/* Underlined words and phrases a reading question asks about. */
u.ul { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }

/* ---------- mistakes ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.mistake-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mistake-list > li { margin: 0; }
details.mistake { background: var(--surface); border: var(--card-border); border-radius: 12px; box-shadow: var(--shadow-1); }
details.mistake summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-radius: 12px; list-style: none; }
details.mistake summary::-webkit-details-marker { display: none; }
details.mistake[open] summary { border-radius: 12px 12px 0 0; }
.mistake-head { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mistake-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mistake-meta { font-size: 13px; color: var(--muted); }
.mistake-body { display: grid; gap: 12px; padding: 0 16px 16px; border-top: 1px solid var(--rule); }
.mistake-body .question { background: none; border: 0; box-shadow: none; padding: 14px 0 0; }
.pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill.due { background: var(--accent-soft); color: var(--accent-ink); }
.pill.good { background: var(--good-soft); color: var(--good); }

/* ---------- settings ---------- */
.settings-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.setting h3 { font-size: calc(19px * var(--text-scale)); font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
/* Settings are grouped: Appearance, Accessibility, Study. */
#view > .settings-heading { margin-top: 28px; margin-bottom: -6px; }
.settings-heading { font-size: calc(13px * var(--text-scale)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.swatches { display: grid; gap: 8px; margin-top: 12px; }
.swatch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 12px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); text-align: left; }
.swatch:hover:not(:disabled) { border-color: var(--muted); }
.swatch.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.swatch-dot { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.swatch-name { grid-column: 2; font-weight: 700; }
.swatch small { grid-column: 2; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.swatch.on small { color: inherit; opacity: 0.85; }
.swatch:not(:has(.swatch-dot)) .swatch-name, .swatch:not(:has(.swatch-dot)) small { grid-column: 1 / -1; }
.swatch[data-preview="pencil"] .swatch-dot { background: linear-gradient(135deg, #F2B01E, #C88F0C); }
.swatch[data-preview="ocean"] .swatch-dot { background: linear-gradient(135deg, #2E7FE8, #17529B); }
.swatch[data-preview="forest"] .swatch-dot { background: linear-gradient(135deg, #2F8A5B, #1D5B3B); }
.swatch[data-preview="grape"] .swatch-dot { background: linear-gradient(135deg, #7C5CD6, #513A93); }
.swatch[data-preview="ember"] .swatch-dot { background: linear-gradient(135deg, #D2542F, #8D3316); }
.sample-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- hints and explanations from Gemini ---------- */
.ai-note { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); border-left: 3px solid var(--accent); }
.ai-note strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 4px; color: var(--accent-ink); }
.ai-note p { margin-bottom: 0.5em; }
.ai-note small { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.ai-note.thinking { color: var(--muted); font-style: italic; }
.ai-note.bad { background: var(--low-soft); border-left-color: var(--low); color: var(--ink); }
.mistake-body .ai-note { margin-top: 0; }

/* ---------- shared library: invite code and testers ---------- */
.code-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.code-form label { font-weight: 600; font-size: 14px; }
.code-form input { flex: 1 1 12rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
#shared-library h3 { font-size: 16px; margin: 20px 0 4px; }
.tester-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.tester-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.tester-list li > span:first-child { font-weight: 600; }
.tester-list button.link { margin-left: auto; color: var(--low); }

/* A science passage is a picture of a whole page of tables and diagrams, so it is given its own room and
   kept scrollable rather than shrunk to the width of a phone, where it would be unreadable. */
.passage-image { max-height: 60vh; overflow: auto; background: var(--surface-2); border-radius: 10px; padding: 8px; }
.passage-image .qimg { margin: 0 auto; }

/* Where a hint button would be for someone signed out: Gemini only answers signed-in students. */
.hint-signin { align-self: center; font-weight: 600; color: var(--muted); }

/* Bring-your-own Gemini key, in Settings. */
.own-key h3 { margin: 14px 0 4px; font-size: 16px; }
.own-key .steps { margin: 6px 0 10px; padding-left: 20px; line-height: 1.6; max-width: 72ch; }
.own-key .steps li + li { margin-top: 4px; }
.own-key-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.own-key-form label { flex-basis: 100%; font-weight: 600; font-size: 14px; }
.own-key-form input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Shown when the app is opened inside another page, such as an about:blank tab (see frameNoteHtml). */
.frame-note { display: grid; gap: 8px; border: 1px solid var(--rule); }
.frame-note p { margin: 0; max-width: 78ch; color: var(--ink); }
.frame-note .actions { margin: 0; }

/* The admin's invite links: the link itself, and a button to copy it. */
.link-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 8px; }
.link-row input { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Pacing: typical time a question against test-day pace, which sits at the middle of each bar. */
.pace-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.pace-list li { display: grid; grid-template-columns: minmax(5.5rem, 9rem) minmax(60px, 1fr) auto auto; align-items: center; gap: 6px 14px; }
.pace-list .name { font-weight: 600; }
.pace-track { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); }
.pace-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink); }
.pace-fill.high { background: var(--good); }
.pace-fill.mid { background: var(--mid); }
.pace-fill.low { background: var(--low); }
.pace-mark { position: absolute; left: calc(50% - 1px); top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); }
.pace-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.pace-num small { font-weight: 400; color: var(--muted); }
.pacing h3 { margin: 16px 0 2px; }
@media (max-width: 560px) { .pace-list li { grid-template-columns: minmax(0, 1fr) auto auto; } .pace-track { grid-column: 1 / -1; grid-row: 2; } }
.pace-note { margin: 0; font-size: calc(14px * var(--text-scale)); color: var(--muted); font-variant-numeric: tabular-nums; }
.pace-note.low { color: var(--low); }
.pace-note.mid { color: var(--mid); }
.feedback .guess-note { margin: 6px 0 0; }
.official-form input[type=date] { width: 150px; }
.official-form label small { font-weight: 400; }
.official td .link { color: var(--low); }

/* Flashcards: one term at a time, its meaning shown on request. */
.flashcard { display: grid; gap: 8px; justify-items: center; text-align: center; padding: clamp(28px, 6vw, 56px) 20px; }
.flashcard .eyebrow { margin: 0; }
.flash-term { margin: 0; font-size: calc(clamp(24px, 4vw, 32px) * var(--text-scale)); font-weight: 800; }
.flash-meaning { margin: 4px 0 0; max-width: 52ch; font-size: calc(18px * var(--text-scale)); line-height: 1.5; }
.flashcard .hint { margin: 0; }

/* On a narrow screen a revealed answer's "Correct answer" or "Your answer" goes under its text, rather than squeezing
   the text into a column a few words wide. */
@container (max-width: 560px) {
  .choice-btn:has(.tag) { flex-wrap: wrap; row-gap: 4px; }
  .choice-btn:has(.tag) > span:not(.letter):not(.tag) { flex: 1 1 0; min-width: 0; }
  .choice-btn .tag { flex-basis: 100%; margin-left: 42px; padding-left: 0; }
}

/* ---------- pictures: Zoom, and ones wider than the screen ---------- */
.zoom-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: calc(13px * var(--text-scale)); font-weight: 700; }
.zoom-btn .icon { width: 16px; height: 16px; }
.zoom-btn.icon-only { flex: none; align-self: center; margin: 0; padding: 0; width: 34px; height: 34px; justify-content: center; }
.zoom-view { width: min(100vw - 24px, 1400px); max-width: none; height: min(100dvh - 24px, 1000px); max-height: none; padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--pop); }
.zoom-view[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.zoom-view::backdrop { background: rgb(0 0 0 / 0.6); }
.zoom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.zoom-bar [data-zoom="in"], .zoom-bar [data-zoom="out"] { width: 40px; font-size: 20px; line-height: 1; padding-inline: 0; }
.zoom-bar [data-zoom="close"] { margin-left: auto; }
.zoom-level { min-width: 3.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.zoom-stage { overflow: auto; padding: 16px; background: var(--surface-2); }
.zoom-img { display: block; max-width: none; height: auto; margin: 0 auto; background: #fff; border-radius: 6px; }
/* A picture running off the edge fades there until it has been scrolled to the end, with a line to say so. */
.wide:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.swipe-hint { margin: 4px 0 0; font-size: calc(13px * var(--text-scale)); font-weight: 600; color: var(--accent-ink); }
.tip { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: calc(14px * var(--text-scale)); }

/* ---------- phones: the top bar, the More sheet, and timed tests ---------- */
@media (max-width: 820px) {
  .top-sync { width: auto; height: auto; padding: 7px 11px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--side-ink); text-decoration: none; white-space: nowrap; }
  .top-sync.signin { background: var(--accent); color: var(--on-accent); }
  .top-sync.bad { color: var(--low); }
  .sheet-tests { display: grid; gap: 6px; padding: 8px 6px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
  .sheet-tests .eyebrow { margin: 0; }
  .sheet-tests .exam-switch { width: 100%; }
  .sheet-tests .exam-switch button { flex: 1; padding-inline: 4px; }
  body.in-test .tabs { display: none; }
  body.in-test #view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
.exit-test { display: none; }
@media (max-width: 820px) { .exit-test { display: inline-flex; } }

/* ---------- the sidebar's running-test line ---------- */
.side-nav .label.has-sub { display: grid; line-height: 1.2; }
.nav-sub { font-size: 12px; font-weight: 600; color: var(--accent); white-space: normal; }
.shell:not(.collapsed) .side-nav .badge.live { display: none; }

/* ---------- first visit ---------- */
.welcome h2 { margin-bottom: 4px; }
.welcome p { margin: 0; }
.welcome-steps { margin: 10px 0 12px; padding-left: 22px; display: grid; gap: 6px; max-width: 72ch; }

/* ---------- shorter lists, with the rest on request ---------- */
.table-more { padding: 10px 4px 2px; }
.skill-list:not(.expanded) li.extra { display: none; }
.show-all { margin-top: 10px; }
.practice-link { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink); }

/* ---------- Review's tabs ---------- */
.review-tabs { flex-wrap: wrap; }
.review-tabs .count { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.review-tabs a.active .count { background: var(--accent-soft); color: var(--accent-ink); }

/* A question College Board also uses on its official practice tests: practice shows these last. */
.on-practice-test { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--accent-soft, var(--surface-2)); color: var(--accent-ink, var(--ink)); font-weight: 700; white-space: nowrap; }

/* Under a College Board picture that numbers its statements 1, 2, 3 while the answers say I, II, III. */
.numbering-note { margin: 8px 0 12px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-size: 14px; border-radius: 0 6px 6px 0; }

/* A setting that can't be used yet (AI hints while signed out): greyed out, with a note saying why. */
.setting.locked .swatch { opacity: 0.45; cursor: not-allowed; }