/* V21: responsive density; scoped to the public catalog. */
#content .radio-results[data-catalog-layout=compact]{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#content .radio-results[data-catalog-layout=large]{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#content .radio-results:not([data-catalog-layout=list]) .station-card{padding:12px;min-height:0;border-radius:14px}
#content .radio-results:not([data-catalog-layout=list]) .card-top{flex-wrap:wrap;gap:5px}
#content .radio-results:not([data-catalog-layout=list]) .station-text{min-height:0}
#content .radio-results:not([data-catalog-layout=list]) h3{margin:10px 0 5px;font-size:14px}
#content .radio-results:not([data-catalog-layout=list]) .play{margin-top:10px;padding:8px 3px;font-size:11px}
#content .radio-results[data-catalog-layout=large] .station-image{width:78px;height:78px}
#content .radio-results[data-catalog-layout=list]{grid-template-columns:minmax(0,1fr);gap:6px}
#content .radio-results[data-catalog-layout=list] .station-card{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:0;border-radius:12px}
#content .radio-results[data-catalog-layout=list] .card-top,
#content .radio-results[data-catalog-layout=list] .card-actions{display:contents}
#content .radio-results[data-catalog-layout=list] .station-image{width:42px;height:42px;flex:none}
#content .radio-results[data-catalog-layout=list] .heart{position:static;width:30px;height:34px;flex:none;padding:0;font-size:22px;background:transparent}
#content .radio-results[data-catalog-layout=list] .radio-reactions{display:flex;position:relative;gap:3px;width:auto;max-width:none;margin:0;flex:none}
#content .radio-results[data-catalog-layout=list] .radio-reactions button{min-height:30px;min-width:28px;padding:4px;font-size:10px}
#content .radio-results[data-catalog-layout=list] .reaction-status:empty{display:none}
#content .radio-results[data-catalog-layout=list] .reaction-status:not(:empty){position:absolute;top:100%;left:0;z-index:3;min-width:130px;background:var(--surface);padding:6px;border:1px solid var(--line)}
#content .radio-results[data-catalog-layout=list] .play-count{margin:0;font-size:10px;white-space:nowrap;flex:none}
#content .radio-results[data-catalog-layout=list] .station-text{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:0}
#content .radio-results[data-catalog-layout=list] h3{display:block;flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:14px;margin:0}
#content .radio-results[data-catalog-layout=list] p{flex:0 1 140px;min-width:0;font-size:11px;margin:0}
#content .radio-results[data-catalog-layout=list] .station-tag{display:none}
#content .radio-results[data-catalog-layout=list] .stream-warning{display:none}
#content .radio-results[data-catalog-layout=list] .play{flex:none;width:auto;height:36px;min-height:36px;margin:0;padding:6px 10px;font-size:11px}
#content .highlights-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#content .highlight-card{display:flex;padding:10px;gap:8px;flex-wrap:nowrap}
#content .highlight-card>img{width:40px;height:40px}
#content .highlight-card h3{font-size:13px}
#content .highlight-card .play-count{font-size:10px}
#content .highlight-card .round-play{width:32px;height:32px}
@media(min-width:1500px){#content .radio-results[data-catalog-layout=compact]{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){#content .highlights-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 #content .radio-results[data-catalog-layout=compact]{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #content .radio-results[data-catalog-layout=large]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #content .radio-results:not([data-catalog-layout=list]) .station-card{padding:7px;border-radius:11px}
 #content .radio-results[data-catalog-layout=compact] .station-image{width:42px;height:42px}
 #content .radio-results[data-catalog-layout=compact] .card-top{flex-direction:column;align-items:center;gap:3px}
 #content .radio-results[data-catalog-layout=compact] .card-actions{display:grid;grid-template-columns:24px minmax(0,1fr);width:100%;max-width:none;gap:2px;align-items:center}
 #content .radio-results[data-catalog-layout=compact] .heart{position:static;width:24px;height:28px;font-size:20px;padding:0}
 #content .radio-results[data-catalog-layout=compact] .radio-reactions{width:100%;margin:0;gap:2px}
 #content .radio-results[data-catalog-layout=compact] .radio-reactions button{min-height:26px;gap:1px;font-size:8px;padding:2px 0}
 #content .radio-results[data-catalog-layout=compact] .radio-reactions svg{width:9px;height:9px}
 #content .radio-results[data-catalog-layout=compact] .play-count{grid-column:1/-1;margin:0;font-size:9px;text-align:center}
 #content .radio-results[data-catalog-layout=compact] h3{font-size:12px;margin-top:7px}
 #content .radio-results[data-catalog-layout=compact] p{font-size:10px;margin-bottom:4px}
 #content .radio-results[data-catalog-layout=compact] .station-tag{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;padding:2px 4px}
 #content .radio-results[data-catalog-layout=compact] .play{font-size:10px;min-height:34px;gap:3px}
 #content .radio-results[data-catalog-layout=large] .station-image{width:60px;height:60px}
 #content .radio-results[data-catalog-layout=list] .station-card{gap:4px;padding:6px 4px}
 #content .radio-results[data-catalog-layout=list] .station-image{width:30px;height:30px;border-radius:6px}
 #content .radio-results[data-catalog-layout=list] .heart{width:24px;height:30px;font-size:20px}
 #content .radio-results[data-catalog-layout=list] .radio-reactions{gap:2px}
 #content .radio-results[data-catalog-layout=list] .radio-reactions button{min-width:24px;min-height:30px;padding:2px;font-size:8px;gap:1px}
 #content .radio-results[data-catalog-layout=list] .radio-reactions svg{width:10px;height:10px}
 #content .radio-results[data-catalog-layout=list] .play-count{font-size:0;max-width:38px}
 #content .radio-results[data-catalog-layout=list] .play-count:after{content:'▶ ' attr(data-short-count);font-size:9px}
 #content .radio-results[data-catalog-layout=list] .station-text{display:block}
 #content .radio-results[data-catalog-layout=list] h3{font-size:12px}
 #content .radio-results[data-catalog-layout=list] p{font-size:10px}
 #content .radio-results[data-catalog-layout=list] .play{width:32px;height:34px;min-height:34px;padding:0;border-radius:9px}
 #content .radio-results[data-catalog-layout=list] .play span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #content .highlights-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #content .highlight-card{display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px;padding:8px}
 #content .highlight-card>img{width:32px;height:32px}
 #content .highlight-card>div{grid-column:1/-1;grid-row:2}
 #content .highlight-card .round-play{grid-column:2;grid-row:1;justify-self:end}
 #content .highlight-card .eyebrow{font-size:8px}
}
@media(max-width:359px){#content .radio-results[data-catalog-layout=compact]{grid-template-columns:repeat(2,minmax(0,1fr))}}
#content .radio-results[data-catalog-layout=list] .station-card{flex-direction:row}
#content .radio-results[data-catalog-layout=list] .radio-reactions{flex-wrap:nowrap}
#content .radio-results:not([data-catalog-layout=list]) .card-actions{max-width:100%}
#content .highlight-card:nth-child(n){display:flex}
@media(max-width:700px){#content .highlight-card:nth-child(n){display:grid}}

/* Playback state shared by cards, highlights and station details. */
#content [data-play].is-playing{background:#16734c;color:#fff;border-color:#16734c;box-shadow:0 0 0 2px #21a36625}
#content [data-play].is-playing:hover{background:#115b3c;color:#fff}
#content .radio-results[data-catalog-layout=compact] .play.is-playing{font-size:10px;white-space:normal}