/* MapLibre-specific styling. */

/* Don't show the default attribution bar — we provide our own pill. */
.maplibregl-ctrl-attrib { display: none !important; }

/* Top-left control group: zoom / compass / geolocate */
.maplibregl-ctrl-group {
  border-radius: 12px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.maplibregl-ctrl-group button {
  background: rgba(246, 248, 250, 0.92) !important;
  color: #24292f !important;
  border-color: rgba(208, 215, 222, 0.9) !important;
  transition: background 120ms;
}
.maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, 1) !important; }
.dark .maplibregl-ctrl-group button {
  background: rgba(22, 27, 34, 0.92) !important;
  color: #e6edf3 !important;
  border-color: rgba(48, 54, 61, 0.95) !important;
}
.dark .maplibregl-ctrl-group button:hover { background: rgba(33, 38, 45, 0.95) !important; }

/* Invert the SVG-based icons in dark mode so they remain visible against
   the dark control surface. */
.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

/* Popups */
.maplibregl-popup-content {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #24292f !important;
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.18) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
.maplibregl-popup-tip { display: none; }
/* The hover tooltip is anchored at the cursor, so a hit-testable popup would
   sit under the pointer: the map fires mouseleave, the popup is removed, the
   pointer is back over the fill, and the tooltip flickers. Never hit-test it. */
.maplibregl-popup.ag-hover,
.maplibregl-popup.ag-hover * { pointer-events: none; }
.dark .maplibregl-popup-content {
  background: rgba(22, 27, 34, 0.95) !important;
  color: #e6edf3 !important;
}
.maplibregl-popup-close-button {
  color: #64748b !important;
  font-size: 18px !important;
  padding: 2px 8px !important;
}

/* Dark-mode satellite tiles get a subtle desaturation, same as Leaflet. */
.dark .maplibregl-canvas-container canvas { filter: brightness(0.86) saturate(0.9); }

/* Single-click point marker. */
.mesic-point-marker {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #9333ea;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(147, 51, 234, 0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Geometry toolbar (left side) ---------- */
.tool-bar {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.dark .tool-bar {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
}
.tool-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #24292f;
  background: transparent;
  border: none;
  transition: background 120ms, color 120ms, transform 120ms;
  cursor: pointer;
}
.dark .tool-btn { color: #e6edf3; }
.tool-btn:hover { background: rgba(15, 23, 42, 0.06); }
.dark .tool-btn:hover { background: rgba(255, 255, 255, 0.08); }
.tool-btn:active { transform: scale(0.94); }
.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tool-btn:disabled:hover { background: transparent; }
.tool-btn.is-active {
  background: #658d1b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(101, 141, 27, 0.35);
}
.tool-btn.is-active:hover { background: #547617; }
/* Edit button toggles between pencil (idle) and check (editing). */
.tool-btn .tool-icon-done { display: none; }
.tool-btn.is-editing .tool-icon-edit { display: none; }
.tool-btn.is-editing .tool-icon-done { display: block; }
.tool-btn.is-editing {
  background: #658d1b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(101, 141, 27, 0.35);
}
.tool-btn.is-editing:hover { background: #547617; }
.tool-btn-accent { color: #547617; }
.dark .tool-btn-accent { color: #89a949; }
.tool-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(15, 23, 42, 0.1);
}
.dark .tool-divider { background: rgba(255, 255, 255, 0.1); }

/* Cursor hint while drawing a polygon. */
.maplibregl-canvas.is-drawing { cursor: crosshair !important; }

/* Active geometry indicator badge. */
.active-badge {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  color: #24292f;
  box-shadow: 0 4px 14px rgba(31, 35, 40, 0.12);
}
.dark .active-badge {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
}
.active-badge b { color: #547617; font-weight: 600; }
.dark .active-badge b { color: #89a949; }
.active-badge-clear {
  display: grid;
  place-items: center;
  height: 18px;
  width: 18px;
  margin-left: 2px;
  border-radius: 9999px;
  color: rgba(31, 35, 40, 0.55);
  background: rgba(31, 35, 40, 0.06);
  transition: background 120ms, color 120ms, transform 120ms;
}
.active-badge-clear:hover { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.active-badge-clear:active { transform: scale(0.92); }
.dark .active-badge-clear { color: rgba(177, 186, 196, 0.7); background: rgba(241, 245, 249, 0.08); }
.dark .active-badge-clear:hover { background: rgba(220, 38, 38, 0.22); color: #f87171; }
.active-badge[data-active="none"] .active-badge-clear { display: none; }
/* The X closes point/polygon queries only. A collection polygon is cleared by
   its own layer: clicking elsewhere or switching the collection off. */
.active-badge[data-active="fire"] .active-badge-clear,
.active-badge[data-active="county"] .active-badge-clear,
.active-badge[data-active="allotment"] .active-badge-clear { display: none; }

/* Not on mobile. The badge duplicates what the toolbar already shows - the
   active tool is the lit button, and Clear is one of them - and on a handset it
   competes with the toolbar and the attribution for the same corner. Coarse
   pointers are in scope at any width, because a tablet in landscape is still a
   tablet; 1024 is where this app stops being a side-panel layout at all.

   By id, not by .active-badge: the badge also carries Tailwind's `flex`
   utility, and the Tailwind CDN injects its stylesheet after this one, so a
   class rule of equal weight loses to `.flex` on document order alone - which
   is why hiding it by class never took effect at any width. */
@media (max-width: 1023px), (pointer: coarse) {
  #activeBadge { display: none; }
}

/* ---------- Layers popover (top-right) ---------- */
.layer-control {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: #24292f;
  overflow: hidden;
  min-width: 9rem;
}
.dark .layer-control {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
}
.layer-control-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
}
.layer-control-summary::-webkit-details-marker { display: none; }
.layer-control-summary > span { flex: 1; }
/* Closed state: the ISI ramp sweeps across "Layers" (ported from the old
   "See the invasion. Plan the recovery." eyebrow). Two background layers: the
   moving ramp band on top, a solid text-colour fill underneath so the word
   stays readable between sweeps. Colours mirror ISI_CLASSES in config.js. */
.layer-control:not([open]) .layer-control-summary > span {
  --shimmer-base: #24292f;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    linear-gradient(90deg,
      transparent 30%, rgb(44 123 182 / 0) 34%, #2c7bb6 40%, #abd9e9 45%,
      #ffffbf 50%, #fdae61 55%, #d7191c 60%, rgb(215 25 28 / 0) 66%, transparent 70%),
    linear-gradient(var(--shimmer-base), var(--shimmer-base));
  background-size: 250% 100%, auto;
  background-repeat: no-repeat, repeat;
  animation: layers-shimmer 4.4s infinite;
}
.dark .layer-control:not([open]) .layer-control-summary > span { --shimmer-base: #e6edf3; }
/* Ease-in-out over the sweep (0-1.8s), then hold for the rest of the cycle.
   Feathered band edges above keep it from reading as a hard wipe. */
@keyframes layers-shimmer {
  0%   { background-position: 110% center, 0 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  41%, 100% { background-position: -10% center, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .layer-control:not([open]) .layer-control-summary > span { animation: none; }
}
.layer-control-summary .chevron { transition: transform 200ms; opacity: 0.6; }
.layer-control[open] .layer-control-summary .chevron { transform: rotate(180deg); }
.layer-control[open] .layer-control-summary {
  border-bottom: 1px solid rgba(208, 215, 222, 0.5);
}
.dark .layer-control[open] .layer-control-summary {
  border-bottom-color: rgba(48, 54, 61, 0.7);
}
/* When the Layers panel is open on mobile, let it span the full header row
   instead of clinging to the right edge. The collection selector is already
   hidden in this state (see annual-grasses.css), so we expand the layers
   wrapper to fill and lift the panel's max-width so it reads as a centered
   full-width sheet. */
@media (max-width: 639px) {
  header > div:has(> #layersControl[open]) {
    flex: 1;
    min-width: 0;
  }
  #layersControl[open] {
    width: 100%;
    max-width: none;
  }
  #layersControl[open] .layer-control-list {
    min-width: 0;
    max-width: none;
  }
}

.layer-control-list {
  padding: 10px 14px 12px;
  min-width: 20rem;
  max-width: 24rem;
  font-size: 13px;
  /* Cap to the viewport so the open panel never runs off-screen (esp. on
     mobile); it scrolls internally instead. dvh tracks mobile browser chrome. */
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Themed scrollbar — Firefox + standards. */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.dark .layer-control-list {
  scrollbar-color: rgba(241, 245, 249, 0.16) transparent;
}
/* WebKit/Blink. Keep the track invisible so it reads as a thin colored
   thumb floating against the glass panel. */
.layer-control-list::-webkit-scrollbar { width: 8px; }
.layer-control-list::-webkit-scrollbar-track { background: transparent; }
.layer-control-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.layer-control-list::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.32);
  background-clip: padding-box;
}
.dark .layer-control-list::-webkit-scrollbar-thumb {
  background: rgba(241, 245, 249, 0.16);
  background-clip: padding-box;
}
.dark .layer-control-list::-webkit-scrollbar-thumb:hover {
  background: rgba(241, 245, 249, 0.28);
  background-clip: padding-box;
}
.layer-control-list .layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.layer-control-list .layer-row input[type="checkbox"],
.layer-control-list .layer-row input[type="radio"] { accent-color: #658d1b; }
.layer-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: rgba(31, 35, 40, 0.5);
  border: 0;
  border-radius: 9999px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
  transition: color 120ms, background 120ms;
  flex-shrink: 0;
}
.layer-info-link:hover { color: #547617; background: rgba(101, 141, 27, 0.12); }
.dark .layer-info-link { color: rgba(177, 186, 196, 0.6); }
.dark .layer-info-link:hover { color: #89a949; background: rgba(101, 141, 27, 0.18); }
.layer-section-title-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.layer-section-title-row .layer-section-title {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.layer-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(31, 35, 40, 0.55);
  margin-bottom: 8px;
}
.dark .layer-section-title { color: rgba(177, 186, 196, 0.7); }
.layer-section .panel-label { margin-top: 14px; margin-bottom: 6px; }
.layer-section .panel-label:first-of-type { margin-top: 0; }
.layer-section-divider {
  height: 1px;
  background: rgba(208, 215, 222, 0.6);
  margin: 14px -2px;
}
.dark .layer-section-divider { background: rgba(48, 54, 61, 0.7); }
.basemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.basemap-btn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(31, 35, 40, 0.85);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  text-align: center;
  line-height: 1.15;
}
.basemap-btn:hover { background: rgba(101, 141, 27, 0.08); }
.basemap-btn.is-active {
  background: #658d1b;
  color: #fff;
  border-color: #4d6c11;
}
.dark .basemap-btn {
  border-color: rgba(241, 245, 249, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 237, 243, 0.85);
}
.dark .basemap-btn:hover { background: rgba(101, 141, 27, 0.18); }
.dark .basemap-btn.is-active {
  background: #658d1b;
  color: #fff;
  border-color: #4d6c11;
}

.resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.resources-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(31, 35, 40, 0.85);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.15;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.resources-link:hover {
  background: rgba(101, 141, 27, 0.08);
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(15, 23, 42, 0.12));
  color: var(--accent);
}
.resources-link svg { flex-shrink: 0; color: var(--accent); }
.resources-link-label { flex: 1; min-width: 0; }
.resources-beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}
.dark .resources-link {
  border-color: rgba(241, 245, 249, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 237, 243, 0.85);
}
.dark .resources-link:hover { background: rgba(101, 141, 27, 0.18); }
.dark .resources-beta {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* WLFW shield inside active badge (bottom-left). */
.active-badge-shield {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: -2px;
}

/* ---------- Mythos credit (map bottom-right, below scale bar) ---------- */
.mythos-credit--map {
  position: fixed;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  text-decoration: none;
  /* Both the wordmark and the signature inherit this. White in both themes:
     it sits over the map imagery, not over the theme surface. */
  color: #ffffff;
  transition: opacity 120ms ease;
}
.mythos-credit--map:hover { opacity: 0.8; }
.mythos-credit-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.6;
}
.mythos-signature {
  display: block;
  height: 36px;
  width: 72px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}
.mythos-signature svg {
  display: block;
  height: 100%;
  width: 100%;
}
.mythos-credit--map:hover .mythos-signature,
.mythos-credit--map:focus-visible .mythos-signature {
  opacity: 1;
}

/* ---------- Theme toggle row (lives inside the Layers panel) ---------- */
/* Single button styled as a "Light mode / Dark mode" row with a sliding switch.
   The same #themeToggle id is reused by the existing JS handler. */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink, #1f2328);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.theme-toggle-row:hover {
  background: rgba(101, 141, 27, 0.08);
  border-color: color-mix(in srgb, #658d1b 28%, rgba(15, 23, 42, 0.1));
}
.dark .theme-toggle-row {
  border-color: rgba(241, 245, 249, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf3;
}
.dark .theme-toggle-row:hover { background: rgba(101, 141, 27, 0.16); }
.theme-toggle-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, #658d1b 14%, transparent);
  color: #658d1b;
  flex-shrink: 0;
}
.dark .theme-toggle-icon { background: color-mix(in srgb, #658d1b 22%, transparent); }
.theme-toggle-label { flex: 1; min-width: 0; }
.theme-toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
  transition: background 200ms ease;
}
.dark .theme-toggle-switch { background: #658d1b; }
.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dark .theme-toggle-knob { transform: translateX(16px); }

/* ---------- Toast ---------- */
.toast {
  background: rgba(220, 38, 38, 0.96);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  max-width: 520px;
  text-align: center;
}

/* ---------- Info modal (Mesic Resource Persistence) ---------- */
.info-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.info-modal[hidden] { display: none; }
.info-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.info-modal-card {
  position: relative;
  width: min(42rem, 92vw);
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: #f6f8fa;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(31, 35, 40, 0.2);
}
.dark .info-modal-card {
  background: rgba(22, 27, 34, 0.96);
  border-color: rgba(48, 54, 61, 0.95);
  box-shadow: 0 0 0 1px rgba(48, 54, 61, 0.75), 0 12px 40px rgba(1, 4, 9, 0.45);
}
.info-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
.info-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: rgba(31, 35, 40, 0.95);
  text-transform: uppercase;
}
.dark .info-modal-title { color: #e6edf3; }
.info-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgba(31, 35, 40, 0.55);
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.info-modal-close:hover {
  color: #547617;
  background: rgba(101, 141, 27, 0.12);
}
.dark .info-modal-close { color: #8b949e; }
.dark .info-modal-close:hover {
  color: #89a949;
  background: rgba(101, 141, 27, 0.18);
}
.info-modal-body {
  padding: 14px 20px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(31, 35, 40, 0.88);
}
.dark .info-modal-body { color: rgba(201, 209, 217, 0.92); }
.info-modal-body p { margin: 0 0 12px; }
.info-modal-body p:last-child { margin-bottom: 0; }
.info-modal-body a { color: var(--accent); text-decoration: underline; }

/* Severity interpretation: one collapsible block per level. */
.severity-level { padding: 10px 0; border-top: 1px solid var(--surface-border); }
.severity-level:last-of-type { border-bottom: 1px solid var(--surface-border); }
.severity-level summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
}
.severity-level summary::-webkit-details-marker { display: none; }
.severity-level summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0.5; transition: transform 150ms;
}
.severity-level[open] summary::after { transform: rotate(-135deg); }
.severity-level[open] summary { margin-bottom: 10px; }
.severity-level ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.severity-level li { margin: 4px 0; }
.severity-note { font-size: 12px; opacity: 0.75; }
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 13px;
}
.info-table th, .info-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(208, 215, 222, 0.7);
}
.info-table th { font-weight: 600; }
.dark .info-table th, .dark .info-table td { border-bottom-color: rgba(48, 54, 61, 0.9); }

/* ---------- Search box (shared by the search modal's tabs) ---------- */
.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 30px rgba(31, 35, 40, 0.22);
  -webkit-backdrop-filter: saturate(135%) blur(14px);
  backdrop-filter: saturate(135%) blur(14px);
}
.dark .search-box {
  background: rgba(22, 27, 34, 0.9);
  border-color: rgba(48, 54, 61, 0.95);
  box-shadow: 0 0 0 1px rgba(48, 54, 61, 0.75), 0 8px 24px rgba(1, 4, 9, 0.4);
}
.search-box-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(31, 35, 40, 0.55);
}
.dark .search-box-icon { color: rgba(177, 186, 196, 0.7); }
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: rgba(31, 35, 40, 0.92);
}
.dark .search-box input { color: rgba(230, 237, 243, 0.92); }
.search-box input::placeholder { color: rgba(31, 35, 40, 0.45); }
.dark .search-box input::placeholder { color: rgba(177, 186, 196, 0.55); }
/* ---------- Scale bar (bottom-right, imperial ft/mi) ----------
   Restyled to match the glass control aesthetic; sits above Mythos credit. */
.maplibregl-ctrl-bottom-right {
  right: 8px !important;
  bottom: 48px !important;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  color: #24292f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 6px 3px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.12);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
  margin: 0;
}
.dark .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
  box-shadow: 0 4px 12px rgba(1, 4, 9, 0.4);
}