:root {

  --bg: #0a0e1a;
  --panel: rgba(20, 25, 40, 0.85);
  --panel-2: rgba(40, 50, 75, 0.85);
  --panel-glass: rgba(15, 18, 30, 0.55);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent: #00b8d4;        /* cyan — broadcast professional */
  --accent-hover: #26c6da;
  --accent-soft: rgba(0, 184, 212, 0.18);
  --warn: #ff9500;
  --danger: #ff3b30;
  --text: #f0f3f8;
  --text-dim: #8b94a8;
  --text-faint: rgba(240, 243, 248, 0.45);
  --green: #34c759;
  --blue: #2196f3;
  --yellow: #ffcc00;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --zoom-scale: 1;

  /* ===== Z-INDEX SCALE — single documented stacking order =====
     map(1) < panels(1000) < brand(1100) < storyboard(1200)
     < editors(1300, above storyboard so Save/Cancel are never blocked)
     < presenter-bar(1400) < dropdowns(1500) < toast/instructions(1600) < modal(1800) */
  --z-map: 1;
  --z-panels: 1000;
  --z-flyout: 1050;   /* rail flyout menus: above panels, below brand/editors */
  --z-brand: 1100;
  --z-storyboard: 1200;
  --z-editor: 1300;
  --z-presenter: 1400;
  --z-dropdown: 1500;
  --z-toast: 1600;
  --z-modal: 1800;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter','Segoe UI',Tahoma,Arial,sans-serif;
  background: var(--bg); color: var(--text);
  overflow: hidden; height: 100vh;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#map { position: absolute; inset: 0; z-index: var(--z-map); background: #0a0e1a; }

/* ========== ANIMATIONS ========== */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes dash-flow { to { stroke-dashoffset: -22; } }
@keyframes selection-pulse { 0%,100% { opacity: 0.85; } 50% { opacity: 0.4; } }

/* ========== STATUS BAR ========== */
/* (Standalone .zoom-controls removed — zoom lives in the single presenter-bar.) */
.status-bar {
  position: absolute; bottom: 14px; left: 14px; z-index: var(--z-panels);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 12px;
  font-size: 11px; color: var(--text-dim);
  font-family: 'JetBrains Mono','Consolas',monospace;
}

/* === GRACEFUL TILE LOADING — no white flash on broadcast === */
.leaflet-tile-pane {
  background: #0d1117;  /* dark fallback so empty tiles look like part of the map */
}
.leaflet-tile-container {
  will-change: transform;
}
/* Hide the loading state border that some browsers draw */
.leaflet-tile:not(.leaflet-tile-loaded) {
  background: #0d1117;
}
.leaflet-control-attribution {
  background: rgba(0,0,0,0.6) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 9px !important; padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: rgba(255,255,255,0.65) !important; }
.leaflet-control-zoom { display: none !important; }

.path-anim-line { stroke-dasharray: 6 6; animation: dash-flow 1s linear infinite; }
.asset-trail { opacity: 0.5; }

.instructions {
  position: absolute; top: 104px; left: 50%;
  transform: translateX(-50%); z-index: var(--z-toast);
  background: rgba(20,25,39,0.97);
  border: 1px solid var(--accent);
  border-radius: 9px; padding: 10px 18px;
  color: white; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,184,212,0.25);
  backdrop-filter: blur(10px); display: none;
  max-width: 90vw;
}
.instructions.show { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%,-10px); }
  to { opacity: 1; transform: translate(-50%,0); }
}

/* ========== TOAST ========== */
.toast {
  position: absolute; top: 104px; left: 50%;
  transform: translateX(-50%); z-index: var(--z-toast);
  background: rgba(52,199,89,0.95);
  border: 1px solid var(--green);
  color: white; font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  display: none;
}
.toast.show { display: block; animation: fadeIn 0.25s; }


/* High-quality country border rendering */
.leaflet-overlay-pane svg path {
  shape-rendering: geometricPrecision;
}


/* MAP TILE LOADING — dark base, NO per-tile opacity transition.
   Leaflet's built-in fade is disabled via map option fadeAnimation:false.
   Removing the per-tile `transition: opacity` + `will-change: opacity` avoids
   promoting every retained tile to its own GPU compositor layer (layer explosion
   / GB-scale GPU memory during long panning sessions). */
.leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-tile-loaded {
  opacity: 1 !important;  /* harmless safety net — no flash on decode */
}
/* Avoid black flash on satellite */
.leaflet-container {
  background: #0d1117 !important;
}
.satellite-active .leaflet-tile-pane,
.satellite-active .leaflet-container {
  background: #1c2433 !important;  /* dark blue close to ocean color */
}

/* =====================================================================
   TOUCH HARDENING (the studio runs on a touch screen)
   - No 300ms tap delay or double-tap zoom on chrome
   - No text selection / long-press callout while operating controls
   - Every interactive control meets a 40px touch target
   - No sticky :hover styles left behind by a finger
   ===================================================================== */
.top-bar, .toolbar, .qa-strip, .right-rail, .rail-flyout,
.storyboard-panel, .presenter-bar, .edit-panel, .asset-edit-panel,
.animate-panel, .asset-palette, .scenario-menu, .qa-modal {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Inputs must stay selectable/typable */
.qa-modal input, .edit-panel input, .edit-panel textarea,
.asset-edit-panel input, .asset-edit-panel textarea, input[type="range"] {
  -webkit-user-select: auto; user-select: auto; touch-action: auto;
}
@media (pointer: coarse) {
  .tool-btn, .top-bar-btn, .pb-btn, .rail-btn,
  .qa-fx, .qa-item, .layer-btn, .storyboard-btn, .qa-obtn {
    min-width: 40px; min-height: 40px;
  }
  /* Hover styles stick after a tap on touch devices — disable them there */
  .tool-btn:hover, .pb-btn:hover, .rail-btn:hover, .qa-fx:hover, .qa-item:hover {
    background: inherit;
  }
}

/* =====================================================================
   "NEWS CLEAN" BASEMAP GRADE
   The custom MapTiler "News" style bakes 19 label layers into its raster,
   which cannot be switched off from the browser. This reproduces its look
   from the label-free satellite source instead: desaturated land, deepened
   water, gentle contrast — the broadcast grade, zero text.
   ===================================================================== */
.leaflet-tile-pane .tiles-news-grade {
  filter: saturate(0.28) contrast(1.18) brightness(0.94);
}
/* Deepen the sea without touching land: a navy wash multiplied over the
   already-dark water reads as the News style's flat navy, while land (bright)
   is barely affected. */
body[data-basemap="news_clean"] .leaflet-tile-pane::after {
  content: '';
  position: absolute; inset: 0;
  background: hsl(217, 72%, 15%);
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}