/* Self-hosted fonts. Replaces the previous @import from fonts.googleapis.com so no visitor
   request ever reaches a third party: the About page promises no tracking, and a Google-hosted
   font would have handed Google every visitor's IP. Latin and Latin-Extended only - callnames
   may contain any Unicode letter, and non-Latin ones fall back to the system font by design.
   Space Grotesk and Inter are variable fonts, so one file covers weights 400-700 each. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:107.06%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Light theme: a warm off-white base rather than the cool blue-grey this used to be. A warm
   neutral lets the cool teal accent sit forward, where a cool background flattened it. Every
   text colour below is at least 4.5:1 (WCAG AA) on the page, panel and panel-2 backgrounds and on its
   own tint, in both themes. `npm run verify` measures this and fails a change that breaks it, so
   change a colour here and run it rather than eyeballing it. */
:root{
  --ink:#F2F0EB; --panel:#FFFFFF; --panel-2:#EAE7E0;
  --line: rgba(60,50,40,0.09); --line-strong: rgba(60,50,40,0.16);
  --cyan:#096677; --cyan-dim: rgba(10,110,128,0.10);
  --paper:#13313B; --paper-dim:#4F5D63;
  --green:#176B3A; --green-dim: rgba(30,127,70,0.12);
  --red:#A63C27; --red-dim: rgba(184,67,43,0.10);
  --amber:#80540D; --amber-dim: rgba(138,90,14,0.12);
  --on-accent:#FFFFFF; --shadow: rgba(60,50,40,0.10);
  --radius:8px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  box-sizing:border-box; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* Dark theme (6 Oct 2026): neutral greys, not the navy it used to be, so it reads as a true dark theme.
   Surfaces step up in lightness as they rise (page, panel, panel-2), lines are the text colour at low
   opacity, and the accents are the light theme's hues, lifted to stay at least 4.5:1 on every surface. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#1C1E21; --panel:#27292E; --panel-2:#31343A;
  --line: rgba(233,234,236,0.10); --line-strong: rgba(233,234,236,0.20);
  --cyan:#6FD6E8; --cyan-dim: rgba(111,214,232,0.14);
  --paper:#E9EAEC; --paper-dim:#B7BBC3;
  --green:#7FD99A; --green-dim: rgba(127,217,154,0.14);
  --red:#F5A592; --red-dim: rgba(245,165,146,0.14);
  --amber:#E8B15E; --amber-dim: rgba(232,177,94,0.14);
  --on-accent:#1C1E21; --shadow: rgba(0,0,0,0.50); } }
:root[data-theme="dark"]{ --ink:#1C1E21; --panel:#27292E; --panel-2:#31343A;
  --line: rgba(233,234,236,0.10); --line-strong: rgba(233,234,236,0.20);
  --cyan:#6FD6E8; --cyan-dim: rgba(111,214,232,0.14);
  --paper:#E9EAEC; --paper-dim:#B7BBC3;
  --green:#7FD99A; --green-dim: rgba(127,217,154,0.14);
  --red:#F5A592; --red-dim: rgba(245,165,146,0.14);
  --amber:#E8B15E; --amber-dim: rgba(232,177,94,0.14);
  --on-accent:#1C1E21; --shadow: rgba(0,0,0,0.50); }
html{scroll-padding-top:env(safe-area-inset-top, 0px);}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Plain background. This used to carry a 40px graph-paper grid (two 1px gradient layers in
   var(--line)) as part of a drafting motif that also gives us .redline and the "First blueprint"
   badge. It suited the old sharp 3px corners and cool palette; against the warm soft base it
   just read as noise, so the motif now lives in the naming rather than the wallpaper. */
body{
  background: var(--ink);
  color:var(--paper); font-family:var(--font-body); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.app{max-width:1180px; margin:0 auto; padding:28px 20px 80px;}
.hidden{display:none !important;}

/* Masthead */
.masthead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--line-strong); padding-bottom:16px; margin-bottom:28px;}
.masthead h1{font-family:var(--font-display); font-weight:700; font-size:22px; margin:0;}
.masthead h1 span{color:var(--cyan);}
.masthead .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.masthead .brand-mark{width:30px; height:30px; flex:none;}
.masthead .tagline{margin:4px 0 0; font-size:13px; color:var(--paper-dim);}
.nw{white-space:nowrap;}
.xp-chip{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
.xp-chip b{color:var(--cyan); font-weight:600;}

.screen{display:none;} .screen.active{display:block;}

/* Setup */
.setup-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){ .setup-grid{grid-template-columns:1fr;} }
.card{background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius); padding:20px;}
.card h2{font-family:var(--font-display); font-size:15px; font-weight:600; margin:0 0 14px;}
.card .hint{font-size:12.5px; color:var(--paper-dim); line-height:1.5; margin:12px 0 0;}

.stack{display:flex; flex-direction:column; gap:10px;}
.exam-option, .tier-option{border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:13px 15px; cursor:pointer; background:var(--panel-2); transition:border-color .15s, background .15s;}
.exam-option:hover, .tier-option:hover{border-color:var(--cyan);}
.exam-option.selected{border-color:var(--cyan); background:var(--cyan-dim);}
.exam-option .name{font-family:var(--font-display); font-weight:600; font-size:15px;}
.exam-option .meta{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim); margin-top:3px;}

.tier-option{border-left-width:3px;}
.tier-option.tier-normal{border-left-color:var(--cyan);}
.tier-option.tier-hard{border-left-color:var(--amber);}
.tier-option.tier-expert{border-left-color:var(--red);}
.tier-option.selected.tier-normal{background:var(--cyan-dim); border-color:var(--cyan);}
.tier-option.selected.tier-hard{background:var(--amber-dim); border-color:var(--amber);}
.tier-option.selected.tier-expert{background:var(--red-dim); border-color:var(--red);}
.tier-option.unavailable{opacity:0.45; cursor:not-allowed;}
.tier-option.unavailable:hover{border-color:var(--line-strong);}
.tier-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.tier-name{font-family:var(--font-display); font-weight:600; font-size:15px;}
.tier-mult{font-family:var(--font-mono); font-size:11px; color:var(--paper-dim);}
.tier-blurb{font-size:13px; color:var(--paper-dim); line-height:1.45; margin-top:5px;}
.tier-status{font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); margin-top:7px;}
.tier-status.passed{color:var(--green);}

.pill-row{display:flex; gap:8px; flex-wrap:wrap;}
.pill-row + .field-label{margin-top:16px;}
.field-label{font-size:12.5px; color:var(--paper-dim); margin-bottom:8px;}
.pill-toggle{flex:1; min-width:90px; text-align:center; border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:9px 10px; font-size:12.5px; cursor:pointer; background:var(--panel-2); color:var(--paper-dim);}
.pill-toggle.selected{border-color:var(--cyan); color:var(--paper); background:var(--cyan-dim);}

.domain-list{display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; padding-right:4px;}
.domain-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 12px; cursor:pointer; background:var(--panel-2);}
.domain-row.checked{border-color:var(--cyan);}
.domain-row input{accent-color:var(--cyan); width:15px; height:15px; flex:none;}
.domain-row .label{flex:1; font-size:13.5px; line-height:1.35;}
.domain-row .weight{font-family:var(--font-mono); font-size:11px; color:var(--paper-dim);
  border:1px solid var(--line-strong); padding:2px 6px; border-radius:2px; flex:none;}
.domain-actions{display:flex; gap:14px; margin-top:10px;}
.text-btn{background:none; border:none; color:var(--cyan); font-family:var(--font-mono); font-size:11.5px;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;}
.count-row{display:flex; align-items:center; gap:12px; margin-top:14px;}
.count-row label{font-size:13px; color:var(--paper-dim); flex:none;}
.count-row select{background:var(--panel-2); border:1px solid var(--line-strong); color:var(--paper);
  font-family:var(--font-mono); font-size:13px; padding:7px 10px; border-radius:var(--radius); width:100%;}

.start-row{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.summary-line{font-family:var(--font-mono); font-size:12.5px; color:var(--paper-dim); line-height:1.6; max-width:760px;}
.summary-line b{color:var(--cyan); font-weight:600;}

.progress-card{grid-column:1/-1;}
.badge-grid{display:flex; flex-direction:column; gap:8px;}
.badge-row{display:flex; flex-wrap:wrap; gap:8px;}
.badge-group{font-family:var(--font-display); font-weight:600; font-size:13px; margin-top:8px; color:var(--paper-dim);}
.badge{border:1px solid var(--line); border-radius:var(--radius); padding:7px 10px; background:var(--panel-2);
  font-size:12px; color:var(--paper-dim); opacity:0.55;}
.badge.earned{opacity:1; border-color:var(--green); color:var(--paper);}
.badge .b-name{font-family:var(--font-display); font-weight:600; font-size:12.5px;}
.badge .b-desc{font-size:11.5px; color:var(--paper-dim); margin-top:2px;}
.progress-foot{display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:12px; flex-wrap:wrap;}

/* button-rules: the site's buttons. This block is the same, byte for byte, in public/site.css and public/app.html
   (checkSharedLookMatchesApp in tools/verify.mjs); change app.html first, then copy the block to site.css. Two roles in
   one colour, var(--cyan): .btn (filled) is the main action on a screen, and .btn.secondary (outlined) is every other
   button. No .btn takes any other colour, anywhere. Sizes: the default for an action that stands on the page,
   .btn.small inside a form, a toolbar or a card. A link styled as a button (a.btn) keeps its role's colour in every
   link state, ahead of a page's own link colour (.doc a, .landing a); keyboard focus is the :focus-visible outline
   every element has. Choices (timing chips, exam and mode cards, answer options) are not buttons, and keep rules of
   their own. */
.btn{font-family:var(--font-display); font-weight:600; font-size:14px; padding:12px 22px; border-radius:var(--radius);
  border:1px solid var(--cyan); background:var(--cyan); color:var(--on-accent); cursor:pointer; transition:opacity .15s;}
.btn:hover{opacity:0.88;}
.btn:disabled{opacity:0.35; cursor:not-allowed;}
.btn.secondary{background:transparent; color:var(--cyan);}
.btn.small{padding:8px 14px; font-size:13px;}
a.btn{display:inline-block; text-decoration:none;}
a.btn:link, a.btn:visited{color:var(--on-accent);}
a.btn.secondary:link, a.btn.secondary:visited{color:var(--cyan);}
/* /button-rules */

/* Quiz */
.quiz-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.quiz-meta{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
.quiz-meta b{color:var(--cyan);}
.progress-track{height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:8px; width:220px;}
.progress-fill{height:100%; background:var(--cyan); width:0%; transition:width .2s;}
.quiz-status{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.chip{font-family:var(--font-mono); font-size:12px; border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:6px 10px; color:var(--paper-dim);}
.chip b{color:var(--green);}
.chip.mode-normal{color:var(--cyan); border-color:var(--cyan-dim);}
.chip.mode-hard{color:var(--amber); border-color:var(--amber-dim);}
.chip.mode-expert{color:var(--red); border-color:var(--red-dim);}
.timer{font-family:var(--font-mono); font-size:15px; font-weight:500; color:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:5px 12px; min-width:78px; text-align:center;}
.timer.warn{color:var(--red); border-color:var(--red);}
.streak{color:var(--amber); border-color:var(--amber-dim);}

.scenario-card{background:var(--panel-2); border:1px solid var(--line-strong); border-left:2px solid var(--cyan);
  border-radius:var(--radius); padding:18px 22px; margin-bottom:14px;}
.scenario-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px;}
.scenario-label{font-family:var(--font-mono); font-size:11px; color:var(--cyan);}
.scenario-progress{font-family:var(--font-mono); font-size:11px; color:var(--paper-dim);}
.scenario-title{font-family:var(--font-display); font-weight:600; font-size:15.5px; margin-bottom:8px;}
.scenario-narrative{font-size:13.5px; line-height:1.6; color:var(--paper-dim); margin:0; max-width:80ch;}

.q-card{background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius); padding:26px 28px;}
@media (max-width:600px){ .q-card{padding:20px 16px;} }
.q-domain-tag{font-family:var(--font-mono); font-size:11px; color:var(--cyan); border:1px solid var(--cyan-dim);
  background:var(--cyan-dim); display:inline-block; padding:3px 8px; border-radius:2px; margin-bottom:14px;}
.q-prompt{font-size:17px; line-height:1.55; margin:0 0 20px; max-width:80ch;}
.options{display:flex; flex-direction:column; gap:10px;}
.opt{display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%;
  border:1px solid var(--line-strong); background:var(--panel-2); border-radius:var(--radius);
  padding:13px 15px; cursor:pointer; font-size:14.5px; line-height:1.5; color:var(--paper); transition:border-color .12s, background .12s;}
.opt:hover:not(.locked){border-color:var(--cyan);}
.opt .letter{font-family:var(--font-mono); font-weight:600; color:var(--paper-dim); flex:none; width:18px;}
.opt.selected{border-color:var(--cyan); background:var(--cyan-dim);}
.opt.selected .letter{color:var(--cyan);}
.opt.correct-reveal{border-color:var(--green); background:var(--green-dim);}
.opt.correct-reveal .letter{color:var(--green);}
.opt.wrong-reveal{border-color:var(--red); background:var(--red-dim);}
.opt.wrong-reveal .letter{color:var(--red);}
.opt.locked{cursor:default;}
.q-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; flex-wrap:wrap;}
.q-actions .right, .q-actions .left{display:flex; gap:10px; flex-wrap:wrap;}
.q-nav{margin:0 0 14px; font-size:13px;}
.q-nav summary{cursor:pointer; color:var(--paper-dim);}
.q-grid{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.q-grid button{font-family:var(--font-mono); font-size:12px; min-width:36px; padding:6px 0; border-radius:6px; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent; color:var(--paper-dim);}
.q-grid button.answered{background:var(--cyan-dim); color:var(--paper); border-color:var(--cyan);}
.q-grid button.flagged{border-color:var(--amber); box-shadow:inset 0 -3px 0 var(--amber);}
.q-grid button.current{outline:2px solid var(--paper); outline-offset:1px;}
#flag-btn[aria-pressed="true"]{color:var(--amber); border-color:var(--amber);}
.review-panel h2{margin-top:0;}
.review-panel .qlist{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px;}
.review-panel .qlist button{font-family:var(--font-mono); font-size:12px; padding:6px 10px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent; color:var(--paper);}
.review-actions{display:flex; gap:10px; flex-wrap:wrap;}
.inline-note{display:none; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-strong);
  font-size:13.5px; line-height:1.55; color:var(--paper-dim);}
.inline-note.show{display:block;}
.inline-note b{color:var(--green);}
.keys-hint{font-family:var(--font-mono); font-size:11px; color:var(--paper-dim); margin-top:14px;}

/* Correction sidebar */
.redline-overlay{position:fixed; inset:0; background:rgba(6,12,20,0.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40;}
.redline-overlay.show{opacity:1; pointer-events:auto;}
.redline{position:fixed; top:0; right:0; height:100%; width:380px; max-width:88vw; background:var(--panel-2);
  border-left:2px solid var(--red); box-shadow:-18px 0 40px var(--shadow); transform:translateX(100%);
  transition:transform .25s ease; z-index:50; padding:calc(26px + env(safe-area-inset-top, 0px)) 24px calc(26px + env(safe-area-inset-bottom, 0px)); overflow-y:auto;}
.redline.show{transform:translateX(0);}
.redline-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.redline-head .mark{font-family:var(--font-mono); font-size:11px; color:var(--red); border:1px solid var(--red-dim);
  background:var(--red-dim); padding:3px 8px; border-radius:2px;}
.redline-close{background:none; border:none; color:var(--paper-dim); font-size:22px; cursor:pointer; line-height:1; padding:2px 6px;}
.redline-close:hover{color:var(--paper);}
.redline h3{font-family:var(--font-display); font-size:13px; color:var(--paper-dim); margin:0 0 6px; font-weight:600;}
.redline .answer-text{font-size:15.5px; line-height:1.5; color:var(--green); font-weight:600; margin:0 0 18px;
  padding-bottom:18px; border-bottom:1px solid var(--line);}
.redline .expl{font-size:14px; line-height:1.65; margin:0;}
.srcs{margin:10px 0 0; font-size:12.5px; line-height:1.6; color:var(--paper-dim);}
.srcs a{color:var(--cyan); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere;}
.redline-footer{margin-top:24px;}
@media (prefers-reduced-motion: reduce){ .redline, .redline-overlay, .progress-fill{transition:none;} }

/* Results */
.results-head{text-align:center; padding:30px 20px 24px; border-bottom:1px solid var(--line-strong); margin-bottom:24px;}
.big-score{font-family:var(--font-display); font-size:52px; font-weight:700; color:var(--cyan); line-height:1;}
.big-score small{font-size:20px; color:var(--paper-dim); font-weight:500;}
.pct{font-family:var(--font-mono); font-size:13px; color:var(--paper-dim); margin-top:10px;}
.verdict{display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:12px; padding:5px 12px;
  border-radius:var(--radius); border:1px solid;}
.verdict.pass{color:var(--green); border-color:var(--green); background:var(--green-dim);}
.verdict.fail{color:var(--amber); border-color:var(--amber); background:var(--amber-dim);}
.rank{font-family:var(--font-display); font-size:20px; font-weight:600; margin-top:16px;}
.stat-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:22px;}
@media (max-width:640px){ .stat-row{grid-template-columns:repeat(2, 1fr);} }
.stat{background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius); padding:12px 14px;}
.stat .v{font-family:var(--font-display); font-size:20px; font-weight:600;}
.stat .k{font-size:12px; color:var(--paper-dim); margin-top:3px;}
.readiness{background:var(--panel); border:1px solid var(--line-strong); border-left:2px solid var(--cyan);
  border-radius:var(--radius); padding:14px 18px; font-size:14px; line-height:1.6; margin-bottom:24px;}
.section-title{font-family:var(--font-display); font-size:15px; margin:0 0 14px;}
.new-badges{margin-bottom:26px;}
.domain-results{display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
.domain-result-row{display:grid; grid-template-columns:1fr auto 120px; align-items:center; gap:14px;
  padding:12px 16px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);}
.domain-result-row .dname{font-size:13.5px;}
.domain-result-row .dscore{font-family:var(--font-mono); font-size:12.5px; color:var(--paper-dim); white-space:nowrap;}
.dbar-track{height:6px; background:var(--line); border-radius:3px; overflow:hidden;}
.dbar-fill{height:100%; background:var(--green);}
.dbar-fill.weak{background:var(--amber);}
.dbar-fill.poor{background:var(--red);}
.missed-list{display:flex; flex-direction:column; gap:14px;}
.missed-item{border:1px solid var(--line-strong); border-left:2px solid var(--red); border-radius:var(--radius);
  padding:14px 16px; background:var(--panel);}
.missed-item.unanswered{border-left-color:var(--amber);}
.missed-item .mtag{font-family:var(--font-mono); font-size:11px; color:var(--paper-dim); margin-bottom:6px; line-height:1.5;}
.missed-item .mq{font-size:14px; margin-bottom:8px;}
.missed-item .myours{font-size:13px; color:var(--red); margin-bottom:4px;}
.missed-item .ma{font-size:13px; color:var(--green); margin-bottom:6px;}
.missed-item .me{font-size:13px; color:var(--paper-dim); line-height:1.55;}
.report-box{margin-top:10px; font-size:13px;}
.report-box form{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.report-box select, .report-box textarea{font:inherit; color:var(--paper); background:var(--panel-2); border:1px solid var(--line-strong); border-radius:var(--radius); padding:8px;}
.report-box textarea{min-height:64px; resize:vertical;}
.report-box .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.report-box .status{color:var(--paper-dim);}
.report-box .status.bad{color:var(--red);}
.results-actions{display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap;}

.select-hint{font-family:var(--font-mono); font-size:12.5px; color:var(--amber); margin:-6px 0 14px;}
.redline .answer-text{white-space:pre-line;}
.obj-note{font-size:12.5px; color:var(--paper-dim); margin:-6px 0 14px; line-height:1.5;}
.obj-head{font-family:var(--font-display); font-weight:600; font-size:15px; margin:22px 0 4px;}
.domain-result-row .dname .src{font-family:var(--font-mono); font-size:10.5px; color:var(--paper-dim); margin-left:6px;}
/* Site navigation and pages */
.site-nav{display:flex; gap:4px; flex-wrap:wrap; margin:-12px 0 26px; border-bottom:1px solid var(--line);}
.site-nav a{font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--paper-dim); text-decoration:none;
  padding:9px 12px; border-bottom:2px solid transparent; margin-bottom:-1px;}
.site-nav a:hover{color:var(--paper);}
.site-nav a.active{color:var(--cyan); border-bottom-color:var(--cyan);}
.site-nav a .live{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--amber); margin-left:6px; vertical-align:middle;}
.mast-right{display:flex; align-items:center; gap:14px;}
.acct-link{font-family:var(--font-mono); font-size:12px; color:var(--cyan); text-decoration:none; border:1px solid var(--line-strong); border-radius:var(--radius); padding:5px 10px; white-space:nowrap;}
.acct-link:hover{border-color:var(--cyan);}
.theme-btn{font-family:var(--font-mono); font-size:12px; background:transparent; color:var(--paper-dim);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:5px 10px; cursor:pointer;}
.view{display:none;} .view.active{display:block;}
.doc{max-width:860px; line-height:1.62; font-size:15px;}
.doc h1, .doc .doc-title{font-family:var(--font-display); font-size:26px; line-height:1.25; margin:0 0 14px;}
.doc h2{font-family:var(--font-display); font-size:19px; line-height:1.3; margin:34px 0 10px; padding-top:10px; border-top:1px solid var(--line);}
.doc h3{font-family:var(--font-display); font-size:16px; line-height:1.3; margin:24px 0 8px;}
.doc p, .doc li{color:var(--paper);} .doc a{color:var(--cyan);}
/* A plain link with no class of its own (the Practice hint's "Full exam mode", for one) gets the
   browser's default blue, which is readable on the light background but about 2:1 on the dark one.
   Dark only: the light theme keeps the default it has always had. Wrapped in :where() so it has no
   specificity and only replaces the browser default: every styled link (the navigation, .doc a, .srcs a)
   keeps its own colour. */
@media (prefers-color-scheme: dark){ :where(:root:not([data-theme="light"]) a:not([class])){color:var(--cyan);} }
:where(:root[data-theme="dark"] a:not([class])){color:var(--cyan);}
.doc code{font-family:var(--font-mono); font-size:13px; background:var(--panel-2); padding:1px 5px; border-radius:var(--radius);}
.doc pre{background:var(--panel-2); border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px; overflow-x:auto; font-size:13px; line-height:1.5;}
.doc pre code{background:transparent; padding:0;}
.table-wrap{overflow-x:auto; margin:12px 0 18px;}
.doc table, .data-table{border-collapse:collapse; font-size:14px; min-width:100%;}
.doc th, .doc td, .data-table th, .data-table td{border:1px solid var(--line-strong); padding:8px 10px; text-align:left; vertical-align:top;}
.doc th, .data-table th{background:var(--panel-2); font-family:var(--font-display); font-weight:600;}
.data-table td.num{text-align:center; font-family:var(--font-mono);}
.data-table .obj-text{font-size:12.5px; color:var(--paper-dim); margin-top:3px;}
.linkbtn{background:none; border:none; color:var(--cyan); cursor:pointer; font:inherit; text-decoration:underline; padding:0;}
.linkbtn:disabled{color:var(--paper-dim); text-decoration:none; cursor:default;}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 20px;}
.toolbar select{font:inherit; font-size:14px; background:var(--panel); color:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius); padding:8px 10px;}
.tool-status{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
.bank-meta{font-size:14px; color:var(--paper-dim); margin:0 0 18px; line-height:1.55;}
.bank-scn{margin:0 0 30px;}
.bank-scn h3{font-family:var(--font-display); font-size:17px; margin:0 0 6px;}
.bank-scn .narr{font-style:italic; color:var(--paper-dim); line-height:1.55; margin:0 0 14px; font-size:14.5px;}
.bank-q{background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; margin:0 0 10px;}
.bank-q .qp{margin:0 0 8px; line-height:1.5;}
.bank-q ol{margin:0 0 8px; padding-left:0; list-style:none;}
.bank-q li{padding:3px 0; font-size:14.5px;}
.bank-q li.right{color:var(--green); font-weight:600;}
.bank-q details summary{cursor:pointer; color:var(--cyan); font-size:13px; font-family:var(--font-mono);}
.bank-q .ans{font-size:14px; line-height:1.5; margin-top:8px; color:var(--paper);}
.bank-q .ans .tag{font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); display:block; margin-top:6px;}
.pick{font-family:var(--font-mono); font-size:12px; color:var(--amber);}
.skill-src{max-height:520px;}
/* Callname and leaderboard */
.callname-card{margin-bottom:20px;}
/* Shown on load when a session started on this device is still open on the server. */
.resume-card{margin-bottom:20px; border-color:var(--cyan);}
.resume-card p{margin:0;}
.resume-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.saved-card{border-color:var(--cyan);}
.saved-list{display:flex; flex-direction:column; gap:8px;}
.saved-item{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.saved-item span{font-size:14px;}
.saved-item .saved-actions{display:flex; gap:8px;}
#quiz-saved-list{margin-top:10px;}
.callname-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.callname-row input{font:inherit; font-size:15px; background:var(--panel-2); color:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:10px 12px; width:260px; max-width:100%;}
.callname-row input:focus{border-color:var(--cyan); outline:none;}
.callname-msg{font-size:12.5px; color:var(--paper-dim);}
.callname-msg.bad{color:var(--red);}
.callname-msg .confirm-row{display:flex; gap:8px; margin-top:8px;}
/* Inline error line. Replaces window.alert(), which blocks the page and looks foreign on phones.
   Empty means hidden, so clearing the text is all it takes to dismiss it. */
.notice{grid-column:1/-1; margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--red);}
.notice:empty{display:none;}
.notice.calm{color:var(--paper);}
.fix-notice{margin:12px 0 0; padding:12px 14px; border:1px solid var(--cyan); border-radius:var(--radius); background:var(--cyan-dim);}
.fix-notice p{margin:0 0 8px;}
/* Recovery codes (PRODUCT-IDEAS.md item 38): a new set's one-time view, two columns, one on a narrow phone. */
.rc-codes{font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; columns:2; margin:10px 0; padding-left:1.6em;}
@media (max-width:420px){ .rc-codes{columns:1;} }
.share-box{margin:12px 0 0;}
.share-box input{width:100%; margin:0 0 8px; font:inherit; font-family:var(--font-mono); font-size:13px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel-2); color:var(--paper);}
.share-box .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.lb-you{font-family:var(--font-display); font-size:15px; margin:10px 0; padding:10px 14px; border:1px solid var(--cyan); border-radius:var(--radius); background:var(--cyan-dim);}
.pass-screen{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; background:#0f2a2e; color:#f2f5f5; text-align:center; overflow:auto;}
.pass-screen.hidden{display:none;}
.pass-inner{max-width:560px; font-family:var(--font-display);}
.pass-medal{font-size:72px; line-height:1;}
.pass-screen h2{font-size:44px; margin:12px 0 6px; color:#f2f5f5;}
.pass-exam{font-size:18px; color:#cfe0e2;}
.pass-pct{font-size:88px; font-weight:700; color:#5fd4de; margin:14px 0 4px;}
.pass-facts{font-size:17px; color:#cfe0e2;}
.pass-guide{font-size:14px; color:#a9c4c7; margin-top:10px;}
.pass-foot{font-size:13px; color:#a9c4c7; margin:22px 0 18px;}
.vip-soon{opacity:.85;}
.profile-show{display:flex; flex-direction:column; gap:6px; margin:0 0 12px; font-size:14px;}
.profile-link{display:flex; gap:10px; margin:0 0 10px;}
.profile-link input{flex:1; font-family:var(--font-mono); font-size:13px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel-2); color:var(--paper);}
.profile-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.lb-line{font-family:var(--font-display); font-size:15px; margin:14px 0 0; padding:12px 14px; border:1px solid var(--cyan); border-radius:var(--radius); background:var(--cyan-dim);}
.data-table tr.me td{background:var(--cyan-dim); font-weight:600;}
.lb-source{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
.lb-source.bad{color:var(--red);}
.medal{font-family:var(--font-mono);}
/* On a phone the leaderboard drops its table layout so nothing scrolls sideways: each entry is a small
   card with rank, callname and points on the first line and the rest (mode, score, time, date) below.
   The empty td.br is the line break between the two; it's hidden in the normal table. */
.data-table td.br{display:none;}
@media (max-width:560px){
  .data-table.lb-cards thead{display:none;}
  .data-table.lb-cards, .data-table.lb-cards tbody{display:block; min-width:0;}
  .data-table.lb-cards tr{display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:3px; padding:10px 12px;
    border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); margin:0 0 8px;}
  .data-table.lb-cards td{border:none; padding:0; background:transparent; text-align:left;}
  .data-table.lb-cards td.lb-rank{order:1; flex:0 0 1.8em;}
  .data-table.lb-cards td.nick{order:2; flex:1 1 0; min-width:0; font-weight:600; overflow-wrap:anywhere;}
  .data-table.lb-cards td.pts{order:3; font-weight:600;}
  .data-table.lb-cards td.pts::after{content:" pts"; font-weight:400; color:var(--paper-dim);}
  .data-table.lb-cards td.br{display:block; order:4; flex:0 0 100%; height:0;}
  .data-table.lb-cards td.meta{order:5; font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
  .data-table.lb-cards td.meta:empty{display:none;}
  .data-table.lb-cards td.meta ~ td.meta::before{content:"· ";}
  .data-table.lb-cards tr.me{background:var(--cyan-dim);}
  .data-table.lb-cards tr.me td{background:transparent;}
}
.data-table tr.bot td{color:var(--paper-dim); font-style:italic;}
footer.disclaimer{margin-top:50px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-mono);
  font-size:11px; color:var(--paper-dim); line-height:1.6;}
/* The Buy Me a Coffee line (PRODUCT-IDEAS.md item 41): a plain link, no widget or script, so nothing loads or tracks
   until someone clicks. */
footer.disclaimer .coffee{font-size:13px; margin:12px 0 0;}
.coffee-results{font-size:14px; color:var(--paper-dim); margin:22px 0 0;}