/* Readable display and calm movement. */
body.compactRadio .referenceSurface .refStation{padding:.35cqw .9cqw!important;}
body.compactRadio .refStation .tunerLabels{height:1.6cqw!important;align-items:center!important;}
#displayClock{font-size:1.3cqw!important;}
#displayDate{font-size:.87cqw!important;}
body.compactRadio .referenceSurface .refStation .retroDisplay{height:4.15cqw!important;}
body.compactRadio .refStation .retroText #retroTrack{font-size:1.05cqw!important;line-height:1.35!important;}
body.compactRadio .referenceSurface #displayWeather{position:absolute!important;bottom:.35cqw;left:.9cqw;right:.7cqw;width:calc(100% - 1.6cqw)!important;max-width:none!important;min-height:0!important;height:1.2cqw!important;border:0!important;padding:0!important;background:transparent!important;color:#d5eebd!important;font:650 .82cqw/1.4 system-ui!important;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
body.compactRadio #receiverStatus{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);}
body.compactRadio [data-playback=blocked] #retroTrack{color:#f1ffc8!important;font-weight:750!important;}
body #retroPresets .presetTicker.hasOverflow .presetTickerText{animation:presetTicker var(--ticker-duration,14s) linear 3s infinite alternate;}
@keyframes presetTicker{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(var(--ticker-shift))}}
#retroPresets>button:hover .presetTickerText,#retroPresets>button:focus-visible .presetTickerText{animation-play-state:paused!important;}
#weatherCityPicker{box-sizing:border-box;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;background:#10232b;color:#eff8ed;border:1px solid #8fac98;border-radius:16px;overflow:auto;}
#weatherCityPicker::backdrop{background:#020b12c9;}
.weatherCityHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.weatherCityHeader h2{margin:0;font:750 23px system-ui;}
#weatherCityPicker button,#weatherCityPicker input{box-sizing:border-box;min-height:48px;border:1px solid #6f8c84;border-radius:8px;font:650 15px system-ui;}
#weatherCityPicker button{background:#233e3b;color:#ecf7df;padding:10px 15px;cursor:pointer;}
#weatherCityPicker input{width:100%;min-width:0;background:#f6faf5;color:#12251c;padding:10px;font-size:16px;}
#closeWeatherCity{width:48px;flex:none;}
#weatherCityForm label{display:block;margin-bottom:8px;font:650 14px system-ui;}
.weatherCitySearch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
#weatherCityStatus{font:14px/1.5 system-ui;color:#c0d3c8;}
#weatherCityResults{display:grid;gap:8px;}
#weatherCityResults button{text-align:left;display:grid;gap:5px;}
#weatherCityResults small{font:12px system-ui;color:#c7d8ce;}
.weatherAttribution{display:block;margin-top:18px;color:#b8d2b5;font:12px system-ui;}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 body.compactRadio.retroMode .referenceSurface>.refStation{min-height:164px!important;padding:14px!important;display:flex!important;flex-direction:column!important;gap:8px!important;}
 body.compactRadio.retroMode .refStation .tunerLabels{height:auto!important;min-height:34px!important;padding:0!important;align-items:flex-start!important;}
 .displayDateTime{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
 #displayClock{font-size:21px!important;}#displayDate{font-size:12px!important;}
 body.compactRadio.retroMode .refStation #retroFavorite{height:38px!important;min-height:38px!important;font-size:12px!important;}
 body.compactRadio.retroMode .referenceSurface .refStation .retroDisplay{height:auto!important;min-height:58px!important;order:1;}
 body.compactRadio.retroMode .refStation .retroText #retroChannel{font-size:25px!important;line-height:1.15!important;}
 body.compactRadio.retroMode .refStation .retroText #retroTrack{font-size:14px!important;max-height:40px!important;line-height:1.4!important;}
 body.compactRadio.retroMode .referenceSurface #displayWeather{position:static!important;order:2!important;width:100%!important;height:auto!important;min-height:44px!important;display:block!important;font:650 13px/1.4 system-ui!important;white-space:normal!important;padding:8px!important;border:1px solid #416c49!important;border-radius:7px!important;background:#0e2b18!important;}
 body.compactRadio.retroMode #receiver .referenceSurface .refStationKeys{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;}
 body.compactRadio.retroMode #retroPresets>button{min-height:56px!important;padding:12px 10px!important;}
 body.compactRadio.retroMode #retroPresets>button .presetTicker{font:650 13px/1.4 system-ui!important;}
 body.compactRadio.retroMode #retroPresets>button small{font-size:17px!important;}
 body.compactRadio.retroMode #retroPresets .radioMusicServices{grid-column:1/-1!important;grid-row:auto!important;justify-content:flex-end!important;gap:12px!important;padding:0!important;border:0!important;}
 body.compactRadio.retroMode #retroPresets .radioMusicServices a{width:48px!important;height:48px!important;}
 body.compactRadio.retroMode #retroPresets .radioMusicServices img{width:28px!important;height:28px!important;}
 body.compactRadio.retroMode .referenceSurface .refVolume{min-height:60px!important;visibility:visible!important;}
 body.compactRadio.retroMode .refVolume input{height:44px!important;min-height:44px!important;}
 body.compactRadio.retroMode .referenceSurface .controlTrim{display:none!important;}
 body.compactRadio.retroMode .radioToolbar{position:relative!important;display:flex!important;justify-content:space-between!important;inset:auto!important;width:100%!important;box-sizing:border-box;min-height:48px;}
 body.compactRadio.retroMode .radioToolbar #radioHomeLink{display:inline-flex!important;align-items:center;min-height:48px;font-size:13px!important;}
 body.compactRadio.retroMode .radioToolbar #retroFullscreen{min-height:48px!important;font-size:13px!important;}
}
@media(orientation:landscape) and (max-width:1000px) and (pointer:coarse){
 body.compactRadio.retroMode .radioStage>.referenceRadio{width:100%!important;max-width:760px!important;}
 body.compactRadio.retroMode .referenceRadio>.referenceSurface{padding-inline:max(18px,env(safe-area-inset-left))!important;}
 body.compactRadio.retroMode .referenceSurface .refSearch{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 48px!important;}
 body.compactRadio.retroMode .refSearch>label:first-child{grid-column:auto!important;}
 body.compactRadio.retroMode #receiver .referenceSurface .refStationKeys{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(prefers-reduced-motion:reduce){body #retroPresets .presetTicker.hasOverflow .presetTickerText{animation:none!important;}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 body.compactRadio.retroMode .refStationKeys::before,body.compactRadio.retroMode .refStationKeys::after{display:none!important;}
 body.compactRadio.retroMode .referenceSurface>.refStation,body.compactRadio.retroMode .referenceSurface>.refSearch,body.compactRadio.retroMode .referenceSurface>.refStationKeys{z-index:2!important;}
 body.compactRadio.retroMode .referenceSurface>.mobileCabinet{z-index:0!important;}
 body.compactRadio.retroMode #presetHeading{display:none!important;}
}