/* News interface controls. Brand artwork is governed exclusively by brand.css and the approved package.
   Gains and losses keep semantic colors; no interface rule may recolor identity artwork. */
:root {
  --bg: #000000; --sidebar: #000000; --surface: #0b0b0b; --surface-raised: #151515; --surface-hover: #1e1e1e;
  --line: #262626; --line-strong: #575052;
  --text: #F9DDA0; --muted: #c9cb52; --subtle: #8c8d3d;
  --yellow: #F9DDA0; --purple: #BFC1E3; --purple-deep: #575052; --ink: #000000;
}
body { background: var(--ink); color: var(--text); }
::selection { background: var(--purple); color: var(--yellow); }
/* Top bar: the yellow field with black type. */
.topbar { background: var(--yellow); border-bottom: 2px solid var(--ink); color: var(--ink); }
.collection-btn { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.collection-btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.collection-btn > span[data-icon] svg, .collection-flag svg { color: var(--yellow); }
.site-tab { background: transparent; border-color: var(--ink); color: var(--ink); }
.site-tab:hover { background: #00000014; border-color: var(--ink); color: var(--ink); }
.site-tab-dot { background: var(--ink); opacity: .7; }
.site-tab[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: var(--yellow); }
.site-tab[aria-pressed="true"] .site-tab-dot { background: var(--yellow); opacity: 1; }
.site-tab[data-tab="live"] .site-tab-dot, .site-tab[data-tab="economy"] .site-tab-dot { background: #DF9BB7; }
.site-tab[data-tab="live"][aria-pressed="true"] .site-tab-dot, .site-tab[data-tab="economy"][aria-pressed="true"] .site-tab-dot { background: #DF9BB7; box-shadow: 0 0 0 2px var(--yellow); }
.topbar .icon-btn { color: var(--ink); }
.topbar .icon-btn:hover { background: #00000014; border-color: var(--ink); color: var(--ink); }
.topbar .utc-clock { color: var(--ink); }
.topbar .audio-dock { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.topbar .audio-dock .icon-btn, .topbar .audio-dock .audio-copy strong, .topbar .audio-dock .wall-health { color: var(--yellow); }
.topbar .audio-dock .audio-copy small, .topbar .audio-dock .volume-control { color: var(--muted); }
.topbar .audio-dock .audio-icon { background: var(--purple-deep); border-color: var(--purple); color: var(--yellow); }
.topbar .audio-dock .audio-controls > .icon-btn:first-child { border-color: var(--purple); }
.volume-control input[type="range"] { accent-color: var(--purple); }
/* Toolbar: yellow band; the ticker is a black strip inside it. */
.toolbar { background: var(--yellow); border-radius: 6px; padding: 3px 6px; color: var(--ink); }
.toolbar .ticker { background: var(--ink); border-color: var(--ink); }
.ticker-name { color: #b58cff; }
.ticker-value { color: var(--yellow); }
.ticker-note .ticker-name { color: var(--muted); }
.grid-controls > span, .density-label { color: var(--ink); }
.density-control { background: var(--ink); border-radius: 4px; padding: 2px; }
.density-control button { color: var(--yellow); }
.density-control button:hover { background: var(--purple-deep); color: var(--yellow); }
.density-control button[aria-pressed="true"] { background: #F1B7C0; color: #060c19; }
.btn-primary, #goLiveBtn { background: var(--purple); border-color: var(--purple); color: var(--yellow); }
.btn-primary:hover, #goLiveBtn:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.toolbar .icon-btn, .toolbar .btn-quiet { color: var(--ink); border-color: var(--ink); }
/* Wall: black field, purple frames, yellow names. */
.wall { background: var(--ink); }
.tile { border: 2px solid var(--purple); background: var(--ink); }
.tile:hover { border-color: #984dff; box-shadow: 0 0 0 1px #984dff; }
.tile.unavailable { border-color: var(--purple-deep); }
.tile-media { background: var(--ink); }
.stream-state { color: #b58cff; }
.stream-state::before { background: #b58cff; }
.stream-state[data-state="playing"] { color: #a5c8a0; }
.tile-media[data-status="blocked"]::after { background: var(--purple); color: var(--yellow); }
.empty-state { border-color: var(--purple-deep); color: var(--text); }
.source-panel { background: var(--surface); border-color: var(--purple-deep); }
.source-links a { border-color: var(--purple-deep); background: var(--ink); color: var(--yellow); }
.source-links a:hover { border-color: var(--purple); }
.source-links a svg { color: var(--yellow); }
/* Dialogs and panels. */
dialog { background: var(--ink); border: 2px solid var(--purple); color: var(--yellow); }
dialog::backdrop { background: #000000cc; }
.dialog-heading h2, .viewer-header h2 { color: var(--yellow); }
/* The viewer set its own grey-brown frame in styles.css, so the generic dialog rule never reached it. */
.viewer { border-color: var(--purple); border-radius: 10px; background: var(--ink); }
.viewer-header, .viewer-footer { background: var(--ink); border-color: var(--purple-deep); }
/* The header's country line and the footer's broadcaster link kept the old build's tan and warm grey, which
   read as a second palette once v-52 painted the surfaces around them black. The link inherits the footer's
   colour rather than naming one, so it and the status beside it stay one system; its icon follows through
   currentColor. */
.viewer-header small { color: var(--muted); }
.viewer-footer a { color: inherit; }
.eyebrow, .sidebar-label { color: #b58cff; }
.nav-item { color: var(--muted); }
.nav-item:hover { background: var(--purple-deep); color: var(--yellow); }
.nav-item[aria-current="page"] { background: var(--purple); color: var(--yellow); }
.nav-item[aria-current="page"] .nav-icon, .nav-item[aria-current="page"] .nav-count,
.nav-item[aria-current="page"] small { color: var(--yellow); }
.country-search { background: var(--ink); border-color: var(--purple-deep); color: var(--muted); }
.country-search:focus-within { border-color: var(--purple); }
.search-field { background: var(--ink); border-color: var(--purple-deep); }
.search-field:focus-within { border-color: var(--purple); }
.directory-filters select { background: var(--ink); border-color: var(--purple-deep); border-radius: 4px; color: var(--muted); color-scheme: dark; }
.directory-filters select:focus { border-color: var(--purple); }
.directory-row { border-color: var(--line); }
.channel-avatar { background: var(--purple-deep); color: var(--yellow); }
.btn { border-color: var(--purple); color: var(--yellow); }
.btn:hover { background: var(--purple-deep); }
.directory-actions .favorite-btn[aria-pressed="true"] { color: var(--yellow); background: var(--purple); }
.favorite-btn[aria-pressed="true"] svg { fill: currentColor; }
.toast { background: var(--purple); color: var(--yellow); }
kbd { background: var(--ink); border-color: var(--purple-deep); color: var(--yellow); }
.cinema-exit { background: var(--purple); color: var(--yellow); border-color: var(--purple); }
/* Control legibility: small labels receive additional room. The top bar stays 54 px. */
:root { --text: #fbfc6a; --muted: #e4e66b; --subtle: #b9ba5c; }
body, button, input, select { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.collection-btn { font-size: 13px; min-height: 32px; }
.site-tab { font-size: 12.5px; min-height: 30px; padding: 0 13px; }
.topbar .audio-dock .audio-copy strong { font-size: 12px; }
.topbar .audio-dock .audio-copy small { font-size: 8.5px; }
.topbar .audio-dock .wall-health { font-size: 11px; }
.topbar .utc-clock { font-size: 11px; }
.ticker { font-size: 14px; }
.ticker-name { font-size: 12.5px; letter-spacing: .6px; }
.ticker-change { font-size: 12.5px; }
.grid-controls > span, .density-label { font-size: 9px; }
.density-control button { font-size: 12px; min-width: 30px; }
.btn-primary, #goLiveBtn { font-size: 11.5px; }
.stream-state { font-size: 9px; }
.tile-media[data-status="blocked"]::after { font-size: 10px; }
.picker .nav-item, .nav-item { font-size: 12px; }
.sidebar-label, .eyebrow { font-size: 9px; }
.dialog-heading h2 { font-size: 22px; }
.directory-info strong { font-size: 13px; }
.directory-info span { font-size: 11px; }
.empty-state h2 { font-size: 19px; }
.empty-state p { font-size: 12.5px; }
.source-links strong { font-size: 13px; }
.source-links small { font-size: 11px; }
.toast { font-size: 12.5px; }
@media (max-width: 1500px) { .site-tab { padding: 0 11px; } }
@media (max-width: 1200px) { .site-tab { font-size: 11.5px; padding: 0 9px; } .collection-btn { font-size: 12px; } }
/* Top bar pass (owner, 2026-09-18): mark only, coral selected tab, Matrix-green on-air dots on Live and Economy,
   no dots elsewhere{ display: none; }
.site-tab[aria-pressed="true"] { background: #F1B7C0; border-color: #F1B7C0; color: #060c19; }
.site-tab:hover { background: #F1B7C033; }
.site-tab .site-tab-dot { display: none; }
.site-tab[data-tab="live"] .site-tab-dot, .site-tab[data-tab="economy"] .site-tab-dot {
  display: inline-block; width: 8px; height: 8px; background: #00ff41; opacity: 1;
  box-shadow: 0 0 0 2px #F9DDA0; animation: live-blink 1.2s ease-in-out infinite;
}
/* The ring separates the dot from the field under it, so the selected coral pill needs its own. */
.site-tab[data-tab="live"][aria-pressed="true"] .site-tab-dot,
.site-tab[data-tab="economy"][aria-pressed="true"] .site-tab-dot { background: #00ff41; box-shadow: 0 0 0 2px #F1B7C0; }
/* Control cluster: black glyphs on the yellow bar, a black sound bar with white glyphs, red for the active states. */
/* One box for every icon button in the bar; the black-pill hover is the only weight signal. */
.topbar .icon-btn { width: 30px; height: 30px; border-radius: 6px; color: #000000; border-color: transparent; background: transparent; }
.topbar .icon-btn svg { width: 19px; height: 19px; stroke-width: 1.9; }
.topbar .icon-btn:hover { background: #000000; color: #ffffff; border-color: #000000; }
.topbar .repair-btn, .topbar .repair-btn:not([hidden]) { background: transparent; border-color: transparent; color: #DF9BB7; }
.topbar .repair-btn:hover { background: #DF9BB7; color: #ffffff; border-color: #DF9BB7; }
#shortcutsBtn { background: #000000; color: #ffffff; border-color: #000000; }
#shortcutsBtn:hover { background: #DF9BB7; border-color: #DF9BB7; }
.topbar .audio-dock { background: #000000; border-color: #000000; color: #ffffff; }
.topbar .audio-dock .icon-btn, .topbar .audio-dock .audio-copy strong, .topbar .audio-dock .wall-health { color: #ffffff; }
.topbar .audio-dock .audio-copy small, .topbar .audio-dock .volume-control, .topbar .audio-dock .volume-control output { color: #d4d4d4; }
.topbar .audio-dock .audio-icon { background: #DF9BB7; border-color: #DF9BB7; color: #ffffff; }
/* The separator speaks the dock's own black-and-white language; the global --line-strong purple reads as a
   colour artefact at about 1.5:1 on the dock's black. */
.topbar .audio-dock .dock-divider { background: #ffffff33; }
/* Both dock buttons carry the same box and border; styles.css borders the first child only. */
.topbar .audio-dock .audio-controls .icon-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #ffffff; }
.topbar .audio-dock .audio-controls > .icon-btn:first-child { border-color: #ffffff; background: transparent; color: #ffffff; }
.topbar .audio-dock .icon-btn:hover { background: #ffffff; color: #000000; border-color: #ffffff; }
.topbar .audio-dock .icon-btn[aria-pressed="false"] { background: #DF9BB7; border-color: #DF9BB7; color: #ffffff; }
/* Sound on: the mute button fills red. The first-child rule above outranks the shared one, so it is
   repeated here; muted, the volume slider and its readout fade with the state. */
.topbar .audio-dock .audio-controls > .icon-btn:first-child[aria-pressed="false"] { background: #DF9BB7; border-color: #DF9BB7; color: #ffffff; }
#muteBtn[aria-pressed="true"] ~ .volume-control { opacity: .45; }
.topbar .volume-control input[type="range"] { accent-color: #DF9BB7; }
/* Frameless wall (owner, 2026-09-18): no border, outline or hover ring on any tile, on Live and Economy alike. */
.tile, .tile:hover, .tile.unavailable, .tile:focus-within { border: 0; box-shadow: none; outline: 0; }
.tile.unavailable .stream-state { color: #F1B7C0; }
/* Ticker moves (owner, 2026-09-18): gains in a bright green, losses in a saturated red, a touch heavier. */
.ticker-item[data-direction="up"] .ticker-change { color: #22e06b; font-weight: 700; }
.ticker-item[data-direction="down"] .ticker-change { color: #ff2d2d; font-weight: 700; }
.ticker-item[data-direction="up"] .ticker-arrow, .ticker-item[data-direction="down"] .ticker-arrow { font-size: 10px; }
/* Mark pass (owner, 2026-09-18): the symbol's viewBox is now tight around the mark, so the
   mark fills its box; 48 px tall inside the 54 px bar{ width: 42px; height: 48px; display: block; }
.topbar .brand { align-items: center; padding: 0 4px; }
/* Go live button (owner, 2026-09-18): black field, red text and glyph, like the density control. */
#goLiveBtn { background: var(--ink); border-color: var(--ink); color: #ff2d2d; }
#goLiveBtn:hover { background: #1a1a1c; border-color: #ff2d2d; color: #ff2d2d; }
/* Focus ring: the global ring is var(--text) #fbfc6a (styles.css), which is invisible on the yellow bar and
   toolbar. Black reads at 18.8:1 on #F9DDA0, and the 3 px offset keeps it off the black and coral pills. */
.topbar :focus-visible, .toolbar :focus-visible, .grid-controls :focus-visible { outline-color: #000000; outline-offset: 3px; }
/* The sound bar and the density control are black fields inside the yellow chrome, so the ring turns
   white there and keeps an offset small enough to stay on the black. */
.topbar .audio-dock :focus-visible { outline-color: #ffffff; outline-offset: 2px; }
.toolbar .density-control :focus-visible { outline-color: #ffffff; outline-offset: 1px; }
/* Touch targets: the shared 30 px bar box above outranks the coarse-pointer rule in styles.css. */
@media (pointer: coarse) and (max-width: 1030px) {
  .topbar .icon-btn, .topbar .audio-dock .audio-controls .icon-btn { width: 36px; height: 36px; }
}

/* Quiet broadcast surfaces. Identity artwork retains its approved package colors. */
:root {
  --bg: #0d1014; --ink: #0d1014; --surface: #151a20; --surface-raised: #1d242d;
  --surface-hover: #242c35; --line: #29313a; --line-strong: #414d5b;
  --text: #f1f3f5; --muted: #a7b0bc; --subtle: #83909e;
}
body, .wall { background: var(--bg); }
::selection { background: #DF9BB7; color: #fff; }
.topbar { background: #15191f; border-bottom: 1px solid var(--line); color: var(--text); padding-inline: 16px; }
.collection-btn { background: #222932; border: 1px solid #414d5b; color: var(--text); border-radius: 7px; }
.collection-btn:hover { background: #2c3541; border-color: #677687; }
.collection-btn > span[data-icon] svg, .collection-flag svg { color: var(--text); }
.site-tab { color: var(--muted); border-color: transparent; border-radius: 6px; }
.site-tab:hover { color: #fff; background: #262e38; border-color: transparent; }
.site-tab[aria-pressed="true"] { color: #fff; background: #343039; border-color: #58434a; }
.site-tab[data-tab="live"] .site-tab-dot, .site-tab[data-tab="economy"] .site-tab-dot,
.site-tab[data-tab="live"][aria-pressed="true"] .site-tab-dot,
.site-tab[data-tab="economy"][aria-pressed="true"] .site-tab-dot { background: #e96455; box-shadow: none; animation: none; }
.topbar .icon-btn, .topbar .utc-clock { color: var(--muted); }
.topbar .icon-btn:hover { background: #303945; color: #fff; border-color: transparent; }
#shortcutsBtn { background: #232b35; color: var(--muted); border-color: transparent; }
.topbar .audio-dock { background: #101419; border-color: #303944; border-radius: 7px; }
.topbar .audio-dock .audio-icon { background: #2c2022; border-color: #503235; color: #f18479; }
.topbar .audio-dock .audio-controls .icon-btn,
.topbar .audio-dock .audio-controls > .icon-btn:first-child { border-color: #495460; }
.main { padding: 16px; }
.toolbar { padding: 0 0 12px; margin-bottom: 0; background: transparent; color: var(--text); gap: 16px; align-items: center; }
.wall-heading { flex: 1; min-width: 150px; }
.wall-heading .eyebrow { margin: 0 0 4px; color: #f18479; font-size: 9px; letter-spacing: .15em; }
.wall-description { margin: 0; color: var(--text); font-size: 14px; font-weight: 550; }
.grid-controls { gap: 8px; }
.grid-controls > span, .density-label { color: var(--muted); }
.density-control { background: #151b22; border-color: var(--line); border-radius: 7px; padding: 3px; }
.density-control button { color: #b9c3ce; min-height: 28px; }
.density-control button:hover { background: #2a3440; color: #fff; }
.density-control button[aria-pressed="true"] { background: #e7ebef; color: #12171c; }
.btn, .toolbar .icon-btn, .toolbar .btn-quiet { color: var(--text); border-color: #465362; border-radius: 6px; }
.btn:hover, .toolbar .icon-btn:hover { background: #29333f; border-color: #6c7c8e; }
#goLiveBtn { color: #fff; background: #9f3027; border-color: #ba453b; min-height: 36px; }
#goLiveBtn:hover { color: #fff; background: #b5372c; border-color: #ed7c72; }
.media-notice { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 9px 12px; margin: 0 0 12px; border: 1px solid #29313a; border-radius: 6px; color: #a7b0bc; font-size: 11px; background: #13181e; }
.media-notice a { color: #dce2e8; margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.wall { gap: 10px; }
.tile, .tile:hover, .tile.unavailable, .tile:focus-within { background: #161c23; border-radius: 8px; border: 0; box-shadow: none; }
.tile-media { background: radial-gradient(ellipse at 50% 30%, #222b37, #11161c 75%); }
.thumbnail[src="/favicon.svg"] { opacity: .12; padding: 65px; filter: grayscale(1); }
.stream-state { color: #a7b2c0; font-size: 8px; }
.stream-state::before { background: #7a899a; }
.stream-state[data-state="playing"] { color: #9cceb3; }
.preview-play { color: #e1e7ee; opacity: 1; }
dialog { background: #171d25; border: 1px solid #445264; border-radius: 14px; color: var(--text); box-shadow: 0 24px 100px #0009; }
dialog::backdrop { background: #080b10b8; backdrop-filter: blur(5px); }
.dialog-heading h2, .viewer-header h2 { color: var(--text); }
.eyebrow, .sidebar-label { color: #f18479; }
.viewer, .viewer-header, .viewer-footer { background: #171d25; border-color: #445264; }
.nav-item:hover { background: #283441; color: #fff; }
.nav-item[aria-current="page"] { background: #3c292b; color: #fff; }
.nav-item[aria-current="page"] .nav-icon, .nav-item[aria-current="page"] .nav-count,
.nav-item[aria-current="page"] small { color: #f1b0a9; }
.country-search, .search-field, .directory-filters select { background: #0f151c; border-color: #445264; color: var(--text); }
.channel-avatar { background: #2e3947; color: #e8edf3; }
.source-panel, .source-links a { background: #151c25; border-color: #445264; color: var(--text); }
.source-links a svg { color: #e8edf3; }
.toast { background: #e7ebef; color: #12171c; }
.btn-primary, #mediaConsent .btn-primary { background: #b23428; border-color: #d75649; color: #fff; }
.btn-primary:hover, #mediaConsent .btn-primary:hover { background: #c94032; }
#mediaConsent { padding: 32px; }
#mediaConsent h2 { font-size: 27px; line-height: 1.15; letter-spacing: -.6px; margin: 12px 0 18px; }
#mediaConsent p { color: #b4bfcc; font-size: 12px; }
#mediaConsent .consent-intro { color: #eef2f6; font-size: 15px; }
#mediaConsent a { color: #f4b4ac; text-decoration: underline; text-underline-offset: 2px; }
#mediaConsent .btn { min-height: 42px; margin-top: 8px; font-size: 12px; }
.topbar :focus-visible, .toolbar :focus-visible, .grid-controls :focus-visible { outline-color: #fff; }
@media (max-width: 1100px) {
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .wall-heading { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .topbar { padding-inline: 10px; }
  .main { padding: 12px; }
  .grid-controls { flex-wrap: wrap; justify-content: flex-start; }
  .grid-controls .grid-label { display: none; }
  .density-control { width: 100%; }
  .density-control button { flex: 1; min-height: 32px; }
  .wall-description { font-size: 13px; }
  .media-notice a { margin-left: 0; }
  #mediaConsent { padding: 24px; }
  #mediaConsent .btn { width: 100%; }
}

/* A stronger editorial hierarchy, while the screens keep the quiet surface. */
.wall-display-title { margin: 4px 0 6px; color: #eef1f4; font-size: clamp(20px, 2vw, 27px); font-weight: 550; line-height: 1.12; letter-spacing: -.7px; }
.wall-description { color: #93a4b3; font-size: 11px; font-weight: 400; }
.wall-heading .eyebrow { color: #de9389; font-size: 8px; }
.toolbar { padding-block: 5px 15px; }
.media-notice { border-left: 2px solid #70514d; background: linear-gradient(90deg, #1b1e22, #121820); }
.tile-media { background: radial-gradient(ellipse at 50% 50%, #1d303b, #111923 72%); }
.preview-play:hover > svg { background: #ad3d30; }
@media (min-width: 1450px) {.topbar .brand { gap: 10px; margin-right: 9px; } }
@media (max-width: 640px) { .wall-display-title { font-size: 22px; }.wall-description { font-size: 10px; } }