/* One viewport, one working surface. About intentionally keeps its own document layout. */
:root{--room-bg:#07090b;--room-line:#25292e;--room-accent:#d9ed83;--room-green:#99dfa7;--room-red:#ff9294}
body{background:var(--room-bg)}
.workspace{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0}
.topbar{flex:none;position:relative;z-index:30;height:48px;min-height:48px;padding:0 10px;gap:8px;background:var(--room-bg);border-color:var(--room-bg)}
.topbar-lead{min-width:0;gap:8px}.topbar .brand{min-height:44px;margin-right:4px;gap:6px}
.collection-btn{min-height:28px;height:28px;padding:0 9px;min-width:110px;font-size:11px;border-color:#333b42;background:#1b2228}
.site-tabs{gap:2px}.site-tab{font-size:11px;min-height:28px;padding:0 10px}.site-tab[aria-pressed=true]{background:#252d34;border-color:#414d58;color:#fff}
.topbar-actions{gap:3px}.topbar .audio-dock{background:transparent;border:0;padding:0;gap:7px;min-height:32px}.topbar .audio-identity,.topbar .wall-health,.topbar #shortcutsBtn{display:none}.topbar .audio-controls{gap:4px}.volume-control input[type=range]{width:55px}.topbar .utc-clock{font-size:10px}.topbar .icon-btn{width:25px;height:25px}
.main{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 3px 3px;display:flex;flex-direction:column;overflow:hidden}
.toolbar{flex:none;min-height:32px;height:32px;padding:0 4px;margin:0;gap:8px;flex-wrap:nowrap;justify-content:flex-end;position:relative}
.wall-heading{display:none}.media-notice{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip:rect(0,0,0,0)}
.grid-controls{width:100%;gap:5px;flex-wrap:nowrap;justify-content:flex-end}.grid-controls>.grid-label{margin-right:2px;font:8px ui-monospace,monospace;letter-spacing:1px}
.density-control{height:25px;min-height:25px;padding:1px;border:0;border-radius:2px;background:#12181d}.density-control button{min-width:26px;min-height:23px;height:23px;font-size:10px;padding:0 5px}.density-control button[aria-pressed=true]{background:#cdda92;color:#171d17}
#goLiveBtn{min-height:24px;height:24px;font-size:9px;padding:0 8px;border-radius:2px;background:#252d31;border-color:#394348;color:#d5dce0}#goLiveBtn span:last-child{font-size:0}#goLiveBtn span:last-child:after{content:'Reconnect';font-size:9px}
.wall{flex:1;min-height:0;height:auto!important;margin:0!important;gap:3px;align-items:stretch;overflow:hidden}
.tile,.tile:hover,.tile.unavailable,.tile:focus-within{border:0;border-radius:0;background:#000;box-shadow:none}.tile.listening{box-shadow:inset 0 -2px #d9ed83}
.tile-media{background:#000;min-height:200px}.stream-state:before{width:4px;height:4px}
.wall-banks{display:flex;align-items:center;gap:5px;margin-right:auto;font:10px ui-monospace,monospace;color:#b7c5cf}.wall-banks button{height:24px;min-width:25px;border:1px solid #303d46;border-radius:2px;font-size:17px;line-height:1}.wall-banks button:hover{background:#303d46}
.market-tape{height:35px;min-height:35px;max-height:35px;flex:none;padding:0 8px;gap:7px;background:#07090b;border-bottom:0;color:#e5e98a}
.market-tape-label{font:9px ui-monospace,monospace;letter-spacing:.8px;padding-right:8px;color:#dde68c;line-height:1}.market-tape-label br{display:none}.market-tape-label span{font-size:0}.market-tape-label span:after{content:'MARKETS';font-size:8px}
.market-tape-choice{flex-direction:row;align-items:center;gap:8px}.market-tape-choice>span{font-size:10px;color:#d7de9a}.market-tape-choice small{font-size:9px}.market-tape-load{min-height:23px;height:23px;font-size:9px;padding:0 9px;background:#293126;color:#e7efbc;border:1px solid #526443;border-radius:2px}.market-tape-off{width:20px;height:20px;font-size:13px;border:0;color:#9eabb6}.market-tape-mount{height:34px;overflow:visible}.market-tape-mount .tradingview-widget-container{display:flex;align-items:center;gap:8px}.market-tape-mount .tradingview-widget-container__widget{height:34px;flex:1;min-width:0}.market-tape-mount iframe{height:34px!important;max-width:100%;color-scheme:normal;background:#07090b}.market-tape-mount .tradingview-widget-copyright{height:auto;width:70px;flex:none;font-size:8px;padding:0;text-align:right}.market-tape-mount .tradingview-widget-copyright a{color:#adb792!important}
@media(min-width:801px){html:has(.workspace),body:has(.workspace){height:100%;overflow:hidden}.wall:is([data-count="0"],[data-count="1"]){height:auto;max-width:none;margin:0!important;align-items:stretch;grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.wall[data-count="1"] .tile-media{flex:1;aspect-ratio:auto}.topbar-lead{flex-shrink:0}.topbar-actions{min-width:0}.volume-control output{display:none}}
@media(min-width:801px) and (max-width:1150px){.topbar .volume-control,.topbar .utc-clock{display:none!important}.site-tab{padding:0 8px}.collection-btn{min-width:100px}}
@media(max-width:800px){.workspace{height:auto;min-height:100dvh;overflow:visible}.topbar{height:76px;min-height:76px;position:sticky;top:0;align-items:flex-start;padding-top:5px}.topbar-lead{gap:8px}.topbar .brand{min-height:28px}.site-tabs{position:absolute;left:7px;right:7px;bottom:5px;display:flex;justify-content:space-between}.site-tab{padding:0 12px;min-height:29px}.topbar-actions{padding-top:3px}.topbar .audio-dock .volume-control,.topbar .utc-clock,.topbar #shortcutsBtn{display:none!important}.market-tape{height:31px;min-height:31px;padding:0 4px;gap:4px}.market-tape-label{display:none}.market-tape-mount{height:30px}.market-tape-mount .tradingview-widget-container__widget,.market-tape-mount iframe{height:30px!important}.market-tape-mount .tradingview-widget-copyright{width:51px;font-size:7px}.market-tape-choice small{display:none}.market-tape-choice>span{font-size:9px}.market-tape-load{max-width:none}.main{overflow:visible;padding:0 3px 3px}.toolbar{height:32px;min-height:32px}.grid-controls{gap:3px}.grid-label{display:none}.density-control{width:auto}.density-control button{min-width:23px;min-height:23px;font-size:10px}.wall{flex:none;height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:225px;grid-template-rows:none;gap:3px}.tile-media{min-height:0}}

@media(max-width:419px){.wall{grid-template-columns:1fr;grid-auto-rows:225px}.tile-media{min-height:200px}.wall-banks{font-size:8px}.wall-banks button{min-width:19px}.density-control button{min-width:19px;padding:0 3px}.grid-controls>#goLiveBtn{display:none}}
/* Keep every section reachable on narrow phones, including About. */
@media(max-width:360px){.site-tabs{gap:0}.site-tab{padding:0 8px}}
/* Keep the provider's full 44px canvas; scale the complete widget rather than crop it. */
.market-tape-mount .tradingview-widget-container__widget{height:44px;zoom:.75}
.market-tape-mount iframe{height:44px!important}
@media(max-width:800px){.market-tape-mount .tradingview-widget-container__widget{height:44px;zoom:.68}.market-tape-mount iframe{height:44px!important}}
.market-tape-mount .tradingview-widget-container{height:34px!important}
.market-tape-mount iframe{flex:1;min-width:0;width:0!important;height:44px!important;zoom:.75}
@media(max-width:800px){.market-tape-mount .tradingview-widget-container{height:30px!important}.market-tape-mount iframe{zoom:.68}}
#showAllBtn{display:none!important}

/* Keep attribution on its own complete line beside the provider's full quote canvas. */
.market-tape-mount .tradingview-widget-copyright {
  flex:0 0 94px!important; width:94px!important; min-width:94px;
  height:34px!important; padding:0!important; margin:0!important;
  display:flex!important; align-items:center; justify-content:center;
  white-space:nowrap!important; line-height:1!important; font-size:11px!important;
  border-left:1px solid #273033;
}
.market-tape-mount .tradingview-widget-copyright a {
  display:inline-flex; align-items:center; white-space:nowrap!important;
  font-size:11px!important; line-height:1!important; letter-spacing:0;
}
.market-tape-mount .tradingview-widget-container { gap:0; }

@media(max-width:800px) {
  .market-tape-mount .tradingview-widget-copyright { height:30px!important; min-width:80px; width:80px!important; flex-basis:80px!important; }
  .market-tape-mount .tradingview-widget-copyright a { font-size:10px!important; }
}

/* Every selected channel belongs to this surface, including uneven last rows. */
.main { padding:0 2px 2px; }
.main > .wall { display:block; position:relative; flex:1; width:100%; max-width:none; height:auto!important; min-height:0; margin:0!important; }
.wall .tile { position:absolute; min-width:0; min-height:0; }
.wall .tile-media { min-height:0; flex:1 1 0; aspect-ratio:auto; }
.wall[data-count="1"] .tile-media { flex:1 1 0; width:100%; aspect-ratio:auto; }
.wall .empty-state { height:100%; }
@media(max-width:800px) {
  .main > .wall { flex:none; height:var(--wall-height,calc(100dvh - 110px))!important; }
}

/* Opening choice (owner-approved design, 2026-09-24): one mosaic of planes meeting at 2 px ink gaps, like the
   /news pages. The head takes the colour of the section on screen, the two facts sit on paper and the decision
   sits on ink with pill buttons like the tabs. The approved text is unchanged. */
#mediaConsent { width:640px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:0; border:2px solid #000; border-radius:18px; background:#000; color:#111; box-shadow:0 30px 90px #000a; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
#mediaConsent::backdrop { background:#000000a8; backdrop-filter:blur(6px); }
.consent-head { padding:24px 28px 26px; background:var(--section,#DF9BB7); }
#mediaConsent .consent-brand { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:0; }
#mediaConsent .consent-brand .brand-artwork { width:180px; padding:0; }
#mediaConsent .consent-brand>.consent-label { margin-left:auto; color:#111c; font:600 10.5px/1 "SFMono-Regular",ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.16em; }
#mediaConsent h2 { margin:14px 0 6px; font:400 42px/1.02 "Iowan Old Style",Charter,Georgia,serif; letter-spacing:-.02em; color:#111; }
#mediaConsent p { margin:0; }
#mediaConsent .consent-intro { font-size:16px; line-height:1.45; color:#231f1c; }
.consent-facts { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:2px 0; }
.consent-facts>div { display:flex; align-items:flex-start; gap:14px; padding:20px 22px 22px; background:#FBF6EA; }
.consent-symbol { display:grid; place-items:center; width:34px; height:34px; flex:none; border:1.5px solid #000; border-radius:50%; color:#111; }
.consent-symbol svg { width:17px; height:17px; }
#mediaConsent .consent-facts p { font-size:13.5px; line-height:1.55; color:#3a3833; }
.consent-facts p strong { display:block; margin:0 0 5px; font-size:15px; font-weight:600; line-height:1.3; color:#111; }
.consent-facts p>span { display:block; }
.consent-decide { padding:20px 28px 22px; background:#111; color:#efe7d6; }
#mediaConsent .consent-terms { font-size:13px; line-height:1.6; color:#efe7d6; }
#mediaConsent a { color:#efe7d6; text-decoration:underline; text-decoration-color:var(--section,#DF9BB7); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.consent-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
#mediaConsent .consent-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; margin:0; padding:0 16px; border:1.5px solid #efe7d6; border-radius:999px; background:transparent; color:#efe7d6; font:600 14.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
#mediaConsent .consent-actions .btn-primary { background:var(--section,#DF9BB7); border-color:var(--section,#DF9BB7); color:#111; }
#mediaConsent .consent-actions .btn:hover { filter:brightness(1.08); }
#mediaConsent .btn:focus-visible, #mediaConsent a:focus-visible { outline:2px solid #efe7d6; outline-offset:3px; }
.consent-actions [data-icon] { display:flex; margin:0; }
#mediaConsent .consent-session { margin-top:14px; font-size:12px; line-height:1.55; color:#a9a397; }
@media (max-width:560px) {
  #mediaConsent { border-radius:16px; }
  .consent-head { padding:20px 20px 22px; }
  #mediaConsent .consent-brand .brand-artwork { width:150px; }
  #mediaConsent h2 { font-size:34px; }
  .consent-facts { grid-template-columns:1fr; }
  .consent-facts>div { padding:16px 18px; }
  .consent-decide { padding:18px 20px 20px; }
  .consent-actions { grid-template-columns:1fr; }
  /* Longer localized labels wrap inside the pill instead of running past the dialog. */
  #mediaConsent .consent-actions .btn { white-space:normal; text-align:center; line-height:1.25; padding:10px 16px; }
}

/* Collection picker (owner-approved design, 2026-09-24): the same mosaic. The head takes the section colour with
   a pill search; Global and My watchlist are two planes with large numerals, the current one ink like the
   selected tab; the countries run in three columns on paper. */
#picker { width:880px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:0; border:2px solid #000; border-radius:18px; background:#000; color:#111; box-shadow:0 30px 90px #000a; overflow:hidden; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
#picker[open] { display:flex; flex-direction:column; gap:2px; }
#picker::backdrop { background:#000000a8; backdrop-filter:blur(6px); }
.picker-head { flex:none; padding:22px 26px; background:var(--section,#DF9BB7); }
#picker .dialog-heading { padding:0; gap:16px; }
#picker .eyebrow { color:#111c; font:600 10.5px/1 "SFMono-Regular",ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.16em; }
#picker .dialog-heading h2 { margin:10px 0 4px; font:400 38px/1.04 "Iowan Old Style",Charter,Georgia,serif; letter-spacing:-.02em; color:#111; }
#picker .dialog-heading p { margin:0; font-size:14.5px; color:#231f1c; }
#picker #closePicker { width:34px; height:34px; margin:0; border:1.5px solid #000; border-radius:50%; background:transparent; color:#111; }
#picker #closePicker svg { width:17px; height:17px; }
#picker .country-search { display:flex; align-items:center; gap:10px; height:44px; margin:16px 0 0; padding:0 16px; border:1.5px solid #000; border-radius:999px; background:#ffffff47; color:#111; }
#picker .country-search:focus-within { background:#ffffff85; border-color:#000; }
#picker .country-search svg { width:17px; height:17px; }
#picker .country-search input { font-size:14.5px; color:#111; }
#picker .country-search input::placeholder { color:#1119; }
#picker .picker-fixed { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
#picker .picker-fixed .nav-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; min-height:0; padding:18px 22px; border-radius:0; background:#FBF6EA; color:#111; font-size:18px; font-weight:600; line-height:1.2; }
#picker .picker-fixed .nav-item small { margin-top:3px; font-size:12.5px; font-weight:400; color:#6d6a62; }
#picker .picker-fixed .nav-icon { display:grid; place-items:center; width:34px; height:34px; border:1.5px solid #000; border-radius:50%; color:#111; }
#picker .picker-fixed .nav-icon svg { width:17px; height:17px; }
#picker .picker-fixed .nav-count { margin:0; font:400 44px/1 "Iowan Old Style",Charter,Georgia,serif; letter-spacing:-.02em; color:inherit; text-align:right; }
#picker .picker-fixed .nav-count::after { display:block; margin-top:4px; font:600 9.5px/1 "SFMono-Regular",ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:#6d6a62; }
#worldCount::after { content:'screens'; }
#savedCount::after { content:'saved'; }
#picker .picker-fixed .nav-item:hover { background:#F3ECDC; color:#111; }
#picker .picker-fixed .nav-item[aria-current="page"] { background:#111; color:var(--section,#DF9BB7); }
#picker .picker-fixed .nav-item[aria-current="page"] small, #picker .picker-fixed .nav-item[aria-current="page"] .nav-count::after { color:#a9a397; }
#picker .picker-fixed .nav-item[aria-current="page"] .nav-icon { border-color:var(--section,#DF9BB7); color:var(--section,#DF9BB7); }
#picker .picker-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:16px 22px 0; background:#FBF6EA; }
.picker-countries-head { flex:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:12px; border-bottom:1.5px solid #000; }
#picker .sidebar-label { margin:0; font:600 10.5px/1 "SFMono-Regular",ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.16em; color:#111; }
#picker .picker-legend { margin:0; font-size:12px; color:#6d6a62; }
#picker .country-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:26px; align-content:start; height:min(46vh,420px); padding-bottom:18px; overflow-y:auto; }
#picker .country-nav .nav-item { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; min-height:38px; padding:0 6px; border-bottom:1px solid #ddd3bf; border-radius:0; background:transparent; color:#111; font-size:14px; font-weight:500; }
#picker .country-nav .nav-icon { width:auto; font-size:16px; color:inherit; }
#picker .country-nav .nav-count { margin:0; font:500 12.5px/1 "SFMono-Regular",ui-monospace,"SF Mono",Menlo,monospace; color:#6d6a62; }
#picker .country-nav .nav-item:hover { background:#F3ECDC; color:#111; }
#picker .country-nav .nav-item[aria-current="page"] { border-radius:8px; background:#111; color:var(--section,#DF9BB7); }
#picker .country-nav .nav-item[aria-current="page"] .nav-count { color:#a9a397; }
#picker .nav-empty { grid-column:1 / -1; margin:0; padding:16px 6px; color:#6d6a62; font-size:14px; }
#picker a:focus-visible, #picker button:focus-visible { outline:2px solid #111; outline-offset:2px; }
@media (min-width:641px) and (max-width:900px) { #picker .country-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  #picker { width:calc(100vw - 16px); max-width:none; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:16px; }
  .picker-head { padding:18px; }
  #picker .dialog-heading h2 { font-size:30px; }
  #picker .country-search input { font-size:16px; }
  #picker .picker-fixed .nav-item { grid-template-columns:1fr; gap:8px; padding:14px 16px; }
  #picker .picker-fixed .nav-icon { display:none; }
  #picker .picker-fixed .nav-count { text-align:left; font-size:34px; }
  #picker .picker-body { padding:12px 16px 0; }
  .picker-countries-head { flex-direction:column; gap:4px; }
  #picker .country-nav { grid-template-columns:1fr; height:auto; flex:1; min-height:0; }
}

/* Seamless wall: no gaps, borders or caption strips between channels. The player covers its tile (sizes
   come from NewsCore.wallLayout). Country, channel name and the two controls appear over the picture only
   while the pointer is on a tile or the tile has keyboard focus. */
.wall { gap:0; background:#000; }
.wall .tile, .wall .tile:hover, .wall .tile.unavailable, .wall .tile:focus-within, .wall .tile.listening { border:0; border-radius:0; box-shadow:none; background:#000; }
.wall .tile-media { min-height:0; background:#000; }
.wall .player-host { inset:auto; left:50%; top:50%; width:var(--player-width,100%); height:var(--player-height,100%); transform:translate(-50%,-50%); }
.wall .tile-media:fullscreen .player-host { left:0; top:0; width:100%; height:100%; transform:none; }
.tile-hud { position:absolute; z-index:3; inset:0 0 auto 0; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 8px 24px 10px; background:linear-gradient(#000000e0,#00000085 55%,#0000); min-height:44%; opacity:0; transition:opacity .14s; }
/* One selector per rule: a browser that does not know :has() or :fullscreen drops only that rule, never the reveal itself. */
.tile:hover .tile-hud { opacity:1; }
.tile:focus-within .tile-hud { opacity:1; }
.tile-media:fullscreen:hover .tile-hud { opacity:1; }
.tile-media:-webkit-full-screen:hover .tile-hud { opacity:1; }
.tile-ident { display:flex; flex-direction:column; flex:1 1 0; min-width:0; overflow:hidden; gap:2px; text-shadow:0 1px 2px #000; }
.tile-country { font:600 10px/1.2 ui-monospace,monospace; letter-spacing:1.2px; text-transform:uppercase; color:#F9DDA0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-name { font-size:clamp(13px,7cqw,20px); line-height:1.15; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* text-overflow needs a block container; as a flex box the label would be hard-cut. */
.tile-hud .stream-state { display:block; max-width:100%; font-size:9px; letter-spacing:.8px; color:#d5dbe2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-hud .stream-state::before { display:inline-block; margin-right:4px; vertical-align:middle; }
/* The band takes the pointer itself: a pointer that is over the cross-origin player is not reliably reported
   as hovering the tile, so the upper part of every tile always answers and always shows the controls. */
.tile-actions { display:flex; gap:6px; flex:none; }
.tile-btn { width:clamp(34px,16cqw,44px); height:clamp(34px,16cqw,44px); display:grid; place-items:center; padding:0; border:1px solid #ffffff59; border-radius:50%; background:#000000b3; color:#fff; cursor:pointer; backdrop-filter:blur(6px); }
.tile-btn svg { width:55%; height:55%; }
.tile-btn:hover, .tile-btn:focus-visible, .tile-btn.listen-btn[aria-pressed="true"] { background:#F9DDA0; border-color:#F9DDA0; color:#000; }
/* A tile that still offers "Watch live" has no cross-origin player under the band, so the band lets the click
   through to that button while the two controls stay live. */
.tile-media:has(.preview-play:not([hidden])) .tile-hud { pointer-events:none; }
.tile-media:has(.preview-play:not([hidden])) .tile-actions { pointer-events:auto; }
/* Full screen: a slim band with larger type and controls instead of 44% of the enlarged picture. */
/* The controls sit below the strip where macOS drops its menu bar when the pointer reaches the top edge. */
.wall .tile-media:fullscreen .tile-hud { min-height:0; padding:56px 28px 44px; opacity:1; }
/* The way out is always on screen in an enlarged tile; the rest of the overlay still waits for the pointer. */
@media (hover:hover) {
  .wall .tile-media:fullscreen:not(:hover) .tile-hud:not(:focus-within) { background:none; }
  .wall .tile-media:fullscreen:not(:hover) .tile-hud:not(:focus-within) .tile-ident { visibility:hidden; }
  .wall .tile-media:fullscreen:not(:hover) .tile-hud:not(:focus-within) .tile-btn { opacity:.7; }
}
/* An enlarged tile keeps both controls even while that channel has the sound. The listening rules below hide
   every control but the speaker and deaden the band whenever the pointer is not reported on the tile, which
   over the cross-origin player is always: in full screen that took away the way out. */
.wall .tile.listening .tile-media:fullscreen .tile-hud { pointer-events:auto; }
.wall .tile.listening .tile-media:fullscreen .tile-actions .tile-btn { visibility:visible; }
.wall .tile.listening .tile-media:-webkit-full-screen .tile-hud { pointer-events:auto; }
.wall .tile.listening .tile-media:-webkit-full-screen .tile-actions .tile-btn { visibility:visible; }
.wall .tile-media:fullscreen .tile-btn { width:52px; height:52px; }
.wall .tile-media:fullscreen .tile-name { font-size:28px; }
.wall .tile-media:fullscreen .tile-country { font-size:13px; }
.wall .tile-media:fullscreen .stream-state { font-size:12px; }
.wall .tile-media:-webkit-full-screen .tile-hud { min-height:0; padding:56px 28px 44px; opacity:1; }
.wall .tile-media:-webkit-full-screen .tile-btn { width:52px; height:52px; }
.wall .tile-media:-webkit-full-screen .tile-name { font-size:28px; }
.wall .tile-media:-webkit-full-screen .player-host { left:0; top:0; width:100%; height:100%; transform:none; }
/* The channel that has sound keeps its sound button on screen, so it can be found and muted at a glance.
   Only where a pointer can reveal the rest: a touch screen keeps both controls on every tile. */
.tile.listening .tile-hud { opacity:1; }
@media (hover:hover) {
  .tile.listening:not(:hover):not(:focus-within) .tile-hud { background:none; pointer-events:none; }
  .tile.listening:not(:hover):not(:focus-within) .listen-btn { pointer-events:auto; }
  .tile.listening:not(:hover):not(:focus-within) .tile-ident { visibility:hidden; }
  .tile.listening:not(:hover):not(:focus-within) .tile-btn:not(.listen-btn) { visibility:hidden; }
}
/* Touch has no hover: the channel name and its state stay on the picture over a short fade, the country line is
   dropped (the collection is already named in the top bar), and the text never takes a tap from the player. */
@media (hover:none) { .tile-hud { opacity:1; background:linear-gradient(#000000a6,#0000); padding:4px 4px 16px 6px; min-height:0; pointer-events:none; } .tile-actions { pointer-events:auto; } .tile-hud .tile-country { display:none; } .tile-hud .tile-name { font-size:12px; } .tile-hud .stream-state { font-size:8px; } .tile-btn { width:30px; height:30px; background:#00000080; } }

/* Provider credit: one small linked TradingView logo in the far corner of the strip, on the strip's black.
   24px is the smallest target size WCAG 2.2 accepts; the mark itself stays legible at that width. */
.market-tape { padding-right:0; }
.market-tape-credit { order:3; flex:none; display:grid; place-items:center; width:40px; height:100%; background:var(--room-bg); color:#c9ced6; }
.market-tape-credit svg { display:block; width:24px; height:auto; }
.market-tape-credit:hover, .market-tape-credit:focus-visible { color:#fff; }
@media (max-width:800px), (pointer:coarse) and (max-height:600px) { .market-tape-credit { width:32px; } .market-tape-credit svg { width:20px; } }

/* No screen-count row: every channel of a collection is always on the wall (24 at most), so the wall takes
   the row's height. The section stays in the document for its heading and status text. Reconnect lives in
   the top bar. */
.toolbar { position:absolute; width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.toolbar #playWallBtn { display:none; } /* the top bar's pause control does the same job and stays reachable */
.topbar-actions > #goLiveBtn { flex:none; }
@media (max-width:800px) { .topbar-actions > #goLiveBtn { width:26px; min-width:26px; padding:0; } .topbar-actions > #goLiveBtn span:last-child { display:none; } }

/* Section colours (owner, 2026-09-23): the band takes the colour of the section on screen, yellow belongs to
   News alone. Every pill is a black outline whose dot carries its own section's colour; the selected pill is
   ink with the section colour for its text. The market strip and the wall stay black. The /news band and the
   About band use the same colours. */
:root{--sec-live:#DF9BB7;--sec-economy:#C9E7C1;--sec-news:#F9DDA0;--sec-about:#E9E2D5}
body{--section:var(--sec-live)}
body[data-section=economy]{--section:var(--sec-economy)}
body .topbar{background:var(--section);border-bottom:2px solid #000;color:#000}
body .topbar :focus-visible,body .topbar .audio-dock :focus-visible{outline-color:#000;outline-offset:2px}
body .topbar .collection-btn{background:transparent;border:1.5px solid #000;border-radius:999px;color:#000}
body .topbar .collection-btn:hover{background:#0000001a;border-color:#000}
body .topbar .collection-btn>span[data-icon] svg{color:#000}
.site-tab[data-tab=live]{--dot:var(--sec-live)}.site-tab[data-tab=economy]{--dot:var(--sec-economy)}
.site-tab[href="/news"]{--dot:var(--sec-news)}.site-tab[href="/about"]{--dot:var(--sec-about)}
body .topbar .site-tab{background:transparent;border:1.5px solid #000;border-radius:999px;color:#000}
body .topbar .site-tab:hover{background:#0000001a;border-color:#000;color:#000}
body .topbar .site-tab .site-tab-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--dot);opacity:1;box-shadow:0 0 0 1.5px #000;animation:none}
body .topbar .site-tab[aria-pressed=true]{background:#111;border-color:#111;color:var(--section)}
body .topbar .site-tab[aria-pressed=true] .site-tab-dot{background:var(--dot);box-shadow:0 0 0 1.5px var(--section)}
body .topbar .icon-btn,body .topbar .utc-clock{color:#000}
body .topbar .icon-btn:hover{background:#000;border-color:#000;color:var(--section)}
/* One family of round controls (owner, 2026-09-24): search, reconnect, sound, pause and full screen share a
   34 px ink ring. Reconnect is an icon with a label on hover; its ring spins while the wall reconnects and a red
   badge counts offline screens, which one click reconnects. */
body .topbar .icon-btn,body .topbar .audio-dock .audio-controls .icon-btn,body .topbar .audio-dock .audio-controls>.icon-btn:first-child{width:34px;min-width:34px;height:34px;min-height:34px;padding:0;background:transparent;border:1.5px solid #000;border-radius:50%;color:#000}
body .topbar .icon-btn svg{width:17px;height:17px;stroke-width:2}
@media (min-width:801px) and (max-width:1150px){body .topbar .icon-btn,body .topbar #goLiveBtn,body .topbar .audio-dock .audio-controls .icon-btn,body .topbar .audio-dock .audio-controls>.icon-btn:first-child{width:30px;min-width:30px;height:30px;min-height:30px}}
body .topbar #goLiveBtn{position:relative;overflow:visible;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;font-size:0;background:transparent;border:1.5px solid #000;border-radius:50%;color:#000}
@media (hover:hover){body .topbar #goLiveBtn:hover{background:#000;color:var(--section)}}
body .topbar #goLiveBtn.is-busy:disabled{opacity:1}
body .topbar #goLiveBtn.is-busy::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:#000;border-right-color:#000;animation:reconnect-spin .9s linear infinite}
@keyframes reconnect-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){body .topbar #goLiveBtn.is-busy::before{animation:none}}
body .topbar #goLiveBtn.has-offline{background:#000;border-color:#000;color:var(--section)}
body .topbar #goLiveBtn .reconnect-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5382b;color:#fff;font:700 10.5px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--section)}
@media (hover:hover){body .topbar #goLiveBtn[data-tip]:hover::after,body .topbar #goLiveBtn[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:40;padding:7px 10px;border-radius:8px;background:#111;color:#fff;font:600 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;white-space:nowrap;box-shadow:0 6px 20px #0006;pointer-events:none}}
body .topbar .audio-dock .audio-controls .icon-btn,body .topbar .audio-dock .audio-controls>.icon-btn:first-child{background:transparent;border:1.5px solid #000;border-radius:999px;color:#000}
body .topbar .audio-dock .audio-controls .icon-btn:hover{background:#000;color:var(--section)}
body .topbar .audio-dock .audio-controls>.icon-btn:first-child[aria-pressed=false]{background:#000;color:var(--section)}
body .topbar .audio-dock .volume-control,body .topbar .audio-dock .volume-control output{color:#000}
body .topbar .volume-control input[type=range]{accent-color:#000}
body .topbar .audio-dock .dock-divider{background:#00000040}
@media (max-width:639px){body .topbar .site-tab .site-tab-dot{display:none}}
/* Phones: the control row and the tab row get 8 px of air between them and at the band's edges, and every
   control is one 34 px size. Touch keeps no hover colour, so a tapped button never stays black. */
@media (max-width:800px){body .workspace .topbar{height:90px;min-height:90px;padding-top:8px}body .topbar .site-tabs{bottom:8px}
body .topbar .site-tab{min-height:30px}body .topbar .topbar-actions{padding-top:0;gap:6px}body .topbar .audio-dock .audio-controls{gap:6px}
body .topbar .icon-btn,body .topbar .audio-dock .audio-controls .icon-btn,body .topbar-actions>#goLiveBtn{width:34px;min-width:34px;height:34px;min-height:34px}
body .topbar .collection-btn{height:34px;min-height:34px}}
@media (max-width:360px){body .topbar .topbar-actions,body .topbar .audio-dock .audio-controls{gap:4px}body .topbar .collection-btn{min-width:88px}}
@media (hover:none){body .topbar .site-tab:hover,body .topbar .collection-btn:hover{background:transparent;color:#000}
body .topbar .site-tab[aria-pressed=true]:hover{background:#111;color:var(--section)}
body .topbar .icon-btn:hover,body .topbar .audio-dock .audio-controls .icon-btn:hover,body .topbar #goLiveBtn:hover{background:transparent;color:#000}}
/* News band metrics (owner, 2026-09-23): on desktop every band is as tall as the /news band (74 px) and the
   pills use its type: 600 13px Inter, 30 px high, 12 px sides, 6 px apart. */
@media (min-width:1151px){body .workspace .topbar{height:74px;min-height:74px;padding:0 clamp(12px,3vw,28px);gap:18px}
body .topbar .site-tabs{gap:6px}
body .topbar .site-tab{font:600 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;min-height:30px;padding:0 12px;gap:7px}
body .topbar .collection-btn{height:30px;min-height:30px;font-size:13px}}
@media (min-width:1151px) and (max-width:1439px){body .topbar .site-tab{padding:0 9px;gap:6px}body .topbar .site-tabs{gap:4px}}
@media (min-width:1151px) and (max-width:1279px){body .workspace .topbar{padding:0 10px;gap:10px}body .topbar .site-tab{padding:0 7px;gap:5px}body .topbar .site-tabs{gap:3px}body .topbar .collection-btn{min-width:96px}}
/* 801-880 px: styles.css already lays the bar out in two rows here, but the fixed 48 px height above cut the
   tab row off and let it hang over the wall. The bar takes its content's height instead. */
@media (min-width:801px) and (max-width:880px){.topbar{height:auto;min-height:0;padding:6px 8px}}

/* Phone rotation keeps the scrollable wall instead of compressing every player into a short desktop viewport. */
@media (pointer:coarse) and (max-height:600px) {
  html:has(.workspace),body:has(.workspace) { height:auto; overflow:auto; }
  .workspace { height:auto; min-height:100dvh; overflow:visible; }
  .main { flex:none; overflow:visible; }
  .main > .wall { flex:none; height:var(--wall-height,100dvh)!important; }
}
/* Use the provider's native canvas. Nested zoom and width:0 distorted its mobile viewport. */
.market-tape { height:46px; min-height:46px; max-height:46px; overflow:hidden; }
.market-tape-mount { height:44px; min-width:0; overflow:hidden; }
.market-tape-mount .tradingview-widget-container { display:block; height:44px!important; width:100%; zoom:1; }
.market-tape-mount .tradingview-widget-container__widget { height:44px!important; width:100%; zoom:1; }
.market-tape-mount iframe { display:block; width:calc(100% + 64px)!important; height:44px!important; max-width:none; zoom:1; border:0; background:#07090b; color-scheme:normal; }
.market-tape-logo { display:none; }
/* One scale at the iframe, with a matching positive layout width: no nested zoom or white gap. */
@media (max-width:800px), (pointer:coarse) and (max-height:600px) {
  .market-tape { height:39px; min-height:39px; max-height:39px; padding:0 3px; gap:0; }
  .market-tape-off { display:none; }
  .market-tape-mount { height:38px; }
  .market-tape-mount .tradingview-widget-container { position:relative; width:100%; height:38px!important; }
  .market-tape-mount iframe { width:calc(192.3076923% + 120px)!important; max-width:none; height:72px!important; transform:scale(.52); transform-origin:top left; }
  .market-tape-mount .tradingview-widget-container__widget { height:0!important; }
}

/* Keep the channel identity visible while its player is not showing video. */
.wall .tile-media:not([data-status="playing"]) .tile-hud { opacity:1; }

body[data-media="declined"] .media-notice { position:relative; flex:none; width:auto; height:auto; overflow:visible; clip:auto; padding:7px 12px; margin:0; font-size:11px; background:#111; }

/* Share the current selection without importing it into another device's watchlist. */
#picker .picker-share { flex:none; padding:12px 22px; background:#111; color:var(--section,#DF9BB7); }
#picker .picker-share button { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 16px; border:1px solid var(--section,#DF9BB7); border-radius:999px; background:transparent; color:inherit; font:600 12px Inter,sans-serif; }
#picker .picker-share button svg { width:15px; height:15px; }
#picker #shareWallLink { width:100%; min-width:0; margin-top:10px; padding:8px; font-size:16px; }

/* The section tabs fit a phone's tab row without clipping About (measured with six tabs at 320-430 px;
   four leave room to spare). Kept last: this sheet loads after styles.css and theme.css, whose tab
   padding would otherwise win. */
@media (max-width:430px) { .site-tabs { gap:2px; } .site-tab { padding:0 5px; } }
@media (max-width:340px) { .site-tab { padding:0 3px; } }