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

  /* ── 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; }
#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);
}

#search-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; gap: 6px; background: rgba(11,15,20,0.85);
  border: 1px solid #1f2937; border-radius: 6px; padding: 4px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#search-input {
  background: transparent; color: var(--fg); border: none; outline: none;
  padding: 6px 10px; font: inherit; width: 280px;
}
#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;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
#search-clear {
  background: var(--bg); color: var(--fg); border: 1px solid #1f2937;
}
#search-btn:hover, #search-clear:hover { filter: brightness(1.1); }
#search-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wiki-search-results {
  position: fixed; bottom: 58px; 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;
}
.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;
}
#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; }
/* ── 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; }

/* Both rows share one pill shell. max-width keeps them inside the viewport
   at every size and overflow scrolls instead of wrapping, so the stack is
   always exactly two rows tall and --top-band stays predictable. */
#time-filter,
#mode-toggle {
  display: flex; gap: 0;
  max-width: 100%;
  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);
}
#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;
}
#mode-toggle button:hover { color: var(--fg); }
#mode-toggle button.active {
  background: var(--accent); color: #0b0f14;
}

/* 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-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;
}

/* "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; }
.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: #6b7280; color: #fff;
}
.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 {
  background: #fff; 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; }

/* ── 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. */
.newsium-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;
}
.newsium-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". */
.newsium-conn {
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
}
.newsium-conn:hover {
  stroke-opacity: 1;
  stroke-width: 4;
}

/* Highlighted connection arcs (when user clicks a marker while links are on). */
.newsium-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). */
.newsium-conn-dimmed {
  stroke-opacity: 0.12 !important;
  stroke-width: 1 !important;
}

/* Highlighted marker glow (connected markers). */
.newsium-pin.marker-highlight .pin {
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.8));
}
.newsium-pin.marker-selected .pin {
  filter: drop-shadow(0 0 8px rgba(239,68,68,1)) drop-shadow(0 0 12px rgba(239,68,68,0.5));
}

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

#time-filter button {
  background: transparent; color: var(--muted); border: none;
  padding: 8px 12px; font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border-right: 1px solid #1f2937;
}
#time-filter button:last-child { border-right: none; }
#time-filter button:hover { color: var(--fg); }
#time-filter button.active {
  background: var(--accent); color: #0b0f14;
}
#time-filter button[data-time="custom"] {
  border-left: 1px solid #1f2937;
  font-variant-numeric: tabular-nums;
}
#time-filter button[data-time="custom"].active {
  background: var(--accent); color: #0b0f14;
}
/* 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; }

.leaflet-popup-content-wrapper {
  background: #0b0f14 !important;
  color: var(--fg);
  border: 1px solid #1f2937;
  border-radius: 6px;
}
.leaflet-popup-tip { background: #0b0f14 !important; }
.leaflet-popup-content { margin: 12px 14px; color: var(--fg); }
.leaflet-popup-content h3 { margin: 0 0 6px 0; font-size: 14px; color: var(--fg); }
.leaflet-popup-content h3 a:hover { color: var(--accent); text-decoration: underline; }
.leaflet-popup-content small { color: var(--muted); }
.leaflet-popup-content .badge {
  display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px;
  font-family: ui-monospace, monospace; margin-right: 6px; text-transform: uppercase;
}
.badge.editorial { background: var(--editorial); color: #0b0f14; }
.badge.community { background: var(--community); color: #0b0f14; }
.badge.rss       { background: var(--rss); color: #0b0f14; }
.leaflet-popup-content a { color: var(--accent); }
.leaflet-popup-content button {
  background: #11161d; color: var(--fg); border: 1px solid #1f2937;
  padding: 3px 8px; border-radius: 3px; font-size: 11px; cursor: pointer;
  font-family: ui-monospace, monospace;
}
.leaflet-popup-content button:hover { background: var(--accent); color: #0b0f14; }

/* Fix Location button - red and prominent */
.leaflet-popup-content button.wrong-loc {
  background: #dc2626;
  color: #fff;
  border: 1px solid #ef4444;
  font-weight: 600;
  padding: 4px 10px;
  font-size: 11px;
  transition: all 0.15s;
}
.leaflet-popup-content button.wrong-loc:hover {
  background: #ef4444;
  border-color: #f87171;
  filter: brightness(1.1);
}
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-popup-close-button:hover { color: var(--fg) !important; }
.leaflet-popup-content hr { border: 0; border-top: 1px solid #1f2937; margin: 8px 0; }
.leaflet-popup-content .md-body { color: var(--fg); font-size: 12px; line-height: 1.4; }
.leaflet-popup-content .md-body h1, .leaflet-popup-content .md-body h2, .leaflet-popup-content .md-body h3 { color: var(--accent); margin: 6px 0 4px; }
.leaflet-popup-content .popup-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.leaflet-popup-content .popup-actions a {
  display: inline-block;
  background: #11161d;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  text-decoration: none;
  transition: all 0.15s;
}
.leaflet-popup-content .popup-actions a:hover {
  background: var(--accent);
  color: #0b0f14;
}

/* URL display in popup */
.popup-url {
  margin-top: 6px;
  padding: 4px 0;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-url a {
  color: var(--muted);
  text-decoration: none;
  font-family: ui-monospace, monospace;
  transition: color 0.15s;
}
.popup-url a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* 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;
}
.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;
}
.popup-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

/* City mentions in pin popups */
.leaflet-popup-content .popup-cities {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.leaflet-popup-content .popup-cities-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  margin-bottom: 4px;
}
.leaflet-popup-content .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 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.city-chip:hover { background: rgba(94, 234, 212, 0.18); }
.city-chip-flag { margin-right: 3px; }
.city-chip.nation {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--gold);
  cursor: default;
}

/* Client-side auto-categorize suggestions in pin popups */
.leaflet-popup-content .popup-autobadge {
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.popup-autobadge-place { font-weight: 600; }
.popup-autobadge-cat { color: var(--gold); }
.popup-autobadge-conf {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(94, 234, 212, 0.12);
}
.leaflet-popup-content .popup-apply {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.leaflet-popup-content .popup-apply-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  margin-bottom: 4px;
}
.leaflet-popup-content .popup-apply-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.popup-apply-btn {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.12), rgba(94, 234, 212, 0.04));
  border: 1px solid rgba(94, 234, 212, 0.4);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.popup-apply-btn:hover {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.22), rgba(94, 234, 212, 0.1));
  transform: translateY(-1px);
}
.popup-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.popup-apply-all {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--gold);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  margin-left: auto;
}
.popup-apply-all:hover { background: rgba(245, 158, 11, 0.18); }
.popup-apply-all:disabled { opacity: 0.6; cursor: default; }

/* 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; }

/* Pin debug info */
.pin-debug {
  margin-top: 8px;
  font-size: 11px;
}
.pin-debug summary {
  cursor: pointer;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
  min-height: 24px;
  display: flex;
  align-items: center;
}
.pin-debug summary:hover { color: var(--fg); }
.pin-debug-content {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #1f2937;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}
.pin-debug-content strong {
  color: var(--fg);
}
.pin-debug-content a {
  padding: 2px 0;
  display: inline-block;
}

/* 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-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);
}

/* 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 .newsium-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. */
.newsium-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; }
}
.newsium-pin .pin {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #0b0f14;
  border: 2px solid var(--c, #fff);
  display: flex; align-items: center; justify-content: center;
  color: var(--c, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  position: relative;
}
.newsium-pin .pin svg { display: block; }
.newsium-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(). */
.newsium-pin .pin.cat-conflict    { border-width: 3px; }
.newsium-pin .pin.cat-disaster    { border-width: 3px; }
.newsium-pin .pin.cat-health      { border-width: 3px; }
.newsium-pin .pin.cat-humanitarian{ border-width: 3px; border-style: dashed; }
.newsium-pin .pin.cat-environment { border-style: dashed; }
.newsium-pin .pin.cat-science     { border-style: dashed; }
.newsium-pin .pin.cat-rss         { border-style: dotted; }
.newsium-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;
}
.newsium-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;
}
/* ── 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);
}
.local-article {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 12px;
}
.local-article-place { color: var(--fg); }
.local-article-count { color: var(--muted); font-family: ui-monospace, monospace; }

/* 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-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-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::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; }
.share-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;
}
.share-btn:hover { color: var(--fg); }
.share-btn svg { color: inherit; }
/* Quick-flag button — sits next to Share. 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; }
/* 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-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-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; }

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

/* 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;
}

/* 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::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 story button */
.leaflet-popup-content button.report-story {
  background: #f59e0b;
  color: #000;
  border: 1px solid #fbbf24;
  font-weight: 600;
  padding: 4px 10px;
  font-size: 11px;
  transition: all 0.15s;
}
.leaflet-popup-content button.report-story:hover {
  background: #fbbf24;
  filter: brightness(1.1);
}

/* 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::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;
}

/* 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 { display: none; }
  .links-toggle,
  .wiki-markers-toggle { 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: hugs the left edge. It keeps its 320px width so
     the collapse tab stays reachable and the map stays visible. */
  .live-panel        { left: 8px; max-height: 540px; }
  .live-panel-reopen { left: 8px; }

  /* Bottom row collapses onto a single band so Submit / nav / search
     don't fight each other on a tall narrow viewport. */
  #search-bar    { bottom: 110px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 16px); }
  #search-input  { width: 130px; }
  .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 — drop padding to the bone and let the horizontal scroll gesture
   handle any residual overflow. */
@media (max-width: 480px) {
  :root { --top-band: 78px; }
  #time-filter button,
  #mode-toggle   button { padding: 5px 7px; font-size: 10px; }
  .links-toggle, .wiki-markers-toggle, .explore-btn { padding: 6px 7px; }
  #search-input { width: 80px; }
}

/* ── 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::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::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);
}