/* ============================================================================
   PREVIOUSLY · pv-progress.css — continue-watching UI (2026-10-02)
   Shared by podcasts + free movies. Progress bars are transform: scaleX()
   only — compositor thread, zero layout thrash.
   ========================================================================== */

/* episode number badge (podcast show pages) — overlays the artwork corner */
.pvnum{
  position:absolute; top:8px; left:8px; z-index:4;
  min-width:34px; height:34px; padding:0 8px; border-radius:10px;
  background:rgba(20,21,24,.88); border:1px solid #2c2d34; color:#EDE6D6;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
button[data-pv-play].pv-latest .pvnum{ background:#E8321E; border-color:#E8321E; color:#fff; }
.pvlatest{
  display:inline-block; background:#E8321E; color:#fff; font-size:10px; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; border-radius:20px; padding:3px 10px;
  margin:0 6px 4px 0; vertical-align:1px;
}

/* thin progress bar pinned to the bottom of a card/button */
.pvprog{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background:rgba(255,255,255,.14); border-radius:0 0 12px 12px; overflow:hidden;
  pointer-events:none;
}
.pvprog i{
  display:block; height:100%; width:100%; background:#E8321E;
  transform:scaleX(0); transform-origin:left center;
}
button[data-pv-play]{ position:relative; }
button[data-pv-play].pv-watched .pvprog i{ background:#7ee2a8; }

/* "Resume from 24:15" line under the episode meta */
.pvresume{
  display:block; color:#7ee2a8; font-size:12px; font-weight:600; margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.pvresume.pv-done{ color:#8f9a94; }

/* Continue Listening / Continue Watching rails */
.pv-rail{
  display:flex; gap:12px; overflow-x:auto; padding:4px 2px 16px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.pvccard{
  flex:0 0 218px; scroll-snap-align:start; position:relative; text-align:left;
  background:#141518; border:1px solid #26272c; border-radius:14px; overflow:hidden;
  cursor:pointer; color:#EDE6D6; font:inherit; padding:0;
  transition:border-color .15s ease;
}
.pvccard:hover{ border-color:#3a3b42; }
.pvccard .art{ position:relative; display:block; aspect-ratio:16/10; background:#1d1e23; }
.pvccard .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.pvccard .art .pvprog{ border-radius:0; }
.pvccard .art .go{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); opacity:0; transition:opacity .15s;
  color:#fff; font-size:20px;
}
.pvccard:hover .art .go{ opacity:1; }
.pvccard .art .go::before{
  content:"▶"; width:46px; height:46px; border-radius:50%; background:#E8321E;
  display:flex; align-items:center; justify-content:center; padding-left:3px;
}
.pvccard .tb{ display:block; padding:10px 12px 12px; }
.pvccard .tb b{
  display:block; font-size:13.5px; line-height:1.35; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pvccard .tb small{ color:#a9a49a; font-size:12px; }

/* free-movie card progress (cards have id="movie-<slug>") */
.pv-card{ position:relative; }
.pv-card .pvprog{ border-radius:0; height:4px; }
.pv-card.pv-watched .pvprog i{ background:#7ee2a8; }

/* resume toast inside players */
.pv-resumed{
  display:none; margin-top:10px; font-size:12.5px; font-weight:600; color:#7ee2a8;
  background:rgba(126,226,168,.1); border:1px solid rgba(126,226,168,.3);
  border-radius:10px; padding:8px 12px; font-variant-numeric:tabular-nums;
}
.pv-resumed.show{ display:block; }

@media (prefers-reduced-motion: reduce){
  .pvccard, button[data-pv-play]{ transition:none; }
}

/* James 2026-10-04: Clip badge — clips are labeled, never numbered.
   Same position as .pvnum but distinct styling (gray, not red). */
.pvclip{
  position:absolute; top:8px; left:8px; z-index:4;
  height:26px; padding:0 10px; border-radius:8px;
  background:rgba(90,92,100,.92); border:1px solid #6a6c76; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  pointer-events:none;
}
button[data-pv-play].pv-clip .pvnum{ display:none; }