/*
 * The video control bar (components/VideoControls.astro, js/video-controls.js) — under a
 * video's frame, never over the picture. Used by the product page's workflow videos
 * (components/ProductModule.astro) and the app pages' tutorials (components/AppTutorials.astro).
 *
 * Every control is a 22px square of mono-grey that turns orange on hover / focus. The
 * playhead (and the tutorials' volume slider) is a 2px track whose filled part is the --p
 * custom property (0–100%), set by the script. State classes on the bar, also set by the
 * script: .is-paused, .is-muted, .is-captions, .is-fullscreen.
 *
 * Full screen (tutorials): the bar's parent (the player: frame + bar) goes full screen and
 * gets .is-fullscreen; the page styles its frame for that, this sheet only turns the bar
 * light on the black.
 *
 * On a black section (.vctl--dark, VideoControls' `dark` prop: the app pages' dark
 * tutorials band) the bar takes that same light look all the time. The product page's
 * bars sit on the light zone and don't use it.
 */
.vctl {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; height: 22px;
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.5);
}
.vctl[hidden],
.vctl [hidden] { display: none; }
.vctl__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; color: rgba(0, 0, 0, 0.5);
  border: 0; cursor: pointer; transition: color 0.15s;
}
.vctl__btn:hover, .vctl__btn:focus-visible { color: var(--orange-dark); outline: none; }
.vctl__btn:focus-visible { box-shadow: 0 0 0 1px var(--orange); }
.vctl__icon { width: 10px; height: 10px; fill: currentColor; }
.vctl__icon--lg { width: 12px; height: 12px; }   /* the more detailed tutorial icons */
.vctl__icon--play { display: none; }
.vctl.is-paused .vctl__icon--pause { display: none; }
.vctl.is-paused .vctl__icon--play { display: block; }
.vctl__x { display: none; }
.vctl.is-muted .vctl__waves { display: none; }
.vctl.is-muted .vctl__x { display: inline; }
.vctl.is-captions .vctl__cc { color: var(--orange-dark); }
.vctl__icon--fs-off { display: none; }
.vctl.is-fullscreen .vctl__icon--fs-on { display: none; }
.vctl.is-fullscreen .vctl__icon--fs-off { display: block; }

.vctl__seek,
.vctl__vol {
  --p: 0%;
  flex: 1; min-width: 60px; height: 14px; margin: 0 4px; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.vctl__vol { --p: 100%; flex: none; width: 56px; min-width: 0; margin: 0 4px 0 0; }
.vctl__seek::-webkit-slider-runnable-track,
.vctl__vol::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(var(--orange), var(--orange)) 0 0 / var(--p) 100% no-repeat, rgba(0, 0, 0, 0.14);
}
.vctl__seek::-moz-range-track, .vctl__vol::-moz-range-track { height: 2px; background: rgba(0, 0, 0, 0.14); }
.vctl__seek::-moz-range-progress, .vctl__vol::-moz-range-progress { height: 2px; background: var(--orange); }
/* the handle only shows when you go for it: hover, focus or drag */
.vctl__seek::-webkit-slider-thumb,
.vctl__vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3px; background: var(--orange); border: 0; border-radius: 0;
  opacity: 0; transition: opacity 0.15s;
}
.vctl__seek::-moz-range-thumb, .vctl__vol::-moz-range-thumb { width: 8px; height: 8px; background: var(--orange); border: 0; border-radius: 0; opacity: 0; transition: opacity 0.15s; }
.vctl__seek:hover::-webkit-slider-thumb, .vctl__seek:focus-visible::-webkit-slider-thumb, .vctl__seek:active::-webkit-slider-thumb,
.vctl__vol:hover::-webkit-slider-thumb, .vctl__vol:focus-visible::-webkit-slider-thumb, .vctl__vol:active::-webkit-slider-thumb { opacity: 1; }
.vctl__seek:hover::-moz-range-thumb, .vctl__seek:focus-visible::-moz-range-thumb, .vctl__seek:active::-moz-range-thumb,
.vctl__vol:hover::-moz-range-thumb, .vctl__vol:focus-visible::-moz-range-thumb, .vctl__vol:active::-moz-range-thumb { opacity: 1; }
.vctl__seek:focus-visible, .vctl__vol:focus-visible { outline: none; }
.vctl__time { flex: none; font-variant-numeric: tabular-nums; }
.vctl__state { flex: none; color: var(--orange-dark); text-transform: uppercase; letter-spacing: 0.12em; }
.vctl__state:empty { display: none; }

/* The bar on black: in full screen, and on a dark section (.vctl--dark) */
.vctl.is-fullscreen, .vctl.is-fullscreen .vctl__btn,
.vctl--dark, .vctl--dark .vctl__btn { color: rgba(255, 255, 255, 0.7); }
.vctl.is-fullscreen .vctl__btn:hover, .vctl.is-fullscreen .vctl__btn:focus-visible,
.vctl.is-fullscreen.is-captions .vctl__cc,
.vctl--dark .vctl__btn:hover, .vctl--dark .vctl__btn:focus-visible,
.vctl--dark.is-captions .vctl__cc { color: var(--orange); }
.vctl.is-fullscreen .vctl__seek::-webkit-slider-runnable-track,
.vctl.is-fullscreen .vctl__vol::-webkit-slider-runnable-track,
.vctl--dark .vctl__seek::-webkit-slider-runnable-track,
.vctl--dark .vctl__vol::-webkit-slider-runnable-track {
  background: linear-gradient(var(--orange), var(--orange)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.24);
}
.vctl.is-fullscreen .vctl__seek::-moz-range-track, .vctl.is-fullscreen .vctl__vol::-moz-range-track,
.vctl--dark .vctl__seek::-moz-range-track, .vctl--dark .vctl__vol::-moz-range-track { background: rgba(255, 255, 255, 0.24); }
.vctl.is-fullscreen .vctl__state, .vctl--dark .vctl__state { color: var(--orange); }

/* Phones: no room (and little use) for a volume slider; mute stays */
@media (max-width: 620px) {
  .vctl__vol { display: none; }
}