/* lesson-player.css: the lesson video player (2026-10-16).
 * Moved verbatim out of class/index.html's inline <style>; shared with the
 * public /lessons/ pages. Behaviour is lesson-player.js. */

    /* ── Lesson player ─────────────────────────────────────────────────────
       A page rule on ek tokens, not an ek component: ek has no media player
       and one lesson video is not the second use that would justify one.
       White on black is raw on purpose, same as the letterbox above.

       STATES, all on .lesson-player and all written by initLessonPlayer():
         is-idle      thumbnail, the play button and the Full screen pill
         is-starting  the thumbnail is fading into the video; nothing on top
         is-fresh     the first three seconds after play: the pill is still up
         is-chrome    the bottom bar is showing
         is-paused / is-waiting / is-full   what they say

       .lesson-player is what goes full screen and .lesson-player__stage is
       what turns sideways, and they have to be two elements: the browser's
       own :fullscreen rule sets transform: none !important on the element
       it promotes, so a stage that rotated itself would stop rotating the
       moment real full screen worked. */
    .lesson-player {
      position: absolute;
      inset: 0;
      background: #000;
      color: #fff;
      outline: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      --lp-pad-l: var(--ek-space-3);
      --lp-pad-r: var(--ek-space-3);
      --lp-pad-b: var(--ek-space-2);
    }
    .lesson-player__stage { position: absolute; inset: 0; overflow: hidden; }
    .lesson-player__poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      pointer-events: none;
      transition: opacity 800ms ease;
    }
    .lesson-player.is-idle .lesson-player__poster { opacity: 1; transition: none; }
    .lesson-player__poster:not([src]) { visibility: hidden; }

    .lesson-player button {
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }
    /* The one thing on the thumbnail that says "this plays". */
    .lesson-player__start {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 64px;
      height: 64px;
      margin: -32px 0 0 -32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--ek-radius-full);
      background: rgba(0, 0, 0, 0.55) !important;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.9);
      transition: opacity 300ms ease, transform 300ms ease;
    }
    /* The triangle's own viewBox is centred on its centroid (x = 11.67 of a
       path that runs 8 to 19), which is where a triangle looks centred. No
       nudge on top of that: the 3px one that was here pushed it visibly
       right. */
    .lesson-player__start svg { width: 30px; height: 30px; }
    .lesson-player__fullstart {
      position: absolute;
      left: 50%;
      bottom: var(--ek-space-3);
      /* Hidden it sits 10px low, so it rises as it fades in and sinks as it
         fades out (Hoon, 2026-10-18), rather than only fading. */
      transform: translate(-50%, 10px);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: var(--ek-space-2);
      height: 36px;
      padding: 0 var(--ek-space-3);
      border-radius: var(--ek-radius-full);
      background: rgba(0, 0, 0, 0.55) !important;
      font-size: var(--ek-type-caption) !important;
      font-weight: var(--ek-weight-strong) !important;
      opacity: 0;
      pointer-events: none;
      transition: opacity 300ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .lesson-player__fullstart svg { width: 16px; height: 16px; }
    .lesson-player.is-idle .lesson-player__start { opacity: 1; pointer-events: auto; transform: none; }
    /* The pill outlives the thumbnail by three seconds (is-fresh), so the
       offer is still there once the picture is moving. It goes the moment
       the bars come up, which carry their own, or full screen is entered. */
    .lesson-player.is-idle .lesson-player__fullstart,
    .lesson-player.is-fresh:not(.is-full):not(.is-chrome) .lesson-player__fullstart { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

    /* Double-tap seek: what just happened, on the side it happened. */
    .lesson-player__seekhint {
      position: absolute;
      top: 50%;
      width: 72px;
      height: 72px;
      margin-top: -36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      font-size: var(--ek-type-caption);
      font-weight: var(--ek-weight-strong);
      font-variant-numeric: tabular-nums;
      opacity: 0;
      pointer-events: none;
    }
    .lesson-player__seekhint--back { left: 12%; }
    .lesson-player__seekhint--fwd { right: 12%; }
    .lesson-player__seekhint.is-on { animation: lessonPlayerSeekHint 600ms ease; }
    @keyframes lessonPlayerSeekHint {
      0% { opacity: 0; transform: scale(0.85); }
      25% { opacity: 1; transform: none; }
      70% { opacity: 1; }
      100% { opacity: 0; }
    }
    /* "Swipe down to go back": the app's full screen says how to leave it,
       the one thing iOS's banner had that was worth keeping. Inside the
       stage, so it turns with the picture. */
    .lesson-player__exithint {
      position: absolute;
      top: max(var(--ek-space-4), env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translate(-50%, -8px);
      padding: var(--ek-space-2) var(--ek-space-4);
      border-radius: var(--ek-radius-full);
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: var(--ek-type-caption);
      font-weight: var(--ek-weight-strong);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms ease, transform 250ms ease;
    }
    .lesson-player__exithint.is-on { opacity: 1; transform: translate(-50%, 0); }
    .lesson-player.is-idle .lesson-player__stage { cursor: pointer; }

    /* One bar, at the bottom. It darkens its own edge of the picture and
       nothing else; the top of the frame is never covered. */
    .lesson-player__bar {
      position: absolute;
      left: 0;
      right: 0;
      padding-left: var(--lp-pad-l);
      padding-right: var(--lp-pad-r);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }
    .lesson-player.is-chrome .lesson-player__bar { opacity: 1; pointer-events: auto; }
    .lesson-player__bar--bottom {
      bottom: 0;
      padding-top: var(--ek-space-6);
      padding-bottom: var(--lp-pad-b);
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    }
    .lesson-player__row { display: flex; align-items: center; gap: var(--ek-space-1); }
    .lesson-player__btn {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--ek-radius-full);
    }
    .lesson-player__btn svg { width: 24px; height: 24px; }
    .lesson-player__speed {
      width: auto;
      min-width: 40px;
      padding: 0 var(--ek-space-2);
      font-size: var(--ek-type-caption) !important;
      font-weight: var(--ek-weight-strong) !important;
      font-variant-numeric: tabular-nums;
      margin-left: auto;     /* speed and full screen sit together at the right */
    }
    .lesson-player__time {
      margin-left: var(--ek-space-1);
      font-size: var(--ek-type-caption);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    /* No volume and no picture-in-picture: the device has its own volume, and
       a lesson you talk back to is not one you watch in a corner. */
    @media (hover: hover) {
      .lesson-player__btn:hover { background: rgba(255, 255, 255, 0.16); }
    }
    .lesson-player button:focus-visible,
    .lesson-player__scrub:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* Two icons per toggle, one shown. */
    .lesson-player__icon-on { display: none; }
    .lesson-player:not(.is-paused) .lesson-player__toggle .lesson-player__icon-on,
    .lesson-player.is-full .lesson-player__full .lesson-player__icon-on { display: block; }
    .lesson-player:not(.is-paused) .lesson-player__toggle .lesson-player__icon-off,
    .lesson-player.is-full .lesson-player__full .lesson-player__icon-off { display: none; }

    /* The scrubber is a 4px line in a 24px strip, so a thumb can find it. */
    .lesson-player__scrub {
      height: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;
      touch-action: none;
      outline: none;
    }
    .lesson-player__track {
      position: relative;
      width: 100%;
      height: 4px;
      border-radius: var(--ek-radius-full);
      background: rgba(255, 255, 255, 0.35);
    }
    .lesson-player__fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      border-radius: inherit;
      background: #fff;
    }
    .lesson-player__fill::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      border-radius: 50%;
      background: #fff;
    }

    .lesson-player__spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 36px;
      height: 36px;
      margin: -18px 0 0 -18px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease 400ms;
    }
    .lesson-player.is-waiting:not(.is-idle) .lesson-player__spinner {
      opacity: 1;
      animation: lessonPlayerSpin 800ms linear infinite;
    }
    @keyframes lessonPlayerSpin { to { transform: rotate(360deg); } }

    /* FULL SCREEN. Not the iPhone's: there the <video> goes into iOS's own
       full screen and none of this applies (see enterFull). This is the
       layer for browsers that can promote an element, and the fallback when
       one refuses. A phone held upright that the OS will not turn for us
       gets the stage turned a quarter; if the viewport does go landscape,
       the rotation lets go by itself. */
    .lesson-player.is-full {
      position: fixed;
      inset: 0;
      z-index: 2147483000;
      touch-action: none;
      --lp-pad-l: max(var(--ek-space-4), env(safe-area-inset-left, 0px));
      --lp-pad-r: max(var(--ek-space-4), env(safe-area-inset-right, 0px));
      --lp-pad-b: max(var(--ek-space-3), env(safe-area-inset-bottom, 0px));
    }
    @media (orientation: portrait) and (pointer: coarse) {
      .lesson-player.is-full .lesson-player__stage {
        inset: auto;
        top: 50%;
        left: 50%;
        width: 100vh;
        width: 100dvh;
        height: 100vw;
        transform: translate(-50%, -50%) rotate(90deg);
      }
      /* Turned, the stage's left edge is the phone's top (the notch) and
         its right edge is the home indicator. */
      .lesson-player.is-full {
        --lp-pad-l: max(var(--ek-space-4), env(safe-area-inset-top, 0px));
        --lp-pad-r: max(var(--ek-space-4), env(safe-area-inset-bottom, 0px));
        --lp-pad-b: var(--ek-space-3);
      }
    }
    html.lesson-player-full { overflow: hidden; }