:root {
  --bg: #07091a;
  --bg-panel: #0f1326;
  --bg-elev: #181d35;
  --border: #262c4a;
  --border-strong: #343c62;
  --text: #e8ecf5;
  --text-dim: #8892b4;
  /* Raised from #5a6384 (~3.3:1) to ~4.5:1 against --bg so all small
     text clears WCAG 2.1 AA. Used for counts, timeline labels, modal
     kickers, etc. — anywhere the design wants "subtle, still readable". */
  --text-faint: #7985a8;
  --accent: #4dabf7;
  --accent-dim: #2d5a8a;
  --warn: #ffd43b;
  --danger: #ff6b6b;
  --radius: 8px;
  --sidebar-w: 320px;
  --header-h: 56px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* The [hidden] attribute's default display:none is overridden by any
   author rule that specifies display (our flex/grid panels). Make the
   attribute authoritative so el.hidden = true actually hides. */
[hidden] { display: none !important; }

/* Keyboard focus ring. Most interactive elements have outline: none in
   their own rules (for mouse aesthetics); :focus-visible only paints
   when the browser detects keyboard navigation, so mouse users still
   see the clean look but keyboard users get a reliable focus indicator.
   Scoped broadly and safely via outline so layouts don't shift. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
[role="radio"]:focus-visible,
.info-icon:focus-visible,
.close-btn:focus-visible { outline-offset: 3px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  /* Inputs already have a custom ring via :focus — keep it and
     suppress the default outline offset so they don't double up. */
  outline-offset: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--border);
}

body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "header header"
    "sidebar map";
}

/* Header */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(77,171,247,0.4));
  animation: logo-hover 6s ease-in-out infinite;
}
@keyframes logo-hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1px) rotate(-2deg); }
}
.wordmark { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.wordmark-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text);
}
.wordmark-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.title { font-weight: 600; letter-spacing: 0.02em; }
.stats {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.view-toggle {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.view-btn:hover { color: var(--text); }
.view-btn.active {
  background: var(--accent-dim);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.view-btn svg {
  width: 14px;
  height: 14px;
}
.view-btn.active svg { color: var(--accent); }

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.filter-group { margin-bottom: 22px; }
.filter-group h3 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-group h3 small.hint {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-faint);
}

/* Inputs */
input[type="date"], input[type="search"], input[type="text"], select {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5 L6 8 L9 5' stroke='%238892b4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 30px;
}
input[type="date"] { padding-right: 8px; }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77,171,247,0.2);
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.date-range { display: flex; align-items: center; gap: 6px; }
.date-range input { flex: 1; min-width: 0; }
.date-range .arrow { color: var(--text-faint); font-size: 12px; }

.date-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.date-presets button {
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.date-presets button:hover { color: var(--text); border-color: var(--border-strong); }
.date-presets button.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }

.checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.checkbox-list.scrollable {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.checkbox-list.scrollable::-webkit-scrollbar { width: 4px; }
.checkbox-list.scrollable::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.checkbox-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 -8px;
  user-select: none;
  border-radius: 5px;
  transition: background-color 0.1s;
}
.checkbox-item:hover {
  background-color: rgba(255, 255, 255, 0.035);
}
.checkbox-item:has(input:not(:checked)) {
  opacity: 0.55;
}
.checkbox-item:has(input:not(:checked)):hover {
  opacity: 0.85;
}
.checkbox-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkbox-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
}
.checkbox-item .label { color: var(--text); }
.checkbox-item .count {
  color: var(--text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.checkbox-item .authority {
  grid-column: 2 / -1;
  color: var(--text-faint);
  font-size: 11px;
  margin-top: -2px;
}

.filter-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 20px;
}
.reset-btn {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font: inherit;
  transition: all 0.15s;
  min-height: 36px;
}
.reset-btn:hover { background: var(--border); border-color: var(--border-strong); }

/* "Copy link" icon button, right-aligned next to Reset. On click,
   writes window.location.href to the clipboard and briefly flashes
   a confirmation. Square so it balances the full-width reset visually. */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 36px;
  height: 36px;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.share-btn svg { width: 14px; height: 14px; }
.share-btn span {
  /* Label hidden by default (icon-only); optionally reveal on hover via
     tooltip from title attr. On tablet+ with more room we could grow
     the button to include the label; leaving it icon-only keeps the
     sidebar scannable. */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.share-btn:hover { color: var(--text); border-color: var(--border-strong); }
.share-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(77, 171, 247, 0.12);
}

.about p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}
.about a { color: var(--accent); text-decoration: none; }
.about a:hover { text-decoration: underline; }

/* Map */
#map { grid-area: map; position: relative; background: #000; }
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { opacity: 0.7; }
.mapboxgl-ctrl-group {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
}
.mapboxgl-ctrl-group button {
  filter: invert(0.85);
}

/* Detail panel */
.detail-panel {
  position: absolute;
  right: 16px;
  top: calc(var(--header-h) + 16px);
  width: 380px;
  max-height: calc(100vh - var(--header-h) - 32px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  overflow-y: auto;
  z-index: 5;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all 0.15s;
}
.close-btn:hover { background: var(--bg-elev); color: var(--text); }

.detail-badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--text-dim);
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.detail-panel h2 {
  margin: 0 0 4px;
  /* Sans here for reliable legibility at 20-26px — case titles run
     long and mix proper nouns + dates, where the serif face was
     fragile on phones. Serif is retained for branding + modal h2s. */
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  padding-right: 24px;
  color: var(--text);
}
.detail-date {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.detail-panel h3 {
  margin: 16px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}
.detail-panel p {
  margin: 0;
  line-height: 1.55;
  font-size: 13.5px;
  color: var(--text);
  white-space: pre-wrap;
}

.meta-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.meta-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  font-size: 13px;
  padding: 2px 0;
  gap: 8px;
  align-items: baseline;
}
.meta-row .k {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meta-row .v {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  word-break: break-word;
}
.meta-row .v .shape-icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
  flex-shrink: 0;
}

.detail-panel a#detail-link {
  color: var(--accent);
  text-decoration: none;
  margin-top: 16px;
  display: inline-block;
  font-size: 13px;
}
.detail-panel a#detail-link:hover { text-decoration: underline; }

/* Loading overlay */
.loading-overlay {
  position: absolute;
  inset: var(--header-h) 0 0 var(--sidebar-w);
  background: rgba(7, 9, 26, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.3s;
}
.loading-overlay.hidden { opacity: 0; }
.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--text-dim); font-size: 13px; }

/* Header icon buttons (insights, about, sidebar toggle) */
.header-icon-btn, .sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.header-icon-btn:hover, .sidebar-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.header-icon-btn svg, .sidebar-toggle svg { width: 16px; height: 16px; }
.sidebar-toggle { display: none; }  /* shown on mobile */
#btn-overflow { display: none; }    /* shown on mobile only */

/* Overflow menu popover — anchored to the ⋯ header button. On mobile
   this collapses the Insights / About / Shortcuts icons into a single
   entry point so the header isn't crowded. */
.overflow-menu-popover {
  position: absolute;
  top: calc(var(--header-h) - 4px);
  right: 12px;
  z-index: 12;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  min-height: 44px;
  width: 100%;
}
.overflow-item:hover,
.overflow-item:focus-visible {
  background: var(--bg-elev);
  outline-offset: -2px;
}
.overflow-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Modal dialog common */
.modal-dialog {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: 720px;
  width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  font: inherit;
}
.modal-dialog::backdrop {
  background: rgba(7, 9, 26, 0.65);
  backdrop-filter: blur(4px);
}
.modal-header {
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.modal-header h2 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  padding-right: 24px;
}
.modal-lede {
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  font-size: 14px;
  max-width: 56ch;
}

/* Insights */
.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 32px 32px;
}
.insight-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  min-width: 0;
}
.insight-card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.insight-chart {
  width: 100%;
  height: 140px;
  display: block;
}
.insight-chart .bar { fill: var(--accent); opacity: 0.82; }
.insight-chart .axis text {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-faint);
}
.insight-caption {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 8px;
  line-height: 1.45;
}
.hotspot-list {
  list-style: none;
  counter-reset: hs;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.hotspot-list li {
  counter-increment: hs;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hotspot-list li:last-child { border-bottom: none; }
.hotspot-list li::before {
  content: counter(hs, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.hotspot-list .hs-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.classification-bars, .shape-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.classification-bars .row, .shape-bars .row {
  display: grid;
  grid-template-columns: 16px 72px 1fr auto;
  align-items: center;
  gap: 10px;
}
.classification-bars .bar-track, .shape-bars .bar-track {
  position: relative;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.classification-bars .bar-fill, .shape-bars .bar-fill {
  position: absolute;
  inset: 0;
  right: auto;
  background: var(--accent);
  opacity: 0.75;
  border-radius: 3px;
}
.classification-bars .row .label { font-weight: 500; }
.classification-bars .bar-fill.a { background: #51cf66; }
.classification-bars .bar-fill.b { background: #4dabf7; }
.classification-bars .bar-fill.c { background: #ffd43b; }
.classification-bars .bar-fill.d { background: #ff6b6b; }
.classification-bars .bar-fill.n { background: #8892b4; }
.shape-bars .shape-icon { width: 12px; height: 12px; color: var(--accent); }
.shape-bars .row .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* About */
.about-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 24px 32px 20px;
}
.about-source {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.about-source strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.about-source span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.about-source .tt-source-dot { margin-top: 6px; width: 10px; height: 10px; }
.about-principle {
  padding: 8px 32px 32px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.about-principle strong { color: var(--text); }
.about-principle a { color: var(--accent); text-decoration: none; }
.about-principle a:hover { text-decoration: underline; }

/* Related cases + sparkline inside detail panel */
.detail-related {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.related-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.related-item:hover { border-color: var(--border-strong); transform: translateX(2px); }
.related-item .tt-source-dot { width: 8px; height: 8px; }
.related-item .rel-title {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.related-item .rel-dist {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.detail-sparkline {
  margin-top: 16px;
}
.sparkline-svg {
  width: 100%;
  height: 48px;
  display: block;
}
.sparkline-svg .bar { fill: var(--accent); opacity: 0.45; }
.sparkline-svg .bar.active { fill: var(--warn); opacity: 1; }
.sparkline-caption {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Story tour overlay */
.story-tour {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px 80px;
}
.story-tour::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,9,26,0) 40%, rgba(7,9,26,0.55) 100%);
  pointer-events: none;
}
.story-skip {
  position: absolute;
  top: calc(var(--header-h) + 20px);
  right: 24px;
  pointer-events: auto;
  background: rgba(15, 19, 38, 0.8);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 16px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.15s;
}
.story-skip:hover { color: var(--text); border-color: var(--border-strong); }

.story-card {
  position: relative;
  pointer-events: auto;
  max-width: 540px;
  width: 100%;
  background: rgba(15, 19, 38, 0.94);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 32px 34px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: story-in 0.45s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes story-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.story-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  display: flex;
  gap: 3px;
  padding: 8px 34px 0;
  pointer-events: none;
}
.story-progress span {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.25s;
}
.story-progress span.done { background: var(--accent-dim); }
.story-progress span.active { background: var(--accent); box-shadow: 0 0 8px rgba(77,171,247,0.5); }

.story-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
  margin-top: 10px;
}
.story-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.story-date {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.story-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 11px;
}
.story-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 500;
}
.story-chip .tt-source-dot { width: 7px; height: 7px; }
.story-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.story-btn {
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.story-btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.story-btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.story-btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.story-btn-primary {
  background: var(--accent);
  color: #07091a;
  font-weight: 600;
}
.story-btn-primary:hover { filter: brightness(1.1); }

/* Timeline scrubber */
.timeline {
  position: absolute;
  left: calc(var(--sidebar-w) + 20px);
  right: 20px;
  bottom: 18px;
  z-index: 4;
  display: grid;
  /* play | track-wrap | rolling selector | close
     track-wrap and rolling are both 2-row stacks (label row + 28px
     control). align-items: center makes their two rows line up
     horizontally with each other — "Rolling" sits in the same row
     as "1906", and the button group sits in the same row as the track. */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 14px;
  background: rgba(15, 19, 38, 0.9);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.timeline-play {
  /* Progress ring: conic-gradient background that fills clockwise as
     playback advances. The inner blue pill is painted with ::before so
     the gradient only shows at the edge. JS writes --progress as a % on
     the element; default 0 is an all-blue button (ring invisible). */
  --progress: 0%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(
    var(--text) 0% var(--progress),
    transparent var(--progress) 100%
  );
  color: #07091a;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 0 0 0 rgba(77,171,247,0.5);
  padding: 3px;  /* reserve space for the ring edge */
  position: relative;
  isolation: isolate;
  /* Align the play button vertically with the histogram track (not with
     the whole "labels + track" stack). align-self: end pins the bottom
     to the row's bottom edge (= track bottom); the negative margin pulls
     it down by (play - track) / 2 = 4px so the circle is centered on
     the track's midline, matching the histogram bars visually. */
  align-self: end;
  margin-bottom: -4px;
}
.timeline-play::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  z-index: -1;
  transition: background 0.15s;
}
.timeline-play.playing::before { background: var(--warn); }
.timeline-play:hover { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(77,171,247,0.12); }
.timeline-play svg { width: 16px; height: 16px; }
.timeline-play .icon-pause { display: none; }
.timeline-play.playing .icon-play { display: none; }
.timeline-play.playing .icon-pause { display: block; }
/* The old `.timeline-play.playing { background: var(--warn); }` rule was
   replaced by the ::before pseudo-element, so the outer conic-gradient
   ring stays visible while playing. */

.timeline-track-wrap { min-width: 0; }
.timeline-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.timeline-range-label {
  color: var(--text);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
}
.timeline-track {
  position: relative;
  height: 28px;
  background: var(--bg-elev);
  border-radius: 4px;
  overflow: hidden;
}
.timeline-histogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
  opacity: 0.55;
}
.timeline-histogram span {
  flex: 1 1 0;
  min-width: 0;
  background: var(--accent);
  height: var(--h, 0%);
  transition: background 0.2s;
}
.timeline-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(77, 171, 247, 0.15);
  border-left: 1px solid rgba(77, 171, 247, 0.5);
  border-right: 1px solid rgba(77, 171, 247, 0.5);
  pointer-events: none;
}
.timeline-playhead {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--warn);
  pointer-events: none;
  box-shadow: 0 0 6px var(--warn);
}
.timeline-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  margin: 0;
}
.timeline-handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 30px;
  background: var(--text);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: ew-resize;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.timeline-handle::-moz-range-thumb {
  width: 14px;
  height: 30px;
  background: var(--text);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: ew-resize;
  pointer-events: auto;
}
.timeline-handle::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.timeline-handle::-moz-range-track { background: transparent; height: 100%; }

.timeline-close {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background-color 0.12s;
  /* Match the track's vertical position: close is 28px (same as track),
     so align-self: end lands its center on the track's midline. */
  align-self: end;
}
.timeline-close svg { width: 14px; height: 14px; display: block; }
.timeline-close:hover { color: var(--text); background: var(--bg-elev); }

/* Rolling-window selector: label sits on its own row (same typography
   and height as the "1906" year label above the histogram track) and
   the segmented control sits directly below, matching the track's
   28px height so the whole control lines up visually with track-wrap. */
.timeline-rolling {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}
.rolling-label {
  /* Mirror .timeline-labels: mono 11px, text-dim, tight letter spacing. */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  line-height: 1;
}
.rolling-group {
  display: inline-flex;
  align-items: stretch;
  height: 28px;              /* matches .timeline-track */
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
  box-sizing: border-box;
}
.rolling-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font: 500 11px var(--font-sans);
  padding: 0 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
  line-height: 1;
}
.rolling-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.rolling-btn.active {
  background: var(--accent-dim);
  color: var(--text);
}

.timeline-reopen {
  position: absolute;
  left: calc(var(--sidebar-w) + 20px);
  bottom: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(15, 19, 38, 0.9);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.timeline-reopen:hover { color: var(--text); border-color: var(--border-strong); }
.timeline-reopen svg { width: 14px; height: 14px; color: var(--accent); }

/* Hover tooltip (cluster + point previews) */
.hover-tooltip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: rgba(15, 19, 38, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity 0.12s;
}
.hover-tooltip.visible { opacity: 1; }
.hover-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: inherit;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.tt-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-meta {
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tt-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.tt-cluster-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.tt-cluster-count em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 4px;
}
.tt-shapes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.tt-shape-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-shape-chip svg { width: 10px; height: 10px; opacity: 0.7; }
.tt-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Shape icons in the shape filter */
.checkbox-item .shape-icon {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  flex-shrink: 0;
  opacity: 0.85;
}
.checkbox-item input[type="checkbox"]:checked ~ .shape-icon {
  color: var(--accent);
  opacity: 1;
}
/* Re-align shape filter rows to use the icon slot instead of empty span */
#shape-filters .checkbox-item {
  grid-template-columns: auto auto 1fr auto;
}

/* Source rows: the info-icon hugs the label instead of the count edge.
   Label is auto-sized (shrinks to content), info-icon sits immediately
   after it, and the count is right-aligned in a flex track. The earlier
   1fr-on-label layout pushed info and count together at the far right. */
#source-filters .checkbox-item {
  grid-template-columns: auto auto auto auto 1fr;
}
#source-filters .checkbox-item .count {
  justify-self: end;
}
#source-filters .checkbox-item .authority {
  grid-column: 2 / -1;
}
/* Info icon has a 28x28 clickable area to meet tap-target guidelines
   (was 16x16, too small on touch). The SVG inside stays 13px so the
   visual weight is unchanged; only the invisible hit box grew. */
.info-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
  /* Pull the larger hit area inward so it doesn't nudge the row
     layout — negative margin compensates for the extra padding. */
  margin: -6px 0;
}
.info-icon:hover {
  opacity: 1;
  color: var(--accent);
  background-color: rgba(77, 171, 247, 0.12);
}
.info-icon svg { width: 13px; height: 13px; display: block; }
.info-icon.active {
  opacity: 1;
  color: var(--accent);
  background-color: rgba(77, 171, 247, 0.18);
}

/* Info popover (click-anchored to a source's info icon) */
.info-popover {
  position: absolute;
  z-index: 6;
  max-width: 320px;
  min-width: 260px;
  background: rgba(15, 19, 38, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 16px 18px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  line-height: 1.5;
  animation: info-in 0.14s ease-out;
}
@keyframes info-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.info-popover .close-btn {
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  font-size: 18px;
}
.info-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px;
  margin-bottom: 4px;
}
.info-popover-header strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.info-popover-header .tt-source-dot { width: 10px; height: 10px; }
.info-popover-authority {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.info-popover-description {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.info-popover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.info-popover-meta .info-chip {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
}
.info-popover-meta .info-chip strong { color: var(--text); font-weight: 600; margin-right: 4px; }

/* GEIPAN classification chips — colored A/B/C/D letter + descriptor.
   Grid is checkbox | chip | label (flex) | count (4 columns); the
   former 5th "label-sub" column was removed because it always rendered
   empty and the extra track pushed the count too far right. */
#classification-filters .checkbox-item {
  grid-template-columns: auto auto 1fr auto;
}
.class-chip {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #07091a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.class-chip.a { background: #51cf66; }
.class-chip.b { background: #4dabf7; }
.class-chip.c { background: #ffd43b; }
.class-chip.d { background: #ff6b6b; }
.class-chip.n { background: #8892b4; }

/* Empty state */
.empty-state {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--header-h) / 2);
  transform: translate(-50%, -50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 40px;
  text-align: center;
  max-width: 360px;
  z-index: 4;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.empty-state-icon {
  font-size: 44px;
  color: var(--accent);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: 14px;
}
.empty-state h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--text);
}
.empty-state p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 18px;
}

/* (keymap hint removed — replaced with ? button in header) */

/* Shortcuts dialog */
.shortcuts-dialog {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  font: inherit;
}
.shortcuts-dialog::backdrop {
  background: rgba(7, 9, 26, 0.6);
  backdrop-filter: blur(3px);
}
.shortcuts-dialog h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 16px;
}
.shortcuts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.shortcuts-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
}
.shortcuts-list kbd { flex-shrink: 0; }

/* Tablet: narrower sidebar so the map has more breathing room on
   portrait iPad-class viewports (desktop layout preserved, just less
   of it devoted to chrome). */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 260px; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }  /* bump base so 13px labels feel right on phones */
  body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas: "header" "map";
  }
  .sidebar-toggle { display: inline-flex; }
  .header-icon-btn { width: 36px; height: 36px; }  /* meet 36px tap target */
  .view-toggle .view-btn { padding: 6px 9px; font-size: 12px; min-height: 36px; }
  .wordmark-sub { display: none; }
  .stats { display: none; }  /* reclaim space — count is visible in filter rows */

  /* Individual overflow-collapsed buttons shown only via the menu.
     See also .overflow-menu-popover below. */
  #btn-insights, #btn-about, #btn-shortcuts { display: none; }
  #btn-overflow { display: inline-flex; }

  /* Sidebar becomes a bottom-sheet, off-screen by default */
  .sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 78vh;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% - 44px));
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
    z-index: 6;
    padding: 34px 16px 40px;  /* clear drag handle + OS nav bar */
    overflow: auto;
  }
  .sidebar::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }
  body.sidebar-open .sidebar { transform: translateY(0); }

  .detail-panel {
    width: calc(100vw - 20px);
    max-height: 72vh;
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    padding: 18px 18px 22px;
  }
  .detail-panel h2 { font-size: 20px; }

  /* Timeline now has 4 children (play / track-wrap / rolling / close).
     Keep them on one row at tablet-sized phones; on very narrow phones
     move rolling onto its own row so the histogram isn't crushed. */
  .timeline {
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: 36px 1fr auto auto;
    padding: 10px 12px 12px;
    gap: 10px;
  }
  .timeline-reopen { left: 8px; bottom: 8px; }

  /* When the detail panel or sidebar is open, the timeline collides
     with them at the bottom. Hide both the bar and the reopen pill
     in those states so the bottom edge stays uncluttered. */
  body.detail-open .timeline,
  body.detail-open .timeline-reopen,
  body.sidebar-open .timeline,
  body.sidebar-open .timeline-reopen { display: none; }

  /* Story tour on mobile: full-screen card with generous padding
     so the Skip / Next affordances are reachable. */
  .story-card { padding: 28px 22px 24px; max-width: 100%; }
  .story-title { font-size: 24px; }
  .story-tour {
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-skip { font-size: 14px; padding: 10px 14px; }
  .story-btn { min-height: 44px; }

  .modal-dialog { max-height: 92vh; width: 94vw; }
  .modal-header { padding: 22px 22px 14px; }
  .modal-header h2 { font-size: 22px; padding-right: 40px; }
  .insights-grid, .about-sources { grid-template-columns: 1fr; padding: 16px 22px 24px; gap: 14px; }
  .about-principle { padding: 4px 22px 24px; }

  .keymap-hint { display: none; }
  .empty-state { max-width: 85vw; padding: 24px 22px; }
  .loading-overlay { inset: 0; }
}

/* Very narrow phones: stack rolling onto its own row under the track
   so neither the histogram nor the segmented control gets crushed. */
@media (max-width: 480px) {
  .timeline {
    grid-template-columns: 36px 1fr 28px;
    grid-template-areas:
      "play track close"
      "roll roll  roll";
    row-gap: 8px;
  }
  .timeline-play     { grid-area: play; }
  .timeline-track-wrap { grid-area: track; }
  .timeline-close    { grid-area: close; }
  .timeline-rolling {
    grid-area: roll;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .rolling-label { margin-right: 2px; }
}