/* leaderboard.css – Humor Arena dashboard (laugh-bench-v1).
   Separate from benchmark.css, which methodology.html and prompts.html still use. */
:root {
    --paper:#fffdf7;
    --card:#fffefb;
    --card-2:#fbf8f2;
    --ink:#201c1a;
    --ink-2:#4a4340;
    --muted:#706863;
    --faint:#938a84;
    --line:#e2ddd6;
    --line-2:#efeae3;
    --bar:#c04a86;
    --accent:#a92665;
    --up:#2f765f;
    --down:#a92665;
    --prov:#8a6d1d;
    --prov-bg:#fdf7e5;
    --prov-line:#e6d8ad;
    --bar-quiet:#eec9dc;
    --bar-best:#d685af;
    --best-wash:linear-gradient(135deg,rgba(246,185,122,.12) 0%,rgba(244,168,184,.12) 50%,rgba(232,106,166,.12) 100%);
    --grid:#e8e2da;
    --grad:linear-gradient(135deg,#f6b97a 0%,#f4a8b8 50%,#e86aa6 100%);
    --s1:#c04a86;
    --s2:#3d7fc1;
    --logo-ink:#201c1a;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Source Serif 4",Charter,Georgia,ui-serif,serif;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --shadow:0 1px 2px rgba(61,45,35,.04);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper:#141210;
      --card:#1b1816;
      --card-2:#221e1b;
      --ink:#f5f1ec;
      --ink-2:#d6cfc9;
      --muted:#a49a94;
      --faint:#877d77;
      --line:#332e2b;
      --line-2:#282320;
      --bar:#e0709f;
      --accent:#f2b2cf;
      --up:#6fc0a4;
      --down:#e8879f;
      --prov:#d8b45c;
      --prov-bg:#2a2314;
      --prov-line:#4d4227;
      --bar-quiet:#8c667c;
      --bar-best:#cb8fad;
      --best-wash:linear-gradient(135deg,rgba(242,167,101,.10) 0%,rgba(239,143,166,.10) 50%,rgba(223,95,156,.10) 100%);
      --grid:#2d2825;
      --shadow:0 1px 2px rgba(0,0,0,.3);
      --grad:linear-gradient(135deg,#f2a765 0%,#ef8fa6 50%,#df5f9c 100%);
      --s1:#d96a9c;
      --s2:#4a92d4;
      --logo-ink:#f0ece7;
    }
  }

  :root[data-theme="dark"] {
    --paper:#141210; --card:#1b1816; --card-2:#221e1b;
    --ink:#f5f1ec; --ink-2:#d6cfc9; --muted:#a49a94; --faint:#877d77;
    --line:#332e2b; --line-2:#282320;
    --bar:#e0709f; --accent:#f2b2cf;
    --up:#6fc0a4; --down:#e8879f;
    --prov:#d8b45c; --prov-bg:#2a2314; --prov-line:#4d4227;
    --bar-quiet:#8c667c; --bar-best:#cb8fad; --best-wash:linear-gradient(135deg,rgba(242,167,101,.10) 0%,rgba(239,143,166,.10) 50%,rgba(223,95,156,.10) 100%);
    --grid:#2d2825; --shadow:0 1px 2px rgba(0,0,0,.3);
    --grad:linear-gradient(135deg,#f2a765 0%,#ef8fa6 50%,#df5f9c 100%);
    --s1:#d96a9c;
    --s2:#4a92d4;
    --logo-ink:#f0ece7;
  }

  :root[data-theme="light"] {
    --paper:#fffdf7; --card:#fffefb; --card-2:#fbf8f2;
    --ink:#201c1a; --ink-2:#4a4340; --muted:#706863; --faint:#938a84;
    --line:#e2ddd6; --line-2:#efeae3;
    --bar:#c04a86; --accent:#a92665;
    --up:#2f765f; --down:#a92665;
    --prov:#8a6d1d; --prov-bg:#fdf7e5; --prov-line:#e6d8ad;
    --bar-quiet:#eec9dc; --bar-best:#d685af; --best-wash:linear-gradient(135deg,rgba(246,185,122,.12) 0%,rgba(244,168,184,.12) 50%,rgba(232,106,166,.12) 100%);
    --grid:#e8e2da; --shadow:0 1px 2px rgba(61,45,35,.04);
    --grad:linear-gradient(135deg,#f6b97a 0%,#f4a8b8 50%,#e86aa6 100%);
  }

  * { box-sizing:border-box; }

  body {
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  .shell { width:min(1340px, calc(100% - 36px)); margin:0 auto; }

  /* ---------- masthead ---------- */
  .masthead {
    border-bottom:1px solid var(--line);
    background:var(--paper);
    position:sticky; top:0; z-index:40;
  }
  .masthead .shell {
    min-height:58px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .wordmark {
    display:inline-flex; align-items:baseline; gap:9px;
    font-family:var(--serif); font-size:1.16rem; letter-spacing:-.01em;
    text-decoration:none; color:var(--ink);
  }
  .wordmark .mark { width:20px; height:20px; border-radius:5px; align-self:center; display:block; }
  .wordmark small { font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600; }
  .mast-nav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
  .mast-nav a {
    padding:6px 11px; border-radius:7px; text-decoration:none;
    color:var(--muted); font-size:.855rem; font-weight:500;
  }
  .mast-nav a:hover { color:var(--ink); background:var(--card-2); }
  .mast-nav a.current { color:var(--ink); background:var(--card-2); font-weight:600; }
  .theme-switch { margin-left:10px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
  .theme-switch input { position:absolute; opacity:0; width:0; height:0; }
  .theme-switch .track {
    width:34px; height:19px; border-radius:999px; flex:0 0 auto;
    border:1px solid var(--line); background:var(--card-2);
    position:relative; transition:background .15s ease, border-color .15s ease;
  }
  .theme-switch .knob {
    position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
    background:var(--muted); transition:transform .15s ease, background .15s ease;
  }
  .theme-switch input:checked + .track { background:var(--grad); border-color:transparent; }
  .theme-switch input:checked + .track .knob { transform:translateX(15px); background:#fff; }
  .theme-switch input:focus-visible + .track { outline:2px solid var(--bar); outline-offset:2px; }
  .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;
  }
  /* the methodology link sits in the meta row, so it must not stretch it */
  .meta-row .pill-link { padding:5px 12px; font-size:.8rem; }

  /* ---------- title block ---------- */
  .titleblock { padding:38px 0 26px; }
  .title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  h1 {
    margin:0; font-family:var(--serif); font-weight:400;
    font-size:clamp(2.1rem,4.2vw,2.9rem); line-height:1.06; letter-spacing:-.02em;
    text-wrap:balance;
  }
  .pill-link {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 13px; border:1px solid var(--line); border-radius:999px;
    background:var(--card); color:var(--ink-2);
    font-size:.82rem; font-weight:600; text-decoration:none;
  }
  .pill-link:hover { border-color:var(--bar); color:var(--ink); }
  .lede { margin:14px 0 0; max-width:66ch; color:var(--ink-2); font-size:1.02rem; line-height:1.6; }
  .meta-row {
    margin-top:18px; display:flex; flex-wrap:wrap; gap:22px; align-items:center;
    color:var(--muted); font-size:.85rem;
  }
  .meta-row b { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; }

  /* ---------- caveat banner ---------- */
  .caveat {
    margin-top:22px; padding:16px 18px;
    border:1px solid var(--prov-line);
    border-radius:10px; background:var(--prov-bg);
  }
  .caveat h2 {
    margin:0 0 6px; font-family:var(--sans); font-size:.72rem; font-weight:750;
    letter-spacing:.09em; text-transform:uppercase; color:var(--prov);
  }
  .caveat p { margin:0; max-width:88ch; color:var(--ink-2); font-size:.92rem; line-height:1.6; }
  .caveat p + p { margin-top:9px; }

  /* ---------- highlights ---------- */
  .rail-label {
    display:flex; align-items:center; gap:9px; margin:0 0 14px;
    font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .rail-label::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--grad); }

  .highlights { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .highlights > .panel.hero { grid-column:1 / -1; }
  .panel.hero h3 { max-width:none; font-size:1.34rem; }

  .panel {
    border:1px solid var(--line); border-radius:12px; background:var(--card);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .panel-head { padding:18px 20px 0; }
  .panel-head + .table-scroll { margin-top:16px; }
  .panel-head.with-tools { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .panel h3 {
    margin:0; font-family:var(--serif); font-weight:400;
    font-size:1.24rem; letter-spacing:-.01em; line-height:1.24;
    text-wrap:pretty; max-width:72ch;
  }
  .panel h3 .swatch { display:inline-block; width:11px; height:11px; border-radius:2px; background:var(--grad); margin-right:8px; vertical-align:baseline; }
  .panel-sub { margin:8px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; max-width:82ch; }
  .panel-sub .sep { color:var(--line); margin:0 5px; }
  .panel-body { padding:18px 20px 20px; }
  .panel-foot {
    padding:11px 20px; border-top:1px solid var(--line-2);
    background:var(--card-2); color:var(--faint); font-size:.76rem; line-height:1.5;
  }

  /* ---------- column chart ---------- */
  /* ---------- effort line chart ---------- */
  .linechart { width:100%; height:auto; display:block; overflow:visible; }
  .linechart .grid { stroke:var(--grid); stroke-width:1; stroke-dasharray:3 3; }
  .linechart .axis { fill:var(--faint); font-size:11px; font-family:var(--sans); }
  .linechart .axis.val { text-anchor:end; }
  .linechart .axis.cat { text-anchor:middle; }
  .linechart .ln { fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
  .linechart .dot { stroke:var(--card); stroke-width:1.5; }
  .linechart .endlab { font-size:12px; font-weight:700; font-family:var(--sans); }
  .linechart .hit { fill:transparent; cursor:default; }
  .series-legend { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 10px; font-size:.8rem; color:var(--muted); }
  .series-legend .key { display:inline-flex; align-items:center; gap:7px; }
  .series-legend .key i { width:14px; height:3px; border-radius:2px; display:inline-block; }
  .col-chart.tall { height:250px; }

  .col-chart { position:relative; height:196px; display:flex; align-items:flex-end; gap:6px; }
  .col-chart .gridline {
    position:absolute; left:0; right:0; border-top:1px dashed var(--grid); pointer-events:none;
  }
  .col-chart .zeroline {
    position:absolute; left:0; right:0; border-top:1px solid var(--line); pointer-events:none;
  }

  /* simple (zero-baseline at the bottom) */
  .col {
    flex:1 1 0; height:100%; position:relative;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;
  }
  .col .cap {
    text-align:center; font-size:.71rem; font-weight:700; color:var(--ink);
    font-variant-numeric:tabular-nums; margin-bottom:4px; white-space:nowrap;
  }
  .col .fill { width:100%; max-width:86px; margin-left:auto; margin-right:auto; background:var(--bar); border-radius:4px 4px 0 0; transition:filter .12s ease; }
  .col:hover .fill { filter:brightness(1.1); }

  /* diverging (zero baseline in the middle) */
  .dcol { flex:1 1 0; height:100%; position:relative; }
  .dcol .dfill { position:absolute; left:0; right:0; background:var(--bar); transition:filter .12s ease; }
  .dcol .dfill.pos { bottom:50%; border-radius:4px 4px 0 0; }
  .dcol .dfill.neg { top:50%; border-radius:0 0 4px 4px; }
  .dcol .cap {
    position:absolute; left:0; right:0; text-align:center;
    font-size:.71rem; font-weight:700; color:var(--ink);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .dcol:hover .dfill { filter:brightness(1.1); }

  .col-labels { display:flex; gap:6px; margin-top:9px; }
  .col-labels span {
    flex:1 1 0; text-align:center; font-size:.6rem; color:var(--muted);
    line-height:1.3; letter-spacing:-.01em; overflow-wrap:normal; word-break:normal;
  }

  /* ---------- tables ---------- */
  .table-scroll { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  thead th {
    padding:10px 12px; text-align:left; vertical-align:bottom;
    border-bottom:1px solid var(--line);
    font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
    white-space:nowrap; background:var(--card-2);
  }
  tbody td { padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
  tbody tr:last-child td { border-bottom:0; }
  tbody tr, tbody td { transition:none; }
  tbody tr:hover td { background-color:var(--card-2); }
  tbody tr:hover td.cell-best { background-color:transparent; }
  td.num, th.num { text-align:right; }
  /* Keep value columns close to their headers instead of stretching across the table. */
  table.metric th.num, table.metric td.num { width:150px; }
  table.metric th:first-child, table.metric td:first-child { width:auto; }
  .board { min-width:1010px; }

  .rank-cell { white-space:nowrap; }
  .rank-n { font-family:var(--serif); font-size:1.16rem; }
  .rank-range { display:block; margin-top:1px; color:var(--faint); font-size:.7rem; }

  .model-cell { display:flex; align-items:center; gap:11px; min-width:210px; }
  .mono-mark {
    flex:0 0 auto; width:28px; height:28px; border-radius:6px;
    display:grid; place-items:center;
    border:1px solid var(--line); background:var(--card-2);
    font-family:var(--serif); font-size:.82rem; color:var(--ink-2);
  }
  .mono-mark svg { width:16px; height:16px; display:block; color:var(--logo-ink); }
  .model-name { font-weight:650; white-space:nowrap; }
  .model-sub { display:block; margin-top:1px; color:var(--faint); font-size:.73rem; font-weight:400; white-space:nowrap; }

  .val { font-weight:650; }
  .val-ci { display:block; margin-top:1px; color:var(--faint); font-size:.71rem; font-weight:400; }

  /* CI whisker bar (arena-style) */
  .ci-bar { position:relative; width:146px; height:22px; border-radius:4px; background:var(--card-2); border:1px solid var(--line-2); }
  .ci-bar .span { position:absolute; top:3px; bottom:3px; background:var(--bar-quiet); border-radius:3px; }
  .ci-bar .pt { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); }
  :root[data-theme="dark"] .ci-bar .pt { background:var(--paper); }
  @media (prefers-color-scheme: dark) { .ci-bar .pt { background:var(--paper); } }
  :root[data-theme="light"] .ci-bar .pt { background:var(--ink); }

  .heat { text-align:right; }
  /* No graded shading: every value cell is plain, and only the best one is marked. */
  td.cell-best {
    background-image:var(--best-wash);
    font-weight:650;
  }
  tbody tr:hover td.cell-best { filter:none; }

  .delta { font-weight:650; white-space:nowrap; }
  .delta.up { color:var(--up); }
  .delta.down { color:var(--down); }
  .delta.flat { color:var(--muted); }

  /* ---------- chips ---------- */
  .chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 8px; border:1px solid var(--line); border-radius:999px;
    background:var(--card); color:var(--muted); font-size:.7rem; font-weight:600; white-space:nowrap;
  }
  .chip.lead { border-color:transparent; background-image:var(--best-wash); color:var(--accent); }
  .chip.prov { border-color:var(--prov-line); background:var(--prov-bg); color:var(--prov); }
  .chip.sig { border-color:var(--up); color:var(--up); background:transparent; }

  /* ---------- layout with rail ---------- */
  .work { display:grid; grid-template-columns:172px minmax(0,1fr); gap:30px; align-items:start; padding:44px 0 0; }
  .rail { position:sticky; top:78px; display:flex; flex-direction:column; gap:1px; }
  .rail a {
    display:flex; align-items:center; gap:9px;
    padding:7px 9px; border-radius:6px; text-decoration:none;
    color:var(--muted); font-size:.83rem; line-height:1.3;
  }
  .rail a::before { content:""; flex:0 0 auto; width:7px; height:7px; background:var(--line); }
  .rail a:hover { color:var(--ink); background:var(--card-2); }
  .rail a.active { color:var(--ink); font-weight:650; }
  .rail a.active::before { background:var(--grad); }
  .rail a.group-start { margin-top:11px; padding-top:11px; border-top:1px solid var(--line-2); }
  .rail .rail-head { padding:0 9px 8px; font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }

  .stack { display:flex; flex-direction:column; gap:64px; }
  .part { display:flex; flex-direction:column; gap:52px; }
  .part-title {
    margin:0; font-family:var(--serif); font-weight:400;
    font-size:clamp(2.1rem,4vw,2.7rem); letter-spacing:-.025em; line-height:1.05;
  }
  .part + .part { margin-top:34px; }
  .rail-head.spaced { margin-top:18px; }
  section, .part { scroll-margin-top:96px; }
  .sec-head { margin-bottom:16px; }
  .sec-head h3 {
    margin:0; font-family:var(--serif); font-weight:400;
    font-size:clamp(1.35rem,2.4vw,1.65rem); letter-spacing:-.015em; line-height:1.2; text-wrap:balance;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:none;
  }
  .sec-head h3 .sq { width:12px; height:12px; border-radius:2px; background:var(--grad); flex:0 0 auto; }
  .sec-head p { margin:9px 0 0; max-width:78ch; color:var(--muted); font-size:.93rem; line-height:1.6; }
  .sec-head p.disclosure {
    margin-top:12px; padding:12px 14px; max-width:82ch;
    border:1px solid var(--prov-line); border-radius:8px;
    background:var(--prov-bg); color:var(--ink-2); font-size:.88rem;
  }
  .sec-head p.disclosure b { color:var(--ink); }
  td .model-sub { display:block; margin-top:2px; }

  /* ---------- stat grid ---------- */
  .stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
  .stat {
    padding:20px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  }
  .stat:nth-child(4n) { border-right:0; }
  .stat:nth-last-child(-n+4) { border-bottom:0; }
  .stat b {
    display:block; font-family:var(--serif); font-weight:400;
    font-size:1.95rem; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums;
  }
  .stat span { display:block; margin-top:7px; color:var(--muted); font-size:.79rem; line-height:1.45; }
  .stat.miss b { color:var(--down); }
  .stat.good b { color:var(--up); }

  /* ---------- effort ladders ---------- */
  .ladder-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:stretch; }
  .ladder-grid .panel { display:flex; flex-direction:column; }
  .ladder-grid .panel .panel-body { flex:1 1 auto; }
  .ladder-grid .panel .panel-foot { margin-top:auto; }
  .ladder { display:flex; flex-direction:column; gap:9px; }
  .ladder-row { display:grid; grid-template-columns:86px minmax(0,1fr) 96px; align-items:center; gap:10px; }
  .ladder-row .lbl { font-size:.8rem; color:var(--muted); text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ladder-row .lbl i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--grad); margin-left:5px; vertical-align:middle; }
  .ladder-row.current .lbl { color:var(--ink); font-weight:700; }
  .ladder-track { position:relative; height:20px; border-radius:4px; background:var(--card-2); border:1px solid var(--line-2); }
  .ladder-track .span { position:absolute; top:3px; bottom:3px; background:var(--bar-quiet); border-radius:3px; }
  .ladder-track .pt { position:absolute; top:0; bottom:0; width:2px; background:var(--bar); }
  .ladder-row .v { text-align:right; font-size:.83rem; font-weight:650; font-variant-numeric:tabular-nums; }
  .ladder-row .v small { display:block; font-weight:400; color:var(--faint); font-size:.7rem; }

  /* ---------- module cards ---------- */
  .module-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
  .module { display:flex; flex-direction:column; gap:10px; padding:20px; }
  .module h4 { margin:0; font-family:var(--serif); font-weight:400; font-size:1.14rem; letter-spacing:-.01em; }
  .module p { margin:0; color:var(--muted); font-size:.855rem; line-height:1.55; }
  .module .head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .module-status {
    flex:0 0 auto; padding:4px 8px; border-radius:999px;
    border:1px solid var(--line); background:var(--card-2); color:var(--muted);
    font-size:.66rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  }
  .module[data-status="next"] { border-color:var(--prov-line); }
  .module[data-status="next"] .module-status { border-color:var(--prov-line); background:var(--prov-bg); color:var(--prov); }

  /* column-header direction hint */
  .th-hint { display:block; font-weight:400; text-transform:none; letter-spacing:0; font-size:.72em; color:var(--faint); margin-bottom:2px; }

  /* standing-commitments paragraph */
  .commitments { margin:0; max-width:88ch; color:var(--muted); font-size:.9rem; line-height:1.65; }

  /* ---------- heatmap grid ---------- */
  .hm { min-width:900px; }
  .hm th.rot { text-align:right; }
  .hm td.lab, .hm th.lab { text-align:left; white-space:nowrap; font-weight:600; }
  .hm td { padding:9px 10px; font-size:.82rem; }
  .hm thead th { padding:9px 10px; }

  /* ---------- boundary lists ---------- */
  .two-col { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .listcard { padding:20px; }
  .listcard h4 { margin:0 0 10px; font-family:var(--serif); font-weight:400; font-size:1.1rem; }
  .listcard ul { margin:0; padding-left:19px; color:var(--muted); font-size:.87rem; line-height:1.65; }
  .listcard.wide { padding:26px 28px; }
  .method-list { list-style:none; padding:0 !important; display:flex; flex-direction:column; gap:15px; }
  .method-list li { color:var(--muted); font-size:.93rem; line-height:1.6; padding-left:19px; position:relative; }
  .method-list li::before {
    content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
    border-radius:2px; background:var(--grad);
  }
  .method-list b { color:var(--ink); font-weight:650; }
  .download-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
  .download-row .button { display:inline-flex; align-items:center; gap:9px; min-height:42px; font-size:.88rem; font-weight:600; }
  .download-row .button svg { flex:0 0 auto; }
  .button.paper { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:0 16px; text-decoration:none; }
  .button.paper:hover { border-color:var(--bar); }

  /* ---------- method ---------- */
  .method-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
  .method { padding:20px; }
  .method .step { font-size:.7rem; font-weight:750; letter-spacing:.08em; color:var(--accent); }
  .method h4 { margin:8px 0 7px; font-family:var(--serif); font-weight:400; font-size:1.06rem; }
  .method p { margin:0; color:var(--muted); font-size:.845rem; line-height:1.55; }

  /* ---------- legend ---------- */
  .legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; color:var(--muted); font-size:.78rem; align-items:center; }
  .legend .key { display:inline-flex; align-items:center; gap:6px; }
  .legend .sw { width:22px; height:9px; border-radius:2px; }
  .best-key { display:inline-block; width:22px; height:13px; border-radius:3px;
    background-image:var(--best-wash); vertical-align:middle; }

  /* ---------- footer ---------- */
  footer.site {
    margin-top:64px; border-top:1px solid var(--line); padding:26px 0 40px;
    color:var(--faint); font-size:.8rem;
  }
  footer.site .shell { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
  footer.site a { color:var(--muted); }

  /* ---------- tooltip ---------- */
  #tip {
    position:fixed; z-index:90; pointer-events:none; opacity:0;
    max-width:280px; padding:9px 11px;
    border:1px solid var(--line); border-radius:8px;
    background:var(--card); color:var(--ink);
    font-size:.79rem; line-height:1.45;
    box-shadow:0 8px 28px rgba(30,20,15,.16);
    transition:opacity .1s ease;
  }
  #tip.on { opacity:1; }
  #tip b { display:block; font-weight:700; margin-bottom:2px; }
  #tip span { color:var(--muted); }

  :focus-visible { outline:2px solid var(--bar); outline-offset:2px; border-radius:4px; }

  /* Shown only once the layout is in its phone arrangement. */
  .narrow-only { display:none; }

  @media (max-width:1080px) {
    .highlights { grid-template-columns:1fr; }
    .highlights > .panel.hero { grid-column:auto; }
    /* minmax(0,…) is load-bearing, not decoration. A grid item's automatic
       minimum is its content, so a plain 1fr lets the 1010px board table push
       this column past the viewport and the whole page scrolls sideways —
       masthead, title and hero all stranded in the left third. With the floor
       at 0 the column clamps and the table scrolls inside .table-scroll, which
       is what that wrapper is for. */
    .work { grid-template-columns:minmax(0,1fr); gap:0; }
    .rail { display:none; }
    .method-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .module-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:720px) {
    .shell { width:calc(100% - 26px); }
    .stat-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .stat:nth-child(4n) { border-right:1px solid var(--line-2); }
    .stat:nth-child(2n) { border-right:0; }
    .stat:nth-last-child(-n+4) { border-bottom:1px solid var(--line-2); }
    .stat:nth-last-child(-n+2) { border-bottom:0; }
    .ladder-grid, .two-col, .module-grid, .method-grid { grid-template-columns:1fr; }
    .narrow-only { display:inline; }

    /* ---- masthead ---- */
    .masthead .shell { gap:10px; min-height:52px; }
    /* Two words on one line. Wrapping put "Labs" under "Laugh" and doubled the
       bar height. */
    .wordmark { font-size:1.05rem; white-space:nowrap; }
    /* Wordmark plus Subscribe is all that fits on one line at 320px, and the
       current-page link points at the page you are already on. */
    .mast-nav { flex-wrap:nowrap; }
    .mast-nav a:not(.mast-cta) { display:none; }
    .mast-nav .mast-cta { padding:5px 12px; font-size:.82rem; }
    /* No theme control on a phone; the page still follows the system setting
       through prefers-color-scheme. */
    .theme-switch { display:none; }

    /* ---- title block ---- */
    .titleblock { padding:26px 0 20px; }
    .lede { font-size:.97rem; }
    .meta-row { gap:8px 14px; }

    /* ---- tables ----
       Each one keeps a min-width so its columns stay legible and scrolls inside
       .table-scroll, but the desktop minimums assume room these screens do not
       have. Trimmed to what the content actually needs. */
    /* Sized so rank, model and win rate all land inside a 320px screen without
       a swipe — that is the row a reader actually came for. Clean and dark are
       one short scroll to the right rather than hidden, so no number is lost. */
    .board { min-width:398px; }
    .board th, .board td { padding-left:8px; padding-right:8px; }
    .board thead th:first-child, .board tbody td:first-child { padding-left:8px; padding-right:4px; }
    /* Wide enough that "Claude Fable 5" stays on one line, narrow enough that
       the win rate still clears the right edge. The retired chip drops to a
       second line, which is what it should do. */
    .board thead th:nth-child(2), .board tbody td:nth-child(2) { max-width:152px; padding-left:6px; }
    .board thead th:nth-child(3), .board tbody td:nth-child(3) { padding-left:2px; padding-right:6px; }
    .board .val { font-size:.94rem; }
    .mono-mark { width:22px; height:22px; border-radius:5px; }
    .mono-mark svg { width:13px; height:13px; }
    .rank-n { font-size:1.02rem; }
    .rank-range { font-size:.62rem; }
    /* The text block has to be allowed to shrink below its content width, or
       the logo gets pushed onto a line of its own above the name. Top-aligned
       so the logo sits beside the first line rather than floating to the
       middle of a name that has wrapped. */
    .model-cell { align-items:flex-start; }
    .model-cell .mono-mark { margin-top:1px; }
    .model-cell > span:not(.mono-mark) { min-width:0; }
    .model-name { white-space:normal; }
    /* The interval bar is the widest column (231px of 1010) and the only one
       whose information is already on the row: the ± under the win rate is the
       same interval as a number, and the rank range under the rank is the same
       overlap as positions. Dropping the drawing costs a phone reader nothing
       and saves them three screens of sideways scrolling. */
    .board thead th:nth-child(4), .board tbody td:nth-child(4) { display:none; }
    .legend .key:first-child { display:none; }
    .model-cell { min-width:0; gap:8px; }
    /* "Anthropic · replaced by Claude Opus 5" on one line set the column width
       on its own. */
    .model-sub { white-space:normal; }
    .releases { min-width:520px; }
    .metric { min-width:440px; }
    table.metric th.num, table.metric td.num { width:auto; }
    .hm { min-width:600px; }
    .hm td, .hm thead th { padding:7px 8px; font-size:.76rem; }
    th, td { padding-left:10px; padding-right:10px; }

    /* ---- charts ----
       The bar charts are laid out in HTML, so at 14 columns each bar was 15px
       wide with an unreadable label. The SVG ones scale with their box, which
       shrinks 12px type to about 4px. Both get a floor and scroll instead. */
    .panel-body { overflow-x:auto; }
    /* Bars and their labels are siblings, so they need the same floor or the
       labels slide out of register with the columns they name. */
    .col-chart, .col-labels { min-width:520px; }
    .panel-body > div > svg { min-width:560px; }
    /* The agreement chart carries the page's headline claim, and at 560px the
       judge's own number sat off the right edge while the two lesser numbers
       showed. It is only three bars, so it fits the screen instead. Its type is
       scaled up further down, after the .agreechart rules it has to beat. */
    #chartAgree > svg { min-width:0; }
    /* The hero is cut to six bars on a phone, which fits without scrolling. */
    .panel.hero .col-chart, .panel.hero .col-labels { min-width:0; }
    .col-labels span { font-size:.6rem; }

    /* ---- long strings ---- */
    .model-name, .sec-head p, .panel-sub, .panel-note, .method-list li,
    .commitments, .lede { overflow-wrap:break-word; }
    .rank-cell { white-space:normal; }
    .hm td.lab, .hm th.lab { white-space:normal; }
    .headline-claim { padding:16px 16px 14px; gap:10px; }
    .panel-note { padding-left:16px; padding-right:16px; }
    /* Headings are flex rows of [square, text]. Once the text is long enough to
       need two lines the wrap drops it below the square, which reads as a stray
       dot on its own line. Keep them on one row and let the text wrap inside. */
    .sec-head h3, .panel-head h3 { flex-wrap:nowrap; align-items:flex-start; }
    .sec-head h3 .sq, .panel-head h3 .swatch { margin-top:.34em; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition:none !important; }
    html { scroll-behavior:auto; }
  }


  /* ---------- headline claim (scoring section) ---------- */
  .headline-claim {
    display:flex; gap:14px; align-items:flex-start;
    padding:20px 20px 18px; border-bottom:1px solid var(--line-2);
  }
  .headline-claim > svg { flex:0 0 auto; margin-top:3px; color:var(--bar-best); }
  .headline-claim h3 {
    margin:0; font-family:var(--serif); font-weight:600;
    font-size:clamp(1.2rem,2.2vw,1.5rem); letter-spacing:-.015em; line-height:1.25;
    background-image:var(--grad); -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
  .headline-claim p { margin:7px 0 0; color:var(--muted); font-size:.88rem; line-height:1.6; max-width:80ch; }

  .panel-note {
    margin:0; padding:4px 20px 14px;
    color:var(--ink-2); font-size:.88rem; line-height:1.65; max-width:none;
  }
  .panel-note b { color:var(--ink); }

  /* three-up stat grid, so a three-item row has no dangling divider */
  .stat-grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .stat-grid.three .stat:nth-child(3n) { border-right:0; }

  /* ---------- agreement chart ---------- */
  .agreechart .abar { fill:var(--bar-quiet); }
  .agreechart .abar.best { fill:var(--bar-best); }
  .agreechart .abar.ghost { fill:none; stroke:var(--grid); stroke-width:1; stroke-dasharray:4 3; }
  .agreechart .abar-val {
    fill:var(--ink); font-size:12px; font-weight:700; font-family:var(--sans);
    font-variant-numeric:tabular-nums;
  }
  .agreechart .axis.rowlab { text-anchor:end; fill:var(--ink-2); font-size:12px; }

  /* broken value axis on the effort chart */
  .linechart .axisbreak { stroke:var(--faint); stroke-width:1.4; stroke-linecap:round; }
  .linechart .axis.brk { text-anchor:end; fill:var(--faint); font-size:10px; }

  @media (max-width:720px) {
    .stat-grid.three { grid-template-columns:1fr; }
    .stat-grid.three .stat { border-right:0; }
    /* Type inside the agreement chart is in viewBox units, so shrinking the box
       to a phone shrinks the labels with it — 12 units came out at about 4px.
       These have to sit after the .agreechart block above to win on order. */
    .agreechart .abar-val { font-size:27px; }
    .agreechart .axis.rowlab { font-size:25px; }
    .agreechart .axis.cat { font-size:23px; }
  }

  /* subscribe call to action in the masthead, left of the theme toggle */
  .mast-nav .mast-cta {
    padding:5px 12px; border-radius:999px; background:var(--grad);
    color:#fff; font-weight:650; border:0;
  }
  .mast-nav a.mast-cta:hover { background:var(--grad); color:#fff; opacity:.92; }

  /* no rules between the notes and the stat row */
  .panel .panel-note + .panel-note { padding-top:0; }
  .panel .panel-note + .stat-grid, .panel .panel-note + .stat-grid .stat { border-top:0; }