/* CSS Radio. Colours only from CSS ReStore tokens (05_DESIGN_SYSTEM, X-485): brand band --nav-top -> --nav-bottom, waves #66c2ff,
   action blue --brand-600, text on dark #dcebff. The band melts into the body without a seam (B-102). Logical properties only (RTL). */
:root {
  --nav-top: #0f3d8f; --nav-mid: #0b2a6a; --nav-bottom: #071c48;
  --brand-500: #2a74c9; --brand-600: #1a62b4;
  --wave: #66c2ff; --wave-light: #b5fbff; --wave-glow: rgba(20, 202, 255, 0.85);
  --logo-glow: rgba(0, 176, 255, 0.55); --logo-glow-2: rgba(0, 140, 255, 0.18);
  --green: #99ca3c;
  --text-on-dark: #dcebff; --nav-text: #b9c8da;
  --bg: #f2f5f9; --surface: #ffffff; --surface-2: #f6f8fb; --border: #e0e6ee; --text: #142132; --text-2: #4b5b6e;
  --r-ctl: 6px; --r-card: 10px; --r-lg: 16px;
  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Heebo", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #071328; --surface: #0e1f3d; --surface-2: #132748; --border: #1f3a63; --text: #e6efff; --text-2: #9fb3cf; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 15px/1.5 var(--font); color: var(--text); background: var(--bg); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }

/* ---- the brand band: the existing CSS logo, the waves through it (B-026), and the party stage under it ---- */
.band { --beat: 0; position: relative; overflow: hidden; color: var(--text-on-dark); text-align: center;
  padding: calc(env(safe-area-inset-top) + 28px) 16px 36px;
  background: linear-gradient(180deg, var(--nav-top) 0%, var(--nav-mid) 45%, var(--nav-bottom) 78%, var(--bg) 100%); }
.waves { position: absolute; inset-inline: 0; top: calc(env(safe-area-inset-top) + 18px); width: 100%; height: 110px; pointer-events: none; z-index: 1; direction: ltr; }
.band-logo { position: relative; z-index: 2; height: 92px; display: grid; place-items: center; }
.band-logo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 340px; height: 200px; transform: translate(-50%, -50%) scale(calc(1 + var(--beat) * .35));
  background: radial-gradient(closest-side, var(--logo-glow), var(--logo-glow-2) 55%, transparent); opacity: calc(.75 + var(--beat) * .5); pointer-events: none; }
.css-logo { position: relative; width: min(200px, 52vw); height: auto; transform: scale(calc(1 + var(--beat) * .04));
  filter: drop-shadow(0 4px 10px rgba(0, 10, 40, .45)) drop-shadow(0 0 calc(var(--beat) * 18px) var(--wave-glow)); }

/* party lights: two soft beams that sweep while the radio plays, brighter on the beat */
.lights { position: absolute; inset: -40% -20% 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .8s; }
.lights::before, .lights::after { content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 100%, transparent 0 40deg, rgba(102, 194, 255, .22) 52deg, transparent 64deg 120deg, rgba(153, 202, 60, .16) 132deg, transparent 144deg 216deg, rgba(181, 251, 255, .18) 228deg, transparent 240deg 300deg, rgba(102, 194, 255, .2) 312deg, transparent 324deg);
  animation: sweep 9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.lights::after { animation-duration: 13s; animation-direction: alternate-reverse; filter: blur(6px); }
body.is-playing .lights { opacity: calc(.3 + var(--beat) * .6); transition: opacity .12s; }
@keyframes sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }

.stage { position: relative; z-index: 2; margin-top: 14px; display: grid; justify-items: center; gap: 10px; }
.speaker { width: 132px; height: 132px; overflow: visible; filter: drop-shadow(0 10px 22px rgba(0, 8, 30, .55)); }
.speaker .rim { fill: #06132f; stroke: #2a4f86; stroke-width: 3; }
.speaker .ring3 { fill: none; stroke: var(--wave); stroke-width: 2; opacity: calc(.15 + var(--beat) * .85);
  transform: scale(calc(1 + var(--beat) * .1)); transform-origin: 100px 100px; filter: drop-shadow(0 0 6px var(--wave-glow)); }
.speaker .cone-group { transform: scale(calc(.96 + var(--beat) * .12)); transform-origin: 100px 100px; }
.speaker .groove { fill: none; stroke: rgba(102, 194, 255, .18); stroke-width: 1.2; }
.speaker .dust { filter: drop-shadow(0 0 calc(4px + var(--beat) * 14px) var(--wave-glow)); }
.speaker .bolt { fill: #3a5f95; }
.eq { width: min(300px, 80vw); height: 40px; display: block; direction: ltr; }

/* ---- now playing ---- */
main { max-width: 720px; margin: -6px auto 0; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); position: relative; z-index: 3; }
.now { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(7, 28, 72, .14); }
.play { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #3ea2ff, #1f6fd6); box-shadow: 0 6px 18px rgba(31, 111, 214, .45); display: grid; place-items: center; }
.play svg { width: 30px; height: 30px; fill: currentColor; grid-area: 1 / 1; }
.play .i-stop, body.is-playing .play .i-play, body.is-connecting .play .i-play { display: none; }
body.is-playing .play .i-stop, body.is-connecting .play .i-stop { display: block; }
.play:focus-visible, .station:focus-visible, .btn:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 3px; }
.spin { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--wave); display: none; animation: spin 0.9s linear infinite; }
body.is-connecting .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.now-text { min-width: 0; }
.now-name { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-status { color: var(--text-2); font-size: 14px; }
.now-status.is-error { color: #c0302f; }

.list-title { font-size: 16px; font-weight: 600; margin: 24px 4px 10px; color: var(--text-2); }
.stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.station { width: 100%; text-align: start; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-card); cursor: pointer; font: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: transform .12s, box-shadow .12s; }
.station:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(7, 28, 72, .12); }
.station b { font-weight: 600; font-size: 16px; }
.station small { color: var(--text-2); font-size: 13px; }
.station[aria-current="true"] { color: #fff; border-color: transparent; background: linear-gradient(180deg, #3ea2ff, #1f6fd6); box-shadow: 0 6px 18px rgba(31, 111, 214, .35); }
.station[aria-current="true"] small { color: #dcebff; }

.install { margin-top: 24px; display: grid; justify-items: center; gap: 8px; }
.btn { height: 40px; padding: 0 20px; border-radius: var(--r-ctl); border: 0; font: 600 15px var(--font); color: #fff; background: var(--brand-600); cursor: pointer; }
.hint { margin: 0; color: var(--text-2); font-size: 14px; text-align: center; }
.foot { margin-top: 28px; text-align: center; color: var(--text-2); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .lights::before, .lights::after, .spin { animation: none; } }
.install .list-title { margin-top: 0; }
.install-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn[hidden], .install[hidden] { display: none; }

/* volume (hidden on iPhone: the phone's buttons own the volume there) */
.vol { direction: ltr; margin-inline-start: auto; display: flex; align-items: center; gap: 6px; color: var(--text-2); flex: none; }
.vol svg { width: 22px; height: 22px; fill: currentColor; }
.vol .vol-wave { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vol input { width: 96px; accent-color: var(--brand-500); cursor: pointer; }
.vol[hidden] { display: none; }
@media (max-width: 420px) { .now { flex-wrap: wrap; } .vol { width: 100%; margin: 4px 0 0; } .vol input { flex: 1; width: auto; } }

/* the install pill at the top and the QR for computers */
.install-pill { position: absolute; z-index: 4; inset-inline-end: 16px; top: calc(env(safe-area-inset-top) + 14px); padding: 6px 14px; border-radius: 999px;
  font: 600 14px var(--font); color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border: 1px solid rgba(181, 251, 255, .35); backdrop-filter: blur(6px); }
.install-pill:hover { background: rgba(255, 255, 255, .2); }
.install-pill[hidden] { display: none; }
.install { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.qr { margin: 8px 0 0; display: grid; justify-items: center; gap: 6px; }
.qr img { border-radius: var(--r-card); background: #fff; padding: 6px; }
.qr figcaption { font-size: 13px; color: var(--text-2); }
.qr[hidden] { display: none; }

/* the privacy page */
.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; line-height: 1.7; }
.doc h1 { font-size: 24px; } .doc h2 { font-size: 16px; margin-top: 24px; } .doc a { color: var(--brand-500); }