/* Compact weather, six generated outfit cells. No temperature above the figure. */
.topbar{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:22px;height:80px}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:24px;min-width:0}
.header-right .desktop-nav{gap:22px;white-space:nowrap}
.weather-button{display:flex;align-items:center;justify-content:center;gap:4px;background:transparent;border:0;padding:0;min-width:122px;min-height:60px;line-height:1.1;border-radius:12px;text-align:left}
.weather-button:hover{background:#eaf0dc}
.weather-figure{display:block;width:64px;height:64px;flex:0 0 64px;background-image:url('weather-girl-blonde.png');background-size:300% 200%;background-repeat:no-repeat;background-position:0 0}
.weather-figure[hidden]{display:none}
.weather-figure[data-outfit=warm]{background-position:50% 0}
.weather-figure[data-outfit=rain-cold]{background-position:100% 0}
.weather-figure[data-outfit=rain-warm]{background-position:0 100%}
.weather-figure[data-outfit=sun-cold]{background-position:50% 100%}
.weather-figure[data-outfit=sun-warm]{background-position:100% 100%}
.weather-copy{display:flex;flex-direction:column;gap:5px}
#weather-temp{font-size:28px;letter-spacing:-.045em;font-weight:750}
#weather-caption{font-size:9px;white-space:nowrap;color:#63715e}
.weather-button:not([data-state=ready]) #weather-temp{font-size:14px;letter-spacing:0}
.weather-button[data-state=error] #weather-temp{font-size:25px}
.weather-detail-value{font-size:26px;font-weight:700;margin:8px 0}
.weather-detail-source a{text-decoration:underline;text-underline-offset:3px}
footer{display:grid;grid-template-columns:1fr auto;align-items:center}
footer .footer-video{grid-column:1/-1;display:flex;justify-content:center;border-top:1px solid #e2e6db;padding-top:18px}
.footer-video .king-trigger{display:flex;align-items:center;gap:12px;width:auto;height:60px;padding:4px 16px 4px 7px;font-size:13px;border-radius:12px}
.footer-video .king-trigger img{width:30px;height:50px;border-radius:6px}
.footer-video .king-play{position:static;width:24px;height:24px;flex-shrink:0}
@media(min-width:761px) and (max-width:1100px){
 .topbar{grid-template-columns:1fr auto 1fr;height:auto;min-height:80px;padding-block:6px 12px;row-gap:6px}
 .header-right{display:contents}
 .topbar .brand{grid-column:1;grid-row:1}
 .weather-button{grid-column:2;grid-row:1}
 .topbar .header-actions{grid-column:3;grid-row:1;justify-self:end}
 .topbar .desktop-nav{grid-column:1/-1;grid-row:2;justify-self:center}
}
@media(max-width:760px){
 .topbar{height:73px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
 .topbar .brand{--brand-size:clamp(96px,28vw,128px);width:var(--brand-size)}
 .topbar .logo-window{width:var(--brand-size);height:calc(var(--brand-size)*.16)}
 .topbar .logo-window img{width:var(--brand-size);height:calc(var(--brand-size)*.5);transform:translateY(calc(var(--brand-size)*-.165))}
 .header-right{gap:0}
 .weather-button{justify-self:center;min-width:100px;gap:1px}
 .weather-figure{width:60px;height:60px;flex-basis:60px}
 #weather-temp{font-size:25px}
 #weather-caption{font-size:8px}
 footer{grid-template-columns:1fr}
}

/* An empty caption must not reserve a second row for a resolved location. */
#weather-caption[hidden]{display:none}
@media(max-width:360px){#weather-temp{font-size:22px}.weather-figure{width:54px;height:54px;flex-basis:54px}}

/* Celsius remains beside the figure, even on narrow phones. */
#weather-temp{white-space:nowrap;font-size:25px}
@media(max-width:760px){#weather-temp{font-size:20px}.weather-figure{width:52px;height:52px;flex-basis:52px}.weather-button{min-width:112px}}
@media(max-width:360px){#weather-temp{font-size:18px}.weather-figure{width:46px;height:46px;flex-basis:46px}}

.weather-location-status{background:#edf1e2;border-radius:10px;padding:12px;font-size:13px}