/* Compact broadcast workspace. Embedded videos retain their native controls and dimensions. */
:root {
  color-scheme: dark;
  --bg: #111113;
  --sidebar: #151517;
  --surface: #19191c;
  --surface-raised: #222225;
  --surface-hover: #29292d;
  --line: #2b2b2e;
  --line-strong: #414145;
  --text: #E5DCD6;
  --muted: #a5a3a0;
  --subtle: #737373;
  --red: #DF9BB7;
  --red-bright: #ef6355;
  --green: #a5c8a0;
  --wall-chrome: 112px;
  --radius: 4px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-color: #48484c var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 12px; line-height: 1.5; }
button, input, select { font: inherit; border-radius: 0; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; background: none; }
button:disabled { cursor: not-allowed; opacity: .38; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; }
button svg, .icon-btn svg, .icon svg, .nav-icon svg, [data-icon] > svg { width: 15px; height: 15px; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::selection { background: var(--red); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; border-radius: 6px; background: var(--text); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.live-dot { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--red-bright); }

.brand { min-height: 58px; display: flex; align-items: center; gap: 6px; padding: 0 5px; }
.sidebar-label { margin: 16px 7px 6px; color: var(--subtle); font-size: 7px; font-weight: 650; letter-spacing: 1.25px; text-transform: uppercase; }
.sidebar-label:first-of-type { margin-top: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 7px; min-height: 29px; width: 100%; padding: 5px 7px; border: 0; border-radius: 4px; color: var(--muted); text-align: left; font-size: 10px; font-weight: 500; transition: background .15s, color .15s; }
.nav-item:hover { color: var(--text); background: #202023; }
.nav-item[aria-current="page"] { background: #292321; color: var(--text); }
.nav-item[aria-current="page"] .nav-icon { color: var(--red-bright); }
.nav-icon { width: 15px; display: flex; justify-content: center; color: #88888a; font-size: 12px; line-height: 1; flex: none; }
.nav-icon svg { width: 14px; height: 14px; }
.nav-count { margin-left: auto; color: #7e7c79; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .nav-count { color: #c1ada4; }
.country-nav { min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; }
.country-nav .nav-item { min-height: 25px; padding-top: 3px; padding-bottom: 3px; }
.sidebar-bottom { margin-top: auto; flex-shrink: 0; padding: 9px 6px; border-top: 1px solid var(--line); }
.network-note { display: flex; gap: 5px; align-items: center; color: var(--subtle); font-size: 8px; line-height: 1.7; }
.network-note .live-dot { width: 4px; height: 4px; background: var(--green); }
.sidebar-bottom p, .sidebar-bottom small { display: none; }
.sidebar-bottom .btn-quiet { min-height: 24px; padding: 3px 0; border: 0; color: #a09a94; font-size: 9px; }
.sidebar-bottom .btn-quiet svg { width: 12px; height: 12px; }

.workspace { min-height: 100dvh; margin-left: 0; padding-bottom: env(safe-area-inset-bottom); }
.topbar { min-height: 54px; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #151517; }
.breadcrumb { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--muted); font-size: 9px; white-space: nowrap; }
.breadcrumb strong, #breadcrumb { color: var(--text); font-weight: 500; }
.breadcrumb svg { width: 13px; height: 13px; color: var(--subtle); }
.breadcrumb > span[aria-hidden], .breadcrumb-divider { color: #49494c; }
.topbar-actions { display: flex; align-items: center; gap: 5px; }
.icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 1px solid transparent; border-radius: 4px; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn[aria-pressed="true"] { color: var(--red-bright); background: #30211f; }
.mobile-menu, .sidebar-close { display: none; }
.search-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 9px; }
.search-trigger:hover { background: var(--surface); border-color: var(--line-strong); }
.search-trigger svg { width: 12px; height: 12px; }
.keycap, kbd { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 3px; background: #202023; color: var(--muted); font-family: inherit; font-size: 9px; line-height: 1; }
.search-trigger kbd { margin-left: 12px; height: 17px; min-width: 17px; border-color: var(--line); font-size: 9px; }
.world-clocks, .page-heading { display: none; }
.main { max-width: 2800px; margin: 0 auto; padding: 6px 8px; }
.eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: #a4a09a; font-size: 8px; font-weight: 600; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase; }
h1 { margin: 0; color: var(--text); font-size: 24px; font-weight: 500; letter-spacing: -1px; }
.toolbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; margin: 0 0 4px; padding: 1px 2px 3px; }
.category-tabs { display: flex; align-items: center; gap: 2px; }
.tab { min-height: 26px; padding: 4px 9px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); font-size: 10px; font-weight: 500; white-space: nowrap; }
.tab:hover { background: var(--surface-raised); color: var(--text); }
.tab[aria-pressed="true"] { background: var(--surface-raised); border-color: #39393c; color: var(--text); }
.grid-controls { display: flex; align-items: center; gap: 8px; }
.grid-controls > span, .density-label { color: var(--subtle); font-size: 8px; letter-spacing: 1px; }
.density-control { display: inline-flex; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; }
.density-control button { display: flex; align-items: center; justify-content: center; min-width: 27px; min-height: 22px; padding: 1px 5px; border: 0; border-radius: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.density-control button:hover { background: var(--surface-hover); color: var(--text); }
.density-control button[aria-pressed="true"] { background: #48413a; color: #fff5e5; }
.btn, button.btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn svg { width: 13px; height: 13px; }
.btn:hover { border-color: #606064; background: var(--surface-hover); }
.btn-primary { border-color: #ca3528; background: var(--red); color: #fff7ec; }
.btn-primary:hover { border-color: #df4335; background: #ce3022; }
.btn-quiet { border-color: var(--line); color: var(--muted); }
.btn-quiet:hover { color: var(--text); }

/* The wall always fits the free box: the script measures that box, picks the columns and rows, and tiles shrink so the page never scrolls. */
.wall { --preferred-columns: 6; margin-top: var(--wall-offset, 0px); display: grid; grid-template-columns: repeat(var(--grid-columns, var(--preferred-columns)), minmax(0, 1fr)); grid-template-rows: repeat(var(--grid-rows, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); height: var(--wall-height, calc(100dvh - var(--wall-chrome) - env(safe-area-inset-bottom))); align-items: stretch; gap: 6px; }
.wall[data-size="4"] { --preferred-columns: 2; }
.wall[data-size="6"], .wall[data-size="9"] { --preferred-columns: 3; }
.wall[data-size="12"], .wall[data-size="16"] { --preferred-columns: 4; }
.wall[data-size="20"] { --preferred-columns: 5; }
/* Every wall fills the space between the toolbar and the bottom of the screen; only a single tile keeps broadcast proportions. */
.wall:is([data-count="0"], [data-count="1"]) { height: auto; grid-template-rows: none; grid-auto-rows: auto; align-items: start; }
.wall[data-count="1"] .tile-media { flex: none; width: 100%; aspect-ratio: 16 / 9; }
/* A single tile keeps broadcast proportions, so its width follows the free height rather than the page. */
.wall[data-count="1"] { max-width: min(840px, calc((var(--wall-height, 840px) - 30px) * 16 / 9 + 2px)); margin-inline: auto; }
.tile { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #323235; border-radius: var(--radius); background: var(--surface); transition: border-color .16s, box-shadow .16s; }
.tile:hover { border-color: #797069; }
.tile.listening { border-color: var(--red-bright); box-shadow: 0 0 0 1px #ef63552e; }
.tile-media { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; background: #09090b; }
.thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-host, .player-host iframe, .tile-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; }
.player-host:empty { pointer-events: none; }
.tile-media[data-status="offline"]::after, .tile-media[data-status="unknown"]::after,
#viewerStage[data-status="offline"]::after, #viewerStage[data-status="unknown"]::after {
  content: attr(data-note); position: absolute; inset: 0; display: grid; place-items: center;
  background: #0b0b0d; color: #aaa; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  pointer-events: none;
}
.preview-play { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px; border: 0; background: #0003; color: #fff; }
.preview-play > svg { width: 35px; height: 35px; padding: 9px; border: 1px solid #ffffff70; border-radius: 50%; background: #131315b8; transition: background .15s, transform .15s; }
.preview-play:hover { background: #0001; }
.preview-play:hover > svg { transform: scale(1.08); background: var(--red); border-color: #ffffffa0; }
.preview-play > span { padding: 3px 7px; border-radius: 3px; background: #151517e6; font-size: 9px; font-weight: 500; }
.player-message { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; color: var(--muted); background: #171719; text-align: center; font-size: 10px; }
.player-message > svg { width: 22px; height: 22px; color: var(--subtle); }
.player-message strong { color: #d0c9bd; font-size: 11px; font-weight: 500; }
.player-message p { max-width: 260px; margin: 0; font-size: 9px; line-height: 1.6; }
.player-message .btn { min-height: 25px; margin-top: 2px; font-size: 9px; }
.compact-flag { flex: none; font-size: 10px; line-height: 1; }
.favorite-btn[aria-pressed="true"] svg { fill: #bd6a4640; }
.stream-state { display: inline-flex; align-items: center; gap: 4px; flex: none; color: #99938e; font-size: 8px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.stream-state::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #868078; }
.stream-state[data-state="playing"] { color: #a8c5a7; }
.stream-state[data-state="playing"]::before { background: #93b58d; }
.stream-state[data-state="error"] { color: #c79f74; }
.stream-state[data-state="error"]::before { background: #c79f74; }
.stream-state[data-state="paused"] { color: #a3a1a0; }
.tile.unavailable { border-color: #373330; }
.tile-topline { display: flex; align-items: center; justify-content: space-between; min-height: 18px; padding: 2px 6px; font-size: 8px; }
.channel-number { color: var(--subtle); font-size: 8px; font-variant-numeric: tabular-nums; }
.wall-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; margin-top: 4px; color: #898580; font-size: 9px; }
.wall-footer p { margin: 0; }
.pagination { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pagination .icon-btn { width: 22px; height: 22px; border-color: var(--line); }
.pagination button svg { width: 12px; height: 12px; }
.channel-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; overflow: hidden; border: 1px solid #44413c; border-radius: 5px; background: #e9e1d3; color: #232323; font-size: 10px; font-weight: 800; letter-spacing: -.4px; text-align: center; }
.channel-avatar img { width: 100%; height: 100%; object-fit: contain; }
.channel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #969390; font-size: 9px; line-height: 1.2; }
.channel-meta .flag { font-size: 10px; }
.channel-meta .separator { color: #555458; }

.audio-dock { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.audio-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.audio-icon { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; flex: none; border: 1px solid #49322a; border-radius: 4px; background: #2b201d; color: var(--red-bright); }
.audio-icon svg { width: 14px; height: 14px; }
.audio-copy { min-width: 0; }
.audio-copy strong { display: block; max-width: 150px; overflow: hidden; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.audio-copy small { display: block; color: #96908a; font-size: 8px; letter-spacing: 1.1px; line-height: 1.4; }
.audio-copy > span { display: none; }
.dock-divider { width: 1px; height: 18px; margin: 0 5px; background: var(--line-strong); }
.audio-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.audio-controls .icon-btn { width: 27px; height: 27px; }
.audio-controls > .icon-btn:first-child { border: 1px solid var(--line-strong); color: var(--text); }
.volume-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.volume-control input[type="range"] { width: 92px; height: 3px; margin: 0; accent-color: var(--text); cursor: pointer; }
.volume-control output { width: 26px; text-align: right; }
.audio-tip { color: #858180; font-size: 7px; line-height: 1.5; letter-spacing: .7px; white-space: nowrap; }
.audio-tip br { display: none; }
.audio-tip kbd { height: 16px; min-width: 16px; margin: 0 3px; padding: 0 3px; font-size: 8px; }

/* Search is a station directory, with room for clear availability labels. */
dialog { padding: 0; color: var(--text); background: #1a1a1d; border: 1px solid #424044; border-radius: 10px; box-shadow: 0 24px 90px #0009; }
dialog::backdrop { background: #050507bb; backdrop-filter: blur(4px); }
/* The dialog is the frame, not a scroller: heading, search and filters stay pinned and only the list scrolls.
   A fixed height, not a cap: a search that shortens the list then shortens the list inside the frame, instead
   of shrinking the dialog and letting the auto margins slide the search field down the screen under the
   cursor. display:flex belongs on [open] alone, or the closed dialog would outrank the UA's display:none. */
.directory { width: min(720px, calc(100vw - 40px)); height: min(760px, calc(100dvh - 48px)); flex-direction: column; overflow: hidden; }
.directory[open] { display: flex; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 25px 18px; }
.dialog-heading h2 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.6px; }
.dialog-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.dialog-heading .icon-btn { margin: -5px -7px 0 0; }
.search-field { display: flex; align-items: center; gap: 11px; margin: 0 25px; padding: 0 13px; border: 1px solid #464448; border-radius: 6px; background: #121214; }
.search-field:focus-within { border-color: #b3a28f; }
.search-field svg { width: 17px; height: 17px; color: var(--muted); }
.search-field input { width: 100%; min-width: 0; height: 43px; padding: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 12px; }
.search-field input::placeholder { color: #777477; }
.search-field input::-webkit-search-cancel-button { cursor: pointer; }
.directory-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 13px 25px 17px; border-bottom: 1px solid var(--line); }
.directory-filters select { max-width: 100%; min-height: 32px; padding: 5px 25px 5px 10px; border: 1px solid #39393e; border-radius: 5px; background: #222226; color: var(--muted); font-size: 10px; }
.directory-filters > span, .directory-filters > small { flex: 1 0 100%; margin-left: 0; text-align: right; color: var(--subtle); font-size: 10px; }
/* The list takes the space the dialog has left and fades its bottom edge, so a part-row reads as "more below"
   rather than as a row sliced by the frame. */
.directory-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 13px 13px; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.directory-row { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-bottom: 1px solid var(--line); }
.directory-row:last-child { border-bottom: 0; }
.directory-row .channel-avatar { width: 36px; height: 36px; }
.directory-info { flex: 1; min-width: 0; }
.directory-info strong, .directory-info h3 { display: block; margin: 0; color: var(--text); font-size: 12px; font-weight: 500; }
.directory-info p, .directory-info small, .directory-info > span { display: block; margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.directory-info .channel-meta { margin-top: 5px; }
.directory-actions { display: flex; align-items: center; gap: 8px; }
.directory-actions .btn { min-height: 30px; padding: 5px 9px; font-size: 10px; }
.directory-actions .icon-btn { width: 30px; height: 30px; }
.empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 28px 24px; border: 1px dashed #39373a; border-radius: 8px; color: var(--muted); text-align: center; }
.empty-state svg { width: 28px; height: 28px; color: var(--subtle); }
.empty-state h2, .empty-state h3 { margin: 0; color: var(--text); font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.empty-state p { max-width: 370px; margin: 0; font-size: 12px; }
.directory-list .empty-state { min-height: 220px; margin: 12px; border: 0; }
.source-note { margin: 24px 0 0; color: #777477; font-size: 9px; line-height: 1.6; }
.shortcuts > p { margin: 0 25px 12px; color: var(--muted); font-size: 11px; }
.shortcuts { width: min(420px, calc(100vw - 40px)); padding-bottom: 20px; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 25px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row kbd { min-width: 25px; height: 24px; color: var(--text); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: calc(100vw - 40px); padding: 10px 16px; transform: translateX(-50%); border: 1px solid #625349; border-radius: 6px; background: #302a25; color: var(--text); box-shadow: 0 5px 24px #0005; font-size: 12px; text-align: center; }


/* Enlarged viewing keeps every control outside the broadcaster's video. */
.viewer { width: min(1050px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; border-color: #55504b; border-radius: 7px; background: #111113; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: #030305d9; backdrop-filter: blur(8px); }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; min-height: 57px; padding: 9px 13px 9px 16px; border-bottom: 1px solid #363235; background: #1b191c; }
.viewer-header > div:first-child { min-width: 0; }
.viewer-header small { display: block; overflow: hidden; color: #aaa098; font-size: 8px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.viewer-header h2 { overflow: hidden; margin: 2px 0 0; color: var(--text); font-size: 17px; font-weight: 550; letter-spacing: -.4px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.viewer-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; flex: none; }
.viewer-tools .icon-btn { width: 32px; height: 32px; }
.viewer-tools .btn { min-height: 29px; margin: 0 3px; }
.viewer-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-width: 200px; min-height: 0; flex: 1 1 auto; background: #050506; }
.viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; min-height: 31px; padding: 6px 16px; border-top: 1px solid var(--line); background: #19181a; color: var(--muted); font-size: 9px; }
.viewer-footer a { display: inline-flex; align-items: center; gap: 5px; flex: none; color: #c9b4a4; }
.viewer-footer a svg { width: 11px; height: 11px; }
.viewer-footer a:hover { color: var(--text); text-decoration: underline; }
.viewer[data-size="wide"] { width: calc(100vw - 32px); height: calc(100dvh - 32px); max-height: none; }
.viewer[data-size="wide"] .viewer-stage { flex: 1 1 auto; aspect-ratio: auto; }
.viewer:fullscreen { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
.viewer:fullscreen .viewer-stage { flex: 1 1 auto; aspect-ratio: auto; }
.viewer-stage:fullscreen { aspect-ratio: auto; background: #000; }
.source-note { display: none; }

body.cinema { --wall-chrome: 58px; }
body.cinema .ticker, body.cinema .topbar { display: none; }
body.cinema .workspace { margin-left: 0; }
body.cinema .audio-dock { left: 0; }
body.cinema .main { max-width: none; }

/* A focused monitor: collection identity, clear source types, and visible recovery. */
.view-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.view-identity h1 { font-size:18px; font-weight:620; letter-spacing:-.5px; line-height:1.25; }
.view-identity p { margin:2px 0 0; color:var(--muted); font-size:10px; line-height:1.2; }
.view-tag { padding:3px 6px; border:1px solid #47403a; border-radius:3px; color:#c1b6a8; font:8px/1.2 "SFMono-Regular",Consolas,monospace; letter-spacing:.8px; }
.utc-clock { margin-right:10px; color:#bbb1a6; font:10px/1.5 "SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.nav-item small { display:block; margin-top:2px; color:#827d77; font-size:9px; font-weight:400; }
#worldNav { min-height:42px; }
.nav-item[aria-current="page"] { background:linear-gradient(90deg,#372722,#232021); }
.country-search { display:flex; align-items:center; gap:7px; padding:6px 8px; margin:0 3px 7px; border:1px solid var(--line); border-radius:4px; color:var(--subtle); background:#111113; }
.country-search svg { width:12px; height:12px; }
.country-search input { width:100%; min-width:0; outline:0; border:0; background:none; color:var(--text); font-size:10px; }
.country-search:focus-within { border-color:#756b60; }
.nav-empty { padding:10px; color:var(--muted); font-size:10px; }
.category-tabs { border:1px solid var(--line); padding:2px; border-radius:5px; background:#151517; }
.tab { display:inline-flex; align-items:center; gap:6px; }
.tab > span:last-child:not(.category-dot) { font:9px "SFMono-Regular",Consolas,monospace; color:#8a857e; }
.category-dot { width:5px; height:5px; border-radius:1px; }
.category-dot.news { background:#af6257; }.category-dot.business { background:#c3a06c; }
.tab[data-category="economy"][aria-pressed="true"] { color:#e7c591; border-color:#675237; background:#31291f; }
.tile { container-type: inline-size; }
.tile.listening { border-color:#b97054; box-shadow:0 0 0 1px #b9705433; }
.wall-health { display:flex; align-items:center; gap:6px; color:#a9a39c; font-size:10px; font-variant-numeric:tabular-nums; }
.health-dot { width:5px; height:5px; border-radius:50%; background:#8ea886; }.health-dot.warning { background:#d5aa70; }
#goLiveBtn { min-width:109px; }
#playWallBtn { border:1px solid var(--line-strong); }
.wall-footer > span { margin-right:auto; }
.wall-footer .btn-quiet { padding:2px 5px; min-height:23px; border-color:transparent; font-size:9px; }
.source-panel { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:6px; background:#181719; }
.source-panel h2 { margin:0; font-size:14px; font-weight:550; }
.source-panel p { margin:4px 0 14px; color:var(--muted); font-size:11px; }
.source-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.source-links a { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:12px; border:1px solid #3a3532; border-radius:4px; background:#201e1e; }
.source-links a:hover { border-color:#87745f; }.source-links strong { display:block; font-size:12px; font-weight:550; }
.source-links small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.source-links svg { width:15px; height:15px; align-self:center; color:#b2a28e; }
@media (max-width:1100px) { .utc-clock { display:none; } .view-tag { display:none; } .wall-health { font-size:9px; } }
@media (max-width:800px) { .view-identity { gap:7px; }.view-identity h1 { font-size:16px; }.view-identity p { font-size:9px; }.country-search input { font-size:13px; } }
@media (max-width:639px) { .wall-health { display:none; }.view-identity p { max-width:210px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.topbar-actions > #shareBtn { display:none; }.search-trigger kbd { display:none; }.source-panel { padding:13px; }.source-links { grid-template-columns:1fr; }.wall-footer { flex-wrap:wrap; }.wall-footer > span { flex-basis:100%; max-width:none !important; } }

@media (max-width: 1599px) {
  .wall[data-size="24"] { --preferred-columns: 5; }
  .audio-tip { display: none; }
}
@media (max-width: 1240px) {
  .wall[data-size="20"], .wall[data-size="24"] { --preferred-columns: 4; }
  .grid-controls > span, .density-label { display: none; }
}
@media (max-width: 1030px) {
  .wall[data-size="12"], .wall[data-size="16"], .wall[data-size="20"], .wall[data-size="24"] { --preferred-columns: 3; }
  .toolbar { gap: 5px; }
  .tab { padding-left: 7px; padding-right: 7px; font-size: 9px; }
  .density-control button { min-width: 23px; padding-left: 4px; padding-right: 4px; }
  .grid-controls { gap: 5px; }
  .grid-controls .btn { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 800px) {
  :root { --wall-chrome: 112px; }
  .nav-item { min-height: 34px; font-size: 12px; }
  .country-nav .nav-item { min-height: 31px; padding-top: 6px; padding-bottom: 6px; }
  .sidebar-label { font-size: 8px; }
  .workspace { margin-left: 0; }
  .mobile-menu { display: inline-flex; margin-left: -5px; }
  .topbar { gap: 10px; padding: 0 8px; }
  .breadcrumb { margin-right: auto; gap: 7px; }
  .topbar-actions { gap: 3px; }
  .audio-dock { left: 0; }
  .wall { height: auto; grid-template-rows: none; grid-auto-rows: auto; }
  .tile-media { aspect-ratio: 16 / 9; flex-basis: auto; }
  .viewer { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .viewer-header { gap: 10px; padding: 9px 10px; }
  .viewer-header h2 { font-size: 15px; }
  .viewer-tools { gap: 1px; }
  .viewer-tools .icon-btn { width: 29px; height: 29px; }
  .viewer-tools .btn { margin: 0; padding: 5px 7px; font-size: 9px; }
}
@media (max-width: 639px) {
  .wall, .wall[data-size] { --preferred-columns: 2; }
  .breadcrumb > span:nth-child(3), .breadcrumb-divider { display: none; }
  .search-trigger { width: 28px; justify-content: center; padding: 0; border-color: transparent; }
  .search-trigger > span:not([data-icon]), .search-trigger kbd { display: none; }
  .search-trigger svg { width: 15px; height: 15px; }
  .toolbar { gap: 6px; padding: 1px 0 5px; }
  .category-tabs { flex: 1 0 100%; }
  .tab { min-height: 29px; padding: 5px 10px; font-size: 10px; }
  .grid-controls { width: 100%; justify-content: space-between; }
  .density-control { flex: 1; }
  .density-control button { flex: 1; min-height: 26px; }
  .grid-controls .btn { min-height: 32px; padding: 5px 10px; }
  .audio-dock { gap: 7px; padding-left: 8px; padding-right: 8px; }
  .audio-identity { gap: 6px; min-width: 0; }
  .audio-copy strong { max-width: 120px; }
  .audio-icon { width: 25px; height: 25px; }
  .audio-controls { gap: 3px; }
  .dock-divider { margin: 0 2px; }
  .volume-control { gap: 0; }
  .volume-control input[type="range"] { width: 58px; }
  .volume-control output { display: none; }
  .wall-footer { gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 8px; }
  .wall-footer > span { max-width: 70%; }
  .pagination { gap: 5px; }
  /* The phone override carries the height too, or the base min() would win. It keeps the matching max-height
     as well: the browser's own cap for a modal dialog is calc(100% - 6px - 2em), which is measured against the
     document box and so takes a horizontal scrollbar off the dialog unless an author cap replaces it. */
  .directory { width: calc(100vw - 20px); height: calc(100dvh - 30px); max-height: calc(100dvh - 30px); }
  .dialog-heading { padding: 19px 17px 15px; }
  .dialog-heading h2 { font-size: 20px; }
  .search-field { margin: 0 17px; }
  .search-field input { font-size: 16px; }
  .directory-filters { padding: 11px 17px 14px; }
  .directory-filters select { font-size: 12px; }
  .directory-list { padding: 5px 8px 8px; }
  .directory-row { gap: 9px; padding: 12px 9px; }
  .directory-row .channel-avatar { width: 30px; height: 30px; font-size: 9px; }
  .directory-actions { gap: 2px; }
  .directory-actions .btn { min-height: 32px; padding: 5px 8px; }
  .directory-info strong { font-size: 11px; }
  .directory-info p, .directory-info small, .directory-info > span { font-size: 9px; }
  .viewer { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .viewer-header { position: relative; flex-wrap: wrap; gap: 8px; }
  .viewer-header > div:first-child { flex: 1 0 calc(100% - 10px); padding-right: 35px; }
  .viewer-tools { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 3px; }
  .viewer-tools .icon-btn { width: 32px; height: 32px; }
  .viewer-tools > :nth-child(2) { margin-right: auto; }
  #closeViewer { position: absolute; top: 10px; right: 10px; }
  .viewer-footer { gap: 10px; padding: 6px 10px; font-size: 8px; }
  .viewer[data-size="wide"] { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
}
@media (max-width: 425px) {
  .wall, .wall[data-size] { --preferred-columns: 1; }
  .main { padding-left: 6px; padding-right: 6px; }
  .audio-icon { display: none; }
  .audio-copy strong { max-width: 112px; }
  .viewer-tools .icon-btn { width: 29px; height: 30px; }
  .viewer-tools .btn { min-height: 30px; padding-left: 6px; padding-right: 6px; }
  .directory-filters { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Top bar: brand, collection selector and section tabs (2026-09-18 redesign). */
.topbar-lead { display: flex; align-items: center; gap: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar-lead::-webkit-scrollbar { display: none; }
.topbar .brand { min-height: 0; padding: 0; flex: none; }
.collection-btn { display: inline-flex; align-items: center; gap: 7px; flex: none; width: 140px; min-height: 30px; padding: 0 9px 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; }
.collection-btn:hover { background: var(--surface-raised); border-color: #5a5a5f; }
.collection-btn > span[data-icon] svg { width: 12px; height: 12px; color: var(--muted); }
/* The button keeps one track on every collection, so the tab strip always starts at the same x. */
.collection-btn > span[data-icon] { margin-left: auto; }
#collectionName { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.collection-flag { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; }
.collection-flag:empty { display: none; }
.collection-flag svg { width: 13px; height: 13px; color: var(--red-bright); }
.site-tabs { display: flex; align-items: center; gap: 4px; flex: none; }
.site-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px; border: 1px solid #2b2b2e; border-radius: 999px; background: #1a1a1d; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.site-tab:hover { color: var(--text); border-color: #45454a; }
.site-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
/* Selected tab: solid coral pill with a dark label and leading dot, taken one to one from design reference 3. */
.site-tab[aria-pressed="true"] { background: #F1B7C0; border-color: #F1B7C0; color: #060c19; }
.site-tab[aria-pressed="true"] .site-tab-dot { opacity: 1; }
.wall-identity { min-width: 0; }
.wall-identity h1 { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -.4px; line-height: 1.2; }
.wall-identity p { margin: 1px 0 0; color: var(--muted); font-size: 10px; line-height: 1.2; }
/* Market ticker: one continuous right-to-left loop; the track holds the list twice. */
.ticker { height: 38px; overflow: hidden; border-bottom: 1px solid var(--line); background: #131316; white-space: nowrap; font: 13px/38px "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; }
.ticker-track { display: inline-flex; width: max-content; animation: ticker-scroll var(--ticker-duration, 60s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 18px; border-right: 1px solid #222226; }
.ticker-name { color: var(--muted); font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase; }
.ticker-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-change { display: inline-flex; align-items: center; gap: 3px; color: var(--subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.ticker-item[data-direction="up"] .ticker-change { color: var(--green); }
.ticker-item[data-direction="down"] .ticker-change { color: var(--red-bright); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Collection picker dialog replaces the former sidebar country list. */
.picker { width: min(440px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 48px)); flex-direction: column; overflow: hidden; }
.picker[open] { display: flex; }
.picker .dialog-heading { padding: 20px 21px 12px; }
.picker-body { display: flex; flex-direction: column; min-height: 0; padding: 0 13px 13px; }
.picker .country-search { margin: 0 0 8px; }
.picker-fixed { display: flex; flex-direction: column; gap: 2px; }
.picker .nav-item { min-height: 32px; font-size: 11px; }
.picker .sidebar-label { margin: 12px 7px 5px; }
/* A fixed height, not a cap: filtering then shortens the list inside the dialog instead of moving the dialog. */
.picker .country-nav { min-height: 0; height: 46vh; max-height: none; overflow-y: auto; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.picker .country-nav .nav-item { min-height: 29px; padding-top: 5px; padding-bottom: 5px; }

@media (max-width: 800px) { .topbar-lead { gap: 8px; } .site-tab { padding: 0 9px; font-size: 10px; } .collection-btn { font-size: 11px; } }
@media (max-width: 639px) { .site-tab { gap: 5px; padding: 0 8px; } .site-tab-dot { display: none; } .ticker { height: 32px; font-size: 12px; line-height: 32px; } .ticker-item { height: 32px; gap: 6px; padding: 0 12px; } .ticker-name { font-size: 9.5px; } .ticker-change { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker-track { animation: none; } }
/* Review round of 2026-09-18: sticky chrome, one pause control, phone top bar, touch targets. */
.topbar { position: sticky; top: 0; z-index: 26; }
.toolbar .ticker { flex: 1 1 320px; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 6px; }
.toolbar { flex-wrap: wrap; }
.cinema-exit { position: fixed; z-index: 40; top: 10px; right: 10px; border: 1px solid var(--line-strong); background: #1a1a1df0; }
@media (max-width: 800px) { .topbar .audio-copy, .topbar .wall-health, .topbar .dock-divider { display: none; } .topbar .audio-dock { gap: 6px; padding: 0 4px; } .volume-control input[type="range"] { width: 64px; } }
:root { --wall-chrome: 112px; }
body.cinema .topbar, body.cinema .ticker { position: static; }
.ticker-note .ticker-name { color: var(--subtle); font-style: italic; }
#playWallBtn { display: none; }
@media (max-width: 639px) {
  .topbar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand collection actions" "tabs tabs tabs"; align-items: center; height: auto; min-height: 0; row-gap: 6px; padding: 7px 8px; }
  .topbar-lead { display: contents; }
  .topbar .brand { grid-area: brand; }
  .collection-btn { grid-area: collection; justify-self: start; }
  .site-tabs { grid-area: tabs; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .site-tabs::-webkit-scrollbar { display: none; }
  .site-tab { flex: 1 0 auto; justify-content: center; }
  .topbar-actions { grid-area: actions; }
  .ticker { top: 0; position: static; }
}
@media (hover: none) { .search-trigger kbd { display: none; } }
@media (pointer: coarse) and (max-width: 1030px) {
  .icon-btn { width: 36px; height: 36px; }
  .density-control button { min-width: 32px; min-height: 32px; }
  .volume-control input { height: 28px; }
}
/* Ticker refinements of 2026-09-18: exchange-strip proportions, triangle change marks, no padding on the pending note. */
.ticker-arrow { font-size: 8px; line-height: 1; }
.ticker-item[data-direction="flat"] .ticker-arrow { font-size: 11px; }
.ticker-note { border-right: 0; }
.ticker-note .ticker-name { text-transform: none; letter-spacing: .2px; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
/* The ends fade the scrolling quotes only. A mask on .ticker erased the strip's own fill, border and
   rounded ends as well, so on the yellow toolbar both ends bled into the bar. */
.toolbar .ticker { position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 24px; pointer-events: none; z-index: 1; }
.ticker::before { left: 1px; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, var(--ink, #131316), transparent); }
.ticker::after { right: 1px; border-radius: 0 6px 6px 0; background: linear-gradient(270deg, var(--ink, #131316), transparent); }
/* Reduced motion turns .ticker into the scroller, so the overlays would scroll away with the quotes and
   leave the visible edge unfaded. The strip keeps crisp ends instead; its fill, border and radius survive. */
@media (prefers-reduced-motion: reduce) { .ticker::before, .ticker::after { display: none; } }
/* Open items of the 2026-09-18 review: in-tile prompt for blocked players, compact phone screen picker, picker legend. */
.tile-media[data-status="blocked"]::after { content: attr(data-note); position: absolute; z-index: 2; top: 8px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #000000cc; color: var(--text); font-size: 9px; font-weight: 600; letter-spacing: .6px; white-space: nowrap; pointer-events: none; }
.picker-legend { margin: 0 7px 6px; color: var(--subtle); font-size: 9px; line-height: 1.4; }
@media (max-width: 639px) { .density-control [data-size]:not([data-size="6"]):not([data-size="12"]):not([data-size="24"]) { display: none; } }
/* The former wall-footer actions live in the toolbar; nothing sits under the wall. */
.toolbar-divider { width: 1px; height: 18px; margin: 0 2px; background: var(--line-strong); }
.grid-controls .btn-quiet { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; white-space: nowrap; }
.grid-controls .btn-quiet svg { width: 12px; height: 12px; }
.grid-controls > .btn-quiet[hidden] { display: none; }
@media (hover: none) { #shortcutsBtn { display: none; } }
@media (max-width: 800px) { .toolbar-divider { display: none; } }
/* Channel actions sit in the top bar as icon buttons; theme.css paints the failed-screens reconnect. */
.topbar .repair-btn[hidden] { display: none; }
/* The Live tab carries a blinking red on-air dot at all times. */
.site-tab[data-tab="live"] .site-tab-dot, .site-tab[data-tab="economy"] .site-tab-dot { background: var(--red); opacity: 1; animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .site-tab[data-tab="live"] .site-tab-dot, .site-tab[data-tab="economy"] .site-tab-dot { animation: none; } }
.site-tabs a.site-tab { text-decoration: none; }
/* Top bar never clips the section tabs. It gives the dock text up one piece at a time, at the widths where
   the row really runs out of room: the paddings below 1580 px, the channel name below 1500 px, the clock
   below 1455 px, the screen count below 1355 px, the sound label and its badge below 1200 px, where the
   control paddings shrink too. The budget is measured in the failure state, not the idle one: the
   long health string and the reconnect button appear together, and that button costs the row about 35 px.
   Below 880 px the tabs take a second row (phone grid). */
.topbar-lead { overflow: visible; }
.site-tabs { flex: none; overflow: visible; }
/* Neither piece may wrap inside the fixed-height bar, whatever the health string grows to. */
.topbar .wall-health, .topbar .utc-clock { white-space: nowrap; }
/* The paddings go first, at 1580 px, because they cost the reader nothing. Below that the row is tight
   enough that a 150 px channel name pushes the action cluster onto the About tab. */
@media (max-width: 1580px) {
  .topbar .audio-dock { gap: 6px; padding: 0 4px; }
  .topbar .volume-control input[type="range"] { width: 56px; }
  .site-tab { padding: 0 10px; }
}
@media (max-width: 1500px) {
  /* The name is shortened one step later than the paddings: above 1500 px the base 150 px cap shows the
     full channel name. */
  .topbar .audio-copy strong { max-width: 110px; }
}
@media (max-width: 1455px) {
  .topbar .utc-clock { display: none; }
}
@media (max-width: 1355px) {
  .topbar .wall-health, .topbar .dock-divider { display: none; }
}
@media (max-width: 1200px) {
  .topbar-lead { gap: 8px; }
  .site-tab { padding: 0 8px; font-size: 10.5px; gap: 5px; }
  .collection-btn { width: 128px; font-size: 11px; padding: 0 7px; }
  /* The headphones badge is decoration for the sound label, so it goes when the label goes; on its own,
     beside the mute button, it reads as a pressed control. */
  .topbar .audio-copy, .topbar .audio-dock .audio-icon { display: none; }
  .topbar .volume-control output { display: none; }
}
/* The last 35 px of the one-row range. Down here the tab strip already ends where the action cluster
   begins, so the reconnect button would push the cluster over the About tab the moment a screen fails.
   It buys its room from the keyboard-shortcuts button, which is an affordance for a key that keeps
   working (and is already dropped on touch), and only while the reconnect button is actually there. */
@media (min-width: 881px) and (max-width: 915px) {
  .topbar #repairFailedBtn:not([hidden]) ~ #shortcutsBtn { display: none; }
}
@media (max-width: 880px) {
  /* Two rows. The tabs have their own row here, so the collection button no longer sets their origin and
     goes back to its label's width. */
  .collection-btn { width: auto; max-width: 100%; }
  .topbar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand collection actions" "tabs tabs tabs"; align-items: center; height: auto; min-height: 0; row-gap: 6px; padding: 7px 8px; }
  .topbar-lead { display: contents; }
  .topbar .brand { grid-area: brand; }
  .collection-btn { grid-area: collection; justify-self: start; }
  .site-tabs { grid-area: tabs; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .site-tab { flex: 1 0 auto; justify-content: center; }
  .topbar-actions { grid-area: actions; }
}
/* Official players live in a dialog (and inside an empty wall), never under the wall. */
.sources-dialog { width: min(760px, calc(100vw - 40px)); max-height: min(720px, calc(100dvh - 80px)); overflow: auto; }
.sources-dialog .source-panel { margin: 0; padding: 0 25px 24px; border: 0; background: transparent; }
.empty-state .source-links { width: min(960px, 100%); margin-top: 10px; text-align: left; }

/* Keep embedded players large enough; dense collections scroll instead of shrinking controls. */
.wall .tile-media, .viewer-stage { min-height: 200px; }
.wall .tile { min-width: 202px; }
.tile-media[data-status="blocked"]::after { display: none; }
.thumbnail[src="/favicon.svg"] { object-fit: contain; padding: 60px; opacity: .22; }
.media-notice { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0 12px; }
#mediaConsent { max-width: min(560px, calc(100vw - 32px)); padding: 26px; }
#mediaConsent p { line-height: 1.6; }
@media (max-width: 450px) { .wall, .wall[data-size] { --preferred-columns: 1; } }

@media (max-width: 640px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-tabs { min-width: 0; }
  .collection-btn { min-width: 0; overflow: hidden; }
  .topbar #fullscreenBtn { display: none; }
}