/* Page-level styles: views, hubs, topic study pages, formulas, plan, exams, practice, glossary. Tokens live in core.css. */

/* hero */
.hero{display:grid; gap:24px; grid-template-columns:minmax(0,1fr); padding-top:6px}
@media (min-width:920px){ .hero{grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:end} }
.hero .txt{display:flex; flex-direction:column; gap:14px}
.hero .lead{font-size:1.14rem; color:var(--muted); max-width:58ch}
.kicker{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.htitle{font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.08; font-weight:700; letter-spacing:-0.01em}
.htitle .amp{color:var(--muted); font-weight:500}
.htitle .cs{color:var(--cs)} .htitle .ict{color:var(--ict)}
.statgrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.sg{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:var(--card); border:2px solid var(--line); border-top:6px solid var(--c,var(--accent))}
.sg b{font-family:var(--f-mono); font-size:1.6rem; line-height:1.1; font-variant-numeric:tabular-nums}
.sg span{font-size:0.8rem; color:var(--muted); font-weight:600}
.cmp{width:100%}
.cmp td:first-child{font-weight:700; white-space:nowrap}
.cmp th.cs{color:var(--cs)} .cmp th.ict{color:var(--ict)}
.golinks{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.golink{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:16px; background:var(--card); border:2px solid var(--line); border-left:8px solid var(--c,var(--accent)); transition:border-color .15s, transform .15s; min-width:0}
.golink:hover{border-color:var(--c,var(--accent)); transform:translateY(-2px)}
.golink:focus-visible{outline:3px solid var(--c,var(--accent))}
.golink b{font-size:1.05rem} .golink span{font-size:0.88rem; color:var(--muted)}
.progrow{display:flex; flex-direction:column; gap:6px}
.progrow .lbl2{display:flex; justify-content:space-between; gap:10px; font-size:0.9rem; font-weight:600}
.pbar{height:12px; border-radius:99px; background:var(--line); overflow:hidden} .pbar i{display:block; height:100%; background:var(--c)}

/* qualification hub */
.qhead{display:flex; flex-direction:column; gap:12px; padding:20px 22px; border-radius:20px; background:var(--card); border:2px solid var(--line); border-top:8px solid var(--p)}
.qhead h1{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; font-size:clamp(1.6rem,4vw,2.3rem)}
.qhead h1 .code{font-family:var(--f-mono); color:var(--muted); font-size:0.6em; font-weight:500}
.qhead p{color:var(--muted); max-width:72ch}
.weight{display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--line); border:2px solid var(--line)}
.weight i{display:block; height:100%; background:var(--c); border-right:2px solid var(--card)} .weight i:last-child{border-right:0}
.wkey{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.85rem; color:var(--muted)}
.wkey span{display:inline-flex; align-items:center; gap:6px} .wkey i{width:14px; height:14px; border-radius:4px; background:var(--c); display:inline-block}
.papers{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.paper{background:var(--card); border:2px solid var(--line); border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; border-top:8px solid var(--c)}
.paper .pn{font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--c)}
.paper h3{font-size:1.12rem}
.paper .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.paper .facts div{display:flex; flex-direction:column; padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--c) 9%,var(--card)); min-width:0}
.paper .facts b{font-family:var(--f-mono); font-size:1.1rem; font-variant-numeric:tabular-nums}
.paper .facts span{font-size:0.72rem; color:var(--muted); font-weight:600}
.paper p{font-size:0.92rem}
.tgroup{display:flex; flex-direction:column; gap:12px}
.tgroup > header{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline}
.tgroup > header p{color:var(--muted); font-size:0.95rem}
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tile{all:unset; box-sizing:border-box; cursor:pointer; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; position:relative; transition:border-color .15s, transform .15s; min-width:0}
.tile:hover{border-color:var(--c); transform:translateY(-2px)}
.tile:focus-visible{outline:3px solid var(--c)}
.tile .tn{display:flex; align-items:center; gap:10px; padding-right:58px}
.tile .tn b{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px; background:color-mix(in srgb,var(--q) 15%,var(--card)); color:var(--q); font-family:var(--f-mono); font-size:1rem}
.tile h3{font-size:1.04rem}
.tile p{font-size:0.88rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.tile .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.tile .meta span{font-size:0.74rem; font-weight:700; padding:1px 8px; border-radius:99px; background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--muted)}
.tile .done{position:absolute; top:12px; right:12px; font-size:0.74rem; font-weight:700; color:var(--ok); background:var(--ok-bg); padding:2px 8px; border-radius:99px}

/* topic page */
.tshell{display:grid; gap:28px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){ .tshell{grid-template-columns:240px minmax(0,1fr)} }
.side{display:none}
@media (min-width:1080px){ .side{display:flex; flex-direction:column; gap:2px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 80px); align-self:start; max-height:calc(100vh - 100px); overflow:auto; padding-right:4px} }
.side h4{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--c); margin:12px 0 4px; display:flex; align-items:center; gap:8px}
.side h4 i{width:10px; height:10px; border-radius:3px; background:var(--c)}
.side button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:8px; align-items:baseline; padding:6px 8px; border-radius:8px; font-size:0.86rem; line-height:1.35; width:100%}
.side button .n{font-family:var(--f-mono); color:var(--q); font-weight:700; min-width:1.7em}
.side button:hover{background:color-mix(in srgb,var(--q) 10%,transparent)}
.side button:focus-visible{outline:3px solid var(--q)}
.side button[aria-current="page"]{background:color-mix(in srgb,var(--q) 16%,var(--card)); font-weight:700}
.side button .tick{margin-left:auto; color:var(--ok); font-weight:700}
.tmain{display:flex; flex-direction:column; gap:26px; min-width:0}
.crumbs{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:0.86rem; color:var(--muted)}
.crumbs button{all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px; border-radius:4px} .crumbs button:focus-visible{outline:3px solid var(--accent)}
.thead{display:flex; flex-direction:column; gap:12px}
.thead .tt1{display:flex; gap:14px; align-items:center}
.thead .num{display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:16px; background:var(--q); color:var(--on-colour); font-family:var(--f-mono); font-weight:700; font-size:1.4rem}
.thead h1{font-size:clamp(1.6rem,4vw,2.3rem)}
.idea{background:color-mix(in srgb,var(--q) 10%,var(--card)); border:2px solid var(--q); border-radius:18px; padding:16px 20px; display:flex; flex-direction:column; gap:8px}
.idea .lbl{font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--q)}
.idea p{font-size:1.16rem; max-width:62ch}
.idea p.whyl{font-size:0.98rem; color:var(--muted)}
.ks3chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:0.84rem}
.ks3chips .ksl{font-weight:700; color:var(--muted); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em}
.ks3chips a{text-decoration:none; padding:1px 10px; border-radius:99px; background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:600}
.ks3chips a:hover{text-decoration:underline}
.jump{display:flex; flex-wrap:wrap; gap:6px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 62px); z-index:6; background:var(--paper); padding:8px 0; border-bottom:2px solid var(--line)}
@media (max-width:760px){ .jump{position:static} }
.jump button{all:unset; box-sizing:border-box; cursor:pointer; padding:4px 12px; border-radius:99px; border:2px solid var(--line); background:var(--card); font-size:0.84rem; font-weight:600; min-height:36px; display:inline-flex; align-items:center}
.jump button:hover{border-color:var(--q)} .jump button:focus-visible{outline:3px solid var(--q)}
.tsec{display:flex; flex-direction:column; gap:14px; scroll-margin-top:130px; min-width:0}
.tsec > header{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.tsec > header h2{margin-right:auto}
.learnbox{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lb{background:var(--card); border:2px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-width:0}
.lb h3{display:flex; gap:8px; align-items:baseline} .lb h3 .code{font-family:var(--f-mono); color:var(--q); font-size:0.9rem}
.lb ul{font-size:0.93rem}
.subhead{display:flex; gap:10px; align-items:baseline; padding-top:8px}
.subhead .code{font-family:var(--f-mono); font-weight:700; color:var(--on-colour); background:var(--q); padding:2px 10px; border-radius:10px; font-size:0.9rem}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.st{background:var(--card); border:2px solid var(--line); border-radius:16px; overflow:hidden; min-width:0}
.st.open{border-color:color-mix(in srgb,var(--q) 55%,var(--line))}
.sh{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; align-items:center; gap:14px; padding:10px 16px; min-height:56px}
.sh:focus-visible{outline:3px solid var(--q); outline-offset:-3px}
.sh .sn{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--q) 14%,var(--card)); color:var(--q); font-weight:700; font-family:var(--f-mono); font-size:0.9rem}
.st.open .sn{background:var(--q); color:var(--on-colour)}
.sh .stt{font-weight:600; font-size:1.04rem; flex:1; min-width:0}
.sh .chev{transition:transform .2s; color:var(--muted); font-size:1.2rem}
.st.open .chev{transform:rotate(90deg)}
.sh .ico{display:flex; gap:4px}
.sh .ico span{font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:1px 7px; border-radius:99px; background:color-mix(in srgb,var(--q) 12%,transparent); color:var(--q)}
@media (max-width:560px){ .sh .ico{display:none} }
.sb{padding:2px 20px 20px 64px; display:flex; flex-direction:column; gap:14px; min-width:0}
@media (max-width:620px){ .sb{padding:2px 14px 16px} }
.sb .bl{display:flex; flex-direction:column; gap:8px}
.sb .bl p{font-size:1.02rem}
.sb .acts{display:flex; flex-wrap:wrap; gap:8px}
.stepctl{display:flex; flex-wrap:wrap; gap:8px}

/* mix-ups */
.mixes{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.mix{display:grid; grid-template-columns:1fr; gap:0; border-radius:16px; overflow:hidden; border:2px solid var(--line); background:var(--card); min-width:0}
.mix > div{padding:12px 16px; display:flex; flex-direction:column; gap:4px}
.mix .think{background:var(--warn-bg); border-bottom:2px solid var(--line)}
.mix .real{background:var(--ok-bg)}
.mix small{font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em}
.mix .think small{color:var(--warn)} .mix .real small{color:var(--ok)}
.mix .reveal{all:unset; cursor:pointer; font-weight:700; color:var(--ok); text-decoration:underline; text-underline-offset:3px; align-self:flex-start; border-radius:4px}
.mix .reveal:focus-visible{outline:3px solid var(--ok)}

/* key words */
.terms{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); margin:0}
.terms > div{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:var(--card); border:2px solid var(--line); border-left:6px solid var(--q); min-width:0}
.terms dt{font-weight:700} .terms dd{margin:0; font-size:0.94rem}

/* exam questions */
.exq{background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.exq .qh{display:flex; gap:10px; align-items:flex-start}
.exq .qn{display:grid; place-items:center; flex:none; min-width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--card); font-weight:700; font-family:var(--f-mono)}
.exq .qt{flex:1; min-width:0; font-size:1.02rem; display:flex; flex-direction:column; gap:6px}
.exq .mk{flex:none; font-family:var(--f-mono); font-weight:700; font-size:0.85rem; padding:2px 10px; border-radius:99px; border:2px solid var(--line)}
.exq textarea{min-height:90px; font-family:var(--f-body); font-size:0.98rem}
.ms{display:flex; flex-direction:column; gap:10px; padding:12px 16px; border-radius:14px; background:var(--ok-bg); border:2px solid var(--ok)}
.ms h4{color:var(--ok); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em}
.ms ol{margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:4px}
.ms ol li::marker{color:var(--ok); font-weight:700}
.ms .tip{color:var(--ink); font-size:0.95rem}

/* quiz */
.quiz{display:flex; flex-direction:column; gap:12px}
.q{background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0}
.q .qq{font-weight:600; font-size:1.04rem; display:flex; gap:10px}
.q .qq i{font-style:normal; font-family:var(--f-mono); color:var(--q)}
.q .opts{display:flex; flex-direction:column; gap:8px}
.q .opt{all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:12px; border:2px solid var(--line); background:var(--paper); min-height:46px; line-height:1.4}
.q .opt i{display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb,var(--q) 14%,var(--card)); color:var(--q); font-style:normal; font-weight:700; font-family:var(--f-mono); font-size:0.85rem}
.q .opt:hover{border-color:var(--q)} .q .opt:focus-visible{outline:3px solid var(--q)}
.q .opt[aria-disabled="true"]{cursor:default}
.q .opt.right{border-color:var(--ok); background:var(--ok-bg); font-weight:700} .q .opt.right i{background:var(--ok); color:var(--on-colour)}
.q .opt.wrong{border-color:var(--bad); background:var(--bad-bg)} .q .opt.wrong i{background:var(--bad); color:var(--on-colour)}
.q .fb{max-width:none; padding:8px 12px; border-radius:10px}
.q .fb.ok{background:var(--ok-bg)} .q .fb.no{background:var(--bad-bg)}
.score{font-weight:700; font-family:var(--f-mono)}

/* teacher */
.teach{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tc{background:var(--teach-bg); border:2px solid var(--teach); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.tc h4{color:var(--teach); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em}
.tc p{font-size:0.97rem}

.pn{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.pn .tile p{-webkit-line-clamp:1}
.pn .next{text-align:right; align-items:flex-end}
.pn .next .tn{padding-right:0; flex-direction:row-reverse}
@media (max-width:560px){ .pn{grid-template-columns:1fr} .pn .next{text-align:left; align-items:flex-start} .pn .next .tn{flex-direction:row} }
.donebar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 16px; border-radius:16px; background:var(--card); border:2px solid var(--line)}
.donebtn[aria-pressed="true"]{background:var(--ok-bg)!important; border-color:var(--ok)!important; color:var(--ok)!important}

/* formulas */
.eqn{background:var(--card); border:2px solid var(--line); border-left:6px solid var(--q,var(--accent)); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:14px; min-width:0}
.eqn header{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.eqtag{font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; padding:2px 10px; border-radius:99px; background:color-mix(in srgb,var(--q,var(--accent)) 14%,var(--card)); color:var(--q,var(--accent))}
.eqn section{display:flex; flex-direction:column; gap:8px; min-width:0}
.eql{display:flex; align-items:center; gap:8px; font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted)}
.eql i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--q,var(--accent)); color:var(--on-colour); font-style:normal; font-size:0.74rem; letter-spacing:0}
.syms{margin:0; display:flex; flex-direction:column; gap:6px}
.syms div{display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:baseline}
.syms dt,.syms dd{margin:0}
.sy{display:inline-flex; align-items:baseline; justify-content:center; min-width:1.6em; padding:0 6px; border-radius:7px; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); border-bottom:2px solid var(--c); font-family:var(--f-mono); word-spacing:0; letter-spacing:0; line-height:1.35}
.sv{font-weight:700; color:var(--c); font-family:var(--f-mono); word-spacing:0; letter-spacing:0; padding:0 3px; border-radius:5px; background:color-mix(in srgb,var(--c) 10%,transparent)}
.eo{font-family:var(--f-mono); word-spacing:0; letter-spacing:0}
.ew{font-size:1.04rem}
.eqdisp{padding:14px 16px; border-radius:12px; background:var(--paper); border:2px dashed color-mix(in srgb,var(--q,var(--accent)) 45%,var(--line)); font-size:1.35rem; font-weight:600; overflow-x:auto}
.wl{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; line-height:2}
.fr{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 4px; line-height:1.3}
.fr > span:first-child{padding:0 4px 3px; border-bottom:2px solid currentColor}
.fr > span:last-child{padding:3px 4px 0}
.eqn sup{font-size:0.62em; position:relative; top:-0.7em; line-height:1}
.eqn sup .sy,.eqn sup .sv{padding:0 3px; border-bottom-width:1.5px; min-width:1.1em}
.eins{display:flex; flex-wrap:wrap; gap:10px}
.ein{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:12px; border:2px solid var(--c); background:color-mix(in srgb,var(--c) 6%,var(--card)); min-width:150px; flex:1 1 150px; max-width:300px; font-weight:400}
.ein .il{font-size:0.78rem; color:var(--muted); font-weight:600}
.ein > .sy{align-self:flex-start}
.ein input{min-height:42px; font-size:1.08rem; font-weight:700; background:var(--card); font-family:var(--f-mono)}
.ework{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:color-mix(in srgb,var(--q,var(--accent)) 6%,var(--card)); border:2px solid color-mix(in srgb,var(--q,var(--accent)) 30%,var(--line)); font-size:1.06rem; overflow-x:auto}
.wt{max-width:none; font-size:0.95rem}
.flist{display:flex; flex-direction:column; gap:22px}
.fgroup{display:flex; flex-direction:column; gap:12px}
.fgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); align-items:start}

/* plan */
.planbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.plan{display:flex; flex-direction:column; gap:18px}
.ploy{display:flex; flex-direction:column; gap:10px}
.ploy > h2{display:flex; align-items:center; gap:10px}
.pterm{display:grid; gap:12px; grid-template-columns:150px repeat(var(--cols,2),minmax(0,1fr)); align-items:stretch}
@media (max-width:820px){ .pterm{grid-template-columns:minmax(0,1fr)} }
.pwhen{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb,var(--ink) 6%,var(--card)); border:2px solid var(--line)}
.pwhen b{font-size:1rem} .pwhen span{font-size:0.8rem; color:var(--muted)}
.pcell{background:var(--card); border:2px solid var(--line); border-top:6px solid var(--q); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0}
.pcell h4{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--q); display:flex; align-items:center; gap:6px}
.pcell .tl{display:flex; flex-direction:column; gap:4px}
.ptop{all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:8px; align-items:baseline; padding:4px 8px; border-radius:8px; font-size:0.93rem; line-height:1.4}
.ptop:hover{background:color-mix(in srgb,var(--q) 10%,transparent)} .ptop:focus-visible{outline:3px solid var(--q)}
.ptop .n{font-family:var(--f-mono); font-weight:700; color:var(--q); min-width:2.6em}
.ptop .lab{flex:1} .ptop small{color:var(--muted); font-size:0.78rem}
.ptop .tick{color:var(--ok); font-weight:700}
.pnote{font-size:0.88rem; padding:6px 10px; border-radius:10px; display:flex; gap:8px; align-items:baseline}
.pnote b{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em; flex:none}
.pnote.assess{background:var(--why-bg)} .pnote.assess b{color:var(--why)}
.pnote.proj{background:var(--eg-bg)} .pnote.proj b{color:var(--eg)}
.pnote.exam{background:var(--warn-bg)} .pnote.exam b{color:var(--warn)}

/* exams */
.cmdgrid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cmd{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:var(--card); border:2px solid var(--line); border-left:6px solid var(--accent)}
.cmd b{font-size:1rem} .cmd span{font-size:0.92rem} .cmd small{font-size:0.82rem; color:var(--muted)}
.howto{counter-reset:hw; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.howto li{counter-increment:hw; display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; padding:10px 12px; border-radius:12px; background:var(--card); border:2px solid var(--line)}
.howto li::before{content:counter(hw); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--p); color:var(--on-colour); font-weight:700; font-family:var(--f-mono); font-size:0.85rem}
.timer{display:flex; flex-direction:column; gap:10px}

/* practice */
.pgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start}
.pkind{display:flex; flex-wrap:wrap; gap:6px}
.pq{background:var(--card); border:2px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; border-left:8px solid var(--p); min-width:0}
.pq .pqq{font-size:1.25rem; font-weight:600; line-height:1.5}
.pq .pqq code{font-size:1.05em}
.pq .work{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; background:var(--paper); border:2px solid var(--line)}
.pq .work p{max-width:none}
.streak{display:flex; flex-wrap:wrap; gap:10px}

/* glossary */
.gbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.gbar input{flex:1 1 240px; max-width:420px}
.az{display:flex; flex-wrap:wrap; gap:4px}
.az button{all:unset; box-sizing:border-box; cursor:pointer; min-width:34px; text-align:center; padding:4px 6px; border-radius:8px; font-weight:700; font-size:0.9rem; background:var(--card); border:2px solid var(--line)}
.az button:hover{border-color:var(--accent)} .az button:disabled{opacity:.35; cursor:default}
.az button:focus-visible{outline:3px solid var(--accent)}
.glist{display:flex; flex-direction:column; gap:8px}
.gl{font-family:var(--f-mono); font-weight:700; color:var(--muted); font-size:1.1rem; padding:12px 0 2px; scroll-margin-top:120px}
.gi{display:grid; grid-template-columns:minmax(140px,230px) minmax(0,1fr); gap:6px 16px; align-items:start; padding:10px 14px; border-radius:12px; background:var(--card); border:2px solid var(--line); border-left:6px solid var(--line); min-width:0}
.gi dt{font-weight:700; margin:0} .gi dd{margin:0; display:flex; flex-direction:column; gap:6px; min-width:0}
.gi .where{display:flex; flex-wrap:wrap; gap:4px}
.gi .where button{all:unset; cursor:pointer; font-size:0.74rem; font-weight:700; padding:1px 8px; border-radius:99px; background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--c)}
.gi .where button:focus-visible{outline:3px solid var(--c)}
@media (max-width:620px){ .gi{grid-template-columns:1fr} }

/* sources */
.srcs{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.src{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:2px solid var(--line); background:var(--card); text-decoration:none; min-width:0}
.src:hover{border-color:var(--accent)}
.src b{text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.src small{color:var(--muted)}
footer.pf{color:var(--muted); font-size:0.84rem; padding-top:12px; border-top:2px solid var(--line); display:flex; flex-direction:column; gap:4px}

/* read-aloud highlight */
.reading{outline:3px solid var(--why); outline-offset:4px; border-radius:8px}

/* ---------- Year 10 / Year 11 courses ---------- */
.yhead2{border-top-color:var(--accent)}
.yhead2 h1 .code{font-family:var(--f-body); font-size:0.5em; font-weight:600; color:var(--muted)}
.strip{display:flex; gap:4px; min-width:640px; align-items:stretch}
.sh-term{flex-basis:0; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:12px; background:var(--card); border:2px solid var(--line); min-width:0}
.sh-term b{font-size:0.9rem} .sh-term span{font-size:0.74rem; color:var(--muted)}
.sh-term em{font-style:normal; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:1px 8px; border-radius:99px; align-self:flex-start}
.sh-term.mocks{border-color:var(--warn); background:var(--warn-bg)} .sh-term.mocks em{background:var(--warn); color:var(--warn-bg)}
.sh-term.mile em{background:var(--ok); color:var(--ok-bg)}
.sh-hol{flex:0 0 26px; border-radius:10px; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 10%,transparent) 0 6px,transparent 6px 12px); border:2px dashed var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden}
.sh-hol span{writing-mode:vertical-rl; transform:rotate(180deg); font-size:0.62rem; font-weight:700; color:var(--muted); white-space:nowrap; letter-spacing:0.02em}
.sh-hol.wide{flex:0 0 96px; flex-direction:column; gap:2px; padding:6px; text-align:center}
.sh-hol.wide b{font-size:0.78rem} .sh-hol.wide span{writing-mode:horizontal-tb; transform:none; font-size:0.7rem}
.planctl{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between}
.pwhen .aft{margin-top:4px; font-size:0.74rem; font-weight:600}
.pterm.hol .pwhen{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 7%,transparent) 0 6px,transparent 6px 12px)}
.ptop{position:relative; padding-right:54px}
.ptop .ls,.pnote .ls{position:absolute; right:8px; top:6px; font-family:var(--f-mono); font-size:0.74rem; font-weight:700; color:var(--muted); background:color-mix(in srgb,var(--ink) 7%,transparent); border-radius:99px; padding:0 7px; line-height:1.6}
.ptop .ls::after,.pnote .ls::after{content:" h"}
.ptop .tick{position:absolute; right:10px; bottom:6px}
.pnote{position:relative; padding-right:54px}
.pnote.rev{background:var(--teach-bg)} .pnote.rev b{color:var(--teach)}
.needs{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:5px}
.needs i{font-style:normal; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--why)}
.nd{font-size:0.72rem; font-weight:700; padding:0 7px; border-radius:99px; border:1.5px solid var(--line); background:var(--card); line-height:1.6; white-space:nowrap}
.nd small{font-weight:500; color:var(--muted)}
.nd.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))} .nd.bad{border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.nd.ks{color:var(--muted)}
.fit{display:flex; flex-direction:column; gap:4px; margin-top:auto; font-size:0.8rem; color:var(--muted)}
.fit .meter{height:8px} .fit.ok .meter i{background:var(--ok)} .fit.tight .meter i{background:var(--mid)} .fit.over .meter i{background:var(--bad)} .fit.over b{color:var(--bad)}
.banner{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; padding:12px 16px; border-radius:14px; border:2px solid var(--fg); background:var(--bg)}
.banner b{color:var(--fg); text-transform:uppercase; letter-spacing:0.07em; font-size:0.78rem}
.banner.mock{--fg:var(--warn); --bg:var(--warn-bg)} .banner.done{--fg:var(--ok); --bg:var(--ok-bg)}
.bridges{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.bridge{background:var(--card); border:2px solid var(--line); border-left:8px solid var(--q); border-radius:16px; padding:12px 16px; display:flex; flex-direction:column; gap:8px; min-width:0}
.bridge ul{font-size:0.92rem}
.tchip{font-weight:700; color:var(--q)} .tchip small{font-weight:600; color:var(--muted); font-size:0.78rem}

/* connections */
.links{display:flex; flex-direction:column; gap:20px}
.lane2{display:flex; flex-direction:column; gap:8px}
.lane2 h3{color:var(--q)}
.lgrid{display:grid; grid-template-columns:repeat(var(--n),minmax(120px,1fr)); gap:8px; min-width:calc(var(--n) * 128px)}
.lcol{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:12px; background:color-mix(in srgb,var(--ink) 4%,transparent)}
.lh{font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted)}
.lnode{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-radius:10px; background:var(--card); border:2px solid var(--line); font-size:0.8rem; line-height:1.3; transition:border-color .15s, background .15s}
.lnode b{font-family:var(--f-mono); color:var(--q); font-size:0.76rem}
.lnode:hover{border-color:var(--q)} .lnode:focus-visible{outline:3px solid var(--q)}
.lnode.sel{background:var(--q); border-color:var(--q); color:var(--on-colour)} .lnode.sel b{color:var(--on-colour)}
.lnode.need{background:var(--why-bg); border-color:var(--why)}
.lnode.lead{background:var(--ok-bg); border-color:var(--ok)}
.linkdetail{background:var(--card); border:2px solid var(--line); border-top:8px solid var(--q); border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:12px}
.linkdetail ul{font-size:0.94rem}
.need-h{color:var(--why); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px}
.lead-h{color:var(--ok); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px}

/* topic: before this topic */
.before{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); background:var(--card); border:2px solid var(--line); border-radius:18px; padding:14px 18px}
.bcol{display:flex; flex-direction:column; gap:8px; min-width:0}
.bcol .l{gap:8px}
.tlink{all:unset; cursor:pointer; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); border-radius:4px}
.tlink:focus-visible{outline:3px solid var(--accent)}
.linkbtn{all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-weight:600; border-radius:4px}
.linkbtn:focus-visible{outline:3px solid var(--accent)}