/* ============================================================
   BonuslyBench site shell — shared by every page.
   Tokens copied from the Bonusly Bench design system (tokens/).
   ============================================================ */
:root {
  --purple:        #5B71E4;   --purple-dark: #4459C8;  --purple-light: #9D9DED;
  --teal:          #279F95;   --teal-dark:   #1E7F77;  --teal-light:  #A8F5EE;
  --dark:          #081336;   --green:       #22B950;
  --amber:         #F59E0B;   --red:         #DC2626;
  --white:#FFFFFF; --gray-25:#F4F5F7; --gray-50:#F6F6F9; --gray-75:#EAEBF1;
  --gray-100:#DBDFE6; --gray-150:#B3BDC3; --gray-300:#8B919C; --gray-700:#58616A;
  --gray-800:#3C3F49; --gray-900:#14151A; --black:#0F1011;
  --bg-page:var(--gray-25); --bg-surface:var(--white); --bg-muted:var(--gray-50);
  --fg-strong:var(--black); --fg-default:var(--gray-900); --fg-subtle:var(--gray-700);
  --fg-inverse:var(--white);
  --border-default:var(--gray-100); --border-muted:var(--gray-75); --border-strong:var(--gray-150);
  --primary-bg:var(--purple); --primary-bg-hover:var(--purple-dark);
  --primary-fg-strong:#4459C8; --primary-surface:#EEF0FC;
  --secondary-bg:var(--teal); --secondary-bg-hover:var(--teal-dark); --secondary-fg-strong:#1B7A72; --secondary-surface:#E7F6F4;
  --rank-1:var(--purple); --rank-2:var(--teal); --rank-3:var(--purple-light); --rank-4:var(--teal-light); --rank-rest:var(--gray-100);
  --status-pass-fg:#12823E; --status-pass-surface:#E2F8EA;
  --status-watch-fg:#9A6400; --status-watch-surface:#FEF3DC;
  --status-fail-fg:#B3211D; --status-fail-surface:#FBE5E3;
  --on-dark-fg-subtle:var(--teal-light); --on-dark-border:rgba(255,255,255,.18); --on-dark-surface:rgba(255,255,255,.06);
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --tracking-display:-.020em; --tracking-tight:-.013em; --tracking-eyebrow:.080em;
  --radius-chip:4px; --radius-btn:8px; --radius-card:12px; --radius-panel:16px;
  --shadow-sm:0 1px 2px rgba(8,19,54,.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-ui); background:var(--bg-page); color:var(--fg-default); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--primary-fg-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- sticky nav (on every page) ---------- */
nav.bb-nav { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.95); border-bottom:1px solid var(--border-default); }
nav.bb-nav .inner { max-width:1200px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
nav.bb-nav .brand { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--fg-strong); }
nav.bb-nav .brand:hover { text-decoration:none; }
nav.bb-nav .brand b { font-weight:700; }
nav.bb-nav .links { display:flex; gap:18px; flex-wrap:wrap; }
nav.bb-nav .links a { font-size:13px; font-weight:500; color:var(--fg-subtle); }
nav.bb-nav .links a:hover { color:var(--fg-strong); text-decoration:none; }
nav.bb-nav .links a.here { color:var(--primary-fg-strong); }
nav.bb-nav .run-pill { margin-left:auto; font-size:12px; font-weight:500; color:var(--fg-subtle); border:1px solid var(--border-default); border-radius:999px; padding:4px 12px; background:var(--bg-surface); font-variant-numeric:tabular-nums; }

/* ---------- type ---------- */
.eyebrow { font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--fg-subtle); }
.display-xl,.display-lg,.display-md,.display-sm,.display-xs { font-family:var(--font-display); color:var(--fg-strong); letter-spacing:var(--tracking-display); text-wrap:pretty; margin:0; }
.display-xl { font-size:56px; line-height:1.04; font-weight:800; }
.display-lg { font-size:44px; line-height:1.08; font-weight:800; }
.display-md { font-size:34px; line-height:1.14; font-weight:700; }
.display-sm { font-size:26px; line-height:1.2;  font-weight:700; letter-spacing:-.01em; }
.display-xs { font-size:20px; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.num { font-family:var(--font-ui); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.num-display { font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; color:var(--fg-strong); letter-spacing:-.01em; }
.model-id { font-family:var(--font-ui); font-weight:500; font-variant-numeric:tabular-nums; font-size:14px; color:var(--fg-default); }
.lede { max-width:66ch; font-size:17px; color:var(--fg-subtle); }

/* ---------- cards, sections, KPIs ---------- */
.bb-card { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-card); padding:20px; }
section.page-sec { margin-top:56px; }
.sec-note { font-size:13px; color:var(--fg-subtle); max-width:72ch; margin:6px 0 18px; }
.kpi { border-top:2px solid var(--border-strong); padding-top:10px; min-width:150px; }
.kpi .num-display { font-size:30px; }
.grid { display:grid; gap:24px; }
.two { grid-template-columns:1fr 1fr; }
.three { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .two,.three{grid-template-columns:1fr} }
table.spec { width:100%; border-collapse:collapse; background:var(--bg-surface); }
table.spec th, table.spec td { font-size:13.5px; padding:10px 12px; border-bottom:1px solid var(--border-muted); text-align:left; }
table.spec th { font-family:var(--font-ui); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); font-weight:600; }
tr:hover td { background:var(--bg-muted); }
.tbl-footnote { font-size:12px; color:var(--fg-subtle); margin-top:8px; }

/* ---------- pills ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px 3px 8px; border:1px solid transparent; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.pass { color:var(--status-pass-fg); background:var(--status-pass-surface); }
.pill.watch { color:var(--status-watch-fg); background:var(--status-watch-surface); }
.pill.fail { color:var(--status-fail-fg); background:var(--status-fail-surface); }
.pill.ref { color:var(--primary-fg-strong); background:var(--primary-surface); }
.pill.chal { color:var(--secondary-fg-strong); background:var(--secondary-surface); }
.pill.neutral { color:var(--fg-subtle); background:var(--bg-muted); border-color:var(--border-muted); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:14px; font-weight:600; border-radius:var(--radius-btn); padding:9px 16px; border:1px solid transparent; cursor:pointer; transition:background .12s; }
.btn.primary { background:var(--primary-bg); color:#fff; }
.btn.primary:hover { background:var(--primary-bg-hover); text-decoration:none; }
.btn.ghost { background:transparent; color:var(--fg-default); border-color:var(--border-default); }
.btn.ghost:hover { background:var(--bg-muted); text-decoration:none; }

/* ---------- attribution + footer ---------- */
footer.bb-foot { margin-top:64px; padding-top:20px; border-top:1px solid var(--border-default); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer.bb-foot p { font-size:12px; color:var(--fg-subtle); margin:0; }
.attrib { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-subtle); border:1px solid var(--border-default); border-radius:999px; padding:5px 12px 5px 8px; background:var(--bg-surface); }

/* ---------- rank bars (leaderboard accents) ---------- */
.rank-bar { display:inline-flex; gap:3px; align-items:flex-end; height:14px; }
.rank-bar span { width:3px; border-radius:1px; display:block; }

/* ---------- delta glyphs ---------- */
.delta { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.delta.up { color:var(--status-pass-fg); }
.delta.down { color:var(--status-fail-fg); }
.delta.same { color:var(--fg-subtle); }

/* ---------- dark report block (one per surface) ---------- */
.dark-block { background:var(--dark); color:#fff; border-radius:var(--radius-panel); padding:36px 32px; }
.dark-block .eyebrow { color:var(--on-dark-fg-subtle); }
.dark-block .display-md { color:#fff; }
.dark-block p { color:rgba(255,255,255,.78); }