:root {
  --bg: #0b0f14;
  --fg: #e6edf3;
  --accent: #5eead4;
  --muted: #64748b;
  --editorial: #f59e0b;
  --community: #22d3ee;
  --rss: #e879f9;
  --gold: #fbbf24;
  --warning: #f59e0b;
  --border: #1e293b;

  /* ── Z-index layer map ─────────────────────────────────────────────
     Use these variables instead of magic numbers. If you need a new
     layer, add it here with a descriptive name and value.

     Leaflet vendor panes (100–800) are defined in vendor/leaflet/leaflet.css
     and should NOT be overridden here — they are a separate stacking world.

     Layer descriptions:
       --z-map          0     Base map tiles
       --z-chrome       500   Primary UI bars, legends, panels
       --z-elevated     600   Filter pills, detail panels, banners
       --z-overlay      700   Popovers, mobile panels within chrome
       --z-toast        800   Notification toasts
       --z-dropdown     1000  Modals, dropdowns, dialogs
       --z-system       10000 System banners, shutdown overlays
       --z-debug        999999 Debug tools (dev only)
  */
  --z-chrome: 500;
  --z-elevated: 600;
  --z-overlay: 700;
  --z-toast: 800;
  --z-dropdown: 1000;
  --z-system: 10000;
  --z-debug: 999999;

  /* ── Layout bands ───────────────────────────────────────────────────
     The top control stack (#map-controls) owns a band across the top of
     the viewport. Every overlay below it is anchored to --top-band
     rather than a hand-tuned pixel value, so one number keeps the whole
     layout consistent at any size. app.js re-measures --top-band from
     the real stack height on load and on resize; the values here are the
     static fallback and must stay close to the rendered height. */
  --top-band: 94px;      /* viewport top → bottom of the render-mode row */
  --zoom-top: 0px;       /* leaflet corner offset: the desktop stack is
                            centred and narrow, so the corner stays free */
  --zoom-stack: 116px;   /* 10px corner margin + 3×30px touch buttons + gap */
  --panel-top: calc(var(--zoom-top) + var(--zoom-stack));
  --bottom-band: 84px;   /* reserved for the search bar / nav row */
  /* Right column starts below the control stack AND below leaflet's
     top-right corner (the basemap switcher), whichever is lower. */
  --right-col-top: max(var(--top-band), calc(var(--zoom-top) + 64px));
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

/* ── Global focus indicator ─────────────────────────────────────────
   WCAG 2.4.7: focus must be visible. Each per-element :focus-visible
   rule below overrides this only when it needs a tighter geometry;
   anything that doesn't have a more specific rule (e.g. dynamically
   created Leaflet controls, or third-party widgets) still picks up
   a visible 2px accent outline. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent, #5eead4);
  outline-offset: 2px;
  border-radius: 2px;
}
#map { position: fixed; inset: 0; z-index: 0; }

/* Live status footer — sits at the bottom of the live-panel,
   always shows AI/system health as one consolidated line.
   Healthy state is muted; degraded/down states get colour + pulse. */
.live-panel-status {
  flex-shrink: 0;
  padding: 8px 14px;
  border-top: 1px solid #1f2937;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  cursor: default;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  word-break: break-word;
}
.live-panel-status:empty {
  display: none;
}
.live-panel-status--ok {
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
  border-top-color: rgba(34, 197, 94, 0.25);
}
.live-panel-status--degraded {
  background: rgba(245, 158, 11, 0.18);
  color: var(--editorial);
  border-top-color: rgba(245, 158, 11, 0.45);
  animation: pulse 2s ease-in-out infinite;
}
.live-panel-status--down {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
  border-top-color: rgba(239, 68, 68, 0.45);
  animation: pulse 1.5s ease-in-out infinite;
}
.live-panel-status--gpu-busy {
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  border-top-color: rgba(59, 130, 246, 0.45);
}

/* ── Top bar: search only ──────────────────────────────────────────── */
#top-bar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px);
}
#search-bar {
  display: flex; gap: 6px; background: rgba(11,15,20,0.85);
  border: 1px solid #1f2937; border-radius: 8px; padding: 4px 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  align-items: center;
  position: relative;
}
.search-icon {
  color: var(--accent, #5eead4); font-size: 14px; font-weight: 700;
  padding: 0 4px; flex-shrink: 0;
}
#search-input {
  background: transparent; color: var(--fg); border: none; outline: none;
  padding: 6px 8px; font: inherit; width: 320px;
}
#search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#search-input::placeholder { color: var(--muted); }
#search-btn, #search-clear {
  background: var(--accent); color: #0b0f14; border: none;
  padding: 6px 12px; border-radius: 4px; font-weight: 600; cursor: pointer;
}
#search-clear { background: #374151; color: var(--fg); }
#search-btn:hover, #search-clear:hover { filter: brightness(1.1); }
#search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Command dropdown appears below search bar */
#search-bar > .cmd-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border-radius: 8px;
}

/* Active filter indicator pill below search bar */
.active-filter-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--accent, #5eead4);
  color: #f1f5f9;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: filterPillSlide 0.2s ease-out;
  z-index: 600;
  pointer-events: auto;
}
.active-filter-pill strong {
  color: var(--accent, #5eead4);
}
.active-filter-pill button {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.active-filter-pill button:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}
@keyframes filterPillSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Bottom bar: time + mode + tools ──────────────────────────────── */
#bottom-bar {
  position: fixed; bottom: 12px; left: 50%; translate: -50% 0; z-index: 500;
  display: flex; align-items: center; gap: 0;
  background: rgba(11,15,20,0.85);
  border: 1px solid #1f2937; border-radius: 8px; padding: 3px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  /* iOS safe-area support so the bar never sits under the home indicator. */
  padding-bottom: calc(3px + env(safe-area-inset-bottom));
  bottom: max(12px, env(safe-area-inset-bottom));
}
/* Keyboard-aware hide: when the on-screen keyboard opens the fixed bar
   would otherwise cover the focused input. app.js toggles .keyboard-open
   via visualViewport. */
#bottom-bar.keyboard-open {
  translate: -50% calc(100% + 24px);
  transition: translate 0.2s ease-out;
}
.bottom-bar-divider {
  width: 1px; height: 20px; background: rgba(255,255,255,0.1);
  margin: 0 4px; flex-shrink: 0;
}
/* Time filter and mode toggle are flex children of #bottom-bar.
   Styles handled by unified #bottom-bar rules above. */

/* Hide old empty map-controls */
#map-controls { display: none; }

.wiki-search-results {
  position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: 499;
  width: 420px; max-height: 360px; overflow-y: auto;
  background: rgba(11,15,20,0.95); border: 1px solid #1f2937;
  border-radius: 6px; backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
}
.wiki-search-results[hidden] { display: none; }
.wiki-search-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #1f2937;
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.wiki-search-header .wiki-logo {
  width: 16px; height: 16px; border-radius: 2px;
  background: #eee; color: #333; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: serif;
}
.wiki-search-item {
  display: block; padding: 8px 12px;
  border-bottom: 1px solid #1f2937;
  text-decoration: none; color: inherit;
  transition: background 0.1s;
  cursor: pointer;
}
.wiki-search-item:hover { background: rgba(94, 234, 212, 0.06); }
.wiki-search-item:last-child { border-bottom: none; }
.wiki-search-item-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
  margin: 0 0 2px;
}
.wiki-search-item-meta {
  font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--muted); margin: 0;
}
.wiki-search-item-meta a {
  color: var(--accent, #5eead4); text-decoration: underline;
  pointer-events: auto;
}
.journalist-search-results {
  position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: 498;
  width: 420px; max-height: 280px; overflow-y: auto;
  background: rgba(11,15,20,0.95); border: 1px solid #1f2937;
  border-radius: 6px; backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
}
.journalist-search-results[hidden] { display: none; }
.journalist-search-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #1f2937;
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.journalist-search-header .journo-logo {
  width: 16px; height: 16px; border-radius: 2px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: ui-monospace, monospace;
}
.journalist-search-item {
  display: block; padding: 8px 12px;
  border-bottom: 1px solid #1f2937;
  text-decoration: none; color: inherit;
  transition: background 0.1s; cursor: pointer;
}
.journalist-search-item:hover { background: rgba(245, 158, 11, 0.08); }
.journalist-search-item:last-child { border-bottom: none; }
.journalist-search-item-name {
  font-size: 13px; font-weight: 600; color: var(--fg);
  margin: 0 0 2px;
}
.journalist-search-item-meta {
  font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--muted); margin: 0;
}
.journalist-profile { font-family: ui-monospace, monospace; font-size: 12px; }
.journalist-profile-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-bottom: 1px solid #1f2937; margin: -4px -10px 8px;
}
.journalist-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.journalist-profile-info { flex: 1; min-width: 0; }
.journalist-profile-name { font-size: 14px; font-weight: 700; color: var(--fg); margin: 0 0 2px; }
.journalist-profile-meta { font-size: 10px; color: var(--muted); margin: 0; text-transform: capitalize; }
.journalist-profile-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 4px; border-radius: 4px;
}
.journalist-profile-close:hover { background: rgba(255,255,255,0.1); }
.journalist-profile-body { padding: 0 4px; }
.journalist-profile-org, .journalist-profile-location,
.journalist-profile-counts, .journalist-profile-topics {
  font-size: 11px; color: var(--muted); margin: 0 0 4px;
}
.journalist-profile-bio { font-size: 11px; color: var(--fg); margin: 8px 0; line-height: 1.5; }
.journalist-profile-link {
  display: inline-block; margin-top: 8px; font-size: 11px;
  color: var(--accent, #5eead4); text-decoration: none;
}
.journalist-profile-link:hover { text-decoration: underline; }
#search-status {
  position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 500;
  margin: 0; padding: 4px 10px; border-radius: 4px;
  background: rgba(11,15,20,0.85); color: var(--fg);
  font-family: ui-monospace, monospace; font-size: 12px;
  border: 1px solid #1f2937;
  backdrop-filter: blur(6px);
}
#search-status[hidden] { display: none; }
/* Before the first search it has no text — don't paint an empty pill. */
#search-status:empty { display: none; }

/* ── Discovery Mode Panel ─────────────────────────────────────────────── */
#discovery-panel {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 510;
  width: min(680px, calc(100vw - 32px));
  background: rgba(11,15,23,0.97);
  border: 1px solid rgba(94,234,212,0.35);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(94,234,212,0.1);
  overflow: hidden;
  font-family: ui-monospace, monospace;
}
#discovery-panel[hidden] { display: none; }

.discovery-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(94,234,212,0.15);
  background: rgba(94,234,212,0.06);
}
.discovery-icon { font-size: 16px; }
.discovery-title {
  font-size: 13px; font-weight: 700;
  color: var(--accent, #5eead4);
}
.discovery-subtitle {
  font-size: 11px; color: rgba(255,255,255,0.5);
  flex: 1;
}
.discovery-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
  border-radius: 3px;
}
.discovery-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

#discovery-results {
  max-height: 320px; overflow-y: auto;
  padding: 8px;
}
#discovery-results::-webkit-scrollbar { width: 6px; }
#discovery-results::-webkit-scrollbar-track { background: transparent; }
#discovery-results::-webkit-scrollbar-thumb { background: rgba(94,234,212,0.3); border-radius: 3px; }

.discovery-item {
  display: flex; gap: 10px; padding: 8px 10px;
  border-radius: 7px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
  cursor: pointer;
}
.discovery-item:hover {
  background: rgba(94,234,212,0.08);
  border-color: rgba(94,234,212,0.2);
}
.discovery-item-icon {
  font-size: 20px; flex-shrink: 0; width: 28px; text-align: center;
  padding-top: 2px;
}
.discovery-item-body { flex: 1; min-width: 0; }
.discovery-item-title {
  font-size: 12px; font-weight: 600; color: #e2e8f0;
  line-height: 1.3; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discovery-item:hover .discovery-item-title { color: var(--accent, #5eead4); }
.discovery-item-source {
  font-size: 10px; color: rgba(255,255,255,0.4);
  margin-bottom: 2px;
}
.discovery-item-snippet {
  font-size: 11px; color: rgba(255,255,255,0.55);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.discovery-item-link {
  display: inline-block; margin-top: 4px;
  font-size: 10px; color: var(--accent, #5eead4);
  text-decoration: none;
}
.discovery-item-link:hover { text-decoration: underline; }

.discovery-loading {
  padding: 14px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.discovery-loading span { animation: discoveryPulse 1.4s ease-in-out infinite; }
@keyframes discoveryPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.discovery-footer {
  padding: 8px 14px;
  border-top: 1px solid rgba(94,234,212,0.1);
  font-size: 10px; color: rgba(255,255,255,0.3);
  text-align: center;
}

/* ── Search Intelligence Gaps Panel ─────────────────────────────────────── */
#gaps-panel {
  position: fixed; bottom: 100px; right: 24px; z-index: 510;
  width: min(480px, calc(100vw - 32px));
  background: rgba(11,15,23,0.97);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(251,191,36,0.1);
  overflow: hidden;
  font-family: ui-monospace, monospace;
  max-height: 480px;
  display: flex; flex-direction: column;
}
#gaps-panel[hidden] { display: none; }

.gaps-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(251,191,36,0.15);
  background: rgba(251,191,36,0.06);
  flex-shrink: 0;
}
.gaps-icon { font-size: 16px; }
.gaps-title {
  font-size: 13px; font-weight: 700;
  color: #fbbf24;
}
.gaps-subtitle {
  font-size: 11px; color: rgba(255,255,255,0.5);
  flex: 1;
}
.gaps-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
  border-radius: 3px;
}
.gaps-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

#gaps-body {
  overflow-y: auto;
  flex: 1;
}
#gaps-body::-webkit-scrollbar { width: 6px; }
#gaps-body::-webkit-scrollbar-track { background: transparent; }
#gaps-body::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.3); border-radius: 3px; }

.gaps-loading {
  padding: 14px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.gaps-loading span { animation: discoveryPulse 1.4s ease-in-out infinite; }

.gaps-empty {
  padding: 20px 14px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.35);
}

#gaps-content { padding: 6px 8px; }

.gaps-section-header {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(251,191,36,0.7); text-transform: uppercase;
  padding: 8px 8px 4px;
}

.gaps-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border-radius: 7px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: background 120ms;
  cursor: default;
}
.gaps-item:hover { background: rgba(251,191,36,0.06); }
.gaps-item-query {
  font-size: 12px; font-weight: 600; color: #e2e8f0;
  line-height: 1.3;
}
.gaps-item-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.gaps-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: rgba(255,255,255,0.45);
}
.gaps-stat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.gaps-stat-dot.danger { background: #ef4444; }
.gaps-stat-dot.warning { background: #f59e0b; }
.gaps-stat-dot.ok { background: #22c55e; }
.gaps-stat-value { color: rgba(255,255,255,0.7); font-weight: 600; }
.gaps-item-domain {
  font-size: 10px; color: rgba(255,255,255,0.3);
  margin-top: 1px;
}

.gaps-panel-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(11,15,23,0.92);
  border: 1px solid rgba(251,191,36,0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 150ms, box-shadow 150ms;
}
.gaps-panel-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}


.search-status-action-btn {
  background: var(--accent);
  color: #0b0f14;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  transition: all 120ms ease;
  vertical-align: middle;
}
.search-status-action-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
/* ── Top control stack ────────────────────────────────────────────────
   A centred column holding the time-range row (primary) with the
   render-mode row directly beneath it. The container spans the full width
   but is transparent and click-through — only the two bars take pointer
   events, so dragging the map through the gaps still works. */
#map-controls {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 8px;
  pointer-events: none;
}
#map-controls > * { pointer-events: auto; }

/* Time filter and mode toggle — flex children of #bottom-bar.
   Legacy pill-shell styles removed; these now inherit from #bottom-bar. */
/* Unified hover for all bottom-bar buttons */
#bottom-bar button:hover:not(.active):not(:disabled) {
  color: var(--fg);
  background: rgba(255,255,255,0.05);
}
#bottom-bar button.active {
  color: #0b0f14;
}
#mode-toggle button.active {
  background: var(--accent);
}
#bottom-bar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#time-filter,
#mode-toggle {
  display: flex; gap: 0;
}
/* Tools and Actions groups — same visual style */
#tools-toggle, #actions-toggle {
  display: flex; gap: 0;
  background: rgba(11,15,20,0.85);
  border: 1px solid #1f2937; border-radius: 6px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#tools-toggle button, #actions-toggle button {
  background: transparent; color: var(--muted); border: none;
  padding: 8px 12px; font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600; cursor: pointer;
  flex-shrink: 0; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
/* Scroll fade indicator — shows on mobile when there's more content */
#mode-toggle::after {
  content: '';
  position: sticky; right: 0; top: 0; bottom: 0;
  width: 24px; flex-shrink: 0;
  background: linear-gradient(to right, transparent, rgba(11,15,20,0.95));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (max-width: 768px) {
  #mode-toggle::after { opacity: 1; }
}
#time-filter::-webkit-scrollbar,
#mode-toggle::-webkit-scrollbar { display: none; }
#time-filter button,
#mode-toggle button { flex-shrink: 0; white-space: nowrap; }

#mode-toggle button {
  background: transparent; color: var(--muted); border: none;
  padding: 8px 14px; font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Icon legend. Top-right, below the control stack. Default-collapsed
   dropdown so it doesn't crowd the map at narrow widths. */
.legend {
  position: fixed; top: var(--right-col-top); right: 12px; z-index: 500;
  width: 280px; max-width: calc(100vw - 70px);
  background: rgba(11,15,20,0.92);
  border: 1px solid #1f2937; border-radius: 6px;
  font-family: ui-monospace, monospace;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.legend > summary {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  user-select: none;
  background: transparent;
}
.legend > summary:hover { color: var(--fg); }
.legend > summary::-webkit-details-marker { display: none; }
.legend[open] > summary { color: var(--fg); border-bottom: 1px solid #1f2937; }
.legend-close {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none; border-radius: 3px;
  background: transparent; color: var(--muted);
  cursor: pointer; padding: 0;
}
.legend-close:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
.legend-toggle svg { color: var(--accent); }
.legend-body {
  max-height: calc(100vh - 130px); overflow-y: auto;
  padding: 8px 4px 12px;
  font-size: 12px;
}
.legend-body .legend-header {
  padding: 8px 12px 4px;
  color: var(--accent);
  font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.06em;
  border-top: 1px dashed #1f2937;
}
.legend-body .legend-header:first-child { border-top: none; padding-top: 4px; }
.legend-body .legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  color: var(--fg);
  border-radius: 4px;
}
.legend-body .legend-row:hover { background: rgba(94,234,212,0.08); }
.legend-body .legend-row.indent { padding-left: 26px; color: var(--muted); }
.legend-body .legend-row.indent .legend-sw { border-width: 1.5px; }
.legend-body .legend-row.is-fallback .legend-sw {
  border-style: dashed;
}
.legend-body .legend-row.legend-filtered {
  opacity: 0.3;
}
.legend-body .legend-row.legend-filtered:hover {
  opacity: 0.6;
}
.legend-body .legend-row {
  cursor: pointer;
  transition: opacity 150ms ease;
}
.legend-sw {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #0b0f14;
  border: 2px solid var(--c, #fff);
  display: flex; align-items: center; justify-content: center;
  color: var(--c, #fff);
  flex-shrink: 0;
}
.legend-sw svg { display: block; width: 12px; height: 12px; }
.legend-label { flex: 1; min-width: 0; line-height: 1.25; }
.legend-key {
  font-size: 9px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* "Find more stories in this region" — appears on every category row in the
   legend. Sits at the far right of the row, separated from the filter-toggle
   area so the user can clearly pick one action or the other. */
.legend-find-btn {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  padding: 3px 7px;
  font-family: ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid #1f2937;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.legend-find-btn:hover,
.legend-find-btn:focus-visible {
  color: #0b0f14;
  background: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.legend-find-btn:active { transform: translateY(1px); }
.legend-find-btn svg { display: block; }
.legend-find-btn.is-loading {
  color: var(--accent);
  border-color: var(--accent);
  pointer-events: none;
}
.legend-footnote {
  padding: 8px 12px 0;
  font-size: 10px; color: var(--muted);
  border-top: 1px dashed #1f2937;
  margin-top: 6px;
}

/* ── Trending topics chip bar (inside the legend <details>) ────────── */
/* Tag names are dynamic — AI-extracted per article (see /api/tags/top). */
/* The chip bar gives users a way to filter the map by topic without    */
/* picking from a hardcoded enum. 533 distinct tags in DB today.        */

.topics-chips-section {
  padding: 8px 10px 10px;
  border-bottom: 1px dashed #1f2937;
}
.topics-chips-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.topics-chips-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
.topics-chips-clear {
  font-size: 10px; cursor: pointer;
  color: var(--accent);
  background: transparent; border: none;
  padding: 0;
  font-family: ui-monospace, monospace;
}
.topics-chips-clear:hover { text-decoration: underline; }

.topics-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 110px; overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.topics-chips::-webkit-scrollbar { width: 4px; }
.topics-chips::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.topics-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 11px; line-height: 1.2;
  font-family: ui-monospace, monospace;
  background: rgba(94,234,212,0.06);
  color: #cbd5e1;
  border: 1px solid rgba(94,234,212,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topics-chip:hover {
  background: rgba(94,234,212,0.14);
  border-color: rgba(94,234,212,0.4);
  color: var(--accent);
}
.topics-chip.is-active {
  background: rgba(94,234,212,0.22);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.topics-chip-count {
  font-size: 9.5px;
  color: var(--muted);
  margin-left: 2px;
}
.topics-chip.is-active .topics-chip-count { color: rgba(94,234,212,0.8); }
.topics-chips-loading {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.topics-chips-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* "Links" toggle — now lives inside #mode-toggle next to Markers/Heatmap/Clusters.
   When active it tells the renderer to draw great-circle arcs between stories. */
.links-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.links-toggle:hover { color: var(--fg); }
.links-toggle[aria-pressed="true"] {
  background: var(--accent); color: #0b0f14;
}
.links-toggle svg { color: inherit; }

/* Good News button — removed from UI (kept for reference) */

*/
.wiki-markers-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.wiki-markers-toggle:hover { color: var(--fg); }
.wiki-markers-toggle[aria-pressed="true"] {
  background: var(--accent); color: #0b0f14;
}
.wiki-toggle-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 2px;
  background: #eee; color: #333; font-weight: 700;
  font-size: 11px; font-family: serif; line-height: 1;
}
.wiki-markers-toggle[aria-pressed="true"] .wiki-toggle-icon,
.wiki-markers-toggle.active .wiki-toggle-icon {
  background: #fff; color: #0b0f14;
}
.wiki-markers-toggle.active {
  background: var(--accent); color: #0b0f14;
}

.coverage-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.coverage-btn:hover { color: var(--fg); }
.coverage-btn.active {
  background: var(--accent); color: #0b0f14;
}

/* ── Connection-line legend ───────────────────────────────────────── */
/* Sits in the right column, one slot below the collapsed icon legend. */
.links-legend {
  position: fixed; top: calc(var(--right-col-top) + 44px); right: 12px; z-index: 500;
  background: rgba(11, 15, 20, 0.85);
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  max-width: calc(100vw - 70px);
}
.links-legend[hidden] { display: none !important; }
.links-legend-row {
  display: flex; align-items: center; gap: 6px;
}
.links-swatch {
  display: inline-block;
  width: 18px; height: 2px;
  border-radius: 1px;
}

/* ── Connection detail panel ──────────────────────────────────────── */
.link-panel {
  position: fixed; top: calc(var(--right-col-top) + 44px); right: 12px; width: 360px; max-width: calc(100vw - 70px); z-index: 600;
  background: rgba(11,15,20,0.95);
  border: 1px solid #1f2937; border-radius: 8px;
  font-family: ui-monospace, monospace;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.link-panel[hidden] { display: none !important; }
.link-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1f2937;
}
.link-panel-header h3 {
  margin: 0; font-size: 13px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em;
}
.link-panel-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.link-panel-close:hover { color: var(--fg); }
.link-panel-body { padding: 12px 16px; }
.link-panel-reason {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed #1f2937;
}
.link-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: #0b0f14;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.link-reason-text { font-size: 11px; color: var(--muted); }
.link-panel-story {
  margin-bottom: 12px; padding: 10px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
  border: 1px solid #1f2937;
}
.link-story-label {
  font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.link-story-headline {
  font-size: 13px; color: var(--fg); font-weight: 600; line-height: 1.4;
  margin-bottom: 4px;
}
.link-story-place { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.link-fly-btn {
  background: transparent; border: 1px solid #1f2937; color: var(--accent);
  padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.link-fly-btn:hover { background: rgba(94,234,212,0.1); border-color: var(--accent); }
.link-panel-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #1f2937;
}
.link-action-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid #1f2937; color: var(--muted);
  padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 120ms ease;
}
.link-action-btn:hover { color: var(--fg); border-color: #374151; }
.link-remove-btn:hover { border-color: #ef4444; color: #ef4444; }
.link-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.link-loc-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.link-action-btn svg { flex-shrink: 0; }
.link-panel-feedback {
  margin-top: 10px; padding: 8px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
}
.link-panel-feedback.success { background: rgba(94,234,212,0.1); color: var(--accent); }
.link-panel-feedback.error { background: rgba(239,68,68,0.1); color: #ef4444; }

/* ── Add-link banner ──────────────────────────────────────────────── */
.add-link-banner {
  position: fixed; top: calc(var(--top-band) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 700;
  background: rgba(11,15,20,0.95);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 20px;
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
  color: var(--accent);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.add-link-banner[hidden] { display: none !important; }
.add-link-banner-inner { display: flex; align-items: center; gap: 16px; }
.add-link-banner-inner button {
  background: transparent; border: 1px solid #374151; color: var(--muted);
  padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;
  font-family: inherit;
}
.add-link-banner-inner button:hover { color: var(--fg); border-color: var(--fg); }
#map.add-link-cursor { cursor: crosshair !important; }

/* ── Hardware Performance & Server Guardrail Banners ──────────────── */
.performance-guardrail-container {
  position: fixed;
  top: calc(var(--top-band) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 750;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 480px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.performance-guardrail-container > * {
  pointer-events: auto;
}
.guardrail-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  animation: fadeInDown 250ms ease;
}
.guardrail-card.warning-hardware {
  border-color: #f59e0b;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.guardrail-card.warning-server {
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}
.guardrail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.guardrail-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
}
.guardrail-title.hardware { color: #fbbf24; }
.guardrail-title.server { color: #60a5fa; }
.guardrail-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.guardrail-close:hover { color: var(--fg); }
.guardrail-body {
  font-size: 11px;
  line-height: 1.45;
  color: #cbd5e1;
  margin-bottom: 8px;
}
.guardrail-body strong {
  color: #fff;
}
.guardrail-metrics {
  display: flex;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 6px 0;
  font-size: 10px;
}
.guardrail-metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.guardrail-metric-item span {
  color: var(--accent);
  font-weight: 700;
}
.guardrail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.guardrail-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #475569;
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}
.guardrail-btn:hover {
  background: var(--accent);
  color: #0b0f14;
  border-color: var(--accent);
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Temporary notification ───────────────────────────────────────── */
.temp-notification {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 800;
  background: var(--accent); color: #0b0f14;
  padding: 10px 24px; border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: fadeInUp 300ms ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Story-connection arcs. Drawn by Leaflet's Polyline on the overlayPane;
   the SVG renderer keeps them crisp at any zoom. */
.leaflet-overlay-pane {
  overflow: visible;
  position: relative;
}

.xyzo-link {
  stroke-width: 1.6;
  stroke-opacity: 0.55;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
}
.xyzo-link:hover {
  stroke-opacity: 1;
  stroke-width: 2.6;
}

/* Story-to-story connections drawn from /api/feed/links. Same hover
   treatment as the category arcs but slightly thicker default so
   the visual hierarchy is "connection > halo > category arc". */
.xyzo-conn {
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
}
.xyzo-conn:hover {
  stroke-opacity: 1;
  stroke-width: 4;
}

/* Highlighted connection arcs (when user clicks a marker while links are on). */
.xyzo-conn-highlight {
  stroke: #ef4444 !important;
  stroke-opacity: 1 !important;
  stroke-width: 4 !important;
  filter: drop-shadow(0 0 4px rgba(239,68,68,0.6));
}

/* Dimmed arcs (non-highlighted when a marker is selected). */
.xyzo-conn-dimmed {
  stroke-opacity: 0.12 !important;
  stroke-width: 1 !important;
}

/* Highlighted marker glow (connected markers). */
.xyzo-pin.marker-highlight .pin {
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.8));
}
.xyzo-pin.marker-selected {
  z-index: 1000 !important;
}
.xyzo-pin.marker-selected .pin,
.xyzo-pin.marker-selected {
  filter: drop-shadow(0 0 8px rgba(239,68,68,1)) drop-shadow(0 0 14px rgba(239,68,68,0.7));
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  border-radius: 50%;
}

/* Faint ring at each category centroid — subtle hint of where the lines
   converge. */
.xyzo-link-centroid {
  pointer-events: none;
  fill-opacity: 0.06;
  stroke-width: 1.5;
  stroke-opacity: 0.6;
}

/* Time dropdown */
.time-dropdown { position: relative; overflow: visible; }
.time-dropdown-btn {
  background: transparent; color: var(--muted); border: none;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  border-radius: 4px; transition: background 0.15s;
}
.time-dropdown-btn:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.time-dropdown-menu {
  position: fixed;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: rgba(11, 15, 20, 0.97);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 0;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.time-dropdown-menu[hidden] { display: none; }
.time-dropdown-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--muted);
  padding: 7px 14px; font: inherit; font-size: 12px;
  cursor: pointer; transition: background 0.1s;
}
.time-dropdown-menu button:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
#time-dropdown-menu button.active,
.time-dropdown-menu button.active { color: var(--accent); font-weight: 600; }
#time-dropdown-menu button.active::before,
.time-dropdown-menu button.active::before { content: "✓ "; }
.time-dropdown-divider { height: 1px; background: #1f2937; margin: 4px 0; }
/* Custom-days popover. Anchored to the Custom… button. Inline block so it
   shifts the map out of the way and we never rely on z-index tricks. */
.time-custom-popover {
  position: fixed; top: calc(var(--top-band) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 700;
  width: 280px; max-width: calc(100vw - 32px);
  background: rgba(11, 15, 20, 0.97);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px 12px;
  font-family: ui-monospace, monospace; font-size: 12px;
  color: var(--fg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}
.time-custom-popover[hidden] { display: none; }
.time-custom-popover label { display: block; color: var(--muted); margin-bottom: 8px; }
.time-custom-popover label strong {
  color: var(--accent); font-weight: 700;
  display: inline-block; min-width: 1.5em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.time-custom-controls {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.time-custom-controls button {
  width: 32px; height: 36px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.time-custom-controls button:hover {
  background: var(--accent); color: #0b0f14;
}
.time-custom-controls input {
  flex: 1; min-width: 0;
  background: #0b0f14; color: var(--fg);
  border: 1px solid #1f2937; border-radius: 4px;
  padding: 8px 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.time-custom-controls input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}
.time-custom-controls input:invalid {
  border-color: #fca5a5;
}
.time-custom-hint {
  margin: 0 0 12px;
  font-size: 10px; color: var(--muted); letter-spacing: 0.02em;
}
.time-custom-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.time-custom-actions button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 6px 14px; border-radius: 4px;
  font: inherit; cursor: pointer;
}
.time-custom-actions button:hover {
  color: var(--fg); border-color: var(--fg);
}
.time-custom-actions button.primary {
  background: var(--accent); color: #0b0f14;
  border-color: var(--accent); font-weight: 600;
}
.time-custom-actions button.primary:hover {
  filter: brightness(1.1);
}
.event-source {
  display: block; padding: 4px 0; border-top: 1px dashed #1f2937;
  font-size: 12px; color: var(--fg);
}
.event-source:first-of-type { border-top: none; }
.event-source .src { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; }
.event-source a { color: var(--accent); text-decoration: none; }
.event-source a:hover { text-decoration: underline; }
.event-linked-item {
  padding: 6px 8px;
  border-top: 1px solid #1f2937;
  cursor: pointer;
  transition: background 120ms ease;
}
.event-linked-item:hover { background: rgba(94,234,212,0.06); }
.event-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: #0b0f14;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700;
  line-height: 18px; text-align: center; margin-left: 4px;
}
#submitter-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
  display: grid; place-items: center;
}
#submitter-overlay[hidden] { display: none; }
.overlay-card {
  background: #11161d; border: 1px solid #1f2937;
  border-radius: 8px; padding: 20px; max-width: 520px; width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto;
  position: relative;
}
.overlay-card h2 { margin: 0 0 12px 0; padding-right: 44px; color: var(--accent);
  font-family: ui-monospace, monospace; }
/* Close (×) button positioned in the upper-right of the submitter card.
   More prominent than a corner glyph so it's unmissable. */
#card-close-btn {
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  background: rgba(31, 41, 55, 0.6);
  color: var(--fg);
  border: 1px solid var(--muted);
  border-radius: 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  z-index: 2;
}
#card-close-btn:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
#card-close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.overlay-card label {
  display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted);
}
.overlay-card input, .overlay-card select {
  display: block; width: 100%; margin-top: 4px;
  background: #0b0f14; color: var(--fg); border: 1px solid #1f2937;
  padding: 6px 8px; border-radius: 4px; font: inherit;
}
#mini-map { width: 100%; height: 220px; border: 1px solid #1f2937; border-radius: 4px; }
.place-row { display: flex; gap: 6px; margin-top: 4px; }
.place-row input { flex: 1; margin-top: 0; }
.place-row button { background: var(--accent); color: #0b0f14; border: 1px solid var(--accent); }
.place-row button:hover { filter: brightness(1.1); }
.place-row button:disabled { opacity: 0.5; cursor: not-allowed; }
.coord-display { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); margin: 6px 0; }

/* Live sniff hints on the submit form */
.sniff-hint {
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--fg);
}
.sniff-hint.loading { color: var(--muted); font-style: italic; }
.sniff-hint.empty { background: rgba(100, 116, 139, 0.06); border-color: rgba(100, 116, 139, 0.2); }
.sniff-hint.national { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.06); }
.sniff-detected { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; margin-bottom: 4px; }
.sniff-primary { margin: 6px 0; }
.sniff-primary .sniff-use {
  background: var(--accent); color: #0b0f14; border: 0;
  padding: 2px 8px; border-radius: 3px; font: inherit; cursor: pointer;
  margin-left: 6px;
}
.sniff-primary .sniff-use:hover { filter: brightness(1.1); }
.sniff-list { display: flex; flex-wrap: wrap; gap: 4px; }
.sniff-city {
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.3);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.sniff-city:hover { background: rgba(94, 234, 212, 0.18); }
.sniff-alias { color: var(--muted); font-size: 10px; margin-left: 4px; }
.sniff-empty { color: var(--muted); }
#place-status { min-height: 1em; }
.overlay-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.overlay-actions button {
  background: var(--bg); color: var(--fg); border: 1px solid #1f2937;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
}
#confirm-btn { background: var(--accent); color: #0b0f14; border-color: var(--accent); }
/* Leaflet's top corners drop below the control stack whenever the stack
   spans the full viewport width — see --zoom-top. On desktop the stack is
   centred and narrow, so the corners stay at the very top. */
.leaflet-top { top: var(--zoom-top); }

/* Globe button appended to the zoom bar — resets the map to the world view. */
.leaflet-bar a.leaflet-control-zoom-world {
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaflet-bar a.leaflet-control-zoom-world svg { width: 15px; height: 15px; }
.leaflet-touch .leaflet-bar a.leaflet-control-zoom-world svg { width: 17px; height: 17px; }

/* ═══════════════════════════════════════════════════════════════
   POPUP REDESIGN — News viewer cards
   ═══════════════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper {
  background: #0b0f14 !important;
  color: var(--fg);
  border: 1px solid #1f2937;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(94,234,212,0.05);
}
.leaflet-popup-tip { background: #0b0f14 !important; }
.leaflet-container a.leaflet-popup-close-button {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(31, 41, 55, 0.8) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-size: 15px !important;
  line-height: 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px);
  transition: all 0.15s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 100 !important;
}
.leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--accent) !important;
  color: #0b0f14 !important;
  border-color: var(--accent) !important;
  transform: scale(1.1);
}
.leaflet-popup-content { margin: 0; padding: 0; color: var(--fg); }

/* ── Popup Action Buttons (Dark Mode) ── */
.popup-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 6px;
}

.popup-actions a,
.popup-actions button,
.ask-ai-btn,
.wrong-loc,
.report-story,
.read-more,
.popup-apply-btn,
.popup-apply-all,
.link-add-btn,
.popup-dismiss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.popup-dismiss-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.popup-dismiss-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.popup-actions a {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border-color: rgba(14, 165, 233, 0.3);
}
.popup-actions a:hover {
  background: rgba(14, 165, 233, 0.25);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}

.ask-ai-btn {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
.ask-ai-btn:hover {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #e9d5ff !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  transform: translateY(-1px);
}

.wrong-loc {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.wrong-loc:hover {
  background: rgba(249, 115, 22, 0.25) !important;
  color: #ffedd5 !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  transform: translateY(-1px);
}

.report-story {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.report-story:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-1px);
}

.read-more {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.read-more:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #dcfce7 !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  transform: translateY(-1px);
}

.popup-apply-btn,
.popup-apply-all {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #22d3ee !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}
.popup-apply-btn:hover,
.popup-apply-all:hover {
  background: rgba(6, 182, 212, 0.25) !important;
  color: #cffaff !important;
  border-color: rgba(6, 182, 212, 0.5) !important;
  transform: translateY(-1px);
}

/* ── Inner layout ── */
.leaflet-popup-content-wrapper {
  max-width: 360px !important;
  border-radius: 12px !important;
}

.leaflet-popup-content {
  margin: 12px !important;
  max-width: 336px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #5eead4) transparent;
}

.popup-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1f2937 transparent;
}

.popup-links-more-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-top: 6px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px dashed rgba(94, 234, 212, 0.3);
  border-radius: 6px;
  color: var(--accent, #5eead4);
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  text-align: center;
  cursor: pointer;
  transition: all 120ms ease;
}

.popup-links-more-btn:hover {
  background: rgba(94, 234, 212, 0.16);
  border-color: var(--accent, #5eead4);
}

.popup-links-expanded {
  margin-top: 6px;
  animation: fadeIn 150ms ease;
}

/* ── Hero: title + meta ── */
.popup-hero {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(94,234,212,0.08);
}
.popup-title {
  margin: 0 0 8px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--fg) !important;
  letter-spacing: -0.01em;
}
.popup-title a { color: inherit !important; text-decoration: none !important; }
.popup-title a:hover { color: var(--accent) !important; text-decoration: underline !important; }

.popup-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.popup-src-flag { font-size: 15px; line-height: 1; }
.popup-src-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-family: ui-monospace, monospace; text-transform: uppercase;
}
.badge.editorial { background: var(--editorial); color: #0b0f14; }
.badge.community { background: var(--community); color: #0b0f14; }
.badge.rss       { background: var(--rss); color: #0b0f14; }

.popup-cat-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-family: ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.popup-time {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.popup-conf {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Location strip ── */
.popup-locstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(94,234,212,0.06);
  border-bottom: 1px solid rgba(94,234,212,0.1);
  font-size: 11px;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}
.popup-locstrip-icon { font-size: 12px; opacity: 0.7; }
.popup-locstrip-text { opacity: 0.9; }

/* ── Reports container ── */
.popup-reports-container { padding: 0 16px; }

/* ── Toolbar: action buttons ── */
.popup-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(94,234,212,0.08);
}
.popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.popup-btn svg { flex-shrink: 0; }

.popup-btn-primary {
  background: var(--accent);
  color: #0b0f14;
  border-color: var(--accent);
}
.popup-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(94,234,212,0.3);
}

.popup-btn-ai {
  background: rgba(139,92,246,0.12);
  color: #c4b5fd;
  border-color: rgba(139,92,246,0.3);
}
.popup-btn-ai:hover {
  background: rgba(139,92,246,0.22);
  border-color: rgba(139,92,246,0.5);
  color: #ddd6fe;
}

.popup-btn-fix {
  background: rgba(239,68,68,0.1);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.25);
}
.popup-btn-fix:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
  color: #fecaca;
}

.popup-btn-report {
  background: rgba(245,158,11,0.08);
  color: #fcd34d;
  border-color: rgba(245,158,11,0.2);
}
.popup-btn-report:hover {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.4);
  color: #fde68a;
}

/* ── Popup image ── */
.popup-image-wrap {
  padding: 8px 16px 0;
}
.popup-image-wrap img {
  object-fit: cover;
  width: 100%;
  max-height: 180px;
}

/* ── Popup title ── */
.leaflet-popup-content h3 {
  margin: 0 0 6px;
  padding: 0;
  font-size: 15px;
  line-height: 1.3;
}
.leaflet-popup-content h3 a {
  color: inherit;
  text-decoration: none;
}
.leaflet-popup-content h3 a:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* ── URL ── */
.popup-url {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 16px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  border-bottom: 1px solid rgba(94,234,212,0.06);
  overflow: hidden;
}
.popup-url-domain {
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 500;
}
.popup-url-path {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sections ── */
.popup-section {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(94,234,212,0.06);
}
.popup-section:last-of-type { border-bottom: none; }
.popup-section-label {
  font-size: 9px;
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.popup-section-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.6;
}
.popup-section-words .popup-section-label::before { background: #5eead4; }
.popup-section-links .popup-section-label::before { background: #f59e0b; }
.popup-section-cities .popup-section-label::before { background: #a78bfa; }

/* ── Word chips ── */
.popup-words-container { display: flex; flex-wrap: wrap; gap: 3px; }
.popup-words-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.popup-words-container .word-chip {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px;
  font-size: 10px;
  background: rgba(94,234,212,0.08);
  color: rgba(94,234,212,0.85);
  border-radius: 4px;
  border: 1px solid rgba(94,234,212,0.2);
  font-family: ui-monospace, monospace;
  transition: background 0.12s;
}
.popup-words-container .word-chip:hover {
  background: rgba(94,234,212,0.16);
}

/* ── Enhanced Popup Layout ── */
.popup-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(94,234,212,0.08);
}
.popup-close-btn-mobile {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 12px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: #f87171;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s ease;
}
.popup-close-btn-mobile:hover {
  background: rgba(239,68,68,0.25);
  color: #fecaca;
  border-color: rgba(239,68,68,0.6);
}
.popup-close-btn-mobile:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  .popup-close-btn-mobile {
    display: block;
  }
  .popup-header {
    padding-top: 40px;
  }
  /* Hide the default Leaflet close button on mobile since we have a custom one */
  .leaflet-container a.leaflet-popup-close-button {
    display: none !important;
  }
}
.popup-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.popup-location-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.popup-city-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(94,234,212,0.1);
  border: 1px solid rgba(94,234,212,0.25);
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--accent);
}
.popup-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--muted);
}
.popup-confidence-bar {
  width: 50px;
  height: 4px;
  background: rgba(94,234,212,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.popup-confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #5eead4);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.popup-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(94,234,212,0.06);
}
.popup-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
}
.popup-view-btn { background: rgba(14,165,233,0.15); color: #38bdf8; border-color: rgba(14,165,233,0.3); }
.popup-view-btn:hover { background: rgba(14,165,233,0.25); color: #7dd3fc; border-color: rgba(14,165,233,0.5); }
.popup-read-btn { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.popup-read-btn:hover { background: rgba(34,197,94,0.25); color: #dcfce7; }
.popup-ai-btn { background: rgba(168,85,247,0.15); color: #c084fc; border-color: rgba(168,85,247,0.3); }
.popup-ai-btn:hover { background: rgba(168,85,247,0.25); color: #e9d5ff; }
.popup-fix-btn { background: rgba(249,115,22,0.15); color: #fb923c; border-color: rgba(249,115,22,0.3); }
.popup-fix-btn:hover { background: rgba(249,115,22,0.25); color: #ffedd5; }
.popup-report-btn { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }
.popup-report-btn:hover { background: rgba(239,68,68,0.25); color: #fecaca; }
.popup-source-url {
  padding: 4px 16px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  border-bottom: 1px solid rgba(94,234,212,0.06);
}
.popup-source-url a { color: var(--accent); text-decoration: none; }
.popup-source-url a:hover { text-decoration: underline; }

/* ── Hero image ── */
.popup-hero-link { display: block; }
.popup-hero-wrap {
  position: relative;
  width: 100%;
  max-height: 160px;
  overflow: hidden;
  background: rgba(15,23,42,0.6);
}
.popup-hero-wrap img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.popup-hero-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px 0 0 0;
}

/* ── Keyword chips ── */
.popup-keywords { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
.popup-keyword-chip {
  display: inline-block;
  padding: 3px 8px;
  margin: 1px;
  font-size: 11px;
  border-radius: 12px;
  border: 1px solid;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  transition: all 0.15s ease;
}
.popup-keyword-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.popup-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  padding: 4px 0;
}

/* ── Links grid ── */
.popup-links-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.popup-link-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.popup-link-card:hover {
  background: rgba(94,234,212,0.08);
  border-color: rgba(94,234,212,0.2);
  transform: translateX(2px);
}
.popup-link-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.popup-link-type {
  font-size: 9px;
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.popup-link-strength {
  font-size: 9px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
}
.popup-link-title {
  font-size: 11px;
  color: var(--fg);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.popup-link-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}
.popup-links-more {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  padding: 4px 0;
}
.popup-add-link-btn {
  display: block;
  width: 100%;
  padding: 6px;
  margin-top: 6px;
  background: rgba(94,234,212,0.08);
  border: 1px dashed rgba(94,234,212,0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 11px;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}
.popup-add-link-btn:hover {
  background: rgba(94,234,212,0.15);
  border-color: var(--accent);
}

/* ── Links container ── */
.popup-links-container { font-size: 11px; }
.popup-links-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.link-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(31,41,55,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.1s;
  border-radius: 3px;
}
.link-item:last-child { border-bottom: none; }
.link-item:hover { background: rgba(94,234,212,0.05); }
.link-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.link-item-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.link-type-tag {
  font-size: 9px;
  font-family: ui-monospace, monospace;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── City chips ── */
.popup-cities { padding: 0 16px 8px; }
.popup-cities-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.city-chip {
  background: rgba(94,234,212,0.08);
  border: 1px solid rgba(94,234,212,0.3);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.city-chip:hover {
  background: rgba(94,234,212,0.18);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(94,234,212,0.15);
}
.city-chip-flag { font-size: 12px; }

/* ── Debug section ── */
.popup-debug {
  margin: 0;
  padding: 6px 16px 10px;
  border-top: 1px dashed rgba(94,234,212,0.1);
}
.popup-debug-toggle {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 0;
}
.popup-debug-toggle:hover { color: var(--fg); }
.popup-debug-body {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #1f2937;
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: var(--muted);
}
.popup-debug-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.popup-debug-label {
  color: var(--fg);
  font-weight: 600;
  min-width: 80px;
  flex-shrink: 0;
}
.popup-debug-val { color: var(--muted); word-break: break-all; }
.popup-debug-val em { opacity: 0.6; font-style: normal; }

/* ── AI inline response ── */
.popup-ai-container {
  margin: 8px 16px;
  padding: 10px 12px;
  background: rgba(139,92,246,0.07);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: #e9d5ff;
  animation: popup-ai-appear 0.25s ease;
}
@keyframes popup-ai-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.popup-ai-header {
  font-size: 9px;
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c4b5fd;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.popup-ai-text { white-space: pre-wrap; word-break: break-word; }
.popup-ai-error { color: #fca5a5; font-size: 11px; }
.popup-ai-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.popup-ai-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(139,92,246,0.2);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* City-diversity badge in event popups */
.diversity-row { margin: 6px 0; }
.diversity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.diversity-badge.local { background: rgba(94, 234, 212, 0.12); color: var(--accent); }
.diversity-badge.national { background: rgba(245, 158, 11, 0.12); color: var(--gold); }
.diversity-badge.international { background: rgba(139, 92, 246, 0.12); color: #c4b5fd; }

/* Paywall badge */
.paywall-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
  margin-left: 6px;
}
.auto-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  margin-left: 4px;
  vertical-align: middle;
}

/* Alive Map Visual Multi-Ring Radar Pulsing */
.xyzo-pin.marker-pulse-hot .pin {
  position: relative;
  box-shadow: 0 0 16px var(--c, var(--accent)), 0 0 24px var(--c, var(--accent));
  animation: alive-pulse 1.8s ease-in-out infinite alternate;
}

.xyzo-pin.marker-pulse-hot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--c, var(--accent));
  opacity: 0.8;
  animation: radar-ring-out 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.xyzo-pin.marker-pulse-hot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--c, var(--accent));
  opacity: 0.5;
  animation: radar-ring-out 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;
  pointer-events: none;
}

@keyframes alive-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.12); filter: brightness(1.3); }
}

@keyframes radar-ring-out {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  80% { opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.story-connection-line {
  stroke-dasharray: 8, 4;
  animation: flow-dash 1.5s linear infinite;
}

@keyframes flow-dash {
  to { stroke-dashoffset: -24; }
}

.auto-tag.source-fallback {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.auto-tag.fast-path {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.auto-tag.fast-path-low {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}
.auto-tag.client {
  background: rgba(236, 72, 153, 0.12);
  color: #f472b6;
}
/* Quick-pick cities in the wrong-loc banner (admin) */
.wrong-loc-cities {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 6px;
}
.wrong-loc-cities-label {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.wrong-loc-cities-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.city-quickpick {
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.4);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font: inherit;
  cursor: pointer;
}
.city-quickpick:hover:not(:disabled) { background: rgba(94, 234, 212, 0.22); }
.city-quickpick:disabled { opacity: 0.6; cursor: default; }

/* Pulse animation for newly discovered pins */
@keyframes pulse-new-pin {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.7; box-shadow: 0 0 12px rgba(94, 234, 212, 0.6); }
}

@keyframes pulse-reopen {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.4); border-color: rgba(94, 234, 212, 0.6); }
  50% { box-shadow: 0 0 16px rgba(94, 234, 212, 0.4); border-color: rgba(94, 234, 212, 0.9); }
}

/* Banner shown while the user is in "click the map" mode for a wrong-
   location correction. Fixed at the top of the viewport so it stays out
   of the way of the map but is unmissable. Now lays out the three
   sections (text / radius / actions) as a vertical stack. */
.wrong-loc-banner {
  position: fixed; top: calc(var(--top-band) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 600;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  background: rgba(11,15,20,0.95);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  font-family: ui-monospace, monospace; font-size: 12px;
  max-width: min(520px, calc(100vw - 32px));
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
}
.wrong-loc-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
  z-index: 1;
}
.wrong-loc-close:hover { color: var(--fg); }
.wrong-loc-banner strong { color: var(--accent); font-weight: 600; }
.wrong-loc-banner em { color: var(--fg); font-style: italic; }
.wrong-loc-banner .wrong-loc-text { text-align: center; line-height: 1.4; }
.wrong-loc-cat-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  font-size: 11px; border-radius: 4px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14); color: var(--fg);
  cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.wrong-loc-cat-chip:hover {
  background: rgba(255, 255, 255, 0.16); transform: translateY(-1px);
}
.wrong-loc-cat-chip.selected {
  border-color: var(--accent); background: rgba(94, 234, 212, 0.2);
  color: var(--accent); font-weight: 600; box-shadow: 0 0 8px rgba(94, 234, 212, 0.35);
}
.wrong-loc-banner .wrong-loc-radius {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(94, 234, 212, 0.08);
  border-radius: 4px;
}
.wrong-loc-banner .wrong-loc-radius-btn {
  width: 26px; height: 26px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
}
.wrong-loc-banner .wrong-loc-radius-btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.wrong-loc-banner .wrong-loc-radius-label { font-size: 11px; }
.wrong-loc-banner .wrong-loc-radius-label strong {
  display: inline-block; min-width: 2.5em; text-align: center;
}
.wrong-loc-banner .wrong-loc-actions { display: flex; gap: 8px; }
.wrong-loc-banner .wrong-loc-submit {
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent);
  padding: 5px 14px;
  border-radius: 4px;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.wrong-loc-banner .wrong-loc-submit:disabled {
  background: rgba(94, 234, 212, 0.3);
  border-color: rgba(94, 234, 212, 0.3);
  color: rgba(11, 15, 20, 0.6);
  cursor: not-allowed;
}
.wrong-loc-banner .wrong-loc-cancel {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 5px 14px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.wrong-loc-banner .wrong-loc-cancel:hover {
  color: var(--fg); border-color: var(--fg);
}
.wrong-loc-banner small { color: var(--muted); }

/* Free-text note textarea. Fills the banner width; resizes vertically
   as the user types. Distinct accent border on focus so users notice
   they can type here. */
.wrong-loc-banner .wrong-loc-note {
  width: 100%;
  min-height: 44px; max-height: 120px;
  background: #0b0f14; color: var(--fg);
  border: 1px solid #1f2937; border-radius: 4px;
  padding: 6px 10px;
  font: inherit; line-height: 1.4;
  resize: vertical;
}
.wrong-loc-banner .wrong-loc-note:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}
.wrong-loc-banner .wrong-loc-note::placeholder { color: var(--muted); }

/* "Send note only" / "Click map…" submit pair. Visually identical to the
   old single .wrong-loc-submit selector, but two of them now. The
   .wrong-loc-click variant sits in the secondary slot. */
.wrong-loc-banner .wrong-loc-submit-text,
.wrong-loc-banner .wrong-loc-submit-click {
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent);
  padding: 5px 14px;
  border-radius: 4px;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.wrong-loc-banner .wrong-loc-submit-text:disabled,
.wrong-loc-banner .wrong-loc-submit-click:disabled {
  background: rgba(94, 234, 212, 0.3);
  border-color: rgba(94, 234, 212, 0.3);
  color: rgba(11, 15, 20, 0.6);
  cursor: not-allowed;
}
/* "Click map…" gets a dimmed accent so it visually invites a click
   before it's "armed". Once armed, the JS swaps .wrong-loc-submit-click
   to read "Submit click" and it looks identical to .wrong-loc-submit-text. */
.wrong-loc-banner .wrong-loc-submit-click {
  background: rgba(94, 234, 212, 0.18);
  color: var(--accent);
  border-color: rgba(94, 234, 212, 0.6);
}
.wrong-loc-banner .wrong-loc-submit-click:hover {
  background: var(--accent); color: var(--bg);
}
.wrong-loc-banner .wrong-loc-submit-click:disabled:hover {
  background: rgba(94, 234, 212, 0.18);
  color: var(--accent);
}

.wrong-loc-banner .wrong-loc-hint {
  margin: 0; font-size: 10px; color: var(--muted); text-align: center;
  line-height: 1.3;
}

/* Result section in wrong-location banner */
.wrong-loc-result {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #1f2937;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 8px;
}
.wrong-loc-result[hidden] { display: none; }

/* Submit button - prominent */
.wrong-loc-banner .wrong-loc-submit {
  background: var(--accent);
  color: #0b0f14;
  border: 1px solid var(--accent);
  padding: 6px 18px;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.15s;
}
.wrong-loc-banner .wrong-loc-submit:hover {
  filter: brightness(1.1);
}
.wrong-loc-banner .wrong-loc-submit:disabled {
  background: rgba(94, 234, 212, 0.3);
  border-color: rgba(94, 234, 212, 0.3);
  color: rgba(11, 15, 20, 0.6);
  cursor: not-allowed;
}

/* Click map button - secondary style */
.wrong-loc-banner .wrong-loc-click-map {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 6px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.wrong-loc-banner .wrong-loc-click-map:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.wrong-loc-banner .wrong-loc-link-loc {
  background: transparent;
  color: #f59e0b;
  border: 1px solid #f59e0b;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.wrong-loc-banner .wrong-loc-link-loc:hover {
  color: #fbbf24;
  border-color: #fbbf24;
  background: rgba(245,158,11,0.1);
}
.wrong-loc-banner .wrong-loc-find-btn:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: rgba(94,234,212,0.08);
}

/* ── Legend panel enhancements ───────────────────────────────────────── */
.legend-top-panel {
  padding: 6px 8px 8px;
  border-bottom: 1px dashed #1f2937;
  margin-bottom: 4px;
}
.legend-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0b0f14;
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
}
.legend-search-box svg {
  color: var(--muted);
  flex-shrink: 0;
}
#legend-search-input {
  background: transparent;
  color: var(--fg);
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 11px;
  width: 100%;
}
#legend-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#legend-search-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.legend-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
}
.legend-action-btn {
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.2);
  color: var(--accent);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.legend-action-btn:hover {
  background: rgba(94, 234, 212, 0.18);
  border-color: var(--accent);
}
.legend-viewport-info {
  color: var(--muted);
  font-size: 10px;
}
.legend-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: 4px;
}
.legend-count.has-pins {
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent);
  border-color: rgba(94, 234, 212, 0.3);
}
.legend-subtopic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 12px 8px 32px;
}
.legend-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #1f2937;
  color: var(--muted);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
}
.legend-pill:hover, .legend-pill.active {
  background: rgba(94, 234, 212, 0.12);
  border-color: var(--accent);
  color: var(--fg);
}

/* Debug info section in wrong-location banner. */
.wrong-loc-debug {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
  max-height: 140px;
  overflow-y: auto;
}
.wrong-loc-debug-row {
  display: flex; gap: 6px;
  padding: 2px 0;
  color: var(--muted);
}
.wrong-loc-debug-label {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.wrong-loc-debug-loading {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted);
}

/* Crosshair cursor over the map while in wrong-location mode. */
#map.wrong-loc-cursor { cursor: crosshair !important; }
#map.wrong-loc-cursor .leaflet-grab,
#map.wrong-loc-cursor .leaflet-interactive { cursor: crosshair !important; }
.new-pin-glow { animation: glow 1s ease-out; }
@keyframes glow {
  0%   { filter: drop-shadow(0 0 8px var(--accent)); }
  100% { filter: none; }
}

/* Live discovery pins — same .xyzo-pin shell, plus a faint accent ring
   so the user can tell streaming pins apart from event-clustered ones while
   a discovery run is still in progress. */
.xyzo-pin.live-discovery-pin .pin {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.35); }
}

/* Brief flash when the discovery summary updates with new live counts —
   draws the eye to the running totals. */
.status-panel-summary.flash { animation: summary-flash 0.5s ease-out; }
@keyframes summary-flash {
  0%   { background-color: rgba(94, 234, 212, 0.18); }
  100% { background-color: transparent; }
}
.xyzo-pin .pin {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #0f172a;
  border: 2.5px solid var(--c, #38bdf8);
  display: flex; align-items: center; justify-content: center;
  color: var(--c, #38bdf8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px var(--c, #38bdf8);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.xyzo-pin .pin svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.xyzo-pin:hover .pin {
  transform: scale(1.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 18px var(--c, #38bdf8);
}
.xyzo-pin { background: transparent !important; border: none !important; }
/* Per-category tweaks: the SVG path is the primary differentiator, but at
   world zoom the icons are tiny so we nudge the ring/border to give each
   category its own silhouette in peripheral vision. Sourced from the
   `data-category` set by buildMarkerDiv(). */
.xyzo-pin .pin.cat-conflict    { border-width: 3px; }
.xyzo-pin .pin.cat-disaster    { border-width: 3px; }
.xyzo-pin .pin.cat-health      { border-width: 3px; }
.xyzo-pin .pin.cat-humanitarian{ border-width: 3px; border-style: dashed; }
.xyzo-pin .pin.cat-environment { border-style: dashed; }
.xyzo-pin .pin.cat-science     { border-style: dashed; }
.xyzo-pin .pin.cat-rss         { border-style: dotted; }
.xyzo-pin .src-dot {
  position: absolute; bottom: -4px; right: -4px;
  background: #0b0f14; color: var(--fg);
  font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700;
  border: 1px solid var(--c, #fff);
  border-radius: 8px; padding: 1px 4px; line-height: 1;
  text-transform: uppercase;
}
.xyzo-pin .src-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent); color: #0b0f14;
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; line-height: 1;
  min-width: 18px; text-align: center;
}
.xyzo-pin .pin.pin-hot {
  border-width: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 16px var(--c, #38bdf8), 0 0 24px var(--c, #38bdf8);
}
.xyzo-pin .pin.pin-critical {
  border-width: 3.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 20px var(--c, #38bdf8), 0 0 32px var(--c, #38bdf8), 0 0 48px var(--c, #38bdf8);
  animation: pin-critical-pulse 2s ease-in-out infinite;
}
@keyframes pin-critical-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 20px var(--c, #38bdf8), 0 0 32px var(--c, #38bdf8), 0 0 48px var(--c, #38bdf8); }
  50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 28px var(--c, #38bdf8), 0 0 44px var(--c, #38bdf8), 0 0 60px var(--c, #38bdf8); }
}
.xyzo-pin .pin-top-badge {
  position: absolute; top: -6px; left: -6px;
  background: #fbbf24; color: #0b0f14;
  font-size: 10px; font-weight: 700;
  border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

/* ── Top Story Globally Red Circle ───────────────────────────────── */
.xyzo-pin.xyzo-pin-top-story .pin {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2.5px #ef4444, 0 0 14px rgba(239, 68, 68, 0.85);
  animation: top-story-pulse 2.2s ease-in-out infinite;
}
@keyframes top-story-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #ef4444, 0 0 10px rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px #ef4444, 0 0 18px rgba(239, 68, 68, 0.95);
  }
}

/* ── Overflow Cluster Badge (+N) ─────────────────────────────────── */
.xyzo-overflow-wrapper {
  background: transparent !important;
  border: none !important;
}
.xyzo-overflow-cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #0ea5e9;
  border-radius: 50%;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.xyzo-overflow-cluster-marker:hover {
  transform: scale(1.15);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6);
}
.popup-top-story-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 6px;
}
/* ── Wikipedia map markers ─────────────────────────────────────────── */
.wiki-marker {
  background: transparent !important; border: none !important;
}
.wiki-marker .pin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #1a1f2e;
  border: 2px solid #9ca3af;
  display: flex; align-items: center; justify-content: center;
  color: #d1d5db;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-family: serif; font-size: 14px; font-weight: 700;
  line-height: 1;
}
.wiki-marker:hover .pin {
  border-color: #e5e7eb; color: #fff;
  transform: scale(1.1);
  transition: transform 0.15s;
}
/* ── Live news side panel ──────────────────────────────────────────── */
/* Left column, starting below the leaflet zoom + globe bar (--panel-top)
   and ending above the search row (--bottom-band), so it fits any
   viewport height without swallowing the map controls. */
.live-panel {
  position: fixed; top: var(--panel-top); left: 12px;
  z-index: 400;
  /* 52px of reserve keeps the collapse tab (which hangs 32px off the
     right edge) on screen at every width, down to a 320px phone. */
  width: min(320px, calc(100vw - 52px));
  height: calc(100vh - var(--panel-top) - var(--bottom-band)); max-height: 600px;
  background: rgba(11, 15, 20, 0.92);
  border: 1px solid #1f2937;
  border-radius: 8px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateX(0);
  opacity: 1;
}
.live-panel.collapsed {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.live-panel-toggle {
  position: absolute;
  top: 8px; right: -32px;
  width: 28px; height: 36px;
  background: rgba(11, 15, 20, 0.92);
  color: var(--accent);
  border: 1px solid #1f2937;
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: right 0.25s ease, color 0.15s ease;
}
.live-panel.collapsed .live-panel-toggle { right: -32px; }
.live-panel-toggle:hover { color: var(--fg); }

.live-panel-header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid #1f2937;
}
.live-panel-header h2 {
  margin: 0 0 8px 0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-panel-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 6px;
}
.live-panel-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.live-panel-tab:hover { color: var(--fg); }
.live-panel-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.live-panel-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.live-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.live-panel-list {
  display: flex;
  flex-direction: column;
}

.live-item {
  padding: 10px 14px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.live-item:hover {
  background: rgba(94, 234, 212, 0.06);
  border-left-color: var(--accent);
}
.live-item:last-child { border-bottom: none; }

/* Trending cities tab */
.trending-item {
  padding: 10px 14px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.trending-item:hover {
  background: rgba(245, 158, 11, 0.06);
  border-left-color: var(--gold);
}
.trending-item:last-child { border-bottom: none; }
.trending-row1 {
  display: flex; align-items: center; gap: 6px;
}
.trending-row2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.trending-flag { font-size: 14px; }
.trending-name { flex: 1; font-size: 13px; color: var(--fg); font-weight: 500; }
.trending-accel {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.trending-accel.accel-high { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.trending-accel.accel-med  { background: rgba(245, 158, 11, 0.2); color: var(--gold); }
.trending-accel.accel-low  { background: rgba(94, 234, 212, 0.15); color: var(--accent); }
.trending-meta { font-family: ui-monospace, monospace; }

/* Local sources tab */
.local-source {
  padding: 10px 14px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.local-source:hover {
  background: rgba(94, 234, 212, 0.06);
  border-left-color: var(--accent);
}
.local-source:last-child { border-bottom: none; }
.local-source-row1 {
  display: flex; align-items: center; gap: 6px;
}
.local-source-row2 {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.local-flag { font-size: 14px; }
.local-name { flex: 1; font-size: 13px; color: var(--fg); font-weight: 500; }
.local-dist {
  font-family: ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
}
.local-meta { font-family: ui-monospace, monospace; }
.local-articles {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
}
.local-articles.active { background: rgba(94, 234, 212, 0.15); color: var(--accent); }
.local-articles.inactive { background: rgba(100, 116, 139, 0.15); color: var(--muted); }
.local-articles-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(94, 234, 212, 0.1);
}
.source-coverage-summary {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.source-coverage-label {
  font-weight: 600;
  color: var(--accent);
}
.source-coverage-flag {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.local-article {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.local-article:hover {
  background: rgba(94, 234, 212, 0.1);
}
.local-article-place { color: var(--fg); display: flex; align-items: center; gap: 6px; }
.local-article-count { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.live-source-flag { font-size: 13px; margin-right: 4px; }
.live-source-place { color: var(--accent); font-weight: 500; }

/* New tab — recently added events */
.new-item {
  padding: 10px 14px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.new-item:hover {
  background: rgba(94, 234, 212, 0.06);
  border-left-color: var(--accent);
}
.new-item:last-child { border-bottom: none; }

/* New tab — active (selected) headline. Distinct from :hover, persists
   across the 60s re-render, cleared when user clicks empty map.
   Two-class specificity beats :hover (one class + pseudo). */
.new-item.new-item-active {
  background: rgba(94, 234, 212, 0.14);
  border-left-color: var(--accent);
  box-shadow: inset 4px 0 12px -4px rgba(94, 234, 212, 0.55),
              0 0 0 1px rgba(94, 234, 212, 0.18);
}
.new-item-row1 {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.new-item-headline {
  font-size: 13px; color: var(--fg); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.new-item-row2 {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; color: var(--muted);
}
.new-cat {
  font-family: ui-monospace, monospace;
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: rgba(94, 234, 212, 0.1); color: var(--accent);
}
.new-cat.cat-politics { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.new-cat.cat-business { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.new-cat.cat-crime { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.new-cat.cat-conflict { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.new-cat.cat-technology { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.new-cat.cat-science { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.new-cat.cat-sports { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.new-cat.cat-health { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.new-cat.cat-disaster { background: rgba(161, 98, 7, 0.15); color: #a16207; }
.new-cat.cat-weather { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.new-age {
  font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--muted);
}
.new-div { font-size: 12px; }
.new-place { font-size: 11px; }
.new-sources {
  font-family: ui-monospace, monospace;
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(94, 234, 212, 0.1); color: var(--accent);
}

.live-item-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-score { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.score-bar { width: 40px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.live-item-meta {
  display: flex; gap: 8px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  flex-wrap: wrap;
}
.live-item-cat {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(94, 234, 212, 0.18);
  color: var(--accent);
}
.live-item-multi {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(94, 234, 212, 0.25);
  color: var(--accent);
}
.live-item-fresh {
  /* Stories newer than ~30 min glow softly to flag freshness. */
  box-shadow: inset 3px 0 0 rgba(94, 234, 212, 0.6);
}
.live-item-stale {
  /* Stories past 80% of their relevance window fade. */
  opacity: 0.55;
}
.live-item-feedback-btn {
  background: none; border: none; cursor: pointer;
  font-size: 10px; padding: 0 2px; opacity: 0.5;
  transition: opacity 0.15s;
}
.live-item-feedback-btn:hover { opacity: 1; }
.live-item-feedback-menu {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(255,255,255,0.06); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}
.feedback-menu-label {
  font-size: 10px; color: var(--muted); margin-bottom: 4px;
}
.feedback-cat-btn {
  display: inline-block; padding: 2px 6px; margin: 2px;
  font-size: 10px; border-radius: 3px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.15s;
}
.feedback-cat-btn:hover {
  background: rgba(94,234,212,0.25); border-color: var(--accent);
}

.live-item-sources {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #1f2937;
}
.live-source {
  padding: 4px 0;
  font-size: 11px;
  line-height: 1.3;
}
.live-source a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.live-source a:hover {
  text-decoration: underline;
  color: var(--fg);
}
.live-source-name {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  margin-top: 1px;
}
.live-sources-loading,
.live-sources-error,
.live-sources-empty {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  padding: 4px 0;
}

.live-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.live-panel-reopen {
  position: fixed; top: var(--panel-top); left: 12px;
  z-index: 400;
  background: rgba(11, 15, 20, 0.92);
  color: var(--accent);
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  display: none;
}
.live-panel-reopen.visible { display: block; }
.live-panel-reopen:hover { color: var(--fg); }

/* ── Live panel: location controls ──────────────────────────────────── */
.live-panel-loc {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.live-panel-loc-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  flex: 1;
}
.live-panel-loc-btn:hover {
  color: var(--fg);
  border-color: var(--accent);
}
#live-panel-clear-loc {
  flex: 0 0 28px;
  text-align: center;
}

/* ── Live panel: manual location input ─────────────────────────────── */
.live-panel-loc-input {
  flex: 1;
  background: transparent;
  color: var(--fg);
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  outline: none;
}
.live-panel-loc-input:focus { border-color: var(--accent); }
.live-panel-loc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.live-panel-loc-input::placeholder { color: var(--muted); }

#live-panel-set-loc, #live-panel-clear-loc { flex: 0 0 28px; padding: 4px 0; text-align: center; }

.live-panel-loc-results {
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #1f2937;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.live-panel-loc-results[hidden] { display: none; }
.live-panel-loc-result {
  padding: 6px 8px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
}
.live-panel-loc-result:last-child { border-bottom: none; }
.live-panel-loc-result:hover { background: rgba(94, 234, 212, 0.08); }
.live-panel-loc-result-main { color: var(--fg); font-weight: 600; }
.live-panel-loc-result-sub  { color: var(--muted); font-size: 10px; }

/* ── Wikipedia section inside the live panel ──────────────────────── */
.live-panel-section-title {
  padding: 8px 14px 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid #1f2937;
}
.live-panel-section-title:first-child { border-top: none; }
.live-wiki-item {
  padding: 8px 14px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
}
.live-wiki-item:hover { background: rgba(94, 234, 212, 0.06); }
.live-wiki-item:last-child { border-bottom: none; }
.live-wiki-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 2px;
}
.live-wiki-extract {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.live-wiki-meta {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Explore Region button and panel ──────────────────────────────────── */
.explore-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.explore-btn:hover { color: var(--fg); }
.explore-btn.active {
  background: var(--accent); color: #0b0f14;
}
.explore-btn svg { color: inherit; }
.help-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.help-btn:hover { color: var(--fg); }
.help-btn.active {
  background: rgba(94, 234, 212, 0.15); color: var(--accent);
}
.help-btn svg { color: inherit; }
/* Quick-flag button — sits next to Help. The flag icon + red accent on
   hover makes it visible as an action ("report a problem") rather than
   a view toggle. Same compact mobile treatment as the other top buttons. */
.flag-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.flag-btn:hover, .flag-btn:focus-visible {
  color: #f87171; /* warm red — distinct from accent cyan */
  background: rgba(248, 113, 113, 0.08);
  outline: none;
}
.flag-btn:active { transform: translateY(1px); }
.flag-btn svg { color: inherit; }

.discover-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none; border-left: 1px solid #1f2937;
  padding: 8px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.discover-btn:hover, .discover-btn:focus-visible {
  color: #5eead4; /* accent cyan — discovery is a positive action */
  background: rgba(94, 234, 212, 0.08);
  outline: none;
}
.discover-btn:active { transform: translateY(1px); }
.discover-btn svg { color: inherit; }

/* Quick-flag dialog — same visual language as feedback-dialog but
   self-contained (no pin required). The input row shows a tiny "Resolved
   to:" hint once the backend has identified the pin, so the user can
   confirm before submitting. */
.quick-flag-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  animation: qfFadeIn 140ms ease;
}
@keyframes qfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.quick-flag-dialog {
  background: var(--panel-bg, #0b0f14);
  border: 1px solid #1f2937;
  border-radius: 8px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  font-family: ui-monospace, monospace;
  color: var(--fg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.quick-flag-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1f2937;
  font-weight: 600;
}
.quick-flag-header strong { display: flex; align-items: center; gap: 6px; }
.quick-flag-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; line-height: 1;
  padding: 4px 8px; border-radius: 4px;
}
.quick-flag-close:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.quick-flag-body { padding: 14px 16px 4px; font-size: 12px; }
.quick-flag-intro {
  color: var(--muted); font-size: 11px; margin-bottom: 10px;
}
.quick-flag-input-row { display: flex; gap: 6px; margin-bottom: 6px; }
.quick-flag-input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  background: #11151c;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.quick-flag-input:focus { outline: none; border-color: var(--accent); }
.quick-flag-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.quick-flag-resolve {
  padding: 7px 10px;
  background: transparent;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.quick-flag-resolve:hover { color: var(--fg); border-color: var(--accent); }
.quick-flag-resolve:disabled { opacity: 0.5; cursor: not-allowed; }
.quick-flag-resolved {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  background: rgba(94, 234, 212, 0.07);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 4px;
  font-size: 11px;
}
.quick-flag-resolved.error {
  background: rgba(248, 113, 113, 0.07);
  border-color: rgba(248, 113, 113, 0.35);
}
.quick-flag-resolved-icon { flex-shrink: 0; margin-top: 1px; }
.quick-flag-resolved-text { flex: 1; min-width: 0; }
.quick-flag-resolved-title { color: var(--accent); font-weight: 600; word-break: break-word; }
.quick-flag-resolved-meta { color: var(--muted); font-size: 10px; margin-top: 2px; word-break: break-all; }
.quick-flag-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 10px 0 6px;
}
.quick-flag-option {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border: 1px solid #1f2937;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.quick-flag-option:hover { border-color: var(--accent); }
.quick-flag-option input { accent-color: var(--accent); }
.quick-flag-option.selected { border-color: var(--accent); background: rgba(94,234,212,0.08); }
.quick-flag-reason {
  width: 100%;
  min-height: 50px;
  padding: 6px 8px;
  margin-top: 6px;
  background: #11151c;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  resize: vertical;
}
.quick-flag-reason:focus { outline: none; border-color: var(--accent); }
.quick-flag-reason:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.quick-flag-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #1f2937;
  margin-top: 10px;
}
.quick-flag-actions button {
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid #1f2937;
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.quick-flag-actions .primary {
  background: #f87171; color: #0b0f14; border-color: #f87171;
}
.quick-flag-actions .primary:hover:not(:disabled) {
  background: #ef4444; border-color: #ef4444;
}
.quick-flag-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.quick-flag-result {
  margin: 0 16px 14px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid transparent;
}
.quick-flag-result.success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.quick-flag-result.error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.quick-flag-result a { color: inherit; text-decoration: underline; word-break: break-all; }
.quick-flag-ai-toggle { margin-top: 8px; }
.quick-flag-ai-option {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 11px; cursor: pointer;
}
.quick-flag-ai-option input { accent-color: var(--accent); }
.quick-flag-ai-result {
  margin: 0 16px 14px;
  padding: 10px 12px;
  background: rgba(94, 234, 212, 0.05);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 6px;
  font-size: 11px;
}
.quick-flag-ai-header { font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.quick-flag-ai-action { color: var(--fg); }

/* ── Feedback Dialog ─────────────────────────────────────────────────── */
.feedback-dialog {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  animation: qfFadeIn 140ms ease;
}
.feedback-dialog-content {
  background: var(--panel-bg, #0b0f14);
  border: 1px solid #1f2937;
  border-radius: 8px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  font-family: ui-monospace, monospace;
  color: var(--fg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.feedback-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1f2937;
  font-weight: 600;
}
.feedback-dialog-header strong { display: flex; align-items: center; gap: 6px; }
.feedback-dialog-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; line-height: 1;
  padding: 4px 8px; border-radius: 4px;
}
.feedback-dialog-close:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.feedback-dialog-title {
  padding: 10px 16px 8px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid #1f2937;
  word-break: break-word;
}
.feedback-tabs {
  display: flex;
  border-bottom: 1px solid #1f2937;
}
.feedback-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.feedback-tab:hover { color: var(--fg); }
.feedback-tab.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}
.feedback-tab-content { padding: 14px 16px 4px; }
.feedback-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.feedback-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid #1f2937;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: border-color 120ms ease, background 120ms ease;
}
.feedback-option:hover { border-color: var(--accent); }
.feedback-option input { accent-color: var(--accent); }
.feedback-reason, .feedback-fix-reason {
  width: 100%;
  min-height: 50px;
  padding: 7px 10px;
  background: #11151c;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  resize: vertical;
}
.feedback-reason:focus, .feedback-fix-reason:focus { outline: none; border-color: var(--accent); }
.feedback-reason:focus-visible, .feedback-fix-reason:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-reason::placeholder, .feedback-fix-reason::placeholder { color: var(--muted); }
.feedback-fix-intro { color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.feedback-fix-intro p { margin: 0 0 8px; }
.feedback-fix-search { position: relative; margin-bottom: 10px; }
.feedback-place-input {
  width: 100%;
  padding: 7px 10px;
  background: #11151c;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  box-sizing: border-box;
}
.feedback-place-input:focus { outline: none; border-color: var(--accent); }
.feedback-place-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-place-results {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #11151c;
  border: 1px solid #1f2937;
  border-radius: 4px;
  margin-top: 2px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 10;
}
.feedback-place-results:empty { display: none; }
.feedback-place-result {
  padding: 7px 10px;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 1px solid #1f2937;
}
.feedback-place-result:last-child { border-bottom: none; }
.feedback-place-result:hover { background: rgba(94,234,212,0.08); }
.feedback-fix-coords { margin-bottom: 10px; }
.feedback-fix-hint { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.feedback-fix-latlng {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(94, 234, 212, 0.07);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 4px;
  font-size: 11px;
}
.feedback-fix-clear-coord {
  background: transparent; border: none; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 0 4px;
}
.feedback-fix-clear-coord:hover { color: var(--fg); }
.feedback-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #1f2937;
  margin-top: 10px;
}
.feedback-cancel, .feedback-submit {
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid #1f2937;
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.feedback-cancel:hover { color: var(--fg); border-color: var(--fg); }
.feedback-submit {
  background: var(--accent); color: #0b0f14; border-color: var(--accent);
}
.feedback-submit:hover:not(:disabled) { filter: brightness(1.1); }
.feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.feedback-result {
  margin: 0 16px 14px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid transparent;
}
.feedback-result.success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.feedback-result.error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.feedback-result a { color: inherit; text-decoration: underline; word-break: break-all; }

@media (max-width: 720px) {
  .explore-btn span, .help-btn span { display: none; }
  .explore-btn, .help-btn { padding: 8px 10px; }
  .flag-btn { padding: 8px 10px; }
  .flag-btn span { display: none; }
  .discover-btn { padding: 8px 10px; }
  .discover-btn span { display: none; }
  .quick-flag-options { grid-template-columns: 1fr; }
}

/* ── WCAG 2.5.5 / 2.5.8 touch-target floor (mobile) ───────────────────
   Audit 4 found bottom-bar buttons rendered at ~22–32 px tall, causing
   mis-taps. Raise every interactive control inside #bottom-bar to the
   44×44 minimum while keeping the desktop layout (icons + labels) intact
   and preserving the existing horizontally-scrollable row. */
@media (max-width: 720px) {
  #bottom-bar {
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    /* Allow vertical breathing room for taller buttons without clipping. */
    align-items: stretch;
  }
  #bottom-bar > button,
  #bottom-bar button[data-time],
  #bottom-bar button[data-mode] {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
    font-size: 12px;
  }
  /* Hide icon-only labels on phones — keep the icon large and the touch
     target well above the 44px floor. */
  #bottom-bar button > span[data-i18n],
  #bottom-bar button > span:not(.wiki-toggle-icon):not(.wiki-toggle-icon *) {
    display: none;
  }
  /* Bring the divider out so it matches the new button height. */
  .bottom-bar-divider { height: 28px; margin: 0 2px; }
}

/* Reload-pins button — manual reload trigger for users to recover from
   a missed pan-fetch race. Spins the icon for the duration of the
   in-flight fetch so the user has visual confirmation that something is
   happening. */
.legend-btn.has-filter {
  background: rgba(94, 234, 212, 0.15) !important;
  border-color: var(--accent, #5eead4) !important;
  color: var(--accent, #5eead4) !important;
}

/* Explore panel — slides in from the right */
.explore-panel {
  position: fixed; top: calc(var(--right-col-top) + 44px); right: 12px;
  z-index: 500;
  width: 380px; max-width: calc(100vw - 70px);
  max-height: calc(100vh - var(--right-col-top) - var(--bottom-band) - 44px);
  background: rgba(11, 15, 20, 0.95);
  border: 1px solid #1f2937;
  border-radius: 8px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.explore-panel[hidden] { display: none; }

.explore-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #1f2937;
}
.explore-panel-header h3 {
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.explore-close {
  width: 28px; height: 28px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #1f2937;
  border-radius: 4px;
  font-size: 18px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.explore-close:hover { color: var(--fg); border-color: var(--fg); }

.explore-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
.explore-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.explore-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.explore-start-btn {
  background: var(--accent);
  color: #0b0f14;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.explore-start-btn:hover { filter: brightness(1.1); }
.explore-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.explore-auto-add {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}
.explore-auto-add input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Explore status spinner */
.explore-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}
.explore-status[hidden] { display: none; }
.explore-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(94, 234, 212, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Explore results */
.explore-results {
  margin-top: 12px;
}
.explore-results[hidden] { display: none; }

.explore-section {
  margin-bottom: 16px;
}
.explore-section-title {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #1f2937;
}

/* City list */
.explore-cities {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.explore-city-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: rgba(94, 234, 212, 0.1);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
}
.explore-city-tag .country-code {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

/* Source list */
.explore-source {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}
.explore-source:last-child { border-bottom: none; }
.explore-source-info { flex: 1; min-width: 0; }
.explore-source-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-source-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.explore-source-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.explore-source-status.valid {
  background: rgba(94, 234, 212, 0.2);
  color: var(--accent);
}
.explore-source-status.invalid {
  background: rgba(252, 165, 165, 0.2);
  color: #fca5a5;
}
.explore-source-status.added {
  background: rgba(94, 234, 212, 0.4);
  color: #0b0f14;
}
.explore-source-status.existing {
  background: rgba(100, 116, 139, 0.3);
  color: var(--muted);
}

/* News stats */
.explore-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.explore-stat {
  text-align: center;
  padding: 8px;
  background: rgba(94, 234, 212, 0.05);
  border: 1px solid rgba(94, 234, 212, 0.15);
  border-radius: 6px;
}
.explore-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}
.explore-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Clickable stat cards — give cursor + hover feedback when role=button. */
.explore-stat[role="button"] {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.explore-stat[role="button"]:hover {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.4);
}
.explore-stat[role="button"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.explore-stat-active {
  transform: scale(0.97);
  background: rgba(94, 234, 212, 0.2) !important;
  border-color: var(--accent) !important;
}

/* ── Coverage panel ───────────────────────────────────────────────── */
.explore-city-search {
  padding: 10px 12px;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
}
.explore-city-search-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 7px 10px;
  box-sizing: border-box;
}
.explore-city-search-input:focus { outline: none; border-color: var(--accent); }
.explore-city-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.explore-city-search-input::placeholder { color: var(--muted); }
.explore-city-results {
  flex: 1; overflow-y: auto; padding: 8px 12px;
}
.explore-city-empty {
  text-align: center; color: var(--muted); font-size: 12px;
  padding: 20px 0;
}
.explore-city-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
}
.explore-city-item:hover { background: rgba(94,234,212,0.08); }
.explore-city-item.selected { background: rgba(94,234,212,0.15); }
.explore-city-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a78bfa; flex-shrink: 0;
}
.explore-city-name { font-size: 12px; font-weight: 600; color: var(--fg); }
.explore-city-meta { font-size: 10px; color: var(--muted); margin-top: 1px; }
.explore-city-pop { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.explore-city-actions {
  padding: 10px 12px;
  border-top: 1px solid #1f2937;
  flex-shrink: 0;
}
.explore-fly-btn {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--fg);
  padding: 8px 16px;
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
}
.explore-fly-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--accent); }
.explore-discover-btn {
  width: 100%;
  background: var(--accent); color: #0b0f14;
  border: none; padding: 9px 16px;
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.explore-discover-btn:hover { filter: brightness(1.1); }
.coverage-selected-name {
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
  text-align: center;
}

/* Source name as link — inherits color, subtle hover underline. */
a.explore-source-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.explore-source-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* City tag — promoted to button so it's keyboard-focusable. */
button.explore-city-tag {
  font-family: ui-monospace, monospace;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
button.explore-city-tag:hover {
  background: rgba(94, 234, 212, 0.2);
  border-color: rgba(94, 234, 212, 0.5);
}
button.explore-city-tag:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button.explore-city-tag:active {
  transform: scale(0.97);
}

/* Article / event list items in expanded stats sections. */
.explore-articles-list,
.explore-events-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.explore-article-item,
.explore-event-item {
  padding: 6px 8px;
  background: rgba(94, 234, 212, 0.04);
  border: 1px solid rgba(94, 234, 212, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.explore-article-item:hover,
.explore-event-item:hover {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.4);
}
.explore-article-item:active,
.explore-event-item:active {
  transform: scale(0.99);
}
.explore-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-item-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}

/* Summary box */
.explore-summary {
  padding: 8px 10px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--fg);
  line-height: 1.4;
  font-family: ui-monospace, monospace;
  margin-top: 12px;
}

/* Auto-Add Validated Sources button + feedback line. Accent matches the
   stat-card palette (rgba teal) but rendered as a full-width button so
   it's discoverable as the primary action on this panel. */
.explore-auto-add-btn {
  display: inline-block;
  width: 100%;
  padding: 8px 12px;
  background: rgba(94, 234, 212, 0.18);
  border: 1px solid rgba(94, 234, 212, 0.5);
  border-radius: 6px;
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.explore-auto-add-btn:hover:not(:disabled) {
  background: rgba(94, 234, 212, 0.32);
  border-color: var(--accent);
}
.explore-auto-add-btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.explore-auto-add-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.explore-auto-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.explore-auto-add-btn-loading {
  background: rgba(94, 234, 212, 0.08) !important;
  border-color: rgba(94, 234, 212, 0.25) !important;
}
.explore-auto-add-btn-done {
  background: rgba(94, 234, 212, 0.4) !important;
  color: #0b0f14 !important;
  border-color: var(--accent) !important;
}

/* Feedback line under the button — pending / success / error states. */
.explore-auto-add-feedback {
  margin-top: 6px;
  padding: 6px 10px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  border-radius: 4px;
  line-height: 1.4;
}
.explore-auto-add-pending {
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.2);
  color: var(--muted);
}
.explore-auto-add-success {
  background: rgba(94, 234, 212, 0.18);
  border: 1px solid rgba(94, 234, 212, 0.5);
  color: var(--accent);
}
.explore-auto-add-error {
  background: rgba(252, 165, 165, 0.15);
  border: 1px solid rgba(252, 165, 165, 0.5);
  color: #fca5a5;
}

/* ── Explore Request News section (inside explore panel) ──────────────── */
.explore-divider {
  height: 1px;
  background: #1f2937;
  margin: 16px 0;
}
.explore-request-section {
  padding-top: 4px;
}
.explore-request-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.explore-request-header svg { color: var(--accent); }
.explore-request-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.explore-request-textarea {
  width: 100%;
  background: #0b0f14;
  color: var(--fg);
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  min-height: 44px;
  margin-bottom: 8px;
}
.explore-request-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.explore-request-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.explore-request-textarea::placeholder {
  color: #4a5568;
}
.explore-request-btn {
  width: 100%;
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent);
  border: 1px solid rgba(94, 234, 212, 0.3);
  padding: 8px 14px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.explore-request-btn:hover {
  background: rgba(94, 234, 212, 0.25);
  border-color: var(--accent);
}
.explore-request-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.explore-request-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.explore-request-status[hidden] { display: none; }
.explore-request-status.success {
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent);
  border: 1px solid rgba(94, 234, 212, 0.3);
}
.explore-request-status.error {
  background: rgba(252, 165, 165, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.3);
}



/* Report dialog */
.report-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: grid;
  place-items: center;
}
.report-dialog-content {
  background: #11161d;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 20px;
  max-width: 400px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow-y: auto;
}
.report-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.report-dialog-header strong {
  color: #f59e0b;
  font-family: ui-monospace, monospace;
}
.report-dialog-close {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #1f2937;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-dialog-close:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.report-dialog-title {
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 16px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  line-height: 1.4;
}
.report-dialog-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.report-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #1f2937;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.report-option:hover {
  background: rgba(94, 234, 212, 0.05);
  border-color: var(--accent);
}
.report-option input[type="radio"] {
  accent-color: var(--accent);
}
.report-option-access {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}
.report-option-access:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--editorial);
}
.report-option-access input[type="radio"] {
  accent-color: var(--editorial);
}
.report-reason {
  width: 100%;
  background: #0b0f14;
  color: var(--fg);
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
  margin-bottom: 12px;
}
.report-reason:focus {
  outline: none;
  border-color: var(--accent);
}
.report-reason:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-reason::placeholder {
  color: var(--muted);
}
.report-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.report-cancel {
  background: transparent;
  color: var(--muted);
  border: 1px solid #1f2937;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.report-cancel:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.report-submit {
  background: #f59e0b;
  color: #000;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.report-submit:hover {
  filter: brightness(1.1);
}
.report-submit:disabled {
  background: rgba(245, 158, 11, 0.3);
  cursor: not-allowed;
}
.report-result {
  margin-top: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 12px;
}

/* Pin "Ask AI" floating chat modal.
   Anchored bottom-right; mirrors the report dialog's look so it feels
   native. Header pinned, log scrolls, input row at the bottom. */
.pin-ai-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--bg, #0b1220);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 10000;
  overflow: hidden;
  font-family: inherit;
}
.pin-ai-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #1f2937);
  background: rgba(94, 234, 212, 0.08);
}
.pin-ai-chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  min-height: 140px;
  max-height: 50vh;
}
.pin-ai-bubble.error {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}
.pin-ai-bubble.pending {
  opacity: 0.6;
  font-style: italic;
}
.pin-ai-chat-form:focus-within {
  box-shadow: inset 0 0 0 1px var(--accent, #5eea2d);
}
.pin-ai-chat-send:hover:not(:disabled) {
  filter: brightness(1.1);
}
.pin-ai-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .pin-ai-chat {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }
}

/* ── Help Me Chat ─────────────────────────────────────────────────────── */
.help-me-chat {
  position: fixed;
  right: 16px;
  bottom: 90px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 75vh;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: 14px;
  box-shadow: 0 16px 60px rgba(255, 107, 53, 0.15), 0 8px 24px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  font-family: inherit;
  touch-action: manipulation;
}
.help-me-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 107, 53, 0.3);
  background: rgba(255, 107, 53, 0.12);
}
.help-me-chat-intro {
  padding: 12px 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  line-height: 1.6;
}
.help-me-chat-intro ul {
  margin: 6px 0 0 16px;
  padding: 0;
}
.help-me-chat-intro li {
  margin-bottom: 4px;
}
.help-me-chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  min-height: 160px;
  max-height: 55vh;
}
.help-me-bubble.error {
  background: rgba(239, 68, 68, 0.2) !important;
}
.help-me-bubble.pending {
  opacity: 0.6;
  font-style: italic;
}
.help-me-chat-form {
  display: flex;
  border-top: 1px solid rgba(255, 107, 53, 0.2);
  background: rgba(255,255,255,0.03);
}
.help-me-chat-form:focus-within {
  background: rgba(255, 107, 53, 0.05);
}
.help-me-chat-input::placeholder {
  color: rgba(255,255,255,0.35);
}
.help-me-chat-input:focus {
  outline: none;
}
@media (max-width: 600px) {
  .help-me-chat {
    right: 8px;
    bottom: 80px;
    width: calc(100vw - 16px);
  }
}

/* ── Help Me Jump to Top Button ──────────────────────────────────── */
.help-me-jump-top {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 107, 53, 0.9);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4);
  z-index: 10;
  white-space: nowrap;
  animation: helpMeJumpIn 0.2s ease-out;
}
.help-me-jump-top:hover {
  background: rgba(255, 107, 53, 1);
}
@keyframes helpMeJumpIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Help Me Floating Button ─────────────────────────────────────── */
#help-me-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5), 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: inherit;
}
#help-me-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.6), 0 4px 12px rgba(0,0,0,0.4);
}
#help-me-btn:active {
  transform: translateY(0) scale(0.98);
}
#help-me-btn .pulse-dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: helpMePulse 2s ease-in-out infinite;
}
@keyframes helpMePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
@media (max-width: 600px) {
  #help-me-btn {
    right: 12px;
    bottom: 12px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Category Discovery Banner */
.category-discovery-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(11, 15, 20, 0.95);
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 500px;
  width: 90%;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: slideUp 0.3s ease-out;
  transition: opacity 0.3s;
}
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.category-discovery-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}
.category-discovery-close:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.1);
}
.category-discovery-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.category-discovery-icon {
  font-size: 24px;
  text-align: center;
}
.category-discovery-text {
  text-align: center;
}
.category-discovery-text strong {
  color: var(--accent);
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.category-discovery-subtitle {
  font-size: 12px;
  color: var(--muted);
}
.category-discovery-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.category-discovery-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.category-discovery-btn.primary {
  background: var(--accent);
  color: #0b0f14;
}
.category-discovery-btn.primary:hover {
  filter: brightness(1.1);
}
.category-discovery-btn.secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.category-discovery-btn.secondary:hover {
  color: var(--fg);
  border-color: var(--fg);
}


/* ══════════════════════════════════════════════════════════════════════
   Responsive overrides.

   Keep these LAST in the file. They carry no extra specificity, so any
   rule declared after them silently wins and the override becomes dead
   code — which is exactly what had happened to the panel rules here.
   ══════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────────
   Mobile / iPad responsive fixes. Triggers at 900px so it covers iPad
   portrait (768px) and most phones in landscape. The control stack is
   already two rows at every width, so this block only tightens the
   buttons and re-tunes the layout bands — every overlay follows the
   bands on its own.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --top-band: 84px;
    /* The stack now spans nearly the full width, so the leaflet zoom +
       globe bar has to drop below it instead of sharing the top-left. */
    --zoom-top: var(--top-band);
    --bottom-band: 156px;  /* search row sits higher, nav row below it */
  }

  #map-controls { top: 8px; }

  /* Icon-button toggles: collapse text labels, stay as compact icons */
  .links-toggle span,
  .wiki-markers-toggle span,
  .coverage-btn span { display: none; }
  .links-toggle,
  .wiki-markers-toggle,
  .coverage-btn { padding: 8px 10px; }

  #time-filter button,
  #mode-toggle button {
    padding: 6px 10px;
    font-size: 11px;
  }
  /* Abbreviate the longer labels so the bar is compact even on phones.
     The original text stays in data-time, so JS logic still sees the same
     identifier — only the visible glyph changes. */
  #time-filter button[data-time="7d"],
  #time-filter button[data-time="30d"],
  #time-filter button[data-time="365d"],
  #time-filter button[data-time="all"] { font-size: 0; }
  #time-filter button[data-time="7d"]::before   { content: "1W";  font-size: 11px; }
  #time-filter button[data-time="30d"]::before  { content: "1M";  font-size: 11px; }
  #time-filter button[data-time="365d"]::before { content: "1Y";  font-size: 11px; }
  #time-filter button[data-time="all"]::before  { content: "All"; font-size: 11px; }

  /* Right column hugs the edge but keeps a 58px left reserve so it never
     crosses the Leaflet zoom bar (which sits at left:10, width 34 touch). */
  .legend         { right: 8px; max-width: calc(100vw - 70px); }
  .links-legend   { right: 8px; }
  .link-panel     { right: 8px; width: calc(100vw - 70px); max-width: 360px; }
  .explore-panel  { right: 8px; max-width: calc(100vw - 70px); }

  /* Live news side panel: collapse by default on mobile unless explicitly opened by user */
  @media (max-width: 768px) {
    .live-panel:not(.user-expanded) {
      transform: translateX(-100%);
      opacity: 0;
      pointer-events: none;
    }
    .live-panel { left: 8px; max-height: 520px; z-index: 700; width: min(320px, calc(100vw - 24px)); }
    .live-panel-reopen { left: 8px; }
  }

  /* Top bar stacks vertically on narrow viewports */
  #top-bar     { top: 8px; max-width: calc(100vw - 16px); }
  #search-bar  { max-width: calc(100vw - 16px); }
  #search-input  { width: 130px; }
  #bottom-bar  { max-width: calc(100vw - 16px); }
  .nav-links     { bottom: 60px; left: 8px; right: auto; gap: 4px; flex-wrap: wrap; max-width: calc(100vw - 16px); }
  .nav-links a   { padding: 6px 8px; font-size: 10px; }
}

/* Phone-only tightening. Below 480px a 6-button time filter is still a
   lot — let the horizontal scroll gesture handle any residual overflow
   but keep the WCAG 44×44 touch-target floor intact. */
@media (max-width: 480px) {
  :root { --top-band: 78px; }
  /* Touch-target floor stays at 44px — only horizontal padding shrinks
     so the row fits a 375 px viewport and scrolls for the rest. */
  #time-filter button,
  #mode-toggle   button { padding: 10px 8px; font-size: 11px; }
  .links-toggle, .wiki-markers-toggle, .coverage-btn, .explore-btn { padding: 10px 8px; }
  #search-input { width: 80px; }
}

/* ── Mobile popup fixes ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .popup-inner {
    width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 120px) !important;
  }
  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 24px) !important;
  }
  .leaflet-popup-content {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .popup-inner {
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 100px) !important;
  }
  .popup-hero { padding: 10px 12px 8px; }
  .popup-title { font-size: 13px !important; }
  .popup-actions { gap: 4px; }
  .popup-actions a,
  .popup-actions button,
  .ask-ai-btn,
  .wrong-loc,
  .report-story,
  .read-more,
  .popup-apply-btn,
  .popup-apply-all,
  .link-add-btn,
  .popup-dismiss-btn {
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* ── Legend: Suggest new category ─────────────────────────────────────── */
.legend-suggest-category {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px dashed #1f2937;
}
.legend-suggest-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legend-suggest-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legend-suggest-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--fg);
  font-size: 11px;
  padding: 6px 8px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.legend-suggest-input:focus {
  border-color: var(--accent);
}
.legend-suggest-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend-suggest-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.legend-suggest-actions {
  display: flex;
  gap: 4px;
}
.legend-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.2);
  color: var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  transition: all 0.15s;
}
.legend-suggest-btn:hover {
  background: rgba(94, 234, 212, 0.15);
  border-color: var(--accent);
}
.legend-suggest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.legend-suggest-feedback {
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}
.legend-suggest-feedback-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.legend-suggest-feedback-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.legend-suggest-feedback-info {
  background: rgba(94, 234, 212, 0.1);
  color: var(--accent);
}

/* ── Status panel: Follow-up AI chat ─────────────────────────────────── */
.status-followup {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #1f2937;
  border-radius: 8px;
}
.status-followup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.status-followup-icon {
  font-size: 14px;
}
.status-followup-log {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.status-followup-log[data-empty="true"] {
  padding: 8px;
}
.status-followup-empty {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.status-followup-empty em {
  color: var(--accent);
  font-style: normal;
}
.status-followup-bubble {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.status-followup-bubble.user {
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.15);
  margin-left: 20px;
}
.status-followup-bubble.assistant {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-right: 20px;
}
.status-followup-bubble.pending {
  opacity: 0.6;
  font-style: italic;
}
.status-followup-bubble.error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.status-followup-role {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.status-followup-text {
  color: var(--fg);
}
.status-followup-text p {
  margin: 0 0 6px 0;
}
.status-followup-text p:last-child {
  margin-bottom: 0;
}
.status-followup-form {
  display: flex;
  gap: 6px;
}
.status-followup-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #1f2937;
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
  padding: 8px 10px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.status-followup-input:focus {
  border-color: var(--accent);
}
.status-followup-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.status-followup-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.status-followup-btn {
  background: var(--accent);
  color: #0b0f14;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  transition: filter 0.15s;
}
.status-followup-btn:hover {
  filter: brightness(1.1);
}
.status-followup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.status-followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.status-followup-chip {
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.15);
  color: var(--accent);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.status-followup-chip:hover {
  background: rgba(94, 234, 212, 0.12);
  border-color: var(--accent);
}
.lang-container {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.lang-switcher-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lang-switcher-wrapper:hover {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
}
.lang-globe-icon {
  font-size: 14px;
  line-height: 1;
}
.lang-switcher {
  appearance: none;
  background: transparent;
  color: var(--fg, #f8fafc);
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0,0l5,6,5-6z' fill='%2338bdf8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.lang-switcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-switcher option {
  background: #0f172a;
  color: #f8fafc;
}

/* ── i18n: RTL support ───────────────────────────────────────────── */
[dir="rtl"] #search-bar {
  flex-direction: row-reverse;
}
[dir="rtl"] #search-input {
  text-align: right;
}
[dir="rtl"] .live-panel {
  left: auto;
  right: 0;
  border-left: 1px solid var(--border, rgba(255,255,255,0.1));
  border-right: none;
}
[dir="rtl"] .live-panel-toggle {
  right: auto;
  left: -20px;
  border-radius: 0 6px 6px 0;
}
[dir="rtl"] .live-panel-tabs {
  flex-direction: row-reverse;
}
[dir="rtl"] #map-controls {
  flex-direction: row-reverse;
}
[dir="rtl"] .lang-switcher {
  background-position: left 6px center;
  padding: 4px 8px 4px 24px;
}


/* ── Command Bar Dropdown (integrated with search bar) ─────────────── */
.cmd-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--panel-bg, rgba(11, 15, 20, 0.95));
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 300px;
  overflow-y: auto;
  margin-top: -1px;
}
.cmd-dropdown[hidden] {
  display: none;
}
.cmd-dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cmd-dropdown-item:last-child {
  border-bottom: none;
}
.cmd-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
}
.cmd-dropdown-label {
  font-size: 13px;
  color: var(--fg, #e2e8f0);
}
.cmd-dropdown-sub {
  font-size: 11px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}
.cmd-dropdown-result {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--fg, #e2e8f0);
  background: rgba(94, 234, 212, 0.06);
  border-radius: 0 0 8px 8px;
}

/* ── Multi-city linked chips ───────────────────────────────────────── */
.city-chip-linked {
  cursor: pointer;
  border: 1px solid rgba(94, 234, 212, 0.3);
  background: rgba(94, 234, 212, 0.08);
  transition: all 0.15s;
}
.city-chip-linked:hover {
  background: rgba(94, 234, 212, 0.2);
  border-color: var(--accent, #5eead4);
  transform: translateY(-1px);
}
.popup-cities-label {
  font-size: 11px;
  color: var(--muted, #64748b);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── System-wide error warning banner ────────────────────────────────── */
.system-wide-error-banner {
  position: fixed;
  top: calc(var(--top-band, 52px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 820px;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.6);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.15);
  padding: 10px 16px;
  color: #f3f4f6;
  font-family: inherit;
  font-size: 13px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.system-error-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.system-error-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 300px;
}

.system-error-icon {
  font-size: 18px;
}

.system-error-text {
  color: #e5e7eb;
  line-height: 1.4;
}

.system-error-text strong {
  color: #f59e0b;
}

.system-error-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-error-btn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.system-error-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #ffffff;
}

.system-error-btn.reload-btn {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.system-error-btn.reload-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  color: #ffffff;
}

.system-error-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.system-error-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}


/* ── City Summary Aggregation Marker Badge ────────────────────── */
.xyzo-city-badge-wrapper {
  background: transparent !important;
  border: none !important;
}
.xyzo-city-badge-marker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #3b82f6;
  border-radius: 16px;
  padding: 3px 10px;
  color: #f8fafc;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
}
.xyzo-city-badge-marker:hover {
  transform: scale(1.08);
  border-color: #38bdf8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.98);
}
.xyzo-city-badge-marker .city-badge-icon {
  font-size: 13px;
}
.xyzo-city-badge-marker .city-badge-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2e8f0;
}
.xyzo-city-badge-marker .city-badge-count {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
}


/* ── Sleek Circular Count Marker Tiers ──────────────────── */
.xyzo-circle-count-wrapper {
  background: transparent !important;
  border: none !important;
}

.xyzo-circle-count-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  user-select: none;
}

.xyzo-circle-count-marker:hover {
  transform: scale(1.18) !important;
}

.xyzo-circle-count-marker .count-val {
  pointer-events: none;
}

/* Tier 1: Low count (2 - 9 articles) — Emerald Green */
.xyzo-circle-count-marker.cluster-tier-low {
  background: linear-gradient(135deg, #059669, #10b981);
  border: 2px solid #34d399;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(52, 211, 153, 0.4);
}
.xyzo-circle-count-marker.cluster-tier-low:hover {
  border-color: #6ee7b7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(52, 211, 153, 0.7);
}

/* Tier 2: Medium count (10 - 49 articles) — Cyan Blue */
.xyzo-circle-count-marker.cluster-tier-medium {
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  border: 2px solid #38bdf8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 12px rgba(56, 189, 248, 0.45);
}
.xyzo-circle-count-marker.cluster-tier-medium:hover {
  border-color: #7dd3fc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(56, 189, 248, 0.75);
}

/* Tier 3: High count (50 - 199 articles) — Amber Orange */
.xyzo-circle-count-marker.cluster-tier-high {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border: 2.5px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(251, 191, 36, 0.5);
}
.xyzo-circle-count-marker.cluster-tier-high:hover {
  border-color: #fde047;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.8);
}

/* Tier 4: Extreme count (200+ articles) — Crimson Red */
.xyzo-circle-count-marker.cluster-tier-extreme {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border: 2.5px solid #f87171;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.6);
  animation: pulseExtremeCluster 2s infinite alternate;
}
.xyzo-circle-count-marker.cluster-tier-extreme:hover {
  border-color: #fca5a5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 24px rgba(239, 68, 68, 0.9);
}

@keyframes pulseExtremeCluster {
  0% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(239, 68, 68, 0.5); }
  100% { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7), 0 0 22px rgba(239, 68, 68, 0.85); }
}

/* ── Location Explorer Modal ──────────────────────────────── */
.location-explorer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: rgba(11, 15, 20, 0.82);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 200ms ease;
}

.loc-explorer-content {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  width: 650px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.loc-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

.loc-explorer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #f8fafc;
}

.loc-explorer-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}

.loc-explorer-close:hover {
  color: #ffffff;
}

.loc-explorer-search {
  padding: 12px 20px;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
}

.loc-explorer-search input {
  width: 100%;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 12px;
  color: #f8fafc;
  font-size: 13px;
  outline: none;
  transition: border-color 150ms ease;
}

.loc-explorer-search input:focus {
  border-color: #38bdf8;
}
.loc-explorer-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.loc-explorer-list {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loc-explorer-card {
  display: flex;
  gap: 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}

.loc-explorer-card:hover {
  background: #334155;
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.loc-item-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.loc-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.loc-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.loc-card-source {
  color: #38bdf8;
  font-weight: 600;
}

.loc-card-time {
  margin-left: auto;
  color: #64748b;
}

.loc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.4;
  margin: 0;
}

.loc-card-link {
  font-size: 11px;
  color: #38bdf8;
  text-decoration: none;
  margin-top: 4px;
  font-weight: 600;
}

.loc-card-link:hover {
  text-decoration: underline;
}

.loc-explorer-empty {
  text-align: center;
  padding: 30px;
  color: #94a3b8;
  font-size: 13px;
}

/* ── Global Hit-Testing & DevTools Inspector Protection ────────────────
   Ensures hidden overlays, banners, and offscreen panels never trap
   pointer events or block browser DevTools inspect element mode.
   Map markers and cluster circles remain 100% clickable and inspectable.
   ────────────────────────────────────────────────────────────────── */

[hidden],
.hidden,
.dismissed,
.category-discovery-banner.dismissed,
.system-wide-error-banner.hidden,
.system-wide-error-banner[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Ensure Leaflet overlay SVG canvas is click-through while keeping interactive vectors clickable */
.leaflet-overlay-pane svg {
  pointer-events: none !important;
}

.leaflet-overlay-pane svg path.leaflet-interactive,
.leaflet-overlay-pane svg circle.leaflet-interactive {
  pointer-events: auto !important;
}

/* Map canvas interactivity — canvas captures mouse events for hit-testing and ghost marker positioning */
.xyzo-canvas-pins {
  pointer-events: auto !important;
}

/* Hover Ghost Marker for Canvas Pins — provides inspectable DOM node & visual feedback */
.xyzo-pin-hover-ghost {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid var(--accent, #5eead4);
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.7);
  background: rgba(94, 234, 212, 0.15);
  transform: translate(-50%, -50%);
  z-index: 1000;
  transition: width 0.08s ease, height 0.08s ease;
}
.xyzo-pin-hover-ghost.hidden {
  display: none !important;
}

/* ── Pointer Cursor & Marker Selection Enforcement ──────────────────────
   Ensure all map markers, cluster circles, popups, and badges are 100%
   selectable in Chrome/Firefox DevTools Inspector (Ctrl+Shift+C).
   ────────────────────────────────────────────────────────────────────────── */

.leaflet-container .leaflet-marker-pane .leaflet-marker-icon,
.leaflet-container .leaflet-marker-pane .leaflet-marker-icon *,
.leaflet-container .leaflet-interactive,
.leaflet-container .circle-cluster,
.leaflet-container .xyzo-circle-count-wrapper,
.leaflet-container .xyzo-circle-count-marker,
.leaflet-container .xyzo-circle-count-marker *,
.leaflet-container .xyzo-pin-wrapper,
.leaflet-container .xyzo-pin-marker,
.leaflet-container .marker-cluster,
.leaflet-container .marker-cluster *,
.leaflet-popup,
.leaflet-popup *,
.leaflet-tooltip,
.leaflet-tooltip * {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === Accessibility: prefers-reduced-motion ============================
   Honors users with vestibular disorders. WCAG 2.3.3 (Animation from
   Interactions). Applied globally so all transitions/animations
   collapse to instant for opted-out users. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable Leaflet tile fade + zoom animations */
  .leaflet-fade-anim .leaflet-tile,
  .leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none !important;
    animation: none !important;
  }
}

/* === Accessibility: skip link ==========================================
   Hidden until focused. The first focusable element on the page jumps
   keyboard users past the toolbar / brand strip to the map app region.
   WCAG 2.4.1 (Bypass Blocks). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent, #5eead4);
  color: #0b0f14;
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--accent, #5eead4);
  outline-offset: 2px;
}