/* The Proving Ground — the website's look, carried over from the claude.ai v89 page. Colours only from the Brand Tokens
   (tokens.css); light and dark follow the device, as v89 did (light: Victory Mahogany accent; dark: khaki accent).
   Density: DEVICE (phones first). Geometry flows viewport -> page -> region -> content: the shell is one column of the
   viewport's height, the main region scrolls, and nothing in it may be wider than the screen (no sideways wobble). */
:root{
  --text-brand:var(--vc-victory);--action-primary:var(--vc-victory);--action-primary-hover:color-mix(in srgb,var(--vc-victory) 85%,var(--vc-white));
  --action-primary-text:var(--vc-white);--focus:var(--vc-victory);--deco:var(--vc-victory);
  --perf-top:var(--status-info-base);--perf-good:color-mix(in srgb,var(--status-info-base) 55%,var(--bg-surface));
  --perf-fair:var(--status-warning-base);--perf-low:color-mix(in srgb,var(--status-warning-base) 62%,var(--vc-victory));
  --radius:10px;--tap:44px;--gutter:max(16px,env(safe-area-inset-left,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --text-brand:var(--vc-khaki);--action-primary:var(--vc-khaki);--action-primary-hover:color-mix(in srgb,var(--vc-khaki) 80%,var(--vc-white));
  --action-primary-text:var(--bg-shell);--focus:var(--vc-khaki);--deco:var(--vc-khaki)}}
:root[data-theme="dark"]{--text-brand:var(--vc-khaki);--action-primary:var(--vc-khaki);--action-primary-hover:color-mix(in srgb,var(--vc-khaki) 80%,var(--vc-white));
  --action-primary-text:var(--bg-shell);--focus:var(--vc-khaki);--deco:var(--vc-khaki)}
:root{color-scheme:light dark}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:clip;overscroll-behavior-x:none}
body{display:flex;flex-direction:column;height:100dvh;background:var(--bg-base);color:var(--text-primary);font:var(--t-md)/var(--t-md-lh) var(--font-body);-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- shell: header, the progress bar at the top, tabs ---------- */
.top{flex:none;background:var(--bg-shell);color:var(--text-on-shell);border-bottom:3px solid var(--deco)}
.top-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--gutter)}
.logo{width:40px;height:40px;color:var(--vc-leaf-mid)}
.title{text-align:center;line-height:1.05;min-width:0}
.title b{display:block;font:700 var(--t-lg)/1.1 var(--font-heading);letter-spacing:.04em;text-transform:uppercase}
.title small{display:block;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--vc-khaki)}
.top-btns{display:flex;gap:var(--space-2)}
.round{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--vc-victory);color:var(--vc-white);font-weight:700}
.round:hover{background:var(--vc-victory)}
.round svg{width:20px;height:20px}
.round.plain{background:transparent;color:var(--text-on-shell);border:1.5px solid color-mix(in srgb,var(--text-on-shell) 50%,transparent)}
.hud{display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--gutter) var(--space-2);gap:var(--space-2)}
.hud button{all:unset;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);min-height:36px;color:var(--text-on-shell);font-weight:700}
.hud button:nth-child(2){justify-content:center}.hud button:nth-child(3){justify-content:flex-end}
.hud button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.hud svg{width:20px;height:20px;color:var(--vc-khaki)}
.hud .lvl{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--vc-khaki);color:var(--bg-shell);font-size:var(--t-sm)}
.hud small{font-weight:400;opacity:.8}
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg-surface);border-bottom:1px solid var(--border-default)}
.tabs button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:var(--space-2) 0 var(--space-1);min-height:var(--tap);font-size:var(--t-sm);color:var(--text-secondary);border-top:3px solid transparent}
.tabs button svg{width:22px;height:22px}
.tabs button[aria-current="page"]{color:var(--text-brand);border-top-color:var(--deco);font-weight:700}
.tabs button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:var(--space-4) var(--gutter)}
main:focus{outline:none}
.page{max-width:760px;margin:0 auto}

/* ---------- type, forms, buttons ---------- */
h1{font:700 var(--t-xl)/var(--t-xl-lh) var(--font-heading);margin:0 0 var(--space-3)}
h2{font:700 var(--t-lg)/var(--t-lg-lh) var(--font-heading);margin:var(--space-6) 0 var(--space-2)}
h1:focus,h2:focus{outline:none}
p{margin:0 0 var(--space-3);max-width:66ch}
.note{color:var(--text-secondary)}
.muted{color:var(--text-muted)}
form{display:grid;gap:var(--space-3);max-width:460px;margin-bottom:var(--space-4)}
label{display:grid;gap:var(--space-1);font-weight:600}
input,select,textarea{width:100%;min-height:48px;padding:0 var(--space-3);font:inherit;color:var(--text-primary);background:var(--bg-surface);border:1.5px solid var(--border-strong);border-radius:8px}
textarea{padding:var(--space-2) var(--space-3);min-height:96px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.check{display:flex;gap:var(--space-2);align-items:center;font-weight:400}
.check input{width:22px;min-height:22px}
button{min-height:var(--tap);padding:0 var(--space-4);font:600 var(--t-md)/1.2 var(--font-body);color:var(--action-primary-text);background:var(--action-primary);border:0;border-radius:8px;cursor:pointer;justify-self:start;touch-action:manipulation}
button:hover{background:var(--action-primary-hover)}
button:disabled{opacity:.45;cursor:default}
button.ghost{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong)}
button.ghost:hover{border-color:var(--text-brand)}
button.link{all:unset;cursor:pointer;color:var(--text-brand);text-decoration:underline;font-weight:600}
button.link:focus-visible{outline:3px solid var(--focus)}
button.danger{background:var(--status-danger-base);color:var(--vc-white)}
button.big{width:100%;min-height:56px;font-size:var(--t-lg);display:flex;justify-content:center;align-items:center;gap:var(--space-2)}
button.small{min-height:36px;padding:0 var(--space-3);font-size:var(--t-sm)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);align-items:center}
.row.end{justify-content:flex-end}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:var(--space-2) 0 var(--space-4)}
.two button{width:100%;padding:var(--space-2)}
.err{margin:0;color:var(--status-danger-text);font-weight:600}
.ok{margin:0;color:var(--status-success-text);font-weight:600}
.err:empty,.ok:empty{display:none}
.links{margin:var(--space-3) 0}
.box{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-4)}
.edge{border-left:4px solid var(--deco)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);margin-bottom:var(--space-3)}
.seg button{all:unset;cursor:pointer;display:grid;justify-items:center;align-content:center;gap:2px;min-height:var(--tap);padding:var(--space-1) var(--space-2);border-radius:8px;font-weight:600;color:var(--text-secondary);text-align:center}
.seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--deco) 18%,var(--bg-surface));color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--deco)}
.seg button:focus-visible{outline:3px solid var(--focus)}
.seg svg{width:22px;height:22px}
.chip{display:inline-block;padding:0 var(--space-2);border:1px solid var(--border-strong);border-radius:999px;font-size:var(--t-sm);line-height:24px;color:var(--text-secondary)}
.switch{display:grid;grid-template-columns:52px 1fr;gap:var(--space-3);align-items:center;font-weight:400}
.switch input{appearance:none;-webkit-appearance:none;width:52px;min-height:30px;height:30px;border-radius:999px;background:var(--border-strong);border:0;position:relative;cursor:pointer;padding:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--bg-surface);transition:left .15s}
.switch input:checked{background:var(--action-primary)}.switch input:checked::after{left:25px}
.switch b{display:block}
details.drawer{border:1px solid var(--border-default);border-radius:var(--radius);background:var(--bg-surface);margin-bottom:var(--space-3)}
details.drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-2) var(--space-4);font-weight:700}
details.drawer>summary::-webkit-details-marker{display:none}
details.drawer>summary svg{width:22px;height:22px;flex:none}
details.drawer>summary small{font-weight:400}
.titlerow{display:grid;grid-template-columns:40px 1fr;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)}
.titlerow h1{margin:0}.titlerow p{margin:0}
.titlerow>svg{width:40px;height:40px;color:var(--text-brand)}
details.drawer>summary .chev{margin-left:auto;transition:transform .15s;width:20px;height:20px}
details.drawer[open]>summary .chev{transform:rotate(180deg)}
details.drawer>.in{padding:0 var(--space-4) var(--space-4)}
table{width:100%;border-collapse:collapse;margin-bottom:var(--space-4)}
th,td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-default)}
th{font-size:var(--t-sm);color:var(--text-secondary)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.list{overflow-x:auto;max-width:100%}
.bar{height:10px;border-radius:999px;background:color-mix(in srgb,var(--border-strong) 60%,transparent);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--action-primary);border-radius:999px}

/* ---------- Journey: welcome, the Exam Readiness Map (or spider), Your Progress — one screen on a phone ---------- */
.journey{min-height:100%;display:grid;grid-template-rows:auto auto minmax(12rem,1fr) auto;gap:var(--space-3);max-width:760px;margin:0 auto}
.welcome{margin:0;padding:var(--space-3) var(--space-4)}
.welcome .wl{display:flex;align-items:flex-start;gap:var(--space-3)}
.welcome h1{font-size:var(--t-lg);line-height:var(--t-lg-lh);margin:0 0 var(--space-1);flex:1;min-width:0;overflow-wrap:anywhere}
.welcome p{margin:0 0 var(--space-2)}
.j-head{display:grid;grid-template-columns:1fr 7.5rem;align-items:center;gap:0 var(--space-3)}
.j-head h2{margin:0}
.j-head small{grid-column:1;color:var(--text-secondary)}
.j-head .seg{margin:0;grid-column:2;grid-row:1/3}
.j-head .seg button{min-height:36px;font-size:var(--t-sm)}
.fig{position:relative;min-height:0;overflow:hidden}
.fig svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.em-track{stroke:color-mix(in srgb,var(--border-strong) 70%,transparent);stroke-width:1.1}
.em-flow{stroke-width:1.1;fill:none}
.ring-bg{fill:var(--bg-surface);stroke:color-mix(in srgb,var(--border-strong) 80%,transparent);stroke-width:1.4}
.ring-fg{fill:none;stroke-width:1.4;stroke-linecap:round}
.r-top{stroke:var(--perf-top)}.r-good{stroke:var(--perf-good)}.r-fair{stroke:var(--perf-fair)}.r-low{stroke:var(--perf-low)}.r-none{stroke:var(--border-strong)}
.ring-pct{font:700 3.9px var(--font-body);fill:var(--text-primary);text-anchor:middle;dominant-baseline:central}
.ring-name{font:600 4.4px var(--font-body);fill:var(--text-secondary);text-anchor:middle}
.core-bg{fill:var(--bg-surface);stroke:color-mix(in srgb,var(--border-strong) 80%,transparent);stroke-width:2}
.core-fg{fill:none;stroke-width:2;stroke-linecap:round;stroke:var(--action-primary)}
.core-pass{stroke:var(--text-secondary);stroke-width:.6}
.core-num{font:700 8px var(--font-heading);fill:var(--text-primary);text-anchor:middle}
.core-k{font:600 3.3px var(--font-body);fill:var(--text-secondary);text-anchor:middle}
.stop,.core{cursor:pointer}
.stop:focus,.core:focus{outline:none}
.stop:focus-visible .ring-bg,.core:focus-visible .core-bg{stroke:var(--focus);stroke-width:2.2}
.sp-grid{fill:none;stroke:color-mix(in srgb,var(--border-strong) 60%,transparent);stroke-width:.35}
.sp-pass{fill:none;stroke:var(--text-secondary);stroke-width:.45;stroke-dasharray:1.4 1.2}
.sp-area{fill:color-mix(in srgb,var(--action-primary) 28%,transparent);stroke:var(--action-primary);stroke-width:.7}
.sp-dot{fill:var(--action-primary)}
.sp-name{font:600 4.2px var(--font-body);fill:var(--text-secondary)}
.yp{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius)}
.yp summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}
.yp summary::-webkit-details-marker{display:none}
.yp summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--radius)}
.yp summary b{font:700 var(--t-lg)/1.2 var(--font-heading)}
.yp summary .sum{justify-self:end;color:var(--text-secondary);font-size:var(--t-sm);text-align:right}
.yp summary .bar{grid-column:1/-1}
.yp summary .barnote{grid-column:1/-1;font-size:var(--t-sm);color:var(--text-secondary);margin-top:calc(-1 * var(--space-1))}
.yp .chev{transition:transform .15s;width:20px;height:20px}.yp[open] .chev{transform:rotate(180deg)}
.yp dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--space-2);margin:0;padding:0 var(--space-4) var(--space-4)}
.yp dl div{background:var(--bg-base);border-radius:8px;padding:var(--space-2) var(--space-3)}
.yp dt{font-size:var(--t-sm);color:var(--text-secondary)}.yp dd{margin:0;font-weight:700;font-size:var(--t-lg)}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);font-size:var(--t-sm);color:var(--text-secondary);margin:0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:2px solid currentColor}
.legend .k-top{color:var(--perf-top)}.legend .k-good{color:var(--perf-good)}.legend .k-fair{color:var(--perf-fair)}.legend .k-low{color:var(--perf-low)}

/* ---------- quiz ---------- */
.qcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:var(--space-4)}
.qtop{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid var(--border-default);font-size:var(--t-sm)}
.qtop .mid{text-align:center;color:var(--text-secondary)}
.qtop .clock{font-variant-numeric:tabular-nums}
.qmeta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}
.qmeta b{color:var(--text-brand)}
.kicker{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-1)}
.stem{font:700 var(--t-lg)/var(--t-lg-lh) var(--font-heading);margin:0 0 var(--space-4);overflow-wrap:anywhere}
.photo{margin:0 0 var(--space-4)}
.photo img{display:block;width:100%;max-height:min(52vh,420px);object-fit:contain;background:var(--bg-base);border-radius:8px;cursor:zoom-in}
.photo.big img{max-height:none;cursor:zoom-out}
.photo figcaption{font-size:var(--t-xs);color:var(--text-muted);margin-top:var(--space-1)}
.opts{display:grid;gap:var(--space-2);margin-bottom:var(--space-3)}
.opt{display:grid;grid-template-columns:32px 1fr;gap:var(--space-3);align-items:center;width:100%;min-height:52px;padding:var(--space-2) var(--space-3);text-align:left;font-weight:400;
  color:var(--text-primary);background:var(--bg-surface);border:1.5px solid var(--border-strong);border-radius:8px}
.opt:hover{background:var(--bg-raised);border-color:var(--text-brand)}
.opt .let{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border-strong);font-weight:700}
.opt.right{border-color:var(--status-success-base);background:var(--status-success-fill)}
.opt.wrong{border-color:var(--status-danger-base);background:var(--status-danger-fill)}
.numans{grid-template-columns:1fr auto;align-items:end;max-width:none}
.fb{margin-top:var(--space-3)}
.fb:empty{display:none}
.fb .verdict{font:700 var(--t-lg)/1.2 var(--font-heading)}
.fb.right .verdict{color:var(--status-success-text)}.fb.wrong .verdict{color:var(--status-danger-text)}
.why{border-left:4px solid var(--deco);padding-left:var(--space-3)}
.score{font:700 var(--t-2xl)/var(--t-2xl-lh) var(--font-heading)}
.review{padding-left:var(--space-5)}
.review li{margin-bottom:var(--space-4)}
.review li .verdict{font-weight:700}
.review li.right .verdict{color:var(--status-success-text)}.review li.wrong .verdict{color:var(--status-danger-text)}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-bottom:var(--space-4)}
.figs div{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;padding:var(--space-2);text-align:center}
.figs b{display:block;font-size:var(--t-xl)}.figs span{font-size:var(--t-sm);color:var(--text-secondary)}

/* ---------- cards ---------- */
.decks{display:grid;gap:var(--space-2);margin:0 0 var(--space-4);padding:0;list-style:none}
.deck{display:grid;grid-template-columns:var(--tap) 1fr auto;align-items:center;gap:var(--space-2);min-height:56px;padding:0 var(--space-2) 0 0;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius)}
.deck.no-grip{grid-template-columns:var(--space-2) 1fr auto}
.deck .open{all:unset;cursor:pointer;display:grid;min-height:56px;align-content:center;min-width:0}
.deck .open b{font-weight:700}.deck .open span{font-size:var(--t-sm);color:var(--text-secondary)}
.deck .open:focus-visible{outline:3px solid var(--focus)}
.deck.on{border-color:var(--deco);box-shadow:inset 0 0 0 1px var(--deco)}
.grip{all:unset;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;display:grid;place-items:center;width:var(--tap);height:56px;color:var(--text-muted)}
.grip:focus-visible{outline:3px solid var(--focus)}
.grip svg{width:20px;height:20px;pointer-events:none}
.ghost-drag{position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:.92;box-shadow:0 8px 24px color-mix(in srgb,var(--vc-black) 35%,transparent);will-change:transform}
.dragging{opacity:.35}
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:var(--space-3);min-height:7rem;background:var(--bg-surface);margin-bottom:var(--space-4)}
.dropzone.over{border-color:var(--deco);background:color-mix(in srgb,var(--deco) 10%,var(--bg-surface))}
.setcards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);max-height:50dvh;overflow-y:auto}
.setcard{display:grid;grid-template-columns:var(--tap) 1fr auto;align-items:center;gap:var(--space-2);min-height:48px;background:var(--bg-base);border-radius:8px;transition:transform .12s}
.setcard.lift{transition:none;z-index:2;position:relative;box-shadow:0 6px 18px color-mix(in srgb,var(--vc-black) 30%,transparent);background:var(--bg-raised)}
.setcard .t{font-size:var(--t-sm);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.setcard .grip{height:48px}
.fc{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:var(--space-4);min-height:14rem;display:grid;align-content:start}
.fc .side{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0}
.fc .clue{font:700 var(--t-lg)/var(--t-lg-lh) var(--font-heading);margin:var(--space-2) 0 var(--space-3);overflow-wrap:anywhere}
.fc-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-3)}
.fc-controls .wide{grid-column:1/-1}
.fc-controls button{width:100%}
.rate button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--deco)}

/* ---------- badges ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:var(--space-3);padding:0;list-style:none}
.badges li{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:var(--space-3);display:grid;gap:var(--space-1);align-content:start}
.badges li.earned{border-color:var(--deco);box-shadow:inset 0 0 0 1px var(--deco)}
.badges b{font-weight:700}.badges span{font-size:var(--t-sm);color:var(--text-secondary)}

/* ---------- sheet (report a question, end a quiz, reset) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--vc-black) 55%,transparent);display:grid;align-items:end;justify-items:center}
.sheet{width:min(560px,100%);max-height:90dvh;overflow-y:auto;background:var(--bg-surface);border-radius:var(--radius) var(--radius) 0 0;padding:var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:var(--radius)}}
.sheet .row button{flex:1 1 auto}

/* ---------- wider screens ---------- */
@media (min-width:700px){.stem{font-size:var(--t-xl);line-height:var(--t-xl-lh)}}
@media (min-width:900px){
  .tabs{grid-template-columns:repeat(5,minmax(0,8rem));justify-content:center}
  .journey{grid-template-rows:auto auto minmax(16rem,1fr) auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}