/**
 * OzCopilot - Flight Timeline demo (js/timeline-demo.js): the few things the
 * Tailwind classes in its markup don't cover. Colours are the app's tokens
 * (see css/main.css). Served with max-age=1 year: bump its ?v= on change.
 */

/* The rail scrolls inside the phone; a thin, quiet scrollbar. */
.oz-tl-rail {
    scrollbar-width: thin;
    scrollbar-color: rgba(176, 189, 209, 0.22) transparent;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}
.oz-tl-rail::-webkit-scrollbar { width: 3px; }
.oz-tl-rail::-webkit-scrollbar-thumb { background: rgba(176, 189, 209, 0.22); border-radius: 3px; }

/* The plane glides between steps, as the app's rail cursor does. */
.oz-tl-cursor,
.oz-tl-cursor-label {
    transition: transform 120ms linear;
    will-change: transform;
}
.oz-tl-trail {
    transition: height 120ms linear;
}
.oz-tl-plane {
    transform: rotate(180deg);
}

/* An open step's body scrolls inside itself (the app sizes it to the room it has). */
.oz-tl-body {
    max-height: 11rem;
}

/* The scrubber: a bigger hit area than the 4px bar, and a visible keyboard focus. */
.oz-tl-scrub {
    outline: none;
}
.oz-tl-scrub:focus-visible .oz-tl-thumb {
    box-shadow: 0 0 0 3px rgba(130, 177, 255, 0.55);
}
.oz-tl-thumb {
    pointer-events: none;
}

/* Keyboard focus on the demo's controls: the app's accent-400 focus ring. */
[data-oz-timeline] button:focus-visible,
[data-oz-timeline] [role="button"]:focus-visible {
    outline: 2px solid #82B1FF;
    outline-offset: 1px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .oz-tl-cursor,
    .oz-tl-cursor-label,
    .oz-tl-trail {
        transition: none;
    }
}