/* ==========================================================================
   Timeline Responsive & Print
   Print styles and mobile vertical-mode overrides.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Print Styles
   ------------------------------------------------------------------------- */

@media print {
    .timeline-era-filters,
    .timeline-tooltip,
    .timeline-detail-panel,
    .timeline-detail-panel__close {
        display: none;
    }

    .timeline-container {
        overflow: visible;
        cursor: auto;
    }

    .timeline-spine {
        background: var(--color-black);
    }

    .timeline-era-marker {
        background: var(--text-muted);
    }

    .timeline-era-heading {
        color: var(--color-black) !important;
    }

    .timeline-dot {
        background: var(--color-black);
        border-color: var(--color-white);
    }

    .timeline-label-title,
    .timeline-label-meta {
        color: var(--color-black);
    }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .timeline-header {
        padding: var(--space-lg) var(--space-md) var(--space-sm);
    }

    .timeline-era-filters {
        padding: var(--space-sm) var(--space-md);
    }

    .timeline-detail-panel {
        right: var(--space-sm);
        bottom: var(--space-sm);
        width: auto;
        left: var(--space-sm);
    }

    .timeline-label {
        font-size: 0.625rem;
        max-width: 72px;
    }

    /* ---------------------------------------------------------------------
       Vertical mode — spine runs top-to-bottom, natural page scroll.
       Applied via `.timeline-container--vertical` (set by timeline-render.js
       when window.matchMedia('(max-width: 767px)') matches).
       --------------------------------------------------------------------- */

    .timeline-container--vertical {
        overflow-x: visible;
        overflow-y: visible;
        cursor: default;
    }

    .timeline-container--vertical:active {
        cursor: default;
    }

    /* Force transform off in vertical/mobile mode (matches arbor's mobile
       disablement). Since .timeline-world is never scaled here, the
       counter-scaling in timeline-line-stability.css divides by the
       var(--timeline-zoom-scale, 1) fallback — spine stays a flat 2px,
       era markers 1px, with no JS-set property required on mobile. */
    .timeline-world {
        transform: none;
        transition: none;
    }

    .timeline-controls {
        display: none;
    }

    .timeline-inner--vertical {
        width: 100%;
        min-height: 0;
    }

    .timeline-spine--vertical {
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        transform: translateX(-50%);
    }

    .timeline-era-marker--vertical {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    .timeline-label.left,
    .timeline-label.right {
        max-width: calc(50% - 24px);
        white-space: normal;
    }

    .timeline-label.left {
        transform: translate(-100%, -50%);
        text-align: right;
        padding-right: var(--space-sm);
    }

    .timeline-label.right {
        transform: translate(0, -50%);
        text-align: left;
        padding-left: var(--space-sm);
    }
}