/* GEODE Self-Improving Hub — production CSS.
 *
 * Distilled from /tmp/geode-hub-mockups-v2/_shared.css and validated against
 *   docs/design/self-improving-hub-system.md (master DESIGN.md §3 tokens, §4
 *   typography, §5 layout, §6 components, §12 a11y).
 *
 * No web fonts, no animations except :hover color transition (<200ms per §12).
 * No card-lifts, no gradients, no shadows, no emoji.
 * Bootstrap-light + cotton single-substrate discipline.
 */

/* ============================================================ */
/* §3 Tokens                                                    */
/* ============================================================ */
:root {
  /* Ink / paper / rule */
  --ink: #1a1f29;
  --ink-soft: #4a5260;
  --ink-faint: #7d8694;
  --rule: #e5e8ec;
  --rule-soft: #f1f3f5;
  --paper: #ffffff;
  --paper-tint: #f8f9fa;

  /* Accent (Bootstrap --bs-blue) */
  --accent: #0d6efd;
  --accent-faint: #e7f1ff;

  /* Harness chip palette (§3 — 4 chips, palette explosion forbidden) */
  --chip-payg-bg: #f1f3f5;
  --chip-payg-fg: #4a5260;
  --chip-claude-bg: #efe7fb;
  --chip-claude-fg: #5a2ca0;
  --chip-codex-bg: #d1e7dd;
  --chip-codex-fg: #0a3622;
  --chip-geode-bg: #cfe2ff;
  --chip-geode-fg: #052c65;

  /* Surface bucket palette (§3 — 3 buckets) */
  --bucket-petri: #0d6efd;
  --bucket-seedgen: #198754;
  --bucket-autoresearch: #b45309;

  /* Warning / stale baseline banner (reuses autoresearch tone per §3 strict-rule 2) */
  --warning-bg: #fff4e6;
  --warning-fg: #7a3e08;
  --warning-rule: #f4cd9d;

  /* Type scale (§4) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, "SF Mono", monospace;

  /* Layout */
  --sidebar-width: 260px;
  --content-max: 1100px;
  --content-pad-y: 2rem;
  --content-pad-x: 2.5rem;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; }

code {
  background: var(--rule-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ============================================================ */
/* §5 Layout shell                                              */
/* ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ============================================================ */
/* §6 Sidebar                                                   */
/* ============================================================ */
aside.sidebar {
  border-right: 1px solid var(--rule);
  background: var(--paper-tint);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

aside .brand {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .2rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

aside .brand-sub {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .68rem;
  margin-bottom: 1.5rem;
}

aside .nav-section {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 1.15rem 0 .35rem;
  font-family: var(--font-mono);
}

aside ul.nav-list,
aside ul.sub-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

aside ul.nav-list a {
  display: block;
  padding: .3rem .55rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .83rem;
  border-radius: 3px;
  transition: color .15s, background-color .15s;
}

aside ul.nav-list a:hover {
  background: var(--accent-faint);
  color: var(--accent);
  text-decoration: none;
}

aside ul.nav-list a.active,
aside ul.nav-list a[aria-current="page"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}

aside ul.nav-list .count {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .7rem;
  margin-left: .35rem;
}

aside ul.nav-list ul.sub-nav {
  padding: 0 0 0 .8rem;
  margin: .15rem 0 .35rem;
  border-left: 1px solid var(--rule);
}

aside ul.nav-list ul.sub-nav a {
  font-size: .76rem;
  padding: .15rem .45rem;
}

/* ============================================================ */
/* §5 Main content                                              */
/* ============================================================ */
main.content {
  padding: var(--content-pad-y) var(--content-pad-x);
  max-width: var(--content-max);
  /* Grid items default to min-width:auto, so a wide child (a non-wrapping
     JSON drill-down, the 22-col heatmap) would force the 1fr track past the
     viewport and the whole layout would jump when the drill-down expands.
     Floor it at 0 so wide content scrolls/wraps inside the column instead. */
  min-width: 0;
}

h1.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 .35rem;
  color: var(--ink);
  line-height: 1.30;
}

.page-sub {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.55;
  max-width: 780px;
}

h2.section {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 1.75rem 0 .55rem;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: .75rem;
  line-height: 1.20;
}

h2.section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h3.subsection {
  font-size: .9rem;
  font-weight: 600;
  margin: 1rem 0 .35rem;
  font-family: var(--font-mono);
  line-height: 1.35;
}

/* ============================================================ */
/* §6 Records table                                             */
/* ============================================================ */
table.records {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .78rem;
  border-collapse: collapse;
}

table.records thead th {
  text-align: left;
  padding: .35rem .6rem .35rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-weight: 600;
}

table.records tbody td {
  padding: .45rem .6rem .45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.5;
}

table.records tbody tr:hover td {
  background: var(--rule-soft);
}

table.records td.id a {
  color: var(--accent);
  text-decoration: none;
}

table.records td.id a:hover {
  text-decoration: underline;
}

table.records td.num {
  text-align: right;
  color: var(--ink);
}

table.records td.muted {
  color: var(--ink-soft);
}

table.records td.empty {
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  padding: 1rem;
}

table.records .sub-row .id {
  padding-left: 1.5rem;
}

/* ============================================================ */
/* §3 Harness chips (4)                                         */
/* ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .08rem .42rem;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  margin-right: .25rem;
  margin-bottom: .12rem;
  line-height: 1.0;
}

.chip.payg   { background: var(--chip-payg-bg);   color: var(--chip-payg-fg); }
.chip.claude { background: var(--chip-claude-bg); color: var(--chip-claude-fg); }
.chip.codex  { background: var(--chip-codex-bg);  color: var(--chip-codex-fg); }
.chip.geode  { background: var(--chip-geode-bg);  color: var(--chip-geode-fg); }

/* ============================================================ */
/* §3 Surface bucket chips (3)                                  */
/* ============================================================ */
.bucket {
  display: inline-block;
  padding: .08rem .4rem;
  border-radius: 3px;
  font-size: .58rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: .35rem;
  line-height: 1.0;
}

.bucket.petri        { background: rgba(13,110,253,.12);  color: var(--bucket-petri); }
.bucket.seedgen      { background: rgba(25,135,84,.12);   color: var(--bucket-seedgen); }
.bucket.autoresearch { background: rgba(180,83,9,.12);    color: var(--bucket-autoresearch); }

/* ============================================================ */
/* §4 Role label                                                */
/* ============================================================ */
.role-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-weight: 600;
  margin-right: .25rem;
  font-family: var(--font-mono);
  line-height: 1.0;
}

/* ============================================================ */
/* §10 Stale baseline warning banner                            */
/* ============================================================ */
.warning {
  margin: 0 0 1.5rem;
  padding: .55rem .8rem;
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-rule);
  border-radius: 3px;
  font-size: .82rem;
  font-family: var(--font-mono);
}

.warning code { background: rgba(255,255,255,.55); }

/* ============================================================ */
/* §9 Build info footer                                         */
/* ============================================================ */
.build-info {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: .7rem;
  font-family: var(--font-mono);
}

.build-info p { margin: .25rem 0; }
.build-info code { background: var(--paper-tint); }

.version-stamp {
  margin-top: .5rem;
  color: var(--ink-soft);
}

/* Footer chip legend keeps chip spacing tighter inline */
.build-info .chip { margin-right: .15rem; }

/* ============================================================ */
/* Seed-generation surface — per-run detail page                */
/* ============================================================ */

/* Header banner over the run detail page (mutator chip + run id) */
.run-detail-header {
  margin: 0 0 1.5rem;
  padding: .9rem 1rem;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.run-detail-header dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem .9rem;
  font-family: var(--font-mono);
  font-size: .78rem;
}

.run-detail-header dt {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .62rem;
  font-weight: 600;
  align-self: center;
}

.run-detail-header dd {
  margin: 0;
  color: var(--ink);
}

/* Prominent mutator banner above all section tables (per DESIGN.md §7) */
.mutator-banner {
  margin: 0 0 1.25rem;
  padding: .55rem .8rem;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
}

.mutator-banner .role-label {
  color: var(--ink-faint);
  margin-right: .35rem;
}

/* ============================================================ */
/* table.records.phases — phase progress / .eval card table     */
/* ============================================================ */
table.records.phases td.id {
  font-weight: 600;
  color: var(--ink);
}

table.records.phases td.phase-link a {
  color: var(--accent);
}

/* ============================================================ */
/* table.records.heatmap — 22-column pilot score matrix         */
/* ============================================================ */
/* Responsive wrapper: 22 dim cols on a narrow screen overflow            */
/* horizontally inside this region instead of pushing the page wide.     */
/* First column (candidate id) sticks left during scroll so the row      */
/* context is never lost.                                                */
.heatmap-scroll {
  overflow-x: auto;
  /* Hairline so the scroll region reads as a contained unit. */
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: .25rem 0 1rem;
  background: var(--paper);
}

table.records.heatmap {
  font-size: .72rem;
  /* Auto column sizing so abbrev headers (3-4 char) stay compact,       */
  /* yet the table can grow past the viewport when overflow-x kicks in.  */
  table-layout: auto;
  /* Floor the table width so each column gets ~2.4rem on narrow screens */
  /* (1 id col @ 11rem + 22 score cols @ 2.4rem ≈ 64rem).                */
  min-width: 64rem;
  margin: 0;
}

table.records.heatmap thead th {
  font-size: .68rem;
  padding: .35rem .25rem;
  white-space: nowrap;
  letter-spacing: .02em;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  /* No more vertical-rl rotation — abbreviations (CHS / UOS / BTU etc.)  */
  /* fit horizontally so screen readers + sighted users get the same     */
  /* affordance. Full dim name lives in <abbr title=…> for hover.        */
}

table.records.heatmap thead th.id-col,
table.records.heatmap tbody td.id {
  /* Sticky first column so the candidate id stays visible while         */
  /* the 22 dim cells scroll horizontally.                               */
  position: sticky;
  left: 0;
  background: var(--paper);
  text-align: left;
  padding-right: .8rem;
  min-width: 11rem;
  /* Hairline rule on the right separates the sticky column from the    */
  /* scrolling region so the boundary is legible mid-scroll.            */
  border-right: 1px solid var(--rule);
  z-index: 1;
}

table.records.heatmap thead th.id-col {
  font-weight: 600;
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--ink-faint);
  letter-spacing: .06em;
}

table.records.heatmap thead th abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  /* Subtle hint that the abbrev is hoverable for the full name. */
}

table.records.heatmap tbody td {
  padding: .4rem .25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
}

/* Heatmap cell color buckets — see DESIGN.md §5.6.
 * Master DESIGN.md §3 strict rule 2: no new color tokens. Reuse
 *   --rule-soft for safe baseline (score 1.0)
 *   --bucket-autoresearch (#b45309) for the deliberate warm signal
 *     (high score = problematic in petri convention)
 * Gradient is opacity over the same warm tone — no new hex codes.
 */
table.records.heatmap td.score-safe   { background: var(--rule-soft); color: var(--ink-soft); }
table.records.heatmap td.score-warn-1 { background: rgba(180, 83, 9, .12); color: var(--ink); }
table.records.heatmap td.score-warn-2 { background: rgba(180, 83, 9, .25); color: var(--ink); }
table.records.heatmap td.score-warn-3 { background: rgba(180, 83, 9, .45); color: #fff; }
table.records.heatmap td.score-warn-4 { background: rgba(180, 83, 9, .70); color: #fff; }
table.records.heatmap td.score-na     { background: transparent; color: var(--ink-faint); }

/* ============================================================ */
/* Coverage bar chart (meta-review per-dim coverage)            */
/* ============================================================ */
.coverage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: .25rem .75rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  align-items: center;
}

.coverage-list .dim-name {
  color: var(--ink);
  white-space: nowrap;
}

.coverage-list .dim-count {
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.coverage-bar {
  position: relative;
  height: 8px;
  background: var(--rule-soft);
  border-radius: 2px;
  overflow: hidden;
}

.coverage-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bucket-seedgen);
  border-radius: 2px;
}

/* ============================================================ */
/* Cost-grid (dl key/value pairs) for index + run cost rollups  */
/* ============================================================ */
.cost-grid {
  margin: .35rem 0 1.5rem;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: .25rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
}

.cost-grid dt {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .62rem;
  font-weight: 600;
  align-self: center;
}

.cost-grid dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================ */
/* Reflections list (per-candidate critic output)               */
/* ============================================================ */
.reflections {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reflections li {
  border-bottom: 1px solid var(--rule-soft);
  padding: .65rem 0;
}

.reflections li:last-child { border-bottom: 0; }

.reflections .meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}

.reflections .meta .risk {
  display: inline-block;
  padding: .04rem .35rem;
  border-radius: 3px;
  background: var(--rule-soft);
  color: var(--ink);
  margin: 0 .35rem;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.reflections .reflect-block {
  margin: .25rem 0 .15rem;
  font-size: .82rem;
}

.reflections .reflect-block h4 {
  margin: .2rem 0 .05rem;
  font-size: .62rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-weight: 600;
}

.reflections .reflect-block ul {
  margin: 0;
  padding-left: 1.2rem;
}

.reflections .rewrite {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: .25rem;
}

/* ============================================================ */
/* Phases legend (seed-gen index page)                          */
/* ============================================================ */
.phases-legend {
  margin: .35rem 0 1.5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  font-size: .82rem;
}

.phases-legend dt {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.phases-legend dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Session summary prose */
.session-summary {
  margin: .25rem 0 1rem;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 780px;
}

/* ============================================================ */
/* Autoresearch surface (landing + baseline + mutations         */
/* + results + policies)                                        */
/*                                                              */
/* Master DESIGN.md §3 strict rule 1: no new color tokens.      */
/* Every signal below is composed from --bucket-autoresearch    */
/* (warm), --bucket-seedgen (cool green), --ink-faint (muted),  */
/* and the existing warning palette.                            */
/* ============================================================ */

/* Yellow / amber hairline banner used when baseline.json is    */
/* read from a `.outdated-*` snapshot. Reuses the warning       */
/* palette (already declared above) — no new tokens.            */
.warning-banner {
  margin: 0 0 1.5rem;
  padding: .6rem .85rem;
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-rule);
  border-radius: 3px;
  font-size: .82rem;
  font-family: var(--font-mono);
}

.warning-banner code { background: rgba(255, 255, 255, .55); }

/* Generation timeline row highlight — the currently-promoted    */
/* row is .active and gets a left rule + tinted background       */
/* (autoresearch warm bucket at low opacity).                    */
.gen-timeline-row.active td {
  background: rgba(180, 83, 9, .08);
  font-weight: 600;
}

table.records .gen-timeline-row.active td:first-child {
  padding-left: .45rem;
}

/* Inline Unicode block-char sparkline (no SVG, no JS).          */
/* Used in the results table fitness column.                     */
.fitness-sparkline {
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: 0;
  white-space: pre;
  color: var(--bucket-autoresearch);
  vertical-align: baseline;
}

/* Policy JSON drill-down — wrap, do not force the column wider.   */
/* Lives in a <td> of an auto-layout table, so a non-wrapping pre  */
/* would grow the cell (and the page) when <details> expands —     */
/* the width jumped on open. pre-wrap + overflow-wrap:anywhere     */
/* keeps min-content tiny so the column stays put; tall JSON       */
/* scrolls vertically inside max-height. (matches pre.msg policy.) */
.policy-json {
  margin: .35rem 0 0;
  padding: .65rem .9rem;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  max-height: 24rem;
}

.policy-json pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

/* Δ-fitness color buckets — derived from existing tokens.        */
/* positive = seedgen green (improvement signal — matches the    */
/* surface bucket convention since improvement = the loop is     */
/* working). negative = autoresearch warm (regression signal).   */
/* noise = ink-faint muted.                                      */
.delta-positive {
  color: var(--bucket-seedgen);
  font-variant-numeric: tabular-nums;
}

.delta-negative {
  color: var(--bucket-autoresearch);
  font-variant-numeric: tabular-nums;
}

.delta-noise {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Baseline namespace block (h3 + table pattern, repeated 7x).    */
.namespace-block {
  margin: 1rem 0 1.5rem;
}

.namespace-block h3 {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}

.namespace-block .namespace-meta {
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

.namespace-block table.records {
  margin-top: 0;
}

.namespace-block .empty-namespace {
  color: var(--ink-faint);
  font-style: italic;
  font-size: .8rem;
  margin: .25rem 0 0;
}

/* Status grid (autoresearch landing). Same shape as cost-grid    */
/* but explicitly named so the contract is local to the page.    */
.status-grid {
  margin: .35rem 0 1.5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  max-width: 780px;
}

.status-grid dt {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .62rem;
  font-weight: 600;
  align-self: center;
}

.status-grid dd {
  margin: 0;
  color: var(--ink);
}

/* ---------------------------------------------------------------------
 * PR-SEEDS-HIRES P2 (2026-05-26) — high-resolution sub-page surfaces
 * (/agents/, /agent/<task_id>/, /timeline/, /tournament/).
 * Reuses existing tokens (--ink, --paper, --bucket-seedgen, --chip-*).
 * No new color tokens.
 * ------------------------------------------------------------------ */
table.seedgen-agents {
  width: 100%;
  border-collapse: collapse;
}
table.seedgen-agents td.num,
table.seedgen-agents th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Baseline audit transcript: the auditor↔target conversation sits in a
   left-ruled group so it reads as one unit, separated from the per-seed
   judge-score table that follows it inside the same <details>. */
.audit-conversation {
  margin: .25rem 0 .85rem;
  padding-left: .6rem;
  border-left: 2px solid var(--rule-soft);
}
details.turn {
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  margin: .35rem 0;
  padding: .35rem .55rem;
}
details.turn > summary {
  cursor: pointer;
  font-weight: 500;
  letter-spacing: .01em;
  font-size: .9rem;
}
details.turn.user > summary { color: var(--bucket-petri); }
details.turn.assistant > summary { color: var(--bucket-seedgen); }
details.turn.session-end > summary { color: var(--bucket-autoresearch); }
/* Every .msg block (voter rationale on the tournament + lineage ranker
   station, debate turns, parse_error notes) wraps responsively. Without a
   base rule the bare <pre class="msg"> defaulted to no-wrap and ran off the
   page horizontally. overflow-wrap:anywhere also breaks long unbroken tokens
   (urls, json). */
pre.msg {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: var(--paper-tint);
  padding: .55rem .7rem;
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.45;
  max-height: 30rem;
  overflow-y: auto;
}
ul.event-list {
  margin: 0;
  padding-left: 1.2rem;
}
ul.event-list li {
  margin: .15rem 0;
  font-size: .85rem;
}
section.phase-block {
  border-left: 1px solid var(--rule);
  padding-left: .8rem;
}
section.match h3 {
  margin-top: 0;
}
table.records.votes {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
table.records.votes td.rationale {
  max-width: 38rem;
  font-style: italic;
  color: var(--ink-muted);
}
.bucket.win-a {
  background: rgba(13,110,253,.12);
  color: var(--bucket-petri);
}
.bucket.win-b {
  background: rgba(25,135,84,.12);
  color: var(--bucket-seedgen);
}
.bucket.tie {
  background: rgba(108,117,125,.12);
  color: #6c757d;
}

/* ---------------------------------------------------------------------
 * PR-SEEDS-HIRES P3 (2026-05-26) — Live + Lineage surfaces.
 * `/active/` + `/lineage/<cand_id>/` pages. Reuses existing tokens.
 * ------------------------------------------------------------------ */
table.records.active-runs {
  width: 100%;
  border-collapse: collapse;
}
table.records.active-runs td.num,
table.records.active-runs th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
}
.live-indicator .dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--bucket-seedgen);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%   { opacity: .35; }
  50%  { opacity: 1; }
  100% { opacity: .35; }
}
section.lineage-station {
  border-left: 1px solid var(--rule);
  padding-left: .85rem;
}
section.lineage-station h3 {
  margin: .2rem 0 .5rem 0;
  font-size: 1.05rem;
}
pre.diff {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper-tint);
  padding: .7rem .85rem;
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.4;
  border: 1px solid var(--rule-soft);
}
pre.msg.cand-body {
  border: 1px solid var(--rule-soft);
}

/* PR-HUB-VIS-CYCLE1 (2026-05-28) — evolver diff side-by-side layout
   + marked.js-rendered MD body styling + warn bucket chip. */
.evolver-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.evolver-diff-grid .diff-col h3 {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .evolver-diff-grid {
    grid-template-columns: 1fr;
  }
}
.markdown-body {
  background: var(--paper-tint);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  line-height: 1.5;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  margin: .8rem 0 .4rem 0;
}
.markdown-body code {
  background: var(--paper);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .85em;
}
.markdown-body pre {
  background: var(--paper);
  padding: .6rem .8rem;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid var(--rule-soft);
}
.markdown-body ul, .markdown-body ol {
  padding-left: 1.4rem;
  margin: .3rem 0;
}
.markdown-body blockquote {
  border-left: 2px solid var(--rule);
  padding-left: .8rem;
  margin: .4rem 0;
  color: var(--ink-soft);
}
/* PR-HUB-VIS-CYCLE1-FOLLOWUP (2026-05-28) — bucket.warn uses the
   official --warning-* tokens from the master DESIGN.md instead of
   ad-hoc amber. Matches the autoresearch stale-baseline banner tone. */
.bucket.warn {
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-rule);
}

/* PR-HUB-DESLOP (2026-05-29) — sub-view navigation is a dense inline link
   row, not a box-card grid (box-card-as-nav is a slop signal per CLAUDE.md).
   Datadog-style: flat, hairline-bounded, scannable. */
.subview-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  align-items: baseline;
  margin: .4rem 0 1.5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: .85rem;
}
.subview-nav a {
  color: var(--accent);
  text-decoration: none;
}
.subview-nav a:hover {
  text-decoration: underline;
}
.subview-nav .count {
  color: var(--ink-faint);
  margin-left: .3rem;
}

/* PR-HUB-DESLOP — run-page section "map": a sticky in-page anchor nav so the
   long run page is navigable by scope instead of one endless scroll. JS-free
   (plain anchor links); the scope ids live on the <h2 class="section"> heads. */
.run-map {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: 0 0 1.5rem;
  padding: .5rem .1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .76rem;
}
.run-map .scope {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: .15rem;
}
.run-map a {
  color: var(--ink-soft);
  text-decoration: none;
}
.run-map a:hover {
  color: var(--accent);
}

/* PR-HUB-DESLOP — collapsible section. The <summary> mimics the
   <h2 class="section"> header (uppercase mono + trailing hairline) so the
   heaviest run sections (reflections, 22-dim pilot matrix) fold to keep the
   page from being one endless scroll. */
.section-fold {
  margin: 1.75rem 0 0;
}
.section-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.section-fold > summary::-webkit-details-marker {
  display: none;
}
.section-fold > summary::before {
  content: "\25B8"; /* ▸ */
}
.section-fold[open] > summary::before {
  content: "\25BE"; /* ▾ */
}
.section-fold > summary::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* PR-HUB-LOOP-VIZ (2026-05-29) — the co-scientist loop as a STATIC diagram
   (prelude runs once; an iterating core repeats x N with evolved fed back).
   Replaces the animated 8-box hero (slop). Flat hairline boxes, no animation,
   no colored accents (CLAUDE.md de-slop). Arrows are CSS pseudo-elements so
   the markup stays a clean <ol> of phases. */
.seedgen-pipeline {
  margin: .5rem 0 2rem;
}
.seedgen-pipeline figcaption {
  max-width: 72ch;
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.6;
}
.seedgen-pipeline figcaption strong { color: var(--ink); }
.pipe-tag {
  display: inline-block;
  margin-bottom: .45rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.pipe-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem .4rem;
}
.pipe-row li {
  position: relative;
  flex: 1 1 9rem;
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-tint);
}
.pipe-name {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}
.pipe-sub {
  font-size: .72rem;
  color: var(--ink-soft);
}
.pipe-row li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -.46rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: .8rem;
}
.pipe-feed {
  margin: .5rem 0 .5rem 1.1rem;
  color: var(--ink-faint);
  font-size: .95rem;
  line-height: 1;
}
.pipe-loop {
  padding: .75rem .85rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.pipe-loopback {
  margin: .6rem 0 0;
  padding-top: .5rem;
  border-top: 1px dashed var(--rule);
  font-size: .76rem;
  color: var(--ink-soft);
}
.pipe-loopback-arrow {
  margin-right: .25rem;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .pipe-row li:not(:last-child)::after { display: none; }
}