/* Community Data Map — black & gold theme (floating panels) */

:root {
  /* ---- Black & gold brand palette ---- */
  --bg: #ffffff;
  --panel-bg: #f7f4ea;
  --border: #e2dcc8;
  --text: #2a2a2a;          /* near-black body/heading */
  --muted: #6b6656;         /* warm gray */
  --accent: #d4af37;        /* classic gold — fills/active (pair with dark text) */
  --accent-bright: #e6c868; /* light gold — brand pops / underline */
  --accent-deep: #b8942a;   /* deep gold — gradients/contrast */
  --accent-soft: #f5ecc9;   /* soft gold — hover/selection */
  --accent-text: #7a5c12;   /* dark gold — readable accent TEXT on light bg */
  --on-accent: #1b1b1b;     /* dark ink for text sitting on gold fills */
  --ink: #111111;           /* near-black chrome (toolbar/headers) */
  --header-bg: #161616;     /* black header chrome */
  --header-ink: #f4e7c1;    /* soft gold text on black headers */
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
}

/* ---------- Full-bleed map ---------- */
#app {
  position: relative;
  /* 100dvh tracks the *visible* viewport on mobile (shrinks when the browser's
     address/nav bars show) so the bottom dock isn't hidden behind phone chrome.
     Falls back to 100vh where dvh isn't supported. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}
#map {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/* ---------- Top toolbar (black chrome, gold accents) ---------- */
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 52px;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px 10px;
  padding: 6px 16px;
  background: var(--ink);
  color: #f2eede;
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Text wordmark replaces the old logo image. */
.tb-logo {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  user-select: none;
}
.tb-logo .tb-logo-mark {
  font-size: 19px;
  color: var(--accent);
}
.tb-logo .tb-logo-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a49c82;
}
.tb-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tb-spacer { flex: 1; }
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;   /* keep intrinsic size; only the search box flexes */
}
/* Fixed toolbar items keep their size so the row stays on one line. */
.tb-logo, .tb-divider, .tb-menu-wrap, .tb-group { flex: none; }
.tb-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Inline SVG icons in toolbar buttons. */
.tb-ico { display: inline-flex; }
.tb-ico svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb-caret { font-size: 10px; opacity: 0.65; }

/* Section dividers between logical toolbar groups. */
.tb-divider {
  width: 1px;
  align-self: stretch;
  margin: 5px 2px;
  background: var(--border);
}

/* Primary action button (+ Add Data). */
.tb-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.tb-primary:hover { background: var(--accent-deep); border-color: var(--accent-text); }
.tb-primary .tb-ico svg { stroke-width: 2.4; }

/* Panel toggle buttons (Layers / Legend): the "on" state (panel visible) is filled so
   it's obvious at a glance which panels are showing. */
.tb-toggle.tb-toggle-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tb-toggle.tb-toggle-on:hover { background: var(--accent-deep); border-color: var(--accent-text); }
/* Layers/Legend are icon-only everywhere (the icon + title/aria-label carry the meaning),
   keeping the bar compact. */
.tb-toggle .tb-label { display: none; }
/* Export/Share are icon-only on desktop too (they keep title + aria-label for naming). */
.tb-icononly .tb-label { display: none; }

/* Layer-count badge in the Layers panel header, beside the title. Small dark pill;
   hidden when empty (zero layers). */
.layer-count-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
}
.layer-count-badge:empty { display: none; }

/* The Map/Compare/Profile view-switcher keeps its text labels on desktop (so the three
   views read clearly); below 1100px the labels collapse to icons to keep the toolbar on
   one line (mobile already folds the switcher into the hamburger via .tb-mobile-hide). */
@media (max-width: 1100px) {
  .tb-seg .tb-label { display: none; }
}

/* View-switcher: Map / Compare / Profile as one segmented control. The active view is
   filled (accent) so the current mode is obvious. */
.tb-segmented {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.tb-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 11px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.tb-seg:last-child { border-right: 0; }
.tb-seg:hover { background: var(--accent-soft); }
.tb-seg.tb-seg-on { background: var(--accent); color: var(--on-accent); }
.tb-seg.tb-seg-on:hover { background: var(--accent-deep); }

/* Address / place search box in the toolbar. */
.tb-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 min(360px, 34vw);   /* can shrink so the one-line toolbar never wraps */
  min-width: 150px;
  padding: 3px 6px 3px 8px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
}
.tb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tb-search-ico { display: inline-flex; color: #6b7683; }
.tb-search-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 12px;
  background: transparent;
  color: var(--text);
}
.tb-search-input::-webkit-search-cancel-button { cursor: pointer; }
.tb-search-locate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #6b7683;
  border-radius: 50%;
  cursor: pointer;
}
.tb-search-locate:hover { background: var(--accent-soft); color: var(--accent-text); }
.tb-search-locate.locating { color: var(--accent-text); animation: tb-spin 0.9s linear infinite; }
.tb-search-locate svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tb-spin { to { transform: rotate(360deg); } }

.tb-search-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
  z-index: 50;
  display: none;
}
.tb-search-results.open { display: block; }
.tb-search-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
}
.tb-search-item:last-child { border-bottom: 0; }
.tb-search-item:hover { background: var(--accent-soft); }
.tb-search-empty, .tb-search-loading { padding: 9px 10px; font-size: 12px; color: #6b7683; }
.tb-search-group {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a0ad;
  background: #f8fafc;
  border-bottom: 1px solid #f0f2f5;
}
.tb-search-geo { display: flex; align-items: center; gap: 8px; }
.tb-search-tag {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Data-indicator rows in the unified search dropdown: a solid "Data" tag, the label, and
   a muted category/sub line below. */
.tb-search-ind { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.tb-search-ind-label { flex: 1 1 auto; min-width: 0; }
.tb-tag-data { color: #fff; background: var(--accent); }
.tb-search-sub { flex-basis: 100%; font-size: 10px; color: #94a0ad; }
.tb-search-ind.added .tb-search-ind-label { color: #6b7683; }

/* Timeline panel — floating, bottom-center by default; draggable like other panels.
   Uses .float-panel.float-timeline so its position/width beat the generic
   .float-panel rules declared later in this file (position:relative, width:320px). */
.float-panel.float-timeline {
  position: fixed;
  left: 50%;
  bottom: 24px;
  top: auto;
  transform: translateX(-50%);
  width: 460px;
  max-width: 82vw;
  z-index: 12;
}
/* Once dragged (JS sets position:fixed) the centering transform must not linger. */
.float-timeline.dragging { transform: none; }

.ts-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ts-play {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-play:hover { filter: brightness(1.08); }
.ts-track { flex: 1 1 auto; min-width: 160px; }
.ts-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ts-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  color: #8a95a1;
}
.ts-year {
  flex: none;
  min-width: 42px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ts-settings {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: #55616e;
}
.ts-setting { display: flex; align-items: center; gap: 6px; }
.ts-speed {
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
}
.ts-loop { cursor: pointer; }
.ts-loop input { cursor: pointer; }
.ts-empty { margin: 2px 0; font-size: 12px; color: #6b7683; }

/* ---------- Swipe compare ---------- */
/* Clone map overlays the main map; pointer-events pass through so the user still
   drives a single map. clip-path (set in JS) reveals only the right of the divider. */
#map-compare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.swipe-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
  z-index: 8;
  cursor: ew-resize;
  touch-action: none;
}
.swipe-divider.dragging { background: var(--accent-soft); }
.swipe-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  cursor: ew-resize;
}
.swipe-tag {
  position: absolute;
  bottom: 16px;
  z-index: 8;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  background: rgba(212, 175, 55, 0.94);
  padding: 3px 9px;
  border-radius: 12px;
  pointer-events: none;
}
.swipe-tag-l { left: 16px; }
.swipe-tag-r { right: 16px; }
.swipe-panel {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
}
.swipe-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-text);
}
.swipe-panel-year { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.swipe-year {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
}
.swipe-close {
  width: 24px;
  height: 24px;
  line-height: 1;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.swipe-close:hover { border-color: #d94141; color: #d94141; }

/* Unsaved-changes dot on the Map menu button. */
.tb-map-btn { position: relative; }
.tb-map-btn.tb-dirty::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5a623;
  border: 1.5px solid #fff;
}
/* Panel toggle controls read as on/off: a leading dot, filled/blue when on. */
.tb-toggle {
  color: var(--muted);
}
.tb-toggle::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: #c3ccd6;
}
.tb-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tb-toggle.active::before { background: #7ed957; }
.tb-menu-wrap { position: relative; }
.tb-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  z-index: 50;
}
.tb-menu.open { display: block; }
.tb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
}
.tb-menu-item:hover { background: var(--accent-soft); }
.tb-menu.tb-menu-left { left: 0; right: auto; }
.tb-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
/* Toggle menu items show a check when their panel is visible. */
.tb-menu-check { padding-left: 26px; position: relative; }
.tb-menu-check::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--accent-text);
  font-size: 12px;
  line-height: 12px;
}
.tb-menu-check.checked::before { content: '\2713'; }

/* Collapsible category inside a menu (mobile hamburger submenus). The header shows
   a caret that rotates when open; the submenu items indent and stay hidden until
   the category is expanded. */
.tb-menu-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.tb-sub-caret { font-size: 10px; opacity: 0.65; transition: transform 0.15s; }
.tb-menu-group.open .tb-sub-caret { transform: rotate(180deg); }
.tb-submenu { display: none; padding-left: 8px; margin: 2px 0 2px 4px; border-left: 2px solid var(--border); }
.tb-submenu.open { display: block; }

/* Keep MapLibre's top controls clear of the toolbar. */
.maplibregl-ctrl-top-right { top: 64px; }

/* Larger, more discoverable zoom / compass control (bottom-right). */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { box-shadow: 0 2px 8px rgba(0,0,0,0.22); }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button + button { border-top: 1px solid #e0e0e0; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button .maplibregl-ctrl-icon { transform: scale(1.15); }

/* ---------- Left dock (panels start here, aligned left) ---------- */
#dock {
  position: absolute;
  /* Clears the toolbar; --toolbar-h is kept in sync with the toolbar's real
     height in JS so wrapped (mobile) toolbars don't overlap the panels. */
  top: calc(var(--toolbar-h, 52px) + 4px);
  left: 0;
  z-index: 10;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - var(--toolbar-h, 52px) - 4px);
  /* Let clicks pass through the gaps to the map; panels re-enable pointer events. */
  pointer-events: none;
}
#dock .float-panel { pointer-events: auto; }

/* ---------- Right dock (Legend starts here, aligned right) ---------- */
#dock-right {
  position: absolute;
  top: calc(var(--toolbar-h, 52px) + 4px);
  right: 0;
  z-index: 10;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  max-height: calc(100vh - var(--toolbar-h, 52px) - 4px);
  pointer-events: none;
}
#dock-right .float-panel { pointer-events: auto; }

/* Toolbar can hide any panel entirely. */
.float-panel.hidden { display: none; }

/* ---------- Floating panels ---------- */
.float-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: 320px;
  /* Never fill the whole window — keep clear space above and below so it reads as a panel. */
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The Layers list is the tall one — cap it and scroll internally. */
#panel-layers .float-panel-body { max-height: 55vh; }
/* Once dragged, a panel is floated free (position:fixed set in JS). */
.float-panel.dragging {
  z-index: 30;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.float-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.float-panel-header:active { cursor: grabbing; }
.float-panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.float-panel-hint {
  font-size: 10px;
  opacity: 0.85;
  font-weight: 400;
  text-transform: none;
}
.collapse-btn {
  margin-left: auto;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.collapse-btn:hover { background: rgba(255, 255, 255, 0.35); }

/* Close (X) button — far right of each floating panel header. */
.panel-close-btn {
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.panel-close-btn:hover { background: rgba(255, 255, 255, 0.4); }
.collapse-btn + .panel-close-btn { margin-left: 6px; }
/* When there's no collapse button before it, keep the X pinned right. */
.float-panel-header > .panel-close-btn:first-of-type { margin-left: auto; }

.float-panel-body {
  padding: 12px;
  overflow-y: auto;
  /* Grow to fill the panel so a resized (taller) panel shows more content. */
  flex: 1 1 auto;
  min-height: 0;
}
.float-panel.collapsed .float-panel-body { display: none; }
/* Resizable panels reserve a scrollbar gutter + a little bottom room so the
   scrollbar never sits on top of the resize grip (which made it hard to spot). */
#panel-layers .float-panel-body,
#panel-legend .float-panel-body { scrollbar-gutter: stable; padding-bottom: 20px; }

/* Resize grip — bottom-right corner of resizable panels (Layers, Legend). */
.float-panel { position: relative; }
.resize-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 4;
  /* Diagonal gripper lines, tinted with the brand accent so it reads as a handle. */
  background:
    linear-gradient(135deg, transparent 0 45%, var(--accent) 45% 55%,
      transparent 55% 64%, var(--accent) 64% 74%, transparent 74% 83%,
      var(--accent) 83% 93%, transparent 93% 100%);
  opacity: 0.55;
  border-bottom-right-radius: 10px;
  transition: opacity 0.12s ease;
}
.resize-grip:hover,
.float-panel.resizing .resize-grip { opacity: 1; }
.float-panel.collapsed .resize-grip { display: none; }
.float-panel.resizing { z-index: 30; user-select: none; }

/* ---------- Basemap switcher ---------- */
.basemap-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.basemap-3d-toggle {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.basemap-3d-toggle input { cursor: pointer; }
.basemap-btn {
  flex: 1;
  padding: 7px 4px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
}
.basemap-btn:hover { border-color: var(--accent); }
.basemap-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ---------- Layer list (flat, draggable) ---------- */
.layer-panel { display: flex; flex-direction: column; gap: 4px; }

/* Empty state shown when no layers are on the map. */
.layer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px 14px;
  color: #6b7683;
}
.layer-empty-ico { color: var(--accent); }
.layer-empty-ico svg { width: 30px; height: 30px; display: block; }
.layer-empty-text { margin: 0; font-size: 12px; line-height: 1.4; }
.layer-empty-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 6px;
  cursor: pointer;
}
.layer-empty-btn:hover { background: var(--accent-deep); border-color: var(--accent-text); }

.layer-item {
  padding: 6px 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--bg);
}
.layer-item:hover { background: var(--accent-soft); }
.layer-item.dragging { opacity: 0.5; }
.layer-item.drag-over-top { box-shadow: inset 0 2px 0 0 var(--accent); }
.layer-item.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--accent); }

.layer-item-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.drag-grip {
  cursor: grab;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.drag-grip:active { cursor: grabbing; }
.layer-item-row input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.layer-item-label {
  font-size: 12px;
  cursor: pointer;
  flex: 1;
  line-height: 1.3;
}
.cat-tag {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- Style chips ---------- */
.layer-chip {
  flex-shrink: 0;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  vertical-align: middle;
}
.layer-chip.ramp { width: 24px; }
.layer-chip.square { }
.layer-chip.dot { width: 14px; height: 14px; border-radius: 50%; }
.layer-chip.bar { height: 5px; border-radius: 2px; }

/* The style-preview chip doubles as the button that opens the Style popup. */
.layer-chip.chip-btn { cursor: pointer; }
.layer-chip.chip-btn:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.layer-chip.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Style options (color + ramp + pattern) ---------- */
.style-row {
  display: none;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 8px;
  padding-left: 22px;
}
/* Style options live in a floating popup (opened via the chip) — show them there. */
.style-popup .style-row { display: flex; margin-top: 0; padding-left: 0; }
.style-popup .sel-popup-body { min-width: 280px; }

/* Rename + download actions at the top of the Style popup. */
.style-popup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.style-rename { flex: 1 1 160px; }
.style-rename-input {
  flex: 1;
  min-width: 120px;
  height: 26px;
  padding: 2px 8px;
  font-size: 12px;
}
.style-dl { gap: 8px; }
.style-dl-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.style-dl-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.style-ctl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.style-ctl > label {
  font-size: 11px;
  color: var(--muted);
}
.style-ctl input[type="color"] {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

/* Visual ramp swatches */
.ramp-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.ramp-swatch {
  width: 28px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.ramp-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Visual pattern swatches (rendered with CSS gradients) */
.pattern-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.pat-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  background-repeat: repeat;
}
.pat-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pat-none { background: #fff; }
.pat-diagonal { background-image: repeating-linear-gradient(45deg, #555 0 1.5px, transparent 1.5px 5px); }
.pat-crosshatch {
  background-image:
    repeating-linear-gradient(45deg, #555 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, #555 0 1.5px, transparent 1.5px 5px);
}
.pat-dots { background-image: radial-gradient(#555 25%, transparent 27%); background-size: 6px 6px; }

/* Independent pattern-opacity slider (keeps the hatch visible at 0% fill) */
.pat-opacity-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 110px;
}
.pat-opacity-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.pat-opacity-wrap .opacity-val {
  font-size: 11px;
  color: var(--muted);
  min-width: 30px;
  text-align: right;
}

/* ---------- Opacity slider ---------- */
.opacity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: 22px;
}
.opacity-row label {
  font-size: 11px;
  color: var(--muted);
  min-width: 44px;
}
.opacity-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.opacity-row .opacity-val {
  font-size: 11px;
  color: var(--muted);
  min-width: 30px;
  text-align: right;
}

/* ---------- Legend ---------- */
.legend { display: flex; flex-direction: column; gap: 10px; }
.legend-empty { font-size: 12px; color: var(--muted); font-style: italic; }
/* Persistent "data came from SAVI" credit at the foot of the legend. */
.legend-credit {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px solid var(--accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.legend-credit a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.legend-credit a:hover { text-decoration: underline; }
.legend-credit-sub { font-weight: 400; color: var(--muted); }

.legend-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.25;
}
.legend-caption {
  font-size: 10px;
  color: var(--muted);
  margin: -2px 0 5px;
  line-height: 1.2;
}
/* Choropleth legend titles double as a "show all" reset for class highlights. */
.legend-block-title.resettable {
  cursor: pointer;
  padding: 2px 4px;
  margin: 0 -4px 4px;
  border-radius: 4px;
}
.legend-block-title.resettable:hover { background: var(--accent-soft); }
.legend-block-title.has-highlight { background: var(--accent-soft); }
.legend-reset {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
}
.legend-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 2px 0;
  color: var(--text);
}
.legend-entry.clickable {
  cursor: pointer;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px;
}
.legend-entry.clickable:hover { background: var(--accent-soft); }
.legend-entry.clickable.active {
  background: var(--accent-soft);
  font-weight: 600;
}
.legend-entry.clickable.active .legend-swatch {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}
.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.legend-swatch.line {
  height: 4px;
  border-radius: 2px;
}
.legend-swatch.circle {
  border-radius: 50%;
}

/* ---------- Popup ---------- */
.maplibregl-popup-content {
  font-family: inherit;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.savi-popup-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--accent-text);
}
.savi-popup-field {
  font-size: 12px;
  margin: 2px 0;
}
.savi-popup-field .k {
  color: var(--muted);
  margin-right: 4px;
}
.savi-popup-field .v { font-weight: 600; }

/* Draggable geography info window (the click popup). Close X sits on the far
   right of the header (consistent with panels); the header is the drag handle. */
.savi-info-window {
  position: fixed;
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.savi-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  cursor: grab;
  user-select: none;
  /* Let pointer-drag move the window instead of the browser panning the map
     behind it on touch devices (matches .float-panel-header). */
  touch-action: none;
}
.savi-info-header:active { cursor: grabbing; }
.savi-info-close {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  line-height: 1;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
}
.savi-info-close:hover { background: rgba(255, 255, 255, 0.42); }
.savi-info-titleblock {
  flex: 1;
  min-width: 0;
}
.savi-info-title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Geography type (e.g. "Counties") shown beneath the geography name. */
.savi-info-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1px;
}
.savi-info-body {
  padding: 12px 14px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Consolidated popup: one section per stacked layer */
.savi-popup-section + .savi-popup-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.savi-popup-layer {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 1px;
}
.savi-popup-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

/* Trend sparkline appended inside the click popup */
.savi-popup-trend { margin-top: 8px; }
.savi-popup-trend[data-loading] { display: none; }
.savi-popup-trend .savi-trend-caption {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}
.savi-popup-trend svg { display: block; }
.savi-popup-trend .savi-trend-hit { cursor: pointer; }
.savi-popup-trend .savi-trend-readout {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  min-height: 14px;
  margin-top: 2px;
}
.savi-popup-trend .savi-trend-range {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Popup action buttons (e.g. Add to compare) */
.savi-popup-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.savi-popup-action {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border: 1px solid var(--border, #d4d4d4);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-text, #7a5c12);
  cursor: pointer;
}
.savi-popup-action:hover { background: #f0f7fa; }
.savi-popup-action.is-active {
  background: #00b3a4;
  border-color: #00b3a4;
  color: #fff;
}

/* Hover tooltip (lightweight, follows the cursor) */
.savi-hover-tip { pointer-events: none; }
.savi-hover-tip .maplibregl-popup-content {
  padding: 6px 9px;
  border-radius: 6px;
}
.savi-hover-tip .maplibregl-popup-tip { display: none; }
.savi-tip-title { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.savi-tip-value { font-size: 12px; font-weight: 600; margin-top: 1px; }

/* ---------- Search result -> "Save as pin" popup ---------- */
.savi-pin-pop { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.savi-pin-label { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.savi-pin-input {
  font-size: 13px;
  padding: 5px 7px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}
.savi-pin-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.savi-pin-save {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
}
.savi-pin-save:hover { background: var(--accent-deep); }
.savi-pin-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a8a; margin-top: 2px; }
.savi-pin-layer { padding: 5px 7px; background: #fff; }

/* Editable pin window (name + custom type/value metadata) */
.savi-pin-editor { min-width: 220px; }
.savi-pin-meta-rows { display: flex; flex-direction: column; gap: 5px; }
.savi-pin-meta-row { display: flex; gap: 5px; align-items: center; }
.savi-pin-meta-row .savi-pin-meta-k { flex: 0 0 40%; }
.savi-pin-meta-row .savi-pin-meta-v { flex: 1 1 auto; }
.savi-pin-meta-rm {
  flex: 0 0 auto;
  border: 1px solid #ddd;
  background: #f4f4f4;
  color: #b00020;
  border-radius: 5px;
  width: 24px; height: 26px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.savi-pin-meta-rm:hover { background: #fbe9ec; border-color: #e2a5ad; }
.savi-pin-meta-add {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px dashed var(--accent);
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-text);
  cursor: pointer;
}
.savi-pin-meta-add:hover { background: var(--accent);color: var(--on-accent); }
.savi-pin-editor-actions { display: flex; gap: 6px; margin-top: 4px; }
.savi-pin-editor-actions .savi-pin-save { flex: 1 1 auto; }
.savi-pin-delete {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid #e2a5ad;
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  color: #b00020;
}
.savi-pin-delete:hover { background: #fbe9ec; }

/* Cancel button in the edit view */
.savi-pin-cancel {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  color: var(--muted);
}
.savi-pin-cancel:hover { background: #f2f2f2; }

/* Read-only pin view (data shown before Edit) */
.savi-pin-view-name { font-size: 14px; font-weight: 700; margin: 2px 0 6px; }
.savi-pin-view-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0 0 8px;
  font-size: 12px;
}
.savi-pin-view-data dt { font-weight: 600; color: var(--muted); }
.savi-pin-view-data dd { margin: 0; color: var(--text); word-break: break-word; }
.savi-pin-view-empty { font-size: 12px; color: var(--muted); margin: 0 0 8px; font-style: italic; }

/* Live "my location" dot recolored to the black-&-gold brand accent */
.maplibregl-user-location-dot,
.maplibregl-user-location-dot::before { background-color: var(--accent); }
.maplibregl-user-location-dot::after { border: 2px solid var(--accent); }

/* Layer rename (panel) */
.layer-rename-input {
  font-size: 13px;
  padding: 2px 5px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Toast (toolbar feedback) ---------- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink);
  color: #f2eede;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Delete (remove layer) button ---------- */
.del-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.del-btn:hover { border-color: #d94141; color: #d94141; background: #fff0f0; }

/* ---------- Add Data button (Layers panel header) ---------- */
.add-data-btn {
  margin-left: auto;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
}
.add-data-btn svg { width: 18px; height: 18px; display: block; }
.add-data-btn:hover { background: rgba(255, 255, 255, 0.32); }
/* When Add Data is present, the collapse button no longer needs auto-margin. */
.float-panel-header .add-data-btn + .collapse-btn { margin-left: 6px; }

/* Zoom-to-data — compact icon button grouped left after the title. */
.fit-btn {
  margin-left: 6px;
  height: 22px;
  width: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.fit-btn svg { width: 15px; height: 15px; display: block; }
.fit-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Clear all / Clear hidden — compact text buttons grouped left after the title. */
.clear-btn {
  height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.clear-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* ---------- Per-layer cascading data selectors ---------- */
.layer-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 7px;
  padding-left: 22px;
}
.sel-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 100%;
}
.sel-group label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.layer-select {
  font-size: 11px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
}
.layer-select:focus { outline: none; border-color: var(--accent); }

/* ---------- Compact layer label + selection subtitle ---------- */
.layer-label-wrap {
  flex: 1;
  min-width: 0;
}
.layer-label-wrap .layer-item-label {
  display: block;
}
.layer-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.layer-sub:hover { color: var(--accent-text); text-decoration: underline; }

/* Adjust-variables button — opens the movable selector popup. */
.adj-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.adj-btn:hover { border-color: var(--accent); color: var(--accent-text); }

.bulk-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.bulk-btn:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- Movable selector popup ---------- */
.sel-popup {
  position: fixed;
  width: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  z-index: 300;
  overflow: hidden;
}
.sel-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  cursor: grab;
  user-select: none;
  touch-action: none;   /* drag the popup on touch instead of panning the map */
}
.sel-popup-header:active { cursor: grabbing; }
.sel-popup-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Layer style chip shown in the variables-popup title. */
.sel-popup-chip {
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.sel-popup-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.sel-popup-close:hover { opacity: 0.8; }
.sel-popup-body { padding: 10px; }
.sel-popup .layer-selectors {
  padding-left: 0;
  margin-top: 0;
}

/* ---------- Add Data catalog modal ---------- */
.catalog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 48, 74, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.catalog-overlay.open { display: flex; }
.catalog-modal {
  width: min(560px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 700;
}
.catalog-close {
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.catalog-close:hover { background: rgba(255, 255, 255, 0.35); }
.catalog-search {
  margin: 12px 16px 6px;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.catalog-search:focus { outline: none; border-color: var(--accent); }
.catalog-geo {
  margin: 0 16px 6px;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
}
.catalog-geo:focus { outline: none; border-color: var(--accent); }
.catalog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 16px;
}
/* Data-source credit pinned to the bottom of the Add Data modal. */
.catalog-credit {
  flex: none;
  padding: 10px 16px;
  border-top: 2px solid var(--accent);
  background: var(--panel-bg);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.catalog-credit a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.catalog-credit a:hover { text-decoration: underline; }

/* About-the-data (metadata) — movable floating window; close X on the far RIGHT. */
.meta-window {
  position: fixed;
  z-index: 1200;
  width: min(560px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.meta-window-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  touch-action: none;   /* drag the window on touch instead of panning the map */
}
.meta-window-header:active { cursor: grabbing; }
.meta-window-close {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  line-height: 1;
  font-size: 17px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
}
.meta-window-close:hover { background: rgba(255, 255, 255, 0.42); }
.meta-window-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* About-the-data (metadata) modal */
.meta-modal { max-width: 560px; }
.meta-title { margin: 6px 0 10px; font-size: 16px; }
.meta-facts { margin-bottom: 14px; }
.meta-fact { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; }
.meta-fact .meta-k { flex: 0 0 84px; color: var(--muted); font-weight: 600; }
.meta-fact .meta-v { flex: 1; }
.meta-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent-text); padding: 4px 0; border-bottom: 1px solid var(--border);
  margin: 6px 0 6px;
}
.meta-avail { width: 100%; border-collapse: collapse; font-size: 12px; }
.meta-avail th, .meta-avail td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.meta-avail th { color: var(--muted); font-weight: 600; }
.meta-avail-level { font-weight: 600; }
.meta-avail-years { white-space: nowrap; color: var(--muted); }
.meta-note { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.meta-note p { margin: 0 0 8px; }
.meta-link { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.meta-link:hover { text-decoration: underline; }
.catalog-cat { margin-top: 10px; }
.catalog-cat-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent-text);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f3f7;
}
.catalog-item-text { flex: 1; min-width: 0; }
.catalog-item-label { font-size: 12.5px; color: var(--text); }
.catalog-item-path { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.catalog-add {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.catalog-add:hover { background: var(--accent-deep); border-color: var(--accent-text); }
.catalog-add.added { background: #3aa76d; border-color: #3aa76d; }
/* Already-on-the-map indicators: highlighted row + a Remove toggle button. */
.catalog-item.in-map { background: var(--accent-soft); }
.catalog-add.remove { background: #fff; color: #c0392b; border-color: #c0392b; }
.catalog-add.remove:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.catalog-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 16px 0; }

/* ---- Add Data: breadcrumb drill-down (category -> subcategory -> indicators) ---- */
.catalog-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.catalog-crumb {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  background: none;
  border: 0;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.catalog-crumb:hover { background: var(--accent-soft); text-decoration: underline; }
.catalog-crumb.current { color: var(--text); cursor: default; }
.catalog-crumb.current:hover { background: none; text-decoration: none; }
.catalog-crumb-sep { color: var(--muted); font-size: 12px; }
.catalog-folders { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.catalog-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.catalog-folder:hover { background: var(--accent-soft); border-color: var(--accent); }
.catalog-folder::after {
  content: '\203a';   /* chevron hint that this drills in */
  margin-left: 4px;
  color: var(--muted);
  font-size: 15px;
}
.catalog-folder-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.catalog-folder-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: 10px;
}
.catalog-sep { height: 1px; background: var(--border); margin: 12px 0 2px; }

/* ---- Saved maps (named, with description; recall list) ---- */
.savemap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 48, 74, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 320; /* above sel-popups (300+) and other modals */
}
.savemap-overlay.open { display: flex; }
.savemap-modal {
  width: min(480px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.savemap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 700;
}
.savemap-close {
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.savemap-close:hover { background: rgba(255, 255, 255, 0.35); }
.savemap-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.savemap-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.savemap-field em { color: var(--muted); font-weight: 400; font-style: normal; }
.savemap-field input,
.savemap-field textarea {
  font: inherit;
  font-weight: 400;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
}
.savemap-field input:focus,
.savemap-field textarea:focus { outline: none; border-color: var(--accent); }
.savemap-invalid { border-color: #c0392b !important; }
.savemap-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.savemap-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}
.savemap-btn:hover { background: #f4f7fa; }
.savemap-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.savemap-primary:hover { background: var(--accent-deep); border-color: var(--accent-text); }
.savemap-secondary { margin-right: auto; }
.savemap-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.savemap-danger { border-color: #c0392b; color: #c0392b; background: #fff; }
.savemap-danger:hover { background: #fcebea; }

/* Saved-maps bulk-action bar: Select all + Delete selected. */
.savemap-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid #f0f3f7;
}
.savemap-selall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.savemap-row-check { display: flex; align-items: center; padding-top: 1px; flex-shrink: 0; }
.savemap-row-check input,
.savemap-selall input { cursor: pointer; }

/* Clear-layers choice modal: two equal-width action buttons (all / hidden). */
.clear-modal .clear-msg { margin: 0; font-size: 13px; color: var(--muted); }
.clear-choices { display: flex; gap: 10px; }
.clear-choices .savemap-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.clear-choices .savemap-secondary { margin-right: 0; }
.clear-count { opacity: 0.75; font-weight: 700; }

.savemap-list { overflow-y: auto; padding: 8px 16px 16px; }
.savemap-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f3f7;
}
.savemap-row.active { background: var(--accent-soft); border-radius: 6px; padding: 10px; }
.savemap-row-main { flex: 1; min-width: 0; }
.savemap-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.savemap-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.savemap-row-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.savemap-row-meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.savemap-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.savemap-iconbtn {
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: #c0392b;
  cursor: pointer;
}
.savemap-iconbtn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.savemap-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 20px 4px; text-align: center; }

/* ---- Compare (Data Table) view ---- */
/* Column picker reuses .catalog-overlay but must sit above the Compare modal. */
#cmp-picker-overlay { z-index: 280; }
.cmp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 48, 74, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 260;
}
.cmp-overlay.open { display: flex; }
.cmp-modal {
  width: 94vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* Compare modal is user-resizable (native grip, bottom-right). Scoped to the Compare
   overlay so the Profile window (which reuses .cmp-modal) is unaffected. */
.cmp-overlay .cmp-modal {
  resize: both;
  min-width: 360px;
  min-height: 220px;
  max-width: 98vw;
  max-height: 96vh;
}
.cmp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--accent);
  flex-shrink: 0;
}
.cmp-title { font-size: 15px; font-weight: 700; cursor: move; }
.cmp-overlay .cmp-spacer { cursor: move; }
.cmp-level { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.cmp-mini {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  max-width: 200px;
}
.cmp-check { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.cmp-spacer { flex: 1; }
.cmp-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}
.cmp-btn:hover { background: rgba(255, 255, 255, 0.28); }
.cmp-primary { background: #fff; color: var(--accent-text); border-color: #fff; }
.cmp-primary:hover { background: #eef4fb; }
.cmp-close {
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 19px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.cmp-close:hover { background: rgba(255, 255, 255, 0.35); }
/* Icon-only header actions (Add columns, Download) — square, tooltip via title. */
.cmp-icon {
  width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}

/* Minimized: dock the modal to the bottom-right as a header-only bar and let the
   transparent backdrop pass pointer events through to the map underneath. */
.cmp-overlay.minimized {
  background: transparent;
  pointer-events: none;
  align-items: flex-end;
  justify-content: flex-end;
}
.cmp-overlay.minimized .cmp-modal { pointer-events: auto; }
.cmp-modal.minimized {
  position: fixed;
  right: 16px;
  bottom: 16px;
  margin: 0;
  width: auto !important;
  min-width: 320px;
  height: auto !important;
  min-height: 0;
  /* Cancel any drag transform so a dragged window can't dock off-screen. */
  transform: none !important;
  resize: none;
}
.cmp-modal.minimized .cmp-table-wrap { display: none; }
/* Collapse the toolbar to just title + restore/close when minimized. */
.cmp-modal.minimized .cmp-level,
.cmp-modal.minimized .cmp-toggle,
.cmp-modal.minimized .cmp-check,
.cmp-modal.minimized .cmp-btn,
.cmp-modal.minimized .prof-filter,
.cmp-modal.minimized .cmp-menu-wrap { display: none; }

/* ---- Welcome card + Featured Maps gallery (compact, auto-height modals) ---- */
.welcome-modal, .featured-modal {
  width: min(560px, 94vw);
  height: auto;
  max-height: 88vh;
}
.featured-modal { width: min(680px, 94vw); }
.welcome-body {
  padding: 22px 26px 24px;
  overflow: auto;
}
.welcome-title { margin: 0 0 8px; font-size: 22px; color: var(--accent-text); }
.welcome-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text); }
.welcome-tips { margin: 0 0 20px; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--text); }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.welcome-dismiss {
  margin-left: auto;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.welcome-dismiss:hover { background: var(--accent-soft); color: var(--text); }

.featured-body { padding: 18px 20px 22px; overflow: auto; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.featured-card {
  display: block;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.featured-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.featured-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.featured-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.featured-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  white-space: nowrap;
}
.featured-card-desc { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (max-width: 560px) { .featured-grid { grid-template-columns: 1fr; } }

/* Bulk pin-data editor (compact modal, reuses .savi-pin-* row styling). */
.bulkpin-modal {
  width: min(460px, 94vw);
  height: auto;
  max-height: 88vh;
  padding: 20px 22px 18px;
  overflow: auto;
}
.bulkpin-title { margin: 0 0 4px; font-size: 18px; color: var(--accent-text); }
.bulkpin-sub { margin: 0 0 14px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.bulkpin-merge { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--text); }
.bulkpin-actions { display: flex; gap: 10px; margin-top: 16px; }

/* CSV place importer (compact modal). */
.import-modal {
  width: min(500px, 94vw);
  height: auto;
  max-height: 90vh;
  padding: 20px 22px 18px;
  overflow: auto;
}
.import-title { margin: 0 0 8px; font-size: 18px; color: var(--accent-text); }
.import-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.import-sample { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.import-sample-link { color: var(--accent-text); font-weight: 600; }
.import-field { display: block; margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--text); }
.import-field input { display: block; margin-top: 5px; width: 100%; font-size: 13px; font-weight: 400;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); }
.import-field input[type="file"] { padding: 6px; }
.import-or { margin: -4px 0 10px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); text-align: center; }
.import-note { margin: 0 0 10px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.import-status { min-height: 18px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.import-status.ok { color: var(--accent-text); }
.import-status.error { color: #b23b3b; }
.import-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Lightweight confirmation dialog. */
.confirm-modal {
  width: min(380px, 92vw);
  height: auto;
  max-height: 70vh;
  padding: 22px 22px 18px;
}
.confirm-msg { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text); }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

.cmp-menu-wrap { position: relative; }
.cmp-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  display: none;
  z-index: 5;
}
.cmp-menu.open { display: block; }
.cmp-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.cmp-menu-item:hover { background: var(--hover, #eef2f7); }

.cmp-table-wrap { flex: 1; overflow: auto; padding: 0; }
.cmp-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 28px; text-align: center; }
.cmp-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; }
.cmp-table th, .cmp-table td {
  border-bottom: 1px solid #e6ebf1;
  border-right: 1px solid #eef2f6;
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
}
.cmp-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f4f7fb;
  /* Bottom-align so the per-column Display/Year selects line up in one row across
     ALL columns, regardless of how many lines each indicator title wraps to. */
  vertical-align: bottom;
  /* Value-column headers align right so the title + controls sit directly over
     the right-aligned numbers below them. */
  text-align: right;
}
/* Geography column (header + body) stays left-aligned. Selectors are scoped to
   th/td so they out-specify the generic `.cmp-table th, .cmp-table td` rule. */
.cmp-table th.cmp-geo-h, .cmp-table td.cmp-geo {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  text-align: left;
}
.cmp-table thead th.cmp-geo-h { z-index: 4; background: #eef3f9; }
.cmp-col-head { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cmp-col-title { font-weight: 700; color: var(--accent-text); cursor: pointer; max-width: 220px; white-space: normal; text-align: right; }
.cmp-col-title:hover { text-decoration: underline; }
.cmp-col-h.sort-asc .cmp-col-title::after { content: ' \25b2'; font-size: 9px; }
.cmp-col-h.sort-desc .cmp-col-title::after { content: ' \25bc'; font-size: 9px; }
.cmp-col-rm {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cmp-col-rm:hover { color: #d05050; }
.cmp-col-ctrls { display: flex; gap: 4px; margin-top: 5px; justify-content: flex-end; }
.cmp-col-ctrls .cmp-mini { max-width: 130px; font-size: 11px; }
.cmp-geo-name { font-weight: 600; color: var(--text); }
.cmp-geo-id { display: block; font-size: 10px; color: var(--muted); }
.cmp-val { font-variant-numeric: tabular-nums; }

/* Table / Chart view toggle (segmented control in the compare bar). */
.cmp-toggle { display: inline-flex; border: 1px solid #cdd7e2; border-radius: 6px; overflow: hidden; }
.cmp-toggle-btn {
  border: none; background: #fff; color: var(--muted);
  font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.cmp-toggle-btn + .cmp-toggle-btn { border-left: 1px solid #cdd7e2; }
.cmp-toggle-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Chart view: small-multiple horizontal bar cards, one per column. */
.cmp-charts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px; padding: 16px; align-content: start;
}
.cmp-chart { border: 1px solid #e6ebf1; border-radius: 8px; padding: 12px 14px; background: #fff; }
.cmp-chart-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cmp-chart-title { font-weight: 700; color: var(--accent-text, #7a5c12); font-size: 13px; }
.cmp-chart-sub { font-size: 11px; color: var(--muted); }
.cmp-chart-empty { font-size: 12px; color: var(--muted); font-style: italic; }
.cmp-chart-bars { display: flex; flex-direction: column; gap: 5px; }
.cmp-bar-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 8px; }
.cmp-bar-name { font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-bar-track { background: #eef2f6; border-radius: 3px; height: 14px; overflow: hidden; }
.cmp-bar-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.cmp-bar-val { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }

/* SVG comparison charts (Trend, Scatter, Slope, Radar, Distribution). */
.cmp-chart-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 16px 0; font-size: 12px; color: var(--muted);
}
.cmp-chart-pick { display: inline-flex; align-items: center; gap: 6px; }
.cmp-chart-note { font-style: italic; }
.cmp-svg {
  display: block; width: 100%; max-width: 900px; height: auto; margin: 6px auto 20px;
  padding: 8px 16px;
}
.cmp-svg .cmp-grid { stroke: #eef2f6; stroke-width: 1; }
.cmp-svg .cmp-axis { stroke: #b7c2ce; stroke-width: 1; }
.cmp-svg .cmp-axis-lbl { fill: var(--muted); font-size: 11px; }
.cmp-svg .cmp-axis-title { fill: var(--text); font-size: 12px; font-weight: 600; }
.cmp-svg .cmp-legend-lbl { fill: var(--text); font-size: 11px; }
.cmp-svg .cmp-point-lbl { fill: var(--text); font-size: 10.5px; font-weight: 600; }
.cmp-svg .cmp-slope-lbl { fill: var(--text); font-size: 10.5px; }
.cmp-svg .cmp-stat { fill: var(--accent-deep, #1a6ec2); font-size: 11px; font-weight: 700; }
.cmp-svg .cmp-stat-line { stroke: var(--accent-deep, #1a6ec2); stroke-width: 1.5; }
.cmp-svg .cmp-stat-line.dashed { stroke-dasharray: 4 3; stroke-opacity: 0.7; }
.cmp-svg .cmp-trendline { stroke: #e6324b; stroke-width: 1.5; stroke-dasharray: 5 4; stroke-opacity: 0.8; }
.cmp-svg .cmp-radar-ring { stroke: #e6ebf1; stroke-width: 1; }
.cmp-svg .cmp-radar-axis { fill: var(--text); font-size: 11px; }
.cmp-svg .cmp-line { transition: stroke-opacity 0.15s; }
.cmp-svg .cmp-line:hover { stroke-opacity: 1; stroke-width: 3.4; }

/* Community Profile: single-geography fact sheet. */
.prof-filter {
  font-size: 12px; padding: 5px 9px; border: 1px solid #cdd7e2; border-radius: 6px;
  min-width: 200px;
}
.prof-wrap { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.prof-empty, .prof-loading { font-size: 13px; color: var(--muted); font-style: italic; padding: 28px; text-align: center; }
.prof-cat { margin-bottom: 22px; }

/* Two-pane profile: category sidebar + facts for the selected category. */
.prof-split { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.prof-sidebar {
  flex: 0 0 210px; overflow-y: auto; border-right: 1px solid #e6ebf1;
  padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: #fbfcfe;
}
.prof-cat-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.prof-cat-btn:hover { background: #eef2f7; }
.prof-cat-btn.active { background: var(--accent, #d4af37); color: var(--on-accent, #1b1b1b); font-weight: 600; }
.prof-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-cat-count { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prof-cat-btn.active .prof-cat-count { color: inherit; }
.prof-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 16px 20px; }
@media (max-width: 720px) {
  /* Stack the two panes. Without min-width:0 the flex children expand to their
     content width (the category strip + fact cards) and the whole pane bleeds past
     the viewport edge. Clamp every level to the container so the category strip
     scrolls horizontally inside the screen and the facts reflow to fit. */
  .prof-split { flex-direction: column; min-width: 0; max-width: 100%; }
  .prof-sidebar {
    flex: none; flex-direction: row; min-width: 0; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #e6ebf1;
  }
  .prof-cat-btn { white-space: nowrap; width: auto; flex: none; }
  .prof-main { min-width: 0; max-width: 100%; }
  /* Facts + sub-category folders: one column on phones so nothing is clipped. */
  .prof-grid, .prof-folders { grid-template-columns: 1fr; }
}
.prof-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 8px; }
.prof-crumb { background: none; border: none; padding: 2px 4px; font-size: 11.5px; color: var(--accent-text, #7a5c12); cursor: pointer; border-radius: 4px; }
.prof-crumb:hover { background: #f0f3f8; }
.prof-crumb.current { font-weight: 700; color: var(--text); cursor: default; }
.prof-crumb-sep { color: var(--muted); font-size: 11px; }
.prof-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px; }
.prof-folder { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border: 1px solid #e6ebf1; border-radius: 8px; padding: 9px 11px; background: #fff; cursor: pointer; }
.prof-folder:hover { border-color: var(--accent); background: #fbfcfe; }
.prof-folder-name { font-size: 12.5px; color: var(--text); }
.prof-folder-count { font-size: 11px; color: var(--muted); background: #eef2f7; border-radius: 10px; padding: 1px 7px; }
.prof-cat-title { font-size: 13px; font-weight: 700; color: var(--accent-text, #7a5c12); margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #e6ebf1; }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prof-fact { border: 1px solid #e6ebf1; border-radius: 8px; padding: 10px 12px; background: #fbfcfe; }
.prof-fact-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.prof-fact-label { font-size: 12px; color: var(--text); margin-top: 3px; line-height: 1.25; }
.prof-fact-meta { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* Draggable "Rename layer" dialog. */
.rename-overlay {
  position: fixed; inset: 0; z-index: 4200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.28);
}
.rename-dialog {
  width: min(380px, 92vw);
  background: var(--bg, #fff);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.rename-dialog.dragging { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.rename-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: grab; user-select: none;
  background: var(--accent, #d4af37); color: var(--on-accent, #1b1b1b);
  touch-action: none;   /* drag the dialog on touch instead of panning the map */
}
.rename-header:active { cursor: grabbing; }
.rename-title { font-size: 13px; font-weight: 700; }
.rename-x {
  border: 0; background: none; color: inherit; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px;
}
.rename-body { padding: 14px 16px 6px; }
.rename-which { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rename-which-name {
  font-size: 14px; font-weight: 700; color: var(--text); margin: 2px 0 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rename-field { display: block; font-size: 11px; color: var(--muted); }
.rename-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  font-size: 14px; padding: 8px 10px; border: 1px solid #cdd7e2; border-radius: 6px;
}
.rename-input:focus { outline: none; border-color: var(--accent, #d4af37); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); }
.rename-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; }
.rename-btn { font-size: 13px; padding: 7px 14px; border-radius: 6px; cursor: pointer; border: 1px solid #cdd7e2; }
.rename-cancel { background: #fff; color: var(--text); }
.rename-cancel:hover { background: #f0f4f8; }
.rename-save { background: var(--accent, #d4af37); color: var(--on-accent, #1b1b1b); border-color: var(--accent, #d4af37); font-weight: 600; }
.rename-save:hover { filter: brightness(0.95); }

/* Global loading spinner (busy indicator). */
#savi-loading {
  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.35);
}
#savi-loading.show { display: flex; }
.savi-load-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #fff; padding: 22px 28px; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}
.savi-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 4px solid #dbe6f1;
  border-top-color: var(--accent-deep, #1a6ec2);
  animation: savi-spin 0.8s linear infinite;
}
.savi-load-msg { font-size: 13px; color: var(--text); font-weight: 600; }
@keyframes savi-spin { to { transform: rotate(360deg); } }

/* Inline spinner variant for the Profile loading state. */
.prof-loading::before {
  content: ''; display: inline-block; vertical-align: -3px; margin-right: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 3px solid #dbe6f1; border-top-color: var(--accent-deep, #1a6ec2);
  animation: savi-spin 0.8s linear infinite;
}

/* ---------- Accessibility: visible keyboard focus ---------- */
/* Only show a focus ring for keyboard users (:focus-visible), not on mouse click. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the dark panel headers, a light ring reads better than the blue one. */
.float-panel-header :focus-visible,
.collapse-btn:focus-visible {
  outline-color: #fff;
}
/* Screen-reader-only helper (available if needed for offscreen labels). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Responsive / mobile layout ---------- */
/* Medium widths: the full button row can't fit on one line, so let it wrap (the
   search box drops to its own row). Better than pushing buttons off-screen. */
@media (max-width: 1180px) {
  #toolbar { flex-wrap: wrap; }
  .tb-search { flex: 1 1 100%; min-width: 0; order: 99; }
}

/* Hamburger menu: desktop uses the individual toolbar buttons, so hide it there;
   it only appears on narrow screens (see the mobile block below). */
.tb-hamburger { display: none; }

@media (max-width: 720px) {
  /* Toolbar: on phones the individual buttons collapse into a single hamburger
     menu; only the brand, hamburger and full-width search row remain. */
  #toolbar { flex-wrap: wrap; overflow-x: visible; gap: 6px; padding: 6px 8px; }
  .tb-search { flex: 1 1 100%; min-width: 0; order: 99; }
  .tb-divider { display: none; }
  .tb-btn { font-size: 12px; padding: 8px; gap: 0; }
  .tb-btn .tb-label { display: none; }          /* icon-only on phones */
  .tb-btn .tb-caret { margin-left: 2px; }
  .tb-mobile-hide { display: none !important; }  /* folded into the hamburger */
  /* The Add Data button starts the right-hand cluster (Add Data + Layers/Legend
     toggles + hamburger at order:50). margin-left:auto floats the cluster right;
     padding-left guarantees a visible gap from the brand even when the row is tight
     (auto-margin alone can collapse to almost nothing). */
  .tb-right-start { margin-left: auto; padding-left: 12px; }
  .tb-hamburger { display: inline-flex; order: 50; margin-left: 12px; }
  .tb-hamburger .tb-caret { display: none; }
  /* The hamburger's menu can be tall once categories expand — cap it to the
     viewport and let it scroll instead of running off-screen. */
  .tb-hamburger .tb-menu {
    max-height: calc(100vh - var(--toolbar-h, 52px) - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tb-logo .tb-logo-sub { display: none; }
  /* Shrink the brand on phones so brand + Add Data + Layers/Legend toggles + the
     hamburger all fit on one row (otherwise the hamburger wraps to its own line),
     leaving slack for the Add-Data cluster's gap from the brand. */
  .tb-logo .tb-logo-mark { font-size: 12px; }
  .tb-logo { min-width: 0; flex: 0 1 auto; }
  .tb-spacer { flex: 0 0 0; }                     /* don't force buttons to wrap early */

  /* Docks span the full width and stack; panels go full-bleed and shorter. The
     left dock holds Basemap + Layers at the top; Legend docks to the bottom. On
     first load these panels start collapsed (see JS) so the map stays the hero.
     The bottom dock also clears the phone's home-indicator safe area. */
  #dock, #dock-right {
    left: 0; right: 0;
    padding: 10px;
    align-items: stretch;
    max-height: none;
  }
  #dock { top: calc(var(--toolbar-h, 52px) + 4px); }
  #dock-right { top: auto; bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .float-panel { width: auto; max-width: none; max-height: 42vh; }
  #panel-layers .float-panel-body { max-height: 34vh; }
  /* A collapsed panel is just its title bar — make that obvious as a tap target. */
  .float-panel.collapsed .float-panel-header { cursor: pointer; }

  /* Timeline + swipe controls: hug the screen width. */
  .float-timeline { width: auto; left: 10px; right: 10px; transform: none; max-width: none; }
  .swipe-panel { left: 10px; right: 10px; transform: none; flex-wrap: wrap; }

  /* Full-screen modals on small viewports. */
  .catalog-modal, .cmp-modal, .savemap-modal {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0;
  }

  /* Community Profile: the header's title + two selectors + filter overflow a phone
     width in one row (close button got pushed off-screen). Let the bar wrap — keep
     the title and close reachable on the first row, then stack the controls below,
     each full-width so they're easy to tap. */
  .prof-overlay .cmp-bar { flex-wrap: wrap; gap: 8px 10px; }
  .prof-overlay .cmp-title { order: 0; }
  .prof-overlay .cmp-spacer { order: 1; display: block; flex: 1 1 auto; }
  .prof-overlay .cmp-close { order: 2; }
  .prof-overlay .cmp-level { order: 3; flex: 1 1 100%; }
  .prof-overlay .cmp-level .cmp-mini { flex: 1 1 auto; max-width: none; }
  .prof-overlay .prof-filter { order: 4; flex: 1 1 100%; min-width: 0; width: 100%; }
}

/* ---------- Persistent footer (contributors + Help) ---------- */
#app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding: 0 12px;
  background: var(--header-bg);
  color: var(--header-ink);
  border-top: 2px solid var(--accent);
  font-size: 11px;
  line-height: 1;
}
#app-footer .footer-credit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-footer a { color: var(--accent-bright); text-decoration: none; }
#app-footer a:hover { text-decoration: underline; }
#app-footer .footer-sep { opacity: 0.5; margin: 0 6px; }
.footer-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 10px;
  flex-shrink: 0;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.footer-help:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.footer-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--on-accent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}
/* Lift MapLibre's bottom controls/attribution above the footer bar. */
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left { bottom: 30px; }

/* ---------- Help panel (searchable knowledge base) ---------- */
/* Floating panel: horizontally centered near the top by default, then draggable /
   resizable / minimizable like the other panels. Bigger than the data panels since
   it holds a topic list + article. */
.float-panel.float-help {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 94vw);
  max-height: calc(100vh - 110px);
  z-index: 40;
}
/* Apply the tall default height only when expanded, so minimizing (collapsing)
   shrinks the panel to just its header instead of leaving a tall empty box. */
.float-panel.float-help:not(.collapsed) { height: min(620px, calc(100vh - 150px)); }
.float-help.dragging { transform: none; }
/* The body is a flex column with no padding so the search bar + two-pane body
   fill it; the list/article panes scroll internally. The ID selector here would
   otherwise beat the generic `.float-panel.collapsed .float-panel-body{display:none}`
   collapse rule, so an explicit collapsed override keeps minimize working. */
#panel-help .float-panel-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#panel-help.collapsed .float-panel-body { display: none; }
#help-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.help-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  flex-shrink: 0;
}
.help-search {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}
.help-body { flex: 1; display: flex; min-height: 0; }
.help-list {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  background: var(--panel-bg);
}
.help-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 12px 8px 4px;
}
.help-cat:first-child { margin-top: 2px; }
.help-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  margin: 1px 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.help-link:hover { background: var(--accent-soft); }
.help-link.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.help-empty { color: var(--muted); font-size: 13px; padding: 10px; }
.help-article {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  color: var(--text);
  line-height: 1.55;
}
.help-article .help-h2 { margin: 0 0 12px; font-size: 20px; color: var(--ink); }
.help-article h3 { margin: 18px 0 6px; font-size: 15px; }
.help-article p { margin: 0 0 10px; font-size: 14px; }
.help-article ul, .help-article ol { margin: 0 0 12px; padding-left: 22px; font-size: 14px; }
.help-article li { margin: 3px 0; }
.help-article a { color: var(--accent-text); }
.help-article code, .help-article kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
@media (max-width: 640px) {
  .help-body { flex-direction: column; }
  .help-list { width: auto; max-height: 38%; border-right: none; border-bottom: 1px solid var(--border); }
  #app-footer .footer-credit { font-size: 10px; }
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}