/* Design tokens (UI_SPEC §3). Light values on :root; the dark set is repeated for OS dark and for a forced data-theme="dark". */
:root {
  --bg: #f7f6f2; --surface: #ffffff; --surface-2: #f1efe9; --border: #e4e1d8; --border-strong: #cfcbc0;
  --text: #1c1b19; --text-2: #57554f; --text-3: #6e6b63;
  --accent: #c15f3c; --accent-strong: #a94f30; --accent-hover: #964527; --accent-soft: #f7e8e1; --on-accent: #ffffff;
  --success: #276b43; --success-soft: #e7f3eb;
  --danger: #b3372f; --danger-soft: #fbeae8;
  --warning: #8a5700; --warning-soft: #fdf2dc;
  --info: #2f5f9e; --info-soft: #e8eff9;
  --overlay: rgba(28,27,25,.45);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.5rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28,27,25,.06);
  --shadow-2: 0 4px 16px rgba(28,27,25,.08);
  color-scheme: light;
  --ring: 2px solid var(--accent); /* focus outline, drawn with outline-offset 2px so it never merges with an accent border */
  --field-border: #878378; /* text fields and selects: 3.8:1 on --surface, ≥3.2:1 on --bg and --surface-2 (§7: control outlines ≥3:1; --border is 1.3:1) */
  /* Stacking layers, lowest first. Order them here, never with a literal z-index elsewhere (local 1–3 inside a card excepted).
     banner: no layer, it is in normal flow in #banner-slot between the header and <main>.
     The drawer starts below the header so the timer and progress strip stay visible; dialogs sit above drawers. */
  --z-menu: 3;     /* card ⋯ menu pop */
  --z-notes: 4;    /* docked notes panel */
  --z-header: 5;   /* sticky header (timer, progress) */
  --z-footer: 5;   /* run footer */
  --z-drawer: 30;  /* navigator and modal notes drawers: cover the footer, not the header */
  --z-dialog: 40;  /* dialog() overlay: above drawers and everything else */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1918; --surface: #232220; --surface-2: #2c2a28; --border: #3a3836; --border-strong: #57544f;
    --text: #efede6; --text-2: #c4c1b8; --text-3: #a4a29a;
    --accent: #d97757; --accent-strong: #d97757; --accent-hover: #e38a6c; --on-accent: #1a1918;
    --success: #6fcf97; --danger: #f08a80; --warning: #e8b04a; --info: #8ab4f0; --field-border: #7a766e;
    --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--surface)); --success-soft: color-mix(in srgb, var(--success) 15%, var(--surface));
    --danger-soft: color-mix(in srgb, var(--danger) 15%, var(--surface)); --warning-soft: color-mix(in srgb, var(--warning) 15%, var(--surface));
    --info-soft: color-mix(in srgb, var(--info) 15%, var(--surface));
    --overlay: rgba(0,0,0,.65); --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 4px 16px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1918; --surface: #232220; --surface-2: #2c2a28; --border: #3a3836; --border-strong: #57544f;
  --text: #efede6; --text-2: #c4c1b8; --text-3: #a4a29a;
  --accent: #d97757; --accent-strong: #d97757; --accent-hover: #e38a6c; --on-accent: #1a1918;
  --success: #6fcf97; --danger: #f08a80; --warning: #e8b04a; --info: #8ab4f0; --field-border: #7a766e;
  --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--surface)); --success-soft: color-mix(in srgb, var(--success) 15%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 15%, var(--surface)); --warning-soft: color-mix(in srgb, var(--warning) 15%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info) 15%, var(--surface));
  --overlay: rgba(0,0,0,.65); --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 4px 16px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* button and flex rules set display, which would otherwise beat the hidden attribute */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 16px; height: 16px; flex: none; }
.badge .icon { width: 12px; height: 12px; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
strong, b, th { font-weight: 600; } /* the results score is the only weight above 600 */
code { font-family: var(--mono); font-size: .9em; }
/* app shell (§5): 56px sticky header, context centred, timer right, 4px answered/total strip on its bottom edge */
.top { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: var(--s3); height: 56px; padding: 0 var(--s4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: var(--z-header); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; border-radius: var(--r-sm); }
.top-right button { white-space: nowrap; }
.top-right { justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.logo { width: 22px; height: 22px; fill: var(--accent); flex: none; }
.hud { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-2); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--surface-2); }
.progress > span { display: block; width: var(--p, 0); height: 100%; background: var(--accent); border-radius: 0 var(--r-pill) var(--r-pill) 0; transition: width .16s ease-out; }
.timer { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.timer-clock { display: inline-flex; align-items: center; gap: var(--s2); }
/* the toggle covers the whole pill (font-size 0 hides its label but keeps it as the accessible name) */
#timer-toggle { position: absolute; inset: -1px; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: none; font-size: 0; color: inherit; }
#timer-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent); }
.timer.off { padding: 0; }
.timer.off .timer-clock { display: none; }
.timer.off #timer-toggle { position: static; min-height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.timer.warn { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.timer.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 25%, transparent); } }
@media (max-width: 719px) { .brand-name { display: none; } } /* same breakpoint as the compact footer */
main { max-width: 1000px; margin: 0 auto; padding: 16px 16px 90px; }
h1 { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.25; margin: var(--s2) 0 var(--s1); }
h2 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; margin: var(--s5) 0 var(--s2); }
.label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.num, td, th { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); font-size: var(--fs-sm); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s5); margin: var(--s3) 0; }
.card > h2:first-child, .modal > h2:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spread { justify-content: space-between; }
/* buttons (§4): plain <button> is the secondary md variant; .primary .ghost .danger and .sm modify it */
button { font: inherit; font-size: var(--fs-sm); font-weight: 500; min-height: 40px; padding: 0 var(--s4); border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); transition: background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out; }
button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
:focus-visible { outline: var(--ring); outline-offset: 2px; }
button.primary { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ghost { border-color: transparent; background: none; color: var(--text-2); }
button.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--text); }
button.danger { color: var(--danger); }
button.danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
button.sm { min-height: 32px; padding: 0 var(--s3); }
/* inline text action (file picker, jump-to-question links) until Phases 3.3 and 5.3 rebuild those spots */
button.link, button.link:hover:not(:disabled) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; padding: 0 2px; } /* 32px tall hit area; text lines up with the paragraph */
button.link:hover:not(:disabled) { text-decoration-thickness: 2px; }
button:disabled { opacity: .45; cursor: default; }
/* pill = metadata (exam code, domain, objective id); badge = status, with a dot */
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; vertical-align: middle; background: var(--surface-2); color: var(--text-2); }
.pill.mono { font-family: var(--mono); }
.badge { font-weight: 600; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge:has(> .icon)::before { display: none; } /* the icon replaces the dot */
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.info { background: var(--info-soft); color: var(--info); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.section-label { margin: var(--s5) 0 var(--s2); }
.exam-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); transition: box-shadow .14s ease-out, border-color .14s ease-out; }
.exam-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.exam-card:has(.exam-title-btn:focus-visible) { outline: var(--ring); outline-offset: 2px; }
.exam-title-wrap { margin: var(--s1) 0 0; font-size: var(--fs-lg); line-height: 1.35; }
.exam-title-btn { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-lg); font-weight: 600; color: var(--text); text-align: left; cursor: pointer; display: inline; }
.exam-title-btn:focus-visible { outline: none; }
.exam-title-btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); z-index: 0; }
.exam-card a, .exam-card button:not(.exam-title-btn), .exam-card details { position: relative; z-index: 1; }
.card-head-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.card-head-actions { display: flex; align-items: center; gap: var(--s2); }
.exam-real-line { margin: 0; }
.card-last-score { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); min-height: 24px; }
.sparkline { vertical-align: middle; color: var(--accent); margin-left: var(--s1); }
.card-quick-mocks { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s2); }
.quick-mock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.quick-mock-link { font-size: var(--fs-sm); color: var(--accent-strong); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: var(--s1); border-radius: var(--r-sm); }
.quick-mock-link:hover { text-decoration: underline; color: var(--accent-hover); }
.card-chev { display: none; }
/* <640px (§6.7): the exam card collapses to a compact row: title, then code pill and last score; chevron at the right. The real-exam line,
   bank size and quick-mock links stay available on the exam page (the link row stays under the row so a quick mock is still one tap). */
@media (max-width: 639px) {
  .exam-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); align-items: center; }
  .exam-card > .exam-title-wrap { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--fs-md); }
  .exam-card > .card-chev { display: block; grid-column: 2; grid-row: 1; justify-self: end; color: var(--text-3); }
  .exam-card > .card-head-meta { grid-row: 2; justify-content: flex-start; justify-self: start; width: auto; }
  .exam-card > .card-last-score { grid-column: 1 / -1; grid-row: 2; justify-self: end; } /* shares row 2 with the pill, right-aligned, so a long score line can't squeeze the title column */
  .exam-card > .card-head-meta { grid-column: 1; }
  .exam-card .sparkline { display: none; }
  .exam-card > .exam-real-line, .exam-card .card-head-actions .label { display: none; }
  .exam-card > .card-head-meta .card-head-actions { margin-left: var(--s2); }
  .exam-card > .card-quick-mocks { grid-column: 1 / -1; grid-row: 3; padding-top: var(--s2); gap: 0; }
  .exam-card .exam-title-btn { font-size: var(--fs-md); }
  .grid2 { gap: var(--s2); }
  .grid2 > .card { margin: 0; }
}
.card-menu { position: relative; display: inline-block; }
.card-menu > summary { list-style: none; cursor: pointer; }
.card-menu > summary::-webkit-details-marker { display: none; }
.card-menu .menu-pop { position: absolute; top: 100%; right: 0; margin-top: var(--s1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--s1); z-index: var(--z-menu); min-width: 120px; }
.card-menu[open] > summary { background: var(--surface-2); }
.continue-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.continue-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(200px, 2fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); }
.continue-row:last-child { border-bottom: none; }
.continue-info { min-width: 0; }
.continue-progress { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.continue-progress .bar { flex: 1; min-width: 60px; }
.continue-progress span { white-space: nowrap; font-size: var(--fs-sm); }
.continue-action { display: flex; justify-content: flex-end; }
@media (max-width: 639px) {
  .continue-row { grid-template-columns: 1fr auto; row-gap: var(--s2); padding: var(--s3) var(--s4); }
  .continue-progress { grid-column: 1 / -1; }
  .continue-action { grid-row: 1; grid-column: 2; }
}
.section-head { display: flex; align-items: center; justify-content: space-between; margin: var(--s5) 0 var(--s2); }
.section-head .section-label { margin: 0; }
.attempts-card { padding: 0; overflow: hidden; }
.attempts-card .empty { padding: var(--s5); margin: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.attempts-table { width: 100%; border-collapse: collapse; }
.attempts-table th, .attempts-table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.attempts-table th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.attempts-table tbody tr:last-child td { border-bottom: none; }
.attempts-table .badge { font-size: var(--fs-xs); }
/* question runner */
.pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s5); }
/* scenario split (§6.3, ≥1024px): 40/60, each pane scrolls inside the viewport between header and footer */
main.wide { max-width: 1280px; }
body:has(main.wide) .foot > div { max-width: 1280px; }
.qwrap.split { display: grid; grid-template-columns: 2fr 3fr; gap: var(--s4); height: calc(100dvh - 56px - var(--banner-h, 0px) - 16px - 90px); } /* --banner-h is set from #banner-slot's size */
.qwrap.split > .pane { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.scen-head { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); padding: var(--s4) var(--s5); background: var(--info-soft); border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.scen-head .label, .scen-panel .label { color: var(--info); }
.scen-head h2 { margin: var(--s1) 0 0; }
/* <1024px: collapsible scenario at the top of the question pane */
.scen-panel { margin-bottom: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.scen-panel > summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--info-soft); cursor: pointer; list-style: none; border-radius: var(--r-md); }
.scen-panel > summary::-webkit-details-marker { display: none; }
.scen-panel > summary .icon { transition: transform .16s ease-out; }
.scen-panel[open] > summary .icon { transform: rotate(90deg); }
.scen-panel[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; }
.scen-title { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scen-body { padding: var(--s3) var(--s4) var(--s4); }
/* notes: docked beside the content from 1024px (between header and footer), a modal drawer below that */
.notes-panel { position: fixed; top: 56px; right: 0; bottom: 65px; width: 360px; z-index: var(--z-notes); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); }
@media (min-width: 1024px) { main.notes-side { margin-right: calc(360px + var(--s4)); } }
#notes-panel.drawer { width: min(360px, 100%); }
.notes-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5); }
.notes-body textarea { flex: 1; min-height: 160px; resize: none; }
.notes-body .muted { margin: 0; }
.qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.qmeta .pill { height: auto; min-height: 22px; padding-block: 2px; white-space: normal; line-height: 1.35; } /* long domain names wrap instead of widening the page at 320px */
.qmeta-actions { display: flex; gap: var(--s1); margin-left: auto; }
.flag.on .icon { color: var(--warning); }
.flag.on .icon path:last-child { fill: currentColor; }
.stem { font-size: var(--fs-lg); font-weight: 500; line-height: 1.6; max-width: 75ch; margin: var(--s4) 0 var(--s2); }
.instr { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
/* answer option (§4): control + letter + text; the strike toggle is a sibling laid over the row's right edge */
.opts { display: grid; gap: var(--s2); margin-top: var(--s4); }
.optrow { position: relative; }
.opt { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--s3); min-height: 56px; padding: var(--s3) 52px var(--s3) var(--s4);
  border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 400; line-height: 1.5; text-align: left; }
.opt .key { flex: none; min-width: 1em; color: var(--text-3); font-weight: 600; }
.ctl { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--text-2); border-radius: 50%; } /* --text-2 outline: 3:1+ on every option fill */
.ctl.box { border-radius: 5px; }
.opt.sel .key { color: var(--text-2); } /* --text-3 on --accent-soft is 4.46:1 in light */
.opt.sel .ctl { background: var(--accent-strong); border-color: var(--accent-strong); }
.opt.sel .ctl::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); }
.opt.sel .ctl.box::after { width: 10px; height: 5px; border-radius: 0; background: none; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.opt.sel, .opt.sel:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* base button:hover outranks .opt.sel */
/* practice reveal disables the options; keep them at full opacity so the correct answer is not greyed out */
.opt:disabled { opacity: 1; cursor: default; }
.opt:disabled:not(.ok):not(.bad) { color: var(--text-2); }
.opt.ok { background: var(--success-soft); border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.opt.bad { background: var(--danger-soft); border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.opt.ok .ctl, .opt.bad .ctl { border: none; }
.opt.ok .ctl { color: var(--success); } .opt.bad .ctl { color: var(--danger); }
.ctl .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.opt .pill { margin-left: var(--s2); }
.is-struck .txt { text-decoration: line-through; color: var(--text-3); }
.is-struck .opt:not(:disabled) .ctl { visibility: hidden; } /* a revealed option keeps its check or x */
.strikebtn { position: absolute; top: 50%; right: var(--s2); transform: translateY(-50%); width: 32px; min-height: 32px; padding: 0; opacity: 0; }
.optrow:hover .strikebtn, .optrow:focus-within .strikebtn, .is-struck .strikebtn { opacity: 1; }
@media (hover: none) { .strikebtn { opacity: 1; } }
.strikebtn.on, .strikebtn.on:hover:not(:disabled) { color: var(--danger); }
.why { border-left: 3px solid var(--accent); padding: 8px 12px; margin-top: 12px; background: var(--accent-soft); border-radius: 0 8px 8px 0; }
/* run footer (§5, §6.3): 64px, Previous left, Review all + Notes centre, the one primary on the right */
.feedback { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: var(--r-md); background: var(--surface); }
.feedback.bad { border-left-color: var(--danger); }
.feedback-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.feedback-head .pill { min-width: 0; max-width: 100%; }
.pill .mono { font-family: var(--mono); }
.pill .clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.feedback p { margin: var(--s2) 0 0; }
.foot { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--s3) var(--s4); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(0 0 0 / .06); z-index: var(--z-footer); }
.foot > div { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: var(--s2); }
.foot-left, .foot-mid, .foot-right { display: flex; align-items: center; gap: var(--s2); }
.foot-mid { flex: 1; justify-content: center; } /* centred between the sides, so a wide right side can't push off-screen */
.foot button { white-space: nowrap; }
.has-dot { position: relative; }
.has-dot.on::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* narrow (<720px, where the full labels of the widest state stop fitting): one row, icon-only Previous / Review all / Notes (names stay for screen readers) */
@media (max-width: 719px) {
  .foot { padding: var(--s3); }
  .foot > div { gap: var(--s1); }
  .foot-mid { flex: 0 0 auto; }
  .foot-right { margin-left: auto; gap: var(--s1); }
  /* before Check in practice: "Check" (name stays "Check answer") beside an icon-only Next or a short "Finish" */
  .foot-left button, .foot-mid button, .foot-right #next:not(.primary) { width: 44px; padding: 0; }
  .foot-right button { padding: 0 var(--s3); }
  .foot .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
textarea { width: 100%; min-height: 90px; font: inherit; padding: 8px; border-radius: 6px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); }
/* review grid */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin: 12px 0; }
.rgrid button { position: relative; padding: 8px 0; text-align: center; background: var(--surface); font-variant-numeric: tabular-nums; }
/* tiles per §6.4: answered is a neutral fill plus a check (the fill alone is too close to unanswered), the flag sits top right on any fill,
   current is an --accent-soft fill with a 1px accent border: a fill, not a ring, so it never looks like the focus outline */
.rgrid button.answered, .tile-key.answered { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); font-weight: 600; }
.rgrid button .icon { position: absolute; width: 12px; height: 12px; }
.rgrid .t-flag .icon, .tile-key .t-flag .icon { top: 3px; right: 3px; color: var(--warning); }
.rgrid .t-check .icon, .tile-key .t-check .icon { bottom: 3px; right: 3px; color: var(--text-2); stroke-width: 3; }
/* practice: a checked question shows its outcome */
.rgrid button.ok, .tile-key.ok { background: var(--success-soft); border-color: var(--success); }
.rgrid button.bad, .tile-key.bad { background: var(--danger-soft); border-color: var(--danger); }
.rgrid button.ok .t-check .icon, .tile-key.ok .t-check .icon { color: var(--success); }
.rgrid .t-x .icon, .tile-key .t-x .icon { bottom: 3px; right: 3px; color: var(--danger); stroke-width: 3; }
.tile-key .t-x .icon { bottom: 1px; right: 1px; }
.rgrid button.current, .tile-key.current { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; } /* --accent-strong on this fill is only 4.1:1 in dark */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tile-key { position: relative; display: inline-block; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.tile-key .icon { position: absolute; width: 9px; height: 9px; }
.tile-key .t-flag .icon { top: 1px; right: 1px; }
.tile-key .t-check .icon { bottom: 1px; right: 1px; }
/* drawers (§6.4 navigator, §6.3 notes): right side on desktop, full-screen sheet under 640px */
.drawer-wrap { position: fixed; inset: 56px 0 0 0; z-index: var(--z-drawer); } /* below the header, so time and answered/total stay on screen */
.scrim { position: absolute; inset: 0; background: var(--overlay); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-2); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: 0 var(--s3) 0 var(--s5); border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s4) var(--s5); }
.drawer-body > .muted { margin: 0; }
.drawer-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--border); }
.icon-btn { width: 32px; padding: 0; }
.drawer-wrap.enter .drawer { animation: drawer-in .2s ease-out; }
.drawer-wrap.enter .scrim { animation: fade-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 639px) { .drawer, #notes-panel.drawer { width: 100%; border-left: 0; } .drawer-body, .drawer-foot { padding-left: var(--s4); padding-right: var(--s4); } .drawer-head { padding-left: var(--s4); } }
/* chips are filters (§2): pressed = inverted neutral */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.chip { min-height: 32px; padding: 0 var(--s3); border-radius: var(--r-pill); }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--surface); }
.segmented { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.segmented.wide { display: flex; width: 100%; }
.segmented.wide .seg-btn { flex: 1; text-align: center; }
.seg-btn { background: none; border: none; border-radius: var(--r-sm); padding: 6px 14px; font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer; min-height: 32px; transition: background-color .14s ease-out, color .14s ease-out, box-shadow .14s ease-out; }
.seg-btn:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.seg-btn.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--field-border); } /* the selected state is a >=3:1 outline too, not only a fill */
.setup-card { display: flex; flex-direction: column; gap: var(--s3); }
.setup-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.setup-label { min-width: 60px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); }
.setup-actions { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.perf-table { width: 100%; border-collapse: collapse; }
.perf-table th, .perf-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.perf-table th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.perf-table tbody tr:last-child td { border-bottom: none; }
.perf-score-cell { display: flex; align-items: center; gap: var(--s2); min-width: 160px; }
.perf-score-cell .bar { flex: 1; min-width: 60px; }
.setup-footer { margin-top: var(--s4); }
.flag-list { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.flag-list > li { min-width: 0; }
.flag-row { width: 100%; min-height: 44px; flex-wrap: wrap; justify-content: flex-start; gap: var(--s1) var(--s3); padding-block: var(--s2); text-align: left; font-weight: 400; }
.flag-row .pill { max-width: 100%; height: auto; min-height: 22px; white-space: normal; }
.flag-row .clip { flex: 1 0 100%; } /* the stem preview gets its own line, so a long domain can't push it out */
.flag-row .num { flex: none; font-weight: 600; }
.flag-row .clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.empty { margin: var(--s5) 0; text-align: center; color: var(--text-3); }
/* modal; 200ms enter, like the drawers (§7) */
@keyframes dialog-in { from { transform: translateY(8px); opacity: 0; } }
.overlay { animation: fade-in .2s ease-out; }
.overlay > .modal { animation: dialog-in .2s ease-out; }
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: var(--z-dialog); padding: 16px; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s5); max-width: 480px; width: 100%; max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--border); }
.dlg-body > p { margin: var(--s2) 0 0; color: var(--text-2); }
.keys { display: grid; gap: var(--s1); margin: var(--s3) 0; }
.keys > div { display: grid; grid-template-columns: 72px 1fr; align-items: baseline; gap: var(--s3); }
.keys dt, .keys dd { margin: 0; } .keys dd { font-size: var(--fs-sm); }
kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--surface-2); font: 600 var(--fs-xs)/1.6 var(--mono); text-align: center; color: var(--text); }
#banner-slot:empty { display: none; }
#banner-slot { padding-top: var(--s3); } /* padding, not a child margin, so the slot's height is the full space the banner takes */
.banner { display: flex; align-items: center; gap: var(--s3); max-width: 1000px; margin: 0 auto; padding: var(--s2) var(--s2) var(--s2) var(--s4); background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--r-md); }
.banner p { flex: 1; margin: 0; font-size: var(--fs-sm); color: var(--text); }
@media (max-width: 1031px) { .banner { margin-left: var(--s4); margin-right: var(--s4); } }
/* docked notes sit at the right edge from 56px down, so the banner slot gets the same inset as <main> (and main's side padding),
   or its dismiss button would be under the panel; its height, and so --banner-h, is unchanged in kind */
@media (min-width: 1024px) { body:has(main.notes-side) #banner-slot { margin-right: calc(360px + var(--s4)); padding-inline: var(--s4); } }
@media (max-width: 719px) { #shortcuts-btn { display: none; } } /* ? still opens it */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); margin: var(--s4) 0; } /* wraps to 2 + 1 on the narrowest phones */
@media (max-width: 399px) { .modal { padding: var(--s4); } }
.stat { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); }
.stat-v { font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; }
.stat.danger .stat-v { color: var(--danger); } .stat.warning .stat-v { color: var(--warning); }
.callout { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text); }
.callout.warning { background: var(--warning-soft); border-left: 3px solid var(--warning); }
.callout.info { background: var(--info-soft); border-left: 3px solid var(--info); }
.err { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-sm); border: 1px solid var(--danger); }
.dlg-body .row { margin: var(--s3) 0; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
/* results */
.card.hero { padding: var(--s5); }
.hero-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.hero-head .callout { margin: var(--s1) 0 0; }
.hero-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s4); margin: var(--s3) 0; }
.hero-score-block { display: flex; align-items: baseline; gap: var(--s2); }
.score-max { font-size: var(--fs-xl); color: var(--text-3); font-weight: 500; }
.hero-stats { margin: 0; }
.stat-sub { font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); }
.scale-bar { margin: var(--s4) 0 var(--s2); }
.scale-track { position: relative; height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); }
.scale-fill { height: 100%; width: var(--p-score, 0%); border-radius: inherit; }
.scale-fill.pass { background: var(--success); }
.scale-fill.fail { background: var(--danger); }
.scale-marker { position: absolute; }
.scale-marker.pass-marker { left: var(--p-pass, 0%); top: -5px; bottom: -5px; width: 2px; background: var(--text-2); transform: translateX(-50%); z-index: 2; }
.scale-marker.score-marker { left: var(--p-score, 0%); top: -3px; bottom: -3px; width: 2px; background: var(--text); transform: translateX(-50%); z-index: 3; }
.scale-labels { position: relative; height: 20px; margin-top: 6px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.scale-labels.is-offset { height: 32px; }
.scale-tick { position: absolute; white-space: nowrap; }
.tick-min { left: 0; color: var(--text-3); }
.tick-max { right: 0; color: var(--text-3); }
.tick-score { left: var(--pos-score, 0%); transform: translateX(-50%); font-weight: 600; }
.tick-pass { left: var(--pos-pass, 0%); transform: translateX(-50%); color: var(--text-2); }
.tick-pass.is-offset { top: 14px; }
.caveat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s3); }
.disclosure { display: inline-block; }
.disclosure summary { color: var(--accent-strong); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure-body { margin-top: var(--s2); padding: var(--s3); background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.5; }
.import-help { margin-top: var(--s3); display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); align-items: center; }
.nav-actions { margin-top: var(--s5); }
.dom-list { display: flex; flex-direction: column; }
.dom-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(180px, 3fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.dom-row:last-child { border-bottom: none; }
.dom-info { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.dom-name { font-weight: 500; font-size: var(--fs-sm); }
.dom-weight { font-size: var(--fs-xs); }
.dom-visual { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.dom-visual .bar { flex: 1; min-width: 80px; }
.dom-score { font-size: var(--fs-sm); white-space: nowrap; min-width: 72px; text-align: right; }
.dom-none-text { font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 639px) {
  .dom-row { grid-template-columns: 1fr auto; row-gap: var(--s2); }
  .dom-visual { grid-column: 1 / -1; }
}
.bar { position: relative; height: 10px; }
.bar-track { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; width: var(--p, 0%); height: 100%; background: var(--accent); }
.bar.pass .bar-fill { background: var(--success); }
.bar.fail .bar-fill { background: var(--danger); }
.bar-tick { position: absolute; left: var(--p-pass, 72%); top: -3px; bottom: -3px; width: 2px; background: var(--text-2); transform: translateX(-50%); z-index: 2; border-radius: 1px; }
.font-normal { font-weight: 400; }
.score { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pass-t { color: var(--success); } .fail-t { color: var(--danger); }
.drop { border: 2px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.over button.link { color: var(--text); } /* --accent-strong on --accent-soft is 4.1:1 in dark */
label.field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; }
input[type=number] { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: top; }
/* question review (§6.6) */
.review-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: var(--s5) 0 var(--s2); }
.review-header h2 { margin: 0; }
.review-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.review-toolbar .chips { margin: 0; }
.review-list { display: flex; flex-direction: column; gap: var(--s2); }
.review-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.review-item[open] { border-color: var(--border-strong); }
.review-summary { display: flex; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; user-select: none; flex-wrap: wrap; }
.review-summary::-webkit-details-marker { display: none; }
.review-summary:hover { background: var(--surface-2); }
.review-meta { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.review-num { font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; flex: none; }
.review-outcome { display: inline-flex; align-items: center; gap: var(--s1); flex: none; }
.review-outcome .badge { font-size: var(--fs-xs); }
.review-summary .pill { flex: none; }
.review-stem-clip { flex: 1; min-width: 120px; font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-chevron { flex: none; margin-left: auto; color: var(--text-3); display: flex; align-items: center; }
.review-chevron .icon { transition: transform .16s ease-out; }
.review-item[open] .review-chevron .icon { transform: rotate(90deg); }
@media (max-width: 639px) { .review-stem-clip { flex: 1 0 100%; } }
.review-content { padding: var(--s3) var(--s4) var(--s5); border-top: 1px solid var(--border); }
.review-scen { padding: var(--s3) var(--s4); margin-bottom: var(--s3); background: var(--info-soft); border-radius: var(--r-md); border: 1px solid var(--border); }
.review-scen p { margin: var(--s1) 0 0; font-size: var(--fs-sm); }
.review-content .stem { font-size: var(--fs-md); margin-top: 0; }
.review-content .opts { margin-top: var(--s3); }
/* print stylesheet (§6.6) */
@media print {
  .top, #banner-slot, .hero-actions, .nav-actions, .chips, #btn-expand-all, #btn-toggle-objs, .btn-practise-domain, .review-toolbar, button { display: none !important; }
  body { background: white; color: black; }
  main { max-width: 100%; padding: 0; margin: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .review-item { display: block !important; box-shadow: none; border: 1px solid #ccc; break-inside: avoid; margin-bottom: 12px; }
  .review-item > .review-content { display: block !important; }
  .review-summary { display: flex !important; }
  .review-chevron { display: none !important; }
  .scale-track, .bar-track { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .scale-fill, .bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* touch targets (§7): 44px square on touch screens; mouse and keyboard keep the denser 32/40px sizes (WCAG 2.5.8 asks for 24px).
   Exempt: inline text links (.link, .quick-mock-link, disclosure summaries) and the card title, whose hit area is the whole card. */
@media (pointer: coarse) {
  button:not(.link):not(.exam-title-btn), .seg-btn, .card-menu > summary { min-height: 44px; }
  .icon-btn, .strikebtn { width: 44px; }
  .timer { min-height: 44px; }
  .timer.off #timer-toggle { min-height: 42px; }
  .quick-mock-link { min-height: 44px; }
  .foot { padding-block: calc(var(--s3) - 2px); } /* 44px buttons, so the bar stays 65px and the notes panel / split layout offsets hold */
  .rgrid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .brand { min-width: 44px; min-height: 44px; justify-content: center; }
}
/* motion (§7): 120-160ms hover/selection, 200ms drawers and dialogs, none at all when the person asks for reduced motion
   (this one rule covers every transition and animation above, including the timer pulse) */
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }
/* Windows High Contrast / forced colors: backgrounds, box-shadows and pseudo-element fills are dropped or forced to Canvas,
   so selection state is redrawn with system colours. Outlines and borders survive (re-coloured), so focus stays visible. */
@media (forced-colors: active) {
  .ctl { border-color: CanvasText; }
  /* thicker borders take their extra 2px from the padding, so nothing shifts on select or reveal */
  .opt.sel, .opt.ok, .opt.bad { border-width: 3px; padding: calc(var(--s3) - 2px) 50px calc(var(--s3) - 2px) calc(var(--s4) - 2px); }
  .opt.sel { border-color: Highlight; }
  .opt.sel .ctl { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .opt.sel .ctl::after { background: HighlightText; }
  .opt.sel .ctl.box::after { background: none; border-color: HighlightText; }
  .is-struck .txt { color: GrayText; }
  .rgrid button.current { border: 3px solid Highlight; padding: 6px 0; } /* 8px padding minus the 2px extra border */
  .tile-key.current { border: 3px solid Highlight; } /* fixed 16px box (border-box), so no shift */
  .progress > span { forced-color-adjust: none; background: Highlight; }
  .badge::before, .has-dot.on::after { forced-color-adjust: none; background: CanvasText; }
  .timer.warn, .timer.danger { border: 2px solid CanvasText; animation: none; }
  .chip[aria-pressed="true"] { border: 3px solid Highlight; padding: 0 calc(var(--s3) - 2px); text-decoration: underline; }
  .seg-btn.active { outline: 2px solid Highlight; outline-offset: -2px; }
  .drawer { border-left: 2px solid CanvasText; }
  .modal { border: 2px solid CanvasText; }
  /* forced colours replaces background colours with Canvas, which would hide the page behind a dialog or drawer. Keep a
     translucent system-colour backdrop; forced-color-adjust is inherited, so it sits on a childless element (.scrim, or
     an ::before for the overlay, which contains the dialog) */
  .scrim { forced-color-adjust: none; background: color-mix(in srgb, CanvasText 35%, transparent); }
  .overlay { background: transparent; }
  .overlay::before { content: ""; position: absolute; inset: 0; forced-color-adjust: none; background: color-mix(in srgb, CanvasText 35%, transparent); }
  .overlay > .modal { position: relative; }
  .notes-panel { border-left: 2px solid CanvasText; }
  .scale-track { border: 2px solid CanvasText; }
  .scale-fill { forced-color-adjust: none; background: Highlight; }
  .scale-marker.pass-marker, .scale-marker.score-marker { background: CanvasText; }
  .bar-track { border: 2px solid CanvasText; }
  .bar-fill { forced-color-adjust: none; background: Highlight; }
  .bar-tick { background: CanvasText; }
}

/* ---------- micro mode (Shorts student flow): welcome, one question per screen, score ---------- */
.micro-welcome { max-width: 560px; margin-inline: auto; }
.micro-welcome h1 { font-size: var(--fs-2xl); margin-top: 0; overflow-wrap: anywhere; }
.welcome-topic { font-size: var(--fs-lg); margin: var(--s2) 0 var(--s1); }
.welcome-meta { margin: 0 0 var(--s4); color: var(--text-2); }
.welcome-list { margin: var(--s4) 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.parent-note { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--r-md); }
.parent-note blockquote { margin: var(--s1) 0 0; overflow-wrap: anywhere; }
button.big { min-height: 52px; padding: 0 var(--s5); font-size: var(--fs-md); border-radius: var(--r-md); }
.micro-welcome .big { width: 100%; margin-top: var(--s3); }
.big-ghost { min-height: 44px; font-size: var(--fs-md); margin-top: var(--s2); }
.micro { max-width: 640px; margin-inline: auto; }
.micro-count { margin: var(--s2) 0 0; }
.micro .stem { margin-top: var(--s2); overflow-wrap: anywhere; }
.micro .callout.hint { margin-top: var(--s2); }
.micro-opts { gap: var(--s3); }
.micro-opts .opt { min-height: 60px; padding-right: var(--s4); align-items: center; font-size: var(--fs-lg); }
.micro-opts .opt .txt { overflow-wrap: anywhere; min-width: 0; }
.micro-opts .ctl { margin-top: 0; }
.micro [tabindex="-1"]:focus, .micro-welcome [tabindex="-1"]:focus, #done-title:focus { outline: none; }
.micro-foot > div { max-width: 640px; }
.micro-foot button { flex: 1; }
.micro-score { text-align: center; }
.micro-score .hero-stats { justify-content: center; margin-top: var(--s4); }
.micro-score-line { margin: var(--s1) 0 0; line-height: 1; }
.micro-score .score { font-size: 4rem; font-weight: 700; }
.micro-score .hero-actions { justify-content: center; }
.micro-score .hero-actions .big { width: 100%; }
.micro-score .label, .micro-score .muted { margin: var(--s2) 0 0; }
#done-title { overflow-wrap: anywhere; }
.attempt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.attempt-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }