/* EYE · layout
 *
 * Where each region of the console sits. The map is full-bleed behind everything
 * and never resizes; docks are flush, near-opaque surfaces over it, and the free
 * area between them is the SAFE FRAME (--safe-*). Floating map overlays and every
 * camera move (uiInsets() in dom.js) respect the safe frame, so chrome never
 * covers the unit you just selected.
 *
 * main.js mirrors UI state onto <body> classes:
 *   has-left-panel · has-right-col · has-inspector · has-opslog · has-after-action
 *   debrief-open · debrief-max · briefing · is-picking · is-measuring · is-running
 *   has-run · is-locked · phase-<plan|starting|live|buffering|replay|error|expired>
 * Module stylesheets style the inside of their regions, never these positions.
 */

body {
  --debrief-h: clamp(240px, 45vh, 680px);
  --dock-bottom: var(--dock-h);            /* top edge of whatever sits on the bottom */
  --safe-top: var(--topbar-h);
  --safe-left: var(--rail-w);
  --safe-right: 0px;
  --safe-bottom: var(--dock-bottom);
}
body.has-left-panel { --safe-left: calc(var(--rail-w) + var(--panel-w)); }
body.has-right-col { --safe-right: var(--right-w); }
body.debrief-open { --dock-bottom: calc(var(--dock-h) + var(--debrief-h)); }
body.debrief-max { --debrief-h: calc(100vh - var(--topbar-h) - var(--dock-h) - 48px); }
/* At half height and above the left panel steps aside; at max the right column too. */
body.debrief-open { --safe-left: var(--rail-w); }
body.debrief-max { --safe-right: 0px; }
body.briefing { --safe-left: 0px; --safe-right: 0px; --dock-h: 52px; }

/* Map: the whole viewport, always. */
#map {
  position: fixed; inset: 0;
  z-index: var(--z-map);
  background: #070a0e;
}

/* Top command bar */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: var(--z-bar);
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}

/* Status banner (stale / error / live / expired notices): top-centre of the safe frame. */
#banner {
  position: fixed;
  top: calc(var(--safe-top) + var(--gap));
  left: calc((var(--safe-left) + 100vw - var(--safe-right)) / 2);
  transform: translateX(-50%);
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 120px);
  z-index: var(--z-overlay);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
#banner > * { pointer-events: auto; }

/* Left activity rail + its panel (panels.js) and the guide (help.js) in the same slot. */
#rail {
  position: fixed;
  top: var(--topbar-h); left: 0;
  bottom: var(--dock-bottom);
  width: var(--rail-w);
  z-index: var(--z-dock);
  background: var(--bg);
  border-right: 1px solid var(--line-2);
}
#leftPanel, #guidePanel {
  position: fixed;
  top: var(--topbar-h);
  left: var(--rail-w);
  bottom: var(--dock-bottom);
  width: var(--panel-w);
  z-index: var(--z-dock);
  background: var(--surface);
  border-right: 1px solid var(--line-2);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.28);
}
body.debrief-open #leftPanel, body.debrief-open #guidePanel { display: none !important; }

/* Right column: after-action card · inspector · ops log. */
#rightCol {
  position: fixed;
  top: var(--topbar-h); right: 0;
  bottom: var(--dock-bottom);
  width: var(--right-w);
  z-index: var(--z-dock);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-2);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28);
}
body:not(.has-right-col) #rightCol, body.debrief-max #rightCol { display: none; }
#afterAction { flex: none; border-bottom: 1px solid var(--line-2); }
#inspector { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#opsLog { flex: 0 1 var(--ops-h, 42%); min-height: 160px; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
body:not(.has-inspector) #opsLog { flex: 1 1 auto; }
body.has-inspector #opsLog { max-height: 60%; }

/* Map overlay UI (controls column, scale, coordinates, key, pick/measure banners,
   off-screen chevrons) — map.css positions children with the --safe-* vars. */
#mapUi { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); }
#mapUi > * { pointer-events: auto; }

/* Debrief sheet: directly above the dock, full width, so its Tracks tab shares the
   scrubber's x-scale (--dock-left-w | track | --dock-right-w). */
#debrief {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--dock-h);
  height: var(--debrief-h);
  z-index: var(--z-sheet);
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
  animation: eye-sheet-in var(--t-med) var(--ease);
}
@keyframes eye-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Dock: mission timeline + instruments, full width along the bottom. */
#timeline {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--dock-h);
  z-index: var(--z-dock);
  background: var(--bg);
  border-top: 1px solid var(--line-2);
}

/* Briefing mode: the map, the bar and a transport pill. */
body.briefing #rail, body.briefing #leftPanel, body.briefing #guidePanel, body.briefing #rightCol, body.briefing #debrief { display: none !important; }

/* ─── Responsive tiers ────────────────────────────────────────────────────── */
@media (max-width: 1439px) {
  :root { --panel-w: 320px; --right-w: 300px; --dock-right-w: 240px; }
}
@media (max-width: 1023px) {
  /* Tablet: panels and the right column become sheets above the dock. */
  :root { --dock-left-w: 168px; --dock-right-w: 0px; }
  #leftPanel, #guidePanel {
    left: var(--rail-w); right: 0; width: auto;
    top: auto; height: min(56vh, calc(100vh - var(--topbar-h) - var(--dock-bottom) - 24px));
    border-right: 0; border-top: 1px solid var(--line-strong);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
  }
  #rightCol {
    left: var(--rail-w); right: 0; width: auto;
    top: auto; height: min(56vh, calc(100vh - var(--topbar-h) - var(--dock-bottom) - 24px));
    border-left: 0; border-top: 1px solid var(--line-strong);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
  }
  body.has-left-panel.has-right-col #leftPanel { display: none; }
  body.has-left-panel, body.has-right-col { --safe-left: var(--rail-w); --safe-right: 0px; }
  body.has-left-panel { --safe-bottom: calc(var(--dock-bottom) + min(56vh, 100vh - var(--topbar-h) - var(--dock-bottom) - 24px)); }
  body.has-right-col { --safe-bottom: calc(var(--dock-bottom) + min(56vh, 100vh - var(--topbar-h) - var(--dock-bottom) - 24px)); }
}
@media (max-width: 767px) {
  :root { --rail-w: 48px; --topbar-h: 48px; --dock-h: 96px; --dock-left-w: 0px; }
  body.debrief-open { --debrief-h: calc(100vh - var(--topbar-h) - var(--dock-h) - 24px); }
}