/* ============================================================
   BonuslyBench site shell — shared by every page.
   Tokens copied from the Bonusly Bench design system (tokens/).
   ============================================================ */
:root {
  --purple:        #FF4F23;   --purple-dark: #C93A15;  --purple-light: #FFA07C;
  --teal:          #97F6F2;   --teal-dark:   #3E8F89;  --teal-light:  #D6FDFB;
  --dark:          #242726;   --green:       #2DFF4D;
  --amber:         #FFA07C;   --red:         #FF4F23;
  --white:#FFFFFF; --gray-25:#FAF8EA; --gray-50:#FFFFFF; --gray-75:#F3EAD3;
  --gray-100:#E0D2AE; --gray-150:#BBB9AD; --gray-300:#7B7A71; --gray-700:#6E6D60;
  --gray-800:#3C3B34; --gray-900:#242726; --black:#242726;
  --bg-page:#FAF8EA; --bg-surface:#FFFFFF; --bg-muted:#F3EAD3;
  --fg-strong:var(--black); --fg-default:var(--gray-900); --fg-subtle:var(--gray-700);
  --fg-inverse:#FAF8EA;
  --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:#00574B; --primary-surface:#E8F5F2;
  --secondary-bg:var(--teal); --secondary-bg-hover:var(--teal-dark); --secondary-fg-strong:#B26A35; --secondary-surface:#FBE9D8;
  --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:#00574B; --status-pass-surface:#E4F4F1;
  --status-watch-fg:#B26A35; --status-watch-surface:#FBE9D8;
  --status-fail-fg:#C14E33; --status-fail-surface:#F9E3DA;
  --on-dark-fg-subtle:#97F6F2; --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:#FAF8EA; border-bottom:1px solid var(--border-muted); }
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); }

/* ---------- 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; flex:1 1 0; }
.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); }

/* ---------- mobile + scroll utilities (appended 2026-09-25; existing rules untouched) ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chip-row{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .display-xl{font-size:36px}
  .display-lg{font-size:32px}
  .display-md{font-size:26px}
  .lede{font-size:16px}
  .wrap{padding:0 14px}
  .kpi{flex:1 1 100%;min-width:0;box-sizing:border-box}
  nav.bb-nav .links{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:14px;padding-bottom:4px}
  nav.bb-nav .links a{white-space:nowrap;flex-shrink:0}
  nav.bb-nav .links{scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)}
  nav.bb-nav .links::-webkit-scrollbar{display:none}
  .tabmenu{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
  .tabmenu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabmenu::-webkit-scrollbar{display:none}
  .chip-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.board{min-width:720px;font-size:12.5px}
  table.spec{min-width:420px}
  .tbl-scroll{margin:0 -14px;padding:0 14px}
}