/* ==========================================================================
   Global player chrome — footer#player / #qpanel / #theater / menus.
   Loaded on EVERY page (marketing pages and /listen/ alike) so the bar,
   the queue and the now-playing view are pixel-identical everywhere and
   never get torn down between pages. Positioning is always fixed/floating
   — never a grid child — so this file has zero dependency on whichever
   page layout (marketing hero, or the /listen/ library shell) happens to
   be underneath it.
   ========================================================================== */

/* ----------------------------------------------------------------- player */
#player{display:none;position:fixed;left:var(--gap);right:var(--gap);bottom:var(--gap);z-index:950;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:center;padding:0 16px;height:var(--player-h);background:linear-gradient(180deg,#171210,#100c0a);border-radius:var(--r);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body:not(.mini) #player{display:grid}
body.mini.has-track #player{display:grid}
.p-now{display:flex;align-items:center;gap:14px;min-width:0}
.p-now .cv{width:60px;height:60px;border-radius:6px;overflow:hidden;background:var(--bg-3);flex:none;position:relative;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.5);display:grid;place-items:center}
.p-now .cv img{width:100%;height:100%;object-fit:cover}
.p-now .cv .ic{font-size:24px;color:var(--cream-4)}
.p-now .cv .x{position:absolute;inset:0;background:rgba(10,8,7,.55);display:grid;place-items:center;opacity:0;transition:opacity .2s}
.p-now .cv:hover .x{opacity:1}
.p-now .cv .x .ic{font-size:20px;color:var(--cream)}
.p-now .tx{min-width:0}
.p-now .tx b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-now .tx b a:hover{text-decoration:underline}
.p-now .tx small{display:block;color:var(--cream-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-now .tx small a:hover{color:var(--cream);text-decoration:underline}
.p-now .icon-btn.on{color:var(--amber)}
.mini-expand{color:var(--amber)}
.p-mid{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.ctrls{display:flex;align-items:center;gap:10px}
.ctrls .icon-btn{width:38px;height:38px}
.ctrls .icon-btn .ic{font-size:21px}
.ctrls .icon-btn.big .ic{font-size:26px}
.ctrls .play{width:44px;height:44px;border-radius:50%;background:var(--fire);color:#1a0d06;display:grid;place-items:center;transition:transform .15s var(--ease),filter .2s;box-shadow:0 6px 18px rgba(217,83,30,.3);position:relative}
.ctrls .play:hover{transform:scale(1.07);filter:brightness(1.08)}
.ctrls .play:active{transform:scale(.96)}
.ctrls .play .ic{font-size:22px}
.ctrls .play.busy .ic{opacity:0}
.ctrls .play.busy::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(26,13,6,.25);border-top-color:#1a0d06;animation:spin1 .8s linear infinite}
@keyframes spin1{to{transform:rotate(360deg)}}
.ctrls .icon-btn.mode{position:relative}
.ctrls .icon-btn.mode.on::after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--amber);transform:translateX(-50%)}
.seek{display:flex;align-items:center;gap:10px;width:100%;max-width:640px}
.seek time{font-size:12px;color:var(--cream-3);font-variant-numeric:tabular-nums;min-width:38px}
.seek time:first-child{text-align:right}
.p-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.vol{display:flex;align-items:center;gap:2px;width:132px}
.icon-btn.q-on{color:var(--amber)}
.mini-fill{display:none;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(243,234,211,.14)}
.mini-fill::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--pp,0%);background:var(--fire)}

input[type=range].range{-webkit-appearance:none;appearance:none;background:transparent;height:16px;width:100%;margin:0;cursor:pointer;--p:0%;--fill:var(--cream)}
input[type=range].range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--fill) var(--p),rgba(243,234,211,.22) var(--p))}
input[type=range].range::-moz-range-track{height:4px;border-radius:4px;background:rgba(243,234,211,.22)}
input[type=range].range::-moz-range-progress{height:4px;border-radius:4px;background:var(--fill)}
input[type=range].range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cream);margin-top:-4px;box-shadow:0 2px 6px rgba(0,0,0,.5);opacity:0;transition:opacity .15s}
input[type=range].range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--cream);opacity:0;transition:opacity .15s}
input[type=range].range:hover{--fill:var(--amber)}
input[type=range].range:hover::-webkit-slider-thumb,input[type=range].range:focus-visible::-webkit-slider-thumb{opacity:1}
input[type=range].range:hover::-moz-range-thumb,input[type=range].range:focus-visible::-moz-range-thumb{opacity:1}
input[type=range].range:focus-visible{outline:none}

/* ----------------------------------------------------------- queue panel
   Fixed, independent of any grid — a thin right-hand panel, the same way
   Spotify docks its queue, whether you're inside the library or browsing
   a marketing page with something playing. */
.qpanel{position:fixed;top:var(--gap);right:var(--gap);bottom:calc(var(--player-h) + var(--gap)*2);width:352px;z-index:940;display:none;flex-direction:column;background:var(--panel);border-radius:var(--r);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden}
body.q-open .qpanel{display:flex}
.q-head{display:flex;align-items:center;gap:6px;padding:14px 10px 6px 14px}
.q-tabs{display:flex;gap:4px;flex:1}
.q-tabs button{height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--cream-3);transition:color .2s,background .2s}
.q-tabs button:hover{color:var(--cream)}
.q-tabs button.on{color:var(--cream);background:var(--hover-2)}
.q-body{flex:1;overflow:auto;padding:6px 10px 20px}
.q-sec{display:flex;align-items:center;justify-content:space-between;padding:16px 8px 8px}
.q-sec h4{font-size:15px;font-weight:700}
.q-sec h4 small{display:block;font-size:13px;font-weight:500;color:var(--cream-3)}
.q-sec button{font-size:12px;font-weight:700;color:var(--cream-3);letter-spacing:.1em;text-transform:uppercase}
.q-sec button:hover{color:var(--cream)}
.qrow{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 8px;border-radius:8px;transition:background .15s;cursor:default;position:relative}
.qrow:hover{background:var(--hover)}
.qrow .grip{color:var(--cream-4);cursor:grab;display:grid;place-items:center;width:18px}
.qrow .grip .ic{font-size:16px}
.qrow.nogrip{grid-template-columns:44px minmax(0,1fr) auto}
.qrow .cv{width:44px;height:44px;border-radius:5px;overflow:hidden;background:var(--bg-3);position:relative}
.qrow .cv img{width:100%;height:100%;object-fit:cover}
.qrow .cv .play{position:absolute;inset:0;background:rgba(10,8,7,.6);display:none;place-items:center}
.qrow:hover .cv .play{display:grid}
.qrow .cv .play .ic{font-size:18px}
.qrow .tx{min-width:0}
.qrow .tx b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .tx small{display:block;font-size:13px;color:var(--cream-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow.now .tx b{color:var(--amber)}
.qrow .rm{opacity:0;width:30px;height:30px;display:grid;place-items:center;color:var(--cream-3)}
.qrow:hover .rm{opacity:1}
.qrow .rm:hover{color:var(--cream)}
.qrow.dragging{opacity:.4}
.qrow.dragover{box-shadow:inset 0 2px 0 var(--amber)}
.q-empty{padding:40px 20px;text-align:center;color:var(--cream-2)}
.q-empty .ic{font-size:44px;color:var(--cream-4);margin-bottom:10px}
.q-empty b{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:26px;margin-bottom:6px;color:var(--cream)}

/* ----------------------------------------------------------------- theater */
.theater{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;background:var(--ink);overflow:hidden}
.theater.open{display:flex;animation:th-in .5s var(--ease) both}
@keyframes th-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.th-bg{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(90px) saturate(1.5) brightness(.42);transform:scale(1.2);transition:background-image .6s}
.th-shade{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 40%,transparent 30%,rgba(8,6,5,.75)),linear-gradient(180deg,rgba(8,6,5,.4),transparent 30%,rgba(8,6,5,.85))}
.th-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.th-top .lbl{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-2);text-align:center}
.th-top .lbl small{display:block;color:var(--cream-3);letter-spacing:.14em;font-size:12px;margin-top:2px;text-transform:none;font-weight:600}
.th-main{position:relative;z-index:2;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center;padding:0 clamp(22px,6vw,110px)}
.th-art{justify-self:end;width:min(100%,min(52vh,520px));aspect-ratio:1;position:relative;perspective:1200px}
.th-art .cv{position:absolute;inset:0;border-radius:10px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(243,234,211,.1);transition:transform .8s var(--ease)}
.th-art .cv img{width:100%;height:100%;object-fit:cover}
.th-art.playing .cv{transform:scale(1)}
.th-art:not(.playing) .cv{transform:scale(.94)}
.th-info{min-width:0;display:flex;flex-direction:column;gap:22px;max-width:620px}
.th-info h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,6.4vw,104px);line-height:.9;word-break:break-word}
.th-info .sub{color:var(--cream-2);font-size:16px}
.th-info .sub a:hover{text-decoration:underline}
.th-info .tags{display:flex;gap:8px;flex-wrap:wrap}
.th-info .tags a{height:30px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);background:rgba(10,8,7,.35);transition:all .25s}
.th-info .tags a:hover{background:var(--amber);border-color:var(--amber);color:#1a0d06}
.th-seek{display:flex;align-items:center;gap:12px}
.th-seek time{font-size:13px;color:var(--cream-2);font-variant-numeric:tabular-nums;min-width:42px}
.th-seek time:first-child{text-align:right}
.th-ctrls{display:flex;align-items:center;gap:8px;justify-content:center}
.th-ctrls .icon-btn{width:48px;height:48px}
.th-ctrls .icon-btn .ic{font-size:24px}
.th-ctrls .play{width:70px;height:70px;border-radius:50%;background:var(--fire);color:#1a0d06;display:grid;place-items:center;box-shadow:0 12px 40px rgba(217,83,30,.4);transition:transform .2s var(--ease)}
.th-ctrls .play:hover{transform:scale(1.06)}
.th-ctrls .play .ic{font-size:32px}
.th-viz{position:relative;z-index:2;height:min(16vh,130px);display:flex;align-items:flex-end;gap:4px;padding:0 clamp(22px,6vw,110px) 28px}
.th-viz i{flex:1;min-width:2px;background:linear-gradient(180deg,var(--amber-2),var(--ember));border-radius:2px 2px 0 0;transform-origin:bottom;transform:scaleY(.06);opacity:.85;will-change:transform}
@media (max-width:860px){
  .th-main{grid-template-columns:1fr;align-content:center;gap:22px;overflow:auto;padding-top:6px}
  .th-art{justify-self:center;width:min(74vw,40vh)}
  .th-info{align-items:stretch;text-align:center;gap:16px}
  .th-info .tags{justify-content:center}
  .th-info h2{font-size:clamp(36px,11vw,64px)}
  .th-viz{height:60px;padding-bottom:16px}
}

/* ------------------------------------------------------------ context menus */
.menu{position:fixed;z-index:1300;min-width:240px;max-width:320px;max-height:min(70vh,520px);overflow:auto;background:#241b15;border:1px solid var(--line-2);border-radius:10px;padding:5px;box-shadow:0 24px 60px rgba(0,0,0,.65);animation:menuin .18s var(--ease) both}
@keyframes menuin{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.menu button,.menu a{display:flex;align-items:center;gap:14px;width:100%;height:42px;padding:0 12px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--cream-2);text-align:left;transition:background .12s,color .12s;white-space:nowrap}
.menu button:hover,.menu a:hover,.menu button:focus-visible{background:var(--hover-2);color:var(--cream);outline:none}
.menu .ic{font-size:19px;color:var(--cream-3)}
.menu button:hover .ic{color:var(--cream)}
.menu .sep{height:1px;background:var(--line);margin:5px 6px}
.menu .danger{color:#f0917a}
.menu .head-row{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);font-weight:700}
.menu .check{margin-left:auto;color:var(--amber)}
.menu .sub-arrow{margin-left:auto}
.menu-back{position:fixed;inset:0;z-index:1290}
.kbd-grid{display:grid;grid-template-columns:1fr auto;gap:10px 20px;margin-top:8px}
.kbd-grid span{color:var(--cream-2);font-size:14px}
.kbd-grid kbd{font-family:var(--font-ui);font-size:12px;font-weight:600;background:var(--bg-4);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:2px 8px;color:var(--cream)}

/* -------------------------------------------------- dock/undock transition
   Triggered by APP.setMini() from anywhere on the site — same slide the
   /listen/ minimize button always used, now shared by every page. */
html.vt-dock::view-transition-old(root),html.vt-dock::view-transition-new(root),
html.vt-undock::view-transition-old(root),html.vt-undock::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
@keyframes dock-out{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(26%) scale(.95);opacity:0}}
@keyframes dock-in{0%{transform:translateY(1.5%) scale(1.015);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
html.vt-dock::view-transition-old(root){animation-name:dock-out}
html.vt-dock::view-transition-new(root){animation-name:dock-in}
html.vt-undock::view-transition-old(root){animation-name:dock-out;animation-direction:reverse}
html.vt-undock::view-transition-new(root){animation-name:dock-in;animation-direction:reverse}

/* content clearance so nothing sits under the floating bar/tabbar */
#homeLayer{padding-bottom:0;transition:padding-bottom .2s}
body.has-track #homeLayer{padding-bottom:calc(var(--player-h) + var(--gap)*2)}
@media (max-width:820px){
  body.has-track #homeLayer{padding-bottom:calc(64px + 60px + env(safe-area-inset-bottom) + 16px)}
  #player{left:8px;right:8px;bottom:calc(60px + env(safe-area-inset-bottom));height:64px;grid-template-columns:minmax(0,1fr) auto;padding:0 8px;border-radius:12px;background:#221a14;box-shadow:0 10px 30px rgba(0,0,0,.6)}
  body:not(.app) #player{bottom:8px} /* no mobile tabbar off /listen/ — dock straight to the edge */
  .qpanel{position:fixed;inset:0;z-index:1050;border-radius:0}
  .p-mid{display:contents}
  .p-mid .seek{display:none}
  .p-mid .ctrls{grid-column:2;grid-row:1}
  .p-mid .ctrls .icon-btn{display:none}
  .p-mid .ctrls .play{width:42px;height:42px}
  .mini-fill{display:block}
  .p-right{display:none}
  .p-now .cv{width:46px;height:46px}
  .p-now .icon-btn{display:none}
  .menu{left:8px!important;right:8px!important;top:auto!important;bottom:8px;max-width:none;max-height:70vh;border-radius:16px;padding:8px;animation:sheet .28s var(--ease) both}
  .menu button,.menu a{height:50px;font-size:16px}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}}
  .menu-back{background:rgba(6,4,3,.55)}
}