/* ============================================================================
   Bro Evals, site refresh layer.
   Sits on top of bro-evals.css (which keeps the JS class vocabulary) and
   replaces the ice-blue "Bro" chrome with a quiet, neutral, DeepSWE-style UI.

   Design rules
   ------------
   1. The chrome is monochrome. Colour is reserved for data (good/mid/low
      score bands) and for one brand accent. Nothing else is tinted.
   2. Dark mode is a re-tuned ramp, not a hue swap: same hues, lightness
      pushed to the opposite end, chroma raised slightly so colours stay
      vivid instead of going muddy.
   3. Every text/background pair below clears WCAG AA (4.5:1); UI graphics
      clear 3:1. These were solved numerically, not eyeballed:

        pair                  light    dark
        ink on surface        18.53    15.53
        muted on surface       6.97     7.74
        faint on surface       4.53     5.80
        accent on surface      5.57     8.12
        good on surface        5.32     7.48
        mid  on surface        5.92     8.48
        low  on surface        5.78     6.85
        ink on row hover      15.83    13.05

      Contrast is checked against the surface a token actually renders on —
      including the tinted filter wells and hover rows, not just white.

   The old dark palette set --blue-deep to #e0e0e0 and --blue to #c9c9c9: the
   brand accent went completely colourless. Here the accent keeps hue 244 and
   is re-solved to 8.1:1 on dark surfaces.
   ========================================================================= */

/* --------------------------------------------------------------------------
   0. Radius policy
   bro-evals.css zeroes every radius. Grant it back selectively so the shape
   language stays consistent no matter which base file loads.
   -------------------------------------------------------------------------- */
html body,html body *,html body *::before,html body *::after{border-radius:0!important}
html body .card,html body .modal,html body .more-analysis,html body .table-shell,
html body .analysis-card,html body .time-scrub,html body .chart-popover,html body .toast{border-radius:12px!important}
html body .btn,html body .filter-select,html body .filter-search,html body .filter-pill,
html body .theme-toggle,html body .ts-btn,html body .nav-item,html body .cat-drop-menu,
html body .score-notes summary,html body .chart-filters summary,html body .advanced-filters summary,
html body .cat-drop-btn,html body .compare-controls select,html body .compare-selects select,
html body .card-controls select,html body .field input,html body .field select,
html body .task-input input,html body .provider-item .country-row select,
html body .provider-item .country-row input,html body .save-menu,html body .row-effort-copy{border-radius:8px!important}
html body .brand-mark,html body .brand-mark img,html body .logo-badge,html body .chip,
html body .est-tag,html body .cat-drop-menu .cat-reset,html body .hl-chip,
html body .ts-bubble,html body .asof-badge,html body .source-status,html body kbd{border-radius:6px!important}
html body .score-line,html body .score-line>span,html body .th-band{border-radius:99px!important}
html body .btn.icon,html body .provider-dot,html body .source-dot{border-radius:50%!important}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  /* rhythm */
  --max:1440px;
  --pad-x:clamp(18px,3.6vw,44px);
  --gap-card:20px;
  --pad-card:28px;
  /* chart card interior is inset by one amount so every control row is exactly
     as wide as the plot it controls */
  --chart-inset:14px;

  /* surfaces */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f4f6f8;
  --hover:#e2eff8;
  --line:#d9e0e7;
  --line-soft:#e7ecf1;

  /* text */
  --ink:#0d141b;
  --muted:#4e5b66;
  --faint:#6b7883;

  /* brand */
  --blue:#5ea3cb;
  --blue-deep:#2f6d99;
  --blue-soft:#dceef9;
  --accent:var(--blue-deep);
  --ring:#3d7fa8;

  /* actions */
  --primary:#0d141b;
  --on-primary:#ffffff;
  --on-accent:#ffffff;

  /* data */
  --good:#1f7a4d;  --good-bg:#e8f4ee;
  --mid:#8a5a06;   --mid-bg:#fbf1dc;
  --low:#b1402a;   --low-bg:#fbece7;
  --open:#2f6d99;  --open-bg:#e0eef7;

  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --tape:repeating-linear-gradient(45deg,var(--ink) 0,var(--ink) 7px,var(--blue) 7px,var(--blue) 14px);
  --shadow-1:0 1px 2px rgba(13,20,27,.05);
  --shadow-2:0 12px 32px rgba(13,20,27,.10);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{overflow-x:clip}
::selection{background:var(--blue-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ring)!important;outline-offset:2px}

h1,h2,h3{letter-spacing:-.028em;line-height:1.14;font-weight:600}
a{color:var(--blue-deep)}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none}
.topbar-inner{max-width:var(--max);padding:12px var(--pad-x);gap:20px}
.brand{font-size:17px;letter-spacing:-.035em;font-weight:600}
.brand-mark,.brand-mark img{width:28px;height:28px}
.brand-mark img{object-fit:contain}

.tabs{margin:0 auto 0 20px;background:transparent;border:0;padding:0;gap:2px}
.nav-item{font-size:13px;color:var(--muted);padding:8px 12px;font-weight:500;letter-spacing:-.01em}
.nav-item:hover{background:var(--surface2);color:var(--ink)}
.nav-item.active{background:var(--surface2);color:var(--ink);font-weight:600}

.top-actions{gap:8px}
.top-actions .shortcuts-hint{display:none}

.btn{height:38px;min-height:38px;padding:0 15px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:13px;font-weight:500;letter-spacing:-.01em}
.btn:hover{border-color:var(--muted);background:var(--surface2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{opacity:.88;background:var(--primary)}
.btn.accent{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--on-accent)}
.btn.icon{width:38px}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;
  padding:0 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.theme-toggle:hover{border-color:var(--muted);background:var(--surface2)}

.wrap{max-width:var(--max);padding:44px var(--pad-x) 88px}
.page{padding-bottom:0}
.rail-index{display:none}

/* --------------------------------------------------------------------------
   4. Hero
   Flat and quiet: no gradient, no grid, no glow. The numbers carry it.
   -------------------------------------------------------------------------- */
.hero{position:static;overflow:visible;border:0;background:none;padding:4px 0 40px;margin:0}
.hero::before,.hero::after{display:none}
.eyebrow{margin:0 0 14px;color:var(--blue-deep);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.eyebrow::before,.eyebrow::after,.eyebrow i{display:none}
.hero h1{font-size:clamp(2.05rem,3.4vw,3rem);font-weight:600;letter-spacing:-.035em;
  line-height:1.08;margin:0 0 14px;max-width:20ch}
.hero p{color:var(--muted);font-size:16px;line-height:1.6;letter-spacing:-.011em;max-width:62ch;margin:0}

.stats{margin-top:34px;padding:22px 0 0;border-top:1px solid var(--line);gap:0;display:flex;flex-wrap:wrap}
.stat{flex:1;min-width:150px;padding:2px 24px 2px 0;margin-right:24px;border-right:1px solid var(--line-soft)}
.stat:last-child{border:0;margin-right:0;padding-right:0}
.stat .k{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;font-weight:600}
.stat .v{font-size:clamp(1.65rem,2.3vw,2.15rem);font-weight:600;letter-spacing:-.04em;margin-top:7px;line-height:1.1}
.stat .s{color:var(--muted);font-size:12.5px;margin-top:5px}
.stat .v.pinned{color:var(--blue-deep)}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);margin:0 0 var(--gap-card);
  overflow:hidden;box-shadow:var(--shadow-1)}
.card-head,.section-head{padding:24px var(--pad-card) 16px;border-bottom:0;align-items:flex-end}
.card-head h2,.section-head h2{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.028em;line-height:1.2}
.card-head p,.section-head p{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:6px;max-width:64ch}
.card-heading{padding:18px var(--chart-inset) 14px;border-bottom:1px solid var(--line)}
.card-heading h3{font-size:15px;font-weight:600;letter-spacing:-.02em}
.chart-type-toggle{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.chart-type-toggle .btn{height:36px;padding:0 13px;font-size:12.5px}
.head-actions{gap:8px}
.legend{gap:12px;font-size:11.5px}

/* fine print lives behind a disclosure instead of permanently in the flow */
.score-notes{border-top:1px solid var(--line);background:var(--surface)}
.score-notes summary{cursor:pointer;display:block;margin:0;padding:13px var(--pad-card);
  font-size:12.5px;font-weight:600;color:var(--muted);list-style:none}
.score-notes summary::-webkit-details-marker{display:none}
.score-notes summary::after{content:' +';color:var(--blue-deep);font-weight:700}
.score-notes[open] summary::after{content:' −'}
.score-notes summary:hover{color:var(--ink)}
.grid-note,.score-notes .grid-note{background:var(--surface2);border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.7;padding:14px var(--pad-card)}
.grid-note strong{color:var(--ink);font-weight:600}

.more-analysis{border:1px solid var(--line);background:var(--surface);margin-top:var(--gap-card);
  border-radius:12px!important;overflow:hidden}
.more-analysis>summary{cursor:pointer;list-style:none;padding:20px var(--pad-card);font-size:15px;font-weight:600}
.more-analysis>summary::-webkit-details-marker{display:none}
.more-analysis>summary::after{content:'+';float:right;color:var(--blue-deep);font-size:20px;line-height:1}
.more-analysis[open]>summary::after{content:'−'}
.more-analysis>summary span{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--muted)}
.more-analysis .card{border:0;border-top:1px solid var(--line);border-radius:0!important;margin:0;box-shadow:none}

/* --------------------------------------------------------------------------
   6. Controls & filters
   The full control set is dense by nature, so the chart card's "Model
   filters" disclosure and site-theme.js's "More filters" nest the specialists.
   -------------------------------------------------------------------------- */
.card-controls{background:var(--surface2);border-bottom:1px solid var(--line);
  gap:0;padding:4px var(--chart-inset) 14px;display:flex;flex-wrap:wrap}
/* three deliberate rows, split by hairlines */
.ctrl-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;flex-basis:100%;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.ctrl-row.ctrl-config{border-top:0}
.ctrl-row.ctrl-more{padding-bottom:0}
.ctrl-row.ctrl-toggles{align-items:center}
.filter-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-controls label{letter-spacing:.02em;color:var(--muted);font-size:11px;font-weight:600;gap:6px}
.card-controls select{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  min-height:36px;padding:8px 12px;font-size:13px;max-width:230px}
.card-controls label.check{font-size:12.5px;color:var(--ink);font-weight:500;
  letter-spacing:0;flex-direction:row;align-items:center;gap:8px;min-height:36px}
.card-controls input[type=checkbox]{accent-color:var(--blue-deep);width:15px;height:15px}

/* "Show": preset count plus a free numeric field */
.show-control{display:flex;flex-direction:column;gap:6px}
.show-pair{display:inline-flex;align-items:center;gap:6px}
.show-pair select{max-width:110px}
.show-custom{width:78px;min-height:36px;padding:8px 10px;font-size:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-variant-numeric:tabular-nums}
.show-custom::-webkit-outer-spin-button,.show-custom::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.show-custom{-moz-appearance:textfield}

.bench-controls{background:var(--surface2);border-top:0;gap:10px;padding:14px var(--pad-card);flex-direction:column}
.filter-group{gap:8px}
.filter-search,.filter-select,.filter-pill,.ts-btn,.compare-controls select,.compare-selects select{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);min-height:36px;
  font-size:13px;padding:8px 13px}
.filter-search{width:200px}
.filter-search:focus,.filter-select:focus,select:focus,input:focus{
  outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 18%,transparent)}
.filter-pill{color:var(--muted);font-weight:500}
.filter-pill:hover{border-color:var(--muted);color:var(--ink);background:var(--surface)}
.filter-pill.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.filter-label{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.advanced-filters{width:100%;margin-top:2px}
.advanced-filters summary{display:inline-block;cursor:pointer;color:var(--blue-deep);font-size:12.5px;
  font-weight:600;padding:6px 0;list-style:none}
.advanced-filters summary::-webkit-details-marker{display:none}
.advanced-filters summary::after{content:' ▾'}
.advanced-filters[open] summary::after{content:' ▴'}
.advanced-filters>.filter-group{margin:10px 0 0}

/* row 3 is a single "More filters" disclosure holding the rest */
.chart-filters{flex-basis:100%;min-width:0;border-top:0;padding-top:0;margin-top:0}
.chart-filters summary{width:max-content;max-width:100%;cursor:pointer;list-style:none;
  border:1px solid var(--line);background:var(--surface);padding:8px 13px;color:var(--muted);
  font-size:12.5px;font-weight:600}
.chart-filters summary:hover{color:var(--ink);border-color:var(--muted)}
.chart-filters summary::-webkit-details-marker{display:none}
.chart-filters summary::after{content:' ▾';color:var(--faint)}
.chart-filters[open] summary::after{content:' ▴'}
/* the remaining specialists fit on one line alongside the chart */
.chart-filters .bench-controls{margin:14px 0 0;padding:0;border:0;background:transparent;
  flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 10px}
.chart-filters .bench-controls>.filter-group{display:contents}

.cat-drop-menu{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);padding:6px}
.cat-drop-menu label{border-radius:8px!important;font-size:12.5px}
.cat-drop-menu label:hover{background:var(--blue-soft)}
.cat-drop-menu input[type=checkbox]{accent-color:var(--blue-deep)}
.cat-drop-menu .cat-reset{background:var(--surface2);color:var(--muted);border-radius:8px!important}

/* --------------------------------------------------------------------------
   7. Leaderboard
   -------------------------------------------------------------------------- */
.table-shell{background:var(--surface);border-top:1px solid var(--line);overflow:auto}
.lb-head{background:var(--surface2);color:var(--muted);border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.lb-head>div{padding:11px 10px;border-right:1px solid var(--line)}
.lb-head>div.sortable:hover{color:var(--ink)}
.lb-head>div.sortable.sorted{color:var(--ink)}
.lb-row{background:var(--surface);border-bottom:1px solid var(--line-soft);min-height:58px;
  transition:background .12s}
.lb-row:hover{background:var(--hover)}
.lb-row>div{padding:9px 10px;border-right:1px solid var(--line-soft)}
.lb-row>div:last-child,.lb-head>div:last-child{border-right:0}
.rank{color:var(--faint)}
.model-name{font-size:14px;letter-spacing:-.02em;font-weight:600}
.model-meta{color:var(--muted)}
.logo-badge{background:var(--surface2);border:1px solid var(--line-soft)}
.chip{background:var(--surface);color:var(--muted);border:1px solid var(--line);font-weight:600}
.chip.open{color:var(--open);background:var(--open-bg);border-color:transparent}
.chip.prelim{color:var(--blue-deep);background:var(--blue-soft);border-color:transparent}
.chip.estimated{color:var(--muted);background:var(--surface2);border-style:dashed;border-color:var(--line)}
.chip.derived{color:var(--blue-deep);background:var(--blue-soft);border-style:dashed;border-color:transparent}
.est-tag{background:var(--blue-soft);color:var(--blue-deep);letter-spacing:.05em}
.score-main{font-size:19px;letter-spacing:-.035em}
.score-line{background:var(--surface2);height:6px}
.score-line>span{background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.score-line>span.is-estimate{background-image:var(--tape)!important}
.cat.good{color:var(--good)}.cat.mid{color:var(--mid)}.cat.low{color:var(--low)}
.cat.missing{color:var(--faint);opacity:.5}
.econ,.coverage,.api-cell{color:var(--muted)}
.econ small,.coverage small{color:var(--faint)}
.row-effort-copy{border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.row-effort-copy:hover{color:var(--blue-deep);border-color:var(--blue-deep)}
.lab-grid{border-bottom:1px solid var(--line-soft);min-height:50px}
.lab-score{letter-spacing:-.03em}

/* --------------------------------------------------------------------------
   8. Charts
   charts.js hardcodes SVG chrome colours; remap them per theme so a chart
   never looks pasted in from the other mode. Text painted #fff sits inside a
   filled bar and is deliberately left alone.
   -------------------------------------------------------------------------- */
.analysis-card{background:var(--surface)}
/* charts are sized by their viewBox aspect ratio; give the plot area the full
   card width so they read large rather than floating in padding */
.card-controls+.analysis-plot,.analysis-plot{padding:10px var(--chart-inset) 0}
.analysis-plot svg{min-width:820px}
.analysis-summary{background:var(--surface2);border-top:1px solid var(--line);grid-template-columns:1.4fr repeat(3,1fr)}
.analysis-summary>div{border-right:1px solid var(--line)}
.analysis-summary>div:last-child{border-right:0}
.analysis-summary span{color:var(--muted);letter-spacing:.06em}
.analysis-summary strong{letter-spacing:-.03em}
.chart-footnote{background:var(--surface);border-top:1px solid var(--line);color:var(--muted);
  font-size:12px;line-height:1.7;padding:14px var(--chart-inset) 20px}
.analysis-method{background:var(--surface);border-top:1px solid var(--line);color:var(--muted);
  font-size:12.5px;line-height:1.75;padding:6px var(--chart-inset) 16px}
.analysis-method summary{cursor:pointer;color:var(--ink);font-weight:600;padding:10px 0}
.bar-model-scope>span{color:var(--muted)}

/* light-mode data series */
.analysis-plot svg [fill="#2563EB"]{fill:var(--blue-deep)}
.analysis-plot svg [fill="#16A34A"]{fill:var(--good)}
.analysis-plot svg text{font-family:var(--font)!important}
.analysis-plot svg text[fill="#5c636d"],.analysis-plot svg text[fill="#555d67"]{fill:var(--muted)}
.analysis-plot svg text[fill="#0a0a0a"],.analysis-plot svg text[fill="#232629"]{fill:var(--ink)}
.analysis-plot svg [stroke="#e4e6e9"]{stroke:var(--line)}

/* --------------------------------------------------------------------------
   9. Time travel
   -------------------------------------------------------------------------- */
.time-scrub{background:var(--surface);border-bottom:1px solid var(--line);padding:18px var(--pad-card) 14px}
.time-scrub::after{display:none}
.time-scrub.is-pinned{background:var(--surface2)}
.ts-eyebrow{color:var(--muted);letter-spacing:.1em;font-size:10.5px}
.ts-eyebrow::before{box-shadow:none}
.ts-sub{color:var(--muted);font-size:12.5px;max-width:70ch}
.ts-btn{background:var(--surface);border:1px solid var(--line);color:var(--muted);height:34px;min-height:34px}
.ts-btn:hover{border-color:var(--muted);color:var(--ink);transform:none}
.ts-btn.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.ts-tick{background:var(--line)}
.ts-tick-label,.ts-hint{color:var(--faint)}
.ts-dot{border:2px solid var(--surface);background:var(--blue-deep);box-shadow:var(--shadow-1)}
.ts-playhead{background:var(--ink)}
.ts-bubble{background:var(--primary);color:var(--on-primary)}
.time-scrub.is-live .ts-bubble,.time-scrub.is-live .ts-playhead,
.time-scrub.is-live .ts-playhead::before{background:var(--good)}
.time-scrub.is-pinned .ts-eyebrow::before{background:var(--mid)}
.asof-badge{background:var(--mid-bg);color:var(--mid);border:1px solid transparent;height:38px}
.asof-badge::before{background:var(--mid)}
.hl-chip{background:var(--primary);color:var(--on-primary);border-color:var(--primary);border-radius:8px!important}
.hl-chip button{background:rgba(255,255,255,.16);color:var(--on-primary);border-radius:5px!important}
.hl-clear{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:8px!important}
.hl-bar{padding:14px var(--pad-card) 0}
.hl-bar-label{color:var(--muted)}
.hl-menu-head{color:var(--muted)}
.hl-drop .cat-drop-btn.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

/* --------------------------------------------------------------------------
   10. Horizon / weights / compare
   -------------------------------------------------------------------------- */
.th-chart{padding:8px var(--pad-card) 20px}
.lag-head{padding:20px var(--pad-card) 4px}
.lag-plot{padding:6px var(--pad-card) 0}
.lag-legend{padding:12px var(--pad-card) 18px}
.th-row{border-top:1px solid var(--line-soft);min-height:36px}
.th-axis,.th-label-text small,.th-val small{color:var(--faint)}
.th-label-text b{letter-spacing:-.015em}
.th-legend{border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.th-gl{border-left:1px dashed var(--line)}

.weight-grid{border-top:1px solid var(--line)}
.weight-cell{border-right:1px solid var(--line)}
.weight-cell:last-child{border-right:0}
.weight-cell b{color:var(--muted);letter-spacing:.06em}
.weight-cell small{color:var(--faint)}
.weight-cell span{letter-spacing:-.03em}

.compare-controls{background:var(--surface2);border-bottom:1px solid var(--line);padding:14px var(--pad-card)}
.compare-selects{border-top:0}
.compare-selects>div{border-right:1px solid var(--line);padding:14px 16px}
.compare-selects>div:last-child{border-right:0}
.compare-selects label{color:var(--muted);letter-spacing:.06em}
.compare-selects select{width:100%;border:1px solid var(--line);background:var(--surface);padding:8px}
.compare-table{border-top:1px solid var(--line)}
.compare-row{border-bottom:1px solid var(--line-soft);min-height:46px}
.compare-row>div{border-right:1px solid var(--line-soft);padding:10px 14px}
.compare-row>div:last-child{border-right:0}
.compare-row.head{background:var(--surface2)}
.compare-row .metric-name{color:var(--muted);letter-spacing:.06em}
.compare-row .best{background:var(--blue-soft);color:var(--blue-deep);font-weight:700;border-radius:8px!important}
.compare-lab{color:var(--muted)}

.update{border-bottom:1px solid var(--line-soft)}
.update-date{color:var(--blue-deep)}
.update-body li{color:var(--muted);line-height:1.65}
.forecast-grid{border-bottom:1px solid var(--line-soft)}

/* --------------------------------------------------------------------------
   11. Overlays
   -------------------------------------------------------------------------- */
.overlay{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.modal{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.modal-head,.modal-foot{border-color:var(--line);padding:14px 18px}
.modal-head h3{letter-spacing:-.02em}
.field label,.task-input label{color:var(--muted);letter-spacing:.05em}
.field input,.field select,.task-input input,
.provider-item .country-row select,.provider-item .country-row input{
  background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.save-menu{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);border-radius:10px!important}
.save-menu button:hover{background:var(--blue-soft)}
.toast{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-2)}
kbd{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.nav-drawer.open{background:var(--surface);border-bottom:1px solid var(--line)}

.chart-popover{background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--on-primary);
  border:1px solid var(--line);border-radius:12px!important;box-shadow:var(--shadow-2)}
.chart-popover-meta,.chart-popover-grid span,.chart-popover-agi-head span{color:var(--faint)}

/* --------------------------------------------------------------------------
   12. Motion, restrained
   -------------------------------------------------------------------------- */
/* A theme swap re-tokens ~20 custom properties across a large table and several
   SVGs. The base sheet transitions almost everything (including one
   `transition:all`), which turns a swap into 200ms of continuous repaint on a
   heavy page. Freeze motion while the class is present so the change lands in a
   single frame. */
html.theme-switching,html.theme-switching *{transition:none!important;animation:none!important}

.page.active{animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-row,.lab-grid,.th-row{animation:none}
.lb-head,.stat,.compare-row,.forecast-grid,.update,.weight-cell{animation:none}
.analysis-card{animation:none}
.analysis-plot{animation:none}
.score-line>span{transform-origin:left center;animation:fillIn .6s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes fillIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ts-dot{animation:none}
.chart-dot{animation:none}
.bar-shape{animation:none;transform:none}
.hero::after{display:none}

/* --------------------------------------------------------------------------
   13. Dark mode
   Same hues as light, lightness inverted, chroma lifted so data colours keep
   their identity instead of washing out on a dark ground.
   -------------------------------------------------------------------------- */
html.dark{
  color-scheme:dark;

  /* The ground is soft neutral grey with no blue cast: every surface/text
     token is chroma-zero (oklch C = 0.000), there is no near-black and no
     near-white, and body text tops out at 8.6:1 instead of 15:1. That is the
     "minimal, not the weird dark blue" reading. Colour is reserved for the
     brand accent and the score bands below, which keep full chroma. */
  --bg:#232323;
  --surface:#272727;
  --surface2:#2d2d2d;
  --hover:#323333;
  --line:#3a3a3a;
  --line-soft:#323232;

  --ink:#c4c4c4;
  --muted:#9a9a9a;
  --faint:#8a8a8a;

  /* Colour is NOT muted here -- the earlier grey pass read as dead. Only the
     ground is neutral grey (no blue cast); brand and score colours stay vivid
     and are lightened for a dark ground, exactly like DeepSWE's dark tokens. */
  --blue:#5ba0cf;
  --blue-deep:#7ab3dd;
  --blue-soft:#243140;
  --ring:#7ab3dd;

  --primary:#c8c8c8;
  --on-primary:#232323;
  --on-accent:#15222b;

  --good:#6cc591;  --good-bg:#24352c;
  --mid:#dcb266;   --mid-bg:#352e1d;
  --low:#e5967f;   --low-bg:#3a2823;
  --open:#7ab3dd;  --open-bg:#243140;

  --tape:repeating-linear-gradient(45deg,var(--ink) 0,var(--ink) 7px,var(--blue-deep) 7px,var(--blue-deep) 14px);
  --shadow-1:0 1px 2px rgba(0,0,0,.25);
  --shadow-2:0 12px 30px rgba(0,0,0,.35);
}
html.dark,html.dark body{background:var(--bg);color:var(--ink)}

/* provider/country brand colours are tuned for white; on the dark ground the
   darkest few need a lift to stay visible. Brightness only -- the hue and
   chroma of every lab/country colour is preserved. */
html.dark .provider-dot,html.dark .country-color-mode .provider-dot{filter:brightness(1.25)}
html.dark .logo-badge{background:var(--surface2)}
html.dark .chart-popover{background:#0b0f13;border-color:var(--line)}
html.dark .chart-popover-meta,html.dark .chart-popover-grid span,
html.dark .chart-popover-agi-head span{color:var(--faint)}
html.dark .chart-popover-est{border-color:var(--faint);color:var(--ink)}

/* On the dark ground the data marks are pushed a touch deeper so the palette
   sits inside the muted frame rather than glowing against it, and bars get a
   hard black keyline so neighbouring bars separate. Brightness only -- hue and
   chroma are untouched. Numbers, axis text and gridlines stay exactly as
   authored. Selectors hit the shapes themselves, never their wrapping <g>:
   data-pareto-point sits on every bar group, so filtering that would drag the
   value labels down with it. */
html.dark .analysis-plot svg .bar-shape,
html.dark .analysis-plot svg .cost-segment,
html.dark .analysis-plot svg .chart-dot,
html.dark .analysis-plot svg .chart-line,
html.dark .lag-plot svg .lag-line,
html.dark .lag-plot svg .lag-dot,
html.dark .lag-plot svg rect[data-lag-group]{filter:brightness(.85)}

/* chart SVG chrome. Only the chart's own chrome (background, gridlines, axis
   text) is remapped to the theme. */
html.dark .analysis-plot svg>rect[fill="#fff"],
html.dark .analysis-plot svg rect[fill="white"],
html.dark .analysis-plot svg circle[fill="#fff"],
html.dark .analysis-plot svg circle[fill="white"],
html.dark .lag-plot svg>rect[fill="#fff"],
html.dark .lag-plot svg circle[fill="#fff"]{fill:var(--surface)}
html.dark .analysis-plot svg [stroke="#111214"]{stroke:#000;stroke-opacity:1}
html.dark .lag-plot svg rect[stroke="#fff"]{stroke:var(--surface)}
html.dark .analysis-plot svg [stroke="#e4e6e9"],
html.dark .lag-plot svg [stroke="#e8eaed"],
html.dark .lag-plot svg [stroke="#f0f1f3"]{stroke:var(--line)}
html.dark .analysis-plot svg [fill="#d4d9e0"]{fill:#4b555f}
html.dark .analysis-plot svg [fill="#929da9"]{fill:#7b8794}
html.dark .analysis-plot svg [fill="#485362"]{fill:#aab6c2}

/* pinned / as-of state keeps its warm signal in both modes */
html.dark .asof-badge,html.dark .time-scrub.is-pinned{background:var(--mid-bg);color:var(--mid)}

/* sticky first columns must paint over scrolled cells */
.lb-head>div:nth-child(1),.lb-row>.rank,
.lb-head>div:nth-child(2),.lb-row>.model-cell{background:var(--surface)}
.lb-head>div:nth-child(1),.lb-head>div:nth-child(2){background:var(--surface2)}
.lb-row:hover>.rank,.lb-row:hover>.model-cell{background:var(--hover)}

/* scrollbars follow the theme */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface2)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
html{scrollbar-color:var(--line) var(--surface2);scrollbar-width:thin}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1020px){
  .top-actions .menu-btn{display:inline-grid}
  .tabs{display:none}
  .nav-drawer.open{top:56px;padding:12px 18px}
  .theme-toggle span{display:none}
  .theme-toggle{width:38px;padding:0}
  .weight-grid{grid-template-columns:repeat(3,1fr)}
  .compare-selects{grid-template-columns:1fr 1fr}
  .analysis-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .stat{min-width:0;margin:0;padding:0;border:0}
  .compare-row{min-width:720px}
  .th-chart{overflow:auto}
  .th-cols{min-width:600px}
}
@media(max-width:640px){
  .wrap{padding:30px var(--pad-x) 64px}
  .topbar-inner{padding:10px var(--pad-x)}
  .hero{padding:0 0 28px}
  .hero h1{font-size:2.05rem}
  .stats{margin-top:24px}
  .card-head,.section-head,.card-heading,.card-controls,.bench-controls,
  .grid-note,.score-notes .grid-note,.score-notes summary,.chart-footnote,
  .analysis-method,.th-chart,.compare-controls,.more-analysis>summary,
  .time-scrub,.hl-bar{padding-left:18px;padding-right:18px}
  .card{--pad-card:18px}
  .weight-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.analysis-grid,.analysis-grid>*{min-width:0}
.analysis-plot{overflow-x:auto;max-width:100%}
[id^="charts-"],.analysis-card,.analysis-card>*{min-width:0}

/* Six visible indexes plus benchmaxxing, using the shared column sizing. */
#bfiTable.frontier-v2 .bfi-grid{grid-template-columns:40px minmax(240px,1.6fr) 130px 74px 74px repeat(7,92px) 92px 88px 70px 74px 74px 90px minmax(120px,1fr)}
.lb-row.secondary-effort .model-name,.lb-row.secondary-effort .score-main{font-weight:500;color:var(--muted)}
.lb-row.secondary-effort .score-line{opacity:.5}
#v2-editor-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;padding:20px;border-top:1px solid var(--line);background:var(--surface2)}
#v2-editor-preview label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
#v2-editor-preview b{font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)}
#v2-editor-error:not(:empty){color:var(--low);padding:12px 20px}
.chart-subscriptions{margin:4px var(--chart-inset) 18px;border:1px solid var(--line);border-radius:8px!important;overflow:hidden}
.chart-subscriptions>.subscription-toggle{padding:16px 20px 0}
.chart-subscriptions>.grid-note{padding:12px 20px;margin:0;line-height:1.6}
.subscription-toggle{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;cursor:pointer}
.subscription-toggle input{accent-color:var(--ink);width:16px;height:16px}
.scatter-dim{opacity:.12!important}
.model-pick-menu .mp-group{border-bottom:1px solid var(--line)}
.model-pick-menu .mp-group[hidden]{display:none}
.model-pick-menu .mp-model{font-weight:600;padding-top:10px!important;padding-bottom:8px!important}
.model-pick-menu .mp-model>span{flex:1;min-width:0}
.model-pick-menu .mp-model>small{font-size:10px;font-weight:400;color:var(--muted);margin-left:auto}
.model-pick-menu .mp-efforts{padding:0 0 8px 38px}
.model-pick-menu .mp-effort{font-size:12px;color:var(--muted)}
.model-pick-menu .mp-effort:has(input:checked){color:var(--ink)}
.scatter-family{opacity:1!important}
.scatter-family>.chart-dot{stroke-width:3.5px}
.scatter-hover>.chart-dot{stroke-width:5px;filter:drop-shadow(0 0 4px currentColor)}
.subscription-settings{border-top:1px solid var(--line);padding:18px 20px 20px}
.subscription-settings summary{font-weight:600;cursor:pointer}
.subscription-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;margin-top:16px}
.subscription-plan-grid>div{min-width:0;border:1px solid var(--line);border-radius:8px!important;padding:16px}
.subscription-plan-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;margin-bottom:12px}
.subscription-plan-grid select,.subscription-plan-grid input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;border-radius:8px!important}
.subscription-plan-grid .model-meta{white-space:normal;line-height:1.5}
.frontier-stembench table{width:100%;border-collapse:collapse;font-size:12px;margin-top:16px}
.frontier-stembench{margin-top:24px}.stembench-scroll{overflow-x:auto}.frontier-stembench th,.frontier-stembench td{padding:10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.frontier-stembench small{display:block;font-weight:400;white-space:normal}

/* ---- compare page charts ---- */
html body .compare-charts{display:grid;grid-template-columns:1fr;gap:16px;padding:16px 0 4px}
html body .compare-chart-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px}
html body .compare-chart-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
html body .compare-chart{width:100%;height:auto;display:block}
html body .compare-chart-card .analysis-plot{overflow-x:auto}
html body .compare-chart-card .analysis-plot svg{max-width:none}
@media (min-width:1080px){html body .compare-charts{grid-template-columns:1fr 1fr}html body .compare-chart-card:first-child{grid-column:1 / -1}}

/* --------------------------------------------------------------------------
   12. Frontier front page, editorial pass
   The front page borrows the model-profile language: no boxes, hairline
   rules, one calm heading scale, and controls reduced to quiet inputs.
   Scoped to #page-bfi so archive and compare pages keep their chrome.
   -------------------------------------------------------------------------- */
#page-bfi{max-width:1160px;margin:0 auto}
#page-bfi .hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:400;letter-spacing:-.025em;max-width:none}
#page-bfi .hero p{font-size:15px;max-width:66ch}
#page-bfi .eyebrow{color:var(--muted)}
#page-bfi .stats{gap:44px;margin-top:30px;padding-top:18px}
#page-bfi .stat{flex:0 0 auto;min-width:0;margin:0;padding:0;border:0}
#page-bfi .stat .k{font-size:10px}
#page-bfi .stat .v{font-size:clamp(1.35rem,1.9vw,1.75rem)}
#page-bfi .card{border:0;background:transparent;box-shadow:none;border-radius:0!important;overflow:visible;margin:0 0 64px}
#page-bfi .analysis-card{background:transparent}
#page-bfi .card-head{padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:2px}
#page-bfi .card-head h2{font-size:clamp(24px,2.8vw,30px);font-weight:400;letter-spacing:-.025em}
#page-bfi .card-head p{font-size:12.5px;margin-top:5px;max-width:72ch}
#page-bfi .card-heading{padding:0 0 13px;border-bottom:1px solid var(--line)}
#page-bfi .card-heading h3{font-size:20px;font-weight:400;letter-spacing:-.022em}
#page-bfi .head-actions .btn{height:32px;min-height:32px;padding:0 11px;font-size:12px}
#page-bfi .chart-type-toggle .btn:not(.primary){border-color:transparent;background:var(--surface2);color:var(--muted)}
#page-bfi .chart-type-toggle .btn:not(.primary):hover{color:var(--ink);background:var(--line-soft)}
#page-bfi .card-controls{background:transparent;border:0;padding:6px 0 2px}
#page-bfi .ctrl-row{padding:11px 0}
#page-bfi .card-controls label{font-size:10px}
#page-bfi .card-controls select{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0!important;min-height:30px;padding:5px 1px;font-size:12.5px;max-width:240px}
#page-bfi .chart-filters summary{border:0;background:var(--surface2);border-radius:6px!important;padding:7px 11px}
#page-bfi .analysis-plot,#page-bfi .card-controls+.analysis-plot{padding:12px 0 0}
#page-bfi .chart-footnote{border-top:1px solid var(--line-soft);background:transparent;font-size:11px;padding:12px 0 0}
#page-bfi .analysis-method{background:transparent;border-top:0;font-size:11px;padding:0}
#page-bfi .analysis-method summary{padding:10px 0 4px}
#page-bfi .analysis-summary{background:transparent;border-top:1px solid var(--line-soft)}
#page-bfi .analysis-summary>div{border-color:var(--line-soft)}
#page-bfi .time-scrub{padding:0 0 14px;border-bottom:1px solid var(--line-soft);background:transparent}
#page-bfi .time-scrub.is-pinned{background:var(--surface2)}
#page-bfi .hl-bar{padding:10px 0 0}
#page-bfi .lag-head,#page-bfi .lag-plot,#page-bfi .lag-legend,#page-bfi .th-chart{padding-left:0;padding-right:0}
#page-bfi .lag-note{margin-top:26px}
#page-bfi .grid-note{background:transparent}
#page-bfi .score-notes{border-top:0;background:transparent}
#page-bfi .score-notes summary{padding:10px 0}
#page-bfi .score-notes .grid-note{border:0;padding:0 0 6px}
#page-bfi .more-analysis{border:0;border-radius:0!important;margin-top:0;background:transparent}
#page-bfi .more-analysis>summary{padding:14px 0}
#page-bfi .more-analysis .card{margin:0}
#page-bfi .table-shell{border-top:1px solid var(--line);background:transparent}
#page-bfi .lb-head{background:transparent}
#page-bfi .lb-head>div{border-right:0;padding:10px 8px}
#page-bfi .lb-row{min-height:54px}
#page-bfi .lb-row>div{border-right:0;padding:8px}
#page-bfi .model-name{font-weight:500}
#page-bfi .score-main{font-size:18px}

/* Auditable benchmark-level economics, including explicit missing values. */
#frontier-v23-evidence { margin-top: 24px; }
#frontier-v23-evidence select { max-width: 100%; padding: 10px 12px; color: inherit; background: var(--card, transparent); border: 1px solid var(--border, #64748b); }
.v23-evidence-table { width: 100%; min-width: 840px; border-collapse: collapse; font-size: 13px; text-align: left; }
.v23-evidence-table th, .v23-evidence-table td { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.v23-evidence-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.v23-evidence-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; }

/* Forecast categories are visibly distinct from measured evidence. */
html body .cat small { margin-left: 3px; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
html body .score-top small { display: block; margin-top: 2px; font-size: 8px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.effort-ladder { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:5px; align-items:baseline; }
.effort-ladder > span { font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.effort-ladder b { font-size:9px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.effort-ladder b:first-of-type { color:var(--ink); }

.subsidy-table { margin-top:14px; border-top:1px solid var(--line); max-height:420px; overflow:auto; font-variant-numeric:tabular-nums; }
.subsidy-table-head, .subsidy-row { display:grid; grid-template-columns:minmax(190px,1.6fr) 90px 110px minmax(150px,1fr); gap:10px; align-items:center; padding:7px 4px; }
.subsidy-table-head { position:sticky; top:0; background:var(--paper); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:1px solid var(--line); z-index:1; }
.subsidy-row { border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); font-size:11px; }
.subsidy-model { display:flex; flex-direction:column; gap:2px; min-width:0; }
.subsidy-model small { color:var(--muted); font-size:9px; }
.subsidy-meter { position:relative; display:flex; align-items:center; gap:8px; min-height:14px; }
.subsidy-meter i { display:block; height:7px; background:linear-gradient(90deg,var(--blue-deep),var(--green)); border-radius:99px; animation:subsidyGrow .65s cubic-bezier(.2,.8,.2,1) both; }
.subsidy-meter b { font-size:10px; font-weight:600; color:var(--muted); white-space:nowrap; }
@keyframes subsidyGrow { from { width:0 !important; opacity:.2; } to { opacity:1; } }