/* ==========================================================================
   Radio Dad — Web Player (listen.radiodad.app)
   Brand tokens lifted verbatim from the iOS app (Colors.swift) and the
   marketing site. Warm minimalism — never pure white or pure black.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL) ------------------------------------------- */
@font-face { font-family:"Fraunces"; src:url("../fonts/Fraunces.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/InterVariable.ttf") format("truetype-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/JetBrainsMono.ttf") format("truetype"); font-weight:400; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --paper:#F5F1EA; --linen:#FBF7F0; --shell:#FFFDF8;
  --ink:#1F1D1A; --smoke:#6E6962;
  --ember:#D9684A; --ember-2:#C2563A; --lantern:#E8804A; --sage:#8A9A7B;
  --sand:#E8E2DA; --on-ember:#FFF8F2;
  --ember-wash:rgba(217,104,74,.08); --ember-glow:rgba(217,104,74,.22);
  --shadow:rgba(31,29,26,.10); --shadow-soft:rgba(31,29,26,.06);
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius:18px; --radius-lg:28px;
  --header-h:60px; --player-h:74px; --tabbar-h:0px;
}
.dark-tokens, :root[data-theme="dark"] {
  --paper:#1A1815; --linen:#252320; --shell:#33302C;
  --ink:#F0EBE4; --smoke:#9A938A;
  --ember:#E68864; --ember-2:#D6754F; --lantern:#F0995A; --sage:#A3B398;
  --sand:#3D3934; --on-ember:#1A1815;
  --ember-wash:rgba(230,136,100,.10); --ember-glow:rgba(230,136,100,.24);
  --shadow:rgba(0,0,0,.45); --shadow-soft:rgba(0,0,0,.30);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#1A1815; --linen:#252320; --shell:#33302C;
    --ink:#F0EBE4; --smoke:#9A938A;
    --ember:#E68864; --ember-2:#D6754F; --lantern:#F0995A; --sage:#A3B398;
    --sand:#3D3934; --on-ember:#1A1815;
    --ember-wash:rgba(230,136,100,.10); --ember-glow:rgba(230,136,100,.24);
    --shadow:rgba(0,0,0,.45); --shadow-soft:rgba(0,0,0,.30);
  }
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
/* Ensure [hidden] always wins over component display rules (e.g. .globe-loading). */
[hidden] { display:none !important; }
html,body { height:100%; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans); font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
}
/* paper grain — warmth */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ body::before{ mix-blend-mode:screen; opacity:.05; } }
img { max-width:100%; display:block; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,select { font:inherit; color:inherit; }
a { color:var(--ember); text-decoration:none; }
::selection { background:var(--ember-glow); color:var(--ink); }
:focus-visible { outline:2.5px solid var(--ember); outline-offset:2px; border-radius:8px; }
.eyebrow { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--ember); color:var(--on-ember); padding:10px 16px; border-radius:10px; z-index:400; }
.skip-link:focus { left:12px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; gap:.5em; font-weight:600; padding:.7em 1.2em; border-radius:999px; border:1px solid transparent; transition:transform .2s, background .2s, box-shadow .2s; white-space:nowrap; }
.btn-ember { background:var(--ember); color:var(--on-ember); box-shadow:0 12px 26px -14px var(--ember-glow); }
.btn-ember:hover { background:var(--ember-2); transform:translateY(-2px); }
.icon-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); transition:background .2s, color .2s, transform .15s; }
.icon-btn:hover { background:var(--ember-wash); color:var(--ember); }

/* ---- Masthead ----------------------------------------------------------- */
.app-header {
  position:relative; z-index:30; flex:none; height:var(--header-h);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--sand);
}
.app-bar { height:100%; max-width:1280px; margin-inline:auto; padding-inline:clamp(14px,3vw,28px); display:flex; align-items:center; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:.55em; font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--ink); }
.brand img { width:30px; height:30px; border-radius:9px; box-shadow:0 2px 8px -2px var(--shadow); }
.brand-tag { font-family:var(--mono); font-style:normal; font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); border:1px solid color-mix(in srgb,var(--ember) 36%,transparent); padding:2px 6px; border-radius:6px; }
.app-nav { display:flex; gap:4px; margin-inline:auto; }
.app-nav button, .app-nav a { padding:.5em .95em; border-radius:999px; font-weight:500; color:var(--smoke); position:relative; transition:color .2s, background .2s; }
.app-nav button:hover, .app-nav a:hover { color:var(--ink); text-decoration:none; }
.app-nav button.active { color:var(--ember); background:var(--ember-wash); }
.bar-right { display:flex; align-items:center; gap:8px; }
.onair { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke); }
.onair i { width:7px; height:7px; border-radius:50%; background:var(--lantern); box-shadow:0 0 0 0 var(--ember-glow); animation:pulse 2.4s infinite; }
.get-app { background:var(--ink); color:var(--paper); padding:.55em 1em; border-radius:999px; font-size:.85rem; font-weight:600; transition:opacity .2s, transform .2s; }
.get-app:hover { opacity:.9; transform:translateY(-1px); text-decoration:none; }

/* ---- Main + views ------------------------------------------------------- */
main { position:relative; flex:1 1 auto; min-height:0; z-index:1; }
.view { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.view:not(.active) { display:none; }
#view-globe { overflow:hidden; }
.view-wrap { max-width:1160px; margin-inline:auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,32px) 40px; }
.view-head { margin-bottom:22px; }
.view-head h1 { font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:-.02em; line-height:1.05; margin-top:6px; }
.view-head .lead { color:var(--smoke); margin-top:8px; font-size:1.05rem; }

/* ---- Chips -------------------------------------------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip { padding:.45em .9em; border-radius:999px; border:1px solid var(--sand); background:var(--linen); color:var(--ink); font-size:.86rem; font-weight:500; transition:all .18s; }
.chip:hover { border-color:var(--ember); color:var(--ember); transform:translateY(-1px); }
.chip.active { background:var(--ember); color:var(--on-ember); border-color:var(--ember); }

/* ---- Rails + grids ------------------------------------------------------ */
.rail { margin-bottom:30px; }
.rail-head { margin-bottom:14px; }
.rail-title { font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; margin-top:3px; }
.rail-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 14px; scrollbar-width:thin; }
.rail-track::-webkit-scrollbar { height:8px; }
.rail-track::-webkit-scrollbar-thumb { background:var(--sand); border-radius:8px; }
.rail-track .card { flex:0 0 162px; scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.rail-empty { color:var(--smoke); font-size:.95rem; padding:14px 4px; }

/* ---- Card --------------------------------------------------------------- */
.card { position:relative; min-width:0; background:var(--linen); border:1px solid var(--sand); border-radius:16px; padding:10px; transition:transform .22s, box-shadow .22s, border-color .22s; cursor:pointer; }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 34px -24px var(--shadow); border-color:color-mix(in srgb,var(--ember) 40%,var(--sand)); }
.card.is-current { border-color:var(--ember); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ember) 55%,transparent); }
.card-art { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; }
.art-letter { font-family:var(--serif); font-weight:600; font-size:2.1rem; color:var(--on-ember); opacity:.92; }
.card-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--shell); }
.card-play { position:absolute; right:8px; bottom:8px; width:38px; height:38px; border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 8px 18px -8px var(--ember-glow); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s, background .2s; }
.card-play>svg { grid-area:1/1; }
.card:hover .card-play, .card.is-current .card-play, .card:focus-within .card-play, .card-play:focus-visible { opacity:1; transform:none; }
.card-play:hover { background:var(--ember-2); transform:scale(1.06); }
.card .i-pause { display:none; }
.card.is-playing .i-play { display:none; }
.card.is-playing .i-pause { display:block; }
.card-eq { position:absolute; left:8px; top:8px; display:none; align-items:flex-end; gap:2px; height:14px; padding:3px 4px; border-radius:6px; background:color-mix(in srgb,var(--ink) 42%,transparent); }
.card-eq b { width:2px; height:50%; background:#fff; border-radius:1px; animation:eqbar .9s ease-in-out infinite; }
.card-eq b:nth-child(2){ animation-delay:.15s; } .card-eq b:nth-child(3){ animation-delay:.3s; } .card-eq b:nth-child(4){ animation-delay:.45s; }
.card.is-playing .card-eq { display:flex; }
.card-fav { position:absolute; right:8px; top:8px; z-index:2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; background:color-mix(in srgb,#000 42%,transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:color .2s, transform .15s, background .2s; }
.card-fav svg { fill:none; stroke:currentColor; stroke-width:2; transition:fill .2s; }
.card-fav svg, #npFav svg, #npxFav svg { stroke-linejoin:round; stroke-linecap:round; }
.card-fav:hover { transform:scale(1.12); color:#fff; }
.card-fav.is-fav { color:var(--ember); background:var(--shell); }
.card-fav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
.card-body { padding:9px 4px 2px; }
.card-name { font-family:var(--serif); font-weight:600; font-size:.98rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-sub { font-size:.8rem; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.card-meta { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); margin-top:5px; min-height:.9em; }
.chip-hls { color:var(--ember); border:1px solid color-mix(in srgb,var(--ember) 34%,transparent); border-radius:4px; padding:0 3px; }

/* ---- Search ------------------------------------------------------------- */
.search-bar { position:relative; display:flex; align-items:center; gap:10px; background:var(--shell); border:1px solid var(--sand); border-radius:14px; padding:0 14px; margin-bottom:14px; box-shadow:0 8px 20px -18px var(--shadow); }
.search-bar svg { color:var(--smoke); flex:none; }
.search-bar input { flex:1; border:0; background:none; padding:14px 0; font-size:1.05rem; outline:none; }
.facet-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; align-items:center; }
.facet, .facet-select, .facet-clear { border:1px solid var(--sand); background:var(--linen); border-radius:999px; padding:.5em 1em; font-size:.86rem; font-weight:500; color:var(--ink); transition:all .18s; }
.facet:hover, .facet-select:hover { border-color:var(--ember); color:var(--ember); }
.facet.active { border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
.facet .facet-val:not(:empty)::before { content:" · "; color:var(--smoke); }
.facet-clear { color:var(--smoke); }
.facet-select { appearance:none; padding-right:1.8em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236E6962' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8em center; }

/* ---- Facet sheet -------------------------------------------------------- */
.sheet { position:fixed; inset:0; z-index:200; display:none; align-items:flex-end; justify-content:center; background:color-mix(in srgb,var(--ink) 40%,transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.sheet.open { display:flex; }
.sheet-card { width:min(560px,100%); max-height:78vh; display:flex; flex-direction:column; background:var(--shell); border:1px solid var(--sand); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:0 -30px 60px -30px var(--shadow); animation:sheetIn .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width:640px){ .sheet { align-items:center; } .sheet-card { border-radius:var(--radius-lg); } }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px; }
.sheet-head h3 { font-family:var(--serif); font-size:1.3rem; }
.sheet-search { margin:0 20px 8px; padding:11px 14px; border:1px solid var(--sand); border-radius:12px; background:var(--linen); outline:none; }
.sheet-body { overflow-y:auto; padding:6px 12px 18px; }
.sheet-item { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:10px; text-align:left; transition:background .15s; }
.sheet-item:hover { background:var(--ember-wash); }
.sheet-item small { font-family:var(--mono); font-size:.7rem; color:var(--smoke); }

/* ---- Favorites + recently played --------------------------------------- */
.fav-section { margin-top:34px; }
.empty { text-align:center; padding:48px 16px; color:var(--smoke); }
.empty-art { font-size:2.4rem; color:var(--ember); }
.empty h2 { font-family:var(--serif); color:var(--ink); margin:10px 0 6px; }
.empty p { max-width:42ch; margin:0 auto 18px; }
.app-foot { margin-top:44px; padding-top:24px; border-top:1px solid var(--sand); font-size:.82rem; color:var(--smoke); display:grid; gap:6px; }
.app-foot a { color:var(--smoke); text-decoration:underline; text-underline-offset:2px; }
.app-foot a:hover { color:var(--ember); }

/* ---- Globe view --------------------------------------------------------- */
/* The globe sphere is dark in both themes; the SPACE around it = the page colour
   (cream in light, near-black in dark) so the dark planet sits cleanly on the page —
   no dark halo. MapLibre renders transparent outside the sphere, so this shows through. */
.globe-map { position:absolute; inset:0; background:var(--paper); }
.globe-tag { position:absolute; top:14px; left:14px; z-index:7; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
  background:color-mix(in srgb, var(--paper) 70%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--sand); border-radius:999px; padding:5px 10px; }
.globe-tag svg { color:var(--ember); }
.globe-credit { position:absolute; left:14px; bottom:12px; z-index:7; font-family:var(--mono); font-size:.55rem;
  letter-spacing:.03em; color:var(--smoke); opacity:.85; }
.globe-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.globe-credit a:hover { color:var(--ember); }
@media (max-width:600px) { .globe-stat { display:none; } }
.maplibregl-ctrl-attrib { font-size:10px; opacity:.7; }
.reticle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; color:var(--ember); pointer-events:none; z-index:6; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); animation:reticle 3.4s ease-in-out infinite; }
.globe-readout { position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:7; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:9px 18px; border-radius:14px; background:color-mix(in srgb,#0b0d12 64%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); color:#fff; max-width:min(86vw,420px); }
.globe-readout .rd-aim { font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80vw; }
.globe-readout .rd-sub { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.globe-actions { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:7; }
.globe-coach { position:absolute; bottom:74px; left:50%; transform:translateX(-50%); z-index:7; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); background:color-mix(in srgb,#0b0d12 58%,transparent); padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); transition:opacity .5s; animation:bob 3s ease-in-out infinite; }
.globe-coach.dismissed { opacity:0; pointer-events:none; }
.globe-loading { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; gap:10px; color:#cfd6dd; background:#0b0d12; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--ember); border-radius:50%; animation:spin .8s linear infinite; }
.globe-stat { position:absolute; right:14px; bottom:14px; z-index:7; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.globe-stat b { color:var(--ember); }

/* ---- Now-playing bar ---------------------------------------------------- */
.player { flex:none; display:none; align-items:center; gap:14px; height:var(--player-h); padding:0 clamp(12px,3vw,22px); background:color-mix(in srgb,var(--shell) 92%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--sand); z-index:25; position:relative; }
.player.active { display:flex; }
.np-art { position:relative; width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; box-shadow:0 4px 12px -6px var(--shadow); }
.np-art .art-letter { font-size:1.5rem; }
.np-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.np-info { min-width:0; flex:1 1 auto; }
.np-title { font-family:var(--serif); font-weight:600; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-sub { font-size:.8rem; color:var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-eq { display:none; align-items:flex-end; gap:2px; height:16px; flex:none; }
.np-eq b { width:3px; height:40%; background:var(--ember); border-radius:1px; animation:eqbar .9s ease-in-out infinite; }
.np-eq b:nth-child(2){ animation-delay:.12s; } .np-eq b:nth-child(3){ animation-delay:.24s; } .np-eq b:nth-child(4){ animation-delay:.36s; } .np-eq b:nth-child(5){ animation-delay:.48s; }
.player.is-playing .np-eq { display:inline-flex; }
.np-controls { display:flex; align-items:center; gap:4px; flex:none; }
.np-toggle { position:relative; width:50px; height:50px; border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 10px 22px -10px var(--ember-glow); transition:background .2s, transform .15s; }
.np-toggle:hover { background:var(--ember-2); transform:scale(1.04); }
.np-toggle>svg { grid-area:1/1; }
.np-toggle .i-pause { display:none; }
.player.is-playing .np-toggle .i-play { display:none; }
.player.is-playing .np-toggle .i-pause { display:block; }
.np-spin { position:absolute; inset:-4px; border-radius:50%; border:2px solid transparent; border-top-color:var(--on-ember); opacity:0; }
.player.is-tuning .np-toggle .i-play, .player.is-tuning .np-toggle .i-pause { opacity:.35; }
.player.is-tuning .np-spin { opacity:.9; animation:spin .8s linear infinite; }
.np-extra { display:flex; align-items:center; gap:6px; flex:none; }
.np-volume { width:96px; accent-color:var(--ember); }
#npFav svg { fill:none; stroke:currentColor; stroke-width:2; }
#npFav.is-fav { color:var(--ember); }
#npFav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
/* sleep timer + mute */
.np-sleep-wrap { position:relative; display:flex; }
#npSleep { position:relative; }
#npSleep.active { color:var(--ember); }
.sleep-badge { position:absolute; right:2px; bottom:2px; font-family:var(--mono); font-size:.5rem; font-weight:600; color:var(--ember); pointer-events:none; }
.sleep-menu { position:absolute; right:0; bottom:calc(100% + 10px); display:none; flex-direction:column; min-width:140px; padding:6px; background:var(--shell); border:1px solid var(--sand); border-radius:14px; box-shadow:0 20px 44px -24px var(--shadow); z-index:60; }
.sleep-menu.open { display:flex; animation:sheetIn .2s ease; }
.sleep-menu button { text-align:left; padding:9px 12px; border-radius:9px; font-size:.9rem; color:var(--ink); }
.sleep-menu button:hover { background:var(--ember-wash); color:var(--ember); }
#npMute.muted { color:var(--ember); }
.player .np-art { cursor:pointer; }
.search-count { font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); margin-bottom:14px; min-height:1em; }

/* ---- Mobile tab bar ----------------------------------------------------- */
.tabbar { display:none; }

/* ---- Toast -------------------------------------------------------------- */
.toast { position:fixed; left:50%; bottom:calc(var(--player-h) + 16px); transform:translate(-50%,16px); z-index:300; background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:999px; font-size:.88rem; box-shadow:0 18px 40px -20px var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.noscript { padding:40px; text-align:center; }

/* ---- Reveal ------------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--ember-glow);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes eqbar { 0%,100%{height:30%;} 50%{height:100%;} }
@keyframes spin { to{transform:rotate(360deg);} }
@keyframes reticle { 0%,100%{opacity:.95;} 50%{opacity:.6;} }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);} }
@keyframes sheetIn { from{transform:translateY(16px); opacity:.6;} to{transform:none; opacity:1;} }

/* ---- Accessibility helper ---------------------------------------------- */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Offline banner ----------------------------------------------------- */
.net-banner { position:fixed; top:0; left:0; right:0; z-index:500; text-align:center; padding:8px 14px; font-size:.85rem; font-weight:600; color:var(--on-ember); background:var(--ember); box-shadow:0 6px 18px -10px var(--shadow); }

/* ---- Install + help buttons -------------------------------------------- */
.install-btn { display:inline-flex; align-items:center; gap:6px; padding:.5em .9em; border-radius:999px; border:1px solid var(--ember); color:var(--ember); background:var(--ember-wash); font-size:.82rem; font-weight:600; transition:background .2s, color .2s, transform .2s; }
.install-btn:hover { background:var(--ember); color:var(--on-ember); transform:translateY(-1px); }
@media (max-width:980px) { .help-btn { display:none; } }

/* ---- Full-screen Now Playing ------------------------------------------- */
.now-playing { position:fixed; inset:0; z-index:120; height:100dvh; display:flex; flex-direction:column; align-items:center; padding:max(8px,env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom)); background:var(--paper); background-image:radial-gradient(120% 70% at 50% -8%, var(--ember-wash), transparent 62%); transform:translateY(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1); overflow-y:auto; visibility:hidden; }
.now-playing.open { transform:none; visibility:visible; }
.npx-close { align-self:center; width:54px; height:30px; display:grid; place-items:center; color:var(--smoke); border-radius:10px; flex:none; }
.npx-close:hover { color:var(--ember); }
/* margin:auto centres the sheet vertically yet stays scroll-safe (no top clipping) when a tiny screen can't fit it */
.npx-sheet { width:100%; max-width:440px; margin:auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(10px,2.4vh,22px); }
.npx-art { width:min(58vw,32vh,280px); aspect-ratio:1; border-radius:clamp(18px,3vh,24px); overflow:hidden; position:relative; background:var(--g,linear-gradient(150deg,var(--lantern),var(--ember))); display:grid; place-items:center; box-shadow:0 34px 64px -34px var(--shadow); flex:none; }
.npx-art .art-letter { font-family:var(--serif); font-weight:600; font-size:clamp(2.8rem,11vh,4rem); color:var(--on-ember); }
.npx-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.npx-body { width:100%; display:flex; flex-direction:column; align-items:center; gap:clamp(7px,1.5vh,14px); }
.npx-live { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); opacity:0; transition:opacity .2s; }
.now-playing.is-playing .npx-live { opacity:1; }
.npx-live i { width:7px; height:7px; border-radius:50%; background:var(--ember); animation:pulse 2s infinite; }
.npx-title { font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,4.6vw,2.05rem); line-height:1.1; }
.npx-sub { color:var(--smoke); font-size:.98rem; }
.npx-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.npx-tags .t { font-family:var(--mono); font-size:.58rem; letter-spacing:.05em; text-transform:uppercase; color:var(--smoke); border:1px solid var(--sand); border-radius:999px; padding:3px 9px; }
.npx-controls { display:flex; align-items:center; gap:clamp(20px,5vw,28px); margin-top:clamp(2px,1vh,8px); }
.npx-big { position:relative; width:clamp(58px,8.5vh,72px); height:clamp(58px,8.5vh,72px); border-radius:50%; background:var(--ember); color:var(--on-ember); display:grid; place-items:center; box-shadow:0 16px 30px -12px var(--ember-glow); transition:transform .15s, background .2s; }
.npx-big:hover { background:var(--ember-2); transform:scale(1.05); }
.npx-big>svg { grid-area:1/1; }
.npx-big .i-pause { display:none; }
.now-playing.is-playing .npx-big .i-play { display:none; }
.now-playing.is-playing .npx-big .i-pause { display:block; }
.npx-spin { position:absolute; inset:-5px; border-radius:50%; border:2px solid transparent; border-top-color:var(--on-ember); opacity:0; }
.now-playing.is-tuning .npx-spin { opacity:.9; animation:spin .8s linear infinite; }
.now-playing.is-tuning .npx-big > svg { opacity:.4; }
.npx-volume { display:flex; align-items:center; gap:12px; width:min(82%,280px); }
.npx-volume .np-volume { flex:1; width:auto; }
.npx-sleep { width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; }
.npx-sleep-label { font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); }
.npx-sleep-chips { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.npx-sleep-chips .chip { padding:.38em .8em; font-size:.8rem; }
.npx-sleep-chips .chip.active { background:var(--ember); color:var(--on-ember); border-color:var(--ember); }
.npx-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.npx-action { display:inline-flex; align-items:center; gap:7px; padding:.5em .9em; border-radius:11px; border:1px solid var(--sand); background:var(--linen); color:var(--ink); font-size:.82rem; font-weight:500; transition:border-color .18s, color .18s, transform .15s, background .18s; }
.npx-action:hover { border-color:var(--ember); color:var(--ember); transform:translateY(-1px); text-decoration:none; }
.npx-action svg { fill:none; stroke:currentColor; stroke-width:1.8; }
#npxFav.is-fav { border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
#npxFav.is-fav svg { fill:var(--ember); stroke:var(--ember); }
.npx-nextup { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--smoke); min-height:1em; }
.npx-nextup b { color:var(--ember); font-weight:400; }
/* App upsell card — song ID + lyrics live in the native app */
.np-app { width:100%; display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:16px; border:1px solid var(--sand); background:linear-gradient(180deg, var(--ember-wash), transparent 92%), var(--linen); box-shadow:0 14px 30px -24px var(--ember-glow); text-align:left; }
.np-app-ic { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(150deg,var(--lantern),var(--ember)); color:var(--on-ember); box-shadow:0 8px 16px -9px var(--ember-glow); }
.np-app-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.np-app-txt strong { font-family:var(--serif); font-weight:600; font-size:.97rem; line-height:1.12; color:var(--ink); }
.np-app-txt small { font-size:.73rem; line-height:1.25; color:var(--smoke); }
.np-app-cta { flex:none; display:inline-flex; align-items:center; gap:6px; padding:.52em .82em; border-radius:10px; background:var(--ink); color:var(--paper); font-size:.8rem; font-weight:600; letter-spacing:.01em; transition:transform .15s, opacity .2s; }
.np-app-cta:hover { transform:translateY(-1px); opacity:.92; text-decoration:none; }
.np-app-cta svg { fill:currentColor; }
/* Landscape / short viewports — art beside the controls so the whole sheet fits one screen */
@media (min-width:720px) and (max-height:640px) {
  .npx-sheet { flex-direction:row; max-width:880px; gap:clamp(28px,5vw,56px); align-items:center; text-align:left; }
  .npx-art { width:min(42vh,240px); }
  .npx-body { align-items:flex-start; max-width:430px; }
  .npx-tags, .npx-sleep-chips, .npx-actions { justify-content:flex-start; }
  .npx-sleep { align-items:flex-start; }
  .npx-volume { width:100%; }
}
/* Small / short phones — shrink art + tighten so the sheet (incl. app card) still fits one screen */
@media (max-width:719px) and (max-height:740px) {
  .npx-art { width:min(52vw,24vh,210px); }
  .npx-sheet { gap:clamp(8px,1.6vh,16px); }
  .npx-body { gap:clamp(6px,1vh,11px); }
  .np-app { padding:9px 12px; }
  .np-app-ic { width:34px; height:34px; }
  .npx-nextup { display:none; }
}

/* ---- Shortcuts overlay ------------------------------------------------- */
.shortcuts { position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb,var(--ink) 45%,transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.shortcuts.open { display:flex; }
.shortcuts-card { width:min(440px,100%); background:var(--shell); border:1px solid var(--sand); border-radius:var(--radius-lg); padding:4px 22px 22px; box-shadow:0 40px 80px -40px var(--shadow); animation:sheetIn .24s ease; }
.shortcuts-list { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:12px; }
.shortcuts-list li { display:flex; align-items:center; gap:14px; font-size:.94rem; color:var(--ink); }
.shortcuts-list li span { flex:0 0 132px; display:flex; gap:5px; flex-wrap:wrap; }
kbd { font-family:var(--mono); font-size:.72rem; background:var(--linen); border:1px solid var(--sand); border-bottom-width:2px; border-radius:6px; padding:2px 7px; color:var(--ink); }

/* ---- Skeletons ---------------------------------------------------------- */
.card.skeleton { pointer-events:none; cursor:default; }
.card.skeleton .card-art { background:var(--sand); }
.card.skeleton .sk-line { display:block; height:11px; border-radius:6px; background:var(--sand); margin-top:9px; }
.card.skeleton .sk-line.short { width:55%; }
.card.skeleton .card-art, .card.skeleton .sk-line { animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100%{opacity:.5;} 50%{opacity:.85;} }

/* ---- Rail scroll arrows ------------------------------------------------- */
.rail-scroller { position:relative; }
.rail-nav { position:absolute; top:0; bottom:14px; width:54px; display:none; align-items:center; z-index:4; border:0; cursor:pointer; font-size:1.9rem; color:var(--ink); opacity:0; transition:opacity .2s, color .2s; }
.rail-nav.prev { left:0; justify-content:flex-start; padding-left:4px; background:linear-gradient(90deg,var(--paper) 35%, transparent); }
.rail-nav.next { right:0; justify-content:flex-end; padding-right:4px; background:linear-gradient(270deg,var(--paper) 35%, transparent); }
.rail-nav:hover { color:var(--ember); }
@media (hover:hover) and (min-width:821px) { .rail-scroller:hover .rail-nav { display:flex; opacity:1; } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:820px) {
  :root { --tabbar-h:62px; }
  .app-nav { display:none; }
  .get-app { display:none; }
  .tabbar {
    display:flex; flex:none; height:var(--tabbar-h);
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--shell) 94%,transparent);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid var(--sand); z-index:24;
  }
  .tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--smoke); font-size:.62rem; font-weight:600; letter-spacing:.02em; }
  .tabbar button.active { color:var(--ember); }
  .player { gap:10px; }
  .np-extra .np-volume, #npShare { display:none; }
  .np-controls #npPrev { display:none; }
  .toast { bottom:calc(var(--player-h) + var(--tabbar-h) + 14px); }
  .globe-actions { bottom:16px; }
}
@media (max-width:380px){ .np-extra { display:none; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================= *
 *  New features: globe controls · Near you · Follow the sun ·    *
 *  Road Trip · Share card                                        *
 * ============================================================= */

/* ---- Globe control cluster (top-right tools + bottom actions) ---------- */
.globe-tools { position:absolute; top:14px; right:14px; z-index:7; display:flex; flex-direction:column; gap:8px; }
.globe-tool { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#fff; background:color-mix(in srgb,#0b0d12 56%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); transition:transform .15s, border-color .2s, background .2s, color .2s; }
.globe-tool:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--ember) 62%,transparent); }
.globe-tool.busy { opacity:.55; pointer-events:none; }
.globe-tool[aria-pressed="true"] { background:var(--ember); color:var(--on-ember); border-color:var(--ember); box-shadow:0 8px 22px -10px var(--ember-glow); }
.globe-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; max-width:94vw; }
.globe-pill { display:inline-flex; align-items:center; gap:.5em; font-weight:600; padding:.7em 1.15em; border-radius:999px; color:#fff; background:color-mix(in srgb,#0b0d12 56%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); transition:transform .2s, border-color .2s; white-space:nowrap; cursor:pointer; }
.globe-pill:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--ember) 65%,transparent); color:#fff; }
.globe-pill svg { color:var(--lantern); }

/* ---- Near you (Discover prompt card; rail reuses .rail) ---------------- */
.nearby-prompt { display:flex; align-items:center; gap:14px; padding:15px 17px; margin-bottom:22px; border-radius:18px; border:1px solid var(--sand); background:linear-gradient(180deg,var(--ember-wash),transparent 92%),var(--linen); }
.nearby-ic { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(150deg,var(--lantern),var(--ember)); color:var(--on-ember); }
.nearby-tx { flex:1; min-width:0; }
.nearby-tx strong { display:block; font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--ink); }
.nearby-tx span { font-size:.85rem; color:var(--smoke); }
.nearby-prompt .btn { flex:none; }

/* ---- Road Trip: setup panel (paper card over the globe) ---------------- */
.trip-panel { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:18px; background:color-mix(in srgb,#0b0d12 42%,transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.trip-card { position:relative; width:min(440px,94vw); background:var(--shell); border:1px solid var(--sand); border-radius:var(--radius-lg); padding:26px 24px 22px; box-shadow:0 40px 90px -40px var(--shadow); text-align:center; }
.trip-x { position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--smoke); }
.trip-x:hover { color:var(--ember); background:var(--ember-wash); }
.trip-card h2 { font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.12; margin-top:6px; }
.trip-lead { color:var(--smoke); font-size:.92rem; margin-top:8px; }
.trip-fields { display:flex; align-items:flex-end; gap:10px; margin-top:20px; text-align:left; }
.trip-field { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); }
.trip-field select { width:100%; padding:.7em .8em; border-radius:12px; border:1px solid var(--sand); background:var(--linen); color:var(--ink); font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.trip-arrow { flex:none; color:var(--ember); padding-bottom:.5em; }
.trip-cta { display:flex; flex-direction:column; gap:10px; margin-top:20px; align-items:center; }
.trip-cta .btn { width:100%; justify-content:center; }
.trip-rand { font-size:.85rem; color:var(--smoke); padding:.4em; }
.trip-rand:hover { color:var(--ember); }

/* ---- Road Trip: driving HUD (glass bar over the globe) ----------------- */
.trip-hud { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:11; width:min(440px,94vw); }
.trip-hud-card { background:color-mix(in srgb,#0b0d12 64%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:14px 16px; color:#fff; }
.trip-hud-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trip-route-lbl { font-family:var(--serif); font-weight:600; font-size:.98rem; }
.trip-route-lbl em { color:var(--lantern); font-style:normal; margin:0 4px; }
.trip-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:rgba(255,255,255,.8); }
.trip-icon:hover { color:#fff; background:rgba(255,255,255,.12); }
.trip-prog { height:4px; border-radius:99px; background:rgba(255,255,255,.16); margin:11px 0 9px; overflow:hidden; }
.trip-prog-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lantern),var(--ember)); transition:width .2s linear; }
.trip-now { display:flex; align-items:baseline; gap:8px; font-size:.9rem; }
.trip-count { font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:rgba(255,255,255,.6); flex:none; }
.trip-here { font-weight:600; flex:none; }
.trip-station { color:rgba(255,255,255,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.trip-controls { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.trip-ctl { flex:1; min-width:62px; padding:.5em .4em; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-size:.82rem; font-weight:600; transition:background .18s, border-color .18s; }
.trip-ctl:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.trip-arrived { text-align:center; }
.trip-arrived h3 { font-family:var(--serif); font-weight:600; font-size:1.5rem; margin-top:2px; }
.trip-arrived p { color:rgba(255,255,255,.7); font-size:.88rem; margin-top:4px; }
.trip-arrived .trip-controls { margin-top:14px; justify-content:center; }
.trip-arrived .btn { flex:none; }

/* hide idle globe chrome while a trip is driving */
#view-globe.trip-on .globe-actions,
#view-globe.trip-on .globe-tools,
#view-globe.trip-on .globe-coach,
#view-globe.trip-on .globe-readout { display:none; }

/* ---- Road Trip: planning state + HUD meta ----------------------------- */
.trip-planning { text-align:center; padding:36px 24px 30px; }
.trip-planning h2 { margin-top:12px; }
.trip-spinner { display:inline-block; width:34px; height:34px; border-radius:50%; border:3px solid var(--sand); border-top-color:var(--ember); animation:spin .8s linear infinite; }
.trip-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; }
.trip-mode { color:var(--lantern); white-space:nowrap; }
.trip-elapsed { color:rgba(255,255,255,.62); white-space:nowrap; }

/* toast clearance over globe controls (appended → wins by specificity + order) */
body.on-globe .toast { bottom:calc(var(--player-h) + 96px); }
body.trip-active .toast { bottom:calc(var(--player-h) + 200px); }
@media (max-width:600px) {
  body.on-globe .toast { bottom:calc(var(--player-h) + var(--tabbar-h) + 128px); }
  body.trip-active .toast { bottom:calc(var(--player-h) + var(--tabbar-h) + 210px); }
}