/* ============================================================
   Blakey Trades — Premium Academy Player (BTPlayer v2)
   Self-contained chrome for the education video sheet.
   Consumes the app design tokens (tokens.css): --gold, --surface,
   --text, --muted, --line, --mono, --ease-spring, --glass-blur …
   Motion: opacity + transform only. No transition-all anywhere.
   ============================================================ */

/* ---------- stage ---------- */
/* The frame is 16:9 — matching the source material — and full-bleed to the sheet
   edges. The old rule was height:min(80vw,384px), which letterboxed a 16:9 video
   inside a near-square box: ~60px of dead black bar above and below the picture on
   every phone, which is why the player read as "small". */
.vp-stage{
  position:relative;
  margin:2px -18px 0;              /* cancels .sheet's 18px side padding */
  /* height:auto is load-bearing: .edu-stage/.player-real in styles.css still set
     height:min(80vw,384px), and with a fixed height the aspect-ratio resolves the
     WIDTH instead (533px on a 375px viewport) and blows out of the sheet. */
  width:auto;height:auto;
  aspect-ratio:16/9;
  max-height:min(64vh,560px);
  overflow:hidden;
  background:#000;
  border:none;
  border-block:1px solid var(--line);
  border-radius:0;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
.vp-stage:focus{outline:none}
.vp-stage:fullscreen,.vp-stage:-webkit-full-screen{
  position:fixed;inset:0;z-index:9999;
  width:100%;height:100%;max-height:none;
  margin:0;aspect-ratio:auto;
  border-radius:0;border:none;
}
.vp-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;
}
.vp-stage:fullscreen .vp-video,.vp-stage:-webkit-full-screen .vp-video{object-fit:contain}
/* iPhone legacy video fullscreen (webkitEnterFullscreen) paints native chrome —
   hide our overlays so nothing double-renders on top of it */
.vp-legacyfs .vp-top,.vp-legacyfs .vp-controls,.vp-legacyfs .vp-transport,
.vp-legacyfs .vp-flash,.vp-legacyfs .vp-ended{display:none!important}

/* ---------- top gradient + title bar ---------- */
.vp-top{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 26px;
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;
}
/* back button always visible — not gated behind vp-show */
.vp-back{
  flex:none;width:44px;height:44px;border:none;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  pointer-events:auto;
  transition:transform .18s var(--ease-spring),background-color .18s ease;
}
.vp-back:active{transform:scale(.9);background:rgba(0,0,0,.65)}
.vp-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Title rides with the chrome. It was display:none — the only text in the frame,
   so in fullscreen there was no indication of which lesson was playing. */
.vp-titlebox{
  display:flex;flex-direction:column;gap:2px;
  min-width:0;flex:1;                       /* min-width:0 lets the children ellipsis */
  opacity:0;transform:translateY(-4px);
  transition:opacity .26s var(--ease-spring),transform .26s var(--ease-spring);
}
.vp-show .vp-titlebox{opacity:1;transform:none}
.vp-kicker,.vp-title{
  display:block;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vp-kicker{
  font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.vp-title{
  font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:var(--tracking);color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}

/* On phones the sheet's 12px gutter costs ~7% of frame width for nothing —
   the video is the content here, so let it run to the screen edge. */
@media (max-width:430px){
  .modal-cinema .sheet{margin:0;width:100%;max-width:none}
}

/* ---------- buffering spinner ---------- */
.vp-spinner{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .2s ease;
}
.vp-waiting .vp-spinner{opacity:1}
.vp-ring{
  width:52px;height:52px;border-radius:50%;
  border:3px solid rgba(255,255,255,.16);
  border-top-color:var(--gold);
  animation:vp-spin .8s linear infinite;
}
@keyframes vp-spin{to{transform:rotate(360deg)}}

/* ---------- tap feedback flash ---------- */
.vp-flash{
  position:absolute;top:50%;left:50%;z-index:4;
  width:64px;height:64px;margin:-32px 0 0 -32px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.6);pointer-events:none;
}
.vp-flash svg{width:26px;height:26px;fill:currentColor;stroke:none}
.vp-flash.vp-pop{animation:vp-pop .55s var(--ease-spring) forwards}
@keyframes vp-pop{
  0%{opacity:0;transform:scale(.6)}
  25%{opacity:1;transform:scale(1.05)}
  60%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.16)}
}

/* ---------- resume pill ---------- */
.vp-resume{
  /* was bottom:170px — tuned for the old 384px-tall box; on the 16:9 frame that
     put the pill above the middle of the picture. Sits just clear of the dock. */
  position:absolute;left:50%;bottom:84px;z-index:6;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  max-width:calc(100% - 24px);
  padding:8px 8px 8px 15px;border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--line-2);
  box-shadow:var(--elev-3);
  animation:vp-rise .35s var(--ease-spring) both;
}
.vp-resume[hidden]{display:none!important}
.vp-resume-txt{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vp-resume-txt b{color:var(--gold);font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.vp-resume-go{
  border:none;cursor:pointer;height:34px;padding:0 16px;border-radius:999px;
  background:var(--gold);color:var(--on-accent);
  font-family:var(--body);font-size:12px;font-weight:700;
  transition:transform .16s var(--ease-spring);
}
.vp-resume-go:active{transform:scale(.94)}
.vp-resume-no{
  border:none;background:none;cursor:pointer;padding:6px;
  color:var(--muted);display:grid;place-items:center;
  transition:color .16s ease;
}
.vp-resume-no:active{color:var(--text)}
.vp-resume-no svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@keyframes vp-rise{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- ended card ---------- */
.vp-ended{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 16px;text-align:center;overflow-y:auto;  /* the 16:9 frame is short — never clip the CTAs */
  background:rgba(4,4,6,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:vp-fadein .3s ease both;
}
.vp-ended[hidden]{display:none!important}
@keyframes vp-fadein{from{opacity:0}to{opacity:1}}
.vp-ended-check{
  flex:none;
  width:34px;height:34px;border-radius:50%;margin-bottom:0;
  display:grid;place-items:center;color:var(--on-accent);
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
  box-shadow:var(--glow-gold);
}
.vp-ended-check svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vp-ended-kicker{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* A 16:9 frame is ~210px tall on a phone — every element here is sized to fit
   without the stack colliding. line-height must be explicit: -webkit-line-clamp
   resolves its box height from it, and without one the clamped text overlapped
   the row beneath. */
.vp-ended-title{
  flex:none;max-width:100%;
  font-family:var(--display);font-size:15px;font-weight:700;line-height:1.25;
  letter-spacing:var(--tracking);color:#fff;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.vp-ended-next{
  flex:none;max-width:100%;
  font-size:11.5px;line-height:1.35;color:var(--muted);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vp-ended-next b{color:var(--text-2);font-weight:600}
.vp-ended-row{flex:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.vp-btn{
  border:none;cursor:pointer;height:42px;padding:0 18px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:13px;font-weight:700;
  transition:transform .16s var(--ease-spring),background-color .16s ease;
}
.vp-btn:active{transform:scale(.95)}
/* stroke-based by default (the replay glyph is an open arc — filling it rendered
   a solid blob); only paths tagged .vp-solid, e.g. the play triangle, are filled */
.vp-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp-btn svg .vp-solid{fill:currentColor;stroke:none}
.vp-btn-gold{background:var(--gold);color:var(--on-accent)}
.vp-btn-gold svg{margin-left:2px}
.vp-btn-ghost{
  background:rgba(255,255,255,.1);color:var(--text);
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.vp-ended-bar{flex:none;width:min(220px,70%);height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:10px}
.vp-ended-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--gold)}
.vp-counting .vp-ended-bar i{animation:vp-fill 5s linear forwards}
@keyframes vp-fill{from{width:0}to{width:100%}}
.vp-ended-cancel{
  display:none;                    /* only meaningful while the countdown runs */
  margin-top:8px;border:none;background:none;cursor:pointer;
  font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--muted);
  padding:8px 12px;transition:color .16s ease;
}
.vp-counting .vp-ended-cancel{display:inline-block}
.vp-ended-cancel:active{color:var(--text)}

/* ---------- controls dock ---------- */
.vp-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:26px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);
  opacity:0;transform:translateY(8px);
  transition:opacity .26s var(--ease-spring),transform .26s var(--ease-spring);
  pointer-events:none;
}
.vp-show .vp-controls{opacity:1;transform:none;pointer-events:auto}

/* seek track */
.vp-seek{
  position:relative;width:100%;height:32px;margin:0 0 2px;
  display:flex;align-items:center;cursor:pointer;touch-action:none;
}
.vp-track{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.18);transition:height .18s var(--ease-spring)}
.vp-seek.vp-drag .vp-track{height:7px}
.vp-buff,.vp-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;pointer-events:none}
.vp-buff{background:rgba(255,255,255,.28)}
.vp-fill{background:linear-gradient(90deg,var(--gold-deep),var(--gold) 60%,var(--gold-hi))}
.vp-knob{
  position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 12px rgba(var(--gold-rgb),.5);
  transform:scale(0);transition:transform .18s var(--ease-spring);
  pointer-events:none;
}
.vp-seek:hover .vp-knob,.vp-seek.vp-drag .vp-knob,.vp-seek.vp-focus .vp-knob{transform:scale(1)}
.vp-seek:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
/* hover / drag time bubble */
.vp-bubble{
  position:absolute;bottom:30px;left:0;z-index:6;
  transform:translateX(-50%);
  padding:4px 9px;border-radius:8px;
  background:rgba(8,8,10,.92);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  opacity:0;transition:opacity .16s ease;pointer-events:none;
}
.vp-seek:hover .vp-bubble,.vp-seek.vp-drag .vp-bubble{opacity:1}

/* Transport cluster — centred OVER the picture (Netflix/YouTube pattern) rather
   than stacked in the dock. This is the single play control in the player, and
   moving it out of the dock gives the bottom bar back ~60px of height. */
.vp-transport{
  position:absolute;left:0;right:0;z-index:5;
  top:calc(50% - 16px);              /* biased up so it clears the seek bar on short frames */
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,6.5vw,38px);
  opacity:0;transform:translateY(-50%) scale(.94);
  pointer-events:none;
  transition:opacity .26s var(--ease-spring),transform .26s var(--ease-spring);
}
.vp-show .vp-transport{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
/* while buffering the spinner takes the centre — the hero would collide with it */
.vp-waiting .vp-play-hero{opacity:0;pointer-events:none}
.vp-ibtn{
  flex:none;min-width:44px;height:44px;padding:0 6px;
  border:none;border-radius:50%;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--text);
  transition:transform .16s var(--ease-spring),background-color .16s ease,color .16s ease,opacity .2s ease;
}
.vp-ibtn:active{transform:scale(.86);background:rgba(255,255,255,.12)}
.vp-ibtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vp-ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp-ibtn svg .vp-solid{fill:currentColor;stroke:none}
.vp-ibtn[hidden]{display:none!important}
/* hero play button — the visual anchor of the player */
.vp-play-hero{
  width:64px;height:64px;min-width:64px;
  border-radius:50%;color:var(--on-accent);
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  box-shadow:var(--glow-gold),0 10px 30px -8px rgba(0,0,0,.7);
}
.vp-play-hero:active{transform:scale(.9);background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep))}
.vp-play-hero svg{width:27px;height:27px;fill:currentColor;stroke:none}
/* the play glyph is optically left-heavy; the pause glyph is symmetric */
.vp-paused .vp-play-hero svg{margin-left:3px}
/* skip buttons with the "10" numeral centred in the arrow ring.
   The old fill was rgba(0,0,0,.45) — invisible against dark footage, so these read
   as loose floating glyphs rather than buttons. Now a glass chip with a hairline. */
.vp-skip{
  position:relative;
  width:46px;height:46px;min-width:46px;
  background:rgba(12,12,14,.5);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.vp-skip:active{background:rgba(28,28,32,.72)}
.vp-skip svg{width:25px;height:25px;stroke-width:1.7}
.vp-skip b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:8.5px;font-weight:700;color:#fff;
  transform:translateY(1px);
}
/* bottom dock — time left, utilities right */
.vp-dock{display:flex;align-items:center;gap:2px}
.vp-time{
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  padding:0 2px 0 4px;white-space:nowrap;
}
.vp-time .vp-dur{color:var(--muted)}
.vp-time .vp-sep{color:var(--faint);margin:0 4px;opacity:.7}
.vp-flex{flex:1;min-width:4px}

/* volume cluster (pointer devices only) */
.vp-vol{display:flex;align-items:center}
@media (hover:none),(pointer:coarse){.vp-vol{display:none!important}}
.vp-vol-slider{
  width:0;opacity:0;overflow:hidden;
  transition:width .22s var(--ease-spring),opacity .22s ease;
}
.vp-vol:hover .vp-vol-slider,.vp-vol:focus-within .vp-vol-slider{width:78px;opacity:1}
.vp-vol input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:70px;height:26px;margin:0 4px 0 2px;background:none;cursor:pointer;
}
.vp-vol input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.vp-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;
  border-radius:50%;background:var(--gold);border:none;
  box-shadow:0 0 8px rgba(var(--gold-rgb),.5);
}
.vp-vol input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.vp-vol input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--gold)}

/* text pills (speed / PiP / fullscreen) */
.vp-pill{
  flex:none;height:34px;min-width:44px;padding:0 12px;margin:5px 2px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .16s var(--ease-spring),background-color .16s ease,border-color .16s ease,color .16s ease;
}
.vp-pill:active{transform:scale(.93)}
.vp-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp-pill.vp-on{background:rgba(var(--gold-rgb),.16);border-color:var(--gold-line);color:var(--gold-hi)}
.vp-pill[hidden]{display:none!important}

/* ---------- speed sheet ---------- */
.vp-menu{
  /* was bottom:160px — sized for the old tall box; now sits just above the dock */
  position:absolute;right:12px;bottom:82px;z-index:8;
  min-width:158px;padding:6px;border-radius:18px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--line-2);
  box-shadow:var(--elev-3);
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .2s var(--ease-spring),transform .2s var(--ease-spring);
}
.vp-menu.vp-open{opacity:1;transform:none;pointer-events:auto}
.vp-menu-h{
  font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:7px 12px 6px;
}
.vp-speed{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:40px;padding:0 12px;
  border:none;border-radius:12px;background:none;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600;color:var(--text-2);
  transition:background-color .15s ease,color .15s ease;
}
.vp-speed:active{background:rgba(255,255,255,.08)}
.vp-speed .vp-tick{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .16s ease,transform .16s var(--ease-spring)}
.vp-speed.vp-cur{color:var(--gold)}
.vp-speed.vp-cur .vp-tick{opacity:1;transform:none}

/* ---------- fullscreen polish ---------- */
.vp-stage:fullscreen,.vp-stage:-webkit-full-screen{border-radius:0}
.vp-stage:fullscreen .vp-title,.vp-stage:-webkit-full-screen .vp-title{font-size:16px}
.vp-stage:fullscreen .vp-controls,.vp-stage:-webkit-full-screen .vp-controls{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
.vp-stage:fullscreen .vp-video,.vp-stage:-webkit-full-screen .vp-video{cursor:none}
.vp-stage.vp-show:fullscreen .vp-video,.vp-stage.vp-show:-webkit-full-screen .vp-video{cursor:default}

/* ---------- sheet actions under the frame ---------- */
.edu-actions{display:flex;gap:10px;margin:16px 0 4px;align-items:stretch}
.edu-save{flex:0 0 auto;min-width:104px}
/* Two-line button: the old markup sliced the lesson title at 24 chars, which cut
   mid-word. The title now ellipsises at the CSS layer on a line of its own. */
.edu-next{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;text-align:left;
}
.edu-next svg{flex:none;width:16px;height:16px}
.edu-next-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.edu-next-txt b{
  font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;opacity:.72;
}
.edu-next-txt span{
  font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .vp-ring{animation-duration:1.6s}
  .vp-flash.vp-pop{animation:none;opacity:0}
  .vp-counting .vp-ended-bar i{animation:none;width:100%}
}