/* ==========================================================================
   COLLIDER — the collision chamber.

   A decision instrument, not a dashboard. Every colour is a semantic role:

     --api      API trajectory                 (ultramarine)
     --ledger   Ledger trajectory              (signal orange)
     --notif    Notifications trajectory       (graphite: not a party)
     --hit      collision · AGENT_DRIFT · MERGE_BLOCKED     (crimson)
     --hold     UNKNOWN · SPEC_GAP · DECISION_REQUIRED       (chartreuse)
                "nobody decided this yet" — the third answer
     --ok       OBSERVED · verified · MERGE_ALLOWED           (instrument green)
     --ink      canon · decision memory · chrome

   Motion grammar: every movement explains a cause —
   trajectories enter → collide → classify → a decision traces into memory →
   a future change hits memory → verdict → exact restore.
   prefers-reduced-motion shows every end state immediately.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-wdth.woff2") format("woff2-variations"),
       url("./fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Plex Mono"; src: url("./fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("./fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("./fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("./fonts/plex-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #e5e7df;
  --plate: #f1f2ec;
  --plate-2: #f8f8f4;
  --ink: #0c0d0a;
  --ink-2: #2d2f29;
  --muted: #5f6259;
  --faint: #979a90;
  --rule: rgba(12, 13, 10, .13);
  --rule-2: rgba(12, 13, 10, .28);

  --api: #2a36f5;
  --api-soft: #dcdefd;
  --ledger: #ff6a13;
  --ledger-soft: #ffe1cf;
  --notif: #8b8e84;

  --hit: #e1162e;
  --hit-soft: #f9d4d7;
  --hold: #d4f23a;
  --hold-deep: #a9c50e;
  --ok: #06845a;
  --ok-soft: #cfeadc;

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* prose, at normal width */
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* arrivals: fast, settled */
  --ease-io: cubic-bezier(.76, 0, .24, 1);      /* state changes: deliberate */
  --ease-snap: cubic-bezier(.2, .9, .05, 1);    /* verdicts: decisive */

  --bar: 72px;
  --top: 64px;
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ink);
  background-color: var(--paper);
  font: 400 15px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; }
code, pre { font-family: var(--mono); }
.hidden { display: none !important; }
.boot-error { padding: 40px; font-family: var(--mono); }

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

.kicker {
  display: inline-block;
  font: 600 13px/1.3 var(--text);
  color: var(--muted);
}

.kicker-danger { color: var(--hit); }
.kicker-unknown { color: var(--ink); }
.kicker-ok { color: var(--ok); }

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

/* ==========================================================================
   Shell
   ========================================================================== */

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--top) auto minmax(0, 1fr) var(--bar);
  grid-template-areas: "top" "progress" "main" "bar";
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px 0 18px;
  background: var(--plate);
  border-bottom: 2px solid var(--ink);
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  overflow: visible;
}

.brand-mark path { fill: none; stroke-width: 4; stroke-linecap: square; }
.brand-mark .bm-a { stroke: var(--api); }
.brand-mark .bm-b { stroke: var(--ledger); }
.brand-mark .bm-c { stroke: var(--ink); stroke-width: 3; }
.brand-mark circle { fill: var(--hold); stroke: var(--ink); stroke-width: 2.5; }

.brand-word {
  font: 900 26px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: -.02em;
}

.brand small {
  font: 400 13px/1.25 var(--text);
  color: var(--muted);
  white-space: nowrap;
}

.mode-switch {
  display: flex;
  margin-left: auto;
  border: 2px solid var(--ink);
}

.mode-switch button {
  border: 0;
  background: transparent;
  padding: 7px 12px;
  font: 600 13px/1 var(--text);
  cursor: pointer;
}

.mode-switch button[aria-checked="true"] {
  background: var(--ink);
  color: var(--plate);
}

.mode-switch button:disabled { cursor: default; }

/* provenance: what produced what you are looking at */
.truth-badge {
  max-width: 470px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px 10px;
  font: 500 10.5px/1.3 var(--mono);
  color: var(--muted);
}

.truth-badge b { flex-basis: 100%; font-weight: 700; color: var(--ink); }

.proof-toggle {
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--plate-2);
  font: 700 13px/1 var(--text);
  cursor: pointer;
}

.proof-toggle.open {
  background: var(--ink);
  color: var(--plate);
}

.mobile-progress { grid-area: progress; display: none; }

/* ==========================================================================
   Workspace: beamline rail + chamber stage + audit drawer
   ========================================================================== */

.workspace {
  grid-area: main;
  position: relative;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  min-height: 0;
  overflow: clip;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 16px;
  background: var(--plate);
  border-right: 2px solid var(--ink);
  min-height: 0;
  overflow: auto;
}

.rail ol {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* the beamline itself */
.rail ol::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--rule-2);
}

.rail li {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 9px 16px 9px 18px;
  color: var(--faint);
  transition: background .3s var(--ease-io), color .3s var(--ease-io);
}

/* station */
.rail li i {
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  background: var(--plate);
  font: 700 10px/1 var(--mono);
  font-style: normal;
  transition: background .3s var(--ease-io), color .3s, border-color .3s;
}

.rail li b {
  font: 800 13px/1.1 var(--display);
  font-stretch: 110%;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rail li span {
  min-height: 13px;
  font: 400 12px/1.3 var(--text);
}

.rail li[data-status="done"] { color: var(--ink); }
.rail li[data-status="done"] i { background: var(--ink); color: var(--plate); border-color: var(--ink); }
.rail li[data-status="done"] span { color: var(--ok); }
.rail li[data-status="waiting"] i,
.rail li[data-status="abstained"] i { background: var(--hold); color: var(--ink); border-color: var(--ink); }
.rail li[data-status="waiting"],
.rail li[data-status="abstained"] { color: var(--ink); }
.rail li[data-status="running"],
.rail li[data-status="restoring"] { color: var(--ink); }
.rail li[data-status="running"] i,
.rail li[data-status="restoring"] i { background: var(--plate-2); border-color: var(--ink); }
.rail li[data-status="violation"] { color: var(--hit); }
.rail li[data-status="violation"] i { background: var(--hit); color: #fff; border-color: var(--hit); }
.rail li[data-status="failed"] { color: var(--hit); }
.rail li[data-status="skipped"] { color: var(--faint); text-decoration: line-through; }

.rail li.current {
  background: var(--plate-2);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--ink);
}

.rail li.current i { border-color: var(--ink); }

/* separate Bob evidence: a two-line audit summary, details in Proof */
.rail-replay {
  margin: auto 18px 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
  display: grid;
  gap: 2px;
  font: 600 11px/1.4 var(--mono);
}

.rail-replay b {
  margin-bottom: 2px;
  font: 600 12px/1.2 var(--text);
  color: var(--muted);
}

.rail-replay em { font-style: normal; color: var(--faint); margin-right: 6px; }
.rail-replay .rr-fail { color: var(--hit); }
.rail-replay .rr-pass { color: var(--ok); }

/* ---- stage: the chamber ------------------------------------------------ */

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 20px 30px 18px;
  overflow: auto;
  overflow-x: clip;
}

.screen {
  display: none;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.screen.active {
  display: flex;
  animation: chamber-in .5s var(--ease-out) both;
}

@keyframes chamber-in {
  from { clip-path: inset(0 100% 0 0); opacity: .4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.screen-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.screen-head h1 {
  margin: 0;
  flex: none;
  font: 850 22px/1 var(--display);
  font-stretch: 112%;
  letter-spacing: -.01em;
}

.screen-head p {
  margin: 0;
  min-width: 0;
  font: 400 15px/1.3 var(--text);
  color: var(--muted);
}

.screen-head p:empty { display: none; }

/* ==========================================================================
   01 DETECT — local green, semantic collision
   ========================================================================== */

.detect {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 26px;
}

.ledger-of-green {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.log-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  animation: rise .6s var(--ease-out) both;
}

.log-row:nth-child(2) { animation-delay: .08s; }
.log-row.log-hit { animation-delay: 1.15s; }

.log-row strong {
  min-width: 2.2ch;
  font: 900 92px/.9 var(--display);
  font-stretch: 125%;
  letter-spacing: -.04em;
}

.log-row span {
  padding-bottom: 10px;
  font: 500 16px/1.2 var(--text);
}

.log-ok strong { color: var(--ok); }
.log-hit strong { color: var(--hit); }
.log-hit span { color: var(--hit); }

.log-but {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  animation: rise .5s var(--ease-out) .95s both;
}

.log-but::before,
.log-but::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}

.log-but span {
  font: 900 24px/1 var(--display);
  font-stretch: 62%;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.chamber {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 2px solid var(--ink);
  background:
    linear-gradient(var(--plate-2), var(--plate-2)) padding-box;
}

.chamber-svg {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 18px 20px 6px;
  overflow: visible;
}

.chamber-v { display: none; }

.wall { stroke: var(--ink); stroke-width: 4; }
.wall-label {
  font: 600 12px var(--mono);
  fill: var(--ink);
  text-anchor: end;
}
.wall-label-v { text-anchor: start; }

.lane-label {
  font: 850 17px var(--display);
  font-stretch: 112%;
  letter-spacing: .02em;
}
.lane-label.api { fill: var(--api); }
.lane-label.ledger { fill: var(--ledger); }
.lane-label.notif { fill: var(--notif); font-size: 13px; }
.lane-local { font: 600 11px var(--mono); fill: var(--ok); }

.traj {
  fill: none;
  stroke-width: 6;
  stroke-linecap: square;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  animation: draw 1.15s var(--ease-io) both;
}
.traj-api { stroke: var(--api); animation-delay: .1s; }
.traj-ledger { stroke: var(--ledger); animation-delay: .24s; }
.traj-notif {
  stroke: var(--notif);
  stroke-width: 3;
  stroke-dasharray: 1400;
  animation-delay: .38s;
}

@keyframes draw {
  from { stroke-dashoffset: 1400; }
  to   { stroke-dashoffset: 0; }
}

.hit { transform-box: fill-box; transform-origin: center; }
.hit-halo { fill: var(--hit-soft); stroke: var(--hit); stroke-width: 1.5; stroke-dasharray: 3 4; }
.hit-core { fill: var(--hit); stroke: var(--ink); stroke-width: 2; }
.hit-x { stroke: #fff; stroke-width: 3; stroke-linecap: square; }
.hit-label {
  font: 700 13px var(--mono);
  fill: var(--ink);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--plate-2);
  stroke-width: 5px;
}
.hit-sub { font: 700 12px var(--mono); fill: var(--hit); text-anchor: middle; }
.hit-lead { stroke: var(--hit); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.hit-val {
  font: 700 14px var(--mono);
  text-anchor: end;
  paint-order: stroke;
  stroke: var(--plate-2);
  stroke-width: 5px;
}
.hit-val.api { fill: var(--api); }
.hit-val.ledger { fill: var(--ledger); }
.hit-left { text-anchor: start; }
.notif-note { font: 600 11px var(--mono); fill: var(--notif); text-anchor: middle; }

.hit-a { animation: impact .7s var(--ease-snap) .98s both; }
.hit-b { animation: impact .7s var(--ease-snap) 1.12s both; }
.hit-a .hit-halo, .hit-b .hit-halo { animation: shock 1.1s var(--ease-out) 1.02s both; transform-box: fill-box; transform-origin: center; }

@keyframes impact {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shock {
  from { transform: scale(.4); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.collision-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--rule-2);
  font: 500 12.5px/1.35 var(--mono);
  color: var(--muted);
}

.collision-line b { font-weight: 700; color: var(--hit); }

.unavailable {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 2px solid var(--hit);
  background: var(--hit-soft);
}

.unavailable button {
  justify-self: start;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: var(--plate-2);
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   02 DECIDE — the boundary of what is knowable
   ========================================================================== */

.decide {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .85fr);
  gap: 24px;
}

.judgment {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.readings {
  margin: 0;
  border-top: 2px solid var(--ink);
}

.reading {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0 9px 14px;
  border-bottom: 1px solid var(--rule-2);
  position: relative;
  animation: rise .5s var(--ease-out) both;
}

.reading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 5px;
  background: var(--ink);
}

.reading-api::before { background: var(--api); }
.reading-ledger::before { background: var(--ledger); }
.reading-ledger { animation-delay: .08s; }
.reading-source { animation-delay: .16s; border-bottom: 2px solid var(--ink); }

.reading dt {
  font: 850 16px/1 var(--display);
  font-stretch: 112%;
  letter-spacing: .04em;
}

.reading dd {
  margin: 0;
  font: 600 32px/1.05 var(--mono);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.reading-api dd { color: var(--api); }
.reading-ledger dd { color: var(--ledger); }

.reading small {
  max-width: 34ch;
  font: 400 13px/1.35 var(--text);
  color: var(--muted);
  text-align: right;
}

.silent {
  display: inline-block;
  white-space: nowrap;
  padding: 0 12px;
  border: 2px dashed var(--ink);
  font: 900 28px/1.25 var(--display);
  font-stretch: 125%;
  letter-spacing: .08em;
}

.reading-source mark {
  background: var(--hold);
  color: var(--ink);
  padding: 0 3px;
}

.converge {
  width: 100%;
  height: 40px;
  display: block;
  flex: none;
}

.converge path {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 700;
  animation: draw .7s var(--ease-io) .3s both;
}

.cv-api { stroke: var(--api); }
.cv-ledger { stroke: var(--ledger); }

/* The hero: an authoritative hold state, not an error. */
.unknown-plate {
  position: relative;
  flex: 1;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 24px 16px;
  background: var(--hold);
  border: 3px solid var(--ink);
  overflow: hidden;
  container-type: inline-size;
  animation: mask-wipe .8s var(--ease-io) .55s both;
}

@keyframes mask-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.up-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1.3 var(--mono);
}

.up-kicker b {
  padding: 2px 7px;
  background: var(--ink);
  color: var(--hold);
  font-size: 12px;
}

.up-foot { font: 600 18px/1.3 var(--text); }

.up-word {
  position: relative;
  z-index: 1;
  font: 900 13.6cqw/.8 var(--display);
  font-stretch: 125%;
  letter-spacing: -.045em;
}



.decision {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 18px;
  background: var(--plate-2);
  border: 3px solid var(--ink);
  min-height: 0;
  animation: rise .55s var(--ease-out) .9s both;
}

.kicker-hold {
  font: 800 14px/1.2 var(--display);
  font-stretch: 105%;
}

.question {
  margin: 0;
  font: 850 30px/1.02 var(--display);
  font-stretch: 100%;
  letter-spacing: -.015em;
}

.question-full {
  font: 400 13.5px/1.45 var(--text);
  color: var(--muted);
}

.decision-options {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.decision-note {
  margin: auto 0 0;
  font: 400 13.5px/1.45 var(--text);
  color: var(--muted);
}

.decision-option {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 18px 15px;
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.decision-option strong {
  font: 900 27px/1 var(--display);
  font-stretch: 112%;
  letter-spacing: -.01em;
}

.decision-option span {
  font: 400 14px/1.35 var(--text);
}

.decision-option.commit { background: var(--ink); color: var(--plate-2); }
.decision-option.keep-unknown { background: var(--hold); color: var(--ink); }

.decision-option:not(:disabled):hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}

.decision-option.commit:not(:disabled):hover { box-shadow: 6px 6px 0 var(--rule-2); }

.decision-option:disabled { cursor: default; opacity: .5; }

.decision-error {
  min-height: 0;
  font: 700 12px/1.4 var(--mono);
  color: var(--hit);
}

.decision-error:empty { display: none; }

.secondary-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  animation: rise .5s var(--ease-out) 1.1s both;
}

.drift-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-2);
  font: 500 12.5px/1.35 var(--mono);
  min-width: 0;
}

.strip-concept { font-weight: 700; }
.drift-src { flex-basis: 100%; font: 400 13px/1.35 var(--text); color: var(--muted); }

.tag {
  display: inline-block;
  padding: 1px 6px;
  font: 700 11px/1.3 var(--mono);
}

.tag-drift { background: var(--hit); color: #fff; }
.tag-inferred { border: 1.5px dashed var(--ink); background: transparent; }
.tag-gap { background: var(--ink); color: var(--hold); }
.tag-unknown { background: var(--hold); color: var(--ink); }

/* ---- KEEP UNKNOWN ------------------------------------------------------ */

.abstain {
  flex: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 0;
}

.abstain-grid {
  display: grid;
  grid-template-columns: minmax(240px, .6fr) minmax(0, 1fr);
  gap: 16px;
}

.verdict-block {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px;
  border: 3px solid var(--ink);
  background: var(--plate-2);
}

.verdict-block span { font: 600 13px/1 var(--text); color: var(--muted); }
.verdict-block strong { font: 900 30px/1 var(--display); font-stretch: 112%; }
.verdict-block small { font: 400 14px/1.35 var(--text); }

/* ==========================================================================
   03–06 COMPILE — a human answer becomes durable system state
   ========================================================================== */

.compile {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 26px;
}

.spine {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.spine-origin {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--plate-2);
}

.spine-origin i {
  font: 600 13px/1 var(--text);
  font-style: normal;
  color: var(--hold);
}

.spine-origin b { font: 700 17px/1.2 var(--mono); }

.checklist {
  position: relative;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 4px 0 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

/* the canonical trace: rail + fill that grows with each compiled step */
.checklist::before,
.checklist::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  width: 4px;
  background: var(--rule-2);
  bottom: 14px;
}

.checklist::after {
  background: var(--ink);
  bottom: auto;
  height: 0;
  transition: height .26s var(--ease-io);
}

.checklist[data-shown="1"]::after { height: calc((100% - 14px) * 1 / 7); }
.checklist[data-shown="2"]::after { height: calc((100% - 14px) * 2 / 7); }
.checklist[data-shown="3"]::after { height: calc((100% - 14px) * 3 / 7); }
.checklist[data-shown="4"]::after { height: calc((100% - 14px) * 4 / 7); }
.checklist[data-shown="5"]::after { height: calc((100% - 14px) * 5 / 7); }
.checklist[data-shown="6"]::after { height: calc((100% - 14px) * 6 / 7); }
.checklist[data-shown="7"]::after { height: calc(100% - 14px); }

.checklist li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 6px 0;
  color: var(--faint);
}

/* station: diamond on the trace */
.checklist li i {
  position: absolute;
  left: -30px;
  top: 9px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--rule-2);
  background: var(--paper);
  transform: rotate(45deg);
  transition: background .2s, border-color .2s, transform .3s var(--ease-snap);
}

.checklist li b {
  font: 700 17px/1.15 var(--display);
  font-stretch: 100%;
}

.checklist li small {
  min-height: 15px;
  font: 500 12px/1.35 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.checklist li[data-status="done"] { color: var(--ink); }
.checklist li[data-status="done"] i { background: var(--ink); border-color: var(--ink); transform: rotate(45deg) scale(1.1); }
.checklist li[data-status="running"] { color: var(--ink); }
.checklist li[data-status="running"] i { background: var(--hold); border-color: var(--ink); }
.checklist li[data-status="failed"] { color: var(--hit); }
.checklist li[data-status="failed"] i { background: var(--hit); border-color: var(--hit); }

/* the first three stations are canon; the verification step is green */
.checklist li[data-step="7"][data-status="done"] b { color: var(--ok); }
.checklist li[data-step="7"][data-status="done"] i { background: var(--ok); border-color: var(--ok); }

/* The right column is the outcome: the count collapses, the canon lands
   where it belongs, and the decision is sealed. The number gets the room. */
.result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
}

.collapse {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.result-number {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  font: 900 clamp(96px, 34cqw, 230px)/.8 var(--display);
  font-stretch: 125%;
  letter-spacing: -.05em;
}

.result-number i {
  font: 400 .3em/1 var(--display);
  font-style: normal;
  color: var(--muted);
  align-self: center;
}

.rn-from { color: var(--hit); transition: transform .6s var(--ease-io), opacity .6s, color .6s; transform-origin: bottom left; }
.rn-to { color: var(--faint); }

/* 2 conflicts physically collapse; 0 lands */
.result[data-state="ready"] .rn-from {
  transform: scale(.42);
  opacity: .5;
  text-decoration: line-through 6px;
}
.result[data-state="ready"] .rn-to {
  color: var(--ok);
  animation: land .6s var(--ease-snap) .2s both;
}

@keyframes land {
  from { transform: translateY(-40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.result-label {
  font: 500 16px/1.3 var(--text);
  color: var(--muted);
}

.result-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.result-verdict {
  font: 900 30px/1 var(--display);
  font-stretch: 112%;
  letter-spacing: -.01em;
}

.result[data-state="ready"] .result-verdict { color: var(--ok); }
.result[data-state="failed"] .result-verdict { color: var(--hit); }

.result-tests { font: 500 13px/1.3 var(--mono); color: var(--muted); }

/* canonical trace reaching only the repaired workstreams */
.ws-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ws-mini:empty { display: none; }

.ws-mini li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.2 var(--mono);
}

.ws-mini b {
  font: 850 13px/1 var(--display);
  font-stretch: 110%;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ws-mini li[data-ws="api"] { --lane: var(--api); }
.ws-mini li[data-ws="ledger"] { --lane: var(--ledger); }
.ws-mini li[data-ws="api"] b { color: var(--api); }
.ws-mini li[data-ws="ledger"] b { color: var(--ledger); }
.ws-mini li[data-ws="notifications"] b { color: var(--notif); }

.ws-mini li i {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--faint) 0 4px, transparent 4px 9px);
}

.ws-mini li[data-changed="true"] i {
  height: 7px;
  background: linear-gradient(90deg, var(--lane, var(--ink)) 0 26%, var(--ink) 26%);
  transform-origin: left;
  animation: trace .7s var(--ease-io) both;
}

.ws-mini li[data-ws="ledger"][data-changed="true"] i { animation-delay: .12s; }
.ws-mini li[data-changed="true"] span { color: var(--ink); }
.ws-mini li[data-changed="false"] span { color: var(--faint); }

@keyframes trace {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* decision memory: a sealed, durable artifact */
.memory-card {
  position: relative;
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding: 16px 18px 16px;
  background: var(--ink);
  color: var(--plate-2);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.memory-card .kicker { color: var(--hold); font-weight: 700; }
.memory-card .kicker b { color: var(--hold); }
.memory-card strong { font: 700 22px/1.2 var(--mono); }
.memory-card small { font: 400 13px/1.35 var(--text); color: #b9bcb2; overflow-wrap: anywhere; }
.memory-card .protected { color: var(--plate-2); }

.memory-card::after {
  content: "CANONICAL";
  position: absolute;
  right: 36px;
  top: 14px;
  padding: 2px 6px;
  border: 1.5px solid var(--hold);
  color: var(--hold);
  font: 700 9.5px/1.3 var(--mono);
  letter-spacing: .12em;
  opacity: 0;
  transition: opacity .4s;
}

.result[data-state="ready"] .memory-card::after { opacity: 1; animation: seal .5s var(--ease-snap) .45s both; }
.result[data-state="pending"] .memory-card { background: var(--rule-2); }

@keyframes seal {
  from { transform: scale(1.6) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ==========================================================================
   07 GUARD — the semantic court
   ========================================================================== */

.docket {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: none;
}

.docket li { min-width: 0; }

.docket button {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 9px 12px;
  text-align: left;
  border: 2px solid var(--ink);
  background: var(--plate-2);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .2s;
}

.docket button:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.docket button:disabled { cursor: default; }

.docket b {
  grid-row: 1 / 4;
  align-self: center;
  font: 900 30px/1 var(--display);
  font-stretch: 125%;
}

.docket span {
  font: 700 15px/1.15 var(--display);
  font-stretch: 100%;
}

.docket code {
  font: 500 11px/1.2 var(--mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docket small {
  justify-self: start;
  margin-top: 3px;
  padding: 1px 6px;
  font: 600 11px/1.35 var(--mono);
  color: var(--muted);
}

.docket li[data-current="true"] button { background: var(--plate); box-shadow: inset 0 -5px 0 var(--ink); }
.docket li[data-verdict="MERGE_BLOCKED"] small { background: var(--hit); color: #fff; border-color: var(--hit); }
.docket li[data-verdict="MERGE_ALLOWED"] small { background: var(--ok); color: #fff; border-color: var(--ok); }
.docket li[data-verdict="DECISION_REQUIRED"] small { background: var(--hold); color: var(--ink); border-color: var(--ink); }
.docket li[data-verdict="RUNNING"] small { background: var(--ink); color: var(--plate); }

.court {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "card bench" "band band";
  gap: 12px 14px;
  position: relative;
}

/* ---- the future change, and the memory it has to pass ---------------- */

.change-card {
  grid-area: card;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 12px;
  background: var(--plate);
  transition: box-shadow .35s var(--ease-io);
}

.court[data-phase="1"] .change-card { box-shadow: 0 0 0 4px var(--hold); }

.attempt-inline {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--plate-2);
  font: 600 11.5px/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.attempt-inline:empty { display: none; }

.attempt-diff {
  flex: 0 1 auto;
  min-height: 64px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--rule-2);
  background: var(--plate);
  font: 500 12px/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.attempt-diff:empty { display: none; }

.attempt-diff { white-space: normal; }
.attempt-diff span { display: block; white-space: pre-wrap; }
.attempt-diff .add { display: block; background: var(--hold); color: var(--ink); }
.attempt-diff .del { display: block; color: var(--hit); text-decoration: line-through; }

.change-card > small {
  font: 500 10.5px/1.35 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.vector-note {
  margin-top: auto;
  font: 500 13px/1 var(--text);
  color: var(--muted);
}

.memory-slab {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--plate-2);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.memory-slab span { font: 700 11px/1 var(--mono); letter-spacing: .06em; color: var(--hold); }
.protected-value { font: 700 14px/1.25 var(--mono); }

/* the impact vector: change → memory → bench */
.court::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc((100% - 14px) * .72 / 2.32 - 2px);
  width: 22px;
  height: 4px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-io);
}

.court[data-phase="1"]::before,
.court[data-phase="2"]::before { transform: scaleX(1); }

/* ---- the bench: conventional CI against semantic CI ------------------ */

.bench {
  grid-area: bench;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 3px solid var(--ink);
  background: var(--plate-2);
}

.bench-idle {
  flex: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 28px;
}

.court[data-verdict="NONE"] .bench-idle,
.court[data-phase="0"] .bench-idle { display: flex; }

.phase-title {
  font: 850 30px/1.05 var(--display);
  font-stretch: 105%;
}

.bench-idle p { margin: 0; max-width: 60ch; font: 400 15px/1.5 var(--text); color: var(--muted); }

.bench-split,
.bench-notes { display: none; }

.court:not([data-verdict="NONE"]):not([data-phase="0"]) .bench-split { display: grid; }
.court:not([data-verdict="NONE"]):not([data-phase="0"]) .bench-notes { display: grid; }

.bench-split {
  flex: 1;
  min-height: 0;
  position: relative;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}

/* the connective between the two answers */
.bench-split::before {
  position: absolute;
  z-index: 2;
  left: calc(100% * .72 / 2);
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 8px;
  background: var(--ink);
  color: var(--plate-2);
  font: 900 15px/1 var(--display);
  font-stretch: 62%;
  letter-spacing: .18em;
  opacity: 0;
  transition: opacity .3s .35s;
}

.court[data-tests="green"]:not([data-verdict="MERGE_ALLOWED"]) .bench-split::before { content: "YET"; }
.court[data-tests="green"][data-verdict="MERGE_ALLOWED"] .bench-split::before { content: "AND"; }
.court[data-tests="red"] .bench-split::before { content: "AND"; }
.court[data-phase="2"] .bench-split::before,
.court[data-phase="3"] .bench-split::before,
.court[data-phase="4"] .bench-split::before { opacity: 1; }

.ci-conventional,
.ci-semantic {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 22px;
  min-width: 0;
}

.bench-label {
  font: 700 10.5px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ci-conventional { border-right: 3px solid var(--ink); }
.court[data-tests="green"] .ci-conventional { background: var(--ok-soft); }
.court[data-tests="red"] .ci-conventional { background: var(--hit-soft); }

.ci-count {
  font: 900 clamp(34px, 23cqw, 96px)/.85 var(--display);
  font-stretch: 112%;
  letter-spacing: -.04em;
}

.court[data-tests="green"] .ci-count,
.court[data-tests="green"] .ci-state { color: var(--ok); }
.court[data-tests="red"] .ci-count,
.court[data-tests="red"] .ci-state { color: var(--hit); }

.ci-state { font: 800 12.5px/1.2 var(--mono); letter-spacing: .08em; }

.ci-semantic {
  background: var(--plate);
  transition: background .35s var(--ease-io), color .35s;
}

.ci-semantic .blocked {
  font: 900 clamp(26px, 13.2cqw, 84px)/.86 var(--display);
  font-stretch: 125%;
  letter-spacing: -.04em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease-snap);
}

.ci-semantic .rule {
  margin: 0;
  font: 500 15px/1.4 var(--text);
  opacity: 0;
  transition: opacity .3s .3s;
}

/* phase 1: tests have spoken; semantic CI is still judging */
.court[data-phase="1"] .ci-semantic .bench-label::after { content: ": running"; }

/* phase ≥ 2: the verdict lands */
.court[data-phase="2"] .ci-semantic .blocked,
.court[data-phase="3"] .ci-semantic .blocked,
.court[data-phase="4"] .ci-semantic .blocked { clip-path: inset(0 0 0 0); }
.court[data-phase="2"] .ci-semantic .rule,
.court[data-phase="3"] .ci-semantic .rule,
.court[data-phase="4"] .ci-semantic .rule { opacity: 1; }

.court[data-phase="2"][data-verdict="MERGE_BLOCKED"] .ci-semantic,
.court[data-phase="3"][data-verdict="MERGE_BLOCKED"] .ci-semantic,
.court[data-phase="4"][data-verdict="MERGE_BLOCKED"] .ci-semantic { background: var(--hit); color: #fff; }

.court[data-phase="2"][data-verdict="MERGE_ALLOWED"] .ci-semantic,
.court[data-phase="3"][data-verdict="MERGE_ALLOWED"] .ci-semantic,
.court[data-phase="4"][data-verdict="MERGE_ALLOWED"] .ci-semantic { background: var(--ok); color: #fff; }

.court[data-phase="2"][data-verdict="DECISION_REQUIRED"] .ci-semantic,
.court[data-phase="3"][data-verdict="DECISION_REQUIRED"] .ci-semantic,
.court[data-phase="4"][data-verdict="DECISION_REQUIRED"] .ci-semantic {
  background: var(--hold);
  color: var(--ink);
}

.bench-notes {
  gap: 6px;
  padding: 10px 16px 12px;
  border-top: 3px solid var(--ink);
  background: var(--plate-2);
}

.counterfactual {
  margin: 0;
  font: 400 14.5px/1.45 var(--text);
}

.counterfactual b { font: 700 13.5px/1 var(--mono); }
#p-violation:empty { display: none; }

/* ---- restoration band ---------------------------------------------- */

.restore-band {
  grid-area: band;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: 40px;
  padding: 8px 14px;
  overflow: hidden;
  visibility: hidden;
}

.court[data-phase="3"] .restore-band,
.court[data-phase="4"] .restore-band { visibility: visible; }

.restore-band > * { position: relative; z-index: 1; }

/* phase 3: the workspace is winding back to its verified bytes */
.restore-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ok-soft);
  transform: scaleX(0);
  transform-origin: right;
}

.court[data-phase="3"] .restore-band::before { animation: rewind 1.3s var(--ease-io) both; }
.court[data-phase="4"] .restore-band::before { transform: scaleX(1); }

@keyframes rewind {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.restore-band .kicker { color: var(--ink); font-weight: 700; }
.complete-verdict,
#p-restore,
#p-receipt { display: none; }

.complete-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.complete-list li { font: 600 12.5px/1.3 var(--mono); color: var(--ok); }
.complete-list li[data-ok="false"] { color: var(--hit); }
.court[data-phase="3"] .complete-list { opacity: 0; }

.restore-band small { font: 500 10.5px/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

/* ==========================================================================
   Shared facts / proof primitives
   ========================================================================== */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 14px;
  font: 500 12px/1.4 var(--mono);
}

.facts dt { color: var(--muted); font-family: var(--text); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dd.danger { color: var(--hit); font-weight: 700; }
.facts dd.unknown { font-weight: 700; }
.facts dd.ok { color: var(--ok); font-weight: 700; }

.facts-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 11px;
}

.facts-inline dd { margin-right: 8px; font-weight: 700; }

/* ==========================================================================
   Proof drawer — the audit layer
   ========================================================================== */

.drawer {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 58%);
  display: flex;
  flex-direction: column;
  background: var(--plate-2);
  border-left: 3px solid var(--ink);
  box-shadow: -18px 0 0 rgba(12,13,10,.06);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .45s var(--ease-io), visibility 0s linear .45s;
}

.drawer.open {
  transform: none;
  visibility: visible;
  transition: transform .45s var(--ease-io), visibility 0s;
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--plate-2);
}

.drawer-head strong { font: 850 17px/1 var(--display); font-stretch: 112%; }
.drawer-head span { min-width: 0; flex: 1; font: 500 11px/1.3 var(--mono); color: #b9bcb2; overflow-wrap: anywhere; }

.drawer-head button {
  border: 1.5px solid var(--plate-2);
  background: transparent;
  color: var(--plate-2);
  padding: 5px 10px;
  font: 600 13px/1 var(--text);
  cursor: pointer;
}

.drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  background: var(--plate);
}

.drawer-tabs button {
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font: 600 13px/1 var(--text);
  cursor: pointer;
}

.drawer-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--ink); }

.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 14px 18px 24px;
}

.proof-section { margin: 0 0 18px; }
.proof-section .muted { margin: 8px 0 0; font-size: 11px; }

.proof-section h3 {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-2);
  font: 700 14px/1.25 var(--text);
}

.code {
  margin: 0;
  padding: 10px 12px;
  background: var(--plate);
  border: 1px solid var(--rule-2);
  font: 500 11.5px/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 46vh;
  overflow: auto;
}

.code.diff { white-space: normal; }
.code.diff span { display: block; min-height: 1.5em; white-space: pre-wrap; }
.code .add { display: block; background: var(--ok-soft); }
.code .del { display: block; background: var(--hit-soft); }
.code .hunk { display: block; color: var(--api); }
.code .meta { display: block; color: var(--muted); }

.truth {
  margin: 0;
  padding: 8px 10px;
  border-left: 4px solid var(--ok);
  background: var(--plate);
  font: 700 12px/1.4 var(--mono);
}

.findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font: 500 12px/1.45 var(--mono);
}

.findings b { display: inline-block; margin-right: 6px; padding: 0 6px; background: var(--ink); color: var(--plate-2); font-size: 10.5px; }

.hash-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 11.5px/1.4 var(--mono);
}

.hash-table th,
.hash-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.hash-table th { font: 600 12px/1.3 var(--text); color: var(--muted); }
.hash-table code { overflow-wrap: anywhere; }

/* ==========================================================================
   EVIDENCE MODE — committed receipts
   ========================================================================== */

.explorer {
  grid-area: main;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 0;
}

.explorer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  background: var(--plate);
  border-right: 2px solid var(--ink);
  overflow: auto;
}

.explorer-label {
  display: grid;
  gap: 4px;
  margin: 0 14px 12px;
  padding: 12px;
  background: var(--ink);
  color: var(--plate-2);
}

.explorer-label strong { font: 850 16px/1.1 var(--display); font-stretch: 112%; }
.explorer-label span { font: 700 11px/1 var(--mono); color: var(--hold); }
.explorer-label small { font: 400 13px/1.4 var(--text); color: #b9bcb2; }

.explorer-nav button {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  text-align: left;
  font: 600 15px/1.2 var(--text);
  cursor: pointer;
}

.explorer-nav button i { font: 700 10px/1 var(--mono); font-style: normal; color: var(--faint); }
.explorer-nav button[aria-selected="true"] { background: var(--plate-2); box-shadow: inset 4px 0 0 var(--ink); }

.explorer-body {
  padding: 22px 30px 30px;
  overflow: auto;
}

.ex-head { margin-bottom: 16px; }
.explorer-body > .muted { font-size: 11.5px; }
.ex-head h2 {
  margin: 6px 0 0;
  font: 900 40px/1 var(--display);
  font-stretch: 118%;
  letter-spacing: -.02em;
}
.ex-head h2 small { font: 700 14px var(--mono); color: var(--ok); }

.ex-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.ex-metrics div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: var(--plate-2);
}

.ex-metrics strong { font: 900 36px/1 var(--display); font-stretch: 118%; overflow-wrap: anywhere; }
.ex-metrics strong.mono { font: 700 15px/1.2 var(--mono); }
.ex-metrics span { font: 500 13px/1.2 var(--text); color: var(--muted); }
.ex-metrics .danger strong { color: var(--hit); }
.ex-metrics .ok strong { color: var(--ok); }

/* ==========================================================================
   Action bar
   ========================================================================== */

.actionbar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--plate);
  border-top: 2px solid var(--ink);
  min-width: 0;
}

.action-status {
  flex: 1;
  min-width: 0;
  text-align: right;
  font: 400 14px/1.3 var(--text);
  color: var(--muted);
}

.actions { display: flex; gap: 10px; }

.btn {
  border: 2px solid var(--ink);
  padding: 12px 18px;
  font: 750 15px/1 var(--display);
  font-stretch: 105%;
  cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  white-space: nowrap;
}

.btn:disabled { cursor: default; opacity: .45; }
.btn-primary { background: var(--ink); color: var(--plate-2); min-width: 230px; }
.btn-primary:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rule-2); }
.btn-secondary { background: var(--plate-2); }
.btn-secondary:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
/* On the decide step the sticky secondary action is KEEP UNKNOWN: a real
   outcome with the hold colour, never a grey "cancel". */
body[data-mode="ACTIVE"][data-screen="decide"] #secondary { background: var(--hold); }

.btn-ghost { border-color: transparent; background: transparent; padding-left: 4px; font: 600 14px/1 var(--text); }
.btn-ghost:empty { visibility: hidden; }

/* On desktop the decision lives in the decision panel; the bar does not
   repeat it. On phones the panel buttons give way to the sticky bar. */
@media (min-width: 761px) {
  body[data-mode="ACTIVE"][data-screen="decide"] .actionbar .actions { display: none; }
}

/* ==========================================================================
   Compact desktop heights (for example 1366×768)
   ========================================================================== */

@media (max-height: 820px) and (min-width: 761px) {
  :root { --top: 56px; --bar: 64px; }
  .stage { padding: 14px 24px 12px; }
  .screen { gap: 10px; }
  .log-row strong { font-size: 74px; }
  .reading { padding: 6px 0 6px 14px; }
  .reading dd { font-size: 26px; }
  .silent { font-size: 23px; }
  .converge { height: 28px; }
  .unknown-plate { min-height: 140px; padding: 14px 20px 12px; }
  .question { font-size: 25px; }
  .decision { padding: 16px; gap: 9px; }
  .decision-option { padding: 11px 15px 12px; }
  .decision-option strong { font-size: 23px; }
  .checklist li { padding: 3px 0; }
  .checklist li b { font-size: 14px; }
  .docket button { padding: 7px 10px; }
  .docket b { font-size: 24px; }
  .ci-conventional, .ci-semantic { padding: 12px 16px; }
  .memory-card { padding: 12px 16px; }
  .memory-card strong { font-size: 19px; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .workspace { grid-template-columns: 176px minmax(0, 1fr); }
  .rail li b { font-size: 12px; }
  .truth-badge { max-width: 300px; }
  .brand small { display: none; }
}

/* ==========================================================================
   Mobile: one step at a time, trajectories turn vertical
   ========================================================================== */

@media (max-width: 760px) {
  :root { --top: auto; --bar: auto; }

  .app { grid-template-rows: auto auto minmax(0, 1fr) auto; }

  .topbar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 14px;
  }

  .brand { gap: 8px; }
  .brand small { display: none; }
  .brand-word { font-size: 19px; }
  .brand-mark { width: 24px; height: 24px; }
  .mode-switch button { padding: 5px 8px; font-size: 12px; }
  .truth-badge { order: 5; flex-basis: 100%; max-width: none; font-size: 10.5px; gap: 0 8px; }
  .truth-badge b { flex-basis: auto; }
  .proof-toggle { padding: 5px 9px; font-size: 12px; }

  .mobile-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
    background: var(--ink);
    color: var(--plate-2);
    font: 700 11px/1 var(--mono);
  }

  .mp-dots { display: flex; gap: 4px; }
  .mp-dots i { width: 14px; height: 5px; background: rgba(255,255,255,.25); }
  .mp-dots i[data-status="done"] { background: var(--ok); }
  .mp-dots i[data-status="waiting"],
  .mp-dots i[data-status="abstained"] { background: var(--hold); }
  .mp-dots i[data-status="violation"] { background: var(--hit); }
  .mp-dots i.current { background: var(--plate-2); }

  .workspace { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .stage { padding: 14px 14px 20px; }
  .screen { height: auto; min-height: 100%; gap: 12px; }
  .screen-head p { display: none; }
  .screen-head h1 { font-size: 19px; }

  /* DETECT */
  .detect { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ledger-of-green {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    align-items: end;
    gap: 6px 14px;
  }
  .log-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .log-row strong { font-size: 54px; }
  .log-row span { font-size: 13px; padding-bottom: 0; }
  .log-but { display: none; }
  .chamber-h { display: none; }
  .chamber-v { display: block; padding: 14px 10px 4px; }
  .collision-line { padding: 8px 12px 10px; }

  /* DECIDE */
  .decide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* get to the decision quickly: values, silence, UNKNOWN, question */
  .reading { grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; padding: 5px 0 5px 12px; }
  .reading small { display: none; }
  .reading dd { font-size: 22px; }
  .silent { font-size: 18px; }
  .converge { height: 18px; }
  .unknown-plate { min-height: 0; gap: 6px; padding: 12px 14px; }
  .up-foot { font-size: 15px; }
  .decision { padding: 12px 14px; border-width: 2px; }
  .question { font-size: 21px; }
  .question-full,
  .decision-options,
  .decision-note { display: none; }
  .secondary-findings { grid-template-columns: minmax(0, 1fr); }
  .abstain-grid { grid-template-columns: minmax(0, 1fr); }

  /* COMPILE */
  .compile { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .result { order: -1; }
  .result-number { font-size: 84px; }
  .result-verdict { font-size: 22px; }
  .ws-mini li { grid-template-columns: 100px minmax(0, 1fr) auto; font-size: 11px; }
  .checklist { padding-left: 36px; gap: 2px; }

  /* GUARD */
  .docket { gap: 6px; }
  .docket button { grid-template-columns: minmax(0, 1fr); padding: 7px 8px; }
  .docket b { grid-row: auto; font-size: 20px; }
  .docket span { font-size: 12px; }
  .docket code { display: none; }
  .docket small { font-size: 10px; padding: 1px 4px; }

  .court {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "bench" "card" "band";
  }

  .court::before { display: none; }
  .bench { min-height: 320px; }
  .bench-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .bench-split::before { left: calc(100% * .8 / 2); top: 16px; font-size: 12px; }
  .ci-conventional, .ci-semantic { padding: 44px 12px 14px; justify-content: flex-start; }
  .ci-semantic .rule { font-size: 13px; }
  .attempt-diff { max-height: 180px; }

  /* audit layer becomes a bottom sheet */
  .drawer {
    top: auto;
    left: 0;
    width: auto;
    height: 82%;
    border-left: 0;
    border-top: 3px solid var(--ink);
    box-shadow: 0 -14px 0 rgba(12,13,10,.06);
    transform: translateY(104%);
  }

  .explorer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .explorer-nav { flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .explorer-label { display: none; }
  .explorer-nav button { flex: none; padding: 8px 10px; font-size: 13px; }
  .explorer-body { padding: 16px 14px 24px; }
  .ex-head h2 { font-size: 28px; }
  .ex-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .actionbar {
    position: sticky;
    bottom: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .action-status { order: -1; flex-basis: 100%; text-align: left; font-size: 13px; }
  .action-status:empty { display: none; }
  .btn-ghost { padding-left: 0; }
  .actions { margin-left: auto; flex: 1; justify-content: flex-end; }
  .actions { min-width: 0; }
  .btn { padding: 11px 12px; font-size: 13px; white-space: normal; line-height: 1.1; }
  .btn-primary { min-width: 0; flex: 1; }
}

/* ==========================================================================
   Reduced motion: every end state, immediately, nothing omitted
   ========================================================================== */

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

  .court[data-phase="3"] .restore-band::before { transform: scaleX(1); }
  .court[data-phase="1"] .ci-semantic .bench-label::after { content: ""; }
}

/* the surfaced question is prose, not code */
#p-violation dd { font: 400 14px/1.4 var(--text); }