/* Radio: playback and conversation share one continuous surface. */
.wallpaper { position:absolute; inset:0; z-index:-2; background:url('./assets/radio-variation-v3.webp') center / cover no-repeat; }
.wallpaper::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(244,250,254,0) 13%,rgba(244,250,254,.15) 29%,rgba(244,250,254,.84) 52%,rgba(244,250,254,.86) 85%); }
.session { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:9%; margin:0; padding-bottom:56px; }
.listen { display:contents; }
.intro { grid-column:1 / -1; padding:30px 0 48px 34%; min-height:286px; border-bottom:1px solid var(--line); }
.intro .eyebrow { display:flex; align-items:center; gap:10px; font-size:9px; }
.station-dot { width:5px; height:5px; background:var(--blue); border-radius:50%; box-shadow:0 0 0 4px rgba(33,108,186,.1); }
h1 { font:400 clamp(34px,3.9vw,58px)/1.32 var(--art); letter-spacing:-1.6px; margin:18px 0; }
h1 br { display:none; }
h1 > span { display:block; white-space:nowrap; }
h1 .signature { font-size:.42em; letter-spacing:.2px; margin-bottom:7px; }
.intro-note { margin:0; font-size:12px; letter-spacing:2px; }
.player { min-width:0; padding:32px 0 0; scroll-margin-top:24px; }
.broadcast-line { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.badge { font:600 10px/1.5 var(--mono); letter-spacing:1.5px; display:inline-flex; align-items:center; gap:8px; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#7792a5; }
.badge.live::before { background:var(--ok); box-shadow:0 0 0 3px rgba(38,112,87,.1); }
.update { font-size:10px; color:var(--muted); }
.now-playing { padding:28px 0 24px; min-height:132px; }
.now-playing .eyebrow { font-size:9px; }
.now-playing h2 { font:400 clamp(17px,1.7vw,25px)/1.6 var(--art); margin:8px 0 6px; overflow-wrap:anywhere; }
.now-playing > p:last-child { margin:0; color:var(--muted); font-size:12px; }
.play-row { display:flex; align-items:center; gap:22px; }
.play { flex:0 0 66px; width:66px; height:66px; display:grid; place-items:center; border:1px solid #d5eafd; border-radius:50%; background:linear-gradient(135deg,#fbfdff 4%,#ceddea 22%,#fff 41%,#95bfdc 62%,#e9f7ff 83%); box-shadow:inset 0 1px 4px white,0 0 0 4px rgba(238,248,255,.8); transition:transform .18s; }
.play:hover { transform:translateY(-2px); }
.play:active { transform:scale(.96); }
.play svg { width:26px; height:26px; fill:var(--ink); }
.pause-icon,.play[aria-pressed=true] .play-icon { display:none; }
.play[aria-pressed=true] .pause-icon { display:block; }
.play-info { min-width:0; }
.play-info p { font-size:14px; margin:0; }
.play-info span { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.listeners { margin-left:auto; text-align:right; }
.listeners b { display:block; font:400 27px/1.4 var(--art); }
.listeners span { color:var(--muted); font-size:10px; }
.spectrum { height:46px; display:flex; align-items:center; gap:4px; margin:15px 0 8px; }
.spectrum i { flex:1; height:var(--h,2px); max-height:38px; background:linear-gradient(180deg,#216cba,#91c8ea); opacity:.6; }
.controls { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:10px; }
.mute { display:grid; place-items:center; background:none; border:0; padding:9px; margin-left:-9px; min-width:40px; height:40px; }
.mute svg { width:19px; height:19px; fill:var(--ink); }
.mute .sound-wave { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; }
.mute[aria-pressed=true] .sound-wave { display:none; }
input[type=range] { width:130px; max-width:34%; height:26px; accent-color:var(--blue); cursor:pointer; }
output { font:11px var(--mono); min-width:22px; }
.spectrum-toggle { background:none; border:0; padding:10px 0 10px 8px; margin-left:auto; font-size:11px; white-space:nowrap; color:var(--muted); }
.chat { display:flex; flex-direction:column; min-width:0; height:440px; padding:32px 0 0; position:relative; }
.chat::before { content:''; position:absolute; left:-10%; top:32px; bottom:0; width:1px; background:linear-gradient(var(--line),rgba(29,85,127,0)); }
.chat-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.chat-head .eyebrow { font-size:9px; }
.chat-head h2 { font:400 23px/1.5 var(--sans); letter-spacing:1.5px; margin:8px 0 0; }
.online { font:10px/1.5 var(--mono); color:var(--muted); white-space:nowrap; }
.chat-state { font-size:11px; color:var(--muted); margin:13px 0 0; padding-bottom:16px; border-bottom:1px solid var(--line); }
.message-wrap { position:relative; display:flex; flex:1; min-height:0; }
#messages { list-style:none; margin:0; padding:18px 4px 18px 0; width:100%; display:flex; flex-direction:column; gap:17px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#abcbe3 transparent; }
#messages li { max-width:94%; align-self:flex-start; }
#messages li.me { align-self:flex-end; text-align:right; }
.message-meta { font:10px/1.4 var(--mono); color:var(--muted); margin-bottom:5px; }
.message-text { font-size:13px; line-height:1.7; overflow-wrap:anywhere; white-space:pre-wrap; }
.me .message-text { color:var(--blue); }
#messages li.system { max-width:100%; align-self:center; font-size:10px; color:var(--muted); text-align:center; }
.chat-empty { position:absolute; inset:0; display:grid; place-content:center; pointer-events:none; margin:0; color:var(--muted); font:400 17px/1.9 var(--sans); text-align:center; }
.new-messages { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); border:1px solid var(--line); background:var(--paper); padding:6px 14px; font-size:11px; white-space:nowrap; }
.chat-form { display:flex; gap:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; }
.chat-form input { background:transparent; border:0; min-width:0; width:100%; padding:8px 0; color:var(--ink); font-size:12px; }
.chat-form input::placeholder { color:var(--muted); }
.chat-form button { min-height:40px; min-width:80px; flex-shrink:0; white-space:nowrap; padding:0 14px; border:0; background:var(--ink); color:white; font-size:12px; }
.chat-form button span { margin-left:8px; }
.chat-foot { display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:var(--muted); font:9px/1.6 var(--mono); }
#identity { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noscript { padding:16px; }
@media(min-width:1600px) { .intro { min-height:320px; padding-top:40px; } .session { padding-bottom:72px; } }
@media(max-width:1000px) { .intro { padding-left:20%; min-height:260px; } .session { column-gap:7%; } h1 { font-size:clamp(31px,4.4vw,44px); } .now-playing h2 { font-size:18px; } }
@media(max-width:700px) {
  .wallpaper { background-position:63% top; }
  .wallpaper::after { background:linear-gradient(180deg,rgba(244,250,254,.1),rgba(244,250,254,.85) 36%,rgba(244,250,254,.9) 78%); }
  .session { display:block; padding-bottom:36px; }
  .intro { padding:32px 0 36px; min-height:0; }
  h1 { font-size:clamp(22px,6.4vw,43px); letter-spacing:-.7px; }
  h1 .signature { font-size:.55em; }
  .intro-note { font-size:11px; letter-spacing:1px; }
  .player { padding-top:26px; }
  .now-playing { padding:24px 0; min-height:126px; }
  .now-playing h2 { font-size:18px; }
  .play { flex-basis:60px; width:60px; height:60px; }
  .play-row { gap:16px; }
  .chat { margin-top:36px; border-top:1px solid var(--line); padding-top:28px; height:460px; }
  .chat::before { content:none; }
  .chat-head h2 { font-size:21px; }
}