/* ===== design system =====
   Type: Arial, scale 12 / 14 / 16 / 20 / 28; question content stays at 15px with Times maths at 1.10x.
   Spacing: 4 / 8 / 12 / 16 / 24 / 32.  Radius: 6px (pills 999px).
   Colour: paper on a warm grey, one accent for selection and primary actions, and four meaning colours:
   done (green), revisit (amber), danger (red), warning (trial and errors). Dark mode has its own values for every role. */
:root{
  --bg:#f6f6f4;--paper:#ffffff;--ink:#111111;--muted:#5c5c58;--line:#dcdcd8;--line2:#b9b9b4;--accent:#111111;--on-accent:#ffffff;
  --hover:#f0f0ed;--chip:#ececea;--track:#e4e4e0;--box:#111111;--red:#b3261e;--redbg:#fbeae8;
  --ok:#111111;--okfill:#111111;--on-ok:#ffffff;--okbg:#ececea;
  --rev:#5c5c58;--revfill:#a3a39e;--on-rev:#111111;--revbg:#ececea;
  --warn:#111111;--warnbg:#ececea;
  --r:6px;--shadow:0 12px 32px rgba(0,0,0,.18);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121212;--paper:#1b1b1a;--ink:#f0f0ec;--muted:#aaaaa5;--line:#333331;--line2:#55554f;--accent:#f0f0ec;--on-accent:#111111;
    --hover:#262624;--chip:#2b2b29;--track:#333331;--box:#cfcfca;--red:#ff7b72;--redbg:#3a1f1d;
    --ok:#f0f0ec;--okfill:#f0f0ec;--on-ok:#111111;--okbg:#2b2b29;
    --rev:#aaaaa5;--revfill:#8d8d88;--on-rev:#111111;--revbg:#2b2b29;
    --warn:#f0f0ec;--warnbg:#2b2b29;--shadow:0 12px 32px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121212;--paper:#1b1b1a;--ink:#f0f0ec;--muted:#aaaaa5;--line:#333331;--line2:#55554f;--accent:#f0f0ec;--on-accent:#111111;
  --hover:#262624;--chip:#2b2b29;--track:#333331;--box:#cfcfca;--red:#ff7b72;--redbg:#3a1f1d;
  --ok:#f0f0ec;--okfill:#f0f0ec;--on-ok:#111111;--okbg:#2b2b29;
  --rev:#aaaaa5;--revfill:#8d8d88;--on-rev:#111111;--revbg:#2b2b29;
  --warn:#f0f0ec;--warnbg:#2b2b29;--shadow:0 12px 32px rgba(0,0,0,.6);
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 Arial,"Helvetica Neue",Helvetica,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible,label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-weight:700;line-height:1.25}
textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px}
input[type=text],input:not([type]),input[type=number],input[type=date],input[type=search]{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:7px 10px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;margin:0 auto;padding:8px 16px;min-height:56px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.brand{font-weight:700;font-size:16px;margin-right:auto;white-space:nowrap;display:flex;align-items:center}
.brand small{font-weight:400;color:var(--muted);margin-left:8px}
button,.btn,select,input[type=search]{font:inherit;font-size:14px;line-height:1.3;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:7px 12px}
button,.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
button:hover,.btn:hover{background:var(--hover);border-color:var(--line2)}
button:disabled,.btn:disabled{opacity:.5;cursor:default}
button.primary,.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
button.primary:hover{background:var(--accent);opacity:.85}
button.danger{color:var(--red);background:none;border-color:transparent}
button.danger:hover{background:var(--redbg);border-color:transparent}
select{padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none}
input[type=search]{width:180px;min-width:0}
.tog{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.paste{max-width:1180px;margin:0 auto;padding:0 16px 12px;display:none}
.paste.open{display:block}
.paste textarea{width:100%;height:220px;font:13px/1.4 Menlo,Consolas,monospace;background:var(--bg)}
.paste .row{display:flex;gap:8px;margin-top:8px}

.layout{max-width:1180px;margin:0 auto;padding:16px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);max-height:calc(100vh - 90px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.sum{font-size:14px;color:var(--muted);margin:0 4px 8px}
.side ul{list-style:none;margin:0;padding:0}
.side li button{width:100%;text-align:left;border:0;background:none;padding:6px 6px;border-radius:var(--r);display:flex;justify-content:space-between;gap:6px;font-size:12px;min-height:0}
.side li button span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side li button:hover{background:var(--hover)}
.okc{color:var(--ink)} .wc{color:var(--red)}
.notice{background:var(--chip);color:var(--ink);border-left:4px solid var(--red);border-radius:var(--r);padding:8px 12px;margin-bottom:12px;font-size:14px}
.empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:16px}

/* question cards: the content keeps its IB look (15px Arial, Times maths); the toolbar is interface */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-bottom:16px;scroll-margin-top:90px;font-size:15px}
.src{font-size:12px;font-weight:700;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.chip{font-weight:400;color:var(--muted);background:var(--chip);border-radius:var(--r);padding:1px 8px}
.chip.ok{color:var(--ink)}
.issues{background:var(--chip);color:var(--ink);border-left:4px solid var(--red);border-radius:var(--r);padding:6px 10px;margin:0 0 12px;font-size:13px}
.issues summary{cursor:pointer;font-weight:700}
.issues ul{margin:6px 0 2px;padding-left:18px}
.qhead{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px;margin:0 0 8px}
.codes{font-weight:400;color:var(--muted)}
.from{font-weight:400;color:var(--muted)}
.orig{font-size:12px;color:var(--muted);margin:-4px 0 10px}
.orig b{color:var(--ink);font-weight:700}
.idx{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;overflow-x:auto}
.idx table{border-collapse:collapse;font-size:13px;width:100%}
.idx th,.idx td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;white-space:nowrap}
.idx th{font-weight:700}
.idx textarea{width:100%;height:140px;margin-top:12px;font:12px/1.4 Menlo,Consolas,monospace;background:var(--bg)}
.idx p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.qbody{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px}
.calc{padding-top:1px}

.g{display:grid;grid-template-columns:2.3em 2.3em minmax(0,1fr) auto;column-gap:6px;row-gap:10px;align-items:baseline}
.ms .g{grid-template-columns:2.3em 2.3em minmax(0,1fr) 5.8em;row-gap:8px}
.c13{grid-column:1/4}.c23{grid-column:2/4}.c33{grid-column:3/4}
.c15{grid-column:1/5}.c25{grid-column:2/5}.c35{grid-column:3/5}
.l1{grid-column:1}.l2{grid-column:2}
.mk{grid-column:4;text-align:right;white-space:nowrap;padding-left:14px}
.code{grid-column:4;text-align:right;font-weight:700;font-style:italic;white-space:nowrap}
.tot{grid-column:1/5;text-align:right;font-weight:700;font-style:italic;margin-bottom:6px}
.meth{font-weight:700;margin-top:4px}
.note{border:1px solid var(--box);padding:6px 10px}
.note div+div{padding-left:3.1em}
.fig{border:1px dashed var(--line);border-radius:var(--r);padding:8px 10px;color:var(--muted);font-size:13px;text-align:left}
.fig pre{margin:6px 0 0;white-space:pre-wrap;font-size:12px}
.txt{min-width:0;overflow-x:auto;overflow-y:hidden}
.ms{border-top:1px solid var(--line);margin-top:22px;padding-top:12px}
.mslab{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:10px}
.sec{font-size:20px;font-weight:700;margin:32px 0 12px}
mjx-container[display="true"]{margin:.35em 0 !important}
.figx{margin:6px 0 4px;text-align:center;min-width:0;overflow-x:auto}
.fsvg{max-width:100%;height:auto;color:var(--ink)}
.fnote{text-align:right;font-weight:700;font-size:14px;margin:0 0 6px}
.fframe{border:1px solid var(--ink);padding:14px 10px}
.figx figcaption{font-size:13px;color:var(--muted);margin-top:4px}
table.ftab{border-collapse:collapse;margin:4px auto}
.ftab td{border:1px solid var(--ink);padding:5px 14px;text-align:center}

mjx-container svg [stroke-width="0"]{stroke:none}
.im{font-family:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",serif;font-size:1.1em;line-height:1;white-space:nowrap;margin:0 .1em;font-style:normal}
.im.np{margin-right:0}
.im i{font-style:italic}
.im sup,.im sub{font-size:.72em;line-height:0}
.im sup{vertical-align:.5em}
.im sub{vertical-align:-.28em}

/* print preview (always light, like paper) */
.pv-ctl{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:-6mm 0 2mm;font:12px Arial,Helvetica,sans-serif;color:#555}
.pv-ctl button{font:700 13px Arial,Helvetica,sans-serif;width:26px;height:24px;min-height:0;padding:0;border:1px solid #bbb;border-radius:4px;background:#f3f4f6;color:#222;cursor:pointer}
.pv-ctl button.txt-btn{width:auto;padding:0 8px;font-weight:400}
.pv-ctl b{min-width:5.5em;text-align:center;color:#222}
.sheet .pv-ctl+.pd-ans{margin-top:0}
#pdfStage{position:fixed;left:-20000px;top:0;width:178mm;background:#fff;color:#000;--ink:#000;--paper:#fff;--line:#bbb;--muted:#555;--box:#000;--accent:#2f557f;--red:#d0312d;color-scheme:light}
#pdfStage .pd{font-family:Arial,Helvetica,sans-serif}
.pick{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:14px;color:var(--muted);margin-left:auto;cursor:pointer}
.side li{display:flex;align-items:center;gap:2px}
.side li input{flex:none;margin:0 2px 0 4px}
.side li button{flex:1;min-width:0}
.sidesel{display:flex;gap:6px;margin:0 4px 8px;font-size:12px}
.sidesel button{font-size:12px;padding:4px 8px;min-height:0}

/* dialogs */
.dlg-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 10px 16px}
.dlg-back.open{display:flex}
.dlg{background:var(--paper);color:var(--ink);border-radius:var(--r);width:100%;max-width:1120px;display:grid;grid-template-columns:320px minmax(0,1fr);overflow:hidden;box-shadow:var(--shadow)}
.dlg .opts{padding:20px 20px 24px;border-right:1px solid var(--line);font-size:14px;display:flex;flex-direction:column;gap:16px}
.dlg h2{font-size:20px;margin:0}
.dlg fieldset{border:0;padding:0;margin:0}
.dlg legend{font-weight:700;margin-bottom:6px;padding:0}
.dlg .opts label{display:flex;gap:8px;align-items:center;margin:4px 0}
.dlg .opts label:has(select){flex-direction:column;align-items:stretch;gap:4px;margin:8px 0}
.dlg .opts select,.dlg .opts input[type=text]{width:100%;font:inherit;font-size:14px;color:var(--ink);background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px}
.dlg .opts select{padding-right:28px}
.dlg .acts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dlg .acts button{font-weight:700}
.dlg .acts .primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.dlg .hint{font-size:13px;color:var(--muted);margin:0}
.pstat{font-size:13px;color:var(--muted);padding:2px 2px}
.pstat.on{color:var(--ink);background:var(--hover);border-radius:var(--r);padding:8px 10px}
.pstat.bad{color:var(--ink);background:var(--chip);border-left:4px solid var(--red);border-radius:var(--r);padding:8px 10px}
.plinks{display:flex;flex-direction:column;gap:6px}
.plinks a{display:block;text-align:center;font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:8px 10px}
.plinks a:hover{background:var(--hover)}
.dlg .pv{background:#7d8086;padding:18px;max-height:calc(100vh - 60px);overflow:auto}
.sheet{--ink:#000;--paper:#fff;--line:#bbb;--muted:#555;--box:#000;--accent:#2f557f;--red:#d0312d;background:#fff;color:#000;width:210mm;max-width:100%;margin:0 auto;padding:16mm;box-shadow:0 2px 12px rgba(0,0,0,.35);color-scheme:light}
.sheet .pd-newpage{border-top:2px dashed #9aa;margin-top:8mm;padding-top:8mm}
.sheet .pd-newpage::before{content:"new page";display:block;font:11px Arial;color:#8a8f96;margin:-6.5mm 0 3mm}

/* Studio (admin) */
.admhid{display:none}
.rbar{padding-top:0;min-height:0;padding-bottom:12px}
.rbar .grow{flex:1}
body:not(.atab-review) .rbar{display:none}
body.atab-topics .side,body.atab-settings .side,body.atab-schools .side,body.atab-errors .side{display:none}
body.atab-topics .layout,body.atab-settings .layout,body.atab-schools .layout,body.atab-errors .layout{grid-template-columns:minmax(0,1fr)}
#aTabs{margin-left:16px;margin-right:auto}
.more{position:relative}
.more summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:14px;background:var(--paper);display:inline-flex;align-items:center;min-height:36px}
.more summary::-webkit-details-marker{display:none}
.more-m{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:170px}
.more-m button{text-align:left;justify-content:flex-start;border-color:transparent}
.tpg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.tpg{grid-template-columns:minmax(0,1fr)}}
.tlib,.ttop{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tlib{position:sticky;top:calc(var(--hdrh,70px) + 8px)}
.tl-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tl-h h2{font-size:20px;margin:0;margin-right:auto}
.tl-h input{width:55%;min-width:140px}
.crow.sm{margin:0 0 8px;gap:6px}
.crow.sm .chipb{font-size:13px;padding:4px 10px}
.crow.sm .tog{margin-left:auto;font-size:13px}
.llist{max-height:calc(100vh - 290px);overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;padding:8px 10px;border-top:1px solid var(--line)}
.lrow:first-child{border-top:0}
.lrow.on{background:var(--hover)}
.lrow input{margin-top:3px}
.lprev{display:block;text-align:left;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;min-width:0;min-height:0;border-radius:0}
.lprev:hover{background:none}
.lprev:hover .lsn{text-decoration:underline}
.lsn{display:block;font-size:14px;line-height:1.35}
.lid{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.lmeta{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px}
.ltag{font-size:12px;border-radius:var(--r);padding:1px 8px;background:var(--chip);color:var(--ink)}
.ltag.none{background:var(--paper);color:var(--red);border:1px solid var(--red)}
.lfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:14px;min-height:36px}
.lfoot .primary,.tsel .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.lfoot .primary[disabled]{opacity:.5}
.tlist{display:flex;flex-direction:column;gap:2px;margin:12px 0}
.titem{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;background:none;border-radius:var(--r);padding:8px 10px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;min-height:0}
.titem:hover{background:var(--hover)}
.titem[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.titem[aria-pressed="true"] .muted{color:var(--on-accent)}
.tsel{border-top:1px solid var(--line);padding-top:12px}
.tsel-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tsel-h b{font-size:16px}
.tsel-h .grow{flex:1}
.tsel-h button{font-size:13px;padding:4px 9px;min-height:0}
.tqlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r)}
.tq{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--paper)}
.tq:first-child{border-top:0}
.tq .grip{cursor:grab;color:var(--muted);letter-spacing:-2px;padding-top:2px}
.tq .tqn{width:1.6em;color:var(--muted);font-size:13px;padding-top:1px;font-variant-numeric:tabular-nums}
.tq .lprev{flex:1}
.tqa{display:flex;gap:3px}
.tqa button{font-size:12px;padding:2px 7px;min-height:0}
li.tq.dr-over-top{box-shadow:inset 0 2px 0 var(--accent)}
li.tq.dr-over-bot{box-shadow:inset 0 -2px 0 var(--accent)}
li.tq.dr-src{opacity:.4}
.dragh{font-size:12px;margin:8px 2px 0}
.pvq .qhead{margin-bottom:8px}
.pvq .ms{margin-top:18px}
.pvq{font-size:15px}
.spg{max-width:720px}
.spg h1{font-size:28px;margin:4px 0 16px}
.sbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:12px}
.sbox h2{font-size:16px;margin:0 0 6px}
.sbox p{margin:0 0 10px;color:var(--muted);font-size:14px}
.sbox textarea{width:100%;height:120px;margin-bottom:8px;font-size:14px}
.sbox textarea#gCsv{font:12px/1.4 ui-monospace,Menlo,Consolas,monospace}
.sbox input{font-size:14px}
#siteIn{display:block;width:100%;max-width:420px}

.subh{font-size:14px;font-weight:700;margin:16px 0 6px}
.subh span{color:var(--muted);font-weight:400}
.ctag{font-size:12px;border:1px solid var(--line);border-radius:var(--r);padding:1px 8px;color:var(--muted);font-weight:400;margin-left:6px}
.assub{margin:0 0 6px 26px}
.assub .aschk{font-size:14px;padding:2px 0}
.crsel{font-size:14px;padding:4px 28px 4px 8px;border-radius:var(--r)}

.prev{font-size:13px;color:var(--rev);margin-top:4px}
.ptxt{min-width:3em}
.tcell.cnts{flex:none;font-size:14px;text-align:right;white-space:nowrap}
.rvc{display:inline-block;margin-left:8px;font-size:12px;color:var(--rev);background:var(--revbg);border-radius:var(--r);padding:2px 8px;font-weight:400;vertical-align:1px}
.stats .rvn{width:110px;flex:none;text-align:right;font-size:13px;color:var(--rev)}
.stats .sbar{width:220px}
.qchip.byt{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.qchip.sample{min-width:0;padding:0 6px;font-size:11px;cursor:default}
.legend{float:right;font-weight:400;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)}
.hist{font-size:13px}

.pbar span.x{background:var(--accent)}
.stseg button[data-st="exp"][aria-pressed="true"],.stseg button[data-tst="exp"][aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.stseg button[data-tst="done"][aria-pressed="true"]{background:var(--okfill);color:var(--on-ok)}
.stseg button[data-tst="rev"][aria-pressed="true"]{background:var(--revfill);color:var(--on-rev)}
.pcard.st-exp{box-shadow:inset 4px 0 0 var(--accent)}
.qdot.exp{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.spill.exp{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tile.revt{border-color:var(--ink)}
.tstrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-4px 0 12px;font-size:14px}
.rcard.st-rev{box-shadow:inset 4px 0 0 var(--revfill)}
.rcard.st-exp{box-shadow:inset 4px 0 0 var(--accent)}
.rcard.st-done{box-shadow:inset 4px 0 0 var(--okfill)}
.stats .num{width:74px}

.pbar{display:flex}
.pbar span{flex:none;border-radius:0}
.pbar span:first-child{border-radius:99px 0 0 99px}
.pbar span.r{background:var(--revfill)}
.qnav{display:inline-flex;align-items:center;gap:6px;margin-right:6px}
.qnav .abtn{padding:6px 12px;font-size:14px;min-width:36px}
.qnav .abtn[disabled]{opacity:.35;cursor:default}
.qnav .muted{font-size:13px;font-variant-numeric:tabular-nums}
.kbhint{margin:12px 0 0;font-size:12px;color:var(--muted);text-align:right}
.cnt2{font-weight:400;color:var(--muted);letter-spacing:0}
.cbox{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.cgrp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cgn{font-size:14px;font-weight:700;margin-right:4px}
.qchip{min-width:36px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.qchip:hover{border-color:var(--accent)}
.qchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.stats .trow{padding:10px 16px;gap:12px}
.stats .th{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 16px}
.stats .sbar{width:150px;flex:none}
.stats .num{width:68px;flex:none;text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.stats .grow .muted{font-size:13px}
@media (max-width:700px){.stats .sbar{display:none}.stats .num{width:52px}}

.pickban{padding:12px 16px;margin:0 0 16px;border-radius:var(--r);background:var(--chip);border-left:4px solid var(--ink);font-size:15px}
.sechb{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sechb .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;text-transform:none;letter-spacing:0;font-size:14px}
.selbar .muted{margin-left:4px}
.selbar button[disabled]{opacity:.5;cursor:default}
.aslist{list-style:none;margin:0 0 12px;padding:0;max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.aslist li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);font-size:14px}
.aslist li:first-child{border-top:0}
.aslist li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.aslist li b{color:var(--ink);font-weight:700}
.aslist li button{border:0;background:none;font-size:18px;line-height:1;padding:2px 6px;color:var(--muted);min-height:0}
.qdot{cursor:pointer;background:var(--paper);font:inherit;font-size:12px;padding:0}
.qdot:hover{border-color:var(--accent)}
.qdot.on{outline:2px solid var(--accent);outline-offset:1px}
.trow.on{background:var(--hover)}
.trow .muted{font-size:14px}
.spill{font-size:12px;border:1px solid var(--line);border-radius:var(--r);padding:2px 9px;color:var(--muted);white-space:nowrap}
.spill.done{background:var(--okfill);border-color:var(--okfill);color:var(--on-ok)}
.spill.rev{background:var(--revfill);border-color:var(--revfill);color:var(--on-rev)}
.spill.bm{border-color:var(--ink);color:var(--ink)}
.rcard{margin:8px 0 16px;border-color:var(--accent)}
.rcard .pact b{font-size:16px}

/* teacher and student: tabs, tables, progress */
.ttabs{display:inline-flex;gap:4px;margin-left:16px;margin-right:auto;align-self:stretch}
.ttabs[hidden]{display:none}
.ttabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 6px;margin:-8px 0;min-height:56px;font-size:15px;color:var(--muted)}
.ttabs button:hover{background:none;color:var(--ink)}
.ttabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
body.pub .brand{margin-right:0}
.who{font-weight:400;font-size:14px;color:var(--muted);margin-left:12px}
#pvStu{font-size:13px;padding:4px 28px 4px 8px}
#pvSchool{font-size:13px;padding:4px 24px 4px 8px;margin:0 6px 0 4px;max-width:170px}
.snew{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}.snew input{flex:1;min-width:220px}
.sstate{display:inline-block;font-size:12px;font-weight:700;border-radius:var(--r);padding:2px 8px;margin-left:8px;background:var(--chip);color:var(--muted);vertical-align:2px}
.sstate.s-trial{background:var(--chip);color:var(--ink)}.sstate.s-paid{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}.sstate.s-ended,.sstate.s-grace{background:var(--chip);color:var(--red)}
.sline{display:block;font-size:13px;margin-top:2px}
.nstep{font-size:14px}.nstep.warn{color:var(--red);font-weight:700}.nstep.ok{color:var(--ink)}.nstep.muted{color:var(--muted)}
.slinkrow{display:flex;gap:8px;flex-wrap:wrap}.slink{flex:1;min-width:260px;font:13px ui-monospace,Menlo,Consolas,monospace}
.sform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:8px 0}.sform label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.srow{display:flex;gap:8px;flex-wrap:wrap}
.tile.locked b{color:var(--muted)}.tile.soon{opacity:.6;cursor:default}
.trialban{margin:0 0 16px;padding:10px 12px;border-radius:var(--r);background:var(--chip);font-size:14px}.trialban.warn{border-left:4px solid var(--red)}
.gate{max-width:640px;margin:40px auto}.gate h1{font-size:28px}.famsg p{margin:0 0 10px}.famsg a{color:var(--ink);text-underline-offset:3px}
.glock{font-size:13px;margin-right:8px;white-space:nowrap}
#tutorBtn{margin-left:auto;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);padding:4px 6px}
#tutorBtn[hidden],body:not(.pub) #tutorBtn{display:none}
*:has(> .glock){flex-wrap:wrap;row-gap:6px}
.brand #pubWho{border:0;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;padding:2px 6px;margin-left:4px;min-height:0;font-weight:400;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.brand #pubWho:hover{color:var(--ink)}
.brand #pubWho[hidden],body:not(.pub) #pubWho{display:none}
.renamed{margin:-8px 0 16px;color:var(--ink);font-size:14px}
.rnbox{max-width:420px}.rnbox input{display:block;width:100%;box-sizing:border-box;font:inherit;margin-top:12px}
#pvStu[hidden]{display:none}
.linkbtn{background:none;border:0;padding:2px 4px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;border-radius:var(--r);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.linkbtn:hover{text-decoration-color:var(--ink);background:none}
.foot{margin-top:24px;text-align:center}
.jhint{color:var(--muted);font-size:14px}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog.sm{margin:0}
.pbar{flex:1;height:8px;border-radius:99px;background:var(--track);overflow:hidden;min-width:60px}
.pbar span{display:block;height:100%;border-radius:99px;background:var(--okfill)}
.ptxt{font-size:13px;color:var(--muted);min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.pagebar{max-width:420px;margin:-4px 0 16px}
.stseg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stseg button{border:0;border-radius:0;background:var(--paper);padding:7px 12px;font-size:14px;color:var(--ink)}
.stseg button+button{border-left:1px solid var(--line)}
.stseg button[data-st="done"][aria-pressed="true"]{background:var(--okfill);color:var(--on-ok)}
.stseg button[data-st="rev"][aria-pressed="true"]{background:var(--revfill);color:var(--on-rev)}
.pcard.st-done{box-shadow:inset 4px 0 0 var(--okfill)}
.pcard.st-rev{box-shadow:inset 4px 0 0 var(--revfill)}
.tile.asg{border-color:var(--accent)}
.tbl{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;margin-bottom:8px}
.trow{display:flex;align-items:center;gap:16px;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;border-radius:0;min-height:0;justify-content:flex-start}
.trow:first-child{border-top:0}
.trow.link{cursor:pointer}
.trow.link:hover{background:var(--hover)}
.trow.link b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.trow.link:hover b{text-decoration-color:var(--ink)}
.tcell.grow{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tcell.grow .qdots{margin:0}
.sep::before{content:"\00b7";margin-right:4px}
.stats .tcell.grow{display:block}
.tcell.pw{width:180px;flex:none}
.muted{color:var(--muted)}
.qdots{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.qdot{width:24px;height:24px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--line);color:var(--muted);min-height:0}
.qdot.done{background:var(--okfill);border-color:var(--okfill);color:var(--on-ok)}
.qdot.rev{background:var(--paper);border:2px solid var(--ink);color:var(--ink);font-weight:700}
.lchips{display:flex;flex-wrap:wrap;gap:6px}
.lchip{font-size:13px;border:1px solid var(--line);border-radius:var(--r);padding:3px 10px}
.lchip.rev{border-color:var(--ink)}
.sech{font-size:16px;font-weight:700;color:var(--ink);margin:28px 0 10px;text-transform:none;letter-spacing:0}
.tile.newcls{cursor:default;display:flex;flex-direction:column;gap:8px;border-style:dashed}
.tile.newcls b{margin:0}
.tile.newcls input,.tile.newcls select{width:100%;font-size:14px;padding:7px 10px}
.tile.newcls select{padding-right:28px}
.tile.newcls .primary,.joinbox .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.addst{margin-top:16px}
.addst summary{cursor:pointer;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.addst textarea{display:block;width:100%;max-width:420px;height:110px;margin:12px 0 8px}
.aschk{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:14px}
.aschk span{color:var(--muted);font-size:13px}
.asind{margin-top:6px}
.asind summary{cursor:pointer;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.sdlg .jmsg{color:var(--red);min-height:1em;margin:0}
@media (max-width:640px){.tcell.pw{width:110px}.ttabs{margin-left:4px}}

/* markscheme focus view */
body.msopen .pcard:not(.msact),body.msopen .tbar,body.msopen .cchips.cpage,body.msopen .vseg,body.msopen #main>.back,body.msopen .setinfo{display:none!important}
.focusbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;font-size:14px;color:var(--muted)}
/* teacher selection bar */
.selbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;font-size:14px}
.selbar button{padding:6px 10px;font-size:14px}
.selbar[hidden]{display:none}
.selbar .grow{display:none}
@media (max-width:700px){.selbar{flex-basis:100%;margin-left:0;padding-top:8px;border-top:1px solid var(--line)}.selbar .grow{display:block;flex:1}.selbar button{padding:6px 8px;font-size:13px}}

/* share dialog and code */
.sdlg{max-width:480px;width:calc(100vw - 32px);grid-template-columns:minmax(0,1fr)}
.sdlg .opts{min-width:0}
.aslist{max-width:100%}
.sdlg .opts{border-right:0}
.sdlg input[type=text],.sdlg select{width:100%}
.sdlg .acts{flex-direction:row-reverse;justify-content:flex-end}
.sdlg .acts button{flex:1}
.bigcode{font:700 44px/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;text-align:center;padding:18px 10px;margin:8px 0 6px;border:2px dashed var(--line);border-radius:var(--r)}
.codeboard{position:fixed;inset:0;z-index:70;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.codeboard[hidden]{display:none}
.cb-in p{font:400 clamp(18px,3vw,34px)/1.3 Arial,Helvetica,sans-serif;margin:0 0 .4em}
.cb-code{font:700 clamp(64px,14vw,200px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;margin:.15em 0 .25em}
.cb-name{color:#555}
.cb-in button{margin-top:28px;font-size:15px;background:#fff;color:#111;border-color:#bbb}
/* class set tiles and join box */
.tile.sett{border-color:var(--ink)}
.tile.sett .code{display:inline-block;margin-top:10px;font:700 14px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;border:1px solid var(--line);border-radius:var(--r);padding:2px 8px;color:var(--ink)}
.joinbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;margin:0 0 24px;border:1px solid var(--accent);border-radius:var(--r);background:var(--paper)}
.joinbox label{font-weight:700;font-size:16px}
.joinbox input{font:700 18px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;width:9.5em;padding:7px 10px}
.joinbox .jmsg{flex-basis:100%;color:var(--red);font-size:14px}
.setinfo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-8px 0 16px;font-size:14px}
.setinfo .snote{flex-basis:100%;background:var(--chip);border-left:4px solid var(--ink);border-radius:var(--r);padding:10px 14px;font-size:16px;color:var(--ink)}
.joinbox button.primary,.selbar button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.setinfo .code{font:700 14px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;border:1px solid var(--line);border-radius:var(--r);padding:3px 8px}
.setinfo .muted{color:var(--muted)}

/* courses, bookmarks, filters */
.crow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;font-size:14px}
.crow>span{color:var(--muted);margin-right:4px}
.crow.qfrow{margin-top:0;gap:8px 16px}
.crow.sm.qfrow{gap:6px 14px}
.qfg{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.crow>span.qfg{color:inherit;margin-right:0}
.qfg>span{color:var(--muted);margin-right:4px}
.qfrow .qfg .qfsep{margin-left:0}
.crow.sm.qfrow{margin-top:-4px}
.qfrow .qfsep{margin-left:14px}
.qfclear{border:0;background:none;padding:0;margin-left:8px;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qfclear:hover,.revonly:hover,.qedit:hover,#tutorBtn:hover{background:none}
.trow.ended{opacity:.7}
.streak{margin:0 0 16px;font-size:16px}
.streak.none{color:var(--muted)}
.atag{display:inline-block;font-size:12px;font-weight:700;border-radius:var(--r);padding:2px 8px;margin-left:8px;vertical-align:1px}
.atag.ok{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.atag.quiet{background:var(--chip);color:var(--ink)}
.atag.none{background:var(--chip);color:var(--muted)}
.actline{margin:-8px 0 16px;font-size:14px}
.msin{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.msin-act{margin-top:12px}
.g > .txt.wide{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
.g > .txt.wide.end{-webkit-mask-image:none;mask-image:none}
.qedit{border:0;background:none;color:var(--accent);font:inherit;font-size:12px;padding:0 4px;cursor:pointer;text-decoration:underline;min-height:0}
.qeback{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:46;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto}
.qebox{background:var(--paper);color:var(--ink);border-radius:var(--r);width:100%;max-width:900px;padding:20px 24px 24px;box-shadow:var(--shadow)}
.qehead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:20px;font-weight:700;margin:0 0 12px}
.qehead .muted{font-size:14px;font-weight:400}
.qebox textarea{display:block;width:100%;box-sizing:border-box;min-height:60vh;margin:10px 0 6px;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;background:var(--paper);color:var(--ink)}
.qemsg{color:var(--red);min-height:1em;margin:0 0 8px;font-size:14px}
.qerow{display:flex;gap:8px;margin-top:16px}
.asgedit{display:grid;gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.asgedit label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.asgedit input,.asgedit textarea{font:inherit;color:var(--ink)}
.hint{color:var(--muted);font-size:14px;margin:-4px 0 16px}
.resum{margin:-4px 0 8px;font-size:14px}
.revonly{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:0;display:inline}
.revonly[aria-pressed="true"]{font-weight:700}
select.asgend{font-size:14px;margin-right:8px}
.chipb{border:1px solid var(--line2);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:6px 14px;font:inherit;font-size:14px;line-height:1.3;cursor:pointer}
.chipb:hover{border-color:var(--ink);background:var(--paper)}
.chipb[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cpick{max-width:560px;margin:32px auto;text-align:center}
.cpick h1{font-size:28px;margin:0 0 8px}
.cpick p{color:var(--muted);margin:0 0 24px}
.cpick .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.cpick .tile{text-align:center;padding:24px 16px;align-items:center}
.cpick .tile b{font-size:20px;margin:0}
.cour{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:none;color:var(--ink);cursor:pointer;margin-left:10px;font-weight:400}
.tile.bmt{border-color:var(--ink)}
.ptop{gap:10px;align-items:center}
.bmb{border:1px solid var(--line);background:none;color:var(--ink);border-radius:var(--r);padding:3px 10px;font:inherit;font-size:14px;cursor:pointer;margin-right:auto}
.bmb[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--paper)}
/* the card toolbar: Select on the left; Bookmark, Markscheme and Present on the right */
.pact{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-6px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:14px}
.pact .pick{margin:0;font-size:14px}
.pact-r{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.abtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:6px 12px;font:inherit;font-size:14px;line-height:1.3;cursor:pointer}
.abtn svg{width:15px;height:15px;flex:none}
.abtn:hover{border-color:var(--accent);background:var(--paper)}
.abtn.bm[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.abtn.msb[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.abtn.pr svg{color:var(--ink)}
.cchips{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted)}
.cchips.cpage{margin:-6px 0 16px;padding-top:0;gap:4px 16px}
.cchip{font-size:12px;color:var(--muted);white-space:nowrap}
.cchip b{color:var(--ink);font-weight:700}
.tile .cchip{font-size:12px;color:var(--muted);display:inline-block}
.tile .cchip b{display:inline;font-size:inherit;line-height:inherit;margin:0}
.pcard.msact{border-color:var(--accent)}
.msbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.vseg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-left:auto}
.vseg button{border:0;border-radius:0;padding:6px 12px;font-size:14px}
.vseg button+button{border-left:1px solid var(--line)}
.vseg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
/* markscheme panel */
.msd{position:fixed;top:var(--hdr,0px);right:0;bottom:0;z-index:40;width:var(--msw,460px);max-width:100vw;background:var(--paper);border-left:1px solid var(--line);box-shadow:-4px 0 16px rgba(0,0,0,.08);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);font-size:15px}
.msd[hidden]{display:none}
.msd-head{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line);font-size:14px}
.msd-head b{font-size:16px}
.msd-head .grow{flex:1}
.msd-head button{min-width:36px;font-size:16px;padding:6px 8px}
.msd-head button:disabled{opacity:.35;cursor:default}
.lrow.pvact,.tq.pvact{background:var(--hover);box-shadow:inset 3px 0 0 var(--accent)}
.msd-body{flex:1;overflow:auto;padding:16px 20px 24px 20px}
.msd-grip{position:absolute;left:-7px;top:0;bottom:0;width:14px;cursor:col-resize;display:flex;align-items:center;justify-content:center;touch-action:none;outline:none}
.msd-grip span{width:5px;height:54px;border-radius:4px;background:var(--line)}
.msd-grip:hover span,.msd-grip:focus-visible span,.msd-grip.drag span{background:var(--accent)}
body.msd-dragging{cursor:col-resize;user-select:none}
@media (min-width:900px){body.pub.msopen .layout,body.pvopen .layout{margin-right:var(--msw,460px);max-width:none}}
@media (max-width:899px){.msd{width:100vw}.msd-grip{display:none}}
/* admin: drag to reorder in the sidebar */
.side li.dr{cursor:grab}
.side li.dr-over-top{box-shadow:inset 0 2px 0 var(--accent)}
.side li.dr-over-bot{box-shadow:inset 0 -2px 0 var(--accent)}
.side li.dr-src{opacity:.4}
.side .dhint{font-size:12px;color:var(--muted);margin:2px 0 6px}

/* ---- roles: admin / teacher / student ---- */
body.pub .adm{display:none!important}
body:not(.pub) .pub-t{display:none}
body.pub .adm-t{display:none}
body.pub .tchr{display:none!important}
body.pub .layout{grid-template-columns:minmax(0,1fr);max-width:880px}
body.pub .side{display:none}
.pub-t{background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;min-height:0}
.pub-t:hover{background:none}
.pvbar[hidden]{display:none}
.pvbar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;background:var(--chip);color:var(--ink);border-bottom:1px solid var(--line);font-size:13px;padding:6px 16px}
.pvbar button,.pvbar select{font-size:13px;padding:4px 10px;min-height:0}
.pvbar select{padding-right:24px}
.viewas{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
.viewas span{padding:0 8px;color:var(--muted)}
.viewas button{border:0;border-left:1px solid var(--line);border-radius:0;padding:7px 10px}
.viewas button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.pub-h{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin:4px 0 16px}
.pub-h h1{font-size:28px;line-height:1.2;margin:0}
.pub-h .cnt{color:var(--muted);font-size:14px}
body.student.home .pub-h{margin:28px 0 10px}
body.student.home .pub-h h1{font-size:16px}
.back{background:none;border:0;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;padding:4px 0;min-height:0;justify-content:flex-start;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.back:hover{text-decoration-color:var(--ink);background:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-items:stretch}
.tile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;text-align:left;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s}
.tile:hover,.tile:focus-visible{border-color:var(--accent);background:var(--paper)}
.tile b{display:block;font-size:16px;line-height:1.3;margin-bottom:4px}
.tile span{color:var(--muted);font-size:14px}
.tile .prog{margin-top:auto;padding-top:12px}
.tile .prog .ptxt{font-size:13px}
.tbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:14px}
.tbar .tsel{margin-right:auto;color:var(--muted)}
.pcard .ptop{display:flex;justify-content:flex-end;margin:-8px 0 6px}
.msw{margin-top:16px}
.msbtn{font-size:14px}
.msbox{margin-top:12px}
.pcard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* admin: groups panel */
.grp{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px;font-size:14px}
.grp-h{font-weight:700;margin:0 0 6px}
.gitem{display:flex;justify-content:space-between;width:100%;text-align:left;border:0;background:none;padding:5px 6px;border-radius:var(--r);font:inherit;color:var(--ink);cursor:pointer}
.gitem span{color:var(--muted)}
.gitem:hover{background:var(--hover)}
.gitem[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.gitem[aria-pressed="true"] span{color:var(--on-accent)}
.grow2{display:flex;gap:6px;margin-top:8px}
.grow2 input,.grow2 select{flex:1;min-width:0;font-size:14px;padding:6px 10px}
.grow2 select{padding-right:28px}
.grow2 button{font-size:13px;padding:6px 10px;white-space:nowrap}
.gmsg{color:var(--ink);margin-top:6px;font-size:14px}
.gio{margin-top:8px}
.gio summary{cursor:pointer;color:var(--muted)}
.gio textarea{width:100%;height:120px;font:12px/1.4 ui-monospace,monospace;margin-top:6px}
.gctl{display:inline-flex;gap:4px;margin-left:8px}
.gctl button{font-size:12px;padding:2px 7px}

.bdlg{max-width:440px;grid-template-columns:1fr}
.bdlg .opts{border-right:0}
.bdlg input[type=text]{width:100%}
.bprev{border:1px dashed var(--line);border-radius:var(--r);padding:8px 10px;font-size:13px}
.bprev>span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.bp-q{color:var(--ink)}
.bp-q{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.qhm{display:flex;justify-content:space-between;align-items:baseline;gap:.4em 1.2em;flex-wrap:wrap;min-width:0}
.mslab.hb{display:flex;justify-content:space-between;align-items:baseline;gap:.4em 1.2em;flex-wrap:wrap}
.qbrand{font-family:Arial,Helvetica,sans-serif;font-size:.8em;font-weight:700;font-style:normal;color:var(--muted);letter-spacing:.03em;white-space:nowrap;margin-left:auto;border:1.6px solid currentColor;border-radius:6px;padding:.16em .6em;line-height:1.25}
.mslab .qbrand{font-size:1em}
.qbrand.subtle{opacity:.6;font-weight:400;border-width:1px}
.qbrand.strong{color:var(--ink);border-width:2px}
.slide .qbrand{color:#6f747b;font-size:.66em}
.slide .mslab .qbrand{font-size:1em}
.slide .qbrand.subtle{color:#aeb2b8;opacity:1}
.slide .qbrand.strong{color:#4f545a}

/* Present: the slide itself is always paper-white, like the printed exam */
.pres{position:fixed;inset:0;z-index:60;background:#1f2023;display:none;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pres.open{display:flex}
.pres-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;background:#2b2c30;color:#e6e6e6;font:13px Arial,Helvetica,sans-serif}
.pres-bar label{display:flex;align-items:center;gap:5px}
.pres-bar select,.pres-bar button{font:13px Arial,Helvetica,sans-serif;color:#eee;background:#3a3b40;border:1px solid #55575d;border-radius:var(--r);padding:6px 9px;cursor:pointer;min-height:32px}
.pres-bar select{background-image:linear-gradient(45deg,transparent 50%,#bbb 50%),linear-gradient(135deg,#bbb 50%,transparent 50%);background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:22px}
.pres-bar button:hover{background:#46474d}
.pres-bar button[aria-pressed="true"]{background:#e6e6e6;border-color:#e6e6e6;color:#111}
.pres-bar .grow{flex:1}
.pres-note{color:#f3c27a;font-size:12px;text-align:right}
.pres-pos{min-width:4.5em;text-align:center;font-weight:700}
.pres.bare .pres-bar{display:none}
.pres-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px}
.pres.bare .pres-stage{padding:0}
.slide{--ink:#000;--paper:#fff;--line:#bbb;--muted:#555;--box:#000;--accent:#2f557f;--red:#d0312d;color-scheme:light;background:#fff;color:#000;display:grid;overflow:hidden;box-shadow:0 6px 40px rgba(0,0,0,.55)}
.slide{position:relative}
.slide.left{grid-template-columns:var(--qa) minmax(0,1fr)}
.slide.full{grid-template-columns:minmax(0,1fr)}
.slide.full .sq{border:0;padding:2.6% 3.4%}
.sdiv{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;touch-action:none;outline:none}
.slide.left .sdiv{top:0;bottom:0;left:calc(var(--qa) - 9px);width:18px;cursor:col-resize}
.slide.top .sdiv{left:0;right:0;top:calc(var(--qa) - 9px);height:18px;cursor:row-resize}
.sdiv span{display:block;background:#c3c7cd;border-radius:4px;transition:background .15s}
.slide.left .sdiv span{width:6px;height:56px}
.slide.top .sdiv span{width:56px;height:6px}
.sdiv:hover span,.sdiv:focus-visible span,.sdiv.drag span{background:#3a5f8f}
.slide.dragging{cursor:col-resize;user-select:none}
.slide.top.dragging{cursor:row-resize}
.pres-zoom{display:inline-flex;gap:2px;align-items:center}
.pres-zoom::before{content:"Text";color:#aeb2b8;margin-right:4px}
#presMsZoom::before{content:"Markscheme"}
.pres-zoom[hidden]{display:none}
.pres-zoom button{min-width:2.6em}
.slide.top{grid-template-rows:var(--qa) minmax(0,1fr)}
.slide .sq{min-width:0;min-height:0;overflow:hidden;padding:2.6% 3%;border-right:2px solid #d3d6db}
.slide.top .sq{border-right:0;border-bottom:2px solid #d3d6db;padding:2% 2.6%}
.slide .sw{position:relative;min-width:0;min-height:0}
.slide .sw.grid{background-image:linear-gradient(#e8eaee 1px,transparent 1px),linear-gradient(90deg,#e8eaee 1px,transparent 1px);background-size:var(--gs) var(--gs)}
.slide .sms{position:absolute;inset:0;overflow:hidden;padding:2.6% 3%;background:#fff}
.pq{font-family:Arial,Helvetica,sans-serif;line-height:1.38;color:#000}
.pq .qhead{display:grid;grid-template-columns:2.2em minmax(0,1fr);margin:0 0 .45em}
.pq .qbody{display:grid;grid-template-columns:2.2em minmax(0,1fr)}
.pq .calc svg{width:1.4em;height:auto}
.pq .g{row-gap:.42em}
.pq .ms .g{row-gap:.32em}
.pq .txt,.pq .figx{overflow:visible}
.pq.zoomed .txt{overflow-x:auto;overflow-y:hidden}
.pq .figx svg.fsvg{max-width:100%;height:auto}
.pq .note{padding:.35em .7em}
.pq .fnote{font-size:.72em}
.pq .figx figcaption{font-size:.75em}
.pq .mslab{font-weight:700;color:#2f557f;margin:0 0 .5em;font-size:.85em}
.pq .ms{border:0;margin:0;padding:0}

@media (max-width:820px){.dlg{grid-template-columns:1fr}.dlg .opts{border-right:0;border-bottom:1px solid var(--line)}}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .side{position:static;max-height:220px}
  .card{padding:16px 14px}
  .g{grid-template-columns:2em 2em minmax(0,1fr) auto}
  .ms .g{grid-template-columns:2em 2em minmax(0,1fr) 4.6em}
  input[type=search]{width:140px}
}
/* phones: 44px targets, one-row toolbars, compact tiles */
@media (max-width:700px){
  button,.btn,select,.chipb,.abtn,.stseg button,.vseg button,.qchip,.linkbtn,.back,label.pick,.trow.link,.titem,.lprev,.tile{min-height:44px}
  label.pick{display:inline-flex;align-items:center}
  .bar-in{padding:8px 12px}
  .ttabs button{min-height:44px;margin:0}
  .pact{gap:8px;margin:-4px 0 12px}
  .pact-r{gap:6px}
  body:not(.student) .pact{flex-direction:column;align-items:stretch}
  body:not(.student) .pact .pick{margin-right:auto}
  body:not(.student) .pact-r{display:flex;margin-left:0}
  body:not(.student) .pact-r .abtn{flex:1;justify-content:center;padding:6px 4px;font-size:13px;gap:5px}
  .abtn svg{width:16px;height:16px}
  .qdot{width:32px;height:32px;font-size:13px}
  .qnav .abtn{min-width:44px}
  .tiles{gap:8px}
  .tile{padding:12px 16px}
  .tile .prog{padding-top:8px}
  .cchips.cpage{margin-top:-8px}
  .viewas span{display:none}
  #pvSchool{max-width:140px}
  .rbar input[type=search]{flex:1;min-width:0;width:auto}
  .chipb,.vseg button,.stseg button{min-width:44px}
  .brand #pubWho{min-height:44px}
  .addst summary,.asind summary{min-height:44px;display:flex;align-items:center}
  .rbar select{flex:1;min-width:0}
  .kbhint{display:none}
  .sech{margin-top:24px}
  .pub-h h1{font-size:24px}
  .trow{padding:12px;flex-wrap:wrap;gap:6px 12px}
  .tcell.cnts{flex-basis:100%;text-align:left}
  .tcell.grow .sep{flex-basis:100%}
  .tcell.grow .sep::before{content:none}
  .sbox{padding:16px}
  .dlg .acts button{min-height:44px}
}
.dlgrp{display:inline-flex;gap:4px;align-items:center;white-space:nowrap;font-size:13px}
.dlmsg{font-size:12px;opacity:.85}
details:not([open]) > .more-m{display:none}
/* visitors */
.setlab{display:grid;gap:4px;font-size:14px;color:var(--muted);margin:0 0 10px;max-width:420px}
.setlab input{font-size:14px}
/* topic descriptions: grey, under the name, two lines at most on a tile */
.tile > b{order:-2}
.tile > .tdesc{order:-1}
.tile .tdesc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:13px;line-height:1.4;color:var(--muted);margin:0 0 6px}
.topdesc{margin:-8px 0 16px;font-size:15px;line-height:1.45;color:var(--muted);max-width:640px}
.tile > b + span{margin-top:auto}
.tile > b + span ~ .prog,.tile > b + span ~ .cchips{margin-top:0}
.gdesc{display:grid;gap:4px;margin:0 0 12px;font-size:14px}
.gdesc label{color:var(--muted)}
.gdesc textarea{width:100%;font:14px/1.4 Arial,Helvetica,sans-serif;resize:vertical}
.gdesc-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gdesc-a button{font-size:13px;padding:4px 10px;min-height:0}
.gdesc-a .muted{font-size:12px;flex:1;min-width:200px}
.gdmsg{color:var(--ink)}
/* courses: AA and AI each have their own topics and headings */
.stcrow{margin:0 0 16px}
.stcrow .chipb{display:inline-flex;align-items:center;gap:8px}
.stchint{font-size:13px}
.crsh{font-size:24px;font-weight:700;line-height:1.25;margin:40px 0 4px}
h3.bigh{margin-top:28px}
.crsh + .bigh,.crsh + .tiles{margin-top:12px}
.tnames{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tnames label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.tnames textarea{font:13px/1.5 Arial,Helvetica,sans-serif;height:140px;width:100%}
/* waiting for approval, library helpers, add by ID */
.twait{font-size:12px;font-weight:700;border:1px solid currentColor;border-radius:var(--r);padding:0 6px;margin:0 8px 0 auto;white-space:nowrap}
.sugsum{margin:0 0 8px;font-size:14px}
.sugmiss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:var(--chip);border-left:4px solid var(--red);border-radius:var(--r);padding:8px 10px;margin:0 0 8px;font-size:14px}
.sugmiss-a{display:flex;gap:6px}
.sugmiss-a button{font-size:13px;padding:4px 10px;min-height:0}
.wbox{border:1px solid var(--ink);border-radius:var(--r);padding:12px;margin:0 0 12px}
.wbox-h{display:flex;gap:8px;align-items:baseline;font-size:15px}
.wbox-p{font-size:13px;margin:4px 0 8px}
.sglist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);max-height:360px;overflow:auto}
.sgrow{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--paper)}
.sgrow:first-child{border-top:0}
.sgrow .lprev{flex:1}
.sgrow.pvact{background:var(--hover);box-shadow:inset 3px 0 0 var(--accent)}
.sgrm{font-size:12px;padding:2px 8px;min-height:0;flex:none}
.wbox-a{margin:10px 0 0}
.lft{font-size:12px;color:var(--muted)}
.ltag.wait{background:var(--paper);color:var(--ink);border:1px dashed var(--ink)}
.lfoot [data-lall]{margin-left:auto;font-size:13px;padding:4px 10px;min-height:0}
.idbox{margin-top:12px;font-size:14px}
.idbox summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.idbox textarea{display:block;width:100%;margin:8px 0 6px;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace}
.idbox p{margin:6px 0}
#tNames{font:13px/1.5 Arial,Helvetica,sans-serif}
/* headings (big topics) */
.bigh{font-size:20px;font-weight:700;line-height:1.3;margin:32px 0 12px}
.stats .trow.thh{display:block;padding:10px 16px 6px;font-size:13px;font-weight:700;color:var(--ink);background:var(--bg)}
.tlist.headed .titem{padding-left:22px}
.thead{display:block;width:100%;text-align:left;border:0;background:none;border-radius:var(--r);padding:8px 10px;margin:10px 0 0;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;min-height:0}
.tlist .thead:first-child{margin-top:0}
.thead:hover{background:var(--hover)}
.thead[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.thead.none{cursor:default;color:var(--muted)}
.tnone{margin:0;padding:4px 10px 4px 22px;font-size:13px;color:var(--muted)}
.ghead{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--muted)}
.ghead select{flex:1;min-width:0;max-width:340px;color:var(--ink)}
.hhint{font-size:13px;margin:0 0 8px}
.hchk{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 12px;border:1px solid var(--line);border-radius:var(--r);padding:4px 10px}
.hchk label{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:6px 0;cursor:pointer}
.hchk input{margin-top:3px;flex:none}
.hchk .muted{font-size:12px}
@media (max-width:700px){.thead,.hchk label{min-height:44px;display:flex;align-items:center}}
@media (max-width:899px){body:not(.pub) #main .card{overflow-x:auto}.more-m{left:auto;right:0;max-width:calc(100vw - 24px)}}

/* online additions: the footer, the legal pages, the welcome banner, the join box name, loading cards, the Errors tab */
.sitefoot{margin:40px 0 8px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.sitefoot a{color:var(--ink);text-underline-offset:3px}
.legal{max-width:720px}.legal h1{font-size:24px;margin:8px 0 14px}
.trialban.welcome{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-left:4px solid var(--ink)}
.trialban.welcome .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.joinbox input#joinName{font:inherit;text-transform:none;letter-spacing:0;width:14em}
.pcard .loading,p.loading{color:var(--muted);padding:12px 0}
.tbl.errs .trow{align-items:flex-start}.tbl.errs .etime{flex:0 0 11em;color:var(--muted);font-size:13px}.tbl.errs .estat{flex:0 0 4em;font-weight:700}.tbl.errs .estat.bad{color:var(--red)}.tbl.errs .emsg{display:block;font-size:13px;color:var(--muted);white-space:pre-wrap}
.sbox .setlab{display:block;font-weight:700;margin:10px 0 4px}
.sbox input#legalDisc{width:100%;box-sizing:border-box}
.pcode b{letter-spacing:.08em}
.slinkrow input#scTok{font:inherit;flex:1;min-width:10em}
.sbox input#visBan{width:100%;box-sizing:border-box}