/* ---------- player bar ---------- */
.player{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 54px);z-index:24;display:none;align-items:center;gap:12px;padding:12px 14px;background:var(--nsm-grad-slab);color:var(--nsm-cream-ink);border-radius:var(--nsm-r-slab) var(--nsm-r-slab) 0 0;box-shadow:var(--nsm-sh-slab)}
.player.on{display:flex}
.player{cursor:pointer}
.pl-meta{flex:1;min-width:0}
.pl-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.pl-sub{font-size:12px;color:var(--dim)}
.pl-btn{width:46px;height:46px;border-radius:50%;background:var(--nsm-crimson);color:var(--nsm-cream-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(196,42,70,.4)}
.pl-btn svg{width:22px;height:22px;fill:#1A1206}

/* ---------- car view ---------- */
.car{position:fixed;inset:0;background:var(--nsm-grad-stage);z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--nsm-cream-ink);padding:20px;text-align:center}
.car.on{display:flex}
.car-name{font-size:22px;font-weight:600;max-width:88%;position:relative;z-index:1;line-height:1.25}
.car-name .ar,.car-name:lang(ar){font-family:var(--nsm-font-arabic)}
body.podplay .car-name{font-family:var(--nsm-font-arabic);font-size:var(--nsm-t-episode);font-weight:700}
.car-sub{font-size:13px;color:var(--nsm-cream-ink-55);max-width:86%;position:relative;z-index:1}
.car-row{display:flex;align-items:center;gap:30px}
.car-skip{width:var(--nsm-transport);height:var(--nsm-transport);border-radius:50%;background:var(--nsm-cream-fill);box-shadow:0 0 0 1px var(--nsm-cream-hairline);display:flex;align-items:center;justify-content:center;color:var(--nsm-cream-ink)}
.car-skip svg{width:30px;height:30px;fill:var(--dim)}
.car-play{width:var(--nsm-play-hero);height:var(--nsm-play-hero);border-radius:50%;background:linear-gradient(180deg,var(--nsm-gold),var(--nsm-apricot));color:var(--nsm-ink-on-gold);display:flex;align-items:center;justify-content:center;box-shadow:var(--nsm-sh-play)}
.car-play svg{width:52px;height:52px;fill:#1A1206}

.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 92px);left:50%;transform:translateX(-50%);
  background:var(--red);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;
  z-index:50;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.toast.on{opacity:1}
.toast.ok{background:var(--ok)}
/* update-ready bar: persistent and user-dismissed, never auto-reloads — a surprise reload
   mid-song is worse than running one build behind for another minute. */
.updbar{position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top) + 10px);z-index:70;
  background:var(--panel2);border:1px solid var(--amber-dim);border-radius:14px;
  padding:9px 10px 9px 14px;display:flex;align-items:center;gap:10px;font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.updbar[hidden]{display:none}
.updbar span{flex:1;line-height:1.35}
.updbar button{flex:none;background:var(--nsm-gold,#D98A3F);color:#33241B;border:none;
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}
.install{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:60;
  background:var(--panel2);border:1px solid var(--amber-dim);border-radius:18px;
  display:none;gap:12px;align-items:center;padding:12px;box-shadow:0 8px 30px rgba(51,36,27,.2)}
.install.on{display:flex}
.install img{width:44px;height:44px;border-radius:10px;flex:0 0 44px}
.install-meta{flex:1;font-size:13px;line-height:1.55;color:var(--text);min-width:0}
.install-meta b{color:var(--amber)}
.install-btn{background:var(--amber);color:#1A1206;font-weight:700;border-radius:999px;padding:10px 16px;flex:0 0 auto}
.install-x{flex:0 0 40px;height:40px;color:var(--dim);font-size:17px}
#fbText{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:8px 10px;margin-top:6px;resize:none;outline:none;font-size:14px}
/* legacy palette-blend block removed — 2A/4A design layer at end of file is authoritative */

@media (min-width:700px){
  body{max-width:600px;margin:0 auto;border-inline:1px solid var(--line);min-height:100vh}
  .player,.install{left:50%;right:auto;transform:translateX(-50%);width:min(576px,calc(100vw - 24px))}
  .car{max-width:600px;left:50%;right:auto;transform:translateX(-50%);border-inline:1px solid var(--line)}
  .chips{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:8px}
  .chips::-webkit-scrollbar{display:block;height:6px}
  .chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body.podmode .dial{display:none}
body.podmode .sort{display:none}
.pod-ep-head{display:flex;gap:12px;align-items:center;background:#FCF8EC;border:1px solid #e7ddc9;border-radius:12px;padding:10px 12px;margin:8px 0}
.pod-ep-head img{width:56px;height:56px;border-radius:10px}
.pod-ep-head b{font-size:14px;display:block}
.pod-back{background:none;border:none;color:#B23A48;font-weight:700;font-size:13px;padding:8px 0}
.ep-row{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left}
.ep-row small{opacity:.6;font-size:11px}


.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;background:var(--nsm-espresso-800);padding-bottom:env(safe-area-inset-bottom);box-shadow:inset 0 1px 0 var(--nsm-cream-hairline)}
.tabbar .tab{flex:1;background:none;border:none;color:var(--nsm-cream-ink);opacity:.45;font-size:12px;font-weight:700;padding:8px 0 7px;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar .tab.active{opacity:1;color:#D98A3F}
.tabbar .tab.active::before{content:"";position:absolute;top:-1px;left:32%;right:32%;height:3px;background:var(--nsm-wave);border-radius:0 0 3px 3px}
.tabbar .tab .ar{font-size:10px;display:block;font-weight:400}
.tab-mark{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:640px){.tabbar{left:50%;right:auto;transform:translateX(-50%);width:600px;border-left:1px solid #4A3624;border-right:1px solid #4A3624;border-radius:14px 14px 0 0}}
main{padding-bottom:130px}


.genres{display:none;gap:6px;overflow-x:auto;padding:6px 14px 2px;-webkit-overflow-scrolling:touch}
body.podmode .genres{display:flex}
.genres::-webkit-scrollbar{display:none}
.gpill{flex:none;background:#FCF8EC;border:1px solid #e7ddc9;border-radius:999px;padding:6px 12px;font-size:12px;color:#33241B}
.gpill.active{background:#D98A3F;border-color:#D98A3F;color:#fff;font-weight:700}
.pod-ep-head{background:#33241B;border-color:#33241B;color:#F7F0DE}
.pod-ep-head b{color:#F7F0DE}
.pod-ep-head span{color:#F7F0DE;opacity:.75}


.pl-seek{display:none;background:none;border:none;color:#F7F0DE;font-size:11px;font-weight:800;padding:4px 6px;line-height:1}
body.podplay .pl-seek{display:block}
body.podplay .car-skip{display:none}
.pl-prog{display:none;position:absolute;left:16px;right:16px;top:4px;height:3px;border-radius:2px;background:rgba(247,240,222,.16);overflow:hidden}
body.podplay .pl-prog{display:block}
.pl-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--amber);width:0%}
.car-seek{width:var(--nsm-transport);height:var(--nsm-transport);border-radius:50%;background:var(--nsm-cream-fill);box-shadow:0 0 0 1px var(--nsm-cream-hairline);font-family:var(--nsm-font-mono);font-size:12px;color:var(--nsm-cream-ink)}
body.podplay .car-seek{display:block}
.car-prog{display:none;width:86%;margin:12px auto 4px;height:44px;position:relative;cursor:pointer;touch-action:none;background:var(--nsm-grad-recess);box-shadow:var(--nsm-sh-recess);border-radius:var(--nsm-r-recess);z-index:1}
body.podplay .car-prog{display:block}
.car-prog .track{position:absolute;left:14px;right:14px;top:19px;height:6px;border-radius:3px;background:rgba(247,240,222,.14)}
.car-prog i{position:absolute;inset-inline-start:14px;top:19px;height:6px;border-radius:3px;background:var(--nsm-wave);width:calc((100% - 28px) * var(--p,0))}
.car-prog .thumb{position:absolute;top:22px;inset-inline-start:calc(14px + (100% - 28px) * var(--p,0));width:20px;height:20px;border-radius:50%;background:var(--nsm-cream-050);border:3px solid var(--nsm-apricot);transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.car-times{display:flex;justify-content:space-between;width:86%;margin:0 auto;font-family:var(--nsm-font-mono);font-size:12px;letter-spacing:var(--nsm-track-mono);color:var(--nsm-rose-soft);position:relative;z-index:1}
body:not(.podplay) .car-times{justify-content:center;margin-top:16px}
/* v3.11.10 (item 12): .car-art is now a CONTAINER, not the image. The image sits inside it, so a
   logo that 404s can degrade to the same letter tile a list row uses instead of the artwork being
   removed outright. See setCarArt in js/podcasts.js. */
.car-art{width:var(--nsm-art);height:var(--nsm-art);border-radius:var(--nsm-r-art);display:none;box-shadow:var(--nsm-sh-art);position:relative;z-index:1;overflow:hidden;align-items:center;justify-content:center}
.car.hasart .car-art{display:flex}
.car-art-img{width:100%;height:100%;object-fit:cover}
/* the letter tile, scaled up from the 44px row tile to the 226px artwork box */
.car-art.lt{color:#fff}
.car-art.lt svg{width:100%;height:100%}
.car-art.lt .lt-init{font-size:96px;padding-bottom:14px}
.share-tog{flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--faint);border-radius:8px}
.share-tog:active{background:var(--panel)}
@keyframes spinring{to{transform:rotate(360deg)}}
body.buffering .pl-btn,body.buffering .car-play{position:relative}
body.buffering .pl-btn svg,body.buffering .car-play svg{opacity:.25}
body.buffering .pl-btn::after,body.buffering .car-play::after{content:"";position:absolute;inset:9px;
  border:3px solid rgba(26,18,6,.18);border-top-color:#1A1206;border-radius:50%;
  animation:spinring .8s linear infinite;will-change:transform}
.ep-mark{font-size:10px;color:#B23A48;font-weight:700}
.sleepbtn{background:none;border:none;font-size:15px;padding:6px 4px;color:#F7F0DE;font-weight:800;font-family:"IBM Plex Mono",monospace;white-space:nowrap}


/* ── recessed dial in the full player (radio) ── */
.car-dial{display:block;width:86%;height:64px;margin:10px auto 0;position:relative;background:var(--nsm-grad-recess);box-shadow:var(--nsm-sh-recess);border-radius:var(--nsm-r-recess);overflow:hidden;z-index:1}
body.podplay .car-dial{display:none}
.car-dial .cd-scale{position:absolute;left:10px;right:10px;top:34px;height:16px;background:repeating-linear-gradient(90deg,rgba(247,240,222,.28) 0 1px,transparent 1px 9px)}
.car-dial .cd-nums{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-micro);letter-spacing:var(--nsm-track-mono);color:var(--nsm-cream-ink-45)}
.car-dial .cd-needle{position:absolute;top:6px;bottom:6px;width:2px;background:var(--nsm-crimson);left:8%;box-shadow:0 0 8px rgba(196,42,70,.6);transition:left var(--nsm-needle) var(--nsm-ease)}
.car-dial .cd-freq{position:absolute;bottom:6px;inset-inline-end:10px;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-mono);letter-spacing:var(--nsm-track-mono);color:var(--nsm-gold)}
/* live timecode under radio player */
body:not(.podplay) .car-times{justify-content:center;color:var(--nsm-rose-soft)}

/* ── dock details ── */
.pl-art{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--nsm-tile-cream);color:var(--nsm-ink);display:flex;align-items:center;justify-content:center;font-family:var(--nsm-font-arabic);font-weight:700;overflow:hidden}
.pl-art img{width:100%;height:100%;object-fit:cover}
/* v3.11.13: the bar shares the SVG wave tile with every other surface (it used to draw a plain text
   letter of its own). letterTile emits a fixed 44px svg and the dock tile is 40px, so it needs the
   same scale rule .car-art.lt already has, and an initial sized for 40px rather than the list's 44.
   Positioning only — no layout change, the box keeps its 40px footprint. */
.pl-art.lt{position:relative;color:#fff}
.pl-art.lt svg{width:100%;height:100%}
.pl-art.lt .lt-init{font-size:17px}
.pl-sub{font-family:var(--nsm-font-mono);font-size:var(--nsm-t-mono);letter-spacing:var(--nsm-track-mono);color:var(--nsm-cream-ink-55)}
/* ── 2A player top bar ── */
.car-top{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.car-top button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--nsm-cream-ink-55);border-radius:50%}
.car-brand{display:flex;align-items:center;gap:7px}
.car-brand img{height:22px;width:auto;opacity:.95}
.car-brand i{font-style:normal;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-micro);letter-spacing:var(--nsm-track-eyebrow);color:var(--nsm-cream-ink-45)}
.car-topact{display:flex}
.car-topact #carFav.on{color:var(--nsm-rose)}
.car-topact #carFav.on svg{fill:var(--nsm-rose)}
.car-eyebrow{position:absolute;top:calc(env(safe-area-inset-top) + 52px);left:0;right:0;text-align:center;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-micro);letter-spacing:var(--nsm-track-eyebrow);color:var(--nsm-cream-ink-45);z-index:2}
/* name block */
.car-name{font-size:var(--nsm-t-station);font-weight:700}
.car-arname{font-family:var(--nsm-font-arabic);font-size:var(--nsm-t-arabic-hero);color:var(--nsm-gold);line-height:1.2;position:relative;z-index:1}
.car-arname:empty{display:none}
body.podplay .car-arname{color:var(--nsm-cream-ink)}
.car-np{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.car-np .np-eyebrow{font-family:var(--nsm-font-mono);font-size:var(--nsm-t-micro);letter-spacing:var(--nsm-track-eyebrow);color:var(--nsm-rose-soft)}
/* utility chips */
.car-utility{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.car-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--nsm-r-pill);background:var(--nsm-cream-fill);box-shadow:0 0 0 1px var(--nsm-cream-hairline);font-family:var(--nsm-font-mono);font-size:var(--nsm-t-mono);letter-spacing:var(--nsm-track-mono);color:var(--nsm-cream-ink-55)}
.car-chip.live{box-shadow:0 0 0 1.5px var(--nsm-crimson);color:var(--nsm-rose-soft);background:rgba(196,42,70,.12)}
.car-chip.gold{box-shadow:0 0 0 1px var(--nsm-gold);color:var(--nsm-gold)}
body.podplay #carLiveChip{display:none}
body:not(.podplay) #carSpeed{display:none}
.eqm{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.eqm i{width:2px;background:var(--nsm-rose);animation:eqb var(--nsm-eq-1) ease-in-out infinite alternate}
.eqm i:nth-child(2){animation-duration:var(--nsm-eq-2)}
.eqm i:nth-child(3){animation-duration:var(--nsm-eq-3)}
@keyframes eqb{from{height:3px}to{height:10px}}
/* hero = crimson (2A) */
.car-play{background:var(--nsm-crimson);color:var(--nsm-cream-ink)}
/* podcast scrubber = plain line + crimson knob (2A revision) */
body.podplay .car-prog{background:none;box-shadow:none;height:32px}
body.podplay .car-prog .track{left:0;right:0;top:14px;height:4px;background:rgba(247,240,222,.18)}
body.podplay .car-prog i{inset-inline-start:0;top:14px;height:4px;background:var(--nsm-crimson);width:calc(100% * var(--p,0))}
body.podplay .car-prog .thumb{top:16px;inset-inline-start:calc(100% * var(--p,0));width:22px;height:22px;background:var(--nsm-crimson);border:4px solid #E8A0A8}
body.podplay .car-times{color:var(--nsm-cream-ink);justify-content:space-between}
body.podplay .car-times #carTimeR{color:var(--nsm-cream-ink-55)}
/* dial: diamond needle head */
.car-dial .cd-needle::before{content:"";position:absolute;top:-1px;left:50%;width:8px;height:8px;background:var(--nsm-crimson);transform:translateX(-50%) rotate(45deg);border-radius:1px}

/* ═══════════ 2A design layer — verbatim values from Player Directions.dc ═══════════ */
/* bottom slab: mini player + tab bar read as one espresso slab */
.player{bottom:calc(env(safe-area-inset-bottom) + 58px);gap:11px;padding:9px 12px 9px 14px;background:linear-gradient(180deg,#3A2920 0%,#2B1E15 100%);border-radius:22px 22px 0 0;box-shadow:var(--nsm-sh-slab)}
.tabbar{background:linear-gradient(180deg,#2B1E15 0%,#1F150F 100%);box-shadow:none;border-top:1px solid var(--nsm-cream-hairline)}
.pl-name{font-size:14px;font-weight:600;color:#FFF6E8}
.pl-name .ar{font-family:var(--nsm-font-arabic);font-size:14.5px;color:var(--nsm-gold)}
.pl-sub{font-size:11px;color:rgba(247,240,222,.6)}
.pl-sub .flag{width:15px;height:11px;border-radius:2px;vertical-align:-1px}
.pl-btn{width:44px;height:44px;background:var(--nsm-crimson);color:#FFF6E8;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.pl-btn svg{width:18px;height:18px;fill:#FFF6E8}
.pl-seek{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:rgba(247,240,222,.6);font-family:var(--nsm-font-mono);font-size:11px}
.sleepbtn{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:rgba(247,240,222,.45)}
body.sleep-armed .sleepbtn{color:var(--nsm-gold)}
/* tab bar per 4a */
.tabbar .tab{gap:2px;padding:7px 0 9px;font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;color:rgba(247,240,222,.5);opacity:1}
.tabbar .tab .ar{font-family:var(--nsm-font-ui);font-size:11.5px;font-weight:400;letter-spacing:0;display:inline}
.tabbar .tab.active{color:var(--nsm-gold);opacity:1}
.tabbar .tab.active::before{left:50%;right:auto;width:36px;height:3px;transform:translateX(-50%);background:var(--nsm-gold);border-radius:0 0 3px 3px}
.tabbar .tab:not(.active) .tab-mark{opacity:.5}
/* full player stage */
.car{justify-content:flex-start;padding:calc(env(safe-area-inset-top) + 64px) 26px 40px;gap:0}
.car-wave{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0}
.car-top{top:calc(env(safe-area-inset-top) + 10px);left:16px;right:16px}
.car-top button{width:44px;height:44px;border-radius:0;color:var(--nsm-cream-ink)}
.car-top #carFav{color:#C9515F}
.car-top #carFav.on svg{fill:currentColor}
.car-brand{flex-direction:column;gap:3px;align-items:center}
.car-brand img{height:30px}
.car-eyebrow{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;color:rgba(239,192,120,.8);margin:6px 0 0}
.car-art{margin-top:26px;background:var(--nsm-tile-cream)}
.car-name{margin-top:24px;font-size:29px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:#FFF6E8;text-wrap:pretty}
.car-arname{position:relative;z-index:1;font-family:var(--nsm-font-arabic);font-size:31px;line-height:1.1;color:var(--nsm-gold);margin-top:7px}
.car-arname:empty{display:none}
.car-sub{margin-top:6px;font-size:13px;color:rgba(247,240,222,.62)}
.car-np{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:14px;max-width:100%}
.car-np .np-eyebrow{font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;color:rgba(239,192,120,.8)}
.car-np #carNpSong{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;font-weight:500;line-height:1.35;color:rgba(247,240,222,.86)}
.car-dial{margin-top:18px;border-radius:13px}
.car-dial .cd-scale{top:14px;height:19px;left:18px;right:18px;background:repeating-linear-gradient(to right,rgba(247,240,222,.32) 0 1px,transparent 1px 12.24px)}
.car-dial .cd-nums{top:auto;bottom:9px;left:18px;right:18px;font-size:10.5px;color:rgba(247,240,222,.46)}
.car-dial .cd-needle{top:8px;bottom:24px;width:2.5px;border-radius:2px;box-shadow:0 0 12px rgba(196,42,70,.95);animation:nsm-needle 2.6s ease-in-out infinite}
.car-dial .cd-needle::before{top:-5px;width:12px;height:12px;border-radius:3px;box-shadow:0 0 10px rgba(196,42,70,.75)}
.car-dial .cd-freq{bottom:9px;font-size:10.5px}
.car-utility{margin-top:16px;display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.car-chip{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;padding:0 15px;border-radius:999px;font-family:var(--nsm-font-mono);font-size:12.5px;font-weight:600;letter-spacing:.12em}
.car-chip.live{background:rgba(196,42,70,.16);border:1px solid rgba(196,42,70,.45);color:var(--nsm-rose-soft)}
.car-chip.live .eqm{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.car-chip.live .eqm i{width:2.5px;height:14px;background:var(--nsm-rose);border-radius:1px;transform-origin:bottom;animation:nsm-eq1 var(--nsm-eq-1) ease-in-out infinite}
.car-chip.live .eqm i:nth-child(2){animation-name:nsm-eq2;animation-duration:var(--nsm-eq-2)}
.car-chip.live .eqm i:nth-child(3){animation-name:nsm-eq3;animation-duration:var(--nsm-eq-3)}
.car-chip.gold{background:var(--nsm-cream-fill);border:1px solid rgba(247,240,222,.12);color:rgba(247,240,222,.78)}
.car-row{margin-top:auto;gap:34px;position:relative;z-index:1}
.car-seek{width:56px;height:56px;background:rgba(247,240,222,.06);box-shadow:none;color:rgba(247,240,222,.8)}
.car-play{width:86px;height:86px;background:var(--nsm-crimson);color:#FFF6E8;box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.car-play svg{width:30px;height:30px;fill:#FFF6E8}
@media (prefers-reduced-motion:reduce){.needle,.car-dial .cd-needle{animation:none;opacity:1}}

/* ═══ v3.2.1 fixes ═══ */
/* seek is a podcast concept: hide ±15/30 in radio (mini bar + full player) */
.pl-seek{display:none}
body.podplay .pl-seek{display:flex}
.car-seek{display:none}
body.podplay .car-seek{display:flex;align-items:center;justify-content:center}
/* radio has no scrubber and one live counter only */
.car-prog,.car-times{display:none}
body.podplay .car-prog{display:block}
body.podplay .car-times{display:flex}
/* speed is podcast-only; sleep pill works in both */
#carSpeed{display:none}
body.podplay #carSpeed{display:flex}
#carSleep{background:var(--nsm-cream-fill);border:1px solid rgba(247,240,222,.12);color:rgba(247,240,222,.78);cursor:pointer}
body.sleep-armed #carSleep{color:var(--nsm-gold);border-color:rgba(239,192,120,.45)}
/* header truly centered: grid with equal side columns */
.car-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.car-top #carClose{justify-self:start}
.car-top .car-topact{justify-self:end;display:flex;align-items:center;gap:2px}
/* station skips: 56px circles per design */
.car-skip{display:flex;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;background:rgba(247,240,222,.06);box-shadow:none;color:rgba(247,240,222,.8)}
.car-skip svg{width:24px;height:24px;fill:currentColor}
body.podplay .car-skip{display:none}
/* painted tab icons */
.tab-ico{width:26px;height:26px}
.tabbar .tab:not(.active) .tab-ico{opacity:.5}
/* keep the eyebrow clear of the header stack */
.car-eyebrow{margin-top:10px}
.car-name,.car-sub{position:relative;z-index:1}

/* ═══ v3.3.0 batch ═══ */
/* long podcast titles: clamp in the full player, never overlap */
body.podplay .car-name{font-size:22px;line-height:1.3;letter-spacing:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
/* mini bar stays one height: single-line name + sub */
.pl-name,.pl-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ v3.3.1 fixes ═══ */
/* guaranteed gap between utility pills and transports (they touched on shorter screens) */
.car-utility{margin-bottom:0}
.car-row{margin-top:auto;padding-top:20px}
/* fixed text placeholders — every block owns its height, long names shrink instead of overlapping */
.car-name{height:calc(1.15em * 2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:26px}
.car-name.long{font-size:21px;height:calc(1.2em * 2)}
.car-arname{height:1.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:29px}
.car-arname.long{font-size:23px}
.car-sub{height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.car-np{height:44px;overflow:hidden}
body.podplay .car-name{height:auto;max-height:calc(1.3em * 3);font-size:22px}
/* frequency readout out of the number row (it sat on 104/108) */
.car-dial .cd-freq{top:7px;bottom:auto}
.dial-freq{top:5px;bottom:auto;inset-inline-end:8px}

/* ═══ v3.3.2 audit fixes (verified by render) ═══ */
.car-eyebrow{align-self:center}
.car-np{align-self:center}
.car-utility{align-self:stretch;justify-content:space-between;padding:0 2px}
.car-arname{align-self:center}
.car-sub{align-self:center}

/* full player: station logos fit the frame (wordmarks were being cropped); podcast art fills it */
.car-art-img{object-fit:contain;padding:16px;box-sizing:border-box}
body.podplay .car-art-img{object-fit:cover;padding:0}

/* Desktop volume control. Hidden by default and revealed only when the device has a real pointer AND
   the platform actually honours audio.volume (iOS silently ignores it, so a slider there would be a
   control that visibly does nothing). Phones keep their hardware buttons. */
.pl-vol{display:none;align-items:center;gap:6px;flex:none;margin-left:2px}
.pl-vol[hidden]{display:none!important}
.pl-vol.on{display:flex}
.pl-volbtn{background:none;border:0;padding:2px;cursor:pointer;font-size:15px;line-height:1;color:var(--ink,#F7F0DE);opacity:.85}
.pl-volbtn:hover{opacity:1}
.pl-volrange{-webkit-appearance:none;appearance:none;width:74px;height:4px;border-radius:999px;
  background:rgba(247,240,222,.28);outline:none;cursor:pointer}
.pl-volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;
  border-radius:50%;background:var(--nsm-gold,#D98A3F);cursor:pointer;border:0}
.pl-volrange::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--nsm-gold,#D98A3F);
  cursor:pointer;border:0}
@media (max-width:520px){ .pl-vol.on{display:none} }

/* same control on the expanded player — desktop only, revealed by the same capability gate */
.car-vol{display:none;align-items:center;gap:7px}
.car-vol.on{display:inline-flex}
.car-volbtn{background:none;border:0;padding:0 2px;cursor:pointer;font-size:15px;line-height:1;color:inherit;opacity:.85}
.car-volbtn:hover{opacity:1}
.car-volrange{-webkit-appearance:none;appearance:none;width:92px;height:4px;border-radius:999px;
  background:rgba(247,240,222,.28);outline:none;cursor:pointer}
.car-volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--nsm-gold,#D98A3F);cursor:pointer;border:0}
.car-volrange::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--nsm-gold,#D98A3F);
  cursor:pointer;border:0}

/* staging marker — deliberately loud, because testing the wrong build wastes a whole cycle */
#stgBar{position:fixed;top:0;left:0;right:0;z-index:200;background:#B23A48;color:#fff;
  font:600 11px/1.9 -apple-system,system-ui,sans-serif;text-align:center;letter-spacing:.04em}
#stgBar[hidden]{display:none}
body.staging{padding-top:22px}

/* In-app document overlay. About/Privacy/Contact used to be full navigations to separate HTML files,
   which tears down the audio element and stops playback mid-song — the single most jarring bug a
   listener could hit. They are static text with no forms or scripts, so they can be fetched and shown
   here without leaving the page. */
.docsheet{position:fixed;inset:0;z-index:150}
.docsheet[hidden]{display:none}
.docsheet-bg{position:absolute;inset:0;background:rgba(51,36,27,.55)}
.docsheet-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);max-height:80vh;overflow:auto;background:#FCF8EC;color:#33241B;
  border:1px solid #e7ddc9;border-radius:16px;padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.32)}
/* pinned to the corner rather than floated in the text flow, so it can never collide with content */
.docsheet-panel{padding-top:44px}
.docsheet-x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px;line-height:1;
  color:#33241B;opacity:.45;cursor:pointer;padding:2px 6px;z-index:2}
.docsheet-x:hover{opacity:1}
.docsheet-body{font-size:14px;line-height:1.65}
.docsheet-body h1{font-size:19px;margin:0 0 10px}
.docsheet-body h2{font-size:15px;margin:16px 0 6px}
.docsheet-body a{color:#B23A48}

/* ═══════════ v3.11.9 — full player: one flow, no stray absolute offsets ═══════════ */
/* THE NAME/EYEBROW OVERLAP, root-caused by measurement 2026-09-01.
   Symptom: the Latin station name painted on top of the "LIVE RADIO · راديو مباشر" caption.
   Measured at 400x900, Al Arabiya FM / KSA:  eyebrow box 126–139,  name box 111–171.

   Cause: .car-eyebrow was originally  position:absolute; top:calc(env(safe-area-inset-top) + 52px);
   left:0; right:0.  The 2A design layer re-declared it  position:relative  but never reset those
   offsets — so `top` stayed live and became a RELATIVE offset. The eyebrow correctly RESERVED its
   13px slot at y=74 and then PAINTED itself 52px lower, at y=126, straight inside the name box.
   Neutralising `top` alone moved it back to y=74 (measured: shift exactly 52px).

   Why the three earlier passes did not hold — do NOT re-apply any of them:
     v3.3.1 "fixed-height text placeholders with long-name shrink"
     v3.3.1 "20px guaranteed gap between pills and transports"
     v3.3.2 "eyebrow and now-playing block centered"
   Every one of them adjusted the FLOW — heights, margins, alignment. The eyebrow was never
   displaced by the flow; its flow slot was always right. A relative offset is invisible to every
   flow-based remedy, so each fix corrected the spacing and the caption slid 52px down onto the
   name again. This is the same class of bug v3.3.2 removed from the list header, left behind in
   the player.

   Fix is structural, not another nudge. The whole player stack — header, name block, metadata —
   is now plain flow with reserved height and NO positional offsets, so an offset can no longer be
   inherited from an abandoned absolute rule. The header joins the flow instead of being an
   absolute box balanced against a hand-maintained padding reservation. Only .car-wave stays
   absolute: it is decorative background art at z-index 0 with pointer-events:none. */

/* header is a real flow row; the padding no longer has to "reserve" space for an absolute box */
.car{padding-top:calc(env(safe-area-inset-top) + 10px)}
.car-top{position:static;inset:auto;align-self:stretch;box-sizing:border-box;margin:0 -10px}
/* keeps the eyebrow at the exact y the 2A design put it (header ends at 54, eyebrow at 74) */
.car>.car-eyebrow{margin-top:20px}

/* THE GUARD: every child of the stage is flow-only. Any offset left over from an earlier
   absolute rule is cancelled here, so this collision class cannot come back through the cascade.
   .car-wave is deliberately excluded — it is the background artwork. */
.car>.car-top,.car>.car-eyebrow,.car>.car-art,.car>.car-name,.car>.car-arname,.car>.car-sub,
.car>.car-np,.car>.car-dial,.car>.car-prog,.car>.car-times,.car>.car-utility,.car>.car-row{
  inset:auto}
.car>.car-eyebrow,.car>.car-art,.car>.car-name,.car>.car-arname,.car>.car-sub,.car>.car-np,
.car>.car-dial,.car>.car-prog,.car>.car-times,.car>.car-utility,.car>.car-row{position:relative}

/* Short viewports (landscape phone, a short desktop window). Flex items default to flex-shrink:1,
   so the fixed-height text blocks would be squeezed and their clamped lines would collide.
   Each block keeps its reserved height and the stage scrolls instead. */
.car{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.car>*{flex:none}

/* Compact stage for short viewports — landscape phone, and a short desktop window.
   Reachable on phones only since the manifest orientation lock was removed (v3.11.9): at 844x390
   the full-size stage needs 193px of scroll before the play button comes into view, so the hero
   type and transports step down and the DECORATIVE dial is dropped. The dial is aria-hidden
   artwork, not a control — it is the only thing here that can be spent. Tablets are untouched:
   iPad landscape is 744–834px tall, well clear of this breakpoint. */
@media (max-height:560px){
  .car{padding-bottom:16px}
  .car>.car-eyebrow{margin-top:10px}
  .car-dial{display:none}
  .car-name{margin-top:10px;font-size:19px;height:1.25em;-webkit-line-clamp:1}
  .car-name.long{font-size:17px;height:1.25em}
  .car-arname{margin-top:3px;font-size:20px;height:1.15em}
  .car-arname.long{font-size:18px}
  .car-sub{margin-top:3px;font-size:12px}
  .car-np{margin-top:8px;height:32px}
  .car-np #carNpSong{font-size:13px}
  .car-utility{margin-top:10px}
  .car-row{padding-top:12px;gap:20px}
  .car-play{width:64px;height:64px}
  .car-play svg{width:24px;height:24px}
  .car-skip,.car-seek{width:46px;height:46px}
  .car-skip svg{width:20px;height:20px}
}

/* .car-np carries display:flex, which beats the UA's [hidden]{display:none} — so player.js setting
   np.hidden=true does not collapse it. In RADIO that is correct and deliberate: the 44px stays
   reserved so the stack does not jump when a song title arrives or clears on the 1s poll
   (that reservation is the v3.3.1 "fixed text placeholders" behaviour — keep it).
   In PODCAST mode the block is hidden permanently, so there it is just 44px of dead space. */
body.podplay .car-np{display:none}