/* ============================================================
   RADIO — live radio in many languages
   ============================================================ */
body[data-section="radio"]{ padding-bottom:2rem; }
body[data-section="radio"]:has(.radio-player:not([hidden])){ padding-bottom:6.5rem; }
body[data-section="radio"] button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
body[data-section="radio"] svg{ display:block; }

.radio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; padding-top:2.5rem; }
.radio-title{ font-family:var(--f-display); letter-spacing:-.01em; font-weight:700; font-size:clamp(2rem,5vw,2.8rem); line-height:1.1; margin:0; color:var(--ink); }
.radio-intro{ margin:.5rem 0 0; color:var(--ink-soft); max-width:52ch; }

.radio-search{ display:flex; flex-direction:column; gap:.3rem; min-width:240px; }
.radio-search span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.radio-search input{ font-family:var(--f-body); font-size:1rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:.35rem 0; outline:0; }
.radio-search input:focus{ border-bottom-color:var(--accent); }

.radio-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2rem; }
.radio-stats .stat{ background:var(--paper); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; text-align:left; }
.radio-stats button.stat{ cursor:pointer; transition:background .15s; }
.radio-stats button.stat:hover{ background:var(--paper-2); }
.radio-stats .stat[aria-pressed="true"]{ background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent); }
.radio-stats .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem; }
.radio-stats .k i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.radio-stats .live .k i{ background:#2F8F5B; }
.radio-stats .down .k i{ background:#B4532A; }
.radio-stats .v{ font-family:var(--f-display); font-weight:600; font-size:2rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.radio-stats .live .v{ color:#2F6B4F; }
.radio-stats .down .v{ color:#9A4421; }
.radio-stats .v.small{ font-size:1.05rem; line-height:1.9rem; }
.radio-chips{ display:flex; gap:.5rem 1.4rem; flex-wrap:wrap; margin-top:1.8rem; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
nav.radio-chips button{ color:var(--ink-soft); padding-bottom:.3rem; border-bottom:2px solid transparent; }
.radio-chips button:hover{ color:var(--ink); }
.radio-chips button[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.radio-chips .n{ opacity:.85; margin-left:.3rem; }

.radio-count{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1rem; }
.radio-grid{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.radio-card{ position:relative; background:var(--paper); }
.radio-card .hit{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; padding:.9rem 2.6rem .9rem .9rem; transition:background .15s; }
.radio-card .hit:hover{ background:var(--paper-2); }
.radio-card .tile{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:.02em; position:relative; }
.radio-card .tile .pl{ position:absolute; inset:0; display:grid; place-items:center; background:var(--accent); opacity:0; transition:opacity .15s; }
.radio-card .tile .pl svg{ width:16px; height:16px; fill:var(--paper); }
.radio-card .hit:hover .tile .pl, .radio-card.on .tile .pl{ opacity:1; }
.radio-card .txt{ min-width:0; }
.radio-card .nm{ font-family:var(--f-display); font-weight:600; font-size:.98rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radio-card .sub{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem; }
.radio-card.on{ background:var(--accent-soft); }
.radio-card.on .hit:hover{ background:var(--accent-soft); }
.radio-card.err .sub{ color:#9B2C2C; }
.radio-card.off .tile{ background:var(--paper-2); color:var(--ink-soft); }
.radio-card.off .nm{ color:var(--ink-soft); }
.radio-card .fav{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; opacity:.45; }
.radio-card:hover .fav, .radio-card .fav[aria-pressed="true"]{ opacity:1; }
.radio-card .fav svg, .np-fav svg{ width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:1.8; }
.radio-card .fav[aria-pressed="true"] svg{ fill:var(--accent); stroke:var(--accent); }

.radio-empty{ text-align:center; color:var(--ink-soft); padding:2.5rem 0; }
.radio-note{ color:var(--ink-soft); font-size:.92rem; margin-top:2rem; max-width:62ch; }
.radio-note a{ text-decoration:underline; text-underline-offset:2px; }

/* Android app download */
.radio-app{ display:flex; align-items:center; gap:1rem 1.25rem; flex-wrap:wrap; margin-top:2.5rem; padding:1.1rem 1.25rem; background:var(--accent-soft); border-left:3px solid var(--accent); max-width:62ch; }
.radio-app[hidden]{ display:none; }
.radio-app .ra-icon{ width:56px; height:56px; flex:none; }
.radio-app .ra-text{ flex:1 1 16rem; min-width:0; }
.radio-app .ra-title{ font-family:var(--f-display); font-size:1.05rem; font-weight:600; margin:0 0 .2rem; }
.radio-app .ra-desc{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.radio-app .ra-steps{ margin:.35rem 0 0; font-size:.82rem; color:var(--ink-soft); }
.radio-app .ra-ios{ margin:.5rem 0 0; font-size:.82rem; color:var(--ink-soft); }
.radio-app .ra-ver{ margin:.5rem 0 0; font-size:.82rem; font-family:var(--f-mono, ui-monospace, monospace); color:var(--ink); }
.radio-app .ra-new{ margin:.5rem 0 0; font-size:.86rem; color:var(--ink-soft); }
.radio-app .ra-new[hidden]{ display:none; }
.radio-app .ra-new-h{ margin:0 0 .2rem; font-weight:600; color:var(--ink); font-size:.82rem; }
.radio-app .ra-new ul{ margin:0; padding-left:1.1rem; }
.radio-app .ra-new li{ margin:.15rem 0; }
.radio-app .ra-count{ margin:.35rem 0 0; font-size:.82rem; color:var(--accent); font-weight:600; }
.radio-app .ra-btn{ flex:none; display:inline-flex; align-items:baseline; gap:.5rem; background:var(--accent); color:#fff; padding:.65rem 1.1rem; font-weight:600; font-size:.95rem; }
.radio-app .ra-btn:hover, .radio-app .ra-btn:focus-visible{ background:var(--ink); }
.radio-app .ra-size{ font-weight:400; font-size:.8rem; opacity:.85; }

/* Player bar */
.radio-player{ position:fixed; left:0; right:0; bottom:0; background:var(--ink); color:var(--paper); display:flex; align-items:center; gap:1rem; padding:.7rem 5vw calc(.7rem + env(safe-area-inset-bottom)); border-top:3px solid var(--accent); z-index:20; }
.radio-player .np{ display:flex; align-items:center; gap:.85rem; flex:1; min-width:0; }
.radio-player .np-tile{ width:42px; height:42px; flex:none; display:grid; place-items:center; background:var(--accent); color:var(--paper); font-family:var(--f-display); font-weight:600; font-size:.9rem; }
.radio-player .np-text{ min-width:0; }
.radio-player .np-name{ font-family:var(--f-display); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radio-player .np-status{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:.15rem; }
.radio-player.playing .np-status::before{ content:"● "; color:#E25B4B; animation:radio-blink 1.6s ease-in-out infinite; }
.radio-player.loading .np-status::after{ content:""; display:inline-block; width:9px; height:9px; margin-left:.45rem; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:radio-spin .8s linear infinite; vertical-align:-1px; }
.np-controls{ display:flex; align-items:center; gap:.8rem; }
.np-fav{ width:36px; height:36px; display:grid; place-items:center; }
.np-fav svg{ stroke:var(--paper); width:18px; height:18px; }
.np-fav[aria-pressed="true"] svg{ fill:#E8C07A; stroke:#E8C07A; }
.np-play, .np-skip, .np-fav, .np-cast{ flex:none; }
.np-play{ width:44px; height:44px; aspect-ratio:1; border-radius:50%; background:var(--paper)!important; display:grid; place-items:center; }
.np-play svg{ width:18px; height:18px; fill:var(--ink); }
.np-play .i-pause, .radio-player.playing .np-play .i-play{ display:none; }
.radio-player.playing .np-play .i-pause{ display:block; }
.np-vol{ width:100px; accent-color:var(--paper); }
.np-skip{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; }
.np-skip svg{ width:20px; height:20px; fill:var(--paper); }
body[data-section="radio"] .np-skip:hover{ background:rgba(240,237,230,.12); }
.np-controls{ gap:.5rem; }
@keyframes radio-spin{ to{ transform:rotate(360deg); } }
@keyframes radio-blink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

@media (max-width:640px){
  .radio-stats{ grid-template-columns:1fr 1fr; }
  .radio-stats .v{ font-size:1.6rem; }
  .radio-search{ min-width:0; width:100%; }
  .radio-grid{ grid-template-columns:1fr 1fr; }
  .radio-card .hit{ flex-direction:column; align-items:flex-start; gap:.6rem; padding:.85rem; }
  .radio-card .nm{ white-space:normal; }
  .radio-card .fav{ top:.6rem; transform:none; }
  .np-vol{ display:none; }
  .radio-player{ gap:.6rem; }
  .np-controls{ gap:.15rem; }
}
@media (prefers-reduced-motion:reduce){ body[data-section="radio"] *{ animation:none!important; transition:none!important; } }

/* collection picker */
.radio-collections{ margin-top:2rem; border-top:1px solid var(--line); }
.col-row{ display:grid; grid-template-columns:11.5rem 1fr; align-items:baseline; gap:.35rem 1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.col-group{ color:var(--ink-soft); font-size:.66rem; letter-spacing:.12em; }
.col-items{ display:flex; flex-wrap:wrap; gap:.55rem 1.1rem; }
.radio-collections .col-row button{ color:var(--ink-soft); padding-bottom:.2rem; border-bottom:2px solid transparent; }
.col-row button:hover{ color:var(--ink); }
.col-row button[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.col-head{ margin-top:2.2rem; }
.col-name{ font-family:var(--f-display); font-weight:600; font-size:1.6rem; margin:0; }
.col-native{ font-family:var(--f-ml), var(--f-body); font-weight:400; color:var(--ink-soft); margin-left:.4rem; }
.col-intro{ margin:.35rem 0 0; color:var(--ink-soft); max-width:62ch; }
.radio-player .np-col{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
@media (max-width:640px){
  .col-row{ grid-template-columns:1fr; }
}
.radio-player[hidden]{ display:none; }

/* language bar */
.radio-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:2rem; padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lang-pick{ position:relative; }
body[data-section="radio"] .lang-btn{ display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem; border:1px solid var(--ink); background:var(--paper); }
.lang-btn .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.lang-btn .cur{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.lang-btn .nat{ font-family:var(--f-ml), var(--f-body); font-weight:400; color:var(--ink-soft); margin-left:.2rem; }
.lang-btn .caret{ font-size:.8rem; color:var(--ink-soft); }
.lang-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.lang-panel{ position:absolute; z-index:30; top:calc(100% + .4rem); left:0; width:min(640px, calc(100vw - 10vw)); max-height:min(70vh, 560px); overflow:auto; background:var(--paper); border:1px solid var(--ink); box-shadow:0 14px 40px -16px rgba(0,0,0,.35); padding:.8rem 1rem 1rem; }
.lang-panel input{ width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:.45rem 0; outline:0; margin-bottom:.4rem; }
.lang-panel input:focus{ border-bottom-color:var(--accent); }
.lang-list .lg{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:.9rem 0 .35rem; }
.li-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:2px; }
body[data-section="radio"] .li{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:.4rem .5rem; }
body[data-section="radio"] .li:hover{ background:var(--paper-2); }
.li span{ font-family:var(--f-display); font-weight:500; font-size:.92rem; }
.li small{ font-family:var(--f-ml), var(--f-body); color:var(--ink-soft); font-size:.78rem; min-height:1em; }
body[data-section="radio"] .li[aria-pressed="true"]{ background:var(--accent-soft); }
.li-none{ color:var(--ink-soft); margin:.8rem 0 0; }
.lang-quick{ display:flex; flex-wrap:wrap; gap:.4rem; flex:1; }
body[data-section="radio"] .lq{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:.35rem .65rem; border:1px solid var(--line); display:inline-flex; gap:.35rem; align-items:center; }
body[data-section="radio"] .lq:hover{ color:var(--ink); border-color:var(--ink-soft); }
body[data-section="radio"] .lq[aria-pressed="true"]{ color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.lq .star{ color:var(--accent); }
body[data-section="radio"] .def-btn{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding:.35rem 0; border-bottom:1px solid transparent; }
body[data-section="radio"] .def-btn:hover{ border-bottom-color:var(--accent); }
body[data-section="radio"] .def-btn.is-default{ color:var(--ink-soft); cursor:default; border-bottom-color:transparent; }
@media (max-width:640px){
  .radio-bar{ gap:.7rem; }
  .lang-pick, body[data-section="radio"] .lang-btn{ width:100%; }
  .lang-btn .caret{ margin-left:auto; }
  .lang-panel{ width:100%; }
}

/* sign-in */
.acct{ display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
body[data-section="radio"] .acct-in{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .75rem; border:1px solid var(--ink); color:var(--ink); }
body[data-section="radio"] .acct-in:hover{ background:var(--ink); color:var(--paper); }
body[data-section="radio"] .acct-in:hover svg{ fill:var(--paper); }
.acct-in svg{ width:14px; height:14px; fill:var(--ink); }
.acct-who{ color:var(--ink); font-weight:500; }
.acct-ok{ color:var(--ink-soft); }
.acct-ok::before{ content:"● "; color:#2F8F5B; }
body[data-section="radio"] .acct-out{ color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:.1rem; }
body[data-section="radio"] .acct-out:hover{ color:var(--ink); }
.acct-err{ color:#9B2C2C; text-transform:none; letter-spacing:0; font-family:var(--f-body); }
@media (max-width:640px){ .acct{ width:100%; } }


/* sleep timer: labelled button + choice menu */
body[data-section="radio"] .np-cast{ display:flex; align-items:center; justify-content:center; gap:.4rem; min-width:40px; height:40px; padding:0 .6rem; border-radius:999px; border:1px solid rgba(240,237,230,.28); color:var(--paper); white-space:nowrap; }
body[data-section="radio"] .np-cast[hidden]{ display:none; }
.np-cast svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.np-cast svg circle{ fill:currentColor; stroke:none; }
.np-cast .lab{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; }
body[data-section="radio"] .np-cast.on{ color:#E8C07A; border-color:#E8C07A; background:rgba(232,192,122,.12); }
body[data-section="radio"] .np-sleep{ display:flex; align-items:center; gap:.4rem; height:40px; padding:0 .75rem 0 .6rem; border-radius:999px; border:1px solid rgba(240,237,230,.28); color:var(--paper); white-space:nowrap; }
.np-sleep svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.np-sleep .lab{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; }
body[data-section="radio"] .np-sleep.on{ color:#E8C07A; border-color:#E8C07A; background:rgba(232,192,122,.12); }
.np-sleep.on svg{ fill:currentColor; }
body[data-section="radio"] .np-sleep:hover{ background:rgba(240,237,230,.12); }
.sleep-menu{ position:absolute; right:5vw; bottom:calc(100% + .6rem); width:min(20rem, calc(100vw - 2rem)); background:var(--ink); color:var(--paper); border:1px solid rgba(240,237,230,.2); border-radius:12px; padding:1rem; box-shadow:0 18px 40px -14px rgba(0,0,0,.6); z-index:5; }
.sleep-menu[hidden]{ display:none; }
.sm-head{ display:flex; flex-direction:column; gap:.2rem; }
.sm-head b{ font-family:var(--f-display); font-size:1.05rem; }
.sm-head span{ font-size:.88rem; opacity:.75; }
.sm-opts{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.85rem; }
body[data-section="radio"] .sm-opts button{ height:48px; border-radius:10px; border:1px solid rgba(240,237,230,.25); font-family:var(--f-mono); font-size:.85rem; color:var(--paper); }
body[data-section="radio"] .sm-opts button:hover{ background:rgba(240,237,230,.1); }
body[data-section="radio"] .sm-opts button[aria-pressed="true"]{ background:#E8C07A; border-color:#E8C07A; color:#1B1B1F; }
.sm-now{ margin:.8rem 0 0; font-size:.82rem; opacity:.75; line-height:1.4; }
body[data-section="radio"] .sm-off{ margin-top:.7rem; width:100%; height:44px; border-radius:10px; border:1px solid rgba(240,237,230,.25); font-family:var(--f-mono); font-size:.78rem; color:var(--paper); }
body[data-section="radio"] .sm-off:hover{ background:rgba(240,237,230,.1); }

/* recently played */
.recent-row{ display:flex; align-items:center; gap:.6rem 1rem; margin-top:1.1rem; }
.recent-row[hidden]{ display:none; }
.recent-row > .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); flex:none; }
.rp-list{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:2px; }
.rp-list::-webkit-scrollbar{ display:none; }
body[data-section="radio"] .rp{ flex:none; display:flex; align-items:center; gap:.55rem; padding:.3rem .7rem .3rem .3rem; border:1px solid var(--line); background:var(--paper); text-align:left; max-width:220px; }
body[data-section="radio"] .rp:hover{ border-color:var(--ink-soft); }
body[data-section="radio"] .rp.on{ border-color:var(--accent); background:var(--accent-soft); }
.rp .t{ width:30px; height:30px; flex:none; display:grid; place-items:center; background:var(--accent); color:var(--paper); font-family:var(--f-display); font-weight:600; font-size:.72rem; }
.rp .x{ display:flex; flex-direction:column; min-width:0; }
.rp .n{ font-family:var(--f-display); font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp .l{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:640px){
  .recent-row{ flex-direction:column; align-items:stretch; gap:.4rem; }
}
/* phones: a taller two-row player with big, easy-to-hit controls */
@media (max-width:640px){
  body[data-section="radio"]:has(.radio-player:not([hidden])){ padding-bottom:10.5rem; }
  .radio-player{ flex-direction:column; align-items:stretch; gap:.65rem; padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); }
  .radio-player .np{ gap:.8rem; }
  .radio-player .np-tile{ width:48px; height:48px; font-size:1rem; }
  .radio-player .np-name{ font-size:1.05rem; }
  .np-controls{ justify-content:space-between; gap:.4rem; }
  .np-fav{ width:48px; height:48px; }
  .np-fav svg{ width:22px; height:22px; }
  .np-skip{ width:52px; height:52px; }
  .np-skip svg{ width:24px; height:24px; }
  .np-play{ width:60px; height:60px; }
  .np-play svg{ width:24px; height:24px; }
  body[data-section="radio"] .np-sleep{ height:48px; padding:0 .85rem 0 .7rem; }
  body[data-section="radio"] .np-cast{ height:48px; min-width:48px; padding:0 .8rem; }
  /* the heart moves up beside × so the controls row fits; Sleep is the one control that may give way */
  .radio-player .np-fav{ position:absolute; top:.55rem; right:calc(.6rem + 46px); width:44px; height:44px; }
  body .radio-player .np{ padding-right:96px; }
  .np-skip{ width:48px; height:48px; }
  body[data-section="radio"] .np-sleep{ flex:0 1 auto; min-width:48px; overflow:hidden; }
  .np-sleep .lab{ overflow:hidden; text-overflow:ellipsis; }
  .np-sleep .lab{ font-size:.78rem; }
  .sleep-menu{ left:.75rem; right:.75rem; width:auto; }
}
/* keep the site's floating top/bottom buttons behind the player and its sleep menu */
body[data-section="radio"] .scroll-nav{ z-index:15; }
/* close (×) button: far right on desktop, top-right corner of the player on phones */
body[data-section="radio"] .np-close{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--paper); opacity:.7; }
body[data-section="radio"] .np-close:hover, body[data-section="radio"] .np-close:focus-visible{ opacity:1; background:rgba(240,237,230,.12); }
.np-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
@media (max-width:640px){
  body[data-section="radio"] .np-close{ position:absolute; top:.55rem; right:.6rem; width:44px; height:44px; }
  .radio-player .np{ padding-right:3rem; }
}

.new-tag{ font-family:var(--f-mono); font-size:.56rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--accent); padding:.05rem .3rem; margin-left:.35rem; vertical-align:2px; }

/* hands-free: say the station name on car / headphone changes */
.say-names{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.say-names input{ accent-color:var(--accent); width:1rem; height:1rem; margin:0; }

/* ---------- station panel: rate, comment, share ---------- */
.radio-msg{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.04em; color:var(--accent); margin:0 0 .8rem; }
.radio-msg[hidden]{ display:none; }
.radio-player .np-tile[role="button"], .radio-player .np-name[role="button"]{ cursor:pointer; }
.radio-player .np-name[role="button"]:hover{ text-decoration:underline; text-underline-offset:3px; }
.st-back{ position:fixed; inset:0; z-index:29; background:transparent; }
.st-back[hidden], .st-panel[hidden]{ display:none; }
.st-panel{ position:fixed; z-index:30; left:5vw; bottom:calc(var(--bar, 64px) + .6rem); width:min(26rem, calc(100vw - 2rem)); max-height:min(36rem, calc(100vh - var(--bar, 64px) - 2rem)); overflow:auto;
  background:var(--ink); color:var(--paper); border:1px solid rgba(240,237,230,.2); border-radius:12px; padding:1rem 1.1rem 1.1rem; box-shadow:0 18px 40px -14px rgba(0,0,0,.6); }
.st-head{ display:flex; align-items:flex-start; gap:.8rem; justify-content:space-between; }
.st-title{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.st-title b{ font-family:var(--f-display); font-weight:600; font-size:1.1rem; line-height:1.2; }
.st-avg{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:rgba(240,237,230,.75); }
#stPanel .st-play{ flex:none; width:40px; height:40px; margin-left:auto; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--ink); }
#stPanel .st-play svg{ width:18px; height:18px; fill:currentColor; }
#stPanel .st-play .i-pause, .radio-player.playing ~ #stPanel .st-play .i-play{ display:none; }
.radio-player.playing ~ #stPanel .st-play .i-pause{ display:block; }
#stPanel .st-close{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:var(--paper); }
#stPanel .st-close:hover{ background:rgba(240,237,230,.1); }
#stPanel .st-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.st-sec{ border-top:1px solid rgba(240,237,230,.14); margin-top:.9rem; padding-top:.8rem; }
.st-lab{ display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(240,237,230,.65); margin-bottom:.45rem; }
.st-lab span{ text-transform:none; letter-spacing:.02em; }
#stPanel .st-stars{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
#stPanel .st-stars button{ width:40px; height:40px; font-size:1.6rem; line-height:1; color:rgba(240,237,230,.3); border-radius:8px; }
#stPanel .st-stars button.lit{ color:#E9B949; }
#stPanel .st-stars:hover button:not(:disabled){ color:rgba(240,237,230,.3); }
#stPanel .st-stars button:not(:disabled):hover, #stPanel .st-stars button:not(:disabled):has(~ button:hover){ color:#E9B949; }
#stPanel .st-stars button:focus-visible{ outline:2px solid var(--paper); outline-offset:1px; }
#stPanel .st-stars button:disabled{ cursor:not-allowed; opacity:.5; }
.st-saved{ font-family:var(--f-mono); font-size:.72rem; margin-left:.5rem; color:rgba(240,237,230,.8); }
.st-panel textarea{ width:100%; box-sizing:border-box; resize:vertical; min-height:4.2rem; font:inherit; font-family:var(--f-body); font-size:.95rem; color:var(--paper); background:rgba(240,237,230,.06); border:1px solid rgba(240,237,230,.22); border-radius:8px; padding:.55rem .65rem; }
.st-panel textarea:focus{ outline:none; border-color:var(--paper); }
.st-panel textarea:disabled{ opacity:.5; }
.st-row{ display:flex; align-items:center; gap:.7rem; margin-top:.45rem; }
.st-state{ font-family:var(--f-mono); font-size:.68rem; color:#E9B949; margin-right:auto; }
.st-count{ font-family:var(--f-mono); font-size:.66rem; color:rgba(240,237,230,.55); margin-left:auto; }
.st-state:not(:empty) + .st-count{ margin-left:0; }
#stPanel .st-send{ font-family:var(--f-display); font-weight:600; font-size:.85rem; padding:.45rem 1rem; border-radius:999px; background:var(--paper); color:var(--ink); }
#stPanel .st-send:disabled{ opacity:.45; cursor:not-allowed; }
.st-note{ font-size:.85rem; margin:.45rem 0 0; color:rgba(240,237,230,.85); }
.st-note:empty{ display:none; }
.st-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.st-list li p{ margin:.15rem 0 0; font-size:.92rem; line-height:1.45; overflow-wrap:anywhere; white-space:pre-line; }
.st-meta{ display:flex; gap:.6rem; align-items:baseline; font-family:var(--f-mono); font-size:.64rem; color:rgba(240,237,230,.6); }
.st-mini{ color:#E9B949; letter-spacing:.08em; }
.st-say.empty .st-list::before{ content:"No comments yet."; font-size:.85rem; color:rgba(240,237,230,.6); }
#stPanel .st-more{ margin-top:.6rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-decoration:underline; color:var(--paper); }
#stPanel .st-share{ margin-top:1rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem; border-radius:999px; border:1px solid rgba(240,237,230,.35); color:var(--paper); font-family:var(--f-display); font-weight:600; }
#stPanel .st-share:hover{ background:rgba(240,237,230,.08); }
#stPanel .st-share svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){
  .st-back{ background:rgba(0,0,0,.45); }
  .st-panel{ left:0; right:0; bottom:0; width:auto; max-height:85vh; border-radius:16px 16px 0 0; border-bottom:0; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* ---------- radio-admin.html ---------- */
.ad{ max-width:48rem; padding-top:2.5rem; padding-bottom:3rem; }
.ad-msg{ font-family:var(--f-mono); font-size:.75rem; color:var(--accent); min-height:1em; }
.ad-box{ border:1px solid var(--line); padding:1.1rem 1.2rem; margin-top:1rem; }
.ad-box[hidden], #adOwner[hidden]{ display:none; }
.ad-box p{ margin:0 0 .7rem; }
.ad-uid{ font-family:var(--f-mono); font-size:.85rem; overflow-wrap:anywhere; }
.ad-hint{ color:var(--ink-soft); font-size:.92rem; }
body[data-section="radio"] .ad-btn{ font-family:var(--f-display); font-weight:600; padding:.55rem 1.1rem; border-radius:999px; background:var(--ink); color:var(--paper); }
body[data-section="radio"] .ad-btn.small{ font-size:.85rem; padding:.4rem .9rem; }
body[data-section="radio"] .ad-btn.quiet{ background:transparent; color:var(--ink); border:1px solid var(--line); }
body[data-section="radio"] .ad-btn:disabled{ opacity:.5; cursor:wait; }
body[data-section="radio"] .ad-link{ font-family:var(--f-mono); font-size:.75rem; text-decoration:underline; color:var(--ink-soft); margin-top:.6rem; }
.ad-h{ font-family:var(--f-display); font-size:1.25rem; margin:2rem 0 .6rem; }
.ad-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ad-list li{ border-bottom:1px solid var(--line); padding:.85rem 0; }
.ad-head{ display:flex; flex-wrap:wrap; gap:.3rem .8rem; align-items:baseline; }
.ad-meta{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft); }
.ad-text{ margin:.35rem 0 .6rem; white-space:pre-line; overflow-wrap:anywhere; }
.ad-act{ display:flex; gap:.5rem; }
.ad-empty{ color:var(--ink-soft); }

/* Inside the Android app: "new version available" banner (js/app-update.js) */
.app-update{ margin:1.25rem 0 0; padding:1rem 1.15rem; background:var(--accent-soft); border-left:3px solid var(--accent); max-width:62ch; }
.app-update p{ margin:0; }
.app-update .au-title{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.app-update .au-sub{ font-size:.85rem; color:var(--ink-soft); margin-top:.15rem; }
.app-update ul{ margin:.5rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--ink-soft); }
.app-update li{ margin:.15rem 0; }
.app-update .au-tip{ font-size:.8rem; color:var(--ink-soft); margin-top:.5rem; }
.app-update .au-row{ display:flex; gap:.75rem; margin-top:.75rem; align-items:center; }
.app-update .au-go{ background:var(--accent); color:#fff; padding:.6rem 1.2rem; font-weight:600; font-family:var(--f-display); }
.app-update .au-later{ background:none; border:0; padding:.6rem .4rem; font:inherit; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }