/* Certiva app (dashboard, study sessions, CPD, account). Approved 26 Sept 2026.
   Scale: title 40, heading 24, big number 56, body 17, small 15 (phone 28/20/40/16/14).
   8px grid: 24 between blocks, 32 inside. Surfaces: white page, aubergine blocks, flat lavender tiles. */

@font-face{font-family:"General Sans";src:url(fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* Approved scale (26 Sept): title 40, block heading 24, big number 56, body 17, small 15 (nothing smaller).
   Phone: 28 / 20 / 40 / 16 / 14. Spacing on an 8px grid: 24 between blocks, 32 inside blocks.
   Surfaces from the landing page: white page, aubergine block, flat lavender tiles (no shadow), radius 18. */
:root{
  --title:600 40px/1.1 var(--f);--head:600 24px/1.2 var(--f);--big:600 56px/1 var(--f);--body:400 17px/1.5 var(--f);--small:400 15px/1.4 var(--f);
  --gap:24px;--pad:32px;--r:18px;
  --aub:#241d2d;--aub2:#3a3047;--v:#6938d3;--vh:#5a2cc0;--tile:#f1edf7;--track:#e4dcf1;--ink:#24232b;--mut:#5f5869;--rose:#c9577a;
  /* one-hue ordinal ramp, validated: light-to-dark, visible steps */
  --r1:#bda8f2;--r2:#9d80ea;--r3:#7b55de;--r4:#5a2cc0;--r5:#2e1f55;
  --f:"General Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--ink);font:var(--body);-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--v);outline-offset:3px;border-radius:12px}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}

/* Sidebar: full height, never cut off */
.side{background:var(--aub);color:#cdbfdd;padding:32px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{color:#fff;font:600 28px/1 var(--f);letter-spacing:-1.3px;padding:0 16px 32px}
.side a.n{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:12px;font:600 17px/1 var(--f)}
.side a.n:hover{background:var(--aub2);color:#fff}
.side a.n[aria-current=page]{background:#3b3048;color:#fff}
.side svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.side .me{margin-top:auto;padding:16px;font:var(--small);color:#a898ba}
.side .me b{display:block;color:#fff;font-weight:600}

.main{padding:16px 40px 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-content:start}
.head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.head h1{margin:0;font:var(--title);letter-spacing:-1.6px}
.head .r{display:flex;align-items:center;gap:16px;font:var(--small);color:var(--mut)}
.switch{height:48px;padding:0 44px 0 16px;border:0;border-radius:12px;background:var(--tile);font:600 17px/1 var(--f);color:var(--ink);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 21px,calc(100% - 17px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.switch:hover{background-color:#e9e3f3}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:11px;background:var(--v);color:#fff;font:600 17px/1 var(--f);border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--vh)}.btn:active{transform:translateY(1px)}
.btn.light{background:#fff;color:var(--aub)}.btn.light:hover{background:#efe8fb}
.btn.dark{background:var(--aub)}.btn.dark:hover{background:#3a2f47}

.block{border-radius:var(--r);padding:var(--pad)}
.block h2{margin:0;font:var(--head);letter-spacing:-.6px}
.lav{background:var(--tile)}

/* Next step: dominant, top-left */
.next{grid-column:span 7;background:var(--aub);color:#fff;display:flex;flex-direction:column;justify-content:center}
.next .big-t{margin:0;font:var(--title);letter-spacing:-1.6px}
.next p{margin:12px 0 24px;color:#cfc2df}
.next .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.next .mix{font:600 17px/1 var(--f);color:#d7c7fa;padding:0 8px}.next .mix:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Readiness: segmented bar */
.ready{grid-column:span 5}
.ready .rh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.ready .rh .num{margin:0}
.ready .dl{display:block;margin-top:4px;font:var(--small);color:var(--mut)}
.ready .num{display:flex;align-items:baseline;gap:12px;margin:8px 0 16px}
.ready .num b{font:var(--big);letter-spacing:-2.4px}
.ready .num span{font:var(--small);color:var(--mut);white-space:nowrap}
.seg{display:flex;gap:2px;height:16px;border-radius:6px;overflow:hidden;background:var(--track)}
.seg i{display:block;height:100%}
.segkey{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:16px 0 0;padding:0;list-style:none;font:var(--small);color:var(--mut)}
.segkey li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.segkey i{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.segkey b{color:var(--ink);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
.ready .lim{margin:16px 0 0;font:var(--small);color:var(--mut)}
.ready .lim a{color:var(--v);font-weight:600}

/* Syllabus: tiles shaded by first-attempt accuracy */
.syl{grid-column:span 8}
.bh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.bh h2{margin:0;font:var(--head);letter-spacing:-.6px}
.bh a{font:600 15px/1 var(--f);color:var(--v)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.t{height:88px;border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .12s,transform .08s}
.t:hover{filter:brightness(.96)}.t:active{transform:translateY(1px)}
.t b{font:600 17px/1.25 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.t .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.t .pct{font:600 24px/1 var(--f);letter-spacing:-.8px}
.t .cnt{font:var(--small)}
.t.a1{background:var(--r1)}.t.a2{background:var(--r2)}
.t.a3{background:var(--r3);color:#fff}.t.a4{background:var(--r4);color:#fff}.t.a5{background:var(--r5);color:#fff}
.t.a0{background:var(--tile)}.t.a0 .pct{font:600 17px/1 var(--f);letter-spacing:0;color:var(--mut)}
.key{display:flex;align-items:center;gap:8px;margin-top:8px;font:var(--small);color:var(--mut);flex-wrap:wrap}
.key i{width:24px;height:12px;border-radius:3px}

/* Activity */
.act{grid-column:span 4;display:flex;flex-direction:column}
.act .num{display:flex;align-items:baseline;gap:8px;margin:8px 0 8px}
.act .num b{font:var(--big);letter-spacing:-2.4px}
.act .num span{font:var(--body);color:var(--mut)}
.act svg{display:block;width:100%;height:auto;margin-top:auto}
.ax{display:flex;justify-content:space-between;font:var(--small);color:var(--mut);margin-top:8px}
.lg{display:flex;gap:16px;font:var(--small);color:var(--mut);margin-bottom:8px}.lg span{display:inline-flex;align-items:center;white-space:nowrap}.lg i{margin-right:8px}
.lg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}

/* Slim row */
.slim{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cell{background:var(--tile);border-radius:14px;height:72px;padding:0 16px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cell:hover{background:#e9e3f3}
.cell .l b{display:block;font:600 17px/1.2 var(--f);white-space:nowrap}
.cell .l span{font:var(--small);color:var(--mut)}
.cell .v{font:var(--head);letter-spacing:-.6px}
.cell .go{font:600 17px/1 var(--f);color:var(--v)}
.tip{position:fixed;pointer-events:none;background:var(--aub);color:#fff;font:var(--small);padding:8px 12px;border-radius:8px;opacity:0;transition:opacity .1s;z-index:9}
.sr{position:absolute;left:-9999px}

@media (max-width:1180px){.main{padding:32px}.next,.ready,.syl,.act{grid-column:1/-1}.slim{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  :root{--title:600 28px/1.15 var(--f);--head:600 20px/1.2 var(--f);--big:600 40px/1 var(--f);--body:400 16px/1.5 var(--f);--small:400 14px/1.4 var(--f);--gap:16px;--pad:24px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:20;overflow:visible}
  .brand,.side .me,.side a.n.hm{display:none}
  .side a.n{flex-direction:column;justify-content:center;gap:4px;height:56px;padding:0 8px;font:600 14px/1 var(--f)}
  .main{padding:24px 16px 104px}
  .head{flex-direction:column;align-items:flex-start;gap:12px}
  .head h1{letter-spacing:-1px}
  .head .r{width:100%;flex-direction:column-reverse;align-items:stretch;gap:8px}
  .next .acts .btn{flex:1 1 100%}
  .ready .num b,.act .num b{letter-spacing:-1.6px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .t{height:104px}
  .slim{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cell{height:auto;min-height:88px;padding:16px;flex-direction:column;align-items:flex-start;justify-content:space-between}
}

/* Practice and mock sessions (focus mode, no sidebar) + results. Uses the approved dashboard tokens
   from app-v6.css: title 40, heading 24, big 56, body 17, small 15; 24 between blocks, 32 inside. */
.qbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #ece6f4}
.qbar .in{max-width:1208px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:24px}
.qbar .exit{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;margin-left:-16px;border-radius:12px;font:600 17px/1 var(--f)}
.qbar .exit:hover{background:var(--tile)}
.qbar .ttl{font:600 17px/1.2 var(--f);white-space:nowrap}
.qbar .prog{flex:1;display:flex;align-items:center;gap:16px;font:var(--small);color:var(--mut);min-width:0}
.qbar .prog .track{flex:1;max-width:320px;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.qbar .prog .track i{display:block;height:100%;background:var(--v)}
.qbar .save{display:inline-flex;align-items:center;gap:8px;font:var(--small);color:var(--mut);white-space:nowrap}
.qbar .save i{width:8px;height:8px;border-radius:50%;background:#16734a}
.qbar .timer{height:48px;padding:0 16px;border-radius:12px;background:var(--aub);color:#fff;font:600 17px/48px var(--f);font-variant-numeric:tabular-nums}

.qwrap{max-width:1208px;margin:0 auto;padding:32px 24px 16px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.qmeta{display:flex;justify-content:space-between;gap:16px;font:var(--small);color:var(--mut);margin-bottom:16px}
.qtext{margin:0 0 24px;font:var(--head);letter-spacing:-.4px;line-height:1.35;max-width:760px}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.opt{width:100%;min-height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 20px 12px 12px;border:2px solid transparent;border-radius:14px;
  background:var(--tile);color:var(--ink);font:var(--body);text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.opt:hover{background:#e9e3f3}.opt:active{background:#e1d8ef}
.opt .L{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;font:600 17px/1 var(--f);color:var(--mut)}
.opt[aria-pressed=true]{border-color:var(--v);background:#efe8fb}.opt[aria-pressed=true] .L{background:var(--v);color:#fff}
.opt.ok{border-color:#9fd3b6;background:#e3f3ea}.opt.ok .L{background:#16734a;color:#fff}
.opt.no{border-color:#eab3c1;background:#fbe9ee}.opt.no .L{background:#a8324f;color:#fff}
.opt.dim{color:var(--mut)}.opt[disabled]{cursor:default}.opt[disabled]:hover{background:var(--tile)}
.opt.ok[disabled]:hover{background:#e3f3ea}.opt.no[disabled]:hover{background:#fbe9ee}
.opt .tag{font:600 15px/1 var(--f);white-space:nowrap}.opt.ok .tag{color:#16734a}.opt.no .tag{color:#a8324f}
.fb{margin-top:24px;background:var(--tile);border-radius:18px;padding:32px}
.fb .verdict{margin:0 0 12px;font:600 17px/1.4 var(--f)}.fb .verdict.no{color:#a8324f}.fb .verdict.ok{color:#16734a}
.fb p{margin:0}
.fb .ref{margin-top:16px;background:#fff;border-radius:12px;padding:16px 20px}
.fb .ref b{display:block;font:600 15px/1.3 var(--f);color:var(--v);margin-bottom:4px}
.fb .added{margin-top:16px;font:600 17px/1.4 var(--f);color:#3d1f93}
.qacts{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.btn.tile{background:var(--tile);color:var(--ink)}.btn.tile:hover{background:#e9e3f3}
.btn.flagged{background:#fff1d6;color:#7a5200}
.side-p{position:sticky;top:96px;display:grid;gap:24px}
.sp{background:var(--tile);border-radius:18px;padding:24px}
.sp h2{margin:0;font:var(--head);letter-spacing:-.6px}
.sp .sub{margin:8px 0 16px;font:var(--small);color:var(--mut)}
.grid-n{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.grid-n.ten{grid-template-columns:repeat(10,1fr);gap:4px}
.grid-n button{aspect-ratio:1;border:0;border-radius:8px;background:#fff;color:var(--mut);font:600 15px/1 var(--f);cursor:pointer;position:relative;padding:0}
.grid-n.ten button{font-size:15px;border-radius:6px;letter-spacing:-.4px}
.grid-n button:hover{background:#f6f2fc}
.grid-n .a{background:var(--r1);color:var(--ink)}
.grid-n .ok{background:#e3f3ea;color:#16734a}.grid-n .no{background:#fbe9ee;color:#a8324f}
.grid-n .cur{box-shadow:inset 0 0 0 2px var(--v)}
.grid-n .fl::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#d49a1f}
.legend2{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font:var(--small);color:var(--mut)}
.legend2 span{display:inline-flex;align-items:center;gap:8px}
.legend2 i{width:12px;height:12px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(36,29,45,.18)}
.keys{font:var(--small);color:var(--mut);line-height:1.8}
.keys kbd{font:600 15px/1 var(--f);padding:4px 7px;border-radius:6px;background:#fff;color:var(--ink)}
.submit{background:var(--aub);color:#fff;border-radius:18px;padding:24px}
.submit h2{margin:0;font:var(--head);letter-spacing:-.6px}
.submit p{margin:8px 0 16px;font:var(--small);color:#cfc2df}
.submit .btn{width:100%}

/* Results (inside the app shell) */
.res{grid-column:1/-1;background:var(--aub);color:#fff;border-radius:18px;padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center}
.res .sc{font:var(--big);letter-spacing:-2.4px}
.res .sc small{display:block;margin-top:8px;font:var(--small);letter-spacing:0;color:#cfc2df}
.res h1{margin:0;font:var(--title);letter-spacing:-1.6px}
.res p{margin:8px 0 0;color:#cfc2df}
.res .acts{display:flex;gap:16px}
.bytopic{grid-column:span 8}
.revise{grid-column:span 4}
.revise ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.revise li b{display:block;font:600 17px/1.35 var(--f)}
.revise li span{font:var(--small);color:var(--mut)}
.review{grid-column:1/-1}
.rv{display:grid;gap:12px;margin-top:16px}
.rv a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--tile);border-radius:14px;padding:16px 24px 16px 16px}
.rv a:hover{background:#e9e3f3}
.rv>a .no{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:#fbe9ee;color:#a8324f;font:600 17px/1 var(--f)}
.rv>a b{display:block;font:600 17px/1.35 var(--f)}
.rv>a span{font:var(--small);color:var(--mut)}
.rv>a em{font:600 15px/1 var(--f);font-style:normal;color:var(--v)}
.tabs{display:flex;gap:8px;background:var(--tile);padding:4px;border-radius:12px}
.tabs button{height:40px;padding:0 16px;border:0;border-radius:9px;background:transparent;font:600 15px/1 var(--f);color:var(--mut);cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink)}

@media (max-width:980px){.qwrap{grid-template-columns:minmax(0,1fr)}.side-p{position:static}.bytopic,.revise{grid-column:1/-1}.res{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .qbar .in{height:64px;gap:12px;padding:0 16px}.qbar .ttl,.qbar .prog .track{display:none}.qbar .exit{padding:0 12px;margin-left:-12px}
  .qwrap{padding:24px 16px 112px}
  .qtext{font:600 20px/1.35 var(--f);letter-spacing:-.2px}
  .opt{grid-template-columns:36px minmax(0,1fr);font:400 16px/1.45 var(--f);padding:12px}.opt .L{width:36px;height:36px}.opt .tag{grid-column:2}
  .fb{padding:24px}
  .qacts{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ece6f4;z-index:30}
  .qacts .btn{flex:1}
  .grid-n.ten{grid-template-columns:repeat(10,1fr)}
  .res .acts{flex-direction:column}
}

/* Practice fits one screen: after answering, feedback takes the right panel (approved 26 Sept). */
.qwrap.pr{grid-template-columns:minmax(0,1fr) 440px}
.qbar .qs{height:48px;padding:0 16px;border:0;border-radius:12px;background:var(--tile);font:600 17px/1 var(--f);color:var(--ink);cursor:pointer;white-space:nowrap}
.qbar .qs:hover{background:#e9e3f3}
.fb.fbp{align-self:start;margin:0;position:sticky;top:96px;max-height:calc(100vh - 128px);overflow:auto}
.pop{position:absolute;top:80px;right:24px;width:360px;background:#fff;border-radius:18px;padding:24px;box-shadow:0 12px 40px rgba(36,29,45,.18);display:none}
.pop.open{display:block}
/* Mock: grid shown 50 at a time */
.half{display:flex;gap:8px;margin:0 0 16px}
.half button{flex:1;height:40px;border:0;border-radius:10px;background:#fff;color:var(--mut);font:600 15px/1 var(--f);cursor:pointer}
.half button[aria-pressed=true]{background:var(--aub);color:#fff}
@media (max-width:980px){.qwrap.pr{grid-template-columns:minmax(0,1fr)}.fb.fbp{align-self:start;position:static;max-height:none}}
@media (max-width:760px){.qbar .save.quiet{display:none}.qbar .qs{height:40px;padding:0 12px;font-size:15px}.qbar .count-long{display:none}}
@media (min-width:761px){.qbar .count-short{display:none}}
.qtext.long{font:600 20px/1.35 var(--f);letter-spacing:-.2px}
.qtext.longer{font:600 17px/1.45 var(--f);letter-spacing:0}

.sub{margin:8px 0 0;font:var(--body);color:var(--mut)}
.row-list{display:grid;gap:16px}
.item{background:var(--tile);border-radius:18px;padding:24px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.item h3{margin:0;font:var(--head);letter-spacing:-.6px}
.item h3.sm{font:600 17px/1.3 var(--f);letter-spacing:0}
.item p{margin:8px 0 0;font:var(--small);color:var(--mut)}
.item .acts{display:flex;gap:16px;align-items:center}
.item.w{background:#fff;padding:20px 24px}
.state{font:600 15px/1 var(--f);padding:8px 12px;border-radius:10px;background:#fff;color:var(--mut);white-space:nowrap}
.state.ok{background:#e3f3ea;color:#16734a}.state.go{background:#efe8fb;color:#3d1f93}
.bar2{height:8px;border-radius:4px;background:#fff;overflow:hidden;margin-top:12px;max-width:320px}.bar2 i{display:block;height:100%;background:var(--v)}
.hero2{grid-column:1/-1;background:var(--aub);color:#fff;border-radius:18px;padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center}
.hero2 .n{font:var(--big);letter-spacing:-2.4px}
.hero2 h2{margin:0;font:var(--head);letter-spacing:-.6px}
.hero2 p{margin:8px 0 0;color:#cfc2df}
.full{grid-column:1/-1}
.two2{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
dl.kv{margin:24px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px}
dl.kv dt{font:var(--small);color:var(--mut);padding-top:2px}dl.kv dd{margin:0;font:600 17px/1.4 var(--f)}
table.pay{width:100%;border-collapse:collapse;margin-top:16px;font:var(--body)}
table.pay th{text-align:left;font:var(--small);color:var(--mut);padding:0 0 12px}
table.pay td{padding:16px 0;border-top:1px solid #ddd3ea}
table.pay .r{text-align:right}
.note2{margin:16px 0 0;font:var(--small);color:var(--mut)}
.btn.tile{background:var(--tile);color:var(--ink)}.btn.tile:hover{background:#e9e3f3}
.btn.white{background:#fff;color:var(--ink)}.btn.white:hover{background:#f6f2fc}
.btn.red{background:#fbe9ee;color:#a8324f}.btn.red:hover{background:#f7dbe3}
@media (max-width:1180px){.two2{grid-template-columns:minmax(0,1fr)}.hero2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.item{grid-template-columns:minmax(0,1fr);padding:24px}.item .acts{flex-wrap:wrap}.hero2{gap:16px}}
.pick .t{border:3px solid transparent;cursor:pointer;text-align:left;height:120px;padding:20px 24px;font:inherit;color:inherit}.pick .t b{align-self:flex-start}.pick .t.a3,.pick .t.a4,.pick .t.a5,.pick .t.mixed{color:#fff}
.pick .t[aria-pressed=true]{border-color:var(--ink)}
.pick .t.mixed{background:var(--aub);color:#fff}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.len{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.len .seg2{display:flex;gap:8px;background:var(--tile);padding:4px;border-radius:12px}
.len .seg2 button{height:44px;padding:0 20px;border:0;border-radius:9px;background:transparent;font:600 17px/1 var(--f);color:var(--mut);cursor:pointer}
.len .seg2 button[aria-pressed=true]{background:#fff;color:var(--ink)}
.len .lbl{font:var(--small);color:var(--mut)}
.len .btn{margin-left:auto}
.sets3{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.set3{background:var(--tile);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:8px;min-height:280px}
.set3 .n{font:var(--big);letter-spacing:-2.4px;margin-top:16px}
.set3 h2{margin:0;font:var(--head);letter-spacing:-.6px}
.set3 p{margin:0;font:var(--small);color:var(--mut);min-height:42px}
.set3 .btn{margin-top:auto;align-self:flex-start}
.set3.primary{background:var(--aub);color:#fff}.set3.primary p{color:#cfc2df}
.papers{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.paper{background:var(--tile);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:16px}
.paper h2{margin:0;font:var(--head);letter-spacing:-.6px}
.paper .fmt{font:600 17px/1.4 var(--f)}
.paper p{margin:0;font:var(--small);color:var(--mut)}
.paper .res2{display:flex;align-items:baseline;gap:12px}
.paper .res2 b{font:var(--big);letter-spacing:-2.4px}
.paper .acts{display:flex;gap:16px;margin-top:auto}
@media (max-width:1180px){.sets3,.papers{grid-template-columns:minmax(0,1fr)}.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* States shared by all app pages */
.loading{grid-column:1/-1;display:grid;place-items:center;min-height:50vh;font:var(--body);color:var(--mut)}
.alert{grid-column:1/-1;background:#fbe9ee;color:#a8324f;border-radius:14px;padding:16px 24px;font:var(--body)}
.alert a{font-weight:600;text-decoration:underline}
.empty{grid-column:1/-1;background:var(--tile);border-radius:18px;padding:32px;font:var(--body);color:var(--mut)}
.empty h2{margin:0 0 8px;font:var(--head);color:var(--ink);letter-spacing:-.6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t.more{background:var(--tile);color:var(--v)}
/* More than 8 topics: smaller tiles so the dashboard still fits one screen */
.tiles.dense{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiles.dense .t{height:40px;border-radius:10px;padding:0 12px;flex-direction:row;align-items:center;gap:8px}
.tiles.dense .t b{font:600 15px/1.2 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.tiles.dense .t .row{flex:none}.tiles.dense .t .pct{font:600 15px/1 var(--f);letter-spacing:0}.tiles.dense .t .cnt{display:none}
.tiles.dense.x5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.dense.x5 .t{height:32px;padding:0 10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 17+ topics (DipPEC): widen the syllabus so abbreviated names show in full */
.syl.wide{grid-column:span 9}.act.narrow{grid-column:span 3}
.tiles.dense.x5 .t{padding:0 8px;gap:4px}.tiles.dense.x5 .t b{letter-spacing:-.2px}
@media (max-width:1180px){.syl.wide,.act.narrow{grid-column:1/-1}}
.act.narrow .bh{flex-direction:column;align-items:flex-start;gap:4px}.act.narrow .num{margin:0}
/* Confirmation dialog (mock submit) */
.modal{position:fixed;inset:0;z-index:100;background:rgba(36,29,45,.55);display:grid;place-items:center;padding:16px}
.modal-box{background:#fff;border-radius:18px;padding:32px;max-width:520px;width:100%}
.modal-box h2{margin:0 0 8px;font:var(--head);letter-spacing:-.6px}
.modal-box p{margin:0 0 24px;font:var(--body);color:var(--mut)}
.modal-acts{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.qwrap .res{grid-column:1/-1}
.qbar .save.failed{color:#a8324f}.qbar .save.failed i{background:#a8324f}.qbar .save.pending i{background:#c79a2b}
.opt:focus-visible{outline:3px solid var(--v);outline-offset:2px}
.btn[disabled]{background:#cfc4e6;color:#fff;cursor:not-allowed}
.btn.tile[disabled]{background:var(--tile);color:#aaa3b3}

/* Results: answers expand in place to show the options, explanation and reference */
.rvd{background:var(--tile);border-radius:14px}
.rvd summary{list-style:none;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 24px 16px 16px;border-radius:14px;cursor:pointer}
.rvd summary::-webkit-details-marker{display:none}
.rvd summary:hover{background:#e9e3f3}
.rvd .qn{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:#fbe9ee;color:#a8324f;font:600 17px/1 var(--f)}
.rvd.good .qn{background:#e3f3ea;color:#16734a}
.rvd b{display:block;font:600 17px/1.35 var(--f)}
.rvd summary span span{font:var(--small);color:var(--mut)}
.rvd em{font:600 15px/1 var(--f);font-style:normal;color:var(--v)}
.rvd[open] em{color:var(--mut)}
.rvd .more{padding:0 24px 24px 80px}
.rvd .more .opts{gap:8px}
.rvd .more .opt{cursor:default;min-height:56px;background:#fff}
.rvd .more .opt.ok{background:#e3f3ea}.rvd .more .opt.no{background:#fbe9ee}
.rvd .more .fb{margin-top:16px;background:#fff;padding:24px}
.rvd .more .fb .ref{background:var(--tile)}
.none{margin:16px 0 0;font:var(--body);color:var(--mut)}
@media (max-width:760px){
  .rvd summary{grid-template-columns:40px minmax(0,1fr);padding:12px}.rvd .qn{width:40px;height:40px}
  .rvd em{display:none}.rvd .more{padding:0 12px 16px}
  .review .bh{flex-direction:column;align-items:stretch}.tabs button{flex:1;padding:0 8px}
}
.tiles.bysub .t{height:auto;min-height:88px;gap:8px}.tiles.bysub .t b{white-space:normal}

/* FCA: one mock per subject, so five cells in the slim row */
.slim.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.cell .l .act{font:600 15px/1.4 var(--f);color:var(--v)}
@media (max-width:1180px){.slim.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phone: many-topic syllabuses use two columns so names are readable (the page may scroll on phone). */
@media (max-width:760px){.tiles.dense,.tiles.dense.x5{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.dense.x5 .t{height:40px;padding:0 12px}}
/* Laptop widths: topic names in the syllabus tiles drop to the small size so full names fit. */
@media (max-width:1400px) and (min-width:761px){.tiles:not(.dense) .t{padding:16px 12px}.tiles.dense .t{padding:0 10px;gap:6px}.tiles:not(.dense) .t b{font:600 15px/1.25 var(--f)}}
/* Phone: the page scrolls, so long topic names wrap instead of being cut off. */
@media (max-width:760px){.tiles .t b,.tiles.dense .t b{white-space:normal;overflow:visible;hyphens:auto;-webkit-hyphens:auto}.tiles.dense .t,.tiles.dense.x5 .t{height:auto;min-height:40px;padding:8px 12px}.tiles:not(.dense) .t{height:auto;min-height:88px;gap:8px;padding:14px 12px}.tiles .t b{font-size:15px}}
/* Very small phones (320–359px): tighter tabs, one tile per row. */
@media (max-width:359px){.side{padding-left:2px;padding-right:2px}.side a.n{padding:0 4px;min-width:0}.tiles,.tiles.dense,.tiles.dense.x5{grid-template-columns:minmax(0,1fr)}}

/* Results scroll, so many-topic results use fewer, wider columns than the dashboard. */
@media (min-width:761px){.bytopic .tiles.dense{grid-template-columns:repeat(3,minmax(0,1fr))}.bytopic .tiles.dense.x5{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Hub pages */
.pick .tiles.dense .t{height:52px;padding:0 14px;border-width:2px;flex-direction:row;align-items:center}.pick .tiles.dense .t b{align-self:center}
.pick .tiles.dense.x5 .t{height:44px;padding:0 10px}
.pick .tiles.dense .t.mixed .pct{color:#fff}
.pick .t:focus-visible{outline-offset:2px}
.seg2 button[disabled]{opacity:.45;cursor:not-allowed}
.resume-line{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--tile);border-radius:14px;padding:16px 24px;font:var(--body)}
.resume-line b{color:var(--v);font-weight:600}.resume-line:hover{background:#e9e3f3}
.ended{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff1d6;color:#5c3d00;border-radius:14px;padding:16px 24px;font:var(--body)}
@media (max-width:760px){.ended,.resume-line{flex-direction:column;align-items:stretch;padding:16px}.len .btn{margin-left:0;width:100%}.len .seg2{width:100%}.len .seg2 button{flex:1;padding:0 8px}.pick .t{height:auto;min-height:96px;padding:16px}.pick .tiles.dense .t,.pick .tiles.dense.x5 .t{min-height:48px;height:auto;padding:8px 12px}}
.papers.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.paper .acts{flex-wrap:wrap}
.paper .inprog{font:600 17px/1.4 var(--f);color:var(--v)}
@media (max-width:1180px){.papers.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.paper{padding:24px}.paper .acts .btn{flex:1 1 auto}.sets3 .set3{min-height:0;padding:24px}.set3 p{min-height:0}}
.pick .tiles.dense .t .row{align-items:center}

/* Account */
.linkbtn{border:0;background:none;padding:8px 0;font:600 15px/1 var(--f);color:var(--v);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
a.ul{color:var(--v);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pf{display:grid;gap:16px;margin-top:24px}
.pf label{display:grid;gap:8px;font:var(--small);color:var(--mut)}
.pf input{height:48px;border:2px solid #ddd3ea;border-radius:12px;padding:0 14px;font:var(--body);color:var(--ink);background:#fff}
.pf input:focus{outline:none;border-color:var(--v)}
.acts2{display:flex;gap:12px;flex-wrap:wrap}
.err{margin:0;color:#a8324f;font:600 15px/1.4 var(--f)}
.ok2{margin:16px 0 0;color:#16734a;font:600 15px/1.4 var(--f)}
.ok2.full{grid-column:1/-1;margin:0;background:#e3f3ea;border-radius:14px;padding:16px 24px}
.tbl{overflow-x:auto}
@media (max-width:760px){.item.w{grid-template-columns:minmax(0,1fr);gap:12px}.item.w .btn{width:100%}table.pay{font:var(--small)}table.pay td,table.pay th{padding-right:12px}dl.kv{grid-template-columns:minmax(0,1fr);gap:4px}dl.kv dd{margin-bottom:12px;overflow-wrap:anywhere}}
/* Phone: topic buttons stack the name above the score so whole names fit; payments become stacked rows. */
@media (max-width:760px){.pick .tiles.dense .t,.pick .tiles.dense.x5 .t{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}.pick .tiles.dense .t b{align-self:flex-start}}
@media (max-width:480px){table.pay thead{display:none}table.pay,table.pay tbody{display:block}table.pay tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid #ddd3ea}table.pay td{border:0;padding:0}table.pay td:nth-child(3){display:none}table.pay td:nth-child(2){grid-column:1/-1;order:3;color:var(--mut)}}
.links2{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Account: marketing emails choice (migration 011) */
.optrow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin-top:16px;font:var(--body);cursor:pointer}
.optrow input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--v)}
.block .err{margin-top:12px}

/* Free-sample pay gate (29 Sept): the July/August layout, compact enough to fit one screen */
.paygate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.pg-col{width:100%;max-width:448px;display:grid;gap:12px}
.pg-head{text-align:center}
.pg-lock{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--tile);color:var(--v);margin-bottom:10px}
.pg-lock svg,.pg-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-head h1{margin:0;font:600 26px/1.15 var(--f);letter-spacing:-.6px}
.pg-head p{margin:6px 0 0;font:var(--small);color:var(--mut)}
.pg-pill{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:999px;background:var(--tile);border:1px solid #ddd0f5;color:var(--v);font:600 13px/1 var(--f)}
.pg-res{background:#fafafc;border:1px solid #ecebf0;border-radius:16px;padding:16px}
.pg-rh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.pg-rh h2{margin:0;font:600 15px/1.2 var(--f)}
.pg-rh span{font:600 10px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#9a96a3}
.pg-bars{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pg-bars li{min-width:0}
.pg-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 13px/1.25 var(--f);margin-bottom:5px}
.pg-l span:first-child{min-width:0;flex:1;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-l span:last-child{font-size:12px;font-weight:600;color:rgba(24,24,27,.45);white-space:nowrap}.pg-l .ok{color:#16a34a!important}
.pg-bar{position:relative;height:8px;border-radius:5px;background:#f0f0f4;overflow:hidden}
.pg-bar i{display:block;height:100%;border-radius:5px}.pg-bar i.low{background:#ef4444}.pg-bar i.mid{background:#f59e0b}.pg-bar i.ok{background:#22c55e}
.pg-bar b{position:absolute;left:70%;top:0;bottom:0;width:2px;background:rgba(10,10,20,.18)}
.pg-sum{margin:12px 0 0;padding-top:10px;border-top:1px solid #ecebf0;font:400 12px/1.5 var(--f);color:var(--mut)}.pg-sum b{color:var(--ink)}
.pg-lead{margin:2px 0 0;text-align:center;font:var(--small);color:var(--mut)}
.pg-card{display:block;border-radius:16px;overflow:hidden;border:1px solid #e6e3ec;background:#fff;color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.pg-card:hover{border-color:#cdbff0}
.pg-main{border:2px solid var(--v);box-shadow:0 10px 28px rgba(105,56,211,.14)}.pg-main:hover{box-shadow:0 14px 34px rgba(105,56,211,.24);border-color:var(--v)}
.pg-in{display:block;padding:14px 16px}.pg-main .pg-in{background:rgba(105,56,211,.05)}
.pg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pg-top b{display:block;font:600 16px/1.2 var(--f)}
.pg-tag{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;background:rgba(105,56,211,.14);color:var(--v);font:700 9px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase}
.pg-price{font:600 24px/1 var(--f);letter-spacing:-.5px;white-space:nowrap}.pg-price small{font:600 12px/1 var(--f);letter-spacing:0;color:rgba(24,24,27,.5)}
.pg-txt{display:block;margin-top:6px;font:400 12.5px/1.5 var(--f);color:var(--mut)}
.pg-go{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font:600 14px/1 var(--f);background:rgba(36,29,45,.04);color:var(--ink);border-top:1px solid #efedf3}
.pg-main .pg-go{background:var(--v);color:#fff;border-top:0}.pg-main:hover .pg-go{background:var(--vh)}
.pg-go svg{width:16px;height:16px;stroke-width:2}
.pg-risk{margin:0;text-align:center;font:400 12.5px/1.4 var(--f);color:var(--mut)}.pg-risk b{color:var(--ink)}
.pg-risk a,.pg-foot a{color:var(--v);font-weight:600;text-decoration:none}.pg-risk a:hover,.pg-foot a:hover{text-decoration:underline}
.pg-foot{margin:0;text-align:center;font:600 14px/1.3 var(--f)}
/* shorter screens: tighten first, then drop the extras (old layout otherwise ran past the fold) */
@media (max-height:960px){.pg-col{gap:10px}.pg-lock{display:none}.pg-pill{margin-top:8px;padding:6px 12px}.pg-bars{gap:9px}.pg-in{padding:12px 16px}.pg-go{padding:11px}}
@media (max-height:820px){.pg-head p{display:none}.pg-lead{display:none}.pg-month .pg-txt{display:none}.pg-month{display:flex;align-items:center}.pg-month .pg-in{flex:1;padding:10px 16px}.pg-month .pg-go{border-top:0;background:none;color:var(--v);padding:10px 16px}}
@media (max-height:700px){.pg-pill{display:none}.pg-head h1{font-size:22px}.pg-res{padding:12px 14px}.pg-rh{margin-bottom:8px}.pg-bars{gap:7px}.pg-l{margin-bottom:3px}.pg-bar{height:6px}.pg-sum{margin-top:8px;padding-top:7px;font-size:11.5px}.pg-tag{display:none}.pg-price{font-size:21px}.pg-month .pg-go span,.pg-month .pg-go{font-size:13px}}
@media (max-height:600px){.pg-main .pg-txt{display:none}.pg-in{padding:10px 14px}.pg-go{padding:10px}.pg-col{gap:8px}.paygate{padding-top:10px;align-items:flex-start}.pg-sum{display:none}}

/* Sidebar stays put between app pages (29 Sept): same-origin view transition; placeholder painted as the sidebar */
@view-transition{navigation:auto}
.side{view-transition-name:cv-side}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (min-width:761px){div[data-app-side]{background:var(--aub);position:sticky;top:0;height:100vh}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}