/* ---------- tokens ---------- */
:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f2f4f7;
  --border:#e2e6ec;
  --border-strong:#cdd4de;
  --text:#161b22;
  --muted:#5d6774;
  --faint:#89929f;
  --accent:#3b5bdb;
  --accent-ink:#ffffff;
  --accent-soft:#eaeeff;
  --ok:#177245;
  --ok-soft:#e4f4ea;
  --ok-border:#8fcfa9;
  --bad:#b3261e;
  --bad-soft:#fdeceb;
  --bad-border:#eda9a4;
  --warn:#8a5a00;
  --warn-soft:#fdf3e0;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.14);
  --radius:14px;
  --radius-sm:10px;
  --maxw:820px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1117;
    --surface:#161b22;
    --surface-2:#1c222c;
    --border:#272e3a;
    --border-strong:#39424f;
    --text:#e7ebf0;
    --muted:#9aa4b2;
    --faint:#727d8c;
    --accent:#7c94f4;
    --accent-ink:#0e1117;
    --accent-soft:#1e2740;
    --ok:#6ee7a8;
    --ok-soft:#12271c;
    --ok-border:#2f6b48;
    --bad:#ff9b93;
    --bad-soft:#2b1512;
    --bad-border:#7d3830;
    --warn:#f0c374;
    --warn-soft:#2a2114;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1117;
  --surface:#161b22;
  --surface-2:#1c222c;
  --border:#272e3a;
  --border-strong:#39424f;
  --text:#e7ebf0;
  --muted:#9aa4b2;
  --faint:#727d8c;
  --accent:#7c94f4;
  --accent-ink:#0e1117;
  --accent-soft:#1e2740;
  --ok:#6ee7a8;
  --ok-soft:#12271c;
  --ok-border:#2f6b48;
  --bad:#ff9b93;
  --bad-soft:#2b1512;
  --bad-border:#7d3830;
  --warn:#f0c374;
  --warn-soft:#2a2114;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.25; margin:0}
p{margin:0}
button{font:inherit; color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0}
.brand-mark{
  flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:13px; letter-spacing:.02em;
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:15px; letter-spacing:-.01em}
.brand-text small{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{
  flex:none; width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:9px; color:var(--muted);
}
.icon-btn:hover{color:var(--text); border-color:var(--border-strong)}

/* ---------- layout ---------- */
#main{padding:28px 20px 56px}
.screen{display:flex; flex-direction:column; gap:18px}
/* must beat the display rules above, or [hidden] screens still render */
[hidden]{display:none !important}
.hero{margin-bottom:2px}
.hero h1{font-size:clamp(24px,4.4vw,32px); letter-spacing:-.022em}
.lede{color:var(--muted); margin-top:8px; font-size:15.5px; max-width:62ch}

.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.panel-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.panel-head h2{font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700}
.hint{font-size:13.5px; color:var(--faint)}

/* ---------- chips ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.chip{
  cursor:pointer; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}
.chip:hover{border-color:var(--border-strong); color:var(--text)}
.chip.is-on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* ---------- year grid ---------- */
.years{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.yr{position:relative}
.yr input{position:absolute; opacity:0; width:0; height:0}
.yr span{
  display:block; text-align:center; cursor:pointer; user-select:none;
  padding:11px 4px; border-radius:var(--radius-sm); font-variant-numeric:tabular-nums;
  font-weight:650; font-size:15px; background:var(--surface-2);
  border:1.5px solid var(--border); color:var(--muted); transition:.12s;
}
.yr span:hover{border-color:var(--border-strong); color:var(--text)}
.yr input:checked + span{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.yr input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
:root[data-theme="dark"] .yr input:checked + span{color:var(--text)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .yr input:checked + span{color:var(--text)}
}
.selection-note{margin-top:14px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.selection-note.is-empty{color:var(--bad)}

/* ---------- segmented ---------- */
.seg{display:flex; flex-wrap:wrap; gap:6px; background:var(--surface-2); padding:5px; border-radius:12px; border:1px solid var(--border)}
.seg-btn{
  flex:1 1 auto; min-width:78px; cursor:pointer; padding:9px 12px; border-radius:8px;
  border:1px solid transparent; background:transparent; color:var(--muted); font-weight:650; font-size:14px;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.is-on{background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:0 1px 2px rgba(16,24,40,.06)}

/* ---------- option toggles ---------- */
.opts{display:flex; flex-direction:column; gap:2px}
.opt{display:flex; gap:12px; align-items:flex-start; padding:11px 10px; border-radius:var(--radius-sm); cursor:pointer}
.opt:hover{background:var(--surface-2)}
.opt input{margin:2px 0 0; width:17px; height:17px; accent-color:var(--accent); flex:none; cursor:pointer}
.opt-body{display:flex; flex-direction:column; gap:2px}
.opt-title{font-weight:640; font-size:14.5px}
.opt-sub{font-size:13px; color:var(--faint); line-height:1.45}

/* ---------- buttons ---------- */
.btn{
  cursor:pointer; border-radius:10px; font-weight:650; font-size:14.5px; padding:11px 18px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); transition:.12s;
}
.btn:hover{border-color:var(--border-strong)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-quiet{background:transparent; color:var(--muted)}
.btn-quiet:hover{color:var(--text)}
.btn-lg{padding:14px 26px; font-size:16px}
.btn-sm{padding:7px 13px; font-size:13px}
.start-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* ---------- stats ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:14px}
.stat{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px}
.stat b{display:block; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px; color:var(--faint)}

/* ---------- quiz head ---------- */
.quiz-head{display:flex; flex-direction:column; gap:12px}
.progress-line{display:flex; align-items:center; gap:12px}
.q-count{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.q-count strong{color:var(--text)}
.bar{flex:1; height:6px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden}
.bar-fill{height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .25s ease}
.timer{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.timer.is-over{color:var(--warn); font-weight:650}

.navigator{display:flex; flex-wrap:wrap; gap:5px}
.nav-dot{
  width:29px; height:29px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:650;
  background:var(--surface); border:1px solid var(--border); color:var(--faint);
  font-variant-numeric:tabular-nums; position:relative; padding:0;
}
.nav-dot:hover{border-color:var(--border-strong); color:var(--text)}
.nav-dot.answered{background:var(--surface-2); color:var(--text); border-color:var(--border-strong)}
.nav-dot.correct{background:var(--ok-soft); border-color:var(--ok-border); color:var(--ok)}
.nav-dot.wrong{background:var(--bad-soft); border-color:var(--bad-border); color:var(--bad)}
.nav-dot.current{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.nav-dot.flagged::after{
  content:""; position:absolute; top:-2px; right:-2px; width:7px; height:7px;
  border-radius:50%; background:var(--warn); border:1.5px solid var(--surface);
}

/* ---------- question card ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.q-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.badge{
  font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:999px;
}
.flag-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; font-weight:650;
  padding:5px 11px; border-radius:999px; background:transparent; border:1px solid var(--border); color:var(--muted);
}
.flag-btn:hover{color:var(--text); border-color:var(--border-strong)}
.flag-btn[aria-pressed="true"]{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}

.q-text{font-size:18.5px; font-weight:640; letter-spacing:-.012em; line-height:1.45}
.q-text em{font-style:italic}

.figure{
  margin:16px 0 0; padding:14px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow-x:auto;
}
.figure img{display:block; max-width:100%; height:auto; margin:0 auto}

.formula{
  margin:12px 0; padding:12px 14px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:14.5px; text-align:center; overflow-x:auto;
}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 .2em}
.frac .num{border-bottom:1.5px solid currentColor; padding:0 .4em 2px}
.frac .den{padding:2px .4em 0}

.q-table-wrap{margin:16px 0 0; overflow-x:auto}
table.q-table{border-collapse:collapse; width:100%; min-width:420px; font-size:14px}
table.q-table th, table.q-table td{border:1px solid var(--border-strong); padding:9px 11px; text-align:center}
table.q-table th{background:var(--surface-2); font-weight:650; font-style:italic; font-size:13px}
table.q-table td.rowlab{font-weight:700; font-style:normal; background:var(--surface-2); width:44px}

/* ---------- options ---------- */
.options{display:flex; flex-direction:column; gap:8px; margin-top:18px}
.opt-btn{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  padding:13px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface); transition:.12s; font-size:15.5px; line-height:1.45;
}
.opt-btn:hover:not(:disabled){border-color:var(--border-strong); background:var(--surface-2)}
.opt-btn:disabled{cursor:default}
.opt-key{
  flex:none; width:25px; height:25px; border-radius:7px; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}
.opt-txt{flex:1; min-width:0}
.opt-btn.selected{border-color:var(--accent); background:var(--accent-soft)}
.opt-btn.selected .opt-key{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.opt-btn.correct{border-color:var(--ok-border); background:var(--ok-soft)}
.opt-btn.correct .opt-key{background:var(--ok); border-color:var(--ok); color:var(--ok-soft)}
.opt-btn.wrong{border-color:var(--bad-border); background:var(--bad-soft)}
.opt-btn.wrong .opt-key{background:var(--bad); border-color:var(--bad); color:var(--bad-soft)}
.opt-mark{margin-left:auto; flex:none; font-size:13px; font-weight:700; align-self:center}
.opt-btn.correct .opt-mark{color:var(--ok)}
.opt-btn.wrong .opt-mark{color:var(--bad)}

/* letters-only variant for figure questions */
.options.compact{flex-direction:row; flex-wrap:wrap}
.options.compact .opt-btn{flex:1 1 110px; justify-content:center; align-items:center; padding:14px 10px}
.options.compact .opt-txt{flex:0; display:none}

.feedback{margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600}
.feedback.ok{background:var(--ok-soft); border:1px solid var(--ok-border); color:var(--ok)}
.feedback.bad{background:var(--bad-soft); border:1px solid var(--bad-border); color:var(--bad)}

.quiz-foot{display:flex; align-items:center; gap:10px}
.quiz-foot #nextBtn{margin-left:auto}

/* ---------- results ---------- */
.score-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.ring{position:relative; width:132px; height:132px; flex:none}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:10; stroke-linecap:round}
.ring-bg{stroke:var(--surface-2)}
.ring-fg{stroke:var(--accent); stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)}
.ring-label{position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:2px}
.ring-label strong{font-size:30px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ring-label span{font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums}
.score-side{flex:1 1 260px; min-width:0}
.score-side h1{font-size:23px; letter-spacing:-.02em}
.score-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

.byyear{display:flex; flex-direction:column; gap:11px}
.yrow{display:flex; align-items:center; gap:12px; font-size:14px}
.yrow .yl{width:52px; font-weight:700; font-variant-numeric:tabular-nums; flex:none}
.yrow .yb{flex:1; height:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:99px; overflow:hidden}
.yrow .yb i{display:block; height:100%; background:var(--accent); border-radius:99px}
.yrow .yn{width:66px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; font-size:13px}

.review-filter{display:flex; gap:6px}
.review{display:flex; flex-direction:column; gap:12px}
.rv{border:1px solid var(--border); border-left-width:3px; border-radius:var(--radius-sm); padding:15px; background:var(--surface-2)}
.rv.ok{border-left-color:var(--ok)}
.rv.bad{border-left-color:var(--bad)}
.rv.skip{border-left-color:var(--faint)}
.rv-head{display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap}
.rv-badge{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--muted)}
.rv-tag{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
.rv-tag.ok{background:var(--ok-soft); color:var(--ok)}
.rv-tag.bad{background:var(--bad-soft); color:var(--bad)}
.rv-tag.skip{background:var(--surface); color:var(--faint); border:1px solid var(--border)}
.rv-tag.flag{background:var(--warn-soft); color:var(--warn)}
.rv-q{font-size:15.5px; font-weight:600; line-height:1.45}
.rv .figure{background:#fff; margin-top:12px; padding:10px}
.rv-ans{margin-top:11px; display:flex; flex-direction:column; gap:5px; font-size:14px}
.rv-ans div{display:flex; gap:8px}
.rv-ans b{flex:none; font-weight:650; color:var(--muted); min-width:104px}
.rv-ans .good{color:var(--ok); font-weight:640}
.rv-ans .bad{color:var(--bad)}

.site-foot{padding:8px 20px 40px}
.site-foot p{font-size:12.5px; color:var(--faint); line-height:1.55; max-width:70ch}

@media (max-width:560px){
  .panel,.card{padding:16px}
  .score-hero{padding:18px; gap:18px}
  .quiz-foot .btn{flex:1}
  .quiz-foot #quitBtn{display:none}
  .nav-dot{width:27px; height:27px}
}