/* Panay player. Theme it by setting any of these on .player or an ancestor:
   --pp-accent #e8e6e1  --pp-text #ececee  --pp-dim #8b8b93  --pp-line #26262a
   --pp-track #5c5c5c  --pp-hover #1d1d20  --pp-radius 8px  --pp-tap 44px */
.player{outline:none}
.player:focus-visible{outline:2px solid var(--pp-accent,#e8e6e1);outline-offset:4px}
.player-stage{position:relative;background:#000;border:1px solid var(--pp-line,#26262a);border-radius:var(--pp-radius,8px);aspect-ratio:var(--ar,16/9);max-height:80vh;width:100%;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.player-stage video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;background:#000}
.player.is-scrubbing .player-stage{cursor:ew-resize}
.player-bigplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);color:var(--pp-text,#ececee);display:grid;place-items:center;pointer-events:none;transition:opacity .15s}
.player-bigplay svg{width:28px;height:28px;margin-left:3px}
.player.is-playing .player-bigplay,.player.is-scrubbing .player-bigplay{opacity:0}
.player-readout{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:var(--pp-text,#ececee);padding:5px 12px;border-radius:3px;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .15s}
.player-readout.show{opacity:1}
.player-bar{padding-top:4px}
.pb-scrub{position:relative;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pb-track{position:relative;width:100%;height:4px;background:var(--pp-track,#5c5c5c);border-radius:2px}
.pb-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pp-accent,#e8e6e1);border-radius:2px}
.pb-thumb{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--pp-accent,#e8e6e1)}
.player.is-scrubbing .pb-track{height:6px}
@media(hover:hover){.pb-scrub:hover .pb-track{height:6px}}
.pb-marks{position:absolute;inset:0;pointer-events:none}
.pb-mark{position:absolute;top:50%;width:3px;height:12px;transform:translate(-50%,-50%);background:var(--pp-accent,#e8e6e1);border-radius:1px}
.pb-mark.is-client{background:#f5b83d;width:4px;height:14px}
.pb-mark.is-done{opacity:.35}
.pb-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pb-group{display:flex;align-items:center;gap:2px;min-width:0}
.pb-btn{width:var(--pp-tap,44px);height:var(--pp-tap,44px);display:grid;place-items:center;flex:none;background:transparent;border:0;border-radius:4px;color:var(--pp-text,#ececee);cursor:pointer;padding:0;touch-action:manipulation}
.pb-btn svg{width:22px;height:22px}
@media(hover:hover){.pb-btn:hover{background:var(--pp-hover,#1d1d20)}}
.pb-play svg{width:26px;height:26px}
.pb-time{margin-left:8px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pp-text,#ececee)}
.pb-dur{color:var(--pp-dim,#8b8b93)}
.pb-hint{margin:4px 0 0;color:var(--pp-dim,#8b8b93);font-size:12px;line-height:1.45}
.player:fullscreen,.player:-webkit-full-screen{background:#000;display:flex;flex-direction:column;padding:16px 24px 20px}
.player:fullscreen .player-stage,.player:-webkit-full-screen .player-stage{flex:1;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
.player:fullscreen .pb-hint,.player:-webkit-full-screen .pb-hint{display:none}
@media(max-width:480px){.pb-btn{width:40px;height:40px}.pb-time{margin-left:4px;font-size:12px}}
/* Grids of small players: put class "pp-small" on the grid. Fixed 16:9 so rows line up, slimmer buttons, no hint. */
.pp-small .player-stage{aspect-ratio:16/9}
.pp-small .player-bigplay{width:52px;height:52px;margin:-26px 0 0 -26px}
.pp-small .pb-hint{display:none}
@media(min-width:981px){.pp-small .pb-btn{width:38px;height:38px}.pp-small .pb-time{margin-left:4px;font-size:12px}}