/* ── Theme variables ───────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg-deep: #0d1117;
  --bg-primary: #161b22;
  --bg-elevated: #21262d;
  --bg-tooltip: #1f2937;
  --bg-attribution: rgba(13,17,23,0.55);
  --border: #30363d;
  --border-strong: #374151;
  --text-muted: #484f58;
  --text-faint: #6e7681;
  --text-secondary: #8b949e;
  --text-body: #c9d1d9;
  --text-primary: #e6edf3;
  --text-bright: #f9fafb;
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-glow: rgba(88,166,255,0.04);
  --accent-subtle: rgba(88,166,255,0.08);
  --accent-muted: rgba(88,166,255,0.15);
  --hover-overlay: rgba(255,255,255,0.03);
  --shadow-sm: rgba(0,0,0,0.4);
  --shadow-md: rgba(0,0,0,0.5);
  --shadow-lg: rgba(0,0,0,0.6);
  --shadow-xl: rgba(0,0,0,0.7);
  --scrollbar-thumb: #30363d;
  --scrollbar-track: #0d1117;
  /* Semantic status colors */
  --gold: #f0a500;
  --gold-hover: #f0c040;
  --gold-bg: #1e1a08;
  --success: #3fb950;
  --success-bg: #1c2a1c;
  --success-border: #2ea043;
  --danger: #f85149;
  --danger-bg: rgba(218,54,51,0.13);
  --amber: #d29922;
  --info-blue: #388bfd;
  --info-bg: #1c2233;
  --info-glow: rgba(56,139,253,0.12);
  --success-glow: rgba(46,160,67,0.12);
  --purple: #a371f7;
  --purple-bg: #1a1230;
  --hover-row: #1c2128;
  --panel-inset: #0a0f14;
  --univ-gold: #e3b341;
  --trade-teal: #7be0c4;
  --admin1-active: #1f6feb;
  --bookmark-gold: #e6a817;
  --fx-modified-bg: #1f2d1f;
  --fx-modified-hover: #243024;
  --draw-active-bg: #1f2a1f;
  --palette-active-bg: #0d1f33;
  --text-dim: #3a3f47;
  /* ── Palo Alto tokens ── */
  --pa-bg: rgba(15,17,23,0.92);
  --pa-glass: rgba(30,34,44,0.65);
  --pa-glass-border: rgba(71,85,105,0.35);
  --pa-pill-bg: rgba(30,41,59,0.5);
  --pa-pill-border: rgba(71,85,105,0.35);
  --pa-pill-active-bg: rgba(79,70,229,0.25);
  --pa-pill-active-border: rgba(99,102,241,0.5);
  --pa-pill-active-text: #818cf8;
  --pa-pill-hover: rgba(51,65,85,0.5);
  --pa-section-bg: rgba(15,23,42,0.5);
  --pa-section-border: rgba(51,65,85,0.35);
  --pa-indigo: #818cf8;
  --pa-indigo-bg: rgba(79,70,229,0.15);
  --pa-indigo-border: rgba(99,102,241,0.35);
  --pa-amber: #fbbf24;
  --pa-amber-bg: rgba(245,158,11,0.12);
  --pa-amber-border: rgba(245,158,11,0.3);
  --pa-emerald: #34d399;
  --pa-emerald-bg: rgba(16,185,129,0.12);
  --pa-emerald-border: rgba(16,185,129,0.3);
  --pa-red: #f87171;
  --pa-red-bg: rgba(239,68,68,0.1);
  --pa-red-border: rgba(239,68,68,0.25);
}
[data-theme="light"] {
  color-scheme: light;
  --bg-deep: #ffffff;
  --bg-primary: #f6f8fa;
  --bg-elevated: #eaeef2;
  --bg-tooltip: #ffffff;
  --bg-attribution: rgba(255,255,255,0.75);
  --border: #d0d7de;
  --border-strong: #afb8c1;
  --text-muted: #8c959f;
  --text-faint: #6e7781;
  --text-secondary: #57606a;
  --text-body: #1f2328;
  --text-primary: #1f2328;
  --text-bright: #1f2328;
  --accent: #0969da;
  --accent-hover: #0550ae;
  --accent-glow: rgba(9,105,218,0.04);
  --accent-subtle: rgba(9,105,218,0.08);
  --accent-muted: rgba(9,105,218,0.15);
  --hover-overlay: rgba(0,0,0,0.03);
  --shadow-sm: rgba(0,0,0,0.12);
  --shadow-md: rgba(0,0,0,0.15);
  --shadow-lg: rgba(0,0,0,0.2);
  --shadow-xl: rgba(0,0,0,0.25);
  --scrollbar-thumb: #afb8c1;
  --scrollbar-track: #f6f8fa;
  /* Semantic status colors */
  --gold: #9a6700;
  --gold-hover: #7d5600;
  --gold-bg: #fff8c5;
  --success: #1a7f37;
  --success-bg: #dafbe1;
  --success-border: #1a7f37;
  --danger: #cf222e;
  --danger-bg: rgba(207,34,46,0.08);
  --amber: #9a6700;
  --info-blue: #0969da;
  --info-bg: #ddf4ff;
  --info-glow: rgba(9,105,218,0.12);
  --success-glow: rgba(26,127,55,0.12);
  --purple: #8250df;
  --purple-bg: #fbefff;
  --hover-row: #f3f4f6;
  --panel-inset: #f0f2f5;
  --univ-gold: #9a6700;
  --trade-teal: #0969da;
  --admin1-active: #0969da;
  --bookmark-gold: #9a6700;
  --fx-modified-bg: #dafbe1;
  --fx-modified-hover: #c2f0cc;
  --draw-active-bg: #dafbe1;
  --palette-active-bg: #ddf4ff;
  --text-dim: #8c959f;
  /* ── Palo Alto tokens (light) ── */
  --pa-bg: rgba(255,255,255,0.94);
  --pa-glass: rgba(241,245,249,0.75);
  --pa-glass-border: rgba(203,213,225,0.5);
  --pa-pill-bg: rgba(226,232,240,0.5);
  --pa-pill-border: rgba(203,213,225,0.6);
  --pa-pill-active-bg: rgba(99,102,241,0.1);
  --pa-pill-active-border: rgba(99,102,241,0.35);
  --pa-pill-active-text: #4f46e5;
  --pa-pill-hover: rgba(203,213,225,0.6);
  --pa-section-bg: rgba(241,245,249,0.7);
  --pa-section-border: rgba(203,213,225,0.5);
  --pa-indigo: #4f46e5;
  --pa-indigo-bg: rgba(99,102,241,0.08);
  --pa-indigo-border: rgba(99,102,241,0.2);
  --pa-amber: #92400e;
  --pa-amber-bg: rgba(245,158,11,0.08);
  --pa-amber-border: rgba(245,158,11,0.2);
  --pa-emerald: #059669;
  --pa-emerald-bg: rgba(16,185,129,0.08);
  --pa-emerald-border: rgba(16,185,129,0.2);
  --pa-red: #dc2626;
  --pa-red-bg: rgba(239,68,68,0.06);
  --pa-red-border: rgba(239,68,68,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 48px;
}

/* ── Global custom scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Basemap selector ── */
#basemap-select {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); border-radius: 14px;
  color: var(--text-body); font-size: 0.72rem; padding: 4px 10px; cursor: pointer;
  font-weight: 500;
}
#basemap-select:hover { border-color: var(--pa-glass-border); }

/* ── Theme toggle ── */
#theme-toggle {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); border-radius: 14px;
  cursor: pointer; font-size: 1.1rem; padding: 4px 8px; line-height: 1;
  color: var(--text-secondary); transition: all 0.2s;
}
#theme-toggle:hover { background: var(--pa-pill-hover); border-color: var(--pa-glass-border); color: var(--text-primary); }

/* ── Unified topbar ── */
#topbar {
  width: 100%; max-width: 1000px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; flex-wrap: wrap;
  background: var(--pa-bg); border: 1px solid var(--pa-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 10px; padding: 6px 10px; margin-bottom: 10px;
  box-shadow: 0 2px 12px var(--shadow-md);
  position: relative; z-index: 1050;
}
#topbar-left {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#topbar-right {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#topbar-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; letter-spacing: -0.01em; margin: 0;
}
.topbar-sep {
  width: 1px; height: 18px; background: var(--border); flex-shrink: 0;
}
#topbar label { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }

.panel { width: 100%; max-width: 1000px; }

/* ── Map ── */
#map-wrapper { position: relative; width: 100%; max-width: 1000px; }
#map-container {
  width: 100%; height: 580px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; touch-action: manipulation;
  box-shadow: 0 4px 24px var(--shadow-md), 0 0 0 1px var(--accent-glow);
}

/* ── City search overlay ── */
#city-search-box {
  position: absolute; top: 10px; left: 50px; z-index: 1000;
  width: 260px; font-size: 0.85rem;
}
#city-search-inner {
  display: flex; align-items: center; gap: 6px;
  background: var(--pa-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--pa-glass-border); border-radius: 14px;
  padding: 6px 10px; box-shadow: 0 2px 10px var(--shadow-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#city-search-inner:focus-within {
  border-color: var(--pa-indigo-border);
  box-shadow: 0 0 0 2px var(--pa-indigo-bg), 0 2px 10px var(--shadow-md);
}
#city-search-icon { color: var(--text-secondary); flex-shrink: 0; }
#city-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 0.85rem; min-width: 0;
}
#city-search-input::placeholder { color: var(--text-muted); }
#city-search-clear {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.75rem; padding: 0; line-height: 1; display: none;
}
#city-search-clear:hover { color: var(--text-secondary); }
#city-search-results {
  list-style: none; margin: 4px 0 0; padding: 0;
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px var(--shadow-lg); overflow: hidden;
  display: none; max-height: 320px; overflow-y: auto;
}
#city-search-results li {
  padding: 8px 12px; cursor: pointer; display: flex;
  align-items: baseline; gap: 8px; border-bottom: 1px solid var(--bg-elevated);
}
#city-search-results li:last-child { border-bottom: none; }
#city-search-results li:hover, #city-search-results li.selected {
  background: var(--bg-elevated);
}
.csr-name { color: var(--text-primary); font-weight: 500; flex-shrink: 0; }
.csr-name em { color: var(--accent); font-style: normal; }
.csr-meta { color: var(--text-secondary); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Leaflet dark theme ── */
.leaflet-container { background: var(--bg-deep) !important; font-family: 'Segoe UI', system-ui, sans-serif; }
.leaflet-control-zoom a { background: var(--bg-elevated) !important; color: var(--text-body) !important; border-color: var(--border) !important; }
.leaflet-control-zoom a:hover { background: var(--border) !important; color: var(--accent) !important; }
.leaflet-bar { border-color: var(--border) !important; box-shadow: 0 2px 8px var(--shadow-md) !important; }
.leaflet-control-attribution { background: var(--bg-attribution) !important; color: var(--text-muted) !important; font-size: 0.6rem !important; z-index: 400 !important; padding: 1px 5px !important; opacity: 0.5; transition: opacity 0.2s; }
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: var(--text-secondary) !important; }
.leaflet-bottom { z-index: 400 !important; }
/* Keep zoom control behind left sidebars */
.leaflet-top.leaflet-left { z-index: 990 !important; }
.leaflet-tooltip {
  background: color-mix(in srgb, var(--bg-primary) 90%, transparent) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important; color: var(--text-bright) !important;
  font-size: 0.85rem !important; padding: 8px 12px !important;
  box-shadow: 0 4px 12px var(--shadow-md) !important;
  pointer-events: auto; max-width: 260px;
}
.leaflet-tooltip::before { display: none; }

/* ── City popup (click-to-open, stays open) ── */
.leaflet-popup-content-wrapper {
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important; color: var(--text-bright) !important;
  font-size: 0.85rem !important; box-shadow: 0 8px 32px var(--shadow-xl) !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 12px 16px !important; line-height: 1.6;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-close-button {
  color: var(--text-secondary) !important; font-size: 1.1rem !important;
  top: 6px !important; right: 8px !important;
}
.leaflet-popup-close-button:hover { color: var(--text-bright) !important; }


/* ── Wikipedia sidebar ── */
#wiki-sidebar {
  position: fixed; top: 0; right: -440px; width: 420px; height: 100vh;
  background: var(--bg-primary); border-left: 1px solid var(--border);
  z-index: 1060; display: flex; flex-direction: column;
  transition: right 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px var(--shadow-lg); overflow: hidden;
}
#wiki-sidebar.open { right: 0; }

#wiki-sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-deep); flex-shrink: 0;
}
#wiki-sidebar-title {
  flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.75rem;
}
#wiki-sidebar-close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.4rem;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
#wiki-sidebar-close:hover { color: var(--text-primary); }

#wiki-sidebar-tabs {
  display: flex; gap: 2px; padding: 6px 12px 0;
  background: var(--bg-deep); border-bottom: 1px solid var(--border); flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden;
}
#wiki-sidebar-tabs::-webkit-scrollbar { height: 0; }
.wiki-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-faint); font-size: 0.77rem; font-weight: 500;
  padding: 5px 10px 6px; cursor: pointer; border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0;
}
.wiki-tab:hover { color: var(--text-body); background: var(--hover-overlay); }
.wiki-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

#wiki-sidebar-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  /* fade-out mask at the bottom before footer */
  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
}

/* Loading state */
.wiki-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 48px 16px;
  color: var(--text-secondary); font-size: 0.85rem;
}
/* Error state */
.wiki-error {
  padding: 32px 20px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6;
}
.wiki-error a { color: var(--accent); }

/* Infobox image — single photo fallback */
.wiki-img {
  width: 100%; max-height: 220px; object-fit: cover;
  display: block;
}

/* Scrollable photo strip — multiple images */
.wiki-img-strip {
  display: flex;
  overflow-x: auto;
  gap: 3px;
  height: 200px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-deep);
}
.wiki-img-strip img {
  height: 100%;
  width: auto;
  min-width: 80px;
  max-width: 320px;
  object-fit: cover;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: zoom-in;
  display: block;
}
.wiki-img-strip img:hover { opacity: 0.88; }
.wiki-img-strip::-webkit-scrollbar { height: 3px; }
.wiki-img-strip::-webkit-scrollbar-track { background: var(--bg-deep); }
.wiki-img-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── IYChart interactive chart components ── */
.iyc-range-row { display:flex; gap:4px; padding:6px 14px 2px; flex-wrap:wrap; }
.iyc-range { background:none; border:1px solid var(--border); color:var(--text-secondary); font-size:0.68rem; padding:2px 7px; border-radius:4px; cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.iyc-range:hover { border-color:var(--accent); color:var(--text-body); }
.iyc-range.active { background:var(--bg-elevated); border-color:var(--accent); color:var(--accent); font-weight:600; }
.iyc-tooltip { position:absolute; pointer-events:none; z-index:10; background:var(--bg-primary); border:1px solid var(--border); border-radius:5px; padding:4px 8px; font-size:0.72rem; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.iyc-tt-x { color:var(--text-secondary); }
.iyc-tt-v { color:var(--text-primary); font-weight:600; margin-left:4px; }
.iyc-tt-p { margin-left:4px; }

/* City title block */
.wiki-city-header { padding: 10px 14px 0; }
.wiki-city-name { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.wiki-city-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; font-style: italic; }

/* Data table */
.wiki-info-table {
  width: 100%; border-collapse: collapse; margin: 4px 0 0;
  font-size: 0.8rem;
}
.wiki-info-table tr { border-top: 1px solid var(--bg-elevated); }
.wiki-info-table tr:first-child { border-top: none; }
.wiki-info-label {
  color: var(--text-secondary); padding: 5px 10px 5px 14px;
  width: 38%; vertical-align: top; white-space: nowrap;
  font-weight: 500;
}
.wiki-info-val {
  color: var(--text-body); padding: 5px 14px 5px 0; vertical-align: top;
}
.wiki-info-val a { color: var(--accent); text-decoration: none; word-break: break-all; }
.wiki-info-val a:hover { text-decoration: underline; }
.wiki-info-section-head {
  background: var(--bg-deep); color: var(--text-faint); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 14px 5px 10px; border-top: 1px solid var(--bg-elevated);
  border-left: 3px solid var(--border);
}

/* Image carousel */
.wiki-carousel { position: relative; background: #000; overflow: hidden; flex-shrink: 0; }
.wiki-carousel-img {
  width: 100%; height: 230px; object-fit: cover; display: block;
  cursor: zoom-in; transition: opacity 0.35s ease;
}
.wiki-carousel-img.fade { opacity: 0; }
.wiki-car-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.wiki-car-btn {
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 1.2rem; cursor: pointer; border-radius: 50%;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: flex; align-items: center;
  justify-content: center; line-height: 1; flex-shrink: 0;
  transition: background 0.15s;
}
.wiki-car-btn:hover { background: rgba(0,0,0,0.75); }
.wiki-car-dots { display: flex; gap: 5px; align-items: center; }
.wiki-car-dot {
  width: 12px; height: 12px; min-width: 12px; min-height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 16px;
  margin: -16px; transition: background 0.2s, transform 0.2s;
}
.wiki-car-dot.active { background: #fff; transform: scale(1.3); }
.wiki-car-counter {
  position: absolute; top: 8px; right: 10px;
  background: var(--shadow-md); color: rgba(255,255,255,0.8);
  font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; pointer-events: none;
}

/* Lightbox */
#wiki-lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  z-index: 20000; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
}
#wiki-lightbox.open { display: flex; }
#wiki-lightbox img {
  max-width: 92vw; max-height: 85vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  font-size: 1.8rem; cursor: pointer; padding: 8px 16px;
  border-radius: 4px; line-height: 1;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
#lightbox-prev { left: 12px; }
#lightbox-next { right: 12px; }
#lightbox-close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; color: #fff; font-size: 2rem;
  cursor: pointer; line-height: 1; opacity: 0.7;
}
#lightbox-close:hover { opacity: 1; }
#lightbox-counter { color: var(--text-secondary); font-size: 0.82rem; }

/* Climate chart */
.wiki-climate-wrap { padding: 12px 16px; border-top: 1px solid var(--border); }
.wiki-climate-head { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.climate-col { cursor: default; }
.climate-col-bg { fill: transparent; transition: fill 0.12s; }
.climate-col:hover .climate-col-bg { fill: rgba(255,255,255,0.06); }
.climate-mon-abbr { transition: opacity 0.12s; }
.climate-col:hover .climate-mon-abbr { opacity: 0; }
.climate-mon-full { opacity: 0; transition: opacity 0.12s; }
.climate-col:hover .climate-mon-full { opacity: 1; }
.clim-legend { font-size: 0.63rem; color: var(--text-secondary); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.clim-swatch { display: inline-block; width: 10px; height: 7px; border-radius: 1px; vertical-align: middle; margin-right: 2px; }
.clim-line-swatch { display: inline-block; width: 12px; height: 2px; background: #ffa657; border-radius: 1px; vertical-align: middle; margin-right: 2px; }

/* ── US Census section ── */
.census-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; font-size: 0.75rem; color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
@keyframes census-spin { to { transform: rotate(360deg); } }
.census-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: census-spin 0.8s linear infinite; flex-shrink: 0;
}
.census-wrap {
  padding: 12px 16px 14px; border-top: 1px solid var(--border);
}
.census-head {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px;
}
.census-subtitle {
  font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500;
}
.census-chart-wrap { margin-bottom: 10px; }
.census-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bg-elevated);
}
/* Two-column layout for merged Economy tab */
.econ-two-col {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 6px;
}
.econ-col-left  { flex: 0 0 auto; min-width: 0; }
.econ-col-right { flex: 1; min-width: 0; }
.econ-right-grid {
  grid-template-columns: 1fr 1fr !important;
  margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; gap: 4px 6px !important;
}
.census-stat { display: flex; flex-direction: column; gap: 1px; }
.census-stat-label { font-size: 0.67rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.census-stat-value { font-size: 0.82rem; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; }
.census-stat-value.census-gold { color: var(--gold); }
.census-stat-value.census-amber { color: #ffa657; }
.census-stat-value.census-red { color: var(--danger); }
.census-stat-value.census-green { color: var(--success); }
.census-source {
  margin-top: 10px; font-size: 0.67rem; color: var(--text-muted); line-height: 1.5;
}

/* Extract */
.wiki-extract-wrap { padding: 14px 16px; border-top: 1px solid var(--border); }
.wiki-extract-head { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.wiki-extract { font-size: 0.83rem; line-height: 1.7; color: var(--text-body); }
.wiki-extract.collapsed { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wiki-expand-btn { background: none; border: none; color: var(--accent); font-size: 0.8rem; cursor: pointer; padding: 6px 0 0; display: block; font-family: inherit; }
.wiki-expand-btn:hover { text-decoration: underline; }

/* Footer links */
#wiki-sidebar-footer {
  padding: 10px 14px; border-top: 1px solid var(--bg-elevated);
  background: var(--bg-deep); flex-shrink: 0;
  display: flex; flex-direction: row; align-items: center;
  flex-wrap: wrap; gap: 6px;
}
.wiki-footer-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-size: 0.78rem; text-decoration: none;
  background: var(--bg-primary); border: 1px solid var(--bg-elevated); border-radius: 6px;
  padding: 3px 9px; transition: border-color 0.15s, background 0.15s;
}
.wiki-footer-link:hover { border-color: var(--info-blue); background: var(--info-bg); text-decoration: none; }
.wiki-cache-note { font-size: 0.68rem; color: var(--text-muted); margin-left: auto; }

/* ── Loading overlay ── */
#loading-overlay {
  display: none; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; z-index: 1000;
}
#loading-overlay.visible { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text  { font-size: 0.9rem; color: var(--text-secondary); }
#loading-error { font-size: 0.85rem; color: var(--danger); display: none; }

/* ── Skeleton loading shimmer ── */
.skeleton {
  background: var(--bg-elevated);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--hover-overlay) 40%, var(--bg-elevated) 60%, transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-text { height: 0.75rem; margin-bottom: 8px; }
.skeleton-text-sm { height: 0.6rem; margin-bottom: 6px; }
.skeleton-text-lg { height: 1rem; margin-bottom: 10px; }
.skeleton-img { height: 180px; margin-bottom: 10px; border-radius: 6px; }
.skeleton-chip { height: 56px; border-radius: 8px; margin-bottom: 6px; }
.skeleton-block { padding: 12px 16px; }

/* ── Keyboard help overlay ── */
.keyboard-help-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
}
.keyboard-help-card {
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 32px; min-width: 320px; box-shadow: 0 16px 48px var(--shadow-xl);
}
.keyboard-help-card h3 { margin-bottom: 16px; font-size: 1rem; color: var(--text-primary); }
.kb-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.82rem; color: var(--text-body); }
.kb-row kbd {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; font-family: inherit; font-size: 0.75rem; color: var(--text-primary);
  min-width: 28px; text-align: center;
}
.keyboard-help-card button {
  margin-top: 16px; width: 100%; padding: 8px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text-body);
  cursor: pointer; font-size: 0.82rem;
}
.keyboard-help-card button:hover { border-color: var(--accent); color: var(--accent); }

/* ── ISS tracker icon ── */
.iss-icon { background: none !important; border: none !important; }

/* ── Legend ── */
/* ── Map legends overlay (bottom-left) ── */
#map-legends {
  position: absolute; bottom: 10px; left: 10px; z-index: 900;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
#map-legends > div {
  pointer-events: auto;
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.72rem; color: var(--text-faint);
  box-shadow: 0 2px 8px var(--shadow-sm);
}
#wiki-legend, #choro-legend, #econ-legend-inline {
  display: none;
}
.wiki-legend-title { font-size: 0.75rem; color: var(--text-faint); }
.legend-gradient-row { display: flex; align-items: center; gap: 8px; }
.legend-end-label { font-size: 0.72rem; color: var(--text-faint); }
.legend-ramp {
  width: 300px; height: 10px; border-radius: 5px;
  background: linear-gradient(to right,
    rgb(80,50,200), rgb(40,120,255), rgb(20,200,210),
    rgb(80,220,80), rgb(250,210,30), rgb(250,120,20), rgb(240,30,30));
}
.legend-tick-row {
  width: 300px; display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--text-faint); padding: 0 2px;
}
.legend-tick-row {
  width: 300px; display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--text-faint); padding: 0 2px;
}

/* ── Stats ── */
.stats {
  margin-top: 10px; display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center; font-size: 0.82rem; color: var(--text-secondary);
  padding: 8px 16px; background: var(--bg-primary); border: 1px solid var(--bg-elevated);
  border-radius: 8px; width: 100%; max-width: 1000px;
}
.stat-item  { display: flex; align-items: center; gap: 6px; }
.stat-value { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.data-source { margin-top: 8px; font-size: 0.7rem; color: var(--text-muted); }

/* ── List tabs ── */
#list-tabs {
  display: flex; gap: 0; margin-top: 16px;
  border-bottom: 2px solid var(--border);
}
.list-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 20px; font-size: 0.85rem; font-weight: 600; font-family: inherit;
  color: var(--text-faint); cursor: pointer; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.list-tab:hover { color: var(--text-secondary); }
.list-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── List panel ── */
#list-panel { margin-top: 0; border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
#list-header { background: var(--bg-primary); padding: 14px 20px; border-bottom: 1px solid var(--border); }
#list-header h2 { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.01em; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select {
  background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 6px 10px; font-size: 0.82rem; font-family: inherit; outline: none;
}
.filters input:focus, .filters select:focus { border-color: var(--accent); }
.filters input[type="text"] { flex: 1; min-width: 160px; }
.filters select { min-width: 130px; }

#list-meta { padding: 8px 20px; font-size: 0.78rem; color: var(--text-faint); background: var(--bg-deep); border-bottom: 1px solid var(--bg-elevated); display: flex; justify-content: space-between; align-items: center; }
#reset-all-btn { font-size: 0.75rem; color: var(--danger); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; display: none; }
#reset-all-btn:hover { text-decoration: underline; }

/* ── Table ── */
.table-wrap { overflow-x: auto; max-height: 480px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
thead th {
  position: sticky; top: 0; background: var(--bg-primary); color: var(--text-secondary);
  font-weight: 600; text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none;
}
thead th:hover { color: var(--text-body); }
thead th.no-sort { cursor: default; }
thead th.no-sort:hover { color: var(--text-secondary); }
thead th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
thead th.sort-desc::after { content: ' ↓'; color: var(--accent); }

tbody tr { border-bottom: 1px solid var(--bg-elevated); cursor: pointer; transition: background 0.1s; }
tbody tr:nth-child(even) { background: rgba(22,27,34,0.5); }
tbody tr:hover { background: var(--hover-row); }
tbody tr.edited-row { border-left: 2px solid #f97316; }

tbody td { padding: 9px 14px; color: var(--text-body); white-space: nowrap; }
tbody td.city-name { color: var(--text-primary); font-weight: 500; }
tbody td.city-pop  { color: var(--accent); font-variant-numeric: tabular-nums; }
tbody td.city-dot  { width: 12px; padding-right: 0; }
tbody td.city-edit { padding: 2px 4px; width: 30px; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

.edit-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 4px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer;
  font-family: inherit; line-height: 1.4; min-height: 32px; min-width: 32px;
}
.edit-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-row); }

#load-more-row td { text-align: center; padding: 14px; color: var(--text-faint); cursor: default; }
#load-more-btn { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-body); border-radius: 6px; padding: 6px 20px; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
#load-more-btn:hover { background: var(--border); border-color: var(--accent); }

/* ── Edit modal ── */
#edit-modal {
  display: none; position: fixed; inset: 0;
  background: var(--shadow-xl); z-index: 9999;
  align-items: center; justify-content: center;
}
#edit-modal.open { display: flex; }

#edit-box {
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px; width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 20px 60px var(--shadow-xl);
}
#edit-box h3 { font-size: 1rem; color: var(--text-primary); margin-bottom: 20px; }

.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.field-group input, .field-group textarea {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--border);
  color: var(--text-body); border-radius: 6px; padding: 7px 10px;
  font-size: 0.85rem; font-family: inherit; outline: none;
}
.field-group input:focus, .field-group textarea:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-actions { display: flex; gap: 8px; margin-top: 22px; align-items: center; }
.modal-actions .spacer { flex: 1; }
.btn-delete { background: none; border: 1px solid #f85149; color: var(--danger); border-radius: 6px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.btn-delete:hover { background: rgba(248,81,73,0.1); }
.btn-cancel { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-body); border-radius: 6px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.btn-cancel:hover { background: var(--border); }
.btn-save   { background: var(--admin1-active); border: 1px solid #1f6feb; color: #fff; border-radius: 6px; padding: 7px 18px; font-size: 0.82rem; cursor: pointer; font-family: inherit; font-weight: 600; }
.btn-save:hover { background: var(--info-blue); }

/* ── Census controls (inside filter panel) ── */
#census-color-bar {
  display: none; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 12px 6px; background: var(--pa-section-bg);
  border-bottom: 1px solid var(--pa-glass-border);
}
#census-color-bar label { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
#census-metric-select {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); color: var(--text-body);
  border-radius: 14px; padding: 3px 10px; font-size: 0.76rem; cursor: pointer;
  font-weight: 500;
}
#census-color-legend-inner {
  display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary);
}
#census-color-ramp { border-radius: 3px; }
.census-leg-lo, .census-leg-hi { font-size: 0.72rem; color: var(--text-secondary); }

/* ── Info tab compact chip grid ── */
.info-chips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 6px;
  padding: 8px 14px 6px;
}
.info-chip {
  background: var(--bg-primary); border: 1px solid var(--bg-elevated); border-radius: 7px;
  padding: 5px 7px; min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.info-chip-wide { grid-column: span 2; }
.info-chip-lbl { font-size: 0.62rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
.info-chip-val { font-size: 0.78rem; font-weight: 500; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-chip-dim { font-size: 0.65rem; color: var(--text-faint); font-weight: 400; }

/* ── World Bank compact chip grid ── */
.wb-chips-row { padding: 2px 0 6px; }
.wb-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.wb-chip {
  background: var(--bg-deep); border: 1px solid var(--bg-elevated); border-radius: 6px;
  padding: 5px 7px; display: flex; flex-direction: column; gap: 2px;
}
.wb-chip-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.wb-chip-clickable:hover { border-color: var(--accent); background: var(--bg-primary); }
.wb-chip-clickable.stats-active { border-color: var(--gold); background: #1c1a0e; }
.wb-chip-full { grid-column: span 4; flex-direction: row; align-items: center; gap: 8px; }
.wb-chip-lbl { font-size: 0.62rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.wb-chip-val { font-size: 0.78rem; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; }
.wb-chip-yr  { font-size: 0.62rem; color: var(--text-muted); margin-left: 2px; }

/* ── Census section title (secondary heading within census-wrap) ── */
.census-section-title {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary); margin: 8px 0 4px;
}

/* ── Eurostat trend sparklines ── */
.es-trends { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.es-trend-row {
  display: grid;
  grid-template-columns: 88px 114px 60px 1fr;
  align-items: center; gap: 4px;
  padding: 3px 4px; border-radius: 5px; cursor: pointer;
  transition: background 0.15s;
}
.es-trend-row:hover { background: var(--bg-elevated); }
.es-trend-label { font-size: 0.67rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.es-trend-spark { display: flex; align-items: center; }
.es-trend-val   { font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.es-trend-range { font-size: 0.62rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.stats-rank-sub { font-size: 0.67rem; color: var(--text-faint); margin-left: 3px; }

/* GaWC world city tier chip */
.gawc-tier-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* ── Choropleth controls (inline in topbar) ── */
#choropleth-bar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
}
#choropleth-bar label { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
#choro-select {
  background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 5px 10px; font-size: 0.82rem; font-family: inherit;
  outline: none; cursor: pointer;
}
#choro-select:focus { border-color: var(--accent); }
#choro-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#choro-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#choro-toggle-btn.on { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.choro-legend-title { font-size: 0.72rem; color: var(--text-faint); margin-bottom: 2px; }
.choro-leg-label { font-size: 0.72rem; color: var(--text-faint); }
#choro-ramp { width: 120px; height: 8px; border-radius: 4px; display: block; }
#choro-coverage { font-size: 0.72rem; color: var(--text-muted); }
#choro-time-slider { display: inline-flex; align-items: center; gap: 6px; }
#choro-year-label { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; min-width: 75px; }
#choro-year-range { width: 100px; accent-color: var(--accent); cursor: pointer; }
#choro-play-btn {
  background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 4px;
  padding: 4px 10px; font-size: 0.72rem; cursor: pointer; font-family: inherit;
  min-height: 32px; min-width: 32px;
}
#choro-play-btn:hover { border-color: var(--accent); }
#choro-options { align-items: center; gap: 12px; }
.choro-bar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
#admin1-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#admin1-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#admin1-toggle-btn.on { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
#cities-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#cities-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#cities-toggle-btn.on { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
#cities-toggle-btn.dim { border-color: var(--gold); color: var(--gold); background: rgba(240,165,0,0.09); }

/* ── Economic centers controls (inside topbar) ── */
#econ-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#econ-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
#econ-toggle-btn.on { border-color: var(--gold); color: var(--gold); background: rgba(240,165,0,0.09); }
#unesco-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#unesco-toggle-btn:hover { border-color: var(--bookmark-gold); color: var(--bookmark-gold); }
#unesco-toggle-btn.on { border-color: var(--bookmark-gold); color: var(--bookmark-gold); background: rgba(230,168,23,0.09); }
#cable-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#cable-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#cable-toggle-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.09); }
#airroute-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#airroute-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#airroute-toggle-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.09); }
#volcano-toggle-btn, #launchsite-toggle-btn, #eez-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#volcano-toggle-btn:hover { border-color: #d62828; color: #d62828; }
#volcano-toggle-btn.on { border-color: #d62828; color: #d62828; background: rgba(214,40,40,0.09); }
#launchsite-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#launchsite-toggle-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.09); }
#eez-toggle-btn:hover { border-color: #58a6ff; color: #58a6ff; }
#eez-toggle-btn.on { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.09); }
#tectonic-toggle-btn, #earthquake-toggle-btn, #iss-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#tectonic-toggle-btn:hover { border-color: #e85d04; color: #e85d04; }
#tectonic-toggle-btn.on { border-color: #e85d04; color: #e85d04; background: rgba(232,93,4,0.09); }
#earthquake-toggle-btn:hover { border-color: #ef8354; color: #ef8354; }
#earthquake-toggle-btn.on { border-color: #ef8354; color: #ef8354; background: rgba(239,131,84,0.09); }
#iss-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#iss-toggle-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.09); }
#econ-legend-inline { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; }
#econ-color-ramp { border-radius: 3px; display: block; }
.econ-leg-lo, .econ-leg-hi { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
#econ-bar-sep, .econ-bar-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.city-vis-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 4px 9px; font-size: 0.75rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.city-vis-btn:hover { border-color: var(--text-secondary); color: var(--text-body); }
.city-vis-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
#econ-info { font-size: 0.72rem; color: var(--text-muted); }

/* ── More Layers Dropdown ── */
#more-layers-dropdown { position: relative; z-index: 10; }
#more-layers-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#more-layers-btn:hover { border-color: var(--text-secondary); color: var(--text-body); }
#more-layers-btn.open { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.09); }
#reset-layers-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 6px; padding: 5px 8px; font-size: 0.78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap; margin-left: 4px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#reset-layers-btn:hover { border-color: #ef4444; color: #ef4444; }
#more-layers-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); z-index: 20; min-width: 160px;
}
#more-layers-menu.open { display: block; }
.dropdown-section { padding: 8px 0; border-bottom: 1px solid var(--border); }
.dropdown-section:last-child { border-bottom: none; }
.dropdown-heading {
  font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; padding: 4px 12px;
}
#more-layers-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text-secondary);
  padding: 6px 12px; font-size: 0.8rem; cursor: pointer; font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
#more-layers-menu button:hover { background: var(--hover-row); color: var(--text-body); }
#more-layers-menu button.on { color: var(--accent); background: rgba(88,166,255,0.09); }

/* Custom econ tooltip — pointer-events:none ensures it never intercepts mouse */
#econ-custom-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: none;
  background: var(--hover-row);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-body);
  font-size: 0.8rem;
  max-width: 230px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  line-height: 1.4;
}

/* ── FX Rate sidebar (left, slides in from left) ── */
#fx-sidebar {
  position: fixed;
  top: 56px;
  left: -310px;
  width: 300px;
  max-height: calc(100vh - 56px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 12px 12px 0;
  z-index: 995;
  display: flex;
  flex-direction: column;
  transition: left 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 8px 0 40px rgba(0,0,0,0.65);
  overflow: hidden;
}
#fx-sidebar.open { left: 0; }

#fx-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  flex-shrink: 0;
}
#fx-title {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
}
.fx-base { color: var(--text-muted); font-weight: 400; font-size: 0.74rem; }
#fx-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#fx-close:hover { color: var(--text-primary); }

#fx-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg-elevated);
  flex-shrink: 0;
}
#fx-date {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-body);
  font-size: 0.76rem;
  padding: 4px 7px;
  min-width: 0;
  color-scheme: dark;
}
#fx-fetch-btn, #fx-reset-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-body);
  font-size: 0.74rem;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#fx-fetch-btn:hover { background: var(--info-glow); border-color: var(--accent); color: var(--accent); }
#fx-reset-btn:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
#fx-fetch-btn:disabled { opacity: 0.5; cursor: default; }

#fx-status {
  padding: 5px 12px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  border-bottom: 1px solid var(--bg-elevated);
}

#fx-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
#fx-list::-webkit-scrollbar { width: 4px; }
#fx-list::-webkit-scrollbar-track { background: transparent; }
#fx-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.fx-row {
  display: grid;
  grid-template-columns: 42px 1fr 72px 60px;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  font-size: 0.75rem;
  transition: background 0.15s;
}
.fx-row:hover { background: var(--bg-elevated); }
.fx-row.fx-modified { background: var(--fx-modified-bg); }
.fx-row.fx-modified:hover { background: var(--fx-modified-hover); }

@media (max-width: 600px) {
  .fx-row {
    grid-template-columns: 32px 1fr 56px 48px;
    gap: 3px;
    padding: 3px 6px;
    font-size: 0.65rem;
  }
}

.fx-cur {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.73rem;
  letter-spacing: 0.03em;
}
.fx-label {
  color: var(--text-secondary);
  font-size: 0.69rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-body);
  font-size: 0.72rem;
  padding: 4px 6px;
  min-height: 28px;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fx-input:focus { outline: none; border-color: var(--accent); background: var(--bg-deep); }
.fx-per-usd {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fx-per-usd-unit { color: var(--text-dim); font-size: 0.64rem; }

#fx-source {
  padding: 8px 12px;
  font-size: 0.67rem;
  color: var(--text-muted);
  border-top: 1px solid var(--bg-elevated);
  flex-shrink: 0;
}
#fx-source a { color: var(--accent)88; text-decoration: none; }
#fx-source a:hover { color: var(--accent); }

/* ── Side FAB stack (bottom-right) ── */
#fab-stack {
  position: fixed;
  bottom: 16px;
  right: 12px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 994;
}
#fx-fab,
#draw-fab,
#bookmarks-fab,
#filter-fab,
#nations-fab,
#corp-fab {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--pa-glass);
  border: 1px solid var(--pa-glass-border);
  border-radius: 12px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-md);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, width 0.2s, padding 0.2s;
  position: relative;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Draw FAB: pill label only when active */
.fab-label {
  display: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#draw-fab.active {
  width: auto;
  padding: 0 10px 0 6px;
  background: var(--draw-active-bg);
  border-color: var(--gold);
  color: var(--gold);
}
#draw-fab.active .fab-label { display: inline; }
#fx-fab:hover { background: var(--pa-pill-hover); border-color: var(--pa-amber-border); color: var(--pa-amber); transform: scale(1.08); }
#draw-fab:hover { background: var(--pa-pill-hover); border-color: var(--pa-pill-active-border); color: var(--pa-indigo); transform: scale(1.08); }
#draw-fab.active { background: var(--draw-active-bg); border-color: var(--gold); color: var(--gold); }
#bookmarks-fab { color: var(--bookmark-gold); }
#bookmarks-fab:hover { background: var(--pa-pill-hover); border-color: var(--pa-amber-border); color: var(--pa-amber); transform: scale(1.08); }
#filter-fab:hover { background: var(--pa-pill-hover); border-color: var(--pa-pill-active-border); color: var(--pa-indigo); transform: scale(1.08); }
#filter-fab.active { border-color: var(--pa-pill-active-border); color: var(--pa-indigo); background: var(--pa-pill-active-bg); box-shadow: 0 0 12px rgba(99,102,241,0.2); }
#corp-fab:hover { background: var(--pa-pill-hover); border-color: var(--pa-amber-border); color: var(--pa-amber); transform: scale(1.08); }
#corp-fab.active { border-color: var(--pa-amber-border); color: var(--pa-amber); background: var(--pa-amber-bg); }
#filter-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  padding: 0 4px;
  font-size: 0.65em;
  font-weight: 700;
  display: none;
  line-height: 1.4;
}

/* ── Trade flow panel (left side) ── */
#trade-panel {
  position: fixed;
  top: 56px;
  left: -314px;
  width: 294px;
  max-height: calc(100vh - 56px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 12px 12px 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  transition: left 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 8px 0 40px rgba(0,0,0,0.65);
  overflow: hidden;
}
#trade-panel.open { left: 0; }

#trade-panel-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  flex-shrink: 0;
}
#trade-panel-flag { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
#trade-panel-titles {
  flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
#trade-panel-title {
  font-size: 0.82rem; font-weight: 600; color: var(--text-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#trade-panel-sub { font-size: 0.65rem; color: var(--text-muted); }
#trade-panel-close {
  background: none; border: none; color: var(--text-faint);
  font-size: 1.35rem; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
#trade-panel-close:hover { color: var(--text-primary); }

#trade-panel-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 18px;
}

#trade-year-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
#trade-year-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer;
}
#trade-year-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-primary); cursor: pointer;
}
#trade-year-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-primary); cursor: pointer;
}
#trade-year-label {
  font-size: 0.82rem; font-weight: 700; color: var(--gold);
  min-width: 32px; text-align: right; font-variant-numeric: tabular-nums;
}

#trade-flows { margin-bottom: 12px; }
.tf-flow-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.tf-arrow { font-size: 1rem; font-weight: 700; flex-shrink: 0; line-height: 1; }
.tf-arrow-exp { color: var(--accent); }
.tf-arrow-imp { color: var(--gold); }
.tf-flow-info { flex: 1; min-width: 0; }
.tf-flow-label { font-size: 0.73rem; color: var(--text-secondary); display: block; }
.tf-flow-detail {
  font-size: 0.63rem; color: var(--text-muted); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-flow-total {
  font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tf-bar-wrap {
  height: 5px; background: var(--bg-elevated); border-radius: 3px;
  overflow: hidden; margin-bottom: 12px;
}
.tf-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; width: 0; }
.tf-bar-exp { background: var(--accent); }
.tf-bar-imp { background: var(--gold); }

#trade-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--bg-deep);
  border: 1px solid var(--bg-elevated); border-radius: 8px; margin-bottom: 14px;
}
#trade-balance-label { font-size: 0.73rem; color: var(--text-secondary); }
#trade-balance-val { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.trade-section-head {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}

#trade-chart-wrap { margin-bottom: 14px; }
#trade-chart { height: 80px; position: relative; }

#trade-companies-wrap { margin-bottom: 10px; }
.tco-row {
  display: flex; align-items: baseline; gap: 5px;
  padding: 5px 0; border-bottom: 1px solid var(--bg-elevated); flex-wrap: wrap;
}
.tco-row:last-child { border-bottom: none; }
.tco-name { font-size: 0.77rem; color: var(--text-body); font-weight: 500; flex: 1; min-width: 0; }
.tco-ind  { font-size: 0.67rem; color: var(--text-faint); white-space: nowrap; }
.tco-rev  { font-size: 0.72rem; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.tco-empty { font-size: 0.72rem; color: var(--text-muted); }

#trade-source { font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; }

/* ── Animated trade flow arrows ── */
@keyframes tradeFlowFwd {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
@keyframes tradeFlowRev {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 24; }
}
.trade-arrow-export {
  stroke-dasharray: 14 10;
  animation: tradeFlowFwd 1.1s linear infinite;
}
.trade-arrow-import {
  stroke-dasharray: 14 10;
  animation: tradeFlowRev 1.1s linear infinite;
}

/* ── Global corporations list panel ── */
#global-corp-panel { margin-top: 0; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
#global-corp-panel.panel-open {
  position: fixed; top: 0; right: 0; width: 480px; height: 100vh;
  background: var(--bg-primary);
  border-radius: 0; border-right: none;
  z-index: 1060; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px var(--shadow-lg);
  transition: right 0.3s cubic-bezier(.4,0,.2,1);
}
#global-corp-panel.panel-open .table-wrap { max-height: none; flex: 1; overflow-y: auto; }
#global-corp-panel.panel-open #gcorp-filters { flex-shrink: 0; }
#global-corp-panel.panel-open #global-corp-header { flex-shrink: 0; }
#global-corp-panel-close {
  display: none; background: none; border: none; color: var(--text-secondary); font-size: 1.4rem;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
#global-corp-panel.panel-open #global-corp-panel-close { display: block; }
#global-corp-panel-close:hover { color: var(--text-primary); }
#global-corp-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: transparent;
}
#global-corp-header h2 { font-size: 1.15rem; font-weight: 600; color: var(--text-body); }
#gcorp-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
}
#gcorp-search {
  flex: 1; min-width: 160px; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 7px 10px; font-size: 0.82rem; font-family: inherit; outline: none;
}
#gcorp-search:focus { border-color: var(--accent); }
#gcorp-sort {
  background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 6px 8px; font-size: 0.80rem; font-family: inherit; outline: none;
  cursor: pointer; max-width: 160px;
}
#gcorp-sort:focus { border-color: var(--accent); }
/* ── Custom count dropdown (country/industry filter) ── */
.count-dropdown {
  position: relative;
  background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 0; font-size: 0.80rem; font-family: inherit; outline: none;
  cursor: pointer; max-width: 160px; min-width: 120px;
  transition: border-color 0.15s;
  user-select: none; -webkit-user-select: none;
}
.count-dropdown:focus, .count-dropdown:focus-within { border-color: var(--accent); }
.count-dropdown-trigger {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; min-height: 32px;
}
.count-dropdown-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.count-dropdown-count {
  font-size: 0.68rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px;
  white-space: nowrap;
}
.count-dropdown-arrow {
  font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; margin-left: 2px;
}
.count-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  max-height: 260px; overflow-y: auto; z-index: 110;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 6px; margin-top: 2px;
  box-shadow: 0 8px 24px var(--shadow-lg);
}
.count-dropdown.open .count-dropdown-menu { display: block; }
.count-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; cursor: pointer; font-size: 0.80rem;
  transition: background 0.1s;
}
.count-dropdown-item:hover { background: var(--hover-row); }
.count-dropdown-item.active { background: var(--accent-subtle); color: var(--accent); }
.count-dropdown-item-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.count-dropdown-item-count {
  font-size: 0.68rem; color: var(--text-faint); margin-left: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.count-dropdown-item.active .count-dropdown-item-count { color: var(--accent); opacity: 0.8; }
#gcorp-count { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
/* Card markup: inline on desktop, flex card on mobile */
.gcorp-card-row1, .gcorp-card-row2 { display: inline; }
.gcorp-card-name { font-weight: inherit; }
.gcorp-card-rev { display: none; }
.gcorp-card-loc { display: none; }
.gcorp-card-emp { display: none; }
#gcorp-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
#gcorp-table thead th {
  position: sticky; top: 0; background: var(--bg-primary); color: var(--text-secondary);
  font-weight: 600; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  font-size: 0.73rem; letter-spacing: 0.04em; text-transform: uppercase;
}
#gcorp-table tbody tr { border-bottom: 1px solid var(--bg-elevated); cursor: pointer; transition: background 0.1s; }
#gcorp-table tbody tr:hover { background: var(--hover-row); }
#gcorp-table tbody td { padding: 7px 10px; color: var(--text-body); white-space: nowrap; }
#gcorp-table td.gcorp-name-cell { color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
#gcorp-table td.gcorp-city-cell { color: var(--text-secondary); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
#gcorp-table td.gcorp-country-cell { color: var(--text-faint); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#gcorp-table td.gcorp-industry-cell { color: var(--text-secondary); font-size: 0.74rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#gcorp-table td.gcorp-num { font-variant-numeric: tabular-nums; color: var(--gold); text-align: right; }
#gcorp-table td.gcorp-neutral { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary); }

/* ── Corporations panel ── */
#corp-panel {
  position: fixed; top: 0; right: -480px; width: 460px; height: 100vh;
  background: var(--bg-primary); border-left: 1px solid var(--border);
  z-index: 999; display: flex; flex-direction: column;
  transition: right 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px var(--shadow-lg); overflow: hidden;
}
#corp-panel.open { right: 0; }
/* Shift wiki-sidebar left when both wiki and corp panels are open */
#wiki-sidebar.open.corp-open { right: 460px; }

/* ── Stats distribution panel ── */
#stats-panel {
  position: fixed; top: 60px; right: -310px; width: 290px;
  max-height: calc(100vh - 70px); background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: 10px 0 0 10px;
  z-index: 999; display: flex; flex-direction: column;
  transition: right 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: -6px 0 24px var(--shadow-md); overflow: hidden;
}
#stats-panel.open { right: 420px; } /* overridden by JS when country-panel is open */
#stats-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-deep); flex-shrink: 0;
}
#stats-panel-titles { flex: 1; min-width: 0; }
#stats-panel-title {
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#stats-panel-city {
  font-size: 0.72rem; color: var(--gold); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#stats-panel-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 1.3rem; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
#stats-panel-close:hover { color: var(--text-primary); }
#stats-panel-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 14px;
}
.stats-hist-wrap { margin-bottom: 10px; }
.stats-trend-wrap {
  margin-bottom: 8px; background: var(--bg-deep); border-radius: 6px;
  padding: 6px 6px 2px; border: 1px solid var(--bg-elevated);
}
.stats-ranks {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.stats-rank-badge {
  flex: 1; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.stats-rank-n {
  font-size: 0.88rem; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stats-rank-lbl { font-size: 0.67rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.stats-note { font-size: 0.7rem; color: var(--text-faint); margin-bottom: 8px; }
.stats-rank-list {
  border-top: 1px solid var(--bg-elevated); padding-top: 6px; margin-top: 2px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto;
  scroll-behavior: smooth;
}
.stats-rank-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 5px; border-radius: 5px; font-size: 0.75rem;
  cursor: pointer; flex-shrink: 0;
}
.stats-rank-row:hover { background: var(--bg-elevated); }
.stats-rank-current {
  background: var(--success-bg); border: 1px solid var(--success-border);
  font-weight: 600;
}
.stats-rank-num { color: var(--text-faint); min-width: 30px; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.stats-rank-name { flex: 1; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-rank-val { color: var(--text-secondary); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-rank-current .stats-rank-name { color: var(--success); }
.stats-rank-current .stats-rank-val  { color: var(--success); }
.stats-rank-more {
  display: block; width: 100%; text-align: center; padding: 5px 4px;
  font-size: 0.71rem; color: var(--accent); cursor: pointer; border-radius: 5px;
  background: none; border: none; font-family: inherit; flex-shrink: 0;
  transition: background 0.15s;
}
.stats-rank-more:hover { background: var(--bg-elevated); text-decoration: underline; }
.stats-source { font-size: 0.65rem; color: var(--text-muted); margin-top: 8px; }
.stats-source-attr { font-size: 0.6rem; color: var(--text-faint); margin-top: 4px; font-style: italic; padding-top: 4px; border-top: 1px solid var(--bg-elevated); }
/* Clickable stat cells in Economy tab */
.census-stat-clickable {
  cursor: pointer; border-radius: 5px; padding: 3px 4px; margin: -3px -4px;
  transition: background 0.15s;
}
.census-stat-clickable:hover { background: var(--bg-elevated); }
.census-stat-clickable.stats-active { background: var(--success-bg); outline: 1px solid var(--success-border); }
/* Clickable info chips in Info tab */
.info-chip-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.info-chip-clickable:hover { background: var(--info-bg); border-color: var(--info-blue); box-shadow: 0 0 0 2px var(--info-glow); }
.info-chip-clickable.stats-active { background: var(--success-bg); border-color: var(--success-border); box-shadow: 0 0 0 2px var(--success-glow); }
/* Scope toggle row in stats panel */
#stats-scope-row {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.stats-scope-btn {
  flex: 1; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-deep); color: var(--text-secondary); font-size: 0.72rem; cursor: pointer;
  font-family: inherit; transition: background 0.15s;
}
.stats-scope-btn.active { background: var(--success-bg); border-color: var(--success-border); color: var(--success); font-weight: 600; }
.stats-scope-btn:hover:not(.active) { background: var(--bg-elevated); color: var(--text-body); }

#corp-panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-deep); flex-shrink: 0;
}
#corp-panel-title {
  flex: 1; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.03em; text-transform: uppercase;
}
#corp-panel-close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.4rem;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
#corp-panel-close:hover { color: var(--text-primary); }

#corp-panel-controls {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-deep); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
}
#corp-search {
  width: 100%; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 7px 10px; font-size: 0.82rem; font-family: inherit; outline: none;
}
#corp-search:focus { border-color: var(--accent); }
#corp-sort-row { display: flex; gap: 8px; align-items: center; }
#corp-sort-row label { font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; }
#corp-sort {
  flex: 1; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 5px 8px; font-size: 0.8rem; font-family: inherit; outline: none;
}
#corp-sort:focus { border-color: var(--accent); }
#corp-count { font-size: 0.72rem; color: var(--text-muted); }

#corp-display-currency {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-body);
  font-size: 0.73rem;
  padding: 3px 5px;
  cursor: pointer;
  max-width: 120px;
}
#corp-display-currency:focus { outline: none; border-color: var(--accent); }

#corp-list { flex: 1; overflow-y: auto; }

/* Corporations table — reuses global thead/tbody styles, small overrides */
#corp-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
#corp-table thead th {
  position: sticky; top: 0; background: var(--bg-primary); color: var(--text-secondary);
  font-weight: 600; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  font-size: 0.73rem; letter-spacing: 0.04em; text-transform: uppercase;
}
#corp-table tbody tr { border-bottom: 1px solid var(--bg-elevated); cursor: pointer; transition: background 0.1s; }
#corp-table tbody tr:hover { background: var(--hover-row); }
#corp-table tbody td { padding: 7px 10px; color: var(--text-body); white-space: nowrap; }
#corp-table td.co-name-cell { color: var(--text-primary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#corp-table td.co-industry-cell { color: var(--text-secondary); font-size: 0.74rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
#corp-table td.co-num { font-variant-numeric: tabular-nums; color: var(--success); text-align: right; }
#corp-table td.co-neutral { font-variant-numeric: tabular-nums; text-align: right; }
#corp-table td.co-link { padding: 7px 6px; }
#corp-table td.co-link a { color: var(--text-muted); font-size: 0.72rem; text-decoration: none; }
#corp-table td.co-link a:hover { color: var(--accent); }

/* ── Country sidebar panel ──────────────────────────── */
#country-panel {
  position: fixed; top: 0; right: 0; width: 600px; height: 100vh;
  background: var(--bg-deep); border-left: 1px solid var(--border);
  z-index: 1100; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease;
  box-shadow: -8px 0 32px var(--shadow-xl); overflow: hidden; pointer-events: none;
}
#country-panel.open { transform: translateX(0); pointer-events: auto; }

/* header */
#cp-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bg-elevated); background: var(--bg-primary); flex-shrink: 0;
}
.cp-flag { font-size: 1.6rem; line-height: 1; }
.cp-country-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.cp-country-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.cp-close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.3rem;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; margin-left: auto;
}
.cp-close:hover { color: var(--text-primary); }

/* stat cards row */
#cp-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--bg-elevated); border-bottom: 1px solid var(--bg-elevated); flex-shrink: 0;
}
.cp-stat-card { background: var(--bg-primary); padding: 10px 12px; text-align: center; transition: background .15s; }
.cp-stat-card-clickable { cursor: pointer; }
.cp-stat-card-clickable:hover { background: var(--hover-row); }
.cp-stat-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cp-stat-lbl { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; letter-spacing: .03em; }

/* color modifiers used on stat cards */
.cp-blue  .cp-stat-val { color: var(--accent); }
.cp-green .cp-stat-val { color: var(--success); }
.cp-amber .cp-stat-val { color: var(--amber); }
.cp-red   .cp-stat-val { color: var(--danger); }

/* two-column body */
#cp-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

@media (max-width: 600px) {
  #cp-body {
    flex-direction: column !important;
  }
}

@media (max-width: 768px) {
  #cp-body {
    flex-direction: column !important;
  }
  .cp-left-col,
  .cp-right-col {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #cp-body {
    flex-direction: column !important;
  }
}

.cp-left-col {
  width: 55%; border-right: 1px solid var(--bg-elevated); overflow-y: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.cp-right-col {
  width: 45%; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* gauge groups */
.cp-gauge-section-hdr {
  font-size: 0.65rem; color: var(--text-muted); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin: 8px 0 5px;
  padding-bottom: 3px; border-bottom: 1px solid var(--bg-elevated);
}
.cp-gauge-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cp-gauge-lbl {
  font-size: 0.72rem; color: var(--text-secondary); width: 88px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-gauge-bar {
  flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden;
}
.cp-gauge-fill { height: 100%; border-radius: 2px; background: var(--info-blue); transition: width 0.4s ease; }
.cp-gauge-val { font-size: 0.72rem; font-variant-numeric: tabular-nums; width: 52px; text-align: right; flex-shrink: 0; color: var(--text-secondary); }
.cp-gauge-nil { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.cp-gauge-info { font-size: 0.72rem; color: var(--text-secondary); margin-left: auto; }
.cp-gauge-row-clickable { cursor: pointer; border-radius: 4px; transition: background 0.12s; }
.cp-gauge-row-clickable:hover { background: var(--accent-subtle); }
.cp-gauge-row-clickable:hover .cp-gauge-lbl { color: var(--accent); }

/* color modifiers for gauge fills */
.cp-green .cp-gauge-fill { background: var(--success); }
.cp-amber .cp-gauge-fill { background: var(--amber); }
.cp-red   .cp-gauge-fill { background: var(--danger); }
.cp-blue  .cp-gauge-fill { background: var(--accent); }
/* color modifiers for gauge val labels */
.cp-green .cp-gauge-val { color: var(--success); }
.cp-amber .cp-gauge-val { color: var(--amber); }
.cp-red   .cp-gauge-val { color: var(--danger); }

/* Freedom House / status badges */
.cp-gauge-badge { border-radius: 10px; padding: 1px 8px; font-weight: 600; font-size: 0.68rem; }
.cp-badge-green { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.cp-badge-amber { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.cp-badge-red   { background: color-mix(in srgb, var(--danger) 15%, transparent);  color: var(--danger); }

/* radar card (tabbed economic + energy) */
.cp-radar-card { display: flex; flex-direction: column; gap: 0; }
.cp-radar-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cp-radar-tab {
  flex: 1; padding: 3px 0; font-size: 10px; font-weight: 600;
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-secondary); cursor: pointer; transition: color .15s, border-color .15s;
}
.cp-radar-tab:hover { color: var(--text-body); border-color: var(--text-secondary); }
.cp-radar-tab-active { color: var(--text-body); border-color: var(--info-blue); background: color-mix(in srgb, var(--info-blue) 8%, transparent); }
.cp-radar-pane-hidden { display: none; }
.cp-radar-wrap { display: flex; justify-content: center; }
.cp-radar-wrap svg { display: block; }
.cp-radar-section { margin-top: 4px; }
.cp-radar-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; margin-bottom: 2px; }

/* rank chips */
.cp-rank-hdr { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.cp-rank-chip {
  display: block; width: 100%; text-align: left;
  background: var(--bg-primary); border: 1px solid var(--bg-elevated); border-radius: 5px;
  padding: 6px 8px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cp-rank-chip:hover { border-color: var(--accent); background: #1c2333; }
.cp-chip-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cp-chip-lbl { font-size: 0.73rem; color: var(--text-body); font-weight: 500; }
.cp-chip-rank { font-size: 0.78rem; color: var(--accent); font-weight: 700; white-space: nowrap; }
.cp-chip-sub { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rank-chips { display: flex; flex-direction: column; gap: 5px; }

/* trend tabs — shown when _buildTrendTabs populates them */
#cp-trend { display: none; border-top: 1px solid var(--bg-elevated); }
.cp-tab-strip {
  display: flex; gap: 2px; padding: 6px 10px 0; overflow-x: auto;
  background: var(--bg-primary); border-bottom: 1px solid var(--bg-elevated);
}
.cp-tab {
  background: none; border: none; color: var(--text-secondary); font-size: 0.72rem;
  cursor: pointer; padding: 5px 8px; border-radius: 4px 4px 0 0;
  white-space: nowrap; font-family: inherit;
}
.cp-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.cp-tab.active { color: var(--accent); background: var(--bg-elevated); border-bottom: 2px solid var(--accent); }
#cp-chart-area { height: 160px; padding: 8px 12px; }
.cp-no-data { color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 40px 0; }

/* Subnational region stats block (city panel Info tab) */
.region-stats-block { margin: 10px 12px 4px; }
.region-stats-hdr {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 0 4px; border-top: 1px solid var(--bg-elevated);
}
.region-spark-wrap { margin-top: 6px; border-top: 1px solid var(--bg-elevated); padding-top: 4px; }
.region-spark-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 2px 0 1px; font-size: 0.68rem; color: var(--text-secondary);
}
.region-spark-range { font-size: 0.61rem; color: var(--text-muted); }

/* Universities section in city info tab */
.univ-section { margin-top: 10px; border-top: 1px solid var(--bg-elevated); padding-top: 8px; }
.univ-header {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.univ-count {
  background: var(--bg-elevated); color: var(--accent);
  border-radius: 10px; padding: 0 6px;
  font-size: 0.68rem; font-weight: 700;
}
.univ-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.univ-item { padding: 4px 0; border-bottom: 1px solid var(--bg-primary); line-height: 1.4; }
.univ-item:last-child { border-bottom: none; }
.univ-name { font-size: 0.82rem; color: var(--text-primary); font-weight: 500; }
.univ-detail, .univ-meta { font-size: 0.72rem; color: var(--text-secondary); }
.univ-rank { font-size: 0.70rem; color: var(--univ-gold); margin-left: 6px; white-space: nowrap; }
.univ-more { padding: 4px 0; font-size: 0.72rem; color: var(--text-muted); font-style: italic; }

/* Trade partners in country panel */
.cp-trade-sub-hdr { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8aa; margin: 6px 0 2px; }
.cp-trade-partner-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; cursor: pointer; transition: background .15s; }
.cp-trade-partner-row:hover { background: rgba(100,200,220,.12); }
.cp-trade-flag { font-size: 1.15em; line-height: 1; flex-shrink: 0; }
.cp-trade-name { flex: 1; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-trade-val  { font-size: .75rem; color: var(--trade-teal); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Admin-1 regions button + tooltip ─────────────── */
.cp-admin1-btn {
  font-size: .72rem; padding: 3px 8px; border-radius: 4px;
  background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap; margin-right: 4px;
  transition: background .15s, color .15s;
}
.cp-admin1-btn:hover { background: var(--border); color: var(--text-body); }
.cp-admin1-btn.on { background: var(--admin1-active); color: #fff; border-color: var(--admin1-active); }
.admin1-tooltip {
  background: rgba(13,17,23,.92) !important; color: var(--text-body) !important;
  border: 1px solid var(--border) !important; border-radius: 6px !important;
  font-size: .78rem !important; padding: 6px 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
.admin1-tooltip b { color: var(--accent); }
/* Hide the white focus rectangle on SVG paths (admin-1 click) */
.leaflet-interactive:focus { outline: none; }

/* ── Region sidebar panel ─────────────────────────── */
#region-panel {
  position: fixed; top: 0; right: 0; width: 380px; height: 100vh;
  background: var(--bg-deep); border-left: 1px solid var(--border);
  z-index: 1150; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease;
  box-shadow: -6px 0 24px var(--shadow-lg); overflow: hidden; pointer-events: none;
}
#region-panel.open { transform: translateX(0); pointer-events: auto; }
#rp-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bg-elevated); background: var(--bg-primary); flex-shrink: 0;
}
.rp-region-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.rp-region-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.rp-close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.1rem;
  cursor: pointer; margin-left: auto; padding: 2px 6px;
}
.rp-close:hover { color: var(--text-primary); }
#rp-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.rp-section-title {
  font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: 0.05em; margin: 14px 0 6px 0; padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-elevated);
}
.rp-section-title:first-child { margin-top: 0; }
.rp-stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid rgba(48,54,61,0.3);
}
.rp-stat-label { font-size: 0.8rem; color: var(--text-secondary); }
.rp-stat-val { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-no-data { color: var(--text-muted); font-size: 0.78rem; font-style: italic; padding: 8px 0; }

/* ── Air Quality bar ──────────────────────────────── */
#aq-bar {
  position: absolute; bottom: 44px; left: 10px; z-index: 900;
  background: rgba(13,17,23,0.92); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; display: flex;
  align-items: center; gap: 8px; font-size: 0.74rem; color: var(--text-secondary);
  backdrop-filter: blur(4px);
}
#aq-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: 5px; padding: 4px 10px; cursor: pointer; font-size: 0.74rem;
  font-family: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-height: 32px; min-width: 32px;
}
#aq-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
#aq-toggle-btn.on { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
#aq-legend-wrap { display: flex; gap: 6px; align-items: center; }
.aq-swatch {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}

/* ── Compare panel ────────────────────────────────── */
/* ── Floating panel animation ── */
.float-panel {
  opacity: 0; transform: scale(0.95); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.float-panel.visible {
  opacity: 1; transform: scale(1); pointer-events: auto;
}
/* country-compare uses translateX(-50%), override transform */
.float-panel.float-panel-center {
  transform: translateX(-50%) scale(0.95);
}
.float-panel.float-panel-center.visible {
  transform: translateX(-50%) scale(1);
}

#compare-panel {
  position: absolute; top: 60px; right: 10px; z-index: 950;
  width: 560px; max-width: calc(100vw - 20px);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px var(--shadow-lg); display: flex; flex-direction: column;
  max-height: calc(100vh - 80px); overflow: hidden;
}
#compare-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bg-elevated);
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
}
#compare-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0 4px; line-height: 1;
}
#compare-close:hover { color: var(--text-primary); }
#compare-search-row {
  padding: 8px 14px; border-bottom: 1px solid var(--bg-elevated); position: relative;
}
#compare-search-input {
  width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-body); padding: 5px 10px; font-size: 0.8rem; outline: none; box-sizing: border-box;
}
#compare-search-input:focus { border-color: var(--accent); }
#compare-search-results {
  position: absolute; left: 14px; right: 14px; top: calc(100% - 8px);
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  z-index: 10; max-height: 180px; overflow-y: auto;
}
.csr-item {
  padding: 6px 10px; cursor: pointer; font-size: 0.8rem; color: var(--text-body);
  list-style: none;
}
.csr-item:hover { background: var(--bg-elevated); }
.csr-country { color: var(--text-secondary); }
#compare-body { overflow-y: auto; flex: 1; }
#compare-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
#compare-table th {
  position: sticky; top: 0; background: var(--bg-deep); padding: 8px 10px;
  color: var(--text-secondary); font-weight: 600; text-align: left; border-bottom: 1px solid var(--bg-elevated);
}
#compare-table th:first-child { width: 38%; }
#compare-table th:nth-child(2), #compare-table th:nth-child(3) { width: 31%; text-align: right; }
.cmp-section td {
  background: var(--bg-primary); color: var(--accent); font-weight: 700;
  padding: 5px 10px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; border-top: 1px solid var(--bg-elevated);
}
#compare-table tr td { padding: 5px 10px; border-bottom: 1px solid var(--bg-deep); color: var(--text-body); }
td.cmp-metric { color: var(--text-secondary); }
.cmp-val { text-align: right; }
.cmp-better { color: var(--success) !important; font-weight: 600; }
.cmp-worse  { color: var(--danger) !important; }
.cmp-placeholder { color: var(--text-muted); }

/* Compare button in sidebar footer */
.wiki-cmp-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-primary); border: 1px solid var(--bg-elevated); color: var(--accent);
  border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 0.78rem;
  font-family: inherit; transition: border-color 0.15s, background 0.15s;
}
.wiki-cmp-btn:hover { background: var(--info-bg); border-color: var(--info-blue); }

/* ── Filter panel ── */
#filter-panel {
  position: fixed; top: 0; left: -290px; width: 280px; height: 100vh;
  background: var(--pa-bg); border-right: 1px solid var(--pa-glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 980; display: flex; flex-direction: column;
  transition: left 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 32px var(--shadow-lg); overflow: hidden;
}
#filter-panel.open { left: 0; }

#filter-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--pa-glass-border);
  background: var(--pa-section-bg); flex-shrink: 0;
}
#filter-panel-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
#filter-panel-header-right { display: flex; align-items: center; gap: 8px; }
#filter-clear-btn {
  background: var(--pa-red-bg); border: 1px solid var(--pa-red-border); color: var(--pa-red);
  font-size: 0.68rem; font-weight: 600; cursor: pointer; font-family: inherit;
  padding: 2px 10px; border-radius: 14px; transition: all 0.15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
#filter-clear-btn:hover { background: rgba(239,68,68,0.18); border-color: var(--pa-red); }
#filter-panel-close {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border);
  color: var(--text-secondary); font-size: 1rem; cursor: pointer; line-height: 1;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 14px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
#filter-panel-close:hover { background: var(--pa-pill-hover); color: var(--text-primary); border-color: var(--pa-glass-border); }

.filter-row-label { font-size: 0.7rem; color: var(--text-faint); white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.filter-btn-group { display: flex; gap: 4px; }
.filter-mode-btn {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); color: var(--text-faint);
  border-radius: 14px; padding: 2px 10px; font-size: 0.72rem; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.filter-mode-btn:hover { background: var(--pa-pill-hover); color: var(--text-secondary); border-color: var(--pa-glass-border); }
.filter-mode-btn.active { background: var(--pa-pill-active-bg); border-color: var(--pa-pill-active-border); color: var(--pa-pill-active-text); }

.filter-section-head {
  padding: 6px 12px 3px; background: var(--pa-section-bg);
  border-top: 1px solid var(--pa-section-border); border-bottom: 1px solid var(--pa-section-border);
  color: var(--text-faint); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0;
}

/* Availability rows */
#filter-avail-list { padding: 6px 12px 8px; flex-shrink: 0; border-bottom: 1px solid var(--pa-section-border); }
.filter-avail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.filter-avail-label { font-size: 0.78rem; color: var(--text-body); }
.filter-avail-btn {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); color: var(--text-faint);
  border-radius: 14px; padding: 2px 10px; font-size: 0.68rem; font-weight: 500;
  cursor: pointer; font-family: inherit; min-width: 36px; text-align: center;
  transition: all 0.15s; letter-spacing: 0.02em;
}
.filter-avail-btn:hover { background: var(--pa-pill-hover); color: var(--text-secondary); border-color: var(--pa-glass-border); }
.filter-avail-btn.on { background: var(--pa-emerald-bg); border-color: var(--pa-emerald-border); color: var(--pa-emerald); font-weight: 600; }

/* Value filter groups */
#filter-value-list { overflow-y: auto; flex: 1; padding: 6px 12px 8px; }
.filter-value-group { margin-bottom: 10px; }
.filter-value-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.filter-value-label { font-size: 0.74rem; color: var(--text-secondary); font-weight: 500; }
.filter-bucket-row { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-bucket {
  background: var(--pa-pill-bg); border: 1px solid var(--pa-pill-border); color: var(--text-faint);
  border-radius: 14px; padding: 2px 8px; font-size: 0.7rem; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.filter-bucket:hover { background: var(--pa-pill-hover); color: var(--text-secondary); border-color: var(--pa-glass-border); }
.filter-bucket.active { background: var(--pa-pill-active-bg); border-color: var(--pa-pill-active-border); color: var(--pa-pill-active-text); font-weight: 600; }
/* AQ buckets use CSS custom properties for per-bucket colour */
.filter-bucket[style] { border-color: var(--aq, var(--pa-pill-border)); color: var(--aq, var(--text-faint)); background: var(--pa-pill-bg); }
.filter-bucket[style].active { background: var(--aqbg, var(--pa-pill-active-bg)); border-color: var(--aq, var(--pa-pill-active-border)); color: var(--aq, var(--pa-pill-active-text)); }

/* ── Population range slider (rainbow gradient) ── */
.pop-slider-container {
  position: relative;
  width: 100%;
  padding: 8px 0 4px;
}
.pop-slider-track {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    #818cf8 0%,
    #a78bfa 20%,
    #fbbf24 40%,
    #34d399 60%,
    #64748b 80%,
    #818cf8 100%
  );
  opacity: 0.7;
}
[data-theme="light"] .pop-slider-track {
  opacity: 0.9;
}
.pop-slider {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.pop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pa-indigo-bg);
  border: 2px solid var(--pa-indigo);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 6px rgba(99,102,241,0.25);
  transition: transform 0.1s, box-shadow 0.15s;
}
.pop-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(99,102,241,0.35);
}
.pop-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pa-indigo-bg);
  border: 2px solid var(--pa-indigo);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 6px rgba(99,102,241,0.25);
}
.pop-slider-min::-webkit-slider-thumb { border-color: #818cf8; background: rgba(99,102,241,0.3); }
.pop-slider-max::-webkit-slider-thumb { border-color: #fbbf24; background: rgba(245,158,11,0.2); }
.pop-slider-min::-moz-range-thumb { border-color: #818cf8; background: rgba(99,102,241,0.3); }
.pop-slider-max::-moz-range-thumb { border-color: #fbbf24; background: rgba(245,158,11,0.2); }
.pop-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--text-faint);
  margin-top: 2px;
  padding: 0 6px;
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.pop-slider-values {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 500;
}
.pop-slider-values span { font-variant-numeric: tabular-nums; }
#pop-slider-min-val { color: #818cf8; font-weight: 600; }
#pop-slider-max-val { color: #fbbf24; font-weight: 600; }
.pop-slider-reset {
  background: var(--pa-red-bg);
  border: 1px solid var(--pa-red-border);
  color: var(--pa-red);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.66rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  min-height: 28px; min-width: 28px;
}
.pop-slider-reset:hover {
  background: rgba(239,68,68,0.18);
  border-color: var(--pa-red);
}

/* Footer */
#filter-panel-footer {
  padding: 8px 12px; border-top: 1px solid var(--pa-glass-border);
  background: var(--pa-section-bg); font-size: 0.72rem; color: var(--text-secondary); flex-shrink: 0;
  font-weight: 500;
}
#filter-match-count { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
#filter-total-count { color: var(--text-muted); }

/* ── Heatmap toggle button ── */
.filter-heat-btn {
  background: var(--pa-amber-bg); border: 1px solid var(--pa-amber-border); color: var(--pa-amber);
  border-radius: 14px; padding: 2px 8px; font-size: 0.64rem; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s; white-space: nowrap; letter-spacing: 0.02em;
}
.filter-heat-btn:hover { background: rgba(245,158,11,0.2); border-color: var(--pa-amber); }
.filter-heat-btn.active { background: var(--pa-amber-bg); border-color: var(--pa-amber); color: var(--pa-amber); box-shadow: 0 0 8px rgba(245,158,11,0.15); }

/* ── Filter panel inline AQ legend ── */
#filter-aq-legend {
  margin-top: 6px; padding: 6px 8px;
  background: var(--pa-glass); border-radius: 10px;
  border: 1px solid var(--pa-glass-border);
}
.filter-aq-legend-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; color: var(--text-secondary); padding: 2px 0;
}
.filter-aq-swatch {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.filter-aq-coverage {
  font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; text-align: right;
}

/* ── Heatmap parameter controls ── */
#heat-controls-row {
  padding: 6px 12px 8px; border-bottom: 1px solid var(--pa-glass-border);
  background: var(--pa-section-bg); flex-shrink: 0;
}
.heat-ctrl {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
}
.heat-ctrl-label {
  font-size: 0.64rem; color: var(--text-faint); width: 48px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.heat-ctrl-slider {
  flex: 1; height: 3px; accent-color: var(--pa-amber);
  cursor: pointer;
}
.heat-ctrl-val {
  font-size: 0.64rem; color: var(--text-secondary); font-weight: 500;
  width: 28px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Dot display controls ── */
#dot-controls-section {
  border-bottom: 1px solid var(--pa-glass-border);
  padding: 6px 12px 8px;
  background: var(--pa-section-bg);
  flex-shrink: 0;
}
.dot-ctrl-group {
  margin-bottom: 7px;
}
.dot-ctrl-group:last-child { margin-bottom: 0; }
.dot-ctrl-label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dot-ctrl-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Heatmap palette chooser ── */
#heat-palette-row {
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--pa-glass-border);
  background: var(--pa-section-bg);
  flex-shrink: 0;
}
#heat-palette-row .filter-row-label {
  display: block;
  font-size: 0.6rem; font-weight: 600;
  color: var(--text-faint); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.palette-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.palette-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--pa-pill-bg);
  border: 1px solid var(--pa-pill-border);
  border-radius: 14px;
  padding: 2px 8px 2px 5px;
  font-size: 0.66rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  font-weight: 500;
}
.palette-chip:hover { background: var(--pa-pill-hover); border-color: var(--pa-glass-border); color: var(--text-primary); }
.palette-chip.active { border-color: var(--pa-pill-active-border); color: var(--pa-pill-active-text); background: var(--pa-pill-active-bg); }

.palette-strip {
  display: inline-block;
  width: 32px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.warm-strip    { background: linear-gradient(to right, #3b1f6e, #7b2ff7, #a371f7, #e0ccff); }
.viridis-strip { background: linear-gradient(to right, #440154, #31688e, #35b779, #fde725); }
.inferno-strip { background: linear-gradient(to right, #0d0221, #56106e, #bb3754, #fcffa4); }
.ocean-strip   { background: linear-gradient(to right, #03071e, #1565c0, #0097a7, #e0f7fa); }

.dot-ctrl-sep {
  color: var(--border);
  font-size: 0.75rem;
  align-self: center;
  padding: 0 1px;
  user-select: none;
  flex-shrink: 0;
}

/* Dot controls — disabled when no filter or heatmap is active */
#dot-controls-section button:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}
#dot-controls-section button:disabled.active {
  background: none;
  border-color: var(--border);
  color: var(--text-muted);
}

/* Intensity gradient strip shown inline when an availability filter is ON */
.avail-intensity-strip {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  margin: 0 6px;
  min-width: 40px;
}


/* ── Nations panel ── */
#nations-panel {
  position: fixed; bottom: 60px; right: 60px; z-index: 995;
  width: 320px; max-height: 60vh; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px var(--shadow-lg); display: flex; flex-direction: column;
  overflow: hidden;
}
#nations-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bg-elevated);
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
}
#nations-panel-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0 4px; line-height: 1;
}
#nations-panel-close:hover { color: var(--text-primary); }
#nations-panel-body { overflow-y: auto; flex: 1; padding: 6px 0; }
.nations-indicator {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: 0.82rem; color: var(--text-body); cursor: pointer;
  border-bottom: 1px solid var(--bg-primary); transition: background 0.1s;
  border-left: 3px solid transparent;
}
.nations-indicator:hover { background: var(--bg-elevated); }
.nations-indicator.active { color: var(--accent); background: var(--accent-subtle); border-left-color: var(--accent); }
.nations-indicator-key { flex: 1; }
.bookmarks-fab:hover { border-color: var(--bookmark-gold); transform: scale(1.08); }
#nations-fab:hover { border-color: var(--pa-emerald-border); color: var(--pa-emerald); background: var(--pa-pill-hover); transform: scale(1.08); }

/* ── Bookmarks ── */
#bookmarks-panel {
  position: fixed; bottom: 60px; right: 60px; z-index: 995;
  width: 280px; max-height: 50vh; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px var(--shadow-lg); display: flex; flex-direction: column;
  overflow: hidden;
}
#bookmarks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bg-elevated);
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
}
#bookmarks-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0 4px; line-height: 1;
}
#bookmarks-close:hover { color: var(--text-primary); }
#bookmarks-body { overflow-y: auto; flex: 1; }
.bm-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  cursor: pointer; border-bottom: 1px solid var(--bg-primary);
}
.bm-item:hover { background: var(--bg-primary); }
.bm-name { flex: 1; color: var(--accent); font-size: 0.8rem; font-weight: 500; }
.bm-meta { color: var(--text-secondary); font-size: 0.7rem; white-space: nowrap; }
.bm-rm {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.7rem; padding: 2px 4px;
}
.bm-rm:hover { color: var(--danger); }
.bm-toggle {
  background: none; border: none; color: var(--bookmark-gold); cursor: pointer;
  font-size: 0.85rem; margin-left: 6px; vertical-align: middle; padding: 0;
}
.bm-toggle:hover { color: var(--gold-hover); }

/* ── Country Comparison Panel ── */
#country-compare-panel {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 960;
  width: 560px; max-width: calc(100vw - 20px);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px var(--shadow-lg); display: flex; flex-direction: column;
  max-height: calc(100vh - 80px); overflow: hidden;
}
#cc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bg-elevated);
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
}
#cc-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0 4px; line-height: 1;
}
#cc-close:hover { color: var(--text-primary); }
#cc-search-row {
  padding: 8px 14px; border-bottom: 1px solid var(--bg-elevated); position: relative;
}
#cc-search-input {
  width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-body); padding: 5px 10px; font-size: 0.8rem; outline: none; box-sizing: border-box;
}
#cc-search-input:focus { border-color: var(--accent); }
#cc-search-results {
  position: absolute; left: 14px; right: 14px; top: calc(100% - 8px);
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
  z-index: 10; max-height: 180px; overflow-y: auto;
}
#cc-body { overflow-y: auto; flex: 1; }
#cc-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
#cc-table th {
  position: sticky; top: 0; background: var(--bg-deep); padding: 8px 10px;
  color: var(--text-secondary); font-weight: 600; text-align: left; border-bottom: 1px solid var(--bg-elevated);
}
#cc-table th:first-child { width: 38%; }
#cc-table th:nth-child(2), #cc-table th:nth-child(3) { width: 31%; text-align: right; }
#cc-table tr td { padding: 5px 10px; border-bottom: 1px solid var(--bg-deep); color: var(--text-body); }
.csr-country { border-left: 2px solid var(--success); }

/* ══════════════════════════════════════════════════════════════════════════════
   Mobile topbar toggle (hidden on desktop)
   ══════════════════════════════════════════════════════════════════════════════ */
#mobile-topbar-toggle {
  display: none;
  position: fixed; top: 6px; left: 6px; z-index: 1100;
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-md);
  align-items: center; justify-content: center; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
#mobile-topbar-toggle:hover { border-color: var(--accent); }
#mobile-topbar-toggle .hamburger { display: flex; flex-direction: column; gap: 3.5px; width: 18px; height: 18px; justify-content: center; }
#mobile-topbar-toggle .ham-line { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.25s cubic-bezier(.4,.0,.2,1), opacity 0.2s; transform-origin: center; }
#mobile-topbar-toggle.open .ham-line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
#mobile-topbar-toggle.open .ham-line:nth-child(2) { opacity: 0; }
#mobile-topbar-toggle.open .ham-line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════════
   Mobile sheet backdrop
   ══════════════════════════════════════════════════════════════════════════════ */
#mobile-backdrop {
  display: none; position: fixed; inset: 0; z-index: 990;
  background: rgba(0,0,0,0.55); -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  body { padding: 0 !important; overflow: hidden; height: 100vh; height: 100dvh; }

  /* ════════════════ Mobile topbar toggle (tablet + phone) ════════════════ */
  #mobile-topbar-toggle {
    display: flex;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 10px;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--pa-glass);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--pa-glass-border);
    color: var(--text-primary); cursor: pointer;
    box-shadow: 0 4px 16px var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05) inset;
    align-items: center; justify-content: center; line-height: 1;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-topbar-toggle:active { transform: scale(0.92); }
  #mobile-topbar-toggle.open { background: var(--pa-pill-active-bg); border-color: var(--pa-pill-active-border); color: var(--pa-indigo); }

  /* ════════════════ Topbar: organized drawer (tablet + phone) ════════════════ */
  #topbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1050; max-width: none; width: 100%;
    border-radius: 0 0 20px 20px;
    margin-bottom: 0; padding: 16px 16px 12px;
    flex-direction: column; gap: 0;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(.32,.72,.37,1.04);
    max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 12px 48px var(--shadow-xl);
    border-bottom: 1px solid var(--pa-glass-border);
    background: var(--pa-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  }
  #topbar.mobile-open { transform: translateY(0); }
  #topbar.mobile-open { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  #topbar::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--text-muted); border-radius: 2px;
    margin: 0 auto 12px; opacity: 0.35;
  }
  #topbar.mobile-open .mobile-drawer-section { display: block; }

  /* Drawer section headers */
  .mobile-drawer-section { display: none; }
  .mobile-section-heading {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint);
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--pa-section-border);
  }
  .mobile-section-heading svg { width: 13px; height: 13px; }

  /* Top row: title + settings */
  #topbar-left, #topbar-right { width: 100%; }
  #topbar-left {
    order: 1;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 2px;
  }
  #topbar-right {
    order: 2;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pa-section-border);
    margin-bottom: 4px;
  }
  #topbar-title { font-size: 1.05rem; flex-shrink: 0; }
  .topbar-sep { display: none; }

  /* ── Main toggle buttons: Palo Alto pill row ── */
  .mobile-drawer-section.mobile-toggles { display: none; padding: 0 0 4px; }
  #topbar.mobile-open .mobile-drawer-section.mobile-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  #topbar.mobile-open .mobile-drawer-section.mobile-toggles button {
    width: 100%;
    justify-content: center;
  }
  #cities-toggle-btn, #choro-toggle-btn, #admin1-toggle-btn, #econ-toggle-btn {
    font-size: 0.76rem; padding: 6px 14px;
    min-height: 36px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 500; transition: all 0.15s;
    border: 1px solid var(--pa-pill-border); background: var(--pa-pill-bg);
    color: var(--text-faint);
  }
  #cities-toggle-btn:hover, #choro-toggle-btn:hover, #admin1-toggle-btn:hover, #econ-toggle-btn:hover {
    background: var(--pa-pill-hover); border-color: var(--pa-glass-border); color: var(--text-secondary);
  }
  #cities-toggle-btn.on, #choro-toggle-btn.on, #admin1-toggle-btn.on, #econ-toggle-btn.on {
    background: var(--pa-pill-active-bg);
    border-color: var(--pa-pill-active-border);
    color: var(--pa-pill-active-text);
    box-shadow: 0 0 10px rgba(99,102,241,0.12);
  }

  /* ── Choropleth options row ── */
  #choropleth-bar { width: 100%; }
  #choro-options { flex-wrap: wrap; gap: 8px; }
  #choro-year-range { flex: 1; min-width: 80px; }

  /* ── Layers dropdown: Palo Alto glass bottom sheet ── */
  .mobile-drawer-section.mobile-layers { display: none; }
  #topbar.mobile-open .mobile-drawer-section.mobile-layers { display: block; }
  #reset-layers-btn { display: none !important; } /* redundant on mobile — chips toggle themselves */
  #more-layers-dropdown { position: relative; width: 100%; }
  #more-layers-btn {
    font-size: 0.76rem; min-height: 36px; border-radius: 18px;
    padding: 6px 14px; font-weight: 500;
    border: 1px solid var(--pa-pill-border); background: var(--pa-pill-bg);
    color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; transition: all 0.15s;
  }
  #more-layers-btn:hover { background: var(--pa-pill-hover); border-color: var(--pa-glass-border); color: var(--text-secondary); }
  #more-layers-btn:after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; margin-left: 4px; }
  #more-layers-menu {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: auto; width: 100%; max-width: 100%;
    max-height: 70vh; overflow-y: auto;
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--pa-glass-border);
    box-shadow: 0 -8px 40px var(--shadow-xl);
    z-index: 1060;
    background: var(--pa-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  }
  #more-layers-menu::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--text-muted); border-radius: 2px;
    margin: 10px auto 6px; opacity: 0.35;
  }
  #more-layers-menu button {
    padding: 12px 16px; min-height: 44px;
    font-size: 0.82rem; border-radius: 14px;
    margin: 2px 10px; border: 1px solid var(--pa-pill-border);
    background: var(--pa-pill-bg); color: var(--text-body);
    transition: all 0.15s;
  }
  #more-layers-menu button:hover { background: var(--pa-pill-hover); border-color: var(--pa-glass-border); }
  #more-layers-menu button.on, #more-layers-menu button.active {
    background: var(--pa-pill-active-bg); border-color: var(--pa-pill-active-border); color: var(--pa-pill-active-text);
  }
  .dropdown-section { padding: 4px 0; }
  .dropdown-heading {
    padding: 6px 18px 4px; font-size: 0.6rem; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700; color: var(--text-faint);
  }
  #reset-layers-btn {
    min-height: 36px; min-width: 36px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
    background: var(--pa-red-bg); border: 1px solid var(--pa-red-border);
    color: var(--pa-red); transition: all 0.15s;
  }
  #reset-layers-btn:hover { background: rgba(239,68,68,0.18); border-color: var(--pa-red); }
  #layers-info { display: none; }

  /* ── Settings row: Palo Alto pills ── */
  .mobile-drawer-section.mobile-settings { display: none; }
  #topbar.mobile-open .mobile-drawer-section.mobile-settings {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 0 0;
  }
  .mobile-settings-row { display: flex; align-items: center; gap: 10px; }
  #basemap-select {
    font-size: 0.76rem; min-height: 36px; padding: 6px 14px;
    border-radius: 18px; border: 1px solid var(--pa-pill-border);
    background: var(--pa-pill-bg); color: var(--text-body);
    font-weight: 500;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 32px;
  }
  #theme-toggle {
    min-height: 36px; min-width: 36px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; border: 1px solid var(--pa-pill-border);
    background: var(--pa-pill-bg); color: var(--text-faint);
    transition: all 0.15s;
  }
  #theme-toggle:hover { background: var(--pa-pill-hover); border-color: var(--pa-glass-border); color: var(--text-secondary); }

  /* ════════════════ Map: full-viewport ════════════════ */
  #map-wrapper {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    max-width: none; width: 100%; z-index: 1;
  }
  #map-container {
    width: 100%; height: 100%; border-radius: 0; border: none;
  }

  /* ════════════════ Search: fixed full-width ════════════════ */
  #city-search-box {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 56px; right: 12px;
    width: auto; max-width: none; z-index: 1050;
  }
  #city-search-inner {
    height: 44px;
    min-height: unset;
    border-radius: 14px;
  }
  #city-search-input { font-size: 16px; }
  #city-search-results { max-height: 50vh; border-radius: 12px; }
  #city-search-results li { padding: 12px 14px; min-height: 44px; }

  /* ════════════════ Hidden below-map elements ════════════════ */
  .stats, .data-source { display: none; }
  #list-tabs { display: none; }
  .panel { display: none !important; }
  #global-corp-panel.panel-open,
  #list-panel.panel-open { display: flex !important; }

  /* ── Cities list panel: bottom sheet on mobile ── */
  #list-panel.panel-open {
    position: fixed; inset: 0; z-index: 1060;
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 32px var(--shadow-xl);
    max-height: 85vh; bottom: 0; top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }
  #list-panel.panel-open::before {
    content: ''; display: block; width: 40px; height: 5px;
    background: var(--text-muted); border-radius: 3px;
    margin: 10px auto 6px; opacity: 0.5;
  }
  #list-panel.panel-open #list-header { min-height: 52px; padding: 12px 14px; }

  /* ── Global corp panel: bottom sheet on mobile ── */
  #global-corp-panel.panel-open {
    position: fixed; inset: 0; z-index: 1001;
    background: var(--bg-primary);
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 32px var(--shadow-xl);
    max-height: 85vh; bottom: 0; top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }
  #global-corp-panel::before {
    content: ''; display: block; width: 40px; height: 5px;
    background: var(--text-muted); border-radius: 3px;
    margin: 10px auto 6px; opacity: 0.5;
  }
  #global-corp-header { min-height: 52px; }

  /* ════════════════ Mobile sheet backdrop ════════════════ */
  #mobile-backdrop {
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  #mobile-backdrop.active { display: block; }

  /* ════════════════ Shared bottom sheet styles ════════════════ */
  #wiki-sidebar,
  #country-panel,
  #corp-panel,
  #trade-panel,
  #fx-sidebar,
  #filter-panel,
  #stats-panel,
  #region-panel,
  #compare-panel,
  #country-compare-panel {
    position: fixed !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    border-top: 1px solid var(--pa-glass-border) !important;
    box-shadow: 0 -4px 32px var(--shadow-xl) !important;
    z-index: 1001 !important;
    transform: translateY(100%) !important;
    transition: transform 0.35s cubic-bezier(.32,.72,.37,1.04) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    overscroll-behavior: contain;
  }
  #wiki-sidebar.open,
  #country-panel.open,
  #corp-panel.open,
  #trade-panel.open,
  #fx-sidebar.open,
  #filter-panel.open,
  #stats-panel.open,
  #region-panel.open,
  #compare-panel.visible,
  #country-compare-panel.visible { transform: translateY(0) !important; }

  /* Override the forced !important for panels that need different heights */
  #wiki-sidebar  { height: 75vh !important; }
  #country-panel { height: 75vh !important; }
  #corp-panel     { height: 70vh !important; }
  #trade-panel    { height: 70vh !important; }
  #fx-sidebar     { height: 70vh !important; }
  #filter-panel   { height: 80vh !important; }
  #stats-panel    { height: 70vh !important; }
  #region-panel   { height: 70vh !important; }
  #compare-panel, #country-compare-panel { height: 70vh !important; }
  
  /* Compare panels: bottom sheet overrides on mobile */
  .float-panel.float-panel-center {
    transform: translateY(100%) !important;
  }
  .float-panel.float-panel-center.visible {
    transform: translateY(0) !important;
  }
  #compare-panel, #country-compare-panel {
    position: fixed !important;
    top: auto !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 70vh !important;
  }

  /* Drag handle on every sheet */
  #wiki-sidebar::before,
  #country-panel::before,
  #corp-panel::before,
  #trade-panel::before,
  #fx-sidebar::before,
  #filter-panel::before,
  #stats-panel::before,
  #region-panel::before,
  #compare-panel::before,
  #country-compare-panel::before {
    content: ''; display: block; width: 40px; height: 5px;
    background: var(--text-muted); border-radius: 3px;
    margin: 10px auto 6px; opacity: 0.5; flex-shrink: 0;
  }

  /* Sheet header: taller tap targets */
  #wiki-sidebar-header,
  #filter-panel-header,
  #fx-header,
  #trade-panel-header,
  #stats-panel-header,
  #cp-header,
  #corp-panel-header,
  #nations-panel-header,
  #bookmarks-header,
  #compare-header,
  #cc-header,
  #global-corp-header {
    min-height: 52px;
    padding: 12px 14px;
  }
  /* Consistent close (×) button tap targets across all sheets */
  #wiki-sidebar-close,
  #stats-panel-close,
  #corp-panel-close,
  #cp-close,
  #fx-close,
  #filter-panel-close,
  #trade-panel-close,
  #nations-panel-close,
  #bookmarks-close,
  #compare-close,
  #cc-close,
  .rp-close {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; padding: 0; line-height: 1; flex-shrink: 0;
    border-radius: 8px; transition: background 0.15s;
  }
  #wiki-sidebar-close:active,
  #stats-panel-close:active,
  #corp-panel-close:active,
  #cp-close:active,
  #fx-close:active,
  #filter-panel-close:active,
  #trade-panel-close:active,
  #nations-panel-close:active,
  #bookmarks-close:active,
  #compare-close:active,
  #cc-close:active,
  .rp-close:active {
    background: var(--bg-elevated);
  }

  /* Floating popups → bottom sheets */
  #bookmarks-panel, #nations-panel {
    width: 100% !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    max-height: 60vh; border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -4px 32px var(--shadow-xl) !important;
    z-index: 1001 !important;
  }
  #bookmarks-panel::before, #nations-panel::before {
    content: ''; display: block; width: 40px; height: 5px;
    background: var(--text-muted); border-radius: 3px;
    margin: 10px auto 6px; opacity: 0.5;
  }
  #bookmarks-panel #bookmarks-header,
  #nations-panel #nations-panel-header {
    min-height: 52px; padding: 12px 14px;
  }

  /* ════════════════ Map legends: compact glass card ════════════════ */
  #map-legends { bottom: 8px; left: 8px; max-width: 65vw; gap: 4px; }
  .legend-ramp { width: 120px; height: 8px; }
  .legend-tick-row { width: 120px; font-size: 0.65rem; }
  .legend-end-label { font-size: 0.68rem; }
  .wiki-legend-title { font-size: 0.7rem; }
  #map-legends > div { padding: 4px 8px; }

  /* ════════════════ Toggle buttons: already styled in drawer ════════════════ */

  /* ════════════════ Bottom nav bar (replaces FABs) ════════════════ */
  #fab-stack {
    position: fixed; bottom: 0; left: 0; right: 0;
    flex-direction: row; gap: 0; z-index: 1005;
    background: var(--pa-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--pa-glass-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  #fx-fab, #draw-fab, #bookmarks-fab, #filter-fab, #nations-fab, #corp-fab {
    width: auto; height: auto; min-height: 44px; min-width: 0;
    flex: 1; max-width: 72px;
    font-size: 1.05rem;
    border-radius: 12px;
    box-shadow: none;
    flex-direction: column; gap: 1px;
    padding: 4px 2px 3px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  #fx-fab:active, #draw-fab:active, #bookmarks-fab:active, #filter-fab:active, #nations-fab:active, #corp-fab:active {
    transform: none; background: var(--pa-pill-hover);
  }
  #filter-fab-badge {
    top: 2px; right: 4px; font-size: 0.55em;
  }
  /* Bottom nav labels */
  #fx-fab::after, #nations-fab::after, #bookmarks-fab::after, #filter-fab::after, #corp-fab::after {
    content: attr(data-label);
    display: block; font-size: 0.55rem; color: var(--text-secondary);
    letter-spacing: 0.01em; line-height: 1.2; text-align: center;
    font-weight: 500;
  }
  #draw-fab .fab-label { font-size: 0.55rem; display: block; font-weight: 500; }
  #draw-fab:not(.active)::after {
    content: 'Draw'; display: block; font-size: 0.55rem; color: var(--text-secondary);
    line-height: 1.2; text-align: center; font-weight: 500;
  }

  /* ════════════════ Touch targets ════════════════ */
  button, [role="button"], select { min-height: 44px; min-width: 44px; }
  .wiki-tab { min-height: 44px; padding: 10px 16px; font-size: 0.82rem; }
  input[type="text"], input[type="number"], input[type="date"], select {
    min-height: 44px; font-size: 16px;
  }
  /* FX controls buttons: uniform */
  #fx-fetch-btn, #fx-reset-btn {
    min-height: 44px; min-width: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px; font-size: 0.76rem;
  }
  #fx-date { min-height: 44px; }
  /* Corp panel controls on mobile */
  #corp-sort-row label { font-size: 0.76rem; }
  #corp-sort, #corp-display-currency { min-height: 44px; font-size: 16px; }
  /* Search inputs */
  #f-search, #gcorp-search { font-size: 16px; min-height: 44px; }
  .filters select { min-height: 44px; font-size: 0.82rem; }

  /* ════════════════ Tables ════════════════ */
  table { font-size: 0.72rem; }
  thead th { padding: 6px 8px; font-size: 0.68rem; }
  tbody td { padding: 6px 8px; }
  .city-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #city-table { min-width: 600px; }
  #load-more-btn, #gcorp-more-btn {
    min-height: 44px; min-width: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px; font-size: 0.82rem;
  }
  .edit-btn {
    min-height: 44px; min-width: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; font-size: 0.82rem;
  }

  /* ════════════════ Filter rows: compact, minimalistic ════════════════ */
  #gcorp-filters { gap: 4px; }
  #gcorp-search { min-width: 80px; font-size: 16px; min-height: 36px; border-radius: 18px; }
  .filter-avail-row {
    padding: 4px 12px; min-height: auto;
  }
  .filter-avail-label { font-size: 0.76rem; }
  .filter-avail-btn {
    min-height: 28px; min-width: 44px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 10px; font-size: 0.7rem;
  }
  .filter-value-group { padding: 5px 12px; margin-bottom: 2px; }
  .filter-value-label { font-size: 0.76rem; }
  .filter-value-label-row { min-height: auto; margin-bottom: 2px; }
  .filter-bucket-row { gap: 3px; }
  .filter-bucket {
    font-size: 0.7rem; padding: 3px 8px; min-height: 28px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .filter-heat-btn {
    min-height: 28px; min-width: auto; padding: 2px 8px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.68rem;
  }
  #filter-aq-color-btn { min-height: 28px; min-width: auto; }
  .palette-chip {
    min-height: 28px; padding: 3px 8px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
  }
  .filter-mode-btn, .pop-slider-reset { min-height: 28px; min-width: auto; border-radius: 14px; }
  #filter-clear-btn { min-height: 28px; min-width: auto; padding: 2px 10px; font-size: 0.7rem; border-radius: 14px; }

  /* ════════════════ Filter panel: compact header ════════════════ */
  #filter-panel-header { min-height: 36px; padding: 6px 12px; }
  #filter-panel-title { font-size: 0.82rem; }
  #filter-panel-close { min-height: 44px; min-width: 44px; font-size: 1rem; border-radius: 14px; }

  /* ════════════════ Filter section heads: compact ════════════════ */
  .filter-section-head { padding: 6px 12px 3px; font-size: 0.62rem; letter-spacing: 0.06em; }

  /* ════════════════ Population slider: compact ════════════════ */
  .pop-slider-container { padding: 4px 0 2px; }
  .pop-slider-track { top: 6px; height: 4px; border-radius: 2px; }
  .pop-slider { top: 2px; height: 12px; }
  .pop-slider::-webkit-slider-thumb { width: 16px; height: 16px; }
  .pop-slider::-moz-range-thumb { width: 16px; height: 16px; }
  .pop-slider-labels { font-size: 0.58rem; margin-top: 1px; }
  .pop-slider-values { font-size: 0.68rem; gap: 3px; margin-top: 1px; }

  /* ════════════════ Heat controls: compact ════════════════ */
  #heat-controls-row { padding: 4px 12px 6px; }
  .heat-ctrl { gap: 5px; padding: 2px 0; }
  .heat-ctrl-label { font-size: 0.6rem; width: 42px; }
  .heat-ctrl-slider { height: 2px; }
  .heat-ctrl-val { font-size: 0.6rem; width: 26px; }

  /* ════════════════ AQ legend: compact ════════════════ */
  #filter-aq-legend { margin-top: 4px; padding: 4px 6px; border-radius: 8px; }
  .filter-aq-legend-row { gap: 5px; font-size: 0.64rem; padding: 1px 0; }
  .filter-aq-swatch { width: 8px; height: 8px; }

  /* ════════════════ Heat palette: compact ════════════════ */
  #heat-palette-row { padding: 4px 12px 6px; }
  #heat-palette-row .filter-row-label { font-size: 0.6rem; margin-bottom: 3px; }
  .palette-chips { gap: 4px; }
  .palette-strip { width: 24px; height: 6px; border-radius: 2px; }

  /* ════════════════ Filter panel footer: compact ════════════════ */
  #filter-panel-footer { padding: 5px 12px; font-size: 0.68rem; }

  /* ════════════════ Avail list & value list: tighter ════════════════ */
  #filter-avail-list { padding: 4px 12px 6px; }
  #filter-value-list { padding: 4px 12px 6px; }

  /* ════════════════ Choropleth time controls ════════════════ */
  #choro-year-range { width: 80px; height: 28px; }
  #choro-year-label { font-size: 0.7rem; }
  #choro-play-btn {
    min-height: 36px; min-width: 36px; padding: 4px 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #choro-time-slider { align-items: center; gap: 8px; }

  /* ════════════════ Loading overlay ════════════════ */
  #loading-overlay {
    border-radius: 0;
    background: rgba(13,17,23,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  #loading-overlay { font-size: 0.85rem; }

  /* ════════════════ Dropdown menu (styled in drawer above) ════════════════ */

  /* ════════════════ Leaflet controls ════════════════ */
  .leaflet-top.leaflet-left {
    left: auto !important; right: 10px !important;
    top: auto !important; bottom: 72px !important;
  }
  .leaflet-top.leaflet-left .leaflet-control {
    margin: 0 0 6px 0;
    border-radius: 12px !important;
    overflow: hidden;
  }
  .leaflet-control-zoom a {
    width: 44px !important; height: 44px !important;
    line-height: 44px !important; font-size: 1.2rem !important;
  }
  .leaflet-bottom.leaflet-left { display: none; }
  #aq-bar {
    bottom: 72px !important; left: 10px !important; right: auto !important;
    max-width: calc(100vw - 70px);
  }
  #aq-toggle-btn {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #map-legends {
    bottom: 72px !important; left: 10px !important;
    max-width: 50vw;
  }

  /* ════════════════ Popups: wider on mobile ════════════════ */
  .leaflet-popup { max-width: 88vw !important; }
  .leaflet-popup-content { margin: 14px 16px !important; }
  .leaflet-popup-close-button { top: 8px !important; right: 10px !important; font-size: 1.4rem !important; }

  /* ════════════════ Custom tip ════════════════ */
  #econ-custom-tip { max-width: 80vw; border-radius: 10px; }

  /* ════════════════ Edit modal: bottom sheet ════════════════ */
  #edit-box {
    max-width: 100vw; width: 100vw; margin: 0;
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 32px;
    max-height: 90vh;
  }
  #edit-modal { align-items: flex-end; }
  .field-row { flex-direction: column; }
  .modal-actions { gap: 8px; flex-wrap: wrap; }
  .btn-delete, .btn-cancel, .btn-save {
    min-height: 44px; min-width: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px; font-size: 0.82rem; flex: 1;
  }
  .btn-delete { flex: none; }

  /* ════════════════ Lightbox on mobile ════════════════ */
  .lightbox-nav { font-size: 2.2rem; padding: 12px 20px; }
  #lightbox-close { font-size: 2.4rem; top: env(safe-area-inset-top, 14px); }

  /* ════════════════ Popup action buttons: bigger ════════════════ */
  .leaflet-popup-content a,
  .leaflet-popup-content button {
    min-height: 44px; padding: 8px 14px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem; gap: 4px;
  }
  .leaflet-popup-content { line-height: 1.5; }

  /* ════════════════ Scrollbar on mobile: hide chrome ════════════════ */
  *::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none; }
  
  /* Stats panel scope buttons */
  .stats-scope-btn { min-height: 44px; border-radius: 8px; font-size: 0.76rem; }
   
  /* Region panel on mobile */
  #rp-body { padding: 8px 14px; }
  
  /* Census metric select */
  #census-metric-select { min-height: 44px; font-size: 16px; }
  
  /* Reset all edits button */
  #reset-all-btn { min-height: 44px; min-width: 44px; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; }
  
  /* ════════════════ Bookmarks & Nations bottom sheet items ════════════════ */
  .bm-item { min-height: 52px; padding: 10px 14px; }
  .bm-name { font-size: 0.85rem; }
  .bm-rm { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nations-indicator { min-height: 48px; padding: 10px 14px; font-size: 0.85rem; }
  
  /* ════════════════ Toast repositioned above FABs ════════════════ */
  .toast-container { bottom: 70px; left: 10px; right: 10px; transform: none; }
  .toast { font-size: 0.85rem; border-radius: 10px; padding: 10px 16px; }
  

  
  /* ════════════════ Country panel stat cards gap ════════════════ */
  #cp-stats-row { gap: 1px; }
  .cp-stat-card { min-height: 56px; padding: 10px; }
  
  /* ════════════════ Bottom nav bar offset for panels ════════════════ */
  #wiki-sidebar-body,
  #filter-value-list,
  #fx-list,
  #corp-list,
  #trade-panel-body,
  #stats-panel-body,
  #cp-body,
  #rp-body,
  #compare-body,
  #cc-body,
  #nations-panel-body,
  #bookmarks-body {
    padding-bottom: 56px;
  }

  /* ════════════════ Wiki sidebar: mobile-friendly content ════════════════ */
  #wiki-sidebar-header { min-height: 52px; padding: 12px 16px; }
  #wiki-sidebar-title { font-size: 0.82rem; }
  .wiki-city-header { padding: 12px 16px 4px; }
  .wiki-city-name { font-size: 1.35rem; }
  .wiki-city-desc { font-size: 0.84rem; }
  .wiki-info-table { font-size: 0.84rem; }
  .wiki-info-label { padding: 7px 8px 7px 14px; width: 42%; }
  .wiki-info-val { padding: 7px 14px 7px 0; }
  .wiki-info-section-head { padding: 8px 14px 8px 10px; font-size: 0.7rem; }
  #wiki-sidebar-footer { gap: 6px; padding: 10px 14px; }
  .wiki-footer-link {
    min-height: 44px; padding: 6px 10px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
  }
  .wiki-cmp-btn {
    min-height: 44px; padding: 6px 10px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Wiki image strip taller on mobile */
  .wiki-img-strip { height: 180px; }
  .wiki-carousel-img { height: 200px; }
  /* Info chips grid */
  .info-chips { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .info-chip { padding: 8px 6px; }
  .info-chip-lbl { font-size: 0.6rem; }
  .info-chip-val { font-size: 0.88rem; }
  /* Weather chip grid */
  .wb-chips { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .wb-chip { padding: 8px 6px; }
  .wb-chip-full { grid-column: span 2; }
  /* Economy two-col override */
  .econ-two-col { flex-direction: column; }

  /* ════════════════ Country panel: mobile reflow ════════════════ */
  #cp-stats-row { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .cp-stat-card { min-height: 56px; padding: 10px; }
  .cp-stat-val { font-size: 1rem; }
  .cp-stat-lbl { font-size: 0.65rem; }
  .cp-gauge-lbl { width: 75px; font-size: 0.74rem; }
  .cp-gauge-val { width: 48px; font-size: 0.74rem; }
  .cp-close { font-size: 1.4rem; }
  /* Tabs scrollable */
  .cp-tab-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cp-tab { min-height: 44px; padding: 8px 12px; font-size: 0.76rem; white-space: nowrap; }
  .cp-radar-tab { min-height: 44px; font-size: 0.66rem; }
  .cp-admin1-btn { min-height: 44px; border-radius: 8px; font-size: 0.74rem; padding: 4px 10px; }

  /* ════════════════ Trade panel: mobile ════════════════ */
  .tf-flow-row { min-height: 44px; gap: 8px; }
  .tf-flow-label { font-size: 0.82rem; }
  .tf-flow-detail { font-size: 0.72rem; }
  .tf-flow-total { font-size: 0.92rem; }
  #trade-balance-row { padding: 10px 14px; }
  #trade-balance-label { font-size: 0.82rem; }
  #trade-balance-val { font-size: 0.98rem; }
  .trade-section-head { font-size: 0.68rem; }

  /* ════════════════ FX sidebar: mobile ════════════════ */
  .fx-row { grid-template-columns: 38px 1fr 60px 50px; padding: 6px 10px; }
  .fx-cur { font-size: 0.76rem; }
  .fx-label { font-size: 0.7rem; }
  .fx-input { font-size: 0.76rem; padding: 4px 6px; }

  /* ════════════════ Stats panel: mobile ════════════════ */
  .stats-ranks { gap: 4px; }
  .stats-rank-badge { padding: 8px 6px; }
  .stats-rank-n { font-size: 0.96rem; }
  .stats-rank-lbl { font-size: 0.62rem; }
  .stats-rank-row { padding: 8px 6px; }
  .stats-scope-btn { min-height: 44px; border-radius: 8px; font-size: 0.76rem; }

  /* ════════════════ Region panel: mobile ════════════════ */
  .rp-stat-row { padding: 8px 0; }
  .rp-stat-label { font-size: 0.84rem; }
  .rp-stat-val { font-size: 0.88rem; }
  .rp-section-title { font-size: 0.76rem; margin: 12px 0 6px; }

  /* ════════════════ Compare panels: mobile ════════════════ */
  #compare-table, #cc-table { font-size: 0.78rem; }
  #compare-table th, #cc-table th { padding: 10px 8px; }
  #compare-table td, #cc-table td { padding: 8px; }
  .cmp-section td { font-size: 0.68rem; padding: 6px 8px; }
  .cmp-metric-col { font-size: 0.7rem; }

  /* ════════════════ List panel & Corp panel: mobile ════════════════ */
  #list-header { padding: 10px 14px; }
  #list-header h2 { font-size: 1rem; }
  .filters { flex-direction: column; gap: 6px; }
  .filters select { width: 100%; }
  #global-corp-header { padding: 12px 14px; }
  #global-corp-header h2 { font-size: 1rem; }
  #global-corp-panel-close { display: none; }
  #gcorp-filters { flex-direction: column; gap: 8px; }
  #gcorp-search { width: 100%; }
  #gcorp-sort { width: 100%; max-width: none; }
  .count-dropdown { max-width: none; width: 100%; }
  .count-dropdown-trigger { min-height: 44px; padding: 10px 12px; font-size: 0.88rem; }
  .count-dropdown-menu { max-height: 50vh; }
  .count-dropdown-item { padding: 12px 14px; min-height: 44px; font-size: 0.85rem; }
  #corp-panel-controls { padding: 10px 14px; gap: 8px; }
  #corp-sort-row { flex-wrap: wrap; gap: 6px; }
  #corp-display-currency { max-width: none; }

  /* ════════════════ Global corp panel: compact cards on mobile ════════════════ */
  #global-corp-panel { max-width: 100%; overflow-x: hidden; }
  #gcorp-filters { flex-direction: column; gap: 8px; padding: 0 12px; }
  #gcorp-search { width: 100%; min-width: 0; font-size: 16px; min-height: 44px; border-radius: 22px; }
  #gcorp-count { font-size: 0.74rem; }

  /* ── Table → compact 2-line cards ── */
  #gcorp-table { display: block; }
  #gcorp-table thead { display: none; }
  #gcorp-table tbody { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
  #gcorp-table tbody tr {
    display: block; padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  #gcorp-table tbody tr:hover { background: var(--hover-row); border-color: var(--accent-muted); }
  #gcorp-table tbody tr:active { background: var(--bg-primary); }
  #gcorp-table tbody td { display: none; }
  #gcorp-table td.gcorp-name-cell {
    display: block; padding: 0; max-width: none; overflow: visible; text-overflow: unset; white-space: normal;
  }

  /* Row 1: Name left, Revenue right */
  .gcorp-card-row1 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .gcorp-card-name {
    display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
  }
  .gcorp-card-rev {
    display: block; font-size: 0.76rem; font-weight: 600; color: var(--gold);
    white-space: nowrap; flex-shrink: 0;
  }

  /* Row 2: Location·Industry left, Employees right */
  .gcorp-card-row2 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-top: 2px;
  }
  .gcorp-card-loc {
    display: block; font-size: 0.72rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
  }
  .gcorp-card-emp {
    display: block; font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; flex-shrink: 0;
  }

  /* Show more */
  #gcorp-more-row { display: block !important; }
  #gcorp-more-row td { display: block; padding: 0 12px; }
  #gcorp-more-btn {
    width: 100%; min-height: 48px; border-radius: 22px;
    background: var(--accent-subtle); color: var(--accent);
    border: 1px solid var(--accent-muted);
    font-size: 0.86rem; font-weight: 500;
    transition: background 0.15s;
  }
  #gcorp-more-btn:active { transform: scale(0.98); background: var(--accent-muted); }

  #global-corp-header { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 14px; }
  #global-corp-header h2 { font-size: 1.02rem; }
  .table-wrap { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Mobile landscape (≤1024px AND landscape orientation)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (orientation: landscape) {
  /* ════════════════ Topbar: compact landscape drawer ════════════════ */
  #topbar {
    max-height: 70vh;
    border-radius: 0 0 14px 14px;
    padding: 10px 14px 8px;
  }
  #topbar.mobile-open {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  #topbar::before {
    margin: 0 auto 6px;
  }
  #topbar-right {
    padding-bottom: 4px;
    margin-bottom: 2px;
  }
  #cities-toggle-btn, #choro-toggle-btn, #admin1-toggle-btn, #econ-toggle-btn {
    font-size: 0.7rem;
    padding: 4px 10px;
    min-height: 30px;
    border-radius: 15px;
  }
  .mobile-drawer-section.mobile-toggles {
    gap: 4px;
  }
  #more-layers-btn {
    font-size: 0.7rem;
    min-height: 30px;
    padding: 4px 10px;
  }
  #reset-layers-btn {
    min-height: 30px;
    min-width: 30px;
    border-radius: 15px;
  }
  #more-layers-menu {
    max-height: 55vh;
  }
  #more-layers-menu button {
    padding: 8px 12px;
    min-height: 36px;
    font-size: 0.76rem;
    margin: 1px 8px;
  }
  .mobile-drawer-section.mobile-layers {
    padding-top: 2px;
  }
  #basemap-select {
    font-size: 0.7rem;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 15px;
  }
  #theme-toggle {
    min-height: 30px;
    min-width: 30px;
    border-radius: 15px;
    font-size: 0.95rem;
  }
  .mobile-section-heading {
    padding: 3px 0 2px;
    font-size: 0.55rem;
  }

  /* ════════════════ FAB bottom nav: thin landscape bar ════════════════ */
  #fab-stack {
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom, 0px));
  }
  #fx-fab, #draw-fab, #bookmarks-fab, #filter-fab, #nations-fab, #corp-fab {
    min-height: 36px;
    font-size: 0.92rem;
    border-radius: 10px;
    padding: 2px 2px 1px;
    gap: 0;
  }
  #fx-fab::after, #nations-fab::after, #bookmarks-fab::after, #filter-fab::after, #corp-fab::after {
    font-size: 0.48rem;
  }
  #draw-fab .fab-label,
  #draw-fab:not(.active)::after {
    font-size: 0.48rem;
  }
  #filter-fab-badge {
    top: 0; right: 2px; font-size: 0.5em;
  }

  /* ════════════════ Search bar: adjust for landscape ════════════════ */
  #city-search-inner {
    height: 36px;
    min-height: unset;
    border-radius: 10px;
  }
  #mobile-topbar-toggle {
    width: 36px; height: 36px;
    border-radius: 10px;
  }

  /* ════════════════ Leaflet zoom: reposition for landscape ════════════════ */
  .leaflet-top.leaflet-left {
    bottom: 50px !important;
  }
  #aq-bar { bottom: 50px !important; }
  #map-legends { bottom: 50px !important; }

  /* ════════════════ Side panels: shorter in landscape ════════════════ */
  #wiki-sidebar  { height: 65vh !important; }
  #country-panel { height: 65vh !important; }
  #corp-panel     { height: 60vh !important; }
  #trade-panel    { height: 60vh !important; }
  #fx-sidebar     { height: 60vh !important; }
  #filter-panel   { height: 70vh !important; }
  #stats-panel    { height: 60vh !important; }
  #region-panel   { height: 60vh !important; }
  #compare-panel, #country-compare-panel { height: 60vh !important; max-height: 60vh !important; }

  /* ════════════════ Toast above thin nav ════════════════ */
  .toast-container { bottom: 50px; }

  /* ════════════════ Panel body bottom padding for thin nav ════════════════ */
  #wiki-sidebar-body,
  #filter-value-list,
  #fx-list,
  #corp-list,
  #trade-panel-body,
  #stats-panel-body,
  #cp-body,
  #rp-body,
  #compare-body,
  #cc-body,
  #nations-panel-body,
  #bookmarks-body {
    padding-bottom: 42px;
  }
}

/* Layer indicator dots for dropdown - compact layout */
.layer-dot {
  display: none;
}

/* Show layer dots inside mobile drawer dropdown */
@media (max-width: 768px) {
  .layer-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex-shrink: 0;
  }
}

/* ── Phone (≤767px): prevent sidebar content overflow ── */
@media (max-width: 767px) {
  #wiki-sidebar, #country-panel, #corp-panel, #trade-panel,
  #fx-sidebar, #filter-panel, #stats-panel, #region-panel,
  #compare-panel, #country-compare-panel {
    overflow: hidden !important;
  }
  #wiki-sidebar-body,
  #cp-body,
  #corp-list,
  #fx-list,
  #trade-panel-body,
  #stats-panel-body,
  #rp-body,
  #compare-body,
  #cc-body,
  #nations-panel-body,
  #bookmarks-body,
  #filter-value-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #cp-body {
    flex-direction: column !important;
  }
  .cp-left-col, .cp-right-col {
    width: 100% !important;
    border-right: none !important;
    overflow-y: auto;
  }
  .fx-row {
    grid-template-columns: 38px 1fr 52px 42px;
  }
  #wiki-sidebar-body {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .leaflet-top.leaflet-left {
    right: 8px !important;
    bottom: 72px !important;
  }
  .leaflet-control-zoom a {
    width: 44px !important; height: 44px !important;
    line-height: 44px !important;
  }
  #aq-bar {
    bottom: 72px !important;
    max-width: calc(100vw - 60px);
  }
  #map-legends {
    bottom: 72px !important;
    max-width: 55vw;
  }
  .leaflet-popup { max-width: 92vw !important; }
  .wiki-car-btn { font-size: 1.4rem; }
  .wiki-car-dot.active { transform: scale(1.5); }
  .pop-slider::-webkit-slider-thumb { width: 22px; height: 22px; }
  .pop-slider::-moz-range-thumb { width: 22px; height: 22px; }
  .census-stat-clickable { padding: 8px 10px; margin: -8px -10px; }
}

/* Improved dropdown layout - wider and more compact (desktop only) */
@media (min-width: 1025px) {
  #more-layers-menu {
    min-width: 220px;
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Updated button styles for compact horizontal layout (desktop only) */
@media (min-width: 1025px) {
  #more-layers-menu button {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile drawer sections: hidden by default on narrow screens, shown on desktop */
@media (max-width: 1024px) {
  .mobile-drawer-section { display: none; }
}

.dropdown-section {
  padding: 6px 0;
}

.dropdown-heading {
  font-size: 0.65rem;
  letter-spacing: 0.8px;
  padding: 3px 12px;
}

/* Loading indicators for lazy-loaded layers */
.loading-dots {
  display: inline-flex;
  gap: 2px;
}

.loading-dots::before,
.loading-dots::after,
.loading-dots {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: loading-pulse 1.4s infinite ease-in-out both;
}

.loading-dots::before {
  animation-delay: -0.32s;
}

.loading-dots::after {
  animation-delay: -0.16s;
}

@keyframes loading-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: toast-slide-up 0.3s ease;
  pointer-events: auto;
  max-width: 400px;
  word-break: break-word;
}

.toast.info {
  background: #58a6ff;
  color: white;
}

.toast.success {
  background: #3fb950;
  color: white;
}

.toast.warning {
  background: #d29922;
  color: white;
}

.toast.error {
  background: #f85149;
  color: white;
}

.toast.loading {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes toast-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.toast.hiding {
  animation: toast-fade-out 0.3s ease forwards;
}

/* Memory pressure indicator */
.memory-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 999;
  font-family: monospace;
}

.memory-indicator.warning {
  border-color: #d29922;
  color: #d29922;
}

.memory-indicator.critical {
  border-color: #f85149;
  color: #f85149;
  animation: pulse-warning 1s infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Layer button loading state */
#more-layers-menu button.loading {
  opacity: 0.7;
  cursor: wait;
}

#more-layers-menu button.loading .loading-dots {
  margin-left: 4px;
}

@media (pointer: coarse) {
  .wiki-car-btn, .wiki-car-dot, #filter-panel-close, button, .btn, a {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (max-width: 768px) {
  .toast {
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 640px) {
  #keyboard-help-card {
    min-width: 0 !important;
    width: 100% !important;
  }
  .es-trend-row {
    min-width: 0 !important;
  }
  .toast {
    max-width: 100% !important;
  }
  .fx-row {
    min-width: 0 !important;
    width: auto !important;
  }
  #country-panel {
    width: 100% !important;
  }
  #region-panel {
    width: 100% !important;
  }
  #wiki-sidebar {
    width: 100% !important;
  }
  #corp-panel {
    width: 100% !important;
  }
  #global-corp-panel.panel-open {
    width: 100% !important;
  }
  #compare-panel {
    width: calc(100% - 20px) !important;
  }
  #country-compare-panel {
    width: calc(100% - 20px) !important;
  }
  #nations-panel {
    width: calc(100% - 20px) !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  #bookmarks-panel {
    width: calc(100% - 20px) !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .legend-ramp {
    width: 100% !important;
    max-width: 100% !important;
  }
  .legend-tick-row {
    width: 100% !important;
    max-width: 100% !important;
  }
  .filters input[type="text"] {
    min-width: 0 !important;
  }
  .filters select {
    min-width: 0 !important;
  }
  #gcorp-search {
    min-width: 0 !important;
  }
  .count-dropdown {
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  #cp-body {
    flex-direction: column !important;
  }
  .keyboard-help-card {
    min-width: auto !important;
  }
  .es-trend-row {
    grid-template-columns: 1fr !important;
  }
  .toast {
    max-width: 90vw !important;
  }
  .fx-row {
    grid-template-columns: 1fr !important;
  }
  .wiki-car-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .wiki-car-dot {
    width: 12px !important;
    height: 12px !important;
  }
  #filter-panel-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── Power Plant Detail Section ──────────────────────────────────────────── */
.pp-section {
  margin: 0 10px 12px 10px;
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2, #161b22);
}
.pp-section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg, #0d1117);
  border-bottom: 1px solid var(--border, #30363d);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg, #e6edf3);
}
.pp-attribution {
  color: var(--text-muted, #8b949e);
  font-size: 0.7rem;
  cursor: help;
}
.pp-table-wrap {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.pp-table th {
  position: sticky;
  top: 0;
  background: var(--bg, #0d1117);
  color: var(--text-muted, #8b949e);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  padding: 5px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border, #30363d);
  z-index: 1;
}
.pp-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-subtle, #30363d44);
  color: var(--fg, #e6edf3);
  vertical-align: middle;
}
.pp-row { cursor: pointer; }
.pp-row:hover { background: var(--bg-hover, #1c2129); }
.pp-name { min-width: 180px; }
.pp-name span { display: inline-block; vertical-align: middle; }
.pp-icon { margin-right: 3px; font-size: 0.85em; }
.pp-ext-link {
  color: var(--text-muted, #8b949e);
  text-decoration: none;
  margin-left: 3px;
  font-size: 0.75em;
}
.pp-ext-link:hover { color: var(--accent, #58a6ff); }
.pp-cap, .pp-gen, .pp-fuel { white-space: nowrap; }
.pp-cap { color: var(--accent, #58a6ff); font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-gen { font-variant-numeric: tabular-nums; }
.pp-gen-year { color: var(--text-muted, #8b949e); font-size: 0.85em; }
.pp-fuel { color: var(--text-secondary, #8b949e); font-size: 0.7rem; }
.pp-year { color: var(--text-muted, #8b949e); font-variant-numeric: tabular-nums; }
.pp-owner { color: var(--text-secondary, #8b949e); font-size: 0.68rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-dist { color: var(--text-faint, #484f58); font-size: 0.65rem; white-space: nowrap; }

/* ── Power Plant Detail Card (expandable row) ── */
.pp-detail-card {
  border-top: 1px solid var(--border-subtle, #30363d44);
  padding: 8px 12px;
  background: var(--bg, #0d1117);
  font-size: 0.68rem;
}
.pp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  margin-bottom: 6px;
}
.pp-detail-field label {
  display: block;
  color: var(--text-muted, #8b949e);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pp-detail-field span {
  color: var(--fg, #e6edf3);
  font-size: 0.7rem;
}
.pp-gen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle, #30363d44);
}
.pp-gen-chip {
  background: var(--bg2, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.65rem;
  color: var(--fg, #e6edf3);
}
.pp-gen-chip b { color: var(--accent, #58a6ff); }
.pp-gen-est { border-color: var(--gold, #f0a500); opacity: 0.8; }
.pp-gen-est b { color: var(--gold, #f0a500); }

/* ── INFORM Risk attribution ── */
.cp-gauge-section-hdr .inform-attr {
  color: var(--text-muted, #8b949e);
  font-size: 0.65rem;
  font-weight: 400;
  margin-left: 6px;
  cursor: help;
}