:root {
  --nav-h: 36px;
  --t1-row2-h: 38px;
  --t1-row3-h: 38px;
  --t1-total: calc(var(--nav-h) + var(--t1-row2-h) + var(--t1-row3-h));
  --z-canvas: 0;
  --z-basemap: 1;
  --z-t2: 10;
  --z-t3: 100;
  --z-t3-hud: 200;
  --z-t3-buttons: 200;
  --z-t4: 400;
  --z-t4-modal: 490;
  --z-t1: 500;
  --z-t1-top: 520;
  --sidebar-left: 220px;
  --sidebar-right: 220px;
}
.page-hexmap   { --t1-row3-h: 38px; }
.page-predict  { --t1-row2-h: 44px; --t1-row3-h: 0px; }
.page-climate  { --t1-row2-h: 38px; --t1-row3-h: 0px; }
.page-intel    { --t1-row2-h: 38px; --t1-row3-h: 38px; }

#deck-container, #map-container {
  position: fixed;
  top: var(--t1-total);
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-canvas);
}
#sensor-panel, #layer-panel {
  top: calc(var(--t1-total) + 8px);
  max-height: calc(100vh - var(--t1-total) - 16px);
}
#hud-tl { top: calc(var(--t1-total) + 10px); left: 14px; }
#hud-tr { top: calc(var(--t1-total) + 10px); right: 14px; }
#hud-bl { bottom: 60px; left: 14px; }
#hud-br { bottom: 60px; right: 14px; }

@keyframes scan {
  0%   { top: var(--t1-total); }
  100% { top: 100vh; }
}
@media (max-width: 1024px) {
  #layer-panel { width: 44px; overflow: hidden; }
  #layer-panel:hover { width: var(--sidebar-left); }
}
@media (max-width: 768px) {
  #layer-panel, #sensor-panel { display: none; }
}
@media (max-width: 480px) {
  .toast-stack .toast { height: 28px; font-size: 10px; }
  #drill-panel { max-width: calc(100vw - 28px); }
}