/*
 * Every video on the site (DS50, 2026-10-14): the player player-v1.js draws, and the guides' steps.
 * Loaded only by the pages that show a video: index, features, tutorials, workspace, gst-downloader.
 */

/* ---- The player: the picture, the big play button, the sentence, the bar ---- */
.vp { position: relative; }
.vp-stage { position: relative; background: #061f26; }
.vp-stage video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #061f26;
  cursor: pointer;
}
.vp-stage video:focus-visible { outline: 3px solid #9fe3ea; outline-offset: -3px; }
.vp-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 63, 75, 0.88);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.vp-big svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
.vp-big:hover { transform: scale(1.06); background: var(--teal); }
.vp-big:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vp-big[hidden] { display: none; }

.vp-wait {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: vp-spin 0.9s linear infinite;
  transition: opacity 0.2s;
}
.vp.is-waiting .vp-wait { opacity: 1; }
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* The sentence being spoken, large enough to read on a phone. */
.vp-caption {
  margin: 0;
  padding: 10px 18px;
  min-height: calc(1.45em * 2 + 20px);
  display: grid;
  place-items: center;
  background: #0b2c34;
  color: #fff;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.vp-caption[hidden],
.vp:not(.is-started) .vp-caption { display: none; }

.vp-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--teal-deep);
  color: var(--on-dark);
}
.vp-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.vp-btn svg { width: 22px; height: 22px; fill: currentColor; }
.vp-btn:hover { background: rgba(255, 255, 255, 0.12); }
.vp-btn:focus-visible { outline: 3px solid #9fe3ea; outline-offset: 1px; }
.vp-btn[aria-pressed="true"],
.vp-speed.is-on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vp-btn[hidden] { display: none; }
.vp-time {
  flex: none;
  min-width: 92px;
  padding: 0 6px;
  color: var(--on-dark-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.vp-seek { position: relative; flex: 1 1 auto; min-width: 80px; height: 40px; display: flex; align-items: center; }
.vp-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background: linear-gradient(to right,
    #6fd3db 0 var(--vp-pos, 0%),
    rgba(255, 255, 255, 0.38) var(--vp-pos, 0%) var(--vp-buf, 0%),
    rgba(255, 255, 255, 0.18) var(--vp-buf, 0%));
  cursor: pointer;
}
.vp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.vp-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.vp-range:focus-visible { outline: 3px solid #9fe3ea; outline-offset: 6px; }
/* A chapter starts at each gap in the track. */
.vp-marks { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); pointer-events: none; z-index: 2; }
.vp-mark { position: absolute; top: 0; width: 3px; height: 6px; margin-left: -1.5px; background: var(--teal-deep); }
.vp-tip {
  position: absolute;
  bottom: 40px;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: var(--sh-md);
  pointer-events: none;
}
.vp-tip[hidden] { display: none; }

/* Full screen: the whole player, the picture filling what the sentence and the bar leave. */
.vp:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; border: 0; border-radius: 0; }
.vp:fullscreen .vp-stage { flex: 1 1 auto; min-height: 0; display: flex; }
.vp:fullscreen .vp-stage video { height: 100%; aspect-ratio: auto; object-fit: contain; }
.vp:fullscreen figcaption { display: none; }

@media (max-width: 560px) {
  .vp-bar { flex-wrap: wrap; row-gap: 0; padding: 4px 6px 6px; }
  .vp-seek { order: -1; flex-basis: 100%; height: 30px; padding: 0 6px; }
  .vp-time { min-width: 0; margin-right: auto; }
  .vp-big { width: 68px; height: 68px; }
  .vp-big svg { width: 30px; height: 30px; }
}

/* ---- The film ----
   Its play button sits at the poster's foot, over a soft shade, clear of the name and the promise the
   poster shows in its middle (a centred button covered them: "CA ▶ 1:45 Toolkit" on a phone). */
.film-player.vp .film-play { z-index: 2; inset: auto auto 18px 18px; margin: 0; }
.film-player.vp .vp-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, rgba(2, 18, 22, 0.6));
  pointer-events: none;
  transition: opacity 0.2s;
}
.film-player.vp.is-started .vp-stage::after { opacity: 0; }
@media (max-width: 560px) {
  .film-player.vp .film-play { left: 10px; bottom: 10px; gap: 8px; padding: 4px 12px 4px 4px; font-size: 0.9rem; }
  .film-player.vp .film-play i { width: 34px; height: 34px; font-size: 0.95rem; }
}

/* ---- The guides' steps beside the player ----
   The column takes the row's height (the player's), and its list scrolls inside it. align-items: start
   on the grid had left the column at its 260 px minimum, so a guide showed two or three of its ten
   steps with no sign there were more (2026-10-14). */
.guide-grid > .guide-side { align-self: stretch; }
.guide-side-scroll { padding-bottom: 28px; }
.guide-side::after {
  content: "";
  position: absolute;
  left: 0;
  right: 6px;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--bg, #fbfaf7));
  pointer-events: none;
}
@media (max-width: 960px) {
  .guide-side::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-big, .vp-btn { transition: none; }
  .vp-big:hover { transform: none; }
  .vp-wait { animation-duration: 2.4s; }
}