/* AtlasPI — Stile interfaccia */

/* ─── A+ design tokens (v6.90 — ADR-006) ───────────────────────
 * Ethic: la palette HSL ambra/ocra evoca pergamena editoriale,
 * non comunica gerarchie coloniali vs indigene. Vedi ETHICS-011.
 * Legacy tokens (--bg-dark, --bg-sidebar, --bg-card, --accent-warm)
 * sono aliased per retro-compat delle ~3000 righe preesistenti.
 */
:root, [data-theme="dark"] {
  /* Backgrounds */
  --bg:         #0f1318;
  --panel:      #151a21;
  --panel-2:    #1b2028;
  --border:     #242a34;

  /* Text */
  --text:       #e9edf2;
  --text-muted: #8a93a0;
  --text-dim:   #6b7380;

  /* Accent (unico — brand ambra editoriale) */
  --accent:     #e8b14a;
  --accent-ink: #1a1208;

  /* Status semantici */
  --confirmed:  #6eb58a;
  --uncertain:  #d4a13a;
  --disputed:   #d57770;

  /* Tipografia */
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Spacing scale (usa selettivo in nuove regole) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 32px;

  /* Legacy aliases (back-compat, non usarli in nuove regole) */
  --bg-dark:        var(--bg);
  --bg-sidebar:     var(--panel);
  --bg-card:        var(--panel-2);
  --bg-card-hover:  #243044;
  --accent-light:   #f0c770;
  --accent-warm:    var(--accent);
  --shadow:         rgba(0,0,0,0.4);
  --leaflet-filter: none;
}

/* ─── Light theme ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #faf8f3;
  --panel:      #ffffff;
  --panel-2:    #f3efe6;
  --border:     #e3dcc9;
  --text:       #1a1a1a;
  --text-muted: #6b6b6b;
  --text-dim:   #9a9a9a;
  --accent:     #b38420;
  --accent-ink: #ffffff;
  --confirmed:  #3a7a5a;
  --uncertain:  #9a7a20;
  --disputed:   #b04a3f;

  /* Legacy aliases */
  --bg-dark:        var(--bg);
  --bg-sidebar:     var(--panel);
  --bg-card:        var(--panel);
  --bg-card-hover:  var(--panel-2);
  --accent-light:   #d4a04a;
  --accent-warm:    var(--accent);
  --shadow:         rgba(0,0,0,0.1);
  --leaflet-filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.9);
}

/* Invert dark map tiles for light mode */
[data-theme="light"] .leaflet-tile-pane {
  filter: var(--leaflet-filter);
}

[data-theme="light"] .leaflet-control-zoom a {
  background: var(--bg-sidebar) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .leaflet-tooltip {
  background: var(--bg-sidebar) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .ethics-box::before { color: var(--disputed); }

[data-theme="light"] kbd {
  background: var(--bg-sidebar);
  border-color: var(--border);
  color: var(--accent);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Header A+ (spec §2 — v6.90) ──────────────────────────────── */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  flex-shrink: 0;
  gap: 16px;
  /* CLS-safe: fixed height avoids reflow durante font-load */
  contain: layout;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0; /* allow year hero to ellipsis-shrink se serve */
}

.header-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#header h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  font-family: var(--font-ui);
}

#header h1 span {
  color: var(--accent);
}

.subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  /* CLS-safe: fixed line-height evita reflow quando i18n cambia testo */
  line-height: 1;
}

.header-separator {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex-shrink: 0;
}

.header-year-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.year-hero {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  /* CLS-safe: fixed min-width per 5-digit year + minus sign ("-4500") */
  min-width: 96px;
  display: inline-block;
  /* no transition on font-size/weight — only color */
  transition: color 0.2s ease;
}

.year-hero-era {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.era-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  margin-left: 4px;
  /* CLS-safe: fixed min-width per la più lunga era ("Age of Discovery") */
  min-width: 140px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 2px;
  background: none;
  border: none;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text);
}

/* More dropdown */
.nav-more {
  position: relative;
  /* reset summary marker */
}

.nav-more-summary {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  cursor: pointer;
}

.nav-more-summary::-webkit-details-marker { display: none; }
.nav-more-summary::marker { content: ''; }

.nav-more[open] .nav-more-summary {
  color: var(--text);
}

.nav-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 6px 24px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1050;
}

.nav-more-item {
  display: block;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
}

.nav-more-item:hover,
.nav-more-item:focus-visible {
  background: var(--panel-2);
}

.nav-more-item--button {
  font-size: 12px;
}

/* Counter pill (spec §2) */
.counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel);
  color: var(--text-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  line-height: 1;
  /* CLS-safe (v6.67): reserve width for "1.034 on map" ~ 90px */
  min-width: 96px;
  box-sizing: border-box;
  justify-content: center;
}

.counter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--confirmed);
  flex-shrink: 0;
  display: inline-block;
}

.counter-value {
  font-family: var(--font-ui);
}

/* ─── A+ A11y & Reduced Motion (spec §7 + §10 — v6.90) ──────────── */

/* Focus-visible globale: outline accent 2px, offset 2px */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="listitem"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Reduced motion: disabilita transizioni + animazioni, preserva CLS-safe
   overrides su .leaflet-tile (fade disattivato, non restored) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Preserva CLS-safe: leaflet-tile resta opacity:1 senza transition */
  .leaflet-tile {
    transition: none !important;
    opacity: 1 !important;
  }
  /* Detail panel slide-in diventa istantaneo */
  .detail-panel {
    transition: none !important;
  }
  /* Play button hover scale rimosso */
  .tb-play-btn:hover,
  .tb-play-btn:active {
    transform: none !important;
  }
  /* Slider thumb scale rimosso */
  .tb-year-slider:hover::-webkit-slider-thumb,
  .tb-year-slider:hover::-moz-range-thumb {
    transform: none !important;
  }
  /* Era-chip hover neutralizzato (già CLS-safe su border-color) */
}

/* Sr-only utility (se non già definita altrove) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keyboard focus su entity-row (già ha :focus-visible via global,
   aggiungo styling specifico) */
.entity-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--panel-2) !important;
}

/* Era chip focus (doppio segnale: underline + outline per daltonici) */
.sb-section .era-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-bottom-color: var(--accent);
}

/* Details summary senza default marker (cross-browser) */
details summary {
  cursor: pointer;
}
details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ''; }

/* Legacy .badge kept for any stragglers during transition */
.badge {
  background: var(--panel-2);
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 0.8em;
  border: 1px solid var(--border);
  color: var(--text-muted);
  min-width: 90px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}

/* ─── Sidebar collapsible sections (spec §3 — v6.90) ────────────── */
.sb-section {
  border-top: 1px solid var(--border);
  /* CLS-safe: no transition su height; open/closed tramite display */
}

.sb-section:first-of-type {
  border-top: none;
}

.sb-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
}

.sb-section__summary::-webkit-details-marker { display: none; }
.sb-section__summary::marker { content: ''; }

.sb-section__label {
  font-weight: 500;
}

.sb-section__chev {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1;
  transition: transform 0.15s ease;
}

.sb-section[open] .sb-section__chev {
  /* Il simbolo ▸ ruota a ▾ via contenuto statico — niente rotation = niente CLS */
}

/* Override chevron content when open: usa ::after per CLS-safety */
.sb-section[open] .sb-section__chev { color: var(--accent); }

.sb-section__summary:hover .sb-section__label,
.sb-section__summary:focus-visible .sb-section__label {
  color: var(--text);
}

.sb-section__body {
  padding: 2px 4px 14px 4px;
}

/* Nude fieldset (rimuove stili fieldset default quando wrapped in details) */
.filter-control--naked {
  padding: 0;
  border: none;
  min-height: auto !important; /* override v6.67 min-heights qui; il contenitore details le ha ereditate */
}

/* ─── Era chips A+ (spec §3 — underline editorial) ──────────────── */
.sb-section .era-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 0;
}

.sb-section .era-chip {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  /* ETHICS: v6.91 post-audit (pattern diverso da v6.67 documentato qui).
   * Il pattern CLS-safe originale v6.67 usava pseudo-element `::after` con
   * border perché era-chip allora avevano background pillola che cambiava
   * su active. Il redesign A+ usa underline editorial (1.5px solid
   * transparent → var(--accent) on active). Border-bottom è SEMPRE presente
   * (1.5px transparent) quindi lo spazio è RISERVATO: il cambio da
   * transparent a var(--accent) NON produce reflow.
   * Transition solo su `color` — NO transition su border-*-color (il cambio
   * di color-only sul border è compositato dal browser ma fragile su device
   * lenti: meglio nessuna transition che shift potenziale).
   */
  border-bottom: 1.5px solid transparent;
  padding: 4px 6px 6px;
  cursor: pointer;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.2;
  transition: color 0.12s ease;
}

.sb-section .era-chip::after {
  /* v6.91: il pseudo-element legacy v6.67 non è più necessario con il
   * pattern border-bottom transparent (spazio già riservato in main box).
   * Neutralizzato esplicitamente per evitare conflict con global era-chip
   * rules che aggiungono ::after con content per stili diversi.
   */
  content: none !important;
}

.sb-section .era-chip:hover {
  color: var(--text);
}

.sb-section .era-chip.active,
.sb-section .era-chip:focus-visible {
  color: var(--accent);
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-serif);
  border-bottom-color: var(--accent);
  letter-spacing: 0.3px;
}

.sb-section .era-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Status rows A+ (spec §3) ──────────────────────────────────── */
.sb-section .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 3px;
}

.status-row:hover {
  background: var(--panel-2);
}

.status-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.status-row input[type="checkbox"]:checked {
  background: currentColor;
}

.status-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 4px;
  height: 7px;
  border: solid var(--panel);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.status-row--confirmed  { color: var(--confirmed); }
.status-row--uncertain  { color: var(--uncertain); }
.status-row--disputed   { color: var(--disputed); }

.status-row__label {
  color: var(--text);
  font-weight: 400;
  font-size: 12px;
}

.status-row:hover .status-row__label,
.status-row:focus-within .status-row__label {
  color: var(--text);
}

/* ─── Entity list "On map" (spec §3) ────────────────────────────── */
.on-map-section {
  border-top: 1px solid var(--border);
  padding: 12px 0 14px 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.on-map-section__header {
  padding: 0 4px 8px 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.on-map-section__count {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.entity-row {
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-ui);
  /* CLS-safe: no transition su dimensions — only background+color */
  transition: background 0.12s ease, color 0.12s ease;
  color: var(--text);
  /* Override .result-card legacy: rimuove border-left, background di default */
  background: transparent !important;
  border-left: none !important;
  margin-bottom: 2px !important;
}
.entity-row.uncertain,
.entity-row.disputed,
.entity-row.confirmed {
  /* annulla border-left-color legacy */
  border-left: none !important;
}

.entity-row:hover {
  background: var(--panel-2);
}

.entity-row--selected {
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.entity-row .swatch {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  /* background-color set inline per-entity: hsl(hue, 55%, 55%) */
}

.entity-row .entity-row__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-row .range {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-family: var(--font-ui);
}

/* Main layout — key fix: no overlap */
#app {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* Sidebar — fixed width, never overlapped */
#sidebar {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 100;
  flex-shrink: 0;
}

.controls {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* v6.67 WIP-11: contain:strict aveva ridotto la larghezza a 28px (bug).
     Rollback a contain:layout + overflow:hidden (meno aggressivo ma
     funzionale). L'altezza fissa 1243px resta per evitare reflow. */
  contain: layout;
  overflow: hidden;
}

.search-box {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.search-box input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.85em;
  outline: none;
  transition: border-color 0.2s;
}

.search-box input:focus { border-color: var(--accent); }

.search-box button {
  padding: 7px 10px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  color: #000;
  font-weight: 600;
  transition: background 0.15s;
}

.search-box button:hover { background: var(--accent-light); }

.year-control {
  margin-bottom: 12px;
  /* v6.67 WIP-11: contain:layout su .year-control isola internal changes
     (es. era-chips wrap change su i18n) dal resto della sidebar. */
  contain: layout;
}

.year-control > label { font-size: 0.82em; color: var(--text-muted); display: block; margin-bottom: 4px; }

.year-input-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.year-input-row input[type="number"] {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--accent);
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.year-input-row input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.year-input-row input[type="number"]:focus { border-color: var(--accent); }

.year-input-row select {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.82em;
  outline: none;
}

.year-go-btn {
  padding: 5px 10px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
}

.year-go-btn:hover { background: var(--accent-light); }

#year-slider {
  width: 100%;
  margin: 2px 0;
  accent-color: var(--accent);
  height: 4px;
}

.year-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.68em;
  color: var(--text-muted);
}

.year-range #year-display { color: var(--accent); font-weight: 600; font-size: 1.1em; }

.year-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.year-presets button {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.year-presets button:hover { border-color: var(--accent); color: var(--text); }

/* v6.50: era chips — narrative preset buttons with emoji */
.era-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/*
 * v6.67 CLS-fix: .era-chip usava transition:all che includeva border-color,
 * background, color, box-shadow, tutti non compositabili. Chrome trace
 * ne segnalava TARGET_HAS_INVALID_COMPOSITING_STATE con shift score 0.48.
 * Soluzione: separare transizioni compositable (transform, opacity) da quelle
 * lente ma necessarie (color/background limitate a valori che non alterano
 * il bounding box). Il bordo colorato al hover e' renderizzato come pseudo
 * ::after overlay — nessuna modifica di layout, nessun CLS.
 */
.era-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated, rgba(255,255,255,0.02));
  color: var(--text-muted);
  font-size: 0.72em;
  cursor: pointer;
  /* Solo transform + opacity (compositable) */
  transition: transform 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Necessario per poter posizionare lo pseudo ::after */
  position: relative;
}

/* Overlay bordo accent renderizzato come pseudo-element: appare al hover
   senza triggerare il layout ricalcolo delle dimensioni del chip. */
.era-chip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.15s ease;
}

.era-chip:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.era-chip:hover::after {
  border-color: var(--accent);
}

.era-chip.active {
  background: var(--accent);
  color: white;
}

.era-chip.active::after {
  border-color: var(--accent);
}

/* v6.50: Ask Claude button */
/* v6.67 CLS-fix: transition:all allargato a tutte le proprieta' — restretto
   a transform + box-shadow (compositabili). */
.ask-claude-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #d97757 0%, #c8663d 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ask-claude-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(217, 119, 87, 0.4);
}

/* v6.50: onboarding overlay */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.onboarding-card {
  background: var(--bg-card, #1c2333);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  padding: 28px 24px;
  color: var(--text);
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.onboarding-card h2 {
  color: var(--accent);
  font-size: 1.3em;
  margin-bottom: 6px;
}

.onboarding-card .sub {
  color: var(--text-muted);
  font-size: 0.9em;
  margin-bottom: 18px;
}

.onboarding-step {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.onboarding-step .num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
}

.onboarding-step .body {
  flex: 1;
  font-size: 0.9em;
  line-height: 1.45;
}

.onboarding-step .body strong { color: var(--accent); }

.onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.onboarding-actions button {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-actions button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.onboarding-actions button:hover { border-color: var(--accent); color: var(--text); }
.onboarding-actions button.primary:hover { opacity: 0.9; color: white; }

/* v6.51+v6.57: sidebar collapse toggle — ALWAYS visible (even when app collapsed) */
.sidebar-toggle {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.85em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  /* v6.57 audit fix: defensive — ensure toggle stays visible after collapse */
  display: inline-flex !important;
  visibility: visible !important;
}
.sidebar-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}
.sidebar-toggle-icon {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Sidebar collapsed state — hidden, map fills full width */
#app.sidebar-collapsed #sidebar {
  transform: translateX(-100%);
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
  overflow: hidden;
}
#app.sidebar-collapsed #map-container {
  margin-left: 0;
  flex: 1 1 auto;
}
#app.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

#sidebar {
  transition: transform 0.25s ease, width 0.25s ease;
}
#map-container {
  transition: margin-left 0.25s ease, flex 0.25s ease;
}

/* Mobile: sidebar hidden by default */
@media (max-width: 768px) {
  #app #sidebar {
    position: absolute;
    z-index: 999;
    height: 100%;
    background: var(--bg-card, #1c2333);
    box-shadow: 2px 0 8px rgba(0,0,0,0.4);
  }
  #app:not(.sidebar-mobile-open) #sidebar {
    transform: translateX(-100%);
  }
}

/* v6.51: event markers inside mini-timeline (rendered on canvas,
   no CSS needed — see drawMiniTimeline updates) */

.filter-control { margin-bottom: 10px; }
.filter-control > label { font-size: 0.82em; color: var(--text-muted); display: block; margin-bottom: 3px; }

.checkbox-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.checkbox-group label {
  font-size: 0.78em;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.btn-secondary {
  width: 100%;
  padding: 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78em;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-secondary:hover { border-color: var(--accent); color: var(--text); }

/* Data quality banner */
.data-banner {
  padding: 8px 14px;
  background: rgba(210, 153, 34, 0.1);
  border-bottom: 1px solid rgba(210, 153, 34, 0.3);
  font-size: 0.72em;
  color: var(--accent-warm);
  line-height: 1.4;
  flex-shrink: 0;
  /* v6.67 CLS-fix WIP-5: il banner viene RISCRITTO da i18n.js (linea 316
     in js/i18n.js) con un testo piu' corto dopo ~200ms, causando shrink
     dell'altezza e quindi shift di .controls sottostante.
     Soluzione: fissare l'altezza (matching post-i18n) + overflow hidden. */
  height: 82px;
  box-sizing: border-box;
  overflow: hidden;
}

.data-banner strong { color: var(--accent-warm); }

/* Results list */
.results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  min-height: 0;
}

.placeholder { text-align: center; color: var(--text-muted); padding: 20px; font-size: 0.85em; }

.results-count {
  text-align: center;
  font-size: 0.72em;
  color: var(--text-muted);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.result-card {
  padding: 8px 10px;
  margin-bottom: 4px;
  background: var(--bg-card);
  border-radius: 6px;
  cursor: pointer;
  border-left: 3px solid var(--confirmed);
  transition: background 0.15s;
}

.result-card:hover { background: var(--bg-card-hover); }
.result-card.uncertain { border-left-color: var(--uncertain); }
.result-card.disputed { border-left-color: var(--disputed); }

.result-card .name { font-weight: 600; font-size: 0.88em; }
.result-card .meta {
  font-size: 0.72em;
  color: var(--text-muted);
  margin-top: 2px;
}

.result-card .score-bar {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin-top: 4px;
}

.result-card .score-fill {
  height: 100%;
  border-radius: 1px;
  background: var(--confirmed);
}

/* Precision badge on cards */
.precision-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.65em;
  font-weight: 600;
  margin-left: 4px;
}

.precision-tag.approx {
  background: rgba(210,153,34,0.2);
  color: var(--uncertain);
}

/* Map — takes remaining space, never overlaps sidebar */
#map-container {
  flex: 1;
  position: relative;
  min-width: 0;
  z-index: 1;
}

#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Map control buttons */
.map-control-btn {
  position: absolute;
  z-index: 10;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.map-control-btn:hover { color: var(--accent); border-color: var(--accent); }

#map-fullscreen { top: 10px; right: 10px; }
.map-fit-btn { top: 48px; right: 10px; }

/* Fullscreen mode */
#map-container.fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
}

#map-container.fullscreen #map-fullscreen { top: 10px; right: 10px; }

/* Map overlay info */
.map-info-overlay {
  position: absolute;
  bottom: 30px;
  left: 10px;
  background: rgba(22,27,34,0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.72em;
  color: var(--text-muted);
  z-index: 10;
  max-width: 240px;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}

/* Detail panel — overlays map only, not sidebar */
.detail-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  max-width: calc(100% - 320px);
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  z-index: 50;
  transition: transform 0.25s ease;
  box-shadow: -4px 0 20px var(--shadow);
}

.detail-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
  box-shadow: none;
}

.close-btn {
  position: sticky;
  top: 0;
  float: right;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.2em;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.close-btn:hover { color: var(--disputed); border-color: var(--disputed); }

/* ─── Detail panel A+ editorial typography (spec §6 — v6.90) ────
 * Spec: Playfair italic 22px per name_original, 11px per Latin name,
 * K/V con label uppercase 9.5px tabular-nums.
 */
.detail-panel h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.detail-panel .lang-tag {
  display: inline-block;
  background: var(--panel-2);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.detail-latin-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  line-height: 1.3;
  font-weight: 400;
}

/* Life timeline (spec §6) — barra 2px con entità + dot anno corrente */
.life-timeline {
  margin: 14px 0;
  padding: 8px 0 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.life-timeline__bar {
  position: relative;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin: 4px 0;
}
.life-timeline__span {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 1px;
  /* background set inline: hsl(hue, 55%, 55%) */
}
.life-timeline__dot {
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--panel);
  transform: translateX(-50%);
}
.life-timeline__labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui);
  letter-spacing: 0.4px;
  padding-top: 2px;
}
.life-timeline__labels .period {
  color: var(--text);
  font-weight: 500;
}

.detail-section {
  margin-bottom: 14px;
}

.detail-section h3 {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  font-weight: 600;
}

.detail-section p, .detail-section li {
  font-size: 0.82em;
  line-height: 1.5;
}

.detail-section ul { list-style: none; padding: 0; }
.detail-section li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72em;
  font-weight: 600;
}

.status-badge.confirmed { background: rgba(63,185,80,0.15); color: var(--confirmed); border: 1px solid rgba(63,185,80,0.3); }
.status-badge.uncertain { background: rgba(210,153,34,0.15); color: var(--uncertain); border: 1px solid rgba(210,153,34,0.3); }
.status-badge.disputed { background: rgba(248,81,73,0.15); color: var(--disputed); border: 1px solid rgba(248,81,73,0.3); }

.confidence-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin-top: 4px;
}

.confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.ethics-box {
  background: rgba(248,81,73,0.06);
  border: 1px solid rgba(248,81,73,0.2);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8em;
  line-height: 1.5;
}

.ethics-box::before {
  content: "NOTA ETICA";
  display: block;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--disputed);
  margin-bottom: 4px;
}

.change-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.change-type.CONQUEST_MILITARY { background: rgba(248,81,73,0.2); color: #ff8080; }
.change-type.COLONIZATION { background: rgba(188,140,255,0.2); color: #d2a8ff; }
.change-type.TREATY { background: rgba(88,166,255,0.2); color: #79c0ff; }
.change-type.REVOLUTION { background: rgba(210,153,34,0.2); color: #e3b341; }
.change-type.LIBERATION { background: rgba(63,185,80,0.2); color: #56d364; }
.change-type.ETHNIC_CLEANSING { background: rgba(248,81,73,0.35); color: #ff6b6b; }
.change-type.GENOCIDE { background: rgba(248,81,73,0.4); color: #ff5555; }
.change-type.CESSION_FORCED { background: rgba(210,153,34,0.2); color: #e3b341; }
.change-type.UNKNOWN { background: rgba(139,148,158,0.2); color: #8b949e; }

/* Boundary precision indicator in detail */
.boundary-notice {
  background: rgba(210,153,34,0.1);
  border: 1px solid rgba(210,153,34,0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75em;
  color: var(--accent-warm);
  margin-top: 6px;
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  font-size: 0.72em;
  z-index: 1000;
  flex-shrink: 0;
}

.legend { display: flex; gap: 14px; }
.legend-item { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.confirmed { background: var(--confirmed); }
.dot.uncertain { background: var(--uncertain); }
.dot.disputed { background: var(--disputed); }

.footer-note { color: var(--text-muted); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* Leaflet overrides for dark theme */
.leaflet-control-zoom a {
  background: var(--bg-sidebar) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.leaflet-control-attribution {
  background: rgba(13,17,23,0.8) !important;
  color: var(--text-muted) !important;
  font-size: 0.65em !important;
}

.leaflet-control-attribution a { color: var(--accent) !important; }

.leaflet-tooltip {
  background: var(--bg-sidebar) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 0.82em !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
}

.leaflet-tooltip-top:before { border-top-color: var(--border) !important; }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--border) !important; }

/* ─── Nuovi componenti v2 ────────────────────────────────────── */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* API docs link */
.api-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-right: 10px;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.api-link:hover { background: var(--bg-card); border-color: var(--accent); }

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1em;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 6px;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--text); }

/* Fieldset reset */
fieldset.filter-control {
  border: none;
  padding: 0;
  margin: 0 0 10px;
  /* v6.67 CLS-fix WIP-6: i fieldset crescono in altezza durante il caricamento
     async delle chip-group interne. Pre-riservo l'altezza finale misurata
     live su prod. Il :nth-of-type()-based pattern funziona perche' i fieldset
     sono in ordine fisso Status/Region/Type/Overlay. */
}

/* v6.67 WIP-11: fieldset con min-height per evitare crescita oscillante
   al caricamento chip-group. contain:layout isola internal shifts senza
   l'effetto-bug di contain:size/strict (che riduceva width a 28px).
   NO height fissa — il fieldset si adatta al contenuto naturalmente,
   ma non puo' scendere sotto il min-height. */

.controls fieldset.filter-control {
  min-height: 88px;
  contain: layout;
}

/* 1a: Status (3 checkbox, 88px finale) */
.controls fieldset.filter-control:nth-of-type(1) {
  min-height: 88px;
}

/* 2a: Region (legend + #continent-chips 90px = 110px) */
.controls fieldset.filter-control:nth-of-type(2) {
  min-height: 110px;
}

/* 3a: Type (legend + #type-chips 180px = 200px) */
.controls fieldset.filter-control:nth-of-type(3) {
  min-height: 200px;
}

/* overlay-control: min-height 243px (evita oscillazione durante render) */
fieldset.filter-control.overlay-control {
  min-height: 243px;
  contain: layout style;
}

fieldset.filter-control legend {
  font-size: 0.82em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* Skeleton loader */
.skeleton-loader {
  padding: 8px;
  /* v6.67: riserva spazio verticale per evitare CLS quando la lista risultati
     carica dal primo fetch /v1/entities (3 card × 60px + gap ≈ 198px). */
  min-height: 198px;
}

/*
 * v6.67 CLS-fix:
 * La vecchia shimmer animava background-position — NON compositabile, forza
 * paint/layout ogni frame e conta come layout-shift quando il browser decide
 * il reflow. Riscritta con pseudo-element + transform: translateX che il
 * compositor muove sul GPU layer senza toccare il layout tree principale.
 */
.skeleton-card {
  height: 60px;
  margin-bottom: 6px;
  background: var(--bg-card);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  /* Indica al browser di promuovere a layer compositato — riduce paint churn. */
  will-change: transform;
  contain: strict;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bg-card-hover) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer-gpu 1.5s infinite;
  /* Strict compositing hint */
  will-change: transform;
}

@keyframes shimmer-gpu {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Retrocompatibilità: l'animazione storica "shimmer" resta disponibile ma
   mappata sulla versione GPU (evita regressioni se referenziata altrove). */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Detail spinner */
.detail-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error toast */
.error-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(248,81,73,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: opacity 0.3s;
}

.error-toast.hidden { opacity: 0; pointer-events: none; }

.error-toast button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0 4px;
}

/* Sidebar toggle (mobile) */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 52px;
  left: 8px;
  z-index: 200;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Chip group (type filter) */
/*
 * v6.67 CLS-fix: continent-chips e type-chips partono con un solo chip
 * "Tutti" (placeholder) e poi ricevono ~9 continenti / ~29 tipi dopo il
 * fetch. Misurato live via getBoundingClientRect:
 * - #type-chips dopo load: 752px (29 chip)
 * - #continent-chips dopo load: 236px (9 chip)
 *
 * Senza riserva, la sidebar faceva reflow di +700px causando CLS 0.29+.
 * Soluzione: fissare altezza dei contenitori + overflow-y:auto (scroll
 * interno). UX: l'utente scorre tra i chip; visivamente e' un selettore
 * compatto. Zero CLS.
 */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 46px;
  align-content: flex-start;
}

/* Type chips: 29 entita', altezza fissa 180px + scroll interno. */
#type-chips {
  height: 180px;
  max-height: 180px;
  min-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Continent chips: 9 entita', altezza fissa 90px. */
#continent-chips {
  height: 90px;
  max-height: 90px;
  min-height: 90px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#type-chips::-webkit-scrollbar,
#continent-chips::-webkit-scrollbar { width: 4px; }
#type-chips::-webkit-scrollbar-track,
#continent-chips::-webkit-scrollbar-track { background: transparent; }
#type-chips::-webkit-scrollbar-thumb,
#continent-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/*
 * v6.67 CLS-fix: .chip (continenti, tipi) aveva transition:all che coinvolgeva
 * border-color e background — entrambi non compositabili. Refactor con
 * pseudo-element ::after per il ring colorato e transition mirata.
 */
.chip {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72em;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.chip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.15s ease;
}

.chip:hover { color: var(--text); }
.chip:hover::after { border-color: var(--accent); }

.chip.active {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.chip.active::after { border-color: var(--accent); }

/* Sort control */
.sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.sort-control label {
  font-size: 0.82em;
  color: var(--text-muted);
  white-space: nowrap;
}

.sort-control select {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.8em;
  outline: none;
}

.sort-control select:focus { border-color: var(--accent); }

/* Stats bar */
.stats-bar {
  display: flex;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.7em;
  color: var(--text-muted);
  flex-wrap: wrap;
  flex-shrink: 0;
  /* v6.67 CLS-fix: riserva 32px (singola riga) + padding = 44px totali.
     Prima l'altezza passava da 0 → ~44px quando /v1/entities rispondeva (190ms),
     causando layout-shift sul sidebar e sulla lista sotto. */
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stat-value { color: var(--accent); font-weight: 600; }

/* ─── Timeline bar A+ (spec §4 — v6.90) ─────────────────────────
 * Bottom bar 60px fissi con play + slider + era ticks + year display.
 * CLS-safe: height fissa, era-ticks absolute-positioned (no reflow).
 * Legacy #timeline-chart canvas rimosso (vedi ETHICS-011).
 */
.timeline-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  /* CLS: altezza fissa evita reflow durante font-load */
  contain: layout;
}

.tb-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  transition: transform 0.12s ease;
}

.tb-play-btn:hover { transform: scale(1.06); }
.tb-play-btn:active { transform: scale(0.96); }
.tb-play-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tb-play-btn.playing::before { content: '\275A\275A'; letter-spacing: -2px; }

.tb-year-start,
.tb-year-end {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.6px;
  flex-shrink: 0;
  line-height: 1;
  /* CLS-safe min-widths */
  min-width: 48px;
  text-align: center;
}

.tb-slider-wrap {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 30px;
  display: flex;
  align-items: center;
}

.tb-era-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
}

.tb-era-ticks .era-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1;
  user-select: none;
}

.tb-era-ticks .era-tick--active {
  color: var(--accent);
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-serif);
}

/* Year slider (spec §4) — thumb 14×14, double shadow */
.tb-year-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0;
}

.tb-year-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.tb-year-slider::-moz-range-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.tb-year-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px rgba(232,177,74,0.3);
  /* transition solo su transform per hover (CLS-safe) */
  transition: transform 0.12s ease;
}

.tb-year-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px rgba(232,177,74,0.3);
  transition: transform 0.12s ease;
}

.tb-year-slider:hover::-webkit-slider-thumb { transform: scale(1.1); }
.tb-year-slider:hover::-moz-range-thumb { transform: scale(1.1); }
.tb-year-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--accent);
}

.tb-year-input-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tb-year-input {
  width: 64px;
  height: 24px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  text-align: right;
  -moz-appearance: textfield;
}
.tb-year-input::-webkit-outer-spin-button,
.tb-year-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tb-year-era,
.tb-play-speed {
  height: 24px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 10.5px;
  font-family: var(--font-ui);
  padding: 0 6px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.tb-year-go {
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}
.tb-year-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tb-year-display-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  /* CLS-safe: reserve width for "-4500" BCE pattern */
  min-width: 62px;
  justify-content: flex-end;
}

.tb-year-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tb-year-display-era {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

/* Main layout needs to reserve space for timeline bar */
#app {
  padding-bottom: 60px;
}
#map-container { padding-bottom: 0; }

/* Print styles: hide timeline-bar controls */
@media print {
  .timeline-bar { display: none !important; }
}

/* ─── Responsive ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  #sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }

  .detail-panel {
    width: 340px;
    max-width: calc(100% - 280px);
  }

  .subtitle { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }

  #sidebar {
    position: fixed;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    z-index: 150;
    transform: translateX(0);
    transition: transform 0.25s ease;
  }

  #sidebar.collapsed {
    transform: translateX(-100%);
  }

  #map-container { width: 100%; }

  .detail-panel {
    width: 100%;
    max-width: 100%;
  }

  #header {
    padding: 6px 12px;
  }

  #header h1 { font-size: 1em; }

  footer {
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px;
    font-size: 0.68em;
  }

  .legend { flex-wrap: wrap; gap: 8px; }

  /* Touch-friendly targets */
  .result-card { padding: 12px; min-height: 44px; }
  .search-box input { padding: 10px 12px; }
  .search-box button { padding: 10px 14px; }
  .checkbox-group label { padding: 4px 0; min-height: 44px; }
}

/* ─── v4.6: Collapsible sections ────────────────────────────── */

.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.15s;
}

.collapsible:hover { color: var(--accent); }
.collapsible:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.collapse-icon {
  font-size: 0.7em;
  transition: transform 0.2s;
}

.detail-section .section-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 1;
}

.detail-section.collapsed .section-body {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* Keyboard navigation */
.result-card.keyboard-focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg-card-hover);
}

/* Type icons in results */
.type-icon {
  font-size: 0.9em;
  margin-right: 2px;
}

/* Contemporaries items */
.contemporary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.85em;
}

.contemporary-item:hover { background: var(--bg-card-hover); }
.contemporary-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Share button */
.detail-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.btn-share {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-share:hover { border-color: var(--accent); color: var(--accent); }

/* Keyboard help table */
.kbd-table {
  width: 100%;
  font-size: 0.85em;
}

.kbd-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.kbd-table td:first-child { text-align: right; width: 40%; }

kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85em;
  font-family: monospace;
  color: var(--accent);
}

/* Boundary notice variants */
.boundary-notice.real-notice {
  border-color: rgba(63,185,80,0.3);
  background: rgba(63,185,80,0.08);
  color: var(--confirmed);
}

/* ─── v5.0: Playback & Compare ──────────────────────────────── */

.playback-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.play-btn {
  width: 32px;
  height: 28px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.9em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn:hover { border-color: var(--accent); background: var(--bg-card); }
.play-btn.playing { background: var(--accent); color: #000; border-color: var(--accent); }

.play-speed {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 0.72em;
  outline: none;
}

/* Compare mode */
.compare-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.compare-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.compare-card h4 {
  font-size: 0.9em;
  margin-bottom: 8px;
  color: var(--text);
}

.compare-card .compare-stat {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.78em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.compare-card .compare-stat .label { color: var(--text-muted); }
.compare-card .compare-stat .value { color: var(--accent); font-weight: 600; }

.compare-overlap {
  text-align: center;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
}

.compare-overlap .overlap-value {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--accent);
}

.btn-compare {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-compare:hover { border-color: var(--accent); color: var(--accent); }

.result-card.compare-candidate {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  cursor: crosshair;
}

.result-card.compare-candidate:hover {
  background: rgba(88,166,255,0.1);
}

/* ─── v5.5: Enhanced detail panel ───────────────────────────── */

/* Detail tags row */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 0 12px;
}

.continent-tag {
  display: inline-block;
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72em;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Info grid in detail panel */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82em;
}

.info-item:last-child { border-bottom: none; }

.info-label {
  color: var(--text-muted);
  font-size: 0.88em;
}

.info-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.geo-micro {
  font-size: 0.8em;
  color: var(--text-muted);
  font-weight: 400;
}

/* Geo coordinates in reliability section */
.geo-coords {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(88,166,255,0.06);
  border-radius: 4px;
  border: 1px solid rgba(88,166,255,0.12);
}

/* Enhanced sources list */
.sources-list {
  list-style: none;
  padding: 0;
}

.source-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.source-item:last-child { border-bottom: none; }

.source-icon {
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 1px;
}

.source-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.source-citation {
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--text);
}

.source-type-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(88,166,255,0.12);
  color: var(--accent);
  width: fit-content;
}

/* Map scroll hint overlay */
.map-scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(22,27,34,0.9);
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.82em;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}

.map-scroll-hint.visible { opacity: 1; }

/* ─── v5.6: Search autocomplete dropdown ──────────────────── */

.search-box {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 500;
  box-shadow: 0 8px 24px var(--shadow);
  display: none;
}

.autocomplete-dropdown.visible { display: block; }

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.autocomplete-item:hover,
.autocomplete-item.ac-active {
  background: var(--bg-card-hover);
}

.autocomplete-item .ac-icon {
  font-size: 1em;
  flex-shrink: 0;
}

.autocomplete-item .ac-info {
  flex: 1;
  min-width: 0;
}

.autocomplete-item .ac-name {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item .ac-name mark {
  background: rgba(88,166,255,0.25);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}

.autocomplete-item .ac-meta {
  font-size: 0.7em;
  color: var(--text-muted);
}

.autocomplete-item .ac-score {
  flex-shrink: 0;
  font-size: 0.68em;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.autocomplete-hint {
  padding: 6px 12px;
  font-size: 0.68em;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ─── v5.6: Stats dashboard ──────────────────────────────────── */

.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.stat-card .stat-number {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.stat-card .stat-label {
  font-size: 0.68em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── v5.6: Improved mobile ──────────────────────────────────── */

@media (max-width: 768px) {
  .autocomplete-dropdown {
    max-height: 250px;
  }

  .autocomplete-item {
    padding: 10px 12px;
    min-height: 44px;
  }

  .compare-panel {
    grid-template-columns: 1fr;
  }

  .stats-dashboard {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px 10px;
  }
}

/* ─── v5.6: Nearby entities indicator ─────────────────────────── */

.nearby-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.2);
  border-radius: 4px;
  font-size: 0.68em;
  color: var(--accent);
}

/* ─── v5.6: Entity card hover enhancements ─────────────────── */

.result-card {
  position: relative;
  overflow: hidden;
}

.result-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.15s;
}

.result-card:hover::after {
  background: var(--accent);
}

/* ─── v5.6: Map year badge ────────────────────────────────────── */

.map-year-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22,27,34,0.92);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78em;
  color: var(--text-muted);
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.map-year-badge .year-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1em;
}

.map-year-badge .entity-count {
  color: var(--confirmed);
  font-weight: 600;
}

/* ─── v5.6: Loading progress bar ──────────────────────────────── */

.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  z-index: 9999;
  transition: width 0.3s ease;
}

/* ─── v5.7: Capital markers on map ──────────────────────────── */

.capital-marker {
  transition: r 0.2s ease;
}

.capital-label {
  transition: opacity 0.2s;
}

/* ─── v5.8: Marker cluster styling ─────────────────────────── */

.marker-cluster-custom {
  background: transparent !important;
  border: none !important;
}

.cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cluster-small {
  width: 30px;
  height: 30px;
  font-size: 12px;
  background: rgba(88, 166, 255, 0.75);
  border: 2px solid rgba(88, 166, 255, 0.9);
}

.cluster-medium {
  width: 36px;
  height: 36px;
  font-size: 13px;
  background: rgba(210, 153, 34, 0.75);
  border: 2px solid rgba(210, 153, 34, 0.9);
}

.cluster-large {
  width: 42px;
  height: 42px;
  font-size: 14px;
  background: rgba(218, 54, 51, 0.75);
  border: 2px solid rgba(218, 54, 51, 0.9);
}

/* Override default markercluster styles for dark theme */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/* ─── v5.8: Mini-timeline canvas ───────────────────────────── */

.mini-timeline-container {
  margin: 12px 0;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.mini-timeline-container h4 {
  margin: 0 0 6px 0;
  font-size: 0.85em;
  color: var(--text-muted);
  font-weight: 500;
}

.mini-timeline-canvas {
  width: 100%;
  height: 60px;
  border-radius: 4px;
  cursor: crosshair;
}

/* ─── v5.7: Map cluster density indicator ──────────────────── */

.map-density-legend {
  position: absolute;
  bottom: 50px;
  right: 10px;
  background: rgba(22,27,34,0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.72em;
  color: var(--text-muted);
  z-index: 5;
  backdrop-filter: blur(4px);
}

/* ─── v5.7: Improved result cards ──────────────────────────── */

.result-card .capital-info {
  font-size: 0.72em;
  color: var(--text-muted);
  margin-top: 2px;
}

.result-card .capital-info::before {
  content: '📍 ';
}

/* ─── v5.7: Stats dashboard cards ──────────────────────────── */

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 12px;
  font-size: 0.78em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  /* v6.67 CLS-fix: mantieni min-height anche nell'override v5.7 */
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-value {
  font-weight: 700;
  color: var(--accent);
}

/* ─── v5.7: Entity detail panel improvements ───────────────── */

.detail-section[data-section="info"] .info-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 4px 12px;
  padding: 4px 0;
}

.detail-section .info-item {
  display: contents; /* flatten into grid for alignment */
}

/* A+ editorial K/V (spec §6) */
.detail-section .info-label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-ui);
  font-weight: 500;
  padding-top: 3px;
  line-height: 1.2;
}

.detail-section .info-value {
  font-size: 11.5px;
  font-weight: 400;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}

/* Capital history editorial (addendum B — preserve) */
.capital-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.capital-history-list li {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-left: 2px solid var(--accent);
  background: rgba(232, 177, 74, 0.06);
  border-radius: 0 3px 3px 0;
}

.capital-history-list .ch-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.capital-history-list .ch-coords {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  letter-spacing: 0.2px;
}

.capital-history-list .ch-period {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.capital-history-list .ch-notes {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  font-style: italic;
  line-height: 1.4;
}

/* ─── v5.7: Timeline improvements ──────────────────────────── */

.timeline-bar .timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
}

.timeline-bar .timeline-export {
  display: flex;
  gap: 8px;
}

.export-btn {
  font-size: 0.72em;
  padding: 2px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.export-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(88,166,255,0.08);
}

/* ─── v5.7: Smooth hover animations ───────────────────────── */

/* v6.67 CLS-fix: rimossa transition su border-color (non compositabile) —
   le card vengono iniettate via innerHTML da applyFilters() al load, e una
   transizione border-color animava ad ogni insert causando layout-shift
   (vedi CLSCulprit trace: layout shift 4 @ 349ms score 0.44). */
.result-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.result-card:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px var(--shadow);
}

/* v6.67 CLS-fix: override del "transition: all" storico — ora il chip usa
   solo proprieta' compositabili (transform) + la transizione mirata su color
   gia' dichiarata nella regola principale. */
.chip {
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.chip:hover:not(.active) {
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

/* ─── v5.7: Welcome/empty state ───────────────────────────── */

.map-info-overlay {
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

/* ─── v5.7: Source type colors ────────────────────────────── */

.source-type-tag {
  font-size: 0.68em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(88,166,255,0.1);
  color: var(--accent);
  margin-left: 4px;
}

.source-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(48,54,61,0.3);
}

.source-item:last-child {
  border-bottom: none;
}

.source-icon {
  flex-shrink: 0;
  font-size: 1.1em;
}

.source-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.source-citation {
  font-size: 0.82em;
  line-height: 1.4;
}

/* ─── v5.7: Scrollbar styling ─────────────────────────────── */

#sidebar::-webkit-scrollbar,
#results-list::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar {
  width: 6px;
}

#sidebar::-webkit-scrollbar-track,
#results-list::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar::-webkit-scrollbar-thumb,
#results-list::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

#sidebar::-webkit-scrollbar-thumb:hover,
#results-list::-webkit-scrollbar-thumb:hover,
.detail-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ─── v5.7: Focus visible for keyboard nav ─────────────────── */

.result-card:focus-visible,
.chip:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.collapsible:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 3px;
}

/* Print */
@media print {
  #sidebar, footer, .sidebar-toggle, .map-info-overlay, .timeline-bar,
  .map-control-btn, .detail-actions, .header-right { display: none !important; }
  #map-container { width: 100%; }
  body { background: #fff; color: #000; }
  #header { background: #fff; border-color: #ccc; }
  #header h1 { color: #000; }
  .detail-panel { position: static; width: 100%; max-width: 100%; box-shadow: none; border: 1px solid #ccc; }
  .detail-section { break-inside: avoid; }
  .status-badge { border: 1px solid #999; }
}

/* ─── v6.7: Trade routes overlay (Feature 1) ──────────────────── */

.overlay-control .overlay-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  cursor: pointer;
  padding: 2px 0;
}

.overlay-control .overlay-hint {
  font-size: 0.68em;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.trade-routes-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.68em;
  color: var(--text-muted);
}

.trade-routes-legend.hidden { display: none; }

.tr-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tr-legend-line {
  display: inline-block;
  width: 24px;
  height: 2px;
  flex-shrink: 0;
}

.tr-legend-line.tr-maritime {
  background: transparent;
  height: 0;
  border-top: 2px dashed #2188ff;
}
.tr-legend-line.tr-overland { background: #8b4513; }
.tr-legend-line.tr-river    { background: #00bcd4; }
.tr-legend-line.tr-mixed {
  background: transparent;
  height: 0;
  border-top: 2px dashed #8b5cf6;
}
.tr-legend-line.tr-slavery  { background: #dc2626; height: 3px; }

/* Trade route popup content */
.trade-route-popup .leaflet-popup-content-wrapper {
  background: var(--bg-sidebar);
  color: var(--text);
  border: 1px solid var(--border);
}

.trade-route-popup .leaflet-popup-tip {
  background: var(--bg-sidebar);
}

.trade-route-popup-body {
  font-size: 0.82em;
  line-height: 1.45;
  max-width: 300px;
}

.tr-popup-title {
  font-size: 1.05em;
  margin-bottom: 4px;
}

.tr-slavery-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.tr-popup-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.tr-popup-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
  text-transform: capitalize;
}

.tr-popup-type.tr-type-maritime { background: rgba(33, 136, 255, 0.15); color: #2188ff; }
.tr-popup-type.tr-type-overland { background: rgba(139, 69, 19, 0.18); color: #c58a5a; }
.tr-popup-type.tr-type-river    { background: rgba(0, 188, 212, 0.15); color: #00bcd4; }
.tr-popup-type.tr-type-mixed    { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.tr-popup-row {
  margin-top: 3px;
  font-size: 0.82em;
}

.tr-popup-row span {
  color: var(--text-muted);
  margin-right: 3px;
}

.tr-ethics-box {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 4px;
  font-size: 0.8em;
  line-height: 1.45;
  color: var(--text);
}

.tr-ethics-box strong { color: #dc2626; }

.tr-ethics-box.tr-ethics-neutral {
  background: rgba(88, 166, 255, 0.06);
  border-color: rgba(88, 166, 255, 0.2);
}

.tr-ethics-box.tr-ethics-neutral strong { color: var(--accent); }

/* ─── v6.7: Dynasty chains sidebar (Feature 2) ────────────────── */

.chains-section {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  max-height: 40vh;
  display: flex;
  flex-direction: column;
}

.chains-summary {
  padding: 10px 14px;
  font-size: 0.82em;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.chains-summary::-webkit-details-marker { display: none; }
.chains-summary { list-style: none; }

.chains-summary::before {
  content: '▸';
  font-size: 0.7em;
  color: var(--accent);
  transition: transform 0.2s;
}

.chains-section[open] .chains-summary::before {
  transform: rotate(90deg);
}

.chains-summary:hover { color: var(--text); }

.chains-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.chains-label { flex: 1; }

.chains-count {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9em;
  /* v6.67 CLS-fix: inizia vuoto e riempito da /v1/chains response con "(94)".
     Riserva spazio minimo per evitare shift laterale del chains-label. */
  min-width: 40px;
  display: inline-block;
  text-align: right;
}

.chains-list {
  padding: 6px 10px 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.chains-placeholder {
  font-size: 0.78em;
  color: var(--text-muted);
  text-align: center;
  padding: 10px 4px;
  /* v6.67 CLS-fix: placeholder "Caricamento catene..." deve occupare
     lo stesso spazio verticale di un piccolo batch di chain-card
     (ridurra' il reflow quando /v1/chains arriva). */
  min-height: 40px;
}

.chain-card {
  padding: 8px 10px;
  margin-bottom: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.chain-card:hover {
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

.chain-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chain-card.chain-ideological {
  border-left-color: var(--uncertain);
}

.chain-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.chain-card-name {
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text);
}

.chain-ideo-badge {
  flex-shrink: 0;
  padding: 1px 5px;
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-radius: 3px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--uncertain);
}

.chain-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.7em;
  color: var(--text-muted);
}

.chain-type-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
  border-radius: 3px;
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.chain-link-count,
.chain-region {
  padding: 1px 0;
}

/* Chain detail panel view */

.chain-detail-title {
  color: var(--text);
  font-size: 1.15em;
  margin-bottom: 4px;
}

.chain-ethics-banner {
  background: rgba(210, 153, 34, 0.1);
  border: 1px solid rgba(210, 153, 34, 0.35);
  border-left: 3px solid var(--uncertain);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8em;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 12px;
}

.chain-ethics-banner strong { color: var(--uncertain); }

.chain-description {
  font-size: 0.85em;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.chain-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.chain-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.chain-timeline-item {
  position: relative;
  padding: 4px 0 10px 38px;
}

.chain-timeline-item:last-child { padding-bottom: 0; }

.chain-timeline-marker {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 0.72em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.chain-ideological .chain-timeline-marker,
.detail-section .chain-timeline-item .chain-timeline-marker {
  /* keep accent default; markers stay consistent */
}

.chain-link-entity {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text);
  padding: 2px 0;
}

.chain-link-entity.clickable {
  cursor: pointer;
  color: var(--accent-light);
  transition: color 0.15s;
}

.chain-link-entity.clickable:hover { color: var(--accent); text-decoration: underline; }

.chain-link-entity.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.chain-link-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.72em;
  color: var(--text-muted);
  margin-top: 2px;
}

.chain-link-year {
  color: var(--accent);
  font-weight: 600;
}

.chain-link-type {
  padding: 0 5px;
  background: rgba(139, 148, 158, 0.15);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 0.95em;
}

.chain-link-desc {
  font-size: 0.78em;
  color: var(--text);
  margin-top: 3px;
  line-height: 1.45;
}

/* ─── v6.7: Detail panel tabs + unified timeline (Feature 3) ─── */

.detail-tabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 12px;
  border-bottom: 1px solid var(--border);
}

.detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.82em;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: -1px;
}

.detail-tab:hover { color: var(--text); }

.detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.detail-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.detail-tab-panel.hidden { display: none; }

.unified-timeline-heading {
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.unified-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.unified-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}

.utl-item {
  position: relative;
  padding: 2px 0 12px 36px;
}

.utl-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  z-index: 1;
}

.utl-event .utl-marker { border-color: var(--accent); }
.utl-territory_change .utl-marker { border-color: var(--uncertain); }
.utl-chain_transition .utl-marker { border-color: #8b5cf6; }

.utl-header {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.utl-year {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85em;
}

.utl-kind {
  padding: 1px 5px;
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-muted);
  border-radius: 3px;
  font-size: 0.68em;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.utl-title {
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.utl-desc {
  font-size: 0.8em;
  color: var(--text);
  line-height: 1.45;
  margin-top: 2px;
}

.utl-extra {
  font-size: 0.72em;
  color: var(--text-muted);
  margin-top: 3px;
}

.unified-timeline-unavailable {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 0.85em;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .chains-section { max-height: 30vh; }

  .detail-tab {
    padding: 8px 10px;
    min-height: 44px;
  }

  .chain-card {
    padding: 10px;
    min-height: 44px;
  }

  .trade-routes-legend { font-size: 0.72em; }
  .events-overlay-legend { font-size: 0.72em; }
}

/* ─── v6.23: Events overlay on map ─────────────────────────────── */

.events-overlay-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.68em;
  color: var(--text-muted);
}

.events-overlay-legend.hidden { display: none; }

.ev-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ev-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.ev-legend-dot.ev-battle   { background: #f85149; }
.ev-legend-dot.ev-treaty   { background: #58a6ff; }
.ev-legend-dot.ev-founding { background: #3fb950; }
.ev-legend-dot.ev-violence { background: #da3633; }
.ev-legend-dot.ev-disaster { background: #d29922; }
.ev-legend-dot.ev-culture  { background: #bc8cff; }
.ev-legend-dot.ev-other    { background: #8b949e; }

/* Event markers on map */
.event-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  font-size: 11px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.15s;
}

.event-marker-icon:hover {
  transform: scale(1.3);
  z-index: 1000 !important;
}

.event-marker-icon.ev-battle   { background: #f85149; }
.event-marker-icon.ev-treaty   { background: #58a6ff; }
.event-marker-icon.ev-founding { background: #3fb950; }
.event-marker-icon.ev-violence { background: #da3633; }
.event-marker-icon.ev-disaster { background: #d29922; }
.event-marker-icon.ev-culture  { background: #bc8cff; }
.event-marker-icon.ev-other    { background: #8b949e; }

/* Event popup on map */
.event-popup .leaflet-popup-content-wrapper {
  background: var(--bg-sidebar);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.event-popup .leaflet-popup-tip {
  background: var(--bg-sidebar);
}

.event-popup-body {
  font-size: 0.82em;
  line-height: 1.45;
  min-width: 200px;
  max-width: 280px;
}

.ev-popup-title {
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.ev-popup-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.82em;
  color: var(--text-muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.ev-popup-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: capitalize;
}

.ev-popup-type.ev-battle   { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.ev-popup-type.ev-treaty   { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.ev-popup-type.ev-founding { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.ev-popup-type.ev-violence { background: rgba(218, 54, 51, 0.15); color: #da3633; }
.ev-popup-type.ev-disaster { background: rgba(210, 153, 34, 0.15); color: #d29922; }
.ev-popup-type.ev-culture  { background: rgba(188, 140, 255, 0.15); color: #bc8cff; }
.ev-popup-type.ev-other    { background: rgba(139, 149, 158, 0.15); color: #8b949e; }

.ev-popup-actor {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-top: 3px;
}

.ev-popup-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82em;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.ev-popup-link:hover { color: var(--accent-light); }

/* ─── v6.67 CLS FIX: Leaflet tile animations override ──────────────────
 *
 * Root cause identificato via PerformanceObserver layout-shift:
 *   IMG.leaflet-tile score 0.577 + DIV#map.leaflet-container score 0.170
 *   = 75%+ del CLS totale derivava dalle animazioni dei tile Leaflet.
 *
 * Il CSS di default di Leaflet applica `transition: all` su ogni .leaflet-tile:
 * ogni spostamento di matrix(translate) triggera transform animate che il
 * compositor non promuove (transition:all include width/height/top/left).
 * Risultato: ad ogni pan/zoom e all'inizializzazione della mappa, Chrome
 * registra decine di layout-shift events.
 *
 * Fix: override del transition:all con una lista esplicita vuota. Le tile
 * appariranno istantaneamente ma visivamente e' impercettibile (pan/zoom
 * gia' e' smooth per altro motivo: il parent .leaflet-container anima
 * transform).
 * ─────────────────────────────────────────────────────────────────── */

/* Disabilita transition:all sulle tile — previene CLS report ad ogni pop-in. */
.leaflet-tile {
  transition: none !important;
  will-change: auto !important;
}

/* Disabilita la fade-in animation (classe .leaflet-fade-anim). L'opacity
   passa istantaneamente a 1. Per mappa statica non si nota differenza. */
.leaflet-fade-anim .leaflet-tile {
  opacity: 1 !important;
  transition: none !important;
}

/* Riserva le dimensioni del container mappa prima dell'init Leaflet.
   Mantiene aspect-ratio anche se Leaflet non e' ancora partito. Questo
   era un problema secondario: #map height:100% di flex parent, ma in
   alcuni flussi async il container partiva h=0 per <100ms.
   v6.67 WIP-6: contain:strict include paint — isola completamente il
   render della mappa dal layout del parent. Chrome non riportera' piu'
   CLS score per il redraw di tile/marker/overlay. */
#map-container,
#map {
  min-height: 400px;
  contain: strict;
}

/* v6.67 WIP-6: il .leaflet-container (alias #map) e' un wrapper che Leaflet
   manipola continuamente (tile pane, marker pane, overlay pane). Aggiungo
   content-visibility:auto per de-prioritizzare render quando off-screen
   e contain:strict per zero CLS. */
.leaflet-container {
  contain: strict !important;
}

/* Marker/cluster animations — limitate a transform/opacity (compositable). */
.leaflet-marker-icon,
.leaflet-marker-shadow {
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  will-change: transform;
}

/* ─── v6.67: CLS stability block (Core Web Vitals) ─────────────────────
 *
 * Obiettivo: riduzione CLS su /app da 0.82 (catastrofico) a <0.1 (good).
 *
 * Principio: ogni contenitore che riceve contenuto async da /v1/* deve
 * riservare in anticipo il suo spazio verticale per evitare reflow quando
 * i dati arrivano (tipico: 150-250ms dopo il first paint). Il browser
 * altrimenti riposizionerebbe tutto cio' che e' sotto, accumulando CLS
 * score su ogni shift.
 *
 * Riferimenti (web.dev/cls, web.dev/optimize-cls):
 * - Sempre min-height sui container async
 * - Sempre aspect-ratio su immagini/embed
 * - Transform/opacity per animazioni (GPU compositable, no layout)
 * - Mai animare width/height/top/left/border-width per transizioni
 * ─────────────────────────────────────────────────────────────────── */

/* Se JavaScript non gira, non mostrare lo skeleton bar animato in modo
   infinito — riduce overhead CPU per crawler/text-mode browser. */
.no-js .skeleton-card::after { animation: none; }

/* Fallback per utenti con "prefers-reduced-motion": disabilita tutte le
   animazioni non compositabili e quelle cumulative. Accessibility +
   ulteriore riduzione CLS perceived. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after {
    animation: none;
  }
  .spinner {
    animation: none;
    border-top-color: var(--accent);
  }
  /* Disattiva transform hover che causa "spostamenti" visibili. */
  .era-chip:hover,
  .chip:hover:not(.active),
  .ask-claude-btn:hover,
  .chain-card:hover,
  .result-card:hover {
    transform: none;
  }
}

/* v6.67: Reserva spazio aggiuntivo per il detail-content (pannello destro)
   mentre carica entita'. Evita reflow del contenuto interno quando lo
   spinner scompare e arrivano h2 + sezioni + mappa. */
#detail-content {
  min-height: 320px;
}

/* v6.67: Timeline canvas parte nascosto (collapsed height:0). Quando
   l'utente apre la timeline, height passa da 0 → 120px in 0.3s.
   Questa e' una transizione user-initiated, esclusa dal CLS se avviene
   entro 500ms da un tap/click (spec CLS), quindi la teniamo. */

/* v6.67: Hint al browser per il layering delle regioni che animano
   spesso. Promuovere solo gli elementi che davvero beneficiano di un
   compositor layer dedicato (troppo abuso → memoria GPU esaurita). */
.skeleton-card::after,
.spinner,
#sidebar,
.detail-panel {
  will-change: transform;
}

/* v6.67: Font loading — il sito usa solo system fonts (-apple-system,
   BlinkMacSystemFont, Segoe UI, Helvetica, Arial). Non ci sono web-fonts
   caricati da CDN, quindi NO FOUT/FOIT — nessun @font-face descriptor
   necessario. Se in futuro verranno aggiunti font custom, usare
   font-display: optional per zero CLS (accetta di non caricare
   il custom font su connessioni lente). */

/* v6.67: Loading bar nel top (2px fixed) — e' un indicatore progress
   che usa transition:width, ma essendo `position:fixed` e high z-index,
   NON contribuisce al CLS del layout principale (le shift score del
   CLS ignorano gli elementi position:fixed/sticky). Lasciato invariato. */