/* kbMBS video player pop-up (pages/sl-player.js). Always dark, whatever the theme:
   it is a screening room, not a page. */
.kbp{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:rgba(4,5,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:kbp-in .22s ease-out}
.kbp{--kbp-cap:112px}
.kbp-dialog{display:grid;grid-template-columns:minmax(0,1fr);outline:0;max-width:100%}
.kbp-stage{position:relative;width:min(1120px,94vw,calc((100vh - 64px - var(--kbp-cap)) * 16 / 9));aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);animation:kbp-pop .28s cubic-bezier(.2,.8,.2,1);font-family:inherit}
.kbp-stage.is-full{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none}
.kbp-stage.is-idle{cursor:none}
.kbp-stage{container-type:size}
.kbp-click{position:absolute;inset:0}
/* The video sits in the largest 16:9 box that fits the stage. The YouTube frame is
   taller than that box and the box clips it, so YouTube's own title, "More videos"
   tile and logo fall in the clipped strips above and below the picture. */
.kbp-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16/9;overflow:hidden;pointer-events:none}
.kbp-frame iframe{position:absolute;left:0;top:-110px;width:100%;height:calc(100% + 220px);border:0;pointer-events:none}
.kbp-click{cursor:pointer;background:transparent}
.kbp-stage.is-idle .kbp-click{cursor:none}

/* captions: windowed they sit under the video in a band that is always reserved (so the video never moves);
   full screen they sit at the bottom of the picture, above the controls while those show */
.kbp-capband{min-height:var(--kbp-cap);padding:16px 8px 0;text-align:center}
.kbp-cap{margin:0 auto;max-width:62ch;font-size:clamp(16px,1.6vw,21px);line-height:1.45;font-weight:500;color:rgba(255,255,255,.96);text-wrap:balance;animation:kbp-cap-in .18s ease-out}
.kbp-cap-note{color:rgba(255,255,255,.6);font-size:15px}
.kbp-capfs{position:absolute;left:50%;top:50%;width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16/9;transform:translate(-50%,-50%);pointer-events:none;display:grid;align-items:end;justify-items:center;padding:0 7% 4.5%;box-sizing:border-box}
.kbp-capfs p{margin:0;text-align:center;font-size:clamp(20px,2.6vw,40px);line-height:1.42;font-weight:550;color:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1);animation:kbp-cap-in .18s ease-out}
.kbp-capfs span{padding:.08em .55em;border-radius:.3em;background:rgba(6,6,8,.78);-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.kbp-stage:not(.is-idle) .kbp-capfs p{transform:translateY(-92px)}
@keyframes kbp-cap-in{from{opacity:0}to{opacity:1}}

/* title and close */
.kbp-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 40px 22px;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0));transition:opacity .25s;pointer-events:none}
.kbp-top > *{pointer-events:auto}
.kbp-title{display:grid;gap:2px;min-width:0;padding-top:6px}
.kbp-title b{font-size:16px;font-weight:650;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kbp-title small{font-size:13px;color:rgba(255,255,255,.72)}
.kbp-x{width:44px;height:44px;border-radius:50%;background:rgba(20,21,24,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* controls */
.kbp-bar{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:44px 14px 10px;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0));transition:opacity .25s}
.kbp-stage.is-idle .kbp-top,.kbp-stage.is-idle .kbp-bar{opacity:0;pointer-events:none}
.kbp-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kbp-l,.kbp-r{display:flex;align-items:center;gap:2px;min-width:0}
.kbp-btn{position:relative;display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border:0;border-radius:12px;background:none;color:#fff;font:inherit;cursor:pointer;transition:background .15s}
.kbp-btn:hover{background:rgba(255,255,255,.16)}
.kbp-btn:focus-visible,.kbp-seek:focus-visible,.kbp-range:focus-visible,.kbp-link:focus-visible,.kbp-menu button:focus-visible,.kbp-bigplay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kbp-btn.is-on{background:rgba(255,255,255,.2)}
.kbp-btn.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:var(--sl-accent,#ff5a1f)}
.kbp-cc em{position:absolute;top:2px;right:0;font-size:9px;font-style:normal;font-weight:700;color:rgba(255,255,255,.7)}
.kbp-txt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.kbp-time{margin-left:8px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.92);white-space:nowrap}

/* seek bar */
.kbp-seek{position:relative;height:22px;margin:0 6px;cursor:pointer;touch-action:none;display:flex;align-items:center}
.kbp-seek::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;background:rgba(255,255,255,.28);transition:transform .12s}
.kbp-seek:hover::before,.kbp-seek:focus-visible::before{transform:scaleY(1.4)}
.kbp-seek > i{position:absolute;top:50%;left:0;height:5px;margin-top:-2.5px;border-radius:3px;pointer-events:none;transition:transform .12s}
.kbp-seek:hover > i:not(.kbp-knob),.kbp-seek:focus-visible > i:not(.kbp-knob){transform:scaleY(1.4)}
.kbp-buf{background:rgba(255,255,255,.42)}
.kbp-played{background:var(--sl-accent,#ff5a1f)}
.kbp-knob{width:15px!important;height:15px!important;margin:-7.5px 0 0 -7.5px!important;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.5);transform:scale(.0);transition:transform .12s!important}
.kbp-seek:hover .kbp-knob,.kbp-seek:focus-visible .kbp-knob{transform:scale(1)}
.kbp-tip{position:absolute;bottom:26px;transform:translateX(-50%);padding:3px 8px;border-radius:8px;background:rgba(20,21,24,.92);box-shadow:0 0 0 1px rgba(255,255,255,.16);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}

/* volume: the slider slides out by animating a grid column (the slider itself never resizes) */
.kbp-vol{display:grid;grid-template-columns:auto 0px;align-items:center;transition:grid-template-columns .2s}
.kbp-vol:hover,.kbp-vol:focus-within{grid-template-columns:auto 100px}
.kbp-range-wrap{display:flex;align-items:center;height:44px;min-width:0;overflow:hidden}
.kbp-range{-webkit-appearance:none;appearance:none;flex:0 0 86px;width:86px;height:5px;margin:0 10px 0 4px;padding:0;border-radius:3px;background:linear-gradient(90deg,#fff var(--p,50%),rgba(255,255,255,.3) var(--p,50%));cursor:pointer;opacity:0;transition:opacity .2s}
.kbp-vol:hover .kbp-range,.kbp-vol:focus-within .kbp-range{opacity:1}
.kbp-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.kbp-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}

/* speed menu */
.kbp-rate{position:relative}
.kbp-menu{position:absolute;right:0;bottom:50px;display:grid;gap:2px;min-width:128px;margin:0;padding:6px;list-style:none;border-radius:14px;background:rgba(20,21,24,.96);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 14px 40px rgba(0,0,0,.5)}
.kbp-menu button{width:100%;height:40px;padding:0 14px;border:0;border-radius:9px;background:none;color:#fff;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.kbp-menu button:hover{background:rgba(255,255,255,.12)}
.kbp-menu button.is-on{background:rgba(255,255,255,.2)}

/* centre: spinner, big play, failure */
.kbp-spin,.kbp-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.kbp-spin{width:54px;height:54px;pointer-events:none}
.kbp-spin i{display:block;width:100%;height:100%;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:kbp-spin .8s linear infinite}
.kbp-bigplay{display:grid;place-items:center;width:84px;height:84px;border:0;border-radius:50%;background:rgba(10,11,13,.78);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);color:#fff;cursor:pointer;transition:transform .15s,background .15s}
.kbp-bigplay:hover{background:#000;transform:translate(-50%,-50%) scale(1.06)}
.kbp-fail{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;background:#0b0b0c}
.kbp-fail b{font-size:20px}
.kbp-fail span{max-width:46ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
.kbp-link{display:inline-flex;align-items:center;min-height:48px;margin-top:8px;padding:0 22px;border-radius:12px;background:#fff;color:#000;font-size:15px;font-weight:700;text-decoration:none}

@keyframes kbp-in{from{opacity:0}to{opacity:1}}
@keyframes kbp-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kbp-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .kbp{padding:10px;--kbp-cap:92px}
  .kbp-stage{border-radius:12px}
  .kbp-skip,.kbp-range-wrap{display:none}
  .kbp-vol,.kbp-vol:hover,.kbp-vol:focus-within{grid-template-columns:auto}
  .kbp-btn{min-width:40px}
  .kbp-time{margin-left:2px;font-size:12.5px}
  .kbp-top{padding:10px 10px 28px 14px}
  .kbp-title b{font-size:14px}
  .kbp-bigplay{width:68px;height:68px}
}
@media (prefers-reduced-motion:reduce){.kbp,.kbp-stage,.kbp-cap,.kbp-capfs p{animation:none}.kbp-capfs p{transition:none}.kbp-top,.kbp-bar,.kbp-btn,.kbp-vol,.kbp-range,.kbp-seek::before,.kbp-seek > i{transition:none}.kbp-spin i{animation-duration:1.6s}}