/* ── ERA BROWSER / TIMELINE BAR ── */
#timeline{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-nav);
  padding:0.4rem 1.2rem 0.7rem;
  background:rgba(26,29,35,0.78);backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.06);pointer-events:all;}
[data-theme="light"] #timeline{background:rgba(255,255,255,0.82);border-top-color:rgba(0,0,0,0.06);}
#tl-info-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.2rem;min-height:1.1rem;}
#tl-era-info{display:flex;align-items:baseline;gap:0.5rem;}
#era-label{font-size:var(--text-xs);font-weight:600;color:var(--text-primary);letter-spacing:0.06em;
  text-transform:uppercase;font-family:var(--font-mono);}
#era-time-range{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-mono);}
#tl-density{width:100%;height:16px;display:block;margin-bottom:0.1rem;opacity:0.5;border-radius:2px 2px 0 0;}
#tl-track-wrap{position:relative;margin:0 0.2rem;}
#era-track{position:relative;height:14px;border-radius:4px;overflow:visible;background:var(--border);cursor:pointer;}
#era-segments{display:flex;height:100%;border-radius:4px;overflow:hidden;}
.era-seg{height:100%;position:relative;transition:filter 0.2s;display:flex;align-items:center;
  justify-content:center;overflow:hidden;cursor:pointer;}
.era-seg:hover{filter:brightness(1.25);}
.era-seg-label{font-size:var(--text-2xs);color:rgba(255,255,255,0.85);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,0.5);}
[data-theme="light"] .era-seg-label{color:rgba(0,0,0,0.7);text-shadow:0 1px 2px rgba(255,255,255,0.5);}
#tl-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:26px;border-radius:4px;
  background:var(--accent-primary);border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 2px 8px rgba(0,0,0,0.35),0 0 0 2px rgba(var(--accent-rgb),0.3);
  cursor:grab;z-index:10;transition:box-shadow 0.2s;outline:none;left:0%;}
#tl-thumb:hover,#tl-thumb:focus-visible{box-shadow:0 2px 12px rgba(0,0,0,0.4),0 0 0 4px rgba(var(--accent-rgb),0.4);}
#tl-thumb:active{cursor:grabbing;}
#tl-thumb::after{content:'';position:absolute;top:5px;bottom:5px;left:50%;transform:translateX(-50%);
  width:2px;background:rgba(255,255,255,0.5);border-radius:1px;}
[data-theme="light"] #tl-thumb{border-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15),0 0 0 2px rgba(var(--accent-rgb),0.2);}
#extinction-markers{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;}

/* ── ERA TINT OVERLAY ── */
#era-tint-overlay{position:fixed;inset:0;z-index:var(--z-base);pointer-events:none;transition:background 0.6s ease;}

/* ── EXTINCTION MARKERS ── */
.ext-marker{position:absolute;top:-8px;width:22px;height:30px;transform:translateX(-50%);
  cursor:pointer;pointer-events:all;z-index:5;display:flex;align-items:flex-start;justify-content:center;
  transition:transform var(--transition-fast);}
.ext-marker:hover{transform:translateX(-50%) scale(1.2);}
.ext-marker-icon{font-size:0.75rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));position:relative;z-index:2;}
.ext-marker-line{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:2px;height:16px;
  background:linear-gradient(to bottom,rgba(224,82,82,0.9),rgba(224,82,82,0.2));border-radius:1px;}
.ext-marker[data-severity="high"] .ext-marker-icon{font-size:0.85rem;}
.ext-marker[data-severity="extreme"] .ext-marker-icon{font-size:1rem;}
/* Extinction popover */
.ext-popover{position:absolute;bottom:calc(100% + 8px);background:var(--surface);
  border:1px solid var(--accent-primary);border-radius:var(--radius-md);padding:0.6rem 0.8rem;
  min-width:180px;max-width:260px;box-shadow:0 8px 32px rgba(0,0,0,0.3);z-index:var(--z-nav);
  font-size:var(--text-xs);color:var(--text-primary);transition:opacity var(--transition-fast),transform var(--transition-fast);}
.ext-popover.hidden{opacity:0;pointer-events:none;transform:translateY(4px);}
.ext-popover-name{font-weight:700;color:var(--accent-danger);font-size:var(--text-sm);margin-bottom:0.2rem;}
.ext-popover-stat{color:var(--accent-danger);font-weight:600;opacity:0.8;}
.ext-popover-cause{color:var(--text-secondary);margin-top:0.15rem;}
.ext-popover-surv{color:var(--sage);margin-top:0.15rem;font-style:italic;}
[data-theme="light"] .ext-popover{background:var(--surface);border-color:var(--accent-primary);}

/* ── SPECIES COUNT ── */
#era-species-count{font-size:var(--text-2xs);color:var(--sage);letter-spacing:0.06em;font-family:var(--font-mono);}
[data-theme="light"] #era-species-count{color:var(--text-secondary);}

/* ── TIMELINE CONTROLS ROW ── */
#tl-controls{display:flex;align-items:center;justify-content:space-between;margin-top:0.3rem;gap:0.5rem;}
#era-presets{display:flex;gap:0.3rem;flex-wrap:wrap;flex:1;}
.era-preset{padding:0.3rem 0.65rem;border:1px solid rgba(var(--accent-rgb),0.2);border-radius:var(--radius-full);
  font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);
  font-family:var(--font-body);background:transparent;white-space:nowrap;display:flex;align-items:center;gap:0.25rem;}
.era-preset:hover{border-color:var(--accent-primary);color:var(--text-primary);}
.era-preset.active{background:var(--accent-primary-dim);border-color:var(--accent-primary);color:var(--accent-primary);}
.era-preset:active{transform:scale(0.97);}
.era-preset-icon{font-size:0.7rem;}
[data-theme="light"] .era-preset{border-color:rgba(var(--accent-rgb),0.2);color:var(--text-secondary);}
[data-theme="light"] .era-preset:hover{border-color:var(--accent-primary);color:var(--text-primary);}
[data-theme="light"] .era-preset.active{background:var(--accent-primary-dim);color:var(--accent-primary);}

/* ── PLAYBACK CONTROLS ── */
#tl-playback{display:flex;align-items:center;gap:0.3rem;}
#era-play{width:30px;height:30px;border-radius:50%;background:var(--accent-primary-dim);
  border:1px solid rgba(var(--accent-rgb),0.3);color:var(--accent-primary);font-size:0.75rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);}
#era-play:hover{background:rgba(var(--accent-rgb),0.25);border-color:var(--accent-primary);}
#era-play.playing{background:rgba(var(--accent-rgb),0.2);border-color:var(--accent-light);color:var(--accent-light);}
#era-play:active{transform:scale(0.97);}
[data-theme="light"] #era-play{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--accent-rgb),0.2);color:var(--accent-primary);}
#tl-speed-group{display:flex;gap:0;border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--border);}
.tl-speed-btn{padding:0.25rem 0.5rem;font-size:var(--text-xs);font-family:var(--font-mono);
  color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--transition-fast);}
.tl-speed-btn:hover{color:var(--text-primary);background:var(--accent-primary-dim);}
.tl-speed-btn.active{color:var(--accent-primary);background:var(--accent-primary-dim);font-weight:600;}
/* RTL timeline */
[dir="rtl"] #tl-info-bar{flex-direction:row-reverse;}
[dir="rtl"] #tl-era-info{flex-direction:row-reverse;}
[dir="rtl"] #tl-controls{flex-direction:row-reverse;}
[dir="rtl"] #era-presets{flex-direction:row-reverse;}