/* views-ssa.css — SSA venue admin + spatial monitor */
.ssa-page { padding: 16px 20px; max-width: 1500px; margin: 0 auto; }
.ssa-title { margin: 0 0 4px; font-size: 22px; }
.ssa-sub { color: var(--text-2); margin: 0 0 16px; }
.ssa-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ssa-head h1 { font-size: 18px; margin: 0; flex: 1; }
.ssa-monitor-link { margin-left: auto; }

.ssa-venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ssa-venue-links { display: flex; gap: 12px; margin: 8px 0 4px; }
.ssa-venue-meta { color: var(--text-2); font-size: 12px; }
.ssa-create-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ssa-create-row input, .ssa-create-row select { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }

.ssa-cols { display: grid; grid-template-columns: minmax(480px, 2fr) minmax(320px, 1fr); gap: 16px; }
.ssa-canvas-wrap { position: relative; }
.ssa-canvas-wrap canvas, .ssa-spatial-canvas { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--mon-1); display: block; cursor: crosshair; }
.ssa-canvas-hint { color: var(--text-2); font-size: 12px; margin-top: 6px; min-height: 16px; }

.ssa-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ssa-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ssa-list-row { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: var(--bg-2); font-size: 13px; }
.ssa-list-row span { flex: 1; }
.ssa-x { background: none; border: none; color: var(--text-2); cursor: pointer; }
.ssa-x:hover { color: var(--danger); }
/* Compact secondary button for list-row actions (e.g. node "Edit") — a real
   pill in the app's language instead of default browser chrome. */
.ssa-row-btn {
  font: inherit; font-size: 12px; line-height: 1; white-space: nowrap;
  padding: 5px 12px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--bg-surface); color: var(--text-1);
  border: 1px solid var(--border);
  transition: background .12s ease, border-color .12s ease;
}
.ssa-row-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
}
.ssa-row-btn:active { background: color-mix(in srgb, var(--accent) 22%, var(--bg-surface)); }
.ssa-row-btn.is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* "+ Add channels" scope picker (Locate watch list) */
.ssa-add-picker { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.ssa-add-picker > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; user-select: none; padding: 2px 0; }
.ssa-add-picker > summary::-webkit-details-marker { display: none; }
.ssa-add-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.ssa-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ssa-chip {
  font: inherit; font-size: 11.5px; line-height: 1; padding: 4px 10px; cursor: pointer;
  border-radius: 99px; background: var(--bg-surface); color: var(--text-2);
  border: 1px solid var(--border); transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ssa-chip:hover { color: var(--text-1); border-color: var(--accent); }
.ssa-chip.is-on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ssa-add-section { display: flex; flex-direction: column; gap: 4px; }
.ssa-add-group { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-2); }
.ssa-add-group > summary { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; list-style: none; font-size: 13px; }
.ssa-add-group > summary::-webkit-details-marker { display: none; }
.ssa-add-group-name { flex: 1; min-width: 0; }
.ssa-add-group-acts { display: inline-flex; gap: 6px; flex: none; }
.ssa-add-group .ssa-list { padding: 0 8px 8px; }

/* Channels tab — full channel-selection surface. The sub-header bleeds full
   width (its own negative margin); the body is a readable, scrollable column. */
.ssa-channels-body { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.ssa-ch-search {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border);
}
.ssa-ch-search:focus { outline: none; border-color: var(--accent); }
.ssa-add-groups { display: flex; flex-direction: column; gap: 10px; }
.ssa-groupby { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ssa-groupby-label { font-size: 12px; color: var(--text-2); }
/* The ✕ sits beside the Edit pill — give it a matching hit area + hover so the
   pair reads as a tidy action group. */
.ssa-list-row .ssa-x { padding: 4px 7px; border-radius: var(--r-sm); transition: background .12s ease, color .12s ease; }
.ssa-list-row .ssa-x:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ssa-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: 14px 0 6px; display: flex; gap: 8px; align-items: center; }
.ssa-cal-status { font-size: 13px; margin-bottom: 8px; }
.ssa-cal-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.ssa-cal-form input { min-width: 0; }
.ssa-cal-grid-label, .ssa-cal-form > button { grid-column: 1 / -1; }
.ssa-ant-table, .ssa-sched { display: flex; flex-direction: column; gap: 4px; }
.ssa-ant-row, .ssa-sched-row { display: flex; gap: 6px; align-items: center; }
.ssa-ant-row input[type="number"], .ssa-sched-row input[type="number"] { width: 64px; }
.ssa-dial { width: 120px; }
.ssa-unit-hint { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ssa-unit-hint:empty { display: none; }
.ssa-ack-chip { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.ssa-ack-chip.is-pending { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }

/* monitor */
.ssa-monitor-cols { grid-template-columns: minmax(480px, 2fr) minmax(330px, 1fr); }
.ssa-picker-row { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.ssa-underlay-controls { display: flex; gap: 16px; align-items: center; margin-top: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.ssa-underlay-controls label { display: flex; gap: 6px; align-items: center; }
.ssa-underlay-controls select { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.ssa-underlay-controls input[type="range"] { width: 140px; accent-color: var(--accent); }
.ssa-heat-opacity-val { min-width: 36px; font-variant-numeric: tabular-nums; }
.ssa-resync-result { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.ssa-resync-result ul { margin: 6px 0 0; padding-left: 18px; }
.ssa-health-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ssa-health-cell { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 6px 10px; min-width: 150px; font-size: 12px; }
.ssa-health-cell.is-green { border-left-color: var(--ok); }
.ssa-health-cell.is-amber { border-left-color: var(--warn); }
.ssa-health-cell.is-red   { border-left-color: var(--danger); }
.ssa-health-bars { display: flex; gap: 2px; align-items: flex-end; height: 18px; margin: 4px 0; }
.ssa-sweep-bar { width: 9px; background: var(--accent); height: var(--v, 0%); border-radius: 1px; }
.ssa-health-meta { color: var(--text-2); }
.ssa-clock-chip { font-family: 'IBM Plex Mono', monospace; }
.ssa-det-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
.ssa-det-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ssa-det-head { display: flex; justify-content: space-between; font-weight: 600; }
.ssa-det-freq { font-family: 'IBM Plex Mono', monospace; }
.ssa-det-zone { margin-top: 2px; }
.ssa-det-nodes, .ssa-det-seen { color: var(--text-2); font-size: 12px; margin-top: 2px; }
.ssa-det-comp { display: flex; gap: 4px; height: 6px; margin-top: 6px; }
.ssa-bar { flex: 1; background: var(--bg-2); border-radius: 3px; position: relative; overflow: hidden; }
.ssa-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: var(--accent); }
.ssa-det-action { margin-top: 6px; font-size: 13px; color: var(--accent); }
.ssa-replay-stub { margin-top: 10px; }
.ssa-replay-chip { font-size: 12px; color: var(--text-2); border: 1px dashed var(--border); border-radius: 99px; padding: 4px 12px; }

/* bearing-rays toggle (sits in the underlay-controls row) */
.ssa-rays-toggle { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ssa-rays-toggle input { accent-color: var(--accent); }

/* unfoldable reasoning table (per detection card; collapsed by default) */
.ssa-reasoning { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.ssa-reasoning-summary { font-size: 12px; color: var(--text-2); cursor: pointer; list-style: none; user-select: none; }
.ssa-reasoning-summary::-webkit-details-marker { display: none; }
.ssa-reasoning-summary::before { content: '▸ '; color: var(--text-2); }
.ssa-reasoning[open] .ssa-reasoning-summary::before { content: '▾ '; }
.ssa-reasoning-body { margin-top: 6px; }
.ssa-reasoning-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.ssa-reasoning-table th { text-align: left; color: var(--text-2); font-weight: 500; padding: 2px 6px 2px 0; border-bottom: 1px solid var(--border); }
.ssa-reasoning-table td { padding: 3px 6px 3px 0; color: var(--text-1); }
.ssa-reasoning-node { font-family: 'IBM Plex Mono', monospace; }
.ssa-reasoning-row.is-excluded td { color: var(--text-2); font-style: italic; }
.ssa-reasoning-combined { margin-top: 6px; font-size: 11px; color: var(--text-2); }
@media (max-width: 980px) { .ssa-cols, .ssa-monitor-cols { grid-template-columns: 1fr; } }

/* ── antenna orientation panel (fan + oblique + fine-tune, spec 2026-06-11) ── */
.ssa-orient-panel { display: flex; flex-direction: column; gap: 8px; }
.ssa-orient-col { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.ssa-fan { background: var(--bg-surface); border-radius: var(--r-sm); }
.ssa-fan-dial { fill: none; stroke: var(--border, rgba(255,255,255,0.18)); stroke-width: 1; }
.ssa-fan-tick { fill: var(--text-2); font-size: 10px; }
.ssa-fan-wedge { stroke-width: 1.1; }
.ssa-fan-wedge.is-trusted { fill: rgba(52,211,153,0.18); stroke: rgba(52,211,153,0.8); stroke-dasharray: none; }
.ssa-fan-wedge.is-planned { fill: rgba(251,191,36,0.12); stroke: rgba(251,191,36,0.72); stroke-dasharray: 5 4; }
.ssa-fan-ghost { stroke: rgba(251,191,36,0.85); stroke-width: 1; stroke-dasharray: 3 3; }
.ssa-oblique { background: var(--bg-surface); border-radius: var(--r-sm); }
.ssa-oblique-ground { stroke: var(--border, rgba(255,255,255,0.25)); stroke-width: 1.2; }
.ssa-oblique-mast { stroke: var(--text-2); stroke-width: 2; }
.ssa-oblique-beam { fill: rgba(52,211,153,0.16); stroke: rgba(52,211,153,0.7); stroke-width: 1; }
.ssa-orient-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ssa-orient-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.ssa-orient-name { min-width: 130px; color: var(--text-1); }
.ssa-orient-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 10px; }
.ssa-orient-badge.is-manual { background: var(--accent-soft); color: var(--accent); }
.ssa-orient-badge.is-measured { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.ssa-orient-badge.is-planned { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.ssa-orient-readout { color: var(--text-2); flex: 1 1 200px; }
.ssa-orient-ctl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ssa-orient-ctl input[type="number"] { width: 80px; }

/* ── orientation drift + coverage analysis surfaces (spec 2026-06-11 §9) ── */
.ssa-coverage-stat { font-size: 11px; color: var(--text-2); margin-left: 8px; }
.ssa-health-drift { margin-top: 4px; font-size: 11px; color: var(--warn); font-weight: 600; }
.ssa-orient-drift { font-size: 11px; color: var(--warn); font-weight: 600; }
.ssa-orient-drift-summary { font-size: 12px; color: var(--warn); font-weight: 600; margin: 2px 0 4px; }

/* ── Spatial 3D view (js/views/spatial-3d.js, #/events/:id/spatial/3d) ──────
   Immersive full-bleed WebGL scene. Header strip + per-node panel float over a
   flex viewport that owns the rest of the viewport height. */
.ssa3d-page { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--mon-1); }
.ssa3d-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
/* Title sizing/flex matches the 2D sub-header's .ssa-head h1 (18px, flex:1) so
   the monitor / 3D / config headers read as one family; the flexed title also
   seats the status badge right after it (consistent badge placement). */
.ssa3d-title { font-size: 18px; font-weight: 600; margin: 0; flex: 1 1 auto; color: var(--text-1, #e6e9f0); }
.ssa3d-spacer { flex: 1 1 auto; }
.ssa3d-detsel { font-size: 12px; padding: 3px 6px; background: var(--bg-raised); color: var(--text-1, #e6e9f0); border: 1px solid var(--border); border-radius: 6px; }
.ssa3d-presets { display: inline-flex; gap: 4px; }
.ssa3d-toggles { display: inline-flex; gap: 12px; align-items: center; }
.ssa3d-toggle { font-size: 12px; color: var(--text-2, #aab2c5); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.ssa3d-nodepanel { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 4px 12px; font-size: 12px; color: var(--text-2, #aab2c5); border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }
.ssa3d-nodepanel-title { font-weight: 600; color: var(--text-1, #e6e9f0); }
.ssa3d-node-toggle { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.ssa3d-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ssa3d-viewport canvas { display: block; width: 100%; height: 100%; }
.ssa3d-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 32px; text-align: center; color: var(--text-2, #aab2c5); }
.ssa3d-fallback p { max-width: 420px; line-height: 1.5; }

/* Reference-point tool (venue field markers) — set on the 2D Spatial floor
   plan. Floats as an overlay over the canvas (top-right card on desktop, bottom
   sheet on phones) instead of stacking below it, so the operator no longer
   scrolls between the pitch and the panel while placing markers. The canvas
   lives in .ssa-spatial-canvas-wrap (position:relative) which anchors it. */
.ssa-spatial-canvas-wrap { position: relative; }
.ssa-refpoints {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.ssa-refpoints-head { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.ssa-refpoints-hint { font-size: 12px; color: var(--text-2); margin-bottom: 10px; min-height: 16px; }
.ssa-refpoints-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ssa-refpoints-row { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-1); font-size: 12px; }
.ssa-refpoints-row.is-set { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ssa-refpoints-arm { flex: 0 0 auto; background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.ssa-refpoints-arm.is-armed { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.ssa-refpoints-status { flex: 1 1 auto; color: var(--text-2); font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-align: right; }
.ssa-refpoints-del { flex: 0 0 auto; background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 13px; line-height: 1; }
.ssa-refpoints-del:hover { color: var(--danger); }
.ssa-refpoints-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.ssa-refpoints-savestatus { font-size: 12px; color: var(--text-2); }
.ssa-refpoints-savestatus.is-dirty { color: var(--warn); }
.ssa-refpoints-savestatus.is-ok { color: var(--ok); }
.ssa-refpoints-savestatus.is-err { color: var(--danger); }
.ssa-spatial-canvas.ssa-canvas-armed { cursor: cell; }
@media (max-width: 560px) {
  .ssa-refpoints-rows { grid-template-columns: 1fr; }
  /* On phones the top-right card would swallow most of the pitch — dock it as a
     bottom sheet capped to part of the canvas height (scrolls within). */
  .ssa-refpoints {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-width: none; max-height: 55%;
    border-radius: 12px;
  }
  /* While a feature is armed the operator must tap the plan to place it, so
     collapse the sheet to just its hint line until the marker lands (setArmed
     clears the flag), restoring the full sheet. */
  .ssa-refpoints.is-armed { max-height: none; }
  .ssa-refpoints.is-armed .ssa-refpoints-head,
  .ssa-refpoints.is-armed .ssa-refpoints-rows,
  .ssa-refpoints.is-armed .ssa-refpoints-actions { display: none; }
  .ssa-refpoints.is-armed .ssa-refpoints-hint { margin-bottom: 0; }
}

/* ── Data-source pill (Live / Simulated) — the clickable sub-header chip + its
   selector popover (DECT-monitor pattern). Replaces the old status Badge. ── */
.ssa-source-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
}
.ssa-source-pill:hover { border-color: color-mix(in srgb, var(--text-2) 45%, transparent); }
.ssa-source-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ssa-source-pill .badge-label { text-transform: uppercase; letter-spacing: .3px; }
.ssa-source-pill .ssp-caret { font-size: 9px; color: var(--text-2); }
.ssa-source-pill.is-open .ssp-caret { transform: rotate(180deg); }
.ssp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-2); }
.ssp-dot-live { background: var(--ok); }
.ssp-dot-warn, .ssp-dot-sim { background: var(--warn); }
.ssp-dot-danger { background: var(--danger); }
.ssp-dot-neutral { background: var(--text-2); }
.ssa-source-pill.ssp-live { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ssa-source-pill.ssp-warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.ssa-source-pill.ssp-warn .badge-label { color: var(--warn); }   /* SIMULATED reads amber */
.ssa-source-pill.ssp-danger { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.ssa-source-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; cursor: default;
  width: 212px; padding: 8px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.ssa-source-cap { font-size: 11px; color: var(--text-2); margin: 0 0 6px 2px; }
.ssa-source-menu .segmented { width: 100%; }
.ssa-source-menu .seg-btn { flex: 1; justify-content: center; }
.ssa-source-menu .seg-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.ssa-source-hint { font-size: 11px; color: var(--text-2); margin-top: 6px; }

/* ── Floating "Map controls" overlay — underlay/heatmap/rays/beam, pinned
   top-LEFT over the canvas (ref-points owns top-right). Collapsible. ── */
.ssa-map-controls {
  position: absolute; top: 12px; left: 12px; z-index: 18;
  width: 212px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  overflow: auto; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.ssa-map-controls-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 12px; background: none; border: none; cursor: pointer;
  color: var(--text-1); font-size: 12px; font-weight: 600;
}
.ssa-mapctl-caret { font-size: 10px; color: var(--text-2); transition: transform .15s; }
.ssa-map-controls.is-collapsed .ssa-mapctl-caret { transform: rotate(-90deg); }
.ssa-map-controls .ssa-underlay-controls {
  flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 0 12px 12px;
}
.ssa-map-controls.is-collapsed .ssa-underlay-controls { display: none; }
.ssa-map-controls .ssa-coverage-stat { margin-left: 0; }

/* ── Node-health strip — compact node cards in a wrapping row UNDER the map. ── */
.ssa-node-strip-wrap { margin-top: 10px; }
.ssa-node-strip-wrap[hidden] { display: none; }
.ssa-node-strip-cap { font-size: 11px; color: var(--text-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.ssa-node-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ssa-node-strip .ssa-health-cell { min-width: 118px; padding: 6px 9px; font-size: 11.5px; }

@media (max-width: 560px) {
  /* Phone: dock the controls overlay as a top sheet spanning the canvas width
     (it starts collapsed via the JS mobile default, so it's just the title bar). */
  .ssa-map-controls {
    top: 8px; left: 8px; right: 8px; width: auto; max-width: none; max-height: 60%;
    border-radius: 12px;
  }
  .ssa-node-strip .ssa-health-cell { flex: 1 1 auto; }
}

/* 3D nav hint — fades out after a few seconds (pan/zoom were undiscoverable). */
.ssa3d-navhint {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; pointer-events: none;
  font-size: 11px; color: var(--text-2, #aab2c5); background: rgba(12,18,28,0.7);
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 6px;
  padding: 4px 8px; opacity: 0; animation: ssa3d-navhint-fade 6s ease forwards;
}
@keyframes ssa3d-navhint-fade {
  0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}

/* Embedded 3D view (in-shell state of the Spatial tab): full-bleed under the
   event header — drop the page padding/max-width so the scene fills the area.
   The .ssa3d-page height is set at runtime (event-spatial fit3d). */
.ssa-event-spatial.is-3d { padding: 0; max-width: none; }
.ssa-event-spatial.is-3d [data-ssa="spatial-panel"] { height: 100%; }

/* Spatial config panel: the stacked cards (Zones / Spatial nodes / watch list)
   share the global .card (no margin), so their borders clashed into each other.
   Space them. Scoped to the event-spatial views so other .card layouts are
   untouched; suppressed in 3D (full-bleed). */
.ssa-event-spatial:not(.is-3d) .card { margin-bottom: 12px; }
.ssa-event-spatial:not(.is-3d) [data-ssa="watch-host"] { margin-top: 4px; }

/* Config form width: cap the stacked cards (Zones / Spatial nodes / Simulation /
   watch list) so their rows stop stretching edge-to-edge on a wide monitor —
   left-aligned under the full-bleed sub-header, which stays full width. Scoped
   to the config sub-view (is-config) so the monitor/3D fill the area as before. */
.ssa-event-spatial.is-config [data-ssa="spatial-panel"] > .card,
.ssa-event-spatial.is-config [data-ssa="watch-host"] { max-width: 880px; }

/* Simulation ("dummy data") — config card affordances. The synthetic-data
   signal in the monitor is the amber SIMULATED sub-header badge plus the
   compact "Stop simulation" button in the underlay-controls row (no banner). */
.ssa-sim-hint { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.ssa-sim-on { font-size: 13px; color: var(--warn); margin-bottom: 8px; }
.ssa-sim-stop { align-self: flex-start; }

/* The 2D monitor (renderSpatialMonitor) builds its OWN .ssa-page.ssa-spatial
   wrapper; nested inside the event-spatial .ssa-page that doubles the padding
   and would inset the full-bleed sub-header differently from the config view
   (which appends straight into the host). Zero the inner wrapper's padding/width
   so the sub-header bleeds to the same edge in all three sub-views. */
.ssa-event-spatial .ssa-spatial { padding: 0; max-width: none; }

/* All three Spatial sub-views share the 3D scene's dark surface (--mon-1) so the
   2D monitor and Configure sit on the same background as the 3D view rather than
   the lighter app shell. .m-body is a flex column, so the mount grows to fill it
   (and the dark shows below short content / the empty detections column). */
.m-spatial-mount { flex: 1 1 auto; min-height: 0; background: var(--mon-1); }

/* The right column is now just the detection cards, replay stub and watch list
   (map controls float over the canvas; the node strip sits under it). Flex gap
   owns the spacing. */
.ssa-monitor-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ssa-monitor-right > .ssa-replay-stub,
.ssa-monitor-right > [data-ssa="watch-host"] { margin-top: 0; }

/* Unified Spatial sub-header (ssa-nav): SSA brand mark + "Spatial Spectrum
   Awareness" + the Monitor·3D·Configure·Reference-points tab switcher. Styled
   as a real chrome bar in the app's monitor language — the same recipe as the
   event sub-header .m-subhdr (var(--bg-1) fill, hairline bottom border, 14px
   title, 20px / 11.5px tab pills) — so the 2D monitor, 3D view and config panel
   all read as one surface. Full-bleeds to the .ssa-page edges (negative margin)
   so it spans wider than the inset cards, like .m-subhdr does. */
.ssa-navbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  min-height: 30px; padding: 5px 20px; margin: -16px -20px 14px;
  background: var(--bg-1); border-bottom: 1px solid var(--border-subtle);
}
.ssa-navbar-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); font-weight: 600; font-size: 14px; letter-spacing: -.2px; }
.ssa-navbar-name { white-space: nowrap; }
.ssa-glyph { color: var(--accent); flex: none; }
.ssa-navbar-right { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ssa-navbar-tabs { flex: none; }
/* Compact tab pills, identical to the event sub-header tabs (.m-subhdr .seg-btn). */
.ssa-navbar .segmented { padding: 0; align-items: center; }
.ssa-navbar .seg-btn { padding: 0 10px; height: 20px; font-size: 11.5px; }
/* Full-bleed 3D page: the bar is the scene's top chrome row — no page padding to
   bleed against, so reset the negative margin (keeps the shared bg + border). */
.ssa3d-page .ssa-navbar { margin: 0; padding: 5px 16px; }

/* ── Barometric elevation: node height (differential-baro sensed vs manual pin) ── */
.ssa-height-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.ssa-height-row input[type="number"] { width: 110px; }
.ssa-height-src {
  font-size: 11px; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: color-mix(in srgb, var(--text-2) 14%, transparent); color: var(--text-2);
}
.ssa-height-src.is-sensed { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ssa-height-src.is-manual { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.ssa-height-src.is-none   { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.ssa-height-row .btn-ghost { background: none; border: 1px solid var(--border); color: var(--text-2); }
.ssa-height-row .btn-ghost:disabled { opacity: 0.45; cursor: default; }
/* node-strip per-node height chip */
.ssa-health-height { margin-top: 3px; font-size: 11px; color: var(--text-2); }
.ssa-health-height.is-sensed { color: var(--accent); }
.ssa-health-height.is-manual { color: var(--text-1); }
.ssa-health-height.is-none   { color: var(--warn); }

/* ── V8 antenna-pattern library + import wizard ─────────────────────────────── */
.pat-library { max-width: 980px; margin: 0 auto; padding: var(--s5) var(--s4); }
.pat-lib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.pat-lib-title { font-size: 20px; font-weight: 600; margin: 0; }
.pat-lib-table { width: 100%; border-collapse: collapse; }
.pat-lib-table .dt-th { text-align: left; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pat-lib-table .dt-td { padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }

.pat-wizard { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s4); align-items: start; }
.pat-drop { border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--text-2); background: var(--bg-2); }
.pat-drop.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.pat-drop-big { color: var(--text-1); font-weight: 500; }
.pat-drop-sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; font-family: var(--font-mono); }
.pat-file-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pat-filename { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pat-fmt { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-1); padding: 5px 8px; }
.pat-polar { display: block; margin: 0 auto 10px; max-width: 230px; background: radial-gradient(120% 120% at 50% 45%, var(--bg-2) 0%, var(--bg-0) 100%); border-radius: var(--r-md); }
.pat-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.pat-meta .pat-k { color: var(--text-faint); }
.pat-meta .pat-v { color: var(--text-1); font-family: var(--font-mono); }
.pat-warn { margin-top: 12px; font-size: 12px; color: var(--warn); background: var(--warn-dim); border: 1px solid rgba(251,191,36,.28); border-radius: var(--r-sm); padding: 8px 10px; }
.pat-name-row { margin-top: 14px; }
.pat-name { width: 100%; }
.pat-footer { display: flex; gap: 10px; justify-content: flex-end; }
.ssa-manage-link { color: var(--accent); font-size: 13px; align-self: center; text-decoration: none; }
.ssa-manage-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .pat-wizard { grid-template-columns: 1fr; } }