/* ============================================================
   Watch-page gate + Download popover. Loaded by watch.php only; uses the host theme's
   tokens so every template site keeps its own look. The gate
   reads as a plain access notice: neutral button, no accent.
   ============================================================ */

/* ---------- player gate ---------- */
.gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; overflow: hidden; isolation: isolate; background: #0b0b0b; }
/* The still is shown WHOLE (contain — thumbs come portrait or landscape,
   cover would crop/zoom them), lightly blurred, over a heavily blurred
   fill of the same image that covers the letterbox bars. */
.gate-fill, .gate-still { position: absolute; pointer-events: none; user-select: none; }
.gate-fill { inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(.32) saturate(1.1); z-index: -3; }
.gate-still { inset: 0; width: 100%; height: 100%; object-fit: contain; filter: blur(4px) brightness(.55) saturate(.95); z-index: -2; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.62)); }
.gate-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.88); }
.gate-icon svg { width: 19px; height: 19px; }
.gate-title { font-size: 19px; font-weight: 500; color: #fff; letter-spacing: .1px; margin: 0; }
.gate-text { font-size: 13.5px; line-height: 1.5; color: rgba(242,242,242,.68); max-width: 340px; margin: 6px 0 0; }
.gate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 11px 22px; border-radius: var(--radius); background: #f2f2f2; color: #111; font-size: 14px; font-weight: 500; transition: background .15s; }
.gate-btn:hover { background: #fff; }
.gate-btn:focus-visible, .gate-alt button:focus-visible, .dl-pop button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gate-alt { margin-top: 11px; font-size: 12px; color: rgba(242,242,242,.5); }
.gate-alt button { font-size: inherit; color: inherit; text-decoration: underline; text-decoration-color: rgba(242,242,242,.3); text-underline-offset: 3px; padding: 0; }
.gate-alt button:hover { color: rgba(242,242,242,.8); }
.gate-btn.is-busy { opacity: .7; cursor: progress; }

@media (max-width: 640px) {
  /* phones: square player so the notice never cramps */
  .player.is-gated { aspect-ratio: 1 / 1; max-height: 78vh; }
  .gate-title { font-size: 17px; }
  .gate-text { font-size: 12.5px; }
  .gate-btn { align-self: stretch; margin-left: 12px; margin-right: 12px; }
}

/* ---------- Download button + popover ---------- */
.dl-wrap { position: relative; display: inline-flex; }
.act[aria-expanded="true"] { color: var(--text); border-color: #4a4a4a; background: var(--bg-elev-2); }
.dl-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 300px; padding: 16px; border-radius: 6px; background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: 0 18px 40px rgba(0,0,0,.6); text-align: left; }
.dl-pop[hidden] { display: none; }
.dl-pop::before { content: ""; position: absolute; top: -6px; right: 28px; width: 10px; height: 10px; background: var(--bg-elev); border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); transform: rotate(45deg); }
.dl-pop-grab { display: none; }
.dl-pop-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.dl-pop-text { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.dl-pop-acts { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.dl-pop .gate-btn { margin: 0; padding: 9px 16px; font-size: 13px; }
.dl-pop-no { padding: 9px 8px; font-size: 13px; color: var(--text-dim); }
.dl-pop-no:hover { color: var(--text); }
.dl-scrim { display: none; }

@media (max-width: 640px) {
  /* phones: the popover becomes a bottom sheet over a scrim */
  .dl-pop { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; z-index: 1001; border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 12px 20px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 40px rgba(0,0,0,.6); }
  .dl-pop::before { display: none; }
  .dl-pop-grab { display: block; width: 38px; height: 4px; border-radius: 4px; background: #444; margin: 0 auto 12px; }
  .dl-pop-title { font-size: 16px; }
  .dl-pop-acts { flex-direction: column; align-items: stretch; gap: 4px; }
  .dl-pop .gate-btn { padding: 12px; font-size: 14px; }
  .dl-pop-no { text-align: center; padding: 10px; }
  .dl-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); }
  .dl-scrim:not([hidden]) { display: block; }
}