/* ---------- PS-FM radio (landing) ---------- */
.radio{--acc:#c8102e;--hi:#fff;--lo:#5a5a5a;position:fixed;right:18px;bottom:62px;z-index:6;width:340px;background:var(--bios-grey,#c6c6c6);
  border:2px solid var(--vcr-navy,#000066);box-shadow:6px 6px 0 rgba(0,0,0,.35);font-family:var(--digital,"Monaco Digi",monospace);font-size:16px;line-height:20px;
  color:#000;text-transform:uppercase;-webkit-font-smoothing:none;user-select:none}
.radio *{box-sizing:border-box}
.radio button{all:unset;box-sizing:border-box;cursor:inherit}
.radio .rb{display:flex;align-items:center;gap:8px;background:var(--vcr-navy,#000066);color:#fff;padding:3px 4px 2px 8px}
.radio .air{display:inline-flex;align-items:center;gap:6px;flex:none}
.radio .air i{width:8px;height:8px;background:#555;display:inline-block}
.radio.on .air i{background:var(--acc);box-shadow:0 0 6px var(--acc);animation:airblink 1.2s steps(2) infinite}
@keyframes airblink{50%{opacity:.35}}
.radio .stn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bfc8ff}
.radio .min{display:inline-grid;place-items:center;width:22px;height:18px;background:var(--bios-grey,#c6c6c6);color:#000;border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);line-height:12px}
.radio .min:hover,.radio .min:focus-visible{background:var(--red,#c8102e);color:#fff}
.radio .body{padding:6px}
.radio .scr{background:#f4f4f2;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);position:relative}
.radio canvas{display:block;width:100%;height:clamp(230px,40vh,330px);background:#fff}
.radio .scr{overflow:hidden}
.radio .vtag{position:absolute;right:6px;top:5px;font-size:16px;line-height:16px;color:#fff;mix-blend-mode:difference;opacity:.7;pointer-events:none}
.radio .tap{position:absolute;left:0;right:0;top:44px;text-align:center;color:#fff;background:rgba(0,0,102,.85);padding:4px 0 2px;animation:airblink 1.2s steps(2) infinite;pointer-events:none}
.radio .meta{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center;padding:6px 6px 5px;border-top:1px solid #d6d6d6;background:#fff}
.radio .cov{width:48px;height:48px;background:var(--acc) repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);display:block;object-fit:cover;image-rendering:pixelated;border:1px solid #000}
.radio .tt{white-space:nowrap;overflow:hidden;position:relative}
.radio .tt span{display:inline-block;padding-right:40px}
.radio.on .tt.long span{animation:marq 12s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.radio .ar{color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;filter:saturate(1.2) brightness(.8)}
.radio .no{color:#777}
.radio .ctl{display:flex;align-items:center;gap:5px;margin-top:6px}
.radio .pb{display:inline-grid;place-items:center;width:32px;height:28px;background:var(--bios-grey,#c6c6c6);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);color:#000}
.radio .pb svg{width:16px;height:16px;shape-rendering:crispEdges;display:block}
.radio .pb.big{width:42px}
.radio .pb:hover,.radio .pb:focus-visible{background:var(--acc);color:#fff}
.radio .pb:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.radio .pb[disabled]{opacity:.4;pointer-events:none}
.radio .tc{margin-left:auto;background:#000;color:#8dffa8;padding:4px 6px 2px;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);font-variant-numeric:tabular-nums}
.radio .vol{width:54px;accent-color:var(--acc);cursor:inherit}
.radio .wk{display:flex;justify-content:space-between;gap:8px;color:#555;padding:4px 2px 0;font-size:16px}.radio .wk span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio.min-on .body{display:none}
.radio.min-on{width:auto;max-width:calc(100vw - 36px)}
.radio.min-on .stn{max-width:180px}
@media (max-width:700px){.radio{right:12px;left:12px;width:auto;bottom:48px}.radio.min-on{left:auto}}
@media (prefers-reduced-motion:reduce){.radio.on .air i,.radio.on .tt.long span{animation:none}}
.radio [hidden]{display:none!important}
.radio .list{list-style:none;margin:6px 0 0;padding:0;max-height:96px;overflow:auto;background:#fff;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);scrollbar-width:thin}
.radio .list li{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,38%);column-gap:6px;padding:2px 6px 1px;border-bottom:1px solid #e6e6e6;cursor:inherit}
.radio .list li i{font-style:normal;color:#9a9a9a}
.radio .list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .list li em{font-style:normal;color:#8a8a8a;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .list li:hover,.radio .list li:focus-visible{background:#eee;outline:none}
.radio .list li.cur{background:var(--acc);color:#fff}
.radio .list li.cur i,.radio .list li.cur em{color:rgba(255,255,255,.8)}
@media (max-width:700px){.radio .list{max-height:78px}.radio canvas{height:clamp(180px,30vh,230px)}}
.radio{display:flex;flex-direction:column;max-height:calc(100vh - 80px);max-height:calc(100svh - 80px)}
.radio .body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.radio .scr,.radio .ctl,.radio .wk{flex:none}
.radio .list{flex:1 1 auto;min-height:24px}
@media (max-height:620px){.radio .meta{padding:4px 6px 3px}.radio .cov{width:36px;height:36px}.radio .meta{grid-template-columns:36px minmax(0,1fr)}}
@media (max-width:700px){.radio{max-height:calc(100vh - 64px);max-height:calc(100svh - 64px)}}
/* phones: a small corner set, not half the screen */
@media (max-width:700px){
  .radio{left:auto!important;right:10px;top:10px;bottom:auto!important;width:min(224px,62vw)!important;max-height:none;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
  .radio.min-on{width:auto!important}
  .radio .rb{padding:2px 3px 1px 6px;gap:6px}
  .radio .stn{font-size:16px}
  .radio .body{padding:4px}
  .radio canvas{height:180px!important}
  .radio .meta{grid-template-columns:28px minmax(0,1fr);gap:6px;padding:3px 4px 2px}
  .radio .cov{width:28px;height:28px}
  .radio .tt,.radio .ar{line-height:16px}
  .radio .ctl{margin-top:4px;gap:4px}
  .radio .pb{width:28px;height:24px}.radio .pb.big{width:34px}.radio .pb svg{width:12px;height:12px}
  .radio .vol,.radio .list,.radio .wk{display:none}
  .radio .tc{padding:2px 4px 1px}
  .radio .tap{top:34px}
}