/* Ordelvio News colour theme, owner decision of 2026-09-18: yellow #f8fa4e, black #000000, purple #7d2dfe / #3c187c.
   Loaded after styles.css and heatmap.css; overrides tokens and the surfaces that carried fixed colours.
   Gains stay green and losses stay red because those colours carry meaning; the Live dot stays brand red. */
:root {
  --bg: #000000; --sidebar: #000000; --surface: #0b0b0b; --surface-raised: #151515; --surface-hover: #1e1e1e;
  --line: #262626; --line-strong: #3c187c;
  --text: #f8fa4e; --muted: #c9cb52; --subtle: #8c8d3d;
  --yellow: #f8fa4e; --purple: #7d2dfe; --purple-deep: #3c187c; --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); }
.topbar .wordmark, .topbar .wordmark-sub { color: var(--ink); }
.topbar .brand-mark { color: var(--purple-deep); }
.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: #be2517; }
.site-tab[data-tab="live"][aria-pressed="true"] .site-tab-dot, .site-tab[data-tab="economy"][aria-pressed="true"] .site-tab-dot { background: #be2517; 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); }
.topbar .repair-btn { color: var(--yellow); border-color: var(--purple); background: var(--purple-deep); }
.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: var(--purple); color: var(--yellow); }
.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); }
.tile-caption { background: var(--ink); }
.channel-open { color: var(--yellow); }
.channel-open:hover { color: #ffffff; }
.category-label, .category-label.business { color: #b58cff; }
.stream-state { color: #b58cff; }
.stream-state::before { background: #b58cff; }
.stream-state[data-state="playing"] { color: #a5c8a0; }
.caption-actions .icon-btn { color: #b58cff; }
.caption-actions button:hover { background: var(--purple-deep); color: var(--yellow); }
.caption-actions .listen-btn[aria-pressed="true"] { color: var(--yellow); background: var(--purple); }
.tile.unavailable .retry-btn { color: var(--yellow); background: var(--purple-deep); border-color: var(--purple); }
.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); }
/* 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); }
.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"]::before { background: var(--yellow); }
.nav-item[aria-current="page"] .nav-icon, .nav-item[aria-current="page"] .nav-count { color: var(--yellow); }
.country-search { background: var(--ink); border-color: var(--purple-deep); color: var(--muted); }
.country-search:focus-within { 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); }
.tab-panel .empty-state { background: var(--ink); }
.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); }
/* Markets panel chrome shares the field; the heatmap keeps its own gain/loss scale. */
.markets-panel { background: var(--ink); }
/* Legibility pass (owner, 2026-09-18): brighter yellows, the mark back in brand red, a larger wordmark,
   and every small label one step up. The top bar stays 54 px so the panels' geometry holds. */
:root { --text: #fbfc6a; --muted: #e4e66b; --subtle: #b9ba5c; }
body, button, input, select { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.topbar .brand-mark { color: #be2517; width: 34px; height: 34px; }
.topbar .wordmark { font-size: 26px; letter-spacing: -1px; line-height: 1; }
.topbar .wordmark-sub { font-size: 8px; letter-spacing: 1.6px; margin-top: 3px; }
.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; }
.channel-open { font-size: 12.5px; height: 16px; }
.category-label { font-size: 9px; letter-spacing: .8px; }
.stream-state, .caption-meta .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, and a red / white / black control cluster instead of purple. */
.topbar .wordmark { display: none; }
.topbar .brand-mark { width: 42px; height: 42px; color: #be2517; }
.site-tab[aria-pressed="true"] { background: #fb6a60; border-color: #fb6a60; color: #060c19; }
.site-tab:hover { background: #fb6a6033; }
.site-tab .site-tab-dot { display: none; }
.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 {
  display: inline-block; width: 8px; height: 8px; background: #00ff41; opacity: 1;
  box-shadow: 0 0 0 2px #060c19, 0 0 9px 1px #00ff41; animation: live-blink 1.2s ease-in-out infinite;
}
/* Control cluster: black glyphs on the yellow bar, a black sound bar with white glyphs, red for the active states. */
.topbar .icon-btn { 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: #be2517; }
.topbar .repair-btn:hover { background: #be2517; color: #ffffff; border-color: #be2517; }
#shortcutsBtn { width: 34px; height: 30px; background: #000000; color: #ffffff; border-color: #000000; border-radius: 6px; }
#shortcutsBtn:hover { background: #be2517; border-color: #be2517; }
#fullscreenBtn { width: 42px; height: 42px; }
#fullscreenBtn svg { width: 26px; height: 26px; stroke-width: 2.2; }
.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: #be2517; border-color: #be2517; color: #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: #be2517; border-color: #be2517; color: #ffffff; }
.topbar .volume-control input[type="range"] { accent-color: #be2517; }
/* 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 .retry-btn, .caption-actions .retry-btn { background: transparent; border: 0; }
.tile.unavailable .retry-btn { color: #ef6355; }
.caption-actions .listen-btn[aria-pressed="true"] { border: 0; }
/* 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; }