:root {
  color-scheme: light dark;
  --background: #f4f5f7;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #566573;
  --border: #c8d0d8;
  --accent: #1558a6;
  --green: #176b3a;
  --green-bg: #e8f6ed;
  --red: #9d2a2a;
  --red-bg: #fceaea;
  --never: #5c6470;
  --never-bg: #eef0f2;
  --unavailable: #785a00;
  --unavailable-bg: #fff5cf;
  --chart-hover: #925400;
  --chart-focus-inner: #ffffff;
  --chart-focus-outer: #17202a;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
  margin: 0;
  /* `anywhere` here broke ORDINARY WORDS, not just long identifiers: at 390px a
     cell heading split as "veri/fy" and the validation-run headers split
     "selected" and "recorded" mid-word at 1440px. `anywhere` also shrinks a
     box's min-content contribution, so table columns were free to squeeze
     themselves narrower than their own words -- which is why the damage showed
     up in table headers rather than in prose. `break-word` breaks a word only
     when it cannot fit a line by itself and leaves min-content alone.
     Elements that genuinely carry unbreakable 64-hex digests opt back in to
     `anywhere` individually below. */
  overflow-wrap: break-word;
}

a {
  color: var(--accent);
}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #f0a202;
  outline-offset: 3px;
}

.skip-link {
  background: #ffffff;
  color: #17202a;
  left: 1rem;
  padding: 0.65rem 0.9rem;
  position: absolute;
  top: -5rem;
  z-index: 10;
}

.skip-link:focus {
  top: 1rem;
}

code {
  overflow-wrap: anywhere;
}

.site-header,
main,
footer {
  margin: 0 auto;
  max-width: 96rem;
  padding: 1.5rem;
}

.site-header {
  background: #102a43;
  color: #ffffff;
  max-width: none;
}

.site-header > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 93rem;
}

.site-header a {
  color: #ffffff;
}

.site-feedback {
  margin: 0 0 0.9rem;
}

.site-feedback .external-link {
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 0.35rem;
  color: #102a43;
  display: inline-block;
  font-weight: 800;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
}

.site-feedback .external-link:hover,
.site-feedback .external-link:focus-visible {
  background: #eaf2f8;
  color: #102a43;
  text-decoration: underline;
}

.site-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.site-navigation {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.45rem;
}

.primary-navigation {
  font-size: 0.88rem;
  gap: 0.35rem 0.85rem;
}

.fixture-banner {
  background: #ffd166;
  border: 3px solid #6b4f00;
  color: #2a2100;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.75rem 1rem;
}

.snapshot-disclosure {
  color: #dce6f0;
  font-size: 0.82rem;
  margin: 0;
  padding: 0;
}

.snapshot-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
}

.snapshot-disclosure[open] {
  background: #ffffff;
  border: 1px solid #9aa9b8;
  color: #17202a;
  padding: 0.65rem 0.8rem;
}

.snapshot-disclosure > dl {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  margin: 0.75rem 0 0;
}

.snapshot-disclosure > dl > div {
  min-width: 0;
}

.snapshot-disclosure dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.external-link-indicator {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82em;
  margin-left: 0.22em;
  text-decoration: none;
}

.data-status {
  border-left: 0.35rem solid var(--accent);
  padding: 0.65rem 0.8rem;
}

.data-status-error {
  background: var(--red-bg);
  border-left-color: var(--red);
  color: var(--red);
  font-weight: 700;
}

.data-status-ok {
  background: var(--green-bg);
  border-left-color: var(--green);
  color: var(--green);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.data-caption {
  color: var(--muted);
  font-weight: 700;
}

.browser-record-list,
.browser-record-list > li {
  display: grid;
  gap: 0.6rem;
}

.browser-record-list > li {
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
}

.structured-value > dd {
  margin-inline-start: 1rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.breadcrumbs {
  margin: 1rem auto 0;
  max-width: 93rem;
  padding: 0 1.5rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
}

.page-heading {
  margin-bottom: 1.5rem;
}

main > section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

main > details.landing-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

details.landing-box > summary,
details.landing-subsection > summary {
  cursor: pointer;
}

details.landing-box > summary > h2,
details.landing-subsection > summary > h3 {
  display: inline;
  margin: 0;
}

details.landing-subsection {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.population {
  font-size: 1.25rem;
}

.metrics,
.selection-grid,
.series-cell-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.compact-metrics {
  margin-top: 1rem;
}

.compact-metrics > a {
  border: 2px solid var(--border);
  border-radius: 0.45rem;
  color: inherit;
  padding: 0.9rem;
  text-decoration: none;
}

.metric,
.selection-grid > section,
.series-cell-grid > section {
  border: 2px solid var(--border);
  border-radius: 0.45rem;
  color: inherit;
  display: grid;
  padding: 0.9rem;
  text-decoration: none;
}

.metric strong {
  font-size: 1.6rem;
}

.metric-links a {
  color: inherit;
  font-weight: 700;
  margin-top: 0.35rem;
}

.state-green {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}

.state-red {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}

.state-never-measured {
  background: var(--never-bg);
  border-color: var(--never);
  color: var(--never);
}

.state-unavailable,
.notice {
  background: var(--unavailable-bg);
  border-color: var(--unavailable);
  color: var(--unavailable);
}

.notice {
  border: 2px solid;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
}

.notice p {
  margin: 0.35rem 0;
}

[hidden] {
  display: none !important;
}

.cell-filters,
.list-controls {
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
}

.cell-filters fieldset,
.list-controls fieldset {
  border: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin: 0;
  min-width: 0;
  padding: 0;
}

.cell-filters legend,
.list-controls legend {
  font-weight: 800;
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
}

.cell-filters label,
.list-controls label {
  display: grid;
  font-weight: 700;
  gap: 0.25rem;
}

.cell-filters input,
.cell-filters select,
.list-controls input,
.list-controls select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--text);
  font: inherit;
  min-height: 2.2rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  width: 100%;
}

.cell-filters button,
.list-controls button,
.list-pagination button,
.list-reveal {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  width: auto;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter-actions button {
  width: auto;
}

.list-order-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  grid-column: 1 / -1;
}

.list-order-label {
  font-size: 0.9rem;
  font-weight: 800;
  margin-right: 0.15rem;
}

.list-sort {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
}

.list-sort[aria-pressed="true"] {
  background: var(--background);
  border-color: var(--accent);
  color: var(--text);
}

.list-pagination {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem 0;
  padding-top: 0.75rem;
}

.list-pagination span {
  text-align: center;
}

.list-reveal {
  display: inline-block;
  margin-left: 0.5rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
}

.capability-list {
  min-width: 12rem;
}

.table-scroll {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 100%;
  width: max-content;
}

.validation-runs-table {
  table-layout: fixed;
  width: 80rem;
}

.validation-runs-table .run-column {
  width: 11rem;
}

.validation-runs-table .record-column,
.validation-runs-table .commit-column {
  width: 12rem;
}

.validation-runs-table .path-column,
.validation-runs-table .result-column {
  width: 8rem;
}

.validation-runs-table .count-column,
.validation-runs-table .duration-column {
  width: 7rem;
}

.validation-runs-table .time-column {
  width: 12rem;
}

/* Body cells hold record ids and commit digests and must stay breakable, but a
   column HEADING is prose and breaking it mid-word is never the right answer.
   Splitting these two is what stops "Cells selected by that path" rendering as
   "select/ed". */
.validation-runs-table td {
  overflow-wrap: anywhere;
}

.validation-runs-table th {
  overflow-wrap: break-word;
}

.validation-runs-table tbody th {
  overflow: hidden;
}

.validation-runs-table .run-id-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

caption {
  font-weight: 700;
  padding: 0 0 0.75rem;
  text-align: left;
}

th,
td {
  border: 1px solid var(--border);
  padding: 0.65rem;
  text-align: left;
  vertical-align: top;
}

thead th,
.group-row th {
  background: #dce6f0;
  color: #17202a;
}

.column-heading {
  align-items: center;
  cursor: help;
  display: inline-flex;
  gap: 0.35rem;
}

.column-heading > span {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.column-help-wrap {
  display: inline-flex;
  position: relative;
}

.column-help {
  align-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  cursor: help;
  display: inline-flex;
  font: inherit;
  font-size: 0.72em;
  font-weight: 800;
  height: 1.35rem;
  justify-content: center;
  padding: 0;
  width: 1.35rem;
}

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

.column-tooltip {
  background: #17202a;
  border-radius: 0.3rem;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 400;
  left: 50%;
  line-height: 1.35;
  max-width: min(24rem, 80vw);
  opacity: 0;
  padding: 0.55rem;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  transform: translateX(-50%);
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 4;
}

.column-help-wrap:hover .column-tooltip,
.column-help:focus + .column-tooltip {
  opacity: 1;
  visibility: visible;
}

.table-sort {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  gap: 0.35rem;
  padding: 0;
  text-align: left;
}

.sort-indicator {
  min-width: 1em;
}

.state {
  border: 2px solid;
  border-radius: 0.4rem;
  display: grid;
  gap: 0.2rem;
  min-width: 14rem;
  padding: 0.55rem;
}

.population-control {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
}

.population-control input[type="checkbox"] {
  accent-color: var(--muted);
  height: 1rem;
  width: 1rem;
}

.execution-counts {
  margin: 0;
  width: auto;
}

.execution-count-groups {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin: 1rem 0;
}

.execution-count-group {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.75rem;
}

.execution-count-group > p:last-child {
  margin-bottom: 0;
}

.execution-counts th,
.execution-counts td {
  padding: 0.45rem 0.7rem;
}

.execution-count {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: right;
}

.evidence-context {
  margin: 0 0 0.55rem;
}

.selection-record {
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
}

.audit-identifier {
  display: block;
  overflow-wrap: anywhere;
}

.correction-partners {
  display: block;
  margin-top: 0.25rem;
}

.secondary,
.unavailable {
  display: block;
  font-size: 0.9em;
  margin-top: 0.25rem;
}

.unavailable {
  font-weight: 700;
}

.plain-list,
.test-cells,
.custom-commands {
  margin: 0;
  padding-left: 1.2rem;
}

.selected-cells-by-mode-backend {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.selected-cells-by-mode-backend h3,
.selected-cell-group {
  margin-bottom: 0.35rem;
  margin-top: 0.35rem;
}

.selected-cell-group {
  line-height: 1.9;
}

.selected-cell-without-detail {
  color: var(--muted);
}

.command {
  background: #192734;
  border-radius: 0.25rem;
  color: #ffffff;
  display: block;
  margin: 0.35rem 0 0.8rem;
  padding: 0.5rem;
  white-space: pre-wrap;
}

.backend-leaderboard td strong {
  font-size: 1.1rem;
}

.test-category {
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
}

.test-category h3 {
  margin-bottom: 0.25rem;
}

.test-name-list {
  line-height: 1.9;
  margin-top: 0;
}

.card-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.listing-card,
.evidence-card {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.9rem;
}

.listing-card > :first-child,
.evidence-card > :first-child {
  margin-top: 0;
}

.facts {
  display: grid;
  gap: 0.5rem;
}

.facts > div {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
}

.compact-facts > div {
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
}

pre {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

.provenance {
  display: grid;
  gap: 0.5rem;
}

.provenance > div {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
}

dt {
  font-weight: 700;
}

footer {
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111820;
    --surface: #1b2631;
    --text: #edf2f7;
    --muted: #b9c3cd;
    --border: #506070;
    --accent: #8ec5ff;
    --green: #9de0b5;
    --green-bg: #183f2a;
    --red: #ffb0b0;
    --red-bg: #4a2020;
    --never: #d2d7dc;
    --never-bg: #343b43;
    --unavailable: #ffe08a;
    --unavailable-bg: #463b17;
    --chart-hover: #ffd166;
    --chart-focus-inner: #17202a;
    --chart-focus-outer: #ffffff;
  }

  thead th,
  .group-row th {
    background: #2b3c4d;
    color: var(--text);
  }
}

@media (max-width: 48rem) {
  .site-header,
  main,
  footer {
    padding: 1rem;
  }

  .provenance > div,
  .facts > div {
    grid-template-columns: 1fr;
  }

  .breadcrumbs {
    padding: 0 1rem;
  }
}

@media (max-width: 30rem) {
  .site-header,
  main,
  footer {
    padding: 0.8rem;
  }

  .breadcrumbs {
    padding: 0 0.8rem;
  }

  .facts > div,
  .compact-facts > div,
  .provenance > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .cell-filters .filter-actions > * {
    flex: 1 1 100%;
  }

  .list-controls {
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .list-order-controls {
    gap: 0.3rem;
  }

  .cell-filters fieldset,
  .list-controls fieldset {
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cell-filters .search-control,
  .list-controls .search-control,
  .list-controls legend,
  .mobile-table-order {
    grid-column: 1 / -1;
  }

  .list-pagination {
    align-items: center;
  }
}

/* NARROW-SCREEN TABLES. Measured on the published 2026-09-11 site at 390x844:
   the cells table put 1856px of content inside a 322px scroller (5.76 viewport
   widths) and the validation-run table 1345px (4.18). Relating a row's identity
   on the left to its result on the right meant scrolling across four to six
   screens and back, with nothing holding the identity in view.

   Below 48rem ordinary cell tables may wrap. Below 30rem the high-column-count
   cell and validation tables become labelled rows. Every value remains present,
   but an identity and its result can be read without horizontal travel. Desktop
   and 600px layouts retain the fixed validation-run table and its clipped run id. */
.mobile-table-order {
  display: none;
}

@media (max-width: 48rem) {
  .table-scroll table:not(.validation-runs-table) {
    width: auto;
  }
}

@media (max-width: 30rem) {
  .mobile-table-order {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mobile-table-order label {
    flex: 1 1 8rem;
  }

  .responsive-record-table {
    display: block;
    min-width: 0;
    table-layout: auto;
    width: 100%;
  }

  .responsive-record-table caption,
  .responsive-record-table tbody,
  .responsive-record-table tr {
    display: block;
    width: 100%;
  }

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

  .responsive-record-table tbody tr {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    margin: 0 0 0.75rem;
  }

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

  .responsive-record-table tbody th,
  .responsive-record-table tbody td {
    border: 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(6.75rem, 2fr) minmax(0, 3fr);
    min-width: 0;
    overflow: visible;
    padding: 0.45rem 0.6rem;
    white-space: normal;
    width: 100%;
  }

  .responsive-record-table tbody th::before,
  .responsive-record-table tbody td::before {
    color: var(--muted);
    content: attr(data-mobile-label);
    font-weight: 700;
    overflow-wrap: break-word;
  }

  .responsive-record-table tbody tr > :last-child {
    border-bottom: 0;
  }

  .responsive-record-table .run-id-link {
    white-space: normal;
  }
}

.history-chart { width: 100%; min-width: 720px; height: auto; }
.history-chart text { fill: currentColor; font-size: 16px; }
.history-chart path { pointer-events: none; }
.history-chart [hidden] { display: none; }
.history-point {
  cursor: crosshair;
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2px;
}
.history-point:hover {
  outline: none;
  stroke: var(--chart-hover);
  stroke-width: 4px;
}
.history-point:focus-visible {
  outline: 3px solid var(--chart-focus-outer);
  outline-offset: 2px;
  stroke: var(--chart-focus-inner);
  stroke-width: 4px;
}
.history-legend {
  border: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: .75rem 0;
  padding: .5rem .75rem .65rem;
}
.history-legend legend { font-weight: 700; padding: 0 .3rem; }
.history-series-toggle,
.history-series-unavailable { align-items: center; display: inline-flex; gap: .35rem; white-space: nowrap; }
.history-series-toggle input { margin: 0; }
.history-series-toggle input:focus-visible { outline-color: var(--chart-focus-outer); }
.history-series-disabled { opacity: .55; }
.history-series-unavailable { color: var(--muted); }
.history-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  display: block;
  min-height: 2.6rem;
  padding: .45rem .65rem;
}

.history-instructions {
  background: var(--surface);
  border-left: 0.3rem solid var(--accent);
  padding: 0.65rem 0.8rem;
}

.measurement-freshness {
  display: inline;
}

.filter-live-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 0.3rem solid var(--accent);
  display: block;
  font-weight: 700;
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
}

/* Keep chart labels readable on phones without widening the page. */
.chart-scroll { overflow-x: auto; }
.backend-leaderboard td:last-child { white-space: normal; min-width: 16rem; max-width: 28rem; }

/* Keep words and short commits readable; the existing wrapper scrolls on mobile. */
.table-scroll table.source-provenance {
  min-width: 36rem;
  width: 100%;
}
.source-provenance th,
.source-provenance td {
  overflow-wrap: normal;
  white-space: normal;
}
.source-provenance code {
  white-space: nowrap;
}
.source-provenance caption,
.measurement-provenance caption {
  white-space: normal;
}