/* Viewing geometry and controls, checked against the owner's Desktop/SS captures.
   The legacy engine positions tiles absolutely and gives their flex children a
   zero basis. This stylesheet owns the grid geometry; never derive video height
   from that legacy flex row or from the engine's inline tile coordinates. */
.broadcast-page{
  --desk-accent:#d5ef8c;
  --desk-muted:#b1beaf;
  --desk-surface:#1c2921;
  --desk-border:#ffffff29;
}
.broadcast-page[data-section=economy]{
  --desk-accent:#344936;
  --desk-muted:#616653;
  --desk-surface:#f0efe5;
  --desk-border:#34493630;
  --desk-ink:#293329;
}
/* A definite aspect ratio on the grid item survives asynchronous iframe loads. */
body.broadcast-page .main>#wall{
  height:auto!important;
  max-height:none!important;
  min-height:0;
  grid-template-rows:none!important;
  grid-auto-rows:auto!important;
  align-items:start;
  gap:14px!important;
}
body.broadcast-page #wall>.tile{
  display:block!important;
  position:relative!important;
  aspect-ratio:16/9;
  min-height:0!important;
  min-width:0!important;
  height:auto!important;
  width:auto!important;
  container-type:normal;
  overflow:hidden;
  border:1px solid var(--desk-border)!important;
  border-radius:8px!important;
  background:#101914!important;
}
body.broadcast-page #wall>.tile>.tile-media{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  flex:none!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
body.broadcast-page #wall .player-host,
body.broadcast-page #wall .player-host iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
}
body.broadcast-page[data-section][data-view=mosaic] .main>#wall{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.broadcast-page[data-section][data-view=comfort] .main>#wall{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.broadcast-page[data-section][data-view=focus] .main>#wall{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
/* Keep controls legible without covering a running broadcast with a title band. */
body.broadcast-page #wall .tile-hud{
  inset:0 0 auto;
  padding:12px 13px 27px;
  min-height:0;
  gap:12px;
  background:linear-gradient(#07140dd9,#07140d7a 65%,transparent);
  opacity:1;
  transition:opacity .18s ease;
}
body.broadcast-page #wall .tile-ident{
  gap:3px;
  color:#f4f7ee;
  text-shadow:0 1px 4px #000b;
}
body.broadcast-page #wall .tile-country{font:9px/1.3 monospace;color:#d4ddc6;letter-spacing:.05em}
body.broadcast-page #wall .tile-name{font:500 14px/1.25 Arial,sans-serif!important;color:#f4f7ee!important}
body.broadcast-page #wall .stream-state{font:8px/1.4 monospace!important;letter-spacing:.055em;color:#e4eddb}
body.broadcast-page #wall .tile-btn{
  height:30px!important;width:30px!important;
  min-height:30px;min-width:30px;
  color:#f5f7ee;background:#17251ec9;
  border:1px solid #f5f7ee60;
}
body.broadcast-page #wall .tile-btn svg{width:15px;height:15px}
body.broadcast-page #wall .tile-actions{gap:5px;pointer-events:auto}
body.broadcast-page #wall .tile.listening .listen-btn{background:#d5ef8c;color:#1b301f;border-color:#d5ef8c}
@media(hover:hover){
  body.broadcast-page #wall .tile:has(.tile-media[data-status=playing]):not(:hover):not(:focus-within) .tile-hud{opacity:0;pointer-events:none}
}
body.broadcast-page[data-view=focus] #wall .tile-name{font-size:18px!important}
body.broadcast-page[data-view=focus] #wall .tile-hud{padding:18px 20px 40px}
body.broadcast-page[data-view=focus] #wall .tile-btn{width:38px!important;height:38px!important}
body.broadcast-page #wall .tile-media:fullscreen{aspect-ratio:auto!important}
/* One quiet control language. Color belongs to the active state, not old brands. */
body.broadcast-page .topbar{min-height:60px;padding:0 0 16px;gap:16px}
body.broadcast-page .topbar .collection-btn{
  height:40px!important;min-height:40px;
  border-radius:8px!important;
  padding:0 14px;font:500 13px Arial;
  background:var(--desk-surface)!important;
  color:var(--desk-ink)!important;border-color:var(--desk-border)!important;
}
body.broadcast-page .topbar .site-tabs{
  border:1px solid var(--desk-border);
  background:var(--desk-surface);
  border-radius:8px;padding:3px;gap:2px;
}
body.broadcast-page .topbar .site-tab{
  color:var(--desk-muted)!important;opacity:1;
  font:500 12px Arial!important;
  padding:8px 14px!important;min-height:32px;
  border:0!important;border-radius:5px!important;
}
body.broadcast-page .topbar .site-tab[aria-pressed=true]{
  color:#172b1c!important;background:#d5ef8c!important;border:0!important;
}
body.broadcast-page[data-section=economy] .topbar .site-tab[aria-pressed=true]{background:#344936!important;color:#f3f3e9!important}
body.broadcast-page .topbar .site-tab .site-tab-dot{display:none!important}
body.broadcast-page .topbar .icon-btn{
  width:36px!important;height:36px!important;min-width:36px!important;
  border-radius:8px!important;
  color:var(--desk-ink)!important;border-color:var(--desk-border)!important;
  background:var(--desk-surface)!important;
}
body.broadcast-page .topbar .icon-btn:hover{border-color:var(--desk-accent)!important}
body.broadcast-page .topbar .audio-dock{background:none!important;border:0!important}
body.broadcast-page .topbar .audio-controls{gap:8px}
body.broadcast-page .topbar .volume-control input[type=range]{accent-color:var(--desk-accent)!important;width:66px}
body.broadcast-page .topbar .utc-clock{color:var(--desk-muted)!important;font:10px/1.4 monospace;letter-spacing:.025em}
body.broadcast-page .topbar .dock-divider{background:var(--desk-border);height:22px}
body.broadcast-page .view-switch{padding:15px 0;gap:16px;border-bottom:1px solid var(--desk-border)}
body.broadcast-page .view-switch>span{font:10px monospace;color:var(--desk-muted);opacity:1;letter-spacing:.05em}
body.broadcast-page .view-switch>div{background:var(--desk-surface);border:1px solid var(--desk-border);padding:3px;border-radius:8px;gap:3px}
body.broadcast-page .view-switch button{font:12px Arial;padding:9px 13px;border-radius:5px;color:var(--desk-muted)}
body.broadcast-page .view-switch button[aria-pressed=true]{background:var(--desk-accent);color:#172b1c}
body.broadcast-page[data-section=economy] .view-switch button[aria-pressed=true]{color:#f3f3e9}
body.broadcast-page .view-switch .room-button{font:11px Arial;padding:11px 13px;border-color:var(--desk-border);color:var(--desk-ink)}
body.broadcast-page .topbar :focus-visible,body.broadcast-page .view-switch :focus-visible{outline:2px solid var(--desk-accent);outline-offset:3px}
/* Give the quote strip its own clear, restrained frame. Widget theme is set via
   its supported colorTheme option in tape.js, never iframe hacks. */
body.broadcast-page .market-tape{
  height:46px!important;min-height:46px!important;max-height:46px!important;
  padding:0 5px!important;gap:0;border:1px solid var(--desk-border)!important;
  background:#111e17!important;border-radius:6px;
}
body.broadcast-page[data-section=economy] .market-tape{background:#f0efe5!important;border-color:#34493629!important}
body.broadcast-page .market-tape-mount{height:44px!important;min-height:44px;flex:1;min-width:0}
body.broadcast-page .market-tape-mount iframe,
body.broadcast-page .market-tape-mount .tradingview-widget-container__widget{height:44px!important;min-height:44px!important;background:transparent!important}
body.broadcast-page .market-tape-credit{
  height:44px;width:38px;min-width:38px;
  background:transparent!important;color:var(--desk-ink)!important;
  border-left:1px solid var(--desk-border);
}
body.broadcast-page .market-tape-credit svg{width:25px;height:22px}
/* A single readable hierarchy, from source rail to the player caption. */
body.broadcast-page .universe-nav a{font-size:13px}
body.broadcast-page .source-list button{font-size:12px;line-height:1.45;opacity:1;color:var(--desk-muted);padding:12px 0}
body.broadcast-page .source-list button span{font-size:10px;opacity:.7}
body.broadcast-page .source-list button:hover,body.broadcast-page .source-list button.is-selected{color:var(--desk-ink)}
body.broadcast-page .sidebar-actions :is(a,button){font-size:12px;line-height:1.4}
body.broadcast-page .desk-label,body.broadcast-page .source-list-head{font-size:9px;color:var(--desk-muted)}
body.broadcast-page .sidebar-note>span{font-size:9px}
body.broadcast-page .sidebar-note p{font-size:12px;line-height:1.65;opacity:1;color:var(--desk-muted)}
body.broadcast-page .sidebar-note button{font-size:11px}
body.broadcast-page .wall-display-title{font-size:28px!important;line-height:1.2!important;margin:0 0 8px}
body.broadcast-page .wall-description{font:12px/1.6 Arial;opacity:1;color:var(--desk-muted)}
body.broadcast-page .toolbar{padding:22px 0 8px}
body.broadcast-page .media-notice{font:11px/1.7 Arial;opacity:1;color:var(--desk-muted);margin-bottom:20px}
body.broadcast-page .wall-caption{font-size:10px;opacity:1;color:var(--desk-muted)}
body.broadcast-page .channel-sidebar{scrollbar-width:thin;scrollbar-color:#8a978066 transparent;scrollbar-gutter:stable}
body.broadcast-page.room-expanded .main>#wall{height:auto!important}
body.broadcast-page.room-expanded .workspace{padding-top:20px}
@media(min-width:1650px){body.broadcast-page[data-section][data-view=mosaic] .main>#wall{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:1100px){
  body.broadcast-page .view-switch>span{display:none}
  body.broadcast-page[data-section][data-view=mosaic] .main>#wall{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.broadcast-page[data-section][data-view=comfort] .main>#wall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.broadcast-page[data-section][data-view=focus] .main>#wall{grid-template-columns:minmax(0,1fr)!important}
  body.broadcast-page .topbar .utc-clock{display:none!important}
  body.broadcast-page #wall .tile-actions{gap:3px}
  body.broadcast-page #wall .tile-country{font-size:8px}
}
@media(max-width:700px){
  body.broadcast-page .topbar{min-height:104px;gap:12px}
  body.broadcast-page .topbar .collection-btn{font-size:12px;min-width:100px}
  body.broadcast-page .topbar .site-tab{font-size:11px!important;padding:8px 11px!important}
  body.broadcast-page .topbar .icon-btn{width:36px!important;height:36px!important}
  body.broadcast-page .view-switch{gap:8px;flex-wrap:wrap;justify-content:space-between}
  body.broadcast-page .view-switch button{font-size:11px;padding:9px}
  body.broadcast-page .view-switch .room-button{font-size:10px;padding:11px 8px}
  body.broadcast-page .wall-display-title{font-size:25px!important}
  body.broadcast-page .media-notice{font-size:10px;display:block}
  body.broadcast-page .media-notice a{margin-left:5px}
  body.broadcast-page .main>#wall{gap:10px!important}
  body.broadcast-page[data-section][data-view=mosaic] .main>#wall,
  body.broadcast-page[data-section][data-view=comfort] .main>#wall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.broadcast-page[data-section][data-view=focus] .main>#wall{grid-template-columns:minmax(0,1fr)!important}
  body.broadcast-page #wall .tile-hud{padding:9px 10px 24px;gap:8px}
  body.broadcast-page[data-section=live] #wall .tile-name{font-size:11px!important}
  body.broadcast-page #wall .tile-country{font-size:7px}
  body.broadcast-page #wall .tile-btn{width:26px!important;height:26px!important;min-width:26px;min-height:26px}
  body.broadcast-page[data-section=live] #wall .tile-actions{flex-direction:column}
  body.broadcast-page #wall .stream-state{font-size:7px!important}
}
html:has(.broadcast-page){scroll-padding-top:108px}
body.broadcast-page .topbar .icon-btn:disabled{opacity:.4}
body.broadcast-page .topbar .icon-btn[aria-pressed=true]{border-color:var(--desk-border)!important}
body.broadcast-page .topbar #pauseBtn:hover,body.broadcast-page .topbar #fullscreenBtn:hover{background:color-mix(in srgb,var(--desk-accent) 12%,var(--desk-surface))!important}
/* Expanded workspace must also replace Economy's two-column outer shell. */
body.broadcast-page.room-expanded .broadcast-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;padding:0 20px!important}
body.broadcast-page.room-expanded .workspace{grid-column:1/-1;padding-left:0;min-width:0}
@media(max-width:700px){
  body.broadcast-page[data-section][data-view=focus] .main>#wall{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:540px){
  body.broadcast-page[data-section][data-view] .main>#wall{grid-template-columns:minmax(0,1fr)!important}
  body.broadcast-page .view-switch>div{display:none}
  body.broadcast-page .view-switch>span{display:block;font-size:9px}
  body.broadcast-page[data-section=live] #wall .tile-name{font-size:14px!important}
  body.broadcast-page[data-section=live] #wall .tile-actions{flex-direction:row}
}