/*
 * DuelLab design tokens, shared by duellab.org and benchmarks.duellab.org.
 * Canonical source: sites/shared/duellab-tokens.css. The benchmark generator embeds it first in its
 * stylesheet and the root build prepends it to styles.91b13613aee9.css, so both sites always ship the same values.
 *
 * Look: a light-first neutral page with the logo's two "player" colours. Mint marks selections and
 * links; amber marks top ranks. Interface chrome stays grey so data colours carry the meaning.
 * The light palette is the default; dark applies from the OS setting unless a page opts out with
 * data-theme="light", and always with data-theme="dark".
 */

:root {
  color-scheme: light;

  --bg: #faf9f7;
  --bg-soft: #f2f0ec;
  --panel: #ffffff;
  --panel-2: #f6f5f2;
  --line: #e7e4df;
  --line-strong: #d4d0c8;

  --text: #191919;
  --soft: #353535;
  --muted: #676767;

  /* Brand: the logo's two squares. */
  --mint: #0b7a5c;
  --mint-soft: #e2f4ec;
  --mint-line: #7fcfb2;
  --amber: #8f5c00;
  --amber-soft: #fcefd4;
  --amber-line: #e3b35c;

  --primary: var(--soft);
  --primary-strong: var(--text);
  --accent: var(--mint);
  --accent-warm: var(--amber);
  --link: var(--mint);

  --interactive-bg: var(--panel);
  --interactive-border: var(--line-strong);
  --interactive-hover-bg: var(--panel-2);
  --interactive-hover-border: #b9b4aa;
  --interactive-active-bg: var(--mint-soft);
  --interactive-active-border: var(--mint-line);
  --interactive-shadow: none;

  --row-alt: #fcfbf9;
  --row-hover: #f3f1ec;
  --header-bg: color-mix(in srgb, var(--bg) 92%, transparent);

  --positive: #1d7446;
  --codegen-repaired: #864c00;
  --codegen-failed: #b42318;
  --reasoning-xhigh-fg: #5b2aa8;
  --reasoning-xhigh-bg: #efe9fb;
  --reasoning-xhigh-border: #a58bd6;
  --reasoning-medium-fg: #1d4f8f;
  --reasoning-medium-bg: #e9f0fa;
  --reasoning-medium-border: #86a9d8;
  --reasoning-none-fg: #4a4f57;
  --reasoning-none-bg: #f1f1ef;
  --reasoning-none-border: #a9aba8;
  --reasoning-intensive-fg: var(--reasoning-xhigh-fg);
  --reasoning-intensive-border: var(--reasoning-xhigh-border);
  --reasoning-balanced-fg: var(--reasoning-medium-fg);
  --reasoning-balanced-border: var(--reasoning-medium-border);
  --reasoning-baseline-fg: var(--reasoning-none-fg);
  --reasoning-baseline-border: var(--reasoning-none-border);

  --best-score-fg: var(--amber);
  --best-score-bg: var(--amber-soft);
  --best-score-border: var(--amber-line);
  --best-score-inner: transparent;

  --focus-ring: #0b66d8;
  --focus-halo: rgba(11, 102, 216, 0.2);
  --shadow: 0 1px 2px rgba(25, 25, 25, 0.06);

  --radius-xl: 10px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 6px;

  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --heading-tracking: -0.02em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #131415;
    --bg-soft: #18191b;
    --panel: #1a1b1d;
    --panel-2: #202124;
    --line: #2b2c30;
    --line-strong: #3b3d42;

    --text: #ececea;
    --soft: #cfcfcb;
    --muted: #a09f9a;

    --mint: #64f1c1;
    --mint-soft: rgba(100, 241, 193, 0.12);
    --mint-line: rgba(100, 241, 193, 0.5);
    --amber: #ffc96b;
    --amber-soft: rgba(255, 201, 107, 0.13);
    --amber-line: rgba(255, 201, 107, 0.5);

    --interactive-hover-border: #55585e;
    --row-alt: #17181a;
    --row-hover: #212226;

    --positive: #8fe0b0;
    --codegen-repaired: #f0b45c;
    --codegen-failed: #ff8275;
    --reasoning-xhigh-fg: #e2d6ff;
    --reasoning-xhigh-bg: #3b3150;
    --reasoning-xhigh-border: #9b84d6;
    --reasoning-medium-fg: #cfe0ff;
    --reasoning-medium-bg: #273a55;
    --reasoning-medium-border: #6f9bd8;
    --reasoning-none-fg: #e6e6e3;
    --reasoning-none-bg: #303236;
    --reasoning-none-border: #8e9096;

    --focus-ring: #8fb8ff;
    --focus-halo: rgba(143, 184, 255, 0.25);
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #131415;
  --bg-soft: #18191b;
  --panel: #1a1b1d;
  --panel-2: #202124;
  --line: #2b2c30;
  --line-strong: #3b3d42;

  --text: #ececea;
  --soft: #cfcfcb;
  --muted: #a09f9a;

  --mint: #64f1c1;
  --mint-soft: rgba(100, 241, 193, 0.12);
  --mint-line: rgba(100, 241, 193, 0.5);
  --amber: #ffc96b;
  --amber-soft: rgba(255, 201, 107, 0.13);
  --amber-line: rgba(255, 201, 107, 0.5);

  --interactive-hover-border: #55585e;
  --row-alt: #17181a;
  --row-hover: #212226;

  --positive: #8fe0b0;
  --codegen-repaired: #f0b45c;
  --codegen-failed: #ff8275;
  --reasoning-xhigh-fg: #e2d6ff;
  --reasoning-xhigh-bg: #3b3150;
  --reasoning-xhigh-border: #9b84d6;
  --reasoning-medium-fg: #cfe0ff;
  --reasoning-medium-bg: #273a55;
  --reasoning-medium-border: #6f9bd8;
  --reasoning-none-fg: #e6e6e3;
  --reasoning-none-bg: #303236;
  --reasoning-none-border: #8e9096;

  --focus-ring: #8fb8ff;
  --focus-halo: rgba(143, 184, 255, 0.25);
  --shadow: none;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/inter-400.8909904ab6c8.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/inter-500.f3779f1efccc.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("fonts/inter-600.f9a06e79cd3a.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("fonts/inter-700.6f56409fd3d6.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("fonts/inter-800.a7d0a50f15d3.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/ibm-plex-mono-400.08949f728dc5.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/ibm-plex-mono-500.01d285447409.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("fonts/ibm-plex-mono-600.0d1f0b8d0722.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Benchmark-only tokens; colour, type and radius tokens come from sites/shared/duellab-tokens.css,
   embedded first. They sit on html (the same element as :root) beside the page defaults. */
html {
  /* Sticky chart toolbar clears sticky site header (.header-inner min-height). */
  --benchmark-header-height: 56px;
  --ranking-stage-bg: color-mix(in srgb, var(--text) 4%, transparent);

  /* Read-only metadata (chips, dl cells) - flatter than interactive pills */
  --surface-meta: color-mix(in srgb, var(--text) 3%, transparent);
  --border-meta: var(--line);
  --accent-meta-bar: var(--amber-line);
  --table-scroll-track: color-mix(in srgb, var(--text) 8%, transparent);
  --table-scroll-thumb: color-mix(in srgb, var(--text) 40%, transparent);
  --table-scroll-thumb-hover: color-mix(in srgb, var(--text) 58%, transparent);
  --game-stripe-missing-base: color-mix(in srgb, var(--text) 4%, transparent);
  --game-stripe-missing-hatch: color-mix(in srgb, var(--text) 20%, transparent);
  --game-stripe-missing-border: color-mix(in srgb, var(--text) 14%, transparent);

  scroll-padding-top: var(--anchor-offset, 7rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--mint-soft);
  color: var(--text);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

code {
  font-family: var(--font-mono);
  /* Long identifiers wrap instead of pushing narrow screens sideways. */
  overflow-wrap: anywhere;
  font-size: 0.94em;
  padding: 0.12rem 0.35rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.container {
  width: min(2200px, calc(100% - 1.5rem));
  margin-inline: auto;
}

/* Wider side margins on landscape desktops so panels do not hug the viewport edge. */
@media (orientation: landscape) and (min-width: 900px) {
  .container {
    width: min(2200px, calc(100% - clamp(2.25rem, 5vw + 1.25rem, 8rem)));
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}
/* Provider marks (see site_assets/provider_logos.5dbd6cd992d8/ATTRIBUTION.md). */
.provider-logo {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.92;
}

.leaderboard-model-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.leaderboard-model-name {
  min-width: 0;
}

.skip-links {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 40;
  display: grid;
  gap: 0.45rem;
  align-items: start;
  justify-items: start;
}

.skip-link {
  position: static;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus {
  clip-path: none;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: 52px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.brand {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  min-height: 36px;
  max-width: 100%;
  text-decoration: none;
}

/* Same square duel mark as duellab.org (inline SVG data URL). */
.brand-mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20rx%3D'14'%20fill%3D'%23081019'%2F%3E%3Crect%20x%3D'30'%20y%3D'12'%20width%3D'4'%20height%3D'40'%20rx%3D'2'%20fill%3D'%239dc1ff'%2F%3E%3Crect%20x%3D'10'%20y%3D'23'%20width%3D'18'%20height%3D'18'%20rx%3D'4'%20fill%3D'%2364f1c1'%2F%3E%3Crect%20x%3D'36'%20y%3D'23'%20width%3D'18'%20height%3D'18'%20rx%3D'4'%20fill%3D'%23ffc96b'%2F%3E%3C%2Fsvg%3E")
    center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* Inline flow (not nested flex): avoids stray whitespace text nodes acting as flex items. */
.brand-lockup {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.2;
}

.brand-name {
  display: inline;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 0.95rem;
}

.brand-sep {
  display: inline;
  margin-left: 0.45rem;
  margin-right: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  user-select: none;
}

.brand-tag {
  display: inline;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.12rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
}

.theme-switcher-btn {
  min-height: 44px;
  padding: 0.18rem 0.45rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.theme-switcher-btn.is-active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

/* Section links sit in the header on every page. Below the desktop breakpoint they collapse into
   a native <details> menu (50_responsive.css), matching the duellab.org header pattern. */
.site-nav--desktop {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  margin-left: 0.5rem;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--soft);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.site-nav-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 1.1rem;
  margin: 0 0.35rem;
  background: var(--line-strong);
}

.site-nav-link:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}

.site-nav-link[aria-current="page"] {
  background: var(--mint-soft);
  color: var(--mint);
  font-weight: 700;
}

.site-nav-link:focus-visible,
.mobile-site-nav > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.mobile-site-nav {
  display: none;
  position: relative;
}

.mobile-site-nav > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.mobile-site-nav > summary::-webkit-details-marker {
  display: none;
}

.mobile-site-nav[open] > summary {
  background: var(--mint-soft);
  border-color: var(--mint-line);
  color: var(--mint);
}

.mobile-site-nav__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 31;
  display: grid;
  gap: 0.15rem;
  width: min(18rem, calc(100vw - 1rem));
  padding: 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--text) 14%, transparent);
}

.mobile-site-nav__panel .site-nav-link {
  min-height: 44px;
  font-size: 0.9375rem;
}

.mobile-site-nav__panel .site-nav-sep {
  width: auto;
  height: 1px;
  margin: 0.25rem 0.4rem;
}

.page {
  padding: 0.8rem 0 2.4rem;
}

/* One header pattern for every report page: label, title, summary, key facts on the right. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 0.1rem 0 1.25rem;
}

.page-header__main {
  flex: 1 1 32rem;
  min-width: 0;
  max-width: 62rem;
}

.page-header__label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.page-header .page-title {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.page-header__summary {
  max-width: 72ch;
  margin: 0.5rem 0 0;
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.page-header__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
}

.page-header__facts dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.page-header__facts dd {
  margin: 0.1rem 0 0;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Dates and counts never break at a hyphen or comma. */
  white-space: nowrap;
}

.card,
.table-card,
.ranking-bars-card {
  position: relative;
  overflow: hidden;
}

.table-card,
.ranking-bars-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.table-card::before,
.ranking-bars-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--accent-warm) 4%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      color-mix(in srgb, var(--text) 2.5%, transparent),
      transparent 28%
    );
}

.eyebrow,
.section-label,
.table-meta,
.badge {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.pill-list,
.meta-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Table / card metadata: not interactive; distinct from nav pills */
.meta-chip-list {
  gap: 0.4rem 0.5rem;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.22rem 0.55rem 0.22rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--soft);
  background: var(--surface-meta);
  border: 1px solid var(--border-meta);
  border-left: 3px solid var(--accent-meta-bar);
  cursor: default;
  user-select: none;
}

.pill-link,
.pill-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.45rem 0.72rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.pill-link {
  color: var(--soft);
  border: 1px solid var(--interactive-border);
  background: var(--interactive-bg);
  box-shadow: var(--interactive-shadow);
}

.pill-link:hover {
  transform: none;
  background: var(--interactive-hover-bg);
  color: var(--text);
  border-color: var(--interactive-hover-border);
}

.pill-current {
  color: var(--text);
  font-weight: 700;
  border: 1px solid var(--interactive-active-border);
  background: var(--interactive-active-bg);
  box-shadow: var(--interactive-shadow);
  cursor: default;
}

.metric-help {
  appearance: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  padding: 0.2rem 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: help;
}

.metric-help:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.metric-explanation {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-line;
}
/* Shared rank badge. */
.leaderboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.2rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Amber marks the top three places only. */
.leaderboard-rank[data-podium] {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

th.leaderboard-rank-col {
  width: 3.25rem;
  text-align: center;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  vertical-align: middle;
}

td.leaderboard-rank-cell {
  text-align: center;
  vertical-align: middle;
}

.benchmark-data-table tbody td.leaderboard-rank-cell {
  font-weight: normal;
}

.benchmark-data-table tbody td:nth-child(2) {
  font-weight: 600;
}

.game-stripe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8px, 1fr));
  gap: 2px;
  width: min(100%, 10rem);
  min-width: 5.5rem;
  align-items: center;
}

.game-stripe--compact {
  display: block;
  height: 18px;
  border: 1px solid var(--border-meta);
  border-radius: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--game-stripe-missing-hatch),
    var(--game-stripe-missing-hatch) 3px,
    var(--game-stripe-missing-base) 3px,
    var(--game-stripe-missing-base) 6px
  );
}

.leaderboard-rank-compact {
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}

.game-stripe-cell {
  display: block;
  min-width: 8px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.game-stripe-cell--very-high {
  background: #77c99b;
}

.game-stripe-cell--high {
  background: #8cc7bb;
}

.game-stripe-cell--mid {
  background: #d0b07a;
}

.game-stripe-cell--low {
  background: #ba776e;
}

.game-stripe-cell--very-low {
  background: #8f4d4d;
}

.game-stripe-cell--missing {
  background: repeating-linear-gradient(
    135deg,
    var(--game-stripe-missing-hatch),
    var(--game-stripe-missing-hatch) 3px,
    var(--game-stripe-missing-base) 3px,
    var(--game-stripe-missing-base) 6px
  );
  border-color: var(--game-stripe-missing-border);
}

.score-rail {
  display: grid;
  grid-template-columns: 3.4rem minmax(3.2rem, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 7.2rem;
}

.score-rail__value {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.score-rail__track {
  position: relative;
  display: block;
  height: 0.86rem;
  border: 1px solid var(--border-meta);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent),
    var(--surface-meta);
  overflow: visible;
}

.score-rail__band,
.score-rail__bar,
.score-rail__dot {
  position: absolute;
  pointer-events: none;
}

.score-rail__band {
  left: var(--band-left, 0%);
  width: var(--band-width, 0%);
  top: -0.14rem;
  bottom: -0.14rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 36%, transparent);
}

.score-rail__bar {
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--score-pct, 0%);
  min-width: 2px;
  border-radius: 999px;
  background: var(--mint);
}

.score-rail__dot {
  left: var(--expected-pct, 0%);
  top: 50%;
  width: 0.68rem;
  height: 0.68rem;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--primary-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}

.score-rail--no-band .score-rail__band,
.score-rail--no-expected .score-rail__dot,
.score-rail--active-score-only .score-rail__band,
.score-rail--active-score-only .score-rail__dot {
  display: none;
}

.score-rail--missing .score-rail__bar {
  width: 0;
}

.dashboard-shell {
  display: grid;
  gap: 0.8rem;
}

.dashboard-chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--accent-warm) 3.5%, transparent),
      transparent 36%
    ),
    radial-gradient(
      circle at bottom left,
      color-mix(in srgb, var(--text) 2%, transparent),
      transparent 30%
    );
}

.ranking-bars-score-lens {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  max-width: min(100%, 15rem);
  text-align: right;
}

.ranking-bars-score-lens .dashboard-ranking-scale {
  margin: 0;
  max-width: 100%;
}

.dashboard-ribbon-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.dashboard-toggle {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.14rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
}

.dashboard-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--soft);
  min-height: 28px;
  padding: 0.28rem 0.62rem;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.dashboard-toggle-btn:hover {
  color: var(--text);
}

.dashboard-toggle-btn.is-active {
  background: var(--interactive-active-bg);
  box-shadow: inset 0 0 0 1px var(--interactive-active-border);
  color: var(--text);
}

/* Caution for exploratory raw Elo. */
.dashboard-toggle-btn.is-active[data-score-lens-mode="raw_elo"] {
  background: color-mix(in srgb, var(--codegen-failed) 14%, transparent);
  color: var(--codegen-failed);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--codegen-failed) 40%, transparent);
}

.dashboard-toggle-btn.is-active[data-score-lens-mode="raw_elo"]:hover {
  background: color-mix(in srgb, var(--codegen-failed) 20%, transparent);
}

.dashboard-ribbon-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.25;
}

.dashboard-primary-chart {
  min-width: 0;
}

.dashboard-primary-chart .ranking-bars-card {
  display: block;
  margin: 0;
  min-height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
}

.dashboard-primary-chart .ranking-bars-score-lens {
  top: 0.55rem;
  right: 0.75rem;
}

.leaderboard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  box-shadow: none;
  padding: 0.35rem 0 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  margin: 0;
}

.leaderboard-control-group {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 12rem);
}

.leaderboard-control-group--game {
  min-width: min(100%, 15rem);
}

.leaderboard-control-group--view {
  min-width: min(100%, 15rem);
}

.leaderboard-control-label {
  color: var(--muted);
  font: 500 0.8125rem var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

.leaderboard-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
}

.leaderboard-filter-btn,
.leaderboard-view-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.24rem 0.55rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.leaderboard-view-link {
  text-decoration: none;
  min-height: 44px;
}

.leaderboard-filter-btn.is-active,
.leaderboard-view-link.is-active {
  background: var(--interactive-active-bg);
  box-shadow: inset 0 0 0 1px var(--interactive-active-border);
  color: var(--text);
  cursor: default;
}

.leaderboard-filter-input,
.leaderboard-filter-select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
}

.leaderboard-game-details {
  position: relative;
  flex: 0 0 auto;
}

.leaderboard-game-details summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--soft);
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.leaderboard-game-details summary::-webkit-details-marker {
  display: none;
}

.leaderboard-game-details summary::after {
  content: "";
  margin-left: 0.35rem;
  border-top: 0.32rem solid var(--muted);
  border-right: 0.24rem solid transparent;
  border-left: 0.24rem solid transparent;
}

.leaderboard-game-details[open] summary {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.leaderboard-game-details-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  top: calc(100% + 0.35rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(4.5rem, 1fr));
  gap: 0.2rem;
  min-width: 10rem;
  padding: 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.leaderboard-game-details-menu a {
  padding: 0.32rem 0.45rem;
  border-radius: 6px;
  color: var(--soft);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.leaderboard-game-details-menu a:hover,
.leaderboard-game-details-menu a:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.table-header-side {
  display: grid;
  justify-items: end;
  gap: 0.7rem;
}

.table-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
}

.table-header-actions details {
  position: relative;
}

.table-header-actions summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--soft);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  list-style: none;
}

.table-header-actions summary::-webkit-details-marker {
  display: none;
}

.table-header-actions summary::before {
  content: "+";
  margin-right: 0.38rem;
  color: var(--accent-warm);
  font-family: var(--font-mono);
}

.table-header-actions details[open] summary {
  color: var(--text);
  border-color: var(--accent-warm);
  background: color-mix(in srgb, var(--accent-warm) 10%, transparent);
}

.table-header-actions details[open] summary::before {
  content: "−";
}

.table-header-popover {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(42rem, calc(100vw - 3rem));
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--soft);
  background: var(--panel-2);
  box-shadow: var(--shadow);
}

.table-reading-guide__body {
  max-width: 78ch;
}

.table-reading-guide__body p {
  margin: 0;
}

.table-reading-guide__body p + p {
  margin-top: 0.7rem;
}

.leaderboard-column-settings__panel {
  width: min(21rem, calc(100vw - 3rem));
}

.leaderboard-column-settings__panel > p {
  margin: 0 0 0.75rem;
}

.leaderboard-column-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.8rem;
}

.leaderboard-column-options label {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2rem;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

.leaderboard-column-options input {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--accent-warm);
}

.leaderboard-column-settings__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

#leaderboard-detailed-table.leaderboard-hide-playable
  :is(.leaderboard-conditional-col, .leaderboard-conditional-cell),
#leaderboard-detailed-table.leaderboard-hide-band
  :is(.leaderboard-band-col, .leaderboard-band-cell),
#leaderboard-detailed-table.leaderboard-hide-best
  :is(.leaderboard-best-col, .leaderboard-best-cell),
#leaderboard-detailed-table.leaderboard-hide-wdl :is(.leaderboard-wdl-col, .leaderboard-wdl-cell),
#leaderboard-detailed-table.leaderboard-hide-cost
  :is(.leaderboard-cost-col, .leaderboard-cost-cell),
#leaderboard-detailed-table.leaderboard-hide-codegen
  :is(.leaderboard-codegen-col, .leaderboard-codegen-cell),
#leaderboard-detailed-table.leaderboard-hide-stripe
  :is(.leaderboard-stripe-col, .leaderboard-stripe-cell),
#leaderboard-detailed-table.leaderboard-hide-levels
  :is(.leaderboard-levels-col, .leaderboard-levels-cell),
#leaderboard-detailed-table.leaderboard-hide-entries
  :is(.leaderboard-entries-col, .leaderboard-entries-cell),
#leaderboard-detailed-table.leaderboard-hide-spread .reasoning-breakdown-col,
#leaderboard-detailed-table.leaderboard-hide-signal
  :is(.leaderboard-signal-col, .leaderboard-signal-cell) {
  display: none;
}

.leaderboard-filter-status {
  align-self: center;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
}

.scoring-method-panel {
  margin-top: 0.9rem;
  padding: 0.95rem 1rem 1rem;
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.panel-header .section-label {
  margin: 0 0 0.28rem;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.method-steps div {
  min-width: 0;
  padding: 0.55rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* Six steps as a 3 x 2 grid on wide screens (two columns, then one, on narrower screens). */
.method-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
}

.method-steps strong {
  display: block;
  margin-bottom: 0.32rem;
  color: var(--text);
  font-size: 0.84rem;
}

.method-steps p {
  margin: 0;
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

.rank-movement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.8rem;
  min-height: 1.65rem;
  padding: 0.18rem 0.46rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--soft);
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.rank-movement--up,
.rank-movement--new {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 35%, transparent);
  background: color-mix(in srgb, var(--positive) 12%, transparent);
}

.rank-movement--down {
  color: var(--codegen-failed);
  border-color: color-mix(in srgb, var(--codegen-failed) 35%, transparent);
  background: color-mix(in srgb, var(--codegen-failed) 12%, transparent);
}

.rank-movement--flat,
.rank-movement--baseline {
  color: var(--muted);
}

.card.dashboard-chart-card {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1rem 1rem;
}

.dashboard-chart-card .chart-card-caption,
.dashboard-chart-card .chart-footnote,
.dashboard-chart-card .chart-empty {
  position: relative;
  z-index: 1;
}

.dashboard-chart-card .plot-root,
.dashboard-chart-card .plot-scroll {
  position: relative;
  z-index: 1;
}

.dashboard-chart-card--message {
  display: grid;
  align-content: start;
}

.dashboard-chart-card--message h2 {
  position: relative;
  z-index: 1;
  font-size: 1.45rem;
}

.page-title,
.eyebrow {
  min-width: 0;
  overflow-wrap: anywhere;
}

.eyebrow,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--soft);
  margin-bottom: 1rem;
}

/* Decorative eyebrow dots are retired; labels stand on their own. */
.status-dot {
  display: none;
}

.card h2,
.table-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0.7rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.card p,
.card li,
.table-subtitle,
.table-footer {
  position: relative;
  z-index: 1;
  color: var(--soft);
}

.content-stack {
  display: grid;
  gap: 1rem;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: none;
}

.card h2 {
  font-size: 1.55rem;
}

.clean-list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.clean-list li + li {
  margin-top: 0.8rem;
}

.table-card {
  border-radius: var(--radius-xl);
}

.ranking-bars-card {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 1.2rem 1.3rem 1.35rem;
  border-radius: var(--radius-lg);
}

.ranking-bars-figcaption {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
}

.ranking-bars-figcaption .section-label {
  margin: 0 0 0.35rem;
}

.ranking-bars-empty {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ranking-bars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ranking-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ranking-bar-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}

.ranking-bar-label {
  font-size: 0.92rem;
  color: var(--soft);
  min-width: 0;
  overflow-wrap: break-word;
  /* Split names into even lines ("Claude / Fable 5"), not a lone trailing word. */
  text-wrap: balance;
}

.reasoning-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  margin-inline-start: 0.4rem;
  padding: 0.12rem 0.45rem 0.12rem 0.58rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background-color: var(--panel-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
  vertical-align: 0.08em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(8, 16, 25, 0.12);
}

.reasoning-badge::before {
  position: absolute;
  inset: 0 auto 0 0;
  display: none;
  width: 4px;
  border-radius: 3px 0 0 3px;
  content: "";
}

.reasoning-badge--intensive,
.reasoning-badge--highest {
  border-color: var(--reasoning-intensive-border);
  color: var(--reasoning-intensive-fg);
}

.reasoning-badge--balanced,
.reasoning-badge--medium {
  border-color: var(--reasoning-balanced-border);
  color: var(--reasoning-balanced-fg);
}

.reasoning-badge--baseline,
.reasoning-badge--none {
  border-color: var(--reasoning-baseline-border);
  color: var(--reasoning-baseline-fg);
}

.reasoning-badge--intensive::before,
.reasoning-badge--highest::before,
.reasoning-badge--balanced::before,
.reasoning-badge--medium::before,
.reasoning-badge--baseline::before,
.reasoning-badge--none::before,
.reasoning-badge--group-intensive::before,
.reasoning-badge--group-balanced::before,
.reasoning-badge--group-baseline::before {
  display: block;
}

.reasoning-badge--intensive::before,
.reasoning-badge--highest::before,
.reasoning-badge--group-intensive::before {
  width: 6px;
  background: linear-gradient(
    to right,
    var(--reasoning-intensive-border) 0 2px,
    transparent 2px 4px,
    var(--reasoning-intensive-border) 4px 6px
  );
}

.reasoning-badge--balanced::before,
.reasoning-badge--medium::before,
.reasoning-badge--group-balanced::before {
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    var(--reasoning-balanced-border) 0 3px,
    transparent 3px 5px
  );
}

.reasoning-badge--baseline::before,
.reasoning-badge--none::before,
.reasoning-badge--group-baseline::before {
  background: var(--reasoning-baseline-border);
}

.leaderboard-reasoning-cell .reasoning-badge,
.benchmark-data-table td .reasoning-badge,
.leaderboard-filter-btn .reasoning-badge {
  margin-inline-start: 0;
}

.leaderboard-filter-btn .reasoning-badge {
  pointer-events: none;
}

.ranking-bar-value {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Rank and Last share a row. */
.ranking-bar-rank-slot {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
  flex-shrink: 0;
}

.ranking-bar-track {
  border-radius: 999px;
  background: var(--surface-meta);
  border: 1px solid var(--border-meta);
  overflow: hidden;
  line-height: 0;
}

.ranking-bar-svg {
  display: block;
  width: 100%;
  height: 10px;
  vertical-align: middle;
}

.ranking-bar-rect {
  fill: var(--primary);
}

.ranking-bars-foot {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.ranking-bars-link {
  color: var(--primary-strong);
  font-weight: 600;
  text-decoration: none;
}

.ranking-bars-link:hover {
  text-decoration: underline;
}

.dashboard-primary-chart .ranking-bars-figcaption {
  margin: 0 0 0.7rem;
  padding-right: 11rem;
}

.dashboard-primary-chart .ranking-bars-status {
  position: relative;
  z-index: 1;
  margin: 0.35rem 0 0;
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.3;
}

.dashboard-ranking-meta,
.dashboard-ranking-scale {
  position: relative;
  z-index: 1;
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.dashboard-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  color: var(--soft);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-filter-summary[hidden] {
  display: none;
}

.dashboard-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--accent-warm);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dashboard-primary-chart .ranking-bars-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0.6rem;
  align-items: end;
}

.dashboard-ranking-root {
  container-type: inline-size;
}

/* Match the enhanced chart before data loads. */
.dashboard-primary-chart .ranking-bars-list--static {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@container (max-width: 760px) {
  .dashboard-primary-chart .ranking-bars-list--static {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-column {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 2rem;
    gap: 0.38rem 0.55rem;
    padding: 0.35rem 0;
    align-items: center;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-column-top {
    display: contents;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-rank {
    grid-area: 1 / 1;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-value {
    grid-area: 1 / 3;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-label {
    grid-area: 1 / 2;
  }

  .dashboard-primary-chart .ranking-bars-list--static .ranking-bar-stage {
    grid-area: 2 / 1 / 3 / -1;
    height: 2rem;
  }
}

.dashboard-primary-chart .ranking-bar-column {
  display: grid;
  grid-template-rows: auto 160px auto;
  gap: 0.35rem;
  align-items: end;
}

.dashboard-primary-chart .ranking-bar-column-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
}

.dashboard-primary-chart .ranking-bar-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 160px;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  background: var(--ranking-stage-bg, var(--line));
}

/* Full-color watermark in the unfilled tray. */
.dashboard-primary-chart .ranking-bar-stage-tray-mark {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0.2rem;
  bottom: var(--bar-fill-pct, 0%);
  z-index: 0;
  pointer-events: none;
  background: var(--provider-logo, none) center / contain no-repeat;
  opacity: 0.26;
}

.dashboard-primary-chart .ranking-bar-column-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

.dashboard-primary-chart .ranking-bar-stage-fill {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--bar-fill-pct, 0%);
  min-height: 30px;
  border-radius: 10px 10px 6px 6px;
  /* Solid fallback when `color-mix` is unsupported; second line overrides when supported. */
  background: var(--provider-color, var(--primary));
  background: color-mix(in srgb, var(--provider-color, var(--primary)) 92%, transparent);
  color: var(--provider-text-color, #081019);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.28rem 0.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dashboard-primary-chart .ranking-bar-stage-fill .ranking-bar-value--inside {
  position: relative;
  z-index: 1;
}

.dashboard-primary-chart .ranking-bar-reasoning-badge {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  z-index: 3;
  display: inline-flex;
}

.dashboard-primary-chart .ranking-bar-reasoning-badge .reasoning-badge {
  margin-inline-start: 0;
  box-shadow: 0 1px 4px rgba(8, 16, 25, 0.22);
}

.dashboard-primary-chart .ranking-bar-label {
  font-size: 0.78rem;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-primary-chart .ranking-bar-value {
  font-size: 0.82rem;
}

.dashboard-primary-chart .ranking-bar-value--inside {
  color: inherit;
  font-weight: 700;
  line-height: 1;
}

.dashboard-primary-chart .ranking-bar-stage-fill .ranking-bar-value--above-fill {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.3rem);
  z-index: 3;
  color: var(--text);
  text-shadow: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dashboard-primary-chart .ranking-bars-foot {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

.dashboard-primary-chart .ranking-bars-list--portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  align-items: stretch;
}

.dashboard-primary-chart .ranking-bar-row--enhanced {
  display: grid;
  gap: 0.38rem;
  border-radius: 10px;
  padding: 0.35rem 0;
  border: 0;
  background: none;
}

.dashboard-primary-chart .ranking-bar-row--enhanced .ranking-bar-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.dashboard-primary-chart .ranking-bar-row--enhanced .ranking-bar-track {
  position: relative;
  border-radius: 999px;
  border: 1px solid var(--border-meta);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  overflow: hidden;
  min-height: 2rem;
}

.dashboard-primary-chart .ranking-bar-track-tray-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bar-fill-pct, 0%) + 2px);
  right: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--provider-logo, none) center right 6px / auto 78% no-repeat;
  opacity: 0.24;
}

.dashboard-primary-chart .ranking-bar-row--enhanced .ranking-bar-track-fill {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--bar-fill-pct, 0%);
  min-width: 2.8rem;
  height: 100%;
  padding: 0 0.55rem;
  background: var(--provider-color, var(--primary));
  background: color-mix(in srgb, var(--provider-color, var(--primary)) 92%, transparent);
  color: var(--provider-text-color, #081019);
  font-weight: 700;
}

.dashboard-primary-chart .ranking-bar-track-fill .ranking-bar-value--inside {
  position: relative;
  z-index: 1;
}

.dashboard-primary-chart .ranking-bars-list--portrait .ranking-bar-column--enhanced {
  display: none;
}

/* Custom ranking-bar tooltip (faster than native `title` delay). */
.dashboard-ranking-hover-tooltip {
  position: fixed;
  z-index: 10050;
  box-sizing: border-box;
  max-width: min(24rem, calc(100vw - 1.25rem));
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 18px 44px rgba(8, 16, 25, 0.34);
}

.dashboard-ranking-hover-tooltip[hidden] {
  display: none !important;
}

.dashboard-ranking-tooltip-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.42rem;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.dashboard-ranking-tooltip-heading .reasoning-badge {
  margin-inline-start: 0;
}

.dashboard-ranking-tooltip-body {
  line-height: 1.5;
  white-space: normal;
}

.dashboard-primary-chart .ranking-bar-column--enhanced,
.dashboard-primary-chart .ranking-bar-row--enhanced {
  cursor: default;
}

.dashboard-primary-chart .ranking-bar-column--last-place .ranking-bar-stage {
  border-color: color-mix(in srgb, var(--accent-warm) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-warm) 12%, transparent);
}

.dashboard-primary-chart .ranking-bar-column--last-place .ranking-bar-stage-fill {
  opacity: 0.9;
  filter: saturate(0.88);
}

.dashboard-primary-chart .ranking-bar-row--last-place .ranking-bar-track {
  border-color: color-mix(in srgb, var(--accent-warm) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-warm) 10%, transparent);
}

.dashboard-primary-chart .ranking-bar-row--last-place .ranking-bar-track-fill {
  opacity: 0.92;
  filter: saturate(0.88);
}

.ranking-bar-last-badge {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.62rem;
  color: var(--accent-warm);
  font-weight: 700;
}

.ranking-bar-last-badge--inline {
  display: inline;
  margin: 0;
  vertical-align: middle;
  font-size: 0.65rem;
}

@media (orientation: landscape) and (min-width: 900px) {
  .ranking-bars-card {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    grid-template-areas:
      "head list"
      "foot list";
    column-gap: 1.75rem;
    row-gap: 0.5rem;
    align-items: start;
  }

  .ranking-bars-figcaption {
    grid-area: head;
    margin-bottom: 0;
    align-self: start;
  }

  .ranking-bars-list {
    grid-area: list;
  }

  .ranking-bars-foot {
    grid-area: foot;
    margin-top: 0.5rem;
  }

  .ranking-bars-empty {
    grid-column: 1 / -1;
  }
}

.table-header {
  position: relative;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  padding: 1.2rem 1.3rem 1rem;
  border-bottom: 1px solid var(--line);
}

.table-title {
  margin: 0;
  font-size: 1.42rem;
}

.table-subtitle {
  margin: 0.45rem 0 0;
}

.table-meta {
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
}

.table-scroll-top {
  height: 0.95rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--table-scroll-track);
  scrollbar-color: var(--table-scroll-thumb) var(--table-scroll-track);
  scrollbar-width: thin;
}

.table-scroll-top[hidden] {
  display: none;
}

.table-scroll-top__inner {
  height: 1px;
}

.table-scroll-top::-webkit-scrollbar {
  height: 10px;
}

.table-scroll-top::-webkit-scrollbar-track {
  background: var(--table-scroll-track);
}

.table-scroll-top::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--table-scroll-thumb);
}

.table-scroll-top::-webkit-scrollbar-thumb:hover {
  background: var(--table-scroll-thumb-hover);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Keep the first screen focused on results; on narrow screens the filters use the top layer. */
.leaderboard-filter-trigger {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  margin-left: auto;
}
.leaderboard-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  width: 100%;
  color: var(--soft);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.leaderboard-active-filters[hidden],
.leaderboard-filter-trigger[hidden] {
  display: none;
}
.leaderboard-filter-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.leaderboard-filter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.leaderboard-filter-dialog[open] {
  display: grid;
  gap: 1rem;
}
.leaderboard-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.leaderboard-dialog-heading h2 {
  margin: 0;
  font-size: 1.25rem;
}
.leaderboard-dialog-heading button {
  border: 1px solid var(--line-strong);
}
.leaderboard-filter-dialog .leaderboard-filter-status {
  margin: 0;
  text-align: left;
}

.leaderboard-active-filters .dashboard-filter-summary {
  margin: 0;
  font-size: inherit;
}

.leaderboard-filter-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* One filter panel: inline beside the view switch on wide screens; below 1100 px the script moves
   it into the Filters dialog. Filtering needs JavaScript, so without it the panel stays hidden. */
.leaderboard-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  min-width: 0;
}

html:not(.js) .leaderboard-filter-panel {
  display: none;
}

.leaderboard-filter-panel .leaderboard-control-group {
  min-width: 0;
}

.leaderboard-filter-dialog .leaderboard-filter-panel {
  display: grid;
  gap: 1rem;
}

/* Benchmark page header: the headline counts sit beside the title from laptop widths up, so the
   whole ranking chart still fits a 1280 x 720 screen. */
.dashboard-shell .page-header {
  padding-bottom: 0.5rem;
}

.dashboard-shell .page-header__main {
  flex-basis: 26rem;
}

.dashboard-shell .page-header__facts {
  column-gap: 1.25rem;
}

/* Phones: a compact three-column grid of counts, and no section label (the menu names the
   section), so the rankings still start on the first screen. */
@media (max-width: 640px) {
  .dashboard-shell .page-header__label {
    display: none;
  }

  .dashboard-shell .page-header__facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
  }

  .dashboard-shell .page-header__facts dt {
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

@media (max-width: 300px) {
  .dashboard-shell .page-header__facts {
    grid-template-columns: repeat(2, auto);
  }
}

@media (min-width: 1100px) {
  .leaderboard-controls > .leaderboard-filter-trigger {
    display: none;
  }

  .dashboard-shell .leaderboard-controls {
    row-gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
  }

  /* The inline controls already show each selection, so the row keeps only the Filtered view chip
     and Reset beside them. */
  .leaderboard-controls > .leaderboard-active-filters {
    width: auto;
  }

  .leaderboard-controls > .leaderboard-active-filters [data-dashboard-filter-selections],
  .leaderboard-controls > .leaderboard-active-filters .leaderboard-filter-note {
    display: none;
  }

  .leaderboard-controls > .leaderboard-filter-panel .leaderboard-control-group {
    grid-auto-flow: column;
    align-items: center;
    column-gap: 0.5rem;
  }

  .leaderboard-controls > .leaderboard-filter-panel .leaderboard-filter-select {
    width: auto;
    max-width: 14rem;
  }

  .leaderboard-controls > .leaderboard-filter-panel .leaderboard-filter-input {
    width: 9.5rem;
  }

  /* The search box's placeholder names it on wide screens; the label stays for assistive tech. */
  .leaderboard-controls
    > .leaderboard-filter-panel
    .leaderboard-control-group--model
    > .leaderboard-control-label,
  .leaderboard-controls > .leaderboard-filter-panel .leaderboard-filter-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 1099px) {
  html.js .leaderboard-controls > .leaderboard-filter-panel {
    display: none;
  }
}

/* "Not yet ranked": provisional rows kept out of the detailed leaderboard. */
.table-title-count {
  color: var(--muted);
  font-weight: 500;
}

.unranked-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 0 1.3rem 1rem;
  list-style: none;
}

.unranked-reasons li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.unranked-reasons__count {
  min-width: 2ch;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.unranked-reasons__text {
  color: var(--soft);
  font-size: 0.875rem;
  line-height: 1.45;
}

.unranked-reasons__text strong {
  display: block;
  color: var(--text);
  font-size: 0.9375rem;
}

.leaderboard-unranked-status {
  margin: 0;
  padding: 0 1.3rem 0.75rem;
}

.unranked-entries > summary {
  display: inline-flex;
  margin: 0 1.3rem 1rem;
  cursor: pointer;
  list-style: none;
}

.unranked-entries > summary::-webkit-details-marker {
  display: none;
}

.unranked-entries__hide,
.unranked-entries[open] .unranked-entries__show {
  display: none;
}

.unranked-entries[open] .unranked-entries__hide {
  display: inline;
}

.unranked-table {
  width: 100%;
}

.unranked-table .leaderboard-primary-cell {
  min-width: 14rem;
}

.unranked-table .unranked-why-cell {
  color: var(--soft);
}

.unranked-table tbody tr[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .unranked-table,
  .unranked-table tbody {
    display: block;
    min-width: 0;
  }

  .unranked-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .unranked-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.75rem;
    padding: 0.75rem 0.82rem;
    border-top: 1px solid var(--line);
  }

  .unranked-table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .unranked-table .leaderboard-primary-cell {
    min-width: 0;
  }

  .unranked-table .unranked-score-cell {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 700;
  }

  .unranked-table .unranked-why-cell {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
  }
}
/* Preferred column widths, with intrinsic sizing for unbroken headers. */
.benchmark-data-table {
  width: 100%;
}

.benchmark-data-table--overall {
  table-layout: auto;
  min-width: 72rem;
}

.benchmark-data-table--overall thead th,
.benchmark-data-table--overall tbody td {
  padding: 0.82rem 1rem;
  vertical-align: middle;
}

.benchmark-data-table--overall thead th:nth-child(1),
.benchmark-data-table--overall tbody td:nth-child(1) {
  width: 3.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

/* `width: auto` so this column absorbs leftover table width; a fixed % plus rem
   columns leaves slack that browsers often assign to the last column — and
   right-aligned `.num` cells then look like a huge gap before "Entries". */
.benchmark-data-table--overall thead th:nth-child(2),
.benchmark-data-table--overall tbody td:nth-child(2) {
  width: auto;
  min-width: 11rem;
  padding-right: 1rem;
  overflow-wrap: anywhere;
}

.benchmark-data-table--overall thead th:nth-child(3),
.benchmark-data-table--overall tbody td:nth-child(3),
.benchmark-data-table--overall thead th:nth-child(4),
.benchmark-data-table--overall tbody td:nth-child(4),
.benchmark-data-table--overall thead th:nth-child(6),
.benchmark-data-table--overall tbody td:nth-child(6) {
  width: 6.75rem;
  max-width: 6.75rem;
  white-space: nowrap;
}

/* Prefer the width of the reasoning triple (e.g. 79.2 / 71.2 / 80.2),
   while allowing longer headers to establish their intrinsic minimum. */
.benchmark-data-table--overall thead th:nth-child(5),
.benchmark-data-table--overall tbody td:nth-child(5) {
  width: 10rem;
  max-width: 10rem;
  min-width: 8rem;
  padding-left: 0.6rem;
  padding-right: 0.5rem;
  overflow-wrap: anywhere;
}

.benchmark-data-table--overall thead th:nth-child(5) {
  white-space: normal;
}

.benchmark-data-table--overall tbody td:nth-child(5) {
  white-space: nowrap;
}

.benchmark-data-table--overall .leaderboard-model-col,
.benchmark-data-table--overall .leaderboard-primary-cell {
  width: 18rem !important;
  max-width: 18rem !important;
  min-width: 14rem;
}

.benchmark-data-table--overall .leaderboard-score-col,
.benchmark-data-table--overall .leaderboard-score-cell {
  width: auto !important;
  min-width: 18rem;
  max-width: none !important;
}

.benchmark-data-table--overall .reasoning-breakdown-col {
  width: 12.5rem !important;
  min-width: 12.5rem;
  max-width: 12.5rem !important;
  white-space: normal !important;
}

.benchmark-data-table--overall td.reasoning-breakdown-col {
  color: var(--text);
  font-size: 0.9rem;
}

/* The score bars absorb spare width, so the default columns fit a 1024px-wide layout. Turning on
   any optional column restores the wider minimum; the table then scrolls inside its region. */
.benchmark-data-table--mixed {
  table-layout: auto;
  width: 100%;
  min-width: 56rem;
}

.benchmark-data-table--mixed:not(.leaderboard-hide-playable),
.benchmark-data-table--mixed:not(.leaderboard-hide-best),
.benchmark-data-table--mixed:not(.leaderboard-hide-wdl),
.benchmark-data-table--mixed:not(.leaderboard-hide-stripe) {
  min-width: 78rem;
}

.benchmark-data-table--mixed thead th,
.benchmark-data-table--mixed tbody td {
  padding: 0.82rem 1rem;
  vertical-align: middle;
}

.benchmark-data-table--mixed .leaderboard-rank-col,
.benchmark-data-table--mixed .leaderboard-rank-cell {
  width: 3.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.benchmark-data-table--mixed .leaderboard-base-rank-col,
.benchmark-data-table--mixed .leaderboard-base-rank-cell {
  width: 4.25rem;
  max-width: 4.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  white-space: nowrap;
}

.benchmark-data-table--mixed .leaderboard-model-col,
.benchmark-data-table--mixed .leaderboard-primary-cell {
  width: 16rem !important;
  max-width: 16rem !important;
  padding-right: 0.85rem;
  overflow-wrap: anywhere;
}

.benchmark-data-table--mixed .leaderboard-reasoning-col,
.benchmark-data-table--mixed .leaderboard-reasoning-cell {
  width: 6rem;
  max-width: 6rem;
}

.benchmark-data-table--mixed .leaderboard-conditional-col,
.benchmark-data-table--mixed .leaderboard-conditional-cell {
  width: 6.5rem;
  max-width: 6.5rem;
  white-space: nowrap;
}

.ranking-status-badge--provisional {
  display: inline-flex;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  border: 1px solid var(--accent-warm);
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 5px,
      color-mix(in srgb, var(--accent-warm) 13%, transparent) 5px 7px
    ),
    var(--panel-2);
  color: var(--accent-warm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Publication-readiness badges (P8): an evidence checkpoint, not a precision claim. */
.readiness-badge {
  display: inline-flex;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.readiness-badge--interval-validated {
  border-color: var(--positive);
  background: color-mix(in srgb, var(--positive) 14%, var(--panel-2));
}

/* Earned under an earlier target population; the revision is named on the badge. */
.readiness-badge--carried {
  border-style: dashed;
}

.readiness-badge__revision {
  margin-left: 0.3rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.benchmark-data-table--mixed tr[data-ranking-status="provisional"] {
  background: color-mix(in srgb, var(--panel) 92%, var(--muted));
}

.benchmark-data-table--track {
  table-layout: auto;
  min-width: 42rem;
}

.benchmark-data-table--track thead th,
.benchmark-data-table--track tbody td {
  padding: 0.82rem 1rem;
  vertical-align: middle;
}

.benchmark-data-table--track thead th:nth-child(1),
.benchmark-data-table--track tbody td:nth-child(1) {
  width: 3.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.benchmark-data-table--track thead th:nth-child(2),
.benchmark-data-table--track tbody td:nth-child(2) {
  width: auto;
  min-width: 10rem;
  padding-right: 1rem;
  overflow-wrap: anywhere;
}

.benchmark-data-table--track thead th:nth-child(3),
.benchmark-data-table--track tbody td:nth-child(3),
.benchmark-data-table--track thead th:nth-child(4),
.benchmark-data-table--track tbody td:nth-child(4),
.benchmark-data-table--track thead th:nth-child(5),
.benchmark-data-table--track tbody td:nth-child(5) {
  width: 7.25rem;
  max-width: 7.25rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game {
  table-layout: auto;
  min-width: 52rem;
}

.benchmark-data-table--per-game thead th,
.benchmark-data-table--per-game tbody td {
  padding: 0.8rem 0.9rem;
  vertical-align: middle;
}

.benchmark-data-table--per-game thead th:nth-child(1),
.benchmark-data-table--per-game tbody td:nth-child(1) {
  width: 3.25rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.benchmark-data-table--per-game thead th:nth-child(2),
.benchmark-data-table--per-game tbody td:nth-child(2) {
  width: auto;
  min-width: 10rem;
  overflow-wrap: anywhere;
}

.benchmark-data-table--per-game thead th:nth-child(3),
.benchmark-data-table--per-game tbody td:nth-child(3) {
  width: 5.5rem;
  max-width: 5.5rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game thead th:nth-child(4),
.benchmark-data-table--per-game tbody td:nth-child(4) {
  width: 7rem;
  max-width: 7rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game thead th:nth-child(5),
.benchmark-data-table--per-game tbody td:nth-child(5) {
  width: 13rem;
  max-width: 13rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game thead th:nth-child(6),
.benchmark-data-table--per-game tbody td:nth-child(6) {
  width: 7rem;
  max-width: 7rem;
  white-space: nowrap;
}

/* Mixed cross-reasoning per-game: Reasoning after Entry shifts column indices. */
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed {
  min-width: 54rem;
}

.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed thead th:nth-child(3),
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed tbody td:nth-child(3) {
  width: 6.75rem;
  max-width: 7.5rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed thead th:nth-child(4),
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed tbody td:nth-child(4) {
  width: 5.5rem;
  max-width: 5.5rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed thead th:nth-child(5),
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed tbody td:nth-child(5) {
  width: 7rem;
  max-width: 7rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed thead th:nth-child(6),
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed tbody td:nth-child(6) {
  width: 13rem;
  max-width: 13rem;
  white-space: nowrap;
}

.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed thead th:nth-child(7),
.benchmark-data-table--per-game.benchmark-data-table--per-game-mixed tbody td:nth-child(7) {
  width: 7rem;
  max-width: 7rem;
  white-space: nowrap;
}

.table-sort-header {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  padding: 0.45rem 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.table-sort-arrow {
  color: var(--muted);
}

[aria-sort] .table-sort-button,
[aria-sort] .table-sort-arrow {
  color: var(--accent);
}

.table-sort-header .table-sort-help {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  text-align: center;
  color: var(--muted);
}

.table-sort-mobile {
  display: none;
}

.benchmark-data-table[data-table-sort-key] th[data-table-sort-column="price"] {
  width: 8.5rem !important;
  max-width: 8.5rem !important;
}

.benchmark-data-table[data-table-sort-key] th[data-table-sort-column="uncertainty"] {
  width: 14rem !important;
  max-width: 14rem !important;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.95rem 1rem;
  text-align: left;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--soft);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-strong);
}

tbody td {
  padding: 0.95rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--text);
}

tbody tr {
  background: transparent;
}

/* Count only visible rows; :where keeps hover-rule specificity unchanged. */
tbody tr:nth-child(even of :where(:not([hidden]))) {
  background: var(--row-alt);
}

tbody tr:hover {
  background: var(--row-hover);
}

tbody td:first-child {
  font-weight: 600;
}

.benchmark-data-table .table-empty-state {
  padding: 1rem;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
}

td.num,
th.num {
  text-align: right;
}

th.reasoning-breakdown-col,
td.reasoning-breakdown-col {
  max-width: 15rem;
  font-size: 0.84rem;
  color: var(--soft);
  line-height: 1.35;
  vertical-align: middle;
}

.reasoning-breakdown {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

.benchmark-data-table thead th {
  padding-top: 0.66rem;
  padding-bottom: 0.66rem;
  letter-spacing: 0;
  font-size: 0.7rem;
}

.benchmark-data-table tbody td,
.benchmark-data-table--overall tbody td,
.benchmark-data-table--mixed tbody td,
.benchmark-data-table--track tbody td {
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

.benchmark-data-table th.leaderboard-score-col,
.benchmark-data-table td.leaderboard-score-cell,
.benchmark-data-table th.leaderboard-levels-col,
.benchmark-data-table td.leaderboard-levels-cell,
.benchmark-data-table th.leaderboard-entries-col,
.benchmark-data-table td.leaderboard-entries-cell,
.benchmark-data-table th.leaderboard-best-col,
.benchmark-data-table td.leaderboard-best-cell,
.benchmark-data-table th.leaderboard-cost-col,
.benchmark-data-table td.leaderboard-cost-cell,
.benchmark-data-table th.leaderboard-codegen-col,
.benchmark-data-table td.leaderboard-codegen-cell,
.benchmark-data-table th.leaderboard-signal-col,
.benchmark-data-table td.leaderboard-signal-cell {
  width: 6.4rem !important;
  max-width: 6.4rem !important;
  white-space: nowrap;
}

.benchmark-data-table th.leaderboard-signal-col,
.benchmark-data-table td.leaderboard-signal-cell {
  width: 14rem !important;
  max-width: 14rem !important;
}

/* Four-digit wins, draws and losses must fit together, including separators. */
.benchmark-data-table thead th.leaderboard-wdl-col,
.benchmark-data-table tbody td.leaderboard-wdl-cell {
  width: 13rem;
  min-width: 13rem;
  max-width: none;
  white-space: nowrap;
}

.leaderboard-wdl-cell .metric-help {
  white-space: nowrap;
}

.leaderboard-best {
  display: inline-flex;
  min-width: 2.8rem;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.leaderboard-best--perfect {
  min-width: 0;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--best-score-border);
  border-radius: 999px;
  color: var(--best-score-fg);
  background: var(--best-score-bg);
  box-shadow: inset 0 0 0 1px var(--best-score-inner);
}

.leaderboard-cost-stack {
  display: inline-flex;
  justify-content: flex-end;
  max-width: 100%;
  white-space: nowrap;
}

.leaderboard-cost-stack.metric-help {
  padding-block: 0;
}

.leaderboard-cost-legacy-marker {
  padding-left: 0.08em;
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 700;
}

.benchmark-data-table th.leaderboard-band-col,
.benchmark-data-table td.leaderboard-band-cell {
  width: 7.8rem !important;
  max-width: 7.8rem !important;
  white-space: nowrap;
}

.benchmark-data-table th.leaderboard-best-col,
.benchmark-data-table td.leaderboard-best-cell {
  width: 5.4rem !important;
  max-width: 5.4rem !important;
}

.benchmark-data-table th.leaderboard-score-col,
.benchmark-data-table td.leaderboard-score-cell {
  width: auto !important;
  min-width: 7.5rem;
  max-width: none !important;
}

.benchmark-data-table th.leaderboard-score-col {
  text-align: center !important;
}

.benchmark-data-table th.leaderboard-levels-col,
.benchmark-data-table td.leaderboard-levels-cell,
.benchmark-data-table th.leaderboard-entries-col,
.benchmark-data-table td.leaderboard-entries-cell,
.benchmark-data-table th.leaderboard-codegen-col,
.benchmark-data-table td.leaderboard-codegen-cell {
  width: 7.1rem !important;
  max-width: 7.1rem !important;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.benchmark-data-table th.leaderboard-stripe-col,
.benchmark-data-table td.leaderboard-stripe-cell {
  width: 10.5rem !important;
  max-width: 10.5rem !important;
  padding-left: 0.55rem;
  padding-right: 0.75rem;
}

.signal-cell {
  display: grid;
  gap: 0.1rem;
  justify-items: end;
  line-height: 1.05;
}

.signal-cell strong {
  color: var(--text);
}

.signal-cell span {
  color: var(--muted);
  font-size: 0.72rem;
}

.codegen-health-cell strong {
  display: inline-flex;
  gap: 0;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.76rem;
  white-space: nowrap;
}

.codegen-health-cell strong span {
  color: inherit;
  font-size: inherit;
}

.codegen-health-cell .codegen-health-cell__repaired,
.codegen-health-cell .codegen-health-cell__failed {
  padding: 0.03rem 0.1rem;
  border-radius: 4px;
  font-weight: 800;
}

.codegen-health-cell .codegen-health-cell__repaired {
  color: var(--codegen-repaired);
  background: color-mix(in srgb, var(--codegen-repaired) 14%, transparent);
}

.codegen-health-cell .codegen-health-cell__failed {
  color: var(--codegen-failed);
  background: color-mix(in srgb, var(--codegen-failed) 14%, transparent);
}

/* One compact filter row above the directory, with the match count at its end. */
.model-inspector-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 1.25rem;
}

.model-inspector-control-grid {
  display: grid;
  flex: 1 1 40rem;
  grid-template-columns: minmax(12rem, 1.25fr) repeat(3, minmax(9rem, 0.7fr));
  gap: 0.8rem;
}

.model-inspector-control-grid label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.model-inspector-control-grid input,
.model-inspector-control-grid select {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.model-inspector-count {
  margin: 0 0 0.6rem;
  color: var(--muted);
}

/* The slim directory fits a 1024 px layout without sideways scrolling. */
.benchmark-data-table--model-inspector {
  min-width: 0;
}

.benchmark-data-table--model-inspector thead th,
.benchmark-data-table--model-inspector tbody td {
  padding-inline: 0.6rem;
  vertical-align: middle;
}

.inspector-model-cell {
  min-width: 9rem;
}

.inspector-date-cell {
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inspector-settings {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
}

/* Exact setting badge, then its score. */
.inspector-setting {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* By game: one square per public game, shaded like the leaderboard's per-game strip.
   model-inspector.235cd23b3187.js draws the squares as one gradient from data-game-bands; these are its band
   colours. Before that (or without JavaScript) the strip is a neutral bar sized for eight games. */
.game-squares,
.score-bars--games {
  --gb-vh: #77c99b;
  --gb-h: #8cc7bb;
  --gb-m: #d0b07a;
  --gb-l: #ba776e;
  --gb-vl: #8f4d4d;
  --gb-x: var(--game-stripe-missing-hatch);
}

.game-squares {
  display: inline-block;
  width: 7.5rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--game-stripe-missing-base);
  vertical-align: middle;
}

.inspector-provider-cell,
.inspector-score-cell,
.inspector-coverage-chip,
.inspector-status-chip {
  font-weight: 800;
  white-space: nowrap;
}

.inspector-rank-cell {
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}

.inspector-provider-cell {
  color: var(--soft);
}

.inspector-score-cell {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.inspector-coverage,
.inspector-status-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.inspector-coverage-chip {
  min-height: 23px;
  padding: 0.12rem 0.38rem;
  font-size: 0.72rem;
}

.inspector-coverage-chip--present {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--positive) 35%, transparent);
}

.inspector-coverage-chip--missing {
  color: var(--muted);
  background: var(--surface-meta);
  border: 1px solid var(--border-meta);
}

.inspector-coverage-chip--unsupported {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border-meta);
}

.inspector-generation-health {
  display: grid;
  gap: 0.22rem;
}

.inspector-generation-row {
  display: block;
  min-width: 10rem;
  color: var(--soft);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* Long status notes ("Missing Balanced, Baseline") wrap so the directory fits a laptop. */
.inspector-status-chip {
  max-width: 11rem;
  min-height: 22px;
  padding: 0.12rem 0.4rem;
  font-size: 0.68rem;
  white-space: normal;
}

.inspector-status-chip--good {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 12%, transparent);
}

.inspector-status-chip--warn {
  color: var(--codegen-repaired);
  background: color-mix(in srgb, var(--codegen-repaired) 14%, transparent);
}

.inspector-status-chip--bad {
  color: var(--codegen-failed);
  background: color-mix(in srgb, var(--codegen-failed) 14%, transparent);
}

.inspector-status-chip--muted {
  color: var(--muted);
  background: var(--surface-meta);
}

.model-detail-panels {
  display: grid;
  gap: 1rem;
}

.model-detail-panel {
  min-width: 0;
  padding: 1.15rem 1.25rem;
}

.model-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
  justify-content: flex-start;
}

.model-detail-metrics {
  display: grid;
  margin: 0;
  grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}

.model-detail-metrics div {
  min-width: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  border: 0;
  background: none;
}

.model-detail-metrics dt {
  color: var(--muted);
  font: 400 0.8125rem var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

.model-detail-metrics dd {
  margin: 0.18rem 0 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
}

/* Model pages: scores by reasoning setting and by game, side by side on wide screens. */
.model-detail-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem 2.5rem;
  margin-top: 1.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}

.model-detail-charts > section {
  min-width: 0;
}

.model-detail-charts h2 {
  margin: 0 0 0.85rem;
  font-size: 1rem;
}

.score-bars {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.score-bars > li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.75rem;
}

.score-bars--games > li {
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 2.75rem;
}

.score-bars__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.9rem;
}

.score-bars__track {
  display: block;
  width: 100%;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

.score-bars__fill--accent {
  fill: var(--accent);
}

.score-bars__fill--band-vh {
  fill: var(--gb-vh);
}

.score-bars__fill--band-h {
  fill: var(--gb-h);
}

.score-bars__fill--band-m {
  fill: var(--gb-m);
}

.score-bars__fill--band-l {
  fill: var(--gb-l);
}

.score-bars__fill--band-vl {
  fill: var(--gb-vl);
}

.score-bars__value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.score-bars__tag {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.score-bars__note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.model-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.model-detail-grid > section {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.model-detail-grid h3,
.model-detail-reasoning h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.model-detail-status-note {
  margin: 0.65rem 0 0;
}

.model-cost-headline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 0.85rem;
}

.model-cost-value {
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.model-cost-caption {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Label/value rows that stay readable in a narrow column. */
.model-fact-list {
  display: grid;
  margin: 0;
  font-size: 0.875rem;
}

.model-fact-list > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}

.model-fact-list > div:last-child {
  border-bottom: 1px solid var(--line);
}

.model-fact-list dt {
  color: var(--muted);
}

/* Short values sit at the right of their label; long values wrap onto their own line. */
.model-fact-list dd {
  min-width: 0;
  margin: 0 0 0 auto;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.model-fact-list--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  column-gap: 2rem;
}

.model-fact-list--wide > div:last-child {
  border-bottom: 0;
}

.model-cost-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.model-cost-note > summary {
  cursor: pointer;
  color: var(--soft);
}

.model-cost-note p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.model-detail-setup-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--soft);
  line-height: 1.55;
}

/* Per-game pages: the reasoning view bar sits between the page header and the first table. */
.game-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.75rem 1.3rem;
  border-bottom: 1px solid var(--line);
}

.game-view-bar__label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.game-view-bar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.game-view-bar__tabs .pill-link,
.game-view-bar__tabs .pill-current {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.88rem;
}

.game-view-bar__status {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.games-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.games-directory-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.games-directory-item__figure {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.games-directory-item__media {
  display: block;
  aspect-ratio: 16 / 10;
  padding: 0.65rem;
}

.games-directory-item__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  transition: transform 0.18s ease;
}

.games-directory-item__media:hover .games-directory-item__image {
  transform: scale(1.018);
}

.games-directory-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 1rem 1rem;
}

.games-directory-item__body .section-label {
  margin: 0;
}

.games-directory-item h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

.games-directory-item h3 a {
  color: var(--text);
  text-decoration: none;
}

.games-directory-item h3 a:hover {
  text-decoration: underline;
}

.games-directory-item p {
  margin: 0;
  line-height: 1.45;
}

.games-directory-item__summary {
  flex: 1;
  color: var(--soft);
  font-size: 0.92rem;
}

.games-directory-item__leader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 600;
}

.games-directory-item__leader-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.games-directory-item__status {
  color: var(--muted);
  font-size: 0.86rem;
}

@media (min-width: 1100px) {
  .games-directory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phones: a small board beside the text keeps all eight games within a few screens. */
@media (max-width: 600px) {
  .games-directory-grid {
    gap: 0.75rem;
  }

  .games-directory-item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .games-directory-item__figure {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .games-directory-item__media {
    aspect-ratio: auto;
    height: 100%;
    padding: 0.5rem;
  }

  .games-directory-item__image {
    height: auto;
    filter: none;
  }

  .games-directory-item__body {
    padding: 0.75rem 0.8rem 0.8rem;
  }

  .games-directory-item__summary {
    font-size: 0.86rem;
  }
}

.table-footer {
  padding: 1rem 1.3rem 1.2rem;
  margin: 0;
  border-top: 1px solid var(--line);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
}

.badge-stable {
  background: var(--mint-soft);
  color: var(--mint);
}

.badge-provisional {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge-under_tested {
  background: color-mix(in srgb, var(--codegen-failed) 12%, transparent);
  color: var(--codegen-failed);
}

.site-footer {
  padding: 0 0 2.5rem;
}

.footer-inner {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.footer-inner p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
}

.footer-nav {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0.12rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-meta);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.18rem 0.5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.footer-nav a:hover {
  background: var(--interactive-hover-bg);
  color: var(--text);
}

.release-identity {
  /* `auto` keeps the container's centring so the line starts at the page gutter. */
  margin: 0.75rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}
.entrant-card {
  margin: 1.5rem 0;
}

/* Player-program filters: the same compact labelled fields as the Model results directory. */
.entrant-controls {
  padding: 0.9rem 1.3rem 0.75rem;
  border-top: 1px solid var(--line);
}

.entrant-controls__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  max-width: 60rem;
}

.entrant-controls label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.entrant-controls input,
.entrant-controls select {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: 400 0.9rem var(--font-sans);
}

.entrant-controls__status {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

@media (max-width: 600px) {
  .entrant-controls {
    padding-inline: 1rem;
  }

  .entrant-controls__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entrant-controls__search {
    grid-column: 1 / -1;
  }
}

/* Player-program cells carry no classes; styles follow column position. The model cell is first
   (name, then program ID), Notes and Generated are always the last two, and Score through
   Opponents are numbers. */
.benchmark-data-table--entrants code {
  white-space: nowrap;
}

@media (min-width: 721px) {
  .benchmark-data-table--entrants-with-reasoning :is(th, td):nth-child(n + 4):nth-child(-n + 8),
  .benchmark-data-table--entrants-without-reasoning :is(th, td):nth-child(n + 3):nth-child(-n + 7),
  .benchmark-data-table--entrants .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
}

.benchmark-data-table--entrants tbody td:first-child strong {
  display: block;
  font-weight: 700;
}

.benchmark-data-table--entrants tbody td:first-child code {
  display: block;
  margin-top: 0.15rem;
  color: var(--soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.benchmark-data-table--entrants tbody td:nth-last-child(2) {
  color: var(--soft);
  font-size: 0.84rem;
}

.benchmark-data-table--entrants tbody td:last-child {
  white-space: nowrap;
}

.benchmark-data-table--entrants tbody td:last-child small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Long tables show their first rows with Show more / Show all (site_table_row_limit.js). Before the
   script runs, CSS hides the same rows so the page does not jump; without JavaScript every row
   shows. Sorting and filters still work over the full list. */
html.js table[data-row-limit="25"]:not([data-row-limit-ready]) > tbody > tr:nth-child(n + 26),
html.js table[data-row-limit="20"]:not([data-row-limit-ready]) > tbody > tr:nth-child(n + 21),
html.js table[data-row-limit="10"]:not([data-row-limit-ready]) > tbody > tr:nth-child(n + 11),
table[data-row-limit] > tbody > tr[data-row-limit-hidden] {
  display: none;
}

.table-row-limit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.3rem;
  border-top: 1px solid var(--line);
}

.table-row-limit[hidden] {
  display: none;
}

.table-row-limit__status {
  margin: 0;
  color: var(--soft);
  font-size: 0.875rem;
}

.table-row-limit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-row-limit__button {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
}

.table-row-limit__button[hidden] {
  display: none;
}

/* Methodology: a four-step picture of how a result is made, then links to each section. */
.method-flow {
  padding: 1.1rem 1.3rem;
}

.method-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.method-flow__steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 0.2rem 0.65rem;
}

/* An arrow between neighbouring steps on wide screens. */
.method-flow__steps li + li::before {
  position: absolute;
  top: 0.35rem;
  left: -1.7rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  content: "→";
}

.method-flow__number {
  display: inline-flex;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--accent);
  font-weight: 700;
}

.method-flow__steps strong {
  align-self: center;
  font-size: 0.98rem;
}

.method-flow__steps p {
  margin: 0;
  color: var(--soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.method-contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.method-contents__label {
  margin-right: 0.35rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.method-contents .pill-link {
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.84rem;
}

.methodology-grid h2[id],
.methodology-downloads h2[id] {
  scroll-margin-top: 5rem;
}

@media (max-width: 900px) {
  .method-flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .method-flow__steps li + li::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .method-flow__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Below the width where brand, the section links, the main-site link and the theme switch fit on one row, the links
   move into the Menu disclosure. */
@media (max-width: 1149px) {
  .site-nav--desktop {
    display: none;
  }

  .mobile-site-nav {
    display: block;
  }
}

/* Very narrow screens (and 400% zoom): the logo mark alone keeps brand, theme switch and Menu on one
   row; the link keeps its accessible name. */
@media (max-width: 374px) {
  .brand-lockup {
    display: none;
  }
}

@media (max-width: 980px) {
  .content-grid,
  .dashboard-primary-grid {
    grid-template-columns: 1fr;
  }

  .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .container {
    width: min(2200px, calc(100% - 1rem));
  }

  .page {
    padding-top: 0.7rem;
  }

  /* One header row on phones: brand, theme switch and Menu side by side. At extreme zoom the
     actions wrap below the brand instead of overflowing. */
  .header-inner {
    min-height: 52px;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
    gap: 0.5rem;
  }

  .brand-sep,
  .brand-tag {
    display: none;
  }

  .header-actions {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
    flex-wrap: wrap;
    margin-left: auto;
    gap: 0.35rem;
  }

  .theme-switcher-btn {
    padding-inline: 0.4rem;
    font-size: 0.75rem;
  }

  .card,
  .table-card,
  .ranking-bars-card,
  .dashboard-primary-chart .ranking-bars-card {
    padding: 0.82rem;
  }

  .content-stack,
  .dashboard-primary-grid {
    gap: 0.7rem;
  }

  .method-steps {
    grid-template-columns: 1fr;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .table-header-side {
    width: 100%;
    justify-items: stretch;
  }

  .table-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .table-header-popover {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
  }

  .leaderboard-column-settings__panel {
    width: 100%;
  }

  .table-wrap {
    overflow-x: visible;
  }

  .table-scroll-top {
    display: none !important;
  }

  .model-inspector-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-inspector-control-grid label:first-child {
    grid-column: 1 / -1;
  }

  .model-detail-actions {
    justify-content: flex-start;
  }

  .model-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .benchmark-data-table,
  .benchmark-data-table--overall,
  .benchmark-data-table--mixed,
  .benchmark-data-table--track,
  .benchmark-data-table--per-game,
  .benchmark-data-table--model-inspector,
  .benchmark-data-table--archive-v1 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .benchmark-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .benchmark-data-table thead .metric-help,
  .benchmark-data-table thead .table-sort-button {
    visibility: hidden;
  }

  .table-sort-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .table-sort-mobile label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
  }

  .table-sort-mobile select {
    flex: 1;
    min-width: 0;
    width: 0;
    min-height: 44px;
    font-size: 0.875rem;
  }

  .table-sort-mobile select,
  .table-sort-mobile button {
    border: 1px solid var(--interactive-border);
    border-radius: 0.65rem;
    padding: 0.5rem;
    background: var(--interactive-bg);
    color: var(--text);
  }

  .table-sort-mobile button {
    min-width: 44px;
    min-height: 44px;
  }

  .benchmark-data-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .benchmark-data-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem 0.75rem;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    box-shadow: none;
  }

  .benchmark-data-table tbody tr[hidden] {
    display: none !important;
  }

  /* Cards keep the visible-order stripe with the table stripe token. It moves away from the text
     colour in both themes, so muted chip text keeps its contrast on striped cards. */
  .benchmark-data-table tbody tr:nth-child(even of :where(:not([hidden]))) {
    background: var(--row-alt);
  }

  .benchmark-data-table tbody td,
  .benchmark-data-table--overall tbody td,
  .benchmark-data-table--mixed tbody td,
  .benchmark-data-table--track tbody td,
  .benchmark-data-table--per-game tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0;
    border-top: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
  }

  .benchmark-data-table tbody td.leaderboard-wdl-cell {
    grid-column: 1 / -1;
  }

  .benchmark-data-table tbody td[hidden] {
    display: none !important;
  }

  .benchmark-data-table tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  .benchmark-data-table--overall
    tbody
    td:not(.leaderboard-rank-cell):not(.leaderboard-primary-cell):not(.leaderboard-score-cell),
  .benchmark-data-table--mixed
    tbody
    td:not(.leaderboard-rank-cell):not(.leaderboard-primary-cell):not(.leaderboard-score-cell),
  .benchmark-data-table--track
    tbody
    td:not(.leaderboard-rank-cell):not(.leaderboard-primary-cell):not(.leaderboard-score-cell) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    gap: 0.12rem;
  }

  .benchmark-data-table tbody td.leaderboard-reasoning-cell .reasoning-badge,
  .benchmark-data-table tbody td.leaderboard-best-cell .leaderboard-best,
  .benchmark-data-table tbody td.leaderboard-codegen-cell .signal-cell {
    justify-self: start;
    max-width: 100%;
  }

  .benchmark-data-table tbody td.leaderboard-best-cell .leaderboard-best {
    min-width: 0;
  }

  .benchmark-data-table tbody td.leaderboard-rank-cell {
    position: absolute;
    top: 0.84rem;
    left: 0.78rem;
    display: block;
    width: auto !important;
  }

  .benchmark-data-table tbody td.leaderboard-primary-cell::before,
  .benchmark-data-table tbody td.leaderboard-rank-cell::before,
  .benchmark-data-table tbody td:nth-child(2):not(.leaderboard-base-rank-cell)::before,
  .benchmark-data-table tbody td.leaderboard-score-cell::before {
    content: "";
    display: none;
  }

  .benchmark-data-table tbody td:nth-child(2):not(.leaderboard-base-rank-cell),
  .benchmark-data-table tbody td.leaderboard-primary-cell {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding-left: 2.65rem;
    font-size: 0.92rem;
    font-weight: 700;
  }

  .benchmark-data-table tbody td.leaderboard-base-rank-cell {
    display: grid;
    grid-column: auto;
    grid-row: auto;
    padding-left: 0;
    font-size: 0.82rem;
    font-weight: 400;
  }

  .benchmark-data-table tbody td.leaderboard-base-rank-cell::before {
    content: attr(data-label);
    display: block;
  }

  .benchmark-data-table tbody td.leaderboard-score-cell,
  .benchmark-data-table--model-inspector tbody td:nth-child(4),
  .benchmark-data-table tbody td[data-label="Score"] {
    grid-column: 2;
    grid-row: 1;
    display: block;
    justify-self: end;
    min-width: 4.25rem !important;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    text-align: right;
  }

  .benchmark-data-table tbody td.leaderboard-score-cell .score-rail {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    min-width: 4.25rem;
    justify-items: end;
  }

  .benchmark-data-table tbody td.leaderboard-score-cell .score-rail__track {
    width: 4.25rem;
  }

  .benchmark-data-table tbody td.leaderboard-score-cell .score-rail__value {
    font-size: 1rem;
  }

  .benchmark-data-table tbody td[colspan] {
    grid-column: 1 / -1;
    display: block;
  }

  .benchmark-data-table--per-game
    tbody
    td:not(.leaderboard-rank-cell):not(:nth-child(2)):not([data-label="Score"]) {
    grid-column: 1 / -1;
  }

  /* Model results cards: detail cells span the card. Left in the auto-flow they landed in the
     narrow score column, which squeezed names and values to one letter per line. */
  .benchmark-data-table--model-inspector
    tbody
    td:not(.leaderboard-rank-cell):not(:nth-child(2)):not(:nth-child(4)) {
    grid-column: 1 / -1;
  }

  .benchmark-data-table--entrants tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .benchmark-data-table--entrants tbody td,
  .benchmark-data-table--entrants tbody td:nth-child(2),
  .benchmark-data-table--entrants tbody td[data-label="Score"] {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    justify-self: stretch;
    min-width: 0 !important;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 400;
    text-align: left;
  }

  .benchmark-data-table--entrants tbody td[data-label="Score"]::before {
    content: attr(data-label);
    display: block;
  }

  /* Player-program cards label each field by column position (the cells carry no labels, which
     keeps a 200-row table light). The model is first; Notes and Generated are always last. The
     generic card layout treats a table's second cell as its name, so the doubled class below
     makes the second cell an ordinary labelled field here. */
  .benchmark-data-table.benchmark-data-table--entrants tbody td:nth-child(2) {
    display: grid;
    grid-row: auto;
    padding-left: 0;
    font-size: 0.82rem;
    font-weight: 400;
  }

  .benchmark-data-table.benchmark-data-table--entrants tbody td::before {
    display: block;
    content: "";
  }

  .benchmark-data-table--entrants tbody td .reasoning-badge,
  .benchmark-data-table--entrants tbody td code {
    justify-self: start;
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning
    tbody
    td:nth-child(2)::before {
    display: block;
    content: "Reasoning";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(3)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(2)::before {
    display: block;
    content: "Status";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(4)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(3)::before {
    content: "Score";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(5)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(4)::before {
    content: "Elo";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(6)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(5)::before {
    content: "W / D / L";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(7)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(6)::before {
    content: "Matches";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(8)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(7)::before {
    content: "Opponents";
  }

  .benchmark-data-table.benchmark-data-table--entrants-with-reasoning tbody td:nth-child(9)::before,
  .benchmark-data-table.benchmark-data-table--entrants-without-reasoning
    tbody
    td:nth-child(8)::before {
    content: "Confidence";
  }

  /* After the positional rules so they win where the optional Confidence column is absent. */
  .benchmark-data-table.benchmark-data-table--entrants tbody td:nth-last-child(2)::before {
    content: "Notes";
  }

  .benchmark-data-table.benchmark-data-table--entrants tbody td:last-child::before {
    content: "Generated";
  }

  /* Model results cards label their details from each cell's data-label; the score needs none. */
  .benchmark-data-table--model-inspector tbody td:nth-child(4)::before {
    content: "";
    display: none;
  }

  .benchmark-data-table--entrants code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .benchmark-data-table .leaderboard-model-cell {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .game-stripe {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(6px, 1fr));
  }

  body::before {
    opacity: 0.16;
  }
}

@media (max-width: 380px) {
  .benchmark-data-table tbody td.leaderboard-primary-cell {
    grid-column: 1 / -1;
    padding-right: 0;
  }
  .benchmark-data-table tbody td.leaderboard-score-cell {
    grid-row: 2;
  }
}

/* Phones: two player fields per line (label above value) keeps every field visible in about half
   the height of the one-field-per-line cards. */
@media (max-width: 720px) {
  .benchmark-data-table--entrants tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.5rem;
  }

  .benchmark-data-table--entrants tbody td,
  .benchmark-data-table--entrants tbody td:nth-child(2),
  .benchmark-data-table--entrants tbody td[data-label="Score"] {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.1rem;
  }

  /* The model name and program ID get the card's full first line, without a "Model" label. */
  .benchmark-data-table--entrants tbody td:first-child {
    grid-column: 1 / -1;
  }

  .benchmark-data-table--entrants tbody td:first-child::before {
    display: none;
  }

  .benchmark-data-table tbody td::before {
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
}
/* charts.html: hide JS-only regions when scripting is disabled (no `html.js`). */
html:not(.js) body.charts-page .charts-js-only {
  display: none !important;
}

/* --- Charts page (charts.html) --- */
.charts-main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.charts-js-only {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.charts-main-plots {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

/* Wide screens: charts in two columns; the two heatmaps and More charts keep the full width. */
@media (min-width: 1200px) {
  .charts-main-plots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .charts-main-plots > .chart-card {
    min-width: 0;
  }

  .charts-main-plots > .chart-card--wide {
    grid-column: 1 / -1;
  }
}

/* Rank by: a compact drop-down in the control bar. */
.chart-rank-by-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-rank-by-control > .section-label {
  margin: 0;
}

.chart-select {
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

/* More charts: each less-used view opens on demand. */
.chart-more > .chart-lazy-disclosure {
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.chart-more-hint {
  margin-left: 0.5rem;
  color: var(--muted);
  font-weight: 400;
}

/* Charts control bar: Models drop-down beside the reasoning view, sticky under the site header. */
.chart-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.chart-reasoning-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.chart-reasoning-group > .section-label {
  margin: 0;
}

.chart-model-picker {
  position: relative;
}

.chart-model-picker__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-sm);
  background: var(--mint-soft);
  color: var(--mint);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.chart-model-picker__summary::-webkit-details-marker {
  display: none;
}

.chart-model-picker__summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.chart-model-picker[open] > .chart-model-picker__summary::after {
  transform: translateY(2px) rotate(225deg);
}

.chart-model-picker__summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Space is reserved before charts.1acd122a9253.js fills in the count, so the control bar does not shift. */
.chart-model-count {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.chart-model-picker__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 26;
  width: min(36rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--text) 16%, transparent);
}

.chart-model-picker__panel .section-label {
  margin-bottom: 0.25rem;
}

.chart-model-picker__panel .chart-toolbar {
  margin-top: 0.5rem;
  gap: 0.65rem;
}

.chart-model-picker__panel > .table-muted {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.chart-model-picker__panel .chart-model-list {
  height: min(52vh, 420px);
  margin-top: 0.6rem;
}

/* The control bar stays pinned while scrolling, so keep it to two short rows on phones. The hint
   stays available to assistive technology through aria-describedby. */
@media (max-width: 720px) {
  .card.chart-controls-bar {
    padding: 0.65rem 0.75rem;
  }

  .chart-controls-row {
    gap: 0.5rem;
  }

  .chart-reasoning-group > .section-label,
  .chart-rank-by-control > .section-label,
  .chart-controls-bar .chart-reasoning-sticky-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Models and Rank by share the first row; the reasoning buttons take the second. */
  .chart-controls-row > .chart-reasoning-group {
    order: 1;
  }

  .chart-rank-by-control .chart-select {
    max-width: 11rem;
  }

  .chart-reasoning-group .chart-btn-row {
    gap: 0.3rem;
  }

  .chart-reasoning-group .chart-btn {
    min-height: 40px;
    padding: 0 0.55rem;
    font-size: 0.8125rem;
  }
}

/* Very narrow phones: a narrower Rank by still fits beside Models. */
@media (max-width: 360px) {
  .chart-rank-by-control .chart-select {
    max-width: 7.5rem;
  }
}

/* `overflow: hidden` on `.card` breaks `position: sticky` against the viewport on
   Chrome/Firefox mobile; this panel must not clip its own scroll containment. */
.card.chart-reasoning-sticky {
  overflow: visible;
}

.chart-reasoning-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--benchmark-header-height) + env(safe-area-inset-top, 0px) + 0.4rem);
  z-index: 25;
  margin-bottom: 0.25rem;
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.chart-reasoning-sticky .section-label {
  margin-bottom: 0.35rem;
}

.chart-reasoning-sticky-hint {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.chart-intro code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent);
}

.chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.chart-search-label {
  flex: 1 1 220px;
  min-width: 180px;
}

.chart-search-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.chart-search-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chart-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chart-btn {
  cursor: pointer;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--interactive-border);
  background: var(--interactive-bg);
  color: var(--soft);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--interactive-shadow);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.chart-btn:hover {
  background: var(--interactive-hover-bg);
  border-color: var(--interactive-hover-border);
  color: var(--text);
}

.chart-btn.is-active {
  background: var(--interactive-active-bg);
  border-color: var(--interactive-active-border);
  color: var(--text);
}

.chart-spread-toolbar,
.chart-reasoning-toolbar {
  margin-bottom: 0.75rem;
}

.chart-model-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.35rem 1.25rem;
  margin-top: 1rem;
  height: 264px;
  align-content: start;
  overflow-y: auto;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-meta);
  background: var(--panel-2);
}

.chart-model-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--soft);
}

.chart-model-row .provider-logo {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.88;
}

.chart-model-row input {
  flex: none;
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
}

.chart-model-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Incomplete-evidence marker beside a picker entry; explained by a tooltip. */
.chart-model-evidence {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

.chart-model-evidence:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chart-model-evidence--inline {
  vertical-align: -0.15em;
  cursor: default;
}

.chart-model-evidence-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(20rem, calc(100vw - 16px));
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  box-shadow: 0 18px 44px rgba(8, 16, 25, 0.34);
  pointer-events: none;
}

.chart-model-evidence-tooltip[hidden] {
  display: none;
}

.chart-card {
  margin: 0;
  padding: 1.25rem 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.chart-lazy-disclosure {
  margin-top: 0.5rem;
}

.chart-lazy-disclosure > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.chart-lazy-disclosure[open] > summary {
  margin-bottom: 1rem;
}

.chart-card-caption {
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.chart-card-caption .section-label {
  margin-right: 0.5rem;
}

.chart-cycle-explainer {
  display: grid;
  gap: 0.45rem;
  max-width: 78ch;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.chart-cycle-explainer p {
  margin: 0;
}

.chart-cycle-explainer strong {
  color: var(--text);
}

.matchup-cycles {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-left: 1.5rem;
}

.matchup-cycle {
  padding-left: 0.25rem;
}

.matchup-cycle strong,
.matchup-cycle-detail {
  display: block;
}

.matchup-cycle-detail {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.18rem;
}

.plot-root {
  font-family: var(--font-sans);
  color: var(--muted);
}

/* Initial Top 12 plot: 12 rows at 24px plus 66px for axes and margins. */
#plot-rank-by {
  min-height: 354px;
}

.plot-root svg {
  max-width: 100%;
  height: auto;
  background: transparent !important;
}

.per-game-small-multiples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
  gap: 1rem;
}

.per-game-small-panel {
  min-width: 0;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.per-game-small-panel-header {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  justify-content: space-between;
  margin: 0 0 0.85rem;
}

.per-game-small-panel-title {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.per-game-small-panel-alias,
.per-game-small-panel-count {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 86%, var(--line));
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.per-game-small-panel-alias {
  padding: 0.25rem 0.42rem;
}

.per-game-small-panel-count {
  flex: 0 0 auto;
  padding: 0.31rem 0.46rem;
  text-align: right;
}

.per-game-small-panel h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.per-game-bars {
  display: grid;
  gap: 0.52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.per-game-bar-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) minmax(96px, 1.1fr) 3.2rem;
  gap: 0.38rem 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.16rem 0;
}

.per-game-bar-label {
  min-width: 0;
  color: var(--soft);
  font-size: 0.84rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.per-game-bar-track {
  display: block;
  min-width: 0;
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.per-game-bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
}

.per-game-bar-value {
  justify-self: end;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.per-game-panel-note {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.plot-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.plot-reasoning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: start;
}

@media (max-width: 960px) and (orientation: portrait) {
  .plot-reasoning-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .per-game-small-panel-header {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .per-game-small-panel-count {
    align-self: start;
  }

  .per-game-bar-row {
    grid-template-columns: minmax(0, 1fr) 3.2rem;
  }

  .per-game-bar-track {
    grid-column: 1 / -1;
  }

  .per-game-bar-value {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (orientation: landscape) and (min-width: 900px) {
  .plot-reasoning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
  }
}

.plot-reasoning-cell {
  min-width: 0;
}

.plot-reasoning-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.chart-empty {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.chart-footnote {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.chart-coming-soon {
  margin: 0;
}

.chart-coming-soon .table-subtitle {
  margin: 0;
}

.economics-active-panel {
  margin: 0;
}

.economics-model-logo-marker {
  cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42));
}

.economics-model-logo-marker:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  filter: drop-shadow(0 0 4px var(--focus-ring));
}

.chart-btn-row--compact {
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.chart-btn-row--compact .chart-btn {
  min-height: 2.15rem;
  padding: 0.42rem 0.7rem;
}

.chart-footnote code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent-warm);
}

.benchmark-data-table th.leaderboard-cost-col,
.benchmark-data-table td.leaderboard-cost-cell {
  width: 9.5rem !important;
  max-width: 9.5rem !important;
}
.evaluation-summary {
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}
.evaluation-summary dd {
  overflow-wrap: anywhere;
}

.comparison-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.comparison-report-grid article {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}
.comparison-report-grid p {
  overflow-wrap: anywhere;
}
.comparison-report-score {
  font-size: 2.2rem;
  font-weight: 700;
}

/* The metrics open the card now that the page header names the model. */
.model-detail-panel > .model-detail-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  border-top: 0;
  padding-top: 0;
}

/* Phones: two stats per line instead of one; the eight model stats otherwise fill a whole screen. */
@media (max-width: 640px) {
  .model-detail-panel > .model-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.model-detail-panel > .model-detail-metrics dd {
  overflow-wrap: normal;
  word-break: normal;
}

@media (width >= 641px) {
  .leaderboard-control-group--view {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
  }
  .leaderboard-control-group--view > .leaderboard-control-label {
    display: none;
  }
}

@media (width <= 600px) {
  .dashboard-shell .leaderboard-controls {
    gap: 0.4rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .leaderboard-control-group--view .leaderboard-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .leaderboard-view-link {
    font-size: 0.78rem;
    white-space: normal;
    padding: 0.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .dashboard-ranking-hover-tooltip {
    display: none !important;
  }

  body::before,
  .site-header,
  .site-footer {
    display: none !important;
  }

  .page {
    padding: 0;
  }

  .card,
  .table-card,
  .ranking-bars-card {
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
  }

  .card *,
  .table-card *,
  .ranking-bars-card * {
    color: #000 !important;
  }

  .ranking-bar-rect {
    fill: #2563eb !important;
  }

  .dashboard-primary-chart .ranking-bar-stage-fill,
  .dashboard-primary-chart .ranking-bar-row--enhanced .ranking-bar-track-fill {
    background: #2563eb !important;
    color: #fff !important;
  }

  thead th {
    position: static;
    background: #f0f0f0;
    color: #000;
  }

  tbody tr,
  tbody tr:nth-child(even of :where(:not([hidden]))) {
    background: #fff;
  }

  /* Print every row of a long table, without its Show more controls. */
  html.js table[data-row-limit] > tbody > tr:not([hidden]) {
    display: table-row !important;
  }

  .table-row-limit {
    display: none !important;
  }
}
/* Benchmark dashboard readability polish. Bracket identity stays on the outline and rail. */
.reasoning-badge,
.reasoning-badge--baseline,
.reasoning-badge--none,
.reasoning-badge--balanced,
.reasoning-badge--medium,
.reasoning-badge--intensive,
.reasoning-badge--highest {
  background: var(--panel-2);
  color: var(--text);
}

.reasoning-badge--legacy {
  border-color: var(--line-strong);
  color: var(--muted);
}

.reasoning-badge--legacy.reasoning-badge--group-intensive {
  border-color: var(--reasoning-intensive-border);
  color: var(--reasoning-intensive-fg);
}

.reasoning-badge--legacy.reasoning-badge--group-balanced {
  border-color: var(--reasoning-balanced-border);
  color: var(--reasoning-balanced-fg);
}

.reasoning-badge--legacy.reasoning-badge--group-baseline {
  border-color: var(--reasoning-baseline-border);
  color: var(--reasoning-baseline-fg);
}

.benchmark-data-table tbody tr {
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.benchmark-data-table tbody td {
  line-height: 1.42;
}

.benchmark-data-table td[title]:not(.leaderboard-primary-cell),
.benchmark-data-table [title].signal-cell {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, currentColor 42%, transparent);
  text-underline-offset: 0.2em;
}

.benchmark-data-table tr[data-ranking-status="provisional"] {
  background: color-mix(in srgb, var(--panel-2) 92%, var(--accent-warm));
}

.benchmark-data-table tr[data-ranking-status="partial"] {
  background: color-mix(in srgb, var(--panel-2) 93%, var(--accent));
}

.benchmark-data-table tr[data-ranking-status="provisional"] > td:first-child {
  box-shadow: inset 4px 0 0 var(--accent-warm);
}

.benchmark-data-table tr[data-ranking-status="partial"] > td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

.leaderboard-levels-status {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .benchmark-data-table tbody {
    gap: 0.9rem;
  }

  .benchmark-data-table tbody tr {
    gap: 0.52rem 0.8rem;
    padding: 0.9rem;
    border-color: var(--line-strong);
  }

  .benchmark-data-table tbody tr[data-ranking-status="provisional"] {
    box-shadow:
      inset 4px 0 0 var(--accent-warm),
      inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
  }

  .benchmark-data-table tbody tr[data-ranking-status="partial"] {
    box-shadow:
      inset 4px 0 0 var(--accent),
      inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
  }

  .benchmark-data-table tr[data-ranking-status="provisional"] > td:first-child,
  .benchmark-data-table tr[data-ranking-status="partial"] > td:first-child {
    box-shadow: none;
  }

  .benchmark-data-table tbody td::before {
    color: var(--soft);
  }

  .dashboard-ranking-hover-tooltip {
    max-width: calc(100vw - 1rem);
    padding: 0.65rem 0.75rem;
  }
}

/* Shared presentation: quiet surfaces, readable metadata, compact results. */
:root .card,
:root[data-theme] .card,
:root .ranking-bars-card,
:root[data-theme] .ranking-bars-card {
  box-shadow: none;
  background: var(--panel);
}
:root .table-card::before,
:root .ranking-bars-card::before {
  display: none;
}
.section-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0.02em;
}
.leaderboard-filter-btn,
.leaderboard-filter-input,
.leaderboard-filter-select {
  min-height: 44px;
}
.reasoning-badge,
.leaderboard-reasoning-cell .reasoning-badge,
.benchmark-data-table td .reasoning-badge,
.leaderboard-filter-btn .reasoning-badge {
  font-size: 0.8125rem;
}
.dashboard-primary-chart .ranking-bar-label,
.dashboard-primary-chart .ranking-bar-value,
.dashboard-primary-chart .ranking-bars-status,
.dashboard-ranking-meta,
.dashboard-ranking-scale {
  font-size: 0.875rem;
}
.method-steps > div {
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.model-detail-score dd {
  line-height: 1.2;
  color: var(--accent);
  font-size: 2.25rem;
}
.model-detail-actions .pill-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.model-detail-grid h2,
.model-detail-reasoning h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
@media (max-width: 980px) {
  .model-detail-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .dashboard-primary-chart .ranking-bars-figcaption {
    padding-right: 0;
  }
  .dashboard-primary-chart .ranking-bars-score-lens {
    position: static;
    margin-bottom: 0.75rem;
  }
  .model-detail-actions {
    order: 1;
    justify-content: flex-start;
  }
  .model-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.model-setting-details {
  margin-top: 1rem;
}
.model-setting-details > summary {
  min-height: 44px;
  padding: 0.75rem 0;
  color: var(--soft);
  cursor: pointer;
}
@media (max-width: 640px) {
  .leaderboard-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .leaderboard-filter-trigger {
    margin-left: 0;
    justify-content: center;
    align-self: end;
  }
  .leaderboard-controls .leaderboard-control-group {
    min-width: 0;
  }
  .leaderboard-active-filters {
    grid-column: 1 / -1;
  }
  [data-leaderboard-reasoning-controls] .leaderboard-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .leaderboard-segmented .leaderboard-filter-btn {
    justify-content: center;
  }
  .leaderboard-filter-panel .leaderboard-filter-select {
    min-width: 0;
  }
}

@media (min-width: 981px) {
  .model-detail-metrics {
    grid-template-columns: 1.2fr 0.5fr 1fr 0.9fr 1fr 1.6fr;
  }
}

@media (max-width: 640px) {
  .leaderboard-control-group--view > .leaderboard-control-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dashboard-primary-chart .ranking-bars-score-lens {
    display: none;
  }
}

@media (max-width: 380px) {
  .leaderboard-control-group--view,
  .leaderboard-filter-trigger {
    grid-column: 1 / -1;
  }
}