@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Cool graphite on paper white, with one electric accent. No warm neutrals, no serif. */
:root{
  --ground:#F3F4F3; --card:#FFFFFF; --tile:#ECEEED;
  --ink:#111413; --ink2:#474C4A; --muted:#6A706E;
  --hair:#DCDFDE; --track:#E5E8E7; --band:#EEF6D6;
  --m:#1A1F1D; --d:#77807C; --m-line:#111413;
  --good:#167C4A; --good-text:#0E5231; --warn:#8A5A00; --crit:#D42A1F;
  --m-soft:#EEF9CF; --good-soft:#E4F1E9; --warn-soft:#F6EDDA; --crit-soft:#FBE4E1;
  --pop:#C8F026; --on-pop:#111413;
  --on-accent:#FFFFFF; --btn:#C8F026; --on-btn:#111413;
  /* Was its own one-off, Space Grotesk — downloaded on every page that loads app.css, but every page
     that also loads theme-b.css (report, index, compare, method, records) overrides both tokens
     anyway (html[data-v="b"]:root beats plain :root), so the download was dead weight everywhere
     except stats.html. System fonts there instead of a second, unrelated webfont. */
  --display:-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E100F; --card:#161917; --tile:#1D211F;
    --ink:#F2F4F2; --ink2:#C2C7C4; --muted:#8A908D;
    --hair:#262A28; --track:#212523; --band:#232C13;
    --m:#F2F4F2; --d:#7C837F; --m-line:#F2F4F2;
    --good:#4FC585; --good-text:#7FDBA6; --warn:#DFAE4B; --crit:#FF6250;
    --m-soft:#232C13; --good-soft:#12241A; --warn-soft:#2A2010; --crit-soft:#2C1412;
    --pop:#C8F026; --on-pop:#111413;
    --on-accent:#0E100F; --btn:#C8F026; --on-btn:#111413;
  }
}
:root[data-theme="dark"]{
  --ground:#0E100F; --card:#161917; --tile:#1D211F;
  --ink:#F2F4F2; --ink2:#C2C7C4; --muted:#8A908D;
  --hair:#262A28; --track:#212523; --band:#232C13;
  --m:#F2F4F2; --d:#7C837F; --m-line:#F2F4F2;
  --good:#4FC585; --good-text:#7FDBA6; --warn:#DFAE4B; --crit:#FF6250;
  --m-soft:#232C13; --good-soft:#12241A; --warn-soft:#2A2010; --crit-soft:#2C1412;
  --pop:#C8F026; --on-pop:#111413;
  --on-accent:#0E100F; --btn:#C8F026; --on-btn:#111413;
}

*{box-sizing:border-box}
html{overflow-x:clip}  /* nothing pushes the page sideways; “clip”, not “hidden”, or sticky menus break */
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Inter",-apple-system,"Helvetica Neue",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--m);outline-offset:2px}
h1,h2,.display{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06}
a{color:var(--m)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.appbar{display:flex;align-items:center;gap:12px;max-width:1120px;margin:0 auto;padding:16px 18px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--pop);display:flex;align-items:center;justify-content:center}
.brand .mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand b{font-weight:600;font-size:16px;letter-spacing:-.015em;white-space:nowrap}
.appbar .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.appbar .right .ghost{white-space:nowrap}  /* a two-line button in the header reads as broken */

.card{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:22px 24px}
.go{border:0;background:var(--btn);color:var(--on-btn);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.go:hover{filter:brightness(1.07)}
.go[aria-disabled="true"],.go:disabled{background:var(--track);color:var(--muted);cursor:not-allowed;filter:none}
.ghost{border:1px solid var(--hair);background:var(--card);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block}
.ghost:hover{background:var(--tile)}
/* One text button, used everywhere: the report's “Why A?”, the home page's example link, Remove on the
   compare page. Each is at least 40px tall, which is what a thumb needs. */
.linkish,button.why,.exlink,.rm{border:0;background:none;color:var(--ink2);font-family:var(--display);font-size:13.5px;font-weight:700;cursor:pointer;
  padding:10px 6px;min-height:40px;text-decoration:underline;text-underline-offset:3px;text-align:left}
.linkish:hover,button.why:hover,.exlink:hover,.rm:hover{color:var(--ink)}
button.why,.exlink{color:var(--ink)}
/* Pill buttons are flex boxes, so their text sits in the middle whatever the height. */
.go,.ghost{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
.chip{border:1.5px solid transparent;background:var(--tile);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--m-line)}
.chip[aria-pressed="true"]{background:var(--m-soft);border-color:var(--ink)}
.chip svg{width:13px;height:13px;fill:none;stroke:var(--m);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.inp{border:1.5px solid var(--hair);background:var(--ground);border-radius:12px;padding:9px 12px;font-size:14.5px;font-weight:500;width:100%}
.inp:focus{border-color:var(--m);outline:none}

#tip{position:absolute;z-index:40;max-width:300px;background:var(--ink);color:var(--card);font-size:13px;line-height:1.45;padding:9px 12px;border-radius:10px;pointer-events:none}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }

/* ---------- restraint: soft corners, hairlines, mono only for small labels ---------- */
.card{border:1px solid var(--hair);box-shadow:none;border-radius:16px}
.go{border-radius:999px;font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:14.5px;padding:11px 20px}
.go:hover{filter:none;background:var(--ink);color:var(--pop)}
.ghost{border-radius:999px;font-weight:600}
.chip{border:1px solid var(--hair);background:var(--card);font-weight:500}
.chip[aria-pressed="true"]{background:var(--m-soft);border-color:var(--ink)}
.inp{border:1px solid var(--hair);background:var(--card);border-radius:12px}
.inp:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--m-soft)}
.kicker,.sub,.step,.eyebrow,.bstate,.fgroup,.pill{font-family:var(--display);font-weight:600}
.ringbox .num b,.grade b,.statline b,.bigstat b,.kpi b,.tile b,.crow b,.big2,.col b,.hbar em,.vb em{font-variant-numeric:tabular-nums}

/* No sideways scrolling on phones, ever: if one element is too wide, the page must not drag with it. */
@media (max-width:900px){ html,body{overflow-x:hidden;max-width:100%} }