/* Experiment page. Palette = the dataviz skill's validated reference instance; light + dark via tokens only. */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f3f2ee;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #706e68;   /* 4.97:1 on surface-1, 4.55:1 on surface-2: small load-bearing text (CI, headers, badges) */
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --good: #0ca30c;
  --good-text: #006300;
  --critical: #d03b3b;
  --warning: #fab219;
  /* categorical slots (fixed order; condition -> slot mapping in app.js) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300;
  /* sequential blue ramp */
  --seq-100: #cde2fb; --seq-150: #b7d3f6; --seq-200: #9ec5f4; --seq-250: #86b6ef; --seq-300: #6da7ec;
  --seq-350: #5598e7; --seq-400: #3987e5; --seq-450: #2a78d6; --seq-500: #256abf; --seq-550: #1c5cab;
  --seq-600: #184f95; --seq-650: #104281; --seq-700: #0d366b;
  --empty-cell: #f0efec;
  --meter-track: var(--seq-100);
  --warning-text: #7a4f00;
  --video-bg: #000000;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface-1: #1a1a19; --surface-2: #232321;
    --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #8f8d87;
    --grid: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5; --good-text: #0ca30c; --critical: #e85a5a;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
    --series-4: #c98500; --series-5: #d55181; --series-6: #008300;
    --empty-cell: #383835; --meter-track: #383835; --warning-text: #fab219; --video-bg: #000000;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface-1: #1a1a19; --surface-2: #232321;
  --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #8f8d87;
  --grid: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5; --good-text: #0ca30c; --critical: #e85a5a;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
  --series-4: #c98500; --series-5: #d55181; --series-6: #008300;
  --empty-cell: #383835; --meter-track: #383835; --warning-text: #fab219; --video-bg: #000000;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text-primary); font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
pre { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
pre code { background: none; padding: 0; }

header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--page); border-bottom: 1px solid var(--border); }
.top-inner { max-width: 1280px; margin: 0 auto; padding: 12px 16px 0; }
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand h1 { font-size: 18px; margin: 0; font-weight: 650; }
.brand .sub { color: var(--text-secondary); font-size: 13px; }
.brand .spacer { flex: 1; }
.brand .updated { color: var(--text-muted); font-size: 12px; }
button.theme { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: 12px; }
nav.tabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; }
nav.tabs a { padding: 8px 12px; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
nav.tabs a.active { color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight: 600; }

main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }
main#home { scroll-margin-top: var(--hdr, 96px); }
section.page { display: none; scroll-margin-top: var(--hdr, 96px); }   /* fragment links land below the sticky header; --hdr = measured header height (app.js) */
section.page.active { display: block; }
h2 { font-size: 16px; margin: 28px 0 10px; font-weight: 650; }
h2:first-child { margin-top: 4px; }
h3 { font-size: 14px; margin: 18px 0 6px; font-weight: 650; }
p.lead { color: var(--text-secondary); max-width: 900px; margin: 0 0 12px; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.filters label { color: var(--text-muted); font-size: 12px; margin-right: 2px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-1); }
.seg button { border: 0; background: none; color: var(--text-secondary); padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--surface-2); color: var(--text-primary); font-weight: 600; }
select { font: inherit; font-size: 13px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
select { max-width: 100%; min-width: 0; }   /* a long option label must not widen the page at 400 px */

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card h3 { margin-top: 0; }
.card .card-sub { color: var(--text-muted); font-size: 12px; margin: -4px 0 8px; }
.chart-head { display: flex; align-items: flex-start; gap: 8px; }
.chart-head .titles { flex: 1; min-width: 0; }
.chart-title { font-weight: 600; font-size: 13.5px; }
.chart-subtitle { color: var(--text-muted); font-size: 12px; }
button.tbl { border: 1px solid var(--border); background: none; color: var(--text-secondary); border-radius: 6px; font: inherit; font-size: 11.5px; padding: 2px 7px; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font-size: 12px; color: var(--text-secondary); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch-line { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.legend .swatch-rect { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart text { font-family: var(--font); font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
svg.chart .gridline { stroke: var(--grid); stroke-width: 1; }
svg.chart .axisline { stroke: var(--baseline); stroke-width: 1; }
svg.chart .crosshair { stroke: var(--baseline); stroke-width: 1; }
svg.chart .endlabel { fill: var(--text-secondary); font-size: 11.5px; }
svg.chart .cell-text { font-size: 11px; font-weight: 600; }
.chart-wrap { position: relative; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); z-index: 5; min-width: 120px; display: none; }
.tooltip .tt-title { color: var(--text-muted); margin-bottom: 4px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tooltip .tt-row .val { font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tooltip .tt-row .name { color: var(--text-secondary); }
.tooltip .tt-key { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
table.data { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 8px; }
table.data th, table.data td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
table.data th.txt, table.data td.txt { text-align: left; }
table.data th { color: var(--text-muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .label { color: var(--text-muted); font-size: 12px; }
.stat .value { font-size: 22px; font-weight: 650; }
.stat .delta { font-size: 12px; color: var(--text-secondary); }
.stat .delta.up { color: var(--good-text); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
.meter { height: 6px; background: var(--meter-track); border-radius: 3px; overflow: hidden; margin: 6px 0 2px; }
.meter > span { display: block; height: 100%; background: var(--seq-450); border-radius: 3px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); }
.badge.dataset { color: var(--text-secondary); border-style: solid; font-size: 11px; }
.badge.ok::before { content: "✓"; color: var(--good); font-weight: 700; }
.badge.fail::before { content: "✕"; color: var(--critical); font-weight: 700; }
.badge.run::before { content: "●"; color: var(--good); }
.badge.pend::before { content: "◌"; color: var(--text-muted); }

.diagram { width: 100%; max-width: 980px; }
.diagram rect.box { fill: var(--surface-1); stroke: var(--baseline); stroke-width: 1; }
.diagram rect.box.hl { stroke: var(--accent); stroke-width: 1.5; }
.diagram text { font-family: var(--font); fill: var(--text-primary); font-size: 12.5px; }
.diagram text.small { fill: var(--text-secondary); font-size: 11px; }
.diagram path.arrow { stroke: var(--text-muted); stroke-width: 1.5; fill: none; }
.diagram path.arrow.dashed { stroke-dasharray: 5 4; }
.diagram rect.box.mem { stroke: var(--accent); stroke-dasharray: 5 4; stroke-width: 1.5; }
.diagram rect.box.todo { stroke: var(--text-muted); stroke-dasharray: 3 4; fill: var(--surface-2); }
.diagram text.todo { fill: var(--text-muted); font-style: italic; }
.diagram-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 2px; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); gap: 12px; }
.video-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.video-card video { width: 100%; display: block; background: var(--video-bg); }
.video-card .meta { padding: 6px 10px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.video-main video { width: 100%; max-width: 1100px; border-radius: 10px; display: block; background: var(--video-bg); }

.md h1 { font-size: 17px; } .md h2 { font-size: 15px; } .md h3 { font-size: 14px; }
.md ul, .md ol { padding-left: 20px; } .md li { margin: 3px 0; }
.md li.task { list-style: none; margin-left: -18px; }
.md li.task input { margin-right: 6px; }
.empty { color: var(--text-muted); padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
@media (forced-colors: active) { .tooltip { border: 1px solid CanvasText; } }

/* homepage + experiment navigation */
a.back { color: var(--text-secondary); text-decoration: none; font-size: 13px; margin-right: 6px; }
a.back:hover { color: var(--text-primary); }
.exp-card { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.exp-card:hover { border-color: var(--accent); }
.exp-card h3 { font-size: 15px; }
.exp-card .go { color: var(--accent); font-size: 13px; margin-top: 8px; }
table.data td.txt a { color: var(--text-primary); }
details.card summary { cursor: pointer; font-weight: 650; }

/* ---------------------------------------------------------------- ObjectNav page additions */
p.lead, .card-sub, .secondary, .md, .chips, .empty { overflow-wrap: anywhere; }
p.lead.strong { color: var(--text-primary); }
.small { font-size: 11.5px; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.title-row h2 { margin: 0; }
h3.status-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3.status-title a { color: var(--text-primary); text-decoration: none; }
h3.status-title a:hover { text-decoration: underline; }
.protocol { padding-left: 20px; color: var(--text-secondary); max-width: 900px; margin: 0 0 12px; }
.protocol li { margin: 4px 0; }
.diagram-wrap { overflow: hidden; }
.diagram .arrowhead { fill: var(--text-muted); }

/* badges: status, provenance, kind */
.badge.live::before { content: "●"; color: var(--good); }
.badge.frozen::before { content: "■"; color: var(--text-muted); font-size: 9px; }
.badge.board { border-style: dashed; color: var(--text-secondary); font-size: 11px; padding: 0 5px; cursor: help; }
.badge.src { color: var(--text-secondary); font-size: 11px; padding: 0 5px; }
.badge.noreceipt { color: var(--warning-text); border-color: var(--warning-text); font-size: 10.5px; padding: 0 4px; gap: 2px; cursor: help; white-space: nowrap; }
.badge.noreceipt::before { content: "!"; font-weight: 700; }
.badge.kind { color: var(--accent); border-color: var(--accent); font-size: 10.5px; padding: 0 5px; }
.badge.ref { background: var(--surface-2); color: var(--text-primary); font-size: 10.5px; padding: 0 5px; }

/* arms table */
table.data tr.groups th { text-align: center; border-bottom: 0; color: var(--text-secondary); padding-bottom: 0; font-size: 12px; white-space: nowrap; }
table.data tr.groups th.split + th.split { border-left: 1px solid var(--grid); }   /* only the A | B divider, no tick after the empty first group */
table.data th { white-space: nowrap; }
table.data tr.ref td { background: var(--surface-2); }
table.data tr.ref td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.data tr.sub td { color: var(--text-secondary); font-size: 12px; }
table.data td.incomplete, .split-line .incomplete { color: var(--warning-text); font-style: italic; white-space: nowrap; }
table.data td.axis { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 12px; }   /* full text in the tooltip */
table.data td.txt, table.data td { white-space: nowrap; }
table.data td.txt.wrap { white-space: normal; }
table.data td.muted { color: var(--text-muted); }
.arm-name { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; max-width: 100%; }
/* sticky first column: the arm name stays put while the card scrolls sideways; never the group-header row (its first th
   spans the axis columns and would slide over the split labels); at phone width the column is capped so data stays visible */
table.data.sticky tbody td:first-child, table.data.sticky thead tr:not(.groups) th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-1); max-width: min(42vw, 240px); overflow: hidden; text-overflow: ellipsis; }
table.data.sticky tbody tr.ref td:first-child { background: var(--surface-2); }
table.data.sticky tbody td:first-child::after { content: ""; position: absolute; top: 0; bottom: -1px; right: 0; width: 1px; background: var(--grid); }
table.data.sticky .arm-name > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* the name yields, the badges stay */
table.data.sticky .arm-name > .badge, table.data.sticky .arm-name > .small { flex: none; }
.exp-card table.data.sticky tbody td:first-child { max-width: min(42vw, 230px); }   /* home cards are half-width */
@media (max-width: 700px) { table.data.sticky .arm-name { flex-wrap: wrap; row-gap: 2px; } }   /* phone: badges drop under a long name instead of squeezing it */
.table-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--text-muted); font-size: 11.5px; }
.table-legend .item { display: inline-flex; gap: 5px; align-items: baseline; }
.card button.more { margin-top: 8px; }
.table-wrap.nowrap td, .table-wrap.nowrap th { white-space: nowrap; }   /* the card scrolls sideways instead of wrapping cells */
svg.chart .colsub { fill: var(--text-muted); font-size: 10px; }
td .rate { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; }
td .rate .ci { color: var(--text-muted); font-size: 11px; }
.delta { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.delta .pts.up { color: var(--good-text); }
.delta .pts.down { color: var(--critical); }
.delta .pair { color: var(--text-secondary); }
.delta .p { color: var(--text-muted); font-size: 11.5px; }
.delta .p.sig { color: var(--text-primary); font-weight: 600; }

/* status cards, chips */
.split-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: 3px; font-size: 13px; }
.split-line .k { color: var(--text-muted); font-size: 12px; min-width: 58px; }
.split-line strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.card .prov { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.card .card-sub.axes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; }   /* full text in the tooltip */
.card .meter { margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chip.on { border-color: var(--accent); color: var(--text-primary); }

/* charts */
svg.chart .whisker { stroke: var(--text-primary); stroke-width: 1.2; stroke-opacity: 0.7; }
svg.chart .rowline { stroke: var(--grid); stroke-width: 1; }
svg.chart .rowlabel { fill: var(--text-secondary); }
svg.chart .barval { fill: var(--text-secondary); font-size: 10.5px; }
.legend .swatch-rect.muted { opacity: 0.45; border: 1px dashed var(--text-muted); box-sizing: border-box; }

/* videos: trajectory above the world model, each at full card width and its own aspect (real clips are 2770×480 composites) */
.video-pair { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--surface-2); }
.video-cell .missing-box { min-height: 56px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; background: var(--surface-2); border: 1px dashed var(--border); text-align: center; padding: 8px; }
.video-cell { min-width: 0; }
.video-cell video { width: 100%; height: auto; display: block; background: var(--video-bg); }
.video-cell .caption { font-size: 11px; color: var(--text-muted); padding: 2px 8px; }
.video-card.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; color: var(--text-muted); border-style: dashed; text-align: center; padding: 12px; gap: 4px; }