/* ============================================================================
   flowRS — "Instrument" design language.
   A precision instrument for building software: layered graphite surfaces, a
   cyan→emerald "flow" brand, Geist type, tactile controls with real presence.
   Legacy token names (--panel/--border/…) are remapped onto the new system so
   every existing widget upgrades for free.
   ============================================================================ */
/* The tokens live in styles/tokens.css (linked before this file). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Deep instrument ground: a faint upper glow over graphite. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(70, 166, 255, 0.06), transparent 60%),
    radial-gradient(90% 60% at 92% 4%, rgba(53, 224, 196, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Selection + focus + scrollbars, systemwide */
::selection { background: rgba(53, 224, 196, 0.28); }
:focus-visible { outline: none; box-shadow: var(--ring); }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fr-border-3); }

.flowrs-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Header */
/* Wraps rather than overflowing. The header holds more controls than 1280px fits, so in
   one unbroken row Tidy and Lessons sat past the right edge, the whole page scrolled
   sideways to reach them, and the canvas went with it: a lesson's left-hand nodes ended up
   off screen. Each added control (the zoom group) pushed it further. */
.flowrs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-1);
  position: relative;
  z-index: 5;
}
/* Wordmark: a small flow-gradient mark + "flowRS" */
.flowrs-logo {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flowrs-logo::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--flow);
  box-shadow: 0 0 12px -2px var(--accent-glow);
}

/* Segmented tab switcher (Front / Back / Code) */
.flowrs-levels {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.flowrs-levels button {
  background: transparent;
  border: none;
  color: var(--text-2);
  border-radius: 7px;
  padding: 5px 14px;
  font: 500 13px var(--font-ui);
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}
.flowrs-levels button:hover { color: var(--text); }
.flowrs-levels button.active {
  background: var(--panel-3);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
}

/* Header buttons — secondary by default, tiered by class */
.flowrs-header button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  font: 500 13px var(--font-ui);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.flowrs-header button:hover { border-color: var(--border-2); background: var(--panel-3); }
.flowrs-header button:active { transform: translateY(1px); }
.flowrs-icon-btn { min-width: 32px; font-size: 15px; line-height: 1; color: var(--text-2); }
.flowrs-generate { margin-left: auto; }
/* Primary action: Compile ▶ carries the flow gradient */
.flowrs-compile {
  background: var(--flow) !important;
  border: none !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 14px -4px var(--accent-glow);
}
.flowrs-compile:hover { filter: brightness(1.06); }
.flowrs-run { color: var(--accent); border-color: var(--border-2); }

/* Body */
.flowrs-body { position: relative; flex: 1; min-height: 0; }

.flowrs-visual { display: flex; height: 100%; }
.flowrs-tools {
  width: 280px;
  padding: 12px 16px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow: auto;
}

/* Ambient AI agent bar — below the header, present on every surface */
.flowrs-agent-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.flowrs-agent-glyph {
  background: var(--flow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 15px;
}
.flowrs-agent-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 13px;
  font: 13px var(--font-ui);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.flowrs-agent-input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.flowrs-agent-input::placeholder { color: var(--muted); }
.flowrs-agent-mic,
.flowrs-agent-voice {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-2);
  transition: border-color var(--fast), background var(--fast);
}
.flowrs-agent-mic:hover, .flowrs-agent-voice:hover { border-color: var(--border-2); }
.flowrs-agent-mic.on { background: var(--crit); border-color: var(--crit); color: var(--fr-accent-ink); box-shadow: 0 0 14px -3px var(--crit); }
.flowrs-agent-voice.on { background: var(--good); border-color: var(--good); color: var(--accent-ink); }
/* Alternatives: the person marks a request open. A switch with presence: it lights with the
   flow gradient's edge when on, like the other toggles. */
.flowrs-agent-alts {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 11px;
  cursor: pointer;
  font: 500 12px var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: border-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.flowrs-agent-alts:hover { border-color: var(--border-2); color: var(--text); }
.flowrs-agent-alts:focus-visible { outline: none; box-shadow: var(--ring); }
.flowrs-agent-alts.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  box-shadow: inset 0 1px 0 var(--hi), 0 0 14px -4px var(--accent-glow);
}
.flowrs-agent-send {
  background: var(--flow);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-md);
  padding: 8px 16px;
  font: 600 13px var(--font-ui);
  cursor: pointer;
  box-shadow: 0 2px 14px -4px var(--accent-glow);
  transition: filter var(--fast), transform var(--fast);
}
.flowrs-agent-send:hover:not(:disabled) { filter: brightness(1.06); }
.flowrs-agent-send:active { transform: translateY(1px); }
.flowrs-agent-send:disabled { opacity: 0.55; cursor: default; }
.flowrs-agent-reply {
  color: var(--muted);
  font-size: 12px;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flowrs-block-diagram { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.flowrs-block-diagram h2 { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--muted); }

/* Live wire probes */
/* One row, always — same reason as `.flowrs-diags`, but this one was far worse.
   It shows the value on every wire, and it wrapped. Load the audio lesson, whose wires
   carry 4800-sample buffers, and the bar grew from 34px to 899px: the canvas is `flex: 1`
   below it, so the block diagram was squeezed to ZERO height and disappeared completely.
   Found while filming the tutorial for it. */
.flowrs-probes {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 0 0 auto;
  gap: 8px;
  padding: 6px 16px;
  background: var(--fr-surface-sunk);
  border-bottom: 1px solid var(--border);
  min-height: 30px;
  align-items: center;
}
.flowrs-probes > * {
  flex: 0 0 auto;
}
.flowrs-probe {
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
}
.flowrs-probe b { color: var(--accent); font-weight: 600; }
.flowrs-canvas-host { flex: 1; min-height: 0; position: relative; }
.flowrs-webgpu-canvas { width: 100%; height: 100%; display: block; }

/* Crisp DOM label overlay over the WebGPU canvas */
.flowrs-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flowrs-node-label {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--fr-white);
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.flowrs-node-label.ran { color: var(--fr-warn); }
.flowrs-probe-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 10px/1.2 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
  background: rgba(10, 14, 20, 0.85);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  pointer-events: none;
}
/* The chip shown on a selected wire. Selection on a WebGPU canvas is otherwise only a
   slightly heavier stroke, which tells a user nothing about what they can now do — so the
   chip names the connection and carries the button that removes it. */
.flowrs-wire-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font: 10px/1.2 ui-monospace, Menlo, monospace;
  color: var(--fr-text);
  background: rgba(12, 18, 28, 0.95);
  border: 1px solid var(--fr-accent-2);
  border-radius: 4px;
  padding: 2px 4px 2px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  /* `.flowrs-overlay` is pointer-events:none so clicks fall through to the canvas. The
     chip's delete button has to opt back in, or it renders perfectly and cannot be
     pressed — the same trap the wire-error banner hit. */
  pointer-events: auto;
}
.flowrs-wire-chip button {
  all: unset;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  color: var(--fr-crit-text);
}
.flowrs-wire-chip button:hover {
  background: rgba(255, 82, 82, 0.2);
}
/* Hold, on the wire chip. A checkbox rather than a second button: the state is on or
   off, and the chip's one button stays the one that deletes. */
.flowrs-wire-hold {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--held);
}
.flowrs-wire-hold input {
  margin: 0;
  accent-color: var(--held);
  cursor: pointer;
}
/* Step / Reset and the step shown, at the head of the probes bar when a wire is held. */
.flowrs-held {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flowrs-held button {
  font: 11px/1.4 var(--font-mono);
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--held);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: background var(--fast);
}
.flowrs-held button:hover {
  background: rgba(192, 132, 252, 0.15);
}
.flowrs-held-at {
  font: 11px/1.4 var(--font-mono);
  color: var(--held);
}
.flowrs-held-error {
  font: 11px/1.4 var(--font-mono);
  color: var(--crit);
}
.flowrs-port-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--fr-text);
  border: 1px solid var(--fr-surface-sunk);
  pointer-events: none;
}

/* A port that declares named axes (F1 dimensional wires) wears a ring, so the shape
   promise is legible before hovering. The ring uses the port's own colour via
   currentColor-adjacent layering rather than a new hue — the palette already encodes
   "what flows"; this encodes "and it is dimensioned". */
.flowrs-port-dot--shaped {
  width: 10px;
  height: 10px;
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Wire-time rejection notice. Sits over the canvas, reads as an instrument fault
   readout rather than a web toast: mono, hairline, graphite panel, critical accent. */
.flowrs-wire-error {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 40;
  /* The notice lives in `.flowrs-overlay`, which is `pointer-events: none` so clicks
     fall through to the WebGPU canvas underneath. Without re-enabling them here the
     banner renders correctly and its dismiss button cannot be pressed at all — every
     click lands on the canvas behind it. Found by the e2e dismiss test. */
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100% - 32px));
  padding: 9px 10px 9px 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--crit);
  border-radius: var(--r-md, 8px);
  box-shadow:
    inset 0 1px 0 var(--hi),
    var(--sh-2);
}

.flowrs-wire-error__icon {
  color: var(--crit);
  font-size: 14px;
  line-height: 1;
  flex: none;
}

.flowrs-wire-error__close {
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 5px);
  cursor: pointer;
  transition: color var(--fast, 0.12s) var(--ease, ease), border-color var(--fast, 0.12s) var(--ease, ease);
}

.flowrs-wire-error__close:hover {
  color: var(--text);
  border-color: var(--border-2);
}

.flowrs-wire-error__close:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.flowrs-hint { color: var(--muted); font-size: 13px; }

/* Front Panel control strip */
/* Front panel: controls (inputs) + indicators (live outputs) */
.flowrs-front {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}
.flowrs-front-col { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.flowrs-front-h {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-3);
}
.flowrs-front-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* An instrument label: mono, tracked, quiet — the LabVIEW nameplate feel. */
.flowrs-ctl { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.flowrs-ctl-label,
.flowrs-ind-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  min-width: 42px;
}
.flowrs-slider { width: 110px; accent-color: var(--accent); }
.flowrs-ctl-num { width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.flowrs-ctl-text { width: 120px; }
.flowrs-ctl-num,
.flowrs-ctl-text {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  font: 12px var(--font-mono);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.flowrs-ctl-num:focus,
.flowrs-ctl-text:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
/* Pill toggle — glows with the flow gradient when on */
.flowrs-toggle {
  min-width: 46px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--fast);
}
.flowrs-toggle:hover { border-color: var(--border-2); }
.flowrs-toggle.on {
  background: var(--flow);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 0 16px -4px var(--accent-glow);
}

.flowrs-ind { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.flowrs-ind-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
/* Detection readout: a compact box table under the count. */
.flowrs-det { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.flowrs-det-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flowrs-det-table td { padding: 1px 8px 1px 0; white-space: nowrap; }
.flowrs-det-class { color: var(--text); font-weight: 500; }
.flowrs-det-score { color: var(--accent); }
.flowrs-det-geom { color: var(--text-2); }
.flowrs-det-more { color: var(--text-2); font-size: 11px; }

/* Test record: the report a run is, rather than the JSON a wire carries it in. */
.flowrs-report { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.flowrs-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flowrs-report-title { color: var(--text); font-weight: 500; }
.flowrs-report-note {
  color: var(--text-2);
  font-size: 11px;
  font-style: italic;
  max-width: 44ch;
}
.flowrs-report-phase { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.flowrs-report-phase-name { color: var(--text-2); font-size: 11px; }
.flowrs-report-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flowrs-report-table td { padding: 1px 10px 1px 0; white-space: nowrap; }
.flowrs-report-name { color: var(--text); }
.flowrs-report-reading { color: var(--accent); }
.flowrs-report-limits { color: var(--muted); }
.flowrs-report-verdict { font-weight: 600; }
/* One vocabulary for a verdict, wherever it is shown. Skip is neither good nor bad: a
   skipped characteristic is one the record cannot vouch for. */
.flowrs-verdict {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.flowrs-verdict-pass { color: var(--good); }
.flowrs-verdict-fail { color: var(--crit); }
.flowrs-verdict-error { color: var(--warn); }
.flowrs-verdict-skip { color: var(--muted); }

/* Models panel — the OPFS-backed model store. */
.flowrs-model-import { display: block; margin: 10px 0 0; cursor: pointer; }
.flowrs-model-import .flowrs-model-btn { display: inline-block; }
.flowrs-model-save { display: flex; gap: 8px; margin: 10px 0; }
.flowrs-model-name {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.flowrs-model-btn {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-2, var(--bg));
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.flowrs-model-btn:hover { border-color: var(--accent); color: var(--accent); }
.flowrs-model-list { list-style: none; margin: 8px 0 0; padding: 0; }
.flowrs-model-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.flowrs-model-file {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.flowrs-model-size {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flowrs-model-ok { color: var(--good); font-size: 12px; margin: 6px 0; }
.flowrs-model-err { color: var(--crit); font-size: 12px; margin: 6px 0; }
.flowrs-model-quota { margin-top: 10px; }

/* Generated source on a wire (ml.export): scrolls inside its own box so a few KB
   of Rust never stretches the panel. */
.flowrs-ind-source {
  max-height: 220px;
  max-width: 100%;
  overflow: auto;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
  tab-size: 4;
}

.flowrs-meter {
  width: 90px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.flowrs-meter-fill {
  height: 100%;
  background: var(--flow);
  transition: width var(--fast);
}
/* LED — a real indicator lamp with bloom when lit */
.flowrs-led {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fr-led-off);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: box-shadow var(--med), background var(--med);
  flex: none;
}
.flowrs-led.on {
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--fr-accent) 60%, var(--fr-white)), var(--good) 70%);
  box-shadow: 0 0 11px 1px var(--accent-glow), 0 0 4px var(--good), inset 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Rotary knob — a machined dial: beveled body, glowing pointer */
.flowrs-knob {
  width: 40px;
  height: 40px;
  cursor: ns-resize;
  touch-action: none;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--fr-border-2), var(--fr-knob-lo) 72%);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.flowrs-knob-face { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.flowrs-knob-ind {
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--accent-glow));
}
.flowrs-dial { background: radial-gradient(circle at 50% 32%, var(--fr-border-2), var(--fr-knob-lo) 72%); }
.flowrs-ind-gauge { flex-direction: column; align-items: center; gap: 3px; }
.flowrs-gauge { width: 86px; height: auto; overflow: visible; }
.flowrs-gauge-text {
  fill: var(--text);
  font: 500 15px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.flowrs-chart { width: 104px; height: 30px; }

/* Game preview: a live 2D canvas on the Front tab */
.flowrs-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  height: 100%;
  overflow: auto;
}
.flowrs-game-canvas {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--fr-surface-sunk);
  max-width: 100%;
}

/* Front Panel level: a full-screen, free-form draggable instrument dashboard */
.flowrs-front-level { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.flowrs-front-title {
  margin: 0;
  padding: 11px 18px;
  font: 600 12px var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.flowrs-front-title small { color: var(--muted); font-weight: 400; letter-spacing: 0; }
/* The panel is a graphite instrument surface: a fine dot grid + a soft vignette,
   set on the deepest ground so the cards read as raised objects on it. */
.flowrs-front-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  /* The layout is a grid of 20 px cells (flowrs_app::panel::CELL_PX): a card sits at its
     saved cell; its size is its own. */
  display: grid;
  grid-auto-columns: 20px;
  grid-auto-rows: 20px;
  align-content: start;
  justify-content: start;
  padding-bottom: 40px;
  background:
    radial-gradient(60% 60% at 50% 40%, transparent, rgba(0, 0, 0, 0.35)),
    radial-gradient(circle at 1px 1px, rgba(120, 160, 200, 0.10) 1px, transparent 0) 0 0 / 24px 24px,
    var(--bg);
  overflow: auto;
}
/* A card with genuine presence: raised surface, inner top-highlight, layered
   shadow, and a lift on hover. */
.flowrs-fp-item {
  position: relative;
  justify-self: start;
  align-self: start;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--hi);
  transition: box-shadow var(--med), border-color var(--med), transform var(--med);
}
.flowrs-fp-item:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi), 0 0 0 1px rgba(53, 224, 196, 0.10);
  transform: translateY(-1px);
}
.flowrs-fp-handle {
  cursor: grab;
  color: var(--fr-text-3);
  font-size: 13px;
  line-height: 1;
  padding: 0 1px;
  user-select: none;
  touch-action: none;
  transition: color var(--fast);
}
.flowrs-fp-item:hover .flowrs-fp-handle { color: var(--text-2); }
.flowrs-fp-handle:focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; border-radius: 3px; }
/* A reading drawn by the component kit: a fixed width so a chart lays out at a real size,
   its label inside the component. */
.flowrs-fp-item[data-size="s"] { width: 220px; }
.flowrs-fp-item[data-size="m"] { width: 260px; }
.flowrs-fp-item[data-size="l"] { width: 420px; }
.flowrs-fp-item[data-size="s"],
.flowrs-fp-item[data-size="m"],
.flowrs-fp-item[data-size="l"] { align-items: flex-start; }
.flowrs-ind-kit { flex: 1; min-width: 0; display: block; font-size: var(--fr-fs-sm); }
.flowrs-ind-kit > * { min-width: 0; }
.flowrs-hidden { display: none !important; }
/* The Front level's head: the App / Front Panel toggle first, then the title. The toggle
   leads, where a drawer opened at the right (Lessons, Fabric) never covers it: with the app
   as the Front level's default, it is how a person reaches the panel. */
.flowrs-front-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  padding: 0 12px;
}
.flowrs-front-head .flowrs-front-mode { order: -1; }
.flowrs-front-head .flowrs-front-title { border-bottom: 0; background: transparent; }
.flowrs-front-mode .fr-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flowrs-app-pane { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; background: var(--fr-bg); }
.flowrs-fp-handle:active { cursor: grabbing; }
.flowrs-front-empty {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  max-width: 280px;
  line-height: 1.6;
}
.flowrs-front-empty::before {
  content: "◴";
  display: block;
  font-size: 30px;
  color: var(--accent);
  opacity: 0.55;
  margin-bottom: 10px;
}

/* Controls & Indicators palette (LabVIEW-style) beside the panel canvas.
   Prefixed `cpal` to stay distinct from the Back-panel node `.flowrs-palette`. */
.flowrs-front-workspace { flex: 1; min-height: 0; display: flex; }
.flowrs-front-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.flowrs-front-workspace .flowrs-front-canvas { min-width: 0; }

/* front-panel toolbar: dashboard tabs + grid-snap toggle */
.flowrs-front-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.flowrs-tabbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.flowrs-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.flowrs-tab.on { background: var(--bg); color: var(--text); border-bottom-color: var(--accent); }
.flowrs-tab-x { color: var(--fr-text-3); font-size: 10px; }
.flowrs-tab-x:hover { color: var(--fr-crit); }
.flowrs-tab-add {
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
}
.flowrs-tab-add:hover { border-color: var(--accent); }
.flowrs-grid-toggle {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  flex: none;
}
.flowrs-grid-toggle.on { background: var(--accent); border-color: var(--accent); color: var(--fr-accent-ink); }
.flowrs-cpal {
  width: 164px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  background: var(--panel);
}
.flowrs-cpal-group {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 2px 2px 8px;
}
.flowrs-cpal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 16px;
}
.flowrs-cpal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.flowrs-cpal-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(53, 224, 196, 0.25), 0 6px 16px -8px var(--accent-glow);
  transform: translateY(-1px);
}
.flowrs-cpal-tile:active { transform: translateY(0); }
.flowrs-cpal-icon { font-size: 19px; line-height: 1; color: var(--accent); }
.flowrs-cpal-name { font-size: 10px; color: var(--text-2); }
.flowrs-cpal-hint {
  font-size: 9.5px;
  color: var(--muted);
  margin: 4px 2px 0;
  line-height: 1.6;
}

/* horizontal slider control */
.flowrs-slider { width: 92px; accent-color: var(--fr-accent); touch-action: none; }
.flowrs-ctl-slider { gap: 6px; }

/* dual-thumb range slider (two overlaid range inputs + a highlighted band) */
.flowrs-range { position: relative; width: 120px; height: 20px; }
.flowrs-range input[type="range"] {
  position: absolute;
  top: 6px;
  left: 0;
  width: 120px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.flowrs-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fr-text);
  border: 2px solid var(--fr-accent);
  cursor: pointer;
}
.flowrs-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fr-text);
  border: 2px solid var(--fr-accent);
  cursor: pointer;
}
.flowrs-range::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--fr-track);
}
.flowrs-range-band {
  position: absolute;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--fr-accent);
}
.flowrs-range-readout {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* time-range: two date pickers */
.flowrs-timerange { display: flex; align-items: center; gap: 5px; }
.flowrs-timerange input {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 11px;
}
.flowrs-tr-arrow { color: var(--muted); }

/* ⌘K command palette */
.flowrs-cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}
.flowrs-cmdk {
  width: min(540px, 92vw);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi);
  overflow: hidden;
}
.flowrs-cmdk-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: 16px var(--font-ui);
  padding: 16px 18px;
  outline: none;
}
.flowrs-cmdk-input::placeholder { color: var(--muted); }
.flowrs-cmdk-list { max-height: 360px; overflow-y: auto; padding: 8px; }
.flowrs-cmdk-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 9px 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  font: 13px var(--font-ui);
}
.flowrs-cmdk-item.on { background: var(--flow); color: var(--accent-ink); }
.flowrs-cmdk-icon { width: 18px; text-align: center; color: var(--accent); }
.flowrs-cmdk-item.on .flowrs-cmdk-icon { color: var(--fr-accent-ink); }
.flowrs-cmdk-name { flex: 1; }
.flowrs-cmdk-sec { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }
/* An editor verb, not a widget. The shortcut is set in mono and NOT uppercased — it is a
   key to press, so it has to read exactly as it appears on the keyboard. */
.flowrs-cmdk-item.cmd .flowrs-cmdk-sec {
  font-family: ui-monospace, Menlo, monospace;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* Compute Fabric panel */
.flowrs-fabric-btn { color: var(--accent) !important; }
.flowrs-fabric-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
}
.flowrs-fabric {
  width: min(470px, 92vw);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi);
  /* Scroll rather than overflow the viewport. Without this, adding one row pushes the
     buttons below the fold where they are visible but not clickable — and this panel
     keeps growing as capabilities and stored models are added. */
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.flowrs-fabric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  font: 600 15px var(--font-ui);
}
.flowrs-fabric-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.flowrs-fabric-close:hover { color: var(--text); }
.flowrs-fabric-sub { margin: 14px 18px 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.flowrs-fabric-rows { padding: 4px 14px 6px; }
.flowrs-fabric-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(42, 49, 64, 0.4);
}
.flowrs-fabric-row:last-child { border-bottom: none; }
.flowrs-fabric-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fr-border-2); flex: none; }
.flowrs-fabric-row.on .flowrs-fabric-dot {
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--fr-accent) 60%, var(--fr-white)), var(--good) 70%);
  box-shadow: 0 0 9px 1px var(--accent-glow);
}
.flowrs-fabric-label { font: 500 13px var(--font-ui); color: var(--text); min-width: 118px; }
.flowrs-fabric-detail { font: 11px var(--font-mono); color: var(--muted); margin-left: auto; text-align: right; }
.flowrs-fabric-demo { padding: 12px 18px 18px; border-top: 1px solid var(--border); }
.flowrs-fabric-run {
  width: 100%;
  background: var(--flow);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-md);
  padding: 11px;
  font: 600 13px var(--font-ui);
  cursor: pointer;
  box-shadow: 0 2px 14px -4px var(--accent-glow);
  transition: filter var(--fast);
}
.flowrs-fabric-run:hover:not(:disabled) { filter: brightness(1.06); }
.flowrs-fabric-run:disabled { opacity: 0.6; cursor: default; }
/* secondary fabric actions (GPU image, CPU workers, rayon threads, WebNN) — quiet next to the primary */
.flowrs-fabric-run-2,
.flowrs-fabric-run-cpu,
.flowrs-fabric-run-rayon,
.flowrs-fabric-run-webnn {
  margin-top: 10px;
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: none;
}
.flowrs-fabric-run-2:hover:not(:disabled),
.flowrs-fabric-run-cpu:hover:not(:disabled),
.flowrs-fabric-run-rayon:hover:not(:disabled),
.flowrs-fabric-run-webnn:hover:not(:disabled) { filter: none; border-color: var(--accent); }
.flowrs-fabric-result {
  margin-top: 12px;
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.flowrs-fabric-ok { color: var(--good); font: 600 12px var(--font-mono); }
.flowrs-fabric-metrics {
  display: flex;
  gap: 16px;
  margin: 7px 0 5px;
  font: 700 20px var(--font-ui);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.flowrs-fabric-metrics span:last-child { color: var(--accent); }
.flowrs-fabric-sample {
  display: block;
  font: 11px var(--font-mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flowrs-fabric-err { margin-top: 12px; color: var(--crit); font: 12px var(--font-mono); }

/* Local AI panel (in-browser WebLLM agent) */
.flowrs-localai-btn { color: var(--accent-2) !important; }
.flowrs-localai { width: min(500px, 92vw); }
.flowrs-localai-body { padding: 4px 18px 18px; }
.flowrs-localai-row { display: flex; gap: 8px; align-items: center; }
.flowrs-localai-row .flowrs-select { flex: 1; }
.flowrs-localai-row .flowrs-fabric-run { width: auto; padding: 9px 15px; white-space: nowrap; }
.flowrs-localai-progress {
  margin-top: 10px;
  font: 11px var(--font-mono);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  line-height: 1.5;
}
.flowrs-localai-chat { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.flowrs-localai-chat .flowrs-import { min-height: 62px; width: 100%; box-sizing: border-box; }
.flowrs-localai-reply {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  max-height: 200px;
  overflow: auto;
}

/* remove-a-dropped-widget button on a panel card */
.flowrs-fp-del {
  border: none;
  background: transparent;
  color: var(--fr-text-3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0 1px;
}
.flowrs-fp-del:hover { color: var(--fr-crit); }

/* palette top divider between Controls and Indicators */
.flowrs-cpal-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  margin: 4px 2px 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.flowrs-cpal-head + .flowrs-cpal-group { margin-top: 0; }

/* ===== Expanded control library ===== */
/* dial = knob variant with a scale ring */
.flowrs-dial .flowrs-knob-face { stroke: var(--fr-border-3); stroke-width: 2.2; stroke-dasharray: 2 3; }
/* vertical slider */
.flowrs-vslider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 20px;
  height: 72px;
}
.flowrs-ctl-slider.flowrs-ctl { align-items: center; }
/* sliding switch */
.flowrs-switch {
  width: 42px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background var(--med), border-color var(--med), box-shadow var(--med);
}
.flowrs-switch.on {
  background: var(--flow);
  border-color: transparent;
  box-shadow: 0 0 14px -4px var(--accent-glow), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.flowrs-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fr-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform var(--med);
}
.flowrs-switch.on .flowrs-switch-knob { transform: translateX(20px); }
/* rocker (seesaw) switch */
.flowrs-rocker {
  display: inline-flex;
  flex-direction: column;
  width: 26px;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  background: var(--panel-2);
  cursor: pointer;
  padding: 0;
  font-size: 9px;
  line-height: 1.4;
  color: var(--muted);
  flex: none;
}
.flowrs-rocker-i, .flowrs-rocker-o { text-align: center; }
.flowrs-rocker.on .flowrs-rocker-i { background: var(--fr-accent); color: var(--fr-accent-ink); }
.flowrs-rocker:not(.on) .flowrs-rocker-o { background: var(--fr-border-2); color: var(--fr-text); }
/* multi-select checkbox list */
.flowrs-multiselect { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.flowrs-multiselect label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.flowrs-multiselect input { accent-color: var(--fr-accent); }

/* compound: array control (editable list) + cluster (named fields) */
.flowrs-array-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.flowrs-array-item { display: inline-flex; align-items: center; }
.flowrs-array-item .flowrs-ctl-num { width: 44px; }
.flowrs-array-x {
  border: none;
  background: transparent;
  color: var(--fr-text-3);
  cursor: pointer;
  font-size: 9px;
  padding: 0 2px;
}
.flowrs-array-x:hover { color: var(--fr-crit); }
.flowrs-array-add {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--accent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 6px;
}
.flowrs-cluster { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; }
.flowrs-cluster-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.flowrs-cluster-field .flowrs-ctl-num { width: 52px; }
/* array indicator cells */
.flowrs-ind-array { align-items: center; }
.flowrs-array { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; }
.flowrs-array-cell {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* momentary push button */
.flowrs-push {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex: none;
  touch-action: none;
}
.flowrs-push.on {
  background: var(--fr-crit);
  border-color: var(--fr-crit);
  color: var(--fr-white);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
/* checkbox + led-button controls */
.flowrs-checkbox { width: 16px; height: 16px; accent-color: var(--fr-accent); cursor: pointer; }
.flowrs-led-btn {
  border: none;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
}
/* selection controls */
.flowrs-select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  min-width: 110px;
}
.flowrs-radio { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.flowrs-radio label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.flowrs-radio input { accent-color: var(--fr-accent); }
.flowrs-segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.flowrs-seg {
  border: none;
  background: var(--panel-2);
  color: var(--muted);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.flowrs-seg:last-child { border-right: none; }
.flowrs-seg.on { background: var(--accent); color: var(--fr-accent-ink); }
/* text-family controls */
.flowrs-ctl-textarea {
  width: 150px;
  height: 44px;
  resize: vertical;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
}
.flowrs-ctl-color { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.flowrs-ctl-date { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
/* file upload control */
.flowrs-file { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.flowrs-file-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--text);
}
.flowrs-file-btn:hover { border-color: var(--accent); }
.flowrs-file-name { font-size: 11px; color: var(--muted); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cascader: two linked selects */
.flowrs-cascader { display: inline-flex; gap: 5px; }
.flowrs-cascader .flowrs-select { min-width: 78px; }

/* ===== Expanded indicator library ===== */
.flowrs-bargauge, .flowrs-bullet { width: 110px; height: auto; }
.flowrs-bargauge-text, .flowrs-instr-text { fill: var(--muted); font-size: 8px; font-family: var(--mono, ui-monospace, monospace); }
.flowrs-thermo { width: 34px; height: auto; }
.flowrs-tank { width: 48px; height: auto; }
.flowrs-progress { display: flex; align-items: center; gap: 6px; width: 120px; }
.flowrs-progress-track { flex: 1; height: 8px; border-radius: 4px; background: var(--fr-track); overflow: hidden; }
.flowrs-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fr-accent-2), var(--fr-accent)); transition: width 0.12s ease-out; }
.flowrs-progress-pct { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
/* digital / 7-seg style readout */
.flowrs-digital {
  font-family: var(--mono, ui-monospace, "SF Mono", monospace);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fr-good);
  background: color-mix(in srgb, var(--fr-good) 6%, var(--fr-bg));
  border: 1px solid color-mix(in srgb, var(--fr-good) 22%, var(--fr-bg));
  border-radius: 5px;
  padding: 3px 10px;
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
  font-variant-numeric: tabular-nums;
}
.flowrs-lamp { width: 20px; height: 20px; }
.flowrs-ind-string {
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* charts: pie/donut, radar, heatmap */
.flowrs-pie { width: 58px; height: 58px; }
.flowrs-radar { width: 74px; height: 74px; }
.flowrs-heatmap { width: 104px; height: 52px; border-radius: 3px; }
.flowrs-violin { width: 52px; height: auto; }
.flowrs-geomap { width: 130px; height: 65px; border-radius: 3px; }
.flowrs-calendar { width: 116px; height: 16px; border-radius: 2px; }

/* KPI / stat tile — the hero number gets scale + tight tracking */
.flowrs-kpi { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 74px; }
.flowrs-kpi-value {
  font: 700 30px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.flowrs-kpi-delta {
  font: 600 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.flowrs-kpi-delta.up { color: var(--good); }
.flowrs-kpi-delta.down { color: var(--crit); }

/* sortable data table */
.flowrs-table-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-height: 168px;
  overflow: auto;
}
.flowrs-table {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flowrs-table th {
  background: var(--panel-2);
  color: var(--muted);
  padding: 2px 9px;
  cursor: pointer;
  position: sticky;
  top: 0;
  text-align: right;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.flowrs-table th:hover { color: var(--text); }
.flowrs-table td {
  padding: 2px 9px;
  text-align: right;
  border-bottom: 1px solid rgba(42, 49, 64, 0.5);
  color: var(--text);
}
.flowrs-table-filter {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 11px;
}
/* matrix indicator: 2D grid of numeric cells */
.flowrs-ind-matrix { flex-direction: column; align-items: flex-start; gap: 3px; }
.flowrs-matrix {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flowrs-matrix td {
  border: 1px solid var(--border);
  padding: 1px 7px;
  text-align: right;
  color: var(--text);
}

/* Selection editor */
.flowrs-sel-title {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fr-text-2);
}
.flowrs-prop-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 4px;
}
.flowrs-prop-edit span {
  color: var(--muted);
  min-width: 56px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.flowrs-prop-edit input,
.flowrs-prop-edit textarea,
.flowrs-prop-edit select {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 6px;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* A parameter that is lines of text — a statechart, inline CSV — takes the full width
   under its name. Squeezed beside the label, every line of a chart wraps into fragments
   that read as more lines than there are. */
.flowrs-prop-edit--lines {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.flowrs-prop-edit textarea {
  resize: vertical;
  padding: 5px 7px;
  line-height: 1.5;
  tab-size: 2;
}
.flowrs-prop-edit textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}
/* An empty field means "the default", and shows it. */
.flowrs-prop-edit input::placeholder,
.flowrs-prop-edit textarea::placeholder { color: var(--muted); opacity: 1; }
.flowrs-prop-edit select { cursor: pointer; }
/* A stored value that is not one of the declared choices: kept, and said so. */
.flowrs-prop-edit select.invalid { border-color: var(--crit); color: var(--crit); }
.flowrs-wire-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.flowrs-wire-edit select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
}
.flowrs-delete {
  margin-top: 6px;
  background: color-mix(in srgb, var(--fr-crit) 14%, var(--fr-surface-1));
  color: var(--fr-crit-text);
  border: 1px solid color-mix(in srgb, var(--fr-crit) 35%, var(--fr-surface-1));
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Node palette */
.flowrs-palette-cat { margin-bottom: 12px; }
.flowrs-palette-cat h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
/* The intended-use line under the Neuro heading: quiet, but where the nodes are picked up. */
.flowrs-palette-note { margin: -3px 0 6px; font-size: 11px; line-height: 1.35; }
.flowrs-palette-items { display: flex; flex-wrap: wrap; gap: 4px; }
.flowrs-palette-node {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
.flowrs-palette-node:hover { background: var(--fr-surface-3); }

/* Ownership teaching panel */
.flowrs-wire-legend { list-style: none; margin: 0 0 10px; padding: 0; }
.flowrs-wire-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 2px 0;
}
.flowrs-wire-legend .dot { width: 10px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.flowrs-wire-dot-move { background: var(--fr-wire-move); }
.flowrs-wire-dot-borrow { background: var(--fr-wire-borrow); }
.flowrs-wire-dot-borrow-mut { background: var(--fr-wire-borrow-mut); }
.flowrs-wire-dot-clone { background: var(--fr-wire-clone); }
.flowrs-wire-dot-copy { background: var(--fr-wire-copy); }
.flowrs-ok { color: var(--fr-good); font-size: 12px; margin: 0; }
.flowrs-violations { margin: 0; padding-left: 16px; color: var(--fr-crit-text); font-size: 12px; }

/* Copilot */
.flowrs-copilot { display: flex; flex-wrap: wrap; gap: 6px; }
.flowrs-copilot-input {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
}
.flowrs-copilot-ask {
  background: var(--accent);
  color: var(--fr-accent-ink);
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
}
.flowrs-copilot-reply {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 12px/1.5 ui-sans-serif, system-ui, sans-serif;
  white-space: pre-wrap;
  color: var(--text);
}
h2 { font-size: 15px; }

/* Code level */
.flowrs-code { height: 100%; display: flex; flex-direction: column; padding: 14px 18px 18px; gap: 8px; }
.flowrs-code-view {
  flex: 1 1 45%;
  margin: 0;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%),
    var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi);
  overflow: auto;
  font: 13px/1.7 var(--font-mono);
  white-space: pre;
  color: var(--text-2);
  tab-size: 4;
}
.flowrs-code h2 {
  font: 600 12px var(--font-ui);
  margin: 4px 0 2px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.flowrs-code h2 small { color: var(--muted); font-weight: 400; }
.flowrs-import {
  flex: 1 1 30%;
  min-height: 110px;
  resize: vertical;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font: 13px/1.7 var(--font-mono);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.flowrs-import:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.flowrs-import::placeholder { color: var(--muted); }
.flowrs-import-actions { display: flex; gap: 8px; align-items: center; margin: 2px 0 0; }
.flowrs-import-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font: 500 13px var(--font-ui);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.flowrs-import-actions button:hover { border-color: var(--border-2); background: var(--panel-3); }
.flowrs-import-actions button:active { transform: translateY(1px); }
.flowrs-import-actions .flowrs-generate {
  background: var(--flow);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 600;
}
.flowrs-import-actions .flowrs-generate:hover { filter: brightness(1.06); background: var(--flow); }
.flowrs-code .flowrs-generate { margin: 0; align-self: flex-start; }
.flowrs-import-err { margin: 8px 0 0; color: var(--fr-crit-text); font: 12px/1.5 ui-monospace, monospace; }

/* Code target: host / embassy / RTIC. The same segmented control as the level switch,
   so it reads as a mode of this view rather than another action. */
.flowrs-code { overflow-y: auto; }
.flowrs-code .flowrs-code-view { min-height: 180px; }
.code-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.code-head h2 { margin-right: auto; }
.code-targets {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.code-target {
  background: transparent;
  border: none;
  color: var(--text-2);
  border-radius: 7px;
  padding: 4px 12px;
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}
.code-target:hover { color: var(--text); }
.code-target:focus-visible { outline: none; box-shadow: var(--ring); }
.code-target.active {
  background: var(--panel-3);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
}

/* Nodes the MCU target refuses: named, with the reason, above the (empty) program. */
.mcu-refused {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border-2));
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 7%, var(--panel));
}
.mcu-refused-head { margin: 0 0 6px; font: 600 12.5px var(--font-ui); color: var(--warn); }
.mcu-refused ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mcu-refusal { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; }
.mcu-refused-type { font: 600 12px var(--font-mono); color: var(--text); }
.mcu-refused-node { font: 11px var(--font-mono); color: var(--muted); }
.mcu-refused-why { color: var(--text-2); }

/* The board the whole firmware is generated for. */
.mcu-board-pick { display: flex; align-items: center; gap: 6px; font: 500 12px var(--font-ui); color: var(--text-2); }
.mcu-board {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 8px;
  font: 500 12px var(--font-ui);
  max-width: min(320px, 70vw);
}
.mcu-board:focus-visible { outline: none; box-shadow: var(--ring); }
.mcu-export-note { margin: 6px 0 10px; font: 500 12px/1.5 var(--font-ui); color: var(--text-2); overflow-wrap: anywhere; }
.mcu-export-note[data-state="error"] { color: var(--warn); }

/* The firmware's no-panic proof: proved for this exact program, or not yet, and why. */
.mcu-proof {
  margin: 6px 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-md);
  background: var(--panel);
  font: 12.5px/1.5 var(--font-ui);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.mcu-proof[data-row="live"] { border-left-color: var(--good); }
.mcu-proof[data-row="partial"] { border-left-color: var(--warn); }
.mcu-proof-head { margin: 0 0 4px; font-weight: 600; color: var(--text); }
.mcu-proof[data-row="live"] .mcu-proof-head { color: var(--good); }
.mcu-proof-why, .mcu-proof-numbers, .mcu-proof-next { margin: 0 0 4px; }
.mcu-proof-numbers { font: 11.5px var(--font-mono); color: var(--muted); }
.mcu-proof code { font: 11.5px var(--font-mono); color: var(--text); }
.mcu-proof-assumes summary { cursor: pointer; color: var(--text-2); }
.mcu-proof-assumes ul { margin: 4px 0 0; padding-left: 18px; }
.mcu-init-order { margin: 0; padding: 10px 14px 12px 34px; border-top: 1px solid var(--border); font: 12px/1.6 var(--font-ui); color: var(--text-2); }

.mcu-deps {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
}
.mcu-deps summary {
  padding: 7px 12px;
  cursor: pointer;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mcu-deps-toml {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  font: 12px/1.6 var(--font-mono);
  color: var(--text-2);
  white-space: pre;
  overflow-x: auto;
}

/* Processor-in-the-loop: the graph as STM32F4 firmware on the server's simulated F4. */
.pil-panel {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  box-shadow: inset 0 1px 0 var(--hi);
}
.pil-actions { display: flex; gap: 9px; margin-bottom: 8px; }
.pil-run {
  background: var(--flow);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font: 600 13px var(--font-ui);
  cursor: pointer;
  box-shadow: var(--sh-1), 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: filter var(--fast), transform var(--fast);
}
.pil-run:hover { filter: brightness(1.06); }
.pil-run:focus-visible { outline: none; box-shadow: var(--ring); }
.pil-run[disabled] { opacity: 0.5; cursor: default; filter: none; box-shadow: none; }
.pil-note { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 72ch; }
.pil-note[data-state="busy"] { color: var(--accent); }
.pil-head { margin: 0 0 4px; font: 600 13px var(--font-ui); }
.pil-good { color: var(--good); }
.pil-warn { color: var(--warn); }
.pil-result[data-verdict="differ"] .pil-head,
.pil-result[data-verdict="failed"] .pil-head { color: var(--crit); }
.pil-msg { margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }
.pil-registers { margin: 0 0 8px; font: 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.pil-missing { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.pil-pins { border-collapse: collapse; font: 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.pil-pins th {
  text-align: left;
  padding: 4px 14px 4px 0;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pil-pins td { padding: 4px 14px 4px 0; color: var(--text-2); border-bottom: 1px solid var(--border); }
.pil-pins .pil-pin { color: var(--text); font-weight: 600; }
.pil-pins .pil-agree { color: var(--good); }
.pil-pins tr.pil-mismatch td { color: var(--crit); }
.pil-log {
  margin: 8px 0 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: 11.5px/1.5 var(--font-mono);
  color: var(--text-2);
  white-space: pre;
}
.flowrs-add-node {
  margin-top: 8px;
  width: 100%;
  background: color-mix(in srgb, var(--fr-good) 12%, var(--fr-surface-1));
  color: var(--fr-good-text);
  border: 1px solid color-mix(in srgb, var(--fr-good) 40%, var(--fr-surface-1));
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
.flowrs-add-node:hover { background: color-mix(in srgb, var(--fr-good) 20%, var(--fr-surface-1)); }

/* Examples panel */
.flowrs-examples-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 220px;
  padding: 12px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.flowrs-examples-panel { width: 280px; }
.flowrs-examples-panel h3 { margin: 0 0 8px; font-size: 13px; }
.flowrs-lessons { list-style: none; margin: 0 0 8px; padding: 0; }
.flowrs-lessons li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.flowrs-lesson-title { font-weight: 600; font-size: 13px; }
.flowrs-lesson-goal { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.flowrs-lesson-actions { display: flex; gap: 6px; }
.flowrs-lesson-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.flowrs-lesson-result { font-size: 12px; margin: 6px 0; color: var(--text); }

/* Console (run/compile output) */
.flowrs-console {
  max-height: 30vh;
  margin: 0;
  padding: 12px 18px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  overflow: auto;
  font: 12.5px/1.6 var(--font-mono);
  white-space: pre-wrap;
  color: var(--text-2);
}

/* Status bar */
.flowrs-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font: 11.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.flowrs-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}
.flowrs-output { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.flowrs-kit-link { color: var(--text-2); text-decoration: none; border-radius: 4px; padding: 0 4px; }
.flowrs-kit-link:hover { color: var(--accent); }

/* ============================================================
   Hardware surface — driver generator + target picker
   (E1 flowrs-drivers / E2 flowrs-boards ingest). Styled to "Instrument".
   ============================================================ */
.flowrs-hardware {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  align-items: start;
  overflow: auto;
}
@media (max-width: 900px) {
  .flowrs-hardware { grid-template-columns: 1fr; }
}

.hw-panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--hi);
  padding: 18px 18px 20px;
  min-width: 0;
}
.hw-panel h2 {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* instrument nameplate tick */
.hw-panel h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--flow);
  box-shadow: 0 0 8px var(--accent-glow);
}
.hw-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.hw-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-2));
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text);
  font-size: 12.5px;
}

.hw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 12px;
}
.hw-actions button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
  transition: transform var(--fast), border-color var(--fast), filter var(--fast);
}
.hw-actions button:hover { transform: translateY(-1px); border-color: var(--accent); }
.hw-actions button:active { transform: translateY(0); }
.hw-actions button:focus-visible { outline: none; box-shadow: var(--ring); }
/* the primary action carries the flow gradient (design rule) */
.hw-actions button.primary {
  background: var(--flow);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--sh-1), 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hw-actions button.primary:hover { filter: brightness(1.06); }
.hw-actions button.ai {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2));
}
.hw-actions button.ai:hover { border-color: var(--accent); }
/* A link that leaves the IDE (a page of its own, in a new tab), dressed as the
   panel's primary action. */
.hw-actions a.hw-link {
  font: 550 13px var(--font-ui);
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
  transition: transform var(--fast), border-color var(--fast), filter var(--fast);
}
.hw-actions a.hw-link.primary {
  background: var(--flow);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--sh-1), 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hw-actions a.hw-link:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hw-actions a.hw-link:focus-visible { outline: none; box-shadow: var(--ring); }
.hw-ai-status {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* pin config — CubeMX-style peripheral → pin assignment */
.pc-select {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  cursor: pointer;
}
.pc-select:focus-visible { outline: none; box-shadow: var(--ring); }
.pc-triple {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pc-signals { display: flex; flex-direction: column; gap: 6px; }
.pc-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
}
.pc-signal {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.pc-pins { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-pin {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), color var(--fast);
}
.pc-pin:hover { transform: translateY(-1px); border-color: var(--accent); }
.pc-pin:focus-visible { outline: none; box-shadow: var(--ring); }
.pc-pin.assigned {
  color: var(--accent-ink);
  background: var(--flow);
  border-color: transparent;
  box-shadow: 0 2px 10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pc-none { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pc-code-head {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pc-code { margin-top: 6px; max-height: 220px; }

/* artifact take-away actions (copy / download) */
.art-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.art-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 4px 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform var(--fast), border-color var(--fast), color var(--fast);
}
.art-btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
.art-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.art-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}

.hw-input {
  width: 100%;
  min-height: 148px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  tab-size: 2;
}
.hw-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* generated-code readout */
.hw-output {
  margin: 12px 0 0;
  max-height: 440px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* target picker */
.hw-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-board {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 3px;
  padding: 11px 13px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
  transition: border-color var(--fast), transform var(--fast);
}
.hw-board:hover { border-color: var(--accent); transform: translateY(-1px); }
.hw-board-name { grid-column: 1; font-weight: 600; color: var(--text); font-size: 13.5px; }
.hw-board-chip { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.hw-board-triple {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hw-board-flash {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 9px;
  height: fit-content;
}

/* A board imported this session (stm32-data), named by the file it came from. */
.hw-board-imported { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.hw-board-source { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.hw-board-source code { font-family: var(--font-mono); color: var(--text-2); }

/* stm32-data chip import */
.hw-err {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--crit) 45%, var(--border-2));
  border-left: 3px solid var(--crit);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--crit) 7%, var(--panel));
  color: var(--text);
  font: 12px/1.5 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chip-cards { display: flex; flex-direction: column; gap: 12px; }
.chip-card {
  padding: 12px 14px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.chip-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chip-source { margin: 2px 0 10px; font-size: 12px; color: var(--muted); }
.chip-source code { font-family: var(--font-mono); color: var(--text-2); }
.chip-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 10px; font-size: 12.5px; }
.chip-facts dt { color: var(--muted); }
.chip-facts dd { margin: 0; color: var(--text); }
.chip-facts code { font-family: var(--font-mono); color: var(--accent); font-size: 11.5px; }
.chip-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.chip-table th {
  text-align: left;
  padding: 4px 10px 4px 0;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel-3);
}
.chip-table td { padding: 4px 10px 4px 0; color: var(--text-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.chip-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chip-pin { font: 600 12px var(--font-mono); color: var(--text); }
.chip-pins-scroll { max-height: 320px; overflow: auto; margin-bottom: 10px; }
.chip-routes { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-route {
  font: 11px var(--font-mono);
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 1px 8px;
}

/* FPGA rows stack name + part + a wrapped strip of family/category/flash/meta
   badges (they carry more metadata than an MCU board). */
.hw-fpga {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hw-fpga-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hw-fpga-tags .hw-board-flash { grid-column: unset; grid-row: unset; }
.hw-fpga-family {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.hw-fpga-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 9px;
}
.hw-fpga-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.hw-fpga-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* bench instrument (SCPI over WebSerial) */
.hw-instrument .hw-measure {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.hw-instrument .hw-measure:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  border-color: var(--border-2);
}
.hw-inst-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
/* An *IDN? identity ("Keysight,34465A,MY12345678,A.03.00") is far longer than a
   numeric readout, so give these cells room and let the text wrap — the default
   88px track clips it. */
.hw-instrument .hw-readouts {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hw-instrument .hw-rd-value {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* right rail stacks the target picker + virtual device */
.hw-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* virtual device — one block per simulated part */
.hw-device {
  padding: 12px 13px 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.hw-device + .hw-device { margin-top: 12px; }
.hw-dev-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hw-dev-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}
.hw-dev-bus {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  background: var(--flow);
  border-radius: 999px;
  padding: 2px 8px;
}

/* instrument readouts + machined chip controls */
.hw-readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.hw-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hw-rd-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hw-rd-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px var(--accent-glow);
}

.hw-ctl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.hw-ctl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 46px;
}
.hw-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hw-chips button {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi);
  transition: color var(--fast), border-color var(--fast), transform var(--fast);
}
.hw-chips button:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.hw-chips button:active { transform: translateY(0); }
.hw-chips button:focus-visible { outline: none; box-shadow: var(--ring); }

/* Selected chip — the board and program pickers in the twin panel. */
.hw-chips button.sel {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Digital twin: an emulated part, measured like an instrument ---- */
.hw-twin .hw-run {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 6px 18px;
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast);
}
.hw-twin .hw-run:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-glow); }
.hw-twin .hw-run:active { transform: translateY(0); }
.hw-twin .hw-run:focus-visible { outline: none; box-shadow: var(--ring); }

.hw-twin .hw-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  /* Digits in a status line that changes on every run should not reflow. */
  font-variant-numeric: tabular-nums;
}

.hw-twin .hw-serial {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.hw-twin .hw-serial pre {
  flex: 1;
  margin: 0;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  overflow-x: auto;
}

.hw-twin .hw-warn {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--warn);
}

/* Firmware chooser + probe select: someone else's program on the twin. */
.hw-twin .hw-file-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.hw-twin .hw-file-btn:hover { color: var(--text); border-color: var(--accent); }
.hw-twin .hw-file input:focus-visible + .hw-file-btn {
  outline: none;
  box-shadow: var(--ring);
}

.hw-twin .hw-select {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
}
.hw-twin .hw-select:focus-visible { outline: none; box-shadow: var(--ring); }

/* The capture handoff: a run is published for the canvas to read. */
.hw-twin .hw-published {
  margin: 10px 0 0;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--panel-3);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
}

/* "What does this firmware do?": measurements in mono, three parts kept apart. */
.fx {
  margin: 16px 0 0;
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.fx h3 { margin: 0 0 6px; font: 600 14px/1.3 var(--font-ui); color: var(--text); }
.fx h4 { margin: 0 0 2px; font: 600 12px/1.4 var(--font-ui); color: var(--text); letter-spacing: 0.02em; }
.fx-note { margin: 0 0 8px; font: 11.5px/1.45 var(--font-ui); color: var(--text-2); }
.fx-wide { flex: 1 1 280px; min-width: 200px; }
.fx-actions { flex-wrap: wrap; gap: 8px; }
.fx .hw-run { position: static; }
.fx-secondary {
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--panel-3);
  color: var(--text);
  font: 500 12px/1.3 var(--font-ui);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.fx-secondary:hover { border-color: var(--accent); }
.fx-secondary:focus-visible { outline: none; box-shadow: var(--ring); }
.fx-secondary:disabled { opacity: 0.5; cursor: default; }
.fx-part {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
}
.fx-part[data-rd="fx-unknowns"] { border-left: 2px solid var(--warn); }
.fx-part[data-rd="fx-observations"] { border-left: 2px solid var(--accent); }
.fx-part[data-rd="fx-interpretations"] { border-left: 2px dashed var(--border-2); }
.fx-group { margin: 10px 0 4px; font: 600 11px/1.4 var(--font-ui); color: var(--text-2); letter-spacing: 0.03em; cursor: default; }
.fx-peripherals > summary { cursor: pointer; }
.fx-peripheral > summary { cursor: pointer; list-style: none; }
.fx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 11.5px/1.45 var(--font-ui); }
.fx-id { flex: 0 0 auto; min-width: 26px; font: 600 10.5px/1.5 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-at { flex: 0 0 auto; min-width: 72px; font: 10.5px/1.5 var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.fx-claim { flex: 1 1 60%; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.fx-unknown .fx-claim { color: var(--text-2); }
.fx-detail {
  flex: 0 0 100%;
  margin: 0 0 4px 34px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 10.5px/1.5 var(--font-mono);
  color: var(--text-2);
}
.fx-verdict { margin: 4px 0 8px; font: 600 12px/1.45 var(--font-ui); color: var(--accent); }
.fx-registers { list-style: none; margin: 2px 0 6px 34px; padding: 0; font: 10.5px/1.5 var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.fx-evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font: 10.5px/1.5 var(--font-mono); }
.fx-evidence dt { color: var(--muted); }
.fx-evidence dd { margin: 0; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.hw-twin .hw-foot {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-3, var(--text-2));
  opacity: 0.75;
}

/* ============================================================
   Deploy surface — config→drivers, fleet, on-device TinyML
   (E5 flowrs-fleet / E6 flowrs-connect / E4 flowrs-ml). "Instrument".
   ============================================================ */
.flowrs-deploy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  align-items: start;
  overflow: auto;
}
@media (max-width: 900px) {
  .flowrs-deploy { grid-template-columns: 1fr; }
}
.dp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* scaffold whole-project download */
.dp-scaffold {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--panel-3);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-2));
  border-radius: var(--r-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast);
}
.dp-scaffold:hover { transform: translateY(-1px); border-color: var(--accent); }
.dp-scaffold:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-scaffold-status {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--good);
}

/* config → drivers */
.dp-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
}
.dp-summary[data-complete="1"] { border-left-color: var(--good); }
.dp-count {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dp-count-label { font-size: 12.5px; color: var(--muted); }
.dp-config-input { min-height: 120px; margin-top: 12px; font-size: 12px; }
.dp-error {
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--crit) 45%, var(--border-2));
  border-left: 3px solid var(--crit);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--crit) 8%, var(--panel));
  color: var(--crit);
  font-family: var(--font-mono);
  font-size: 12px;
}
.dp-rows { display: flex; flex-direction: column; gap: 7px; }
.dp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  padding: 10px 12px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.dp-row[data-ok="1"] { border-left-color: var(--good); }
.dp-row[data-ok="0"] { border-left-color: var(--warn); }
.dp-name { grid-column: 1; font-weight: 600; color: var(--text); font-size: 13.5px; }
.dp-kind {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 8px;
  height: fit-content;
}
.dp-conn {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dp-model { grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.dp-status { grid-column: 1 / -1; font-size: 11.5px; margin-top: 2px; }
.dp-row[data-ok="1"] .dp-status { color: var(--good); }
.dp-row[data-ok="0"] .dp-status { color: var(--warn); }
.dp-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.dp-view, .dp-gen {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), transform var(--fast);
}
.dp-view:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.dp-gen:hover { border-color: var(--warn); color: var(--warn); transform: translateY(-1px); }
.dp-view:focus-visible, .dp-gen:focus-visible { outline: none; box-shadow: var(--ring); }

/* collapsible generated-driver code (always in DOM; class toggles it) */
.dp-driver-code {
  display: none;
  grid-column: 1 / -1;
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre;
}
.dp-driver-code.open { display: block; }

/* driver picker */
.dp-picker { align-items: center; }
.dp-select {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  cursor: pointer;
}
.dp-select:focus-visible { outline: none; box-shadow: var(--ring); }

/* fleet */
.dp-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 460px) { .dp-stats { grid-template-columns: repeat(3, 1fr); } }
.dp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
}
.dp-stat-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dp-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dp-stat[data-tone="good"] .dp-stat-value { color: var(--good); }
.dp-stat[data-tone="warn"] .dp-stat-value { color: var(--warn); }
.dp-stat[data-tone="crit"] .dp-stat-value { color: var(--crit); }

.dp-devices { display: flex; flex-direction: column; gap: 7px; }
.dp-device {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.dp-dev-id { font-weight: 600; color: var(--text); font-size: 13px; }
.dp-dev-fw { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.dp-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 9px;
}
.dp-rollout { margin-left: auto; }
.dp-rollout[data-rollout="up_to_date"] { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border-2)); }
.dp-rollout[data-rollout="outdated"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border-2)); }
.dp-rollout[data-rollout="updating"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.dp-badge[data-status="offline"] { color: var(--muted); }
.dp-badge[data-status="online"] { color: var(--good); }

/* on-device TinyML — train + quantize */
.ml-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ml-controls button {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
  transition: transform var(--fast), border-color var(--fast), filter var(--fast);
}
.ml-controls button:hover { transform: translateY(-1px); border-color: var(--accent); }
.ml-controls button:focus-visible { outline: none; box-shadow: var(--ring); }
.ml-controls button.primary {
  background: var(--flow);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--sh-1), 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ml-controls button.primary:hover { filter: brightness(1.06); }
/* int8 switch — glows with the flow gradient when on */
.ml-controls button.ml-toggle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.ml-controls button.ml-toggle.on {
  color: var(--accent-ink);
  background: var(--flow);
  border-color: transparent;
  box-shadow: 0 2px 12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ml-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ml-status[data-trained="1"] { color: var(--good); }

.ml-stats {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.ml-accuracy { color: var(--warn); font-weight: 600; }
.ml-accuracy[data-ok="1"] { color: var(--good); }
.ml-bytes { color: var(--accent); }

/* loss curve */
.ml-spark {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ml-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* collect → train panel (reuses .ml-controls button styling for its buttons) */
.cl-controls,
.cl-train,
.cl-probe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cl-controls button,
.cl-train button,
.cl-probe button {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
  transition: transform var(--fast), border-color var(--fast), filter var(--fast);
}
.cl-controls button:hover,
.cl-train button:hover,
.cl-probe button:hover { transform: translateY(-1px); border-color: var(--accent); }
.cl-controls button:focus-visible,
.cl-train button:focus-visible,
.cl-probe button:focus-visible { outline: none; box-shadow: var(--ring); }
.cl-controls button.primary,
.cl-train button.primary {
  background: var(--flow);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--sh-1), 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cl-controls button.primary:hover,
.cl-train button.primary:hover { filter: brightness(1.06); }
.cl-train button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  border-color: var(--border-2);
}
.cl-counts {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.cl-count { color: var(--text-2); }
.cl-count[data-class="warm"] { color: var(--warn); }
.cl-count[data-class="cold"] { color: var(--accent); }
.cl-count b { color: var(--text); font-weight: 650; }
.cl-total { color: var(--muted); margin-left: auto; }
.cl-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cl-status[data-trained="1"] { color: var(--good); }
.cl-accuracy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.cl-accuracy[data-ok="1"] { color: var(--good); }
.cl-probe-label { font-size: 11.5px; color: var(--muted); }
.cl-probe-out {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.cl-probe-out[data-ok="1"] { color: var(--good); }

.dp-ml-io {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dp-bit {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi);
  transition: transform var(--fast), border-color var(--fast), color var(--fast);
}
.dp-bit:hover { transform: translateY(-1px); }
.dp-bit:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-bit[data-on="1"] { color: var(--accent); border-color: var(--accent); }
.dp-arrow { color: var(--muted); font-size: 16px; }
.dp-ml-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.dp-ml-prob {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.dp-ml-out[data-hot="1"] .dp-ml-prob { color: var(--accent); }
.dp-ml-pred {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dp-export-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.dp-export-lines { color: var(--accent); }
.dp-export { max-height: 240px; margin: 0; }

/* Static diagnostics — shown while editing, above the probes strip. Hidden entirely when
   the graph is clean, so its presence always means something. */
/* One row, always — it scrolls sideways rather than growing downwards.
   It used to wrap, and it is a layout sibling of the canvas host (which is `flex: 1`), so
   every extra diagnostic took a row of height straight off the canvas: dropping a node
   shoved the whole diagram down 68px, then another 31px, under the user's cursor. The
   camera was never involved — the canvas ELEMENT was moving. Capping it at one line means
   the bar's arrival is the only time the diagram moves, however many diagnostics it holds. */
.flowrs-diags {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  padding: 6px 16px;
  background: var(--fr-surface-sunk);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--warn);
}
/* The chips must not squash to nothing when the row overflows. */
.flowrs-diags > * {
  flex: 0 0 auto;
}
.flowrs-diags.has-err { border-left-color: var(--err); }
.flowrs-diags-count {
  font: 600 11px/1.4 ui-monospace, Menlo, monospace;
  color: var(--fr-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flowrs-diag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 3px 8px;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
  text-align: left;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  cursor: pointer;
}
.flowrs-diag:hover { border-color: var(--accent); }
.flowrs-diag b { color: var(--warn); font-weight: 600; }
.flowrs-diag.err b { color: var(--err); }
.flowrs-diag code { color: var(--fr-accent-text); }

/* Link-drop search — opens at the cursor where a wire was released on empty canvas. */
.flowrs-linkdrop-backdrop { position: fixed; inset: 0; z-index: 60; }
.flowrs-linkdrop {
  position: absolute;
  width: 300px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.flowrs-linkdrop-input {
  width: 100%;
  padding: 7px 9px;
  margin-bottom: 6px;
  font: 12px/1.4 ui-monospace, Menlo, monospace;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: 5px;
}
.flowrs-linkdrop-input:focus { outline: none; border-color: var(--accent); }
.flowrs-linkdrop-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 5px 8px;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.flowrs-linkdrop-item:hover { background: var(--panel-3); }
/* The main (first compatible) port of each node — ranked above its siblings. */
.flowrs-linkdrop-item.main b { color: var(--accent); }
.flowrs-linkdrop-item code { color: var(--fr-accent-text); }
.flowrs-linkdrop-coerce { margin-left: auto; color: var(--fr-warn); font-size: 10px; }
.flowrs-linkdrop-empty { padding: 10px; color: var(--fr-text-3); font-size: 11px; }

/* ONNX benchmark readout: the metrics row and the diffusion extrapolation. */
.flowrs-onnx-result .flowrs-fabric-metrics { display: flex; gap: 14px; }
.flowrs-onnx-result .flowrs-fabric-ok { margin-top: 4px; color: var(--text-2); }

/* Subgraph breadcrumb trail — only visible while inside a collapsed group. */
.flowrs-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: var(--fr-surface-sunk);
  border-bottom: 1px solid var(--border);
  font: 11px/1.4 ui-monospace, Menlo, monospace;
}
.flowrs-crumb {
  padding: 2px 8px;
  color: var(--accent);
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  cursor: pointer;
}
.flowrs-crumb:hover { border-color: var(--accent); }
.flowrs-crumb-sep { color: var(--fr-text-3); }
.flowrs-crumb-hint { margin-left: auto; color: var(--fr-text-3); }
/* A collapsed group node's label reads as a container, not a leaf. */
.flowrs-node-label.group { font-weight: 700; letter-spacing: 0.02em; }

/* GPU inference readout: throughput, speedup, and the agreement check. */
.flowrs-gpu-infer-result .flowrs-fabric-metrics { display: flex; gap: 14px; flex-wrap: wrap; }
.flowrs-gpu-infer-result .flowrs-fabric-ok { margin-top: 4px; color: var(--text-2); }

/* --- Instruments level: catalogue, configuration, composed program ---------- */
/* Three columns that each scroll on their own. The bars above the canvas taught the
   lesson: a panel that grows without a bound takes its height from whatever sits
   beside it, and here that would be the program you are trying to read. */
.in-level {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.1fr) minmax(300px, 1.4fr);
  gap: 18px;
  padding: 16px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.in-level > section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 0;
  overflow-y: auto;
}
.in-level h2 {
  font: 600 15px/1.3 var(--sans, system-ui);
  color: var(--text);
  margin: 0 0 10px;
}
.in-note { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 0 0 10px; }
/* Instrument ownership. Neutral when unheld — an instrument nobody holds is the normal
   state, not a warning — and marked only once someone actually holds it. */
.in-lease {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--fr-border); background: var(--fr-surface-1);
}
.in-lease.held { border-color: var(--fr-accent-2); background: rgba(90, 169, 255, 0.07); }
.in-lease-who { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); }
.in-lease-stale { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-warn-text); }
.in-seize {
  margin-left: auto; padding: 5px 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--fr-border-3); background: var(--fr-surface-2); color: var(--fr-text-soft);
  font: 12px/1.2 var(--sans, system-ui);
}
.in-seize:hover { border-color: var(--fr-accent-2); color: var(--fr-white); }
.in-lease-note {
  font: 11px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: -6px 0 12px;
}
/* A refused request (Take control rate-limited, a proxy error): the shown holder did NOT
   change, and that has to be read, not skimmed past as a grey footnote. */
.in-lease-note.refused {
  color: var(--warn); border-left: 3px solid var(--warn); padding-left: 8px;
}
.in-filter {
  width: 100%; box-sizing: border-box; margin: 0 0 10px;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--fr-border); background: var(--fr-surface-1); color: var(--fr-text-soft);
  font: 12px/1.4 ui-monospace, Menlo, monospace;
}
.in-filter:focus { outline: none; border-color: var(--fr-accent-2); }
.in-filter::placeholder { color: var(--fr-text-3); }
/* The catalogue is 563 entries when a server is present, so the list scrolls in place
   rather than running the page off the bottom. */
.in-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 58vh; overflow-y: auto;
}
.in-pick {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  width: 100%;
  box-sizing: border-box;
}
.in-pick:hover { border-color: var(--fr-accent-2); }
.in-pick.active { border-color: var(--fr-accent-2); background: rgba(90, 169, 255, 0.09); }
.in-model { font: 600 13.5px/1.35 var(--sans, system-ui); color: var(--fr-text); }
.in-class { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.in-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.in-field > span { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); }
.in-field input, .in-field select {
  background: var(--fr-surface-sunk);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fr-text);
  font: 13px/1.5 ui-monospace, Menlo, monospace;
  padding: 6px 8px;
}
.in-range { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.in-scpi {
  margin: 0;
  font: 12.5px/1.65 ui-monospace, Menlo, monospace;
  color: var(--fr-console-text);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Refusal is a first-class result here, so it is styled as one rather than as an
   error state bolted on: the reasons ARE the output when a configuration is rejected. */
.in-refused { border-left: 3px solid var(--warn); padding-left: 12px; }
.in-refused-head { font: 600 13px/1.4 var(--sans, system-ui); color: var(--warn); margin: 0 0 8px; }
.in-refused ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.in-v { font: 12.5px/1.55 ui-monospace, Menlo, monospace; color: var(--fr-text); }
.in-v.safety { color: var(--fr-crit-text); }
.in-safety {
  display: inline-block;
  font: 600 10px/1 ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fr-crit);
  border: 1px solid var(--fr-crit);
  border-radius: 4px;
  padding: 3px 5px;
  margin-right: 7px;
}

/* Connect: the one block on this level that reaches hardware, so it sits apart from the
   offline program above it and says which gateway it would go through. */
.in-connect { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.in-connect h3 { font: 600 13.5px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 8px; }
.in-gw-note { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 0 0 10px; }
.in-gw-note[data-state="off"] { color: var(--fr-warn-text); }
.in-res-check { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.in-res-check[data-state="ok"] { color: var(--fr-good-text); }
.in-res-check[data-state="bad"] { color: var(--warn); }
.in-connect-row { display: flex; gap: 8px; margin: 4px 0 10px; }
.in-connect-go, .in-discover, .in-use-res {
  font: 12px/1.3 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); background: transparent;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
.in-connect-go:hover:not(:disabled), .in-discover:hover:not(:disabled), .in-use-res:hover:not(:disabled) { border-color: var(--fr-accent-2); color: var(--fr-white); }
.in-connect-go:disabled, .in-discover:disabled, .in-use-res:disabled { opacity: 0.45; cursor: default; }
.in-conn-result { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-good-text); margin: 0 0 10px; }
.in-conn-result.refused { color: var(--warn); }
.in-found-note { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.in-found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.in-found-item { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.in-found-item .in-use-res { align-self: flex-start; }
.in-found-refused { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-warn-text); }

/* --- Review level: an agent's proposals, the person's decision, the audit log --- */
/* The Instruments level's three scrolling columns and its panel skin, so a person moving
   between composing a program and approving an agent's reads one visual language. The
   detail column is the widest: the diff and the exact lines are what gets approved. */
.rv-level {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(340px, 1.6fr) minmax(260px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 16px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.rv-level > section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 0;
  overflow-y: auto;
}
.rv-level h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 10px; }
.rv-level h3 {
  font: 600 12px/1.3 var(--sans, system-ui); color: var(--fr-text-3); margin: 14px 0 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.rv-service.refused { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 8px; }
.rv-row { display: flex; align-items: center; gap: 6px; }
/* Status and tier are badges, so a column of proposals can be scanned for what matters:
   what is waiting, and what energizes. */
.rv-status, .rv-tier {
  font: 600 10px/1 ui-monospace, Menlo, monospace; text-transform: uppercase;
  letter-spacing: 0.06em; border: 1px solid var(--fr-border-3); border-radius: 4px; padding: 3px 5px;
  color: var(--fr-text-soft);
}
.rv-status[data-status="pending"] { color: var(--fr-warn-text); border-color: var(--fr-warn-text); }
.rv-status[data-status="approved"], .rv-status[data-status="executed"] { color: var(--fr-good-text); border-color: var(--fr-good-text); }
.rv-status[data-status="rejected"], .rv-status[data-status="failed"], .rv-status[data-status="void"] {
  color: var(--fr-crit-text); border-color: var(--fr-crit-text);
}
.rv-tier[data-tier="energize"], .rv-tier[data-tier="raw"] { color: var(--fr-crit); border-color: var(--fr-crit); }
.rv-targets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.rv-target {
  font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-soft);
  border: 1px solid var(--fr-border); background: var(--fr-surface-1); border-radius: 6px; padding: 4px 8px;
}
.rv-target.mock { border-style: dashed; }
.rv-diff, .rv-cmds, .rv-checked, .rv-entries {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
}
.rv-change { font: 12.5px/1.55 ui-monospace, Menlo, monospace; color: var(--fr-text); }
.rv-op { display: inline-block; width: 1.4em; font-weight: 700; }
.rv-change[data-op="+"] .rv-op { color: var(--fr-good-text); }
.rv-change[data-op="-"] .rv-op { color: var(--fr-crit-text); }
.rv-change[data-op="~"] .rv-op { color: var(--fr-accent-2); }
.rv-cmd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-cmd[data-phase="safe_state"] .rv-line { color: var(--fr-info-text); }
.rv-line { font: 12.5px/1.6 ui-monospace, Menlo, monospace; color: var(--fr-console-text); }
.rv-hash { word-break: break-all; margin-top: 12px; }
.rv-decision { font: 600 12.5px/1.4 var(--sans, system-ui); color: var(--fr-text-soft); margin: 6px 0; }
.rv-decide { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fr-border); }
.rv-buttons { display: flex; gap: 8px; }
.rv-approve, .rv-reject {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font: 600 12.5px/1.2 var(--sans, system-ui); border: 1px solid var(--fr-border-3);
  background: var(--fr-surface-2); color: var(--fr-text-soft);
}
.rv-approve:hover { border-color: var(--fr-good-text); color: var(--fr-white); }
.rv-reject:hover { border-color: var(--fr-crit-text); color: var(--fr-white); }
.rv-chain { font: 12px/1.5 ui-monospace, Menlo, monospace; margin: 0 0 6px; }
.rv-chain[data-state="ok"] { color: var(--fr-good-text); }
.rv-chain[data-state="broken"] { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 8px; }
.rv-export {
  display: inline-block; margin: 0 0 10px; font: 12px/1.2 var(--sans, system-ui);
  color: var(--fr-accent-2); text-decoration: none; border: 1px solid var(--fr-border); border-radius: 6px;
  padding: 5px 10px;
}
.rv-export:hover { border-color: var(--fr-accent-2); }
.rv-entry { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px solid var(--fr-surface-2); }
.rv-entry-what { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); }
/* Who is driving: each agent as a raised nameplate, its profile a badge (plan reads calm,
   full reads live), its policy one line toned by whether it reaches real hardware, and each
   lease with the person's Take control beside it. */
.rv-bench { margin: 0 0 8px; }
.rv-agents { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-agent {
  display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md, 8px);
  box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,0.04)), var(--sh-1, none);
}
.rv-agent-name { font: 600 12.5px/1.3 var(--font-mono, ui-monospace, monospace); color: var(--text); font-variant-numeric: tabular-nums; }
.rv-profile, .rv-kind {
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace); text-transform: uppercase;
  letter-spacing: 0.06em; border: 1px solid var(--border-2); border-radius: 4px; padding: 3px 5px;
  color: var(--text-2);
}
.rv-profile[data-profile="plan"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.rv-profile[data-profile="full"] { color: var(--warn); border-color: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 30%, transparent); }
.rv-policy { font: 11.5px/1.45 var(--font-mono, ui-monospace, monospace); color: var(--text-2); }
.rv-policy[data-tone="warn"] { color: var(--warn); }
.rv-leases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-lease { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-lease-what { font: 11.5px/1.4 var(--font-mono, ui-monospace, monospace); color: var(--text); word-break: break-all; }
.rv-seize {
  flex: none; padding: 4px 10px; border-radius: var(--r-sm, 6px); cursor: pointer;
  font: 600 11.5px/1.2 var(--font-ui, system-ui); color: var(--accent-ink);
  background: var(--flow, var(--accent)); border: none;
  box-shadow: inset 0 1px 0 var(--hi, rgba(255,255,255,0.2)), 0 0 10px var(--accent-glow, transparent);
  transition: transform var(--fast, 120ms) var(--ease, ease), filter var(--fast, 120ms) var(--ease, ease);
}
.rv-seize:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rv-seize:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 2px var(--accent)); }

/* --- Linux level: a Linux board's twin, the program, what came back ----------- */
/* It is the Forge level's grid and parts; these are the pieces only it has. */
.lt-pick .fg-fam { white-space: normal; }
.lt-missing { color: var(--warn) !important; }
/* The server says it cannot run Linux twins (capabilities.rs): its reason, above Run. */
.lt-cap { color: var(--warn); }
.lt-head { font: 600 13px/1.4 var(--sans, system-ui); color: var(--fr-console-text); margin: 0 0 8px; }
.lt-sub { font: 600 12.5px/1.3 var(--sans, system-ui); color: var(--text); margin: 12px 0 6px; }
.lt-output { min-height: 2.5em; color: var(--fr-console-text); }
.lt-gpio { list-style: none; margin: 0; padding: 0; font: 11.5px/1.6 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); }
.lt-gpio li[data-high="true"] { color: var(--fr-warn-text); }
.lt-console { margin-top: 10px; }
.lt-console summary, .lt-out details summary { cursor: pointer; font: 12px/1.6 var(--sans, system-ui); color: var(--fr-text-3); }

/* Waiting on you: the inbox the server pushes. Each item is a raised card whose badge says
   what kind of wait it is (an approval reads amber, an unknown outcome reads critical), with
   the person's action beside it as a flow-gradient button, the same voice as Take control.
   The live light blooms while the stream is connected and dims when the level is polling. */
.rv-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-inbox-head h2 { margin-bottom: 8px; }
.rv-live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.rv-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); box-shadow: none;
}
.rv-live[data-state="live"] { color: var(--good); }
.rv-live[data-state="live"]::before {
  background: var(--good);
  box-shadow: 0 0 6px var(--good), 0 0 14px color-mix(in srgb, var(--good) 45%, transparent);
}
.rv-inbox-tokenfield { margin: 0 0 10px; }
.rv-inbox { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-inbox-item {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
}
.rv-inbox-item[data-kind="approval"] { border-left: 3px solid var(--warn); }
.rv-inbox-item[data-kind="outcome_unknown"] { border-left: 3px solid var(--crit); }
.rv-inbox-item[data-kind="budget"],
.rv-inbox-item[data-kind="parked"],
.rv-inbox-item[data-kind="task_outdated"] { border-left: 3px solid var(--accent-2); }
.rv-inbox-badge {
  flex: none; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--border-2); border-radius: 4px; padding: 3px 5px; color: var(--text-2);
}
.rv-inbox-badge[data-kind="approval"] { color: var(--warn); border-color: var(--warn); }
.rv-inbox-badge[data-kind="outcome_unknown"] {
  color: var(--crit); border-color: var(--crit);
  box-shadow: 0 0 8px color-mix(in srgb, var(--crit) 30%, transparent);
}
.rv-inbox-badge[data-kind="budget"],
.rv-inbox-badge[data-kind="parked"],
.rv-inbox-badge[data-kind="task_outdated"] { color: var(--accent-2); border-color: var(--accent-2); }
.rv-inbox-title { font: 600 12.5px/1.35 var(--font-ui, system-ui); color: var(--text); }
.rv-inbox-why { font: 11.5px/1.45 var(--font-mono); color: var(--text-2); }
.rv-inbox-caps { font: 11.5px/1.4 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.rv-inbox-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-inbox-reason, .rv-inbox-newcaps {
  flex: 1 1 160px; min-width: 0; padding: 5px 8px; border-radius: var(--r-sm);
  font: 11.5px/1.3 var(--font-mono); color: var(--text);
  background: var(--panel); border: 1px solid var(--border-2);
}
.rv-inbox-reason:focus-visible, .rv-inbox-newcaps:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 2px var(--accent)); }
.rv-inbox-act {
  flex: none; padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer;
  font: 600 11.5px/1.2 var(--font-ui, system-ui); color: var(--accent-ink);
  background: var(--flow); border: none;
  box-shadow: inset 0 1px 0 var(--hi), 0 0 10px var(--accent-glow);
  transition: transform var(--fast, 120ms) var(--ease, ease), filter var(--fast, 120ms) var(--ease, ease);
}
.rv-inbox-act:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rv-inbox-act:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 2px var(--accent)); }
.rv-inbox-cancel {
  background: var(--panel-3); color: var(--text-2); box-shadow: inset 0 1px 0 var(--hi);
  border: 1px solid var(--border-2);
}
.rv-inbox-note[data-state="refused"] { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 8px; }

/* The task graph: the full width under the three columns, lanes left to right in the order
   work moves, each node a small nameplate toned by its lane, an edge from a task to the
   proposal it waits on, a mission's colour as the node's left stripe. */
.rv-level > section.rv-tasks { grid-column: 1 / -1; max-height: 34vh; }
.rv-tasks-counts { font: 11px/1.3 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-taskgraph-scroll { overflow-x: auto; padding-bottom: 4px; }
.rv-taskgraph { display: block; }
.rv-tlane-title {
  font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em;
  fill: var(--muted);
}
.rv-tnode-box { fill: var(--panel-2); stroke: var(--border-2); stroke-width: 1; }
.rv-tnode-label { font: 600 11.5px var(--font-mono); fill: var(--text); }
.rv-tnode-sub { font: 10.5px var(--font-mono); fill: var(--text-2); }
.rv-tnode[data-class="running"] .rv-tnode-box { stroke: var(--accent); }
.rv-tnode[data-class="queued"] .rv-tnode-box { stroke-dasharray: 4 3; }
.rv-tnode[data-class="sleeping"] .rv-tnode-box { stroke: var(--accent-2); stroke-dasharray: 2 3; }
.rv-tnode[data-class="input_required"] .rv-tnode-box,
.rv-tnode[data-class="proposal"] .rv-tnode-box { stroke: var(--warn); }
.rv-tnode[data-class="blocked"] .rv-tnode-box,
.rv-tnode[data-class="parked"] .rv-tnode-box,
.rv-tnode[data-class="task_outdated"] .rv-tnode-box { stroke: var(--accent-2); }
.rv-tnode[data-class="outcome_unknown"] .rv-tnode-box { stroke: var(--crit); fill: color-mix(in srgb, var(--crit) 10%, var(--panel-2)); }
.rv-tnode[data-class="ended"] .rv-tnode-box { fill: var(--panel); stroke: var(--border); }
.rv-tnode[data-class="ended"] .rv-tnode-label { fill: var(--text-2); }
.rv-tedge { fill: none; stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.8; }

/* --- Forge level: board, application body, build result ---------------------- */
.fg-level {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(320px, 1.5fr) minmax(280px, 1.2fr);
  gap: 18px;
  padding: 16px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.fg-level > section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.fg-level h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 10px; }
.fg-note { font: 12px/1.55 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 0 0 10px; }
.fg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fg-pick {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  width: 100%;
  box-sizing: border-box;
}
.fg-pick:hover { border-color: var(--fr-accent-2); }
.fg-pick.active { border-color: var(--fr-accent-2); background: rgba(90, 169, 255, 0.09); }
.fg-id { font: 600 13.5px/1.35 var(--sans, system-ui); color: var(--fr-text); }
.fg-triple, .fg-fam { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.fg-code {
  flex: 1;
  min-height: 240px;
  background: var(--fr-surface-sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fr-text-soft);
  font: 12.5px/1.6 ui-monospace, Menlo, monospace;
  padding: 10px 12px;
  resize: vertical;
}
.fg-build {
  all: unset;
  cursor: pointer;
  margin-top: 12px;
  text-align: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fr-accent-2) 45%, var(--fr-bg));
  color: var(--fr-text);
  font: 600 13.5px/1.2 var(--sans, system-ui);
  border: 1px solid color-mix(in srgb, var(--fr-accent-2) 70%, var(--fr-bg));
}
.fg-build:hover { background: color-mix(in srgb, var(--fr-accent-2) 55%, var(--fr-bg)); }
.fg-build[disabled] { opacity: 0.55; cursor: default; }
.fg-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; }
.fg-facts dt { font: 11px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.fg-facts dd { margin: 0; font: 12.5px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text); }
.fg-hash { word-break: break-all; color: var(--fr-console-text); }
.fg-fail { border-left: 3px solid var(--err); padding-left: 12px; min-height: 0; }
.fg-fail-head { font: 600 13px/1.4 var(--sans, system-ui); color: var(--err); margin: 0 0 8px; }
/* The compiler's own words, in full and scrollable. A truncated log sends the reader
   hunting for the line that matters. */
.fg-log {
  margin: 0;
  font: 11.5px/1.55 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100%;
  overflow-y: auto;
}
.fg-err { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--warn); }

/* --- Energy panel: modelled estimate, and this host's provenance --------------- */
.en-panel {
  position: fixed;
  right: 16px;
  bottom: 54px;
  width: 340px;
  max-height: 62vh;
  overflow-y: auto;
  z-index: 55;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
.en-panel h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 10px; }
.en-panel h3 {
  font: 600 12px/1.3 ui-monospace, Menlo, monospace;
  color: var(--fr-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 8px;
}
.en-total { display: flex; align-items: baseline; gap: 9px; }
.en-num { font: 600 26px/1.1 var(--sans, system-ui); color: var(--fr-console-text); }
/* An em dash is an absence, not a small number, and must not read as one. */
.en-num.en-none { color: var(--fr-text-3); }
.en-unit { font: 11.5px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.en-note { font: 11.5px/1.6 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 7px 0 0; }
.en-meter { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 4px; }
.en-prov { display: flex; align-items: center; gap: 8px; margin: 0; font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--fr-text); }
/* The tag carries the claim, so the two states must not look alike. */
.en-tag {
  font: 600 10px/1 ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--warn);
  border: 1px solid var(--warn);
}
.en-tag.measured { color: var(--fr-good); border-color: var(--fr-good); }
.en-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.en-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; }
.en-ty { font: 12px/1.45 ui-monospace, Menlo, monospace; color: var(--fr-text-soft); overflow: hidden; text-overflow: ellipsis; }
.en-class { font: 10.5px/1.4 ui-monospace, Menlo, monospace; color: var(--fr-text-3); }
.en-pj { font: 12px/1.45 ui-monospace, Menlo, monospace; color: var(--fr-console-text); }

/* --- Live panel: serial telemetry, RTT channels, sampled globals ---------------- */
.flowrs-live-btn { white-space: nowrap; }
.lv-panel {
  position: fixed;
  right: 16px;
  bottom: 54px;
  /* Wide enough for the scope's lanes, its name gutter and its toolbar. */
  width: min(900px, calc(100vw - 32px));
  max-height: 82vh;
  overflow-y: auto;
  z-index: 56;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: var(--text-2);
}
.lv-panel h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 10px; }
.lv-panel h3 {
  font: 600 11.5px/1.3 ui-monospace, Menlo, monospace;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
}
.lv-tabs, .lv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lv-tabs button, .lv-chip, .lv-ctl button, .lv-add {
  font: 12px/1.4 ui-monospace, Menlo, monospace;
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
}
.lv-tabs button.sel, .lv-chip.sel { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.lv-chip em { font-style: normal; color: var(--warn); }
.lv-chip.sel em { color: var(--accent-ink); }
.lv-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.lv-ctl label { font: 11.5px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.lv-ctl select, .lv-ctl input:not([type="file"]), .lv-replay {
  font: 12px/1.4 ui-monospace, Menlo, monospace;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 3px 6px;
}
.lv-wide { flex: 1 1 220px; }
.lv-wide input { flex: 1; min-width: 0; }
.lv-down { width: 90px; }
.lv-file { cursor: pointer; border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: 3px 8px; }
.lv-file input { display: none; }
.lv-replay { width: 100%; min-height: 84px; resize: vertical; }
.lv-note, .lv-meta, .lv-empty { font: 11.5px/1.55 ui-monospace, Menlo, monospace; color: var(--muted); margin: 4px 0; }
.lv-why { color: var(--muted); }
.lv-status { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--text-2); margin: 6px 0 10px; }
.lv-plot { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px; margin: 6px 0; }
.lv-plot svg { width: 100%; height: 150px; display: block; }
.lv-axis { display: flex; justify-content: space-between; font: 10.5px/1.3 ui-monospace, Menlo, monospace; color: var(--muted); }
.lv-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font: 11.5px/1.4 ui-monospace, Menlo, monospace; }
.lv-key i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; }
.lv-key b { color: var(--text); font-weight: 600; }
.lv-lane {
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font: 11.5px/1.5 ui-monospace, Menlo, monospace;
  color: var(--text-2);
}
.lv-line { white-space: pre-wrap; word-break: break-word; }
.lv-gap { color: var(--muted); font-style: italic; padding: 2px 0; }
.lv-stamp { color: var(--muted); margin-right: 6px; }
.lv-lvl { margin-right: 6px; font-weight: 600; }
.lv-line[data-level="INFO"] .lv-lvl { color: var(--good); }
.lv-line[data-level="WARN"] .lv-lvl { color: var(--warn); }
.lv-line[data-level="ERROR"] .lv-lvl { color: var(--crit); }
.lv-line[data-level="DEBUG"] .lv-lvl, .lv-line[data-level="TRACE"] .lv-lvl { color: var(--accent-2); }
.lv-flags { display: flex; flex-direction: column; gap: 4px; }
.lv-flag {
  font: 11.5px/1.45 ui-monospace, Menlo, monospace;
  color: var(--text-2);
  border-left: 2px solid var(--warn);
  padding-left: 8px;
}
.lv-flag b { color: var(--warn); }
.lv-flag code { display: block; color: var(--muted); white-space: pre-wrap; word-break: break-all; }
.lv-add { margin-top: 10px; }
.lv-intended {
  border-left: 2px solid var(--accent-2);
  padding-left: 8px;
  color: var(--text-2);
}
.lv-note a { color: var(--accent-2); }

/* The scope: dpb-plot's GPU lanes under MNE's raw-browser contract. The canvas holds the
   marks only; names, ticks, the cursor and annotations are DOM over it. */
.sc-scope {
  margin: 8px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
  overflow: hidden;
}
.sc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.sc-btn, .sc-select, .sc-label {
  font: 11.5px/1.4 var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color var(--fast, 120ms) var(--ease, ease), color var(--fast, 120ms) var(--ease, ease);
}
.sc-btn:hover, .sc-select:hover { border-color: var(--accent); color: var(--text); }
.sc-toggle.on {
  color: var(--accent-ink);
  background: var(--flow);
  border-color: transparent;
  box-shadow: 0 0 10px var(--accent-glow);
}
.sc-label { width: 110px; cursor: text; color: var(--text); background: var(--bg); }
.sc-read {
  font: 600 11.5px/1.4 var(--font-mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 64px;
  text-align: center;
}
.sc-sep { width: 1px; height: 18px; background: var(--border-2); margin: 0 4px; }
.sc-body { display: grid; grid-template-columns: 78px 1fr; position: relative; }
.sc-body.zen { grid-template-columns: 0 1fr; }
.sc-body.zen .sc-gutter { visibility: hidden; }
.sc-gutter { position: relative; border-right: 1px solid var(--border); background: var(--panel); }
.sc-name {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px;
  font: 500 11px/1 var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--text-2);
  background: none;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.sc-name:hover { color: var(--accent); }
.sc-name.sc-bad { color: var(--muted); text-decoration: line-through; }
.sc-name.sc-aux { cursor: default; color: var(--muted); }
.sc-plot { position: relative; height: clamp(260px, 48vh, 600px); padding-bottom: 20px; }
.sc-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; outline: none; }
.sc-canvas:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.sc-overlay { position: absolute; inset: 0 0 20px 0; pointer-events: none; }
.sc-overlay .sc-ann button, .sc-overlay .sc-ann { pointer-events: auto; }
.sc-axis { position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; }
.sc-tick, .sc-unit {
  position: absolute;
  top: 3px;
  font: 10.5px/1 var(--font-mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transform: translateX(-50%);
  white-space: nowrap;
}
.sc-unit { right: 4px; transform: none; color: var(--text-2); }
.sc-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: 0.7; }
.sc-readout {
  position: absolute;
  top: 4px;
  transform: translateX(8px);
  font: 11px/1.3 var(--font-mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(9, 12, 18, 0.86);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  white-space: nowrap;
}
.sc-notes { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.sc-ann {
  position: absolute;
  top: 0;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  font: 10.5px/16px var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--text);
  border-top: 2px solid var(--held);
}
.sc-ann span { padding-left: 3px; white-space: nowrap; }
.sc-ann button { font-size: 10px; line-height: 1; padding: 0 3px; color: var(--muted); background: none; border: 0; cursor: pointer; }
.sc-ann button:hover { color: var(--crit); }
.sc-hint { font: 10.5px/1.5 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--muted); margin: 0; padding: 4px 8px 6px; }

/* --- Import a workflow: coverage before adoption ----------------------------- */
.ig-panel { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
/* The coexistence exports, under the import panel (crates/flowrs-ui/src/bridges.rs). */
.ig-bridges { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.ig-bridges h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 6px; }

.ig-panel h2 { font: 600 15px/1.3 var(--sans, system-ui); color: var(--text); margin: 0 0 6px; }
.ig-panel h3 {
  font: 600 12px/1.3 ui-monospace, Menlo, monospace;
  color: var(--fr-accent-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.ig-panel h4 { font: 600 11.5px/1.3 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 12px 0 5px; }
.ig-note { font: 11.5px/1.6 ui-monospace, Menlo, monospace; color: var(--fr-text-3); margin: 0 0 10px; }
.ig-src {
  width: 100%;
  box-sizing: border-box;
  min-height: 130px;
  background: var(--fr-surface-sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fr-text-soft);
  font: 12px/1.55 ui-monospace, Menlo, monospace;
  padding: 9px 11px;
  resize: vertical;
}
.ig-examine, .ig-adopt {
  all: unset;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 13px;
  border-radius: 8px;
  font: 600 13px/1.2 var(--sans, system-ui);
  border: 1px solid color-mix(in srgb, var(--fr-accent-2) 70%, var(--fr-bg));
  background: color-mix(in srgb, var(--fr-accent-2) 45%, var(--fr-bg));
  color: var(--fr-text);
}
.ig-adopt { background: color-mix(in srgb, var(--fr-good) 40%, var(--fr-bg)); border-color: color-mix(in srgb, var(--fr-good) 65%, var(--fr-bg)); }
.ig-examine:hover { background: color-mix(in srgb, var(--fr-accent-2) 55%, var(--fr-bg)); }
.ig-adopt:hover { background: color-mix(in srgb, var(--fr-good) 50%, var(--fr-bg)); }
.ig-err { font: 12px/1.55 ui-monospace, Menlo, monospace; color: var(--warn); margin: 10px 0 0; }
.ig-report {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--fr-surface-sunk);
}
.ig-facts, .ig-kinds ul, .ig-dropped ul { list-style: none; margin: 0; padding: 0; }
.ig-facts li, .ig-kinds li, .ig-dropped li {
  font: 12px/1.65 ui-monospace, Menlo, monospace;
  color: var(--fr-text-soft);
}
.ig-n { color: var(--fr-text); font-weight: 600; }
/* What was NOT understood is the part worth seeing, so it is coloured, not greyed. */
.ig-facts li.ig-warn { color: var(--warn); }
.ig-dropped { border-left: 3px solid var(--err); padding-left: 11px; margin-top: 12px; }
.ig-dropped h4 { color: var(--err); }
.ig-dropped li { color: var(--fr-crit-text); }
.ig-clean { font: 12px/1.6 ui-monospace, Menlo, monospace; color: var(--fr-good); margin: 10px 0 0; }

/* "New" sits beside Lessons in the header; same weight as its neighbours, since
   emptying the canvas is an ordinary action rather than a destructive one — it is
   one undo away. */
.flowrs-newgraph {
  all: unset;
  cursor: pointer;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  color: var(--fr-text-soft);
  font: 600 12.5px/1.2 var(--sans, system-ui);
}
.flowrs-newgraph:hover { border-color: var(--fr-accent-2); color: var(--fr-text); }

/* The camera's controls — zoom out, the zoom readout (click for 100%), zoom in, frame
   all — as one segmented group, built like the level switcher: they all act on the same
   thing, so they read as one instrument rather than four loose buttons. */
.flowrs-view-ctl {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.flowrs-view-ctl button {
  background: transparent;
  border: none;
  color: var(--text-2);
  border-radius: 7px;
  padding: 4px 10px;
  font: 500 13px var(--font-ui);
}
.flowrs-view-ctl button:hover { color: var(--text); background: var(--panel-3); }
/* Tabular figures so the group does not shift width as the percentage changes. */
.flowrs-view-ctl .flowrs-zoom-level {
  min-width: 56px;
  font: 500 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* What a node is for, in the inspector. Sits under the type name, before the
   parameters, because deciding whether this is the right node comes before tuning it. */
.flowrs-sel-doc {
  font: 12px/1.6 var(--sans, system-ui);
  color: var(--fr-text-2);
  margin: 6px 0 12px;
}

/* A stand-in: a node that runs a deterministic substitute for the model or device it is named after
   (Widget::stand_in). The same amber pill in the palette, on the canvas and in the
   inspector, in the caution colour, because what it computes is not what its name says.
   Palette and canvas draw the pill from the class (::after), so the element's text stays
   the type id that search, selection and tests read. */
.flowrs-standin-badge,
.flowrs-palette-node.stand-in::after,
.flowrs-node-label.stand-in::after {
  display: inline-block;
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border-2));
  border-radius: 999px;
  padding: 2px 6px;
  text-shadow: none;
  white-space: nowrap;
}
.flowrs-palette-node.stand-in::after,
.flowrs-node-label.stand-in::after { content: "stand-in"; }
.flowrs-palette-node.stand-in::after { margin-left: 6px; vertical-align: 1px; }
/* Under the label rather than beside it, so the type name stays centred on its node. */
.flowrs-node-label.stand-in::after {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 3px;
  transform: translateX(-50%);
  font-size: 8px;
}
.flowrs-standin-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 12px/1.5 var(--font-ui);
  color: var(--text-2);
  margin: 2px 0 8px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--warn) 6%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  border-radius: var(--r-sm);
}
.flowrs-standin-badge { flex: 0 0 auto; }

/* Export only: a node that cannot run in the browser (T0) and runs only in the exported
   program (flowrs_core::graph::tiers). Marked before it is dropped — in the palette — and
   after, on the canvas and in the inspector, in the info colour: it is not wrong, it runs
   somewhere else. The pill is drawn from the class (::after) like the stand-in's, so the
   element's text stays the type id; the reason is the palette tooltip and the inspector
   note. */
.flowrs-exportonly-badge,
.flowrs-palette-node.export-only::after,
.flowrs-node-label.export-only::after {
  display: inline-block;
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fr-info-text);
  background: var(--fr-info-soft);
  border: 1px solid color-mix(in srgb, var(--fr-info) 45%, var(--border-2));
  border-radius: 999px;
  padding: 2px 6px;
  text-shadow: none;
  white-space: nowrap;
}
.flowrs-palette-node.export-only::after,
.flowrs-node-label.export-only::after { content: "export only"; }
.flowrs-palette-node.export-only::after { margin-left: 6px; vertical-align: 1px; }
.flowrs-palette-node.export-only { color: var(--text-2); }
.flowrs-node-label.export-only::after {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 3px;
  transform: translateX(-50%);
  font-size: 8px;
}
.flowrs-exportonly-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 12px/1.5 var(--font-ui);
  color: var(--text-2);
  margin: 2px 0 8px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--fr-info) 6%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--fr-info) 30%, var(--border));
  border-radius: var(--r-sm);
}
.flowrs-exportonly-badge { flex: 0 0 auto; }

/* The run's report: the nodes a T0 run did not run, each with why. Under the console,
   on the console's well, so it reads as part of the run's output rather than as an
   error banner. */
.flowrs-run-gaps {
  max-height: 22vh;
  overflow: auto;
  margin: 0;
  padding: 10px 18px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font: 12px/1.55 var(--font-ui);
  color: var(--text-2);
}
.flowrs-run-gaps-title {
  margin: 0 0 6px;
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fr-info-text);
}
.flowrs-run-gaps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.flowrs-run-gap {
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
}
.flowrs-run-gap-node {
  font: 500 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.flowrs-run-gap-kind {
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fr-info-text);
  background: var(--fr-info-soft);
  border-radius: 999px;
  padding: 3px 6px;
  white-space: nowrap;
}
.flowrs-run-gap[data-gap="refused"] .flowrs-run-gap-kind {
  color: var(--fr-warn-text);
  background: var(--fr-warn-soft);
}
.flowrs-run-gap-why { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .flowrs-run-gap { grid-template-columns: minmax(0, 1fr) max-content; }
  .flowrs-run-gap-why { grid-column: 1 / -1; }
}

/* ============================================================================
   Waveform panel — a capture's digital lanes, analog traces, buses and decoded
   protocol lanes on one time axis. The plot itself is a canvas (drawn per frame
   from M4 / min-max columns); everything a person reads as text is DOM.
   ============================================================================ */
.flowrs-waveform-btn { color: var(--accent) !important; }
.wf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
}
.wf-panel {
  width: min(1480px, 96vw);
  height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi);
  overflow: hidden;
}
.wf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.wf-title { font: 600 15px var(--font-ui); margin-right: 4px; }
.wf-source {
  min-width: 220px;
  max-width: 420px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font: 12px var(--font-mono);
}
.wf-open input { display: none; }
.wf-close { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.wf-close:hover { color: var(--text); }
.wf-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
}
.wf-btn {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.wf-btn:hover { border-color: var(--accent); color: var(--accent); }
.wf-readout {
  font: 12px var(--font-mono);
  color: var(--text-2);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--border);
}
.wf-cursor-b { color: var(--warn); }
.wf-delta { color: var(--accent); }
.wf-perf { margin-left: auto; font: 11px var(--font-mono); color: var(--muted); }
.wf-status { margin: 6px 18px 0; font-size: 12px; }
.wf-ok { color: var(--good); }
.wf-err { color: var(--crit); }
.wf-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  position: relative;
}
.wf-empty {
  position: absolute;
  inset: 40px 320px auto 40px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.wf-scroll { overflow-y: auto; overflow-x: hidden; min-width: 0; position: relative; background: var(--fr-surface-sunk); }
/* The GPU marks beneath, the text overlay above it (the overlay takes the pointer). */
.wf-gpu { position: absolute; left: 0; top: 0; display: block; width: 100%; pointer-events: none; }
.wf-canvas { position: relative; display: block; width: 100%; cursor: crosshair; }
.wf-side {
  border-left: 1px solid var(--border);
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 12px;
  background: var(--panel);
}
.wf-timebase { font: 12px var(--font-mono); color: var(--text-2); margin-bottom: 10px; }
.wf-lanes, .wf-issues { list-style: none; margin: 0 0 10px; padding: 0; }
.wf-lane {
  padding: 6px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text);
  font: 11px var(--font-mono);
  line-height: 1.45;
}
.wf-lane-err { border-left-color: var(--crit); }
.wf-issue {
  padding: 5px 8px;
  margin-bottom: 5px;
  border-left: 3px solid var(--warn);
  color: var(--text-2);
  font-size: 11px;
}
.wf-at-cursor { font: 11px var(--font-mono); color: var(--text-2); line-height: 1.6; }
.wf-at-cursor div { border-bottom: 1px solid rgba(42, 49, 64, 0.5); padding: 2px 0; word-break: break-word; }
@media (max-width: 900px) {
  .wf-body { grid-template-columns: 1fr; }
  .wf-side { border-left: none; border-top: 1px solid var(--border); max-height: 30vh; }
}
.wf-add {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--accent);
  font: 12px var(--font-mono);
}
.wf-refusals { list-style: none; margin: 0 0 10px; padding: 0; }
.wf-refusal {
  padding: 5px 8px;
  margin-bottom: 5px;
  border-left: 3px solid var(--crit);
  color: var(--text);
  font-size: 11px;
  word-break: break-word;
}

/* Register facts for an embedded node (crate::registers): the registers its pin or bus
   touches on a chosen chip, from flowrs-regdb. Every value carries a status pill; the
   pill's colour says how far to trust it, its tooltip says where it came from. */
.flowrs-regfacts {
  margin: 10px 0 12px;
  padding: 9px 10px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
  /* Six columns of addresses do not fit a narrow inspector; scroll, never wrap a value. */
  overflow-x: auto;
}
.flowrs-regfacts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.flowrs-regfacts-title {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.flowrs-regfacts-head select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  font: 12px var(--font-ui);
}
.flowrs-regfacts-head select:focus-visible { outline: none; box-shadow: var(--ring); }
.flowrs-regfacts-what { margin: 0 0 6px; font: 12px/1.5 var(--font-ui); color: var(--text-2); }
.flowrs-regfacts-error { margin: 0 0 6px; font: 12px/1.5 var(--font-ui); color: var(--warn); }
.flowrs-regfacts-table {
  width: 100%;
  border-collapse: collapse;
  font: 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.flowrs-regfacts-table th {
  text-align: left;
  padding: 3px 8px 3px 0;
  font: 600 9.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.flowrs-regfacts-table td {
  padding: 3px 8px 3px 0;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
  white-space: nowrap;
}
.flowrs-regfacts-name { color: var(--text); font-weight: 600; }
.flowrs-regfacts-val { color: var(--text); }
.flowrs-regfacts-src { margin: 6px 0 0; font: 10.5px/1.5 var(--font-ui); color: var(--muted); }
.flowrs-fact {
  display: inline-block;
  font: 600 8.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 2px 5px;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  background: var(--panel);
}
.flowrs-fact[data-status="curated"] { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border-2)); }
.flowrs-fact[data-status="svd"] { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border-2)); }
.flowrs-fact[data-status="derived"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.flowrs-fact[data-status="unverified"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border-2)); }
.flowrs-fact[data-status="unavailable"] { color: var(--muted); }

/* --- Review: the agent-edit panel. Its body is the shared rv-* review (below and in
   the Review level), so a hardware proposal and a graph edit read the same way. ------ */
.flowrs-review {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 340px;
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  color: var(--text);
  font-size: 12px;
}
.flowrs-review .rv-title { margin: 0; font-size: 13px; font-weight: 600; }
.flowrs-review h3 {
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.flowrs-review .rv-buttons { margin-top: 12px; }
.flowrs-review .rv-buttons button { flex: 1; }
.flowrs-review .rv-apply { border: none; background: var(--flow); color: var(--accent-ink); font-weight: 600; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-verdict {
  padding: 4px 6px;
  border-radius: var(--r-sm);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-verdict[data-tone="good"] { color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel)); }
.rv-verdict[data-tone="warn"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--panel)); }
.rv-summary { margin: 8px 0; color: var(--text-2); white-space: pre-wrap; }
.rv-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rv-check { font: 11px/1.45 var(--font-mono); }
.rv-check[data-status="passed"] { color: var(--good); }
.rv-check[data-status="failed"] { color: var(--crit); }
.rv-check[data-status="skipped"] { color: var(--warn); }
.rv-check[data-status="not_run"] { color: var(--muted); }
.rv-code summary { margin-top: 10px; color: var(--text-2); cursor: pointer; }
.rv-code pre {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 180px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: 11px/1.45 var(--font-mono);
  white-space: pre-wrap;
}
/* An open request's alternatives, side by side above the review: each card a ghost of the
   graph it makes, labelled by the dimension that sets it apart. The panel widens for them. */
.flowrs-review.has-alts { width: min(560px, calc(100% - 24px)); }
.rv-alts h3 { margin-top: 2px; }
.rv-alt-row {
  display: grid;
  grid-template-columns: repeat(var(--alts, 3), minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.rv-alt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  text-align: left;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
  cursor: pointer;
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.rv-alt:hover { border-color: var(--border-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--hi), var(--sh-1); }
.rv-alt:focus-visible { outline: none; box-shadow: var(--ring); }
.rv-alt.on {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  box-shadow: inset 0 1px 0 var(--hi), 0 0 16px -6px var(--accent-glow);
}
.rv-alt-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rv-alt-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: 600 10.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--panel-3);
}
.rv-alt.on .rv-alt-n { background: var(--flow); color: var(--accent-ink); }
.rv-alt-dim {
  font: 600 12px/1.3 var(--font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-alt-at {
  font: 11px/1.35 var(--font-mono);
  color: var(--accent-2);
  overflow-wrap: anywhere;
}
.rv-alt-ghost {
  width: 100%;
  height: auto;
  aspect-ratio: 160 / 72;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.rv-g-wire { stroke: var(--border-2); stroke-width: 1.2; }
.rv-g-wire.new { stroke: var(--good); }
.rv-g-node { fill: var(--panel-3); stroke: var(--border-2); stroke-width: 1; }
.rv-g-node[data-kind="added"] { fill: color-mix(in srgb, var(--good) 35%, var(--panel)); stroke: var(--good); }
.rv-g-node[data-kind="changed"] { fill: color-mix(in srgb, var(--accent-2) 30%, var(--panel)); stroke: var(--accent-2); }
.rv-g-node[data-kind="removed"] { fill: transparent; stroke: var(--crit); stroke-dasharray: 2 2; }
.rv-alt-meta { font: 10.5px/1.4 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-alt-near { font: 10.5px/1.4 var(--font-ui); color: var(--warn); }

/* The decision ledger: why each change, and every choice the edit made that the request
   did not name — each a button that reopens it as verified alternatives. */
.rv-why {
  display: block;
  margin: 1px 0 3px 1.4em;
  font: 11.5px/1.45 var(--font-ui);
  color: var(--text-2);
}
.rv-ledger { margin-top: 4px; }
.rv-ledger-hint { margin: 0 0 6px; }
.rv-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rv-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.rv-choice:hover { border-color: var(--border-2); border-left-color: var(--accent); background: var(--panel-3); transform: translateY(-1px); }
.rv-choice:focus-visible { outline: none; box-shadow: var(--ring); }
.rv-choice[data-kind="default"] { border-left-color: var(--warn); }
.rv-choice[data-kind="minor"] { border-left-color: var(--border-2); }
.rv-choice-at { font: 600 11.5px/1.4 var(--font-mono); color: var(--accent-2); }
.rv-choice-eq { font: 11.5px/1.4 var(--font-mono); color: var(--muted); }
.rv-choice-value { font: 600 11.5px/1.4 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.rv-choice-tag {
  padding: 0 5px;
  font: 600 9.5px/1.6 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-radius: var(--r-sm);
}
.rv-choice-why { flex-basis: 100%; font: 11.5px/1.45 var(--font-ui); color: var(--text-2); }
.rv-choice-why.unstated { color: var(--muted); font-style: italic; }
.rv-choice-alts { flex-basis: 100%; font: 10.5px/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.rv-ledger-note { margin: 6px 0 0; font: 11.5px/1.45 var(--font-ui); color: var(--accent); }

/* The agent's clarifying question: each open choice with its answers, then the two ways
   on — verified alternatives, or the agent chooses and lists what it chose. */
.flowrs-agent-bar { flex-wrap: wrap; }
.flowrs-agent-question {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.aq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.aq-open { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.aq-what { min-width: 160px; margin-right: 4px; font: 600 12px/1.4 var(--font-ui); color: var(--text); }
.aq-opt {
  padding: 2px 8px;
  font: 11.5px/1.5 var(--font-mono);
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.aq-opt:hover { border-color: var(--accent); color: var(--text); }
.aq-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.aq-range { font: 11.5px/1.5 var(--font-mono); color: var(--muted); }
.aq-actions { display: flex; gap: 8px; }
.aq-alts, .aq-choose {
  padding: 5px 11px;
  font: 500 12px var(--font-ui);
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.aq-alts { color: var(--accent-ink); background: var(--flow); border-color: transparent; font-weight: 600; }
.aq-choose:hover { border-color: var(--border-2); color: var(--text); }
.aq-alts:focus-visible, .aq-choose:focus-visible { outline: none; box-shadow: var(--ring); }

/* The Code view, anchored: each node's code explained at its lines. */
.code-anchored {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 10px;
  align-items: start;
}
.code-line { display: inline; transition: background var(--fast); }
.code-line.lit {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--text);
}
.code-explain {
  max-height: 70vh;
  overflow: auto;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi);
}
.code-explain h3 {
  margin: 0 0 6px;
  font: 600 11px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.code-explain ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.code-anchor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: calc(var(--depth, 0) * 10px);
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.code-anchor:hover, .code-anchor.on { border-color: var(--border-2); background: var(--panel-2); }
.code-anchor:focus-visible { outline: none; box-shadow: var(--ring); }
.code-anchor.changed { border-left: 2px solid var(--accent-2); }
.ca-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ca-handle { font: 600 11.5px/1.4 var(--font-mono); color: var(--accent-2); }
.ca-widget { font: 11.5px/1.4 var(--font-mono); color: var(--text); }
.ca-lines { margin-left: auto; font: 10.5px/1.4 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ca-doc { font: 11.5px/1.45 var(--font-ui); color: var(--text-2); }
.ca-doc.none { color: var(--muted); font-style: italic; }
.ca-why { font: 11.5px/1.45 var(--font-ui); color: var(--accent); }
@media (max-width: 900px) {
  .code-anchored { grid-template-columns: minmax(0, 1fr); }
}

/* The diff where it lands: nodes the edit adds and nodes it changes. */
.flowrs-node-label.diff-added,
.flowrs-node-label.diff-changed { padding: 1px 6px; border-radius: var(--r-sm); }
.flowrs-node-label.diff-added { outline: 1.5px solid var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.flowrs-node-label.diff-changed { outline: 1.5px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 16%, transparent); }
/* A node the edit removes, where it stood: dashed, struck through, not interactive. */
.flowrs-node-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border: 1.5px dashed var(--crit);
  border-radius: var(--r-sm);
  color: var(--crit);
  font-weight: 600;
  text-decoration: line-through;
  white-space: nowrap;
  opacity: 0.75;
  pointer-events: none;
}

/* Register trace (rung 3): the twin's every peripheral access against the register
   database, in the twin panel and the PIL panel. An instrument readout like the rest:
   graphite card, mono data, a severity colour on the left rule of each violation. */
.tt-report {
  margin: 12px 0 4px;
  padding: 11px 13px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
}
.tt-head { margin: 0 0 9px; font: 600 12.5px/1.45 var(--font-ui); color: var(--text); }
.tt-head.tt-good { color: var(--good); }
.tt-head.tt-bad { color: var(--crit); }
.tt-rung {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  font: 600 9px/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--flow);
  border-radius: 999px;
  vertical-align: 1px;
}
.tt-classes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.tt-class {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  font: 11px var(--font-ui);
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tt-class-n {
  min-width: 18px;
  padding: 1px 5px;
  font: 600 10.5px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
  background: var(--panel-3);
  border-radius: 999px;
}
.tt-class[data-state="passed"] { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.tt-class[data-state="passed"] .tt-class-n { color: var(--good); }
.tt-class[data-state="broke"] { color: var(--text); border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); }
.tt-class[data-state="broke"] .tt-class-n { color: var(--accent-ink); background: var(--crit); }
.tt-class[data-state="unchecked"] { border-style: dashed; }
.tt-class[data-state="unused"] { opacity: 0.55; }
.tt-violations { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tt-violation {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crit);
  border-radius: var(--r-sm);
}
.tt-violation[data-severity="warning"] { border-left-color: var(--warn); }
.tt-violation summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
  font: 12px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.tt-violation summary::-webkit-details-marker { display: none; }
.tt-violation summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.tt-sev {
  font: 600 9px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crit);
}
.tt-violation[data-severity="warning"] .tt-sev { color: var(--warn); }
.tt-kind { font: 600 11.5px var(--font-ui); color: var(--text); }
.tt-where b { color: var(--text); font-weight: 600; }
.tt-msg { margin: 0; padding: 0 10px 6px; font-size: 12px; color: var(--text-2); max-width: 90ch; }
.tt-fact { margin: 0; padding: 0 10px 6px; }
.tt-slice {
  margin: 0 10px 9px;
  border-collapse: collapse;
  font: 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tt-slice th {
  padding: 2px 12px 3px 0;
  text-align: left;
  font: 600 9px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tt-slice td { padding: 2px 12px 2px 0; color: var(--muted); white-space: nowrap; }
.tt-slice tr.tt-at td { color: var(--text); font-weight: 600; }
.tt-slice tr.tt-at td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: 6px; }
.tt-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.tt-rate { margin: 9px 0 0; font: 11.5px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tt-unchecked { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.tt-unchecked summary { cursor: pointer; }
.tt-unchecked ul { margin: 6px 0 0; padding-left: 18px; }
.tt-unchecked li { margin: 2px 0; }

/* ---- Board view: the twin's board as wired, lit and pressed by a live run ---- */
.hw-twin .hw-picker { align-items: flex-start; }
.hw-twin .hw-picker-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.hw-twin .hw-search {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  max-width: 380px;
}
.hw-twin .hw-search:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.hw-twin .hw-picker-results:empty { display: none; }

.hw-twin .hw-wired {
  margin: 12px 0 4px;
  padding: 12px 13px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi);
}
.hw-twin .hw-wired-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hw-twin .hw-wired-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.hw-twin .hw-wired-part { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; }
.hw-twin .hw-wired-src { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.hw-twin .hw-wired-grid { display: flex; flex-direction: column; gap: 8px; }
.hw-twin .hw-wired-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-twin .hw-wired-none { margin: 0; font-size: 11.5px; color: var(--muted); }
.hw-twin .hw-wired-fact {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
.hw-twin .hw-wired-notes { margin: 8px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--warn); }

/* An LED: a lamp that blooms in its own colour while its pin sits at the lit level. */
.hw-twin .hw-led,
.hw-twin .hw-key {
  --lamp: var(--good);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
  font-variant-numeric: tabular-nums;
}
.hw-twin .hw-led[data-colour="red"] { --lamp: var(--fr-crit); }
.hw-twin .hw-led[data-colour="blue"] { --lamp: var(--fr-accent-2); }
.hw-twin .hw-led[data-colour="yellow"],
.hw-twin .hw-led[data-colour="amber"],
.hw-twin .hw-led[data-colour="orange"] { --lamp: var(--fr-warn); }
.hw-twin .hw-led[data-colour="white"] { --lamp: var(--fr-text); }
.hw-twin .hw-led-lamp {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fr-led-off);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: box-shadow var(--fast), background var(--fast);
  flex: none;
}
.hw-twin .hw-led.lit .hw-led-lamp {
  background: radial-gradient(circle at 40% 32%, var(--fr-white), var(--lamp) 68%);
  box-shadow: 0 0 12px 2px var(--lamp), inset 0 0 2px rgba(255, 255, 255, 0.6);
}
.hw-twin .hw-led.unreachable { opacity: 0.55; border-style: dashed; }
/* A withheld level: which level lights the LED is unknown, so its lamp is neither lit nor dark. */
.hw-twin .hw-led.unknown .hw-led-lamp {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--muted);
}
.hw-twin .hw-led-name { color: var(--text); font-weight: 600; }
.hw-twin .hw-led-pin { color: var(--accent); }
.hw-twin .hw-led-level { color: var(--muted); }

/* A button: a machined key cap that sinks while held. */
.hw-twin .hw-key { cursor: pointer; user-select: none; touch-action: none; transition: transform var(--fast), border-color var(--fast); }
.hw-twin .hw-key:hover:not(:disabled) { border-color: var(--accent); }
.hw-twin .hw-key:focus-visible { outline: none; box-shadow: var(--ring); }
.hw-twin .hw-key:disabled { cursor: not-allowed; opacity: 0.6; }
.hw-twin .hw-key-cap {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--panel-3), var(--fr-surface-1));
  box-shadow: 0 2px 0 var(--fr-surface-sunk), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--fast), box-shadow var(--fast);
  flex: none;
}
.hw-twin .hw-key.down { border-color: var(--accent); }
.hw-twin .hw-key.down .hw-key-cap {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--fr-surface-sunk), 0 0 10px var(--accent-glow), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hw-twin .hw-live {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 6px 16px;
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast);
}
.hw-twin .hw-live:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--accent-glow); }
.hw-twin .hw-live:focus-visible { outline: none; box-shadow: var(--ring); }
.hw-twin .hw-live.on { color: var(--accent-ink); background: var(--flow); border-color: transparent; }

/* ============================================================================
   Learning: graded items, the mode switch, the learner's record (crate::learn).
   Instrument tokens only; the agent bar's segmented mode switch matches the view
   control group, and the item card is a raised surface inside the lessons panel.
   ============================================================================ */
.flowrs-learn-panel {
  width: 320px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  z-index: 20;
}
.flowrs-learn-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; font-size: 11px; }
.flowrs-learn-phase,
.flowrs-learn-solo {
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-2);
  font: 500 11px/1.6 var(--font-ui);
}
.flowrs-learn-phase[data-phase="practising"] { color: var(--accent-2); border-color: rgba(70, 166, 255, 0.45); }
.flowrs-learn-phase[data-phase="checking"] { color: var(--warn); border-color: rgba(244, 183, 64, 0.45); }
.flowrs-learn-phase[data-phase="mastered"] { color: var(--accent-ink); background: var(--good); border-color: var(--good); }
.flowrs-lesson-actions { flex-wrap: wrap; }
.flowrs-learn-practise { border-color: rgba(53, 224, 196, 0.45) !important; }

.flowrs-learn-item {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
}
.flowrs-learn-item h4 { margin: 2px 0 4px; font: 600 13px/1.35 var(--font-ui); }
.flowrs-learn-kind { font: 600 10px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.flowrs-learn-item[data-kind="Solo challenge"] .flowrs-learn-kind { color: var(--warn); }
.flowrs-learn-item[data-kind="Find the bug"] .flowrs-learn-kind { color: var(--held); }
.flowrs-learn-goal { margin: 0 0 6px; color: var(--text-2); font-size: 12px; }
.flowrs-learn-lock {
  margin: 0 0 8px;
  padding: 5px 8px;
  border-left: 2px solid var(--accent);
  background: rgba(53, 224, 196, 0.06);
  color: var(--text-2);
  font-size: 11.5px;
}
.flowrs-learn-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.flowrs-learn-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.flowrs-learn-actions button:hover:not(:disabled) { border-color: var(--accent); }
.flowrs-learn-actions button:disabled { opacity: 0.5; cursor: default; }
.flowrs-learn-actions .flowrs-learn-submit { background: var(--flow); color: var(--accent-ink); border: none; font-weight: 600; }
.flowrs-learn-actions .flowrs-learn-delete:hover { border-color: var(--crit); color: var(--crit); }
.flowrs-learn-feedback { margin: 6px 0; font-size: 12px; color: var(--text); }
.flowrs-learn-feedback[data-misconception]:not([data-misconception=""]) { border-left: 2px solid var(--warn); padding-left: 8px; }
.flowrs-learn-hints { margin: 6px 0; padding-left: 18px; font-size: 12px; color: var(--text-2); }
.flowrs-learn-hints li { margin: 4px 0; }
.flowrs-learn-rung { display: block; font: 600 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); }
.flowrs-learn-line { display: block; }
.flowrs-learn-predicting { display: grid; gap: 6px; margin: 8px 0; font-size: 12px; color: var(--text-2); }
.flowrs-learn-guess {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font: 13px var(--font-mono);
}
.flowrs-learn-guess:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.flowrs-learn-compare {
  justify-self: start;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font: 500 12px var(--font-ui);
  cursor: pointer;
}
.flowrs-learn-prediction { margin: 6px 0; font: 12px var(--font-mono); }
.flowrs-learn-prediction[data-correct="true"] { color: var(--good); }
.flowrs-learn-prediction[data-correct="false"] { color: var(--warn); }
.flowrs-learn-done { margin: 6px 0 0; font-size: 12px; color: var(--text); }

.flowrs-learn-progress { margin: 6px 0 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.flowrs-learn-progress h4 { margin: 0 0 4px; font: 600 12px var(--font-ui); }
.flowrs-learn-privacy, .flowrs-learn-tally, .flowrs-learn-saved { margin: 2px 0; font-size: 11.5px; color: var(--muted); }
.flowrs-learn-tally { color: var(--text-2); }

/* The agent's mode switch: a segmented group, like the view controls. */
.flowrs-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  overflow: hidden;
  flex: none;
}
.flowrs-mode-btn {
  background: transparent;
  color: var(--text-2);
  border: none;
  border-right: 1px solid var(--border);
  padding: 6px 11px;
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.flowrs-mode-btn:last-of-type { border-right: none; }
.flowrs-mode-btn:hover:not(:disabled) { color: var(--text); background: var(--panel-3); }
.flowrs-mode-btn.on { background: var(--flow); color: var(--accent-ink); font-weight: 600; }
.flowrs-mode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.flowrs-mode-note { padding: 0 10px; font: 500 11px var(--font-ui); color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------------------------
   Authorship (work/provenance): who wrote each node and wire, and how much of the
   graph is the person's. A chip under each label, a dot on each wire, a legend.
   --------------------------------------------------------------------------------- */
[data-origin] { --who: var(--origin-unknown); }
[data-origin="human"] { --who: var(--origin-human); }
[data-origin="agent"] { --who: var(--origin-agent); }
[data-origin="mixed"] { --who: var(--origin-mixed); }
[data-origin="imported"] { --who: var(--origin-imported); }
.flowrs-node-label.origin-on {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.flowrs-origin-chip {
  font: 600 0.78em/1.2 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--who);
  background: color-mix(in srgb, var(--who) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--who) 55%, transparent);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--hi);
}
.flowrs-wire-origin {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--who);
  box-shadow: 0 0 0 2px var(--bg), 0 0 6px color-mix(in srgb, var(--who) 60%, transparent);
  pointer-events: none;
}
.flowrs-origin-legend {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--hi), transparent), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  pointer-events: none;
  z-index: 3;
}
.flowrs-origin-share {
  font: 600 12px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.flowrs-origin-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 11px/1.3 var(--font-ui);
  color: var(--text-2);
}
.flowrs-origin-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--who);
}
.flowrs-origin-toggle {
  /* Floats in the canvas's bottom-left corner: it takes no room from the layout, and the
     review panel (top right) never covers it, since a review is when it is wanted. */
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  pointer-events: auto;
  font: 500 12.5px/1 var(--font-ui);
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi);
  transition: border-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.flowrs-origin-toggle:hover { border-color: var(--accent-2); color: var(--text); }
.flowrs-origin-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.flowrs-origin-toggle.active {
  color: var(--accent-ink);
  background: var(--flow);
  border-color: transparent;
  box-shadow: 0 0 12px var(--accent-glow);
}
/* Review: a change that overrides what the person wrote. */
.rv-change.overrides { border-left: 2px solid var(--warn); padding-left: 6px; }
.rv-override {
  display: inline-block;
  margin-left: 8px;
  font: 600 10.5px/1.5 var(--font-ui);
  letter-spacing: 0.02em;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  border-radius: 999px;
  padding: 0 7px;
  vertical-align: 1px;
}

/* ============================================================================
   How the editor starts (crate::start): the header's ways in and its menus, the canvas's
   own tools, the start screen, the question before a document is replaced, and the empty
   states of a blank document. Tokens only; a skin applies inside [data-skin].
   ============================================================================ */

/* The header: the ways in, always there, then a few menus. */
.flowrs-start-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.flowrs-menu { position: relative; }
/* The header is a stacking context (z-index 5), so an open menu could never rise above the
   page or the floating panels (Energy 55, Live 56) and they took its clicks. While a menu is
   open the header sits above them, still under the link-drop backdrop (60) and dialogs. */
.flowrs-header:has(.flowrs-menu-btn[aria-expanded="true"]) { z-index: 58; }
.flowrs-menu-caret { margin-left: 6px; color: var(--muted); font-size: 11px; }
.flowrs-menu-btn[aria-expanded="true"] { background: var(--panel-3); border-color: var(--border-2); }
.flowrs-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 208px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi);
}
.flowrs-menu-list[hidden] { display: none; }
.flowrs-header .flowrs-menu-list button {
  width: 100%;
  text-align: left;
  background: transparent;
  border-color: transparent;
  margin-left: 0;
  white-space: nowrap;
}
.flowrs-header .flowrs-menu-list button:hover { background: var(--panel-3); border-color: transparent; }
.flowrs-header .flowrs-menu-list button:focus-visible { box-shadow: var(--ring); }
.flowrs-header .flowrs-menu-list .flowrs-icon-btn { font-size: 13px; color: var(--text); }
.flowrs-panels-menu .flowrs-menu-list { left: auto; right: 0; }
@media (max-width: 600px) {
  .flowrs-header { padding: 8px 12px; gap: 8px 10px; }
  .flowrs-levels { max-width: 100%; overflow-x: auto; }
  .flowrs-start-btns { margin-left: 0; }
  .flowrs-file-menu .flowrs-menu-list { left: auto; right: auto; }
}

/* The canvas's own tools: zoom, frame, tidy, on the canvas they move (bottom right; the
   authorship switch keeps the bottom left). */
.flowrs-canvas-tools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.flowrs-canvas-tools .flowrs-view-ctl { background: var(--panel-2); box-shadow: inset 0 1px 0 var(--hi); }
.flowrs-view-ctl button { cursor: pointer; }
.flowrs-view-ctl button:focus-visible,
.flowrs-tidy:focus-visible { outline: none; box-shadow: var(--ring); }
.flowrs-tidy {
  font: 500 12.5px/1 var(--font-ui);
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--hi);
}
.flowrs-tidy:hover { border-color: var(--accent-2); color: var(--text); }

/* The Back level holds the start screen over its canvas, in a stacking context of its
   own: the lessons and review panels beside it stay on top. */
.flowrs-block-diagram { position: relative; isolation: isolate; }
@media (max-width: 900px) {
  /* On a phone the start screen is the page: the node palette steps aside until it goes. */
  .flowrs-visual.fr-starting .flowrs-tools { display: none; }
}

.fr-start {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--fr-bg);
  color: var(--fr-text);
  font-family: var(--fr-font-ui);
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-body);
  letter-spacing: var(--fr-tracking);
}
.fr-start :focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; box-shadow: none; }
/* A faint glow of the brand at the top, under the content (a layer of its own, so every text
   run still sits on the flat ground the contrast check measures). */
.fr-start::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  background: radial-gradient(90% 100% at 50% -20%, color-mix(in srgb, var(--fr-accent-2) 8%, transparent), transparent 70%);
  pointer-events: none;
}
/* The Back level's own heading rule must not reach the start screen's headings. */
.fr-start h1,
.fr-start h2 { margin: 0; padding: 0; color: var(--fr-text); }
.fr-start .fr-start-h2 { font-size: var(--fr-fs-lg); }
.fr-start .fr-start-h3 { font-size: var(--fr-fs-md); }
.fr-start-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--fr-space-8) var(--fr-space-8) var(--fr-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-8);
}
.fr-start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-space-3); }
.fr-start-brand { display: inline-flex; align-items: center; gap: var(--fr-space-2); }
.fr-start-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--fr-flow);
  box-shadow: 0 0 14px -2px var(--fr-accent-glow);
}
.fr-start-kicker { font-weight: var(--fr-fw-strong); font-size: var(--fr-fs-sm); color: var(--fr-text); }
.fr-start-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fr-space-2); }
.fr-start-skin {
  display: inline-flex;
  gap: var(--fr-space-half);
  padding: 3px;
  border-radius: var(--fr-radius-control);
  background: var(--fr-layer-track);
}
.fr-start-skin-opt {
  appearance: none;
  border: 0;
  min-height: 28px;
  padding: 0 var(--fr-space-3);
  border-radius: 7px;
  background: transparent;
  color: var(--fr-text-2);
  font: var(--fr-fw-medium) var(--fr-fs-xs) / 1 var(--fr-font-ui);
  cursor: pointer;
}
.fr-start-skin-opt[aria-checked="true"] { background: var(--fr-surface-2); color: var(--fr-text); box-shadow: var(--fr-shadow-1); }
.fr-start-hero { display: flex; flex-direction: column; gap: var(--fr-space-2); max-width: 760px; }
.fr-start-title {
  margin: 0;
  font-size: var(--fr-fs-3xl);
  font-weight: var(--fr-fw-strong);
  line-height: var(--fr-lh-display);
  letter-spacing: var(--fr-tracking-display);
}
.fr-start-lede { margin: 0; max-width: 62ch; color: var(--fr-text-2); font-size: var(--fr-fs-md); }
.fr-start-h2 { margin: 0; font-size: var(--fr-fs-lg); font-weight: var(--fr-fw-strong); line-height: var(--fr-lh-heading); }
.fr-start-h3 { margin: 0; font-size: var(--fr-fs-md); font-weight: var(--fr-fw-strong); line-height: var(--fr-lh-heading); }
.fr-start-sub { margin: 0; color: var(--fr-text-2); }

/* 1. Describe: the composer. */
.fr-start-describe {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
  padding: var(--fr-space-6);
  border-radius: var(--fr-radius-card);
  background: var(--fr-surface-2);
  border: 1px solid var(--fr-border);
  box-shadow: var(--fr-shadow-card);
}
.fr-start-composer { display: flex; align-items: flex-end; gap: var(--fr-space-3); }
.fr-start-goal {
  flex: 1;
  height: auto;
  min-height: 56px;
  padding: var(--fr-space-3);
  resize: vertical;
  font-size: var(--fr-fs-md);
  line-height: var(--fr-lh-body);
}
.fr-start-draft { min-width: 120px; }
.fr-start-goals { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); }
.fr-start-chip {
  appearance: none;
  min-height: 32px;
  padding: var(--fr-space-1) var(--fr-space-3);
  border: 1px solid var(--fr-border-2);
  border-radius: var(--fr-radius-full);
  background: transparent;
  color: var(--fr-text-2);
  font: var(--fr-fw-medium) var(--fr-fs-xs) / 1.3 var(--fr-font-ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--fr-dur-fast) var(--fr-ease-out), border-color var(--fr-dur-fast) var(--fr-ease-out), color var(--fr-dur-fast) var(--fr-ease-out);
}
.fr-start-chip:hover { background: var(--fr-layer-hover); border-color: var(--fr-border-3); color: var(--fr-text); }
.fr-start-said:empty { display: none; }
.fr-start-note { margin: 0; color: var(--fr-text-2); }
.fr-start-note-warn {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
  padding: var(--fr-space-3) var(--fr-space-4);
  border-left: 3px solid var(--fr-warn);
  border-radius: var(--fr-radius-control);
  background: var(--fr-warn-soft);
  color: var(--fr-text);
}
.fr-start-note-warn p { margin: 0; }
.fr-start-note-title { font-weight: var(--fr-fw-strong); }
.fr-start-fine { margin: 0; color: var(--fr-text-3); font-size: var(--fr-fs-xs); }

/* 2. Examples, by domain. */
.fr-start-examples { display: flex; flex-direction: column; gap: var(--fr-space-4); }
.fr-start-sechead { display: flex; flex-direction: column; gap: var(--fr-space-1); }
.fr-start-tabs { display: flex; flex-wrap: wrap; gap: var(--fr-space-1); border-bottom: 1px solid var(--fr-border); }
.fr-start-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-2);
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 var(--fr-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fr-text-2);
  font: var(--fr-fw-medium) var(--fr-fs-sm) / 1.3 var(--fr-font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fr-dur-fast) var(--fr-ease-out), border-color var(--fr-dur-fast) var(--fr-ease-out);
}
.fr-start-tab:hover { color: var(--fr-text); }
.fr-start-tab[aria-selected="true"] { color: var(--fr-text); border-bottom-color: var(--fr-accent); }
.fr-start-tab-n {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--fr-radius-full);
  background: var(--fr-layer-track);
  color: var(--fr-text-2);
  font: var(--fr-fw-medium) var(--fr-fs-xs) / 1 var(--fr-font-mono);
  text-align: center;
}
.fr-start-tabpanel { display: flex; flex-direction: column; gap: var(--fr-space-3); }
.fr-start-blurb { margin: 0; color: var(--fr-text-2); }
.fr-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--fr-space-4); }
.fr-start-card {
  appearance: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-2);
  padding: var(--fr-space-2) var(--fr-space-2) var(--fr-space-4);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-card);
  background: var(--fr-surface-2);
  box-shadow: var(--fr-shadow-card);
  color: var(--fr-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--fr-dur-fast) var(--fr-ease-out), border-color var(--fr-dur-fast) var(--fr-ease-out), box-shadow var(--fr-dur-fast) var(--fr-ease-out);
}
.fr-start-card:hover { transform: translateY(-2px); border-color: var(--fr-border-3); box-shadow: var(--fr-shadow-2); }
.fr-start-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 280 / 112;
  border-radius: var(--fr-radius-control);
  background: var(--fr-surface-sunk);
}
.fr-start-wire { fill: none; stroke: var(--fr-text-3); stroke-width: 1.4; }
.fr-start-node { stroke: none; }
.fr-start-node-in { fill: var(--fr-cat-1); }
.fr-start-node-step { fill: var(--fr-cat-3); }
.fr-start-node-out { fill: var(--fr-cat-4); }
.fr-start-card-title { padding: 0 var(--fr-space-2); font-weight: var(--fr-fw-strong); line-height: var(--fr-lh-heading); }
.fr-start-card-purpose { padding: 0 var(--fr-space-2); color: var(--fr-text-2); font-size: var(--fr-fs-xs); }

/* 3. Import, and 4. open a file. */
.fr-start-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--fr-space-4); align-items: start; }
.fr-start-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-2);
  padding: var(--fr-space-5);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-card);
  background: var(--fr-surface-1);
}
.fr-start-actions { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); margin-top: var(--fr-space-1); }
.fr-start-ingest[hidden] { display: none; }
.fr-start-ingest .ig-panel { margin-top: var(--fr-space-2); }
.fr-start-hint {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-3);
  padding-top: var(--fr-space-4);
  border-top: 1px solid var(--fr-border);
  color: var(--fr-text-2);
}
@media (max-width: 720px) {
  .fr-start-inner { padding: var(--fr-space-6) var(--fr-space-4) var(--fr-space-10); gap: var(--fr-space-6); }
  .fr-start-title { font-size: var(--fr-fs-xl); }
  .fr-start-describe { padding: var(--fr-space-4); }
  .fr-start-composer { flex-direction: column; align-items: stretch; }
  .fr-start-row { grid-template-columns: minmax(0, 1fr); }
  .fr-start-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .fr-start-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Before a document with changes no file holds is replaced. */
.fr-replace-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--fr-space-4);
  background: var(--fr-overlay);
}
.fr-replace {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
  padding: var(--fr-space-6);
  border: 1px solid var(--fr-border-2);
  border-radius: var(--fr-radius-card);
  background: var(--fr-surface-2);
  box-shadow: var(--fr-shadow-3);
  color: var(--fr-text);
  font-family: var(--fr-font-ui);
  font-size: var(--fr-fs-sm);
}
.fr-replace :focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; box-shadow: none; }
.fr-replace-title { margin: 0; font-size: var(--fr-fs-md); font-weight: var(--fr-fw-strong); }
.fr-replace-body { margin: 0; color: var(--fr-text-2); }
.fr-replace-actions { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); margin-top: var(--fr-space-2); }

/* A blank document's app, Front Panel and run-only page. */
.fr-app-notice { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-space-2) var(--fr-space-4); }
.fr-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fr-space-2); margin-top: var(--fr-space-2); }
.fr-app-blank { flex: 1; display: grid; place-items: center; min-height: 360px; }
.fr-front-blank { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--fr-space-6); }
.fr-front-blank .fr-empty { max-width: 420px; }
.fr-runonly-empty { min-height: 70vh; display: grid; place-items: center; }
.fr-runonly-empty-title { font-size: var(--fr-fs-lg); line-height: var(--fr-lh-heading); }
.fr-runonly-empty .fr-btn { text-decoration: none; }
.flowrs-autosave-note { color: var(--warn); }

/* Import a workflow: a file as well as a paste. */
.ig-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-choose {
  all: unset;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 13px;
  border-radius: 8px;
  font: 600 13px/1.2 var(--sans, system-ui);
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--fr-text);
}
.ig-choose:hover { border-color: var(--fr-accent-2); }
.ig-examine:focus-visible, .ig-adopt:focus-visible, .ig-choose:focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; }
.ig-embedded { margin-top: var(--fr-space-2); padding-top: var(--fr-space-3); }

/* A phone-width window: the agent bar wraps (the prompt on a line of its own) and the status
   bar wraps, so nothing scrolls the page sideways. */
@media (max-width: 600px) {
  .flowrs-agent-bar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .flowrs-agent-input { flex: 1 1 100%; order: 10; }
  .flowrs-agent-reply { max-width: 100%; flex: 1 1 100%; order: 11; white-space: normal; }
  .flowrs-status { flex-wrap: wrap; padding: 6px 12px; }
  .flowrs-output { margin-left: 0; overflow-wrap: anywhere; }
}

/* The header in one row at 1440: tighter gaps and padding than the old 25-button bar. */
.flowrs-header { gap: 8px; }
.flowrs-header button { padding: 6px 9px; }
.flowrs-levels button { padding: 5px 8px; }
.flowrs-history-ctl button { min-width: 32px; font-size: 15px; }

/* Describe (crates/flowrs-ui/src/describe.rs): the starting point, the route, the checks and the
   shared agent's allowance. A card on the Instrument surfaces; under the composer on the start
   screen, and docked over the work area elsewhere. Every mark says its word, so colour is
   never the only signal. */
.fr-describe {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4);
  border-radius: var(--fr-radius-card);
  background: var(--fr-surface-2);
  border: 1px solid var(--fr-border);
  box-shadow: var(--fr-shadow-card), inset 0 1px 0 var(--fr-hi);
  color: var(--fr-text);
  font: var(--fr-fw-regular) var(--fr-fs-sm) / var(--fr-lh-body) var(--fr-font-ui);
  letter-spacing: var(--fr-tracking);
}
.fr-describe-dock {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 29;
  width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
}
/* Agent threads: the panel over the body, on the right, as the Describe dock is on the left. */
.fr-threads {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 29;
  width: min(520px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
}
/* Out of the way while a thread's patch is under review on the canvas, and back when it is decided. */
.fr-threads-under-review { display: none; }
.fr-threads-plain { margin: 0; color: var(--fr-text); font-size: var(--fr-fs-sm); }
.fr-threads-fine { margin: 0; color: var(--fr-text-2); font-size: var(--fr-fs-xs); overflow-wrap: anywhere; }
.fr-threads-note { margin: 0; color: var(--fr-danger, var(--fr-text)); font-size: var(--fr-fs-xs); overflow-wrap: anywhere; }
.fr-threads-new { width: 100%; resize: vertical; min-height: 64px; }
.fr-threads-actions { display: flex; flex-wrap: wrap; gap: var(--fr-space-1); }
.fr-threads-list, .fr-threads-waits, .fr-threads-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-2);
  min-width: 0;
}
.fr-threads-waits { gap: var(--fr-space-1); }
.fr-threads-row {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
  padding: var(--fr-space-3);
  border-radius: var(--fr-radius-control);
  background: var(--fr-surface-1);
  border: 1px solid var(--fr-border);
  min-width: 0;
}
.fr-threads-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fr-space-2); min-width: 0; }
.fr-threads-words { color: var(--fr-text); font-weight: var(--fr-fw-strong); min-width: 0; overflow-wrap: anywhere; }
.fr-threads-state { color: var(--fr-text-2); font-size: var(--fr-fs-xs); white-space: nowrap; }
.fr-threads-wait { color: var(--fr-text-2); font-size: var(--fr-fs-xs); overflow-wrap: anywhere; }
.fr-threads-ask { display: flex; flex-direction: column; gap: var(--fr-space-1); }
.fr-threads-q { color: var(--fr-text); font-size: var(--fr-fs-sm); overflow-wrap: anywhere; }
.fr-threads-code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--fr-font-mono, monospace); font-size: var(--fr-fs-xs); color: var(--fr-text); }
.fr-threads-entry { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--fr-space-2); font-size: var(--fr-fs-xs); }
.fr-threads-who { color: var(--fr-text-2); }
.fr-threads-text { color: var(--fr-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-threads-checks summary { color: var(--fr-text-2); font-size: var(--fr-fs-xs); cursor: pointer; }
.fr-describe-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fr-space-2); }
.fr-describe .fr-describe-h2 { margin: 0; padding: 0; font-size: var(--fr-fs-md); font-weight: var(--fr-fw-strong); color: var(--fr-text); }
.fr-describe-body { display: flex; flex-direction: column; gap: var(--fr-space-3); min-width: 0; }
.fr-describe-sec {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
  padding: var(--fr-space-3);
  border-radius: var(--fr-radius-control);
  background: var(--fr-surface-1);
  border: 1px solid var(--fr-border);
}
.fr-describe .fr-describe-h {
  margin: 0;
  padding: 0;
  color: var(--fr-text-2);
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-strong);
  letter-spacing: var(--fr-tracking-caps);
  text-transform: uppercase;
}
.fr-describe-title { margin: 0; font-weight: var(--fr-fw-strong); color: var(--fr-text); }
.fr-describe-text, .fr-describe-request { margin: 0; color: var(--fr-text-2); overflow-wrap: anywhere; }
.fr-describe-said { white-space: pre-wrap; }
.fr-describe-key-word { color: var(--fr-text); font-weight: var(--fr-fw-medium); }
.fr-describe-fine { margin: 0; color: var(--fr-text-3); font-size: var(--fr-fs-xs); overflow-wrap: anywhere; }
.fr-describe-blocked { border-left: 3px solid var(--fr-warn); background: var(--fr-warn-soft); }
.fr-describe-blocked .fr-describe-text { color: var(--fr-text); }
.fr-describe-checks { display: flex; flex-direction: column; gap: var(--fr-space-1); }
.fr-describe-marks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--fr-space-1) var(--fr-space-3); }
.fr-describe-mark {
  font: var(--fr-fw-medium) var(--fr-fs-xs) / 1.45 var(--fr-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fr-text-2);
}
.fr-describe-mark[data-status="passed"] { color: var(--fr-good-text); }
.fr-describe-mark[data-status="failed"] { color: var(--fr-crit-text); }
.fr-describe-mark[data-status="skipped"],
.fr-describe-mark[data-status="not_run"] { color: var(--fr-text-3); }
.fr-describe-offers { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); }
.fr-describe-key { display: flex; flex-direction: column; gap: var(--fr-space-2); }
.fr-describe-label { font-weight: var(--fr-fw-medium); color: var(--fr-text); }
.fr-describe-row { display: flex; gap: var(--fr-space-2); align-items: center; }
.fr-describe-key-input { flex: 1; min-width: 0; font-family: var(--fr-font-mono); }
.fr-describe-check { display: inline-flex; align-items: center; gap: var(--fr-space-2); color: var(--fr-text-2); font-size: var(--fr-fs-xs); }
/* The shared agent's allowance beside the agent bar. */
.flowrs-agent-budget {
  flex: none;
  font: 500 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.flowrs-agent-budget:empty { display: none; }
.flowrs-agent-budget.spent { color: var(--warn); }
@media (max-width: 600px) {
  .fr-describe-dock { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60%; }
  /* A phone has room for one panel: while an edit is under review, the review (which shows
     the same checks) has it. */
  .fr-describe-dock.has-review { display: none; }
  .fr-describe-row { flex-wrap: wrap; }
  .flowrs-agent-budget { order: 10; }
}

/* Review: the edit's evidence. Each property a row: its mark (held, failed, not run), the
   claim, the requirement it cites as a chip coloured by where the requirement comes from,
   how it was checked, and what backs it. Only `passed` is drawn as held: not run is muted,
   never green. */
.ev { margin-top: 2px; }
.ev-summary { margin: 0 0 6px; font: 11.5px/1.45 var(--font-ui); color: var(--text-2); }
.ev-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-prop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--hi);
}
.ev-prop[data-status="passed"] { border-left-color: var(--good); }
.ev-prop[data-status="failed"] { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit) 7%, var(--panel)); }
.ev-prop[data-status="skipped"],
.ev-prop[data-status="not_run"] { border-left-color: var(--border-2); }
.ev-mark {
  padding: 0 5px;
  font: 600 9.5px/1.6 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  color: var(--muted);
  border: 1px solid var(--border-2);
}
.ev-prop[data-status="passed"] .ev-mark { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--border)); }
.ev-prop[data-status="failed"] .ev-mark { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); }
.ev-id { font: 600 10.5px/1.5 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-claim { flex: 1 1 60%; font: 11.5px/1.45 var(--font-ui); color: var(--text); }
.ev-req {
  padding: 0 6px;
  font: 600 10px/1.6 var(--font-mono);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border));
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}
.ev-req[data-source="bench"],
.ev-req[data-source="catalogue"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel-2)); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.ev-req[data-source="board"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ev-req[data-source="widget"] { color: var(--muted); background: var(--panel-2); border-color: var(--border-2); }
.ev-method { font: 10.5px/1.5 var(--font-mono); color: var(--muted); }
.ev-pre {
  padding: 0 5px;
  font: 600 9.5px/1.6 var(--font-ui);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-radius: var(--r-sm);
}
.ev-detail { flex-basis: 100%; font: 10.5px/1.45 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.ev-cx {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--crit) 55%, var(--border));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--crit) 6%, var(--panel-2));
}
.ev-cx-text { margin: 0; font: 11px/1.45 var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.ev-replay {
  align-self: flex-start;
  padding: 3px 10px;
  font: 600 11px/1.4 var(--font-ui);
  color: var(--accent-ink);
  background: var(--flow);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast);
}
.ev-replay:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.ev-replay:focus-visible { outline: none; box-shadow: var(--ring); }
.ev-replay.on { background: var(--panel-3); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ev-replayed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 6px;
  padding: 6px 8px;
  font: 11px/1.45 var(--font-ui);
  color: var(--text);
  border-left: 2px solid var(--crit);
  background: color-mix(in srgb, var(--crit) 8%, var(--panel));
  border-radius: var(--r-sm);
}
.ev-replayed[data-reproduced="false"] { border-left-color: var(--warn); }
.ev-leave { padding: 1px 8px; font: 11px/1.4 var(--font-ui); }
.ev-score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; }
.ev-score-num { font: 600 11.5px/1.4 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ev-bar {
  flex: 1 1 80px;
  height: 6px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ev-bar-fill { display: block; height: 100%; background: var(--flow); box-shadow: 0 0 6px var(--accent-glow); }
.ev-mutants, .ev-more { flex-basis: 100%; margin-top: 6px; }
.ev-mutants summary, .ev-more summary { color: var(--text-2); cursor: pointer; font-size: 11px; }
.ev-mutants ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-mutant code { font: 10.5px/1.45 var(--font-mono); color: var(--text-2); }
.ev-mutant[data-outcome="killed"] code { color: var(--good); }
.ev-mutant[data-outcome="survived"] code { color: var(--warn); }

/* The canvas during a replay: the node the counterexample breaks at, and what each node
   computed with its input, read where it happens. */
.flowrs-node-label.cx-at {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  outline: 2px solid var(--crit);
  background: color-mix(in srgb, var(--crit) 18%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--crit) 55%, transparent);
}
.flowrs-cx-value {
  display: block;
  margin-top: 3px;
  padding: 0 6px;
  font: 600 0.78em/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-3) 90%, transparent);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--hi);
}
.flowrs-node-label.cx-at .flowrs-cx-value { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 60%, var(--border)); }

/* ── Registry panel (crates/flowrs-ui/src/registry.rs) ────────────────────────────────────
   Each package a raised card on the Instrument surface; its badge is five lit indicators,
   one per condition a machine checked: passed glows good, failed crit, not run stays dim
   (never lit: not run is not a pass). Mono for addresses and how a condition was checked. */
.flowrs-registry-btn { color: var(--accent) !important; }
.rg-panel { width: min(640px, 94vw); }
.rg-loading { margin: 10px 18px; color: var(--muted); font-size: 12px; }
.rg-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 4px; }
.rg-pkg {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--hi);
  padding: 11px 13px 10px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.rg-pkg:hover { border-color: var(--border-2); box-shadow: var(--sh-2), inset 0 1px 0 var(--hi); }
.rg-pkg[data-state="installed"], .rg-pkg[data-state="bundled"] {
  border-color: color-mix(in srgb, var(--good) 38%, var(--border));
}
.rg-pkg[data-state="refused"] { border-color: color-mix(in srgb, var(--crit) 45%, var(--border)); }
.rg-pkg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rg-name { font: 600 14px var(--font-ui); color: var(--text); }
.rg-version { font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rg-kind {
  font: 600 10px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}
.rg-hash { margin-left: auto; font: 11px var(--font-mono); color: var(--muted); }
.rg-desc { margin: 6px 0 4px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.rg-provides { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.rg-provides code { font: 11px var(--font-mono); color: var(--text-2); }
.rg-needs { color: var(--warn); }
.rg-badge {
  list-style: none;
  margin: 0;
  padding: 7px 8px;
  display: grid;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.rg-cond { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; }
.rg-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 9px var(--font-ui);
  color: var(--muted);
  border: 1px solid var(--border-2);
}
.rg-cond[data-status="passed"] .rg-mark {
  color: var(--accent-ink);
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--good) 55%, var(--text)), var(--good) 72%);
  border-color: transparent;
  box-shadow: 0 0 7px 0 color-mix(in srgb, var(--good) 55%, transparent);
}
.rg-cond[data-status="failed"] .rg-mark {
  color: var(--text);
  background: var(--crit);
  border-color: transparent;
  box-shadow: 0 0 7px 0 color-mix(in srgb, var(--crit) 55%, transparent);
}
.rg-claim { color: var(--text-2); }
.rg-status { font: 600 10px var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rg-cond[data-status="passed"] .rg-status { color: var(--good); }
.rg-cond[data-status="failed"] .rg-status { color: var(--crit); }
.rg-how { font: 10px var(--font-mono); color: var(--muted); min-width: 108px; text-align: right; }
.rg-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.rg-signer { font: 10px var(--font-mono); color: var(--muted); margin-right: auto; }
.rg-standing { font-size: 12px; color: var(--good); }
.rg-pkg[data-state="not-carried"] .rg-standing { color: var(--muted); }
.rg-btn {
  font: 600 12px var(--font-ui);
  border-radius: var(--r-md);
  padding: 5px 13px;
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text);
  transition: transform var(--fast), box-shadow var(--fast);
}
.rg-install { background: var(--flow); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 10px -2px var(--accent-glow); }
.rg-install:hover:not(:disabled) { transform: translateY(-1px); }
.rg-install:disabled { opacity: 0.6; cursor: progress; }
.rg-remove:hover { border-color: var(--crit); color: var(--crit); }
.rg-refused {
  margin: 8px 0 0;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--crit) 14%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent);
  border-radius: var(--r-md);
}
.rg-foot { margin: 6px 18px 14px; font: 10px var(--font-mono); color: var(--muted); }
/* A registry package's node this editor has not admitted: in the palette, locked. */
.flowrs-palette-node.package-locked { opacity: 0.55; }
.flowrs-palette-node.package-locked::after {
  content: "not installed";
  margin-left: 6px;
  font: 600 9px var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
}

/* ── Every node's standing checks (reverify.rs) ─────────────────────────────────────────
   A chip under each node's label says the strongest thing its checks hold: proved (Kani:
   its program cannot panic), bounded (Kani proves a rule its widget computes with, within a
   bound), tested (its two tiers agree), untested, not run here, stale, checking, failed.
   A click opens every check behind it. The chips are the overlay's only pressable parts on
   a node, so they take pointer events back from the overlay. */
.flowrs-check {
  --chk: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 4px;
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--chk);
  background: color-mix(in srgb, var(--chk) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--chk) 55%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--hi), 0 0 8px color-mix(in srgb, var(--chk) 22%, transparent);
  text-shadow: none;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: background var(--fast), box-shadow var(--fast);
}
.flowrs-check--on-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* Its width is capped at the node's span between its port bands (reverify::chip), so it
     never covers a port or the edge a wire is dragged from. Zoomed out, the label gives way
     and the glyph stays; the title still says the whole status. */
  overflow: hidden;
}
.flowrs-check--on-node .flowrs-check__glyph { flex: none; }
.flowrs-check--on-node .flowrs-check__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flowrs-check:hover,
.flowrs-check:focus-visible {
  background: color-mix(in srgb, var(--chk) 26%, var(--panel));
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 2px var(--ring);
  outline: none;
}
.flowrs-check__glyph { display: inline-block; width: 1.1em; text-align: center; }
.flowrs-check[data-check="proved"] { --chk: var(--good); }
.flowrs-check[data-check="bounded"] { --chk: var(--accent); }
.flowrs-check[data-check="tested"] { --chk: var(--accent-2); }
.flowrs-check[data-check="untested"] { --chk: var(--muted); }
.flowrs-check[data-check="not-run-here"] { --chk: var(--text-2); border-style: dashed; }
.flowrs-check[data-check="stale"] { --chk: var(--warn); border-style: dashed; opacity: 0.8; }
.flowrs-check[data-check="checking"] { --chk: var(--warn); }
.flowrs-check[data-check="failed"] { --chk: var(--crit); }
.flowrs-check[data-check="checking"] .flowrs-check__glyph { animation: flowrs-check-turn 1.2s linear infinite; }
@keyframes flowrs-check-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .flowrs-check[data-check="checking"] .flowrs-check__glyph { animation: none; }
}

/* The open node's checks: each check, what it found, and what its key hashes. */
.flowrs-checks {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(392px, calc(100% - 24px));
  max-height: calc(100% - 64px);
  overflow: auto;
  padding: 12px;
  color: var(--text);
  font: 12px/1.5 var(--font-ui);
  background: linear-gradient(180deg, var(--hi), transparent 40px), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  pointer-events: auto;
  z-index: 4;
}
.flowrs-checks__title { display: flex; align-items: center; gap: 8px; }
.flowrs-checks__title .flowrs-check { cursor: default; font-size: 11px; }
.flowrs-checks__node { font: 600 12px/1.4 var(--font-mono); color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flowrs-checks__close {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--panel-3);
  color: var(--text-2);
  cursor: pointer;
}
.flowrs-checks__close:hover { color: var(--text); box-shadow: 0 0 0 2px var(--ring); }
.flowrs-checks__why { margin: 8px 0; color: var(--text); }
.flowrs-checks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flowrs-checks__row {
  --v: var(--muted);
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--v);
  border-radius: var(--r-sm);
}
.flowrs-checks__row[data-verdict="passed"] { --v: var(--good); }
.flowrs-checks__row[data-verdict="warned"] { --v: var(--warn); }
.flowrs-checks__row[data-verdict="failed"] { --v: var(--crit); }
.flowrs-checks__row[data-verdict="not-here"],
.flowrs-checks__row[data-verdict="pending"] { --v: var(--text-2); }
.flowrs-checks__head { display: flex; justify-content: space-between; gap: 8px; }
.flowrs-checks__name { font-weight: 600; }
.flowrs-checks__verdict { font: 600 11px/1.5 var(--font-mono); color: var(--v); }
.flowrs-checks__summary { margin: 4px 0 0; color: var(--text-2); }
.flowrs-checks__summary.stale { color: var(--warn); }
.flowrs-checks__notes { margin: 4px 0 0; padding-left: 16px; color: var(--text-2); }
.flowrs-checks__notes li.error { color: var(--crit); }
.flowrs-checks__key { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.flowrs-checks__key code { font: 11px/1.4 var(--font-mono); color: var(--text-2); }

/* The tally, bottom left over the canvas. */
.flowrs-checks-summary {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 4px 12px 4px 4px;
  font: 600 11px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: linear-gradient(180deg, var(--hi), transparent), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  box-shadow: var(--sh-2);
  pointer-events: none;
  z-index: 3;
}
.flowrs-checks-summary__compare {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  font-weight: 500;
  white-space: nowrap;
  border-left: 1px solid var(--border-2);
  cursor: pointer;
  /* The bar lets the canvas under it take the pointer; this switch has to take it itself. */
  pointer-events: auto;
}
.flowrs-checks-summary__label {
  padding: 0 8px;
  color: var(--accent-ink);
  background: var(--flow);
  border-radius: 999px;
}