/* css/components/slideshow-timeline.css — scrubber down the left of the photo frame */

/* Starts below the back button (top-left) */
.timeline { position: absolute; left: 10px; top: calc(max(14px, env(safe-area-inset-top)) + 64px); bottom: 5%; width: 0; opacity: .45; transition: opacity .2s; }
/* Narrow screens: the control bar spans nearly the full width, so end the timeline above it */
@media (max-width: 700px) { .timeline { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px); } }
.timeline:has(.timeline__rail:hover),
.timeline:focus-within,
.timeline--dragging { opacity: 1; }
.timeline__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; cursor: pointer; touch-action: none; border-radius: 13px; }
.timeline__rail::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: rgba(233, 228, 216, .55); box-shadow: 0 0 0 1px rgba(20, 24, 29, .6); }
.timeline__thumb { position: absolute; left: 50%; width: 18px; height: 34px; transform: translate(-50%, -50%); border-radius: 9px; background: var(--color-lamp); border: 2px solid var(--color-ink); cursor: grab; }
.timeline--dragging .timeline__thumb { cursor: grabbing; }
.timeline__labels { position: absolute; left: 34px; top: 0; bottom: 0; pointer-events: none; }
.timeline__labels span { position: absolute; transform: translateY(-50%); font-size: 12px; white-space: nowrap; color: var(--color-paper); text-shadow: 0 1px 3px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }