/* ==========================================================================
   SciConBench — public dashboard
   Light/dark, centered, plain-typography theme.
   ========================================================================== */

:root {
  --bg:            #ffffff;
  --bg-raised:     #fbfbfc;
  --bg-card:       #ffffff;
  --bg-hover:      #f6f7f9;
  --line:          #dfe3e8;
  --line-soft:     #eaedf1;

  --text:          #1c1f23;
  --text-dim:      #4d5560;
  --text-faint:    #7c8592;

  --accent:        #17356b;
  --accent-soft:   #1f4d99;
  --princeton-orange: #e77500;
  --live:          #157f5b;
  --warn:          #9a6100;
  --bad:           #b3261e;

  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
           Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 860px;
  --radius: 8px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111418;
  --bg-raised: #171b21;
  --bg-card: #171b21;
  --bg-hover: #20262d;
  --line: #3a434e;
  --line-soft: #29313a;
  --text: #f1f4f7;
  --text-dim: #c3cbd4;
  --text-faint: #929eac;
  --accent: #8fb5ff;
  --accent-soft: #b2cbff;
  --princeton-orange: #ff9838;
  --live: #58d3a1;
  --warn: #f1c46b;
  --bad: #ff8178;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS inflates body text in landscape unless this is pinned. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.theme-toggle {
  position: fixed;
  z-index: 90;
  top: 16px;
  right: 18px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: var(--text-dim);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-faint);
  background: var(--bg-hover);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-icon { grid-area: 1 / 1; }
.theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }

/* Reserved decorative layer; intentionally empty in both themes. */
.grain { display: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, pre { font-family: var(--mono); font-size: 0.86em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─────────────────────────── side nav ────────────────────────────── */

/* Fixed left rail, positioned in the gutter beside the centered content
   column. Only shown once the viewport is wide enough for the gutter to fit
   without crowding the content; on narrower screens it hides entirely
   rather than overlapping. */
.side-nav {
  position: fixed;
  top: 15vh;
  left: calc((100vw - var(--wrap)) / 2 - 230px);
  width: 190px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
}
.side-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.side-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 18px;
}
.side-nav-brand:hover { text-decoration: none; }
.side-nav-brand img { flex: none; }

.side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line-soft);
}

.side-nav li a {
  display: block;
  padding: 6px 0 6px 15px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--text-faint);
  transition: color 0.15s, border-color 0.15s;
}
.side-nav li a:hover { color: var(--text); text-decoration: none; }
.side-nav li a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

@media (min-width: 1400px) {
  .side-nav { display: block; }
}

/* ───────────────────────────── banner ───────────────────────────── */

.demo-banner {
  background: #fff6e3;
  border-bottom: 1px solid #f0d9a8;
  color: #6b4700;
  font-size: 13.5px;
  padding: 10px 24px;
  text-align: center;
}
.demo-banner code { color: #3d2900; }

/* ────────────────────────────── hero ────────────────────────────── */

/* The hero is the one fully centered block, matching the reference layout. */
.hero { padding: 32px 0 24px; text-align: center; }

.hero-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: none;
}

.hero-title {
  font-weight: 700;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

.hero-tagline {
  font-size: 18px;
  color: var(--text-dim);
  margin: 6px 0 0;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.btn:hover { text-decoration: none; border-color: #c2c9d2; background: var(--bg-hover); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn .btn-sub { color: var(--text-faint); font-size: 12px; }
.btn--primary .btn-sub { color: rgba(255, 255, 255, 0.75); }

.btn-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
}
.btn-icon svg,
.btn-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.btn-icon--github,
.btn-icon--blog {
  padding: 1px;
  border-radius: 50%;
  background: #fff;
}

/* ───────────────────────────── sections ─────────────────────────── */

.section { padding: 48px 0; }
.section--tight { padding: 40px 0; }
#news { padding-top: 0; padding-bottom: 16px; }
#trend { padding-top: 12px; padding-bottom: 28px; }
#introduction { padding-top: 28px; padding-bottom: 8px; }
#data { padding-top: 12px; padding-bottom: 22px; }
#data .section-head { margin-bottom: 10px; }
#leaderboard { padding-top: 30px; padding-bottom: 20px; }
#faq-section { padding-top: 16px; padding-bottom: 20px; }
#latest-news { padding-top: 18px; padding-bottom: 16px; }
#cite { padding-top: 20px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.section-title {
  font-weight: 600;
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.section-head--center {
  justify-content: center;
  text-align: center;
}
.section-head--center > div { width: 100%; }

/* Reserved for section titles that should stand out as a new chapter of the
   page — centered, a touch larger than a normal section title, with a short
   accent-colored rule underneath rather than a plain browser underline.
   Apply to new top-level sections. */
.section-title--feature {
  display: inline-block;
  position: relative;
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  padding-bottom: 16px;
}
.section-title--feature::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

.intro-copy {
  max-width: 860px;
  margin: 0 auto;
  text-align: justify;
  text-align-last: left;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}
.intro-copy p + p { margin-top: 14px; }
.intro-copy a { color: var(--accent); text-underline-offset: 2px; }
.intro-copy strong { color: var(--text); }

.teaser-figure {
  max-width: 96ch;
  margin: 39px auto 15px;
  font-size: 12px;
}
.teaser-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.teaser-figure figcaption {
  margin: 10px auto 0;
  color: var(--text-faint);
  line-height: 1.5;
  text-align: justify;
  text-align-last: left;
}

.progress-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35em;
  font-weight: 700;
}
.progress-title-logo {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: none;
}

.section-sub {
  max-width: 72ch;
  color: var(--text-dim);
  margin: 8px 0 0;
  font-size: 15px;
}

.section-title--sub {
  font-size: 19px;
  font-weight: 600;
}

#leaderboard .wrap { max-width: 1084px; }
.results-grid {
  display: grid;
  width: calc(100% - 224px);
  grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.65fr);
  gap: 20px;
  align-items: start;
  margin-right: auto;
  margin-left: auto;
}
.results-grid > * { min-width: 0; }
#leaderboard p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}
.result-column-head { margin-bottom: 14px; }
.result-column-head--board {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.leaderboard-caption {
  max-width: 64ch;
}
.metrics-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.metrics-column .card--metric { padding: 15px; }
.metrics-column .card--metric p {
  margin: 9px 0 12px;
  line-height: 1.5;
}
.metrics-intro,
.leaderboard-caption {
  color: #68717d;
  font-size: 12.5px;
  line-height: 1.5;
}
.metric-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.fraction {
  display: inline-grid;
  grid-template-rows: auto auto;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}
.fraction > span:first-child {
  padding: 0 4px 2px;
  border-bottom: 1px solid currentColor;
}
.fraction > span:last-child { padding: 2px 4px 0; }
.equation-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.quantitative-subsection {
  width: calc(100% - 224px);
  margin-top: 38px;
  margin-left: 112px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.quantitative-subsection .section-head { margin-bottom: 16px; }
#fact-diagnostics .section-head > div,
#fact-diagnostics .section-sub,
#effort .section-head > div,
#effort .section-sub {
  width: 100%;
  max-width: none;
}

#trend .section-head {
  justify-content: center;
  text-align: center;
}
#trend .section-head > div {
  width: 100%;
}
#trend .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.dataset-details { margin-top: 28px; }
.dataset-details .grid-2 { margin-top: 0; }
.dataset-details .card-title {
  font-size: 17px;
  color: var(--text);
}
.chart-context {
  margin: -8px 0 2px;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ─────────────────────── sample questions ──────────────────────── */

.question-examples {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.question-examples-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.question-examples-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.question-examples-head p {
  margin: 4px 0 0;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.45;
}
.question-examples-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
#question-examples-counter {
  margin-right: 4px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.question-examples-nav button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  font: 600 18px/1 var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.question-examples-nav button:hover:not(:disabled) {
  border-color: var(--accent-soft);
  background: var(--bg-hover);
  color: var(--accent-soft);
}
.question-examples-nav button:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
.question-examples-nav button:disabled {
  cursor: default;
  opacity: 0.35;
}
.question-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.question-example-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 31, 35, 0.04);
}
.question-example-field {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 5px;
  background: #edf7f4;
  color: var(--live);
  font-size: 13px;
  font-weight: 700;
}
.question-example-field span {
  font-size: 12px;
  line-height: 1;
}
.question-example-body {
  flex: 1;
  padding: 16px 2px 18px;
}
.question-example-body h4 {
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.4;
}
.question-example-body p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}
.question-example-card footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 2px 1px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.4;
}
.question-example-source {
  display: flex;
  justify-content: flex-start;
  gap: 4px 12px;
  width: 100%;
  flex-wrap: wrap;
}
.question-example-source a {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 10.5px;
}

/* ────────────────────────────── cards ──────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px;
}
.card--chart { padding: 18px 16px 12px; }
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.card-title--spaced { margin-top: 22px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2--wide-left { grid-template-columns: 1.3fr 1fr; gap: 36px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Grid items default to min-width:auto, which can let wide content stretch
   a column past the container and scroll the whole page. */
.grid-2 > *, .grid-2--wide-left > *, .grid-3 > * { min-width: 0; }

.card--metric { display: flex; flex-direction: column; align-items: flex-start; }
.card--metric p { color: var(--text-dim); font-size: 14px; margin: 12px 0 16px; }
.card--metric em { color: var(--text); font-style: normal; font-weight: 600; }

.metric-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 9px;
  border: 1px solid #ccd7e8;
  background: #f2f6fc;
  border-radius: 999px;
}

/* ─────────────────────────── leaderboard ───────────────────────── */

.chart-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.chart-toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chart-download-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-dim);
  text-decoration: none;
}
.chart-download-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chart-download-btn svg { flex: none; }
.chart-actions {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 800px;
  margin: 9px auto 0;
}

/* Model Family sits right next to the panel buttons; keep it a touch
   smaller than the standalone version so the whole toolbar has a better
   chance of staying on one line. */
.panel-select-wrap--compact {
  gap: 5px;
  font-size: 12.5px;
  margin-left: 2px;
}
.panel-select-wrap--compact .panel-select {
  padding: 6px 26px 6px 10px;
  font-size: 12.5px;
}

.family-picker { position: relative; }
.family-picker summary {
  min-width: 118px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.family-picker summary::-webkit-details-marker { display: none; }
.family-picker summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: translateY(-65%) rotate(45deg);
}
.family-picker[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.family-picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}
.family-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 5px;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.family-picker-option:hover { background: var(--bg-hover); color: var(--text); }
.family-picker-option.is-unavailable {
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.48;
}
.family-picker-option.is-unavailable:hover { background: transparent; color: var(--text-faint); }
.family-picker-option.is-unavailable input { cursor: not-allowed; }
.family-picker-status {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
}
.family-picker-option--all {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 5px 5px 0 0;
  color: var(--text);
  font-weight: 600;
}
.family-picker-option input { accent-color: var(--princeton-orange); }

.chart-footnote {
  color: var(--text-faint);
  max-width: 800px;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
  margin: 12px auto 0;
  min-height: 1px;
}
.axis-break-key {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 12px;
  margin: 0 2px;
  vertical-align: -2px;
}
.axis-break-key::before,
.axis-break-key::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--text-dim);
  transform: rotate(30deg);
}
.axis-break-key::before { left: 4px; }
.axis-break-key::after { right: 4px; }

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill-toggle:hover { background: var(--bg-hover); color: var(--text); }
.pill-toggle.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.board-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.panel-select {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%236b7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat right 10px center;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
}
.panel-select:hover { background-color: var(--bg-hover); }

.metric-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric-toggle button {
  appearance: none;
  border: 0;
  background: #fff;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
}
.metric-toggle button:last-child { border-right: 0; }
.metric-toggle button:hover { color: var(--text); background: var(--bg-hover); }
.metric-toggle button.is-active { background: var(--accent); color: #fff; }

/* The AI Agent Progress toolbar (trend chart) uses Princeton Orange for its
   active toggle states instead of the site-wide navy accent, to tie the
   chart controls visually to the university brand. Scoped to just this
   chart's toolbar so the leaderboard's metric toggle stays navy. */
#trend-metric-toggle button.is-active,
#trend-panel-toggle button.is-active { background: var(--princeton-orange); color: #fff; }

.table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow-x: auto;
  background: #fff;
}
.table-wrap--contradictions {
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
}

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
#board { table-layout: fixed; }
#board .col-rank { width: 6%; }
#board .col-model { width: 43%; }
#board .col-num {
  width: 17%;
  text-align: center;
}
#board .score {
  align-items: center;
}
.board th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--bg-raised);
}
.board th.col-num, .board td.col-num { text-align: right; }
.response-diagnostics-table th.col-num,
.response-diagnostics-table td.col-num,
#effort-table th.col-num,
#effort-table td.col-num {
  text-align: center;
}
#effort-table .table-sort-button {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}
.board th .arrow { opacity: 0.35; }
.board th.is-sorted { color: var(--accent); }
.board th.is-sorted .arrow { opacity: 1; }
.table-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.board td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr:hover { background: var(--bg-hover); }

.board--compact td, .board--compact th { padding: 9px 14px; }
.col-tools { min-width: 220px; }
.tool-distribution {
  display: grid;
  gap: 3px;
}
.tool-share {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
}
.tool-share code {
  color: var(--text-dim);
  font-size: 10.5px;
}
.tool-share--top,
.tool-share--top code {
  color: var(--text);
  font-weight: 700;
}

.col-rank { width: 42px; color: var(--text-faint); font-size: 13px; }

.model-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.model-logo {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fff;
}
.model-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px;
  object-fit: contain;
}
.model-logo--fallback {
  background: var(--bg-hover);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.model-label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.model-label .tag { flex: none; white-space: nowrap; }
.model-name { font-weight: 500; overflow-wrap: anywhere; }
.model-name--reasoning { cursor: help; }
.model-reasoning {
  display: none;
  color: var(--text-faint);
  font-weight: 400;
}
.model-name--reasoning:hover .model-reasoning,
.model-name--reasoning:focus .model-reasoning { display: inline; }
.model-name--reasoning:focus { outline: 1px dotted var(--text-faint); outline-offset: 2px; }
.model-provider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
}

/* Score cell: number over a thin proportional bar. */
.score { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 56px; }
.score-value { font-weight: 500; }
.score-value--lead { color: var(--score-color); font-weight: 700; }
.score-bar { width: 52px; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.score-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--score-color);
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--text-faint);
  background: var(--bg-raised);
}
.tag--pending { border-color: #f0d9a8; color: var(--warn); background: #fff6e3; }
.tag--paper { border-color: #c9d3f0; color: #4451a3; background: #eef0fc; }

.footnote { color: var(--text-faint); font-size: 13px; margin: 12px 0 0; }
.preprint-notice {
  display: block;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #c9d3f0;
  border-left: 4px solid #5a67b8;
  border-radius: 5px;
  background: #f5f6ff;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.preprint-notice[hidden] { display: none; }
.preprint-notice strong { color: #3f4b99; }

.empty {
  padding: 38px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14.5px;
}
.empty strong { color: var(--text-dim); display: block; margin-bottom: 5px; font-size: 15px; }

/* ───────────────────────────── charts ──────────────────────────── */

.chart { width: 100%; }
.chart--badged { overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis-line { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis-gap-label { fill: var(--text-faint); }
.chart .timeline-axis-break-mask { fill: var(--bg-card); }
.chart .timeline-axis-break {
  stroke: var(--text-dim);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.chart .axis-x-label { font-size: 12.5px; font-weight: 500; fill: var(--text-dim); }
.chart text {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--text-faint);
}
.chart .stacked-x-label {
  font-size: 16px;
  font-weight: 600;
  fill: var(--text-dim);
}
.chart .stacked-y-label {
  font-size: 14px;
  font-weight: 500;
  fill: var(--text-dim);
}
.chart .series-dot { stroke: #fff; stroke-width: 2; }
.chart .bar { transition: opacity 0.15s; }
.chart .bar:hover { opacity: 0.82; }

/* Logo-badged points: white halo + colored circle + provider glyph/logo. */
.chart .series-badge { cursor: pointer; touch-action: manipulation; }
.chart .series-badge-halo { opacity: 0.9; }
.chart .series-badge-dot { stroke: #fff; stroke-width: 1.5; }
.chart .series-badge-visual {
  transition: transform 0.12s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.chart .series-badge:hover .series-badge-visual { transform: scale(1.12); }
.chart .series-badge--control image { filter: grayscale(1); }
.chart .series-badge-label {
  font-size: 10.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.chart .series-badge-leader {
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.55;
}
.chart .frontier-line {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 3.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  opacity: 0.95;
}
.chart .frontier-label {
  font-size: 10.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 4px 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend--static { color: var(--text-faint); }

/* ───────────────────────────── stages ──────────────────────────── */

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.stage {
  position: relative;
  padding: 12px 14px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}
.stage[data-status="ok"]::before      { background: var(--live); }
.stage[data-status="running"]::before { background: var(--accent); }
.stage[data-status="failed"]::before  { background: var(--bad); }

.stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stage-num { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.stage-state {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
}
.stage[data-status="ok"] .stage-state      { color: var(--live); }
.stage[data-status="running"] .stage-state { color: var(--accent); }
.stage[data-status="failed"] .stage-state  { color: var(--bad); }

.stage-name { font-weight: 600; font-size: 14.5px; margin: 6px 0 3px; }
.stage-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.stage-detail {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  word-break: break-word;
}

/* ────────────────────────── fact lists ─────────────────────────── */

.factlist { border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
.factlist > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.factlist > div:last-child { border-bottom: 0; }
.factlist dt, .factlist .k { color: var(--text-dim); }
.factlist .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bars { display: grid; gap: 10px; }
.bar-row { font-size: 13px; }
.bar-row-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.bar-row-top span:last-child { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bar-track { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ─────────────────────────────── faq ───────────────────────────── */

.faq { margin-top: 28px; border-top: 1px solid var(--line-soft); }
#faq-section .faq { margin-top: 0; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 2px 0;
}
.faq details[id] { scroll-margin-top: 20px; }
.faq summary {
  cursor: pointer;
  padding: 14px 32px 14px 2px;
  font-size: 15.5px;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 12px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--text-faint);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent-soft); }
.faq-body {
  padding-bottom: 18px;
  max-width: 78ch;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}
.faq-body > :first-child { margin-top: 0; }
.faq-body > :last-child { margin-bottom: 0; }
.faq p { margin: 0 0 12px; color: var(--text-dim); font-size: 15px; }
.faq a { color: var(--accent); text-underline-offset: 2px; }
.faq code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--text);
}

.prose-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  color: var(--text-dim);
  font-size: 15px;
}
.prose-list li {
  position: relative;
  padding-left: 17px;
  line-height: 1.6;
}
.prose-list li + li { margin-top: 7px; }
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--princeton-orange);
}
.prose-list strong { color: var(--text); }

/* ─────────────────────────────── news ─────────────────────────── */

.news-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-transform: none;
  color: var(--text);
}

.news { list-style: none; margin: 12px 0 0; padding: 0; }
.news li {
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}
.news-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  object-fit: contain;
  margin-right: 7px;
  vertical-align: -2px;
}
.news time { font-weight: 600; color: var(--text-faint); }
.news span { color: var(--text-dim); }
.news em { font-style: italic; }

/* Logos + pills sit together as one plain centered row — that's the part
   that needs to visually read as centered. The pills' own midpoint is
   necessarily right of the row's midpoint (the logos add width only on the
   left), so the opened panel compensates by that same fixed offset when
   centering itself, landing back on the section's true center instead of
   drifting to match the pills alone. --marks-width is the rendered width of
   the Princeton + CITP lockup at height:38px — effectively a constant since
   it comes from two fixed-aspect-ratio image assets, not page width. */
.byline {
  --toggle-gap: 16px;
  --toggle-col: 11.25rem; /* wide enough for the Acknowledgement pill */
  --toggles-width: calc(var(--toggle-col) * 2 + var(--toggle-gap));
  /* Opened panels are wider than the pill pair itself — wide enough for the
     author list to lay out 3 names / 3 names / 2 names per row instead of
     wrapping awkwardly — but stay centered on the same midpoint as the pills. */
  --panel-width: min(44rem, calc(100vw - 48px));
  --marks-width: 271px;
  --row-gap: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--row-gap);
  margin: 0 0 28px;
  text-align: center;
}

.site-intro {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.site-intro li {
  position: relative;
  padding-left: 24px;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}
.site-intro li + li { margin-top: 9px; }
.intro-citations { white-space: nowrap; }
.intro-citations a {
  color: var(--accent);
  text-decoration: none;
}
.intro-citations a:hover { text-decoration: underline; }
.site-intro li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background: url("logo.png?v=202609082358") center / contain no-repeat;
}

.institution-marks {
  display: flex;
  align-items: center;
  gap: 16px;
}
.institution-marks img {
  height: 38px;
  width: auto;
  display: block;
}
.institution-sep {
  font-size: 15px;
  color: var(--text-faint);
}

.byline-toggles {
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--toggle-col) var(--toggle-col);
  justify-content: center;
  column-gap: var(--toggle-gap);
  align-items: start;
  width: var(--toggles-width);
}

/* Fixed-width slots: opening a panel only grows height, never shifts the pills. */
.team-toggle {
  min-width: 0;
  text-align: center;
}

.team-toggle summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  transition: border-color 0.15s, background 0.15s;
}
.team-toggle summary::-webkit-details-marker { display: none; }
.team-toggle summary:hover { border-color: #c2c9d2; background: var(--bg-hover); }
.team-toggle .chevron {
  display: block;
  flex: none;
  transition: transform 0.15s;
  color: var(--text-faint);
}
.team-toggle[open] .chevron { transform: rotate(180deg); }

/* Wider than the pill pair, centered on the row's true midpoint (which sits
   --marks-width/2 + --row-gap/2 to the left of the pills' own midpoint). */
.toggle-panel {
  box-sizing: border-box;
  width: var(--panel-width);
  margin: 16px 0 0;
  margin-left: calc(
    (var(--toggles-width) - var(--panel-width)) / 2
    - (var(--marks-width) + var(--row-gap)) / 2
  );
  text-align: center;
}

#ack .toggle-panel {
  margin-left: calc(
    (var(--toggles-width) - var(--panel-width)) / 2
    - (var(--marks-width) + var(--row-gap)) / 2
    - var(--toggle-col)
    - var(--toggle-gap)
  );
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: center;
}

.team-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text);
  text-align: center;
}
.team-toggle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.team-toggle-list sup { color: var(--accent); font-size: 11px; }

.team-toggle-legend {
  margin: 14px auto 0;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  max-width: 62ch;
}
.team-toggle-legend sup { color: var(--accent); }
/* Separator between affiliations, rather than a typed one — the last entry on
   a line keeps its trailing "·" (matching the hand-written original), and the
   whole run can be re-broken per affiliation on narrow screens. */
.team-toggle-legend .affil:not(:last-child)::after { content: "\00a0·"; }

.ack-copy {
  max-width: none;
  width: 100%;
  margin: 0;
}
.ack-copy .team-toggle-legend {
  margin: 0;
  max-width: none;
  text-align: justify;
  text-align-last: left;
  hyphens: none;
}
.ack-copy .team-toggle-legend + .team-toggle-legend { margin-top: 12px; }

/* ───────────────────────── citation / team ────────────────────── */

.cite-box {
  position: relative;
  margin: 18px 0 0;
}

.cite {
  margin: 0;
  padding: 16px;
  padding-right: 92px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
}

.snippet {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  text-align: left;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.copy-btn:hover { border-color: #c2c9d2; background: var(--bg-hover); }
.copy-btn.is-copied { border-color: var(--accent); color: var(--accent); }
.copy-icon { flex: none; }

.contact { margin: 18px 0 0; color: var(--text-dim); font-size: 14.5px; }

/* ───────────────────────────── pullquote ──────────────────────── */

.pullquote {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--line);
  background: var(--bg-raised);
  border-radius: 0 6px 6px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.pullquote cite {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-style: normal;
  color: var(--text-faint);
}

/* ───────────────────────────── responsive ─────────────────────── */

@media (max-width: 1084px) {
  .results-grid {
    width: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-right: 0;
    margin-left: 0;
  }
  .quantitative-subsection { width: auto; margin-left: 0; }
}

@media (max-width: 940px) {
  .grid-2, .grid-3, .grid-2--wide-left, .results-grid { grid-template-columns: 1fr; gap: 18px; }
  .nav-links { display: none; }
}

/* The byline row needs ~720px to hold the institution lockup, the gap, and
   the fixed-width pill pair; below that it stacks into a plain centered
   column. Once stacked, the pills are already centered on their own, so the
   panel no longer needs the marks-width compensation that keeps it aligned
   with the row above. */
@media (max-width: 740px) {
  .byline { flex-direction: column; align-items: center; gap: 20px; }
  .question-examples-grid { grid-template-columns: 1fr; }
  .toggle-panel { margin-left: calc((var(--toggles-width) - var(--panel-width)) / 2); }
  #ack .toggle-panel {
    margin-left: calc(
      (var(--toggles-width) - var(--panel-width)) / 2
      - var(--toggle-col)
      - var(--toggle-gap)
    );
  }
  /* Four hero links wrap as 3+1 once the row is narrower than ~520px.
     Two-up keeps them even through phone landscape. */
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions .btn { justify-content: center; }
  /* Once the byline has stacked, the author panel is only as wide as the
     content column — too narrow for 3 names or "Stony Brook · Hackensack…"
     on one line. */
  .team-toggle-list { gap: 6px; }
  .team-toggle-row { flex-direction: column; align-items: center; gap: 6px; }
  .team-toggle-legend { max-width: none; }
  .team-toggle-legend .affil { display: block; }
  .team-toggle-legend .affil:not(:last-child)::after { content: none; }
  .team-toggle-legend br { display: none; }
}

/* Phones. Everything below assumes a content column of roughly 320–400px:
   narrow enough that any fixed-width block, single-line control row, or
   scaled-to-fit chart stops working, so each of those gets a phone layout
   here rather than being squeezed into its desktop one. */
@media (max-width: 640px) {
  .wrap, .nav-inner { padding: 0 18px; }
  .demo-banner { padding: 10px 18px; }

  .question-examples-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .question-examples-nav { width: 100%; }
  #question-examples-counter { margin-right: auto; }
  .question-example-card { min-height: 300px; }

  .hero { padding: 24px 0 16px; }
  .hero-heading { gap: 10px; }
  .hero-logo { width: 44px; height: 44px; }
  .hero-tagline { font-size: 16px; }

  .institution-marks { gap: 12px; }
  .institution-marks img { height: 32px; }
  /* The pill pair is a fixed 376px grid, wider than the phone content
     column, so it becomes a full-width accordion. Each panel now spans the
     same width as the pill that opens it, which is also the full row — so
     none of the offsets that keep a panel centered on the desktop row
     (where it has to escape its own narrow grid column) apply anymore. */
  .byline-toggles { display: block; width: 100%; }
  .byline-toggles .team-toggle + .team-toggle { margin-top: 10px; }
  .toggle-panel,
  #ack .toggle-panel { width: 100%; margin-left: 0; }
  #ack .toggle-panel { padding: 16px; }

  .section { padding: 40px 0; }
  .card { padding: 16px; }
  .card--chart { padding: 14px 12px 10px; }

  /* Justified copy needs more measure than a phone has: at this width the
     inter-word gaps open into rivers, so these blocks read left-aligned. */
  .intro-copy,
  .faq-body,
  .ack-copy .team-toggle-legend { text-align: left; }
  .faq summary { font-size: 15px; }

  /* Section headings and their controls can't share a row, and the controls
     themselves are wider than the screen once metric names are spelled out
     ("Factual Precision"). Give each control its own full-width row instead
     of letting them wrap into ragged fragments. */
  .section-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .section-head--center { align-items: center; }
  .chart-toolbar,
  .chart-toolbar-group,
  .board-controls {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .metric-toggle { display: flex; width: 100%; }
  .metric-toggle button { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 12px; }
  .panel-select-wrap { display: flex; width: 100%; justify-content: space-between; }
  .panel-select-wrap--compact { margin-left: 0; gap: 10px; }
  .panel-select,
  .family-picker { flex: 1 1 auto; min-width: 0; }
  .family-picker summary { min-width: 0; }
  /* Anchored to the right edge of a now full-width control, the menu would
     hang off the screen; span the control instead. */
  .family-picker-menu { left: 0; right: 0; min-width: 0; }
  .pill-toggle { justify-content: center; }
  .chart-actions { justify-content: center; }
  .chart-footnote { text-align: left; }

  /* The trend chart is drawn at a fixed 860px in its viewBox. Fitting that
     into ~300px scales the whole drawing down with it — axis labels land
     near 4px and the logo badges become dots — so it keeps a readable size
     and the card scrolls sideways instead. The floor matches the scale the
     chart renders at on desktop. */
  .chart--badged { -webkit-overflow-scrolling: touch; }
  .chart--badged svg { min-width: 780px; }

  /* Spelled-out metric names are what push these tables past the screen
     edge; wrapping the headers to two lines keeps every visible column
     on-screen, so a row can be read without scrolling it sideways. */
  .col-hide-sm { display: none; }
  .board { font-size: 13px; }
  .board td, .board th { padding: 9px 9px; }
  .board th { white-space: normal; }
  /* Trimming the headers a little keeps the metric columns from claiming
     width the model names need. */
  .board th.col-num { font-size: 11px; }
  .col-rank { width: 24px; }
  .score { min-width: 0; }
  .score-bar { display: none; }
  .model-cell { gap: 8px; }
  .model-provider { font-size: 11px; }

  /* Tool usage has five information-dense columns. Let it scroll as a
     readable table instead of collapsing model names one letter per line. */
  #effort .table-wrap { -webkit-overflow-scrolling: touch; }
  #effort-table { min-width: 680px; }
  #effort-table .col-model { min-width: 190px; }
  #effort-table .model-name {
    overflow-wrap: normal;
    word-break: normal;
  }

  .factlist > div { gap: 12px; padding: 10px 12px; font-size: 13px; }
  .legend { gap: 6px 14px; }

  /* The citation is wider than the screen and scrolls sideways, so a copy
     button floating over its top-right corner would sit on top of the first
     line. Drop it below the block instead. */
  .cite-box { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .cite { width: 100%; padding: 14px; }
  .copy-btn { position: static; }
}

/* Small phones (iPhone SE / mini widths). Just the last few things that stop
   fitting once the content column drops under ~330px. */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .metric-toggle button { font-size: 11.5px; padding: 8px 2px; }
  /* Buys back the ~20px the score columns need to stay on-screen. */
  .board td, .board th { padding: 9px 7px; }
  .col-rank { width: 18px; }
}

/* ───────────────────────────── dark mode ───────────────────────── */

:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .question-examples-nav button,
:root[data-theme="dark"] .question-example-card,
:root[data-theme="dark"] .family-picker summary,
:root[data-theme="dark"] .family-picker-menu,
:root[data-theme="dark"] .pill-toggle,
:root[data-theme="dark"] .metric-toggle button,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .stage,
:root[data-theme="dark"] .team-toggle summary,
:root[data-theme="dark"] .copy-btn {
  background: var(--bg-card);
}

:root[data-theme="dark"] .panel-select {
  background-color: var(--bg-card);
}

:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .team-toggle summary:hover,
:root[data-theme="dark"] .copy-btn:hover {
  border-color: var(--text-faint);
  background: var(--bg-hover);
}

:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .pill-toggle.is-active,
:root[data-theme="dark"] .metric-toggle button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #101722;
}

:root[data-theme="dark"] #trend-metric-toggle button.is-active,
:root[data-theme="dark"] #trend-panel-toggle button.is-active {
  background: var(--princeton-orange);
  color: #17100a;
}

:root[data-theme="dark"] .question-example-field {
  background: #152b25;
}

:root[data-theme="dark"] .metric-tag {
  border-color: #3e5981;
  background: #18263b;
}

:root[data-theme="dark"] .demo-banner,
:root[data-theme="dark"] .tag--pending {
  border-color: #705c31;
  background: #2c2516;
  color: #f1c46b;
}
:root[data-theme="dark"] .demo-banner code { color: #f6d99d; }

:root[data-theme="dark"] .tag--paper {
  border-color: #56639a;
  background: #242a47;
  color: #bdc7ff;
}

:root[data-theme="dark"] .preprint-notice {
  border-color: #4a578b;
  border-left-color: #8e9cf0;
  background: #1d2239;
}
:root[data-theme="dark"] .preprint-notice strong { color: #bdc7ff; }

:root[data-theme="dark"] .institution-marks {
  border-radius: 6px;
  background: #fff;
}
:root[data-theme="dark"] .institution-marks img {
  filter: none;
  background: transparent;
  box-shadow: none;
}
:root[data-theme="dark"] .institution-sep { color: #6b7280; }

:root[data-theme="dark"] .chart .series-dot,
:root[data-theme="dark"] .chart .series-badge-dot {
  stroke: var(--bg);
}
:root[data-theme="dark"] .chart .series-badge-label,
:root[data-theme="dark"] .chart .frontier-label {
  stroke: var(--bg);
}
:root[data-theme="dark"] .chart .timeline-axis-break {
  stroke: var(--text-faint);
}
:root[data-theme="dark"] .axis-break-key::before,
:root[data-theme="dark"] .axis-break-key::after {
  background: var(--text-faint);
}

:root[data-theme="dark"] .chart-tip {
  border-color: var(--line) !important;
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45) !important;
}
:root[data-theme="dark"] .chart-tip span {
  color: var(--text-dim) !important;
}

@media (max-width: 640px) {
  .theme-toggle {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
}