/* Course player (see js/player.js) and the episode details under it. */
.cp{position:relative;overflow:hidden;user-select:none}
.cp-stage{position:absolute;left:0;right:0;top:-30%;height:160%}
/* the frame is taller than 16:9, so YouTube letterboxes the video into exactly our visible area and draws
   its title bar, logo and share button in the bars above and below, which .cp crops away */
.cp-stage iframe,.cp-yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.cp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cp-shield{position:absolute;inset:0;z-index:2;cursor:pointer;outline:none}
.cp.let-through .cp-shield,.cp.let-through .cp-big{pointer-events:none}
.cp-mark{position:absolute;z-index:3;pointer-events:none;color:rgba(255,255,255,.3);font:600 13px var(--sans);
  text-shadow:0 0 3px rgba(0,0,0,.45);transition:top 1.2s, left 1.2s;direction:ltr}

/* paused / not started: cover YouTube's own pause screen completely */
.cp::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(15,12,9,.0);transition:background .2s;pointer-events:none}
.cp.is-paused::after{background:rgba(15,12,9,.82)}
.cp-big{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:0;
  background:var(--clay);color:#fff;font-size:30px;cursor:pointer;padding-inline-start:6px;box-shadow:0 0 0 10px rgba(185,83,42,.25), 0 16px 30px -10px rgba(0,0,0,.7);transition:transform .2s, opacity .2s}
.cp-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.cp.is-playing .cp-big{opacity:0;pointer-events:none}

.cp-end{position:absolute;inset:0;z-index:5;background:rgba(15,12,9,.94);display:grid;place-items:center;text-align:center;color:#F3EDE1;padding:20px}
.cp-end[hidden],.cp-poster[hidden]{display:none}
.cp-end small{display:block;color:#D9AE5A;font-weight:700;margin-bottom:6px}
.cp-end b{display:block;font:700 clamp(20px,3vw,30px) var(--serif);margin-bottom:18px}

/* control bar */
.cp-bar{position:absolute;z-index:6;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:26px 14px 10px;
  background:linear-gradient(transparent, rgba(10,8,6,.85));color:#fff;transition:opacity .25s;direction:rtl}
.cp.is-playing:not(.show-ui) .cp-bar{opacity:0}
.cp:not(.is-playing) .cp-bar{opacity:1}
.cp-bar button{background:none;border:0;color:#fff;font:600 15px var(--sans);cursor:pointer;padding:6px 8px;border-radius:4px;min-width:34px}
.cp-bar button:hover{background:rgba(255,255,255,.14)}
.cp-time{font:13px var(--sans);opacity:.85;white-space:nowrap;direction:ltr}
.cp-seek{position:relative;flex:1;height:18px;cursor:pointer;touch-action:none}
.cp-seek::before,.cp-buf,.cp-fill{content:"";position:absolute;right:0;top:7px;height:4px;border-radius:2px}
.cp-seek::before{left:0;background:rgba(255,255,255,.25)}
.cp-buf{background:rgba(255,255,255,.35)}
.cp-fill{background:var(--clay2)}
.cp-knob{position:absolute;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;transform:translateX(50%);box-shadow:0 0 0 3px rgba(224,122,79,.4)}
.cp:fullscreen{background:#000}
@media (max-width:560px){ .cp-back,.cp-mute{display:none} .cp-bar{gap:4px;padding:20px 8px 6px} .cp-big{width:64px;height:64px;font-size:22px} }

/* episode details */
.ep-box{background:var(--card);border:1px solid var(--line2);padding:20px 22px;margin-top:18px}
.ep-box h2{font-size:20px;margin-bottom:10px}
.ep-box .sum{color:var(--ink2);font-size:16.5px;line-height:1.8}
.ep-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.learn{list-style:none}
.learn li{padding:6px 0 6px;padding-inline-start:26px;position:relative;color:var(--ink2);border-top:1px solid var(--line)}
.learn li:first-child{border-top:0}
.learn li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--sage);font-weight:700}
.chapters{list-style:none}
.chapters li{border-top:1px solid var(--line)}
.chapters li:first-child{border-top:0}
.chapters button{display:flex;gap:12px;width:100%;background:none;border:0;padding:7px 2px;cursor:pointer;font:15px var(--sans);color:var(--ink2);text-align:right}
.chapters button:hover{color:var(--clay)}
.chapters .ct{font:700 14px var(--serif);color:var(--clay);min-width:42px;direction:ltr;text-align:left}
@media (max-width:760px){ .ep-cols{grid-template-columns:1fr} }