/* Stage 10D.3d — compact one-row station utility bar.
   Kept separate from swagball.css so previous station-bar experiments cannot win the cascade. */
:root{--station-bar-reserve:50px}
body{padding-bottom:var(--station-bar-reserve)!important}

.station-footer{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:60!important;
  height:50px!important;
  min-height:50px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:0!important;
  background:rgba(6,8,16,.70)!important;
  backdrop-filter:blur(24px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(140%)!important;
  box-shadow:0 -10px 32px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
}

.station-footer .station-footer-inner.page-shell{
  width:100%!important;
  max-width:none!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) max-content minmax(130px,190px) 34px!important;
  grid-template-rows:50px!important;
  column-gap:12px!important;
  row-gap:0!important;
  align-items:center!important;
}

.station-footer .station-identity,
.station-footer .station-controls{display:contents!important}

.station-footer .radio-signal{
  grid-column:1!important;
  grid-row:1!important;
  width:30px!important;
  height:30px!important;
  align-self:center!important;
}

.station-footer .station-identity>div:last-child{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:max-content minmax(180px,.72fr) minmax(220px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}

.station-footer .station-identity small{
  grid-column:1!important;
  margin:0!important;
  color:#66758c!important;
  font-size:.50rem!important;
  line-height:1!important;
  letter-spacing:.13em!important;
  white-space:nowrap!important;
}

.station-footer .station-identity strong{
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  color:#eef3fb!important;
  font-size:.82rem!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.station-footer .station-identity span{
  grid-column:3!important;
  min-width:0!important;
  margin:0!important;
  color:#78869b!important;
  font-size:.59rem!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.station-footer .station-controls .radio-copy{
  grid-column:3!important;
  grid-row:1!important;
  min-width:0!important;
  display:block!important;
  align-self:center!important;
}

.station-footer .station-controls .radio-copy span{
  display:block!important;
  margin:0!important;
  color:#8b98ab!important;
  font-size:.56rem!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.station-footer .radio-volume{
  grid-column:4!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  gap:7px!important;
  align-items:center!important;
}
.station-footer .radio-volume span{font-size:.48rem!important;letter-spacing:.11em!important}
.station-footer .radio-volume input{width:100%!important;min-width:0!important}

.station-footer .radio-toggle{
  grid-column:5!important;
  grid-row:1!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  align-self:center!important;
  padding:0!important;
}

.station-footer[data-radio-state="live"] .radio-copy span{color:#9ddfb0!important}
.station-footer[data-radio-state="error"] .radio-copy span{color:#ff9da9!important}

@media(max-width:980px){
  :root{--station-bar-reserve:56px}
  .station-footer{height:56px!important;min-height:56px!important}
  .station-footer .station-footer-inner.page-shell{
    height:56px!important;min-height:56px!important;grid-template-rows:56px!important;
    grid-template-columns:30px minmax(0,1fr) minmax(115px,155px) 32px!important;
    padding:0 14px!important;column-gap:10px!important;
  }
  .station-footer .station-identity>div:last-child{grid-template-columns:max-content minmax(150px,1fr) minmax(150px,.85fr)!important;gap:8px!important}
  .station-footer .station-controls .radio-copy{display:none!important}
  .station-footer .radio-volume{grid-column:3!important}
  .station-footer .radio-toggle{grid-column:4!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
  .station-footer .radio-signal{width:28px!important;height:28px!important}
}

@media(max-width:680px){
  :root{--station-bar-reserve:78px}
  .station-footer{height:78px!important;min-height:78px!important}
  .station-footer .station-footer-inner.page-shell{
    height:78px!important;min-height:78px!important;padding:7px 12px!important;
    grid-template-columns:30px minmax(0,1fr) 32px!important;
    grid-template-rows:32px 30px!important;column-gap:9px!important;row-gap:2px!important;
  }
  .station-footer .radio-signal{grid-column:1!important;grid-row:1!important;width:28px!important;height:28px!important}
  .station-footer .station-identity>div:last-child{grid-column:2!important;grid-row:1!important;grid-template-columns:minmax(0,1fr)!important;gap:1px!important;align-content:center!important}
  .station-footer .station-identity small{display:none!important}
  .station-footer .station-identity strong{grid-column:1!important;font-size:.78rem!important}
  .station-footer .station-identity span{grid-column:1!important;font-size:.54rem!important}
  .station-footer .radio-toggle{grid-column:3!important;grid-row:1!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
  .station-footer .radio-volume{grid-column:1/4!important;grid-row:2!important;margin:0!important}
}