/* 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; }
.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; }

.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
   floating map/underlay controls. */
.ssa-compact { padding: 0; max-width: none; }
.ssa-compact .ssa-navbar,
.ssa-compact .ssa-monitor-right,
.ssa-compact .ssa-map-controls,
.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"; }
}