/* Watch / player page (Watch Page v2): slim navy header, player + white
   lesson rail on navy, lesson kicker/title below, slim navy footer. */
html,body{background:#fff;}
body.wv2{margin:0;display:flex;flex-direction:column;min-height:100vh;}

/* Slim navy header */
.wnav{background:#0B1120;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 52px;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:30;}
.wnav .l{display:flex;align-items:center;gap:20px;min-width:0;}
.wnav .lg{height:32px;filter:brightness(0) invert(1);display:block;}
.wnav .back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.66);border-left:1px solid rgba(255,255,255,.16);padding-left:20px;white-space:nowrap;}
.wnav .back:hover{color:#fff;}
.wnav .back svg{width:14px;height:14px;color:#A5A7F7;flex:none;}

/* Player + lesson rail band */
.wband{background:#0B1120;}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;}
.player{position:relative;background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.player .locked{color:#C7CBD6;text-align:center;padding:24px;max-width:420px;}
.player .locked .lk{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;}
.player .locked h2{color:#fff;font-size:20px;font-weight:600;margin:0 0 8px;}
.player .locked p{color:#9AA0AE;font-size:14px;margin:0 0 18px;line-height:1.6;}

/* Lesson rail */
.wrail{background:#fff;color:#1D293D;border-left:1px solid #ECEDF1;display:flex;flex-direction:column;height:0;min-height:100%;}
.wrail .rh{padding:16px 20px;border-bottom:1px solid #ECEDF1;flex:none;}
.wrail .ct{font-size:13.5px;font-weight:600;color:var(--ink);}
.wrail .stats{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;font-weight:600;color:#6C727E;}
.wrail .pbar{margin-top:6px;height:5px;background:#E6E8EE;border-radius:999px;overflow:hidden;}
.wrail .pbar span{display:block;height:100%;background:var(--primary);border-radius:999px;}
.wrail .list{flex:1;overflow-y:auto;min-height:0;}
.wrail .mt{padding:11px 20px;background:#F8F8F8;border-top:1px solid #ECEDF1;border-bottom:1px solid #ECEDF1;display:flex;align-items:center;font-size:12.5px;font-weight:600;color:#6C727E;}
.wrail .mt:first-child{border-top:none;}
.wrail .mt .mn{margin-left:auto;font-weight:500;}
.wrail .it{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:11px;padding:11px 20px;border:none;border-bottom:1px solid #F2F3F6;background:transparent;text-align:left;cursor:pointer;font-family:inherit;text-decoration:none;}
.wrail .it i{width:15px;height:15px;flex:none;}
.wrail .it .t{flex:1;font-size:13px;color:#45526B;min-width:0;}
.wrail .it .d{font-size:11px;color:#9AA0AE;font-family:var(--mono);flex:none;}
.wrail .it.on{background:#EDEDFD;border-radius:8px;margin:2px 4px;border-bottom:none;}
.wrail .it.on .t,.wrail .it.on a.t{color:#3B3F98;font-weight:600;}
.wrail .it .pvb{flex:none;font-size:10.5px;font-weight:600;color:var(--accent-d);background:var(--accent-bg);padding:2px 8px;border-radius:999px;white-space:nowrap;}
.wrail .it .cbx{width:15px;height:15px;flex:none;accent-color:#15935E;cursor:pointer;margin:0;}
.wrail .it a.t{text-decoration:none;color:#45526B;}
.wrail .it a.t:hover{color:var(--primary);}
.wrail .it.done a.t{color:#9AA0AE;}

/* Lesson info below the band */
.winfo{flex:1;padding:32px 52px 56px;}
.winfo h1{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:12px 0 0;color:var(--ink);}


/* End-of-video overlay: Replay + Next lesson */
.player .endov{position:absolute;inset:0;z-index:6;background:rgba(7,10,22,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;}
.player .endov[hidden]{display:none;}
.player .endov .upnext{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A5A7F7;}
.player .endov .nt{font-size:clamp(17px,2.4vw,24px);font-weight:600;color:#fff;max-width:640px;line-height:1.3;}
.player .endov .row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.btn-ghost-inv{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25);}
.btn-ghost-inv:hover{background:rgba(255,255,255,.22);}

/* Responsive: rail stacks under the player */
@media(max-width:1023px){
  .wnav{padding:14px 20px;}
  .wgrid{grid-template-columns:1fr;}
  .wrail{border-left:none;border-top:1px solid #ECEDF1;height:auto;min-height:0;max-height:46vh;}
  .winfo{padding:24px 20px 48px;}
}

/* Desktop: lock the page to the viewport; only the lesson rail scrolls.
   The body becomes a 2-column grid (content | rail) so the rail spans the
   full viewport height beside the player, lesson title, and footer.
   Placed last so it wins over the base rules above. */
@media(min-width:1024px){
  body.wv2{display:grid;height:100vh;overflow:hidden;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr) auto;}
  .wnav{grid-column:1 / -1;grid-row:1;}
  .wband{display:contents;}
  .wgrid{display:contents;}
  .player{grid-column:1;grid-row:2;aspect-ratio:auto;min-height:0;height:auto;}
  .wrail{grid-column:2;grid-row:2 / 4;height:auto;min-height:0;}
  .winfo{grid-column:1;grid-row:3;flex:none;padding:18px 52px 24px;}
}