/* ===================================
   BISHOP DEFENSE — SBB / SulacoUX design language
   Dark-only, navy accent, zero radius, zero shadow, hairline borders.
   =================================== */

/* ─── Fonts ─── */
@font-face {
  font-family: 'SulacoUX';
  src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SulacoUX';
  src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-UltraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SulacoUX';
  src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SulacoUX';
  src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SulacoUX';
  src: url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900&display=swap');

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Fluid root: the whole UI scales with the viewport. Every dimension below
     is in rem, so 1rem == this value. Anchored to ~14px at 1440px wide; grows
     on large displays / projectors, shrinks on laptops, bounded both ends. */
  font-size: clamp(12px, 0.35vw + 9px, 22px);

  /* Tactical Cyan + Amber — Palantir Gotham / Anduril-adjacent palette.
     Black-first surfaces, muted cyan accent, amber for caution, subdued
     red for critical. Tactical green reserved for explicit friendly
     indicators. UK partner colour shifts to tan/amber for visual distinction
     from US-cyan without colliding with the warn ramp. */
  --bg: #050709;
  --surface: #0c1218;
  --surface-alt: #121922;
  --surface-elev: #18212b;
  --border: #1a242e;
  --border-strong: #2a3744;
  --border-subtle: #101820;
  --text: #e8eef4;
  --text-2: #c8d0d8;
  --text-3: #7a8590;
  --text-4: #5a6571;

  --accent: #4a9fb0;
  --accent-hover: #6cb5c4;
  --accent-faint: #0c1d23;

  --ok:    #6FAE50;
  --ok-bg: #0e1808;
  --warn:    #d9a233;
  --warn-bg: #1c1408;
  --crit:    #c54040;
  --crit-bg: #1c0808;
  --info:    #4a9fb0;
  --info-bg: #0c1d23;
  --offline: #5a6571;

  --partner-uk: #b08a4a;

  --font: "SulacoUX", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SulacoUX", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --xs: 0.2857rem; --sm: 0.5714rem; --md: 1.1429rem; --lg: 1.7143rem; --xl: 2.2857rem;

  --shell-bar-h: 3.4286rem;
  --shell-health-h: 2.5714rem;
  --shell-role-h: 2.1429rem;
  --shell-t3-h: 22rem;
  --shell-t3-min-h: 5rem;
  --shell-t3-max-h: 70vh;
  --shell-bottom-h: 2.5714rem;
  --shell-chrome-h: calc(var(--shell-bar-h) + var(--shell-health-h) + var(--shell-role-h) + var(--shell-t3-h) + var(--shell-bottom-h));
  --rail-w: 18.8571rem;
  --detail-w: 27.1429rem;
}

* { box-sizing: border-box; border-color: var(--border); }

html, body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* font-size intentionally omitted: html/body inherit the fluid :root size.
     Setting it here would re-anchor rem to the browser default and break scaling. */
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; color: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 0.4286rem; height: 0.4286rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

*:focus-visible {
  outline: 0.1429rem solid var(--accent);
  outline-offset: 0.0714rem;
}

::selection {
  background-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text);
}

.mono, .num, .tabular-nums {
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.02em;
}

/* ───────────────────── 0.2857rem accent stripe ───────────────────── */

.accent-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0.2857rem;
  background: var(--accent);
  z-index: 200;
  pointer-events: none;
}

/* ───────────────────── Shell ───────────────────── */

.shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  /* rows: sysbar | liveness strip | workspace (fills) | T3 strip | bottombar */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  /* Pin the single column to the viewport. Without this the implicit `auto`
     column grows to the max-content of its widest descendant (the MapLibre
     canvas), overflowing the clamped shell and pushing the detail panel off
     the right edge. minmax(0, 1fr) forces the column to the shell width. */
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0.2857rem;
  background: var(--bg);
  overflow: hidden;
}

/* ───────────────────── Sysbar ───────────────────── */

.sysbar {
  background: var(--surface);
  border-bottom: 0.0714rem solid var(--border);
}

.sysbar-identity {
  display: flex;
  align-items: center;
  height: var(--shell-bar-h);
  padding: 0 var(--lg);
  border-bottom: 0.0714rem solid var(--border-subtle);
  gap: var(--md);
  min-width: 0;
}

.brand { display: flex; align-items: center; gap: var(--sm); flex-shrink: 0; }

.brand-mark {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: #ffffff;
  background: var(--accent);
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  letter-spacing: -0.0286rem;
  line-height: 1;
}

.brand-wordmark {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: 1.1429rem;
  color: var(--text);
  letter-spacing: -0.0286rem;
}

.brand-wordmark .us { color: var(--accent); }

.brand-sep {
  width: 0.0714rem; height: 1.5714rem; background: var(--border);
  margin: 0 var(--sm) 0 var(--xs);
}

.facility-badge {
  display: flex; align-items: center; gap: var(--md);
  min-width: 0;
}
.facility-badge .fb-name {
  font-size: 1rem; font-weight: 400; color: var(--text);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.facility-badge .fb-type {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0357rem;
  color: var(--text-4);
  padding: 0.0714rem 0.4286rem;
  background: var(--surface-alt);
}
.facility-badge .fb-status {
  display: flex; align-items: center; gap: 0.3571rem;
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0357rem;
}
.facility-badge .fb-status .dot { width: 0.4286rem; height: 0.4286rem; border-radius: 50%; }
.facility-badge .fb-status.open { color: var(--ok); }
.facility-badge .fb-status.open .dot { background: var(--ok); }

.rail {
  display: flex; align-items: stretch; height: 100%;
  margin: 0 auto 0 var(--lg);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail button {
  display: flex; align-items: center;
  padding: 0 1rem;
  border: none; background: none;
  font-family: var(--font);
  font-size: 0.8571rem; font-weight: 400;
  color: var(--text-3);
  border-bottom: 0.2143rem solid transparent;
  transition: color 0.12s, border-color 0.12s;
  cursor: pointer;
  white-space: nowrap;
}
.rail button:hover { color: var(--text); }
.rail button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.sysbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--md);
  flex-shrink: 0;
}

.sys-conn {
  display: flex; align-items: center; gap: 0.3571rem;
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0357rem;
}
.sys-conn .dot { width: 0.4286rem; height: 0.4286rem; border-radius: 50%; }
.sys-conn.ok { color: var(--ok); } .sys-conn.ok .dot { background: var(--ok); }

.sep { width: 0.0714rem; height: 1.2857rem; background: var(--border); }

.sysbar-clock {
  font-family: var(--mono);
  font-size: 1.1429rem; font-weight: 300;
  letter-spacing: 0.0286rem;
  font-feature-settings: "tnum" 1;
}
.sysbar-clock small {
  font-size: 0.7857rem; color: var(--text-3);
  margin-left: 0.2143rem;
}

.sysbar-btn {
  width: 2rem; height: 2rem;
  border: 0.0714rem solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  transition: border-color 0.12s, color 0.12s;
}
.sysbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.sysbar-btn svg {
  width: 1rem; height: 1rem;
  stroke: currentColor; fill: currentColor;
  stroke-width: 1.5;
}
.sysbar-btn svg path { stroke: none; }

/* ───────────────────── Health row ───────────────────── */

.sysbar-health {
  display: flex; align-items: center;
  height: var(--shell-health-h);
  padding: 0 var(--lg);
  gap: var(--md);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Demoted: chrome row 2 should fade behind the COP + role panel. Full
     readiness detail lives in the CDR T3 strip; this is the at-a-glance. */
  opacity: 0.78;
  transition: opacity 160ms;
}
.sysbar-health:hover { opacity: 1; }
.sysbar-health::-webkit-scrollbar { display: none; }

.health-chip {
  display: inline-flex; align-items: baseline; gap: 0.4286rem;
  padding: 0.2857rem 0.7143rem;
  border: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.health-chip.spacer { flex: 1; border: none; }
.health-chip.muted { opacity: 0.5; }
.health-chip .hc-label {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-4);
}
.health-chip .hc-val {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem; font-weight: 500;
  color: var(--text-2);
}
.health-chip .hc-val.ok { color: var(--ok); }
.health-chip .hc-val.warn { color: var(--warn); }
.health-chip .hc-val.crit { color: var(--crit); }

.health-cell {
  display: flex; align-items: center; gap: 0.5714rem;
  padding: 0 var(--md);
  border-right: 0.0714rem solid var(--border-subtle);
  height: 100%; min-width: 0;
  flex-shrink: 0;
}
.health-cell:first-child { padding-left: 0; }

.hc-dot { width: 0.4286rem; height: 0.4286rem; border-radius: 50%; flex-shrink: 0; }
.hc-label {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0357rem;
  color: var(--text-4);
  white-space: nowrap;
}
.hc-val {
  font-family: var(--mono);
  font-size: 0.9286rem; font-weight: 500;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hc-val.ok { color: var(--ok); }
.hc-val.warn { color: var(--warn); }
.hc-val.crit { color: var(--crit); }
.hc-val.muted { color: var(--text-3); }
.hc-val.info { color: var(--accent); }

.health-cell.spacer { flex: 1; min-width: 0; border-right: none; }
.health-cell.right { margin-left: auto; }

/* ───────────────────── Workspace ───────────────────── */

.workspace {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--detail-w);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* ───────────────────── Left rail ───────────────────── */

.rail-left {
  background: var(--surface);
  border-right: 0.0714rem solid var(--border);
  overflow-y: auto;
  min-height: 0;
  height: 100%;
  display: flex; flex-direction: column;
}

.rail-section {
  border-bottom: 0.0714rem solid var(--border);
}

.rs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7143rem var(--md) 0.5714rem;
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  background: var(--surface-alt);
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.rs-count {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text-4);
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comp-tile {
  position: relative;
  display: grid;
  gap: 0.1429rem;
  padding: 0.7143rem var(--md);
  border-right: 0.0714rem solid var(--border-subtle);
  border-bottom: 0.0714rem solid var(--border-subtle);
  background: var(--surface);
  cursor: pointer;
  border-left: 0.2143rem solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.comp-tile:nth-child(2n) { border-right: none; }
.comp-tile:hover { background: var(--accent-faint); }
.comp-tile.active { background: var(--accent-faint); border-left-color: var(--accent); }

.comp-tile .ct-tag {
  font-family: var(--mono);
  font-size: 0.7143rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-3);
}
.comp-tile.active .ct-tag { color: var(--accent); }
.comp-tile .ct-stats {
  display: flex; align-items: baseline; gap: 0.4286rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
}
.comp-tile .ct-fmc { font-size: 1.2857rem; font-weight: 300; color: var(--text); }
.comp-tile .ct-total { font-size: 0.7857rem; color: var(--text-3); }
.comp-tile .ct-states {
  display: flex; gap: 0.4286rem;
  font-size: 0.7143rem; font-weight: 700;
  letter-spacing: 0.04em;
}
.comp-tile .ct-states span { font-family: var(--mono); }
.ct-states .s-fmc { color: var(--ok); }
.ct-states .s-pmc { color: var(--warn); }
.ct-states .s-nmc { color: var(--crit); }

.roster-table { display: flex; flex-direction: column; }

.roster-row {
  display: grid;
  grid-template-columns: 1.2857rem 1fr auto;
  gap: 0.5714rem;
  align-items: center;
  padding: 0.5rem var(--md);
  border-bottom: 0.0714rem solid var(--border-subtle);
  border-left: 0.2143rem solid transparent;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
  width: 100%;
  transition: background 0.12s;
}
.roster-row:hover { background: var(--accent-faint); }
.roster-row.active { background: var(--accent-faint); border-left-color: var(--accent); }

.roster-row .rr-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  margin-left: 0.4286rem;
}
.roster-row .rr-name {
  font-family: var(--mono);
  font-size: 0.8571rem; font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster-row .rr-sub {
  display: block;
  font-size: 0.7857rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster-row .rr-state {
  font-family: var(--mono);
  font-size: 0.7143rem; font-weight: 700;
  padding: 0.0714rem 0.3571rem;
  letter-spacing: 0.04em;
}
.rr-state.fmc { background: var(--ok-bg); color: var(--ok); }
.rr-state.pmc { background: var(--warn-bg); color: var(--warn); }
.rr-state.nmc { background: var(--crit-bg); color: var(--crit); }
.rr-state.inst { background: var(--info-bg); color: var(--accent); }

.overlay-list {
  display: grid;
  padding: 0.5714rem var(--md);
  gap: 0.4286rem;
}
.overlay-list label {
  display: flex; align-items: center; gap: 0.5714rem;
  font-size: 0.8571rem; color: var(--text-2);
  cursor: pointer;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.overlay-list input { accent-color: var(--accent); }

.policy-text {
  padding: 0.7143rem var(--md) var(--md);
  margin: 0;
  font-size: 0.8571rem; line-height: 1.55;
  color: var(--text-3);
}
.policy-text strong { color: var(--text-2); font-weight: 600; }

.cap-legend {
  display: flex; flex-wrap: wrap;
  gap: 0.2857rem;
  padding: 0 var(--md) 0.7143rem;
}
.cap-key {
  font-family: var(--mono);
  font-size: 0.6429rem; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.0714rem 0.3571rem;
  color: var(--c);
  border: 0.0714rem solid var(--c);
}

/* Map line key: what each overlay line on the map means. */
.line-legend {
  display: grid;
  gap: 0.2857rem;
  padding: 0 var(--md) 0.7143rem;
}
.ll-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7143rem; color: var(--text-3);
  letter-spacing: 0.02em;
}
.ll-line {
  width: 1.5714rem; height: 0;
  border-top: 0.1429rem var(--ls, solid) var(--lc, #fff);
  flex-shrink: 0;
}

/* ───── Capability matrix ───── */
.cap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7857rem;
  margin-top: 0.2857rem;
}
.cap-table th, .cap-table td {
  text-align: left;
  padding: 0.3571rem 0.4286rem 0.3571rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  vertical-align: middle;
}
.cap-table th {
  font-size: 0.6429rem; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  border-bottom: 0.0714rem solid var(--border);
  padding-bottom: 0.2857rem;
}
.cap-table td.num,
.cap-table th.num {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  text-align: right;
  color: var(--text-2);
}
.cap-table td:nth-child(2) {
  color: var(--text);
  font-size: 0.7857rem;
}

.cap-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6429rem; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.0714rem 0.3571rem;
  border: 0.0714rem solid currentColor;
  min-width: 2.5714rem;
  text-align: center;
}

.cap-tags { display: flex; flex-wrap: wrap; gap: 0.2857rem; }
.cap-tag {
  font-family: var(--mono);
  font-size: 0.7143rem;
  font-weight: 600;
  padding: 0.1429rem 0.4286rem;
  background: var(--surface-alt);
  color: var(--text-2);
  border: 0.0714rem solid var(--border);
  letter-spacing: 0.04em;
}

/* ───── FPGA telemetry grid ───── */
.tlm-tag {
  display: inline-block;
  margin-left: 0.4286rem;
  font-family: var(--mono);
  font-size: 0.6429rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 0.0714rem solid var(--accent);
  padding: 0 0.2857rem;
  text-transform: none;
}

.tlm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1429rem 1rem;
  margin-top: 0.2857rem;
}

.tlm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5714rem;
  padding: 0.1429rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
}
.tlm-label {
  font-family: var(--mono);
  font-size: 0.6429rem;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.06em;
}
.tlm-val {
  font-family: var(--mono);
  font-size: 0.7857rem;
  font-weight: 500;
  color: var(--text);
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.tlm-val small {
  color: var(--text-4);
  font-weight: 400;
  margin-left: 0.1429rem;
}

/* ───────────────────── Map ───────────────────── */

.map-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 22.8571rem;
  background: #000;
  overflow: hidden;
  border-right: 0.0714rem solid var(--border);
}

#map {
  position: absolute; inset: 0;
}

#map canvas {
  /* keep imagery vivid; UI panels carry the dark theme */
}

#overlayCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.maplibregl-ctrl-attrib {
  background: rgba(0, 0, 0, 0.7) !important;
  color: var(--text-3) !important;
  font-family: var(--font) !important;
  font-size: 0.7143rem !important;
}
.maplibregl-ctrl-attrib a { color: var(--text-2) !important; }
.maplibregl-ctrl-group {
  background: var(--surface) !important;
  border: 0.0714rem solid var(--border-strong) !important;
  box-shadow: none !important;
}
.maplibregl-ctrl-group button {
  background-color: var(--surface) !important;
  filter: invert(0.92) hue-rotate(180deg);
}

.map-overlay-tl {
  position: absolute;
  top: var(--md); left: var(--md);
  background: rgba(0, 0, 0, 0.78);
  border: 0.0714rem solid var(--border-strong);
  padding: 0.5714rem 0.8571rem;
  display: grid; gap: 0.2857rem;
  min-width: 15.7143rem;
  pointer-events: none;
}

.mol-row { display: flex; gap: 0.7143rem; align-items: baseline; }
.mol-label {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0357rem;
  color: var(--text-4);
}
.mol-val {
  font-size: 0.8571rem;
  color: var(--text);
  font-weight: 500;
}
.mol-val.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }

.map-overlay-bl {
  position: absolute;
  bottom: var(--md); left: var(--md);
  display: flex; align-items: center; gap: 0.7143rem;
  pointer-events: none;
}
.mol-selected {
  font-family: var(--mono);
  font-size: 0.8571rem; color: var(--text-2);
  background: rgba(0, 0, 0, 0.78);
  border: 0.0714rem solid var(--border-strong);
  padding: 0.2857rem 0.7143rem;
}

/* ───────────────────── Marker style (Palantir-adjacent) ───────────────────── */

/* MUST stay position:absolute — MapLibre positions the marker via an inline
   translate() transform that is only meaningful for an absolutely-positioned
   element. A relative/static marker drifts off its lng/lat on zoom. */
.asset-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5714rem; height: 2.5714rem;
  display: grid; place-items: center;
  cursor: pointer;
  pointer-events: auto;
}

.asset-marker .glyph {
  width: 1.5714rem; height: 1.5714rem;
  display: grid; place-items: center;
  background: rgba(10, 14, 20, 0.92);
  border: 0.1071rem solid currentColor;
  position: relative;
}

.asset-marker.installation .glyph {
  background: var(--surface);
  border-style: solid;
}

.asset-marker.installation .glyph::after {
  content: '';
  position: absolute;
  inset: 0.1429rem;
  border: 0.0714rem dashed currentColor;
  opacity: 0.45;
}

.asset-marker svg {
  width: 1rem; height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon bank-roll (SAS-1658): air icons rotate to heading + foreshorten with
   bank (set inline by orientMarkers). transform-origin centres the spin; the
   transition smooths the 5 Hz heading/bank steps. Ground/installation icons
   never get an inline transform, so this rule is inert for them. */
.asset-marker .glyph svg {
  transform-origin: 50% 50%;
  transition: transform 0.18s linear;
}

/* Readiness alerts (SAS-1658): a pulsing ring + a corner dot on units that are
   low on ammo (Winchester) or on-station time (Bingo). Warn = amber, crit = red.
   The detail panel carries the actual counts; this is the at-a-glance flag. */
.asset-marker.alert-warn .glyph { box-shadow: 0 0 0 0.1429rem rgba(217, 162, 51, 0.85); }
.asset-marker.alert-crit .glyph { box-shadow: 0 0 0 0.1429rem rgba(235, 0, 0, 0.9); animation: alertPulse 1.1s ease-in-out infinite; }
.asset-marker.alert-warn .callsign { color: #f0c462; }
.asset-marker.alert-crit .callsign { color: #ff8585; }
.asset-marker.alert-warn .glyph::before,
.asset-marker.alert-crit .glyph::before {
  content: '!';
  position: absolute;
  top: -0.5rem; right: -0.5rem;
  width: 0.85rem; height: 0.85rem;
  font-size: 0.6rem; font-weight: 700; line-height: 0.85rem; text-align: center;
  color: #0a0e14; border-radius: 50%;
}
.asset-marker.alert-warn .glyph::before { background: #d9a233; }
.asset-marker.alert-crit .glyph::before { background: #eb0000; color: #fff; }
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0.1429rem rgba(235, 0, 0, 0.9); } 50% { box-shadow: 0 0 0 0.32rem rgba(235, 0, 0, 0.25); } }

.asset-marker.selected .glyph {
  border-width: 0.1429rem;
  outline: 0.0714rem solid currentColor;
  outline-offset: 0.1429rem;
}

.asset-marker .callsign {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.2857rem);
  padding: 0.0714rem 0.3571rem;
  font-family: var(--mono);
  font-size: 0.7143rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(0, 0, 0, 0.78);
  border: 0.0714rem solid var(--border-strong);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.asset-marker.hide-callsign .callsign { display: none; }

/* ───────────────────── Detail ───────────────────── */

.detail {
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.detail-hd {
  padding: var(--md) var(--md) 0.8571rem;
  border-bottom: 0.0714rem solid var(--border);
}

.dh-top {
  display: flex; align-items: center; gap: 0.7143rem;
  margin-bottom: 0.4286rem;
}
.dh-id {
  font-family: var(--mono);
  font-size: 0.8571rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
}

.dh-title {
  margin: 0 0 0.2857rem;
  font-size: 1.5714rem; font-weight: 300;
  letter-spacing: -0.0143rem;
  color: var(--text);
  line-height: 1.15;
}

.dh-meta {
  font-size: 0.8571rem;
  color: var(--text-3);
  display: flex; gap: var(--sm); flex-wrap: wrap;
}

.b {
  font-size: 0.7143rem; font-weight: 700;
  letter-spacing: 0.0286rem;
  padding: 0.1429rem 0.4286rem;
  text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.b-crit { background: var(--crit-bg); color: var(--crit); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-ok   { background: var(--ok-bg); color: var(--ok); }
.b-info { background: var(--info-bg); color: var(--accent); }
.b-flat { background: var(--surface-alt); color: var(--text-3); }

.detail-body {
  flex: 1;
  overflow-y: auto;
}

.d-sec {
  padding: 0.7143rem var(--md) 0.8571rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
}

.d-label {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-4);
  margin-bottom: 0.4286rem;
}

.d-kv {
  display: grid;
  grid-template-columns: 7.8571rem 1fr;
  gap: 0.2857rem var(--sm);
  font-size: 0.8571rem;
}
.d-kv .dk-l { color: var(--text-3); font-weight: 500; padding: 0.0714rem 0; }
.d-kv .dk-v { color: var(--text); padding: 0.0714rem 0; }
.d-kv .dk-v.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }
.d-kv .dk-v.wrap { word-break: break-word; }
.d-kv .dk-v.src { color: var(--text-3); font-size: 0.7857rem; word-break: break-all; }

.gauge-table { display: grid; gap: 0.4286rem; }

.gauge-row {
  display: grid;
  grid-template-columns: 6.2857rem 1fr 3.5714rem;
  gap: 0.7143rem;
  align-items: center;
  font-size: 0.8571rem;
}
.gauge-row .gr-label {
  font-size: 0.7857rem;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.0286rem;
  font-weight: 600;
}
.gauge-row .gr-bar {
  height: 0.2857rem;
  background: var(--border-subtle);
  overflow: hidden;
  position: relative;
}
.gauge-row .gr-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
}
.gauge-row .gr-val {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.8571rem; font-weight: 300;
  text-align: right;
  color: var(--text);
}

/* ───────────────────── Bottom bar (ambient ticker) ─────────────────────
   No label, no chrome, no fixed-width right column — just events flowing
   horizontally. Faded by default so the bar visually disappears; full
   opacity on hover so the operator can read and click. */

.bottombar {
  background: var(--surface);
  border-top: 0.0714rem solid var(--border-subtle);
  height: var(--shell-bottom-h);
  display: flex; align-items: center;
  padding: 0 var(--lg);
  font-size: 0.7857rem;
  opacity: 0.55;
  transition: opacity 160ms;
}
.bottombar:hover { opacity: 1; }

.event-feed {
  flex: 1;
  display: flex;
  gap: var(--lg);
  align-items: center;
  overflow: hidden;
}

.event {
  display: flex; align-items: baseline; gap: 0.4286rem;
  font-size: 0.7857rem;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.event .ev-time {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  color: var(--text-4);
}
.event:first-child { color: var(--text-2); }
.event:first-child .ev-time { color: var(--accent); }

/* Typed event row inside event-feed */
.event {
  cursor: pointer;
}
.event:hover { color: var(--text); }
.event.selected {
  color: var(--text);
}
.event.selected .ev-time { color: var(--accent); }
.event .ev-kind {
  display: inline-block;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0 0.4286rem;
  border: 0.0714rem solid var(--border-strong);
  color: var(--text-3);
}
.event[data-kind="sensor.detect"] .ev-kind,
.event[data-kind="sensor.confirm"] .ev-kind { color: var(--accent); border-color: var(--accent); }
.event[data-kind="fuse.track"] .ev-kind { color: #8b8db5; border-color: #8b8db5; }
.event[data-kind="sit.create"] .ev-kind { color: var(--warn); border-color: var(--warn); }
.event[data-kind="sit.ack"] .ev-kind { color: var(--ok); border-color: var(--ok); }
.event[data-kind="operator.authorise"] .ev-kind { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.event[data-kind="ash.heartbeat"] .ev-kind { color: var(--text-4); border-color: var(--border); }
.event[data-kind="maint.predict"] .ev-kind { color: var(--warn); border-color: var(--warn); }
.event[data-kind="sustain.deplete"] .ev-kind { color: var(--warn); border-color: var(--warn); }

/* ───────────────────── Maintenance-chief queue ───────────────────── */
/* The chief's queue IS the runtime's queue (§6.2, §7.1). Each row is one
   asset, ordered by predicted next-failure across the fleet. Source is
   the ASH telemetry trend — derived deterministically per tick, not
   hand-authored — so the queue moves as the demo runs. */

.maint-queue {
  display: flex; flex-direction: column;
  border-top: 0.0714rem solid var(--border-subtle);
}
.maint-row {
  display: grid;
  grid-template-columns: 0.7143rem 1fr auto;
  align-items: center;
  gap: 0.5714rem;
  padding: 0.5714rem var(--md);
  border-bottom: 0.0714rem solid var(--border-subtle);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.maint-row:hover { background: var(--surface-alt); }
.maint-row.active { background: var(--accent-faint); }
.maint-rank {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  color: var(--text-4);
  text-align: right;
}
.maint-id {
  font-size: 0.8571rem;
  color: var(--text-2);
  display: flex; flex-direction: column;
  min-width: 0;
}
.maint-id .mq-sub {
  font-size: 0.6786rem;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.0286rem;
}
.maint-eta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.1429rem;
}
.maint-eta .me-val { color: var(--warn); font-weight: 700; }
.maint-eta .me-val.ok { color: var(--ok); }
.maint-eta .me-val.crit { color: var(--crit); }
.maint-eta .me-sub {
  font-size: 0.6429rem;
  color: var(--text-4);
  font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.0286rem;
}
.maint-foot {
  margin: 0; padding: 0.4286rem var(--md) 0.7143rem;
  font-size: 0.7143rem;
  color: var(--text-4);
  line-height: 1.45;
}

/* ASH telemetry feed: backpressure indicator on the existing telemetry
   section so the per-tick "every chassis is a runtime node" claim has a
   visible runtime artefact, not just a static value list. */
.ash-stream-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
  color: var(--text-3);
}
.ash-stream-row:last-child { border-bottom: none; }
.ash-stream-key {
  display: flex; align-items: center; gap: 0.4286rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
}
.ash-stream-key .ash-dot {
  width: 0.3571rem; height: 0.3571rem; background: var(--ok);
  animation: ashPulse 1.4s ease-in-out infinite;
}
@keyframes ashPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.ash-stream-val {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text-2);
  font-size: 0.8571rem;
}

/* ───────────────────── Lineage popover ───────────────────── */
/* Floating panel anchored over the shell when an event is clicked.
   Renders the parent chain backwards — sensor → ASH → fuse → operator —
   as a vertical timeline. Visualises the determinism + auditability claim. */

.lineage-popover {
  position: fixed;
  right: calc(var(--detail-w) + 1.4286rem);
  bottom: calc(var(--shell-bottom-h) + 0.7143rem);
  width: 28rem;
  max-height: 60vh;
  background: var(--surface);
  border: 0.0714rem solid var(--accent);
  display: flex; flex-direction: column;
  z-index: 60;
  box-shadow: 0 0 0 0.0714rem var(--accent-faint);
}
.lineage-popover[hidden] { display: none; }

.lp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5714rem var(--md);
  border-bottom: 0.0714rem solid var(--border);
  background: var(--accent-faint);
}
.lp-tag {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--accent);
}
.lp-close {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  width: 1.4286rem; height: 1.4286rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.lp-close:hover { border-color: var(--accent); color: var(--accent); }

.lp-body {
  overflow-y: auto;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.lp-chain {
  list-style: none; margin: 0; padding: 0;
}
.lp-link {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5714rem;
  padding: 0.7143rem var(--md);
  border-bottom: 0.0714rem solid var(--border-subtle);
  position: relative;
}
.lp-link:last-child { border-bottom: none; }
.lp-link.terminus {
  background: linear-gradient(180deg, var(--accent-faint), transparent);
}
.lp-marker {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem; font-weight: 700;
  color: var(--accent);
  display: flex; flex-direction: column; align-items: flex-end;
  border-right: 0.0714rem solid var(--border);
  padding-right: 0.5714rem;
}
.lp-marker small { color: var(--text-4); font-weight: 500; font-size: 0.6429rem; }
.lp-content { min-width: 0; }
.lp-kind {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
}
.lp-text {
  margin-top: 0.2857rem;
  font-size: 0.8571rem;
  color: var(--text);
  line-height: 1.4;
}
.lp-source {
  margin-top: 0.4286rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
  display: flex; gap: 0.7143rem; flex-wrap: wrap;
}
.lp-source b {
  color: var(--text-2);
  font-weight: 500;
}
.lp-source .lp-conf { color: var(--accent); }
.lp-source .lp-class { color: var(--warn); }

.lp-orphan {
  padding: var(--md);
  color: var(--text-3);
  font-size: 0.8571rem;
  text-align: center;
}

.lp-footer {
  padding: 0.5714rem var(--md);
  border-top: 0.0714rem solid var(--border);
  background: var(--surface-alt);
}
.lp-foot-l {
  font-size: 0.7143rem;
  color: var(--text-3);
  line-height: 1.4;
}
.lp-foot-l #lpReplayT {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--accent);
}

/* ───────────────────── Interdict / restore action buttons ─────────────────────
   Reused in the J4 T3 strip header (.t3-hd-r) for the Scenario C demo flow. */

.j4-interdict-btn {
  background: var(--crit-bg);
  color: var(--crit);
  border: 0.0714rem solid var(--crit);
  padding: 0.4286rem 0.8571rem;
  font-family: var(--font);
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  cursor: pointer;
}
.j4-interdict-btn:hover { background: var(--crit); color: #000; }
.j4-restore-btn {
  background: var(--ok-bg);
  color: var(--ok);
  border: 0.0714rem solid var(--ok);
  padding: 0.4286rem 0.8571rem;
  font-family: var(--font);
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  cursor: pointer;
}
.j4-restore-btn:hover { background: var(--ok); color: #000; }

/* Class I/III/V/IX strip */
.j4-classes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--md);
  margin-bottom: var(--md);
}
.j4-class {
  padding: 0.7143rem var(--md);
  border: 0.0714rem solid var(--border);
  background: var(--surface-alt);
  display: flex; flex-direction: column; gap: 0.4286rem;
}
.j4-class-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
}
.j4-class-id { font-size: 0.8571rem; font-weight: 700; }
.j4-class-name { color: var(--text-4); }
.j4-class-bar {
  height: 0.4286rem;
  background: var(--border);
}
.j4-class-bar > span { display: block; height: 100%; }
.j4-class-stats {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  color: var(--text-2);
}
.j4-class-stats .j4cs-sub { color: var(--text-4); font-size: 0.6786rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.j4-spark { width: 100%; height: 1.7143rem; display: block; }

/* Forward nodes */
.j4-nodes {
  margin-top: var(--sm);
  border-top: 0.0714rem solid var(--border-subtle);
  padding-top: var(--md);
}
.j4-nodes-title,
.j4-paths-title {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.5714rem;
}
.j4-node {
  display: grid;
  grid-template-columns: 0.6429rem 14rem 1fr auto;
  gap: var(--md);
  align-items: center;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.j4-node-dot { width: 0.5rem; height: 0.5rem; }
.j4-node-dot.NORMAL { background: var(--ok); }
.j4-node-dot.AT-RISK { background: var(--warn); }
.j4-node-dot.INTERDICTED { background: var(--crit); animation: critPulse 1.1s ease-in-out infinite; }
@keyframes critPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.j4-node-name { display: flex; flex-direction: column; min-width: 0; }
.j4-node-name b { color: var(--text); font-weight: 500; }
.j4-node-name small { color: var(--text-4); font-size: 0.6786rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.j4-node-stock {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  color: var(--text-2);
  display: flex; gap: 0.8571rem; flex-wrap: wrap;
}
.j4-node-stock span b { color: var(--text); }
.j4-node-threat {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5714rem;
  border: 0.0714rem solid currentColor;
}
.j4-node-threat.NORMAL { color: var(--ok); }
.j4-node-threat.AT-RISK { color: var(--warn); }
.j4-node-threat.INTERDICTED { color: var(--crit); }

/* Sustainment paths (primary + alternates) */
.j4-paths {
  margin-top: var(--md);
  border-top: 0.0714rem solid var(--border-subtle);
  padding-top: var(--md);
}
.j4-path {
  display: grid;
  grid-template-columns: 4.2857rem 1fr auto auto;
  gap: var(--md);
  align-items: center;
  padding: 0.5714rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.j4-path-kind {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid var(--border-strong);
  color: var(--text-3);
  text-align: center;
}
.j4-path-kind.primary { color: var(--text-2); border-color: var(--text-3); }
.j4-path-kind.alt { color: var(--accent); border-color: var(--accent); }
.j4-path-kind.down { color: var(--crit); border-color: var(--crit); }
.j4-path-route { display: flex; flex-direction: column; min-width: 0; }
.j4-path-route b { color: var(--text); font-weight: 500; }
.j4-path-route small { color: var(--text-4); font-size: 0.6786rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.j4-path-stats {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  color: var(--text-2);
  white-space: nowrap;
}
.j4-path-stats small { color: var(--text-4); font-size: 0.6786rem; }
.j4-path-action {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.4286rem 0.8571rem;
  font-family: var(--font);
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  cursor: pointer;
  white-space: nowrap;
}
.j4-path-action:hover { background: var(--accent-hover); }
.j4-path-action.disabled { background: var(--surface-alt); color: var(--text-4); cursor: not-allowed; border: 0.0714rem solid var(--border); }

.j4-empty {
  padding: var(--md) 0;
  font-size: 0.8571rem;
  color: var(--text-3);
}

/* ───────────────────── Dispatch authorisation modal (Phase D) ───────────────────── */

.auth-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.74);
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
}
.auth-overlay[hidden] { display: none; }

.auth-modal {
  width: min(40rem, 90vw);
  background: var(--surface);
  border: 0.0714rem solid var(--accent);
  display: flex; flex-direction: column;
  max-height: 86vh;
}
.auth-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7143rem var(--md);
  border-bottom: 0.0714rem solid var(--border);
  background: var(--accent-faint);
}
.auth-tag {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--accent);
}
.auth-close {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  width: 1.4286rem; height: 1.4286rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.auth-close:hover { border-color: var(--accent); color: var(--accent); }

.auth-body {
  padding: var(--md);
  overflow-y: auto;
}
.auth-title {
  margin: 0 0 var(--sm) 0;
  font-size: 1.1429rem; font-weight: 300;
  color: var(--text);
}
.auth-context {
  padding: 0.5714rem var(--md);
  background: var(--surface-alt);
  border-left: 0.1429rem solid var(--accent);
  font-size: 0.8571rem;
  color: var(--text-2);
  margin-bottom: var(--md);
}
.auth-context dl {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.2857rem 0.7143rem;
  margin: 0;
  font-size: 0.7857rem;
}
.auth-context dt { color: var(--text-4); text-transform: uppercase; letter-spacing: 0.0286rem; font-size: 0.6786rem; font-weight: 700; }
.auth-context dd {
  margin: 0;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text-2);
}

.auth-lineage {
  margin: var(--md) 0;
}
.auth-lineage-label {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.4286rem;
}
.auth-lineage-chain {
  list-style: none; margin: 0; padding: 0;
  border-left: 0.1429rem solid var(--border-strong);
}
.auth-lineage-chain li {
  padding: 0.2857rem var(--md);
  font-size: 0.7857rem;
  color: var(--text-2);
}
.auth-lineage-chain li b { font-family: var(--mono); font-feature-settings: "tnum" 1; color: var(--accent); font-weight: 500; }

.auth-roe {
  background: var(--warn-bg);
  border-left: 0.1429rem solid var(--warn);
  padding: 0.5714rem var(--md);
  font-size: 0.7857rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: var(--md);
}
.auth-roe strong { color: var(--warn); }

.auth-op {
  display: flex; flex-direction: column; gap: 0.4286rem;
}
.auth-op label {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
}
.auth-op select {
  background: var(--surface-alt);
  border: 0.0714rem solid var(--border);
  color: var(--text-2);
  padding: 0.4286rem var(--sm);
  font-family: var(--font);
  font-size: 0.8571rem;
  cursor: pointer;
}
.auth-op select:focus { border-color: var(--accent); outline: none; }

.auth-ft {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sm);
  padding: 0.7143rem var(--md);
  border-top: 0.0714rem solid var(--border);
  background: var(--surface-alt);
}
.auth-cancel {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-2);
  padding: 0.4286rem 0.8571rem;
  font-family: var(--font);
  font-size: 0.7857rem;
  cursor: pointer;
}
.auth-cancel:hover { border-color: var(--text-2); }
.auth-confirm {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.4286rem 1.1429rem;
  font-family: var(--font);
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  cursor: pointer;
}
.auth-confirm:hover { background: var(--accent-hover); }

/* ═════════════════════════════════════════════════════════════════════
   VISUAL HIERARCHY — the COP and the active role panel dominate;
   chrome, ambient surfaces, and secondary rails fade until interacted
   with. The whole point is operator cognitive load reduction.
   ═════════════════════════════════════════════════════════════════════ */

/* Desaturate the satellite basemap so the COP reads as a C2 console
   rather than a colourful Google-Maps slice. Operators look for symbols,
   not terrain colour. Applied to the MapLibre tile layer container only. */
.maplibregl-canvas {
  filter: saturate(0.32) brightness(0.68) contrast(1.05);
}
/* Markers + overlay canvas are children of the same map container but
   need full saturation so callsigns, capability rings, and severity dots
   remain legible. Filter is applied to the canvas itself rather than the
   container so child elements stay crisp. */

/* Collapsible left-rail sections (overlays + policy use <details>) */
.rail-section.overlays-section,
.rail-section.policy-section {
  padding: 0;
}
.rs-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.rs-summary::-webkit-details-marker { display: none; }
.rs-summary::after {
  content: '▾';
  margin-left: 0.5714rem;
  font-size: 0.6786rem;
  color: var(--text-4);
  transition: transform 120ms;
}
details:not([open]) .rs-summary::after { transform: rotate(-90deg); }

/* ═════════════════════════════════════════════════════════════════════
   ROLE-SWITCHING IA — chrome row 3 (role bar), T3 strip below the COP,
   substrate drawer slide-in from the right, substrate pill in chrome.
   ═════════════════════════════════════════════════════════════════════ */

/* ───── Substrate pill (sysbar-right) ───── */
/* Compact always-visible status chip. Click opens the substrate drawer.
   In live mode shows the green dot + event count; in replay mode the dot
   and label go navy so the operator can see the substrate is detached. */

.substrate-pill {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 0.4286rem;
  padding: 0.2857rem 0.7143rem;
  font-family: var(--font);
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  cursor: pointer;
  white-space: nowrap;
}
.substrate-pill:hover { border-color: var(--accent); color: var(--accent); }
.substrate-pill.open { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }
.substrate-pill.replay { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }
.substrate-pill .sp-dot {
  width: 0.4286rem; height: 0.4286rem; background: var(--ok); flex-shrink: 0;
}
.substrate-pill.replay .sp-dot { background: var(--accent); animation: replayPulse 1.2s ease-in-out infinite; }
@keyframes replayPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.substrate-pill .sp-mode { color: var(--ok); }
.substrate-pill.replay .sp-mode { color: var(--accent); }
.substrate-pill .sp-sep { color: var(--text-4); font-weight: 400; }
.substrate-pill .sp-count {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text);
  font-weight: 500;
}
.substrate-pill .sp-events { color: var(--text-3); font-weight: 400; text-transform: none; }
.substrate-pill .sp-fed { color: var(--accent); }

/* ───── Role bar (chrome row 3) ───── */
/* The whitepaper's "different operators see different views of the same
   substrate" claim is physicalised here: 5 roles, the COP and chrome stay
   put, the T3 strip below the COP rotates content. */

.role-bar {
  display: flex; align-items: stretch;
  height: var(--shell-role-h);
  padding: 0 var(--lg);
  border-top: 0.0714rem solid var(--border-subtle);
  background: var(--surface-alt);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.role-bar::-webkit-scrollbar { display: none; }

.rb-btn {
  background: none;
  border: none;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 0.4286rem;
  padding: 0 var(--md);
  font-family: var(--font);
  cursor: pointer;
  border-bottom: 0.1429rem solid transparent;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 120ms, color 120ms;
}
.rb-btn:hover { color: var(--text-2); opacity: 0.95; }
.rb-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-faint);
  opacity: 1;
}
.rb-btn .rb-id {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
}
.rb-btn .rb-name {
  font-size: 0.7143rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.0286rem;
}

/* ───── T3 strip (full-width, content rotates by operator role) ───── */
/* The strip is the role's working surface. Header carries the role tag,
   a one-line description of what that role sees, and any role-specific
   action buttons (e.g. J4's INTERDICT / RESTORE). Body holds the content. */

.t3-strip {
  height: var(--shell-t3-h);
  min-height: var(--shell-t3-min-h);
  max-height: var(--shell-t3-max-h);
  background: var(--surface);
  border-top: 0.0714rem solid var(--accent);
  display: flex; flex-direction: column;
  position: relative;
}
.t3-strip.resizing { user-select: none; cursor: row-resize; }

/* Drag handle along the top edge — grab and drag vertically to resize.
   Width spans the full strip; height is just a hair so the COP isn't
   visually compromised. Visible grip in the centre on hover/active. */
.t3-resize {
  position: absolute;
  top: -0.2143rem; left: 0; right: 0;
  height: 0.5714rem;
  cursor: row-resize;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.t3-resize:hover .t3-resize-grip,
.t3-resize:focus-visible .t3-resize-grip,
.t3-strip.resizing .t3-resize-grip {
  background: var(--accent);
  width: 4rem;
}
.t3-resize-grip {
  width: 2.2857rem; height: 0.2143rem;
  background: var(--border-strong);
  transition: background 120ms, width 120ms;
}

/* Preset size buttons in the strip header */
.t3-hd-size {
  display: flex; align-items: stretch;
  gap: 0.1429rem;
  flex-shrink: 0;
  margin-left: var(--sm);
}
.t3-size-btn {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-4);
  font-family: var(--mono);
  font-size: 0.7857rem;
  line-height: 1;
  padding: 0.2857rem 0.5rem;
  cursor: pointer;
  width: 1.7143rem;
}
.t3-size-btn:hover { border-color: var(--accent); color: var(--accent); }
.t3-size-btn.active { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }

.t3-strip[data-role="J3"]   { border-top-color: var(--accent); }
.t3-strip[data-role="J4"]   { border-top-color: var(--warn); }
.t3-strip[data-role="J2"]   { border-top-color: #8b8db5; }
.t3-strip[data-role="CDR"]  { border-top-color: var(--ok); }
.t3-strip[data-role="J5"]   { border-top-color: var(--partner-uk); }
.t3-strip[data-role="MAINT"] { border-top-color: #67d4dc; }

.t3-hd {
  display: flex; align-items: center;
  gap: var(--md);
  padding: 0.4286rem var(--lg);
  border-bottom: 0.0714rem solid var(--border-subtle);
  background: var(--surface-alt);
  flex-shrink: 0;
}
.t3-hd-l {
  display: flex; align-items: baseline; gap: var(--md);
  min-width: 0;
  flex: 1;
}
.t3-tag {
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--text);
  white-space: nowrap;
}
.t3-strip[data-role="J3"]    .t3-tag { color: var(--accent); }
.t3-strip[data-role="J4"]    .t3-tag { color: var(--warn); }
.t3-strip[data-role="J2"]    .t3-tag { color: #8b8db5; }
.t3-strip[data-role="CDR"]   .t3-tag { color: var(--ok); }
.t3-strip[data-role="J5"]    .t3-tag { color: var(--partner-uk); }
.t3-strip[data-role="MAINT"] .t3-tag { color: #67d4dc; }

.t3-sub {
  font-size: 0.7143rem;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t3-hd-r {
  display: flex; align-items: center; gap: var(--sm);
  flex-shrink: 0;
}

.t3-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sm) var(--lg);
}

/* J3 Operations strip — situations + pending dispatches */
.t3-j3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--md);
  height: 100%;
}
.t3-j3-section {
  display: flex; flex-direction: column;
  min-height: 0;
}
.t3-section-hd {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.4286rem;
  padding-bottom: 0.2857rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.t3-section-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.sit-row {
  display: grid;
  grid-template-columns: 0.5714rem 1fr auto auto;
  gap: 0.5714rem;
  align-items: center;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.sit-row:last-child { border-bottom: none; }
.sit-dot { width: 0.4286rem; height: 0.4286rem; }
.sit-dot.high { background: var(--crit); }
.sit-dot.medium { background: var(--warn); }
.sit-dot.low { background: var(--ok); }
.sit-title { color: var(--text); min-width: 0; }
.sit-title small { display: block; color: var(--text-4); font-size: 0.6786rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.sit-owner {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5rem;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
}
.sit-action {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.2857rem 0.5714rem;
  background: var(--accent-faint);
  color: var(--accent);
  border: 0.0714rem solid var(--accent);
  cursor: pointer;
}
.sit-action:hover { background: var(--accent); color: #000; }

.disp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sm);
  align-items: center;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.disp-row:last-child { border-bottom: none; }
.disp-empty {
  color: var(--text-4);
  font-size: 0.7857rem;
  padding: 0.5714rem 0;
}

/* J4 strip uses .j4-classes / .j4-nodes / .j4-paths from elsewhere.
   Tighten margins for inline-strip use. */
.t3-j4 { display: flex; flex-direction: column; gap: var(--sm); }
.t3-j4 .j4-classes { margin-bottom: 0; }
.t3-j4 .j4-class { padding: 0.4286rem var(--sm); gap: 0.2857rem; }
.t3-j4 .j4-nodes { margin-top: 0; padding-top: 0; border-top: none; }
.t3-j4 .j4-paths { margin-top: 0; padding-top: 0; border-top: none; }
.t3-j4 .j4-spark { height: 1.2857rem; }

/* J2 Intel strip — tracks table with fused confidence + cross-cue chains */
.t3-j2 { display: flex; flex-direction: column; min-height: 0; }
.trk-table { width: 100%; border-collapse: collapse; font-size: 0.7857rem; }
.trk-table th {
  text-align: left;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  padding: 0.2857rem 0.5714rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
  background: var(--surface-alt);
  position: sticky; top: 0;
}
.trk-table td {
  padding: 0.4286rem 0.5714rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text-2);
}
.trk-table tr:hover td { background: var(--surface-alt); }
.trk-conf {
  display: inline-flex; align-items: center; gap: 0.2857rem;
}
.trk-conf-bar { width: 3rem; height: 0.4286rem; background: var(--border); display: inline-block; }
.trk-conf-bar span { display: block; height: 100%; background: var(--accent); }
.trk-conf.high .trk-conf-bar span { background: var(--ok); }
.trk-conf.med .trk-conf-bar span { background: var(--warn); }
.trk-conf.low .trk-conf-bar span { background: var(--text-4); }
.trk-chain {
  font-size: 0.6786rem;
  color: var(--text-3);
  font-family: var(--font);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.trk-partner {
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.0714rem 0.4286rem;
  border: 0.0714rem solid currentColor;
}
.trk-partner.us { color: var(--accent); }
.trk-partner.uk { color: var(--partner-uk); }

/* Commander strip — audit ledger + rollup deltas */
.t3-cdr {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--md);
  height: 100%;
}
.cdr-ledger-row {
  display: grid;
  grid-template-columns: 4.2857rem 1fr auto;
  gap: var(--sm);
  align-items: center;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
}
.cdr-ledger-row:last-child { border-bottom: none; }
.cdr-ledger-t {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--accent);
  font-size: 0.7143rem;
}
.cdr-ledger-op {
  display: flex; flex-direction: column;
}
.cdr-ledger-op b { color: var(--text); font-weight: 500; }
.cdr-ledger-op small { color: var(--text-4); font-size: 0.6786rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.cdr-ledger-class {
  font-family: var(--mono); font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid var(--ok);
  color: var(--ok);
}
.cdr-rollup-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.cdr-rollup-l { color: var(--text-3); font-size: 0.7143rem; text-transform: uppercase; letter-spacing: 0.0286rem; }
.cdr-rollup-v {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text);
  font-weight: 500;
}

/* MAINT strip — next-failure queue + selected-asset ASH telemetry */
.t3-maint {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--md);
  height: 100%;
}
.t3-maint .maint-row { padding: 0.4286rem var(--sm); }
.t3-maint-tel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2857rem 0.7143rem;
  align-content: start;
}
.t3-maint-tel-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.7857rem;
  padding: 0.1429rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.t3-maint-tel-row span:first-child {
  font-family: var(--mono); font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-4);
}
.t3-maint-tel-row span:last-child {
  font-family: var(--mono); font-feature-settings: "tnum" 1;
  color: var(--text-2);
}

/* ───── Substrate drawer (slide-in from right) ───── */

.substrate-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(30rem, 90vw);
  height: 100vh; height: 100dvh;
  background: var(--surface);
  border-left: 0.1429rem solid var(--accent);
  display: flex; flex-direction: column;
  z-index: 70;
  animation: sdSlide 220ms ease-out;
}
@keyframes sdSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.substrate-drawer[hidden] { display: none; }

.sd-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7143rem var(--md);
  border-bottom: 0.0714rem solid var(--border);
  background: var(--accent-faint);
}
.sd-tag {
  font-size: 0.7857rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--accent);
}
.sd-close {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  width: 1.4286rem; height: 1.4286rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.sd-close:hover { border-color: var(--accent); color: var(--accent); }

.sd-body {
  overflow-y: auto;
  flex: 1; min-height: 0;
}

.sd-sec {
  padding: var(--md);
  border-bottom: 0.0714rem solid var(--border);
}
.sd-sec-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.5714rem;
}
.sd-sec-meta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--text-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.sd-scrub {
  display: flex; align-items: center; gap: 0.5714rem;
}
.sd-scrub-t {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  color: var(--text-3);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 3.5rem;
}
#sdScrubTNow { color: var(--text-2); text-align: right; }
#timeScrubber {
  flex: 1;
  height: 0.4286rem;
  -webkit-appearance: none; appearance: none;
  background: var(--border);
  outline: none;
  min-width: 0;
}
#timeScrubber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 0.7143rem; height: 1.2857rem;
  background: var(--accent);
  cursor: pointer;
  border: 0;
}
#timeScrubber::-moz-range-thumb {
  width: 0.7143rem; height: 1.2857rem;
  background: var(--accent);
  cursor: pointer;
  border: 0; border-radius: 0;
}
#timeScrubber:focus { outline: none; }
.sd-scrub-actions {
  display: flex; align-items: center; gap: var(--sm);
  margin-top: 0.5714rem;
}
.sd-live-btn {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.2143rem 0.7143rem;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  cursor: pointer;
}
.sd-live-btn:hover { background: var(--accent-hover); }
.sd-scrub-note {
  font-size: 0.7143rem;
  color: var(--text-4);
  line-height: 1.45;
}

.sd-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2857rem 0.7143rem;
  font-size: 0.7143rem;
}
.sd-kind-row {
  display: flex; justify-content: space-between;
  border-bottom: 0.0714rem solid var(--border-subtle);
  padding: 0.1429rem 0;
}
.sd-kind-row span:first-child {
  font-family: var(--mono); font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-3);
}
.sd-kind-row span:last-child {
  font-family: var(--mono); font-feature-settings: "tnum" 1;
  color: var(--text-2);
  font-weight: 500;
}

.sd-fed-row {
  display: grid;
  grid-template-columns: 2.2857rem 1fr auto;
  align-items: center;
  gap: var(--sm);
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.8571rem;
}
.sd-fed-tag {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid currentColor;
  text-align: center;
}
.sd-fed-tag.us { color: var(--accent); background: var(--accent-faint); }
.sd-fed-tag.uk { color: var(--partner-uk); }
.sd-fed-name {
  color: var(--text-2);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-fed-status {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5714rem;
  border: 0.0714rem solid currentColor;
}
.sd-fed-status.on { color: var(--ok); }
.sd-fed-toggle {
  background: var(--accent-faint);
  color: var(--accent);
  border: 0.0714rem solid var(--accent);
  padding: 0.2143rem 0.5714rem;
  font-family: var(--font);
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  cursor: pointer;
}
.sd-fed-toggle:hover { background: var(--accent); color: #000; }
.sd-fed-toggle.on {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok);
}
.sd-fed-toggle.on:hover { background: var(--ok); color: #000; }
.sd-fed-note {
  margin: 0.5714rem 0 0;
  font-size: 0.7143rem;
  color: var(--text-4);
  line-height: 1.45;
}

.sd-ledger {
  display: flex; flex-direction: column;
}
.sd-ledger-row {
  display: grid;
  grid-template-columns: 4.2857rem 1fr;
  gap: 0.5714rem;
  align-items: baseline;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
  cursor: pointer;
}
.sd-ledger-row:hover { background: var(--surface-alt); }
.sd-ledger-row:last-child { border-bottom: none; }
.sd-ledger-t {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  color: var(--accent);
  font-size: 0.7143rem;
}
.sd-ledger-text { color: var(--text-2); }
.sd-ledger-text b { color: var(--text); font-weight: 500; }
.sd-ledger-empty {
  padding: 0.5714rem 0;
  font-size: 0.7857rem;
  color: var(--text-4);
}

.sd-search {
  width: 100%;
  background: var(--surface-alt);
  border: 0.0714rem solid var(--border);
  color: var(--text-2);
  padding: 0.4286rem var(--sm);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
}
.sd-search:focus { border-color: var(--accent); outline: none; }

/* ═════════════════════════════════════════════════════════════════════
   NOTIFICATIONS — bell button + popover + map toast stack
   ═════════════════════════════════════════════════════════════════════ */

.notif-bell {
  position: relative;
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-2);
  width: 2.1429rem; height: 2.1429rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.notif-bell:hover { border-color: var(--accent); color: var(--accent); }
.notif-bell.has-unread { color: var(--warn); border-color: var(--warn); }
.notif-bell.has-crit { color: var(--crit); border-color: var(--crit); animation: bellPulse 1.4s ease-in-out infinite; }
@keyframes bellPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 64, 64, 0); }
  50% { box-shadow: 0 0 0 0.2143rem rgba(197, 64, 64, 0.18); }
}
.bell-icon { width: 1rem; height: 1rem; fill: currentColor; }
.notif-badge {
  position: absolute;
  top: -0.2857rem; right: -0.2857rem;
  background: var(--warn);
  color: #000;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  min-width: 1.0714rem; height: 1.0714rem;
  padding: 0 0.2857rem;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.notif-bell.has-crit .notif-badge { background: var(--crit); color: #fff; }

.notif-popover {
  position: fixed;
  top: calc(var(--shell-bar-h) + 0.2857rem);
  right: 1rem;
  width: min(26rem, 92vw);
  max-height: 60vh;
  background: var(--surface);
  border: 0.0714rem solid var(--accent);
  display: flex; flex-direction: column;
  z-index: 80;
  animation: npSlide 180ms ease-out;
}
@keyframes npSlide {
  from { transform: translateY(-0.7143rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.notif-popover[hidden] { display: none; }

.np-hd {
  display: flex; align-items: center; gap: var(--sm);
  padding: 0.5714rem var(--md);
  border-bottom: 0.0714rem solid var(--border);
  background: var(--accent-faint);
}
.np-tag {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--accent);
  flex: 1;
}
.np-clear {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  font-family: var(--font);
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5714rem;
  cursor: pointer;
}
.np-clear:hover { border-color: var(--accent); color: var(--accent); }
.np-close {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  width: 1.4286rem; height: 1.4286rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.np-close:hover { border-color: var(--accent); color: var(--accent); }

.np-body {
  overflow-y: auto;
  flex: 1;
}

.notif-row {
  display: grid;
  grid-template-columns: 0.4286rem 1fr auto;
  gap: 0.5714rem;
  align-items: center;
  padding: 0.5714rem var(--md);
  border-bottom: 0.0714rem solid var(--border-subtle);
  cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--surface-alt); }
.notif-row.acked { opacity: 0.45; }
.notif-row-sev {
  width: 0.2857rem; height: 100%;
  align-self: stretch;
}
.notif-row.crit .notif-row-sev { background: var(--crit); }
.notif-row.warn .notif-row-sev { background: var(--warn); }
.notif-row.info .notif-row-sev { background: var(--accent); }
.notif-row-content { min-width: 0; }
.notif-row-kind {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
}
.notif-row-text {
  margin-top: 0.2143rem;
  font-size: 0.8571rem;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-row-meta {
  margin-top: 0.2143rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
}
.notif-row-actions {
  display: flex; gap: 0.2857rem;
  flex-shrink: 0;
}
.notif-ack {
  background: var(--accent-faint);
  color: var(--accent);
  border: 0.0714rem solid var(--accent);
  font-family: var(--font);
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  cursor: pointer;
}
.notif-ack:hover { background: var(--accent); color: #000; }

.np-empty {
  padding: var(--md);
  font-size: 0.8571rem;
  color: var(--text-4);
  text-align: center;
}

.np-ft {
  padding: 0.4286rem var(--md);
  border-top: 0.0714rem solid var(--border);
  background: var(--surface-alt);
}
.np-foot-l {
  font-size: 0.6786rem;
  color: var(--text-4);
  line-height: 1.4;
}

/* Map toast stack — top-right of the COP, overlays the map */
.map-toast-stack {
  position: absolute;
  top: 0.7143rem; right: 0.7143rem;
  display: flex; flex-direction: column;
  gap: 0.4286rem;
  z-index: 7;
  pointer-events: none;
  max-width: 24rem;
}
.map-toast {
  background: var(--surface);
  border: 0.0714rem solid var(--warn);
  border-left-width: 0.2857rem;
  padding: 0.5714rem 0.7143rem;
  display: flex; flex-direction: column; gap: 0.2143rem;
  pointer-events: auto;
  animation: toastIn 200ms ease-out;
}
.map-toast.crit { border-color: var(--crit); }
.map-toast.fade { animation: toastOut 200ms ease-in forwards; }
@keyframes toastIn {
  from { transform: translateX(0.7143rem); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateX(0.7143rem); opacity: 0; }
}
.map-toast-kind {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--warn);
}
.map-toast.crit .map-toast-kind { color: var(--crit); }
.map-toast-text {
  font-size: 0.8571rem;
  color: var(--text);
  line-height: 1.35;
}

/* ═════════════════════════════════════════════════════════════════════
   SUBSTRATE DRAWER — event feed filters + scrollable feed
   ═════════════════════════════════════════════════════════════════════ */

.sd-filters {
  display: flex; flex-wrap: wrap; gap: 0.2857rem;
  margin-bottom: 0.5714rem;
}
.sd-filter {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-4);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5714rem;
  cursor: pointer;
}
.sd-filter:hover { border-color: var(--accent); color: var(--accent); }
.sd-filter.active { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }

.sd-feed {
  max-height: 26rem;
  overflow-y: auto;
  border-top: 0.0714rem solid var(--border-subtle);
}
.sd-feed-row {
  display: grid;
  grid-template-columns: 4.2857rem 1fr;
  gap: 0.5714rem;
  align-items: baseline;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
  cursor: pointer;
}
.sd-feed-row:hover { background: var(--surface-alt); }
.sd-feed-row .sf-t {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  color: var(--text-4);
}
.sd-feed-row.crit .sf-t { color: var(--crit); }
.sd-feed-row.auth .sf-t { color: var(--ok); }
.sd-feed-row.sit .sf-t { color: var(--warn); }
.sd-feed-row .sf-kind {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-right: 0.4286rem;
}
.sd-feed-row .sf-text {
  color: var(--text-2);
}
.sd-feed-empty {
  padding: var(--md) 0;
  font-size: 0.7857rem;
  color: var(--text-4);
  text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════
   J5 PLAN — trends + forward projection + course-of-action
   ═════════════════════════════════════════════════════════════════════ */

.t3-j5 {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.4fr;
  gap: var(--md);
  height: 100%;
}

/* Trends column */
.j5-trends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5714rem;
  align-content: start;
}
.j5-trend {
  border: 0.0714rem solid var(--border-subtle);
  padding: 0.4286rem 0.5714rem;
  background: var(--surface-alt);
  display: flex; flex-direction: column; gap: 0.2857rem;
}
.j5-trend-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
}
.j5-trend-label { color: var(--text-3); }
.j5-trend-val {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.8571rem; font-weight: 500;
  color: var(--text);
}
.j5-trend-val.up { color: var(--ok); }
.j5-trend-val.down { color: var(--crit); }
.j5-trend-val.warn { color: var(--warn); }
.j5-trend-spark { width: 100%; height: 1.4286rem; display: block; }
.j5-trend-delta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem;
  color: var(--text-4);
}

/* Decision deck */
.j5-decisions {
  display: flex; flex-direction: column;
  gap: 0.4286rem;
  min-height: 0;
}
.j5-decision {
  border: 0.0714rem solid var(--border-subtle);
  padding: 0.5714rem;
  background: var(--surface-alt);
  display: grid;
  grid-template-columns: 4.2857rem 1fr;
  gap: 0.5714rem;
  align-items: center;
  cursor: pointer;
}
.j5-decision:hover { border-color: var(--accent); }
.j5-decision.active { border-color: var(--accent); background: var(--accent-faint); }
.j5-decision.crit { border-left: 0.2857rem solid var(--crit); }
.j5-decision.warn { border-left: 0.2857rem solid var(--warn); }
.j5-dec-eta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.8571rem; font-weight: 700;
  color: var(--warn);
  text-align: right;
}
.j5-decision.crit .j5-dec-eta { color: var(--crit); }
.j5-dec-content { min-width: 0; }
.j5-dec-asset {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-2);
}
.j5-dec-text {
  margin-top: 0.1429rem;
  font-size: 0.7857rem;
  color: var(--text);
  line-height: 1.35;
}
.j5-dec-meta {
  margin-top: 0.1429rem;
  font-size: 0.6786rem;
  color: var(--text-4);
}

/* COA comparison table */
.j5-coa {
  display: flex; flex-direction: column;
  border: 0.0714rem solid var(--border-subtle);
  background: var(--surface-alt);
  padding: 0.5714rem;
  min-height: 0;
}
.j5-coa-hd {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.4286rem;
  padding-bottom: 0.2857rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.j5-coa-hd b { color: var(--text); font-weight: 500; }
.j5-coa-list {
  display: flex; flex-direction: column;
  gap: 0.4286rem;
  overflow-y: auto;
  min-height: 0;
}
.j5-coa-row {
  display: grid;
  grid-template-columns: 1.4286rem 1fr auto;
  gap: 0.5714rem;
  align-items: center;
  padding: 0.4286rem;
  border: 0.0714rem solid var(--border-subtle);
  background: var(--surface);
}
.j5-coa-row.recommended { border-color: var(--ok); }
.j5-coa-tag {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem; font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.j5-coa-row.recommended .j5-coa-tag { color: var(--ok); }
.j5-coa-body { min-width: 0; }
.j5-coa-title {
  font-size: 0.7857rem;
  color: var(--text);
  font-weight: 500;
}
.j5-coa-stats {
  margin-top: 0.1429rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
}
.j5-coa-stats b { color: var(--text-2); font-weight: 500; }
.j5-coa-stats .stat-good { color: var(--ok); }
.j5-coa-stats .stat-warn { color: var(--warn); }
.j5-coa-action {
  background: var(--accent-faint);
  color: var(--accent);
  border: 0.0714rem solid var(--accent);
  padding: 0.2857rem 0.5714rem;
  font-family: var(--font);
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  cursor: pointer;
  white-space: nowrap;
}
.j5-coa-action:hover { background: var(--accent); color: #000; }
.j5-coa-row.recommended .j5-coa-action {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok);
}
.j5-coa-row.recommended .j5-coa-action:hover { background: var(--ok); color: #000; }

/* ═════════════════════════════════════════════════════════════════════
   RIGHT-CLICK CONTEXT MENUS — radial for assets, linear for map
   ═════════════════════════════════════════════════════════════════════ */

/* Radial: 6 wedge buttons arranged around the right-clicked asset.
   Each item is absolutely positioned via inline --angle (radians) and
   --radius. Centre is a small badge with the callsign + readiness. */

.ctx-radial {
  position: fixed;
  width: 0; height: 0;
  z-index: 100;
  pointer-events: auto;
  animation: ctxFade 140ms ease-out;
}
.ctx-radial[hidden] { display: none; }
@keyframes ctxFade {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.ctx-radial .crc-centre {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 0.1429rem solid var(--accent);
  padding: 0.5714rem 0.7143rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.1429rem;
  min-width: 8rem;
  text-align: center;
}
.ctx-radial .crc-id {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
}
.ctx-radial .crc-cs {
  font-size: 0.9286rem; font-weight: 500;
  color: var(--text);
}
.ctx-radial .crc-stat {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.0429rem;
}
.ctx-radial .crc-stat.warn { color: var(--warn); }
.ctx-radial .crc-stat.crit { color: var(--crit); }
.ctx-radial .crc-stat.ok { color: var(--ok); }

.ctx-radial .crc-item {
  position: absolute;
  left: 0; top: 0;
  --radius: 9rem;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--radius))
    rotate(calc(-1 * var(--angle)));
  background: var(--surface);
  border: 0.0714rem solid var(--border-strong);
  color: var(--text-2);
  padding: 0.5714rem 0.7143rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.2143rem;
  min-width: 4.2857rem;
  cursor: pointer;
  font-family: var(--font);
}
.ctx-radial .crc-item:hover,
.ctx-radial .crc-item:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-faint);
  outline: none;
}
.ctx-radial .crc-icon {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 1rem;
  line-height: 1;
}
.ctx-radial .crc-label {
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  white-space: nowrap;
}

/* Faint guide ring between centre and items so the radial reads as one
   unit rather than nine floating chips. */
.ctx-radial::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 17.5rem; height: 17.5rem;
  transform: translate(-50%, -50%);
  border: 0.0714rem dashed var(--border-strong);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
}

/* Linear context menu (right-click on map background) */
.ctx-linear {
  position: fixed;
  background: var(--surface);
  border: 0.0714rem solid var(--accent);
  min-width: 16rem;
  z-index: 100;
  display: flex; flex-direction: column;
  animation: ctxFade 140ms ease-out;
}
.ctx-linear[hidden] { display: none; }

.ctx-linear .ctl-hd {
  display: flex; flex-direction: column;
  padding: 0.5714rem 0.7143rem;
  background: var(--accent-faint);
  border-bottom: 0.0714rem solid var(--border);
  gap: 0.1429rem;
}
.ctx-linear .ctl-tag {
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  color: var(--accent);
}
.ctx-linear .ctl-coords {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  color: var(--text);
}
.ctx-linear .ctl-meta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
}

.ctx-linear .ctl-item {
  background: none;
  border: none;
  border-bottom: 0.0714rem solid var(--border-subtle);
  color: var(--text-2);
  text-align: left;
  padding: 0.5714rem 0.7143rem;
  font-family: var(--font);
  font-size: 0.7857rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.5714rem;
}
.ctx-linear .ctl-item:last-of-type { border-bottom: none; }
.ctx-linear .ctl-item:hover,
.ctx-linear .ctl-item:focus-visible {
  background: var(--accent-faint);
  color: var(--accent);
  outline: none;
}
.ctx-linear .ctl-item-icon {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem;
  width: 1rem; text-align: center;
  color: var(--text-3);
}
.ctx-linear .ctl-item:hover .ctl-item-icon { color: var(--accent); }
.ctx-linear .ctl-item-shortcut {
  margin-left: auto;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
}

/* Waypoint markers placed by the map context menu */
.waypoint-marker {
  width: 1.4286rem; height: 1.4286rem;
  border: 0.1429rem solid var(--warn);
  background: rgba(217, 162, 51, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  color: var(--warn);
  transform: rotate(45deg);
  cursor: pointer;
}
.waypoint-marker > span {
  transform: rotate(-45deg);
}

/* Measurement line — drawn on overlayCanvas, styled here as a key for ESC hint */
.measure-hint {
  position: absolute;
  top: 0.7143rem; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 0.0714rem solid var(--warn);
  color: var(--warn);
  padding: 0.2857rem 0.7143rem;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  z-index: 8;
  pointer-events: none;
}
.measure-hint[hidden] { display: none; }

/* ═════════════════════════════════════════════════════════════════════
   TRACKS (Bishop FUSE composite picture) + MEASURE + QUICK REPORT + OBJ
   ═════════════════════════════════════════════════════════════════════ */

/* Track markers — diamond shape with classification colour. Sized by
   confidence, faded by time-since-last-report so the operator sees the
   fusion freshness without consulting the substrate. */
.track-marker {
  width: 1.2857rem; height: 1.2857rem;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  transform: rotate(45deg);
}
.track-marker > .tm-inner {
  width: 100%; height: 100%;
  border: 0.1429rem solid currentColor;
  display: flex; align-items: center; justify-content: center;
}
.track-marker > .tm-label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 0.2857rem) rotate(-45deg);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  white-space: nowrap;
  pointer-events: none;
}
.track-marker.hostile  { color: var(--crit); }
.track-marker.unknown  { color: var(--warn); }
.track-marker.friendly { color: var(--accent); }
.track-marker.neutral  { color: var(--ok); }
.track-marker.stale { opacity: 0.4; }
.track-marker.stale > .tm-inner { border-style: dashed; }
.track-marker.selected > .tm-inner {
  box-shadow: 0 0 0 0.2143rem var(--accent-faint);
}

/* Measure overlay — drawn on the overlay canvas; this just styles the
   ESC hint that appears in measure mode. */
/* (already defined earlier for context menus) */

/* Quick-report sub-menu — visually similar to the linear context menu */
.ctx-quick { min-width: 22rem; }
.ctx-quick .ctl-tag { color: var(--crit); }
.ctx-quick .ctl-item-icon { color: var(--crit); }

/* Asset markers in distress — pulsing red border for unacked TIC/CONTACT */
.asset-marker.distress > .glyph {
  outline: 0.2143rem solid var(--crit);
  outline-offset: 0.2143rem;
  animation: distressPulse 0.9s ease-in-out infinite;
}
@keyframes distressPulse {
  0%, 100% { outline-color: var(--crit); }
  50% { outline-color: rgba(197, 64, 64, 0.25); }
}

/* Active taskings column in J3 strip — reuses .disp-row pattern */
.tasking-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5714rem;
  align-items: center;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
}
.tasking-row:last-child { border-bottom: none; }
.tasking-row b { color: var(--text); font-weight: 500; }
.tasking-row small {
  display: block;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
  text-transform: uppercase; letter-spacing: 0.0286rem;
}
.tasking-eta {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7857rem; font-weight: 700;
  color: var(--warn);
}
.tasking-eta.now { color: var(--ok); }
.tasking-cancel {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  font-family: var(--font);
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.2143rem 0.5714rem;
  cursor: pointer;
}
.tasking-cancel:hover { border-color: var(--crit); color: var(--crit); }
.tasking-kind {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0571rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid currentColor;
  color: var(--warn);
}
.tasking-kind.rtb { color: var(--warn); }
.tasking-kind.hold { color: var(--accent); }
.tasking-kind.route { color: var(--ok); }

/* J3 three-column grid (sits | dispatches | taskings) */
.t3-j3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: var(--md);
  height: 100%;
}

/* Objectives strip — rendered in J5 */
.obj-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5714rem;
  align-items: start;
  padding: 0.4286rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
  font-size: 0.7857rem;
}
.obj-row:last-child { border-bottom: none; }
.obj-row-content { min-width: 0; }
.obj-row-id {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.0429rem;
}
.obj-row-title {
  margin-top: 0.1429rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.8571rem;
  line-height: 1.3;
}
.obj-row-meta {
  margin-top: 0.1429rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem;
  color: var(--text-4);
}
.obj-row-bar {
  margin-top: 0.4286rem;
  height: 0.2857rem;
  background: var(--border);
}
.obj-row-bar > span { display: block; height: 100%; }
.obj-status {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid currentColor;
}
.obj-status.active { color: var(--ok); }
.obj-status.warn { color: var(--warn); }
.obj-status.risk { color: var(--crit); }
.obj-status.planning { color: var(--text-3); }
.obj-status.complete { color: var(--accent); }

/* J5 four-column grid (trends | decisions | coa | objectives) */
.t3-j5 {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr 1.2fr;
  gap: var(--md);
  height: 100%;
}
.j5-objectives {
  display: flex; flex-direction: column;
  border: 0.0714rem solid var(--border-subtle);
  background: var(--surface-alt);
  padding: 0.5714rem;
  min-height: 0;
}
.j5-objectives-hd {
  font-size: 0.7143rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  color: var(--text-3);
  margin-bottom: 0.4286rem;
  padding-bottom: 0.2857rem;
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.j5-objectives-list {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

/* ═════════════════════════════════════════════════════════════════════
   INFANTRY UNITS — squad markers + personnel drill-down
   ═════════════════════════════════════════════════════════════════════ */

/* Infantry markers — distinguished by the SVG glyph itself (rectangle
   with diagonals = MIL-STD-2525-ish infantry symbology). Color follows
   the normal readiness palette. SOF reuses the same glyph with a tick. */
.asset-marker[data-iconkey="infantry"] .glyph,
.asset-marker[data-iconkey="sof"] .glyph {
  background: var(--surface);
}

/* Personnel rollup chips */
.pers-rollup {
  display: flex; align-items: center; gap: 0.4286rem;
  margin: 0.4286rem 0;
}
.pers-chip {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid currentColor;
}
.pers-chip.ok { color: var(--ok); }
.pers-chip.warn { color: var(--warn); }
.pers-chip.crit { color: var(--crit); }
.pers-spacer { flex: 1; }
.pers-toggle, .pers-override {
  background: none;
  border: 0.0714rem solid var(--border);
  color: var(--text-3);
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.5714rem;
  cursor: pointer;
}
.pers-toggle:hover, .pers-override:hover { border-color: var(--accent); color: var(--accent); }
.pers-toggle.open { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }
.pers-override.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }

.pers-roster {
  display: flex; flex-direction: column;
  border-top: 0.0714rem solid var(--border-subtle);
  margin-top: 0.4286rem;
}
.pers-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.5714rem;
  align-items: start;
  padding: 0.5714rem 0;
  border-bottom: 0.0714rem solid var(--border-subtle);
}
.pers-row:last-child { border-bottom: none; }
.pers-cs {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6786rem; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.0286rem;
  padding-top: 0.1429rem;
}
.pers-meta { min-width: 0; }
.pers-name {
  font-size: 0.8571rem;
  color: var(--text-2);
}
.pers-name b {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem; font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase; letter-spacing: 0.0429rem;
  margin-right: 0.2857rem;
}
.pers-role {
  font-size: 0.7143rem;
  color: var(--text-4);
  text-transform: uppercase; letter-spacing: 0.0286rem;
  margin-top: 0.1429rem;
}
.pers-bio {
  display: flex; flex-wrap: wrap; gap: 0.5714rem;
  margin-top: 0.2857rem;
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.7143rem;
  color: var(--text-2);
}
.pers-bio span b {
  color: var(--text-4);
  font-weight: 500;
  margin-right: 0.1429rem;
}
.pers-bio.redacted {
  font-size: 0.6786rem;
  color: var(--text-4);
  font-style: italic;
  text-transform: uppercase; letter-spacing: 0.0286rem;
  margin-top: 0.4286rem;
  padding-top: 0.2143rem;
  border-top: 0.0714rem dashed var(--border-strong);
}
.pers-status {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.6429rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.0429rem;
  padding: 0.1429rem 0.4286rem;
  border: 0.0714rem solid currentColor;
  align-self: start;
}
.pers-status.ok   { color: var(--ok); }
.pers-status.warn { color: var(--warn); }
.pers-status.crit { color: var(--crit); }

.pers-policy {
  margin: 0.5714rem 0 0;
  font-size: 0.6786rem;
  color: var(--text-4);
  line-height: 1.45;
  padding-top: 0.4286rem;
  border-top: 0.0714rem solid var(--border-subtle);
}

/* ───────────────────── Responsive ─────────────────────
   Collapse priority (least to most important): left roster rail, then map,
   then the asset-detail panel. The detail panel stays visible down to phone
   widths. Because the layout is rem-scaled, all three columns already shrink
   with the viewport, so they fit together far longer than fixed px would. */

@media (max-width: 1340px) {
  :root { --rail-w: 17.1429rem; --detail-w: 24.2857rem; }
}

/* Keep the top chrome within the window on laptop displays before any
   workspace column collapses. The pinned brand + right-hand controls always
   stay visible; the lowest-value identity and metric adornments give way
   first, then the facility text, so nothing on the right is ever clipped. */
@media (max-width: 1400px) {
  .facility-badge .fb-type { display: none; }
  .health-cell { padding: 0 var(--sm); }
  .sysbar-health { padding: 0 var(--md); }
}

@media (max-width: 1120px) {
  .brand-sep { display: none; }
  .facility-badge .fb-name { display: none; }
  .sysbar-identity { gap: var(--sm); padding: 0 var(--md); }
}

/* Narrow laptops / tablets: drop the LEFT roster rail first and keep map +
   detail side by side. Assets remain selectable by clicking map markers. */
@media (max-width: 960px) {
  .workspace { grid-template-columns: minmax(0, 1fr) var(--detail-w); }
  .rail-left { display: none; }
}

/* Phones / very narrow or heavily-scaled viewports (incl. docked DevTools):
   stack the detail panel UNDER the map instead of hiding it. The detail panel
   is the priority surface, so it must never disappear; it scrolls internally. */
@media (max-width: 680px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .rail-left { display: none; }
  .map-stage { border-right: none; }
  .detail {
    height: auto;
    max-height: 42vh;
    border-top: 1px solid var(--border);
  }
  .sysbar-identity { flex-wrap: wrap; height: auto; padding: 0.5714rem var(--md); gap: var(--sm); }
  .rail { margin-left: 0; }
  .map-overlay-tl { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 0 HONESTY PASS (SAS-1653)
   Liveness strip, degraded fallback, replay freeze, per-datum provenance tags.
   Every visible source/provenance cue is driven by the liveness state machine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── Liveness strip (full-width, promoted from the buried pill) ───── */
.liveness-strip {
  display: flex;
  align-items: center;
  gap: var(--md);
  min-height: 1.8571rem;
  padding: 0.2857rem var(--lg);
  background: var(--surface-alt);
  border-bottom: 0.0714rem solid var(--border);
  border-left: 0.2143rem solid var(--ok);
  font-size: 0.7143rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.liveness-strip .lv-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
}
.liveness-strip .lv-field { display: inline-flex; align-items: baseline; gap: 0.4286rem; min-width: 0; }
.liveness-strip .lv-k {
  color: var(--text-4); font-weight: 700; text-transform: uppercase;
  font-size: 0.6429rem; letter-spacing: 0.08em; flex-shrink: 0;
}
.liveness-strip .lv-v { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.liveness-strip .lv-v[title] { cursor: help; }
.lv-policy {
  margin-left: auto; flex-shrink: 0;
  color: var(--text-3); font-weight: 700; text-transform: uppercase;
  font-size: 0.6429rem; letter-spacing: 0.06em;
  border: 0.0714rem solid var(--border-strong); padding: 0.1429rem 0.5rem; border-radius: 0.1429rem;
  cursor: help;
}
.lv-return {
  flex-shrink: 0; margin-left: var(--sm);
  background: var(--accent-faint); color: var(--accent);
  border: 0.0714rem solid var(--accent); border-radius: 0.1429rem;
  font: inherit; font-weight: 700; font-size: 0.6429rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1429rem 0.5714rem; cursor: pointer;
}
.lv-return:hover { background: var(--accent); color: #04181d; }

/* Real-time tempo toggle (SAS-1658 Phase 3): a compact segmented control in the
   liveness strip. The sim owns the clock; clicking a segment sends cmd.speed. */
.lv-tempo .tempo-seg {
  display: inline-flex; border: 0.0714rem solid var(--line); border-radius: 0.1429rem; overflow: hidden;
}
.lv-tempo .tempo-btn {
  font: inherit; font-weight: 600; font-size: 0.6429rem; letter-spacing: 0.04em;
  padding: 0.1429rem 0.5rem; cursor: pointer;
  background: transparent; color: var(--muted); border: none;
}
.lv-tempo .tempo-btn + .tempo-btn { border-left: 0.0714rem solid var(--line); }
.lv-tempo .tempo-btn.active { background: var(--accent-faint); color: var(--accent); }
.lv-tempo .tempo-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* State palettes: SIM green, LOCAL/DEGRADED amber, REPLAY blue. */
.liveness-strip[data-state="sim"]      { border-left-color: var(--ok); }
.liveness-strip[data-state="sim"] .lv-dot { background: var(--ok); box-shadow: 0 0 0.4286rem rgba(111,174,80,0.8); }
.liveness-strip[data-state="sim"] #lvSource { color: var(--ok); }

.liveness-strip[data-state="local"],
.liveness-strip[data-state="degraded"] { border-left-color: var(--warn); background: var(--warn-bg); }
.liveness-strip[data-state="local"] .lv-dot,
.liveness-strip[data-state="degraded"] .lv-dot { background: var(--warn); animation: lvPulse 1.1s ease-in-out infinite; }
.liveness-strip[data-state="local"] #lvSource,
.liveness-strip[data-state="degraded"] #lvSource { color: var(--warn); }

.liveness-strip[data-state="replay"]   { border-left-color: var(--accent); background: var(--accent-faint); }
.liveness-strip[data-state="replay"] .lv-dot { background: var(--accent); animation: lvPulse 1.2s ease-in-out infinite; }
.liveness-strip[data-state="replay"] #lvSource,
.liveness-strip[data-state="replay"] #lvAsof { color: var(--accent); }

/* Stale-but-connected feed: amber STREAM age even while SIM. */
.liveness-strip.stream-stale .lv-field-stream .lv-v { color: var(--warn); font-weight: 700; }

@keyframes lvPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ───── Degraded banner + amber map edge ───── */
.map-degraded-banner {
  position: absolute; top: 0.8571rem; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; align-items: center; gap: 0.7143rem;
  max-width: calc(100% - 1.7143rem);
  padding: 0.5rem 0.8571rem;
  background: rgba(217,162,51,0.18); border: 0.0714rem solid var(--warn);
  color: #f1dca6; font-size: 0.7143rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 0.1429rem; box-shadow: 0 0.2857rem 1.1429rem rgba(0,0,0,0.55);
}
.map-degraded-banner .mdb-icon { color: var(--warn); font-size: 0.9286rem; flex-shrink: 0; }
.map-degraded-banner .mdb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-degraded-banner .mdb-retry {
  flex-shrink: 0; background: var(--warn); color: #1c1408; border: none; border-radius: 0.1429rem;
  font: inherit; font-weight: 700; text-transform: uppercase; font-size: 0.6429rem; letter-spacing: 0.06em;
  padding: 0.2143rem 0.5714rem; cursor: pointer;
}
.map-degraded-banner .mdb-retry:hover { background: #ecc169; }
.map-stage.degraded::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  border: 0.1429rem solid var(--warn); box-shadow: inset 0 0 3.5714rem rgba(217,162,51,0.16);
}

/* ───── Replay watermark + map dim (markers are frozen by JS) ───── */
.map-replay-watermark {
  position: absolute; top: 0.8571rem; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; align-items: center; gap: 0.7143rem;
  padding: 0.4286rem 0.8571rem;
  background: rgba(74,159,176,0.18); border: 0.0714rem solid var(--accent);
  color: #c4e7ef; font-size: 0.7143rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 0.1429rem; box-shadow: 0 0.2857rem 1.1429rem rgba(0,0,0,0.55);
}
.map-replay-watermark .mrw-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.map-replay-watermark .mrw-note { color: #8fb9c2; font-weight: 500; }
.map-stage.replay #map,
.map-stage.replay #overlayCanvas { opacity: 0.5; transition: opacity 0.2s ease; }
.map-stage.replay::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  border: 0.1429rem solid var(--accent); box-shadow: inset 0 0 3.5714rem rgba(74,159,176,0.12);
}

/* ───── Per-datum provenance tags (pure function of liveness state) ───── */
.prov-tag {
  display: inline-block; font-size: 0.5714rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.0357rem 0.2857rem; border-radius: 0.1429rem;
  border: 0.0714rem solid var(--border-strong); vertical-align: middle;
  white-space: nowrap; margin-left: 0.2857rem;
}
.prov-runtime { color: var(--ok); border-color: rgba(111,174,80,0.5); background: var(--ok-bg); }
.prov-local   { color: var(--warn); border-color: rgba(217,162,51,0.55); background: var(--warn-bg); }
.prov-modeled { color: var(--accent); border-color: rgba(74,159,176,0.5); background: var(--accent-faint); }
.prov-synth   { color: var(--text-3); border-color: var(--border-strong); background: var(--surface-alt); }
.prov-sim     { color: var(--text-3); border-color: var(--border-strong); background: var(--surface-alt); }

/* ───── Command-blocking when orders cannot reach the runtime (LOCAL/DEGRADED) ───── */
body.cmd-blocked .auth-confirm,
body.cmd-blocked .j4-path-action,
body.cmd-blocked .j5-coa-action,
body.cmd-blocked .sit-action,
body.cmd-blocked [data-cancel-asset],
body.cmd-blocked .pers-override,
body.cmd-blocked .crc-item.blocked,
body.cmd-blocked .ctl-item.blocked {
  opacity: 0.4; pointer-events: none; cursor: not-allowed;
  filter: grayscale(0.4);
}
.auth-confirm:disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; filter: grayscale(0.4); }
.auth-blocked-note {
  margin: 0.5714rem 0 0; padding: 0.4286rem 0.5714rem;
  background: var(--warn-bg); border: 0.0714rem solid var(--warn);
  color: #f1dca6; font-size: 0.6786rem; font-weight: 600; border-radius: 0.1429rem;
}

/* ───── Responsive: SOURCE and AS-OF must survive at every width ───── */
@media (max-width: 1100px) {
  .liveness-strip .lv-field-stream { display: none; }
  .lv-policy { display: none; }
}
@media (max-width: 760px) {
  .liveness-strip { gap: var(--sm); }
  .map-degraded-banner .mdb-text,
  .map-replay-watermark .mrw-note { white-space: normal; }
}

/* Chrome pill honest states (mirrors the liveness strip). */
.substrate-pill.degraded { border-color: var(--warn); }
.substrate-pill.degraded .sp-mode { color: var(--warn); }
.substrate-pill.degraded .sp-dot { background: var(--warn); animation: lvPulse 1.1s ease-in-out infinite; }

/* ───── Demonstration-model honesty tags (J4 / J5 / MX unmodeled lanes) ───── */
.demo-model-banner {
  margin: 0 0 0.5714rem; padding: 0.4286rem 0.5714rem;
  background: var(--accent-faint); border: 0.0714rem solid var(--accent);
  border-left-width: 0.2143rem;
  color: #bfe6ef; font-size: 0.6786rem; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.01em; border-radius: 0.1429rem;
}
.demo-inject-tag {
  display: inline-block; margin-right: 0.4286rem;
  color: var(--warn); border: 0.0714rem solid var(--warn);
  font-size: 0.5714rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.0714rem 0.3571rem; border-radius: 0.1429rem; vertical-align: middle; cursor: help;
}

/* The display:flex rules on the map overlays must not defeat the [hidden]
   attribute toggle (class+[hidden] outranks the bare class rule). */
.map-replay-watermark[hidden],
.map-degraded-banner[hidden] { display: none; }

/* ───── EXERCISE liveness state (scripted rehearsal; honest, commands enabled) ───── */
:root { --exercise: #a07cc5; }
.liveness-strip[data-state="exercise"] { border-left-color: var(--exercise); background: rgba(160,124,197,0.10); }
.liveness-strip[data-state="exercise"] .lv-dot { background: var(--exercise); box-shadow: 0 0 0.4286rem rgba(160,124,197,0.85); animation: lvPulse 1.6s ease-in-out infinite; }
.liveness-strip[data-state="exercise"] #lvSource { color: var(--exercise); }
.substrate-pill.exercise { border-color: var(--exercise); }
.substrate-pill.exercise .sp-mode { color: var(--exercise); }
.substrate-pill.exercise .sp-dot { background: var(--exercise); }
.prov-exercise { color: var(--exercise); border-color: rgba(160,124,197,0.55); background: rgba(160,124,197,0.10); }

/* Op-phase rail chips (read-only indicators in EXERCISE) */
.rail.op-phases button { cursor: default; }
.rail.op-phases button.active { color: var(--exercise); border-color: var(--exercise); }

/* ───── Authority gate: a scripted exercise halts the op until the operator authorises ───── */
.op-gate {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,9,0.55);
}
.op-gate[hidden] { display: none; }
.op-gate .og-card {
  max-width: 30rem; margin: 0 1rem;
  background: var(--surface-elev); border: 0.0714rem solid var(--exercise); border-left-width: 0.2857rem;
  border-radius: 0.2143rem; padding: 1rem 1.1429rem; box-shadow: 0 0.5714rem 2.2857rem rgba(0,0,0,0.6);
}
.op-gate .og-tag { color: var(--exercise); font-size: 0.6429rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.op-gate .og-title { color: var(--text); font-size: 1.1429rem; font-weight: 600; margin: 0.4286rem 0; letter-spacing: 0.02em; }
.op-gate .og-detail { color: var(--text-2); font-size: 0.7857rem; line-height: 1.4; }
.op-gate .og-actions { margin: 0.8571rem 0 0.5714rem; }
.op-gate .og-authorise {
  background: var(--exercise); color: #120a1c; border: none; border-radius: 0.1429rem;
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.7857rem; padding: 0.5rem 1rem; cursor: pointer;
}
.op-gate .og-authorise:hover { background: #b79ad8; }
.op-gate .og-note { color: var(--text-3); font-size: 0.6429rem; line-height: 1.35; }
.map-stage.gate-held::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 7;
  border: 0.1429rem solid var(--exercise); box-shadow: inset 0 0 3.5714rem rgba(160,124,197,0.18);
}

/* ───── Scenario switcher (chrome) ───── */
.scenario-select {
  background: var(--surface-alt); color: var(--text-2);
  border: 0.0714rem solid var(--border-strong); border-radius: 0.1429rem;
  font: inherit; font-size: 0.6786rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.2143rem 0.4286rem; cursor: pointer; max-width: 13rem;
}
.scenario-select:hover { border-color: var(--accent); color: var(--text); }

/* ───── Map-layers control (basemap switcher) ───── */
.basemap-row { display: flex; gap: 0.2857rem; padding: 0 var(--md) 0.4286rem; flex-wrap: wrap; }
.bm-btn {
  flex: 1 1 auto; background: var(--surface-alt); color: var(--text-3);
  border: 0.0714rem solid var(--border-strong); border-radius: 0.1429rem;
  font: inherit; font-size: 0.6429rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.2143rem 0.2857rem; cursor: pointer;
}
.bm-btn:hover { border-color: var(--accent); color: var(--text-2); }
.bm-btn.active { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); }

/* ───── Decision gate: information comparison + counterfactual choices ───── */
.op-gate .og-card { max-width: 36rem; }
.op-gate .og-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5714rem; margin: 0.7143rem 0; }
.op-gate .og-info[hidden] { display: none; }
.op-gate .og-info-col { border: 0.0714rem solid var(--border-strong); border-radius: 0.1429rem; padding: 0.4286rem 0.5rem; }
.op-gate .og-info-col.gap { border-color: rgba(197,64,64,0.5); background: var(--crit-bg); }
.op-gate .og-info-col.bishop { border-color: rgba(160,124,197,0.55); background: rgba(160,124,197,0.10); }
.op-gate .ogi-h { font-size: 0.5714rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2857rem; }
.op-gate .og-info-col.gap .ogi-h { color: var(--crit); }
.op-gate .og-info-col.bishop .ogi-h { color: var(--exercise); }
.op-gate .ogi-row { font-size: 0.6786rem; color: var(--text-2); line-height: 1.35; padding: 0.0714rem 0; }
.op-gate .og-actions { display: flex; flex-direction: column; gap: 0.4286rem; }
.op-gate .og-choice { text-align: left; background: var(--surface-alt); border: 0.0714rem solid var(--border-strong); border-radius: 0.1429rem; padding: 0.5rem 0.5714rem; cursor: pointer; font: inherit; color: var(--text); }
.op-gate .og-choice b { display: block; font-size: 0.75rem; font-weight: 600; }
.op-gate .og-choice small { display: block; color: var(--text-3); font-size: 0.6429rem; margin-top: 0.1429rem; }
.op-gate .og-choice.historical:hover { border-color: var(--crit); }
.op-gate .og-choice.bishop { border-color: rgba(160,124,197,0.5); }
.op-gate .og-choice.bishop:hover { border-color: var(--exercise); background: rgba(160,124,197,0.12); }