/* NCX Signal Console — broadcast/streaming NOC admin UI.
   Dark-first (a NOC lives in a dim room); a refined light variant follows the
   OS preference. Identity: blue-green-biased ink (never pure black), a full
   surface scale, a soft signal-emerald accent, and mono-forward telemetry —
   every measured value / identifier is monospace, prose stays sans. No
   external fonts or CDN. All state is encoded by color AND shape (dot/chip)
   so it reads at a glance. Green = signal present / healthy (domain
   convention): accent and `good` intentionally share the emerald; warn (amber)
   and critical (red) are clearly set apart so "attention" never reads as
   "interactive". */

:root {
  color-scheme: dark;
  --bg: #0B0E13;               /* page ink — blue-green biased, not #000 */
  --surface: #0E1116;          /* panels */
  --surface-alt: #151A21;      /* cards */
  --surface-raised: #1C232C;   /* raised chips / metric wells */
  --border: #263039;
  --border-strong: #33404D;
  --text: #E6EDF3;
  --text-muted: #8B97A6;
  --text-dim: #5C6673;
  --accent: #34D399;           /* signal emerald — interactive + live signal */
  --accent-contrast: #05130D;  /* dark ink for text on the emerald */
  --accent-dim: #1E7A5A;
  --good: #34D399;
  --warn: #F5A524;
  --critical: #F2555A;
  --enrolled: #8B97A6;
  --glow: 0 0 8px -1px var(--accent);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
  --grid-line: rgba(52, 211, 153, 0.05); /* faint scope grid */
  --radius: 5px;
  --radius-lg: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Dark-first: the NOC dark palette above is the default regardless of OS.
   Light is opt-in via the topbar toggle (sets data-theme="light"), persisted. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface-alt: #F0F2F5;
    --surface-raised: #E7EBF0;
    --border: #DCE0E6;
    --border-strong: #C3CAD3;
    --text: #0E1116;
    --text-muted: #5B6572;
    --text-dim: #98A2B0;
    --accent: #0E9F6E;             /* darker emerald reads on white */
    --accent-contrast: #FFFFFF;
    --accent-dim: #0B7A54;
    --good: #0E9F6E;
    --warn: #B3760A;
    --critical: #C4293A;
    --enrolled: #8B97A6;
    --glow: 0 0 0 0 transparent;   /* glow is a dark-room effect only */
    --shadow: 0 1px 2px rgba(16, 22, 30, 0.08), 0 8px 24px rgba(16, 22, 30, 0.06);
    --grid-line: rgba(14, 159, 110, 0.06);
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 16px; }

button {
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  padding: 6px 12px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button:hover { background: var(--surface-raised); border-color: var(--border-strong); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: 0.5; cursor: default; }

/* The `hidden` attribute must always win over component display rules. */
[hidden] { display: none !important; }

/* ====================================================================== */
/* Login                                                                  */
/* ====================================================================== */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(52, 211, 153, 0.07), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 26px 100%,
    var(--bg);
}
.login form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 32px 32px;
  width: 340px;
}
.login h1 { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login h1::before {
  content: "";
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--accent); box-shadow: var(--glow); flex: none;
}
.login label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 18px; letter-spacing: 0.02em; }
.login input {
  display: block; width: 100%; margin-top: 7px;
  padding: 9px 11px; font: 13px/1.4 var(--font-mono);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.login button[type="submit"] {
  width: 100%; background: var(--accent); border-color: var(--accent);
  color: var(--accent-contrast); font-weight: 600; padding: 9px 12px;
}
.login button[type="submit"]:hover { filter: brightness(1.06); background: var(--accent); }
.error { color: var(--critical); font-size: 13px; margin: 12px 0 0; }

/* ====================================================================== */
/* Dashboard shell                                                        */
/* ====================================================================== */
.topbar {
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex; align-items: center; gap: 9px;
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.01em;
}
.topbar .brand::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--accent); box-shadow: var(--glow); flex: none;
  animation: sig-pulse 2.4s ease-in-out infinite;
}
@keyframes sig-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .topbar .brand::before { animation: none; } }
.topbar .who {
  margin-left: auto; color: var(--text-muted);
  font: 12px/1 var(--font-mono); letter-spacing: 0.01em;
}
#theme-toggle { font-size: 14px; line-height: 1; padding: 5px 9px; }
#logout { font-size: 12px; padding: 5px 11px; }

.tabs {
  display: flex; gap: 2px; padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tabs button {
  background: transparent; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: 11px 13px; color: var(--text-muted); font-weight: 500;
}
.tabs button:hover { background: transparent; color: var(--text); border-color: transparent; }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.panel { padding: 20px; }

/* ====================================================================== */
/* Tables                                                                 */
/* ====================================================================== */
table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table th, table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
table td { font-family: var(--font-mono); font-size: 13px; }
table th {
  color: var(--text-muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface-alt); font-family: var(--font-sans);
}
table tbody tr:hover { background: var(--surface-alt); }
table tr:last-child td { border-bottom: none; }
.state-good { color: var(--good); }
.state-warn { color: var(--warn); }
.state-critical { color: var(--critical); }

/* ====================================================================== */
/* Forms                                                                  */
/* ====================================================================== */
.provform {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  margin-bottom: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.provform label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-muted); }
.provform input, .provform select {
  font-family: var(--font-mono); font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.provform input:focus, .provform select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.provform button[type="submit"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-contrast); font-weight: 600;
}
.provform button[type="submit"]:hover { filter: brightness(1.06); background: var(--accent); }
.panel > .error { margin: 0 0 12px; }

button.danger { border-color: var(--critical); color: var(--critical); background: transparent; }
button.danger:hover { background: var(--critical); color: #fff; border-color: var(--critical); }

/* ====================================================================== */
/* Unified stream create form + create-result chain preview (U-C)         */
/* ====================================================================== */
/* Stack the stream form's sections vertically -- .provform's default
   row-flex suits a flat field list, but the feed/output row lists need
   their own internal layout. */
.stream-form { flex-direction: column; align-items: stretch; }
.stream-form h3 { margin: 0; font: 600 12px var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stream-form-label { font: 600 11px var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.stream-form-rows { display: flex; flex-direction: column; gap: 8px; }
.feed-row, .output-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.stream-scaling-grid { display: flex; flex-wrap: wrap; gap: 10px; }
/* A checkbox + its label text, laid out as a row -- overrides .provform
   label's default column stack (protocol/text-input fields keep that). */
.provform label.checkbox-field { flex-direction: row; align-items: center; gap: 6px; }
.checkbox-field input { width: auto; }
.path-preview { margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.path-preview-title { font: 600 13px var(--font-mono); color: var(--text-muted); margin-bottom: 8px; }
/* A path hop's ×2/bonded marker -- square-cornered outline pill (vs.
   .tier-badge's filled pill) so "this hop is bonded" and "this receiver's
   dedup kind" (SRT-bond/RIST-bond/2022-7/TIER-2) never look like the same
   signal at a glance. Still used by the legacy path-template renderer
   (pathPlanChainEl) for any already-persisted row. */
.redundancy-badge {
  font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: 0 5px; margin-top: 1px;
}

/* ====================================================================== */
/* Live event feed                                                        */
/* ====================================================================== */
.events { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.events li { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.events li:last-child { border-bottom: none; }
.events li:hover { background: var(--surface-alt); }

/* ====================================================================== */
/* Fleet overview                                                         */
/* ====================================================================== */
.fleet-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fleet-totals { font: 13px/1.4 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fleet-totals strong { color: var(--text); font-weight: 600; }
.fleet-toggle { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fleet-toggle input { accent-color: var(--accent); }
.fleet-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.fleet-zone { flex: 1 1 260px; min-width: 240px; }
.fleet-zone-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fleet-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 13px 14px; background: var(--surface-alt); margin-bottom: 12px;
  transition: border-color 0.12s ease;
}
.fleet-card:hover { border-color: var(--border-strong); }
.fleet-card.off { opacity: 0.5; }
.fleet-card.stale { border-style: dashed; }
.fleet-card-head { display: flex; align-items: center; gap: 8px; }
.fleet-card-name { font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
.fleet-badge {
  margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.fleet-sub { font: 12px/1.4 var(--font-mono); color: var(--text-muted); margin: 5px 0 12px; }
.fleet-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fleet-metric { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 7px 2px; }
.fleet-metric-val { font: 600 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.fleet-metric-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }

/* Status dots — glow in dark to read like signal indicators. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--text-dim); flex: none; }
.dot.node-online { background: var(--good); box-shadow: var(--glow); }
.dot.node-offline { background: var(--critical); }
.dot.node-enrolled { background: var(--warn); }

/* ====================================================================== */
/* Stream flow: left searchable list, right flow diagram                  */
/* ====================================================================== */
#map { min-height: 320px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; gap: 20px; align-items: flex-start;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--surface);
}
.stream-panel { width: 240px; flex: none; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--border); padding: 16px 20px 16px 16px; }
.stream-search {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: 13px/1.4 var(--font-mono);
}
.stream-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.stream-listv { display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto; }
.stream-row {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font: 13px/1.4 var(--font-mono); padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden;
}
.stream-row:hover { background: var(--surface-raised); }
.stream-row.active { background: var(--accent); color: var(--accent-contrast); }
.stream-row.active .sdot { box-shadow: none; }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-dim); }
.sdot.run { background: var(--good); box-shadow: var(--glow); }
.sdot.stop { background: var(--critical); }
.sdot.unk { background: var(--text-dim); }
.run-chip { margin-left: 8px; font: 600 10px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 0 6px; }
.run-chip.run { color: var(--good); border: 1px solid var(--good); }
.run-chip.stop { color: var(--critical); border: 1px solid var(--critical); }
.run-chip.unk { color: var(--text-muted); border: 1px solid var(--border); }
.stream-pager { display: flex; align-items: center; gap: 8px; }
.pager-btn { font: 12px/1 var(--font-sans); padding: 4px 8px; }
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-info { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.flow-panel { flex: 1; min-width: 0; overflow-x: auto; padding: 16px; }
/* PLAN HEADER (redundancy-ui-fixes UI improvement): a title bar for the
   WHOLE flow diagram -- plan-level badges/actions (PLAN/TIER-2/RELAY, the
   (X,Y,Z) shape, branch-diversity, RUNNING, Redundancy/Scaling buttons)
   render here instead of in/around the Source stage box, so Source stays
   scoped to its own ingest-specific info. */
.flow-plan-header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.flow-plan-header .diversity-label { margin: 0 0 0 4px; }
.flow { display: flex; align-items: center; gap: 2px; padding: 4px 0; }
.chain { display: flex; align-items: center; gap: 2px; }
.branches { display: flex; flex-direction: column; gap: 14px; }
.branch { display: flex; align-items: center; gap: 2px; }
/* Tier-1/2 disjoint-tree preview (Task 2): the branch_diversity mode note
   shown above the two parallel branch lanes. */
.diversity-label { font: 600 12px/1.4 var(--font-sans); color: var(--text-muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; }
/* Multi-output delivery (independent-copies, Task 6): a small heading above
   each output's own egress group (grouped by operator_id), below the two
   independent core-copy branches -- distinct from .diversity-label (plan-
   wide) by being smaller/less prominent, since it repeats per output. */
.output-label { font: 600 11px/1.4 var(--font-sans); color: var(--text-muted); margin: 2px 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
/* Multi-output delivery: a "standby" push leg (active/standby role) carries
   no active route until the W2 failover loop (Task 8-10) promotes it -- shown
   idle (dashed border, reduced opacity), never drawn as a live egress arrow,
   so the flow stays honest about which core is actually delivering now. */
.egress-standby { opacity: 0.5; border-style: dashed; }
/* Independent-copies EDGE fan-out (flow-graph fix): one EDGE stage splits in
   PARALLEL into N sibling core branches -- pure-CSS tree connector (no JS
   measurement/ResizeObserver, so it can never go stale on resize/rerender).
   ::before on the container is the vertical trunk spanning the branch
   column's full height; ::after is the short stub tying the trunk back to
   the EDGE stage box immediately to its left (both boxes share the same
   vertical center via .chain's own `align-items: center`). Each .branch's
   own ::before is the horizontal tick from the trunk into that branch's row.
   Subtle (border color only) by design -- this is a wiring diagram, not a
   decoration. Scoped to .fan-branches only: every other flow render
   (degenerate/disjoint-tree/distribution, and this renderer's own older-plan
   fallback) keeps its plain adjacency-only .branches stack unchanged. */
.fan-branches { position: relative; margin-left: 20px; padding-left: 20px; }
.fan-branches::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border);
}
.fan-branches::after {
  content: ""; position: absolute; left: -20px; top: 50%; width: 20px; height: 1px; background: var(--border);
}
.fan-branches .branch { position: relative; }
.fan-branches .branch::before {
  content: ""; position: absolute; left: -20px; top: 50%; width: 20px; height: 1px; background: var(--border);
}
/* Independent-copies flow layout fix: the copy fan's `.chain` row and the
   opt-in `merged` section stack VERTICALLY as two clearly separated rows,
   never side-by-side in the same flex row (that used to vertically-center
   the merged branch via `.chain`'s own `align-items: center`, overlapping
   the lower copy's egress/target column -- the reported bug). Absent
   entirely for any plan without `plan.merged` (independentCopiesChainEl
   returns the plain `.chain` in that case, so this wrapper never appears). */
.indep-copies-flow { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.merged-output-row {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); width: 100%;
}
.flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; min-width: 66px; padding: 0 6px; }
.flow-arrow.clickable { cursor: pointer; }
.flow-arrow.clickable:hover .cap-kind { text-decoration: underline; }
/* The "flowing" state is a live signal: a spinning emerald ring with a glow.
   Mechanism unchanged (smooth, non-restarting); only restyled. */
.flow-track { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.flow-track.flowing { border-top-color: var(--accent); box-shadow: var(--glow); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flow-track.flowing { animation: none; } }
.flow-arrow-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cap-kind { font: 600 10px/1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.cap-detail { font: 10px/1.3 var(--font-mono); color: var(--text-muted); text-align: center; max-width: 150px; word-break: break-all; }
.cap-rate { font: 600 10px/1.4 var(--font-mono); color: var(--accent); }
/* Per-link transport health on a terminating core-leg hop (rtt/loss/quality). */
.cap-health { font: 10px/1.3 var(--font-mono); color: var(--text-muted); text-align: center; }
/* Aggregate bonded/2022-7 merge health (links=N · quality · rtt) on the merge stage. */
.merge-health { color: var(--accent); }

.stage { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; min-width: 120px; background: var(--surface-alt); flex: none; }
.stage-title { font: 600 14px/1.2 var(--font-mono); display: flex; align-items: center; gap: 2px; }
.stage-sub { font: 12px/1.4 var(--font-mono); color: var(--text-muted); margin-top: 4px; word-break: break-all; }
.stage-source, .stage-target { border-style: dashed; background: var(--surface); }
.stage-source .stage-title, .stage-target .stage-title { font-family: var(--font-sans); }
.stage-core { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.stage-edge { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.stage-node.clickable { cursor: pointer; }
.stage-node.clickable:hover { border-color: var(--border-strong); }
.stage-role { margin-left: 8px; font: 600 10px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
/* Fabric-provisioned relay hop/ingest, distinct from a hand-made route —
   used in both the node-stage title (flex row, gap already spaces it) and
   the flow-arrow cap (flex column, gap already spaces it); no margin needed
   in either context. Accent-filled so it reads at a glance among the muted
   outline badges around it. */
.relay-badge {
  font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-contrast); background: var(--accent); border-radius: 3px; padding: 0 5px;
}
/* Merge-stage dedup-type badge (2022-7 / RIST-BOND / SRT-BOND / the neutral
   "Merge" fallback) -- an accent pill, distinct in shape from the square
   relay-badge so "auto-relayed" and "how this stage dedups" never get
   confused at a glance. */
.tier-badge {
  font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-contrast); background: var(--accent); border-radius: 999px; padding: 0 7px;
}
/* SPOF (single point of failure) badge on a merged opt-in's merge stage
   (Task 12, independentCopiesChainEl) -- warn-colored filled pill, same
   shape as .tier-badge beside it but tinted for warning so a merged output's
   one shared failure point (unlike the independent per-core copies next to
   it) reads at a glance. */
.spof-badge {
  font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-contrast); background: var(--warn); border-radius: 999px; padding: 0 7px;
}
/* Per-output PCR pacing-depth badge ("paced Ns", appendPaceBadge in app.js)
   -- appended onto a stage-title beside relay-badge/tier-badge, so it shares
   their filled-pill shape (same font/padding/radius as .tier-badge), but
   tinted neutral (text-muted) rather than accent/warn: pacing depth is
   descriptive metadata, not a health/warning signal, so it must not compete
   with the accent-filled relay-badge/tier-badge or the warn-filled
   spof-badge for attention. */
.pace-badge {
  font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bg); background: var(--text-muted); border-radius: 999px; padding: 0 7px;
}
/* Plan-header "Art" (kind) badge -- outline (not filled) so it reads
   distinctly from the filled relay-badge/tier-badge above at a glance; shown
   on a plan's primary stream both in the stream-list row and the flow header.
   Label-consolidation: one plain-language value (Verteilbaum/Pfad/Redundant/
   Fabric), mutually exclusive with the others. */
.plan-badge {
  margin-left: 6px; font: 700 9px/1.5 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 5px;
}
/* Composable (X,Y,Z) redundancy shape badge (e.g. "2×2→1") -- monospace so
   the notation lines up cleanly; outline pill like .plan-badge but tinted
   neutral so it doesn't compete with the plan-header kind badge beside it. */
.shape-badge {
  margin-left: 6px; font: 700 9px/1.5 var(--font-mono); letter-spacing: 0.02em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px;
}
/* Diversity is plan-level META (zone/rack), so it reads neutral/muted -- same
   pill geometry as .plan-badge but not tinted with the accent, so it doesn't
   compete with the kind badge (REDUNDANT) beside it. */
.diversity-tag { color: var(--text-muted); border-color: var(--border); }
.state-chip { margin-left: 8px; font: 600 10px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 0 5px; }
.state-active { color: var(--good); border: 1px solid var(--good); }
.state-paused { color: var(--warn); border: 1px solid var(--warn); }
.state-pending { color: var(--text-muted); border: 1px solid var(--border); }
.state-unknown { color: var(--text-muted); border: 1px solid var(--border); }
.map-empty { color: var(--text-muted); padding: 16px; font-size: 13px; }

/* stat-empty is shared by the histograms/PID-table empty states below. */
.stat-empty { color: var(--text-muted); padding: 4px 0; font: 12px var(--font-sans); }

/* ====================================================================== */
/* SVG topology map (legacy Task-5 map)                                   */
/* ====================================================================== */
.map-svg { display: block; width: 100%; height: auto; }
.zone-label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; fill: var(--text-muted); }
.site-box { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.site-label { font: 600 12px/1 var(--font-sans); fill: var(--text); }
.node-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.node-label { font: 11px/1 var(--font-mono); fill: var(--text); }
.node-dot.node-online { fill: var(--good); }
.node-dot.node-offline { fill: var(--critical); }
.node-dot.node-enrolled { fill: var(--warn); }
.egress-marker { fill: var(--surface-alt); stroke: var(--accent); stroke-width: 1.5; }
.egress-label { font: 11px/1 var(--font-mono); fill: var(--text-muted); }
.route-edge { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.65; }
.route-redundant { stroke: var(--good); stroke-width: 3; stroke-dasharray: 5 3; opacity: 0.9; }
.legend-text { font: 11px/1 var(--font-sans); fill: var(--text-muted); }

/* ====================================================================== */
/* Unified per-entity analytics detail view (node / ingest / egress)      */
/* ====================================================================== */
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.endpoint-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; }
.endpoint-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.endpoint-url { font: 13px/1.4 var(--font-mono); color: var(--accent); word-break: break-all; flex: 1; min-width: 0; }
.endpoint-copy { font-size: 11px; padding: 3px 10px; }
.detail-back { font-size: 12px; }
.detail-title { font: 600 15px/1.2 var(--font-mono); }
.detail-section { margin-top: 20px; }
.detail-section-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.pid-table { margin-top: 4px; }
.pid-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.pid-row-click { cursor: pointer; }
.detail-histos { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.histo { flex: 1 1 300px; min-width: 260px; }
.histo-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.histo-svg { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.histo-bar { fill: var(--accent); }
.histo-axis { stroke: var(--border); stroke-width: 1; }
.histo-tick { font: 9px/1 var(--font-mono); fill: var(--text-muted); }

/* Redundancy (2022-7) per-path attribution rows: label, recv/contrib stats,
   a contribution bar. A path with recv=0 (dead) is flagged DEGRADED. */
.path-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.path-row:last-child { border-bottom: none; }
.path-label { width: 64px; flex: none; font: 600 12px/1.4 var(--font-mono); }
.path-stats { width: 190px; flex: none; font: 12px/1.4 var(--font-mono); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.path-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-raised); overflow: hidden; }
.path-bar { height: 100%; background: var(--accent); border-radius: 4px; }
.path-row.degraded .path-label,
.path-row.degraded .path-stats { color: var(--critical); }
.path-row.degraded .path-bar { background: var(--critical); }
.path-degraded-flag {
  font: 700 10px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--critical); border: 1px solid var(--critical); border-radius: 4px; padding: 0 5px;
}

/* ====================================================================== */
/* Wave 4-C: per-stream Redundancy Ops panel                              */
/* ====================================================================== */
/* The flow header's entry point -- an outline button (not a badge: it's
   actionable) sitting beside the plan/shape badges. */
.redundancy-open-btn { margin-left: 8px; font-size: 11px; padding: 2px 9px; color: var(--accent); border-color: var(--accent); background: transparent; }
.redundancy-open-btn:hover { background: var(--accent); color: var(--accent-contrast); }

/* Header status badge: good (OK) vs warn (degraded) -- semantic colour, kept
   distinct from the accent-filled tier-badge/relay-badge pills beside it. */
.redundancy-status { margin-left: 10px; font: 700 11px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 0 8px; }
.redundancy-status.good { color: var(--good); border: 1px solid var(--good); }
.redundancy-status.warn { color: var(--warn); border: 1px solid var(--warn); }

/* KPI row: 4 equal tiles (availability / active paths / subscribers-or-
   outputs / e2e latency), each optionally amber-flagged (active<total paths,
   incomplete e2e hop coverage). */
.kpi-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 18px; }
.kpi-tile { flex: 1 1 160px; min-width: 150px; text-align: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 10px; }
.kpi-tile.warn { border-color: var(--warn); }
.kpi-tile.warn .kpi-value { color: var(--warn); }
.kpi-value { font: 700 20px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; font-family: var(--font-mono); }

/* Per-path lanes: health dot + node + leg-kind chip + rtt/loss (or transport
   fallback), right-aligned. An unhealthy lane tints critical end to end,
   mirroring the reference's degraded path. */
.redundancy-lanes { display: flex; flex-direction: column; }
.redundancy-lane { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.redundancy-lane:last-child { border-bottom: none; }
.redundancy-lane-node { font: 600 13px/1.4 var(--font-mono); min-width: 110px; }
.redundancy-lane-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.redundancy-lane-stat { margin-left: auto; font: 12px/1.4 var(--font-mono); color: var(--text-muted); }
.redundancy-lane.unhealthy { background: rgba(242, 85, 90, 0.06); }
/* ====================================================================== */
/* Wave ②-C: per-distribution-plan Scaling panel                          */
/* ====================================================================== */
/* Recent scale-action log: one row per event (newest first, from the
   backend's `scaling_events` table), reusing the same lane rhythm as
   .redundancy-lane above but with its own 4-column layout (action / target /
   reason / relative time) rather than a health dot + stat pair. */
.scaling-events { display: flex; flex-direction: column; }
.scaling-event {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font: 12px/1.4 var(--font-mono);
}
.scaling-event:last-child { border-bottom: none; }
.scaling-event-action {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 110px; color: var(--accent);
}
.scaling-event-target { color: var(--text-muted); min-width: 170px; }
.scaling-event-reason { flex: 1; min-width: 160px; color: var(--text-dim); font-family: var(--font-sans); }
.scaling-event-time { color: var(--text-muted); white-space: nowrap; }

.redundancy-lane.unhealthy .redundancy-lane-node,
.redundancy-lane.unhealthy .redundancy-lane-stat { color: var(--critical); }

/* ====================================================================== */
/* Telemetry history: line charts + range toggle                          */
/* ====================================================================== */
.ts-chart { width: 100%; max-width: 680px; height: auto; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.ts-empty { fill: var(--text-muted); font: 11px var(--font-sans); }
.ts-grid { stroke: var(--border); stroke-width: 1; }
.ts-ylab, .ts-xlab { font: 9px/1 var(--font-mono); fill: var(--text-muted); }
.ts-area { fill-opacity: 0.13; stroke: none; }
.ts-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ts-crosshair { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ts-hdot { fill: var(--surface); stroke-width: 2; }
.ts-tip-bg { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 1; }
.ts-tip-text { font: 11px/1 var(--font-mono); fill: var(--text); }
.ts-capture { fill: transparent; cursor: crosshair; }
.history-charts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.chart-card { flex: 1 1 340px; min-width: 0; }
.chart-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.chart-card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.chart-card-val { font: 600 13px/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.range-toggle { display: flex; gap: 6px; margin-top: 4px; }
.range-toggle button { font-size: 12px; padding: 3px 10px; }
.range-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; }

/* Per-entity small-multiples grid (unified node/ingest/egress detail view):
   compact equal-size chart-cards, denser than the wider history-charts grid. */
.metric-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.metric-grid .chart-card { flex: 1 1 260px; }

/* Fleet per-node CPU/Mem sparkline: compact, no labels/axes/border. */
.spark { margin-top: 8px; }
.spark .ts-chart { width: 140px; height: 36px; background: none; border: none; }

/* Supervisor/fleet console: host detail drawer (Hosts tab). */
.host-detail { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border, #333); border-radius: 6px; }
.host-detail h3 { margin-top: 0; }
.host-detail button { margin: 0.25rem 0.5rem 0.25rem 0; }

/* Supervisor/fleet console: Rollout tab (state badge + per-host phase pills). */
.rollout-head { margin-bottom: 0.75rem; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--accent, #2b6cb0); color: var(--accent-contrast); font-weight: 600; }
.rollout-hosts { list-style: none; padding: 0; }
.rollout-hosts li { display: flex; justify-content: space-between; padding: 0.3rem 0.5rem; }
.rollout-hosts li.cursor { outline: 1px solid var(--accent, #2b6cb0); border-radius: 4px; }
.pill { padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.85em; }
.phase-wait { background: #555; color: #fff; } .phase-active { background: #b7791f; color: #fff; }
.phase-good { background: #2f855a; color: #fff; } .phase-bad { background: #c53030; color: #fff; }
.rollout-controls button { margin-right: 0.5rem; } .hint { opacity: 0.7; font-size: 0.9em; }