/* SectionalDrill design system. Tokens are named for their job, not their value (docs/DESIGN.md).
   Only the :root block holds raw values; everything else references a token. Checked by tools/design_lint.py. */
:root{
  /* surfaces */
  --sd-surface-page:#f5f6f8; --sd-surface-card:#ffffff; --sd-surface-well:#eef1f5; --sd-surface-inverse:#0f1b2d; --sd-surface-notice:#fff4d6;
  /* text */
  --sd-text:#0f1b2d; --sd-text-muted:#4f5a6b; --sd-on-inverse:#ffffff; --sd-on-inverse-muted:#c3cbd8; --sd-on-notice:#3d2e00; --sd-link:#0a56c2;
  /* lines */
  --sd-border:#dfe3ea; --sd-border-control:#8a95a6; --sd-border-notice:#f1d58a;
  /* actions */
  --sd-action:#0a56c2; --sd-action-hover:#08469f; --sd-on-action:#ffffff; --sd-buy:#0f1b2d; --sd-buy-hover:#24324a; --sd-on-buy:#ffffff;
  --sd-selected-bg:#e8f0fc; --sd-selected-border:#0a56c2; --sd-focus:#0a56c2;
  /* answer feedback */
  --sd-correct-text:#0b6b35; --sd-correct-bg:#e7f5ec; --sd-correct-border:#178a47;
  --sd-wrong-text:#a3231a; --sd-wrong-bg:#fdecea; --sd-wrong-border:#c4362b;
  /* progress + data */
  --sd-progress-track:#dfe3ea; --sd-progress-fill:#0a56c2; --sd-pass-line:#0f1b2d; --sd-brand-mark:#a3197d;
  /* type */
  --sd-font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sd-font-machine:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sd-text-xs:13px; --sd-text-sm:15px; --sd-text-md:17px; --sd-text-lg:19px; --sd-text-xl:24px; --sd-text-2xl:30px;
  /* space (4px base) */
  --sd-space-1:4px; --sd-space-2:8px; --sd-space-3:12px; --sd-space-4:16px; --sd-space-5:20px; --sd-space-6:24px; --sd-space-8:32px;
  /* shape + depth: one control radius, one surface radius; no shadows on persistent surfaces */
  --sd-radius-control:10px; --sd-radius-surface:12px; --sd-radius-round:999px; --sd-hairline:1px;
  --sd-tap:48px;
  /* stacking tiers */
  --sd-z-sticky:10; --sd-z-overlay:100;
  --sd-motion:.14s ease;
}
[hidden]{display:none!important}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--sd-text-md)/1.55 var(--sd-font-ui);color:var(--sd-text);background:var(--sd-surface-page)}
a{color:var(--sd-link)}img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--sd-focus);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--sd-space-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* chrome */
header.top{background:var(--sd-surface-card);border-bottom:var(--sd-hairline) solid var(--sd-border)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:56px;gap:var(--sd-space-1) var(--sd-space-3)}
.logo{font-weight:800;text-decoration:none;color:var(--sd-text);letter-spacing:-.02em;display:flex;align-items:center}
.logo span{color:var(--sd-link)}
.logo:before{content:"";margin-right:var(--sd-space-2);width:18px;height:18px;border-radius:var(--sd-radius-round);border:3px dashed var(--sd-brand-mark)}
nav.main a{margin-left:var(--sd-space-3);text-decoration:none;font-size:var(--sd-text-sm);color:var(--sd-text-muted)}
nav.main a.nav-cta{color:var(--sd-link);font-weight:700}
.banner{background:var(--sd-surface-notice);color:var(--sd-on-notice);border-bottom:var(--sd-hairline) solid var(--sd-border-notice);font-size:var(--sd-text-sm)}
.banner .wrap{padding:var(--sd-space-2) var(--sd-space-4)}
.banner a{color:var(--sd-on-notice)}

/* type */
h1{font-size:28px;line-height:1.2;letter-spacing:-.02em}h2{font-size:22px;line-height:1.25;margin-top:1.6em}h3{font-size:var(--sd-text-md)}
.hero{padding:var(--sd-space-6) 0 var(--sd-space-2)}
.hero h1{font-size:var(--sd-text-2xl);line-height:1.15;margin:.2em 0 .4em}
.hero p.lead{font-size:var(--sd-text-lg);color:var(--sd-text)}
.small{font-size:var(--sd-text-sm);color:var(--sd-text-muted)}
.mono,.num{font-family:var(--sd-font-machine);font-variant-numeric:tabular-nums}
.eyebrow{font-size:var(--sd-text-xs);color:var(--sd-text-muted);margin:0 0 var(--sd-space-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-tap);background:var(--sd-action);color:var(--sd-on-action);border:0;border-radius:var(--sd-radius-control);padding:var(--sd-space-3) var(--sd-space-5);font:700 var(--sd-text-md)/1.25 var(--sd-font-ui);text-decoration:none;cursor:pointer;margin:var(--sd-space-1) 0;text-align:center;transition:background var(--sd-motion)}
.btn:hover{background:var(--sd-action-hover)}
.btn.block{display:flex;width:100%}
.btn.buy{background:var(--sd-buy);color:var(--sd-on-buy)}.btn.buy:hover{background:var(--sd-buy-hover)}
.btn.ghost{background:var(--sd-surface-card);color:var(--sd-text);border:var(--sd-hairline) solid var(--sd-border-control)}
.btn.ghost:hover{background:var(--sd-surface-well)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sd-space-2);align-items:center}
.reassure{display:flex;flex-wrap:wrap;gap:var(--sd-space-1) var(--sd-space-4);list-style:none;padding:0;margin:var(--sd-space-2) 0 0;font-size:var(--sd-text-sm);color:var(--sd-text-muted)}
.reassure li:before{content:"\2713  ";color:var(--sd-correct-text);font-weight:800}

/* surfaces: hairline, no shadow */
.card{background:var(--sd-surface-card);border:var(--sd-hairline) solid var(--sd-border);border-radius:var(--sd-radius-surface);padding:var(--sd-space-4);margin:var(--sd-space-4) 0}
.grid{display:grid;gap:var(--sd-space-3)}@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
.grid .card{margin:0}
ul.checks{padding-left:0;list-style:none}ul.checks li{padding-left:26px;position:relative;margin:var(--sd-space-2) 0}
ul.checks li:before{content:"\2713";position:absolute;left:4px;color:var(--sd-correct-text);font-weight:800}

/* chart figure: the work sits in the well */
figure.chart{margin:0 0 var(--sd-space-3);background:var(--sd-surface-well);border-radius:var(--sd-radius-control);padding:var(--sd-space-1)}
figure.chart img{display:block;width:100%;border-radius:8px}
figure.chart a{display:block;position:relative}
figure.chart .zoom{position:absolute;right:var(--sd-space-2);bottom:var(--sd-space-2);background:var(--sd-surface-inverse);color:var(--sd-on-inverse);font-size:var(--sd-text-xs);font-weight:700;padding:var(--sd-space-1) var(--sd-space-2);border-radius:var(--sd-radius-control)}
figcaption{font-size:var(--sd-text-xs);color:var(--sd-text-muted);margin:var(--sd-space-1) var(--sd-space-1) 0}

/* question card */
.qhead{margin-bottom:var(--sd-space-3)}
.qmeta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sd-space-2);font-size:var(--sd-text-sm);color:var(--sd-text-muted);margin-bottom:var(--sd-space-2)}
.qmeta span:first-child{font-weight:700;font-variant-numeric:tabular-nums;color:var(--sd-text)}
.tag{color:var(--sd-text-muted);text-align:right}
.progress{height:6px;background:var(--sd-progress-track);border-radius:var(--sd-radius-round);overflow:hidden}
.progress i{display:block;height:100%;background:var(--sd-progress-fill);border-radius:var(--sd-radius-round);transition:width var(--sd-motion)}
.prompt{font-weight:650;font-size:var(--sd-text-lg);line-height:1.4;margin:var(--sd-space-3) 0}
.choices{display:grid;gap:var(--sd-space-2)}
a.choice{text-decoration:none}
.choice{display:flex;align-items:flex-start;gap:var(--sd-space-3);width:100%;min-height:52px;text-align:left;background:var(--sd-surface-card);border:2px solid var(--sd-border);border-radius:var(--sd-radius-control);padding:var(--sd-space-3);font:var(--sd-text-md)/1.4 var(--sd-font-ui);cursor:pointer;color:var(--sd-text);transition:background var(--sd-motion),border-color var(--sd-motion)}
.choice:hover{border-color:var(--sd-border-control);background:var(--sd-surface-well)}
.choice .key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:var(--sd-hairline) solid var(--sd-border-control);font:700 var(--sd-text-sm)/1 var(--sd-font-ui);color:var(--sd-text)}
.choice .txt{flex:1;padding-top:2px}
.choice .mark{flex:none;font-weight:700;font-size:var(--sd-text-sm);padding-top:4px}
.choice:disabled{cursor:default;color:var(--sd-text-muted)}
.choice:disabled:hover{background:var(--sd-surface-card);border-color:var(--sd-border)}
.choice.right,.choice.right:hover{border-color:var(--sd-correct-border);background:var(--sd-correct-bg);color:var(--sd-correct-text)}
.choice.right .key{background:var(--sd-correct-border);border-color:var(--sd-correct-border);color:var(--sd-on-action)}
.choice.wrong,.choice.wrong:hover{border-color:var(--sd-wrong-border);background:var(--sd-wrong-bg);color:var(--sd-wrong-text)}
.choice.wrong .key{background:var(--sd-wrong-border);border-color:var(--sd-wrong-border);color:var(--sd-on-action)}
.choice.picked{border-color:var(--sd-selected-border);background:var(--sd-selected-bg)}
.choice.picked .key{background:var(--sd-selected-border);border-color:var(--sd-selected-border);color:var(--sd-on-action)}

/* answer feedback */
.explain{margin-top:var(--sd-space-3);border-radius:var(--sd-radius-control);padding:var(--sd-space-4);background:var(--sd-surface-well);border-left:4px solid var(--sd-border-control)}
.explain.ok{border-left-color:var(--sd-correct-border)}.explain.no{border-left-color:var(--sd-wrong-border)}
.explain p{margin:0 0 var(--sd-space-2)}.explain p:last-child{margin-bottom:0}
.explain .verdict{font-weight:800}.explain.ok .verdict{color:var(--sd-correct-text)}.explain.no .verdict{color:var(--sd-wrong-text)}
.explain .ref{font-family:var(--sd-font-machine);font-size:var(--sd-text-xs);color:var(--sd-text-muted)}

/* sticky action bar: thumb zone on phones; furniture, so a hairline not a shadow */
.actionbar{position:sticky;bottom:0;z-index:var(--sd-z-sticky);background:var(--sd-surface-card);border-top:var(--sd-hairline) solid var(--sd-border);margin:var(--sd-space-4) calc(-1 * var(--sd-space-4)) calc(-1 * var(--sd-space-4));padding:var(--sd-space-3) var(--sd-space-4);border-radius:0 0 var(--sd-radius-surface) var(--sd-radius-surface)}
.next{width:100%;margin:0}

/* score card */
.score{display:flex;align-items:baseline;gap:var(--sd-space-3);margin:var(--sd-space-1) 0 var(--sd-space-2)}
.score b{font:800 44px/1 var(--sd-font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.score span{color:var(--sd-text-muted)}
.passbar{position:relative;height:10px;background:var(--sd-progress-track);border-radius:var(--sd-radius-round);margin:var(--sd-space-3) 0 var(--sd-space-1)}
.passbar i{display:block;height:100%;border-radius:var(--sd-radius-round);background:var(--sd-wrong-border)}
.passbar.pass i{background:var(--sd-correct-border)}
.passbar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--sd-pass-line)}
.passlegend{display:flex;justify-content:space-between;font-size:var(--sd-text-xs);color:var(--sd-text-muted)}
.status{font-weight:700;margin:var(--sd-space-3) 0 var(--sd-space-1)}
.status.ok{color:var(--sd-correct-text)}.status.no{color:var(--sd-wrong-text)}

/* tables: numeric columns right-aligned with tabular figures */
table.results{width:100%;border-collapse:collapse;margin:var(--sd-space-3) 0}
table.results td,table.results th{border-bottom:var(--sd-hairline) solid var(--sd-border);padding:var(--sd-space-2);text-align:left;font-size:var(--sd-text-sm)}
table.results th{color:var(--sd-text-muted);font-weight:600}
table.results .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.good td.n{color:var(--sd-correct-text)}tr.bad td.n{color:var(--sd-wrong-text)}
tr.bad td:first-child:after{content:" - weak";color:var(--sd-wrong-text);font-size:var(--sd-text-xs)}

/* paywall card */
.paywall{border:2px solid var(--sd-text)}
.paywall h2{margin-top:0}
.paywall .hook{background:var(--sd-surface-well);border-radius:var(--sd-radius-control);padding:var(--sd-space-3);margin:0 0 var(--sd-space-3)}
.price{font:800 36px/1 var(--sd-font-ui);font-variant-numeric:tabular-nums;margin:var(--sd-space-2) 0}
.price small{font:600 var(--sd-text-sm) var(--sd-font-ui);color:var(--sd-text-muted)}
.anchor{font-size:var(--sd-text-sm);color:var(--sd-text-muted);margin:0 0 var(--sd-space-2)}
.guarantee{display:flex;gap:var(--sd-space-3);align-items:flex-start;border-top:var(--sd-hairline) solid var(--sd-border);margin-top:var(--sd-space-3);padding-top:var(--sd-space-3);font-size:var(--sd-text-sm)}
.guarantee b{display:block}
.seal{flex:none;width:36px;height:36px;border-radius:var(--sd-radius-round);border:2px solid var(--sd-correct-border);color:var(--sd-correct-text);display:flex;align-items:center;justify-content:center;font-weight:800}

/* trainer */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sd-space-2);margin:var(--sd-space-3) 0}
.stats div{background:var(--sd-surface-card);border:var(--sd-hairline) solid var(--sd-border);border-radius:var(--sd-radius-control);padding:var(--sd-space-2);text-align:center}
.stats b{display:block;font:800 var(--sd-text-lg) var(--sd-font-ui);font-variant-numeric:tabular-nums}.stats span{font-size:var(--sd-text-xs);color:var(--sd-text-muted)}
.tile{display:block;width:100%;min-height:var(--sd-tap);text-align:left;background:var(--sd-surface-card);border:var(--sd-hairline) solid var(--sd-border);border-radius:var(--sd-radius-surface);padding:var(--sd-space-4);margin:var(--sd-space-2) 0;cursor:pointer;font:var(--sd-text-md) var(--sd-font-ui);color:var(--sd-text)}
.tile:hover{background:var(--sd-surface-well)}
.tile b{display:block;font-size:var(--sd-text-md)}.tile span{color:var(--sd-text-muted);font-size:var(--sd-text-sm)}
.mockbar{position:sticky;top:0;background:var(--sd-surface-card);border:var(--sd-hairline) solid var(--sd-border);border-radius:var(--sd-radius-control);padding:var(--sd-space-2) var(--sd-space-3);display:flex;gap:var(--sd-space-2);align-items:center;justify-content:space-between;z-index:var(--sd-z-sticky);font-size:var(--sd-text-sm)}
.clock{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mockbar .btn{min-height:44px;padding:var(--sd-space-2) var(--sd-space-3);font-size:var(--sd-text-sm);margin:0}
.card > h2:first-child,.card > .sr-only:first-child + *,.card > h3:first-child{margin-top:0}
.mocknav{display:flex;justify-content:space-between;gap:var(--sd-space-2)}
.timer{float:right;font-weight:800;font-family:var(--sd-font-machine);color:var(--sd-wrong-text)}
.thumb{max-width:260px;display:block;margin:var(--sd-space-2) 0}
details{border-top:var(--sd-hairline) solid var(--sd-border);padding:var(--sd-space-2) 0}
summary{cursor:pointer;min-height:32px}

/* content pages */
article.guide p,article.guide li{max-width:68ch}article.guide figure{margin:var(--sd-space-4) 0}
.cta-box{background:var(--sd-surface-inverse);color:var(--sd-on-inverse);border-radius:var(--sd-radius-surface);padding:var(--sd-space-5);margin:var(--sd-space-6) 0}
.cta-box h3{margin-top:0}.cta-box p{color:var(--sd-on-inverse-muted)}
.cta-box a.btn{background:var(--sd-surface-card);color:var(--sd-text)}
.faq dt{font-weight:700;margin-top:var(--sd-space-3)}.faq dd{margin:var(--sd-space-1) 0 0}
footer{border-top:var(--sd-hairline) solid var(--sd-border);margin-top:40px;padding:var(--sd-space-5) 0 40px;font-size:var(--sd-text-sm);color:var(--sd-text-muted)}
footer a{color:var(--sd-text-muted);margin-right:var(--sd-space-3);display:inline-block;padding:var(--sd-space-1) 0}
.src{font-size:var(--sd-text-sm);background:var(--sd-surface-card);border-left:4px solid var(--sd-action);padding:var(--sd-space-2) var(--sd-space-3)}
.timeline li{margin:6px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* PR #1 additions (not-affiliated line, daily drill, question ID), on design tokens */
.not-affiliated{font-size:var(--sd-text-xs);color:var(--sd-text-muted);margin:var(--sd-space-2) 0 0}
.static-choices{padding-left:0;list-style:none}
.static-choices li{padding:var(--sd-space-3);border:var(--sd-hairline) solid var(--sd-border);border-radius:var(--sd-radius-control);margin:var(--sd-space-2) 0;background:var(--sd-surface-card)}
.daily-date{margin-top:0;color:var(--sd-text-muted);font-size:var(--sd-text-sm)}
.daily-archive li{margin:var(--sd-space-2) 0}
.daily-nav{display:flex;justify-content:space-between}
.qid{color:var(--sd-text-muted)}
nav.main a{white-space:nowrap}
@media (max-width:480px){nav.main{display:flex;flex-wrap:wrap;gap:var(--sd-space-1) var(--sd-space-3)}nav.main a{margin-left:0}}