/* The build timelapse player (FEAT-mcstats-18; timelapse-player.js). Kit's
   tokens only, so it wears Clean (light and dark) and Retro like the page.
   The frame keeps its size from its width/height attributes (its own
   pixels, never blown up: RV-MSS18-10), so nothing moves between frames;
   targets are 24 px, 44 px on a phone or a touch screen. live.css still
   styles the figure, its caption and the links. */

.tl-player .tl-stage { position: relative; }
.tl-player .tl-frame { display: block; max-width: 100%; height: auto; }
/* Without script the plain picture in <noscript> shows instead (RV-MSS18-7). */
@media (scripting: none) { .tl-player .tl-frame { display: none; } }
.tl-player noscript img { display: block; max-width: 100%; height: auto; }

.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.tl-bar[hidden] { display: none; }
.tl-bar button {
  min-height: 24px; min-width: 24px; padding: 2px 12px; font: inherit; font-size: 14px; line-height: 1.2;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-alt, var(--border));
  border-radius: var(--radius-full, 999px); cursor: pointer;
}
.tl-bar .tl-play { min-width: 72px; font-weight: 600; }
.tl-bar button[aria-pressed="true"] {
  color: var(--accent-soft-text, var(--text)); background: var(--accent-soft, var(--surface-alt));
  border-color: var(--accent);
}
.tl-bar button:focus-visible, .tl-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-slider { flex: 1 1 200px; min-width: 140px; min-height: 24px; margin: 0; accent-color: var(--accent); }
/* Tabular digits, one line, and a width timelapse-player.js sets from the
   set's longest text: the date changing never moves the bar (RV-MSS18-4). */
.tl-date { display: inline-block; min-width: 15ch; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-muted); font-size: 14px; }
.tl-speed { display: inline-flex; gap: 6px; }
.tl-speed .tl-speed-btn { padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* With the player running, the no-script play/stop links are not needed. */
.tl-ready + .tl-controls { display: none; }

@media (max-width: 600px), (pointer: coarse) {
  .tl-bar button, .tl-slider { min-height: 44px; }
  .tl-bar button { min-width: 44px; }
  .tl-slider { flex-basis: 100%; order: -1; }
}

/* Retro: square corners, the ridge frame, the page's font. */
:root:not([data-theme="clean"]) .tl-bar button { border-radius: 0; border: 2px outset var(--border); }
:root:not([data-theme="clean"]) .tl-bar button[aria-pressed="true"] { border-style: inset; }