/* pod-player.css: the app's podcast player (PodcastPlayer.js) on the web.
   It lives inside the team page's phone mock (.phone .screen), or in a bottom
   sheet when the page is too narrow to show the phone. Colours come from the
   host page's tokens (--team, --team-2, --team-ink, --night, --deck, --chalk,
   --steel). Motion lives in pod-player.js (GSAP); CSS keeps only the small
   interactive transitions, so nothing here animates on page load. */

.pp { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; padding: 8px 16px 14px; overflow: hidden;
  background: radial-gradient(130% 55% at 50% 0%, color-mix(in srgb, var(--team) 38%, transparent), transparent 72%), var(--night);
  color: var(--chalk); visibility: hidden; transform: translateY(100%); }
.pp.open { visibility: visible; transform: none; }
.pp button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp svg { display: block; }
.pp-grab { flex: none; width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); margin: 2px auto 8px; }

.pp-hd { flex: none; display: flex; align-items: center; gap: 8px; }
.pp-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--steel); border-radius: 50%; }
.pp-x:hover { color: var(--chalk); background: rgba(255,255,255,.08); }
.pp-now { flex: 1; text-align: center; font: 800 9.5px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.pp-hr { display: flex; gap: 6px; align-items: center; }
.pp-q { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); }
.pp-q:hover { background: rgba(255,255,255,.14); }
.pp-qn { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--team-2); color: #111; font: 800 9px/16px var(--body); text-align: center; font-variant-numeric: tabular-nums; }
.pp-qn:empty { display: none; }
.pp-team { font: 800 10px var(--body); letter-spacing: .06em; padding: 5px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--team) 55%, transparent); background: color-mix(in srgb, var(--team) 20%, transparent); }

.pp-art { flex: none; position: relative; width: min(168px, 62%); aspect-ratio: 1; margin: 14px auto 14px; }
.pp-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; background: var(--deck); }
.pp-glow { position: absolute; inset: 10%; border-radius: 50%; background: var(--team-2); filter: blur(30px); opacity: .5; z-index: 0; }
.pp-rim { position: absolute; inset: 0; z-index: 2; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); pointer-events: none; }

.pp-src { flex: none; font: 800 9.5px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--team-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* long titles glide across, like the app's MarqueeTitle; short ones sit still */
.pp-title { flex: none; overflow: hidden; white-space: nowrap; margin: 4px 0 10px; font: 800 15px/1.3 var(--body); }
.pp-title span { display: inline-block; }
.pp-title.run { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent); }
.pp-title.run span { padding-left: 12px; animation: ppMarquee var(--dur, 12s) linear infinite; }
@keyframes ppMarquee { 0%, 14% { transform: translateX(0); } 86%, 100% { transform: translateX(calc(var(--shift, 0px) * -1)); } }

.pp-scrub { flex: none; }
.pp-seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.pp-seek:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; border-radius: 6px; }
.pp-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--team-2) var(--p), rgba(255,255,255,.16) var(--p)); }
.pp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: scale .15s ease-out; }
.pp-seek:active::-webkit-slider-thumb { scale: 1.35; }
.pp-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.pp-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--team-2); }
.pp-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.pp-times { display: flex; justify-content: space-between; font: 700 10px var(--body); color: var(--steel); font-variant-numeric: tabular-nums; }

.pp-tp { flex: none; display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0 12px; }
.pp-skip { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.08); color: var(--chalk); transition: background-color .15s ease-out, scale .15s ease-out; }
.pp-skip:hover { background: rgba(255,255,255,.14); }
.pp-skip small { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2px; font: 800 9px var(--body); pointer-events: none; }
.pp-play { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--team-ink, #fff);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--team) 70%, #fff) 0%, var(--team) 50%, color-mix(in srgb, var(--team) 78%, #000) 100%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--team) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.25);
  transition: scale .15s ease-out; }
.pp-skip:active, .pp-play:active, .pp-sp:active, .pp-sleep:active, .pp-q:active, .pp-mp:active { scale: .96; }
/* play and pause share the button: a cross-fade with scale and blur, both always in the DOM */
.pp-ico { position: relative; width: 26px; height: 26px; }
.pp-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s cubic-bezier(.2,0,0,1), scale .2s cubic-bezier(.2,0,0,1), filter .2s cubic-bezier(.2,0,0,1); }
.pp-ico .i-pause, .playing .pp-ico .i-play { opacity: 0; scale: .25; filter: blur(4px); }
.playing .pp-ico .i-pause { opacity: 1; scale: 1; filter: blur(0); }
.pp-play::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; opacity: 0; transition: opacity .2s; }
.pp.busy .pp-play::after { opacity: 1; animation: ppSpin .8s linear infinite; }
.pp.busy .pp-play .pp-ico { opacity: .35; }
@keyframes ppSpin { to { rotate: 1turn; } }

.pp-err { flex: none; margin: -2px 0 10px; text-align: center; font: 600 11.5px var(--body); color: var(--chalk); }
.pp-err[hidden] { display: none; }
.pp-err button { margin-left: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); font-weight: 800; }

.pp-row { flex: none; display: flex; gap: 6px; justify-content: center; }
.pp-sp, .pp-sleep { height: 30px; min-width: 44px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.07); color: var(--steel); font: 800 11px var(--body); font-variant-numeric: tabular-nums;
  transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out, scale .15s ease-out; }
.pp-sp:hover, .pp-sleep:hover { color: var(--chalk); }
.pp-sp[aria-pressed="true"], .pp-sleep.on { color: var(--chalk); background: color-mix(in srgb, var(--team-2) 20%, transparent); border-color: color-mix(in srgb, var(--team-2) 55%, transparent); }
.pp-sleep.on { color: var(--team-2); }
.pp-sleep b:empty { display: none; }

.pp-open { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 10px; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font: 700 11px var(--body); color: var(--team-2); border: 1px solid color-mix(in srgb, var(--team-2) 40%, transparent); background: color-mix(in srgb, var(--team-2) 10%, transparent);
  transition: background-color .15s ease-out; }
.pp-open:hover { background: color-mix(in srgb, var(--team-2) 18%, transparent); }
.pp-open[hidden] { display: none; }
.pp-notes { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 12px; padding: 10px 12px; margin-top: 2px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pp-notes[hidden] { display: none; }
.pp-notes .k { font: 800 8.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.pp-notes p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #C9CFD9; white-space: pre-line; }

/* the sheets inside the player: Up Next and the sleep timer */
.pp-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease-out; }
.pp-scrim.on { opacity: 1; pointer-events: auto; }
.pp-menu { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 9; max-height: 72%; display: flex; flex-direction: column; border-radius: 18px;
  background: var(--deck); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  translate: 0 calc(100% + 16px); visibility: hidden; transition: translate .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s; }
.pp-menu.on { translate: 0 0; visibility: visible; transition: translate .4s cubic-bezier(.22,1,.36,1), visibility 0s; }
.pp-menu h4 { flex: none; margin: 0; padding: 12px 10px 8px 14px; display: flex; justify-content: space-between; align-items: center; font: 800 13px var(--body); }
.pp-menu .list { overflow: auto; overscroll-behavior: contain; padding: 0 6px 8px; }
.pp-opt { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px; border: 0; background: transparent; border-radius: 10px; text-align: left; font: 700 12.5px var(--body); }
.pp-opt:hover { background: rgba(255,255,255,.06); }
.pp-opt[aria-checked="true"] { color: var(--team-2); }
.pp-opt.cancel { justify-content: center; color: var(--ember, #FF6B35); }
.pp-opt img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; background: var(--deck-2); }
.pp-opt .tx { min-width: 0; display: grid; gap: 2px; }
.pp-opt .tx b { font: 700 12px/1.3 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-opt .tx small { font: 600 10.5px var(--body); color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-empty { padding: 14px 14px 18px; font-size: 12px; color: var(--steel); text-align: center; }

/* the mini player: inside the phone above its tab bar, and floating on the page */
.pp-mini { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; overflow: hidden; position: relative;
  background: color-mix(in srgb, var(--team) 32%, var(--deck)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 28px rgba(0,0,0,.45); color: var(--chalk); }
.pp-mini[hidden] { display: none; }
.pp-mini img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; background: var(--deck-2); }
.pp-mx { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pp-mx b { font: 700 11.5px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mx small { font: 600 9.5px var(--body); color: color-mix(in srgb, var(--chalk) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mp { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--chalk); color: var(--night); cursor: pointer; transition: scale .15s ease-out; }
.pp-mp .pp-ico { width: 18px; height: 18px; }
.pp-mbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--team-2); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.screen > .pp-mini { position: absolute; left: 8px; right: 8px; bottom: calc(var(--tabs-h, 38px) + 6px); z-index: 5; }
.pp-float { position: fixed; z-index: 30; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 20px)); }
.pp-float .pp-mini { padding: 8px; border-radius: 16px; }
.pp-float .pp-mini img { width: 44px; height: 44px; }
.pp-float .pp-mx b { font-size: 13px; }
.pp-float .pp-mx small { font-size: 11px; }
.pp-float .pp-mp { width: 44px; height: 44px; }
.pp-float .pp-x2 { flex: none; width: 32px; height: 44px; border: 0; background: none; color: color-mix(in srgb, var(--chalk) 70%, transparent); cursor: pointer; display: grid; place-items: center; }
.pp-float .pp-x2:hover { color: var(--chalk); }
@media (max-width: 640px) { .pp-float { left: 10px; right: 10px; width: auto; } }

/* the bottom sheet: the player on a screen too narrow for the phone column */
.pp-sheet { position: fixed; inset: 0; z-index: 45; visibility: hidden; }
.pp-sheet.on { visibility: visible; }
.pp-sheet .pp-bd { position: absolute; inset: 0; background: rgba(5,7,10,.62); }
.pp-sheet .pp-box { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(440px, 100%); height: min(780px, calc(100dvh - 20px)); border-radius: 28px 28px 0 0; overflow: hidden;
  background: var(--night); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
.pp-box .pp { padding: 10px 22px calc(16px + env(safe-area-inset-bottom)); }
.pp-box .pp-now { font-size: 11px; }
.pp-box .pp-x, .pp-box .pp-q { width: 40px; height: 40px; }
.pp-box .pp-team { font-size: 12px; padding: 7px 10px; }
.pp-box .pp-art { width: min(250px, 66%); margin: 18px auto; }
.pp-box .pp-src { font-size: 11px; }
.pp-box .pp-title { font-size: 19px; margin-bottom: 12px; }
.pp-box .pp-times { font-size: 12px; }
.pp-box .pp-tp { gap: 30px; margin: 14px 0 16px; }
.pp-box .pp-skip { width: 56px; height: 56px; }
.pp-box .pp-skip small { font-size: 10.5px; }
.pp-box .pp-play { width: 78px; height: 78px; }
.pp-box .pp-play .pp-ico { width: 32px; height: 32px; }
.pp-box .pp-sp, .pp-box .pp-sleep { height: 40px; min-width: 56px; font-size: 13px; }
.pp-box .pp-open { font-size: 13px; padding: 9px 14px; }
.pp-box .pp-notes p { font-size: 13.5px; }
.pp-box .pp-opt { min-height: 48px; font-size: 14px; }

/* the clicked artwork on its way into the phone */
.pp-fly { position: fixed; z-index: 70; margin: 0; object-fit: cover; pointer-events: none; box-shadow: 0 18px 40px rgba(0,0,0,.45); }

@media (prefers-reduced-motion: reduce) {
  .pp-title.run span { animation: none; }
  .pp-title.run { white-space: normal; -webkit-mask-image: none; mask-image: none; }
  .pp-menu, .pp-menu.on { transition: none; }
}