/* ===================================================================
   V1 STAGE 6 — THE GLOBAL INTELLIGENCE MAP

   The flagship surface. Everything here is built on the V2 token set in
   tokens.css; this file introduces no new colour literal that isn't
   either a MapLibre paint value (which cannot read a CSS custom
   property, so the few hex values below are read back out of the
   tokens by map-flagship.js at runtime) or a translucent wash derived
   from an existing token.

   Layout model: the map is the page. The shell header stays, the
   content wrapper's padding and max-width are removed, and the map
   fills every remaining pixel. Controls float ON the map rather than
   sitting in a bar above it — a control bar would steal 80px of the
   one thing this page exists to show.
   =================================================================== */

/* -------------------------------------------------------------------
   FULL-BLEED SHELL OVERRIDE
   ------------------------------------------------------------------- */
.content-map-flagship {
  max-width: none;
  padding: 0;
  /* The shell header is sticky and the footer is below the fold on this
     page by design; the map claims the rest of the viewport. 100dvh
     tracks mobile browser chrome as it collapses, with a vh fallback
     for engines that don't support it.

     --map-shell-offset defaults to the shell's own topbar token, and is
     then overwritten in JS with the header's MEASURED height — the
     public-preview and admin-session banners sit inside the header and
     make it taller, and a hardcoded 56px would leave the map hanging
     off the bottom of the viewport on exactly the hosted deployment
     this page is built for. */
  height: calc(100vh - var(--map-shell-offset, var(--topbar-height)));
  height: calc(100dvh - var(--map-shell-offset, var(--topbar-height)));
  min-height: 420px;
  overflow: hidden;
}

/* The flagship page hides the site footer: a map that fills the
   viewport must not be pushed up by a footer the reader cannot see
   without scrolling a non-scrolling page. */
body:has(.content-map-flagship) .site-footer { display: none; }

.map-flagship {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, #0B111B 0%, #070A10 62%, #05080C 100%);
  overflow: hidden;
  isolation: isolate;
}

.map-canvas { position: absolute; inset: 0; }
.map-canvas:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

/* MapLibre's own chrome, restrained into the ProcIntel palette. */
.map-flagship .maplibregl-ctrl-attrib {
  background: rgba(8, 11, 17, 0.72);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  border-radius: var(--radius-xs) 0 0 0;
  padding: 2px var(--sp-4);
}
.map-flagship .maplibregl-ctrl-attrib a { color: var(--text-muted); }
.map-flagship .maplibregl-canvas-container:focus,
.map-flagship .maplibregl-canvas:focus { outline: none; }

/* -------------------------------------------------------------------
   FLOATING PANEL — the shared surface treatment
   ------------------------------------------------------------------- */
.map-panel {
  position: absolute;
  z-index: 5;
  background: rgba(20, 27, 38, 0.88);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--sheen-top);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

/* -------------------------------------------------------------------
   TOP BAR — search on the left of centre, controls on the right.

   One flex row, so search and the control buttons share the available
   width instead of being independently positioned and colliding. There
   is no masthead: a permanent title card is the single largest thing
   Stage 6 spent map on, and the navigation already names this page.
   ------------------------------------------------------------------- */
.map-topbar {
  position: absolute;
  z-index: 6;
  top: var(--sp-6);
  left: var(--sp-6);
  right: var(--sp-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  pointer-events: none;
}
.map-topbar > * { pointer-events: auto; }

.map-top-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex: none;
}

/* -------------------------------------------------------------------
   SEARCH — prominent but no longer dominating the centre
   ------------------------------------------------------------------- */
.map-search {
  position: static;
  flex: 0 1 420px;
  min-width: 0;
  max-width: 420px;
  padding: var(--sp-2) var(--sp-3);
}
.map-search-field { display: flex; align-items: center; gap: var(--sp-3); }
.map-search-field svg { flex: none; color: var(--text-disabled); }
.map-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  padding: var(--sp-3) 0;
}
.map-search input::placeholder { color: var(--text-disabled); }
.map-search input:focus { outline: none; }
.map-search:focus-within {
  border-color: var(--accent-muted);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-muted);
}

.map-search-results {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--border-subtle);
  max-height: min(420px, 50vh);
  overflow-y: auto;
}
.map-search-results:empty { display: none; }
#mapFlagship .map-search-result {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-4);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  cursor: pointer;
}
#mapFlagship .map-search-result:hover,
#mapFlagship .map-search-result:focus-visible,
#mapFlagship .map-search-result.is-active { background: var(--surface-hover); outline: none; }
.map-search-result-kind {
  flex: none;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 78px;
}
.map-search-result-name { flex: 1 1 auto; min-width: 0; }
.map-search-result-note {
  flex: none;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.map-search-empty {
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------
   CONTROL BUTTONS + POPOVERS — the "on demand" half of the model
   ------------------------------------------------------------------- */
#mapFlagship .map-control-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(20, 27, 38, 0.88);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--sheen-top);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease;
}
#mapFlagship .map-control-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
#mapFlagship .map-control-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
#mapFlagship .map-control-btn[aria-expanded="true"] {
  color: var(--accent-primary);
  border-color: var(--accent-muted);
}
#mapFlagship .map-control-btn svg { flex: none; opacity: 0.75; }
#mapFlagship .map-control-icon { padding: var(--sp-4); }

/* A count of how many filters are currently narrowing the map, so the
   button itself says there is hidden state behind it. */
.map-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* The host is the positioning context, so a popover is anchored to its
   own button rather than to the map — the button can then move with the
   layout at any breakpoint and the popover follows it. */
.map-popover-host { position: relative; }

.map-popover {
  position: absolute;
  z-index: 9;
  top: calc(100% + var(--sp-4));
  right: 0;
  width: 268px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  background: rgba(20, 27, 38, 0.96);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--sheen-top);
  font-family: var(--font-ui);
  animation: map-popover-in var(--dur-fast, 120ms) ease-out;
}
/* Opens upward when its button sits on the bottom bar. */
.map-popover-up { top: auto; bottom: calc(100% + var(--sp-4)); }
.map-popover-narrow { width: 296px; }

@keyframes map-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.map-popover-up { animation-name: map-popover-in-up; }
@keyframes map-popover-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.map-popover-heading {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------
   LEGEND — the explanation that used to be a permanent card
   ------------------------------------------------------------------- */
.map-guide { margin: 0; }
.map-guide dt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.map-guide dt:first-of-type { margin-top: 0; }
.map-guide dd {
  margin: var(--sp-2) 0 0 21px;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.map-guide dd strong { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.map-guide-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.map-guide-swatch.is-country { background: rgba(201, 169, 97, 0.34); border: 1px solid rgba(201, 169, 97, 0.5); }
.map-guide-swatch.is-point { border-radius: 50%; background: var(--status-warning); }
.map-guide-swatch.is-di { background: rgba(169, 139, 199, 0.32); border: 1px solid var(--provenance-synthesis); }
.map-guide-swatch.is-choke { border-radius: 50%; background: var(--accent-primary); }

/* -------------------------------------------------------------------
   LAYER LIST — now inside the Layers popover
   ------------------------------------------------------------------- */
.map-layer-section + .map-layer-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.map-panel-heading {
  margin: 0 var(--sp-3) var(--sp-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.map-layer-list { list-style: none; margin: 0; padding: 0; }

#mapFlagship .map-layer-toggle {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}
#mapFlagship .map-layer-toggle:hover { background: var(--surface-raised); color: var(--text-primary); }
#mapFlagship .map-layer-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}
#mapFlagship .map-layer-toggle[aria-pressed="true"] { color: var(--text-primary); }

/* The swatch is the layer's identity, and it is the ONLY place each
   layer's colour is stated in the UI — so a reader can always map a
   colour on the map back to a named layer. */
.map-layer-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--dur-fast, 120ms) ease;
}
#mapFlagship .map-layer-toggle[aria-pressed="true"] .map-layer-swatch { opacity: 1; }
.map-layer-swatch.is-square { border-radius: 2px; }
.map-layer-swatch.is-diamond { border-radius: 2px; transform: rotate(45deg); }

.map-layer-name { min-width: 0; }
.map-layer-count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
#mapFlagship .map-layer-toggle[aria-pressed="true"] .map-layer-count { color: var(--text-muted); }
/* A truthful zero. The toggle still works; it simply has nothing to
   draw, and saying so is better than an empty map that reads as a bug. */
.map-layer-count.is-zero { color: var(--text-muted); font-style: italic; }

.map-layer-note {
  margin: var(--sp-4) var(--sp-3) 0;
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------
   BOTTOM BAR — a time selector and one Filters button. Nothing else.

   The Stage 6 version put four labelled selects plus the time control
   plus a reset in one centred row; it could not fit, so it scrolled
   sideways and a subscriber had to drag a control bar to discover that
   filters existed. It is a column now: chips above, controls below,
   and it wraps rather than scrolling.
   ------------------------------------------------------------------- */
.map-bottombar {
  position: absolute;
  z-index: 6;
  bottom: var(--sp-6);
  left: var(--sp-6);
  right: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  pointer-events: none;
}
.map-bottombar > * { pointer-events: auto; }

.map-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  max-width: 100%;
}

/* --- active filter chips ---------------------------------------- */
.map-active-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  max-width: 100%;
}
.map-active-filters:empty { display: none; }
.map-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  background: rgba(20, 27, 38, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-pill);
  color: var(--accent-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
#mapFlagship .map-filter-chip button {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
#mapFlagship .map-filter-chip button:hover { opacity: 1; background: var(--wash-accent); }
#mapFlagship .map-filter-chip button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

/* --- filter popover contents ------------------------------------ */
.map-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-4);
}
.map-filter { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.map-filter label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.map-filter select {
  width: 100%;
  min-width: 0;
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  padding: var(--sp-3) var(--sp-4);
}
.map-filter select:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Time range reads as a segmented control: five mutually exclusive
   windows, all visible, no dropdown to open. */
.map-timerange {
  position: static;
  display: flex;
  gap: 0;
  flex: none;
  padding: 3px;
}
/* Borderless segments inside one bordered panel — a segmented control,
   not five buttons in a row. */
#mapFlagship .map-timerange button {
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}
#mapFlagship .map-timerange button:hover { color: var(--text-primary); background: var(--surface-raised); }
#mapFlagship .map-timerange button[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}
#mapFlagship .map-timerange button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -1px;
}

#mapFlagship .map-reset {
  width: 100%;
  margin-top: var(--sp-5);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  padding: var(--sp-4);
  cursor: pointer;
}
#mapFlagship .map-reset:hover { color: var(--text-primary); border-color: var(--border-strong); }
#mapFlagship .map-reset:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

/* -------------------------------------------------------------------
   ZOOM — deliberately the quietest control on the map. Kept, rather
   than removed with the rest of the Stage 6 chrome, because scroll and
   pinch are not available to a keyboard-only reader.
   ------------------------------------------------------------------- */
.map-zoom {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: var(--sp-6);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  background: rgba(20, 27, 38, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.5;
  transition: opacity var(--dur-fast, 120ms) ease,
              right var(--dur-slow, 260ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.map-zoom:hover, .map-zoom:focus-within { opacity: 1; }
#mapFlagship .map-zoom button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  cursor: pointer;
}
#mapFlagship .map-zoom button:hover { background: var(--surface-hover); color: var(--text-primary); }
#mapFlagship .map-zoom button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

/* -------------------------------------------------------------------
   STATUS — what is drawn, in words. Now inside the Layers popover.
   ------------------------------------------------------------------- */
.map-status {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.map-status:empty { display: none; }
.map-status strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}
.map-status-precision {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-micro);
}

/* -------------------------------------------------------------------
   LABEL OVERLAY — DOM text positioned over the canvas.

   The map uses no MapLibre symbol layers, because those need a glyph
   server and ProcIntel ships no external font endpoint (see
   vendor/maplibre/README.md). Labels are therefore ordinary DOM,
   rendered only for what is actually on screen and hard-capped, so
   this never becomes the "thousands of DOM markers" anti-pattern.
   ------------------------------------------------------------------- */
.map-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.map-label-place {
  transform: translate(-50%, 4px);
  color: var(--text-muted);
}
/* Quieter than Stage 6's uppercase gold: those read as text stamped
   across the world rather than as map labels, and competed with the
   geography they were annotating. Sentence case, muted, sitting just
   under their marker, and only shown once the view is regional. */
.map-label-chokepoint {
  transform: translate(-50%, 6px);
  color: var(--accent-muted);
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
}
.map-label-cluster {
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

/* -------------------------------------------------------------------
   TOOLTIP — hover only, never the primary route to information
   ------------------------------------------------------------------- */
.map-hovercard {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(5, 8, 12, 0.94);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-primary);
  max-width: 280px;
  opacity: 0;
  transition: opacity var(--dur-fast, 120ms) ease;
}
.map-hovercard.is-visible { opacity: 1; }
.map-hovercard-title {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.map-hovercard-meta { display: block; color: var(--text-muted); font-size: var(--fs-micro); }

/* -------------------------------------------------------------------
   DRAWER — the contextual intelligence preview
   ------------------------------------------------------------------- */
.map-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: clamp(380px, 30vw, 460px);
  display: flex;
  flex-direction: column;
  background: rgba(14, 20, 28, 0.96);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-left: 1px solid var(--border-default);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform var(--dur-slow, 260ms) cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: var(--font-ui);
}
.map-drawer.is-open { transform: translateX(0); }
.map-flagship.drawer-open .map-zoom { right: calc(clamp(380px, 30vw, 460px) + var(--sp-6)); }

.map-drawer-head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-7) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}
.map-drawer-kind {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.map-drawer-kind.is-di { color: var(--provenance-synthesis); }
.map-drawer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
#mapFlagship .map-drawer-dismiss {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
#mapFlagship .map-drawer-dismiss:hover { color: var(--text-primary); border-color: var(--border-strong); }
#mapFlagship .map-drawer-dismiss:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.map-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-6) var(--sp-7) var(--sp-9);
}

.map-drawer-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-7);
}
.map-metric {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.map-metric-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-headline);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--text-primary);
}
.map-metric-label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.map-drawer-block { margin: 0 0 var(--sp-7); }
.map-drawer-block:last-child { margin-bottom: 0; }
.map-drawer-block-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.map-drawer-prose {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.map-drawer-list { list-style: none; margin: 0; padding: 0; }
.map-drawer-item {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.map-drawer-item:first-child { padding-top: 0; }
.map-drawer-item:last-child { border-bottom: 0; padding-bottom: 0; }
.map-drawer-item-link {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.map-drawer-item-link:hover { color: var(--accent-hover); }
.map-drawer-item-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.map-drawer-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.map-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Five levels, matching map_db.MARKER_SIGNIFICANCE_LABELS exactly:
   Critical / High / Material / Moderate / Low. This is the Event
   significance scale, NOT the 0-100 raw-item CRITICAL/HIGH/MEDIUM/WATCH
   methodology — the two must never be conflated in the UI. */
.map-chip-critical { color: var(--status-critical); border-color: var(--status-critical); }
.map-chip-high { color: var(--status-warning);  border-color: var(--status-warning); }
.map-chip-material { color: var(--accent-primary);  border-color: var(--accent-muted); }
.map-chip-moderate { color: var(--status-info);     border-color: var(--status-info); }
.map-chip-low { color: var(--status-neutral);  border-color: var(--status-neutral); }
.map-chip-di { color: var(--provenance-synthesis); border-color: var(--provenance-synthesis); }

/* Precision is stated, never implied. A country-level record says so in
   words, so a reader can never mistake a country placement for a
   pinpoint one. */
.map-precision-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--wash-neutral);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.map-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
}
.map-drawer-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-muted);
  color: var(--accent-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.map-drawer-action:hover {
  background: var(--wash-accent);
  border-color: var(--accent-primary);
  color: var(--accent-hover);
}
.map-drawer-action:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.map-drawer-empty {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.map-drawer-loading {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.map-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: map-spin 700ms linear infinite;
}
@keyframes map-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------
   ACCESSIBLE EQUIVALENT — a canvas is not readable by a screen reader,
   so everything drawn is also available as a real list. Visually
   hidden, fully focusable, never a second-class copy.
   ------------------------------------------------------------------- */
.map-a11y-list {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.map-a11y-list:focus-within {
  position: absolute;
  top: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(560px, calc(100vw - 2 * var(--sp-6)));
  height: auto;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-6) var(--sp-7);
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--surface-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------------
   FAILURE + EMPTY STATES
   ------------------------------------------------------------------- */
.map-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: min(440px, calc(100vw - 2 * var(--sp-8)));
  padding: var(--sp-9);
  text-align: center;
  background: rgba(20, 27, 38, 0.96);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
}
.map-notice h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.map-notice p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.map-notice-actions { margin-top: var(--sp-7); display: flex; gap: var(--sp-4); justify-content: center; }

/* -------------------------------------------------------------------
   RESPONSIVE

   The model does not change with width — search on top, Layers and
   Filters on demand, time selector at the bottom. Only the sizes do.
   That is the point of moving the controls into popovers: there is no
   longer a wide permanent bar that has to be re-laid-out (or scrolled)
   to survive a narrow screen.
   ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .map-search { flex-basis: 340px; max-width: 340px; }
}

@media (max-width: 860px) {
  .map-topbar { top: var(--sp-5); left: var(--sp-5); right: var(--sp-5); gap: var(--sp-4); }
  .map-search { flex: 1 1 auto; max-width: none; }
  /* The word "Layers" is dropped and the icon carries it: at this width
     the search field needs the room more than the label does. */
  #mapFlagship .map-control-btn { padding: var(--sp-4); font-size: 0; gap: 0; }
  #mapFlagship .map-control-btn svg { opacity: 0.9; }
  .map-filter-badge { font-size: var(--fs-micro); }

  /* Anchored to the map's edges rather than to the button, so a 268px
     popover can never hang off the side of a 375px screen. */
  .map-popover,
  .map-popover-narrow {
    position: fixed;
    top: auto;
    bottom: auto;
    left: var(--sp-5);
    right: var(--sp-5);
    width: auto;
    max-height: 52vh;
  }
  .map-topbar .map-popover { top: 104px; }
  .map-bottombar .map-popover-up { bottom: 96px; }

  .map-bottombar { bottom: var(--sp-5); left: var(--sp-5); right: var(--sp-5); }
  #mapFlagship .map-timerange button { padding: var(--sp-3) var(--sp-4); }
  .map-search-results { max-height: 38vh; }

  .map-zoom { top: auto; bottom: 92px; right: var(--sp-5); transform: none; }
  .map-flagship.drawer-open .map-zoom { right: var(--sp-5); }
}

@media (max-width: 480px) {
  /* Two columns of selects do not fit; one does. */
  .map-filter-grid { grid-template-columns: 1fr; }
  .map-zoom { display: none; }
}

@media (max-width: 760px) {
  .map-drawer {
    top: auto;
    left: 0;
    width: 100%;
    height: 62%;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
  }
  .map-drawer.is-open { transform: translateY(0); }
  .map-drawer-head { padding: var(--sp-6) var(--sp-6) var(--sp-4); }
  .map-drawer-body { padding: var(--sp-5) var(--sp-6) var(--sp-8); }
}

/* -------------------------------------------------------------------
   MOTION PREFERENCE
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .map-drawer,
  .map-zoom { transition: none; }
  .map-spinner { animation: none; }
  .map-popover { animation: none; }
}

/* V1 PREMIUM UX: `hidden` must win. Both elements set their own
   display, which silently overrides the attribute's UA rule -- so the
   empty filter badge drew a gold dot on the Filters button with no
   filter active, and the CLOSED drawer stayed rendered off-canvas with
   its controls still reachable by keyboard. map-flagship.js already
   toggles `hidden` on both; the stylesheet now honours it. The drawer's
   slide-in is unaffected: the script unhides first, then adds .is-open
   on the next frame. */
.map-filter-badge[hidden],
.map-drawer[hidden] { display: none; }
/* The coverage note sat flush against the next block's label. */
.map-precision-note + .map-drawer-block { margin-top: var(--sp-7); }