/* ============================================================
   shared/video-player.css - VID1's shared video player. Markup contract is
   in shared/video-player.mjs; runtime is shared/video-player.js. No site
   copy, generic tokens only (var(--accent)/--line/--mono/--r-md/--exhale),
   so it themes wherever it loads.

   Reuses, does not restyle (VID1 UI review rule):
     poster + play mark   Watch's cards: the screening-room gradient, the
                          frosted 1px-ringed circle and the same triangle
                          (watch/watch.css .long-card .frame .play)
     control bar          the audio player's controls: 44px accent circle
                          play button, 5px square-ended track, mono 16px
                          time (shared/audio-player.css)
     modal                the book modal's overlay: z-index 300, the same
                          scrim recipe (a darker mix, deliberate: a film is
                          watched on dark), data-open fade, panel, close
                          button, body scroll lock (shared/book-modal.css)
   Type floor 16px, no pills (circles are square boxes), no OS motion gate;
   motion obeys the footer toggle (body.reduced) only.

   THEMING TOKENS (notion-core 1.9.0). Every look value is a custom property with the
   site's current value as the default, so a satellite sets a few lines and nothing else:
     --vp-accent        play button, focus ring, progress, active menu item (falls back to --accent)
     --vp-poster-bg     poster-less card background
     --vp-stage-bg      theatre/stage background        --vp-bar-bg     control bar + thumb card
     --vp-ink           text and icons on the stage     --vp-ink-dim    secondary text on the stage
     --vp-play-ink      play triangle on the poster     --vp-on-accent  glyph on the accent button
     --vp-letterbox     video letterbox                 --vp-ar         aspect ratio
     --line --mono --r-md --exhale --page-bg(2)/--ground-2   inherited from the host theme
   Deliberately not tokenised: the translucent white/black overlays (scrims, hover washes).
   ============================================================ */

.vp{margin:0 0 28px;max-width:100%}
.vp__cap{margin:10px 0 0;font-family:var(--mono,ui-monospace,monospace);font-size:16px;line-height:1.5;color:var(--ink-faint,#6c675e)}

/* ---- the poster (also the no-script link) ---- */
.vp__open{display:block;color:inherit;text-decoration:none;border-radius:var(--r-md,8px)}
.vp__open:focus-visible{outline:2px solid var(--vp-accent,var(--accent,#d09a5e));outline-offset:3px}
.vp__poster{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--vp-poster-bg,linear-gradient(150deg,#2a2622,#0e0d0c));
  border:1px solid var(--line,rgba(243,238,230,.12));border-radius:var(--r-md,8px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--vp-accent,var(--accent,#d09a5e)) 55%,transparent)}
.vp__poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.vp__img,.vp__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* a real picture behind the mark can be light: darken the frosted circle so it still reads */
.vp__poster:has(.vp__img,.vp__frame)::after{background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.6) 100%)}
/* play-mark placement (VID1b): chosen per video so the mark never covers a face, title or text.
   The link keeps the title as its accessible name when the visible one is hidden. */
.vp--play-low .vp__play{top:70%}
.vp--play-low .vp__title{display:none}
.vp--play-corner .vp__play{top:auto;left:auto;right:16px;bottom:16px;transform:none;width:56px;height:56px}
.vp--play-corner .vp__open:hover .vp__play{transform:scale(1.06)}
.vp--play-corner .vp__title{right:88px}
.vp--play-label .vp__play{top:auto;left:auto;right:16px;bottom:16px;transform:none;width:auto;min-height:48px;height:auto;border-radius:0;padding:6px 18px 6px 14px;
  display:flex;align-items:center;gap:10px;background:rgba(13,12,15,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
.vp--play-label .vp__play svg{margin-left:0;width:18px;height:18px;flex:none}
.vp--play-label .vp__play::after{content:attr(data-label);font-family:var(--mono,ui-monospace,monospace);font-size:16px;letter-spacing:.04em;color:var(--vp-ink,#f3eee6);white-space:nowrap}
.vp--play-label .vp__title{display:none}
.vp__img~.vp__play,.vp__frame~.vp__play{background:rgba(13,12,15,.6);border-color:rgba(255,255,255,.7)}
.vp__play{position:absolute;top:50%;left:50%;z-index:2;width:64px;height:64px;border-radius:50%;
  transform:translate(-50%,-50%);display:grid;place-items:center;
  background:rgba(244,241,234,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.4);transition:transform .4s var(--exhale,ease),border-color .4s var(--exhale,ease)}
.vp__play svg{width:22px;height:22px;margin-left:3px;fill:var(--vp-play-ink,#f4f1ea)}
.vp__open:hover .vp__play{transform:translate(-50%,-50%) scale(1.06);border-color:var(--vp-accent,var(--accent,#d09a5e))}
.vp__title{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-family:var(--mono,ui-monospace,monospace);font-size:16px;letter-spacing:.04em;line-height:1.35;color:var(--vp-ink,#f3eee6)}

/* ---- the player (inline in the flow, or inside the modal) ---- */
.vp__stage{background:var(--vp-stage-bg,#0a090c);color:var(--vp-ink,#f3eee6);overflow:hidden;
  border:1px solid var(--line,rgba(243,238,230,.12));border-radius:var(--r-md,8px)}
.vp__screen{position:relative;background:var(--vp-letterbox,#000)}
.vp__video{display:block;width:100%;aspect-ratio:var(--vp-ar,16/9);max-height:72vh;background:var(--vp-letterbox,#000);object-fit:contain}
.vp__video[hidden]{display:none}
.vp__bar{background:var(--vp-bar-bg,#131118);padding:6px 8px 8px;font-family:var(--mono,ui-monospace,monospace)}
.vp__bar{position:relative}
.vp__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vp__time{flex:1 1 auto;min-width:0;font-size:16px;color:var(--vp-ink-dim,#c3bdb2);font-variant-numeric:tabular-nums;white-space:nowrap}
.vp__btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--vp-ink,#f3eee6);transition:background .25s,color .25s}
.vp__btn:hover{background:rgba(243,238,230,.1)}
.vp__btn:focus-visible{outline:2px solid var(--vp-accent,var(--accent,#d09a5e));outline-offset:-2px}
.vp__btn svg{width:20px;height:20px;fill:currentColor}
.vp__btn.vp__pp{background:var(--vp-accent,var(--accent,#d09a5e));color:var(--vp-on-accent,#0d0c0f)}
.vp__btn.vp__pp:hover{background:var(--vp-accent,var(--accent,#d09a5e));transform:scale(1.06)}
.vp__btn.vp__pp svg{width:18px;height:18px}
.vp__btn[aria-pressed="true"]{color:var(--vp-accent,var(--accent,#d09a5e))}
.vp__btn[hidden]{display:none}
.vp__scrub{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:none}
.vp__scrub:focus-visible{outline:2px solid var(--vp-accent,var(--accent,#d09a5e));outline-offset:-2px}
.vp__scrub::-webkit-slider-runnable-track{height:5px;border-radius:0;background:linear-gradient(90deg,var(--vp-accent,var(--accent,#d09a5e)) var(--vp-pos,0%),rgba(243,238,230,.18) var(--vp-pos,0%))}
.vp__scrub::-moz-range-track{height:5px;border-radius:0;background:rgba(243,238,230,.18)}
.vp__scrub::-moz-range-progress{height:5px;background:var(--vp-accent,var(--accent,#d09a5e))}
.vp__scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--vp-ink,#f3eee6);border:0;margin-top:-6.5px}
.vp__scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--vp-ink,#f3eee6);border:0}
.vp__err{margin:0;padding:10px 14px;font-size:16px;line-height:1.5;color:var(--vp-ink,#f3eee6);background:var(--vp-bar-bg,#131118)}
.vp__err a{color:var(--vp-accent,var(--accent,#d09a5e))}

/* ---- the modal (book-modal's overlay recipe) ---- */
.vp-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--exhale,ease),visibility 0s linear .35s}
.vp-modal[data-open="true"]{opacity:1;visibility:visible;transition:opacity .35s var(--exhale,ease),visibility 0s linear 0s}
.vp-modal__scrim{position:absolute;inset:0;
  background:color-mix(in srgb,var(--page-bg2,var(--ground-2,var(--page-bg,#0d0c0f))) 12%,black);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vp-modal__panel{position:relative;z-index:1;width:100%;max-width:min(960px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:stretch;
  transform:translateY(10px) scale(.98);transition:transform .4s var(--exhale,ease)}
.vp-modal[data-open="true"] .vp-modal__panel{transform:none}
.vp-modal__close{all:unset;box-sizing:border-box;cursor:pointer;align-self:flex-end;flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:6px;color:var(--vp-ink,#f3eee6);font-family:var(--mono,ui-monospace,monospace);font-size:28px;line-height:1;
  transition:background .25s,color .25s}
.vp-modal__close:hover{background:rgba(243,238,230,.12)}
.vp-modal__close:focus-visible{outline:2px solid var(--vp-accent,var(--accent,#d09a5e));outline-offset:2px}
.vp-modal .vp__video{max-height:calc(100vh - 170px)}

body.reduced .vp-modal,body.reduced .vp-modal[data-open="true"],body.reduced .vp-modal__panel,body.reduced .vp__play{transition:none}
.vp-modal>span{position:absolute;width:1px;height:1px;overflow:hidden;outline:none}

/* ---- PLAYER2: options, menu, previews ---- */
.vp__stage[data-controls="false"] .vp__video{cursor:pointer}
.vp__scrubwrap{position:relative}
.vp__ticks{position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;pointer-events:none}
.vp__ticks span{position:absolute;top:0;width:2px;height:5px;margin-left:-1px;background:var(--vp-stage-bg,#0a090c)}
.vp__chap{margin:0;padding:0 4px;font-size:16px;line-height:1.4;color:var(--vp-ink-dim,#c3bdb2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp__chap[hidden],.vp__thumb[hidden],.vp__menu[hidden],.vp__status[hidden],.vp__debug[hidden]{display:none}
.vp__thumb{position:absolute;bottom:100%;z-index:3;margin-bottom:4px;padding:4px;background:var(--vp-bar-bg,#131118);
  border:1px solid rgba(243,238,230,.2);border-radius:var(--r-md,8px);pointer-events:none;max-width:100%}
.vp__thumbimg{display:none}
.vp__thumbtime{display:block;font-size:16px;line-height:1.4;color:var(--vp-ink,#f3eee6);white-space:nowrap;font-variant-numeric:tabular-nums}
.vp__status{position:absolute;left:50%;top:14px;z-index:3;transform:translateX(-50%);margin:0;padding:6px 14px;max-width:90%;
  font-size:16px;line-height:1.4;color:var(--vp-ink,#f3eee6);background:rgba(13,12,15,.82);border-radius:var(--r-md,8px);pointer-events:none}
.vp__menu{position:absolute;inset:0;z-index:4;overflow-y:auto;padding:10px 12px;background:rgba(10,9,12,.94);color:var(--vp-ink,#f3eee6);font-family:var(--mono,ui-monospace,monospace)}
.vp__mh{margin:8px 0 4px;font-size:16px;line-height:1.4;color:var(--vp-ink-dim,#c3bdb2);letter-spacing:.04em}
.vp__mg{display:flex;flex-wrap:wrap;gap:6px}
.vp__mi{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;
  font-size:16px;line-height:1.3;color:var(--vp-ink,#f3eee6);border:1px solid rgba(243,238,230,.2);border-radius:var(--r-md,8px);transition:background .25s,border-color .25s}
.vp__mi:hover{background:rgba(243,238,230,.1)}
.vp__mi:focus-visible{outline:2px solid var(--vp-accent,var(--accent,#d09a5e));outline-offset:2px}
.vp__mi[aria-checked="true"]{border-color:var(--vp-accent,var(--accent,#d09a5e));color:var(--vp-accent,var(--accent,#d09a5e))}
.vp__debug{position:absolute;left:8px;top:8px;z-index:3;margin:0;padding:8px 10px;max-width:calc(100% - 16px);overflow:hidden;
  font-family:var(--mono,ui-monospace,monospace);font-size:16px;line-height:1.4;color:var(--vp-ink,#f3eee6);background:rgba(13,12,15,.82);
  white-space:pre-wrap;word-break:break-all;pointer-events:none}
.vp__stage:fullscreen,.vp__stage:-webkit-full-screen{display:flex;flex-direction:column;border-radius:0;border:0}
.vp__stage:fullscreen .vp__screen,.vp__stage:-webkit-full-screen .vp__screen{flex:1;min-height:0}
.vp__stage:fullscreen .vp__video,.vp__stage:-webkit-full-screen .vp__video{height:100%;max-height:none;aspect-ratio:auto}
body.reduced .vp__mi{transition:none}
/* a phone: the duration and the captions button give way so the row stays on one line (captions stay in the menu and on c) */
@media(max-width:420px){.vp__dur,.vp__cc{display:none}}