/* player.css — the landing's car radio, the docked radio and the page sheet (PLAYER_ADQ_20261024, owner
   prompt ADQ, B + C). Loaded by every landing page together with /assets/player.js. Fonts are the
   self-hosted JetBrains Mono 500 + Oswald 600 from /assets/vendor/fonts-app.css. No third-party origin.
   Layers: the dock (55) sits above the live ticker (40) and below the sheet (60); the notification toast
   (500), the loader (9999) and the age gate (10001) stay above all three. */
:root {
    --cr-teal: 47 224 208; --cr-gold: 240 192 96; --cr-pink: 255 63 164;
    --ssb-ticker-h: 0px; --ssb-dock-h: 0px; --ssb-reserve: 0px;
}

/* ---------- B1-B4: the head unit (full radio on the signup page, desktop) ---------- */
.car-radio {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
    padding: 12px; border: 1px solid #4a405c; border-radius: 10px;
    background: linear-gradient(180deg, #2a2433 0%, #14101b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 26px rgba(0, 0, 0, 0.55);
}
.cr-face {
    min-width: 0; padding: 8px 10px 6px; border-radius: 6px; background: #07140f;
    box-shadow: inset 0 0 14px rgb(var(--cr-teal) / .22), inset 0 0 0 1px rgb(var(--cr-teal) / .16);
}
.cr-lcd { display: flex; align-items: baseline; gap: 10px; min-width: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 13px; line-height: 1.3; }
.cr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: rgb(var(--cr-teal)); text-shadow: 0 0 6px rgb(var(--cr-teal) / .55); letter-spacing: .04em; }
.cr-freq { flex: 0 0 auto; color: rgb(var(--cr-gold)); text-shadow: 0 0 6px rgb(var(--cr-gold) / .45); }
.cr-dial { position: relative; height: 26px; margin-top: 6px; }
.cr-ticks { position: absolute; left: 0; right: 0; top: 0; height: 9px;
    background: repeating-linear-gradient(90deg, rgb(var(--cr-teal) / .55) 0 1px, transparent 1px 10%) left / 100% 9px no-repeat,
                repeating-linear-gradient(90deg, rgb(var(--cr-teal) / .28) 0 1px, transparent 1px 2.5%) left / 100% 5px no-repeat; }
.cr-nums { position: absolute; left: 0; right: 0; top: 12px; display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; line-height: 1; color: rgb(var(--cr-teal) / .7); }
.cr-needle { position: absolute; top: -2px; bottom: 0; width: 2px; left: 50%; margin-left: -1px;
    background-color: rgb(var(--cr-pink)); box-shadow: 0 0 6px rgb(var(--cr-pink)), 0 0 12px rgb(var(--cr-pink) / .6);
    transition: left 1.6s cubic-bezier(.45, 0, .55, 1); }
.cr-needle.jump { transition: left .5s cubic-bezier(.16, 1, .3, 1); }

.cr-keys { display: flex; gap: 8px; }
.car-radio .radio-btn, .ssb-dock .ssb-key {
    width: 42px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative;
    border: 0; border-radius: 6px; cursor: pointer; color: #2a1a00; font-size: 15px;
    background: linear-gradient(180deg, #ffd98a 0%, rgb(var(--cr-gold)) 55%, #b98a35 100%);
    box-shadow: 0 3px 0 #6e4f17, 0 5px 10px rgba(0, 0, 0, 0.45); transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; }
.car-radio .radio-btn:hover, .ssb-dock .ssb-key:hover { filter: brightness(1.12); }
.car-radio .radio-btn:active, .ssb-dock .ssb-key:active { transform: translateY(3px); box-shadow: 0 0 0 #6e4f17, 0 2px 4px rgba(0, 0, 0, 0.4); }
.car-radio .radio-btn:focus-visible, .ssb-dock .ssb-key:focus-visible, .cr-segs:focus-visible, .ssb-close:focus-visible {
    outline: 2px solid rgb(var(--cr-teal)); outline-offset: 3px; }
.car-radio .radio-btn:focus, .ssb-dock .ssb-key:focus { outline: 2px solid rgb(var(--cr-teal)); outline-offset: 3px; }
.car-radio .radio-btn:focus:not(:focus-visible), .ssb-dock .ssb-key:focus:not(:focus-visible) { outline: none; }
.ssb-key svg { width: 16px; height: 16px; fill: currentColor; }
/* TAP TO RESUME: the play key pulses after a full page load interrupted the music */
.radio-btn.resume, .ssb-key.resume { animation: crResume 1.4s ease-in-out infinite; }
@keyframes crResume { 0%, 100% { box-shadow: 0 3px 0 #6e4f17, 0 0 0 0 rgb(var(--cr-pink) / .7); } 50% { box-shadow: 0 3px 0 #6e4f17, 0 0 0 8px rgb(var(--cr-pink) / 0); } }

.cr-vol { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.cr-vol-label { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .22em; color: rgb(var(--cr-gold) / .85); }
.cr-segs { display: flex; gap: 4px; padding: 4px 2px; border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.cr-seg { width: 10px; height: 8px; border-radius: 2px; background: #3a3150; padding: 0; border: 0; display: block; }
.cr-seg.on { background: rgb(var(--cr-gold)); box-shadow: 0 0 6px rgb(var(--cr-gold) / .7); }

/* ---------- C4: the docked radio (every page except the signup page at desktop width) ---------- */
.ssb-dock {
    position: fixed; left: 0; right: 0; bottom: var(--ssb-ticker-h); z-index: 55; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, #2a2433 0%, #14101b 100%); border-top: 1px solid #4a405c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -8px 20px rgba(0, 0, 0, 0.45); }
.ssb-dock.no-ticker { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.ssb-dock[hidden] { display: none !important; }
.ssb-dock .ssb-face { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: 6px; background: #07140f;
    box-shadow: inset 0 0 12px rgb(var(--cr-teal) / .22), inset 0 0 0 1px rgb(var(--cr-teal) / .16); }
.ssb-dock .ssb-lcd { display: flex; align-items: baseline; gap: 10px; min-width: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 13px; line-height: 1.3; }
.ssb-dock .cr-vol { grid-column: auto; flex: 0 0 auto; }
.ssb-dock .ssb-short { display: none; }
@media (min-width: 901px) {
    .ssb-dock { justify-content: center; }
    .ssb-dock .ssb-face { max-width: 420px; }
    html.ssb-has-radio:not(.ssb-sheet-open) .ssb-dock { display: none; }   /* the full radio is on screen */
}
@media (max-width: 900px) {
    /* B5 + C4: phones and tablets: one compact bar, short name, no dial and no volume row, 44 px keys */
    .ssb-dock .cr-vol, .ssb-dock .cr-freq { display: none; }
    .ssb-dock .ssb-long { display: none; }
    .ssb-dock .ssb-short { display: inline; }
    .ssb-dock .ssb-key { width: 44px; height: 44px; }
    .car-radio .radio-btn { width: 44px; height: 44px; }
    .car-radio .cr-vol { display: none; }
    html.ssb-has-radio .right-column .car-radio { display: none; }   /* the dock carries it */
}
body.ssb-reserve { padding-bottom: var(--ssb-reserve) !important; }

/* ---------- C1: the sheet ---------- */
.ssb-sheet { position: fixed; left: 0; right: 0; top: 0; bottom: var(--ssb-reserve); z-index: 60;
    display: flex; flex-direction: column; background: #050505; }
.ssb-sheet[hidden] { display: none !important; }
.ssb-sheet-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; box-sizing: border-box;
    padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
    background: rgb(26 16 24); border-bottom: 1px solid rgb(var(--cr-gold) / .4); }
.ssb-sheet-title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--cr-gold)); }
.ssb-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgb(var(--cr-gold) / .5); border-radius: 22px; background: rgba(0, 0, 0, 0.4); color: rgb(var(--cr-gold)); cursor: pointer;
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.ssb-close:hover { color: rgb(var(--cr-teal)); border-color: rgb(var(--cr-teal) / .6); }
.ssb-sheet iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #050505; }
html.ssb-sheet-open, html.ssb-sheet-open body { overflow: hidden; }
/* a page shown inside the sheet keeps no player of its own (the parent's plays) */
html.ssb-framed .ssb-dock { display: none !important; }

/* B6: reduced motion: no needle drift, no glow pulse */
@media (prefers-reduced-motion: reduce) {
    .cr-needle, .cr-needle.jump { transition: none !important; }
    .radio-btn.resume, .ssb-key.resume { animation: none !important; box-shadow: 0 3px 0 #6e4f17, 0 0 0 3px rgb(var(--cr-pink) / .8); }
    .car-radio .radio-btn, .ssb-dock .ssb-key { transition: none; }
}