/* ==========================================================================
   The Walkable Radiant — Atlas phase A
   Self-contained. No external fonts, no CDN, no build step (CF Pages serves
   these files as-is). Dark cartographic ground; two accent families only:
     · a cyan family  — machines, lanes, coupling flows
     · a warm family  — tension phase (amber → red-orange)
   plus neutrals. Tension phase is encoded by dash + weight + glyph as well as
   hue, so it survives colour-vision deficiency and greyscale printing.
   ========================================================================== */

:root {
  /* --- type: system stack only --- */
  --ff-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* --- ground --- */
  --bg:      #0a0e13;
  --bg-2:    #0e141b;
  --bg-3:    #131b23;
  --rule:    #1c2731;
  --rule-2:  #27353f;

  /* --- ink --- */
  --ink:     #d9e2ea;
  --ink-2:   #94a5b3;
  --ink-3:   #61717e;

  /* --- era ramp: dusk → day → dawn, one hue family, lightness carries era --- */
  --mm: #8aa3b2;
  --dm: #5fb0d2;
  --lm: #a4dced;

  /* --- tension phase ramp --- */
  --t-latent:    #77878f;
  --t-loading:   #e0a94e;
  --t-rupturing: #ff7a52;
  --t-resolved:  #c3cdd4;

  /* --- couplings --- */
  --cp:   #7fb8d4;
  --cp-x: #d8effa;

  /* --- geometry (JS mirrors these constants) --- */
  --gutter: 92px;
  --pad-r: 18px;
  --panelw: 360px;
  --askw: clamp(300px, 27vw, 384px);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}

:focus-visible { outline: 2px solid var(--lm); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -40px; z-index: 100;
  background: var(--lm); color: #06232e;
  padding: 6px 10px; border-radius: 3px; font-size: 12px; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.muted { color: var(--ink-3); }

/* ---------------------------------------------------------------- chrome */

.chrome {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
  flex-wrap: wrap;
}
.chrome__home { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); text-decoration: none; }
.chrome__home:hover { color: var(--lm); }
.chrome__mark { color: var(--dm); flex: none; align-self: center; }
.chrome__project { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.chrome__sep { color: var(--rule-2); }
.chrome__title {
  font-family: var(--ff-serif);
  font-size: 17px; font-weight: 500; letter-spacing: 0.005em;
  margin: 0; color: var(--ink);
}
.chrome__corpus {
  font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.02em;
}
.chrome__controls { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.tgl {
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 3px 9px;
  cursor: pointer;
}
.tgl:hover { color: var(--ink); border-color: var(--ink-3); }
.tgl.is-on { color: var(--bg); background: var(--ink-2); border-color: var(--ink-2); }

.linkbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 3px 9px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--lm); border-color: var(--dm); }
.linkbtn__glyph { color: var(--dm); }
.linkbtn.linkbtn--ok { color: var(--bg); background: var(--lm); border-color: var(--lm); }
.linkbtn.linkbtn--ok .linkbtn__glyph { color: var(--bg); }

/* --------------------------------------------------------------- banner */

.banner {
  padding: 8px 16px;
  background: #2a1c12;
  border-bottom: 1px solid #4a2f1c;
  color: #f0c48a;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.banner code { color: #ffd9a8; }

/* constellation banner — "how this view was arrived at" (plan §18.2) */
.cbanner {
  display: flex; align-items: baseline; gap: 9px;
  padding: 8px 16px;
  background: #0c2129;
  border-bottom: 1px solid #1c4552;
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.cbanner__glyph { color: var(--lm); flex: none; }
.cbanner__text { flex: 1; }
.cbanner__close {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; flex: none;
}
.cbanner__close:hover { color: var(--lm); }

/* -------------------------------------------------------------- readout */

.readout {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.readout__year { display: flex; align-items: baseline; gap: 8px; }
.readout__yearlab {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.readout__yearin {
  font-family: var(--ff-mono);
  font-size: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  width: 5.2ch;
  color: var(--lm);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 0 0 1px 0;
}
.readout__yearin::-webkit-inner-spin-button,
.readout__yearin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.readout__yearin { -moz-appearance: textfield; appearance: textfield; }
.readout__yearin:focus { outline: none; border-bottom-color: var(--lm); }

.readout__stats { display: flex; gap: 18px; margin: 0; }
.readout__stats > div { margin: 0; }
.readout__stats dt {
  font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}
.readout__stats dd {
  margin: 0; font-family: var(--ff-mono); font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.readout__dom dd { font-size: 12px; color: var(--ink-2); letter-spacing: 0.02em; }
/* the one counter that is not a count of cards — it counts claims */
.readout__pred[hidden] { display: none; }
.readout__pred dt { color: var(--lm); opacity: 0.7; }
.readout__pred dd { color: var(--lm); font-size: 13px; }

.readout__tally { display: flex; gap: 5px; flex-wrap: wrap; }
.tchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 11px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 2px 6px; color: var(--ink-2);
  background: var(--bg-2);
}
.tchip[data-n="0"] { opacity: 0.32; }
.tchip svg { display: block; overflow: visible; }

.readout__layers { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.lchip {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.03em;
  padding: 2px 6px; border-radius: 2px;
  border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--bg-2);
}
.lchip--missing { color: #e0a94e; border-color: #5a4622; background: #201a10; }

/* ---------------------------------------------------------------- stage */

/* Four column states, written out rather than derived, so the map always gets
   `minmax(0, 1fr)` and never a track that can be pushed below its content. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panelw);
  min-height: 0;
}
.stage.has-ask { grid-template-columns: var(--askw) minmax(0, 1fr) var(--panelw); }
.stage.no-panel { grid-template-columns: minmax(0, 1fr); }
.stage.no-panel.has-ask { grid-template-columns: var(--askw) minmax(0, 1fr); }
.stage.no-panel .panel { display: none; }

.mapwrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  min-height: 0; min-width: 0;
  border-right: 1px solid var(--rule);
}

/* The map keeps a minimum width (JS: MIN_MAP_W) and the frame scrolls sideways
   when the viewport is narrower — a warped 3,000-year scale crushed into a
   phone stops being a scale. The axis rides the same offset, driven from JS,
   and hides its own scrollbar so there is visibly one timeline, not two. */
.mapscroll { overflow: auto; min-height: 0; overscroll-behavior-x: contain; }
.mapscroll:focus-visible { outline-offset: -2px; }
#map { display: block; }

.axiswrap {
  border-top: 1px solid var(--rule); background: var(--bg-2);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.axiswrap::-webkit-scrollbar { height: 0; width: 0; }
#axis { display: block; }

/* --------------------------------------------------------- ledger note */

.ledger-note {
  border-top: 1px solid var(--rule);
  background: var(--bg-3);
  padding: 9px 16px 9px calc(var(--gutter) + 4px);
  font-size: 13px; line-height: 1.5;
  position: relative;
}
.ledger-note__head {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3);
  margin-bottom: 3px;
}
.ledger-note__text { font-family: var(--ff-serif); color: var(--ink); max-width: 70ch; }
.ledger-note--vaulted .ledger-note__text { color: var(--ink-2); font-style: italic; }
.ledger-note__view {
  display: inline-block; margin-top: 6px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--lm); text-decoration: none; border-bottom: 1px dotted var(--lm);
}
.ledger-note__view:hover { color: #fff; border-bottom-style: solid; }
.ledger-note__close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1;
}
.ledger-note__close:hover { color: var(--ink); }

/* ---------------------------------------------------------------- scrub */

.scrub {
  padding: 7px var(--pad-r) 9px var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
}
.scrub__range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 18px;
  background: transparent; cursor: ew-resize; margin: 0;
}
.scrub__range::-webkit-slider-runnable-track {
  height: 3px; background: var(--rule-2); border-radius: 2px;
}
.scrub__range::-moz-range-track {
  height: 3px; background: var(--rule-2); border-radius: 2px;
}
.scrub__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 3px; height: 18px; margin-top: -7px;
  background: var(--lm); border: 0; border-radius: 1px;
  box-shadow: 0 0 0 1px var(--bg);
}
.scrub__range::-moz-range-thumb {
  width: 3px; height: 18px;
  background: var(--lm); border: 0; border-radius: 1px;
}
.scrub__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lm); }

/* --------------------------------------------------------------- legend */

.legend {
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  max-height: 42vh; overflow-y: auto;
}
.legend__sum {
  cursor: pointer; list-style: none;
  padding: 7px 16px;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}
.legend__sum::-webkit-details-marker { display: none; }
.legend__sum::before { content: "▸ "; color: var(--rule-2); }
.legend[open] .legend__sum::before { content: "▾ "; }
.legend__sum:hover { color: var(--ink); }
.legend__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px 26px;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--rule);
}
.legend h3 {
  font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 6px;
}
.legend__note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin: 0 0 6px; }
.legend__list { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--ink-2); }
.legend__list li { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; line-height: 1.35; }
.legend__list b { color: var(--ink); font-weight: 600; }
.legend kbd {
  font-family: var(--ff-mono); font-size: 10px;
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 0 3px; color: var(--ink-2);
}
.sw { width: 20px; height: 5px; flex: none; border-radius: 1px; }
.sw--mm { background: var(--mm); }
.sw--dm { background: var(--dm); }
.sw--lm { background: var(--lm); }
.gl { width: 46px; height: 13px; flex: none; overflow: visible; }
.gl--sm { width: 12px; height: 12px; }
/* the four mode glyphs read as a set, so they share one row and wrap together */
.legend__modes {
  display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline;
  padding-top: 5px;
}
.legend__modes span { display: flex; align-items: center; gap: 5px; }
/* legend swatches for marks that are era-coloured on the map: the legend has
   no era to inherit from, so it borrows the middle of the ramp */
.legend .m-term, .legend .m-term-open { stroke: var(--dm); }
.legend .tmark { stroke: var(--dm); }
.legend .farc { opacity: 0.8; }
.gl-alive { fill: var(--dm); }
.gl-dead  { fill: var(--ink-3); opacity: 0.5; }
.gl-lead  { stroke: var(--dm); stroke-width: 1; opacity: 0.5; stroke-dasharray: 1 2; }
.gl-open  { stroke: var(--dm); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.7; }
.cp { fill: none; stroke: var(--cp); stroke-width: 1.1; opacity: 0.6; }
.cp--x { stroke: var(--cp-x); stroke-width: 1.9; opacity: 0.95; }
.cp-bead { fill: var(--cp-x); }
.pin { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pin--pub { fill: var(--ink); }
.pin-stem { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1.5 1.5; }

/* tension glyph + line samples (shared with SVG map classes below) */
.tn { fill: none; }
.tn--latent    { stroke: var(--t-latent);    stroke-width: 1;   stroke-dasharray: 1 3;   opacity: 0.75; }
.tn--loading   { stroke: var(--t-loading);   stroke-width: 1.6; stroke-dasharray: 5 3;   opacity: 0.9; }
.tn--rupturing { stroke: var(--t-rupturing); stroke-width: 2.4; opacity: 1; }
.tn--resolved  { stroke: var(--t-resolved);  stroke-width: 1;   opacity: 0.55; }
.tg--latent    { fill: none; stroke: var(--t-latent);    stroke-width: 1; }
.tg--loading   { fill: var(--t-loading); }
.tg--rupturing { fill: none; stroke: var(--t-rupturing); stroke-width: 1.8; stroke-linecap: round; }
.tg--resolved  { fill: none; stroke: var(--t-resolved);  stroke-width: 1.1; }

/* ---------------------------------------------------------------- panel */

.panel { overflow-y: auto; background: var(--bg-2); min-width: 0; }
.pane { border-bottom: 1px solid var(--rule); }
.pane__h {
  font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0; padding: 9px 14px;
  display: flex; align-items: baseline; gap: 8px;
  list-style: none; cursor: default;
}
details.pane > summary.pane__h { cursor: pointer; }
details.pane > summary.pane__h::-webkit-details-marker { display: none; }
details.pane > summary.pane__h::before { content: "▸"; color: var(--rule-2); }
details.pane[open] > summary.pane__h::before { content: "▾"; }
.pane__note { text-transform: none; letter-spacing: 0.01em; color: var(--ink-3); font-size: 10.5px; }
.pane__body { padding: 0 14px 14px; }

/* --- selection / stepped disclosure (plan §17) --- */

.d-era {
  display: inline-block; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.1em; padding: 1px 5px; border-radius: 2px;
  color: var(--bg); font-weight: 700; background: var(--ink-3);
  font-style: normal;   /* the badge is also used inside <i> in the traverse */
}
.d-era--MM { background: var(--mm); }
.d-era--DM { background: var(--dm); }
.d-era--LM { background: var(--lm); }

.d-name {
  font-family: var(--ff-serif); font-size: 18px; line-height: 1.2;
  color: var(--ink); margin: 6px 0 4px;
}
.d-line { font-family: var(--ff-serif); font-size: 13.5px; color: var(--ink-2); margin: 0 0 9px; }
.d-window {
  font-family: var(--ff-mono); font-size: 12px; color: var(--lm);
  font-variant-numeric: tabular-nums; margin: 0 0 8px;
}
.d-window .d-state { color: var(--ink-3); }
.d-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.d-fact {
  font-family: var(--ff-mono); font-size: 10.5px;
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 1px 5px;
  color: var(--ink-2);
}
.d-fact b { color: var(--ink); font-weight: 500; }
.d-id { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); word-break: break-all; margin: 4px 0 0; }

/* --- selection: an emergence candidate, which is not a machine --- */
.d-era--cand { background: transparent; color: var(--lm); border: 1px dashed var(--lm); }
.cand-warn {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
  border-left: 1px dashed var(--rule-2); padding-left: 8px; margin: 0 0 9px;
}
.cand-trigs { margin: 2px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); }
.cand-trigs li { margin-bottom: 5px; line-height: 1.45; }
.cand-target, .cand-src { font-size: 12px; color: var(--ink-2); margin: 0 0 4px; }
.cand-target b { font-family: var(--ff-mono); font-size: 11px; color: var(--ink); font-weight: 500; }
.cand-src code { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }
.pfill--cand { display: block; width: 100%; margin-top: 12px; }

/* the domain a seal declares, beside the predicted badge — outlined like it,
   because it is another thing the seal says and not a thing the corpus knows */
.d-dom {
  display: inline-block; margin-left: 5px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 1px 5px; border-radius: 2px;
  color: var(--ink-2); border: 1px solid var(--rule-2);
}

/* --- selection: the formation chain, both directions --- */
.fl-lab {
  display: inline-block; min-width: 66px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.fl { color: var(--cp); text-decoration: none; border-bottom: 1px solid transparent; }
.fl:hover { border-bottom-color: currentColor; }
.fl--cand { color: var(--lm); font-style: italic; }
.fl-note { font-size: 11px; line-height: 1.45; margin: 7px 0 0; }

/* --- selection: a predicted end on a machine that is still running --- */
.step--term > summary { color: var(--lm); }
.step--term > summary .step__n {
  border: 1px dashed var(--rule-2); border-radius: 2px; padding: 0 4px;
  font-style: normal; color: var(--ink-2);
}
.term-mode {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.45; color: var(--ink-3); margin: 0 0 8px;
}
.term-mode svg { flex: none; align-self: center; }
.term-mode b { color: var(--ink); font-weight: 600; font-family: var(--ff-mono); font-size: 11px; }
.term-succ { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 0 0 8px; }
.term-succ em { color: var(--ink); font-style: normal; }
.term-sub {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin: 8px 0 0;
}
.term-disc {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-2);
  border-left: 1px solid var(--rule-2); padding-left: 8px; margin: 9px 0 0;
}
.term-disc span {
  display: block; font-family: var(--ff-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

.step { border-top: 1px solid var(--rule); margin-top: 10px; }
.step > summary {
  cursor: pointer; list-style: none;
  padding: 7px 0 6px;
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 7px;
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary::before { content: "▸"; color: var(--rule-2); }
.step[open] > summary::before { content: "▾"; }
.step > summary:hover { color: var(--ink); }
.step__n { font-family: var(--ff-mono); color: var(--ink-3); letter-spacing: 0; }
.step__lvl { margin-left: auto; font-family: var(--ff-mono); font-size: 9px; color: var(--rule-2); letter-spacing: 0.05em; }

.t-item, .c-item { padding: 7px 0; border-top: 1px dotted var(--rule); }
.t-item:first-child, .c-item:first-child { border-top: 0; }
.t-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.t-phase {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 2px; border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 4px;
}
.t-phase--latent    { color: var(--t-latent); }
.t-phase--loading   { color: var(--t-loading); }
.t-phase--rupturing { color: var(--t-rupturing); background: #2a1409; }
.t-phase--resolved  { color: var(--t-resolved); opacity: 0.75; }
.t-kind, .c-kind {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2);
}
.t-cp { font-size: 11px; color: var(--ink-3); }
.t-claim { font-family: var(--ff-serif); font-size: 13px; color: var(--ink); margin: 0 0 3px; line-height: 1.45; }
.t-sig { font-size: 11.5px; color: var(--ink-2); margin: 0; line-height: 1.4; }
.t-sig::before { content: "signal — "; color: var(--ink-3); font-family: var(--ff-mono); font-size: 10px; }

.c-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.c-dir { font-family: var(--ff-mono); color: var(--ink-3); font-size: 11px; }
.c-target { font-size: 12.5px; color: var(--ink); }
.c-x {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--cp-x); border: 1px solid var(--cp-x); border-radius: 2px; padding: 0 4px;
}
.c-meta { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

.raw {
  font-family: var(--ff-mono); font-size: 10.5px; line-height: 1.45;
  color: var(--ink-2); background: var(--bg); border: 1px solid var(--rule);
  padding: 8px; margin: 0; border-radius: 2px;
  max-height: 260px; overflow: auto; white-space: pre; tab-size: 2;
}

/* --- topography --- */

.mover {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 5px 0; border-top: 1px dotted var(--rule);
}
.mover:first-child { border-top: 0; }
.mover__var { font-family: var(--ff-mono); font-size: 12px; color: var(--ink); }
.cls {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 1px 5px; color: var(--ink-3);
}
.cls--compounding { color: var(--lm); border-color: var(--lm); }
.cls--saturating  { color: var(--ink-2); border-color: var(--rule-2); }
.cls--linear      { color: var(--ink-2); border-color: var(--rule-2); }
.cls--decaying    { color: var(--ink-3); border-color: var(--rule); }
.intg {
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--bg); background: var(--lm); border-radius: 2px; padding: 1px 5px; font-weight: 700;
}
.mover__conf { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); margin-left: auto; }

.vargroup { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 8px; }
.vargroup__h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.vargroup__var { font-family: var(--ff-mono); font-size: 12px; color: var(--ink); }
.spark { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; margin: 5px 0; }
.spark__lab {
  grid-column: 1 / -1;
  font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spark__svg { width: 100%; height: 26px; display: block; overflow: visible; }
.spark__val {
  font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spark__val.is-off { color: var(--ink-3); opacity: 0.55; }

/* --- briefs --- */

.brief { padding: 9px 0; border-top: 1px dotted var(--rule); }
.brief:first-child { border-top: 0; }
.brief__h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.brief__rank { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }
.brief__q { font-family: var(--ff-serif); font-size: 13.5px; color: var(--ink); margin: 0 0 6px; line-height: 1.45; }
.brief__claims { margin: 5px 0 0; padding-left: 14px; font-size: 11.5px; color: var(--ink-2); }
.brief__claims li { margin: 2px 0; line-height: 1.4; }
.armed { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.armed__lab { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.armed__bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; min-width: 40px; }
.armed__fill { height: 100%; background: var(--t-loading); }
.armed__n { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- layer-unavailable notice --- */

.absent {
  font-family: var(--ff-mono); font-size: 11px; line-height: 1.5;
  color: var(--ink-3);
  border: 1px dashed var(--rule-2); border-radius: 2px;
  padding: 8px 10px; margin: 4px 0;
}
.absent b { color: var(--t-loading); font-weight: 500; }

/* ============================== SVG map ================================= */

/* Deliberately no `fill` here: an id-qualified rule would out-specify every
   class below it and flatten the era ramp. Each text class owns its own fill. */
#map text, #axis text { font-family: var(--ff-sans); }
.halo { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }

/* interaction layers must not steal hover from the life-bars underneath */
#g-tensions, #g-couplings, #g-play, #g-horizons, .g-grid { pointer-events: none; }

/* coupling arrowheads (markers cannot inherit CSS vars via attributes) */
.ah { fill: var(--cp); }
.ah--x { fill: var(--cp-x); }

/* sparkline marks */
.spk-line { fill: none; stroke: var(--lm); stroke-width: 1.2; opacity: 0.85; }
.spk-play { stroke: var(--ink-2); stroke-width: 1; opacity: 0.5; stroke-dasharray: 2 2; }

.lane-band { fill: #ffffff; opacity: 0.014; }
.lane-rule { stroke: var(--rule); stroke-width: 1; }
.lane-lab {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; fill: var(--ink-2);
}
.lane-lab--MM { fill: var(--mm); }
.lane-lab--DM { fill: var(--dm); }
.lane-lab--LM { fill: var(--lm); }
.lane-sub { font-size: 9px; fill: var(--ink-3); letter-spacing: 0.06em; }
.lane-count { font-size: 9px; fill: var(--ink-3); font-family: var(--ff-mono); }

.grid-line { stroke: var(--rule); stroke-width: 1; opacity: 0.55; }
.grid-line--major { opacity: 0.9; }

.now-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
.horizon-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1 5; opacity: 0.28; }
.horizon-lab { font-family: var(--ff-mono); font-size: 8.5px; fill: var(--ink-3); }

.play-line { stroke: var(--lm); stroke-width: 1; opacity: 0.65; }

/* machine groups */
.m { cursor: pointer; }
.m-hit { fill: transparent; }
.m-lead { stroke-width: 1; stroke-dasharray: 1 2; fill: none; }
.m-bar { rx: 1; }
.m-open { stroke-width: 1.3; stroke-dasharray: 3 3; fill: none; }
.m-lab { font-size: 9px; fill: var(--ink-2); }
.m-emb { font-size: 8px; fill: var(--ink-3); font-family: var(--ff-mono); }

.m--MM .m-bar, .m--MM .m-lead { fill: var(--mm); stroke: var(--mm); }
.m--DM .m-bar, .m--DM .m-lead { fill: var(--dm); stroke: var(--dm); }
.m--LM .m-bar, .m--LM .m-lead { fill: var(--lm); stroke: var(--lm); }
.m--MM .m-open { stroke: var(--mm); }
.m--DM .m-open { stroke: var(--dm); }
.m--LM .m-open { stroke: var(--lm); }
.m--MM .m-lab { fill: var(--mm); }
.m--DM .m-lab { fill: var(--dm); }
.m--LM .m-lab { fill: var(--lm); }

/* life state — the scrub year drives these classes */
.m--unborn    { opacity: 0; pointer-events: none; }
.m--gestating { opacity: 0.5; }
.m--gestating .m-bar { opacity: 0.12; }
.m--alive     { opacity: 1; }
.m--dead      { opacity: 0.3; }
.m--dead .m-bar { fill: var(--ink-3); }
.m--dead .m-lab { fill: var(--ink-3); }
.m--dead .m-open, .m--dead .m-lead { stroke: var(--ink-3); }

.m--hot .m-lab { fill: var(--ink); font-weight: 600; }
.m--hot .m-bar { stroke: var(--ink); stroke-width: 0.75; }
.m--sel .m-lab { fill: #fff; font-weight: 600; }
.m--sel .m-bar { stroke: #fff; stroke-width: 1; }
.m-ring { fill: none; stroke: #fff; stroke-width: 1; opacity: 0.5; }

.m-place { fill: none; stroke-width: 1; }
.m--MM .m-place { stroke: var(--mm); }
.m--DM .m-place { stroke: var(--dm); }
.m--LM .m-place { stroke: var(--lm); }

/* constellation highlight (plan §18.2) — a deep link names exactly these
   machines; the rest of the map recedes so the named path reads at a glance.
   .m--constdim sits after the life-state block so it wins that tie, but
   before hot/sel so hovering or selecting a dimmed machine still lifts it;
   .m--consel sits last so the glow always wins on its own properties. */
.m--constdim { opacity: 0.14; }
.m--consel .m-bar {
  stroke: var(--lm); stroke-width: 1.4;
  filter: drop-shadow(0 0 3px var(--lm));
}
.m--consel .m-lab { fill: #fff; font-weight: 700; }
.m--consel.m--constdim { opacity: 1; }

/* tension edges in the map reuse the .tn / .tg classes from the legend */
.tedge { pointer-events: none; }
.tnotch { pointer-events: none; }
/* settled before this year — still drawn, but receding */
.tedge.is-past, .tnotch.is-past, .tg.is-past { opacity: 0.28; }

/* coupling arcs */
.carc { fill: none; stroke: var(--cp); stroke-width: 1.1; opacity: 0.6; pointer-events: none; }
.carc--x { stroke: var(--cp-x); stroke-width: 1.9; opacity: 0.95; }
.cbead { fill: var(--cp-x); pointer-events: none; }
.clab {
  font-family: var(--ff-mono); font-size: 8.5px; fill: var(--cp); pointer-events: none;
}
.clab--x { fill: var(--cp-x); }

/* constellation arcs — the path a prophecy/deep-link walked, drawn between
   consecutive bound nodes regardless of whether a coupling record exists.
   Two-layer glow (wide+faint under, narrow+bright over) rather than an SVG
   blur filter, to stay crisp and cheap at any zoom. */
.cons-glow { fill: none; stroke: var(--lm); stroke-width: 5; opacity: 0.22; pointer-events: none; }
.cons-arc  { fill: none; stroke: var(--lm); stroke-width: 1.5; opacity: 0.95; pointer-events: none; }

/* future region — years past meta.generated; unsurveyed, never cropped
   (plan §18.3). Subtle tint + diagonal hatch, drawn under everything else
   so ledger pins, horizons and life-bars stay fully prominent on top. */
.future-tint { fill: var(--ink); opacity: 0.028; pointer-events: none; }
.future-hatch { fill: url(#future-hatch-pattern); opacity: 0.55; pointer-events: none; }
.future-hatch-line { stroke: var(--rule-2); stroke-width: 1; }
.future-lab {
  font-family: var(--ff-mono); font-size: 9px; font-style: italic;
  letter-spacing: 0.03em; fill: var(--ink-3); pointer-events: none;
}

/* ---------------------------------------------- emergence candidates

   The prophecy zone's only inhabitants: dated claims from the Divergence
   Ledger, drawn so that walking into the future shows arrival and not only
   persistence. They borrow the map's existing grammar for "predicted" and
   add nothing to it — dashed line, hollow glyph, the ledger pin's own
   diamond — so that at a glance they can never be read as surveyed machines.
   A brief-derived candidate is dotted rather than dashed: it was inferred
   from a window block, not sealed, and the line says so.                    */

.cand { cursor: pointer; }
.cand .m-hit { fill: transparent; }
.cand-tail {
  fill: none; stroke: var(--lm); stroke-width: 1.2;
  stroke-dasharray: 4 3; opacity: 0.55;
}
.cand-pin { fill: none; stroke: var(--lm); stroke-width: 1.2; }
.cand-lab {
  font-size: 9px; fill: var(--lm); font-style: italic; opacity: 0.85;
}

.cand--brief .cand-tail { stroke-dasharray: 1 3; opacity: 0.45; }
.cand--brief .cand-pin { stroke-dasharray: 1.5 1.5; }
.cand--brief .cand-lab { opacity: 0.7; }

/* ahead of the walk — absent, exactly as an unborn machine is absent */
.cand--ahead { opacity: 0; pointer-events: none; }
.cand--here  { opacity: 1; }
/* the walk has just reached it: the one moment it earns emphasis */
.cand--fresh .cand-pin { fill: var(--lm); }
.cand--fresh .cand-lab { fill: #fff; opacity: 1; font-style: normal; }

/* A sealed window: the claim is bounded, so the mark is too. Same dash as the
   open tail — the provenance has not changed, only the extent — closed with a
   bracket at the year the seal says the window shuts. */
.cand-win {
  fill: none; stroke: var(--lm); stroke-width: 1.2;
  stroke-dasharray: 4 3; opacity: 0.55;
}
.cand-shut { stroke: var(--lm); stroke-width: 1.1; opacity: 0.5; }
.cand--brief .cand-win { stroke-dasharray: 1 3; opacity: 0.45; }

.cand--hot .cand-lab { fill: var(--ink); opacity: 1; }
.cand--hot .cand-tail, .cand--hot .cand-win { opacity: 0.85; }
.cand--sel .cand-pin { fill: var(--lm); stroke: #fff; }
.cand--sel .cand-lab { fill: #fff; opacity: 1; font-weight: 600; }
.cand--sel .cand-tail, .cand--sel .cand-win { opacity: 0.9; }
.cand--sel .cand-shut { opacity: 0.9; }

/* the walk is past the closing year the seal named: the claim's own window has
   run out. It recedes; it does not change kind, and nothing here says the
   claim failed — only that the years it gave itself are gone. */
.cand--shut .cand-win { opacity: 0.28; }
.cand--shut .cand-pin { opacity: 0.5; }
.cand--shut .cand-lab { opacity: 0.45; }
.cand--shut.cand--sel .cand-win,
.cand--shut.cand--sel .cand-lab,
.cand--shut.cand--hot .cand-lab { opacity: 0.95; }

/* candidates inside a constellation or a formation focus */
.cand.m--consel .cand-pin { fill: var(--lm); stroke: #fff; }
.cand.m--consel .cand-lab { fill: #fff; opacity: 1; font-weight: 700; }
.cand.m--consel .cand-win, .cand.m--consel .cand-tail { opacity: 0.95; }
.cand.m--consel.m--constdim { opacity: 1; }

.lane-lab--PZ { fill: var(--ink-3); }

/* domain sub-lanes inside the prophecy zone — the same device one level down,
   set smaller and indented so the hierarchy is the thing you read first */
.dom-lab {
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  fill: var(--ink-3); font-weight: 600;
}
.dom-count { font-family: var(--ff-mono); font-size: 8px; fill: var(--rule-2); }
.sub-rule { stroke: var(--rule); stroke-width: 1; opacity: 0.5; }

/* ------------------------------------------------- formation chains

   `formed_on`. Dashed, because everything at the head of one of these is a
   prediction, and dashed is what this map means by predicted. Faint at rest:
   at 2526 every candidate has arrived and their arcs together would be soup,
   so the resting state is a texture and the selected state is the reading. */

.farc {
  fill: none; stroke: var(--lm); stroke-width: 1;
  stroke-dasharray: 3 4; opacity: 0.3; pointer-events: none;
}
.farc--lit { opacity: 0.95; stroke-width: 1.5; }
.farc--dim { opacity: 0.07; }
.ah--f { fill: var(--lm); opacity: 0.55; }

/* ------------------------------------------------- predicted ends

   A living machine's tail already says "no declared end" in a 3/3 dash. A
   sealed end is a different statement and gets a different line: a bracket
   where the window opens, a sparser dash across it, and a glyph for the mode.
   Nothing here dims the bar or greys the label — that styling belongs to the
   record, and lending it to a prediction would be the map lying in its own
   voice.                                                                    */

/* Base stroke, unlike .m-open: a band with no colour but a visible glyph at the
   end of it would read as a rendering fault. An era-less card still gets a
   drawable end. */
.m-term {
  fill: none; stroke: var(--ink-2); stroke-width: 1.1;
  stroke-dasharray: 1 4; opacity: 0.75;
}
.m-term-open { stroke: var(--ink-2); stroke-width: 1; opacity: 0.6; }
.m--MM .m-term, .m--MM .m-term-open { stroke: var(--mm); }
.m--DM .m-term, .m--DM .m-term-open { stroke: var(--dm); }
.m--LM .m-term, .m--LM .m-term-open { stroke: var(--lm); }

.tmark { fill: none; stroke: var(--ink-2); stroke-width: 1.15; stroke-linejoin: round; }
.m--MM .tmark { stroke: var(--mm); }
.m--DM .tmark { stroke: var(--dm); }
.m--LM .tmark { stroke: var(--lm); }

/* the playhead is inside the claimed window — the claim brightens, the machine
   does not change state */
.m--closing .m-term { opacity: 1; }
.m--closing .tmark { stroke-width: 1.5; }
.m--closing .m-term-open { opacity: 0.95; }

/* axis */
.ax-rule { stroke: var(--rule-2); stroke-width: 1; }
.ax-tick { stroke: var(--rule-2); stroke-width: 1; }
.ax-tick--major { stroke: var(--ink-3); }
.ax-lab { font-family: var(--ff-mono); font-size: 9.5px; fill: var(--ink-3); }
.ax-lab--major { fill: var(--ink-2); }
.ax-seg { stroke: var(--rule-2); stroke-width: 1; opacity: 0.7; }
.ax-now { font-family: var(--ff-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: 0.08em; }

.ax-play { fill: var(--lm); }
.ax-playlab {
  font-family: var(--ff-mono); font-size: 10.5px; fill: var(--bg); font-weight: 700;
}
.ax-playbox { fill: var(--lm); rx: 1.5; }

.lpin { cursor: pointer; }
.lpin .pin-hit { fill: transparent; }
.lpin--published .pin-glyph { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.lpin--vaulted   .pin-glyph { fill: none;      stroke: var(--ink); stroke-width: 1.1; }
.lpin--vaulted   .pin-seal  { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1.5 1.5; }
.lpin:hover .pin-glyph, .lpin.is-open .pin-glyph { stroke: var(--lm); fill: var(--lm); }
.lpin--vaulted:hover .pin-glyph, .lpin--vaulted.is-open .pin-glyph { fill: none; stroke: var(--lm); }
.lpin-lab { font-family: var(--ff-mono); font-size: 8.5px; fill: var(--ink-3); }
.lpin:hover .lpin-lab, .lpin.is-open .lpin-lab { fill: var(--lm); }

.map-empty { font-family: var(--ff-mono); font-size: 12px; fill: var(--ink-3); }

/* ======================= the ask cartouche (plan §18.1b) =================

   An old chart carries its apparatus in a cartouche: a ruled box in the
   margin holding the title, the scale, the dedication — never painted over
   the survey itself. This panel is that box. It is a stage column, not a
   scrim, because the whole point of §18.1 is that the answer lights up the
   map it came from; an overlay would cover the constellation it just drew.

   No new hue: cyan (--lm) marks what is live, amber (--t-loading) marks what
   is unavailable — the same two meanings they already carry everywhere else.
   ========================================================================= */

.tgl--ask.is-on { color: var(--bg); background: var(--lm); border-color: var(--lm); }

.ask {
  border-right: 1px solid var(--rule);
  background: var(--bg-2);
  overflow-y: auto;
  min-width: 0;
  padding: 12px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ask[hidden] { display: none; }

/* the cartouche rule: doubled hairline, the one place on the page it appears */
.ask__head {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 3px double var(--rule-2);
  padding-bottom: 6px;
}
.ask__title {
  font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; margin: 0; flex: 1;
}
.ask__close {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.ask__close:hover { color: var(--lm); }

.ask__sub {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin: 0;
  max-width: 42ch;
}

/* --- mode switch: two segments, sharing one border --- */
.ask__seg { display: flex; margin-top: 2px; }
.seg {
  flex: 1;
  font-family: var(--ff-sans); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--rule-2);
  padding: 5px 0; cursor: pointer;
}
.seg + .seg { border-left: 0; }
.seg:first-child { border-radius: 2px 0 0 2px; }
.seg:last-child  { border-radius: 0 2px 2px 0; }
.seg:hover { color: var(--ink); }
.seg.is-on { color: var(--bg); background: var(--ink-2); border-color: var(--ink-2); }

.ask__row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ask__row[hidden] { display: none; }
.ask__lab {
  font-family: var(--ff-sans); font-size: 9.5px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3);
}
.ask__lab--block { display: block; margin-top: 2px; }
.ask__select {
  font-family: var(--ff-mono); font-size: 11.5px;
  color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 3px 6px; max-width: 100%;
}
.ask__note {
  font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3);
  flex-basis: 100%;
}
.ask__note b { color: var(--lm); font-weight: 500; }

/* --- prefill chips: only there when a machine is selected --- */
.ask__prefill { display: flex; flex-wrap: wrap; gap: 5px; }
.ask__prefill[hidden] { display: none; }
.pfill {
  font-family: var(--ff-sans); font-size: 10.5px;
  color: var(--lm); background: transparent;
  border: 1px dotted var(--dm); border-radius: 2px;
  padding: 3px 7px; cursor: pointer; text-align: left;
}
.pfill:hover { background: #0c2129; border-style: solid; }
.pfill__for {
  display: block; font-family: var(--ff-mono); font-size: 9px;
  color: var(--ink-3); letter-spacing: 0.02em;
}

/* --- the question: entered data, so mono --- */
.ask__in {
  font-family: var(--ff-mono); font-size: 12.5px; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 7px 8px; width: 100%; resize: vertical; min-height: 62px;
}
.ask__in::placeholder { color: var(--ink-3); opacity: 0.75; }
.ask__in:focus { outline: none; border-color: var(--dm); }

.ask__go { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ask__send {
  font-family: var(--ff-sans); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bg); background: var(--lm);
  border: 1px solid var(--lm); border-radius: 2px;
  padding: 5px 12px; cursor: pointer;
}
.ask__send:hover { background: #fff; border-color: #fff; }
.ask__send[disabled] {
  color: var(--ink-3); background: transparent; border-color: var(--rule-2); cursor: default;
}
.ask__ctx {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.02em;
}

.ask__status { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); margin: 0; }
.ask__status:empty { display: none; }
.ask__status.is-work::after {
  content: " ·"; animation: askpulse 1s steps(1) infinite; color: var(--lm);
}
@keyframes askpulse { 50% { opacity: 0.15; } }

.ask__out:empty { display: none; }

/* --- level 0: the pronouncement --- */
.ans__badges { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ans__head {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bg); background: var(--dm); border-radius: 2px; padding: 1px 6px; font-weight: 700;
}
.ans__trace {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3); margin-left: auto;
}
.ans__flag {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-loading); border: 1px solid #5a4622; border-radius: 2px; padding: 0 5px;
}

.ans__narr { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.ans__narrname {
  font-family: var(--ff-serif); font-size: 12px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--lm);
}
.ans__narrwin { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.ans__text { max-width: 46ch; }
.ans__text p {
  font-family: var(--ff-serif); font-size: 14.5px; line-height: 1.62;
  color: var(--ink); margin: 0 0 0.7em;
}
.ans__text p:last-child { margin-bottom: 0; }
/* a story is a passage, not a reading — marginal rule and a longer line */
.ans--story .ans__text { border-left: 1px solid var(--rule-2); padding-left: 12px; }
.ans--story .ans__text p { font-size: 15.5px; line-height: 1.7; }
.ans--landed .ans__text { border-left: 1px solid var(--lm); padding-left: 12px; }

.ans__q {
  font-family: var(--ff-mono); font-size: 10.5px; line-height: 1.45;
  color: var(--ink-3); margin: 0 0 8px; padding-left: 9px;
  border-left: 1px solid var(--rule);
}

/* --- level 1: the path --- */
.ans__grammar {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); margin: 2px 0 0;
}
.ans__grammar b { color: var(--lm); font-weight: 500; }
.ans__grammar em { color: var(--ink-3); font-style: normal; }

/* The traverse: a surveyor occupies stations in order, and the order is the
   information — so the rail is drawn like the axis rail below the map, and
   the stations are numbered because the number is a fact about the path. */
.traverse {
  list-style: none; margin: 9px 0 0; padding: 2px 0 2px 24px; position: relative;
}
.traverse::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 1px; background: var(--rule-2);
}
.tv {
  position: relative; padding: 4px 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
}
.tv__n {
  position: absolute; left: -24px; top: 4px;
  width: 17px; height: 14px; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 9px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--bg-2);
  border: 1px solid var(--rule-2);
}
.tv__name { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.tv__meta {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tv:hover .tv__name { color: var(--ink); }
.tv.is-past .tv__n { color: var(--lm); border-color: var(--dm); }
.tv.is-past .tv__name { color: var(--ink); }
.tv.is-now .tv__n { color: var(--bg); background: var(--lm); border-color: var(--lm); }
.tv.is-now .tv__name { color: #fff; font-weight: 600; }
.tv--absent { cursor: default; }
.tv--absent .tv__name { color: var(--ink-3); font-style: italic; }

.replay { margin-top: 9px; border-top: 1px dotted var(--rule); padding-top: 8px; }
.replay__ctl { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rbtn {
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 3px 8px; cursor: pointer;
}
.rbtn:hover { color: var(--lm); border-color: var(--dm); }
.rbtn--step { font-family: var(--ff-mono); font-size: 12px; line-height: 1; padding: 3px 7px; letter-spacing: 0; }
.rbtn[disabled] { color: var(--rule-2); border-color: var(--rule); cursor: default; }
.rbtn[disabled]:hover { color: var(--rule-2); border-color: var(--rule); }
.replay__count {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3);
  margin-left: auto; font-variant-numeric: tabular-nums;
}
.replay__cap {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-2); margin: 7px 0 0; min-height: 17px; line-height: 1.35;
}
.replay__cap b { color: #fff; font-weight: 600; }
.replay__cap .rc-win { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.replay__cap--done { color: var(--lm); }

.ans__links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ans__links .linkbtn { font-size: 10px; }
.ans__open {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--ink-3); text-decoration: none; align-self: center;
  border-bottom: 1px dotted var(--rule-2);
}
.ans__open:hover { color: var(--lm); border-bottom-color: var(--lm); }

/* --- level 2: the material --- */
.cit { padding: 6px 0; border-top: 1px dotted var(--rule); }
.cit:first-child { border-top: 0; }
.cit__id { font-size: 12px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--ff-sans); text-align: left; border-bottom: 1px dotted var(--dm); }
.cit__id:hover { color: var(--lm); }
.cit__name { font-size: 12px; color: var(--ink-2); }
.cit__claim { font-family: var(--ff-serif); font-size: 12.5px; color: var(--ink-2); margin: 2px 0 0; line-height: 1.45; }
.cit--un .cit__name { color: var(--ink-3); text-decoration: line-through; font-size: 12px; }
.cit--un .cit__claim { color: var(--ink-3); }
.cit__why {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--t-loading);
  letter-spacing: 0.02em; margin: 2px 0 0;
}
.cit__group {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin: 10px 0 2px;
}
.cit__group:first-child { margin-top: 2px; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 980px) {
  body { height: auto; overflow: auto; }
  .stage,
  .stage.has-ask,
  .stage.no-panel.has-ask { grid-template-columns: minmax(0, 1fr); }
  .ask {
    border-right: 0; border-bottom: 1px solid var(--rule);
    overflow: visible; max-height: none;
  }
  .mapwrap { border-right: 0; }
  .mapscroll { max-height: 60vh; }
  .panel { border-top: 1px solid var(--rule); max-height: none; overflow: visible; }
  .readout { gap: 14px; }
  .readout__layers { margin-left: 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 58px; }
  .chrome__corpus { display: none; }
  .readout__stats { gap: 12px; }
}

/* A phone in portrait. Everything still fits, nothing is hidden — the map
   simply stops pretending it can show 3,000 years in 390 pixels and lets the
   frame slide along the timeline instead. */
@media (max-width: 430px) {
  .chrome { padding: 8px 10px; gap: 7px; row-gap: 6px; }
  .chrome__title { font-size: 15px; }
  .chrome__controls { gap: 5px; }
  .tgl { padding: 3px 7px; letter-spacing: 0.05em; }
  .linkbtn { padding: 3px 7px; }
  .readout { padding: 7px 10px; gap: 13px; }
  .readout__yearin { font-size: 22px; }
  .readout__stats { gap: 10px; }
  .readout__layers { margin-left: 0; }
  .mapscroll { max-height: 52vh; }
  .scrub { padding: 7px 12px 9px; }
  .legend__sum { padding: 8px 10px; }
  .legend__body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px 10px 14px; }
  .ledger-note { padding: 9px 12px; }
  .ask { padding: 10px 10px 18px; }
  .pane__h { padding: 9px 10px; }
  .pane__body { padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* the frame follows the walk by assignment, never by animated scroll */
  .mapscroll, .axiswrap { scroll-behavior: auto !important; }
}