/* Scoped weather surfaces: charcoal, warm grey and gold. */
#weatherModal,.wx-location-dialog,#weather{--wx-bg:#262729;--wx-soft:#ffffff08;--wx-line:#d8c37538;--wx-ink:#f4f0e5;--wx-muted:#c6c2b7;--wx-gold:#e2cc82}
html.light-mode #weatherModal,html.light-mode .wx-location-dialog,html.light-mode #weather{--wx-bg:#faf9f4;--wx-soft:#8e78300a;--wx-line:#99813640;--wx-ink:#302e27;--wx-muted:#696352;--wx-gold:#826823}
#weather.wx-widget{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:11px 15px;min-height:64px;height:auto;box-sizing:border-box;border:1px solid var(--wx-line);border-radius:18px;background:linear-gradient(120deg,#bda65f18,transparent),var(--wx-bg);color:var(--wx-ink);box-shadow:0 5px 20px #0002;transition:box-shadow .25s,transform .25s}
#weather.wx-widget:hover{transform:translateY(-2px);box-shadow:0 8px 24px #bca55f25}#weather.wx-widget>.fa{font-size:25px;color:var(--wx-gold)}#weather.wx-widget>.fa:last-child{font-size:17px}#weather .wx-widget-copy{display:flex;flex-direction:column;flex:1;min-width:0;text-align:left}#weather .wx-widget-copy strong{font-size:12px;color:var(--wx-ink);line-height:1.5}#weather .wx-widget-copy small{font-size:10px;color:var(--wx-muted);line-height:1.5}#weather .wx-widget-temp{font-size:27px;color:var(--wx-gold);font-variant-numeric:tabular-nums}
#weatherModal .wx-panel{width:min(820px,calc(100vw - 28px));max-width:820px;max-height:88dvh;overflow:auto;box-sizing:border-box;padding:24px;border-radius:24px;border:1px solid var(--wx-line);background:linear-gradient(130deg,#bda65f14,transparent 50%),var(--wx-bg);color:var(--wx-ink);box-shadow:0 24px 80px #0006;scrollbar-width:thin;scrollbar-color:#bda65f66 transparent;text-align:left}
.wx-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;margin-bottom:18px;border-bottom:1px solid var(--wx-line)}.wx-header h3{font-size:20px;line-height:1.5;color:var(--wx-ink);margin:0}.wx-header small{font-size:10px;letter-spacing:2px;color:var(--wx-gold)}.wx-icon-button{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:1px solid var(--wx-line);border-radius:12px;background:var(--wx-soft);color:var(--wx-gold);font-size:18px;cursor:pointer}
.wx-summary{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:18px;border:1px solid var(--wx-line);border-radius:18px;background:var(--wx-soft);color:var(--wx-ink)}.wx-current{display:grid;grid-template-columns:auto auto;gap:0 16px;align-items:center}.wx-current i{font-size:40px;color:var(--wx-gold);grid-row:span 2}.wx-current strong{font-size:44px;line-height:1.2;color:var(--wx-ink)}.wx-current span{font-size:12px;color:var(--wx-muted)}.wx-metrics{display:flex;gap:20px}.wx-metrics small,.wx-metrics b{display:block;white-space:nowrap}.wx-metrics small{font-size:10px;color:var(--wx-muted)}.wx-metrics b{font-size:14px;color:var(--wx-ink)}
.wx-tools{display:flex;gap:10px;margin-top:16px}.wx-button{display:flex;justify-content:center;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;border:1px solid var(--wx-line);background:var(--wx-soft);color:var(--wx-gold);font-size:12px;cursor:pointer}.wx-button:hover{background:#bda65f22}.wx-button:disabled{opacity:.5;cursor:wait}.wx-notice{font-size:11px!important;line-height:1.7!important;margin:12px 0!important;color:var(--wx-muted)!important}
.wx-days,.wx-hours{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:#bda65f66 transparent}.wx-day,.wx-hour{flex:0 0 114px;border:1px solid var(--wx-line);border-radius:15px;padding:12px 8px;background:var(--wx-soft);color:var(--wx-ink);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-sizing:border-box}.wx-day{cursor:pointer;transition:background .2s,transform .2s}.wx-day:hover{transform:translateY(-2px)}.wx-day[aria-pressed=true]{background:#bda65f30;border-color:var(--wx-gold);box-shadow:inset 0 0 0 1px var(--wx-gold)}.wx-day strong,.wx-hour strong{font-size:11px;white-space:nowrap}.wx-day i,.wx-hour i{font-size:22px;color:var(--wx-gold)}.wx-day span{font-size:14px}.wx-day small,.wx-hour small{font-size:10px;color:var(--wx-muted)}.wx-hour b{font-size:20px;color:var(--wx-ink)}.wx-hour span{font-size:10px;min-height:30px}.wx-hour-title{font-size:14px!important;color:var(--wx-ink)!important;margin:12px 0 8px}.wx-source{font-size:10px!important;color:var(--wx-muted)!important;line-height:1.7!important;margin:12px 0 0!important}.wx-source a{display:inline;color:var(--wx-gold)}
.wx-location-dialog{margin:auto;padding:22px;width:min(440px,calc(100vw - 28px));box-sizing:border-box;border:1px solid var(--wx-line);border-radius:22px;background:var(--wx-bg);color:var(--wx-ink);max-height:90dvh;overflow:auto;box-shadow:0 20px 70px #0006}.wx-location-dialog::backdrop{background:#0008;backdrop-filter:blur(6px)}.wx-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wx-fields label{min-width:0}.wx-fields label span{display:block;font-size:12px;margin:0 0 6px;color:var(--wx-muted)}.wx-fields select{width:100%;padding:12px 8px;border-radius:12px;border:1px solid var(--wx-line);background:var(--wx-bg);color:var(--wx-ink);font-size:13px}.wx-help{font-size:12px;line-height:1.7;color:var(--wx-muted);margin-bottom:16px}.wx-save{width:100%;margin-top:20px;background:#bda65f20}.wx-panel button:focus-visible,.wx-location-dialog :is(button,select):focus-visible{outline:2px solid var(--wx-gold);outline-offset:3px}
@media(max-width:600px){#weatherModal .wx-panel{padding:16px;max-height:86dvh;border-radius:20px}.wx-header h3{font-size:16px}.wx-summary{flex-direction:column;align-items:stretch;gap:14px;padding:14px}.wx-current{align-self:center}.wx-current strong{font-size:36px}.wx-current i{font-size:34px}.wx-metrics{justify-content:space-around;gap:8px}.wx-day{flex-basis:105px}.wx-hour{flex-basis:112px}.wx-tools>*{flex:1}.wx-button{padding:10px;font-size:11px}#weather.wx-widget{gap:8px;padding:9px 12px;min-height:58px}#weather .wx-widget-temp{font-size:24px}.wx-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#weather.wx-widget,.wx-day{transition:none}}

#weather.wx-widget{max-height:none;position:relative;inset:auto;transform:none;overflow:hidden}#weather .wx-widget-copy strong,#weather .wx-widget-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#weather .wx-widget-temp{flex-shrink:0}#weather.wx-widget>.fa{flex-shrink:0}
@media(max-width:480px){#weather.wx-widget{gap:7px;padding:8px}#weather.wx-widget>.fa:first-child{font-size:20px}#weather.wx-widget>.fa:last-child{display:none}#weather .wx-widget-copy strong{font-size:10px}#weather .wx-widget-copy small{font-size:9px}#weather .wx-widget-temp{font-size:22px}}

/* Keep the compact header footprint independent of forecast content. */
#weather.wx-widget{width:220px;max-width:100%;height:48px;min-height:48px;max-height:48px;padding:7px 10px;gap:8px;border-radius:14px;z-index:1}
#weather .wx-widget-temp{font-size:23px}#weather.wx-widget>.fa:first-child{font-size:21px}
@media(min-width:1025px){article>header>.wx-trigger{position:absolute;top:68px;right:30px;width:220px;max-width:40%;z-index:1}#weather.wx-widget{margin:0}}
@media(max-width:1024px){article>header>.wx-trigger{flex:0 1 180px;width:180px;max-width:52%}#weather.wx-widget{width:100%;margin:0;height:44px;min-height:44px;max-height:44px;padding:5px 8px;gap:6px}#weather .wx-widget-temp{font-size:21px}#weather.wx-widget>.fa:last-child{display:none}}
#weatherModal .wx-panel{position:relative;padding:0;overflow:hidden}
.wx-scroll{box-sizing:border-box;max-height:calc(88dvh - 2px);overflow:auto;overscroll-behavior:contain;padding:24px;scrollbar-width:none}
.wx-scroll::-webkit-scrollbar{display:none}.wx-scroll:focus-visible{outline:1px solid var(--wx-gold);outline-offset:-5px}
.wx-scroll-rail{position:absolute;right:5px;top:22px;bottom:22px;width:5px}.wx-scroll-rail[hidden]{display:none}
.wx-scroll-thumb{width:5px;min-height:32px;touch-action:none;cursor:grab;background:linear-gradient(to bottom,transparent,var(--wx-gold) 15%,var(--wx-gold) 85%,transparent);clip-path:polygon(50% 0,100% 18%,100% 82%,50% 100%,0 82%,0 18%);opacity:.65}.wx-scroll-thumb:active{cursor:grabbing;opacity:1}
.wx-tools{padding-top:16px;margin-top:16px;border-top:1px solid var(--wx-line)}
.wx-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.wx-location-dialog{scrollbar-width:thin;scrollbar-color:var(--wx-gold) transparent}.wx-location-dialog::-webkit-scrollbar{width:4px}.wx-location-dialog::-webkit-scrollbar-track{margin-block:22px}.wx-location-dialog::-webkit-scrollbar-thumb{background:var(--wx-gold);border-radius:100%}
@media(max-width:600px){#weatherModal .wx-panel{padding:0}.wx-scroll{padding:16px;max-height:calc(86dvh - 2px)}.wx-metrics{text-align:center;gap:10px}.wx-scroll-rail{top:18px;bottom:18px;right:4px;width:4px}.wx-scroll-thumb{width:4px}}

/* Override the legacy column layout and reserve room for all three parts. */
@media(max-width:1024px){
 #weather.wx-widget{display:grid;grid-template-columns:18px minmax(0,max-content) auto;align-items:center;justify-content:center;column-gap:8px;padding:5px 8px;min-width:0}
 #weather.wx-widget>.fa:first-child{font-size:18px;text-align:center}
 #weather .wx-widget-copy{width:100%;min-width:0;gap:2px}
 #weather .wx-widget-copy strong{font-size:10px;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
 #weather .wx-widget-copy small{font-size:9px;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
 #weather .wx-widget-temp{font-size:20px;line-height:1;white-space:nowrap;min-width:0;margin:0}
}
@media(max-width:360px){
 #weather.wx-widget{grid-template-columns:15px minmax(0,max-content) auto;column-gap:6px;padding-inline:6px}
 #weather.wx-widget>.fa:first-child{font-size:15px}
 #weather .wx-widget-temp{font-size:18px}
 #weather .wx-widget-copy strong{font-size:9px}
 #weather .wx-widget-copy small{font-size:8px}
}

/* Keep the condition icon immediately before the temperature. */
#weather .wx-widget-copy{order:0}
#weather.wx-widget>.fa:first-child{order:1}
#weather .wx-widget-temp{order:2}
#weather.wx-widget>.fa:last-child{order:3}
@media(max-width:1024px){
 #weather.wx-widget{grid-template-columns:minmax(0,max-content) 18px auto;column-gap:5px}
 #weather .wx-widget-copy{margin-right:4px}
}
@media(max-width:360px){
 #weather.wx-widget{grid-template-columns:minmax(0,max-content) 15px auto;column-gap:4px}
 #weather .wx-widget-copy{margin-right:2px}
}

#weatherModal .wx-tools{justify-content:center}#weatherModal .wx-tools>.wx-button{flex:0 1 auto;min-width:110px}#weatherModal .wx-source{text-align:center}