/* ═══════════════════════════════════════════════════════════════════════════
   SKYCRUNCHER · DAG COLLABORATION SPACE — dark-only, vocabulary matched to the
   CSL dashboard (tools/theses/dashboard/ui/style.css): space-black grounds,
   hairline slate borders, sky accent, human-pink for owner-voice annotations.
   Evidence states: EXTRACTED ghosted/dashed · VERIFIED solid · REFUTED
   struck/red · STALE amber.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #07090f;
  --panel: #0d1119;
  --panel-2: #111624;
  --panel-3: #161c2e;
  --line: #1c2434;
  --line-strong: #2d3a55;
  --ink: #dce5f7;
  --ink-2: #a9b6d0;
  --muted: #66748f;
  --faint: #454f66;
  --accent: #4cc2ff;
  --accent-dim: rgba(76, 194, 255, 0.13);
  --human: #f778ba;            /* owner-voice annotations */
  --human-dim: rgba(247, 120, 186, 0.12);
  --pass: #3ddc97;             /* VERIFIED */
  --warn: #f0b23e;             /* STALE */
  --danger: #ff5c5c;           /* REFUTED */
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* edge-type layer colors (legend chips use the same variables) */
  --c-data-flow: #4cc2ff;
  --c-control-gating: #b48cff;
  --c-contract: #7f9cf5;
  --c-unit-frame-conversion: #ff9331;   /* LOUD by owner ruling */
  --c-ordering-only: #8fa0bd;
  --c-fallback-degradation: #2dd4bf;
  --c-evidence: #3ddc97;
  --c-annotation: #f778ba;
  --c-receipt-write: #d9a06b;
  --c-calibration-consumes: #cdd94c;
  --c-inverse-pair: #4ca3a3;
  --c-duplication-shadow: #a3873c;
  --c-external-dependency: #d97777;
  --c-doc-binding: #7d8fa3;
  --c-unrecognized: #e8e8e8;

  /* clockdrive overlay (roadmap theses + proposals) — brass/gold, thematically a
     clockwork drive and deliberately DISTINCT from every edge-layer + evidence hue */
  --c-clockdrive: #d9b25a;
  --c-clockdrive-dim: rgba(217, 178, 90, 0.13);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink-2);
  font: 13.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(76, 194, 255, 0.25); }
button { font: inherit; cursor: pointer; }
a { color: var(--accent); }

/* ── header ─────────────────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0e18, var(--bg));
  padding: 12px 18px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
header h1 {
  margin: 0; font: 600 15px var(--mono); letter-spacing: 0.18em; color: var(--ink);
}
header h1 .dim { color: var(--muted); font-weight: 400; }
.hdr-group { display: flex; align-items: center; gap: 6px; }
.hdr-group .lbl { font: 500 10px var(--mono); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.seg button {
  background: var(--panel); color: var(--ink-2); border: none; padding: 4px 12px;
  font: 500 12px var(--mono); border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--accent-dim); color: var(--accent); }
.seg button:hover:not(.on) { background: var(--panel-3); }

.chip-row { display: flex; gap: 5px; flex-wrap: wrap; }
.ftchip {
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink-2);
  border-radius: 999px; padding: 2px 11px; font: 500 11.5px var(--mono);
}
.ftchip.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.ftchip:hover:not(.on) { background: var(--panel-3); }

/* ── status banner ──────────────────────────────────────────────────────── */
#banner {
  padding: 6px 18px; font: 500 12px var(--mono); border-bottom: 1px solid var(--line);
}
#banner.fixture { background: rgba(240, 178, 62, 0.12); color: var(--warn); border-bottom-color: rgba(240,178,62,0.4); }
#banner.absent  { background: var(--panel); color: var(--muted); }
#banner.real    { background: rgba(61, 220, 151, 0.07); color: var(--pass); }
#banner.error   { background: rgba(255, 92, 92, 0.1); color: var(--danger); }

/* ── layout ─────────────────────────────────────────────────────────────── */
#layout { display: flex; height: calc(100vh - 96px); }
#rail {
  width: 250px; min-width: 250px; border-right: 1px solid var(--line);
  overflow-y: auto; padding: 10px 12px; background: var(--panel);
}
#stage-area { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
#graph-view { flex: 1; min-height: 0; overflow: auto; position: relative; }
#matrix-view { flex: 1; min-height: 0; overflow: auto; }
#panel {
  width: 340px; min-width: 340px; border-left: 1px solid var(--line);
  overflow-y: auto; padding: 12px 14px; background: var(--panel);
}

/* ── left rail: layers + legend ─────────────────────────────────────────── */
.rail-h { font: 600 10px var(--mono); letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; margin: 12px 0 6px; }
.rail-h:first-child { margin-top: 0; }
.layer-row {
  display: flex; align-items: center; gap: 7px; padding: 2px 0; font: 500 12px var(--mono);
  color: var(--ink-2); cursor: pointer; user-select: none;
}
.layer-row input { accent-color: var(--accent); margin: 0; }
.layer-row .swatch { width: 14px; height: 4px; border-radius: 2px; flex: none; }
.layer-row .cnt { margin-left: auto; color: var(--faint); font-size: 11px; }
.layer-row.loud .name { color: var(--c-unit-frame-conversion); font-weight: 600; }
.layer-row.off-default { opacity: 0.85; }
.layer-row.empty .name { color: var(--faint); }
.layer-row.empty .cnt { color: var(--faint); }
.layer-row.mech-toggle { margin-top: 4px; }
.layer-row input[disabled] { opacity: 0.4; }
.legend-ev { display: flex; flex-direction: column; gap: 4px; font: 500 11.5px var(--mono); }
.legend-ev .row { display: flex; align-items: center; gap: 8px; }
.legend-ev svg { flex: none; }
.rail-note { font: 400 11px var(--sans); color: var(--muted); margin-top: 8px; }
.rail-note.warn { color: var(--warn); }
.rail-h-sub { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }

/* clockdrive rail toggles + legend */
.cd-toggle .cd-swatch { background: var(--c-clockdrive); }
.cd-legend { margin-top: 4px; }
.cd-legend .row { color: var(--ink-2); }

/* ── graph view ─────────────────────────────────────────────────────────── */
#graph-svg { display: block; cursor: grab; touch-action: none; }
#graph-svg.panning { cursor: grabbing; }
/* force-web nodes are draggable; the grab cursor reads "you can move this" */
#graph-svg .gnode { cursor: grab; }
#graph-svg .gnode.pinned rect.nd-compact,
#graph-svg .gnode.pinned rect.nd-detail { stroke: var(--accent); stroke-dasharray: none; }
.pin-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1; cursor: pointer; }

/* semantic zoom: compact card at survey zoom, detail card once zoomed in */
#graph-svg .nd-detail, #graph-svg .nd-detail-txt { display: none; }
#graph-svg.sem-detail .nd-detail, #graph-svg.sem-detail .nd-detail-txt { display: block; }
#graph-svg.sem-detail .nd-compact { display: none; }
.nd-detail-txt { font: 400 8.5px var(--sans); fill: var(--ink-2); pointer-events: none; }
.nd-detail-txt.faint { fill: var(--faint); font-style: italic; }

/* zoom control cluster */
.zoom-ctl {
  position: absolute; right: 14px; bottom: 14px; z-index: 8;
  display: flex; flex-direction: column; gap: 4px;
}
.zoom-ctl button {
  width: 34px; height: 28px; background: var(--panel-2); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 6px; font: 600 13px var(--mono);
}
.zoom-ctl button:hover { border-color: var(--accent); color: var(--accent); }
.colhdr { font: 600 11px var(--mono); letter-spacing: 0.14em; fill: var(--muted); text-transform: uppercase; }
.gnode rect {
  fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1; rx: 5;
}
.gnode:hover rect { stroke: var(--accent); }
.gnode.selected rect { stroke: var(--accent); stroke-width: 1.6; fill: var(--accent-dim); }
.gnode.dimmed { opacity: 0.22; }
.gnode text { font: 500 11px var(--mono); fill: var(--ink); pointer-events: none; }
.gnode .sub { font-size: 9.5px; fill: var(--muted); }
.gnode.kind-stage rect { stroke: var(--c-ordering-only); fill: #121a2b; }
.gnode.kind-boundary rect { stroke: var(--c-contract); fill: #131a30; rx: 12; }
.gnode .ann-dot { fill: var(--human); }
.gedge { fill: none; }
.gedge.dimmed { opacity: 0.08; }
.gedge-hit { fill: none; stroke: transparent; stroke-width: 9; cursor: pointer; }
.gedge.selected { filter: drop-shadow(0 0 3px currentColor); }

/* ── clockdrive strip (roadmap overlay — unanchored chips above the ranks) ──── */
.cd-band { fill: rgba(217, 178, 90, 0.045); stroke: var(--c-clockdrive); stroke-opacity: 0.28; stroke-dasharray: 2 3; }
.cd-band-label { font: 700 11px var(--mono); letter-spacing: 0.22em; fill: var(--c-clockdrive); text-transform: uppercase; }
.cd-kind-label { font: 600 9.5px var(--mono); letter-spacing: 0.14em; fill: var(--c-clockdrive); fill-opacity: 0.75; text-transform: uppercase; }
.cd-chip { cursor: pointer; }
.cd-chip rect { fill: var(--panel-2); stroke: var(--c-clockdrive); stroke-width: 1; }
.cd-chip text { font: 500 10px var(--mono); fill: var(--ink); pointer-events: none; }
.cd-chip .cd-chip-sub { font-size: 8px; fill: var(--c-clockdrive); fill-opacity: 0.85; }
.cd-chip:hover rect { stroke-width: 1.6; filter: drop-shadow(0 0 3px var(--c-clockdrive)); }
.cd-chip.selected rect { stroke-width: 1.8; fill: var(--c-clockdrive-dim); }
/* pending — dashed outline, hollow */
.cd-chip.cd-pending rect { fill: transparent; stroke-dasharray: 3 2; }
/* dead — struck-through + dimmed (visible-but-dead, killable history) */
.cd-chip.cd-dead { opacity: 0.5; }
.cd-chip.cd-dead rect { stroke-width: 0.8; }
.cd-chip.cd-dead text.cd-chip-title { text-decoration: line-through; fill: var(--ink-2); }
.cd-chip .cd-strike { stroke: var(--c-clockdrive); stroke-width: 1; opacity: 0.75; pointer-events: none; }
/* adopted / approved — subtle solid */
.cd-chip.cd-adopted rect, .cd-chip.cd-approved rect { fill: var(--c-clockdrive-dim); }
.cd-chip .cd-flag { fill: var(--warn); pointer-events: none; }
.cd-anchor-line { stroke: var(--c-clockdrive); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; fill: none; pointer-events: none; }

/* ── matrix view ────────────────────────────────────────────────────────── */
#matrix-wrap { padding: 8px 0 40px 0; }
.mx-lab { font: 500 10.5px var(--mono); fill: var(--ink-2); cursor: pointer; }
.mx-lab:hover { fill: var(--accent); }
.mx-lab.dimmed { opacity: 0.25; }
.mx-lab.grp { fill: var(--muted); font-weight: 600; }
.mx-cell { cursor: pointer; }
.mx-cell:hover { stroke: var(--ink); stroke-width: 1.2; }
.mx-cell.selected { stroke: var(--accent); stroke-width: 1.6; }
.mx-cell.dimmed { opacity: 0.12; }
.mx-grid { stroke: var(--line); stroke-width: 0.4; }
.mx-block { stroke: var(--line-strong); stroke-width: 0.8; fill: none; }
.mx-refx { stroke: var(--danger); stroke-width: 1.4; pointer-events: none; }
.mx-ann { fill: var(--human); pointer-events: none; }
.mx-diag { fill: #10141f; cursor: pointer; }
.mx-catcher { cursor: cell; }
.mx-proposed { fill: none; stroke: var(--human); stroke-width: 1.4; cursor: pointer; }
.g-proposed { stroke: var(--human); stroke-width: 1.2; stroke-dasharray: 1 4; opacity: 0.85; fill: none; pointer-events: none; }

/* ── procedure view ─────────────────────────────────────────────────────── */
#procedure-view { flex: 1; min-height: 0; overflow-y: auto; }
#proc-wrap { max-width: 760px; padding: 16px 22px 60px; }
.proc-intro { font: 400 12.5px var(--sans); color: var(--muted); margin-bottom: 14px; }
.proc-chain { margin-bottom: 26px; }
.proc-chain-h {
  font: 600 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; margin-bottom: 4px;
}
.proc-cite { font: 400 10.5px var(--mono); color: var(--muted); word-break: break-all; margin-bottom: 10px; }
.proc-note { font: 500 12px var(--sans); color: var(--muted); margin: 6px 0 10px; }
.proc-note.warn { color: var(--warn); }
.proc-step {
  display: flex; gap: 12px; padding: 9px 10px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.proc-step:hover { border-color: var(--line-strong); }
.proc-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line-strong);
  color: var(--accent); font: 600 12px var(--mono);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.proc-body { flex: 1; min-width: 0; }
.proc-title { font: 600 13.5px var(--mono); color: var(--ink); cursor: pointer; }
.proc-title:hover { color: var(--accent); }
.proc-ann { color: var(--human); font: 500 11px var(--mono); }
.proc-copy { font: 400 13px var(--sans); color: var(--ink-2); margin: 4px 0 2px; }
.proc-copy.not-doc { font-style: italic; color: var(--faint); }
.proc-why { font: 400 11.5px var(--sans); color: var(--muted); margin: 3px 0; }
.proc-why b { font: 600 9.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 5px; }
.proc-badges { margin: 4px 0 2px; }
.proc-substrate { border-color: var(--c-contract); color: var(--c-contract); }
.proc-receipt { border-color: var(--c-receipt-write); color: var(--c-receipt-write); }
.proc-links { margin-top: 6px; display: flex; gap: 6px; }
.proc-links .btn { padding: 1px 9px; font-size: 10.5px; }
.proc-foot { border-top: 1px dashed var(--line-strong); padding-top: 10px; margin-top: 8px; }
.proc-unwalked { cursor: pointer; }
.proc-unwalked:hover { border-color: var(--accent); color: var(--accent); }

/* ── side panel ─────────────────────────────────────────────────────────── */
.p-h { font: 600 13px var(--mono); color: var(--ink); margin: 0 0 2px; word-break: break-all; }
.p-kind { font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.p-sec { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.p-sec h3 { margin: 0 0 5px; font: 600 10px var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.p-cite { font: 400 11px var(--mono); color: var(--muted); word-break: break-all; }
.p-why { font: 400 12.5px var(--sans); color: var(--ink-2); white-space: pre-wrap; }
.p-why .cites { display: block; margin-top: 4px; font: 400 10.5px var(--mono); color: var(--muted); }
.not-doc { color: var(--faint); font-style: italic; font: italic 12px var(--sans); }
.ev-chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 10.5px var(--mono); letter-spacing: 0.08em;
}
.ev-EXTRACTED { color: var(--muted); border: 1px dashed var(--line-strong); }
.ev-VERIFIED { color: var(--pass); border: 1px solid var(--pass); background: rgba(61,220,151,0.08); }
.ev-REFUTED { color: var(--danger); border: 1px solid var(--danger); background: rgba(255,92,92,0.08); text-decoration: line-through; }
.ev-STALE { color: var(--warn); border: 1px solid var(--warn); background: rgba(240,178,62,0.08); }
.wb-chip {
  display: inline-block; background: var(--panel-3); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 0 6px; margin: 1px 2px 1px 0; font: 500 10.5px var(--mono); color: var(--ink-2);
}
/* clockdrive detail-panel status chip (brass hue; dead = struck) */
.cd-status-chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 10.5px var(--mono);
  letter-spacing: 0.08em; color: var(--c-clockdrive); border: 1px solid var(--c-clockdrive);
  background: var(--c-clockdrive-dim); text-transform: uppercase;
}
.cd-status-chip.cd-pending { background: transparent; border-style: dashed; }
.cd-status-chip.cd-dead { opacity: 0.7; text-decoration: line-through; }
.cd-status-chip.cd-flagged { border-color: var(--warn); color: var(--warn); }
.p-kind.cd-kind { color: var(--c-clockdrive); }
.member-list { max-height: 180px; overflow-y: auto; font: 400 11px var(--mono); }
.member-list div { padding: 1px 0; color: var(--ink-2); word-break: break-all; cursor: pointer; }
.member-list div:hover { color: var(--accent); }
.const-list { max-height: 260px; overflow-y: auto; }
.const-item { border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; margin-bottom: 5px; font: 400 11px var(--mono); cursor: pointer; }
.const-item:hover { border-color: var(--line-strong); background: var(--panel-2); }
.const-item .t { font-weight: 600; }
.how-box { background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 9px; font: 400 12px var(--sans); }
.how-box b { color: var(--ink); font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 5px; }
.how-box .lossy-yes { color: var(--warn); font-weight: 600; }
.how-box .lossy-no { color: var(--pass); }

/* annotations */
.ann-item { border-left: 2px solid var(--human); background: var(--human-dim); border-radius: 0 6px 6px 0; padding: 5px 8px; margin-bottom: 6px; }
.ann-item .meta { font: 500 10px var(--mono); color: var(--muted); }
.ann-item .kind-question { color: var(--warn); }
.ann-item .kind-drawn-edge { color: var(--human); }
.ann-item .txt { font: 400 12.5px var(--sans); color: var(--ink); white-space: pre-wrap; }
.ann-form textarea {
  width: 100%; min-height: 54px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: 6px; color: var(--ink); font: 400 12.5px var(--sans); padding: 6px 8px; resize: vertical;
}
.ann-form select, .ann-form input[type=text], .ann-form input[type=password] {
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 5px;
  color: var(--ink); font: 500 11.5px var(--mono); padding: 3px 6px;
}
.ann-form .row { display: flex; gap: 6px; margin: 6px 0; align-items: center; flex-wrap: wrap; }
.btn {
  background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 6px; padding: 3px 12px; font: 600 11.5px var(--mono);
}
.btn:hover { background: rgba(76,194,255,0.22); }
.btn.ghost { background: var(--panel-2); border-color: var(--line-strong); color: var(--ink-2); }
.btn.human { background: var(--human-dim); border-color: var(--human); color: var(--human); }
.form-msg { font: 500 11px var(--mono); }
.form-msg.ok { color: var(--pass); }
.form-msg.err { color: var(--danger); }
.draw-hint { background: var(--human-dim); border: 1px dashed var(--human); color: var(--human); border-radius: 6px; padding: 5px 8px; font: 500 11.5px var(--mono); margin-top: 6px; }

.p-empty { color: var(--faint); font: italic 12.5px var(--sans); margin-top: 20px; }

/* hover tooltip (WHY on hover) */
#tip {
  position: fixed; z-index: 50; max-width: 380px; pointer-events: none; display: none;
  background: #0c1220f2; border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 7px 10px; font: 400 12px var(--sans); color: var(--ink-2);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
#tip .t-title { font: 600 11.5px var(--mono); color: var(--ink); word-break: break-all; }
#tip .t-why { margin-top: 3px; white-space: pre-wrap; }
#tip .t-notdoc { color: var(--faint); font-style: italic; }
#tip .t-meta { margin-top: 3px; font: 500 10px var(--mono); color: var(--muted); }

/* focus mode bar */
#focus-bar {
  position: sticky; top: 0; left: 0; z-index: 10; padding: 6px 14px; display: none;
  background: rgba(12, 18, 32, 0.95); border-bottom: 1px solid var(--line-strong);
  font: 500 12px var(--mono); color: var(--accent);
}
#focus-bar .btn { margin-left: 10px; }
#loading { padding: 40px; font: 500 13px var(--mono); color: var(--muted); }

/* connectivity-isolation bar (graph + matrix) */
#iso-bar {
  position: sticky; top: 0; left: 0; z-index: 10; display: none;
  padding: 6px 14px; background: rgba(12, 18, 32, 0.95);
  border-bottom: 1px solid var(--line-strong);
  font: 500 12px var(--mono); color: var(--human);
  align-items: center; gap: 8px; flex-wrap: wrap;
}
#iso-bar .iso-meta { color: var(--muted); }
#iso-bar .btn[disabled] { opacity: 0.35; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   CURATED STEP-MAP VIEW (task #11) — the FOURTH view + its procedure-map graph,
   plus the regen-drift ORPHAN banner. Additive; the other views are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── orphan-annotation banner (regen-drift safety) ─────────────────────────── */
#orphan-banner {
  padding: 6px 18px; border-bottom: 1px solid rgba(240,178,62,0.4);
  background: rgba(240, 178, 62, 0.09); color: var(--warn);
}
#orphan-banner .orphan-head { font: 700 12px var(--mono); letter-spacing: 0.06em; margin-right: 10px; }
#orphan-banner .orphan-sub { font: 400 11px var(--sans); color: var(--muted); }
.orphan-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.orphan-item {
  display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%;
  background: var(--panel-2); border: 1px solid rgba(240,178,62,0.5); border-radius: 6px;
  padding: 3px 9px; color: var(--ink-2); text-align: left;
}
.orphan-item:hover { border-color: var(--warn); }
.orphan-kind { font: 600 10px var(--mono); color: var(--warn); text-transform: uppercase; letter-spacing: 0.08em; }
.orphan-target { font: 500 11px var(--mono); color: var(--ink); word-break: break-all; }
.orphan-first { font: italic 11.5px var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.orphan-retag { font: 500 9.5px var(--mono); color: var(--faint); }

/* ── steps view: shell + toolbar ───────────────────────────────────────────── */
#steps-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.steps-toolbar { flex: none; border-bottom: 1px solid var(--line); background: var(--panel); padding: 8px 18px; }
.steps-toolbar .st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.steps-toolbar .lbl { font: 500 10px var(--mono); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.steps-toolbar .st-meta { margin-left: auto; font: 500 10.5px var(--mono); color: var(--faint); }
.st-note { font: 400 11.5px var(--sans); color: var(--muted); margin-top: 6px; }
.st-note code { font: 500 11px var(--mono); color: var(--ink-2); }
.st-legend { margin-left: 6px; }
.st-legend .lg { font: 600 10px var(--mono); margin-left: 8px; padding-left: 14px; position: relative; }
.st-legend .lg::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 0; border-top: 2px solid currentColor; }
.st-legend .lg.contains { color: #66748f; }
.st-legend .lg.contains::before { border-top-style: dotted; }
.st-legend .lg.branch { color: var(--accent); }
.st-legend .lg.converge { color: var(--c-ordering-only); }

#steps-content { flex: 1; min-height: 0; }
#steps-content.mode-list { overflow-y: auto; }
#steps-content.mode-graph { overflow: hidden; position: relative; }

/* ── steps LIST mode: numbered nested walk ─────────────────────────────────── */
#steps-wrap { max-width: 900px; padding: 16px 22px 60px; }
.step-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; margin-bottom: 8px;
}
.step-card:hover { border-color: var(--line-strong); }
.step-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.step-card.dimmed { opacity: 0.32; }
.step-subs { margin-left: 20px; border-left: 1px solid var(--line-strong); padding-left: 14px; margin-top: 2px; }
.step-head { display: flex; align-items: baseline; gap: 9px; }
.step-num {
  flex: none; min-width: 30px; height: 20px; padding: 0 6px; border-radius: 5px;
  background: var(--panel-3); border: 1px solid var(--line-strong); color: var(--accent);
  font: 600 11.5px var(--mono); display: inline-flex; align-items: center; justify-content: center;
}
.step-title { font: 600 13.5px var(--mono); color: var(--ink); cursor: pointer; }
.step-title:hover { color: var(--accent); }
.step-anncount { color: var(--human); font: 500 11px var(--mono); margin-left: auto; }
.step-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
.step-badge { font: 600 9.5px var(--mono); letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); text-transform: uppercase; }
.step-badge.sb-kind { border-color: var(--c-contract); color: var(--c-contract); }
.step-badge.sb-obs.sb-receipt { border-color: var(--c-receipt-write); color: var(--c-receipt-write); }
.step-badge.sb-obs.sb-code-derived { border-color: var(--muted); color: var(--muted); }
.step-badge.sb-ft { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.step-badge.sb-tag { border-color: var(--line-strong); color: var(--ink-2); }
.step-flow { font: 400 11.5px var(--sans); color: var(--ink-2); margin: 3px 0; }
.sf-lbl { font: 600 9.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 5px; }
.sf-lbl.sf-branch { color: var(--accent); }
.sf-lbl.sf-converge { color: var(--c-ordering-only); }
.sf-tgt { color: var(--ink); cursor: pointer; border-bottom: 1px dotted var(--line-strong); }
.sf-tgt:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sf-sep { color: var(--faint); margin: 0 4px; }
.step-prose { font: 400 13px var(--sans); color: var(--ink-2); margin: 5px 0 3px; }
.step-visible { margin: 4px 0; }
.sv-lbl { font: 600 9.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.sv-chip { display: inline-block; background: var(--panel-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin: 1px 2px 1px 0; font: 500 10.5px var(--mono); color: var(--ink-2); }
.step-refs { font: 400 10.5px var(--mono); margin: 3px 0; color: var(--muted); word-break: break-all; }
.sr-lbl { font: 600 9.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.step-jump { background: none; border: none; border-bottom: 1px dotted var(--accent); color: var(--accent); font: 500 10.5px var(--mono); padding: 0; cursor: pointer; }
.step-jump:hover { border-bottom-style: solid; }
.step-plain { color: var(--muted); }
.step-flags { margin: 5px 0 2px; }
.step-flag { margin: 3px 0; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.step-flag.flag-needs { border-color: var(--warn); }
.step-flag summary { cursor: pointer; padding: 4px 8px; font: 500 11px var(--mono); color: var(--ink-2); list-style: none; display: flex; align-items: baseline; gap: 7px; }
.step-flag summary::-webkit-details-marker { display: none; }
.step-flag summary::before { content: "▸"; color: var(--muted); font-size: 10px; }
.step-flag[open] summary::before { content: "▾"; }
.flag-kind { font: 700 9.5px var(--mono); letter-spacing: 0.08em; color: var(--pass); text-transform: uppercase; }
.flag-needs .flag-kind { color: var(--warn); }
.flag-code { font: 500 10px var(--mono); color: var(--accent); }
.flag-date { font: 500 10px var(--mono); color: var(--faint); }
.flag-peek { font: italic 10.5px var(--sans); color: var(--faint); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag-ruling { padding: 2px 10px 6px; font: 400 12px var(--sans); color: var(--ink-2); border-top: 1px solid var(--line); }
.flag-origq { padding: 4px 10px 8px; font: 400 11.5px var(--sans); color: var(--muted); }
.flag-origq b { font: 600 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 5px; color: var(--faint); }
.step-actions { margin-top: 6px; }
.step-actions .btn { padding: 1px 10px; font-size: 10.5px; }

/* ── steps GRAPH mode: procedure map on the force renderer ──────────────────── */
#steps-svg { display: block; cursor: grab; touch-action: none; }
#steps-svg.panning { cursor: grabbing; }
#steps-svg .snode { cursor: grab; }
#steps-svg .snode rect { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1; }
#steps-svg .snode-major rect { fill: #131a30; stroke: var(--c-contract); stroke-width: 1.4; }
#steps-svg .snode:hover rect { stroke: var(--accent); }
#steps-svg .snode.selected rect { stroke: var(--accent); stroke-width: 1.8; fill: var(--accent-dim); }
#steps-svg .snode.dimmed { opacity: 0.24; }
#steps-svg .snode.pinned rect { stroke: var(--accent); stroke-dasharray: none; }
#steps-svg .snd-title { font: 600 10.5px var(--mono); fill: var(--ink); pointer-events: none; }
#steps-svg .snode-major .snd-title { fill: var(--ink); font-weight: 700; }
#steps-svg .snd-sub { font: 500 8px var(--mono); fill: var(--muted); pointer-events: none; }
#steps-svg .snd-detail, #steps-svg .snd-detail-txt { display: none; }
#steps-svg.sem-detail .snd-detail, #steps-svg.sem-detail .snd-detail-txt { display: block; }
#steps-svg.sem-detail .snd-compact { display: none; }
#steps-svg .snd-detail-txt { font: 400 8.5px var(--sans); fill: var(--ink-2); pointer-events: none; }
#steps-svg .snd-detail-txt.faint { fill: var(--faint); font-style: italic; }
#steps-svg .snode .ann-dot { fill: var(--human); }
#steps-svg .sedge { fill: none; }
#steps-svg .sedge.dimmed { opacity: 0.1; }

/* ── side panel: step & orphan additions ───────────────────────────────────── */
.p-jump { font: 500 11px var(--mono); color: var(--ink-2); cursor: pointer; padding: 1px 0; word-break: break-all; }
.p-jump:hover { color: var(--accent); }
.p-jump-arrow { color: var(--accent); font-size: 10px; }
.p-flag { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel-2); padding: 5px 8px; margin-bottom: 5px; }
.p-flag.flag-needs { border-color: var(--warn); }
.p-flag .pf-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.p-flag .flag-ruling { border-top: none; padding: 0; }