/* #radio page (js/public/radio.js): one quiet full screen, deliberately dark in both themes. Tokens only. */
.radio-page body{background:var(--dark);padding-bottom:0}
.rp{min-height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;gap:24px;background:var(--dark);color:var(--on-dark);
  padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.rp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rp-home{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
.rp-home .logo-word{height:22px;width:auto}
.rp-ch{display:flex;gap:4px;flex-wrap:wrap}
.rp-ch button{min-height:44px;padding:0 12px;background:none;border:0;border-bottom:2px solid transparent;color:var(--on-dark-soft);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rp-ch button:hover{color:var(--on-dark)}
.rp-ch button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.rp-main,.rp-empty{align-self:center;width:100%;max-width:880px;margin-inline:auto;display:grid;gap:28px}
.rp-main[hidden],.rp-empty[hidden]{display:none}
/* the sequencer: 16 steps, downbeats always lit; while playing a step chases along the bar (one bar at 124 BPM) */
.rp-seq{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:clamp(4px,1vw,10px)}
.rp-seq i{display:block;aspect-ratio:1;border:2px solid var(--accent);opacity:.35;border-radius:3px}
.rp-seq i.beat{background:var(--accent);opacity:.9}
.rp.on .rp-seq i{animation:rp-step 1.935s steps(1,end) infinite;animation-delay:calc(var(--i) * 1.935s / 16)}
@keyframes rp-step{0%{background:var(--accent);opacity:1}6.25%,100%{background:transparent;opacity:.35}}
.rp.on .rp-seq i.beat{animation-name:rp-beat}
@keyframes rp-beat{0%{opacity:1;transform:scale(1.08)}6.25%,100%{opacity:.9;transform:none}}
.rp-row{display:flex;align-items:center;gap:clamp(20px,4vw,40px)}
.rp-play{width:96px;height:96px;flex:0 0 96px;border-radius:var(--r-round);border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .12s}
.rp-play svg{width:30px;height:30px;fill:currentColor}
.rp-play:active:not(:disabled){transform:scale(.96)}
.rp-play:disabled{background:transparent;border:2px solid var(--on-dark-soft);color:var(--on-dark-soft);cursor:default}
.rp-play:focus-visible,.rp-ch button:focus-visible,.rp-foot a:focus-visible,.rp-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rp-now{min-width:0;display:grid;gap:6px}
.rp-reason{margin:0;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.rp-title{margin:0;font-size:clamp(32px,5.6vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:500;overflow-wrap:anywhere;text-wrap:balance}
.rp-artist{margin:0;font-size:clamp(17px,2vw,22px);color:var(--on-dark-soft)}
.rp-prog{height:2px;background:var(--on-dark-soft);opacity:.5;position:relative;overflow:hidden}
.rp-prog i{position:absolute;inset:0;background:var(--on-dark);transform-origin:0 50%;transform:scaleX(0)}
.rp.on .rp-prog{opacity:1}
.rp-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rp-next{margin:0;font-family:var(--mono);font-size:var(--fs-caption);color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.rp-vol{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft)}
.rp-vol input{width:140px;accent-color:var(--accent);--fill:var(--accent);--rest:var(--on-dark-soft);--thumb:var(--accent);--thumb-b:var(--accent);height:32px}
.rp-empty p{margin:0;max-width:52ch;color:var(--on-dark-soft);font-size:var(--fs-lead)}
.rp-empty .btn{justify-self:start}
.rp-foot{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center}
.rp-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-ui)}
.rp-foot a:hover{color:var(--on-dark)}
.rp-foot a[hidden]{display:none}
.rp-join{color:var(--accent)!important;animation:rp-in .6s ease-out both}
@keyframes rp-in{from{opacity:0}to{opacity:1}}
@media (max-width:600px){
  .rp-row{flex-direction:column;align-items:flex-start}
  .rp-play{width:88px;height:88px;flex-basis:88px}
  .rp-vol{display:none}
  .rp-seq{gap:3px}
  .rp-seq i{border-width:1.5px}
}
@media (prefers-reduced-motion:reduce){
  .rp.on .rp-seq i,.rp.on .rp-seq i.beat,.rp-join{animation:none}
}