/* The enhanced and native controls share this card and never occupy it together. */
.listen-section [hidden]{display:none!important}
.listen-section .listen-bar{
 display:grid;grid-template-columns:48px minmax(0,1.7fr) minmax(0,.9fr) minmax(0,110px) minmax(0,155px);
 grid-template-areas:"play identity schedule volume request";
 align-items:center;gap:clamp(10px,1.5vw,22px);padding:clamp(14px,1.6vw,22px);
 box-sizing:border-box;max-width:100%;min-width:0;
}
.listen-section .listen-bar>*{min-width:0}
.listen-section .listen-play{grid-area:play;width:48px;height:48px;justify-self:start}
.listen-section .listen-identity{grid-area:identity}
.listen-section .listen-identity .tiny-label,
.listen-section .listen-identity strong,.listen-section .listen-sub,.listen-section .listen-state,
.listen-section .listen-native-toggle,.listen-section .direct-site-link,
.listen-section .on-schedule b,.listen-section .on-schedule span,.listen-section .request-link span,
.listen-section .listen-native small{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.listen-section .on-schedule{grid-area:schedule;padding-inline-start:clamp(10px,1.4vw,20px)}
.listen-section .public-volume{grid-area:volume;display:flex;min-width:0;max-width:100%;gap:6px}
.listen-section .public-volume svg,.listen-section .request-link svg{flex:none}
.listen-section .public-volume input{width:100%;min-width:0;max-width:96px;margin:0}
.listen-section .request-link{grid-area:request;min-width:0;padding-inline-start:clamp(8px,1.1vw,18px)}
.listen-section .request-link svg:last-child{margin-inline-start:0}
.listen-section .listen-native{grid-area:native;display:grid;gap:4px;align-content:center;min-width:0}
.listen-section .listen-native audio{display:block;width:100%;max-width:100%;min-width:0;min-height:42px}
.listen-section .listen-native small,.listen-section .listen-native-toggle{color:var(--muted);font-size:calc(11px * var(--reading-scale,1));line-height:1.35}
.listen-section .listen-native-toggle{
 display:block;padding:4px 0 2px;text-align:start;text-decoration:underline;text-underline-offset:3px;
}
.listen-section .listen-native-toggle:hover{color:var(--text)}
.listen-section:not(.is-enhanced),.listen-section.has-native-controls{position:relative;top:auto}
.listen-section:not(.is-enhanced) .listen-bar,.listen-section.has-native-controls .listen-bar{
 grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.65fr) minmax(0,145px);
 grid-template-areas:"identity native schedule request";
}
.listen-section:not(.is-enhanced) .public-volume,.listen-section.has-native-controls .public-volume{display:none}
@media(max-width:950px){
 .listen-section .listen-bar{grid-template-columns:44px minmax(0,1fr) minmax(0,110px);grid-template-areas:"play identity volume"}
 .listen-section .listen-play{width:44px;height:44px}
 .listen-section .on-schedule,.listen-section .request-link{display:none}
 .listen-section:not(.is-enhanced) .listen-bar,.listen-section.has-native-controls .listen-bar{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"identity native";
 }
}
@media(max-width:700px){.listen-section{position:relative;top:auto}}
@media(max-width:560px){
 .listen-section .listen-bar{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"identity identity" "play volume"}
 .listen-section .public-volume{justify-self:start;width:min(100%,130px)}
 .listen-section .listen-play{width:42px;height:42px}
 .listen-section .listen-identity strong{font-size:calc(13px * var(--reading-scale,1))}
 .listen-section .listen-sub{font-size:calc(10px * var(--reading-scale,1))}
 .listen-section .listen-native-toggle{min-height:28px}
 .listen-section:not(.is-enhanced) .listen-bar,.listen-section.has-native-controls .listen-bar{
  grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "native";
 }
}
