/* The timeline (viewer/timeline.js): a slim strip under the header of the Film, Sets and Explorer pages.
   One row on a desktop: the time controls, the date, the axis, its zoom and the Shots menu; it wraps
   on a narrow window (the axis takes its own row). On a phone it folds to a compact bar (the date,
   play, the speed) that opens to the whole strip. Loaded after layout.css. */
body.has-tl { grid-template-rows: auto auto minmax(0, 1fr); }
.tl { display: flex; align-items: center; gap: 8px; row-gap: 4px; flex-wrap: wrap; min-width: 0;
  padding: 3px max(8px, env(safe-area-inset-right)) 3px max(8px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line); background: #0e0f12; position: relative; z-index: 5; }
.tl .seg { flex: none; }
.tl .seg button { white-space: nowrap; }
.tl button[disabled] { opacity: 0.35; cursor: default; }
.tl .tl-rev .ic { transform: scaleX(-1); }               /* the play triangle, pointing back */
.tl .tl-rev.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.tl .tl-speed { min-width: 92px; text-align: left; font-variant-numeric: tabular-nums; }
.tl.tl-live .tl-speed { color: #f0c4bf; }

/* the date: a button that becomes a field */
.tl-when { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.tl-date, .tl-input { font: inherit; font-size: 13px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--text); background: rgba(21, 23, 26, 0.85); border: 1px solid var(--line); padding: 3px 8px; height: 26px; }
.tl-date { cursor: text; display: inline-flex; align-items: center; gap: 6px; }
.tl-date:hover { border-color: var(--dim); }
.tl-date .ic { color: var(--dim); }
.tl-date[hidden], .tl-input[hidden], .tl-warn[hidden] { display: none; }
.tl-input { width: 196px; outline: none; border-color: var(--accent); }
.tl.tl-live .tl-date { border-color: #d0463b; }
.tl-warn { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #f0c4bf;
  border-left: 2px solid #d0463b; padding-left: 6px; line-height: 1.25; }

/* the axis */
.tl-axis { flex: 1 1 360px; min-width: 240px; height: 40px; position: relative; cursor: grab; touch-action: none; outline: none; }
.tl-axis:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.tl-axis.panning { cursor: grabbing; }
.tl-axis.scrubbing { cursor: ew-resize; }
.tl-axis canvas { display: block; width: 100%; height: 100%; }
.tl .tl-ends { margin-left: 0; }
.tl .tl-more { display: none; }

/* the Live button (viewer/live.js) in its slot */
.tl .live-btn { position: relative; }
.tl .live-btn.on { color: var(--bg); background: #d0463b; border-color: #d0463b; letter-spacing: 0.12em; text-transform: uppercase; }
.tl .live-btn.on .ic { animation: live-blink 2s steps(1) infinite; }
.tl .live-clock { display: none; }                      /* the strip's date ticks instead */
@media (prefers-reduced-motion: reduce) { .tl .live-btn.on .ic { animation: none; } }

/* the film page: its own transport (the film's play); the rest of the time controls are the Explorer's */
.tl.tl-film .tl-rev, .tl.tl-film .tl-speed, .tl.tl-film .tl-now { display: none; }
.tl.tl-film .tl-date { cursor: pointer; }

/* the popovers (speed; shots and events) and a marker's card */
.tl-pop, .tl-card { position: fixed; z-index: 70; background: rgba(21, 23, 26, 0.97); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); font-size: 12px; color: var(--text); }
.tl-pop[hidden], .tl-card[hidden] { display: none; }
.tl-pop { padding: 8px; min-width: 220px; max-width: min(420px, calc(100vw - 12px)); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.tl-pop-h { color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; margin-top: 2px; }
.tl-pop-k { color: var(--dim); font-size: 11px; }
.tl-rates { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; }
.tl-rates.tl-dir { grid-template-columns: 1fr 1fr; }
:is(.tl-pop, .tl-panel) button { font: inherit; font-size: 12px; background: rgba(11, 12, 14, 0.6); color: var(--dim); border: 1px solid var(--line);
  padding: 4px 7px; cursor: pointer; text-align: left; letter-spacing: 0.04em; }
:is(.tl-pop, .tl-panel) button:hover:not(:disabled), :is(.tl-pop, .tl-panel) button:focus-visible { color: var(--text); border-color: var(--dim); outline: none; }
:is(.tl-pop, .tl-panel) button.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
:is(.tl-pop, .tl-panel) button:disabled { opacity: 0.35; cursor: default; }
.tl-fine { display: grid; grid-template-columns: auto 1fr 74px; align-items: center; gap: 8px; color: var(--dim); }
.tl-fine input { width: 100%; accent-color: var(--accent); }
.tl-fine-v { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.tl-hold { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.tl-list { display: flex; flex-direction: column; gap: 2px; }
.tl-list button { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; border-color: transparent; }
.tl-li-n { color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.tl-li-n.mission, .tl-li-n.site, .tl-li-n.crewed { color: #c9ccd1; }
.tl-li-n.sky { color: var(--orbit); }
.tl-li-t { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-li-d { color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tl-card { width: min(330px, calc(100vw - 12px)); padding: 8px 10px; max-height: min(60vh, 460px); overflow-y: auto; }
.tl-card.pinned { border-top-color: var(--accent); }
.tl-ev + .tl-ev { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tl-ev-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tl-kind { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: #c9ccd1; }
.tl-kind.shot { color: var(--accent); }
.tl-kind.sky { color: var(--orbit); }
.tl-ev-d { color: var(--dim); font-variant-numeric: tabular-nums; }
.tl-ev-t { display: block; font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 2px 0; cursor: pointer;
  text-align: left; letter-spacing: 0.04em; }
.tl-ev-t:hover { text-decoration: underline; }
.tl-ev-l { color: var(--text); line-height: 1.35; }
.tl-ev-a { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tl-ev-a a, .tl-ev-a button { font: inherit; font-size: 11px; color: var(--text); background: rgba(11, 12, 14, 0.6); border: 1px solid var(--line);
  padding: 2px 7px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.tl-ev-a a:hover, .tl-ev-a button:hover { border-color: var(--accent); color: var(--accent); }
.tl-ev-s { margin-top: 4px; color: var(--dim); font-size: 11px; line-height: 1.3; }
.tl-ev-s a { color: var(--dim); }
.tl-card .tl-close { float: right; font: 16px/1 system-ui, sans-serif; background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 0 4px 8px; }
.tl-card .tl-close:hover { color: var(--text); }

/* the views under it: the old date controls stay in the page, hidden (planets.js and solar_system.js keep
   writing them), and the overview's own Play and rate are the strip's now */
body.has-tl .camerabar .seg.dates, body.has-tl #ssplayseg { display: none; }

/* tablets: 40 px targets, a taller axis */
[data-lay=tab] .tl .seg button, [data-lay=phone] .tl .seg button, [data-lay=tab] .tl-date, [data-lay=phone] .tl-date,
[data-lay=tab] .tl-input, [data-lay=phone] .tl-input { min-height: 40px; }
[data-lay=tab] .tl .seg button, [data-lay=phone] .tl .seg button { min-width: 40px; }
[data-lay=tab] .tl-axis { height: 48px; }
[data-lay=tab] :is(.tl-pop, .tl-panel) button, [data-lay=phone] :is(.tl-pop, .tl-panel) button { min-height: 40px; }

/* phones: a compact bar (the date, play, the speed), tapped open to the whole strip */
[data-lay=phone] .tl { flex-wrap: nowrap; gap: 6px; }
[data-lay=phone] .tl .tl-more { display: inline-flex; margin-left: auto; background: rgba(21, 23, 26, 0.85); color: var(--dim);
  border: 1px solid var(--line); min-width: 40px; min-height: 40px; align-items: center; justify-content: center; cursor: pointer; }
[data-lay=phone] .tl .tl-more[aria-expanded=true] .ic { transform: rotate(180deg); }
[data-lay=phone] .tl:not(.tl-open) .tl-axis, [data-lay=phone] .tl:not(.tl-open) .tl-zoom, [data-lay=phone] .tl:not(.tl-open) .tl-ends,
[data-lay=phone] .tl:not(.tl-open) .tl-rev, [data-lay=phone] .tl:not(.tl-open) .tl-now, [data-lay=phone] .tl:not(.tl-open) .tl-live-slot,
[data-lay=phone] .tl:not(.tl-open) .live-btn, [data-lay=phone] .tl:not(.tl-open) .tl-warn { display: none; }
[data-lay=phone] .tl .tl-date .ic { display: none; }
[data-lay=phone] .tl .tl-date { padding: 3px 6px; font-size: 12px; letter-spacing: 0.02em; }
[data-lay=phone] .tl .tl-speed { min-width: 0; }
[data-lay=phone] .tl.tl-open { flex-wrap: wrap; }
[data-lay=phone] .tl.tl-open .tl-axis { order: 10; flex-basis: 100%; height: 48px; }
[data-lay=phone] .tl.tl-open .tl-warn { order: 11; flex-basis: 100%; max-width: none; }

.tl-li-g { padding: 6px 8px 2px; color: var(--accent); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Paths (the strip's list): laid out like the Explorer's body list */
.tl-pop.tl-paths { width: min(520px, calc(100vw - 12px)); max-width: none; }
.tl-q { font: inherit; font-size: 12px; background: rgba(11, 12, 14, 0.6); color: var(--text); border: 1px solid var(--line); padding: 6px 8px; }
.tl-q:focus { outline: none; border-color: var(--dim); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-chips button { padding: 3px 8px; font-size: 11px; }
.tl-pg { display: flex; align-items: center; gap: 8px; padding: 8px 4px 2px; color: var(--accent); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.tl-pg small { color: var(--dim); margin-left: auto; letter-spacing: 0; }
.tl-pg-i { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #222; flex: none; }
.tl-list button.tl-prow { grid-template-columns: 48px 1fr auto; align-items: center; padding: 4px 6px; }
.tl-pth { width: 48px; height: 48px; object-fit: cover; background: #0b0c0e; border: 1px solid var(--line); display: block; }
.tl-pth.body { border-radius: 50%; border: none; }
.tl-pnm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-pnm small { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-pbd { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10px; }
.tl-kind { text-transform: uppercase; letter-spacing: 0.08em; padding: 1px 5px; border: 1px solid var(--line); color: var(--dim); }
.tl-kind.landing { color: var(--accent); border-color: var(--accent); }
.tl-kind.flyby { color: var(--orbit); border-color: var(--orbit); }
.tl-kind.trip { color: #c9ccd1; border-color: #c9ccd1; }
.tl-pics, .tl-legs { color: var(--dim); }
.tl-aud { display: inline-flex; color: var(--accent); }   /* mission audio (an icon) */
.tl-aud .ic { width: 13px; height: 13px; }
.tl-list button.tl-prow.on { color: var(--text); background: rgba(255, 255, 255, 0.06); border-color: var(--accent); }
.tl-list button.tl-prow.on .tl-li-t { color: var(--accent); }

/* the Explorer's left panel, Paths and Shots tabs (timeline.js panel()): the same lists, in the panel's flow */
.tl-panel { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.tl-panel .tl-q { position: sticky; top: 0; z-index: 1; background: var(--panel, #15171a); }
.tl-list button.tl-srow { grid-template-columns: 48px 1fr auto; align-items: center; padding: 4px 6px; }
.tl-srow .tl-pth { border-radius: 50%; border: none; }
.tl-srow .tl-li-n { font-size: 15px; }

/* Events: text categories and actions instead of tiny, unexplained dots and icons. */
.tl-event-filters { display: flex; flex-direction: column; gap: 6px; }
.tl-event-filters .tl-q { width: 100%; min-width: 0; box-sizing: border-box; }
.tl-event-filters .tl-chips button { min-height: 32px; }
.tl-event-summary { color: var(--dim); font-size: 12px; }
.tl-event-status { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; }
.tl-event-reset { align-self: flex-start; }
.tl-event-reset[hidden] { display: none !important; }
.tl-event-results { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-event-results .tl-list { gap: 6px; }
.tl-event-results .tl-list button.tl-erow { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 6px; min-width: 0; }
.tl-erow .tl-li-t { white-space: normal; font-size: 14px; line-height: 1.3; }
.tl-erow .tl-li-d { white-space: normal; font-size: 12px; }
.tl-event-kind { color: var(--accent); font-size: 11px; }
.tl-event-results .tl-li-row > .tl-go { min-width: 58px; min-height: 36px; font-size: 12px; }
.tl-event-results .tl-li-row > .tl-go > .ic { display: block; width: 18px; height: 18px; margin: 0 auto 4px; }
[data-lay=phone] .tl-event-filters .tl-chips button,
[data-lay=phone] .tl-event-filters .tl-q,
[data-lay=phone] .tl-event-reset,
[data-lay=phone] .tl-event-results .tl-li-row > .tl-go { min-height: 40px; }