/* v0.5.1: artwork color remains bright; local surfaces provide text contrast. */
body.radio-page {
    --ink: #fff; --muted: #d3d3da; --surface: rgba(10,10,15,.82);
    --solid: #141419; --line: rgba(255,255,255,.24); --highlight: rgba(255,255,255,.12);
    --hotspot: rgba(0,0,0,.96); --hotspot-edge: rgba(0,0,0,.88); --text-shadow: rgba(0,0,0,.6);
    background: #000; color: var(--ink); isolation: isolate; height: auto; min-height: 100vh;
}
html[data-appearance="album"][data-artwork-tone="light"] body.radio-page {
    --ink: #15151a; --muted: #40404a; --surface: rgba(255,255,255,.86);
    --solid: #f5f5f7; --line: rgba(0,0,0,.22); --highlight: rgba(255,255,255,.7);
    --hotspot: rgba(255,255,255,.98); --hotspot-edge: rgba(255,255,255,.92); --text-shadow: transparent;
}
.album-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #000; }
.album-gradient { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.album-gradient.is-visible { opacity: 1; }
/* No blanket black veil: whites and accents retain their actual brightness. */
html[data-appearance="classic"] .album-background { visibility: hidden; }
.radio-page .appearance-control { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1rem; font-size: .75rem; color: var(--muted); }
.appearance-control label { background: var(--surface); border-radius: 8px; padding: .5rem; }
.radio-page .appearance-control select { min-height: 44px; max-width: 100%; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--solid); font: inherit; color-scheme: dark; }
html[data-appearance="album"][data-artwork-tone="light"] .appearance-control select { color-scheme: light; }
.radio-page :is(select, button, input, textarea, a, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.radio-page .next-track, .radio-page .last-played {
    padding: 1.25rem; margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: 22px;
    color: var(--ink); background: var(--solid);
    box-shadow: inset 0 1px 0 var(--highlight), 0 12px 32px rgba(0,0,0,.15);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .radio-page .next-track, .radio-page .last-played {
        background: linear-gradient(135deg, var(--highlight), transparent 55%), var(--surface);
        -webkit-backdrop-filter: blur(20px) saturate(115%);
        backdrop-filter: blur(20px) saturate(115%);
    }
}
.radio-page .now-playing { position: relative; isolation: isolate; border: 0; }
.radio-page .now-playing::before {
    content: ''; position: absolute; inset: -3.5rem -2rem; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, var(--hotspot) 0%, var(--hotspot-edge) 50%, transparent 75%);
}
.radio-page :is(.section-label, .track-album, .track-artist, .next-artist, .next-album, .history-artist, .history-album, .history-item time, .history-empty, footer, .volume-control label, #playback-message) { color: var(--muted); }
.radio-page :is(.track-title, .next-title, .history-title, .radio-listeners span, .radio-status, .radio-station-state, .radio-station) { color: var(--ink); }
.radio-page .history-list, .radio-page .history-item { border-color: var(--line); }
.radio-page .history-box { background: transparent; }
.radio-page .history-box::after { background: linear-gradient(transparent, var(--solid)); }
.radio-page :is(.track-title, .track-artist, .track-album) { text-shadow: 0 2px 12px var(--text-shadow); }
.radio-page .radio-station-state { justify-self: end; text-align: right; }
/* Small stable surfaces protect controls over mixed dark/light artwork. */
.radio-page .radio-header { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.radio-page .stream-info { padding: .5rem; border-radius: 12px; background: var(--surface); color: var(--ink); }
.radio-page .stream-reload { color: var(--ink); }
.radio-page .volume-control { padding: .5rem; border-radius: 10px; background: var(--surface); }
.radio-page input[type="range"] { accent-color: var(--ink); }
.radio-page .play-button, .radio-page .request-toggle { color: var(--ink); background: var(--solid); border-color: var(--line); }
.radio-page .play-button:hover, .radio-page .request-toggle:hover { background: var(--solid); border-color: var(--ink); }
.radio-page .request-box { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 16px; }
.radio-page .request-box label { color: var(--muted); }
.radio-page .request-box textarea, .radio-page .request-box button { background: var(--solid); color: var(--ink); border-color: var(--line); }
.radio-page .request-box textarea::placeholder { color: var(--muted); }
.radio-page :is(.cover-art, .next-art, .history-art) { background: var(--solid); color: var(--muted); }
.radio-page footer { background: var(--surface); border-color: var(--line); }
.radio-page footer a:hover { color: var(--ink); }
html[data-appearance="classic"] .now-playing::before { display: none; }
@media (max-width: 700px) {
    .radio-page .next-track { margin-top: 1rem; }
    .radio-page .now-playing::before { inset: -1rem 0; }
    .radio-page .radio-station-state { grid-column: 2; font-size: .7rem; }
    .radio-page .radio-station { grid-row: 1 / 3; }
    .radio-page .appearance-control { font-size: .7rem; }
    .radio-page .mobile-now-label { padding: .4rem .65rem; border-radius: 8px; background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { .album-gradient { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
    body.radio-page { --surface: var(--solid); }
    .radio-page .next-track, .radio-page .last-played { background: var(--solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* v0.5.2: explicit mobile cells; playback cannot occupy the source column. */
@media (max-width: 700px) {
    .radio-page .radio-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas: "station source" "playback source";
        align-items: center;
        gap: .4rem .75rem;
    }
    .radio-page .radio-header > .radio-station,
    .radio-page .radio-header > .radio-status,
    .radio-page .radio-header > .radio-station-state {
        position: static;
        inset: auto;
        transform: none;
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .radio-page .radio-header > .radio-station {
        grid-area: station;
        justify-self: start;
        text-align: left;
    }
    .radio-page .radio-header > .radio-status {
        grid-area: playback;
        justify-self: start;
        text-align: left;
    }
    .radio-page .radio-header > .radio-station-state {
        grid-area: source;
        justify-self: end;
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .35rem;
        text-align: right;
    }
    .radio-page .radio-header .radio-station-state > div {
        max-width: 100%;
        text-align: right;
    }
    .radio-page .radio-header .radio-listeners {
        position: static;
        transform: none;
        margin: 0;
        width: auto;
        white-space: normal;
    }
}

/* v0.5.3: bare labels adapt per character to the artwork behind them. */
.radio-page .stream-info,
.radio-page .volume-control,
.radio-page .appearance-control label,
.radio-page .mobile-now-label {
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.radio-page .adaptive-word { text-shadow: none; transition: none; }
.radio-page .stream-reload { text-decoration: none; }
.radio-page .stream-reload .adaptive-word { text-decoration: underline; }

/* v0.5.4: metadata and footer share unboxed, word-level adaptive text. */
.radio-page .now-playing,
.radio-page footer {
    background: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}
.radio-page .now-playing::before { display: none; }
.radio-page :is(.track-title, .track-artist, .track-album, footer a) { text-shadow: none; }
.radio-page .adaptive-word { text-shadow: none; transition: none; }

/* v0.5.5: weight changes apply only to unboxed adaptive words. */
.radio-page .adaptive-word { font-weight: 700; }