/* Mock & Mark styles. The answer-booklet design from the practice app: graph-paper ground, booklet-cover
   subject cards, one question per page, biro-blue ink for the student and the examiner's red pen. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#edf0f6; --paper:#ffffff; --ink:#111a2c; --muted:#596580; --line:#d8deea; --grid:rgba(35,64,216,.075);
  --accent:#2340d8; --accent-ink:#ffffff; --accent-soft:#e5e9ff;
  --pen:#d2322a; --pen-soft:#fde7e5; --ok:#12804a; --ok-soft:#e0f3e8; --warn:#a4620a; --warn-soft:#fcefd9;
  --hl:#ffe14d; --hl-ink:#1d1800; --band-l:42%; --band-s:62%;
  --shadow:0 1px 0 rgba(17,26,44,.05),0 10px 30px -16px rgba(17,26,44,.28);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --body:"Figtree",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1020; --paper:#141b2e; --ink:#e8ecf6; --muted:#98a4bf; --line:#27314b; --grid:rgba(129,151,255,.06);
  --accent:#8399ff; --accent-ink:#0b1020; --accent-soft:#1d2652;
  --pen:#ff7266; --pen-soft:#3a1a1b; --ok:#52d08d; --ok-soft:#132f20; --warn:#f0b551; --warn-soft:#342712;
  --hl:#f0d23c; --hl-ink:#1d1800; --band-l:66%; --band-s:70%;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1020; --paper:#141b2e; --ink:#e8ecf6; --muted:#98a4bf; --line:#27314b; --grid:rgba(129,151,255,.06);
  --accent:#8399ff; --accent-ink:#0b1020; --accent-soft:#1d2652;
  --pen:#ff7266; --pen-soft:#3a1a1b; --ok:#52d08d; --ok-soft:#132f20; --warn:#f0b551; --warn-soft:#342712;
  --hl:#f0d23c; --hl-ink:#1d1800; --band-l:66%; --band-s:70%;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6); color-scheme:dark}
*{box-sizing:border-box}
body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.55;min-height:100%}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px;padding-block:22px 72px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,7vw,4.4rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.005em}
p{margin:0}
a{color:var(--accent);font-weight:700}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:.6rem 1.15rem;border-radius:10px;font-weight:700;transition:transform .12s,box-shadow .12s;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,var(--ink))}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,var(--ink))}
.btn.ghost{background:var(--paper);color:var(--accent);box-shadow:none;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.small{padding:.38rem .8rem;font-size:.9rem;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stack{display:grid;gap:16px;min-width:0}
.crumb{background:none;border:none;color:var(--accent);padding:0;font-weight:700}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px;min-width:0;align-content:start;box-shadow:var(--shadow)}
.empty{color:var(--muted);font-size:.95rem}
.savedin{font-size:.8rem;color:var(--muted)}
.note{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.92rem}
ul.clean{margin:0;padding-left:1.15rem;display:grid;gap:6px}
.pill{display:inline-block;font-family:var(--mono);font-size:.76rem;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pill.low{background:var(--pen-soft);color:var(--pen)}
.pill.mid{background:var(--warn-soft);color:var(--warn)}
.pill.hi{background:var(--ok-soft);color:var(--ok)}
.hl{background:linear-gradient(transparent 45%,var(--hl) 45%,var(--hl) 88%,transparent 88%);padding:0 .08em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hl{color:var(--ink);background:linear-gradient(transparent 70%,var(--hl) 70%,var(--hl) 92%,transparent 92%)}}
:root[data-theme="dark"] .hl{background:linear-gradient(transparent 70%,var(--hl) 70%,var(--hl) 92%,transparent 92%)}
/* Masthead */
.mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding-bottom:22px;border-bottom:2px solid var(--ink)}
@media (max-width:640px){.mast{grid-template-columns:minmax(0,1fr)}}
.mast .tag{font-family:var(--mono);font-size:.78rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mast .tag b{color:var(--ink);font-weight:500;border:1.5px solid var(--ink);padding:0 6px;border-radius:4px}
.count{text-align:right}
@media (max-width:640px){.count{text-align:left}}
.count .n{font-family:var(--display);font-size:clamp(2.6rem,7vw,3.8rem);font-weight:800;line-height:1;color:var(--pen);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.count .l{font-size:.85rem;color:var(--muted);max-width:22ch;margin-left:auto}
@media (max-width:640px){.count .l{margin-left:0}}
.lede{max-width:60ch;color:var(--muted);margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:14px 16px;border-right:1px solid var(--line);display:grid;gap:2px;min-width:0}
.stat:last-child{border-right:none}
.stat b{font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat span{font-size:.8rem;color:var(--muted)}
.dash{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;margin-top:22px;align-items:start}
@media (max-width:820px){.dash{grid-template-columns:minmax(0,1fr)}}
.nextup{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.nextup .first h3{font-size:1.45rem}
.rec{display:grid;gap:6px;padding:14px 0;border-top:1px dashed var(--line)}
.rec.first{border-top:none;padding-top:2px}
.rec .why{font-size:.9rem;color:var(--muted)}
.rec .row{gap:8px}
.rec .head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.hist{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;font-size:.92rem;align-items:center}
.hist .d{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.hist button{background:none;border:none;text-align:left;padding:0}
.hist button:hover{color:var(--accent)}
.sectionhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:38px;margin-bottom:14px;flex-wrap:wrap}
/* Booklet covers */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px}
.subj{--band:hsl(var(--h) var(--band-s) var(--band-l));position:relative;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:6px 14px 14px 6px;padding:18px 16px 16px 26px;display:grid;gap:4px;grid-template-columns:minmax(0,1fr) auto;align-items:start;box-shadow:var(--shadow);transition:transform .15s;overflow:hidden}
.subj::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:var(--band)}
.subj:hover{transform:translateY(-3px) rotate(-.4deg)}
.subj .lvl{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--band);grid-column:1/-1}
.subj h3{font-size:1.3rem;grid-column:1}
.subj .meta{font-size:.84rem;color:var(--muted);grid-column:1}
.ring{grid-column:2;grid-row:2/4;width:52px;height:52px}
.ring circle{fill:none;stroke-width:5}
.ring .bgc{stroke:var(--line)}
.ring .fg{stroke:var(--band);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.ring text{font-family:var(--mono);font-size:13px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
/* Subject page */
.subhead{--band:hsl(var(--h) var(--band-s) var(--band-l));border-left:10px solid var(--band);padding-left:16px;display:grid;gap:6px;margin-top:14px}
.tabs{display:flex;gap:2px;margin-top:22px;overflow-x:auto;border-bottom:2px solid var(--ink)}
.tabs button{background:none;border:none;border-radius:8px 8px 0 0;padding:9px 14px;font-weight:700;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.tabbody{margin-top:20px}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.summary{font-size:1.05rem;max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px}
.fact{border-top:2px solid var(--ink);padding-top:6px}
.fact b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.25}
.fact span{font-size:.8rem;color:var(--muted)}
.bars{display:grid;gap:7px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;gap:10px;align-items:center;font-size:.9rem}
.bar .track{height:9px;background:var(--accent-soft);border-radius:5px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--accent);border-radius:5px}
.bar .n{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right}
.starter{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
@media (max-width:820px){.starter{position:static}}
.field{display:grid;gap:7px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.levels{margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.levels>.eyebrow,.levels>.savedin{flex-basis:100%;margin:0}
.lvlpick{display:flex;align-items:center;gap:10px}
.lvlname{font-weight:800;min-width:4.2em}
.lvlpick.inhead{margin-top:6px}.lvlpick.inhead .lvlname{display:none}
.seg label{position:relative;border:1.5px solid var(--line);border-radius:9px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:.92rem;background:var(--paper)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.seg label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.hintline{font-size:.85rem;color:var(--muted);min-height:2.6em}
/* Test */
.testhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:10px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.dot{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--line);background:var(--paper);font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:0}
.dot.cur{border-color:var(--ink);color:var(--ink);border-width:2px}
.dot.full{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.dot.part{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.dot.zero{background:var(--pen-soft);border-color:var(--pen);color:var(--pen)}
.clock{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums;border:1.5px solid var(--ink);border-radius:8px;padding:1px 9px}
.clock.low{color:var(--pen);border-color:var(--pen)}
.coach{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:9px;font-size:.84rem}
.coach .track{height:8px;border-radius:5px;background:var(--accent-soft);overflow:hidden}
.coach .fill{display:block;height:100%;background:var(--accent);transition:width .5s linear}
.coach .fill.over{background:var(--pen)}
.coach .pace{font-family:var(--mono);font-size:.8rem}
.ahead{color:var(--ok)}
.behind{color:var(--pen)}
.mono{font-family:var(--mono)}
.qcard>*{min-width:0}
.qcard{grid-template-columns:minmax(0,1fr);background:var(--paper);border:1px solid var(--line);border-radius:4px var(--r) var(--r) 4px;padding:24px 24px 22px;display:grid;gap:18px;box-shadow:var(--shadow)}
@media (max-width:520px){.qcard{padding:18px 16px}}
.qtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.qnum{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em}
.markbox{border:2px solid var(--ink);border-radius:6px;min-width:62px;text-align:center;padding:3px 8px;display:grid}
.markbox b{font-family:var(--mono);font-size:1.1rem;font-weight:500}
.markbox span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:5px}
.tag.past,.tag.original{background:var(--ink);color:var(--bg)}
.tag.practice{background:var(--hl);color:var(--hl-ink)}
.marks{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.standin{font-size:.84rem;color:var(--muted);font-style:italic}
.stim{border:1.5px dashed var(--line);border-radius:10px;padding:14px 16px;background:var(--bg);display:grid;gap:6px;min-width:0}
.stim .t{font-weight:700;font-size:.92rem}
.stim pre{white-space:pre-wrap;font-family:var(--body);margin:0;font-size:.97rem}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left}
th{background:var(--accent-soft)}
.part{display:grid;gap:11px;padding-top:16px;border-top:1px solid var(--line)}
.part.firstpart{border-top:none;padding-top:0}
.ptitle{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ptitle p{max-width:68ch}
.lab{font-family:var(--mono);color:var(--accent);margin-right:6px}
.choice{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--paper)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt input{margin-top:4px;accent-color:var(--accent)}
.part>*{min-width:0}
.mrow select{width:100%;min-width:0}
.tfrow,.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--line)}
.mrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:520px){.mrow{grid-template-columns:minmax(0,1fr);gap:4px}}
.tf{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.tf label{padding:4px 13px;cursor:pointer;font-size:.88rem;font-weight:700}
.tf input{position:absolute;opacity:0;pointer-events:none}
.tf label:has(input:checked){background:var(--accent);color:var(--accent-ink)}
.tf label:has(input:focus-visible){outline:3px solid var(--accent)}
select,input[type=text],textarea{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:6px 9px;max-width:100%}
textarea{width:100%;min-height:130px;resize:vertical;line-height:1.7;background-image:linear-gradient(transparent calc(1.7em - 1px),var(--grid) 1px);background-size:100% 1.7em;background-attachment:local}
.cloze{line-height:2.4}
.cloze select{margin:0 3px}
.bank{display:flex;flex-wrap:wrap;gap:6px}
.bank span{border:1.5px solid var(--line);border-radius:6px;padding:2px 9px;font-size:.88rem;background:var(--bg)}
details.hint{border:1.5px solid var(--line);border-radius:10px;background:var(--bg)}
details.hint summary{cursor:pointer;padding:8px 12px;font-weight:700;color:var(--accent);list-style:none}
details.hint summary::-webkit-details-marker{display:none}
details.hint summary::before{content:"+ ";font-family:var(--mono)}
details.hint[open] summary::before{content:"− "}
details.hint ul{margin:0 12px 12px;padding-left:1.1rem;display:grid;gap:6px;font-size:.93rem}
.fb{border-radius:10px;padding:12px 14px;font-size:.94rem;display:grid;gap:7px;border-left:4px solid var(--pen);background:var(--pen-soft)}
.fb.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.fb.part{border-left-color:var(--warn);background:var(--warn-soft)}
.fb .score{font-family:var(--hand);font-size:1.7rem;line-height:1;color:var(--pen);font-weight:700}
.right{color:var(--ok);font-weight:700}
.wrong{color:var(--pen);font-weight:700}
.model{border-left:3px solid var(--pen);padding-left:10px;white-space:pre-wrap}
.pts{display:grid;gap:4px}
.pts label{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}
.pts input{margin-top:4px;accent-color:var(--pen)}
.claude{font-size:.92rem;white-space:pre-wrap}
.nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Results */
.scorebig{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.circled{font-family:var(--hand);font-weight:700;font-size:4.6rem;line-height:1;color:var(--pen);position:relative;padding:8px 22px;transform:rotate(-4deg)}
.circled::after{content:"";position:absolute;inset:0;border:3px solid var(--pen);border-radius:50%;transform:rotate(6deg)}
.grade{font-family:var(--display);font-size:1.5rem;font-weight:800}
.resrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.resrow button{background:none;border:none;color:var(--accent);text-align:left;padding:0}
.tbar{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:10px;align-items:center;font-size:.86rem;padding:4px 0}
.tbar .track{height:9px;border-radius:5px;background:var(--accent-soft);position:relative;overflow:hidden}
.tbar .fill{position:absolute;inset:0 auto 0 0;background:var(--ok);border-radius:5px}
.tbar .fill.over{background:var(--pen)}
.tbar .t{font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
/* Guide */
.guidewrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.guidewrap{grid-template-columns:minmax(0,1fr)}.toc{position:static!important}}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:2px;font-size:.88rem}
.toc a{color:var(--muted);text-decoration:none;padding:5px 10px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.guide{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;min-width:0;max-width:80ch;box-shadow:var(--shadow)}
@media (max-width:520px){.guide{padding:18px 16px}}
.guide.inner{box-shadow:none;border:none;padding:0}
.guide>h1:first-child{display:none}
.guide h2{font-size:1.45rem;margin:1.7em 0 .5em;scroll-margin-top:16px}
.guide h2:first-of-type{margin-top:0}
.guide h3{font-size:1.1rem;margin:1.3em 0 .4em;scroll-margin-top:16px}
.guide p{margin:.55em 0}
.guide ul,.guide ol{padding-left:1.2rem;margin:.4em 0}
.guide li{margin:.25em 0}
.guide table{margin:.7em 0;font-size:.85rem}
.guide td,.guide th{vertical-align:top}
.guide code{font-family:var(--mono);font-size:.85em}
.guide blockquote{margin:.6em 0;padding-left:12px;border-left:3px solid var(--line);color:var(--muted)}
.guide .hit{background:var(--hl);color:var(--hl-ink);border-radius:3px;box-shadow:0 0 0 4px var(--hl);scroll-margin-top:100px}
.findbar{position:sticky;top:0;z-index:4;background:var(--hl);color:var(--hl-ink);border-radius:10px;padding:8px 12px;font-size:.92rem;margin-bottom:14px}
.findbar .btn.ghost{background:transparent;color:var(--hl-ink);border-color:var(--hl-ink)}
/* Technique */
.cw{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:8px 16px;font-size:.94rem;margin:0}
.cw dt{font-family:var(--display);font-weight:700}
.cw dd{margin:0}
@media (max-width:520px){.cw{grid-template-columns:minmax(0,1fr)}.cw dd{margin-bottom:6px}}
.plan td:nth-child(n+2){font-family:var(--mono);text-align:right}
.loading{padding:40px 0;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Study kit */
.tag.preview{background:var(--hl);color:var(--hl-ink);vertical-align:middle;margin-left:4px}
.stats.mini{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kitt{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:3px;box-shadow:var(--shadow);transition:transform .15s;min-width:0}
.kitt:hover{transform:translateY(-2px);border-color:var(--accent)}
.kitt b{font-family:var(--display);font-size:1.05rem}.kitt span{font-size:.85rem;color:var(--muted)}
.blocks{display:grid;gap:8px}
.blk{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.94rem}
.blk .mono,.mono{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.plan{display:grid}
.pday{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px dashed var(--line);align-items:start}
.pday:first-child{border-top:none}.pday.off{opacity:.6}
.pdate{display:grid;font-size:.9rem}
.flash{display:grid;gap:12px}.fq{font-size:1.08rem;font-weight:600}
.fa{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:6px}
.preds{display:grid;gap:4px}
.pred{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 10.5rem;gap:14px;align-items:center;padding:10px 0;border-top:1px dashed var(--line)}
.pred:first-child{border-top:none}
.pname{display:grid;font-size:.92rem}.pname .muted{font-size:.8rem}
.pgrade{display:grid;justify-items:end;text-align:right}.pgrade b{font-family:var(--display)}
.meter{position:relative;height:30px;border-radius:6px;overflow:hidden;background:var(--accent-soft)}
.meter .zone{position:absolute;top:0;bottom:0;border-right:1px solid var(--paper)}
.meter .zone i{position:absolute;bottom:2px;left:4px;font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.meter .range{position:absolute;top:5px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.meter .est{position:absolute;top:2px;height:18px;width:3px;margin-left:-1px;background:var(--accent);border-radius:2px}
.empty-meter{background:repeating-linear-gradient(45deg,var(--accent-soft) 0 6px,transparent 6px 12px)}
.streak{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.streak .big{font-family:var(--display);font-size:3.4rem;font-weight:800;line-height:1}.streak .big.small{font-size:2rem}
.flame{width:44px;height:56px;background:var(--pen);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,80% 30%,100% 65%,85% 95%,50% 100%,15% 95%,0 65%,25% 35%,40% 45%)}
.calgrid{display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:3px;overflow-x:auto}
.cal{border-radius:3px;background:var(--accent-soft)}.cal.on{background:var(--ok)}
.board{margin:0;padding-left:1.4rem;display:grid;gap:6px}
.board li{display:flex;justify-content:space-between;gap:10px}.board li.me{font-weight:800;color:var(--accent)}
input[type=email]{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:6px 9px;max-width:100%}
.email{border-top:6px solid var(--accent)}
.mailhead{font-size:.88rem;border-bottom:1px solid var(--line);padding-bottom:8px;display:grid;gap:2px}
.rtable{width:100%;border-collapse:collapse;font-size:.9rem}.rtable th,.rtable td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.rtable th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chat{display:grid;gap:10px;max-height:420px;overflow-y:auto;padding-right:4px}
.msg{max-width:88%;padding:10px 12px;border-radius:12px;display:grid;gap:6px;justify-items:start}
.msg.ex{background:var(--accent-soft)}.msg.me{background:var(--paper);border:1px solid var(--line);justify-self:end}
.msg .tip{font-size:.85rem;color:var(--warn)}
.snap{display:grid;gap:6px;margin-top:8px}
.snap label.btn{justify-self:start}
.listen .row{margin:6px 0}
@media (max-width:640px){.pred{grid-template-columns:minmax(0,1fr) auto}.pred .meter{grid-column:1/-1;grid-row:2}.blk{grid-template-columns:3.6rem minmax(0,1fr)}.blk .btn{grid-column:2;justify-self:start}.pday{grid-template-columns:minmax(0,1fr)}.kit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Accounts: top bar, footer, toast, forms */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.topbar .brand{background:none;border:none;padding:0;color:var(--ink);cursor:pointer;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.topbar .who{font-size:.85rem;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* On phones the top bar stays in view while scrolling, so Subjects and Sign out are always one tap away. */
@media (max-width:820px){.topbar{position:sticky;top:0;z-index:6;background:var(--bg);padding-top:calc(env(safe-area-inset-top,0px) + 10px);margin-inline:-16px;padding-inline:16px;flex-wrap:nowrap}.topbar .row{flex-wrap:nowrap;gap:10px}.topbar .who{max-width:12ch}}
.sitefoot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.sitefoot a{font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:20;font-size:.94rem}
input[type=email],input[type=text]{min-height:40px}
.field input{width:100%}
.seg input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.doc{max-width:72ch}
.doc h2{margin:1.4em 0 .4em}.doc p,.doc li{margin:.5em 0}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}.check input{margin-top:5px}
/* What usually comes up */
.lk{display:grid;gap:8px}
.lkrow{display:grid;grid-template-columns:minmax(0,1fr) 80px 34px 64px 82px;gap:8px;align-items:center;font-size:.9rem}
.lkrow .track{height:9px;background:var(--accent-soft);border-radius:5px;overflow:hidden}
.lkrow .fill{display:block;height:100%;background:var(--accent);border-radius:5px}
.lkrow .n{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right}
.lkrow .you{text-align:center;font-size:.8rem}
@media (max-width:560px){.lkrow{grid-template-columns:minmax(0,1fr) 34px 60px 76px}.lkrow .track{display:none}}
/* Upgrade my answer */
.upgrade{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--paper)}
.upgrade summary{cursor:pointer;font-weight:700}
.upgrade .upg{line-height:1.7;margin:8px 0 0;white-space:normal}
.upgrade ins{background:var(--ok-soft);color:var(--ok);text-decoration:none;border-radius:3px;padding:0 2px}
.upgrade del{color:var(--pen);text-decoration:line-through;opacity:.75}

/* UI pass (mobile and desktop). Kept as overrides at the end so the booklet look above stays the source of truth. */
:root{--tb:0px} /* height of the pinned top bar on phones, so sticky things and jump links clear it */
@media (max-width:820px){:root{--tb:calc(env(safe-area-inset-top,0px) + 62px)}}
/* Hover lifts only where there's a mouse, so a tapped card doesn't stay tilted on a phone. */
@media (hover:none){.btn:hover,.subj:hover,.kitt:hover{transform:none}}
a.btn{text-decoration:none;display:inline-block;text-align:center}
.panel>.btn.small,.stack>.btn.small,.panel>.row>.btn.small{justify-self:start}
/* Tabs: on narrow screens they scroll sideways; a fade on the right edge shows there are more. */
.tabs{scrollbar-width:none;scroll-behavior:smooth}
.tabs::-webkit-scrollbar{display:none}
@media (max-width:640px){
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
  .tabs button{padding:9px 12px;font-size:.95rem}
}
/* Masthead on phones: the countdown sits as one line under the title instead of a tall block. */
@media (max-width:640px){
  .mast{gap:12px;padding-bottom:16px}
  .count{display:flex;align-items:center;gap:12px}
  .count .l{max-width:none}
}
/* Home: today's plan across the top, the kit tiles in a row beneath it, so nothing leaves a gap. */
.kitrow{grid-template-columns:minmax(0,1fr)}
.kit{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media (max-width:640px){.kit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kitt{padding:12px}}
/* Subject page on phones and tablets: "Start a test" comes first, not after the whole overview. */
@media (max-width:820px){.grid2>.stack:has(>.starter){order:-1}}
/* Test: keep the question at a comfortable reading width on big screens. */
@media (min-width:900px){.testhead,.qcard{max-width:880px;margin-inline:auto}.testhead{margin-bottom:18px}}
/* Test header on phones: the question numbers scroll in one row, so the pinned header stays short. */
@media (max-width:640px){
  .testhead{padding-top:calc(env(safe-area-inset-top,0px) + 8px);margin-inline:-16px;padding-inline:16px}
  .dots{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);padding-right:18px}
  .dots::-webkit-scrollbar{display:none}
  .dot{flex:0 0 auto;width:34px;height:34px;font-size:.78rem}
  .qnum{font-size:1.6rem}
  .nav .btn{padding:.6rem .95rem}
}
/* Ruled answer lines sit under the writing, not through it. */
textarea{background-origin:content-box;background-clip:padding-box}
/* Results: on wider screens each "Revise next" topic is one line with its buttons on the right. */
@media (min-width:521px){.rec:not(:has(.why)){grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:10px 0}.rec:not(:has(.why)).first{padding-top:4px}}
/* Parent page: space between the weekly numbers and the line under them. */
#report{display:grid;gap:10px}
/* Study guide: one continuous rule down the contents, and jump links land below the pinned top bar. */
.toc{gap:0}
.toc a{padding-block:6px}
.guide h2,.guide h3,.guide .hit{scroll-margin-top:calc(var(--tb) + 16px)}
.findbar{top:var(--tb)}
@media (max-width:820px){.toc{padding:10px 0;border-block:1px solid var(--line)}}
/* Wider tap targets for the small true/false and level pickers on touch screens. */
@media (pointer:coarse){.tf label{padding:7px 15px}.seg label{padding:8px 13px}.btn.small{padding:.5rem .9rem}}
/* Flag this mark, and the admin page */
details.flag,#costs details.hint{margin-top:8px}
details.flag>:not(summary),#costs details.hint>:not(summary),.flagcard details.hint>:not(summary){margin:0 12px 10px}
details.flag textarea,.flagcard textarea{width:100%;font:inherit;padding:8px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:inherit}
.flagged{margin-top:10px}
.flagcard .model{white-space:pre-wrap}
/* Free taster banner and founder referral code */
.taster{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.92rem;margin:10px 0 0}
.refcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}