/* ------------------------------------------------------------------
   Agent Metrics Lab
   Two voices: prose a person wrote (Source Serif 4) and records a
   machine emitted (IBM Plex Mono). Colour is never decoration — the
   four signal colours mean act, propose, ask and escalate, nothing else.
   ------------------------------------------------------------------ */

:root {
  --paper:      #eef1f3;
  --paper-2:    #e5eaed;
  --panel:      #f7f9fa;
  --ink:        #16202b;
  --ink-2:      #4c5b68;
  --ink-3:      #6f7d89;
  --rule:       #c7d1d8;
  --rule-soft:  #d9e1e6;
  --bar-root:   #c2ccd4;   /* the root span's bar, which spans the whole run */

  --act:        #1a6b4f;
  --propose:    #2e5fa3;
  --ask:        #8a6212;
  --escalate:   #a8324a;

  --act-fill:      #2a9670;
  --propose-fill:  #4380cc;
  --ask-fill:      #c08a1e;
  --escalate-fill: #c8465e;

  --measure: 63ch;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --band-y: clamp(4rem, 9vw, 7.5rem);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #131b22;
    --paper-2:   #18222b;
    --panel:     #1c2731;
    --ink:       #e2e9ee;
    --ink-2:     #a4b3bf;
    --ink-3:     #7d8d99;
    --rule:      #33434f;
    --rule-soft: #26333d;
    --bar-root:  #44596a;

    --act:      #56c79a;
    --propose:  #7aadf0;
    --ask:      #d9a93f;
    --escalate: #ef7d93;

    --act-fill:      #2f9d76;
    --propose-fill:  #4d8ad6;
    --ask-fill:      #b98a24;
    --escalate-fill: #c9566c;
  }
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  font-variant-numeric: oldstyle-numeric;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.017em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 0.85rem + 4.6vw, 4.1rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); letter-spacing: -0.01em; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ink-3); }

:focus-visible {
  outline: 2px solid var(--propose);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.85rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- top bar ------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}

.mark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-weight: 600; letter-spacing: -0.01em;
  font-size: 1.02rem; white-space: nowrap;
}
.mark__glyph { width: 1.05rem; height: 1.05rem; fill: var(--ink); flex: none; }
.mark__glyph rect:nth-child(1) { fill: var(--ink-2); }
.mark__glyph rect:nth-child(3) { fill: var(--ask-fill); }

.topnav { display: flex; gap: clamp(0.7rem, 1.6vw, 1.4rem); font-family: var(--mono); font-size: 0.78rem; }
.topnav a { text-decoration: none; color: var(--ink-2); padding-block: 0.2rem; border-bottom: 1px solid transparent; }
.topnav a:hover, .topnav a.is-current { color: var(--ink); border-bottom-color: var(--ask-fill); }
@media (max-width: 760px) { .topnav { display: none; } }

/* --- the rail: position within the run ---------------------------- */

.rail {
  position: fixed; right: 1rem; top: 45%; transform: translateY(-50%);
  z-index: 30; pointer-events: none;
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.62rem; }
.rail li {
  display: grid; grid-template-columns: auto 18px; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  text-align: right;
}
/* Tick against the outer edge, label reading inwards towards the content. */
.rail li::before {
  content: ""; grid-column: 2; justify-self: end;
  height: 1px; background: var(--rule);
  width: 10px; transition: width 220ms ease, background-color 220ms ease;
}
.rail li span { grid-column: 1; opacity: 0; transition: opacity 200ms ease; }
.rail li.is-current::before { width: 18px; background: var(--ask-fill); }
.rail li.is-current span { opacity: 1; color: var(--ink-2); }
@media (max-width: 1320px) { .rail { display: none; } }

/* --- shared layout ------------------------------------------------ */

main { display: block; }

.band {
  padding: var(--band-y) clamp(1.25rem, 6vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.band--tint { background: var(--paper-2); }
.band--refs { padding-block: clamp(3rem, 6vw, 4.5rem); }

.col { max-width: var(--measure); }
.band > * + * { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.band h2 + p { margin-top: 1.1rem; }

.kicker {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.01em;
  color: var(--ink-3); margin-bottom: 1.4rem;
  /* The prose measure is set for the serif; let the column bound this instead. */
  max-width: none;
}

.note { color: var(--ink-2); font-size: 0.95rem; border-left: 2px solid var(--rule); padding-left: 1rem; }

.sub { margin-top: 2.5rem; margin-bottom: 0.8rem; }

/* --- hero --------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 6vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
  align-items: start;
}
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 5vw, 5rem); }
}

.hero h1 { margin-bottom: 1.5rem; }

/* The hand-set line breaks are for wide screens; let the words wrap below that. */
@media (max-width: 620px) {
  .hero__break { display: none; }
}
.lede { font-size: 1.12em; color: var(--ink-2); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 0.82rem;
  padding: 0.6rem 1.05rem; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { border-color: var(--ink); background: transparent; }
.btn--small { padding: 0.4rem 0.8rem; font-size: 0.75rem; }

/* --- the trace waterfall ------------------------------------------ */

.hero__trace { margin: 0; }

.trace {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem 1rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  overflow: hidden;
}

.trace__head {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--ink-3); border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.6rem; margin-bottom: 0.7rem;
}

.span {
  display: grid;
  grid-template-columns: minmax(8.5rem, 34%) 1fr;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.17rem;
}
.span__name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.span--d0 .span__name { color: var(--ink); }
.span--d1 .span__name { padding-left: 0.75rem; }
.span--d2 .span__name { padding-left: 1.5rem; }

.span__track { position: relative; height: 1.15rem; }
.span__bar {
  position: absolute; top: 0.22rem; height: 0.7rem;
  background: var(--ink-2); border-radius: 1px;
  transition: width 140ms cubic-bezier(0.2, 0.7, 0.3, 1);  /* just enough to smooth the 45ms steps */
}
.span--d0 .span__bar { background: var(--bar-root); }
.span--d2 .span__bar { background: var(--ink-3); }
.span__bar--ask { background: var(--ask-fill); }
.span__detail {
  position: absolute; top: 0.12rem; white-space: nowrap;
  color: var(--ink-3); font-size: 0.68rem;
  opacity: 0; transition: opacity 320ms ease;
}
.span.is-done .span__detail { opacity: 1; }

/* Too little room beside the bars on a phone; the summary carries the detail. */
@media (max-width: 640px) {
  .span__detail { display: none; }
}
.span.is-pending { opacity: 0.28; }

.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.3rem 1.4rem;
  margin: 0.9rem 0 0; padding: 0;
  font-family: var(--mono); font-size: 0.74rem;
}
.meta > div { display: flex; gap: 0.6rem; border-bottom: 1px dotted var(--rule); padding-block: 0.22rem; }
.meta dt { color: var(--ink-3); min-width: 3.6rem; }
.meta dd { margin: 0; color: var(--ink-2); }
.meta dd.is-ask { color: var(--ask); font-weight: 500; }

figcaption {
  font-size: 0.88rem; color: var(--ink-3); margin-top: 0.85rem;
  max-width: 54ch; line-height: 1.5;
}

/* --- kept / lost -------------------------------------------------- */

.ledger {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: 62rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}
.ledger h3 { font-size: 1rem; margin-bottom: 0.85rem; }
.mono-list { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 0.82rem; line-height: 1.5; }
.mono-list li { padding: 0.32rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.ledger__half--lost h3 { color: var(--escalate); }
.ledger__half--lost .mono-list li { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--escalate) 55%, transparent); }

.pull {
  margin: 2rem 0; padding-left: 1.4rem;
  border-left: 3px solid var(--ask-fill);
  max-width: 34ch;
}
.pull p { font-size: 1.42em; line-height: 1.28; font-style: italic; color: var(--ink); margin: 0; }

/* --- numbered question list --------------------------------------- */

.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; max-width: 46rem; }
.qlist li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid var(--rule-soft); padding: 0.9rem 0; }
.qlist__n { font-family: var(--mono); font-size: 0.78rem; color: var(--ask); }
.qlist p { margin: 0; font-size: 1.1em; }

/* --- data-flow diagram -------------------------------------------- */

.diagram { margin: 0; }
.diagram__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.diagram__legend { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); margin: 0; max-width: none; }
.diagram__legend b { font-weight: 500; color: var(--ink-2); }

.diagram__stage {
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--panel);
  padding: 0.5rem;
  overflow: hidden;
}
.diagram svg { display: block; width: 100%; height: auto; }

.flow > * + * { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* On a screen with room for both, the diagram stays in view while the five
   stations below it are read, and scrolls away with the last of them. Capped
   in height so it never takes more than about half the window; the viewBox
   keeps its proportions and centres it in the box. */
@media (min-width: 1100px) and (min-height: 760px) {
  .flow .diagram {
    position: sticky; top: 3.2rem; z-index: 5;
    background: var(--paper);
    padding-block: 0.9rem 0.4rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .flow .diagram svg { max-height: 34vh; }
  .flow .diagram figcaption { margin-top: 0.5rem; }
}

.flow-spine { fill: none; stroke: var(--rule); stroke-width: 2; }
.flow-return { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 5; }
.flow-outlet { fill: none; stroke-width: 2; }
.flow-node rect {
  fill: var(--panel); stroke: var(--rule); stroke-width: 1;
  transition: stroke 160ms ease;
}
.flow-node--active rect { stroke: var(--ink-2); }
.flow-node__title { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: var(--ink); }
.flow-node__machine { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
.flow-node__n { font-family: var(--mono); font-size: 10.5px; fill: var(--ask); }
.flow-outlet__label { font-family: var(--mono); font-size: 12.5px; }
.flow-return__label { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-3); }

.packet { transition: none; }
.packet--redacted { fill: none; stroke-width: 1.2; stroke-dasharray: 2 1.6; }

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 62rem; counter-reset: stage; }
.stages > li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.4rem 0.8rem; padding: 1.15rem 1rem;
  border-top: 1px solid var(--rule-soft);
  counter-increment: stage;
  transition: background-color 160ms ease;
}
.stages > li:last-child { border-bottom: 1px solid var(--rule-soft); }
.stages > li.is-active { background: color-mix(in srgb, var(--ask-fill) 7%, transparent); }
.stages__n { font-family: var(--mono); font-size: 0.78rem; color: var(--ask); padding-top: 0.28rem; }
.stages h3 { margin-bottom: 0.15rem; }
.stages__machine { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); margin: 0 0 0.5rem; }
.stages p.stages__body { margin: 0 0 0.55rem; color: var(--ink-2); font-size: 0.97em; }
.carries { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; list-style: none; margin: 0; padding: 0; }
.carries li {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.1rem 0.4rem;
}

/* --- authority gate ----------------------------------------------- */

.gate {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start; max-width: 66rem;
}
@media (min-width: 880px) { .gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gate__plot svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); }
.gate__axis { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
.gate__marker-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.gate__marker-dot { fill: var(--ink); }
/* Ink, not a route colour: the span is a range of readings, and plan is not a route. */
.gate__span { stroke: var(--ink); stroke-width: 1.5; }
.gate__marker-ring--plan { stroke-dasharray: 3 2.5; }

.ctl { margin-bottom: 1.5rem; }
.ctl label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); margin-bottom: 0.45rem;
}
.ctl__val { color: var(--ink); }
/* The symbol the formula uses for this reading, set as the formula sets it. */
.ctl__sym { font-family: var(--serif); font-size: 1.1em; color: var(--ink); margin-right: auto; margin-left: -0.6rem; } /* the label gap is 1rem; sit closer */
.ctl__hint { font-size: 0.86rem; color: var(--ink-3); margin: 0.4rem 0 0; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.4rem; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--rule); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  background: var(--ink); border: none; border-radius: 50%;
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: none; border-radius: 50%; }

.verdict {
  display: block; border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-top: 1.9rem;
}
/* Element selectors here would outrank .route--*, which is what decides the
   colour of the route. Everything inside the verdict is addressed by class. */
.verdict__readout {
  display: flex; flex-wrap: wrap; gap: 0.3rem 2.2rem;
  font-family: var(--mono); font-size: 0.8rem;
  margin: 0 0 1.35rem;
}
.verdict__risk { color: var(--ink-2); }
.verdict__route { font-weight: 500; }
.verdict__headline { margin: 0 0 0.6rem; }
.verdict__explain { margin: 0; color: var(--ink-2); font-size: 0.97em; }

.route--act      { color: var(--act); }
.route--propose  { color: var(--propose); }
.route--ask      { color: var(--ask); }
.route--escalate { color: var(--escalate); }

/* --- research questions, phases, years ---------------------------- */

.rq { list-style: none; margin: 0; padding: 0; counter-reset: rq; max-width: 60rem; }
.rq > li {
  counter-increment: rq;
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 1.4rem 0;
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.4rem 0.6rem;
}
.rq > li::before {
  content: "RQ" counter(rq);
  font-family: var(--mono); font-size: 0.76rem; color: var(--ask);
  padding-top: 0.3rem;
}
.rq h3 { margin-bottom: 0.45rem; }
.rq p { margin: 0; color: var(--ink-2); font-size: 0.97em; }

.plain { padding-left: 1.1rem; max-width: var(--measure); color: var(--ink-2); }
.plain li { margin-bottom: 0.5rem; }

.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 60rem; }
.phases > li { border-top: 1px solid var(--rule); padding: 1.5rem 0; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.4rem 0.6rem; }
.phases__tag { font-family: var(--mono); font-size: 0.76rem; color: var(--ask); margin: 0; padding-top: 0.3rem; }
.phases h3 { margin-bottom: 0.45rem; }
.phases p { margin: 0; color: var(--ink-2); font-size: 0.97em; }

.years { list-style: none; margin: 0; padding: 0; max-width: 58rem; font-size: 0.97em; }
.years li {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.8rem;
  padding: 0.62rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2);
}
.years span { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); padding-top: 0.22rem; }

@media (max-width: 560px) {
  .rq > li, .phases > li, .years li, .stages > li { grid-template-columns: minmax(0, 1fr); }
  .rq > li::before, .phases__tag, .years span, .stages__n { padding-top: 0; }
}

/* --- the console mock ---------------------------------------------
   Drawn in the site's own hand, not dressed up as a screenshot of
   something real. Route colour is the only colour in it.
   ------------------------------------------------------------------ */

.console { margin: 0; }
.console__frame { border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); overflow: hidden; }

.console__chrome {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.6rem 1.5rem;
  padding: 0.75rem clamp(0.9rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
  font-family: var(--mono); font-size: 0.76rem;
}
.console__title { margin: 0; color: var(--ink); }
.console__scope { color: var(--ink-3); margin-left: 0.6rem; }
.console__periods { margin: 0; display: flex; gap: 0.35rem; color: var(--ink-3); }
.console__periods span { padding: 0.12rem 0.45rem; border-radius: 2px; }
.console__periods .is-current { background: var(--rule-soft); color: var(--ink); }

.console__body {
  display: grid; gap: 1px; background: var(--rule-soft);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.console__body > * { background: var(--panel); padding: clamp(0.9rem, 2.5vw, 1.3rem); }
.tiles, .panel--wide { grid-column: 1 / -1; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.tile__label { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); margin: 0 0 0.35rem; }
.tile__value { font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.4rem; font-variant-numeric: lining-nums; }
.tile__note { font-size: 0.82rem; color: var(--ink-3); margin: 0; }

.panel__title { margin: 0 0 0.2rem; font-size: 1rem; }
.panel__sub { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); margin: 0 0 1rem; }
.panel__note { font-size: 0.85rem; color: var(--ink-3); margin: 0.9rem 0 0; }

/* 2px gaps between segments, per the stacked-bar spec. */
.mix { display: flex; gap: 2px; height: 26px; margin-bottom: 0.9rem; }
.mix__part { display: block; border-radius: 2px; min-width: 3px; }
.mix__part--act      { background: var(--act-fill); }
.mix__part--propose  { background: var(--propose-fill); }
.mix__part--ask      { background: var(--ask-fill); }
.mix__part--escalate { background: var(--escalate-fill); }

.mix__key { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.2rem; }
.mix__key > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.mix__key dt { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-2); }
.mix__key dd { margin: 0; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }
.mix__key dd b { font-weight: 500; color: var(--ink); }
.mix__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.cost { display: block; width: 100%; height: auto; }
.cost__line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cost__dot { fill: var(--ink); }
.cost__mark { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.cost__caption { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); }
.cost__value { font-family: var(--mono); font-size: 11px; fill: var(--ink); }

.runs { font-family: var(--mono); font-size: 0.75rem; }
.runs__head, .runs__row {
  display: grid; gap: 0.3rem 1rem; padding: 0.5rem 0;
  grid-template-columns: 9.5rem minmax(0, 1fr) 5rem 4rem 3.2rem 4.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.runs__head { color: var(--ink-3); border-bottom-color: var(--rule); }
.runs__row:last-child { border-bottom: none; }
.runs__id { color: var(--ink-2); }
.runs__task { font-family: var(--serif); font-size: 0.95rem; color: var(--ink); }
.runs__n, .runs__evidence { color: var(--ink-3); }

@media (max-width: 860px) {
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .runs__head { display: none; }
  .runs__row { grid-template-columns: minmax(0, 1fr) auto; }
  .runs__task { grid-column: 1 / -1; }
}

/* --- the provenance sketch ---------------------------------------- */

.prov__link { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.prov__link--influence { stroke: var(--ink-3); stroke-dasharray: 3 3; stroke-width: 1.1; }

.prov__node rect { fill: var(--panel); stroke: var(--rule); stroke-width: 1; }
.prov__node--dropped rect { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }

.prov__kind { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.prov__detail { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
.prov__node--dropped .prov__kind { fill: var(--ink-3); }

.sub--tight { margin-top: 1.5rem; }

.captures { max-width: 66rem; font-size: 0.93em; }
.captures__head, .captures__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0.3rem 1.4rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.captures__head {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.captures__kind { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); }
.captures__keeps { color: var(--ink-2); }
.captures__lost { color: var(--ink-3); font-style: italic; }

@media (max-width: 720px) {
  .captures__head { display: none; }
  .captures__row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .captures__lost::before { content: "instead: "; font-style: normal; font-family: var(--mono); font-size: 0.74rem; }
}

/* --- provenance marks ---------------------------------------------
   Where an idea came from. Kept colourless on purpose: the four signal
   colours are spoken for, and a fifth meaning would dilute them.
   ------------------------------------------------------------------ */

.origin {
  display: inline-block;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.05rem 0.4rem; vertical-align: 0.2em;
}
.origin--contribution { color: var(--ink-2); border-color: var(--ink-3); background: var(--paper-2); }
.origin--beyond { color: var(--ink-2); border-style: dashed; }

h3 .origin, .plain li .origin, .phases p .origin { margin-left: 0.45rem; }

.legend { margin: 0; display: grid; gap: 0.75rem; max-width: 52rem; }
.legend > div {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem; align-items: baseline;
}
.legend dt { margin: 0; }
.legend dd { margin: 0; color: var(--ink-2); font-size: 0.92em; }

.stages__origin {
  margin: 0 0 0.55rem; padding-left: 0.85rem;
  border-left: 2px solid var(--rule-soft);
  color: var(--ink-3); font-size: 0.9em;
}

/* --- the routing rule, written out -------------------------------- */

.rule {
  max-width: 46rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--panel);
  padding: clamp(1.1rem, 3vw, 1.8rem);
}
.rule__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); margin: 0 0 1.1rem;
}
.rule__label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.7rem;
}
.rule__label--inline { text-transform: none; letter-spacing: 0.02em; margin: 0; }

.rule__gloss { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 0.95em; }
.rule__gloss + .rule__ladder, .rule__gloss:last-of-type { margin-bottom: 1.4rem; }
.rule__gloss b { font-family: var(--mono); font-weight: 400; color: var(--ink); }

/* --- formulae ------------------------------------------------------
   MathML, so the maths is real maths: selectable, scalable, and read
   aloud as an equation rather than as punctuation.
   ------------------------------------------------------------------ */

.eq { color: var(--ink); font-size: 1.2rem; margin: 0 0 1rem; }

/* Only the block equation may need to scroll sideways on a narrow screen, and
   overflow-y must be said explicitly: `auto` on one axis with `visible` on the
   other is not a legal pair, so the browser promotes both and you get a
   vertical scrollbar on a single-line formula. */
math[display="block"].eq { overflow-x: auto; overflow-y: hidden; padding-block: 0.35rem; }

.eq--small { font-size: 1.02rem; margin: 0; }
.eq--inline { font-size: 1em; margin: 0; }
math { font-family: var(--serif); }

.eq__key { margin: 0 0 1.1rem; display: grid; gap: 0.3rem; }
.eq__key > div { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
.eq__key dt { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); }
.eq__key dd { margin: 0; color: var(--ink-2); font-size: 0.9em; }

.rule__plain { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 1.5rem; }
/* Its own line, never broken: a formula split at an arbitrary space reads as
   two statements. On a narrow screen it scrolls instead — and overflow-y is
   explicit, because auto on one axis alone promotes both. */
.rule__plain code {
  display: block; margin-top: 0.2rem;
  font-family: var(--mono); font-size: 0.95em; color: var(--ink-2);
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
}

.rule__reqs { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.55rem; }
.rule__reqs li {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.7rem;
  align-items: baseline; color: var(--ink-2); font-size: 0.95em;
}
.rule__req { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.rule__reqs b { color: var(--ink); font-weight: 600; }

/* What would have to be true for the assumption above to be wrong. */
.rule__falsifier { display: block; margin-top: 0.25rem; color: var(--ink-3); font-size: 0.93em; }

/* Each form sits above its own gloss. All three equations open with the same
   `m(r) =`, so starting every box at the same x is what lines the equals signs
   up — justify-items keeps the maths shrink-to-fit instead of stretching and
   centring inside the row. */
.rule__forms { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.95rem; }
.rule__forms li {
  display: grid; gap: 0.3rem; justify-items: start;
  padding-left: 1rem; border-left: 2px solid var(--rule-soft);
}
.rule__forms math { justify-self: start; margin: 0; }

.rule__bounds { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; }
.rule__bounds li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.1rem 1rem; align-items: baseline;
  padding-left: 1rem; border-left: 2px solid var(--rule-soft);
}
.rule__means { color: var(--ink-3); font-size: 0.9em; }
/* Only the bounds list has a second column to drop into. */
.rule__bounds .rule__means { grid-column: 2; }

.rule__consts { margin: 0; display: grid; gap: 0.45rem; }
.rule__consts > div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.15rem 1rem; align-items: baseline;
}
.rule__consts dt {
  font-family: var(--mono); font-size: 0.79rem; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 0.8rem;
}
.rule__value { color: var(--ink); }
.rule__consts dd { margin: 0; color: var(--ink-2); font-size: 0.9em; }

.rule__now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.9rem;
  margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.rule__working { font-family: var(--mono); font-size: 0.79rem; color: var(--ink); }

.rule__ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.rule__ladder li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem;
  align-items: baseline; padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.rule__when { font-family: var(--mono); font-size: 0.79rem; color: var(--ink-2); }
.rule__then { font-family: var(--mono); font-size: 0.79rem; text-align: right; }
.rule__order { margin: 0.75rem 0 0; color: var(--ink-3); font-size: 0.86rem; }
.rule__ladder li.rule__step--plan { border-bottom-style: dashed; }
.rule__step--plan .rule__then { color: var(--ink); }
.rule__caveat {
  margin: 1.3rem 0 0; padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-2); font-size: 0.92em;
}

@media (max-width: 620px) {
  .legend > div { grid-template-columns: minmax(0, 1fr); }
  .rule__ladder li, .rule__consts > div { grid-template-columns: minmax(0, 1fr); }
  .rule__then { text-align: left; }
}

/* --- references, contact, footer ---------------------------------- */

.refs { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; line-height: 1.5; max-width: 58rem; }
.refs li { padding: 0.62rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.refs cite { font-style: italic; }
.refs a { font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }

.byline {
  font-size: 1.2em; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink); margin-bottom: 0.7rem;
}

.contact { font-family: var(--mono); font-size: 0.86rem; margin-top: 1.8rem; }

.foot {
  padding: 2.2rem clamp(1.25rem, 6vw, 4rem) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot p { margin: 0; max-width: none; }

/* --- blazor plumbing ---------------------------------------------- */

.loading {
  display: grid; place-content: center; min-height: 70vh;
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3);
}

#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--escalate); color: #fff;
  padding: 0.7rem 1.2rem; font-family: var(--mono); font-size: 0.8rem;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}