/* Map page inherits from tokens.css — local aliases for brevity */
:root{
  --navy:var(--db-navy, #0B1F33);
  --slate:var(--db-slate, #6B7280);
  --red:var(--db-red, #8B1E1E);
  --off:var(--db-bg, #F4F6F8);
  --char:var(--db-char, #1F2933);
  --line:var(--db-border, rgba(11,31,51,.12));
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--off);
  color:var(--char);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(244,246,248,.96);
  backdrop-filter:saturate(1.1) blur(8px);
  position:sticky;
  top:0;
  z-index:5;
}

.brand .wordmark{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--navy);
}
.brand .sub{
  margin-top:2px;
  font-weight:700;
  font-size:11px;
  color:var(--slate);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.back{
  text-decoration:none;
  color:var(--navy);
  font-weight:800;
  font-size:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}

.shell{
  max-width:1600px;
  margin:0 auto;
  padding:12px;
}

.controls{
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  padding:12px;
}

.control-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.legend-title{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--slate);
  margin-bottom:8px;
}

.legend-items{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
}

.legend-item{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:var(--char);
}
.swatch{
  width:14px;height:14px;border-radius:4px;
  border:1px solid rgba(31,41,51,.25);
}
.swatch.blue{ background:#0B3D91; }
.swatch.red{ background:var(--red); }
.swatch.yellow{ background:#D6B100; }
.swatch.purple{ background:#6D28D9; }
.swatch.gray{ background:#9CA3AF; }



.init-row{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  appearance:none;
  border:1px solid rgba(11,31,51,.18);
  background:var(--navy);
  color:white;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:14px;
  font-size:11px;
  cursor:pointer;
}
.note{ color:var(--slate); font-size:12px; }

.mapwrap{
  margin-top:0;
  position:relative;
  /* Create a predictable stacking context so overlays can sit above the map canvas/panes */
  isolation:isolate;
  overflow:hidden;
  background:white;
  /* Fits cleanly within the report shell on desktop + mobile */
  height: calc(100vh - 170px);
  height: calc(100dvh - 170px);
  min-height:520px;
}

/* Mapcard is the visual card container — handles border/radius/shadow for the whole row */
.mapcard{
  position:relative;
  margin-top:6px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 2px 12px rgba(11,31,51,.06);
}

.map{ width:100%; height:100%; }

.panel{
  /* Flex sibling — sits to the right of .mapwrap on desktop */
  position:relative;
  width:340px;
  flex-shrink:0;
  overflow-y:auto;
  max-height:100%;
  background-color: #FFFFFF;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px 10px 12px;
  border-bottom:1px solid var(--line);
  /* Fully opaque header (no translucency/blur) */
  background-color: #FFFFFF !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
.panel-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
}
.panel-close{
  border:none;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--slate);
  padding:4px 8px;
  border-radius:10px;
}
.panel-close:hover{ background:rgba(11,31,51,.06); }

.panel-body{
  background-color: #FFFFFF !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:13px;
}
.kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:8px;
  align-items:start;
  padding:6px 0;
  border-top:1px solid rgba(11,31,51,.08);
}
.kv:first-child{ border-top:none; }
.k{ color:var(--slate); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.v{ color:var(--char); font-weight:700; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,31,51,.12);
  background:var(--off);
  font-weight:900;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pill.blue{ background:rgba(11,61,145,.10); border-color:rgba(11,61,145,.22); color:#0B3D91; }
.pill.red{ background:rgba(139,30,30,.10); border-color:rgba(139,30,30,.22); color:var(--red); }
.pill.purple{ background:rgba(109,40,217,.10); border-color:rgba(109,40,217,.22); color:#6D28D9; }
.pill.gray{ background:rgba(156,163,175,.12); border-color:rgba(156,163,175,.22); color:#4B5563; }

.muted{ color:var(--slate); }

@media(max-width: 900px){
  .control-row{ grid-template-columns:1fr; }
  .mapwrap{ height: calc(100vh - 290px);
  height: calc(100dvh - 290px);
}
  /* Panel stays as flex sibling at 900px — just reduce width slightly */
  .panel{
    width:300px;
  }
}

/* Mobile-first refinements (keep desktop layout intact) */
@media (max-width: 768px){
  .shell{ padding:10px; }

  /* Let the card grow naturally: map on top, panel below */
  .mapwrap{
    height:auto;
    min-height:0;
  }
  /* Mobile-safe viewport units (dvh) with fallback */
  #map.map{
    height: clamp(320px, 65vh, 520px);
    height: clamp(320px, 65dvh, 520px);
  }

  /* Overlays live inside the map area on mobile */
  .map-overlay-top{
    left:12px;
    right:12px;
    top:10px;
    transform:none;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    pointer-events:auto;
  }
  .map-overlay-bottom{
    position:absolute;
    left:12px;
    right:12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform:none;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    z-index:650;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mode-btn{
    padding:10px 12px;
    font-size:12px;
    border-radius:12px;
  }

  /* Panel becomes a stacked briefing card below the map */
  .panel{
    position:static;
    width:100%;
    max-width:none;
    max-height:none;
    overflow-y:visible;
    margin:0;
    border-radius:0 0 16px 16px;
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-top:1px solid rgba(11,31,51,.10);
    box-shadow:none;
  }
  .panel-head{
    padding:12px 12px 10px 12px;
  }
  .panel-title{
    font-size:12px;
    line-height:1.25;
  }
  .panel-body{
    padding:12px;
  }
  .kv{
    grid-template-columns: 110px 1fr;
  }
  .v{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  
  /* Legend rules consolidated in the ≤900px block below */

}

@media (max-width: 480px){
  .topbar{ padding:10px 12px; }
  .wordmark{ font-size:12px; }
  .mapwrap{ border-radius:14px; }
  #map.map{
    height: clamp(300px, 60vh, 480px);
    height: clamp(300px, 60dvh, 480px);
  }
  .map-overlay-top,
  .map-overlay-bottom{
    left:10px;
    right:10px;
  }
  .mode-btn{ padding:10px 11px; }

    /* Legend: keep compact on very small screens */
  .map-legend{
    left:12px;
    right:auto;
    bottom:10px;
  }
  .legend-toggle{
    padding:5px 9px;
    font-size:10.5px;
  }
  .map-legend.is-open{
    width: 200px;
    padding:9px 9px;
  }
}

/* Hide legend toggle on full desktop; show as collapsible pill at ≤900px */
.legend-toggle{ display:none; }
@media (max-width: 900px){
  .legend-toggle{ display:inline-flex; }
}

/* Leaflet popups: keep fully opaque */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: #FFFFFF;
}


/* Runtime status / token hint */
.status{
  margin-top:10px;
  font-size:12px;
  color: rgba(31,41,51,.85);
}
.token-missing{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(11,31,51,.14);
  background: rgba(244,246,248,.9);
  font-size:12px;
  color: rgba(31,41,51,.9);
}
.token-missing code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}
.popup .popup-title{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.popup .popup-row{
  display:flex;
  gap:10px;
  margin:6px 0;
  font-size:12px;
}
.popup .popup-row .k{
  width:90px;
  color: rgba(31,41,51,.7);
}
.popup .popup-row .v{
  flex:1;
}


/* Panel scrolls independently */
#panel.panel{ overflow-y:auto; }

/* ── Elections deferred-loading placeholder ──────────────────── */
.civic-loading-slot{padding:14px 0 8px;}
.civic-loading-bar{
  height:3px;border-radius:2px;
  background:rgba(11,31,51,.08);
  overflow:hidden;margin-top:10px;
}
.civic-loading-bar::after{
  content:'';display:block;height:100%;width:40%;
  background:rgba(11,31,51,.18);border-radius:2px;
  animation:civic-slide 1.2s ease-in-out infinite;
}
@keyframes civic-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* ─────────────────────────────────────────────────────────────
   civicAPI elections panel (minimal, institutional)
   ───────────────────────────────────────────────────────────── */
.civic-panel{
  border-top:1px solid rgba(11,31,51,.10);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.civic-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.civic-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
}
.civic-tabs{
  display:flex;
  gap:6px;
}
.civic-tab{
  border:1px solid rgba(11,31,51,.16);
  background:#fff;
  color:var(--navy);
  font-weight:900;
  font-size:11px;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}
.civic-tab.is-active{
  background:var(--off);
  border-color:rgba(11,31,51,.22);
}
.civic-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Compact civic elections box inside the right panel (keeps map visible). */
.civic-panel-compact{ padding:10px 12px; }
.civic-panel-compact .civic-rows{
  max-height: 140px;
  overflow: auto;
  padding-right: 4px;
}
.civic-row{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  border:1px solid rgba(11,31,51,.12);
  background: rgba(244,246,248,0.70);
  border-radius:10px;
  padding:8px;
  margin-top:8px;
  cursor:pointer;
}
.civic-row:hover{ background: rgba(244,246,248,0.92); }
.civic-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(11,31,51,.45);
  margin-top:2px;
  flex:0 0 auto;
}
.civic-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.civic-row-title{ font-weight:900; color:var(--navy); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.civic-row-meta{ font-weight:800; color:var(--slate); font-size:11px; line-height:1.2; }
.civic-item{
  border:1px solid rgba(11,31,51,.10);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.civic-item:hover{ background:rgba(11,31,51,.03); }
.civic-item .t{
  font-weight:900;
  color:var(--char);
  font-size:12px;
  line-height:1.25;
}
.civic-item .m{
  margin-top:2px;
  color:var(--slate);
  font-weight:800;
  font-size:11px;
  line-height:1.25;
}
.civic-attr{
  color:var(--slate);
  font-weight:800;
  font-size:11px;
}


/* Map overlays */
.map-overlay-top{
  position:absolute;
  left:50%;
  top:12px;
  transform: translateX(-50%);
  z-index:600;
  display:flex;
  gap:8px;
  align-items:center;
}

.map-overlay-bottom{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:900;
  display:flex;
  gap:8px;
  align-items:center;
}


/* Global ideology meter (above map, outside map frame) */
.meterwrap{
  margin-top:12px;
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.map-meter{
  position:relative;
}
.meter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.meter-title{
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--slate);
}
.meter-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  font-size:11px;
  color:rgba(31,41,51,.82);
}
.meter-legend .mneg{ color: rgba(11,61,145,.88); }
.meter-legend .mpos{ color: rgba(139,30,30,.88); }
.meter-legend .mzero{ color: rgba(31,41,51,.90); font-weight:800; }
.meter-bar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(11,31,51,.14);
  /* Far-left (red) on the LEFT, far-right (blue) on the RIGHT */
  background: linear-gradient(90deg,
    #6F1414 0%,
    #B11F1F 16.6%,
    #FCA5A5 33.3%,
    #D6B100 50%,
    #60A5FA 66.6%,
    #0B3D91 83.3%,
    #062A5C 100%
  );
  box-shadow: 0 10px 26px rgba(11,31,51,0.10);
  position:relative;
  overflow:hidden;
}
.meter-needle{
  /* A dot indicator (requested) */
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  background:#1F2933;
  border-radius:999px;
  left:50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.meter-foot{
  margin-top:6px;
  font-size:11px;
  color:rgba(107,114,128,.9);
  display:flex;
  justify-content:space-between;
}

.meter-edge{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(31,41,51,.78);
}

.mode-btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--char);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(11,31,51,0.10);
}
.mode-btn:hover{ border-color: rgba(11,31,51,.22); }
.mode-btn.is-active{
  border-color: rgba(11,31,51,.28);
  background: var(--off);
}

.map-legend{
  position:absolute;
  left:66px;
  bottom:12px;
  z-index:600;
  width: 210px;
  max-width: calc(100% - 80px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 10px;
  box-shadow: 0 12px 28px rgba(11,31,51,0.14);
}
.map-legend .legend-title{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
.map-legend .legend-items{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
}
.map-legend .legend-item{ display:flex; align-items:center; gap:8px; font-size:12px; }

/* Risk overlay legend helpers (kept restrained, briefing-style) */
.map-legend .legend-note{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(31,41,51,0.88);
  margin: 0 0 8px 0;
}

.map-legend .legend-range{
  color: rgba(107,114,128,0.95);
  font-weight: 600;
}

/* Hotspots legend rows (cleaner layout) */
.map-legend .legend-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
}
.map-legend .legend-swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  border:1px solid rgba(11,31,51,0.18);
  flex:0 0 auto;
  margin-top:2px;
}
.map-legend .legend-text{ line-height:1.2; }
.map-legend .legend-label{ font-weight:600; }
.map-legend .legend-note{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(11,31,51,0.10);
}

.swatch{
  width:10px; height:10px; border-radius:3px; display:inline-block;
  border:1px solid rgba(11,31,51,.15);
}
.swatch.far-right{ background:#062A5C; }
.swatch.right{ background:#0B3D91; }
.swatch.center-right{ background:#60A5FA; }
.swatch.center{ background:#D6B100; }
.swatch.center-left{ background:#FCA5A5; }
.swatch.left{ background:#B11F1F; }
.swatch.far-left{ background:#6F1414; }
.swatch.mixed{ background:#6D28D9; }
.swatch.gray{ background:#9CA3AF; }

/* Only show status when it has text */
.status:empty{ display:none; }


/* --- Controls + legend behavior --- */

/* Desktop (≥901px): legend always open, toggle hidden */
@media (min-width: 901px) {
  .map-legend .legend-toggle { display: none; }
  .map-legend .legend-items { display: block !important; }
}

/* Tablet + mobile (≤900px): legend collapsed by default, opens via .is-open */
@media (max-width: 900px) {
  .map-legend .legend-toggle { display: inline-flex; }
  .map-legend .legend-items { display: none; }
  .map-legend.is-open .legend-items { display: block; }
}

/* Tablet/mobile: move legend control to bottom-left as a slim bar (avoid Leaflet zoom control) */
@media (max-width: 900px) {
  .map-legend{
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-width: calc(100% - 80px);
    padding: 6px;
    border-radius: 999px; /* pill */
    background: rgba(244,246,248,.96);
  }

  .map-legend .legend-head{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:0;
  }

  .map-legend .legend-title{
    display:none;
  }

  .map-legend .legend-toggle{
    appearance:none;
    border: 1px solid rgba(31,41,51,.16);
    background: transparent;
    color: var(--char);
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: none;
  }

  /* Legend body becomes a popup panel above the pill */
  .map-legend .legend-items{
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: 230px;
    max-width: calc(100vw - 24px);
    max-height: 52vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 12px 28px rgba(11,31,51,0.16);
  }

  .map-legend .legend-item{
    font-size: 12px;
    gap: 8px;
  }
}

/* Small phones: slightly tighter spacing */
@media (max-width: 480px) {
  .map-legend{
    left: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 5px;
  }
  .map-legend .legend-toggle{
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }
  .map-legend .legend-items{
    width: 220px;
  }
}

/* Remove "Hide" semantics: button always reads Legend */
.map-legend .legend-toggle { white-space: nowrap; }

/* Mobile control drawer section labels and dividers */
.mobile-section-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11, 31, 51, .40);
}
.mobile-section-divider {
  height: 1px;
  background: rgba(11, 31, 51, .08);
  margin: 4px 6px;
}

/* Mobile dropdown menus (replaces button rows) */
.map-mobile-menus {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500; /* above map tiles */
  gap: 8px;
  align-items: flex-start;
}

.map-mobile-menus .mobile-menu {
  position: relative;
}

.map-mobile-menus .menu-trigger {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,51,.16);
  background: rgba(244,246,248,.96);
  color: var(--char);
  box-shadow: 0 6px 18px rgba(11,31,51,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.map-mobile-menus .menu-icon { font-size: 18px; line-height: 1; }

.map-mobile-menus .menu-pop {
  display: none;
  position: absolute;
  right: 0;
  margin-top: 8px;
  min-width: 210px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,51,.14);
  background: rgba(244,246,248,.98);
  box-shadow: 0 10px 26px rgba(11,31,51,.16);
  padding: 6px;
}

.map-mobile-menus .mobile-menu.is-open .menu-pop { display: block; }

.map-mobile-menus .menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--char);
  font-weight: 600;
  font-size: 14px;
}

.map-mobile-menus .menu-item:hover,
.map-mobile-menus .menu-item:focus {
  outline: none;
  background: rgba(11,31,51,.06);
}

.map-mobile-menus .menu-item.is-active {
  background: rgba(11,31,51,.08);
  color: #0B1F33;
  font-weight: 700;
}

.map-mobile-menus .menu-item.is-active::before {
  content: "✓ ";
  font-size: 12px;
}

/* Mobile/tablet layout rules: swap rows -> dropdowns (≤900px) */
@media (max-width: 900px) {
  .map-overlay-top,
  .map-overlay-bottom {
    display: none !important;
  }
  #proLayerBar,
  #proOverlayBar {
    display: none !important;
  }
  .map-mobile-menus {
    display: inline-flex;
  }
}

/* Small phone: keep menus within safe area */
@media (max-width: 480px) {
  .map-mobile-menus {
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
  }
}

/* Desktop (≥901px): auto-size the mode button bar so the white background
   only wraps the three buttons. Centre it within the non-panel area. */
@media (min-width: 901px) {
  .map-overlay-top {
    left: 50%;
    right: auto;
    width: auto;
    transform: translateX(-50%);
  }
}




/* --- Tablet/mobile legend: anchor to MAP bottom-left, button-only footprint, popup card --- */
@media (max-width: 900px){
  /* Legend anchor sits inside the map card */
  .mapwrap{ position:relative; }

  .map-legend{
    position:absolute !important;
    left:12px !important;
    bottom:12px !important;
    z-index:650;
    /* no container box — only the button shows when collapsed */
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    width:auto !important;
    max-width:none !important;
  }

  /* The toggle is the only visible control when collapsed */
  .map-legend .legend-head{
    display:block;
  }
  .map-legend .legend-title{ display:none !important; }

  .legend-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* small, tap-friendly without taking space */
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background: var(--off) ;
    color: var(--navy);
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:1;
  }

  /* Popup legend card (only this grows) */
  .map-legend .legend-items{
    display:none;
  }
  .map-legend.is-open .legend-items{
    display:block;
    position:absolute;
    left:0;
    bottom: calc(100% + 8px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 10px;
    box-shadow: 0 12px 28px rgba(11,31,51,0.14);
    width:210px;
    max-width: calc(100vw - 24px);
  }
}

/* tighter for very small phones */
@media (max-width: 480px){
  .map-legend{ left:10px !important; bottom:10px !important; }
  .legend-toggle{ padding:5px 9px; font-size:10px; }
  .map-legend.is-open .legend-items{ width:200px; }
}

/* ─────────────────────────────────────────────────────────────
   Phase 4: Pro Intel Layer toggle panel
   ───────────────────────────────────────────────────────────── */
.layer-panel{
  position: absolute;
  right: 16px;
  top: 88px;
  width: 260px;
  background: rgba(244, 246, 248, 0.96);
  border: 1px solid rgba(31, 41, 51, 0.15);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 1200;
}

.layer-panel-title{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #0B1F33;
  margin-bottom: 8px;
}

.layer-list{ display:flex; flex-direction:column; gap: 8px; }
.layer-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:#1F2933; }
.layer-item label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.layer-panel-note{ margin-top:10px; font-size:11px; color:#6B7280; }

.layer-section{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.layer-section-title{ font-size:11px; letter-spacing:.12em; color:#6B7280; margin-bottom:6px; }
.layer-item{ display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; user-select:none; }
.layer-item input{ cursor:pointer; }


/* === Pro Map: left icon dock (base modes + overlays) === */
.layer-dock{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index: 900;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid rgba(31, 41, 51, 0.14);
  border-radius:12px;
  background: rgba(244, 246, 248, 0.96);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.layer-dock .dock-top,
.layer-dock .dock-icons{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.layer-dock .dock-divider{
  height:1px;
  background: rgba(31, 41, 51, 0.10);
  margin:2px 0;
}
.layer-dock .dock-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(31, 41, 51, 0.14);
  background: rgba(255,255,255,0.92);
  color: #0B1F33;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.layer-dock .dock-btn:hover{
  background: rgba(11, 31, 51, 0.05);
}
.layer-dock .dock-btn.is-active{
  border-color: rgba(139,30,30,0.70);
  background: rgba(11, 31, 51, 0.06);
  box-shadow: 0 0 0 2px rgba(139,30,30,0.18);
}
.layer-dock .dock-btn[disabled]{
  opacity:0.5;
  cursor:not-allowed;
}
@media (max-width: 768px){
  /* Reset the desktop top:132px anchor so the dock sits at bottom-left on small screens */
  .layer-dock{ top:auto; bottom: 12px; left: 10px; }
  .layer-dock .dock-btn{ width:32px; height:32px; border-radius:10px; }
}

/* ---- Leaflet popups for Pro Map overlays ---- */
.tdb-popup{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.tdb-pop-title{ font-weight:700; font-size:13px; margin-bottom:8px; color:#1F2933; }
.tdb-pop-rows{ display:flex; flex-direction:column; gap:6px; }
.tdb-pop-row{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.tdb-pop-k{ color:#6B7280; }
.tdb-pop-v{ color:#1F2933; text-align:right; max-width:260px; overflow:visible; text-overflow:clip; white-space:normal; word-break:normal; overflow-wrap:anywhere; }
.tdb-pop-v-long{ text-align:left; max-width:260px; }
.tdb-pop-empty{ font-size:12px; color:#6B7280; }

/* Make popups readable: avoid ultra-narrow tall boxes */
.leaflet-popup-content{
  min-width: 320px;
  max-width: 420px;
}
@media (max-width: 520px){
  .leaflet-popup-content{ min-width: 240px; max-width: calc(100vw - 24px); }
  .leaflet-popup-content-wrapper{ min-width: 240px; max-width: calc(100vw - 24px); }
}


/* Ensure popups are readable (avoid ultra-thin stacked-letter boxes) */
.leaflet-popup-content-wrapper {
  min-width: 320px;
  max-width: 480px;
}

.leaflet-popup-content {
  margin: 10px 12px;
}

/* ---- Interaction guard: keep base map clickable under overlays ----
   Canvas/SVG overlays can cover the full map viewport and steal pointer events,
   which breaks country clicks in Risk/Hotspots after interacting with markers.
   We allow pointer events ONLY on interactive leaflets (markers/paths), while
   the overlay surfaces themselves remain transparent to clicks.
*/
/*
  Interaction safety:
  Leaflet's canvas renderer inserts a full-viewport <canvas> into the overlays pane.
  That canvas can swallow clicks intended for the base choropleth/country polygons.
  We ONLY disable pointer events on canvases; SVG vectors remain interactive.
*/
.leaflet-overlays-pane canvas{ pointer-events:none; }

/* Keep marker icons + vector paths interactive */
.leaflet-overlays-pane .leaflet-marker-icon,
.leaflet-overlays-pane .leaflet-marker-shadow{ pointer-events:auto; }
.leaflet-overlays-pane .leaflet-interactive{ pointer-events:auto; }

/* Extra hardening for our FIRMS canvas renderer container (class added in JS) */
.leaflet-overlays-pane canvas.tdb-firms-canvas{ pointer-events:none !important; }

.intel-popup .kv .k {
  white-space: nowrap;
}

.intel-popup .kv .v {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ── Mobile polish pass ── */

/* Layer dock: on tablet (769-900px) move to right side to avoid legend overlap at bottom-left.
   On phone (≤768px) hide entirely — panel is static below map, controls are in mobile menus. */
@media (max-width: 900px) and (min-width: 769px){
  .layer-dock{
    left: auto;
    right: 12px;
    bottom: 12px;
  }
}
@media (max-width: 768px){
  .layer-dock{ display:none !important; }
}

/* Prevent body horizontal overflow on map page */
body{ overflow-x: hidden; }

/* Topbar on very small screens: allow wrapping so brand + back link stack */
@media (max-width: 480px){
  .topbar{
    flex-wrap: wrap;
    gap: 8px;
  }
  .back{
    font-size: 11px;
    padding: 6px 8px;
  }
  .brand .sub{
    font-size: 10px;
  }
}

/* Map popup: ensure readable on phones without horizontal scroll */
@media (max-width: 480px){
  .leaflet-popup-content-wrapper,
  .leaflet-popup-content{
    min-width: 0;
    max-width: calc(100vw - 20px);
  }
  .tdb-pop-row{
    flex-direction: column;
    gap: 2px;
  }
  .tdb-pop-v{
    text-align: left;
  }
}

/* Panel body on mobile: allow natural height scroll without fixed max-height clips */
@media (max-width: 768px){
  .panel-body{
    max-height: none;
    overflow: visible;
  }
}

/* Meterwrap on very small screens: reduce padding */
@media (max-width: 480px){
  .meterwrap{
    padding: 8px 10px;
    border-radius: 12px;
  }
  .meter-title{
    font-size: 10px;
  }
}


/* Ensure popups are readable and don't collapse into thin columns */
.leaflet-popup-content{
  min-width: 320px;
  max-width: 480px;
}
.tdb-pop-v{
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Map overlay icons (points) */
.tdb-layer-icon{
  color: var(--navy);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* Give key layers distinct, readable colors */
.tdb-layer-strategic_waterways{ color: #F59E0B; }
.tdb-layer-fires_firms{ color: #B11F1F; }
.tdb-layer-air_traffic{ color: #22D3EE; }
.tdb-layer-natural_events{ color: #2563EB; }
.tdb-layer-conflicts{ color: #DC2626; }
.tdb-layer-economic_centers{ color: #16A34A; }
.tdb-layer-critical_minerals{ color: #A16207; }


/* ------------------------------------------------------------------
   Pro Map: inline-SVG marker icons (no default blue circles)
------------------------------------------------------------------ */
.tdb-layer-icon{
  color: var(--navy);
  line-height: 0;
}
.tdb-layer-icon svg{ display:block; }

.tdb-layer-strategic_waterways{ color: #F59E0B; }

.tdb-layer-fires_firms{
  color: var(--red);
}
.tdb-layer-fires_firms svg{
  filter: drop-shadow(0 0 2px rgba(139,30,30,.28));
}

.tdb-layer-air_traffic{
  color: #22D3EE;
}
.tdb-layer-air_traffic .tdb-icon-wrap svg{
  transform: rotate(var(--rot));
  transform-origin: 50% 50%;
}

/* Subtle ring + hover (no transform — conflicts with zoom scale on .tdb-icon-wrap) */
.tdb-layer-strategic_waterways .tdb-icon-wrap{
  box-shadow: 0 0 0 1.5px rgba(245,158,11,0.40);
  border-radius: 3px;
}
.tdb-layer-air_traffic .tdb-icon-wrap{
  box-shadow: 0 0 0 1.5px rgba(34,211,238,0.35);
  border-radius: 3px;
}
.tdb-layer-strategic_waterways:hover .tdb-icon-wrap,
.tdb-layer-air_traffic:hover .tdb-icon-wrap{
  filter: brightness(1.25);
}

/* Lightweight zoom-based scaling (CSS only, avoids per-marker JS). */
#map[data-zoom="1"] .tdb-layer-icon .tdb-icon-wrap,
#map[data-zoom="2"] .tdb-layer-icon .tdb-icon-wrap{ transform: scale(0.75); }
#map[data-zoom="3"] .tdb-layer-icon .tdb-icon-wrap,
#map[data-zoom="4"] .tdb-layer-icon .tdb-icon-wrap{ transform: scale(0.85); }
#map[data-zoom="5"] .tdb-layer-icon .tdb-icon-wrap,
#map[data-zoom="6"] .tdb-layer-icon .tdb-icon-wrap{ transform: scale(1.0); }
#map[data-zoom="7"] .tdb-layer-icon .tdb-icon-wrap,
#map[data-zoom="8"] .tdb-layer-icon .tdb-icon-wrap{ transform: scale(1.15); }
#map[data-zoom="9"] .tdb-layer-icon .tdb-icon-wrap,
#map[data-zoom="10"] .tdb-layer-icon .tdb-icon-wrap{ transform: scale(1.25); }

/* Dock button SVG styling */
.dock-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color: var(--navy);
}
.dock-icon-base{ color: var(--navy); }
.dock-icon-risk{ color: var(--red); }
.dock-icon-fire{ color: var(--red); }
.dock-icon-air{ color: #22D3EE; }
.dock-icon-waterway{ color: #F59E0B; }
.dock-icon-fire svg{ filter: drop-shadow(0 0 2px rgba(139,30,30,.28)); }

/* Legend layer icons */
.legend-section{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.legend-subtitle{ font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.legend-layer-item{ display:flex; align-items:center; gap:8px; }
.legend-layer-item .legend-icon{
  width:16px; height:16px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--navy);
}
.legend-icon-fire{ color: var(--red); }
.legend-icon-air{ color: #22D3EE; }
.legend-icon-waterway{ color: #F59E0B; }
.legend-icon-conflict svg{ width:14px; height:14px; }

.legend-icon-fire svg{ filter: drop-shadow(0 0 2px rgba(139,30,30,.28)); }
.legend-layer-item.is-off{ opacity: .55; }


.dock-icon-minerals{ color: #A16207; }
.dock-icon-minerals svg{ filter: drop-shadow(0 0 2px rgba(161,98,7,.22)); }
.legend-icon-minerals{ color: #A16207; }

/* ── Resources layer ─────────────────────────────────────── */
.dock-icon-resources{ color: #1B6B3A; }
.dock-icon-resources svg{ filter: drop-shadow(0 0 2px rgba(27,107,58,.22)); }
.legend-icon-resources{ color: #1B6B3A; }
.tdb-layer-resources{ color: #1B6B3A; }
.tdb-layer-resources svg{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }

/* Resources popup (Defense Brief card style) */
.tdb-res-popup .tdb-pop-title{
  font-size: 13px;
  font-weight: 800;
  color: #0B1F33;
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.tdb-res-head{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(11,31,51,.08);
}
.tdb-res-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tdb-res-item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(11,31,51,.06);
}
.tdb-res-item:last-child{ border-bottom: none; }
.tdb-res-name{
  color: #6B7280;
  font-weight: 700;
  flex-shrink: 0;
}
.tdb-res-val{
  color: #1F2933;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Leaflet popup container overrides for the resources popup */
.tdb-res-leaflet-popup .leaflet-popup-content-wrapper{
  border-radius: 10px;
  border: 1px solid rgba(11,31,51,.12);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 0;
}
.tdb-res-leaflet-popup .leaflet-popup-content{
  margin: 12px 14px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.civic-loading{padding:10px;font-size:12px;color:rgba(31,41,51,0.75);}

.civic-subtitle{ background: transparent; border: none; padding: 0;
  margin-top:2px;
  font-size:12px;
  color: rgba(31,41,51,0.72);
}
.civic-nodata{
  padding: 10px 10px;
  font-size: 12px;
  color: rgba(31,41,51,0.72);
}


/* Civic elections panel refinements (panel-only; no map markers) */
.civic-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:1px solid rgba(11,31,51,0.10);
  border-radius:10px;
  background:#fff;
}
.civic-item:hover{ background: rgba(11,31,51,0.03); }
.civic-accent{
  width:4px;
  border-radius:999px;
  background: var(--red);
  flex:0 0 auto;
  align-self:stretch;
}
.civic-row1{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.civic-date{
  font-size:11px;
  font-weight:800;
  color: var(--slate);
  white-space:nowrap;
}
.civic-meta{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  color: var(--slate);
}
.civic-dot{ display:none; }


/* --- UI polish overrides --- */
.topbar{padding:14px 18px;gap:16px;background:rgba(255,255,255,.94);z-index:1200;}
.brand .wordmark{font-size:13px;letter-spacing:.12em;}
.brand .sub{font-size:12px;letter-spacing:.1em;}
.back{font-size:13px;padding:10px 14px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.back:hover{background:#f8fafc;border-color:rgba(11,31,51,.24);}
.back:focus-visible,.mode-btn:focus-visible,.legend-toggle:focus-visible,.menu-trigger:focus-visible,.menu-item:focus-visible,.panel-close:focus-visible,.layer-dock .dock-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(11,31,51,.14);border-color:rgba(11,31,51,.28);}
.shell{padding:18px;max-width:1600px;}
.status{font-size:13px;margin-bottom:12px;}
.mapcard{box-shadow:0 16px 30px rgba(11,31,51,.08);}
.panel{max-height:100%;}
.panel-head{padding:12px 12px 12px 14px;}
.panel-title{font-size:14px;letter-spacing:.04em;}
.panel-body{padding:14px;gap:12px;font-size:13px;line-height:1.55;overflow:auto;}
.kv{padding:8px 0;}
.k{font-size:11px;}
.v{line-height:1.45;}
.mode-btn{min-height:40px;padding:10px 14px;font-size:13px;font-weight:700;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;}
.mode-btn:hover{background:#fff;border-color:rgba(11,31,51,.22);}
.mode-btn.is-active{box-shadow:0 0 0 2px rgba(11,31,51,.08);}
.map-overlay-top,.map-overlay-bottom{gap:8px;padding:10px 12px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid rgba(11,31,51,.1);border-radius:14px;box-shadow:0 8px 20px rgba(11,31,51,.08);}
.map-overlay-bottom{bottom:16px;}
.map-overlay-top{top:16px;}
.map-legend{bottom:16px;left:16px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(11,31,51,.08);}
.map-legend .legend-title{font-size:12px;margin-bottom:10px;}
.map-legend .legend-item{font-size:13px;line-height:1.4;}
.map-mobile-menus .menu-trigger,.legend-toggle{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.map-mobile-menus .menu-trigger:hover,.legend-toggle:hover{background:#fff;border-color:rgba(11,31,51,.24);}
.map-mobile-menus .menu-pop{background:#fff;}
.map-mobile-menus .menu-item{font-size:13px;}
.layer-dock{left:16px;top:132px;bottom:auto;border-radius:14px;padding:12px;background:rgba(255,255,255,.94);}
.layer-dock .dock-btn{width:38px;height:38px;border-radius:12px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
@media (max-width: 768px){
  .shell{padding:12px;}
  .topbar{padding:12px 14px;}
  .mapwrap{border-radius:16px;}
  .map-mobile-menus{top:14px;right:14px;}
  .map-legend{left:12px !important;bottom:12px !important;}
  .panel{margin-top:0;border-radius:0 0 16px 16px;}
  .panel-close{display:none;}
}
@media (max-width: 480px){
  .brand .wordmark{font-size:12px;}
  .brand .sub{font-size:11px;}
  .mode-btn{font-size:12px;}
}


/* --- Country brief polish --- */
.panel-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.panel-eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:rgba(31,41,51,.56);}
.panel-title{line-height:1.35;max-width:24ch;}
.panel-empty{padding:14px 15px;border:1px dashed rgba(11,31,51,.12);border-radius:14px;background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(244,246,248,.88));}
.panel-rows{display:flex;flex-direction:column;gap:10px;}
.panel-row,.panel-rows .row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid rgba(11,31,51,.08);}
.panel-row:first-child,.panel-rows .row:first-child{border-top:none;padding-top:0;}
.panel-row .k,.panel-rows .row .k{color:var(--slate);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10px;}
.panel-row .v,.panel-rows .row .v{color:var(--char);font-weight:700;line-height:1.5;}
.panel-footnote{margin-top:10px;padding-top:10px;border-top:1px solid rgba(11,31,51,.08);font-size:12px;line-height:1.6;color:var(--slate);}
.panel-body::-webkit-scrollbar{width:10px;}
.panel-body::-webkit-scrollbar-thumb{background:rgba(11,31,51,.14);border-radius:999px;border:3px solid #fff;}
.panel-body::-webkit-scrollbar-track{background:transparent;}
.layer-dock .dock-btn:hover{box-shadow:0 8px 18px rgba(11,31,51,.10);}
.map-legend .legend-item,.map-legend .legend-row{line-height:1.45;}
@media (max-width: 768px){
  .panel-row,.panel-rows .row{grid-template-columns:110px 1fr;}
  .panel-title{max-width:none;}
}


/* Credibility polish overrides */
body{background:linear-gradient(180deg,#e9edf3 0,#f4f6f8 220px);}
.topbar{padding:14px 18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,246,248,.96));box-shadow:0 10px 24px rgba(11,31,51,.05);}
.brand .wordmark{font-size:11px;letter-spacing:.22em;color:rgba(11,31,51,.74);}
.brand .sub{margin-top:6px;font-size:16px;letter-spacing:.08em;color:#0B1F33;}
.back{padding:10px 14px;border-radius:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px rgba(11,31,51,.05);}
.shell{max-width:1600px;padding:16px;}
.meterwrap{margin-bottom:12px;}
.map-meter{border-radius:16px;background:linear-gradient(180deg,#fff 0,#f8fafc 100%);box-shadow:0 10px 24px rgba(11,31,51,.05);}
.meter-head{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(11,31,51,.08);}
.meter-title{font-size:11px;letter-spacing:.2em;color:rgba(11,31,51,.74);}
.mapcard{box-shadow:0 18px 34px rgba(11,31,51,.08);border-color:rgba(11,31,51,.11);}
.mapwrap{background:linear-gradient(180deg,#fdfefe 0,#f7f9fb 100%);}
.mapwrap::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,51,.02),rgba(11,31,51,0) 28%);pointer-events:none;z-index:0;}
.map-overlay-top,.map-overlay-bottom{background:rgba(255,255,255,.94);border:1px solid rgba(11,31,51,.1);box-shadow:0 12px 24px rgba(11,31,51,.08);border-radius:16px;}
.mode-btn{position:relative;min-height:40px;padding:10px 15px;border-radius:12px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.mode-btn.is-active{background:#0B1F33;color:#fff;border-color:#0B1F33;box-shadow:0 8px 18px rgba(11,31,51,.16);}
.map-legend{border-radius:18px;border:1px solid rgba(11,31,51,.1);background:rgba(255,255,255,.96);box-shadow:0 14px 28px rgba(11,31,51,.08);}
.map-legend .legend-head{padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid rgba(11,31,51,.08);}
.map-legend .legend-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(11,31,51,.74);}
.map-legend .legend-item{font-size:12px;color:rgba(31,41,51,.84);}
.panel{border-color:rgba(11,31,51,.12);}
.panel-head{padding:14px 14px 12px 16px;background:linear-gradient(180deg,#ffffff 0,#f7f9fb 100%);}
.panel-eyebrow{font-size:10px;letter-spacing:.22em;color:rgba(11,31,51,.56);}
.panel-title{margin-top:4px;font-size:18px;line-height:1.2;letter-spacing:-.02em;text-transform:none;}
.panel-body{padding:14px 16px 16px;gap:12px;font-size:13px;line-height:1.6;overflow-y:auto;flex:1 1 auto;min-height:0;}
.kv{grid-template-columns:108px 1fr;padding:9px 0;border-top:1px solid rgba(11,31,51,.07);}
.k{font-size:10px;letter-spacing:.18em;color:rgba(11,31,51,.48);}
.v{font-weight:600;color:rgba(31,41,51,.92);}
.panel-empty{border:none;background:none;padding:20px 4px 8px;color:rgba(31,41,51,.62);font-size:13px;line-height:1.6;text-align:center;}
.layer-dock{background:rgba(255,255,255,.95);border:1px solid rgba(11,31,51,.1);box-shadow:0 12px 24px rgba(11,31,51,.08);}
@media (max-width: 768px){
  .brand .sub{font-size:14px;line-height:1.25;}
  .shell{padding:10px;}
  .panel{border-radius:0 0 18px 18px;}
}

/* ── Overlay layer icons & popups ─────────────────────────────────────── */
.overlay-div-icon { background: none; border: none; }
.overlay-div-icon svg { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.overlay-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  border: 1px solid rgba(11,31,51,.10);
  box-shadow: 0 8px 24px rgba(11,31,51,.12);
  padding: 0;
  overflow: hidden;
}
.overlay-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.overlay-popup-inner { padding: 11px 14px 12px; min-width: 160px; max-width: 270px; }
.overlay-popup-inner .op-title {
  font-size: 13px; font-weight: 700; color: #0B1F33;
  margin-bottom: 8px; line-height: 1.3;
}
.overlay-popup-inner .op-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-top: 1px solid rgba(11,31,51,.06);
  font-size: 12px; line-height: 1.4;
}
.overlay-popup-inner .op-k { color: rgba(11,31,51,.50); flex-shrink: 0; }
.overlay-popup-inner .op-v { font-weight: 600; color: rgba(11,31,51,.88); text-align: right; }

/* ── Mobile header compact: reclaim map viewport ────────────────────────── */
@media (max-width: 640px) {
  /* Map mobile menus: ensure no overlap with compact header */
  .map-mobile-menus {
    top: calc(var(--db-header-height, 56px) + 10px);
    right: 10px;
  }
  /* Increase touch targets to 44px minimum */
  .map-mobile-menus .menu-trigger {
    min-width: 44px;
    min-height: 44px;
  }
  /* Overlay filter buttons: larger tap area */
  .map-overlay-bottom .mode-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
}