/* learn-video.css: the lesson video player (learn-video.js). Brand surfaces: deep navy panels rounded like the lesson
   player chrome (12 to 16 px), teal for progress and the chosen option, BL Body numerals, no gradients, no hairlines.
   Captions, default (Netflix and BBC conventions): white BL Body 600 on navy at 75%, each line its own padded and
   rounded box, centred in the lower third, at most about 42 characters a line, about 4.5% of the picture's height
   (2.53% of a 16:9 width) and never under 16 px. Contrast on the 75% navy over a white frame: white 8.1, yellow 6.2,
   cyan 6.6 to 1; with no background each letter has a 1 px navy edge and a tight shadow. */
@font-face{font-family:"BL Legible";src:url(/assets/fonts/bl-atkinson-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

.lv{position:relative;container-type:inline-size;width:100%;border-radius:16px;overflow:hidden;background:#0b1626;outline:none;
  --lv-navy:11,22,38;--lv-teal:var(--study,#0d9aa7);--lv-bar:72px;--lv-p:0%;--lv-b:0%;
  --cc-s:1;--cc-fg:#fff;--cc-op:.75;--lv-ease:var(--ease-out,cubic-bezier(.2,.7,.3,1))}
.lp-video .lv video{display:block;width:100%;aspect-ratio:16/9;border-radius:0;background:#0b1626;object-fit:contain;cursor:pointer}
.lv.is-playing:not(.is-ctl) video{cursor:none}
.lv:focus-visible{outline:3px solid var(--lv-teal);outline-offset:3px}
.lv.is-full{border-radius:0;display:flex;align-items:center}
.lv.is-full video{height:100%;aspect-ratio:auto}

/* buttons: 44 px, rounded, white on the navy panel */
.lv-b{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:#fff;cursor:pointer;padding:0}
.lv-b:hover{background:rgba(255,255,255,.12)}
.lv-b:focus-visible{outline:3px solid var(--lv-teal);outline-offset:-3px}
.lv-b[aria-pressed="true"]{color:#7fe3ea}
.lv-b[aria-pressed="false"] svg{opacity:.75}
.lv-b:disabled{opacity:.4;cursor:default}

/* the big play button: exactly in the centre of the video frame, both ways, at every size (owner, 9 Oct: "Play button
   must be in the center"; measured against the whole frame, not the frame minus the controls); at most about 18% of
   the picture's height on a phone (a 48 px touch area all the same). Before the start, the poster sits under a navy
   scrim with the frame blurred, so its title never reads behind the button. Paused part way, the scrim is light and
   the frame stays sharp: a learner pauses to look at the music on screen. */
.lv::before{content:'';position:absolute;inset:0;z-index:2;background:rgba(var(--lv-navy),.28);opacity:0;pointer-events:none;transition:opacity .2s var(--lv-ease)}
.lv.is-paused:not(.is-ended)::before{opacity:1}
.lv.is-start:not(.is-playing)::before{opacity:1;background:rgba(var(--lv-navy),.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lv-big{position:absolute;left:50%;top:50%;--d:min(76px,max(34px,10.1cqw));--lip:4px;width:var(--d);height:var(--d);
  transform:translate(-50%,-50%);border:0;border-radius:50%;display:block;padding:0;
  background:var(--lv-teal);cursor:pointer;z-index:3;box-shadow:0 var(--lip) 0 #08707a,0 calc(var(--lip) + 6px) 16px rgba(4,40,46,.28);
  transition:transform .12s var(--lv-ease),box-shadow .12s var(--lv-ease),opacity .2s var(--lv-ease)}
/* the chunky 3D button: a darker lip below; hover lifts 2 px, press drops into the lip. The glyph is an equilateral
   triangle centred by its centroid (not its box), rounded corners, about 38% of the disc. */
.lv-big svg{display:block;width:100%;height:100%}
.lv-big::after{content:'';position:absolute;inset:min(0px,calc((var(--d) - 48px) / 2));border-radius:50%}
.lv-big:hover{transform:translate(-50%,calc(-50% - 2px));--lip:6px}
.lv-big:active{transform:translate(-50%,calc(-50% + 4px));--lip:0px}
.lv-big:focus-visible{outline:none}
.lv-big:focus-visible::before{content:'';position:absolute;inset:-5px -5px calc(-5px - var(--lip)) -5px;border:3px solid #fff;border-radius:999px;pointer-events:none}
.lv.is-playing .lv-big,.lv.is-ended .lv-big,.lv.is-loading .lv-big{opacity:0;pointer-events:none;visibility:hidden}
/* paused with the big button: the captions step aside (as Netflix does under its pause overlay) */
.lv.is-paused:not(.is-ended) .lv-cc{visibility:hidden}

/* the control bar: no panel, a navy scrim rising from the bottom edge (Netflix, YouTube), the progress track on the
   scrim's top edge, one 44 px row of controls */
.lv-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:30px 10px 2px;
  background:linear-gradient(to top,rgba(var(--lv-navy),.7),rgba(var(--lv-navy),.42) 55%,rgba(var(--lv-navy),0));
  transition:opacity .2s var(--lv-ease)}
.lv:not(.is-ctl) .lv-bar{opacity:0;pointer-events:none}
.lv.is-start .lv-bar{opacity:1;pointer-events:auto}
.lv.is-ended .lv-bar{display:none}
.lv-row{display:flex;align-items:center;gap:2px;height:44px}
.lv-sp{flex:1}
.lv-time{padding:0 8px;color:#fff;font:600 14px/1 "BL Body",Onest,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lv-b{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
@container (max-width:440px){.lv-pip,.lv-mute{display:none}.lv-time{font-size:13px;padding:0 4px}.lv-bar{padding:24px 4px 0}}

/* progress: a rounded track, buffered, filled in teal, chapter ticks, a knob, a time tip */
.lv-prog{position:relative;height:22px;margin:0 8px;cursor:pointer;touch-action:none;outline:none}
.lv-track{position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .12s var(--lv-ease),top .12s var(--lv-ease)}
.lv-buf,.lv-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.lv-buf{width:var(--lv-b);background:rgba(255,255,255,.32)}
.lv-fill{width:var(--lv-p);background:var(--lv-teal)}
.lv-ticks i{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(var(--lv-navy),.9)}
.lv-knob{position:absolute;top:5px;left:var(--lv-p);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s var(--lv-ease)}
.lv-prog:hover .lv-track,.lv-prog:focus-visible .lv-track,.lv-prog.is-tip .lv-track{top:7px;height:8px}
.lv-prog:hover .lv-knob,.lv-prog:focus-visible .lv-knob,.lv-prog.is-tip .lv-knob{transform:scale(1.3)}
.lv-prog:focus-visible{box-shadow:0 0 0 3px var(--lv-teal);border-radius:8px}
.lv-tip{position:absolute;bottom:26px;transform:translateX(-50%);padding:5px 9px;border-radius:9px;background:#fff;color:#0b1626;font:700 13px/1.2 "BL Body",Onest,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none}
.lv-prog.is-tip .lv-tip{opacity:1}

/* loading: Noodle (noodle-loader.js), centred */
.lv-load{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none}

/* the end screen: no title (owner: nothing that states the obvious); the buttons, 20, Replay, centred in the picture; the two buttons the
   same height and width, 16 apart; a 92% navy scrim with the frame blurred, so nothing reads behind them */
.lv-end{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(var(--lv-navy),.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-align:center}
.lv-end[hidden]{display:none}
.lv-end-in{display:flex;flex-direction:column;align-items:center;width:100%}
.lv-end-b{display:flex;gap:16px;justify-content:center;width:100%;margin-bottom:20px}
.lv-end .lp-btn{flex:0 1 13em;min-width:0;height:48px;min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;line-height:1;margin:0}
.lv-end .lp-btn.quiet,:root .lv-end .lp-btn.quiet{background:rgba(255,255,255,.14);color:#fff;border:0;box-shadow:0 4px 0 rgba(0,0,0,.35)}   /* the same on light and dark pages: it sits on the navy scrim */
.lv-replay{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:#cfe9ec;font:700 15px/1 "BL Body",Onest,system-ui,sans-serif;cursor:pointer}
.lv-replay:hover{color:#fff;text-decoration:underline}
.lv-replay:focus-visible{outline:3px solid #fff;outline-offset:2px}
@container (max-width:440px){.lv-end{padding:12px}.lv-end-b{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lv-end .lp-btn{height:44px;min-height:44px;padding:0 8px;font-size:14.5px}}

/* captions: sized to the picture (M about 4.5% of its height, L 5.5%: 2.53 and 3.09cqw of a 16:9 width), with a
   readable floor on phones; the lower third; lifted above the controls while they show; .is-wait while they would
   cover the controls' band above 55% or the picture's own text (learn-video.js fit()) */
.lv-cc{position:absolute;left:5%;right:5%;bottom:6%;z-index:1;margin:0 auto;max-width:24em;pointer-events:none;text-align:center;text-wrap:balance;
  font:600 max(var(--cc-min),calc(2.53cqw * var(--cc-s)))/1.45 "BL Body",Onest,system-ui,sans-serif}
.lv-cc.is-wait{visibility:hidden}
.lv.is-ctl .lv-cc{bottom:calc(var(--lv-bar) + 8px)}
.lv.cc-top .lv-cc,.lv.cc-top.is-ctl .lv-cc{bottom:auto;top:43%}   /* "Top": just under the question card's corner */
.lv.cc-off .lv-cc,.lv.is-ended .lv-cc{display:none}
.lv{--cc-min:14px}
.cc-s{--cc-s:.85;--cc-min:13px}.cc-l{--cc-s:1.22;--cc-min:15px}.cc-xl{--cc-s:1.45;--cc-min:17px}
.cc-yellow{--cc-fg:#ffe14d}.cc-cyan{--cc-fg:#6ff3ff}
.lv-cc-t{display:inline;color:var(--cc-fg);-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:rgba(var(--lv-navy,11,22,38),var(--cc-op));padding:.25em .5em;border-radius:.35em}
.cc-legible .lv-cc,.lv-prev.cc-legible{font-family:"BL Legible","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700;letter-spacing:.01em}
.cc-bg-solid .lv-cc-t{background:rgb(var(--lv-navy,11,22,38))}
.cc-bg-none .lv-cc-t{background:none;padding:0;
  text-shadow:-1px -1px 0 #0b1626,1px -1px 0 #0b1626,-1px 1px 0 #0b1626,1px 1px 0 #0b1626,0 2px 3px rgba(0,0,0,.65)}
/* where the browser draws them (iPhone full screen, picture in picture) */
.lv video::cue{color:var(--cc-fg);font-family:"BL Body",Onest,system-ui,sans-serif;font-weight:600;background:rgba(11,22,38,var(--cc-op))}
.lv.cc-legible video::cue{font-family:"BL Legible","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700}

/* the settings sheet: a modal dialog in the top layer (above the lesson bar), scrim behind, page scroll locked */
html.lv-lock{overflow:hidden}
.lv-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:min(86vh,720px);border:0;padding:0;overflow:auto;overscroll-behavior:contain;
  border-radius:22px 22px 0 0;background:var(--paper,#fff);color:var(--ink,#0b1626);box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:lvUp .24s var(--ease-out,cubic-bezier(.2,.7,.3,1))}
.lv-sheet::backdrop{background:rgba(3,8,16,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@keyframes lvUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){
  .lv-sheet{inset:auto;width:380px;max-height:calc(100vh - 32px);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);animation-name:lvIn}
  .lv-sheet::backdrop{background:rgba(3,8,16,.5)}
}
@keyframes lvIn{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.lv-sh-in{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:0 18px calc(18px + env(safe-area-inset-bottom))}
.lv-sh-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;padding:12px 0 6px;background:var(--paper,#fff);z-index:1}
.lv-sh-top h2{margin:0;font:700 21px/1.2 var(--f-display,inherit);color:var(--ink)}
.lv-sh-x{color:var(--ink-3)}
.lv-sh-x:hover{background:var(--sunk);color:var(--ink)}
.lv-cchead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.lv-cchead h3,.lv-about h3{margin:0;font:700 18px/1.2 var(--f-display,inherit);color:var(--ink)}
.lv-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--ink);font:700 16px/1 inherit;cursor:pointer}
.lv-switch .k{position:relative;width:44px;height:26px;border-radius:13px;background:var(--ink-3);transition:background-color .15s var(--lv-ease,ease-out)}
.lv-switch .k::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s var(--lv-ease,ease-out)}
.lv-switch[aria-checked="true"] .k{background:var(--study,#0d9aa7)}
.lv-switch[aria-checked="true"] .k::after{transform:translateX(18px)}
.lv-switch:focus-visible{outline:3px solid var(--study,#0d9aa7);outline-offset:2px;border-radius:12px}
.lv-lang{display:grid;gap:8px;font-weight:700;font-size:16px;color:var(--ink-2)}
.lv-lang select{min-height:44px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 16px var(--f-body,inherit);padding:0 10px}
:where(.lv-prev){--cc-fg:#fff}
.lv-prev{display:grid;place-items:center;min-height:64px;padding:12px;border-radius:14px;background:#463c8c;text-align:center;font:600 calc(17px * var(--cc-s,1))/1.5 "BL Body",Onest,system-ui,sans-serif;--cc-op:.75}
.lv-g{margin:0;padding:0;border:0;min-width:0}
.lv-g legend{padding:0;margin-bottom:8px;font-weight:700;font-size:16px;color:var(--ink-2)}
.lv-g.is-off{opacity:.5}
.lv-seg{display:flex;flex-wrap:wrap;gap:6px}
.lv-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.lv-seg label{min-height:44px;min-width:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:12px;
  background:var(--sunk);color:var(--ink);font-weight:650;font-size:16px;cursor:pointer}
.lv-seg input:checked + label{background:var(--study-ink,#08707a);color:#fff}   /* white on #08707a 5.6:1; dark: #062529 on #2cc6d1 */
:root[data-theme="dark"] .lv-seg input:checked + label{color:#062529}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-seg input:checked + label{color:#062529}}
.lv-seg input:focus-visible + label{outline:3px solid var(--study,#0d9aa7);outline-offset:2px}
.lv-g:disabled label{cursor:default}
.lv-about{display:grid;gap:6px;padding-top:4px}
.lv-credit{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45}
.lv-sh-foot{display:flex;justify-content:flex-end;gap:10px}

/* "Prefer reading?" under the player */
.lp-video .lv-read{display:inline-block;margin-top:8px;font-size:14.5px;font-weight:600}

@media (prefers-reduced-motion:reduce){.lv *,.lv-sheet{transition:none!important;animation:none!important}}
html[data-motion="off"] .lv *,html[data-motion="off"] .lv-sheet{transition:none!important;animation:none!important}
@media (forced-colors:active){
  .lv-bar,.lv-end{forced-color-adjust:none;background:Canvas;color:CanvasText;border:2px solid CanvasText}
  .lv-b,.lv-time{forced-color-adjust:none;color:ButtonText}
  .lv-fill{background:Highlight}.lv-track{background:GrayText}
  .lv-big{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border:2px solid ButtonText}
  .lv-cc-t,.cc-bg-none .lv-cc-t,.cc-bg-solid .lv-cc-t{forced-color-adjust:none;background:Canvas;color:CanvasText;text-shadow:none;padding:.25em .5em}
  .lv-seg label{border:2px solid ButtonText}
  .lv-seg input:checked + label{forced-color-adjust:none;background:Highlight;color:HighlightText}
}