body>header{position:relative;z-index:2300}header .actions{align-items:center}
.broadcast-header-search{position:relative;flex:1 1 230px;min-width:160px;max-width:300px}
.broadcast-header-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.broadcast-header-search .searchbar{display:grid;grid-template-columns:minmax(0,1fr) 38px;border:1px solid #91afd0;border-radius:7px;overflow:hidden;background:#fff}
.broadcast-header-search input{width:100%;min-width:0;box-sizing:border-box;border:0;padding:9px 10px;background:#fff;color:#14283b;font:15px Arial}
.broadcast-header-search #location-submit{padding:7px;border:0;border-radius:0;background:#d7e8fb;color:#173859;font-size:20px}
.broadcast-city-popover{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;width:330px;max-width:min(90vw,420px);background:#fff;color:#173859;border-radius:7px;box-shadow:0 8px 28px #0009;overflow:hidden}
.broadcast-city-popover:has(#broadcast-city-status[hidden]):has(#location-results[hidden]){display:none}
#broadcast-city-status{padding:9px 12px;margin:0;font:13px/1.4 Arial;color:#173859;background:#e5effb}
#broadcast-city-status[hidden],.broadcast-header-search #location-results[hidden]{display:none}
.broadcast-header-search #location-results{max-height:300px;overflow:auto;font:14px/1.4 Arial}
.broadcast-header-search #location-results button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid #c5d6e8;border-radius:0;background:#fff;color:#173859}
.broadcast-header-search #location-results button:hover,.broadcast-header-search #location-results button:focus-visible{background:#dcecff}
.broadcast-header-search #location-results strong{display:block}.broadcast-header-search #location-results span{font-size:12px}
.broadcast-header-search .location-results-title,.broadcast-header-search .location-credit{padding:6px 12px;font-size:11px;color:#45607a}
#producer-conditions{grid-template-columns:minmax(0,1fr);gap:0}#producer-conditions .producer-conditions-info[hidden]{display:none}
#producer-conditions .metrics.condition-tiles{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);align-items:stretch;align-content:stretch}
#producer-conditions .broadcast-temperature-card #temp{font-size:20px;white-space:nowrap;cursor:inherit}
#producer-conditions .broadcast-temperature-note{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0}
#producer-conditions .broadcast-temperature-note #weather-icon{width:22px;height:22px;font-size:20px;flex:none}
#producer-conditions .broadcast-temperature-note #weather-icon svg{width:22px;height:22px}
#producer-conditions .broadcast-temperature-note #condition{margin:0;font-size:11px;line-height:1.25}
@media(min-width:851px){main{height:calc(100dvh - var(--broadcast-header-height,98px))}}
@media(min-width:851px) and (max-width:1399px){main{grid-template-rows:minmax(0,1fr) 290px}#producer-conditions{grid-template-columns:minmax(0,1fr)}#producer-conditions .metrics.condition-tiles{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px;align-content:stretch}#producer-conditions .condition-tile{min-height:0;padding:5px}#producer-conditions .condition-dial,#producer-conditions .condition-compass{width:50px;height:50px;margin:2px auto}#producer-conditions .condition-glyph,#producer-conditions .condition-glyph svg{height:46px}#producer-conditions .condition-main{font-size:20px}}
@media(max-width:850px){header{flex-wrap:wrap}header .actions{width:100%;justify-content:flex-start}.broadcast-header-search{max-width:none;flex:1 1 180px}.broadcast-city-popover{max-width:90vw;width:100%}#producer-conditions .metrics.condition-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:500px){#producer-conditions .metrics.condition-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

body.broadcast-conditions-minimized #producer-conditions{display:none}

/* Keep Close in the same control row instead of allowing it to wrap by itself. */
body>header>div:first-child{min-width:0;flex:0 1 360px}
body>header .actions{flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
body>header .actions>button{flex:none;white-space:nowrap}
body>header #close-window{width:44px;min-width:44px;padding:8px;line-height:1}
@media(min-width:851px) and (max-width:1399px){body>header .actions>button{font-size:13px;padding:9px 10px}.broadcast-header-search{min-width:120px;flex-basis:180px}.broadcast-header-search input{font-size:13px;padding:9px 7px}}
@media(max-width:850px){
 body>header>div:first-child{flex:1 1 100%}
 body>header .actions{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1.25fr) minmax(0,1fr) 38px;gap:6px;width:100%;flex:none}
 body>header .broadcast-header-search{grid-column:1/-1;grid-row:1;min-width:0;width:100%;max-width:none}
 body>header .actions>button{grid-row:2;min-width:0;padding:9px 4px;font-size:clamp(10px,3vw,13px);line-height:1.2;min-height:40px}
 body>header #broadcast-conditions-toggle{grid-column:1}
 body>header #location-retry{grid-column:2}
 body>header #fullscreen{grid-column:3}
 body>header #close-window{grid-column:4;width:38px;min-width:38px;font-size:22px;padding:6px}
}
@media(max-width:500px){body>header{padding:12px 10px}}
@media(max-width:360px){body>header .actions{gap:3px;grid-template-columns:minmax(0,1.65fr) minmax(0,1.4fr) minmax(0,1fr) 34px}body>header .actions>button{padding:8px 2px}body>header #close-window{width:34px;min-width:34px;padding:5px}}
