/* A listening surface fills the viewport. Artwork yields space to real controls. */
html { height:100%; overflow:hidden; background:#fff; }
html[data-theme="dark"] { background:#10263b; }
.radio-app {
  --app-bg:#f3f5f8; --app-surface:#fff; --app-ink:#08213c; --app-muted:#536579;
  --app-line:#d7dfe8; --app-soft:#e8eef5; --app-green:#087443; --app-danger:#a13026; --app-focus:#936600;
  --app-safe-top:env(safe-area-inset-top,0px); --app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px); --app-safe-left:env(safe-area-inset-left,0px);
  color-scheme:light; margin:0; color:var(--app-ink); background:var(--app-surface);
  width:100%; height:100%; height:100dvh; overflow:hidden; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
[data-theme="dark"] .radio-app {
  --app-bg:#071a2e; --app-surface:#10263b; --app-ink:#f2f6fc; --app-muted:#b7c8d9;
  --app-line:#2b435b; --app-soft:#173149; --app-green:#85ddb7; --app-danger:#ffafa4; --app-focus:#f7b718;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme]) { background:#10263b; }
  html:not([data-theme]) .radio-app {
    --app-bg:#071a2e; --app-surface:#10263b; --app-ink:#f2f6fc; --app-muted:#b7c8d9;
    --app-line:#2b435b; --app-soft:#173149; --app-green:#85ddb7; --app-danger:#ffafa4; --app-focus:#f7b718;
    color-scheme:dark;
  }
}
.radio-app p { max-width:none; }
.radio-app :focus-visible { outline:3px solid var(--app-focus); outline-offset:4px; }
.radio-app .skip { z-index:1200; }
.app-frame { width:100%; height:100%; min-width:0; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"header" "notices" "content" "dock"; background:var(--app-bg); overflow:hidden; }
.app-header { grid-area:header; }
.app-content { grid-area:content; }
.app-dock { grid-area:dock; }
.app-notice-slot { grid-area:notices; }
.app-header { background:#04172d; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(10px + var(--app-safe-top)) max(20px,var(--app-safe-right)) 10px max(20px,var(--app-safe-left)); border-bottom:1px solid #ffffff1a; color-scheme:dark; }
.app-brand { display:flex; align-items:center; gap:10px; }
.app-brand img { width:28px; height:38px; object-fit:contain; }
.app-brand-words { display:flex; flex-direction:column; font:800 20px/.98 var(--bs-display); text-transform:uppercase; letter-spacing:-.04em; }
.app-brand-words span+span { color:#f7b718; font-size:15px; margin-top:4px; }
.app-header-label { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:650; letter-spacing:.14em; color:#c6d4e3; }
.app-content { min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; overflow-x:hidden; padding:16px max(20px,var(--app-safe-right)) 16px max(20px,var(--app-safe-left)); overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--app-line) transparent; container:app-space / size; }
.app-content:focus { outline:none; }
.app-notice-slot { flex:0 0 auto; }
.app-notice-slot:empty, .app-notice-slot:not(:has(.pwa-notice:not([hidden]))) { display:none; }
.app-panel { max-width:680px; width:100%; margin:0 auto; min-width:0; flex-shrink:0; }
.app-panel:focus-visible { outline-offset:-3px; border-radius:8px; }
.app-listen { flex:1 1 0; min-height:0; max-width:560px; display:grid; grid-template-areas:"signal" "art" "track" "playback" "volume" "message"; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto auto auto; align-items:center; justify-items:center; gap:10px; text-align:center; }
.app-signal-row { grid-area:signal; display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:24px; margin:0; }
.app-signal-row .status { font-size:.8125rem; color:var(--app-muted); text-align:left; }
.app-signal-row .status[data-state="online"] { color:var(--app-green); }
.app-signal-row .status:is([data-state="offline"],[data-state="error"]) { color:var(--app-danger); }
.app-signal-row .status[data-state="degraded"] { color:var(--app-ink); }
.app-timer-chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; min-height:44px; min-width:72px; padding:6px 10px; border:1px solid var(--app-line); border-radius:12px; color:var(--app-ink); background:var(--app-surface); font:650 .8125rem/1.3 var(--bs-body); font-variant-numeric:tabular-nums; cursor:pointer; }
.app-timer-chip:hover { background:var(--app-soft); }
.app-artwork-stage { grid-area:art; width:100%; height:100%; min-width:0; min-height:0; container-type:size; display:grid; place-items:center; }
.app-artwork { width:min(100cqw,100cqh,420px); aspect-ratio:1; background:radial-gradient(ellipse at 75% 12%,#173958 0,transparent 65%),#04172d; border-radius:clamp(14px,5cqh,28px); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:0 12px 28px #04172d1a; border:1px solid #ffffff16; }
.app-artwork-ring { position:absolute; width:122%; aspect-ratio:1; border:1px solid #ffffff0d; border-radius:50%; right:-51%; top:-33%; box-shadow:0 0 0 26px #ffffff02,0 0 0 53px #ffffff02; }
.app-artwork img { width:44%; height:auto; max-height:63%; object-fit:contain; position:relative; }
.app-artwork-caption { font-size:clamp(6px,2.4cqh,9px); letter-spacing:.15em; font-weight:650; color:#c4d1df; margin-top:5cqh; position:relative; }
.app-track { grid-area:track; margin:0; width:100%; min-width:0; text-align:left; }
.app-overline { font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--app-muted); margin:0 0 10px; }
.app-track h2 { font-size:clamp(1.25rem,4.8vw,1.65rem); letter-spacing:-.035em; line-height:1.3; margin:0; overflow-wrap:anywhere; text-wrap:balance; }
.app-track-artist { font-size:.9375rem; line-height:1.5; color:var(--app-muted); margin:5px 0 0; overflow-wrap:anywhere; }
.app-track-title-row { display:flex; align-items:center; gap:4px; min-width:0; }
.app-track-title-row h2 { flex:1; min-width:0; }
.app-track-info { width:44px; height:44px; flex-shrink:0; border:1px solid transparent; border-radius:50%; display:grid; place-items:center; padding:0; color:var(--app-muted); background:transparent; }
.app-track-info:hover { color:var(--app-ink); background:var(--app-soft); }
.app-track-dialog-ready .app-track h2, .app-track-dialog-ready .app-track-artist { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2; }
.app-track-dialog-ready .app-track-artist { -webkit-line-clamp:1; }
.app-track-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px - var(--app-safe-top) - var(--app-safe-bottom)); padding:24px; border:1px solid var(--app-line); border-radius:20px; background:var(--app-surface); color:var(--app-ink); box-shadow:0 28px 80px #0004; overflow:auto; }
.app-track-dialog::backdrop { background:#04172db3; backdrop-filter:blur(4px); }
.app-track-dialog h2 { font-size:clamp(1.2rem,4vw,1.75rem); line-height:1.4; overflow-wrap:anywhere; margin:0 0 14px; }
.app-track-dialog h2:focus { outline:none; }
.app-track-detail-artist { font-size:.9375rem; color:var(--app-muted); line-height:1.7; overflow-wrap:anywhere; margin:0 0 22px; }
.app-track-close { min-height:46px; border:0; border-radius:10px; padding:12px 18px; background:#f7b718; color:#04172d; font-size:.875rem; font-weight:700; }
.app-playback-control { grid-area:playback; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.app-transport { display:flex; align-items:center; justify-content:center; gap:28px; }
.app-play { width:80px; height:80px; border:0; border-radius:50%; background:#f7b718; color:#04172d; display:grid; place-items:center; flex-shrink:0; box-shadow:0 6px 20px #f7b71824; transition:transform .16s,background .16s; }
.app-play:hover:not(:disabled) { background:#ffca3e; }
.app-play:active:not(:disabled) { transform:scale(.97); }
.app-sound-lines { display:flex; align-items:center; gap:4px; height:27px; color:var(--app-line); }
.app-sound-lines i { display:block; height:9px; width:3px; border-radius:3px; background:currentColor; }
.app-sound-lines i:nth-child(2) { height:20px; }.app-sound-lines i:nth-child(3) { height:27px; }.app-sound-lines i:nth-child(4) { height:14px; }
.app-sound-lines:last-child { transform:scaleX(-1); }
[data-playback="playing"] .app-sound-lines { color:var(--app-green); }
[data-playback="playing"] .app-sound-lines i { animation:app-listening 1s ease-in-out infinite alternate; }
[data-playback="playing"] .app-sound-lines i:nth-child(2) { animation-delay:-.35s; }
[data-playback="playing"] .app-sound-lines i:nth-child(3) { animation-delay:-.7s; }
[data-playback="playing"] .app-sound-lines i:nth-child(4) { animation-delay:-.15s; }
@keyframes app-listening { to { transform:scaleY(.45); } }
.app-play-label { font-size:.875rem; font-weight:650; margin:0; line-height:1.5; }
.app-volume { grid-area:volume; display:flex; align-items:center; gap:8px; width:100%; max-width:320px; margin:0; min-height:44px; color:var(--app-muted); }
.app-volume input { display:block; width:100%; min-width:0; accent-color:var(--app-ink); cursor:pointer; height:44px; flex:1; }
.app-mute { padding:0; display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; background:transparent; color:inherit; border:1px solid transparent; border-radius:12px; position:relative; }
.app-mute[data-muted="true"] { color:var(--app-danger); background:var(--app-soft); }
.app-mute[data-muted="true"]::after { content:""; position:absolute; width:24px; height:2px; background:currentColor; transform:rotate(-45deg); box-shadow:0 1px var(--app-bg); }
.app-volume-high { margin-left:8px; opacity:.7; }
.app-volume-device-hint { flex:1; margin:0; font-size:.8125rem; line-height:1.5; text-align:left; }
.app-player-message { grid-area:message; font-size:.8125rem; line-height:1.5; color:var(--app-muted); margin:0; overflow-wrap:anywhere; }
.app-player-message.error { color:var(--app-danger); }
/* The transport already announces playback. Keep the live message for errors
   and connection changes without repeating the same sentence on screen. */
:is([data-playback="idle"],[data-playback="playing"]) .app-player-message:not(.error) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.app-settings {padding:14px 0 6px}
.app-settings h2 {font-size:clamp(1.6rem,6vw,2rem);line-height:1.2;margin-bottom:14px}
.app-panel-intro {font-size:.88rem;color:var(--app-muted);margin:0 0 26px}
.app-timer-card {padding:28px 24px 24px;border:1px solid var(--app-line);border-radius:22px;background:var(--app-surface);text-align:center}
.app-timer-symbol {width:100px;height:100px;display:grid;place-items:center;margin:0 auto 22px;border-radius:50%;background:var(--app-soft);color:var(--app-ink)}
.app-timer-status {font:800 1.15rem/1.5 var(--bs-display);font-variant-numeric:tabular-nums;margin:0 0 25px;overflow-wrap:anywhere}
.app-timer-card label {display:block;text-align:left;font-size:.78rem;font-weight:700;margin:0 0 8px}
.app-timer-card select {display:block;width:100%;min-height:50px;padding:10px 12px;border:1px solid var(--app-line);background:var(--app-bg);color:var(--app-ink);border-radius:10px;font-size:.88rem}
.app-timer-card p:last-child {font-size:.73rem;color:var(--app-muted);line-height:1.7;text-align:left;margin:14px 0 0}
.app-fine-print {font-size:.73rem;line-height:1.75;color:var(--app-muted);margin:20px 0 0;overflow-wrap:anywhere}
.app-option-group {border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface);overflow:hidden}
.app-option {display:flex;align-items:center;gap:13px;padding:18px;width:100%;border:0;background:transparent;color:var(--app-ink);text-align:left;min-height:82px}
.app-option+.app-option {border-top:1px solid var(--app-line)}
.app-option>span:nth-child(2) {flex:1;min-width:0}
.app-option strong {display:block;font-size:.85rem;line-height:1.45}
.app-option small {display:block;font-size:.72rem;color:var(--app-muted);margin-top:3px;line-height:1.6}
.app-option-icon {color:var(--app-ink);display:grid;place-items:center;flex-shrink:0;width:35px}
.app-option:hover {background:var(--app-soft)}
.app-option:focus-visible {outline-offset:-5px}
.app-share-status:empty {display:none}
.app-share-status,.app-install-status {padding:0 18px;margin:0 0 16px;font-size:.72rem;color:var(--app-muted)}
.app-share-fallback {display:block;width:calc(100% - 36px);margin:0 18px 18px;border:1px solid var(--app-line);padding:10px;color:var(--app-ink);background:var(--app-bg);border-radius:8px;font-size:.8rem}
.app-help-group {margin:27px 0 20px}
.app-help-group h3 {font-size:.85rem;font-weight:700;letter-spacing:0;margin-bottom:12px}
.app-help-group details {border-bottom:1px solid var(--app-line)}
.app-help-group summary {padding:15px 4px;cursor:pointer;font-size:.8rem;font-weight:600;min-height:48px}
.app-help-group details p {color:var(--app-muted);font-size:.78rem;line-height:1.8;margin:0 4px 18px}
.app-links {display:flex;flex-direction:column;gap:4px}
.app-links a {font-size:.78rem;min-height:44px;display:flex;gap:10px;align-items:center;text-decoration:none}
.app-links a:hover {text-decoration:underline}
.app-links svg {margin-left:auto}
.app-about {border-top:1px solid var(--app-line);padding-top:20px}
.app-about strong {display:block;font-size:.78rem;color:var(--app-ink);margin-bottom:5px}
/* Dock is a grid row, never a floating layer over the player. */
.app-dock { background:var(--app-surface); border-top:1px solid var(--app-line); padding:0 var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left); min-width:0; min-height:0; }
.app-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px 12px; gap:8px; }
.app-tab { position:relative; border:0; background:transparent; color:var(--app-muted); font-size:.75rem; font-weight:650; line-height:1.4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 4px; border-radius:12px; min-height:60px; min-width:0; }
.app-tab[aria-current="page"] { background:var(--app-soft); color:var(--app-ink); }
.app-tab[aria-current="page"]::before { content:""; position:absolute; top:0; height:3px; width:22px; border-radius:2px; background:#f7b718; }
.app-tab:hover { color:var(--app-ink); background:var(--app-soft); }
.app-tab:focus-visible { outline-offset:-3px; }
.app-tab span { max-width:100%; overflow-wrap:anywhere; }
.app-mini { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--app-line); margin:0 20px; padding:10px 0; color:var(--app-ink); }
.app-mini-copy { flex:1; min-width:0; }
.app-mini-copy strong { display:block; font-size:.8125rem; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-mini-copy span { display:block; font-size:.75rem; line-height:1.5; color:var(--app-muted); overflow-wrap:anywhere; }
.app-mini-play { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:#f7b718; color:#04172d; flex-shrink:0; }
/* Responsive controls use the content area AFTER chrome, safe areas and dock. */
@container app-space (max-height:550px) {
  .app-listen { gap:8px; }
  .app-play { width:68px; height:68px; }
  .app-play svg { width:32px; height:32px; }
  .app-track h2 { font-size:1.25rem; }
  .app-track-artist { font-size:.875rem; }
}
@container app-space (max-height:400px) {
  .app-listen { gap:6px; }
  .app-play { width:56px; height:56px; }
  .app-play svg { width:28px; height:28px; }
  .app-playback-control { gap:4px; }
  .app-play-label,.app-signal-row .status,.app-player-message { font-size:.75rem; }
  .app-track h2 { font-size:1.125rem; }
  .app-track-artist { font-size:.8125rem; }
  .app-transport { gap:20px; }
}
@media (max-width:360px) {
  .app-header { padding-left:max(16px,var(--app-safe-left)); padding-right:max(16px,var(--app-safe-right)); gap:8px; }
  .app-header-label { font-size:9px; gap:5px; letter-spacing:.1em; }
  .app-content { padding-inline:max(16px,var(--app-safe-left)) max(16px,var(--app-safe-right)); }
  .app-tab { font-size:.6875rem; }
  .app-tabs { padding-inline:8px; gap:4px; }
}
/* Landscape keeps controls next to the cover; navigation becomes a side rail. */
@media (min-width:500px) and (orientation:landscape) {
  .app-frame { grid-template-columns:calc(88px + var(--app-safe-left)) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"header header" "notices notices" "dock content"; }
  .app-header { grid-area:header; }
  .app-content { grid-area:content; padding:20px max(24px,var(--app-safe-right)) max(20px,var(--app-safe-bottom)) 24px; }
  .app-dock { grid-area:dock; display:flex; flex-direction:column; justify-content:space-between; border-top:0; border-right:1px solid var(--app-line); padding:0 0 var(--app-safe-bottom) var(--app-safe-left); }
  .app-dock nav { order:-1; padding-top:8px; flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
  .app-tabs { grid-template-columns:minmax(0,1fr); padding:6px; gap:6px; }
  .app-tab { min-height:64px; padding:8px 2px; font-size:.6875rem; }
  .app-tab[aria-current="page"]::before { left:0; top:calc(50% - 11px); width:3px; height:22px; }
  .app-mini { margin:0; padding:10px 0; border-bottom:0; border-top:1px solid var(--app-line); justify-content:center; }
  .app-mini .app-mini-art { display:none; }
  .app-mini-copy { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-listen { max-width:1200px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"signal track" "art playback" "art volume" "art message"; gap:12px 32px; text-align:left; }
  .app-artwork-stage { align-self:stretch; }
  .app-track h2 { font-size:clamp(1.25rem,2.5vw,2rem); }
  .app-track-artist { font-size:.9375rem; }
  .app-playback-control { align-self:center; }
  .app-volume,.app-player-message { justify-self:center; }
  .app-player-message { text-align:center; }
  .app-settings { max-width:680px; padding-block:6px; }
}
@media (min-width:500px) and (orientation:landscape) and (max-height:540px) {
  .app-frame { grid-template-columns:calc(78px + var(--app-safe-left)) minmax(0,1fr); }
  .app-header { padding-top:calc(7px + var(--app-safe-top)); padding-bottom:7px; }
  .app-brand img { width:24px; height:32px; }
  .app-brand-words { font-size:18px; }.app-brand-words span+span { font-size:13px; margin-top:3px; }
  .app-content { padding:10px max(16px,var(--app-safe-right)) max(10px,var(--app-safe-bottom)) 16px; }
  .app-dock nav { padding-top:2px; }
  .app-tabs { padding:4px; gap:4px; }
  .app-tab { min-height:52px; padding:5px 1px; font-size:.625rem; gap:3px; }
  .app-tab svg { width:21px; height:21px; }
  .app-mini { padding:6px 0; }
  .app-listen { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:6px 18px; }
  .app-track h2 { font-size:1.125rem; }
  .app-track-artist { font-size:.8125rem; line-height:1.4; margin-top:3px; }
  .app-timer-chip { min-width:60px; padding-inline:6px; font-size:.75rem; }
  .app-volume { max-width:280px; }
  .app-volume-device-hint { font-size:.75rem; }
  .app-timer-symbol { width:60px; height:60px; margin-bottom:12px; }
  .app-timer-symbol svg { width:38px; height:38px; }
  .app-timer-card { padding:20px; }
}
/* The main remains scrollable for enlarged text; the outer frame never scrolls. */
@media (prefers-reduced-motion:reduce) {
  .radio-app *, .radio-app *::before, .radio-app *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}