/* AESOP Leaflet theming — dark cyber, matches aesop.css tokens. */
.aesop-map { position: absolute; inset: 0; background: var(--bg-2); }
.aesop-map.is-embedded { position: relative; inset: auto; width: 100%; height: 100%;
  border-radius: var(--r-lg); overflow: hidden; }

/* tone the CARTO dark tiles toward our deep navy so the map melts into the shell */
.aesop-map .leaflet-tile-pane { filter: saturate(.9) brightness(.92) hue-rotate(-6deg); }

/* Contain Leaflet's internal z-index war (panes/controls climb to 1000) inside
   the map's own stacking context, so it can never paint over the sticky topbar
   (z-index 60) / rail / overlays. `isolation:isolate` + a low z-index caps the
   whole subtree below the app chrome — platform-wide, every service's map. */
.leaflet-container { background: var(--bg-2); font-family: var(--font-ui);
  position: relative; z-index: 0; isolation: isolate; }
.leaflet-control-zoom a {
  background: var(--surface-1) !important; color: var(--text-2) !important;
  border-color: var(--border) !important; }
.leaflet-control-zoom a:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.leaflet-control-attribution {
  background: rgba(9,12,17,.7) !important; color: var(--text-3) !important;
  font-size: 10px !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }

/* popups */
.leaflet-popup-content-wrapper {
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--sh-3); }
.leaflet-popup-tip { background: var(--surface-1); border: 1px solid var(--border-strong); }
.leaflet-popup-content { margin: 12px 14px; font-size: var(--t-sm); }
.leaflet-popup-content b { color: var(--text); }
.leaflet-popup-content .kv { display:flex; justify-content:space-between; gap:14px;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-2);
  padding: 2px 0; }
.leaflet-popup-content .kv span:last-child { color: var(--text); }

/* floating map panel (filters / detail) */
.map-panel { position:absolute; z-index: 500; top: var(--s-3); left: var(--s-3);
  width: 268px; max-height: calc(100% - var(--s-6)); overflow:auto;
  background: rgba(17,22,31,.94); backdrop-filter: blur(6px);
  border:1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: var(--s-4); }
.map-panel h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing:.06em;
  color: var(--text-2); margin-bottom: var(--s-3); }

/* legend */
.map-legend { margin-top: var(--s-3); }
.map-legend .bar { height: 10px; border-radius: 999px; }
.map-legend .ticks { display:flex; justify-content:space-between;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; }
.map-legend .swatches { display:flex; flex-direction:column; gap:4px; margin-top: var(--s-2); }
.map-legend .sw { display:flex; align-items:center; gap:8px; font-size: var(--t-xs); color: var(--text-2); }
.map-legend .sw i { width:12px; height:12px; border-radius:3px; display:inline-block; }