/* /radio — Radio ChessBase: every song's music video in the order of the day, for good, with a host between
 * songs (RadioPage.js, RadioHost.js).
 *
 * Structure of this file:
 *   1. tokens + chrome — a knowing COPY of Index.cshtml's :root block and its Footer
 *      section, exactly as tactics.css, legal.css and find-opening.css do it. Index.cshtml
 *      is the source of truth for the palette. No nav bar: the station has none, only the
 *      language pills on a dark strip above the stage.
 *   2. the stage: the vertical film on a dark ground, the song's name, the controls and
 *      the rest of this round beside it (under it on a phone).
 *   3. the account line under the list, and the station's sign-in folded into it for a guest.
 *
 * The pill classes (.nav-lang-btn / .nav-flag / .nav-lang-on) are what HomeLang.js
 * generates; they have to exist here or the selector renders unstyled.
 */

/* ── 0. Fonts, served from here (2026-10-31) ──
 * Not from fonts.googleapis.com: that stylesheet blocked the first paint behind two more
 * connections (googleapis for the CSS, gstatic for the files) — ~0.8 s of the radio's mobile
 * PageSpeed FCP, measured — and it hands every listener's address to Google. The files are
 * Google's own variable woff2 (Merriweather v33, Montserrat v31, SIL OFL), latin + latin-ext
 * subsets only (the five site languages), one file per subset for every weight. The pages
 * preload the two latin files; Program.cs caches /fonts for a year, so a NEW cut of a font
 * goes in under a new file name. */
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(../fonts/merriweather-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(../fonts/merriweather-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/montserrat-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/montserrat-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── 1. Tokens + chrome (copy — see the header) ── */
:root {
    --cb-red: #B51634;
    --cb-red-hover: #d8011e;
    --cb-grad: linear-gradient(to right, #de0e1f, #992721);
    --ink: #111827;
    --body: #374151;
    --muted: #4b5563;
    --faint: #6b7280;
    --border: #e0e0e0;
    --grey: #f5f5f5;
    --cream: #f2efe6;
    --serif: "Merriweather", Georgia, serif;
    --ui: "Montserrat", "Segoe UI", sans-serif;
    --shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    /* The film's height on a desktop — the top strip's width is measured from it (.radio-top-fit). */
    --screen-h: min(calc(100vh - 44px - 50px), 960px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; color: var(--body); font: 16px/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }

/* The language pills, alone on a strip of the stage's own dark — not a nav bar. */
.radio-top { background: #111; }
.radio-top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; }
/* The ChessBase logo, small, at the strip's left (to chessbase.com — the station is ChessBase's). */
.radio-brand { display: flex; align-items: center; flex: none; }
.radio-brand img { width: 28px; height: 28px; display: block; }
.radio-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* On a desktop the stage below is a centred block narrower than .wrap (the film, the 36px gap, the side
 * column), so a strip as wide as .wrap left the logo and the pills floating outside both its edges. The
 * strip of a page with a stage is exactly as wide: the logo over the film's left edge, the pills (or
 * "All songs") over the side column's right edge. --stage-side is that page's side column. */
.radio-top-fit { --stage-side: 380px; }
.song-top-row.radio-top-fit { --stage-side: 520px; }
@media (min-width: 761px) {
    .radio-top-fit { max-width: min(1180px, calc(var(--screen-h) * 9 / 16 + 36px + var(--stage-side) + 48px)); }
}
.nav-signout {
    font: 600 12px var(--ui); color: #9ca3af; background: none;
    border: 0; border-left: 1px solid #374151; padding: 0 0 0 9px; margin-left: 6px;
    cursor: pointer; white-space: nowrap;
}
.nav-signout:hover:not(:disabled) { color: #fff; }
.nav-signout:disabled { opacity: .6; cursor: default; }

.nav-langs { display: inline-flex; align-items: center; gap: 4px; }
.nav-lang-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font: 700 11px var(--ui); letter-spacing: .04em; color: #9ca3af;
    background: #1f2937; border: 1px solid #374151; border-radius: 999px;
    padding: 3px 9px 3px 6px; cursor: pointer;
}
.nav-lang-btn:hover { color: #fff; border-color: var(--cb-red); background: #27303f; }
.nav-lang-on { color: #fff; border-color: var(--cb-red); background: #27303f; }
.nav-flag {
    width: 16px; height: 11px; border-radius: 2px; display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    opacity: .5; filter: saturate(.4);
}
.nav-lang-on .nav-flag, .nav-lang-btn:hover .nav-flag { opacity: 1; filter: none; }

footer { border-top: 1px solid #eee; padding: 26px 0 34px; margin-top: 26px; }
.foot { display: flex; flex-direction: column; gap: 12px;
        font: 600 12px var(--ui); color: var(--faint); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cb-red); }
.foot-links { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 7px; }
.foot-links a { color: var(--muted); }
.foot-legal { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; font-weight: 400; }
.foot-ai { font-style: italic; }


/* ── 2. The stage ── */
.radio { background: #111; color: #e5e7eb; }
.radio-stage {
    display: flex; gap: 36px; align-items: flex-start; justify-content: center;
    padding-top: 6px; padding-bottom: 32px;
}
/* The films are 1080×1920: as tall as the window lets them be under the language strip. */
.radio-screen {
    position: relative; flex: none;
    height: var(--screen-h);
    aspect-ratio: 9 / 16; background: #000;
    border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
/* opacity .999 keeps Chrome on Windows from handing the playing film to a hardware overlay plane, whose
 * scaler shrinks 1080 px to ~480 visibly blurry while the page text beside it stays sharp (2026-10-30;
 * a not-quite-opaque video cannot be an overlay, so Chrome scales it itself). Don't "tidy" it to 1. */
.radio-screen video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; opacity: .999; }
.radio-unmute {
    /* In the middle of the film: its top carries the song's title band. */
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font: 700 14px var(--ui); color: #fff; background: var(--cb-grad);
    border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
    box-shadow: var(--shadow);
}
.radio-unmute:hover { background: var(--cb-red-hover); }
.radio-status {
    position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center; font: 600 15px/1.5 var(--ui); color: #d1d5db;
}
.radio-status[hidden] { display: none; }

.radio-side { flex: 0 1 380px; min-width: 0; padding-top: 6px; }
.page-kicker {
    display: inline-block; font: 700 12px var(--ui); letter-spacing: .9px;
    text-transform: uppercase; color: #f87171;
}
h1.page-kicker { margin: 0; }
.radio-now { font: 700 30px/1.2 var(--serif); color: #fff; margin: 10px 0 6px; overflow-wrap: anywhere; }
/* The flag of the song's language, in front of its title (SiteLang.flagSvg). */
.radio-lang { display: inline-block; vertical-align: baseline; margin-right: .4em; }
.radio-flag {
    display: block; width: 1.1em; height: .76em; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.radio-lang-code { font: 700 .55em var(--ui); letter-spacing: .04em; color: #9ca3af; }
.radio-sub { font: 600 13px var(--ui); letter-spacing: .4px; color: #9ca3af; margin: 0 0 18px; min-height: 1.4em; }
.radio-controls { display: flex; gap: 8px; margin-bottom: 26px; }
.radio-btn {
    font: 600 16px var(--ui); color: #e5e7eb; background: #1f2937;
    border: 1px solid #374151; border-radius: 4px;
    min-width: 46px; height: 40px; padding: 0 12px; cursor: pointer;
}
.radio-btn:hover { color: #fff; border-color: var(--cb-red); background: #27303f; }
.radio-btn-wide { font-size: 13px; }
/* 🎙 Host (Premium): lit while the host talks between songs. */
.radio-btn-on { border-color: var(--cb-red); color: #fff; box-shadow: inset 0 -2px 0 var(--cb-red); }
/* 🔁 off is dimmed; on, it is lit in the station's red like a cast ♥ */
.radio-repeat { opacity: .55; display: inline-flex; align-items: center; justify-content: center; }
.radio-repeat.is-on { opacity: 1; color: #fff; background: var(--cb-red); border-color: var(--cb-red); }
.radio-repeat.is-on:hover { background: var(--cb-red-hover); border-color: var(--cb-red-hover); }
/* 🎧 Audio only (RadioAudioOnly.js): a quiet pill after the transport buttons, the 24/7 stream */
.radio-controls { flex-wrap: wrap; align-items: center; }
.radio-audio-only {
    display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px;
    font: 600 13px var(--ui); color: #e5e7eb; text-decoration: none; white-space: nowrap;
    border: 1px solid #374151; border-radius: 20px; background: transparent;
}
.radio-audio-only:hover { color: #fff; border-color: var(--cb-red); background: #1f2937; }
.radio-audio-only-sub { font-weight: 400; color: #9ca3af; }
/* ── Audio only (RadioListen.cshtml + RadioListen.js): the stream in a player of our own ── */
.listen-top-row { max-width: 560px; }
.listen-films-top { font: 600 12px var(--ui); color: #9ca3af; text-decoration: none; }
.listen-films-top:hover { color: #fff; }
.radio-listen { min-height: calc(100vh - 44px); min-height: calc(100svh - 44px); }
.listen-stage { display: flex; justify-content: center; padding-top: 34px; padding-bottom: 44px; }
.listen-card { width: 100%; max-width: 440px; text-align: center; }
.listen-head { display: flex; justify-content: center; align-items: center; gap: 10px; }
.listen-live {
    font: 700 10px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #6b7280;
    border: 1px solid #374151; border-radius: 999px; padding: 2px 8px 2px 7px;
}
.listen-live::before { content: "\25CF"; margin-right: 4px; }
.listen-live.is-on { color: #fff; border-color: var(--cb-red); background: var(--cb-red); }
.listen-play {
    display: flex; align-items: center; justify-content: center;
    width: 128px; height: 128px; margin: 30px auto 24px; padding: 0;
    border: 0; border-radius: 50%; background: var(--cb-grad); color: #fff; cursor: pointer;
    box-shadow: 0 12px 34px rgba(181, 22, 52, .35);
}
.listen-play:hover { filter: brightness(1.12); }
.listen-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.listen-play svg { width: 54px; height: 54px; }
.listen-icon-pause, .is-wanted .listen-icon-play { display: none; }
.is-wanted .listen-icon-pause { display: block; }
.listen-now { font: 700 24px/1.3 var(--serif); color: #fff; margin: 0 0 6px; overflow-wrap: anywhere; }
.listen-sub { font: 600 13px var(--ui); margin: 0 0 4px; min-height: 1.5em; }
.listen-sub a { color: #f87171; text-decoration: none; }
.listen-sub a:hover { color: #fff; }
.listen-status { font: 600 13px var(--ui); color: #fbbf24; margin: 0 0 16px; min-height: 1.5em; }
.listen-langs { display: inline-flex; gap: 6px; margin-bottom: 22px; }
.listen-lang {
    font: 700 12px var(--ui); color: #9ca3af; background: #1f2937;
    border: 1px solid #374151; border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.listen-lang:hover { color: #fff; border-color: var(--cb-red); }
.listen-lang[aria-pressed="true"] { color: #fff; border-color: var(--cb-red); background: #27303f; }
/* "Keep the screen on while it plays" (RadioListen.js: a screen wake lock while the stream plays). */
.listen-wake { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px;
               font: 600 12px var(--ui); color: #9ca3af; cursor: pointer; }
.listen-wake[hidden] { display: none; }
.listen-wake input { width: 16px; height: 16px; accent-color: var(--cb-red); margin: 0; }
.listen-note { font: 400 13px/1.6 var(--serif); color: #9ca3af; margin: 0 0 8px; }
.listen-apps { font: 400 12px var(--ui); color: #6b7280; margin: 0 0 24px; }
.listen-apps a { color: #9ca3af; }
.listen-apps a:hover { color: #fff; }
.listen-films { font: 700 13px var(--ui); color: #f87171; text-decoration: none; }
.listen-films:hover { color: #fff; }

.radio-host-note { font: 400 12px/1.5 var(--ui); color: #9ca3af; margin: -16px 0 22px; }
.radio-host-note[hidden] { display: none; }

/* The host's break, over the screen while the song in front of it has ended (RadioPage.showAir). */
.radio-air {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px;
    padding: 28px 26px; background: radial-gradient(circle at 50% 30%, rgba(181, 22, 52, .55), rgba(10, 10, 10, .94) 70%);
    overflow-y: auto; animation: radio-air-in .35s ease-out;
}
.radio-air[hidden] { display: none; }
@keyframes radio-air-in { from { opacity: 0; } to { opacity: 1; } }
.radio-air-station { font: 800 13px var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: #fff; opacity: .85; }
.radio-air-badge {
    align-self: flex-start; font: 700 11px var(--ui); letter-spacing: .9px; text-transform: uppercase;
    color: #fff; background: var(--cb-grad); border-radius: 999px; padding: 4px 11px;
}
.radio-air-badge.radio-air-host::before { content: "\25CF  "; color: #fecaca; animation: radio-air-blink 1.2s steps(2) infinite; }
.radio-air-badge.radio-air-ad { background: #f59e0b; color: #111; }
.radio-air-badge.radio-air-news { background: #2563eb; }
@keyframes radio-air-blink { 50% { opacity: .2; } }
.radio-air-text { margin: 0; font: 400 19px/1.55 var(--serif); color: #f3f4f6; }
.radio-air-link { font: 700 13px var(--ui); color: #93c5fd; text-decoration: none; }
.radio-air-link:hover { text-decoration: underline; }
.radio-air-next { margin: 8px 0 0; font: 600 13px var(--ui); color: #d1d5db; border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; }

/* The host's face (wwwroot/img/radio-host.jpg, a 9:16 crop) behind a break the host speaks — not an ad,
   which other voices read (RadioPage.showAir). The words go to the bottom, over his shirt, darkened, so
   the face stays clear; the photo drifts in slowly. The url must match RadioPage's preload. */
.radio-air.radio-air-face { background: #0a0a0a; isolation: isolate; }
.radio-air.radio-air-face::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 38%, rgba(10,10,10,.82) 56%, rgba(10,10,10,.95) 76%),
        url("/img/radio-host.jpg?v=1") 50% 30% / auto 100% no-repeat;
    /* The size, not a transform: a scaled layer would overflow the overlay, which scrolls. The photo
       is 9:16 like the screen, so auto 100% is cover. */
    animation: radio-air-drift 40s ease-out forwards;
}
.radio-air.radio-air-face > :first-child { margin-top: auto; }
.radio-air.radio-air-face .radio-air-text { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@keyframes radio-air-drift { from { background-size: 100% 100%, auto 100%; } to { background-size: 100% 100%, auto 108%; } }
@media (prefers-reduced-motion: reduce) { .radio-air.radio-air-face::before { animation: none; } }
.radio-air-ai {
    position: absolute; top: 12px; right: 12px; font: 600 10px var(--ui); letter-spacing: .6px; text-transform: uppercase;
    color: rgba(255,255,255,.8); background: rgba(0,0,0,.45); border-radius: 999px; padding: 3px 8px;
}

.radio-next-head { font: 700 12px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #9ca3af; margin: 0 0 8px; }
.radio-next-head[hidden] { display: none; }
.radio-queue {
    list-style: none; margin: 0; padding: 0;
    max-height: min(calc(100vh - 44px - 400px), 560px); min-height: 120px; overflow-y: auto;
}
.radio-q-item {
    display: flex; flex-direction: column; width: 100%; text-align: left;
    background: none; border: 0; border-top: 1px solid #262626; padding: 8px 4px; cursor: pointer; color: inherit;
}
.radio-q-item:hover { background: #1a1a1a; }
.radio-q-item:hover .radio-q-title { color: #fff; }
/* A guest's list: what comes, not a menu (RadioPage.renderQueue). */
.radio-q-still { cursor: default; }
.radio-q-still:hover { background: none; }
.radio-q-still:hover .radio-q-title { color: #d1d5db; }
.radio-q-title, .radio-q-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-q-title { font: 700 14px var(--ui); color: #d1d5db; }
.radio-q-sub { font: 400 12px var(--ui); color: #9ca3af; }
/* An Up-next row with the mood's energy meter at its right (RadioPage.renderQueue). */
.radio-q-row { flex-direction: row; align-items: center; gap: 10px; }
.radio-q-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The song's station tags under the opening's line; the sub line gives up its gap to them. */
.radio-sub:has(+ .radio-meta:not([hidden])) { margin-bottom: 6px; }
.radio-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font: 600 12px var(--ui); letter-spacing: .3px; color: #9ca3af; margin: 0 0 18px;
}
.radio-meta[hidden] { display: none; }
.radio-meta > * + *::before { content: "\00B7"; margin-right: 8px; }
.radio-meta-mood { display: inline-flex; align-items: center; gap: 6px; }

/* The mood as an energy meter: one bar per step of the station's mood scale, lit up to the song's. */
.radio-energy { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.radio-energy i { display: block; width: 3px; border-radius: 1px; background: #374151; }
.radio-energy i.on { background: #f87171; }

footer { margin-top: 0; }

@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .radio-stage { flex-direction: column; align-items: center; gap: 18px; padding-top: 16px; }
    .radio-screen { height: auto; width: min(100%, calc((100vh - 96px) * 9 / 16)); }
    .radio-side { flex: none; width: 100%; }
    .radio-air.radio-air-face .radio-air-text { font-size: 16px; }
    .radio-now { font-size: 24px; }
    .radio-queue { max-height: none; }
}

/* ── 3. The account line, and a guest's sign-in folded into it (RadioModel.Guest) ──
 * The shared login card (_LoginCard.cshtml), dark here; Index.cshtml styles the same markup
 * light. */
.radio-account {
    margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #262626;
    font: 400 12px var(--ui); color: #9ca3af;
}
.radio-account strong { color: #e5e7eb; font-weight: 600; }
.radio-signin-open {
    font: 600 13px var(--ui); color: #e5e7eb; background: #1f2937;
    border: 1px solid #374151; border-radius: 4px; padding: 9px 14px; cursor: pointer;
}
.radio-signin-open:hover { color: #fff; border-color: var(--cb-red); background: #27303f; }
.radio-signin-open[hidden], .radio-signin[hidden] { display: none; }
/* A guest's reasons to sign in, above the folded card. */
.radio-cta { color: #d1d5db; }
.radio-cta-head { font: 700 14px var(--ui); color: #fff; margin: 0 0 8px; }
.radio-cta-list { list-style: none; margin: 0 0 14px; padding: 0; font: 400 13px/1.5 var(--serif); }
.radio-cta-list li { position: relative; padding-left: 18px; margin-bottom: 4px; }
.radio-cta-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--cb-red-hover); font: 700 13px var(--ui); }
.radio-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.radio-cta-actions[hidden] { display: none; }
.radio-cta .radio-signin-open { background: var(--cb-red); border-color: var(--cb-red); color: #fff; }
.radio-cta .radio-signin-open:hover { background: var(--cb-red-hover); border-color: var(--cb-red-hover); }
.radio-cta-create { font: 600 13px var(--ui); color: #e5e7eb; text-decoration: none; }
.radio-cta-create:hover { color: #fff; text-decoration: underline; }
.radio-cta-note { flex-basis: 100%; font: 400 12px var(--ui); color: #9ca3af; margin: 0; }
.radio-signin .login-card {
    width: 100%; max-width: 380px; padding: 20px;
    background: #171717; border: 1px solid #374151; border-radius: 8px;
}
.radio-signin .login-card h2 { font: 700 18px var(--ui); color: #fff; margin: 0 0 4px; }
.radio-signin .login-sub { font: 400 13px var(--serif); color: #9ca3af; margin: 0 0 18px; }
.radio-signin .login-card label {
    display: block; font: 600 11px var(--ui); letter-spacing: .8px; text-transform: uppercase;
    color: #9ca3af; margin: 0 0 6px;
}
.radio-signin .login-card .field { margin-bottom: 14px; }
.radio-signin .login-card input {
    width: 100%; font: 400 15px var(--ui); color: #f3f4f6; padding: 10px 12px;
    background: #1f2937; border: 1px solid #374151; border-radius: 4px;
}
.radio-signin .login-card input:focus { outline: none; border-color: var(--cb-red); box-shadow: 0 0 0 3px rgba(181, 22, 52, .3); }
.radio-signin .captcha-q { font: 700 14px var(--ui); color: #e5e7eb; margin-bottom: 6px; }
.radio-signin .login-err { display: none; font: 400 13px var(--serif); color: #fca5a5; margin-bottom: 12px; }
.radio-signin .btn-login {
    width: 100%; font: 700 15px var(--ui); color: #fff; background: var(--cb-grad);
    border: 0; border-radius: 4px; padding: 12px; cursor: pointer; box-shadow: var(--shadow);
}
.radio-signin .btn-login:hover:not(:disabled) { background: var(--cb-red-hover); }
.radio-signin .btn-login:disabled { opacity: .6; cursor: not-allowed; }
.radio-signin .login-foot { font: 400 12px var(--serif); color: #9ca3af; margin: 14px 0 0; }
.radio-signin .login-foot strong { color: #e5e7eb; }
.radio-signin .login-foot a { color: #e5e7eb; }

/* ── 4. A song's own page (RadioSong.cshtml): the film beside its lyrics ──
 * The film stays in view (sticky) while the lyrics scroll the page; each sung line that plays
 * moves carries them after it, small. And the way into it from the radio (RadioPage.js). */
.song-top-row { justify-content: space-between; }
.song-all { font: 700 12px var(--ui); letter-spacing: .4px; color: #9ca3af; text-decoration: none; }
.song-all:hover { color: #fff; }
.song-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.song-actions .song-share { font-size: 13px; padding: 8px 14px; }
.song-home { font: 800 12px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #f87171; text-decoration: none; }
.song-home:hover { color: #fff; }
.song-stage { padding-bottom: 48px; }
.song-screen { position: sticky; top: 12px; }
.song-text { flex: 0 1 520px; min-width: 0; padding-top: 6px; }
.song-title { font: 700 32px/1.2 var(--serif); color: #fff; margin: 10px 0 6px; overflow-wrap: anywhere; }
.song-sub { margin-bottom: 16px; }
.song-listen {
    display: inline-block; font: 700 14px var(--ui); color: #fff; text-decoration: none;
    background: var(--cb-grad); border-radius: 999px; padding: 9px 18px; box-shadow: var(--shadow);
}
.song-listen:hover { background: var(--cb-red-hover); }
.song-lyrics { margin-top: 22px; }
.song-part { font: 700 11px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #9ca3af; margin: 22px 0 6px; }
.song-line { font: 400 17px/1.5 var(--serif); color: #e5e7eb; margin: 0 0 3px; }
.song-moves { display: block; font: 600 12px var(--ui); color: #f87171; letter-spacing: .2px; margin: 0 0 6px; white-space: pre-wrap; }
/* The radio's way to the song playing and to share it (RadioPage.js points both). */
.radio-song-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -12px 0 18px; }
.radio-song-actions[hidden] { display: none; }
.radio-song-link { font: 600 12px var(--ui); color: #9ca3af; text-decoration: none; }
.radio-song-link:hover { color: #fff; }
.radio-share, .song-share {
    font: 600 12px var(--ui); color: #d1d5db; background: #1f2937;
    border: 1px solid #374151; border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.radio-share:hover, .song-share:hover { color: #fff; border-color: var(--cb-red); }
/* A Premium member's ⬇ MP3 / ⬇ MP4 on a song's page (RadioSong.cshtml). */
.song-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.song-dl-label { font: 800 10px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #fbbf24; }
.song-dl {
    font: 600 13px var(--ui); color: #d1d5db; background: #1f2937; text-decoration: none;
    border: 1px solid #374151; border-radius: 999px; padding: 7px 14px;
}
.song-dl:hover { color: #fff; border-color: var(--cb-red); }
.radio-q-link { text-decoration: none; }
.radio-all-songs { display: inline-block; margin-top: 10px; font: 700 12px var(--ui); letter-spacing: .4px; color: #f87171; text-decoration: none; }
.radio-all-songs:hover { color: #fff; }
/* The 24/7 audio stream's links (RadioStreamController), under the songs. */
.radio-streams { margin-top: 18px; padding-top: 12px; border-top: 1px solid #262626; }
.radio-streams-head { font: 700 14px var(--ui); color: #fff; margin: 0 0 4px; }
.radio-streams-note { font: 400 13px/1.5 var(--serif); color: #9ca3af; margin: 0 0 8px; }
.radio-streams-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.radio-streams-list li { display: flex; align-items: baseline; gap: 8px; }
.radio-stream-link { font: 700 13px var(--ui); color: #f87171; text-decoration: none; }
.radio-stream-link:hover { color: #fff; }
.radio-stream-pl { font: 400 12px var(--ui); color: #9ca3af; text-decoration: none; }
.radio-stream-pl:hover { color: #e5e7eb; text-decoration: underline; }

/* ── 5. Every song as tiles (RadioSongs.cshtml): the board still, the title, the opening ── */
.songs-page { padding-top: 22px; padding-bottom: 48px; }
.songs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 8px; }
.songs-langs { display: inline-flex; gap: 6px; }
.songs-lang {
    font: 700 11px var(--ui); letter-spacing: .04em; color: #9ca3af; background: #1f2937;
    border: 1px solid #374151; border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
.songs-lang:hover, .songs-lang-on { color: #fff; border-color: var(--cb-red); background: #27303f; }
.songs-group[hidden], .songs-grid li[hidden] { display: none; }
.songs-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 16px;
}
.songs-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.songs-tile img { width: 100%; height: auto; aspect-ratio: 1; display: block; border-radius: 6px; background: #1f2937; margin-bottom: 4px; }
.songs-tile:hover img { outline: 2px solid var(--cb-red); outline-offset: 2px; }
.songs-tile-title { font: 700 14px/1.3 var(--ui); color: #e5e7eb; }
.songs-tile:hover .songs-tile-title { color: #fff; }
.songs-tile-sub { font: 400 12px/1.4 var(--ui); color: #9ca3af; }

@media (max-width: 760px) {
    .songs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
    .song-screen { position: relative; top: 0; }
    .song-text { flex: none; width: 100%; }
    .song-title { font-size: 26px; }
}

/* ── 6. The charts: listeners' ♥ on a song (SongVotes.js) and the top ten it makes (SongCharts.cs) ──
 * The ♥ beside Share on the radio and on a song's page; the charts as a short list on the radio's
 * side (rows as picks for a listener, RadioPage.renderVotes) and on top of the songs page. */
/* Not voted yet: a light pill with a red ♡, so it stands out beside the grey Share; voted: solid red. */
.radio-vote, .song-vote {
    font: 700 12px var(--ui); color: var(--cb-red); background: #fde2e7;
    border: 1px solid #fde2e7; border-radius: 999px; padding: 4px 12px; cursor: pointer; text-decoration: none;
}
.song-actions .song-vote { font-size: 13px; padding: 8px 14px; }
.radio-vote:hover, .song-vote:hover { background: #fff; border-color: #fff; }
.radio-vote.is-voted, .song-vote.is-voted { color: #fff; background: var(--cb-red); border-color: var(--cb-red); }
.radio-vote.is-voted:hover, .song-vote.is-voted:hover { background: var(--cb-red-hover); border-color: var(--cb-red-hover); }
.radio-vote:disabled, .song-vote:disabled { opacity: .6; cursor: progress; }
.radio-charts { margin: 0 0 18px; }
.radio-charts[hidden] { display: none; }
.radio-chart { list-style: none; margin: 0; padding: 0; }
.radio-c-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; text-decoration: none;
    background: none; border: 0; border-top: 1px solid #262626; padding: 6px 4px; cursor: pointer; color: inherit;
}
.radio-c-item:hover { background: #1a1a1a; }
.radio-c-item:hover .radio-q-title { color: #fff; }
/* A guest's chart row: a list to read, not to pick from (like .radio-q-still). */
.radio-c-still { cursor: default; }
.radio-c-still:hover { background: none; }
.radio-c-still:hover .radio-q-title { color: #d1d5db; }
.radio-c-still.radio-c-now:hover .radio-q-title { color: #fff; }
.radio-c-place { flex: none; width: 1.6em; text-align: right; font: 800 15px var(--ui); color: #f87171; }
.radio-c-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-c-votes { flex: none; font: 700 12px var(--ui); color: #9ca3af; }
.radio-c-now .radio-q-title { color: #fff; }
.radio-c-now .radio-c-place::after { content: " \25B6"; font-size: 9px; vertical-align: middle; }
.song-place { font: 700 12px var(--ui); letter-spacing: .4px; color: #f87171; margin: 12px 0 0; }
.song-place a { color: inherit; }
.songs-charts { margin: 18px 0 8px; max-width: 560px; }
.songs-charts .radio-c-item { padding: 6px 4px; }
/* The charts fold (<details open>): the heading is the summary, drawn as a bar you can press —
   a framed row (like My station's) with a "Hide ▴" / "Show ▾" pill on its right, so it reads as a
   control rather than a heading with a stray triangle in front of it. */
.radio-charts-sum {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 7px 8px 7px 12px; user-select: none;
    border: 1px solid #262626; border-radius: 6px; background: #141414;
}
.radio-charts-sum::-webkit-details-marker { display: none; }
.radio-charts-sum::after {
    content: "Show \25BE"; margin-left: auto; flex: none;
    font: 700 11px var(--ui); letter-spacing: .4px; color: #d1d5db;
    border: 1px solid #374151; border-radius: 999px; padding: 3px 10px;
}
details[open] > .radio-charts-sum::after { content: "Hide \25B4"; }
.radio-charts-sum > h2 { margin: 0; }
.radio-charts-sum:hover { border-color: #374151; background: #1a1a1a; }
.radio-charts-sum:hover > h2 { color: #fff; }
.radio-charts-sum:hover::after { color: #fff; border-color: var(--cb-red); }
.radio-charts-sum:focus-visible { outline: 2px solid var(--cb-red); outline-offset: 2px; }
.radio-charts:not([open]) { margin-bottom: 10px; }
.songs-charts:not([open]) > .radio-charts-sum { margin-bottom: 0; }
.songs-charts .radio-c-thumb { flex: none; width: 40px; height: 40px; border-radius: 4px; background: #1f2937; object-fit: cover; }

/* "Radio ChessBase as an app" (RadioInstall.js): a bar fixed to the foot of a phone's screen,
   the body making room for it so the footer is never under it. */
body.radio-install-open { padding-bottom: 72px; }
.radio-install {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) 16px;
    background: #111; color: #e5e7eb; border-top: 1px solid #262626;
    box-shadow: 0 -6px 16px rgba(0,0,0,.35);
    font: 13px/1.35 var(--ui);
}
.radio-install img { flex: none; border-radius: 9px; }
.radio-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-install-text b { font-weight: 700; color: #fff; }
.radio-install-share { vertical-align: -3px; color: #60a5fa; }
.radio-install-go {
    flex: none; font: 700 14px var(--ui); color: #fff; background: var(--cb-red);
    border: 0; border-radius: 4px; padding: 9px 16px; cursor: pointer;
}
.radio-install-go:hover { background: var(--cb-red-hover); }
.radio-install-x {
    flex: none; font: 600 16px var(--ui); color: #9ca3af; background: none;
    border: 0; padding: 6px; cursor: pointer;
}

/* ── My station: the listener's languages, genres and moods (RadioStation.js) ── */
.radio-station { margin: -8px 0 22px; border: 1px solid #262626; border-radius: 6px; background: #141414; }
.radio-station > summary {
    display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none;
    font: 600 13px var(--ui); color: #d1d5db;
}
.radio-station > summary::-webkit-details-marker { display: none; }
.radio-station > summary::before { content: "\25B8"; color: #9ca3af; font-size: 11px; }
.radio-station[open] > summary::before { content: "\25BE"; }
.radio-station > summary:hover { color: #fff; }
.radio-st-title { font: 700 12px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #f87171; white-space: nowrap; }
/* the choice wraps rather than being cut: its song count at the end is the point of it */
.radio-st-sum { min-width: 0; overflow-wrap: anywhere; font-weight: 400; color: #9ca3af; }
.radio-st-body { padding: 2px 12px 12px; }
.radio-st-head { font: 700 11px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: #9ca3af; margin: 10px 0 6px; }
.radio-st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-st-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; min-height: 32px;
    font: 600 12px var(--ui); color: #d1d5db; background: #1f2937; border: 1px solid #374151; border-radius: 999px; cursor: pointer;
}
.radio-st-chip:hover:not(:disabled) { color: #fff; border-color: var(--cb-red); }
.radio-st-chip.is-on { color: #fff; background: var(--cb-red); border-color: var(--cb-red); }
.radio-st-chip:disabled { opacity: .35; cursor: default; }
.radio-st-chip .radio-flag { width: 1.3em; height: .9em; }
.radio-st-n { font-weight: 400; color: #9ca3af; font-variant-numeric: tabular-nums; }
.radio-st-chip.is-on .radio-st-n { color: #fecaca; }
.radio-st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.radio-st-foot:empty { display: none; }
.radio-st-note { margin: 0; font: 400 12px/1.5 var(--ui); color: #fbbf24; }
.radio-st-reset { font: 600 12px var(--ui); color: #9ca3af; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.radio-st-reset:hover { color: #fff; }

/* ── Playlists: "My votes" played instead of the station (RadioLists.js) ── */
.radio-lists { margin-top: -12px; }
.radio-pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.radio-pl-name { font: 700 13px var(--ui); color: #e5e7eb; }
.radio-pl-row.is-playing .radio-pl-name { color: #f87171; }
.radio-pl-n { font: 400 12px var(--ui); color: #9ca3af; font-variant-numeric: tabular-nums; }
.radio-pl-go { margin-left: auto; }
.radio-pl-note { margin: 0; font: 400 12px/1.5 var(--ui); color: #9ca3af; }