/* ============================================================
   flow.css · the Halcyon full-width readiness-review builder surface.

   Painted on the Halcyon "Datum" token system (the dark cyan/gold palette).
   The rail, scope banner, topbar, view toggle, CTAs, footer, and theme toggle
   come from halcyon.css + shell.css and repaint with the theme; this file owns
   the builder hero, the FULL-WIDTH adaptive canvas, the review sheet, the
   inspector, the protected-files panel, and the result handoff.

   COLOR DISCIPLINE: one accent. Cyan (--accent family) carries links, active
   state, connections, ports, and the read/info states. Gold (--gold) is
   RESERVED for the deliverable: the Result step glyph, the reviewer-approval
   glow, the packet CTA, and the pending-attention state. Per-step accent rides
   --km-node-color, which flow.js only ever sets to a token (cyan family /
   gold / text-dim), never a raw hex.

   LEGIBILITY: text always in its own panel, never over the board grid. Mono
   micro-labels, hairline datum rules. WCAG-AA on --bg in both themes. No
   text sits on top of other text.

   ADAPTIVE CANVAS: the builder card breaks out to full content width. The
   board lives in a .km-stage-scroll wrapper that clips overflow; the inner
   .km-stage takes an explicit pixel size from flow.js and GROWS as steps are
   added, scrolling inside the wrapper rather than pushing the page wide.

   OVERFLOW: grid tracks use minmax(0,1fr); content columns set min-width:0;
   the board scrolls inside its own wrapper; review tables sit in .table-scroll
   wrappers. No horizontal page scroll at 1280px or 375px.
   ============================================================ */

.km-stage-wrap { max-width: 1320px; }

.km-stage-wrap h2,
.km-stage-wrap h3,
.km-stage-wrap h4 { letter-spacing: -0.02em; }

/* ===== Intro hero ===== */
.km-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.km-hero-copy { min-width: 0; }
.km-hero-title { margin: 10px 0 0; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; font-weight: 600; }
.km-hero-sub { margin: 12px 0 0; color: var(--text-dim); font-size: 15px; line-height: 1.5; max-width: 60ch; }

.km-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.km-hero-actions button[aria-pressed="true"] {
  background: var(--accent-bright); border: 1px solid var(--accent-bright);
  color: #06101f; box-shadow: var(--shadow-teal);
}
.km-hero-actions button[aria-pressed="false"] {
  background: var(--surface); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none;
}

.km-hero-plate { display: flex; align-items: stretch; min-width: 0; }
.km-datum-card {
  width: 100%; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 18px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--accent-pale), transparent 56%),
    var(--surface-2);
}
.km-datum-rule { border: 0; border-top: 1px solid var(--border-soft); margin: 2px 0; }
.km-datum-row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.km-datum-row span { color: var(--text-dim); font-family: var(--mono); font-size: 12px; min-width: 0; }
.km-datum-row strong {
  color: var(--accent-deep); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; text-align: right; min-width: 0;
}
.src-tag.accent { color: var(--accent-deep); }

/* ===== Builder card — FULL-BLEED =====
   The card breaks out of the 1320px .km-stage-wrap so the workbench, and the
   canvas inside it, run the entire content width. Negative margins pull it to
   the .stage padding edges; the inner workbench then gives the board as much
   room as the viewport allows. */
.km-builder-card {
  padding: 0; overflow: hidden;
  /* full-bleed: pull to the .stage padding edges. The pull MUST equal the
     .stage horizontal padding at each breakpoint (28px desktop, 16px phone),
     or the card overflows by the difference. */
  margin-left: -28px;
  margin-right: -28px;
  border-radius: 0;
  border-left: 0; border-right: 0;
}
.km-builder-card:hover { transform: none; }
.km-builder-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: 0; padding: 20px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--border);
}
.km-panel-title { margin: 0; color: var(--text); font-size: 17px; font-weight: 600; }
.km-builder-head .muted { margin: 4px 0 0; font-size: 13px; max-width: 80ch; }
.km-builder-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; flex-shrink: 0; }

/* the workbench: a slim palette, the full-width canvas, a slim inspector.
   minmax(0, 1fr) on the center column lets the board claim every spare pixel. */
.km-workbench {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 312px;
  min-height: 660px;
  background: var(--surface);
}

.km-palette, .km-inspector { background: var(--surface); min-width: 0; }
.km-palette { padding: 16px; border-right: 1px solid var(--border); }
.km-inspector { padding: 18px; border-left: 1px solid var(--border); }

.km-panel-label {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin-bottom: 12px;
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

.km-panel-label button,
.km-map-actions button,
.km-palette-foot button,
.km-inspector button:not(.km-packet-link) {
  min-height: 34px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--mono); font-size: 11px; font-weight: 600; cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.km-panel-label button { min-height: 28px; padding: 4px 8px; }

.km-panel-label button:hover,
.km-map-actions button:hover,
.km-palette-foot button:hover,
.km-inspector button:not(.km-packet-link):hover,
.km-node-type:hover,
.km-preset:hover {
  border-color: var(--border-accent); background: var(--accent-pale);
}

.km-node-library, .km-presets, .km-palette-foot { display: grid; gap: 9px; }

.km-node-type {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--km-node-color, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.km-node-type:hover { transform: translateY(-1px); }
.km-node-icon {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid currentColor; border-radius: 6px;
  color: var(--km-node-color, var(--accent));
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.km-node-copy { display: grid; gap: 1px; min-width: 0; }
.km-node-copy strong { color: var(--text); font-size: 13px; font-weight: 650; }
.km-node-copy span { color: var(--text-dim); font-size: 11px; line-height: 1.3; }

.km-preset-head {
  margin: 17px 0 4px; padding-top: 13px; border-top: 1px solid var(--border-soft);
  color: var(--text-dimmer); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.km-preset-note { color: var(--text-dim); font-size: 12px; line-height: 1.4; margin-bottom: 9px; }

.km-preset {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.km-preset:hover { transform: translateY(-1px); }
.km-preset-copy { display: grid; gap: 1px; min-width: 0; }
.km-preset-copy strong { font-size: 12.5px; font-weight: 650; color: var(--text); }
.km-preset-dept {
  color: var(--text-dim); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.km-preset i {
  display: grid; place-items: center; width: 19px; height: 19px;
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--accent-deep); font-family: var(--mono); font-size: 11px; font-style: normal; flex-shrink: 0;
}
.km-palette-foot { margin-top: 16px; }

/* ===== Center column + adaptive canvas ===== */
.km-center { min-width: 0; background: var(--paper); display: flex; flex-direction: column; }
.km-map-view { flex: 1; min-height: 660px; display: flex; flex-direction: column; }

.km-map-toolbar {
  min-height: 58px; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.km-map-title { min-width: 0; }
.km-map-title .eyebrow { color: var(--accent); }
.km-map-title strong {
  display: block; margin-top: 3px; color: var(--text);
  font-size: 12px; font-weight: 650; letter-spacing: 0.4px;
}
.km-map-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the scroll wrapper takes the available width + a generous height and clips
   the inner stage. The stage GROWS (explicit px from flow.js) and scrolls
   inside here, so the page never widens. */
.km-stage-scroll {
  position: relative;
  flex: 1;
  min-height: 540px;
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 90% at 18% 8%, var(--accent-pale), transparent 52%),
    var(--surface);
}
/* hold-and-drag pan: the board reads grabbable at rest and grabbing while a
   reader is dragging the view. The cursor lives on the scroll wrapper; the
   touch-action stops the browser from also scrolling the page on a drag so the
   pan stays smooth on a touchscreen. */
.km-stage-scroll.is-grabbable { cursor: grab; }
.km-stage-scroll.is-grabbable .km-stage { touch-action: none; }
.km-stage-scroll.is-panning { cursor: grabbing; }
.km-stage-scroll.is-panning .km-stage { cursor: grabbing; }
/* a step keeps its own move cursor so dragging a step never reads as panning */
.km-stage-scroll.is-grabbable .km-node { cursor: grab; }
.km-stage-scroll.is-grabbable .km-node:active { cursor: grabbing; }

.km-stage {
  position: relative;
  /* width + height are set inline by flow.js (adaptive). These are fallbacks. */
  width: 1040px; height: 560px;
  background-image:
    linear-gradient(var(--accent-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-pale) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
}

.km-edges, .km-nodes { position: absolute; inset: 0; }
.km-edges { width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.km-edge { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; opacity: 0.9; }
.km-edge-halo { fill: none; stroke: var(--accent-soft); stroke-width: 7; stroke-linecap: round; }
.km-temp-edge { fill: none; stroke: var(--accent-bright); stroke-width: 2.25; stroke-dasharray: 5 5; }

/* ===== Play the review ===== */
.km-play-btn[aria-pressed] { border-color: var(--accent); color: var(--accent-deep); }
.km-play-btn::before {
  content: "\25B6"; margin-right: 6px; font-size: 9px; color: var(--accent-deep);
}
.km-play-btn[aria-pressed]::before { content: "\25A0"; }

.km-token-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 5;
}
.km-play-token {
  fill: var(--accent-bright); stroke: var(--surface); stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--accent));
}

/* a step the marker has passed reads lit in cyan. the ring eases in so the
   step glows up rather than popping as the marker arrives */
.km-node.is-traveled { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale), var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  .km-node.is-traveled { transition: box-shadow 240ms ease, border-color 240ms ease; }
}
/* the step the marker is sitting on right now: the highlight glides in with the
   marker, ease-in-out matching the token's own easing so the two move as one */
.km-node.is-here {
  border-color: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-pale), var(--shadow);
  transition: box-shadow 260ms cubic-bezier(.4, 0, .2, 1), border-color 260ms cubic-bezier(.4, 0, .2, 1);
}
/* the reviewer step holds longest, so it reads a steady gold-adjacent glow
   while a person decides. cyan node, gold ring: the step is workspace-staged,
   the call is a person's */
.km-node.is-gate-hold {
  border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-pale), var(--shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .km-node.is-gate-hold { animation: km-gate-pulse 1200ms ease-in-out 1; }
}
@keyframes km-gate-pulse {
  0%   { box-shadow: 0 0 0 3px var(--gold-pale), var(--shadow); }
  50%  { box-shadow: 0 0 0 7px var(--gold-soft), var(--shadow); }
  100% { box-shadow: 0 0 0 5px var(--gold-pale), var(--shadow); }
}
/* the result the route lands on reads gold, the deliverable */
.km-node.is-landed {
  border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale), var(--shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .km-node.is-landed { animation: km-land-pop 360ms cubic-bezier(.34,1.56,.64,1) 1; }
}
@keyframes km-land-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* ===== Live step-type badge layer ===== */
.km-badge-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

.km-step-badge {
  position: absolute; transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; white-space: nowrap;
  border: 1px solid var(--border-accent); border-radius: 999px;
  background: var(--surface); color: var(--accent-deep);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
}
.km-step-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.km-step-badge.role-work { border-color: var(--border-accent); color: var(--accent-deep); }
.km-step-badge.role-work .km-step-badge-dot { background: var(--accent); }
.km-step-badge.role-suggestion {
  border-style: dashed; border-color: var(--accent-soft); color: var(--text-dim);
}
.km-step-badge.role-suggestion .km-step-badge-dot { background: var(--accent-soft); }
.km-step-badge.role-gate { border-color: var(--gold); color: var(--gold-deep); }
.km-step-badge.role-gate .km-step-badge-dot { background: var(--gold); }
.km-step-badge.role-result { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-pale); }
.km-step-badge.role-result .km-step-badge-dot { background: var(--gold); }

.km-step-badge.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .km-step-badge { transition: opacity 260ms ease, transform 260ms ease; transform: translate(-50%, -85%); }
  .km-step-badge.is-on { transform: translate(-50%, -100%); }
}

.km-play-edge { fill: none; stroke: var(--accent-bright); stroke-width: 2.75; stroke-linecap: round; }

/* ===== Step-type legend ===== */
.km-step-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  min-height: 38px; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2px;
}
.km-step-leg { display: inline-flex; gap: 7px; align-items: center; }
.km-step-leg i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dimmer); flex-shrink: 0; }
.km-step-leg.role-work i { background: var(--accent); }
.km-step-leg.role-suggestion i { background: var(--accent-soft); border: 1px dashed var(--accent); }
.km-step-leg.role-gate i { background: var(--gold); }
.km-step-leg.role-result i { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }

.km-play-status {
  min-height: 18px; margin: 0; padding: 9px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11.5px; line-height: 1.5; letter-spacing: 0.2px;
}
.km-play-status:empty { display: none; }

/* ===== Steps ===== */
.km-node {
  position: absolute; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px; align-items: center;
  width: 188px; min-height: 66px; padding: 10px 11px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--km-node-color, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow); color: var(--text);
  cursor: grab; user-select: none; z-index: 3;
}
.km-node:active { cursor: grabbing; }
.km-node.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow);
}
.km-node-icon-block {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--km-node-color, var(--accent)); border-radius: 6px;
  color: var(--km-node-color, var(--accent));
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.km-node-main { min-width: 0; }
.km-node-title { display: block; font-size: 12px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.km-node-state {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  color: var(--text-dim); font-family: var(--mono); font-size: 10.5px;
}
.km-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--km-status, var(--text-dimmer)); flex-shrink: 0; }

.km-node-port {
  position: absolute; display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface);
  cursor: crosshair; z-index: 4;
  transition: box-shadow 140ms ease, background 140ms ease;
}
.km-node-port.in { left: -8px; top: 50%; transform: translateY(-50%); }
.km-node-port.out { right: -8px; top: 50%; transform: translateY(-50%); }
.km-node-port.is-armed { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }
.km-node-port.is-target { box-shadow: 0 0 0 4px var(--accent-pale); }

.km-node-del {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text-dim); flex-shrink: 0; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.km-node-del:hover { border-color: var(--warn-color); color: var(--warn-color); }
.km-del-glyph { width: 11px; height: 11px; }
.km-del-glyph path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }

.km-status-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  min-height: 38px; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2px;
}
.km-status-legend span { display: inline-flex; gap: 7px; align-items: center; }
.km-leg { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dimmer); }
.km-leg.is-active, .km-leg.is-ok { background: var(--ok); }
.km-leg.is-ready { background: var(--accent); }
.km-leg.is-pending { background: var(--gold); }
.km-leg.is-locked { background: var(--text-dimmer); }

/* ===== Review view ===== */
.km-review-view { flex: 1; min-height: 540px; padding: 14px; background: var(--surface); }
.km-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.km-review-card {
  min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper); overflow: hidden; min-width: 0;
}
.km-review-card h3 {
  margin: 0; padding: 11px 13px; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.km-review-card h4 {
  margin: 0; padding: 9px 11px; border-bottom: 1px solid var(--border-soft);
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}

.km-review-table, .km-ledger-list, .km-validation-list {
  display: grid; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.km-review-row, .km-ledger-row, .km-validation-row, .km-output-row {
  display: grid; border-bottom: 1px solid var(--border-soft);
}
.km-review-row { grid-template-columns: 32px minmax(110px, 1fr) 110px 96px 108px; min-width: 480px; }
.km-output-row { grid-template-columns: minmax(92px, 0.85fr) minmax(160px, 1.3fr) minmax(120px, 0.9fr) 76px; min-width: 470px; }

.km-review-row span,
.km-ledger-row span,
.km-validation-row span,
.km-output-row span {
  min-width: 0; padding: 8px 9px; border-right: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 12px; overflow-wrap: anywhere;
}
.km-review-row span:last-child,
.km-ledger-row span:last-child,
.km-validation-row span:last-child,
.km-output-row span:last-child { border-right: 0; }

.km-review-row.is-head, .km-output-row.is-head {
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--mono); text-transform: uppercase;
}

.km-ledger-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 170px; }
.km-ledger-pair > div { min-width: 0; }
.km-ledger-pair > div + div { border-left: 1px solid var(--border); }
.km-ledger-row { grid-template-columns: 30px minmax(0, 1fr); }
.km-ledger-list.is-locked .km-ledger-row span:last-child::after {
  content: " protected"; color: var(--gold-deep);
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
}
.km-validation-row { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1.15fr); min-width: 470px; }

.km-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
}
.km-status-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--km-status, var(--text-dimmer)); flex-shrink: 0;
}

/* ===== Inspector ===== */
.km-inspector-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px;
}
.km-inspector-head h3 { margin: 0; font-size: 18px; line-height: 1.12; color: var(--text); }
.km-inspector-head > div { min-width: 0; }
.km-inspector-head span {
  display: block; margin-bottom: 3px; color: var(--text-dim);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
}
.km-inspector-type {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--km-node-color, var(--border-accent)); border-radius: 8px;
  color: var(--km-node-color, var(--accent-deep));
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}

.km-field { display: grid; gap: 6px; margin-bottom: 12px; min-width: 0; }
.km-field label {
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.km-field input, .km-field select {
  width: 100%; max-width: 100%; min-height: 36px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 14px;
}
.km-field input:focus, .km-field select:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

.km-inspector-section { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.km-inspector-section-title {
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.km-check-list, .km-action-list { display: grid; gap: 8px; margin-top: 8px; }
.km-check-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12px; }
.km-check-item strong { font-weight: 600; min-width: 0; }
.km-check-item span:last-child { color: var(--accent-deep); font-family: var(--mono); flex-shrink: 0; }

.km-warning {
  margin: 14px 0; padding: 10px 12px;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: var(--gold-pale); color: var(--gold-deep); font-size: 12px; line-height: 1.45;
}
.km-primary {
  background: var(--accent-bright) !important; border-color: var(--accent-bright) !important;
  color: #06101f !important; box-shadow: var(--shadow-teal);
}
.km-empty { padding: 16px; color: var(--text-dim); font-size: 13px; }

/* the inspector shortcut to the result surface (gold: it leads to the packet) */
.km-packet-link {
  display: block; margin-top: 14px; text-align: center;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--gold); color: #1a1206;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
}
.km-packet-link:hover { filter: brightness(1.04); }

/* the protected-files strip under the board: its own panel, plain words, in a
   wrapping row so it never sits over the canvas or over other text. */
.km-protected-strip {
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface);
}
.km-protected-head {
  color: var(--gold-deep); font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 8px;
}
.km-protected-list {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.km-protected-strip .km-locked-item {
  min-height: 30px; padding: 5px 9px; flex: 0 1 auto;
}
.km-protected-strip .km-locked-item strong { font-size: 11px; }

/* the protected-files panel rows. plain lock glyph, never a bare "L". */
.km-locked-item {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  min-height: 40px; padding: 8px 10px;
  border: 1px dashed var(--subtle); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-dim); font-size: 12px;
}
.km-locked-item strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.km-lock-glyph { width: 14px; height: 14px; flex-shrink: 0; }
.km-lock-glyph rect { fill: var(--gold-pale); stroke: var(--gold); stroke-width: 1; }
.km-lock-glyph path { stroke: var(--gold); stroke-width: 1.2; }

/* ===== "What would happen" preview slot ===== */
.km-preview-slot { padding: 0 clamp(18px, 3vw, 32px); }
.km-preview-slot:empty { padding: 0; }
.km-preview-slot .km-example-flow { margin: 16px 0 22px; }

/* ===== Result handoff ===== */
.km-result-card { padding: 24px; }
.km-result-card:hover { transform: none; }
.km-result-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.km-result-head > div { min-width: 0; }

.km-next-card {
  padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid var(--border-accent); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--surface-3);
}
.km-next-label {
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;
}
.km-next-body { color: var(--text); font-size: 14px; line-height: 1.5; }
.km-next-meta { margin-top: 8px; color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }
.km-next-meta strong { color: var(--gold-deep); }

.km-result-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px;
}
.km-program-card {
  display: block; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); min-width: 0;
  transition: border-color 160ms ease, transform 160ms ease;
}
.km-program-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.km-program { color: var(--text); font-size: 15px; font-weight: 650; }
.km-phase {
  margin: 2px 0 8px; color: var(--accent-deep);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
}
.km-program-card .muted { font-size: 12.5px; line-height: 1.45; }

.km-result-cta { display: flex; justify-content: flex-start; }

[hidden] { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 1180px) {
  .km-hero { grid-template-columns: minmax(0, 1fr); }
  /* below this width, stack the workbench so the canvas spans the full column.
     The board still grows + scrolls inside its wrapper. */
  .km-workbench { grid-template-columns: minmax(0, 1fr); }
  .km-palette, .km-inspector { border-left: 0; border-right: 0; }
  .km-center { order: 1; }
  .km-palette { order: 2; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .km-inspector { order: 3; border-top: 1px solid var(--border); }
  .km-node-library, .km-presets { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}

@media (max-width: 980px) {
  .km-result-links { grid-template-columns: minmax(0, 1fr); }
  .km-review-grid, .km-ledger-pair { grid-template-columns: minmax(0, 1fr); }
  .km-ledger-pair > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 720px) {
  /* the full-bleed pull is keyed to the desktop .stage padding; at the phone
     padding the negative margin must match so the card never overflows. */
  .km-builder-card {
    margin-left: calc(-1 * 16px);
    margin-right: calc(-1 * 16px);
  }
  .km-hero, .km-result-card { padding: 18px; }
  .km-builder-head { padding: 18px; flex-direction: column; align-items: flex-start; }
  .km-builder-meta { justify-content: flex-start; }
  .km-hero-actions, .km-map-actions { align-items: stretch; }
  .km-hero-actions button { width: 100%; text-align: center; }
  .km-stage-scroll { max-height: 60vh; }
  .km-result-cta .packet-cta { width: 100%; text-align: center; }
}

/* ===== Print =====
   The default print path (no flow-print) keeps the whole page readable on
   portrait paper, the way the inspector Print button always behaved. */
@media print {
  .ti-shell-nav, .ti-theme-toggle, .ti-ask, .view-toggle,
  .km-palette, .km-inspector, .km-hero-actions, .km-map-actions { display: none !important; }
  .halcyon-shell, .km-workbench, .km-result-links { display: block; }
  .halcyon-main { max-width: none; padding: 0; }
  .km-builder-card { margin: 0; }
  .km-stage-scroll { max-height: none; overflow: visible; }
}

/* ===== Print flow: the whole node graph on ONE landscape page =====
   the founder's ask. When the Print flow button runs, flow.js sets body.km-flow-printing
   and writes the fit scale + shift onto the stage as custom properties. This
   block turns the page landscape, hides everything except the board, and scales
   the graph so it fits one page with no clipping and no second page. The scale
   and shift are computed from the real node extent in flow.js. */
/* land the page horizontal so a wide left-to-right review fits across it */
@page { size: landscape; margin: 0.4in; }

@media print {
  body.km-flow-printing { background: #fff; }

  /* hide every chrome surface; show only the board and a thin caption */
  body.km-flow-printing .halcyon-rail,
  body.km-flow-printing .topbar,
  body.km-flow-printing .scope-banner,
  body.km-flow-printing .km-hero,
  body.km-flow-printing .km-builder-head,
  body.km-flow-printing .km-palette,
  body.km-flow-printing .km-inspector,
  body.km-flow-printing .km-map-toolbar,
  body.km-flow-printing .km-protected-strip,
  body.km-flow-printing .km-step-legend,
  body.km-flow-printing .km-status-legend,
  body.km-flow-printing .km-play-status,
  body.km-flow-printing .km-review-view,
  body.km-flow-printing .km-result-card,
  body.km-flow-printing .page-footer,
  body.km-flow-printing .km-preview-slot,
  body.km-flow-printing .ti-shell-nav,
  body.km-flow-printing .ti-theme-toggle,
  body.km-flow-printing .ti-ask,
  body.km-flow-printing .view-toggle,
  /* the runtime-injected floating chrome (preview dock, confidentiality
     notice, Ask-your-AI pill, the page tour starter + nudge + spotlight) all
     stay off the printed board */
  body.km-flow-printing #ti-topbar,
  body.km-flow-printing #ti-dock,
  body.km-flow-printing #ti-confnotice,
  body.km-flow-printing .vc-ask,
  body.km-flow-printing #ti-page-tour-launch,
  body.km-flow-printing .ti-dlt-launch,
  body.km-flow-printing .ti-dlt-nudge,
  body.km-flow-printing .ti-dlt-scrim,
  body.km-flow-printing .ti-dlt-ring,
  body.km-flow-printing .ti-dlt-card { display: none !important; }

  body.km-flow-printing,
  body.km-flow-printing .halcyon-shell,
  body.km-flow-printing .halcyon-main,
  body.km-flow-printing .km-stage-wrap,
  body.km-flow-printing .km-builder-card,
  body.km-flow-printing .km-workbench,
  body.km-flow-printing .km-center,
  body.km-flow-printing .km-map-view {
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important;
    min-height: 0 !important; height: auto !important;
    border: 0 !important; box-shadow: none !important; background: #fff !important;
  }

  /* the scroll wrapper stops clipping: the whole board prints */
  body.km-flow-printing .km-stage-scroll {
    overflow: visible !important;
    max-height: none !important; min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
  }

  /* the print box is the scaled graph footprint, so the page is sized to the
     graph and never pushes a second page */
  body.km-flow-printing .km-stage {
    width: var(--km-print-w, 960px) !important;
    height: var(--km-print-h, 660px) !important;
    background-image: none !important;   /* drop the grid lines for clean paper */
    overflow: visible !important;
  }

  /* shift the graph's top-left to the box origin, then scale to fit. A wrapping
     layer is not needed: the inner edge/node/token layers all ride the stage. */
  body.km-flow-printing .km-edges,
  body.km-flow-printing .km-nodes,
  body.km-flow-printing .km-token-layer,
  body.km-flow-printing .km-badge-layer {
    /* scale first, then shift, both about the top-left origin: a point p maps to
       scale * (p + shift), so shift = -bounds.min puts the graph's corner at the
       page origin and scale fits the rest. order matters: scale() before
       translate(). */
    transform: scale(var(--km-print-scale, 1)) translate(var(--km-print-shift-x, 0), var(--km-print-shift-y, 0));
    transform-origin: 0 0;
  }

  /* the traveling marker + its play edges are runtime-only; never on paper */
  body.km-flow-printing .km-play-token,
  body.km-flow-printing .km-play-edge { display: none !important; }

  /* steps print with crisp ink, no live-play rings */
  body.km-flow-printing .km-node {
    box-shadow: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.km-flow-printing .km-node-del,
  body.km-flow-printing .km-node-port { display: none !important; }

  body.km-flow-printing .km-edge,
  body.km-flow-printing .km-edge-halo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .km-packet-link, .km-node, .km-program-card, .km-node-type, .km-preset { transition: none; }
  .km-node.is-here, .km-node.is-traveled { transition: none; }
  .km-program-card:hover, .km-node-type:hover, .km-preset:hover { transform: none; }
}