/* ============================================================================
   RTR interactive timeline — a design-system component on tokens.css.
   Styles the .tl-* DOM that main.js renderInteractiveTimeline() generates into
   #timeline. Light + dark for free (all colours are semantic tokens). Used by
   /inequality/. Load: tokens.css → campaign.css → timeline.css
   ============================================================================ */
.timeline-interactive { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 2px solid var(--rule); }

/* era bands — clean: dashed separators + labels, no tints */
.tl-eras { position: relative; height: 26px; margin-bottom: var(--sp-1); }
.tl-era { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--rule); }
.tl-era:last-child { border-right: 1px dashed var(--rule); }
.tl-era-label { display: block; padding: 5px var(--sp-2) 0; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* scrubber */
.tl-scrubber { position: relative; height: 72px; margin-bottom: var(--sp-6); }
.tl-line { position: absolute; top: 18px; left: 0; right: 0; height: 3px; background: var(--rule); }
.tl-dot { position: absolute; top: var(--sp-2); transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--text-muted); cursor: pointer; padding: 0; transition: background .15s, transform .15s, border-color .15s; }
.tl-dot:hover, .tl-dot:focus { background: var(--accent); border-color: var(--accent); transform: translateX(-50%) scale(1.15); }
.tl-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tl-dot.active { background: var(--accent); border-color: var(--accent); transform: translateX(-50%) scale(1.3); z-index: 2; }
.tl-dot-year { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--text-muted); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tl-dot:hover .tl-dot-year, .tl-dot.active .tl-dot-year, .tl-dot:focus .tl-dot-year { opacity: 1; }
.tl-dot.active .tl-dot-year { color: var(--accent); }

/* detail panel */
.tl-detail { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-6); min-height: 360px; margin-bottom: var(--sp-5); display: flex; flex-direction: column; }
.tl-body { flex: 1; font-family: var(--font-serif); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--text); margin: 0; }
.tl-meta { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.tl-year { font-family: var(--font-display); font-size: clamp(48px, 6vw, 84px); font-weight: 700; color: var(--accent); letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-era-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: var(--sp-1) 10px; border: 1px solid var(--rule); }
.tl-title { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 40px); font-weight: 700; letter-spacing: -.5px; line-height: 1.05; text-transform: uppercase; color: var(--text); margin: 0 0 var(--sp-4); text-wrap: balance; }

/* controls — use the shared button language */
.tl-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.tl-prev, .tl-next, .tl-play { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .5px;
  text-transform: uppercase; background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: .55rem 1rem; border-radius: var(--radius); cursor: pointer; }
.tl-prev:hover, .tl-next:hover, .tl-play:hover, .tl-prev:focus, .tl-next:focus, .tl-play:focus { background: var(--accent); color: var(--on-accent); }
.tl-prev:focus-visible, .tl-next:focus-visible, .tl-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tl-progress { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; }
.tl-cur { color: var(--accent); }

@media (max-width: 700px) {
  .tl-eras { height: 22px; } .tl-era-label { font-size: 9px; padding: var(--sp-1) var(--sp-1) 0; }
  .tl-scrubber { height: 56px; margin-bottom: var(--sp-5); }
  .tl-line { top: 14px; } .tl-dot { width: 18px; height: 18px; top: 6px; border-width: 2px; } .tl-dot-year { font-size: 8px; top: 22px; }
  .tl-detail { padding: var(--sp-5); min-height: 320px; }
}
@media print {
  .tl-eras, .tl-scrubber, .tl-controls { display: none !important; }
  .tl-detail { border: none !important; padding: 0 !important; min-height: 0 !important; }
}