/* ==========================================================================
   Timeline Line Stability
   Constant-thickness counter-scaling for the spine/era-marker lines under
   zoom, plus pan-transition suppression. Split out of timeline.css, which
   is already at the CSS-1 150-line cap.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Constant Line Thickness — Counter-Scaling
   .timeline-spine and .timeline-era-marker live inside .timeline-world,
   which timeline-zoom.js scales via CSS transform — a declared 2px/1px line
   renders at 2px/1px * scale on screen (6px/3px at scale 3.0) unless
   countered. timeline-zoom.js publishes the live scale as
   --timeline-zoom-scale on .timeline-world on every transform update;
   dividing declared thickness by it cancels the inflation, so apparent
   thickness stays constant across zoom levels. max(1px, ...) floors the
   result so a line at high zoom (e.g. scale 3.0: 2px / 3 ≈ 0.67px) never
   rounds away to nothing — the tradeoff is that very-high-zoom lines render
   marginally thicker than their nominal 2px/1px (see timeline-zoom.test.js).
   The `, 1` fallback keeps thickness correct even if JS hasn't set
   the property yet (e.g. before first paint, or in mobile mode — see
   timeline-responsive.css).
   ------------------------------------------------------------------------- */

.timeline-spine {
    height: max(1px, calc(2px / var(--timeline-zoom-scale, 1)));
}

.timeline-era-marker {
    width: max(1px, calc(1px / var(--timeline-zoom-scale, 1)));
}

/* Counter-scaling only touches thickness — color and opacity are untouched:
   .timeline-spine keeps its var(--border-strong) background (timeline.css),
   .timeline-era-marker keeps var(--border) at opacity: 0.6 (timeline.css). */

/* -------------------------------------------------------------------------
   Pan Transition Suppression
   .timeline-world's 150ms transform transition (timeline.css) is desirable
   for button-driven zoom (smooth, reassuring) but makes a click-drag pan lag
   behind the pointer. timeline-zoom.js adds this class only while a drag is
   actively in progress (onPanStart/onPanEnd), so zoom buttons keep the
   transition and drag-pan is immediate.
   ------------------------------------------------------------------------- */

.timeline-world--panning {
    transition: none;
}