/* Next-step guide (Oct 29 2026): the one control whose turn it is glows and pulses; everything else rests */
@keyframes gdPulse{0%,100%{filter:brightness(1);box-shadow:0 0 14px rgba(70,200,255,.5),0 0 0 0 rgba(70,200,255,.45)}50%{filter:brightness(1.3);box-shadow:0 0 38px rgba(100,225,255,.98),0 0 0 9px rgba(70,200,255,.2)}}
@keyframes gdRing{0%,100%{box-shadow:0 8px 34px rgba(0,0,0,.55),0 0 30px rgba(70,200,255,.55),0 0 0 0 rgba(120,220,255,.55)}50%{box-shadow:0 8px 34px rgba(0,0,0,.55),0 0 60px rgba(110,230,255,1),0 0 0 22px rgba(120,220,255,0)}}
body[data-guide="play"] .bp-big{animation:gdRing 1.8s ease-in-out infinite}
body[data-guide="card"] .rc-next:not(:disabled):not(.rc-go){animation:gdPulse 1.8s ease-in-out infinite}
/* the green read-aloud Next keeps its flash, but only pulses while it is the guide */
body:not([data-guide="card"]) .rc-next.rc-go{animation:rcGoBurst 3.2s ease-out 1}
@media (prefers-reduced-motion:reduce){body[data-guide] .bp-big,body[data-guide] .rc-next{animation:none}}
/* Take a break (Oct 30 2026) */
.tb-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;cursor:pointer;font:700 12px/1 var(--font-ui,system-ui);color:#cfe3ff;background:rgba(14,28,60,.75);border:1px solid rgba(110,170,255,.45);transition:all .2s}
.tb-btn:hover{color:#fff;border-color:#7dd8ff;box-shadow:0 0 16px rgba(70,200,255,.45)}
.timer-card{position:relative}.tb-btn.tb-timer{position:absolute;right:14px;bottom:12px;z-index:3}
.rc-top .tb-btn.tb-rc{margin-left:10px;flex:none}
.su-m-actions .tb-btn.tb-m{margin-left:auto}
.tb-ov{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,14,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tb-ov[hidden]{display:none}
.tb-box{width:min(440px,100%);padding:28px 26px 24px;border-radius:20px;text-align:center;color:var(--text,#eaf3ff);background:linear-gradient(180deg,rgba(18,36,76,.98),rgba(8,16,36,.99));border:1px solid rgba(110,170,255,.5);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(47,125,255,.25)}
.tb-ic{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#7dd8ff;background:rgba(47,125,255,.2);border:1px solid rgba(110,170,255,.45)}
.tb-box h3{margin:0 0 8px;font:800 21px/1.25 var(--font-disp,var(--font-ui,system-ui))}
.tb-box p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--mut,#a9bcdb)}
.tb-go{min-height:46px;padding:0 24px;border-radius:12px;cursor:pointer;font:800 15px/1 var(--font-disp,var(--font-ui,system-ui));color:#fff;background:linear-gradient(180deg,#2f7dff,#1455e8 60%,#0e3fb8);border:1px solid rgba(120,200,255,.7);box-shadow:0 0 20px rgba(60,150,255,.5)}
/* Layout (Oct 30 2026): video uses the full player width; lesson topics + transcript live in the Course Modules card */
body.lp-moved .stage{grid-template-columns:minmax(0,1fr)!important}
body.lp-moved .side-panel{display:none!important}
/* Transcripts in the far-left menu (Oct 30 2026) */
.tr-nav{margin-top:6px}
.tr-head-btn{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;text-align:left}
.tr-head-btn::after{content:"▸";font-size:12px;opacity:.8}.tr-head-btn[aria-expanded="true"]::after{content:"▾"}
.tr-mods{display:grid;gap:2px;padding:2px 0 6px;max-height:46vh;overflow:auto}
.tr-mod>summary{cursor:pointer;list-style:none;padding:6px 10px;border-radius:8px;font:700 12.5px/1.3 var(--font-ui,system-ui);color:#cfe3ff}
.tr-mod>summary::-webkit-details-marker{display:none}.tr-mod>summary:hover{background:rgba(47,125,255,.14)}
.tr-item{display:block;width:100%;text-align:left;padding:5px 10px 5px 20px;border:0;border-radius:8px;background:none;cursor:pointer;color:#93a7c8;font:600 12px/1.35 var(--font-ui,system-ui)}
.tr-item:hover{color:#fff;background:rgba(47,125,255,.14)}
.tr-ov{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,14,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tr-ov[hidden]{display:none}
.tr-box{width:min(680px,100%);max-height:84vh;display:flex;flex-direction:column;border-radius:18px;background:linear-gradient(180deg,rgba(18,36,76,.98),rgba(8,16,36,.99));border:1px solid rgba(110,170,255,.5);box-shadow:0 24px 70px rgba(0,0,0,.6);color:var(--text,#eaf3ff)}
.tr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 12px;border-bottom:1px solid rgba(110,150,230,.22)}
.tr-eye{font:800 11px/1 var(--font-ui,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#46c8ff;margin-bottom:6px}
.tr-head h3{margin:0;font:800 19px/1.3 var(--font-disp,var(--font-ui,system-ui))}
.tr-x{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid rgba(110,170,255,.45);background:rgba(14,28,60,.8);color:#cfe3ff;cursor:pointer;font-size:15px}
.tr-list{overflow:auto;padding:14px 22px 20px}
.tr-list p{margin:0 0 10px;font-size:15px;line-height:1.55;color:#dbe7fb}.tr-list p span{display:inline-block;min-width:52px;color:#46c8ff;font:700 12px/1 var(--font-mono,monospace);margin-right:8px}
.tr-wait{color:#93a7c8!important}
/* captions-position toggle: an icon, so it no longer covers the fullscreen button */
.controls-bar .cb-btn.su-ccpos{font-size:0;min-width:34px;padding:0}
.controls-bar .cb-btn.su-ccpos::before{content:"⇅";font-size:15px;line-height:1}
/* landscape phones: the wheel bar slides away while the video plays */
/* landscape phones: the wheel bar is a slim strip on the very bottom edge and the video sits above it (Oct 30, Juan) */
@media (max-height:520px) and (orientation:landscape){#dtxFinish:not(.ff-fs),body.ff-rev #dtxFinish:not(.ff-fs){bottom:0!important;height:54px!important;border-radius:14px 14px 0 0!important;width:min(100vw,760px)!important}#dtxFinish .ff-count{font-size:11px!important}}

/* Oct 31 (Juan): the bar under the video keeps play, seek and time. CC and fullscreen live inside the video already, and the
   caption-position arrows only mattered with captions on; the fullscreen view keeps its own position toggle. */
#controlsBar #btnCC,#controlsBar #btnFS,#controlsBar .su-ccpos{display:none!important}