/* Scene player (shared/engine/player.js). Self-contained: every class starts with "qs-player", "qs-" and
   nothing else on the page is touched. (The scene SVG itself carries its own `.qs`-scoped <style>.)

   Theme it from the page by setting these custom properties on the player or any ancestor:
     --qs-fg         text and icon colour
     --qs-bg         background of the caption bar and the controls
     --qs-accent     play button, focus ring, scrub bar
     --qs-on-accent  icon colour on the accent (default white, dark in the dark fallback)
     --qs-radius     corner radius of the stage and the buttons (default 10px)
     --qs-font       font stack
   Without them the player follows prefers-color-scheme. */

.qs-player {
  --_fg: var(--qs-fg, #1f2933);
  --_bg: var(--qs-bg, #ffffff);
  --_accent: var(--qs-accent, #1d6fdc);
  --_on-accent: var(--qs-on-accent, #ffffff);
  --_radius: var(--qs-radius, 10px);
  --_line: rgba(128, 128, 128, 0.4);
  --_btn: 40px;

  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  color: var(--_fg);
  font: 400 14px/1.4 var(--qs-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  -webkit-text-size-adjust: 100%;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .qs-player {
    --_line: color-mix(in srgb, var(--_fg) 28%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  .qs-player {
    --_fg: var(--qs-fg, #e6edf3);
    --_bg: var(--qs-bg, #161b22);
    --_accent: var(--qs-accent, #58a6ff);
    --_on-accent: var(--qs-on-accent, #0b1220);
  }
}

@media (pointer: coarse) {
  .qs-player {
    --_btn: 44px;
  }
}

.qs-player *,
.qs-player *::before,
.qs-player *::after {
  box-sizing: border-box;
}

/* ---- stage: the SVG and the captions ---- */

.qs-stage {
  overflow: hidden;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_bg);
}

.qs-svg {
  line-height: 0;
}

.qs-svg > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--qs-ar, 16 / 9);
}

.qs-captions-box {
  display: grid;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--_line);
  background: var(--_bg);
  color: var(--_fg);
  font-size: 1rem;
  line-height: 1.4;
}

.qs-captions-box[hidden],
.qs-captions[hidden] {
  display: none;
}

/* The live region and the sizer sit in the same grid cell, so the box is as tall as the tallest set of
   captions that is ever shown together (the sizer holds all of them, invisibly). The caption area never
   changes height while the scene plays, so the controls below it stay put. */
.qs-captions,
.qs-captions-sizer {
  grid-area: 1 / 1;
  min-width: 0;
}

.qs-captions-sizer {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

.qs-sizer-set {
  grid-area: 1 / 1;
  min-width: 0;
}

.qs-caption,
.qs-sizer-line {
  margin: 0;
  overflow-wrap: anywhere;
}

.qs-caption + .qs-caption,
.qs-sizer-line + .qs-sizer-line {
  margin-top: 0.15em;
}

/* ---- controls ---- */

.qs-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.qs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The scrub bar and its time label share one line; the buttons wrap when the player is narrow. */
.qs-row-time {
  flex-wrap: nowrap;
}

.qs-row-buttons {
  flex-wrap: wrap;
}

.qs-scrub {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--_btn);
  margin: 0;
  accent-color: var(--_accent);
  cursor: pointer;
  touch-action: pan-y;
}

.qs-scrub:disabled {
  cursor: default;
}

.qs-time {
  flex: none;
  min-width: 7.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--_btn);
  height: var(--_btn);
  padding: 0;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.qs-btn:hover:not(:disabled) {
  border-color: var(--_accent);
}

.qs-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.qs-btn:disabled,
.qs-speed:disabled {
  opacity: 0.4;
  cursor: default;
}

.qs-play {
  border-color: var(--_accent);
  background: var(--_accent);
  color: var(--_on-accent);
}

.qs-play:hover:not(:disabled) {
  filter: brightness(1.08);
}

.qs-icon {
  display: block;
  pointer-events: none;
}

.qs-speed {
  min-width: 4.6em;
  height: var(--_btn);
  margin-left: auto;
  padding: 0 0.5em;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  cursor: pointer;
}

/* A focus ring everyone can see, on every control. */
.qs-btn:focus-visible,
.qs-scrub:focus-visible,
.qs-speed:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 2px;
}

/* Transitions only for people who did not ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .qs-btn,
  .qs-speed {
    transition: border-color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-btn:active:not(:disabled) {
    transform: none;
  }
}

/* Narrow players (a 320 px phone): tighter gaps, the time label gives up some width. */
@media (max-width: 400px) {
  .qs-row {
    gap: 6px;
  }

  .qs-time {
    min-width: 6.8em;
    font-size: 13px;
  }

  .qs-captions-box {
    padding: 0.5rem 0.65rem;
  }
}

@media (forced-colors: active) {
  .qs-play {
    border-color: ButtonText;
  }
}