/* ══════════════════════════════════════════════════════════════════════════
   LF VIDEO — shared custom player (styles).
   Pairs with assets/js/lf-video.js. Used by the Academy lesson pages and the
   webinar recordings, so the two never drift apart. Markup contract:

     <div class="lc-player lc-player--video lc-vid is-paused" data-lc-video>
       <video controls preload="metadata" playsinline>…</video>
       <div class="lc-vid__bar" hidden data-lc-bar>…</div>
     </div>

   The <video> ships WITH the native `controls` attribute; the script strips it
   only once it has wired up its own bar, so a JS failure degrades to a working
   native player rather than a bare frame.
   ══════════════════════════════════════════════════════════════════════════ */

/* Doubled class (0-2-0) on purpose. The lesson page defines `.lc-player` in an
   inline <style> that the browser sees AFTER this file's <link>, so at equal
   specificity the poster rules won and the recording inherited the poster's
   26px padding and navy gradient — the video sat inset in a navy frame instead
   of filling its box. */
.lc-player.lc-player--video { padding: 0; background: #000; display: block; }
.lc-player.lc-player--video::before { content: none; }
/* `cover` not `contain`: the well is 16/9 and so is the source, so they agree —
   but a 4:3 or vertical clip should fill the frame rather than sit in pillars. */
.lc-player.lc-player--video .lc-player__video {
  width: 100%; height: 100%; display: block; object-fit: cover; background: #000;
}

/* ── custom control bar ────────────────────────────────────────────────────
   Hand-rolled rather than a player library: the whole estate restates styles
   instead of pulling dependencies, and everything below is ~80 lines against
   the plain HTMLMediaElement API. The scrubber is a real <input type=range>,
   not a styled div — that buys keyboard seeking, drag, and screen-reader
   semantics for free, which is the part hand-rolled players usually get wrong.
   The markup ships with the native `controls` attribute set; the script strips
   it only once it has taken over, so with JS off the native bar still works. */
.lc-vid { position: relative; }
/* Which icon shows is driven by a CLASS on the wrapper, not by the `hidden`
   attribute. leapforce.css sets `img, svg { display: block }`, and fighting
   that with `[hidden]` proved unreliable — the pair rendered correctly while
   paused and inverted while playing. One class, two explicit rules, no cascade
   race. The script still keeps `hidden` in sync for assistive tech. */
.lc-vid.is-paused .lc-vid__i-pause { display: none; }
.lc-vid:not(.is-paused) .lc-vid__i-play { display: none; }
.lc-vid.is-muted .lc-vid__i-on { display: none; }
.lc-vid:not(.is-muted) .lc-vid__i-off { display: none; }
.lc-vid__bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(18, 18, 30, .58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
/* The bar is up whenever the pointer is over the player, the video is paused,
   or focus is inside it — that last one is what keeps it reachable by keyboard. */
.lc-vid:hover .lc-vid__bar,
.lc-vid:focus-within .lc-vid__bar,
.lc-vid.is-paused .lc-vid__bar { opacity: 1; transform: none; }

.lc-vid__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #fff; cursor: pointer;
  transition: background-color .15s ease;
}
.lc-vid__btn:hover { background: rgba(255, 255, 255, .16); }
.lc-vid__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the play control is the one filled button, as in the reference */
.lc-vid__btn--play { width: 40px; height: 40px; background: #fff; color: #14132f; }
.lc-vid__btn--play:hover { background: #fff; transform: scale(1.05); }
.lc-vid__btn--rate { width: auto; padding: 0 10px; border-radius: 100px; font: 600 13px/1 var(--z-font); }
/* CC reads as a labelled control, and gets a filled state when captions are on
   so the toggle's state is visible without hovering for the tooltip. */
.lc-vid__btn--cc { width: auto; padding: 0 9px; border-radius: 5px;
  font: 700 11px/1 var(--z-font); letter-spacing: .06em;
  box-shadow: inset 0 0 0 1.5px currentColor; }
.lc-vid.is-cc .lc-vid__btn--cc { background: #fff; color: #14132f; }

.lc-vid__time {
  flex: none; font: 500 13px/1 var(--z-font); color: #fff;
  font-variant-numeric: tabular-nums; /* the digits must not jitter while playing */
}

/* Range input, restyled in both engines. The track is painted with a gradient
   whose stop is driven by --p (set in JS), so progress needs no extra element. */
.lc-vid__seek {
  flex: 1; min-width: 0; height: 20px; margin: 0;
  background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lc-vid__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 100px; }
.lc-vid__seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 100px;
  background: linear-gradient(90deg, #fff 0 var(--p, 0%), rgba(255, 255, 255, .34) var(--p, 0%) 100%);
}
.lc-vid__seek::-moz-range-track {
  height: 4px; border-radius: 100px;
  background: linear-gradient(90deg, #fff 0 var(--p, 0%), rgba(255, 255, 255, .34) var(--p, 0%) 100%);
}
.lc-vid__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: #fff; border: 0;
}
.lc-vid__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* On a phone all seven controls on one line left the scrubber ~66px wide —
   too narrow to aim at, let alone drag. The scrubber takes its own full-width
   row above the buttons, which is what every native mobile player does. */
@media (max-width: 640px) {
  .lc-vid__bar {
    left: 8px; right: 8px; bottom: 8px;
    flex-wrap: wrap; gap: 8px; row-gap: 6px;
    padding: 8px 12px; border-radius: 16px;
  }
  .lc-vid__seek { order: -1; flex: 1 0 100%; }
  .lc-vid__btn--play { width: 34px; height: 34px; }
  .lc-vid__time { font-size: 12px; }
  /* pushes the two clocks to the outer edges of the button row */
  .lc-vid__time:first-of-type { margin-right: auto; }
  .lc-vid__time:last-of-type { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-vid__bar { transition: none; }
}
.lc-player__note { margin: 10px 0 0; font: 400 14px/20px var(--z-font); color: var(--lc-meta); }

/* ── video script ──────────────────────────────────────────────────────────
   The spoken track, in writing, folded under the player. Collapsed by default:
   open, it is ~250 words sitting between the video and the lesson, which
   pushes the actual lesson below the fold. <details> does the toggling with no
   script, so it still opens with JS off and is keyboard-operable for free. */
.lc-script {
  margin-top: 12px; border-radius: 10px; padding: 0 18px;
  box-shadow: inset 0 0 0 1px var(--lc-rule);
}
.lc-script > summary {
  padding: 13px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  font: 600 15px/22px var(--z-font); color: var(--lc-accent);
}
.lc-script > summary::-webkit-details-marker { display: none; }
.lc-script > summary::after { content: "\25BE"; font-size: 12px; }
.lc-script[open] > summary::after { content: "\25B4"; }
.lc-script__body { padding: 2px 0 18px; }
.lc-script__body p { margin: 0 0 12px; font: 400 16px/27px var(--z-font); color: var(--lc-meta); }
.lc-script__body p:last-child { margin-bottom: 0; }