/* MyPrEP · Choices campaign library (dark, full screen). Logo sits exactly where the rail logo does. */
html{background:#07080C}
body[data-page="player"]{background:#07080C;color:#fff;margin:0;min-height:100dvh;overflow:hidden}
.pl{--bg:#07080C;--l:rgba(255,255,255,.09);--mu:rgba(255,255,255,.52);--so:rgba(255,255,255,.74);--pad:48px;--ez:cubic-bezier(.2,.7,.2,1);
  position:fixed;inset:0;display:grid;grid-template-rows:128px minmax(0,1fr) auto;font-family:var(--f-b);isolation:isolate}
.pl ::selection{background:#255BEC;color:#fff}

/* ambient light from the current piece */
.pl-amb{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pl-amb i{position:absolute;inset:-12%;opacity:0;filter:blur(90px) saturate(140%);transform:scale(1.05);transition:opacity 1.1s var(--ez)}
.pl-amb i.on{opacity:.3}
.pl-amb::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 42%,rgba(7,8,12,0) 0%,rgba(7,8,12,.55) 60%,#07080C 100%)}

/* top */
.pl-top{position:relative}
.pl-brand{position:absolute;left:48px;top:48px;display:block;line-height:0}
.pl-brand .mark{width:56px;height:auto;display:block}
.pl-crumb{position:absolute;left:136px;top:48px;height:31px;margin:0;display:flex;align-items:center;gap:14px;font:500 13px/1 var(--f-h);color:var(--mu)}
.pl-crumb b{font-weight:600;color:#fff;letter-spacing:-.01em}
.pl-crumb span{padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
.pl-tr{position:absolute;right:48px;top:44px;display:flex;align-items:center;gap:22px}
.pl-count{font:500 12px/1 var(--f-h);letter-spacing:.08em;color:var(--mu);font-variant-numeric:tabular-nums}
.pl-count b{color:#fff;font-weight:600}
.pl-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--l);transition:background .3s,transform .4s var(--ez)}
.pl-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}

/* stage */
.pl-stage{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr) minmax(0,220px);gap:56px;align-items:center;padding:0 var(--pad);min-height:0}
.pl-media{height:100%;min-height:0;display:grid;place-items:center;padding:6px 0 26px}
.pl-media .fr{height:min(100%,calc(100dvh - 330px));max-width:100%;aspect-ratio:var(--ar);border-radius:18px;box-shadow:0 40px 110px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.pl-media.in .fr{animation:plIn .7s var(--ez) both}
@keyframes plIn{from{opacity:0;transform:scale(.975)}}

/* frames: film stills and placeholders */
.fr{position:relative;overflow:hidden;background:#101219;color:#fff}
.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fr.img:not(.film)::after{display:none}
.fr.img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 40%,rgba(0,0,0,.45))}
.fr.film{cursor:pointer}
.fc{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.ft{font:600 11px var(--f-h);letter-spacing:.5em;padding-left:.5em;color:rgba(255,255,255,.66)}
.pfn{font:600 14px var(--f-h);letter-spacing:.42em;padding-left:.42em}
.pp{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);transition:transform .4s var(--ez),background .3s}
.pp svg{margin-left:3px}
.fr.film:hover .pp{transform:scale(1.08);background:rgba(255,255,255,.24)}
.soon{position:absolute;z-index:2;left:50%;bottom:28px;transform:translate(-50%,8px);padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:#1D1E23;font:600 12.5px var(--f-h);white-space:nowrap;opacity:0;transition:opacity .35s var(--ez),transform .35s var(--ez);pointer-events:none}
.fr.is-soon .soon{opacity:1;transform:translate(-50%,0)}

.fr.ph{background:
  radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--t) 34%,transparent),transparent 70%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 11px),#0E1017}
.fr.ph::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;pointer-events:none}
.ph-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.phm{display:block;width:44px;color:var(--t);opacity:.9}
.phm svg{width:100%;height:auto;display:block}
.ph-k{margin-top:10px;font:600 10px var(--f-h);letter-spacing:.5em;padding-left:.5em;color:rgba(255,255,255,.55)}
.ph-n{font:500 17px/1.2 var(--f-h);letter-spacing:-.01em}
.ph-e{max-width:24ch;font:400 11.5px/1.5 var(--f-b);color:rgba(255,255,255,.5)}
.ph-tag,.ph-f,.ph-s{position:absolute;font:600 9.5px var(--f-h);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ph-tag{left:28px;top:28px;color:var(--t)}
.ph-f{left:28px;bottom:28px}.ph-s{right:28px;bottom:28px;letter-spacing:.08em}
.fr.ph.sm::before{inset:5px;border-radius:5px}
.fr.ph.sm .phm{position:absolute;left:50%;top:50%;width:22px;transform:translate(-50%,-50%)}

/* info */
.pl-info{align-self:center}
.pl-info.in>*{animation:plUp .7s var(--ez) both}
.pl-info.in>*:nth-child(2){animation-delay:.04s}.pl-info.in>*:nth-child(3){animation-delay:.08s}.pl-info.in>*:nth-child(4){animation-delay:.12s}.pl-info.in>*:nth-child(5){animation-delay:.16s}.pl-info.in>*:nth-child(6){animation-delay:.2s}
@keyframes plUp{from{opacity:0;transform:translateY(8px)}}
.pl .k{display:block;font:600 10.5px/1 var(--f-h);letter-spacing:.24em;text-transform:uppercase;color:var(--mu)}
.pl-info h1{margin:16px 0 0;font:600 26px/1.15 var(--f-h);letter-spacing:-.025em;color:#fff}
.pl-info .ln{margin:10px 0 0;font:500 13.5px/1.45 var(--f-h);color:#8EA9F7}
.pl-info .d{margin:20px 0 0;font:400 13.5px/1.65 var(--f-b);color:var(--so)}
.pl-info dl{margin:22px 0 0;padding:0;border-top:1px solid var(--l)}
.pl-info dl div{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--l)}
.pl-info dt{font:500 11.5px/1.5 var(--f-h);color:var(--mu)}
.pl-info dd{margin:0;font:400 12.5px/1.5 var(--f-b);color:#fff}
.acts{display:flex;gap:10px;margin-top:26px}
.b{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:999px;font:600 13px var(--f-h);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ez)}
.b svg{width:14px;height:14px;margin-left:-3px}
.b.w{background:#fff;color:#0B0C10}.b.w:hover{background:#E9EFFE}
.b.g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}.b.g:hover{background:rgba(255,255,255,.08)}
.b:active{transform:scale(.97)}

/* right column */
.pl-side{align-self:center;display:grid;gap:30px;justify-items:start}
.pl-next button{margin-top:16px;display:flex;align-items:center;gap:14px;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer}
.pl-next .fr{height:72px;aspect-ratio:var(--ar);border-radius:8px;flex:none;transition:transform .4s var(--ez)}
.pl-next button:hover .fr{transform:scale(1.04)}
.pl-next b{display:block;font:500 13.5px/1.35 var(--f-h)}
.pl-next small{display:block;margin-top:4px;font:400 11.5px var(--f-b);color:var(--mu)}

/* bottom: filters and filmstrip */
.pl-bot{padding:0 var(--pad) 34px;min-width:0}
.pl-tabs{display:flex;gap:26px;padding:18px 0 16px;border-top:1px solid var(--l)}
.pl-tabs button{position:relative;padding:0;border:0;background:none;color:var(--mu);font:500 12.5px/1 var(--f-h);cursor:pointer;transition:color .25s}
.pl-tabs button:hover{color:#fff}
.pl-tabs button[aria-selected="true"]{color:#fff}
.pl-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#F34949}
.pl-tabs sup{margin-left:5px;font-size:9.5px;color:rgba(255,255,255,.35);vertical-align:4px}
.pl-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-padding:0 var(--pad)}
.pl-strip::-webkit-scrollbar{display:none}
.th{flex:none;display:grid;gap:8px;justify-items:start;padding:0;border:0;background:none;color:var(--mu);cursor:pointer;opacity:.5;transition:opacity .35s var(--ez)}
.th .fr{height:84px;aspect-ratio:var(--ar);border-radius:8px;transition:box-shadow .35s var(--ez),transform .45s var(--ez)}
.th-k{max-width:96px;overflow:hidden;text-overflow:ellipsis;font:500 10px/1 var(--f-h);letter-spacing:.04em;white-space:nowrap}
.th:hover{opacity:.85}
.th.on{opacity:1;color:#fff}
.th.on .fr{box-shadow:0 0 0 1.5px #fff}
.th:focus-visible{outline:none}.th:focus-visible .fr{box-shadow:0 0 0 2px #8EA9F7}

.pl-toast{position:fixed;left:50%;bottom:150px;z-index:5;margin:0;transform:translate(-50%,10px);padding:10px 18px;border-radius:999px;background:#fff;color:#0B0C10;font:600 12.5px var(--f-h);opacity:0;pointer-events:none;transition:opacity .35s var(--ez),transform .35s var(--ez)}
.pl-toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1180px){.pl-stage{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px}.pl-side{display:none}}
@media (max-width:820px){
  body[data-page="player"]{overflow:auto}
  .pl{position:relative;min-height:100dvh;grid-template-rows:76px auto auto;--pad:16px}
  .pl-amb{position:fixed}
  .pl-brand{left:16px;top:23px}.pl-brand .mark{width:40px}
  .pl-crumb{left:72px;top:23px;height:22px;font-size:12px;gap:10px}.pl-crumb span{padding-left:10px}
  .pl-tr{right:16px;top:18px;gap:14px}.pl-x{width:36px;height:36px}
  .pl-stage{grid-template-columns:1fr;gap:26px;padding-top:8px}
  .pl-media{order:-1;padding:0}
  .pl-media .fr{height:auto;width:100%;max-height:62dvh;max-width:min(100%,calc(62dvh * (var(--ar))));border-radius:16px}
  .pl-info .d{max-width:none}
  .pl-bot{padding-bottom:28px;margin-top:30px}
  .pl-tabs{gap:20px;overflow-x:auto;scrollbar-width:none}
  .pl-toast{bottom:40px}
  .pl{grid-template-columns:minmax(0,1fr);width:100%;max-width:100vw;overflow-x:hidden;overflow-x:clip}
  .pl-top,.pl-stage,.pl-info,.pl-media,.pl-bot{min-width:0;max-width:100%}
  .pl-stage{grid-template-columns:minmax(0,1fr)}
  .pl-info h1,.pl-info .ln,.pl-info .d,.pl-info dd{overflow-wrap:anywhere}
  .pl-info .acts{flex-wrap:wrap}
  .pl-crumb{right:118px;overflow:hidden;white-space:nowrap}
  .pl-crumb b{overflow:hidden;text-overflow:ellipsis}
  .pl-crumb span{display:none}
  .pl-strip{scroll-padding:0 16px}
}
@media (max-width:360px){.pl-count{display:none}.pl-crumb{right:64px}}
@media (min-width:821px) and (max-height:860px){
  .pl{grid-template-rows:108px minmax(0,1fr) auto}
  .pl-info dl{display:none}.pl-info .d{margin-top:16px}.acts{margin-top:22px}
  .pl-media .fr{height:min(100%,calc(100dvh - 270px))}
  .pl-tabs{padding:14px 0 12px}.th .fr{height:62px}.pl-bot{padding-bottom:24px}
  .pl-next .fr{height:60px}
}
@media (prefers-reduced-motion:reduce){.pl *{animation:none!important;transition:none!important}}

/* Doses fields in place of placeholder art */
.fr .dz-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* coming soon placeholders */
.fr.ph{background:#101219;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fr.ph::before{display:none}
.fr.ph .cs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font:500 12px var(--f-h);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fr.ph .cs i{width:7px;height:7px;border-radius:50%;background:#F34949}
.pl-media .fr.ph{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 110px -20px rgba(0,0,0,.75)}
/* videos */
.fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.fr.playing video{object-fit:contain}
.fr.playing::after{display:none}
.fr.clip::after{display:none}
.fr .snd{position:absolute;right:14px;bottom:14px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);cursor:pointer;transition:background .3s}
.fr .snd:hover{background:rgba(255,255,255,.3)}
a.b{text-decoration:none}