/* X1 war room — fused monitor layout. Dark-first; all colors/spacing from
   tokens.css (do NOT redefine :root here). Structure/spacing tracks the approved
   mockup docs/research/roadmap-analysis/2026-06-30-X1-showday-war-room-presence-mockup.html
   (presence/avatar elements are Phase-2 and intentionally NOT styled here). */

.m-warroom-mount { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.wr-warroom { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* ── sticky action line ─────────────────────────────────────────────────────
   Collapses quietly when clear (green), warms on caution, glows on conflict. */
.wr-action { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4);
  font-size: 12.5px; border-bottom: 1px solid var(--border); position: relative; z-index: 5; }
.wr-action .wr-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px;
  color: #fff; padding: 3px 8px; border-radius: var(--r-sm); flex: none; }
/* The SIMULATED label beside a REAL conflict / caution tag (#920 follow-ups, item 7):
   the dashed-amber ring of the simulated banner, next to the real colour. */
.wr-action .wr-simtag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px;
  color: var(--warn); padding: 2px 7px; border-radius: var(--r-sm); border: 1.5px dashed var(--warn); flex: none; }
.wr-action .wr-simtag[hidden] { display: none; }
.wr-action .wr-atext { color: var(--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-action .wr-atext b { color: #fff; font-weight: 600; }
.wr-action .wr-fix { margin-left: auto; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  padding: 5px 12px; border-radius: var(--r-sm); flex: none; cursor: pointer; }
.wr-action .wr-fix:hover { background: rgba(255,255,255,.18); }

.wr-action.is-clear { background: rgba(52,211,153,.06); color: var(--text-2); padding-top: 5px; padding-bottom: 5px; }
.wr-action.is-clear .wr-tag { background: var(--ok-dim); color: var(--live); }

.wr-action.is-caution { color: var(--text-1);
  background: linear-gradient(90deg, rgba(251,191,36,.14), transparent 60%);
  box-shadow: inset 3px 0 0 var(--warn); }
.wr-action.is-caution .wr-tag { background: var(--warn); color: #1a1400; }

/* Unmeasured: clearance unknown (recorded spectrum missing from storage, or
   nothing recorded). Amber like caution but HOLLOW — a ring tag and a hatched
   wash, matching Channel Health's unmeasured triage dot: a gap in knowledge,
   not a known conflict, and never the calm READY rule. */
.wr-action.is-unmeasured { color: var(--text-1);
  background: repeating-linear-gradient(135deg, rgba(251,191,36,.08) 0 8px, transparent 8px 16px);
  box-shadow: inset 3px 0 0 var(--warn); }
.wr-action.is-unmeasured .wr-tag { background: transparent; color: var(--warn);
  box-shadow: inset 0 0 0 1.5px var(--warn); }

/* Not measured, no conflict detected (PR 912 round 5b, the owner's decision):
   "Not measured / no carriers on air" or "No IM conflict among carriers on air /
   not measured" (the IM check sees only carriers on air, never the plan).
   NEUTRAL: grey rule and a hollow grey tag. */
.wr-action.is-no-carriers, .wr-action.is-on-air-checked { color: var(--text-2); background: var(--bg-surface);
  box-shadow: inset 3px 0 0 var(--text-muted); }
.wr-action.is-no-carriers .wr-tag, .wr-action.is-on-air-checked .wr-tag { background: transparent; color: var(--text-2);
  box-shadow: inset 0 0 0 1.5px var(--text-muted); }

/* No board yet (LOADING), the Channel Health cell failed to load
   (UNAVAILABLE), or an empty plan (NO CHANNELS), PR 912 round 5a. NEUTRAL like
   the not-measured levels: never the READY rule of a measured clear. */
.wr-action.is-loading, .wr-action.is-empty, .wr-action.is-unavailable { color: var(--text-2);
  background: var(--bg-surface); box-shadow: inset 3px 0 0 var(--text-muted); }
.wr-action.is-loading .wr-tag, .wr-action.is-empty .wr-tag, .wr-action.is-unavailable .wr-tag {
  background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--text-muted); }

/* A simulated board (SIMULATED, #912 leftovers e): an amber rule and a hollow
   amber tag — labelled hypothetical, never READY, never a real CONFLICT. */
.wr-action.is-simulated { color: var(--text-2); background: var(--bg-surface); box-shadow: inset 3px 0 0 var(--warn); }
.wr-action.is-simulated .wr-tag { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }

/* READY over partial data ("Ready on measured data, N recorded chunks
   unavailable"): the calm rule, with a grey edge marking it incomplete. */
.wr-action.is-clear.is-incomplete { box-shadow: inset 3px 0 0 var(--text-muted); }

.wr-action.is-conflict { color: #ffd9d9;
  background: linear-gradient(90deg, rgba(248,113,113,.16), rgba(248,113,113,.04) 60%, transparent);
  animation: wr-actglow 3.2s ease-in-out infinite; }
.wr-action.is-conflict .wr-tag { background: var(--danger-strong); }
@keyframes wr-actglow {
  0%, 100% { box-shadow: inset 3px 0 0 var(--danger); }
  50% { box-shadow: inset 3px 0 0 var(--danger), 0 0 22px -6px rgba(248,113,113,.5); }
}

/* ── grid — desk profile: mockup's 2-col / 3-row areas ──────────────────────
   waterfall spans the tall left column; verdicts + dect stack on the right;
   sensors + spatial share the bottom row. Hairline gaps via a subtle bg + 1px
   gutters so cell edges read as seams, not borders. */
.wr-grid { flex: 1; min-height: 0; display: grid; gap: 1px; background: var(--border-subtle); padding: 1px;
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "waterfall verdicts"
    "waterfall dect"
    "sensors   spatial"; }

.wr-grid .c-waterfall { grid-area: waterfall; }
.wr-grid .c-verdicts  { grid-area: verdicts; }
.wr-grid .c-dect      { grid-area: dect; }
.wr-grid .c-sensors   { grid-area: sensors; }
.wr-grid .c-spatial   { grid-area: spatial; }

/* ── cell ───────────────────────────────────────────────────────────────── */
.wr-grid .cell { background: var(--bg-card); display: flex; flex-direction: column;
  min-height: 0; min-width: 0; position: relative; overflow: hidden; }

.cell-hd { display: flex; align-items: center; gap: var(--s2); height: 34px; min-height: 34px;
  padding: 0 var(--s3); border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-card)); }
.cell-hd .cell-ttl { font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.cell-hd .cell-sub { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); }
.cell-hd .cell-grow { flex: 1; }
.cell-hd .cell-exp { width: 22px; height: 22px; border-radius: var(--r-sm); background: transparent;
  border: 1px solid transparent; color: var(--text-muted); display: flex; align-items: center;
  justify-content: center; font-size: 12px; cursor: pointer; }
.cell-hd .cell-exp:hover { background: var(--bg-raised); border-color: var(--border); color: var(--text-1); }

.cell-bd { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.wr-empty { display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-faint); font-size: 12px; text-align: center; padding: var(--s3); }

/* Embedded panels fill their cell body (own scroll, no page overflow). The real
   live chart + detections are re-parented in as .m-livechrome. */
.cell-bd > .m-livechrome,
.cell-bd > .dectmon,
.cell-bd > .ssa-page,
.cell-bd > .coord-view,
.cell-bd > .pi-telem-view {
  position: absolute; inset: 0; overflow: auto; margin: 0; height: auto; max-height: none; }

/* ── compact: hide each embedded panel's page chrome, keep the core content ──
   Selectors verified against the real view sources so the fused cell shows only
   the essence (chart / heatmap / canvas / triage / charts). */

/* DECT (js/views/dect-monitor.js): keep the .metrics strip (lives inside
   .topbar) + the .heatmap-panel + .systems-panel; hide the view-toggle,
   status ribbon, network tree and replay bar. We can't hide the whole .topbar
   (it wraps .metrics), so we hide only its non-metric children. */
.dectmon.compact .status-panel,
.dectmon.compact .tree-panel,
.dectmon.compact .replaybar { display: none; }
.dectmon.compact .topbar > .topbar-meta > :not(.metrics) { display: none; }
.dectmon.compact .topbar { padding-top: var(--s2); padding-bottom: var(--s2); }

/* The compact DECT panel keeps its standalone 3-column grid (rail | heatmap |
   spotter), but the fused cell is short AND narrow, so the columns overflow and
   the "All networks" overview clips at the cell's lower edge. Collapse to a
   single column and let .layout be the ONE scroll owner: the overview + device-
   health panels stack and scroll within the cell — fully visible, never
   clipped, never page-scrolling. (.dectmon.compact is war-room-only.) */
.dectmon.compact .layout {
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 8px;
}
.dectmon.compact .heatmap-panel,
.dectmon.compact .systems-panel { overflow: visible; }
.dectmon.compact .netoverview { max-height: none; overflow: visible; }

/* Spatial (js/views/spatial.js + js/ssa/ssa-nav.js): keep .ssa-monitor-left
   (canvas) + node strip; hide the SSA sub-navbar, the right sidebar and the
   canvas toolbar row (underlay / heatmap / layer toggles / zoom). */
.ssa-compact { padding: 0; max-width: none; }
.ssa-compact .ssa-navbar,
.ssa-compact .ssa-monitor-right,
.ssa-compact .ssa-canvas-toolbar,
.ssa-compact .ssa-underlay-controls { display: none; }

/* Channel Health (js/views/channel-health.js): keep .coord-triage +
   .coord-action + .coord-attn; hide the settings/interchange buttons, the full
   request tree, diagnosis and provenance cards. */
.coord-compact .coord-settings-btn,
.coord-compact .coord-interchange-btn,
.coord-compact .coord-tree,
.coord-compact .coord-diagnosis,
.coord-compact .coord-provenance { display: none; }

/* Pi telemetry (js/views/pi-telemetry.js): keep .pi-telem-charts; hide the
   header, channel picker, metric selector, range controls and status line. */
.pi-telem-compact .pi-telem-hdr,
.pi-telem-compact .pi-telem-picker,
.pi-telem-compact .pi-telem-metrics,
.pi-telem-compact .pi-telem-range,
.pi-telem-compact .pi-telem-status { display: none; }

/* ── single-column fallback for narrow viewports (mobile profile ships later) */
@media (max-width: 820px) {
  .wr-grid { grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1.4fr) repeat(4, minmax(0,1fr));
    grid-template-areas: "waterfall" "verdicts" "dect" "spatial" "sensors"; }
}

/* ── Tablet gap (821–1099px; iPad portrait 834 / landscape 1024) ──────────────
   Between the 820px single-column fallback and ~1100px the 2-column wr-grid's
   right cells are 320–450px wide. The embedded Channel Health plan-health card
   (gauge 176px + text column) squeezes its text column to ~110px — every word
   wraps onto its own line. Stack the card (gauge above text) exactly like the
   ≤760px rule in views-coordination.css. Scoped to .wr-grid so the standalone
   Channel Health tab (full width, renders fine) is untouched. */
@media (min-width:821px) and (max-width:1099px){
  .wr-grid .ph-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .wr-grid .ph-right{align-items:center}
  .wr-grid .ph-metrics{justify-content:center}
  .wr-grid .ph-drivers-toggle{align-self:center}
}

/* The fused DECT cell's metrics strip (Networks / Nodes / Beltpacks / Band
   load) is one non-wrapping flex row; in a narrow cell the last metric clips
   at the cell edge. Let it wrap — inert on desktop where the row fits.
   (Was scoped ≥761px during the iPad pass; the iPhone pass confirmed the same
   mid-value clipping at 320–390 — "Beltpacks 12/3⟨2⟩" — so it now applies at
   every width.) */
/* height:auto beats the fixed 30px `.topbar-meta > *` row height so the
   wrapped second line isn't clipped. */
.dectmon.compact .topbar-meta .metrics{flex-wrap:wrap;height:auto;min-height:30px}

/* Phone: the conflict/caution action banner ellipsized its message down to a
   single character next to the CTA button at 320px. Wrap instead: tag + CTA
   on the first line, the full message on its own line below. */
@media (max-width:760px){
  .wr-action{flex-wrap:wrap}
  .wr-action .wr-atext{order:3;flex:1 1 100%;white-space:normal}
}