/* Model Barometer. One stylesheet for every page.
   The look follows the chosen home page prototype (variant A): white page, black ink, serif
   headlines, pill navigation, bordered chart panels, marks coloured by lab.
   Order: tokens, base, header and footer, controls, panels, chart marks, tables,
   home page, model page, methodology, narrow screens. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --page: #ffffff;
  --band: #f0f1f3;
  --card: #ffffff;
  --surface: #ffffff; /* gap and ring colour around marks */
  --ink: #000000;
  --ink-2: #3f3f45;
  --muted: #62626a;
  --rule: #e4e4e8;
  --rule-strong: #c9c9d1;
  --pill: #ececef;
  --pill-on: #000000;
  --pill-on-ink: #ffffff;
  --grid: #e3e3e8;
  --axis: #b4b4be;
  --refline: #77777f;
  --on-col: #ffffff; /* a value printed on a column, and (soft) the interval line inside it */
  --on-col-soft: rgba(255, 255, 255, 0.7);
  --accent: #6d28d9;
  --plum: #6b1d6e;
  --good: #0a7a0a;
  --critical: #c22f2f;
  --track: #e9e9ed;
  --neutral-mark: #8c8c96;
  --note-bg: #fff6dc;
  --note-edge: #b97f00;
  --tip-bg: #111113;
  --tip-ink: #f5f5f5;
  --sq-1: #7c3aed;
  --sq-2: #a87600;
  --sq-3: #e8590c;
  /* One colour per lab. A model's name is always printed beside its mark, so colour is never
     the only way to tell two models apart. Each passes 3:1 against the surface. */
  --lab-anthropic: #c0694c;
  --lab-openai: #1c1c1e;
  --lab-google: #2a9148;
  --lab-meta: #0a70ea;
  --lab-xai: #7a6bd6;
  --lab-deepseek: #2443e6;
  --lab-moonshot: #0b8a88;
  --lab-alibaba: #d9530a;
  --lab-mistral: #d52f0a;
  --lab-minimax: #d43a73;
  --lab-zhipu: #0b83b5;
  --lab-thinking-machines: #6a6a70;
  --lab-baidu: #5f8600;
  --lab-inclusionai: #2f86c9;
  --lab-other: #77777f;
  --f-serif: "Sitka Display", "Sitka Heading", "Iowan Old Style", Charter, Constantia, Georgia, serif;
  --f-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0a0b;
  --band: #151517;
  --card: #101012;
  --surface: #101012;
  --ink: #f5f5f6;
  --ink-2: #c3c3c9;
  --muted: #a0a0a8;
  --rule: #26262b;
  --rule-strong: #3d3d45;
  --pill: #1e1e22;
  --pill-on: #f5f5f6;
  --pill-on-ink: #0a0a0b;
  --grid: #232328;
  --axis: #4a4a52;
  --refline: #8a8a93;
  --on-col: #111113;
  --on-col-soft: rgba(17, 17, 19, 0.7);
  --accent: #b69cff;
  --plum: #dba1de;
  --good: #3cc13c;
  --critical: #ee7474;
  --track: #222226;
  --neutral-mark: #7e7e88;
  --note-bg: #2b2410;
  --note-edge: #d79a1a;
  --tip-bg: #f5f5f6;
  --tip-ink: #111113;
  --sq-1: #9d7bff;
  --sq-2: #f5d000;
  --sq-3: #ff8a3d;
  --lab-anthropic: #d48a6f;
  --lab-openai: #ececee;
  --lab-google: #3fb863;
  --lab-meta: #3b95ff;
  --lab-xai: #9486ea;
  --lab-deepseek: #6f86ff;
  --lab-moonshot: #1fb5b2;
  --lab-alibaba: #ff7a33;
  --lab-mistral: #f2512d;
  --lab-minimax: #e85c90;
  --lab-zhipu: #2db5ee;
  --lab-thinking-machines: #94949c;
  --lab-baidu: #8cbf10;
  --lab-inclusionai: #6cc0f8;
  --lab-other: #8a8a93;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--f-sans); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1 { font: 400 56px/1.04 var(--f-serif); letter-spacing: -0.02em; }
p { margin: 0 0 10px; max-width: 76ch; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: currentColor; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.none { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 4px 0 10px; }
.sub { color: var(--muted); font-size: 12.5px; }
.ast { font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 200; }
.skip:focus { left: 8px; }
.loading { padding: 40px 0; color: var(--ink-2); }
.failed { padding: 40px 0; }
.failed h1 { font-size: 34px; margin-bottom: 12px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; }
.btn:hover { border-color: var(--ink); }
.btn[aria-pressed="true"] { background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-ink); }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; background: var(--c, var(--lab-other)); }
.sq { display: inline-block; flex: none; width: 13px; height: 13px; background: var(--ink); margin-right: 11px; }
.pill-label { display: inline-flex; align-items: center; background: var(--pill); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; }
.count-pill { display: inline-flex; align-items: center; background: var(--band); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; }
.tag { flex: none; font-size: 11.5px; line-height: 1.6; padding: 0 8px; background: var(--pill); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }

/* ---------- header and footer ---------- */
.site-head { display: flex; align-items: center; gap: 16px; padding: 22px 0 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; background: var(--pill-on); color: var(--pill-on-ink); text-decoration: none; font: 400 17px/1 var(--f-serif); padding: 10px 16px 10px 12px; border-radius: 999px; white-space: nowrap; }
/* the mark: the interval band of the charts bent into a dial, with the score as a dot on it (tools/make_icons.py) */
.logo .logo-band { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; opacity: 0.45; }
.logo .logo-dot { fill: currentColor; }
.navpill { display: flex; gap: 2px; margin: 0 auto; background: var(--pill); border-radius: 999px; padding: 3px; }
.navpill a { color: var(--ink); text-decoration: none; font-size: 14.5px; padding: 6px 14px; border-radius: 999px; }
.navpill a:hover { background: var(--rule-strong); }
.navpill a[aria-current] { background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.theme-btn { font-size: 13.5px; background: var(--pill); border-color: transparent; white-space: nowrap; }
.site-foot { margin-top: 56px; padding: 18px 0 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; }
.site-foot p { max-width: none; margin: 0 0 6px; }
.site-foot a { color: var(--ink-2); }

/* ---------- controls: filters and category tabs ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.filters-title { font-size: 13.5px; color: var(--ink-2); margin-right: 4px; }
.field, .srcpick summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); background: var(--band); border: 1px solid var(--rule); border-radius: 8px; padding: 0 4px 0 11px; min-height: 36px; }
.field select, .field input { border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: 13.5px; height: 32px; padding: 0 2px; border-radius: 6px; }
.field select option { background: var(--card); color: var(--ink); }
.srcpick { position: relative; }
.srcpick summary { cursor: pointer; list-style: none; color: var(--ink); font-weight: 600; padding: 0 30px 0 11px; position: relative; }
.srcpick summary::-webkit-details-marker { display: none; }
.srcpick summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); }
.srcmenu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 250px; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); display: grid; gap: 4px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; min-height: 30px; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.check .sub { margin-left: auto; padding-left: 12px; }
.srcmenu .linkish { justify-self: start; margin-top: 4px; font-size: 13.5px; }
.filter-note { max-width: none; margin: 22px 0 0; font-size: 13.5px; background: var(--note-bg); border-left: 3px solid var(--note-edge); border-radius: 0 6px 6px 0; padding: 9px 12px; }
.filter-note strong { font-weight: 600; }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 2px; margin: -2px; }
.tab { flex: none; background: none; border: 0; border-radius: 6px; padding: 7px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tab:hover { color: var(--ink); background: var(--pill); }
.tab[aria-selected="true"] { color: var(--pill-on-ink); background: var(--pill-on); }

/* ---------- cards, panels, section headings ---------- */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; min-width: 0; }
.panel { border: 1px solid var(--rule); border-radius: 8px; background: var(--card); margin: 0 0 22px; min-width: 0; }
.panel-tabs { background: var(--band); border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; padding: 10px 14px; }
.panel-body { padding: 20px 18px 20px; }
/* above a chart: one short line at the left, the count and the table switch at the right */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-bottom: 10px; }
.panel-head .card-sub { margin: 0; }
.panel-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 44px 0 16px; scroll-margin-top: 12px; }
/* headings are about 15% larger than at launch (Zach, 2026-11-13); the model page's block headings keep the same ratio */
.sec-head h2 { font: 400 34px/1.1 var(--f-serif); display: flex; align-items: baseline; } /* a long heading wraps beside its square, not under it */
.sec-head .sq { width: 19px; height: 19px; transform: translateY(1px); }
.sec-head .tag { margin-left: 12px; align-self: center; }
.sec-link { font-size: 14px; font-weight: 600; white-space: nowrap; }
.card-title { font: 400 28px/1.15 var(--f-serif); display: flex; align-items: baseline; }
.card-title .sq { width: 16px; height: 16px; }
.card-sub { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 4px 0 10px; }
/* the one line of key under a chart */
.keyline { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 12px 0 0; max-width: none; }
.keyline + .keyline, .keyline + .nodata-line, .nodata-line + .keyline { margin-top: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); max-width: none; }
.key { display: inline-flex; align-items: center; }
.key > i { flex: none; } /* a key's mark keeps its shape when its text wraps */
.key .chip { margin-right: 6px; border-radius: 2px; }
.k-hollow { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; border: 2px solid var(--ink-2); }
.k-solid { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--ink-2); }
.k-line { display: inline-block; width: 18px; height: 0; margin-right: 8px; border-top: 2px solid var(--c, var(--ink)); }
.footnote { color: var(--ink-2); font-size: 13px; margin: 14px 0 0; max-width: 90ch; }
.nodata-line { color: var(--ink-2); font-size: 13.5px; margin: 10px 0 0; max-width: none; }

/* ---------- column chart ---------- */
/* Proportions follow Artificial Analysis: a column is about three quarters of its slot, capped at
   42px. Names, values and the strong row are 14px; the other chart text is 13px in the secondary
   ink (Zach, 2026-11-13: "Larger, 14px"). The padding figures match LEAD, LEAD_SMALL, TAIL,
   REF_SPACE and GROUP_GAP in charts.js. */
.colchart { --h: 260px; --cap: 0px; display: grid; grid-template-columns: var(--gut, 40px) minmax(0, 1fr); margin-top: 8px; }
.colchart.has-groups { --cap: 28px; }
.col-y { position: relative; padding-top: calc(var(--cap) + 22px); font-size: 13px; color: var(--ink-2); }
.colchart.small .col-y { padding-top: 14px; }
.col-y-scale { position: relative; height: var(--h); }
.col-y-scale span { position: absolute; right: 8px; transform: translateY(50%); font-variant-numeric: tabular-nums; }
.col-y-meta { display: block; height: 24px; line-height: 24px; text-align: right; padding-right: 8px; white-space: nowrap; }
.col-y-meta:first-of-type { margin-top: 8px; }
.col-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.col-inner { position: relative; display: flex; padding: 22px 10px 0 54px; }
.colchart.small .col-inner { padding: 14px 10px 0 45px; }
.colchart.has-ref .col-inner { padding-right: 100px; } /* room for the name of the average line */
.col-gridlayer { position: absolute; left: 0; right: 0; top: calc(var(--cap) + 22px); height: var(--h); pointer-events: none; }
.colchart.small .col-gridlayer { top: 14px; }
.col-gridlayer i { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--axis); opacity: 0.7; }
.col-gridlayer i.base { border-top-style: solid; opacity: 1; }
.col-gridlayer i.ref { border-top: 1px dashed var(--refline); opacity: 1; }
.col-gridlayer em { position: absolute; right: 0; margin-bottom: 1px; padding-left: 6px; background: var(--card); font: normal 13px/1.3 var(--f-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-group { min-width: 0; position: relative; }
.col-group + .col-group { margin-left: 44px; }
/* the divider between groups runs from just under the caption strip to the baseline: it does not
   go down through the names, and a caption can hang over it */
.col-group + .col-group::before { content: ""; position: absolute; left: -22px; top: calc(var(--cap) - 6px); height: calc(var(--h) + 6px); border-left: 1px solid var(--rule-strong); }
.col-group-cap { height: var(--cap); font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: visible; }
.col-group.cap-end .col-group-cap { display: flex; justify-content: flex-end; }
.colchart:not(.has-groups) .col-group-cap { display: none; }
.col-cols { display: flex; }
.col { flex: 1 1 0; min-width: 0; display: block; text-decoration: none; color: var(--ink); position: relative; border-radius: 4px; container: col / inline-size; }
.col-plot { display: block; position: relative; height: var(--h); }
.col-bar { position: absolute; left: 50%; bottom: 0; width: min(42px, 78%); transform: translateX(-50%); background: var(--c); border-radius: 4px 4px 0 0; min-height: 2px; }
.col:hover .col-bar, .col:focus-visible .col-bar { filter: brightness(1.12); }
/* the interval: one pixel wide, no end caps; muted above the column top, the on-column colour inside it */
.col-ivl { position: absolute; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(to top, var(--on-col-soft) 0 var(--split, 0%), var(--muted) var(--split, 0%) 100%); }
.col-dot { position: absolute; left: 50%; width: 13px; height: 13px; margin: 0 0 -6.5px -6.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.col:hover .col-dot, .col:focus-visible .col-dot { box-shadow: 0 0 0 2px var(--ink); }
/* the value sits above its mark unless the column has room for it (see the container queries below) */
.col-val { position: absolute; left: 50%; bottom: calc(var(--hi) + 3px); transform: translateX(-50%); font-size: 14px; line-height: 18px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 0 2px; border-radius: 2px; background: var(--card); /* a grid or average line does not run through the digits */ }
.colchart.small .col-val { font-size: 13px; }
/* inside a column the value drops its asterisk, which the name below and the group caption carry.
   44px: a 34px column holds a three-digit score or a four-digit rating with room to spare */
@container col (min-width: 44px) {
  .val-in .col-val { bottom: calc(var(--lo) - 24px); padding: 0; color: var(--on-col); background: none; }
  .val-in .col-ast { display: none; }
}
.col-meta { display: block; height: 24px; line-height: 24px; text-align: center; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-meta.strong { font-size: 14px; font-weight: 650; color: var(--ink); }
/* in a slot under 44px (a 1280px screen) the strong row steps down a size, so rank ranges stay apart */
@container col (max-width: 43.9px) {
  .col-meta.strong { font-size: 13px; }
}
.col-plot + .col-meta { margin-top: 8px; }
/* a lab square under the column, then the name turned 60 degrees and ending under the square.
   The box is 106px wide and the name takes at most two lines, so its reach is fixed. */
.col-name { display: block; position: relative; height: 136px; }
.col-name .chip { position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin: 0 0 0 -5px; border-radius: 2px; }
.col-name-box { position: absolute; right: 50%; top: 29px; width: 106px; height: 0; display: flex; align-items: center; justify-content: flex-end; }
.col-name-text { transform: rotate(-60deg); transform-origin: 100% 50%; font-size: 14px; line-height: 1.1; text-align: right; text-wrap: balance; overflow-wrap: anywhere; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.col:hover .col-name-text { text-decoration: underline; }

/* ---------- row chart ---------- */
.rowchart { --lw: 200px; --vw: 150px; }
.rows { list-style: none; margin: 8px 0 0; padding: 0; }
.row { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); column-gap: 14px; align-items: center; min-height: 36px; }
.row-group { font-size: 13px; color: var(--ink-2); padding: 14px 0 4px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.row-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 14px; }
.row-label .chip { margin-right: 0; }
.row-label a { text-decoration: none; }
.row-label a:hover { text-decoration: underline; }
.row-track { position: relative; height: 26px; }
.row-track .grid { position: absolute; top: 0; bottom: 0; border-left: 1px dotted var(--axis); opacity: 0.7; }
.row-track .grid.base { border-left-style: solid; opacity: 1; }
.row-track .ref { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--refline); }
.row-bar { position: absolute; left: 0; top: 50%; height: 12px; margin-top: -6px; background: var(--c, var(--neutral-mark)); border-radius: 0 4px 4px 0; min-width: 2px; }
/* the interval, as on the column charts: one pixel, no end caps; muted past the end of the bar, the on-column colour inside it */
.row-ivl { position: absolute; top: 50%; height: 1px; min-width: 1px; background: linear-gradient(to right, var(--on-col-soft) 0 var(--split, 0%), var(--muted) var(--split, 0%) 100%); }
.row-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 2px var(--surface); }
.row-val { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; }
.row-val strong { font-weight: 650; font-size: 14px; }
.row-val .sub { font-size: 13px; color: var(--ink-2); }
.row-meta { display: none; }
.rows-axis { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); column-gap: 14px; font-size: 13px; color: var(--ink-2); }
.rows-axis > div { position: relative; height: 20px; }
.rows-axis span { position: absolute; top: 2px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.rows-axis span:first-child { transform: none; }
.rows-axis-title { font-size: 13px; color: var(--ink-2); margin: 2px 0 0 calc(var(--lw) + 14px); }
.rowchart.share { --lw: 190px; --vw: 60px; }
.rowchart.compact { --lw: 140px; --vw: 100px; }
.share .row { min-height: 28px; }
.share .row-track { height: 20px; }
.share .row-bar { height: 8px; margin-top: -4px; background: var(--neutral-mark); border-radius: 0 4px 4px 0; }
.share .hl .row-bar { background: var(--c, var(--ink)); }
.share .hl .row-val, .share .hl .row-label { font-weight: 600; }

/* ---------- scatter, trend, week bars ---------- */
.scatter { margin: 8px 0 0; }
.sc-ytitle, .sc-xtitle { font-size: 13px; color: var(--ink-2); }
.sc-xtitle { margin: 4px 0 0 34px; text-align: center; }
.sc-body { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
.sc-y { position: relative; }
.sc-y span { position: absolute; right: 7px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-plot { position: relative; padding-right: 8px; }
.scatter-svg, .trend, .weekbars { overflow: visible; }
.scatter .legend { margin-left: 34px; }
svg .grid { stroke: var(--grid); stroke-width: 1; }
svg .baseline { stroke: var(--axis); stroke-width: 1; }
svg .ref { stroke: var(--refline); stroke-width: 2; opacity: 0.75; }
svg .ticklabel { fill: var(--muted); font: 12px var(--f-sans); font-variant-numeric: tabular-nums; }
svg .hit { fill: transparent; }
/* the scatter: dotted grid both ways, a dashed average named at the right, 13px text */
.scatter-svg .grid { stroke: var(--axis); stroke-dasharray: 1 3; opacity: 0.8; }
.scatter-svg .ref { stroke-width: 1; stroke-dasharray: 5 4; opacity: 1; }
.scatter-svg .ticklabel, .scatter-svg .reflabel { fill: var(--ink-2); font: 13px var(--f-sans); font-variant-numeric: tabular-nums; }
.scatter-svg .whisker { stroke: var(--c, var(--ink)); stroke-width: 1.5; opacity: 0.28; }
.pt { cursor: pointer; outline: none; }
.pt .dot { fill: var(--c, var(--ink)); stroke: var(--surface); stroke-width: 1.5; }
.pt.low .dot { fill: var(--surface); stroke: var(--c, var(--ink)); stroke-width: 2.5; }
.pt:hover .dot, .pt:focus-visible .dot { stroke: var(--ink); }
/* the halo is the panel colour, so a line behind a name is broken, not struck through it */
.ptlabel { fill: var(--ink); font: 13px var(--f-sans); pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.scatter.compact .ptlabel, .scatter.compact .ticklabel, .scatter.compact .reflabel { font-size: 12px; }
.trend .line { stroke: var(--c, var(--ink)); stroke-width: 2; stroke-linecap: round; }
.trend .idx { fill: var(--c, var(--ink)); stroke: var(--surface); stroke-width: 2; }
.trend .idx.low { fill: var(--surface); stroke: var(--c, var(--ink)); }
.trend .wk { fill: var(--neutral-mark); stroke: var(--surface); stroke-width: 2; }
.trend .wk.low { fill: var(--surface); stroke: var(--neutral-mark); }
.trend .endlabel { fill: var(--ink); font: 650 14px var(--f-sans); font-variant-numeric: tabular-nums; }
/* the model page's charts take the home page's grid and text: dotted lines, 13px labels in the secondary ink */
.trend .grid, .weekbars .grid { stroke: var(--axis); stroke-dasharray: 1 3; opacity: 0.8; }
.trend .ticklabel, .weekbars .ticklabel { fill: var(--ink-2); font-size: 13px; }
.trend .week, .weekbars .week { outline: none; }
.trend .week:hover .cross, .trend .week:focus-visible .cross { stroke: var(--axis); }
.trend .cross { stroke: transparent; stroke-width: 1; }
.weekbars .bar { fill: var(--neutral-mark); }
.weekbars .week:hover .bar, .weekbars .week:focus-visible .bar { fill: var(--ink-2); }
.chart-title { font-size: 13px; color: var(--ink-2); margin: 16px 0 6px; }

.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.45; max-width: 280px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); }
.tip-title { font-weight: 600; }
.tip-sub { opacity: 0.78; }
.tip-title + .tip-row, .tip-sub + .tip-row { margin-top: 3px; }
.tip-row { display: flex; gap: 8px; align-items: baseline; }
.tip-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip-row span { opacity: 0.78; }

.more { margin-top: 14px; font-size: 13.5px; }
.more summary { cursor: pointer; font-weight: 600; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; }
.plain { font-size: 14px; }
.plain th, .plain td { text-align: left; padding: 9px 16px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.plain thead th { font-weight: 600; font-size: 13px; color: var(--ink-2); white-space: nowrap; vertical-align: bottom; }
.plain tbody th { font-weight: 600; white-space: nowrap; }
.plain tbody th a { text-decoration: none; }
.plain tbody th a:hover { text-decoration: underline; }
.plain td.num, .plain th.num { white-space: nowrap; text-align: right; }
.plain td.ivl { min-width: 150px; }
.plain .group th { padding-top: 18px; font-weight: 400; font-size: 13px; color: var(--ink-2); white-space: normal; }
.plain .lab { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.mini-track { position: relative; height: 14px; min-width: 120px; background: linear-gradient(var(--track), var(--track)) center / 100% 2px no-repeat; }
.mini-track .band { position: absolute; top: 4px; height: 6px; border-radius: 3px; background: var(--c, var(--ink)); opacity: 0.38; min-width: 2px; }
.mini-track .dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 2px var(--surface); }
.ivl-text { display: block; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

/* ---------- home page ---------- */
/* Two columns: the headline, with the filter row under its sub-line, beside the notes. The filter
   row comes last in the page source (after the notes) and is placed by the grid, so the space
   beside the notes is used and the keyboard order is unchanged. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: auto 1fr; column-gap: 40px; padding: 40px 0 0; }
.hero-head { grid-column: 1; grid-row: 1; }
.updates { grid-column: 2; grid-row: 1 / span 2; }
.hero-filters { grid-column: 1; grid-row: 2; align-self: start; margin-top: 32px; min-height: 36px; }
.hero-filters .filters { margin: 0; }
.hero h1 { font-size: 76px; max-width: 11em; text-wrap: balance; }
.hero-sub { font-size: 18px; line-height: 1.5; margin: 18px 0 0; max-width: 30em; }
.update { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.update:last-child { border-bottom: 0; margin-bottom: 0; }
.update-label { display: block; font-size: 12.5px; color: var(--plum); font-weight: 600; margin-bottom: 4px; }
.update-title { font-size: 17px; }
.update p { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }
/* the two summary cards under the Sentiment Index: head-to-head and mindshare, side by side from 1000px */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 22px; }
.chartcard { display: flex; flex-direction: column; }
.chartcard .card-sub { margin-bottom: 0; }
.chartcard .card-more { margin: auto 0 0; padding-top: 10px; font-size: 14px; }
.empty { color: var(--ink-2); padding: 18px 0; }

/* ---------- model page ---------- */
.page { padding-top: 6px; }
.back { display: inline-block; font-size: 14px; margin-bottom: 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; max-width: none; }
.crumbs .chip { margin-right: 0; }
.crumbs .sep { color: var(--rule-strong); }
.mp-head h1 { font-size: 46px; line-height: 1.08; margin-bottom: 8px; }
.mp-head .note { margin-bottom: 22px; }
.stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 172px; }
.stat-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.stat:first-child .stat-row { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 6px 14px; }
.stat-scale { align-self: stretch; }
.stat-scale .mini-track { height: 18px; }
.stat-scale .mini-track .band { top: 5px; height: 8px; border-radius: 4px; }
.stat-scale .mini-track .dot { top: 3px; width: 12px; height: 12px; margin-left: -6px; }
.stat-scale .mini-track .avg { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--refline); }
.stat-scale .scale-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.big { font: 600 40px/0.95 var(--f-sans); letter-spacing: -0.03em; }
.big.hero-fig { font-size: 60px; }
.big.none { color: var(--muted); font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.big-note { font-size: 13px; line-height: 1.45; color: var(--ink-2); padding-bottom: 2px; }
.mp-note { background: var(--note-bg); border-left: 3px solid var(--note-edge); border-radius: 0 6px 6px 0; padding: 9px 12px; font-size: 14px; margin: 14px 0 0; max-width: none; }
.mp-bw { margin: 18px 0 0; font-size: 15px; max-width: none; }
.mp-bw strong { font-weight: 600; }
.mp-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; align-items: start; }
.mp-cols.single { grid-template-columns: minmax(0, 720px); }
.mp-block { border: 1px solid var(--rule); border-radius: 8px; padding: 20px 18px 18px; margin-bottom: 22px; background: var(--card); min-width: 0; }
.mp-block h2 { font: 400 26px/1.2 var(--f-serif); margin-bottom: 6px; }
.mp-block h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 18px 0 6px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; margin: 8px 0 10px; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink-2); }
.facts dd .num { color: var(--ink); font-weight: 600; }
.mp-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.postlist { list-style: none; margin: 0; padding: 0; }
.post { padding: 10px 0 10px 13px; border-left: 3px solid var(--good); margin: 0 0 10px; }
.post.neg { border-color: var(--critical); }
.post-top { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; font-size: 14px; }
.post-top .src { font-weight: 600; }
.post-meta { font-size: 13px; color: var(--muted); margin: 2px 0 4px; }
.post a { font-size: 14px; font-weight: 600; }
.stance { display: inline-flex; gap: 5px; align-items: baseline; color: var(--ink); }
.stance i { font-style: normal; font-weight: 700; color: var(--good); }
.post.neg .stance i { color: var(--critical); }

/* ---------- methodology ---------- */
.method-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 14px; }
.toc { position: sticky; top: 18px; font-size: 14px; }
.toc h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.prose { max-width: 800px; font-size: 16px; line-height: 1.6; }
.prose h1 { font-size: 46px; margin-bottom: 18px; }
.prose h2 { font: 400 28px/1.2 var(--f-serif); margin: 38px 0 10px; scroll-margin-top: 14px; }
.prose h3 { font: 600 16px/1.3 var(--f-sans); margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; max-width: 72ch; }
.prose li { margin-bottom: 7px; }
.prose strong { font-weight: 600; }
.prose .table-wrap { margin: 6px 0 18px; }
.prose table { font-size: 14.5px; width: auto; min-width: min(100%, 520px); }
.prose th, .prose td { text-align: left; padding: 8px 22px 8px 0; border-bottom: 1px solid var(--rule); }
.prose thead th { font-weight: 600; font-size: 13.5px; color: var(--ink-2); border-bottom-color: var(--rule-strong); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; padding: 30px 0 0; }
  .hero-head, .updates, .hero-filters { grid-column: 1; grid-row: auto; }
  .hero-filters { margin-top: 0; }
  .hero h1 { font-size: 60px; }
  .updates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .update { border-bottom: 0; margin-bottom: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .mp-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .method-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .toc { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
}
@media (max-width: 999px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  h1 { font-size: 36px; }
  .site-head { flex-wrap: wrap; gap: 10px; padding: 14px 0 12px; }
  .navpill { order: 3; margin: 0; }
  .theme-btn { margin-left: auto; }
  .hero h1 { font-size: 42px; }
  .hero-sub { font-size: 16px; }
  .updates { grid-template-columns: 1fr; gap: 14px; }
  .sec-head { margin-top: 34px; }
  .sec-head h2 { font-size: 30px; }
  .panel-body { padding: 16px 12px 16px; }
  .panel-tabs { padding: 8px 10px; }
  .card { padding: 14px 12px; }
  .srcmenu { max-width: calc(100vw - 28px); }
  .mp-head h1 { font-size: 32px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { min-height: 0; }
  .big.hero-fig { font-size: 52px; }
  .mp-block { padding: 16px 12px 14px; }
  .mp-posts { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 15.5px; }
  .prose h1 { font-size: 32px; }
  .prose h2 { font-size: 24px; margin-top: 30px; }
  /* row charts stack: label and value on one line, the bar under them, counts under that */
  .rowchart, .rowchart.share, .rowchart.compact { --lw: 0px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; padding: 7px 0 5px; row-gap: 1px; border-bottom: 1px solid var(--rule); }
  .row:last-child { border-bottom: 0; }
  .row-track { grid-column: 1 / -1; grid-row: 2; }
  .row-val { flex-direction: row; align-items: baseline; gap: 8px; text-align: right; }
  .row-val .sub.wide { display: none; }
  .row-meta { display: flex; flex-wrap: wrap; gap: 0 14px; grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--ink-2); }
  .rows-axis { grid-template-columns: minmax(0, 1fr); }
  .rows-axis > div:first-child, .rows-axis > div:last-child { display: none; }
  .rows-axis-title { margin-left: 0; }
  .share .row { border-bottom: 0; padding: 3px 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .tab, .navpill a { transition: color 0.12s, border-color 0.12s, background-color 0.12s; }
}
@media (forced-colors: active) {
  .col-bar, .col-val, .col-ivl, .row-bar, .row-ivl, .col-dot, .row-dot, .chip, .mini-track .dot, .mini-track .band { forced-color-adjust: none; }
}