/* esc-ui4.css (UI Phase 4, additive overrides; theme variables only). Delete the <link> to revert. */
/* #18 one Play: transport strip Play/Pause hidden; the ESC Radio mini-player is the single transport */
#npPause{display:none!important}
#escRadioPlayer.ui4-main .erp-prev,#escRadioPlayer.ui4-main .erp-next,#escRadioPlayer.ui4-main .erp-lock,#escRadioPlayer.ui4-main .erp-fav{opacity:.45}
/* #21 one Talk: the rail tab duplicate hidden; the floating ✦ Talk to the Globe button stays */
#escTalkTab{display:none!important}
/* #1 primary tabs: old destination rail + phone bar hidden (originals still clickable from the More sheet) */
body.ui4-nav #escSkillsTab,body.ui4-nav #escRosterTab,body.ui4-nav #escSubmitTab,body.ui4-nav #escSceneTab,body.ui4-nav #escEarthTab,body.ui4-nav #escSkyTab,body.ui4-nav #escFullTab,body.ui4-nav #escChatTab,body.ui4-nav #escBrowseTab,body.ui4-nav #escVidRail,body.ui4-nav #escMobileBar{display:none!important}
#ui4Nav{position:fixed;z-index:120;left:8px;top:72px;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;background:var(--panel,rgba(10,10,10,.85));border:1px solid var(--border,rgba(255,255,255,.15));backdrop-filter:blur(8px)}
#ui4Nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;min-height:56px;padding:6px 4px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text,#eee);font:inherit;font-size:12px;cursor:pointer}
#ui4Nav .ui4-ic{font-size:18px;line-height:1}
#ui4Nav button:hover{border-color:var(--border,rgba(255,255,255,.25))}
#ui4Nav button[aria-current=page]{background:var(--gold,#d4af37);color:var(--bg,#000);font-weight:700}
#ui4Nav button:focus-visible,#ui4More button:focus-visible{outline:3px solid var(--gold,#d4af37);outline-offset:2px}
#ui4More{position:fixed;z-index:160;left:84px;top:72px;width:min(560px,calc(100vw - 100px));max-height:calc(100vh - 150px);overflow:auto;padding:12px;border-radius:14px;background:var(--panel,rgba(10,10,10,.95));border:1px solid var(--border,rgba(255,255,255,.2));color:var(--text,#eee);box-shadow:0 10px 40px rgba(0,0,0,.5)}
#ui4More[hidden]{display:none!important}
#ui4More .ui4-sh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--gold,#d4af37)}
#ui4More .ui4-x{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--text,#eee);cursor:pointer}
#ui4More .ui4-sh-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
#ui4More .ui4-sh-g button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px 10px;text-align:left;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.18));background:transparent;color:var(--text,#eee);font:inherit;cursor:pointer}
#ui4More .ui4-sh-g small{opacity:.75;font-size:11px}
#escSignInLink{text-transform:none!important}
/* #22 phone/tablet-portrait: bottom tab bar + artist card as bottom sheet */
@media (max-width:820px),(max-height:500px){
 #ui4Nav{left:0;right:0;top:auto;bottom:0;flex-direction:row;justify-content:space-around;gap:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));border-radius:0;border-width:1px 0 0}
 #ui4Nav button{flex:1;min-width:0;min-height:52px}
 #ui4More{left:0;right:0;top:auto;bottom:calc(62px + env(safe-area-inset-bottom));width:auto;max-height:70vh;border-radius:16px 16px 0 0}
 #detailPanel.open{top:auto!important;bottom:calc(62px + env(safe-area-inset-bottom))!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;max-height:72vh!important;border-radius:16px 16px 0 0!important;overflow:auto!important}
 #detailPanel.open::before{content:"";display:block;width:44px;height:5px;margin:6px auto;border-radius:3px;background:var(--border,rgba(255,255,255,.35))}
}
@media (max-height:500px){#ui4Nav button{min-height:44px}#ui4Nav .ui4-ic{font-size:15px}}
html body #nowPlaying #npPause,html body #npPause{display:none!important}
@media (min-width:821px) and (min-height:501px){body.ui4-nav #escRadioDrawer{left:88px!important}}
/* steering: phone Stage open -> Talk entry tucked into More so it doesn't cover #erScene / speech bubbles */
@media (max-width:820px),(max-height:500px){body.esc-stage-mode #escTalkBtn{display:none!important}}
/* #3 #5 #6 visible search + grouped autocomplete + facet chips */
#ui4Search{position:fixed;z-index:125;top:64px;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 200px));display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:22px;background:var(--panel,rgba(10,10,10,.85));border:1px solid var(--border,rgba(255,255,255,.2));color:var(--text,#eee)}
#ui4Search .ui4-s-ic{opacity:.7}
#ui4SearchIn{flex:1;min-height:40px;background:transparent;border:0;color:var(--text,#eee);font:inherit;font-size:14px;outline:none}
#ui4Search:focus-within{outline:3px solid var(--gold,#d4af37);outline-offset:1px}
#ui4SearchDd{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:min(62vh,520px);overflow:auto;padding:8px;border-radius:14px;background:var(--panel,rgba(10,10,10,.97));border:1px solid var(--border,rgba(255,255,255,.2));box-shadow:0 10px 40px rgba(0,0,0,.5)}
#ui4SearchDd[hidden]{display:none}
#ui4SearchDd .ui4-g{margin:8px 4px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold,#d4af37)}
#ui4SearchDd [role=option]{display:flex;flex-direction:column;padding:8px 10px;min-height:44px;justify-content:center;border-radius:8px;cursor:pointer}
#ui4SearchDd [role=option] small{opacity:.75;font-size:11px}
#ui4SearchDd [role=option]:hover,#ui4SearchDd [role=option][aria-selected=true]{background:var(--border,rgba(255,255,255,.12))}
#ui4SearchDd .ui4-fr{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:4px}
#ui4SearchDd .ui4-fr em{font-style:normal;font-size:11px;opacity:.75;min-width:52px}
.ui4-chip{min-height:32px;padding:2px 10px;border-radius:16px;border:1px solid var(--border,rgba(255,255,255,.25));background:transparent;color:var(--text,#eee);font:inherit;font-size:12px;cursor:pointer}
.ui4-chip span{opacity:.75;margin-left:2px}
.ui4-chip[aria-pressed=true]{background:var(--gold,#d4af37);color:var(--bg,#000)}
.ui4-fon,.ui4-empty{padding:6px 4px;font-size:12px}
@media (max-width:820px),(max-height:500px){#ui4Search{top:56px;left:8px;right:8px;width:auto;transform:none}#ui4SearchIn{min-height:40px}}
@media (max-height:500px){#ui4Search{top:50px;left:auto;right:8px;width:min(360px,45vw)}}
/* #27 coachmarks */
#ui4Coach{position:fixed;z-index:400;max-width:280px;padding:12px;border-radius:12px;background:var(--panel,rgba(10,10,10,.95));border:2px solid var(--gold,#d4af37);color:var(--text,#eee);font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#ui4Coach b{color:var(--gold,#d4af37)}#ui4Coach p{margin:4px 0 8px}
#ui4Coach button{min-height:44px;margin-right:6px;padding:0 12px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.25));background:transparent;color:var(--text,#eee);font:inherit;cursor:pointer}
#ui4Coach button[data-n]{background:var(--gold,#d4af37);color:var(--bg,#000)}
/* #21/#30: welcome card's 'Talk to the globe' chip duplicates the floating ✦ Talk button -> hidden (code kept) */
.ew-q > button:nth-of-type(3){display:none!important}
@media (max-width:820px){#ui4Search{z-index:55}}
/* #19 queue + #20 directory */
#escRadioPlayer .ui4-qbtn{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--text,#eee);cursor:pointer}
#ui4Queue{position:fixed;z-index:165;left:12px;bottom:110px;width:min(420px,calc(100vw - 24px));max-height:min(60vh,520px);overflow:auto;padding:10px;border-radius:14px;background:var(--panel,rgba(10,10,10,.97));border:1px solid var(--border,rgba(255,255,255,.2));color:var(--text,#eee);box-shadow:0 10px 40px rgba(0,0,0,.5)}
#ui4Queue[hidden]{display:none}
#ui4Queue button{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--text,#eee);font:inherit;cursor:pointer}
#ui4Queue .ui4-q-h{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px}
#ui4Queue [role=tab]{padding:0 12px;margin-right:4px}#ui4Queue [role=tab][aria-selected=true]{background:var(--gold,#d4af37);color:var(--bg,#000)}
#ui4Queue .ui4-q-l{list-style:none;margin:0;padding:0}
#ui4Queue .ui4-q-l li{display:flex;align-items:center;gap:4px;padding:3px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
#ui4Queue .ui4-q-l li span{flex:1;display:flex;flex-direction:column;font-size:13px}#ui4Queue small{opacity:.75;font-size:11px}
#ui4Queue li[aria-current]{color:var(--gold,#d4af37)}
#ui4Queue .ui4-q-src,#ui4Queue .ui4-q-empty{font-size:12px;opacity:.85;margin:6px 2px}
#ui4DirQ{width:100%;box-sizing:border-box;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--text,#eee);font:inherit}
@media (max-width:820px),(max-height:500px){#ui4Queue{left:0;right:0;width:auto;bottom:calc(62px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;max-height:65vh}}
/* #23 visible focus everywhere (keyboard only) */
:focus-visible{outline:3px solid var(--gold,#d4af37)!important;outline-offset:2px!important}
#escRadioPlayer button{min-width:44px;min-height:44px}
/* #24 reduced motion unless 'Ambient motion' opted in */
html.ui4-reduce *,html.ui4-reduce *::before,html.ui4-reduce *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
/* #26 contrast (builds on esc-theme-fix.css): --gold-dim measured below WCAG AA 4.5:1 on --panel in these themes -> mixed toward --text.
   Classic deliberately untouched (brand default, flagged in report). */
html[data-theme=fall],html[data-theme=halloween],html[data-theme=midnight],html[data-theme=vapor],html[data-theme=ivy],html[data-theme=noir],html[data-theme=ember],html[data-theme=slate],html[data-theme=oxide],html[data-theme=ultraviolet],html[data-theme=sakura]{--gold-dim:color-mix(in srgb,var(--gold) 55%,var(--text))}
/* #29 theme gallery replaces the dropdown visually (select kept in DOM) */
html.ui4-themegal #themeSelect{display:none!important}
#ui4Themes{position:fixed;z-index:170;left:50%;top:70px;transform:translateX(-50%);width:min(720px,calc(100vw - 20px));max-height:calc(100vh - 150px);overflow:auto;padding:12px;border-radius:14px;background:var(--panel,rgba(10,10,10,.97));border:1px solid var(--border,rgba(255,255,255,.2));color:var(--text,#eee);box-shadow:0 10px 40px rgba(0,0,0,.5)}
#ui4Themes[hidden]{display:none}
#ui4Themes .ui4-th-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}#ui4Themes .ui4-th-h strong{color:var(--gold,#d4af37)}#ui4Themes .ui4-th-h small{flex:1;opacity:.8}
#ui4Themes .ui4-th-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
#ui4Themes button{min-height:44px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--text,#eee);font:inherit;cursor:pointer;padding:8px}
#ui4Themes [data-t]{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#ui4Themes [aria-pressed=true]{border:2px solid var(--gold,#d4af37)}
#ui4Themes .ui4-sw{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.2))}#ui4Themes .ui4-sw i{flex:1}
/* #28 */ #eg2Follow .ui4-sync{margin-left:8px;font-size:12px;color:var(--gold,#d4af37)}
/* #30 */ #ui4Persona{padding:6px 8px;border-bottom:1px solid var(--border,rgba(255,255,255,.12))}
#ui4Persona .ui4-pp,#ui4Persona .ui4-pq{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
#ui4Persona button{min-height:36px;padding:0 10px;border-radius:16px;border:1px solid var(--border,rgba(255,255,255,.25));background:transparent;color:var(--text,#eee);font:inherit;font-size:12px;cursor:pointer}
#ui4Persona [aria-pressed=true]{background:var(--gold,#d4af37);color:var(--bg,#000)}
/* follow-up: popup queue (esc-ui4-popups.js) */
.ui4-wait{visibility:hidden!important;pointer-events:none!important}
html.ui4-card-up #ui4Search{visibility:hidden!important}
#ui4Search{z-index:55}
/* 844x390 / short screens: language picker (#escGuide) fits and scrolls instead of cutting its last option */
@media (max-height:500px){#escGuide{max-height:calc(100vh - 70px)!important;overflow:auto!important;top:56px!important;width:min(560px,60vw)!important;left:auto!important;right:8px!important;transform:none!important;box-sizing:border-box}
 #escGuide [data-lang],#escGuide .tool-btn{min-height:36px!important;padding-top:4px!important;padding-bottom:4px!important}}
/* 390px phones: mini-player station name keeps room (Partner + queue buttons added): lock / favourite tucked into the queue sheet header (esc-ui4-queue.js proxies) */
@media (max-width:480px){#escRadioPlayer .erp-lock,#escRadioPlayer .erp-fav{display:none!important}
 #escRadioPlayer .erp-prev,#escRadioPlayer .erp-next,#escRadioPlayer .erp-stop,#escRadioPlayer .ui4-qbtn{min-width:36px!important}
 #escRadioPlayer .erp-main{flex:1 1 auto!important;min-width:96px!important}
 #escRadioPlayer .erp-name,#escRadioPlayer .erp-st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* landscape phones (<=500px tall): tab bar becomes a right-hand rail so it never sits on the mini-player */
@media (max-height:500px) and (min-width:600px){#ui4Nav{left:auto!important;right:0!important;top:50px!important;bottom:auto!important;width:auto!important;flex-direction:column!important;border-width:1px 0 1px 1px!important;border-radius:12px 0 0 12px!important;padding:4px!important}
 #ui4Nav button{flex:0 0 auto!important;min-width:64px!important;min-height:44px!important}
 #ui4More,#ui4Queue{bottom:auto!important;top:50px!important;right:76px!important;left:auto!important;width:min(520px,70vw)!important;max-height:calc(100vh - 60px)!important;border-radius:14px!important}}
/* language picker open -> floating Talk waits */
body:has(#escGuide:not([hidden])) #escTalkBtn{visibility:hidden!important}
#ui4Queue .ui4-q-px{display:none;margin-left:auto}
@media (max-width:480px){#ui4Queue .ui4-q-px{display:inline-flex;gap:4px}}

/* rail cleanup (2026-10-21): compact home button; the rail scrolls on short screens */
#ui4Nav{max-height:calc(100vh - 148px);overflow-y:auto;scrollbar-width:thin}
#ui4Nav button[data-k="globe"]{min-height:38px;padding:2px 4px}
#ui4Nav button[data-k="globe"] .ui4-ic{font-size:19px}