/* ---------- Fonts + reset ---------- */
:root {
  --bg: #f5f1ea;
  --bg-2: #efeadf;
  --ink: #1c1a17;
  --ink-2: #3a3730;
  --ink-3: #6b665c;
  --ink-dim: #9a948a;
  --rule: #d9d2c4;
  --rule-strong: #b8b0a0;
  --teal: #4a6e6e;

  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --mono: var(--font-mono);
  --display-weight: 500;
  --display-tracking: -0.01em;

  /* The page gutter — the inline padding of .container, and so the left edge
     every line of body copy sits on. It is a variable because the chart figure
     has to either match it (head, caption) or cancel it (the full-bleed plot
     block), and it changes at two breakpoints. Anything hardcoding the number
     drifts the moment one breakpoint moves; see the overrides at
     styles.css:1870 (≤760 → 20px) and pages.css:1126 (≤560 → 22px). */
  --page-gutter: 40px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Always reserve the scrollbar gutter so page width (and the centered
   .container) doesn't shift between scrolling and non-scrolling pages —
   same rule as pages.css; here it covers the homepage. */
html { overflow-y: scroll; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
html[data-content="center"] .container { max-width: 860px; }
html[data-content="center"] .site-header .container { max-width: 1200px; }
html[data-content="center"] .lb-wrap > *,
html[data-content="center"] .trend-wrap > * { max-width: 860px; }
html[data-content="center"][data-content-snug="on"] .container { max-width: 1040px; }
html[data-content="center"][data-content-snug="on"] .site-header .container { max-width: 1200px; }
html[data-content="center"][data-content-snug="on"] .lb-wrap > *,
html[data-content="center"][data-content-snug="on"] .trend-wrap > * { max-width: 1040px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dim { color: var(--ink-dim); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
html[data-ds-eyebrow="off"] .ds-eyebrow { display: none; }

/* tweak: larger small/UI text */
html[data-ui-text="large"] .mono-small,
html[data-ui-text="large"] .eyebrow { font-size: 13px; }
html[data-ui-text="large"] .nav-link,
html[data-ui-text="large"] .nav-dd-trigger { font-size: 13.5px; }
html[data-ui-text="large"] .filter-label { font-size: 12.5px; }
html[data-ui-text="large"] .filter-chip { font-size: 13.5px; }
html[data-ui-text="large"] .lb-filter-meta { font-size: 12.5px; }
html[data-ui-text="large"] .lmca-arxiv { font-size: 13px; }
html[data-ui-text="large"] .btn-apply { font-size: 13.5px; }
html[data-ui-text="large"] .dd-trigger,
html[data-ui-text="large"] .dd-item { font-size: 13.5px; }
html[data-ui-text="large"] .lb-sub-label { font-size: 12.5px; }
html[data-ui-text="large"] .col-rank { font-size: 15.5px; }
html[data-ui-text="large"] .score-num { font-size: 20px; }
html[data-ui-text="large"] .lb-table thead th { font-size: 12.5px; }
html[data-ui-text="large"] .wordmark { font-size: 16.5px; }
html[data-ui-text="large"] .score-label,
html[data-ui-text="large"] .chart-model-name { font-size: 1.06em; }
html[data-ui-text="large"] .lb-caret { font-size: 1.05em; }

/* arXiv link — styles switch on html[data-arxiv-style] */
.lmca-arxiv-wrap { margin-top: 18px; margin-bottom: 30px; }
.ds-hero-links { display: flex; gap: 18px; align-items: center; margin: 18px 0 26px; }

/* eyebrow row with resource links (link position = top) */
.ds-hero-toprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.ds-hero-toprow .ds-hero-links,
.ds-hero-toprow .lmca-arxiv-wrap { margin: 0; flex: none; white-space: nowrap; }

/* eyebrow + inline contributors group (kept together on the left) */
.ds-hero-eyebrowgroup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; min-width: 0; }

/* contributors placement: inline next to the eyebrow, dot separator, eyebrow font */
html[data-contributors="eyebrowInline"] .contributors--eyebrowInline {
  display: inline-flex;
  align-items: baseline;
  margin: 0 0 18px;
}
html[data-contributors="eyebrowInline"] .contributors--eyebrowInline .contributors-label { display: none; }
html[data-contributors="eyebrowInline"] .contributors--eyebrowInline .contributors-names {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Separator between the eyebrow and the inline contributor list. It hangs off
   the eyebrow, not off the names, so a page with no eyebrow does not render a
   leading stray dot. */
html[data-contributors="eyebrowInline"] .ds-hero-eyebrowgroup .ds-eyebrow::after {
  content: "\00B7";
  margin: 0 10px;
  color: var(--ink-dim);
}

/* link placement: show only the active variant */
.ds-hero-links--top, .ds-hero-links--inline,
.lmca-arxiv-wrap--top, .lmca-arxiv-wrap--inline { display: none; }
/* The "top" variant is phone-only; its display:flex lives in the max-width:760px
   block rather than here. On desktop the hero's top-right arXiv/GitHub links are
   dropped: the same links already repeat at the end of the intro
   (.page-end-links--hero), and one copy there reads better than two above the
   fold. Phone keeps them, where they sit inline after the eyebrow as
   "ACCoRD · GitHub" and cost no extra height — and where removing them would
   strand the eyebrow's separator dot, since the inline contributor list that dot
   was written for is hidden at that width. */
html[data-link-pos="below"] .ds-hero-links--inline,
html[data-link-pos="right"] .ds-hero-links--inline,
html[data-link-pos="below"] .lmca-arxiv-wrap--inline,
html[data-link-pos="right"] .lmca-arxiv-wrap--inline { display: flex; }

/* tweak: links to the right of the title (positioned by the last line, title unchanged) */
html[data-link-pos="right"] .ds-hero-titlerow {
  position: relative;
}
html[data-link-pos="right"] .ds-hero-titlerow .ds-hero-title,
html[data-link-pos="right"] .ds-hero-titlerow .subhero-title {
  margin-right: 200px;
}
html[data-link-pos="right"] .ds-hero-titlerow .ds-hero-links,
html[data-link-pos="right"] .ds-hero-titlerow .lmca-arxiv-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  flex: none;
  white-space: nowrap;
}
.lmca-arxiv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.lmca-arxiv:hover { text-decoration: underline; }
.lmca-arxiv-arrow {
  /* Drawn as a mask, not the ↗ character (U+2197). That codepoint is in the
     Unicode emoji set, so iOS renders it as a colour emoji tile instead of a
     text glyph. A mask renders identically on every platform and still takes
     the link's colour via currentColor. */
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 4px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.4 7.6 7.6 2.4M3.7 2.4h3.9v3.9' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.4 7.6 7.6 2.4M3.7 2.4h3.9v3.9' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* inline text link (e.g. a dataset name in running text) */
.text-link {
  color: var(--teal);
  text-decoration: none;
  transition: color 0.15s;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* outlined button (subtler + smaller than Apply for access) */
html[data-arxiv-style="button"] .lmca-arxiv {
  border: 1px solid var(--rule-strong);
  padding: 5px 11px;
  color: var(--ink-2);
  transition: border-color .15s, color .15s;
}
html[data-arxiv-style="button"] .lmca-arxiv:hover {
  text-decoration: none;
  border-color: var(--teal);
  color: var(--teal);
}

/* plain underlined serif link */
html[data-arxiv-style="underline"] .lmca-arxiv {
  display: inline;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html[data-arxiv-style="underline"] .lmca-arxiv-arrow { display: inline-block; margin-left: 3px; text-decoration: none; }

/* page-end links: same page links repeated at the bottom. Variants switch on
   html[data-end-links]. The "natural-reading" variants (read / deeper / sources)
   left-align in the prose column and lead in with a motivating phrase so the eye
   continues straight from the body text into the links. Wording comes from CSS so a
   single markup works across pages. */
.page-end-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 8px 0 4px;
  padding-top: 30px;
}
/* Hero variant: the same row of links, but at the end of the intro rather than
   the page foot, and genuinely centred — the foot version only reads as centred
   because .lmca-doc is a narrow centred column, which the hero container is not. */
.page-end-links--hero { justify-content: center; padding-top: 22px; }
/* Straight under the access button, drop the 22px so the link tucks under it.
   The remaining air is mostly .lmca-block--apply's own padding-bottom
   (pages.css), not this — 6px here plus 16px there. */
.lmca-block--apply + .page-end-links--hero { padding-top: 6px; margin-top: 0; }
.page-end-label {
  display: none;
  font-family: var(--font-body);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.5;
}
.page-end-label::before { content: ""; }

/* --- centered family --- */
html[data-end-links="plain"] .page-end-links { justify-content: center; }

html[data-end-links="more"] .page-end-links { justify-content: center; gap: 6px 14px; }
html[data-end-links="more"] .page-end-label { display: inline; color: var(--ink-3); font-size: 16px; }
html[data-end-links="more"] .page-end-label::before { content: "More info:"; }

html[data-end-links="caption"] .page-end-links { justify-content: center; }
html[data-end-links="caption"] .page-end-label {
  display: block;
  flex-basis: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
html[data-end-links="caption"] .page-end-label::before { content: "More info"; }

html[data-end-links="rule"] .page-end-links {
  justify-content: center;
  border-top: 1px solid var(--rule);
}

/* --- natural-reading family: left-aligned, reads as the closing line --- */
html[data-end-links="read"] .page-end-links,
html[data-end-links="deeper"] .page-end-links,
html[data-end-links="sources"] .page-end-links { justify-content: flex-start; gap: 6px 14px; }

html[data-end-links="read"] .page-end-label,
html[data-end-links="deeper"] .page-end-label,
html[data-end-links="sources"] .page-end-label { display: inline; }

/* links sit in the sentence at body size in the natural variants */
html[data-end-links="read"] .lmca-arxiv,
html[data-end-links="deeper"] .lmca-arxiv,
html[data-end-links="sources"] .lmca-arxiv { font-size: 18px; }

html[data-end-links="read"] .page-end-label::before { content: "Keep reading —"; }
html[data-end-links="deeper"] .page-end-label::before { content: "Want to go deeper? Read the full write-up:"; }
html[data-end-links="sources"] .page-end-label::before { content: "Read the paper and explore the data:"; }

/* "More info:" left-aligned, links inline right after (like the natural variants) */
html[data-end-links="moreLeft"] .page-end-links { justify-content: flex-start; gap: 6px 14px; }
html[data-end-links="moreLeft"] .page-end-label { display: inline; color: var(--ink-3); }
html[data-end-links="moreLeft"] .page-end-label::before { content: "More info:"; }
html[data-end-links="moreLeft"] .lmca-arxiv { font-size: 18px; }

/* "More info:" pinned left, links centered in the row */
html[data-end-links="moreSplit"] .page-end-links { justify-content: center; gap: 6px 14px; position: relative; }
html[data-end-links="moreSplit"] .page-end-label {
  display: inline;
  position: absolute;
  left: 0;
  top: 30px;
  color: var(--ink-3);
}
html[data-end-links="moreSplit"] .page-end-label::before { content: "More info:"; }
html[data-end-links="moreSplit"] .lmca-arxiv { font-size: 18px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: var(--brand-flow, row);
  height: var(--header-h, 68px);
}
.wordmark {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark--full {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Teal bar header --- */
.header--tealbar .tealbar {
  background: var(--teal);
  color: var(--bg);
}
.tealbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  color: rgba(245, 241, 234, 0.92);
}
.tealbar-cta { color: var(--bg); }
.header--tealbar { background: var(--bg); }

/* --- Brand lockup (CRI + Redwood) --- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-direction: var(--brand-order, row);
}
.brand-lockup .wordmark { flex: none; }
.brand-divider {
  width: 1px;
  height: 20px;
  background: var(--rule-strong);
  flex: none;
}
.redwood-logo {
  height: 18px;
  width: 69px;
  display: block;
  flex: none;
  position: relative;
  top: 0;
  background-color: var(--redwood-ink, var(--teal));
  -webkit-mask: url(assets/redwood_logo.png) no-repeat center / contain;
  mask: url(assets/redwood_logo.png) no-repeat center / contain;
}
.header--inverted .brand-divider { background: rgba(245, 241, 234, 0.4); }
.header--inverted .redwood-logo { background-color: var(--bg); }
.brand-lockup--logo-only .redwood-logo { height: 25px; width: 96px; }

/* --- Accent dot header --- */
.wordmark--accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
}
.header--accent .nav-link:hover {
  color: var(--bg);
  background: var(--teal);
  padding: 6px 10px;
  margin: 0 -10px;
}
.header--accent .nav-link.is-active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  border-bottom-width: 2px;
}

/* --- Inverted header --- */
.header--inverted {
  background: var(--teal);
  border-bottom: 1px solid var(--teal);
}
.header--inverted .wordmark { color: var(--bg); }
.header--inverted .nav-link {
  color: rgba(245, 241, 234, 0.75);
}
.header--inverted .nav-link:hover { color: var(--bg); }
.header--inverted .nav-link.is-active {
  color: var(--bg);
  border-bottom-color: var(--bg);
}

.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-link:hover { color: var(--teal); }
.nav-link.is-active { color: var(--teal); border-bottom-color: var(--teal); }

/* Datasets dropdown in the nav */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.nav-dd-trigger:hover,
.nav-dd.is-open .nav-dd-trigger { color: var(--teal); }
.nav-dd.is-active .nav-dd-trigger { color: var(--teal); border-bottom-color: var(--teal); }
/* tweak: tinted pill behind the "Datasets" trigger */
html[data-ds-nav-bg="on"] .nav-dd-trigger {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
  border-bottom-color: transparent;
}
html[data-ds-nav-bg="on"] .nav-dd-trigger:hover,
html[data-ds-nav-bg="on"] .nav-dd.is-open .nav-dd-trigger {
  background: color-mix(in srgb, var(--teal) 20%, transparent);
}
html[data-ds-nav-bg="on"] .nav-dd.is-active .nav-dd-trigger { border-bottom-color: transparent; }
.nav-dd-caret { font-size: 8px; color: var(--ink-3); transition: transform .18s, color .15s; }
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); color: var(--teal); }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  z-index: 40;
  width: 360px;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  padding: 4px;
  display: none;
}
.nav-dd.is-open .nav-dd-menu { display: block; }
.nav-dd-item { display: block; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.nav-dd-menu--compact { width: 248px; padding: 4px; }
.nav-dd-menu--compact .nav-dd-item { padding: 11px 14px; }
.nav-dd-menu--compact .nav-dd-name {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.nav-dd-item:last-child { border-bottom: 0; }
.nav-dd-item:hover { background: var(--hover-wash, rgba(74, 110, 110, 0.05)); }
.nav-dd-item.is-active .nav-dd-name { color: var(--teal); }

/* ---- Datasets menu style tweak ---- */
/* Flat: drop the popover shadow, sit closer to the trigger, lighter hairline */
html[data-ds-menu="flat"] .nav-dd-menu {
  top: calc(100% + 7px);
  box-shadow: none;
  border-color: var(--rule);
}
/* Editorial: serif names, roomier rows, hairline-divided, no shadow */
html[data-ds-menu="editorial"] .nav-dd-menu {
  top: calc(100% + 8px);
  box-shadow: none;
  border-color: var(--rule-strong);
  width: 268px;
  padding: 0;
}
html[data-ds-menu="editorial"] .nav-dd-menu--compact .nav-dd-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
html[data-ds-menu="editorial"] .nav-dd-menu--compact .nav-dd-item:last-child { border-bottom: 0; }
html[data-ds-menu="editorial"] .nav-dd-menu--compact .nav-dd-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 500);
  font-size: 16px;
  letter-spacing: -0.005em;
}
.nav-dd-name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 500);
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink);
  transition: color .15s;
}
.nav-dd-item:hover .nav-dd-name { color: var(--teal); }
.nav-dd-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 4px;
}
.header--inverted .nav-dd-trigger { color: rgba(245, 241, 234, 0.75); }
.header--inverted .nav-dd-trigger:hover,
.header--inverted .nav-dd.is-open .nav-dd-trigger { color: var(--bg); }

/* Nav separator */
.nav-sep {
  width: 1px;
  height: 14px;
  background: var(--rule);
  flex-shrink: 0;
}
.header--inverted .nav-sep { background: rgba(245, 241, 234, 0.2); }

/* Two-line nav labels (descriptive benchmark names) */
.nav-link--stack {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.18;
  text-align: left;
  max-width: none;
  padding-top: 2px;
  padding-bottom: 3px;
}
.nav-link--stack .nav-link-sub { color: var(--ink-3); transition: color .15s; }
.nav-link--stack:hover .nav-link-sub { color: var(--teal); }
.nav-link--stack.is-active .nav-link-sub { color: var(--teal); }
.header--inverted .nav-link--stack .nav-link-sub { color: rgba(245, 241, 234, 0.55); }
.header--inverted .nav-link--stack:hover .nav-link-sub,
.header--inverted .nav-link--stack.is-active .nav-link-sub { color: var(--bg); }

/* ---------- Dataset nav group treatments ---------- */
.nav-ds-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 28px;
}

/* "Datasets" kicker label before the group */
.nav-ds-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
  user-select: none;
}
.header--inverted .nav-ds-kicker { color: rgba(245, 241, 234, 0.5); }

/* Group label placements */
.nav-ds-kicker--inline { align-self: center; }

/* Row above / below: links stay on the nav line (aligned with the other items);
   the label is lifted out of flow into reserved header padding so it never
   pushes the links off-axis. */
.nav-ds-group--labelled { position: relative; }
.nav-ds-kicker--stacked {
  position: absolute;
  left: 0;
  line-height: 1;
  white-space: nowrap;
}
.nav-ds-group--label-above .nav-ds-kicker--stacked {
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-strong);
}
.nav-ds-group--label-below .nav-ds-kicker--stacked {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  text-align: center;
  padding-top: 5px;
  border-top: 1px solid var(--rule-strong);
}
.header--inverted .nav-ds-group--label-above .nav-ds-kicker--stacked,
.header--inverted .nav-ds-group--label-below .nav-ds-kicker--stacked { border-color: rgba(245, 241, 234, 0.4); }

/* Reserve header room so the lifted label breathes instead of hugging the edge */
.site[data-ds-label="above"] .header-inner { padding-top: 28px; }
.site[data-ds-label="below"] .header-inner { padding-bottom: 28px; }
/* Center only the logo within the full header height — the one-sided reserved
   padding above pushes it down, so lift it back by half that padding. The nav
   links are unaffected. */
.site[data-ds-label="above"] .brand-lockup { transform: translateY(-14px); }
.site[data-ds-label="below"] .brand-lockup { transform: translateY(14px); }

/* ============ Navbar fit tweak (consistent across all pages) ============ */
/* When datasets is a dropdown there's no stacked label — drop the reserved
   label padding + logo nudge so the bar is compact and the logo aligns with text. */
html[data-ds-nav="dropdown"] .site[data-ds-label="above"] .header-inner,
html[data-ds-nav="dropdown"] .site[data-ds-label="below"] .header-inner { padding-top: 0; padding-bottom: 0; }
html[data-ds-nav="dropdown"] .site[data-ds-label] .brand-lockup { transform: none; }

/* Height is authoritative on every page (overrides the --header-h slider) */
html[data-nav-fit="roomy"] .header-inner { height: 64px; }
html[data-nav-fit="snug"]  .header-inner { height: 50px; }

@media (min-width: 681px) {
  /* Roomy: everything vertically centered; active underline floats above the bottom rule */
  html[data-nav-fit="roomy"] .header-inner { align-items: center; }

  /* Snug: nav links run full height so the active underline sits ON the header's bottom rule */
  html[data-nav-fit="snug"] .header-inner { align-items: stretch; }
  html[data-nav-fit="snug"] .brand-lockup,
  html[data-nav-fit="snug"] .nav-dd,
  html[data-nav-fit="snug"] .nav-ds-group,
  html[data-nav-fit="snug"] .nav-ds-kicker--inline { align-self: center; }
  html[data-nav-fit="snug"] .nav { align-items: stretch; }
  html[data-nav-fit="snug"] .nav > .nav-link {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -1px;
  }
}

/* Sublabel "label on row": main label sits on the nav baseline, "dataset" hangs below, made subtle */
.nav--ds-baseline { align-items: baseline; }
.nav--ds-baseline .nav-link--stack { padding-top: 0; }
.nav--ds-baseline .nav-link-sub {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin-top: 1px;
}

/* Pill: soft filled container hugging the three links */
.nav-ds-group--pill {
  gap: 18px;
  padding: 2px 14px;
  background: var(--bg-2);
  border-radius: 999px;
}
.nav-ds-group--pill .nav-link {
  padding-top: 1px;
  padding-bottom: 1px;
  border-bottom: 0;
}
.nav-ds-group--pill.nav-ds-group--labelled.nav-ds-group--label-above .nav-ds-kicker--stacked {
  border-bottom: 0;
  padding-bottom: 0;
  bottom: calc(100% + 1px);
}
.nav-ds-group--pill.nav-ds-group--labelled.nav-ds-group--label-below .nav-ds-kicker--stacked {
  border-top: 0;
  padding-top: 0;
  top: calc(100% + 1px);
}
.header--inverted .nav-ds-group--pill { background: rgba(245, 241, 234, 0.12); }

/* Brackets: mono [ … ] framing the group */
.nav-ds-group--bracket { gap: 22px; }
.nav-ds-group--bracket::before,
.nav-ds-group--bracket::after {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-3);
  font-weight: 400;
}
.nav-ds-group--bracket::before { content: "["; }
.nav-ds-group--bracket::after { content: "]"; }
.header--inverted .nav-ds-group--bracket::before,
.header--inverted .nav-ds-group--bracket::after { color: rgba(245, 241, 234, 0.45); }

/* Dot marker before each dataset link */
.nav-ds-group--dot .nav-ds-link { display: inline-flex; align-items: center; }
.nav-ds-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 8px;
  flex-shrink: 0;
}
.header--inverted .nav-ds-dot { background: var(--bg); }

/* Teal tint: dataset links carry the accent color by default */
.nav-ds-group--tint .nav-ds-link { color: var(--teal); }
.nav-ds-group--tint .nav-ds-link:hover { opacity: 0.7; }
.header--inverted .nav-ds-group--tint .nav-ds-link { color: var(--bg); }

/* Tweak: dataset group in a distinct (non-teal) color */
/* "Datasets" kicker + its underline always take the accent when on.
   The three links take it only when scope is "all" (not "label"). */
html[data-ds-color="on"] .nav-ds-kicker { color: var(--ds-accent); }
html[data-ds-color="on"]:not([data-ds-color-scope="label"]) .nav-ds-label { color: var(--ds-accent); }
html[data-ds-color="on"] .nav-ds-group--label-above .nav-ds-kicker--stacked,
html[data-ds-color="on"] .nav-ds-group--label-below .nav-ds-kicker--stacked { border-color: var(--ds-accent); }
html[data-ds-color="on"] .nav-ds-link:hover .nav-ds-label { opacity: 0.7; }

/* ---------- Hero ---------- */
/* ---------- Tweak: Leaderboard focus (front-and-center) ----------
   Bundles the layout changes that pull the ranking up and make it the
   centerpiece: compact hero, no "Leaderboard" eyebrow, thinner filter
   strip, heavier table, and a champion treatment for #1. */
html[data-lb-focus="on"] .hero { padding-top: 40px; }
html[data-lb-focus="on"] .hero .container { padding-bottom: 8px; }
html[data-lb-focus="on"] .hero-title { font-size: clamp(28px, 3.2vw, 38px) !important; margin-bottom: 12px; }
html[data-lb-focus="on"] .hero-lede { font-size: 17px; line-height: 1.5; margin-bottom: 24px; max-width: 560px; }
/* drop the "Leaderboard" eyebrow above the table */
html[data-lb-focus="on"] .lb-head { display: none; }
/* tweak: hide the "Leaderboard" eyebrow on its own (focus off) so the table sits higher */
html[data-lb-eyebrow="off"] .lb-head { display: none; }
/* thinner filter strip */
html[data-lb-focus="on"] .lb-filters { gap: 12px 20px; padding-top: 4px; padding-bottom: 14px; }
/* heavier table presence */
html[data-lb-focus="on"] .lb-table tbody td { padding-top: 24px; padding-bottom: 24px; }
html[data-lb-focus="on"] .score-num { font-size: 22px; }
html[data-lb-focus="on"] .score-bar { height: 24px; }
html[data-lb-focus="on"] .col-rank { font-size: 16px; }
html[data-lb-focus="on"] .model-name { font-size: 22px; }

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 0;
}
.hero .container {
  padding-bottom: var(--hero-gap, 20px);
}
/* leaderboard page: standard side margins (default) — as wide as possible while keeping the three filter groups on one line (the datapoint count may wrap) */
.hero .container,
.datasets .container { max-width: 1276px; padding-left: 40px; padding-right: 40px; }
/* keep the header (Redwood logo) aligned with the leaderboard content */
html[data-lb-margins="tight"] .site-header .container { max-width: 1276px; padding-left: 40px; padding-right: 40px; }

/* narrowest margins variant */
html[data-lb-margins="narrowest"] .lb-wrap > *,
html[data-lb-margins="narrowest"] .trend-wrap > *,
html[data-lb-margins="narrowest"] .hero .container,
html[data-lb-margins="narrowest"] .datasets .container,
html[data-lb-margins="narrowest"] .site-header .container {
  max-width: 1400px;
  padding-left: 28px;
  padding-right: 28px;
}
html[data-lb-margins="narrowest"] .lb-filters { padding-left: 28px; padding-right: 28px; }
html[data-lb-margins="narrowest"] .lb-table-wrap { padding-left: 28px; padding-right: 28px; }

/* tweak: restore the original wider margins */
html[data-lb-margins="wide"] .lb-wrap > *,
html[data-lb-margins="wide"] .trend-wrap > *,
html[data-lb-margins="wide"] .hero .container,
html[data-lb-margins="wide"] .datasets .container {
  max-width: 1200px;
  padding-left: 40px;
  padding-right: 40px;
}
html[data-lb-margins="wide"] .lb-filters { padding-left: 40px; padding-right: 40px; }
html[data-lb-margins="wide"] .lb-table-wrap { padding-left: 40px; padding-right: 40px; }
html[data-lb-margins="wide"] .site-header .container { max-width: 1200px; padding-left: 40px; padding-right: 40px; }

/* tweak: wide table — the text/header sit at the methodology text width (1200) and the
   leaderboard/graph extend to the methodology graph width (1300). Left edges stay aligned
   (logo, hero, filters, table all share one left edge); the table is wider only on the
   right, so there's no awkward leftward stagger. */
html[data-lb-table="wide"] .hero .container,
html[data-lb-table="wide"] .datasets .container,
html[data-lb-table="wide"] .site-header .container { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
html[data-lb-table="wide"] .lb-wrap > *,
html[data-lb-table="wide"] .trend-wrap > * {
  max-width: 1276px;
  margin-left: max(0px, calc(50% - 600px));
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
html[data-lb-table="wide"] .lb-filters { padding-left: 40px; padding-right: 40px; }
html[data-lb-table="wide"] .lb-table-wrap { padding-left: 40px; padding-right: 40px; }
.hero-title {
  font-family: var(--font-display);
  font-size: var(--hero-size, clamp(30px, 4vw, 48px));
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
  max-width: 900px;
  margin: 0 0 28px 0;
  text-wrap: balance;
}

.hero-title em {
  font-style: italic;
  color: var(--teal);
}

.hero-lede {
  font-family: var(--font-body);
  font-size: var(--hero-lede-size, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0 0 48px;
  text-wrap: pretty;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  max-width: 720px;
}
.meta-item { display: flex; flex-direction: column; gap: 8px; }
.meta-label { color: var(--ink-3); }
.meta-val {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.meta-divider {
  width: 1px;
  height: 32px;
  background: var(--rule);
}

/* ---------- Section shell ---------- */
.section-head {
  margin-bottom: 40px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0;
  max-width: 720px;
  text-wrap: balance;
}

/* ---------- Trend chart ---------- */
.trend-wrap {
  padding: 8px 0 64px;
  scroll-margin-top: 88px;
}
.trend-wrap > * { max-width: 1276px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
/* tweak: align the trend graph to the text container width */
html[data-graph-fit="margins"] .trend-wrap > * { max-width: 1200px; }
/* tweak: constrain methodology text to the reading width used by about/dataset pages */
html[data-method-text="constrained"] .page-hero .container { max-width: 860px; }
.trend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.trend-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.trend-note { padding-bottom: 6px; }
.trend-sub { color: var(--ink-3); margin-top: 6px; }

.trend-plot { position: relative; }
.trend-svg { width: 100%; height: auto; display: block; overflow: visible; }

.tc-grid { stroke: var(--rule); stroke-width: 1; }
.tc-axis { stroke: var(--rule-strong); stroke-width: 1; }
.tc-tick { stroke: var(--rule-strong); stroke-width: 1; }
.tc-ylabel, .tc-xlabel {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-3);
}
.tc-axis-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--ink-3);
}
.tc-pt {
  cursor: pointer;
  transition: r .12s;
}
.tc-label {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-1);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.tc-tooltip {
  position: absolute;
  /* --tt-nudge is set from JS to pull the box back inside the plot when neither
     side has room (GPT-4's carries a coverage note and runs ~400px wide, which
     is wider than a phone screen). */
  max-width: min(320px, calc(100vw - 28px));
  transform: translate(calc(16px + var(--tt-nudge, 0px)), calc(-100% - 14px));
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 12px 10px;
  min-width: 130px;
  pointer-events: none;
  z-index: 5;
}
/* Flip to the left of the point when it will not fit on the right. MUST stay
   after .tc-tooltip: both are single-class, so source order decides. */
.tc-tooltip--flip { transform: translate(calc(-100% - 16px + var(--tt-nudge, 0px)), calc(-100% - 14px)); }
.tc-tt-name { font-family: var(--font-display); font-size: 16px; line-height: 1.2; }
.tc-tt-meta { color: var(--ink-3); margin-top: 2px; }
.tc-tt-score {
  font-family: var(--font-display);
  font-size: 22px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tc-tt-ci { color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

.tc-leader { stroke: var(--ink-3); stroke-width: 1; opacity: 0.5; }

.trend-foot { color: var(--ink-3); margin-top: 4px; }
/* min-height reserves two lines so shorter captions don't reflow the page
   when a view toggle swaps the caption text */
.trend-figcaption { color: var(--ink-2); line-height: 1.7; margin-top: 10px; text-wrap: wrap; min-height: 3.4em; text-transform: none; letter-spacing: 0; }
/* figcaption spans the full chart width (inherits .trend-wrap > * max-width) */

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 22px;
}
/* Labs filter row on the methodology trend chart: the legend doubles as the
   lab filter, presented like the other .filter-group controls (label on top),
   full-width between the toggle row and the chart. */
.trend-labs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.trend-labs .trend-legend { margin-top: 0; }
.tc-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  transition: opacity .12s;
}
.tc-leg:hover { color: var(--ink-1); }
.tc-leg.is-off { opacity: 0.4; }
/* Square swatch driven by the per-lab --leg-c custom property set inline:
   visible = filled, hidden (.is-off) = hollow. */
.tc-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--leg-c, currentColor);
  border: 1px solid var(--leg-c, currentColor);
}
/* hidden lab: hollow circle (dimmed text comes from .tc-leg.is-off) */
.tc-leg.is-off .tc-leg-dot { background: transparent; }

/* ---------- Leaderboard ---------- */
.lb-wrap {
  padding: var(--hero-gap, 48px) 0 56px;
  scroll-margin-top: 88px;
}
.lb-wrap > * { max-width: 1276px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }

.lb-head { margin-bottom: 32px; }
.lb-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0;
  max-width: 720px;
  text-wrap: balance;
}

/* Filters */
.lb-filters {
  display: flex;
  gap: 16px 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
/* tweak: drop the rule above the leaderboard filter row */
html[data-lb-filter-line="off"] .lb-filters { border-top: 0; }
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.filter-opts { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
  transition: all .15s;
}
.filter-chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.filter-chip.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg);
}
.lb-filter-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* .lb-filter-meta--foot is the phone-only variant of the line above, styled in
   the max-width:760px block near the end of this file. Nothing to do here:
   desktop never renders it. */

/* Company multi-select dropdown */
.company-dd { position: relative; }
.dd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 180px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s;
}
.dd-trigger:hover { border-color: var(--rule-strong); }
.dd-trigger.is-open { border-color: var(--ink-3); }
.dd-caret { font-size: 10px; color: var(--ink-3); }
.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  padding: 6px;}
/* tweak: drop the leaderboard dropdown shadow */
html[data-lb-dd-shadow="off"] .dd-menu { box-shadow: none; }
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 8px;
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
}
.dd-item:hover { background: var(--bg-2); }
.dd-item.is-active { color: var(--teal); }
.dd-item--toggle { color: var(--ink-2); }
.dd-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--rule-strong);
  font-size: 11px;
  line-height: 1;
  color: var(--bg);
}
.dd-check.is-on { background: var(--teal); border-color: var(--teal); }
.dd-logo { height: 16px; width: auto; max-width: 26px; object-fit: contain; flex: none; }
.dd-logo[data-org="Meta"]            { height: 13px; }
.dd-logo[data-org="SpaceXAI"]        { height: 11px; max-width: 34px; }
.dd-logo[data-org="Google DeepMind"] { height: 17px; }
.dd-logo[data-org="Mistral"]         { height: 15px; }
.dd-logo[data-org="Alibaba"]         { height: 12px; }
.dd-logo[data-org="Anthropic"]       { height: 13px; }
.dd-logo[data-org="Thinking Machines"] { height: 11px; max-width: 34px; }
.dd-sep { height: 1px; background: var(--rule); margin: 6px 0; }
.dd-actions { display: flex; gap: 8px; padding: 4px 8px 2px; }
.dd-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
}
.dd-link:hover { color: var(--teal); }

/* Table */
.lb-table-wrap {
  padding: 0 40px;
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  /* fixed layout: column widths hold regardless of content, so long model
     names wrap instead of pushing the score bars out of line */
  table-layout: fixed;
}
.lb-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--rule);
}
.lb-table thead th.col-score { text-align: left; }
.col-score-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lb-fold-actions { display: inline-flex; align-items: center; gap: 8px; }
.lb-fold-sep { color: var(--ink-3); }
.lb-collapse-all {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lb-collapse-all:hover { color: var(--ink); }
.lb-table tbody td {
  padding: 22px 16px;
  border-bottom: 1px solid var(--row-rule, var(--rule));
  vertical-align: middle;
}
.lb-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.lb-table tbody tr:hover td {
  background: rgba(74, 110, 110, 0.04);
}

.col-rank { width: 56px; color: var(--ink-3); font-size: 14px; }
.col-model { width: 22%; white-space: normal; overflow-wrap: break-word; }
.col-org { color: var(--ink-2); width: 22%; }
.col-date { color: var(--ink-3); width: 14%; }
.col-score { width: 72%; }

/* org badge — original monogram marks, not real logos */
.org-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.org-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--rule);
  flex: none;
}
.org-badge[data-org="OpenAI"] .org-mark {
  background: oklch(0.92 0.05 150);
  color: oklch(0.32 0.08 150);
  border-color: oklch(0.82 0.06 150);
}
.org-badge[data-org="Anthropic"] .org-mark {
  background: oklch(0.93 0.05 50);
  color: oklch(0.36 0.09 50);
  border-color: oklch(0.84 0.07 50);
}
.org-badge[data-org="Google DeepMind"] .org-mark {
  background: oklch(0.92 0.05 250);
  color: oklch(0.34 0.09 250);
  border-color: oklch(0.82 0.06 250);
}
.org-name {
  font-size: 14px;
}
.org-logo {
  height: 18px;
  width: auto;
  max-width: 30px;
  object-fit: contain;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
/* per-logo optical balancing so all marks read as the same size */
.org-logo[data-org="Meta"]            { height: 15px; }
.org-logo[data-org="SpaceXAI"]        { height: 12px; max-width: 38px; }
.org-logo[data-org="Google DeepMind"] { height: 19px; }
.org-logo[data-org="Mistral"]         { height: 17px; }
.org-logo[data-org="Alibaba"]         { height: 14px; }
.org-logo[data-org="OpenAI"]          { height: 18px; }
/* The Anthropic mark is wide, solid and near-black, so at a matched height it
   carries the most visual weight of any logo here — measured ink area x contrast
   against the page background put it at 166 vs a median of 121 across the other
   fifteen, i.e. 1.37x. Evening that out exactly wanted 13.5px; this is the
   halfway point back to the original 16px, which still reads a little heavier
   than average but keeps the mark legible. */
.org-logo[data-org="Anthropic"]       { height: 14.75px; }
.org-logo[data-org="MiniMax"]         { height: 20px; }
/* wide wordmark — allow more width so it isn't clamped (which would letterbox it) */
.org-logo[data-org="Thinking Machines"] { height: 14px; max-width: 42px; }
.model-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.model-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.2; /* keep two-line names compact */
  /* line breaks come only from the explicit two-line split in leaderboard.jsx;
     without this, borderline-width names soft-wrap (e.g. at a hyphen) when the
     caret + logo sharing the row squeeze the name box */
  white-space: nowrap;
}

.score-cell { display: flex; align-items: center; gap: 16px; }
.score-num {
  font-size: 18px;
  font-weight: 500;
  min-width: 54px;
  color: var(--ink);
}
.score-bar {
  flex: 1;
  height: var(--bar-height, 16px);
  background: var(--bg-2);
  position: relative;
  max-width: none;
  overflow: visible;
}
.score-bar-fill {
  height: 100%;
  background: var(--teal);
}

/* confidence interval markers (on hover) */
.ci-whisker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 0;
  border-top: var(--cap-w-thin, calc(1.5px / var(--zoom, 0.9))) solid var(--ink-2);
  opacity: 0.9;
  pointer-events: none;
}
.ci-whisker .ci-cap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 11px;
  width: var(--cap-w-thin, calc(1.5px / var(--zoom, 0.9)));
  background: var(--ink-2);
}
.ci-whisker .ci-cap--l { left: 0; }
.ci-whisker .ci-cap--r { right: 0; }

.ci-band {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.ci-caps {
  position: absolute;
  top: -3px;
  bottom: -3px;
  pointer-events: none;
}
.ci-caps .ci-cap {
  position: absolute;
  top: 0;
  bottom: 0;
  /* The left cap is anchored left: 0 and the right cap right: 0, so unless the
     used width is a whole number of device pixels the two round independently
     and one paints a pixel wider — measured in Chrome across the live scores,
     the plain 2px rule (1.8px used under the root's zoom: 0.9) rendered them
     unequal on 10-15 of every 24 rows at every dpr tested. --cap-w is set from
     JS to round(2 * devicePixelRatio) device pixels (app.jsx), which measures
     0/24 unequal at dpr 1, 1.1, 1.25, 1.5, 2, 2.2, 2.5 and 3. The fallback is
     only for the first paint and for any page that does not load app.jsx. */
  width: var(--cap-w, calc(2px / var(--zoom, 0.9)));
  background: var(--ink);
  opacity: 0.85;
}
.ci-caps .ci-cap--l { left: 0; }
.ci-caps .ci-cap--r { right: 0; }

/* click-to-expand rows */
.lb-row--clickable { cursor: pointer; }
.lb-row--clickable:hover .model-name { color: var(--teal); }
/* The rows are keyboard-operable (tabIndex + Enter/Space in leaderboard.jsx), so
   focus has to be visible. :focus-visible keeps it to keyboard use only — a
   mouse click does not draw the ring. A <tr> cannot take an outline reliably
   across browsers, so the cells carry it as inset box-shadow instead. */
.lb-row--clickable:focus { outline: none; }
.lb-row--clickable:focus-visible .model-name { color: var(--teal); }
.lb-row--clickable:focus-visible td { box-shadow: inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal); }
.lb-row--clickable:focus-visible td:first-child { box-shadow: inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal), inset 2px 0 0 var(--teal); }
.lb-row--clickable:focus-visible td:last-child { box-shadow: inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal), inset -2px 0 0 var(--teal); }
.lb-caret {
  display: inline-block;
  width: 12px;
  font-size: 10px;
  color: var(--ink-3);
  flex: none;
}
.lb-row.is-open .lb-caret { color: var(--teal); }
.lb-row.is-open > td { border-bottom: none; padding-bottom: 5px !important; }
.lb-detail-row td {
  padding: 0 16px 28px !important;
  border-bottom: 1px solid var(--row-rule, var(--rule));
}
.lb-table tbody tr.lb-subrow > td {
  border-bottom: none;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.lb-subrow:first-of-type > td { padding-top: 5px !important; }
.lb-table tbody tr.lb-subrow.is-last > td {
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--row-rule, var(--rule));
}
.lb-subrow .score-bar { height: calc(var(--bar-height, 16px) - var(--subbar-trim, 6px)); }
.lb-subrow .score-num { font-size: var(--subbar-num-size, 18px); }
.lb-subrow .score-bar-fill { opacity: var(--subbar-opacity, 1); }
.lb-sub-label {
  display: inline-block;
  padding-left: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Dataset sub-labels link to their detail page but rest in the row's own muted
   ink, so the expanded breakdown stays quiet; the teal is a hover affordance
   only. Both are stated explicitly rather than left to source order, since
   .text-link and .lb-sub-label have equal specificity. .text-link:hover only
   adds an underline, so the hover colour has to be declared here. */
.lb-sub-label.text-link { color: var(--ink-3); }
.lb-sub-label.text-link:hover { color: var(--teal); }

/* Cards */
.lb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
  padding: 0 40px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  margin: 0 40px;
  max-width: calc(1200px - 80px);
}
.lb-cards { padding: 0; margin-left: auto; margin-right: auto; max-width: 1200px; border: 0; }
.lb-card {
  padding: 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg);
}
.lb-card:hover { background: rgba(74, 110, 110, 0.03); }
.lb-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lb-card-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--display-weight);
  margin: 0;
  letter-spacing: var(--display-tracking);
}
.lb-card-score {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.score-label { color: var(--ink-3); }
.score-big {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  font-variant-numeric: tabular-nums;
}

.lb-card-breakdown { display: flex; flex-direction: column; gap: 10px; }
.bd-row {
  display: grid;
  grid-template-columns: 100px 44px 1fr;
  align-items: center;
  gap: 12px;
}
.bd-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bd-val { font-size: 13px; color: var(--ink); text-align: right; }
.bd-bar { height: 4px; background: var(--bg-2); position: relative; }
.bd-bar-fill { height: 100%; }
.lb-card-foot { margin-top: auto; }

/* Chart */
.lb-chart {
  padding: 32px 40px 20px;
  position: relative;
}
.chart-axis {
  position: relative;
  height: 24px;
  margin-bottom: 24px;
  margin-left: 0;
}
.axis-tick {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
}
.axis-line {
  position: absolute;
  top: 18px;
  left: 0;
  width: 1px;
  height: 6px;
  background: var(--rule-strong);
}
.axis-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  color: var(--ink-3);
}
.chart-row {
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.chart-row:last-child { border-bottom: 1px solid var(--rule); }
.chart-row-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.chart-model-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin-right: auto;
}

.chart-bars-group { display: flex; flex-direction: column; gap: 12px; }
.chart-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 12px;
}
.chart-bar-row--single { grid-template-columns: 1fr; }
.chart-bar-label { color: var(--ink-3); }
.chart-bar-track {
  position: relative;
  height: 36px;
  background: var(--bg-2);
  border-left: 1px solid var(--rule);
}
.chart-bar-fill {
  height: 100%;
  transition: width .3s;
}
.chart-bar-val {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-2);
}

/* Expand / collapse button */
/* Partial-data marker: a "*" after a model whose CRI leans on a below-coverage
   subindex (e.g. GPT-4). Hovering the star shows which subindex via title. */
.lb-partial-star {
  color: var(--ink-3);
  cursor: help;
  margin-left: 1px;
  font-weight: 600;
}
.lb-partial-note {
  margin: 14px 0 0;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.lb-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lb-expand:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
/* Expanded list: "Show less" sticks to the bottom of the viewport as a compact
   pill so collapsing never requires scrolling to the end of the 100+ rows.
   (In the 761–960px band .lb-table-wrap is a horizontal scroller, which defeats
   position: sticky — the button then simply sits at the end of the list.) */
.lb-expand--floating {
  position: sticky;
  bottom: 24px;
  z-index: 5;
  width: fit-content;
  margin: 20px auto 0;
  padding: 12px 26px;
  background: var(--bg);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
/* Back-to-top pill (phone). Fixed rather than sticky: it has to stay reachable
   anywhere below the top of the leaderboard, not only while the table itself is
   in view. */
.lb-backtotop {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
}
.lb-expand-caret {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ink-3);
}

/* Leaderboard foot */
.lb-foot {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  border-top: 1px solid var(--rule);
}

/* ---------- Datasets ---------- */
.datasets {
  padding: 72px 0 88px;
}
.ds-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.ds-head-row .eyebrow {
  margin-bottom: 0;
  flex-shrink: 0;
}
.ds-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0;
  text-wrap: balance;
  max-width: 640px;
  text-align: right;
  margin-left: auto;
  color: var(--ink);
}

.ds-code {
  color: var(--teal);
  letter-spacing: 0.1em;
  font-size: 11.5px;
  text-transform: uppercase;
}
.ds-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.ds-desc {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Three columns (locked layout) --- */
.ds-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 -32px;
}
.ds-col {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background .15s;
  position: relative;
}
.ds-col:last-child { border-right: 0; }
.ds-col .ds-desc { flex: 1; }
.ds-col-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  gap: 12px;
}
.ds-arrow {
  color: var(--teal);
  display: inline-block;
}
.ds-col:hover { background: rgba(74, 110, 110, 0.04); }
.ds-col:hover .ds-title { color: var(--teal); }

@media (max-width: 760px) {
  .ds-head-row { flex-direction: column; align-items: flex-start; }
  .ds-heading { text-align: left; margin-left: 0; }
  .ds-cols { grid-template-columns: 1fr; margin: 0; }
  .ds-col, .ds-col:last-child, .ds-col + .ds-col {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 28px 0 !important;
  }
  .ds-col:last-child { border-bottom: 0; }
}

/* ---------- Methodology (legacy) ---------- */
.method {
  padding: 88px 0;
  border-bottom: 1px solid var(--rule);
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.method-item {
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.method-item:last-child { border-right: 0; padding-right: 0; }
.method-item:not(:first-child) { padding-left: 32px; }
.method-n {
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 0.05em;
}
.method-t {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--display-weight);
  margin: 0;
  letter-spacing: var(--display-tracking);
}
.method-d {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-mark {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--ink-2); transition: color .15s; }
.footer-links a:hover { color: var(--teal); }
.footer-copy { color: var(--ink-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .container { padding-bottom: calc(var(--hero-gap, 4px) * 0.7); }
  .lb-wrap { padding-top: calc(var(--hero-gap, 4px) * 0.7); }
}

@media (max-width: 760px) {
  /* One gutter for the whole page on phones. The attribute is in the selector
     because html[data-lb-margins="wide"] .datasets/.hero/.site-header .container
     (styles.css:805-815) are 0,3,0 and otherwise keep the desktop 40px gutter
     here — which is why only .lb-filters was landing on the intended mobile
     gutter and everything else sat 20px right of it. */
  :root { --page-gutter: 20px; }
  .container,
  html[data-lb-margins] .container,
  html[data-lb-margins] .hero .container,
  html[data-lb-margins] .datasets .container,
  html[data-lb-margins] .site-header .container {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
  .hero { padding: 56px 0 0; }
  .hero .container { padding-bottom: calc(var(--hero-gap, 4px) * 0.5); }
  .lb-wrap { padding-top: calc(var(--hero-gap, 4px) * 0.5); }
  .hero-meta { gap: 20px; }
  .meta-val { font-size: 20px; }
  .nav { gap: 16px; }
  .nav-link { font-size: 11px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-item { border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px 0 !important; }
  .method-item:last-child { border-bottom: 0; }
  .lb-table-wrap { padding: 0 24px; overflow-x: auto; }
  .lb-filters { padding: 16px 24px; gap: 24px; }
  .col-date, .col-org { display: none; }
  .lb-chart { padding: 24px; }
  .chart-bar-row { grid-template-columns: 72px 1fr; gap: 10px; }
  .hero-title { font-size: 30px; }
  .hero-lede { font-size: 17px; }
}

/* ============================================================
   MOBILE — hamburger nav drawer + stacked leaderboard cards
   ============================================================ */
.nav-toggle,
.nav-drawer-close,
.nav-backdrop { display: none; }

@media (max-width: 760px) {
  html.nav-locked, html.nav-locked body { overflow: hidden; }

  /* backdrop-filter on the header would trap the fixed drawer in the header's
     box; drop it on mobile so the drawer/backdrop fill the viewport */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ---- Hamburger button ---- */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 9px;
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: none;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
  }
  .header--inverted .nav-toggle span { background: var(--bg); }

  /* ---- Backdrop ---- */
  .nav-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 20, 18, 0.44);
    z-index: 80;
    animation: navFade 0.2s ease;
  }
  @keyframes navFade { from { opacity: 0; } to { opacity: 1; } }

  /* ---- Drawer ---- */
  .site-header .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 74px 26px 32px;
    background: var(--bg);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.16);
    border-left: 1px solid var(--rule);
  }
  .site-header .nav.nav--open { transform: translateX(0); }
  .header--inverted .nav { background: var(--teal); }

  .nav-drawer-close {
    display: block;
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    font-size: 28px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  .header--inverted .nav-drawer-close { color: var(--bg); }

  /* ---- Drawer links: clean vertical list, neutralize desktop dataset treatments ---- */
  .site-header .nav-link {
    font-family: var(--font-display);
    font-size: 17px !important;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    padding: 14px 2px !important;
    margin: 0 !important;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-header .nav-link.is-active { color: var(--teal) !important; }
  .header--inverted .nav-link { color: var(--bg) !important; }
  .header--inverted .nav-link.is-active { color: var(--bg) !important; }

  /* Dataset group → simple stacked section under one "Datasets" heading */
  .site-header .nav-ds-group {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static;
    width: 100%;
  }
  .site-header .nav-ds-kicker,
  .site-header .nav-ds-kicker--inline,
  .site-header .nav-ds-kicker--stacked {
    display: block !important;
    position: static !important;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-3) !important;
    margin: 20px 2px 2px !important;
    padding: 0;
    align-self: flex-start;
  }
  html[data-ds-color="on"] .site-header .nav-ds-kicker { color: var(--ds-accent) !important; }
  .header--inverted .site-header .nav-ds-kicker { color: rgba(245, 241, 234, 0.6) !important; }
  .site-header .nav-link--stack { flex-direction: row; }
  .site-header .nav-link--stack .nav-link-sub { display: none; }
  .site-header .nav-ds-dot,
  .site-header .nav-sep { display: none; }

  /* Datasets dropdown → same stacked "Datasets" heading + list (no dropdown on mobile) */
  .site-header .nav-dd {
    display: block;
    position: static;
    width: 100%;
  }
  .site-header .nav-dd-trigger {
    display: block;
    width: 100%;
    text-align: left;
    pointer-events: none;
    cursor: default;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 20px 2px 2px !important;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
  }
  .site-header .nav-dd-caret { display: none !important; }
  .site-header .nav-dd-menu {
    display: block !important;
    position: static;
    width: 100%;
    box-shadow: none !important;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
  }
  .site-header .nav-dd-item {
    padding: 14px 2px !important;
    border-bottom: 1px solid var(--rule) !important;
    background: none !important;
  }
  .site-header .nav-dd-name {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
  }
  .site-header .nav-dd-item.is-active .nav-dd-name { color: var(--teal) !important; }
  .header--inverted .site-header .nav-dd-trigger { color: rgba(245, 241, 234, 0.6) !important; }
  .header--inverted .site-header .nav-dd-name { color: var(--bg) !important; }

  /* Cancel header padding reserved for lifted desktop labels */
  .site[data-ds-label="above"] .header-inner,
  .site[data-ds-label="below"] .header-inner { padding-top: 0; padding-bottom: 0; }

  /* ---- Leaderboard table → stacked cards ---- */
  /* Match the gutter of the filter row directly above. Needs the attribute in
     the selector: html[data-lb-margins="wide"] .lb-table-wrap (styles.css:814)
     is 0,2,0 and would otherwise keep the desktop 40px gutter on phones. */
  html[data-lb-margins] .lb-table-wrap { padding: 0 20px; overflow-x: visible; }
  /* Phone nav: the body face rather than EB Garamond. Garamond at 17px is
     delicate for a touch menu; Source Serif has a larger x-height at the same
     size and is already the most-used face on the site, so it cannot look out
     of place. .nav-dd-name is the span the dataset labels actually render in. */
  .nav .nav-link,
  .nav .nav-dd-name { font-family: var(--font-body); }

  /* Plot block on the same gutter as the text. The `html` prefix is there for
     specificity only: the base rule is .trend-wrap > * (0,1,0) and a variant is
     html[data-lb-margins="wide"] .trend-wrap > * (0,2,1), so this ties the
     higher one and wins on order. Note data-lb-margins is NOT set on the
     methodology page — only app.jsx sets it — so keying off that attribute
     matched nothing. The 40px desktop gutter surviving onto phones is why the
     earlier ml change barely moved the visible margin. */
  /* margin 0 matters: .trend-wrap > * sets margin-inline auto, and in a flex
     column auto side margins shrink-wrap the child instead of letting it
     stretch, which collapsed every block to its content width. */
  /* --page-gutter, not a literal: the gutter is 20px here but 22px below 560
     (pages.css:1126), and a literal left the chart head and caption 2px inside
     the prose on the narrow band. */
  html .trend-wrap > * {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    margin-left: 0;
    margin-right: 0;
  }
  /* Hero top row on phone: [eyebrow .... links] on one line, the author list on
     its own line below. The markup nests the eyebrow and the authors together in
     .ds-hero-eyebrowgroup with the links as a sibling, so display:contents
     dissolves that wrapper and lets all three be flex items of the same row;
     the authors then take a full-width basis and wrap to line two. The eyebrow's
     separator dot is kept: with the links following the eyebrow it now reads
     "ACCoRD · GitHub", the same dot pattern desktop uses between the eyebrow and
     the contributors. */
  .ds-hero-toprow { flex-wrap: wrap; align-items: baseline; gap: 0; justify-content: flex-start; }
  .ds-hero-eyebrowgroup { display: contents; }
  /* Turn the top links back on: they are hidden everywhere by the base rule and
     shown only here, so desktop gets no top-right pair and phone keeps the
     "ACCoRD · GitHub" row. Outranks the base .ds-hero-links--top {display:none}
     on specificity, not source order, so it survives being moved. */
  html[data-link-pos="top"] .ds-hero-links--top,
  html[data-link-pos="top"] .lmca-arxiv-wrap--top { display: flex; }
  .ds-hero-toprow .ds-eyebrow { order: 1; }
  .ds-hero-toprow .ds-hero-links,
  .ds-hero-toprow .lmca-arxiv-wrap { order: 2; margin: 0; }
  .ds-hero-toprow .contributors--eyebrowInline { order: 3; flex-basis: 100%; margin-top: 6px; }


  /* ...except the plot, which goes full-bleed so the y-axis line can sit on the
     text gutter with the tick numbers hanging out to its left. */
  /* A little left gutter back. Fully full-bleed put the tick numbers left of the
     text margin and the axis line still short of it, which read as over-shot;
     this nudges the whole plot right without giving up the gutter the numbers
     hang in. */
  html .trend-wrap > .trend-plot { padding-left: 8px; padding-right: 0; }

  /* Legend below the plot on phone. .trend-wrap is block layout, so it becomes a
     flex column here purely to reorder: head, chips, plot, legend, caption.
     Children are head(0) chips(1) labs(2) plot(3) caption(4) in source order. */
  .trend-wrap { display: flex; flex-direction: column; }
  .trend-wrap > .trend-head { order: 1; }
  .trend-wrap > .trend-labs { order: 3; }
  .trend-wrap > .trend-plot { order: 2; padding-left: 0; padding-right: 0; }
  /* The non-labs-mode charts render a bare .trend-legend as a direct child
     (labs mode nests its legend inside .trend-labs). Without an order it
     defaults to 0 and sorts ahead of the head — which put the key above the
     chart title on four charts. Between plot and caption, like .trend-labs. */
  /* The subpage charts live inside .container > .lmca-doc, so their .trend-wrap
     is already inset by the page gutter and every margin below stacks on top of
     that — the methodology chart renders outside the container and is not.
     Cancel the gutter here so both start from the same full-bleed edge — which
     only holds if the cancellation tracks --page-gutter exactly; a literal
     -20px under-cancelled the 22px gutter below 560 and left the whole figure
     2px right of where the methodology one sits. */
  .lmca-block--bleed { margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); }
  /* ...and restore the gutter on the chart's own children. pages.css:882 zeroes
     .lmca-block--bleed .trend-wrap > * at 0,2,0, which outranks the generic
     html .trend-wrap > * below (0,1,1 — one class, not two). That was harmless
     while the container inset the whole block; once it bleeds, nothing else is
     holding the head, legend and caption off the screen edge. */
  html .lmca-block--bleed .trend-wrap > * { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  html .lmca-block--bleed .trend-wrap > .trend-plot { padding-left: 8px; padding-right: 0; }
  /* The caption has its own rule at pages.css:890 (0,3,0) which also zeroes the
     padding, so it needs naming explicitly rather than relying on the > * above. */
  html .lmca-block--bleed .trend-wrap > .trend-figcaption { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

  /* Contributors move to the foot of the page. .contributors is display:none by
     default (pages.css:992) with one slot switched on per mode, so the pageEnd
     copy needs the html prefix to outrank that, and hiding the hero copy needs
     to outrank html[data-contributors="eyebrowInline"] .contributors--eyebrowInline.
     The label is shown here — at the page foot a bare list of names has no
     context, where next to the eyebrow it did. */
  html[data-contributors] .ds-hero-toprow .contributors--eyebrowInline { display: none; }
  html .contributors--pageEnd { display: block; margin: 30px 0 0; }
  html .contributors--pageEnd .contributors-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 5px;
  }
  html .contributors--pageEnd .contributors-names {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.7;
  }

  .trend-wrap > .trend-legend { order: 3; }
  .trend-wrap > .trend-figcaption { order: 4; }

  .lb-table { width: 100%; }
  .lb-table thead { display: none; }
  .lb-table,
  .lb-table tbody,
  .lb-table tr,
  .lb-table td { display: block; width: auto; }
  .lb-table td {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .lb-row {
    position: relative;
    padding: 15px 0 17px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .lb-row .col-rank {
    position: absolute;
    top: 17px;
    right: 0;
    width: auto;
    font-size: 12px;
    color: var(--ink-3);
  }
  .lb-row .col-model {
    white-space: normal;
    padding-right: 42px !important;
  }
  .model-name-row { gap: 9px; }
  .model-name { font-size: 17px; }
  .lb-row .col-score { margin-top: 11px !important; }
  .score-cell { gap: 12px; }
  .score-num { min-width: 42px; font-size: 16px; }

  /* Expanded breakdown sub-rows */
  .lb-subrow .col-rank { display: none; }
  /* connect the breakdown to its model — no divider between them */
  .lb-row.is-open { border-bottom: 0 !important; padding-bottom: 8px !important; }
  /* Flush left, not indented. In the desktop table the breakdown is indented to
     nest it under the model name, but the stacked card layout already groups it
     by position, so the indent just misaligns the sub-scores against the main
     score directly above them. */
  .lb-subrow {
    padding: 2px 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
  }
  .lb-subrow:first-of-type { padding-top: 4px !important; }
  /* close the whole expanded group with a single hairline */
  .lb-subrow.is-last {
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  /* the label carries its own 22px indent for the desktop table — drop it too,
     otherwise the label still sits right of the score it labels */
  .lb-sub-label { font-size: 12.5px; padding-left: 0; }
  .lb-subrow .col-score { margin-top: 0 !important; }
  /* the desktop cell padding (5px top and bottom, styles.css:1431) is a lot of
     air once the cells stack into blocks */
  .lb-table tbody tr.lb-subrow > td { padding-top: 2px !important; padding-bottom: 2px !important; }
  /* The is-last cell padding closes the expanded group below the final bar. The
     cells stack as blocks here, so applied to every cell it also opened a 20px
     gap between the last label and its own bar (measured 24.2px vs 8.0px on the
     rows above). Scope it to the last cell so it still closes the group. */
  .lb-table tbody tr.lb-subrow.is-last > td { padding-bottom: 2px !important; }
  .lb-table tbody tr.lb-subrow.is-last > td:last-child { padding-bottom: 14px !important; }
  .lb-subrow .score-num { font-size: 13px; min-width: 38px; }

  /* Filters: compact, wrap cleanly */
  .lb-filters { padding: 14px 20px !important; gap: 12px 18px !important; }

  /* Phone only: leaderboard.jsx moves the "N/M models · N data points" line out
     of the filter panel — where it took a whole row of its own at the end of
     the wrapping controls — to below the table, as a footnote to the thing it
     counts. Desktop still renders it inside .lb-filters and never gets this
     class. No rule above it: the table closes on a hairline and the Show all
     button carries a full border, so a third edge in that much space would read
     as chrome rather than as a caption.
     margin-left:auto from the base rule resolves to 0 at this width (the block
     is far narrower than its 1200px max-width), so only the vertical rhythm and
     the gutter need setting. The attribute is in the gutter selector for
     specificity only: this is a direct child of .lb-wrap, so
     html[data-lb-margins="wide"] .lb-wrap > * (styles.css:805) is 0,2,1 and
     would otherwise hold it at the desktop 40px, 20px right of the table — the
     same reason .lb-table-wrap needs the attribute above. */
  .lb-filter-meta--foot { margin-top: 18px; }
  html[data-lb-margins] .lb-filter-meta--foot { padding-left: 20px; padding-right: 20px; }
}

/* Between the mobile card breakpoint (760px) and 960px there was no leaderboard
   rule at all, so the model name + org logo overflowed the 22% model column and
   painted over the score — measured 11 of 17 rows overlapping at 768px, i.e.
   every iPad in portrait. Widen the name column across that band. */
@media (min-width: 761px) and (max-width: 960px) {
  .lb-table .col-model { width: 38%; }
}