/* ============================================================
   Gantry — Consolidated map styles
   Overlay chrome for the explore map hero (org-context HUD
   chips, deck.gl tooltips, entity popups, empty state) and the
   MapLibre control restyling. The per-tab List ⇄ Map screens
   (.cg-mapview / .cg-seg toggle / floating side list) were
   retired by PROD-119 — the 3D facility & people layers now
   live on the hero (map-hero.jsx), styled here.
   ============================================================ */

/* HUD chips — bottom-left of the hero during an org context
   (GeoCoveragePill per active layer + the zoom-tier legend).
   Moved from top-left when the floating filters bar (.cg-filtersbar,
   explore.css — PROD-120) took the top-left corner: the bar's chip
   rows wrap to unpredictable heights, so the legend lives at the
   bottom, clear of it (46px clears the org list's slide-over lip,
   same as .cg-map-scrollhint). */
.cg-map-hud {
  position: absolute;
  bottom: 46px;
  left: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: min(70%, 720px);
  z-index: 5;
}
/* Narrow viewports: the pills wrap to 2–3 rows and collided with the
   centered scroll hint (PROD-124 responsive pass) — lift the stack above
   the hint line and let it span the width. */
@media (max-width: 640px) {
  .cg-map-hud { bottom: 76px; max-width: calc(100% - 24px); }
}
.cg-map-hud .cg-pill {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg-1) 82%, transparent);
}
/* Fetch-in-flight pill (PROD-123 filtered universe) — a soft opacity pulse
   as the subtle non-blocking loading cue over the map. */
.cg-map-hud .cg-hud-busy { animation: cg-hud-busy 1.4s var(--ease) infinite; }
@keyframes cg-hud-busy { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .cg-map-hud .cg-hud-busy { animation: none; }
}

/* Health-concern heat layer key — TOP-LEFT, directly under the floating
   filters bar, at every width. It used to sit top-right and landed on the
   MapLibre zoom/compass buttons (explore.css pins those at top: 52px of the
   hero, ~100px tall); the left column has no other control in it (the HUD
   pills are bottom-left, the zoom buttons and section bar top-right), so the
   key can never collide with one. It stays its own box rather than folding
   into .cg-map-hud: a <RampLegend>'s bar + ticks is wider chrome than a
   pill, and this ramp (cool) must never be read as the same system as the
   map's point ramp (warm).
   ⚠ THE BAR'S HEIGHT IS NOT KNOWN TO CSS — its chip row wraps to
   unpredictable heights, and the bar is a fixed SIBLING of the hero (see
   explore.jsx), not a parent. ExploreMapHero measures the row's bottom edge
   and writes it into this element's inline `top` (heat-key effect in
   map-hero.jsx). The 52px below is only the first-paint / no-bar fallback:
   hero top 57px → a collapsed one-line bar ends at ~101px, + an 8px gap.
   The bar's expanded panel (z-index 70) opens over the key, which is right:
   the panel is the foreground of the whole app while it is open. */
.cg-map-heat-legend {
  position: absolute;
  top: 52px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* clear the zoom/compass column pinned top-right on a phone */
  max-width: min(260px, calc(100% - 70px));
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cg-map-point-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 10.5px;
  color: var(--fg-3);
}
.cg-map-point-key-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cg-map-point-key-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* Awaiting-geocoding empty state (centered over the hero) */
.cg-map-empty {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 22px 26px;
  background: var(--bg-1); /* fallback where color-mix is unsupported */
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 6;
  color: var(--fg-3);
  font-size: 12.5px;
}

/* deck.gl hover tooltip */
.cg-map-tip {
  background: var(--bg-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px !important;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg) !important;
  box-shadow: var(--shadow-md);
  max-width: 260px;
}
.cg-map-tip .mono { font-size: 10.5px; color: var(--fg-2); margin-top: 2px; }

/* Entity click-popup (maplibregl.Popup, body built by mapEntityPopupHtml):
   facility dot / lit building / person pin → name, meta, status pill and
   the "Open profile" link. Restyled to the app tokens. */
.cg-map-popup { z-index: 7; }
.cg-map-popup .maplibregl-popup-content {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg);
  box-shadow: var(--shadow-md);
  min-width: 200px;
}
.cg-map-popup .maplibregl-popup-close-button {
  color: var(--fg-3);
  font-size: 16px;
  right: 4px;
  top: 2px;
  background: transparent;
}
.cg-map-popup .maplibregl-popup-close-button:hover {
  color: var(--fg);
  background: transparent;
}
.cg-map-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.cg-map-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.cg-map-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--bg-2); }
.cg-map-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.cg-map-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.cg-map-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--bg-2); }
.cg-map-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-2); }
.cg-map-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-2); }

.cg-map-pop .cg-kicker { margin-bottom: 4px; }
.cg-map-pop-line {
  font-size: 10.5px;
  color: var(--fg-2);
  margin-top: 2px;
}
.cg-map-pop-status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.cg-map-pop-status .cg-map-pop-line { margin-top: 0; }
.cg-map-pop-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}
.cg-map-pop-link:hover { text-decoration: underline; }

/* MapLibre chrome, restyled to the app's tokens (the hero canvas —
   see explore.css / map-hero.jsx) */
.cg-map-hero-canvas .maplibregl-ctrl-group {
  background: var(--bg-1); /* fallback where color-mix is unsupported */
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
}
.cg-map-hero-canvas .maplibregl-ctrl-group button { background: transparent; }
.cg-map-hero-canvas .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.cg-map-hero-canvas .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.6); }
[data-theme="light"] .cg-map-hero-canvas .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: none; }
.cg-map-hero-canvas .maplibregl-ctrl-attrib {
  background: var(--bg); /* fallback where color-mix is unsupported */
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-4);
}
.cg-map-hero-canvas .maplibregl-ctrl-attrib a { color: var(--fg-3); }

/* The heat layer's one date — "Complete through <date>" (G4), on the map. */
.cg-map-heat-stamp {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}