/* 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 #escReqTab,body.ui4-nav #escMobileBar{display:none!important}
/* fitted bar (Corey, 2026-10-22): the rail spans exactly the space between the
   header chrome above (top:72px = stats-strip + 48px header bottom edge) and
   the bottom of the viewport. It first ended at the radio player's top edge
   (bottom:64px); the player moved into the header later the same day, so the
   bar now runs to bottom:8px - the bar's own chrome margin, matching left:8px.
   Flush at both ends, no scrolling: buttons flex to fill the bounded height and
   compress at shorter viewports (tiers at the end of this file). */
#ui4Nav{position:fixed;z-index:120;left:8px;top:72px;bottom:8px;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);overflow:hidden}
#ui4Nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1 1 0;min-width:64px;min-height:0;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}
/* More sheet anchors under the header's right end, below its new home (the
   header More button, #ui4TopNav) - Corey, 2026-10-22. Phone/landscape
   overrides further down re-anchor it for those layouts. */
#ui4More{position:fixed;z-index:160;left:auto;right:12px;top:84px;width:min(560px,calc(100vw - 100px));max-height:calc(100vh - 100px);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)}
/* the queue button lives in the mini-player, which moved into the header
   (2026-10-22): on desktop the panel anchors under the header's right end,
   same as #ui4More. The phone/landscape overrides further down keep their
   own anchors (their media queries are mutually exclusive with this one). */
@media (min-width:821px) and (min-height:501px){#ui4Queue{left:auto;right:12px;top:84px;bottom:auto}}
#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.
   Cap updated 2026-10-22: the fitted span is now 100vh - 72px (top) - 8px (bottom). */
#ui4Nav{max-height:calc(100vh - 80px);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}

/* 2026-10-22: Requests is a rail entry now and carries the live pending-count
   badge the retired #escReqTab used to show (mirrored by esc-ui4-nav syncReq). */
#ui4Nav button{position:relative}
#ui4Nav .ui4-badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold,#d4af37);color:#111;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-sizing:border-box}
#ui4Nav .ui4-badge[hidden]{display:none}
#ui4Nav button.ui4-ping .ui4-badge{animation:ui4Ping 1s ease 3}
@keyframes ui4Ping{50%{opacity:.25}}
/* header row (Corey, 2026-10-22): 'More' lives in the header now. #ui4TopNav is
   an in-flow flex child of header.top .top-right; its button matches the header
   pill family (same treatment as the Voice button, #escVoiceBtn: 32px pill,
   Oswald 600 12px, gold-tinted border/background). */
#ui4TopNav{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:6px}
#ui4TopNav button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,200,60,.5);background:rgba(255,200,60,.08);color:#fff;font:600 12px Oswald,system-ui,sans-serif;letter-spacing:.05em;cursor:pointer;white-space:nowrap}
#ui4TopNav .ui4-ic{font-size:14px;line-height:1}
#ui4TopNav button:hover{background:rgba(255,200,60,.16)}
#ui4TopNav button[aria-current=page]{background:var(--gold,#d4af37);color:#111}
#ui4TopNav button:focus-visible{outline:3px solid var(--gold,#d4af37);outline-offset:2px}
/* fitted-bar compression tiers (desktop only; phone/landscape rules above keep
   their own layouts): as the viewport gets shorter the 14 entries (13 rail tabs
   + the injected Interview button) shrink spacing/icon/label instead of
   scrolling. Span = 100vh - 72px (top) - 8px (bottom) since the player moved
   into the header (2026-10-22); before that the span ended at the player. */
@media (min-width:821px) and (min-height:501px) and (max-height:860px){
 #ui4Nav{gap:5px}
 #ui4Nav button{padding:4px;font-size:11px}
 #ui4Nav .ui4-ic{font-size:16px}
}
@media (min-width:821px) and (min-height:501px) and (max-height:740px){
 #ui4Nav{gap:4px}
 #ui4Nav button{padding:2px 4px;font-size:10px}
 #ui4Nav .ui4-ic{font-size:15px}
}
@media (min-width:821px) and (min-height:501px) and (max-height:640px){
 #ui4Nav button{padding:2px 4px}
 #ui4Nav .ui4-ic{font-size:16px}
 #ui4Nav .ui4-tl{display:none}
}

/* Sky shelf (Corey, 2026-10-22, build B; narrowed later the same day): the
   shelf sits only right of the globe - its left edge aligns with the globe
   disc's right edge, top flush under the header, right/bottom flush to the
   screen edges. CSS cannot compute the disc edge, so this rule is only the
   pre-JS cover (full area right of the bar); the JS writers (esc-ui3
   fitRight, app.js placeSkyOnVideo, both via app.js's __escSkyPanelLeft)
   set the disc-edge geometry inline within a frame of the shelf opening.
   --esc-bar-right / --esc-chrome-top are published live by esc-ui4-nav.js. */
@media (min-width:821px) and (min-height:501px){
  body.ui4-nav #showerShelf.open{left:var(--esc-bar-right,94px)!important;top:var(--esc-chrome-top,72px)!important;right:0!important;bottom:8px!important;width:auto!important;height:auto!important;max-height:none!important;border-radius:0!important}
}
/* The ESC wordmark on the Sky shelf (upper right, clear of the title at the
   left and the Hide button at the bottom) - same asset as the header brand.
   The Lobby panel carries the same mark in its head row (esc-chat.js). */
.esc-view-logo{display:block}
#showerShelf .esc-view-logo{position:absolute;top:12px;right:16px;height:26px;width:auto;pointer-events:none}

/* Build C (Corey, 2026-10-22): session feedback retired with its module -
   its header chip and edge tab never render. Sky's Hide button is pinned
   inside the open shelf (below the ESC logo, always reachable, never under
   the bottom-right floaters). The Talk button lifts clear of the video
   frame while a video shows (offset published by esc-chat.js). */
body.ui4-nav #escSuggestFab{display:none!important}
#hdrSuggest{display:none!important}
@media (min-width:821px) and (min-height:501px){
  body.ui4-nav #showerShelf.open #shelfHide{position:fixed;top:calc(var(--esc-chrome-top,72px) + 48px);right:16px;z-index:2001}
}
body.video-on #escTalkBtn{bottom:var(--esc-vid-talk-bottom, calc(132px + env(safe-area-inset-bottom)))}

/* 2026-10-22 (Discord Activity visual fix): header compaction at constrained widths.
   header.top is flex/nowrap/overflow:hidden, so at Activity widths the tool row shoved the
   brand out of its box (wordmark clipped mid-word) and the controls crowded. The brand now
   scales down inside its box instead of clipping, gaps/padding tighten progressively, and the
   lowest-priority controls leave the bar at the narrowest widths (temperature switch;
   create-account - both remain reachable via the portal / More sheet). Desktop widths above
   1400px are untouched. Inside the Activity (html.dc-globe) compaction applies at any width
   and the web sign-in/create-account links go away (identity there is the Discord session;
   following those links would navigate the Activity frame off the app). */
@media (max-width:1400px){
  header.top{gap:6px!important;padding:8px 8px!important}
  header.top .brand{min-width:0;flex:0 1 auto}
  header.top .logo-roster{max-width:210px;object-fit:contain;object-position:left center}
  header.top .tool-btn,header.top select{padding-left:8px!important;padding-right:8px!important}
}
@media (max-width:1180px){
  header.top .logo-roster{max-width:168px}
  header.top .titles{display:none}
  header.top .temp-switch{display:none!important}
}
@media (max-width:1020px){
  header.top .logo-roster{max-width:132px}
  header.top #btnCreateAccount{display:none!important}
}
html.dc-globe header.top{gap:6px!important;padding:8px 8px!important}
html.dc-globe header.top .brand{min-width:0;flex:0 1 auto}
html.dc-globe header.top .logo-roster{max-width:200px;object-fit:contain;object-position:left center}
html.dc-globe header.top .tool-btn,html.dc-globe header.top select{padding-left:8px!important;padding-right:8px!important}
html.dc-globe header.top .titles{display:none}
html.dc-globe header.top .temp-switch{display:none!important}
html.dc-globe header.top #btnCreateAccount,html.dc-globe header.top #btnSignIn{display:none!important}

/* 2026-10-23 (Corey): ONE More control in the header - the ui4 ☰ More button
   (#ui4TopNav) opens the More sheet. The classic .more-menu summary pill is
   retired from view; the <details> itself stays in the DOM because the sheet's
   "All menus" item and existing gestures still open its panel programmatically. */
header.top details.more-menu>summary{display:none!important}

/* ===== 2026-10-22 build 2245: Activity overlap fixes =====
   1) The search pill sat at a fixed top:64px, ON the stats strip (the strip is a grid row
      directly under the header). It now hangs below the measured chrome band: esc-ui4-nav.js
      publishes --esc-band-bottom = the lower of header / stats-strip bottoms (the strip is
      hidden in fullscreen/quiet/narrow layouts, where the header bottom alone applies).
   2) The Theme pill's palette emoji glyph is taller than the pill's line box and perched on
      its top edge; a taller line-height seats it inside the pill (min-height keeps the pill
      itself from growing).
   3) At Activity widths the header row still overflowed on the right. In dc-globe mode the
      About and Self-serve buttons, the VIEW caption and the volume slider fold away (About and
      Self serve live on elsewhere; the view switcher keeps its select) so #nowPlaying ends
      inside the frame. On the open web the same fold applies to Self serve only at <=1280px. */
#ui4Search{top:calc(var(--esc-band-bottom,96px) + 10px)}
header.top .tool-btn{line-height:1.45}
html.dc-globe header.top #btnAbout{display:none!important}
html.dc-globe header.top #escSelfBtn{display:none!important}
html.dc-globe header.top #escViewPrevWrap label{display:none!important}
html.dc-globe header.top #nowPlaying .vol-wrap{display:none!important}
html.dc-globe header.top .dc-logo{max-width:176px}
@media (max-width:1280px){header.top #escSelfBtn{display:none!important}}