/* Stave Records: radio bar at the top of the catalog page (see js/radio.js). */
/* Background radio bar, stuck to the top of the page */
.radio{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:8px 24px;background:var(--wall);border-bottom:3px solid var(--hi);color:#f3e6c9}
.radio[hidden]{display:none}
.radio-icon{position:relative;flex:none;width:30px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#15100c 0 2px,#261e18 2px 3px)}
.radio-icon::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--hi)}
.radio-play{min-width:92px;font:800 15px var(--body);padding:8px 18px;border:2px solid #f3e6c9;border-radius:4px;background:var(--hi);color:#21170f;cursor:pointer}
.radio select{max-width:min(100%,320px);font:600 15px var(--body);padding:6px 10px;border:2px solid #f3e6c9;border-radius:4px;background:#f4ecd6;color:#21170f}
.radio-status{flex:1;min-width:140px;font-size:14px;color:#d6c6a4}
.radio-volume{display:flex;align-items:center;gap:8px;font-size:14px}
.radio-volume input{width:110px;accent-color:var(--hi)}
.radio :focus-visible{outline:3px solid var(--hi);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){body.radio-on .radio-icon{animation:radio-spin 3s linear infinite}@keyframes radio-spin{to{transform:rotate(360deg)}}}
@media(max-width:560px){.radio-volume{display:none}}