.weather { --weather-ink:#142947; --weather-muted:#526783; --weather-border:#dbe6f2; }
.weather-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:12.5rem; margin:1rem 0 1.25rem; padding:clamp(1.5rem,4vw,3rem); overflow:hidden; border-radius:22px; background:radial-gradient(ellipse at 85% 110%,#245fa8 0,transparent 62%),linear-gradient(115deg,#10294b,#164986); color:#fff; }
.weather-hero h1 { margin:.45rem 0; font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.05em; line-height:1.05; }
.weather-hero p { max-width:32rem; margin:.7rem 0 0; color:#e0edff; }
.weather-kicker,.weather-label { font-size:.72rem; font-weight:800; letter-spacing:.11em; }
.weather-kicker { display:flex; align-items:center; gap:.55rem; color:#bee3ff; }
.weather-kicker span { width:.55rem; height:.55rem; border-radius:50%; background:#fbbf24; }
.weather-art { width:clamp(6rem,20vw,14rem); flex:none; }
.weather-layout { display:grid; grid-template-columns:minmax(16rem,1fr) minmax(0,2.25fr); gap:1.25rem; align-items:start; }
.weather-panel { min-width:0; padding:clamp(1rem,2.5vw,1.75rem); border:1px solid var(--weather-border); border-radius:18px; background:#fff; color:var(--weather-ink); box-shadow:0 10px 30px #1936570a; }
.weather-panel h2 { margin:.15rem 0 .85rem; font-size:1.25rem; line-height:1.2; }
.weather-label { color:#456083; margin:0 0 .4rem; }
.weather-query { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; }
.weather input { width:100%; min-width:0; padding:.7rem; color:inherit; border:1px solid #b9cbe0; border-radius:9px; font:inherit; }
.weather :focus-visible { outline:2px solid #075bff; outline-offset:3px; }
.weather-query .button { padding:.55rem .75rem; min-height:0; }
.weather-message,.weather-credit { color:var(--weather-muted); font-size:.88rem; }
.weather-message:empty { display:none; }
.weather-places { list-style:none; padding:0; margin:.6rem 0; }
.weather-places li { display:flex; gap:.4rem; align-items:stretch; margin:.3rem 0; }
.weather-place { flex:1; min-width:0; text-align:left; border:1px solid var(--weather-border); border-radius:8px; padding:.65rem; background:#f6faff; color:inherit; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.weather-place:hover { background:#e9f3ff; }
.weather-custom,.weather-saved { border-top:1px solid var(--weather-border); margin-top:1rem; padding-top:1rem; }
.weather-custom summary { cursor:pointer; color:#245e9f; font-weight:700; }
.weather-custom label { display:block; margin:.55rem 0; font-size:.86rem; }
.weather-coordinates { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.weather-report-top { display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start; }
.weather-report-top h2 { font-size:clamp(1.3rem,3vw,2rem); overflow-wrap:anywhere; }
.weather-report-top button { flex:none; }
.weather-now { display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; align-items:center; padding:1.1rem; background:#edf6ff; border:1px solid #d6e8fd; border-radius:14px; }
.weather-temp { display:block; font-size:clamp(2.35rem,6vw,4rem); letter-spacing:-.07em; line-height:1; }
.weather-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; }
.weather-stats div { padding:.55rem; border-radius:8px; background:#fff; }
.weather-stats dt { font-size:.76rem; color:var(--weather-muted); }
.weather-stats dd { margin:0; font-weight:700; font-size:.95rem; }
.weather-hourly { margin:1rem 0 0; }
.weather-hours { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(7rem,1fr); gap:.55rem; list-style:none; padding:.2rem .2rem .7rem; overflow-x:auto; }
.weather-hours li { display:grid; gap:.2rem; align-content:start; padding:.65rem; border:1px solid var(--weather-border); border-radius:9px; font-size:.85rem; }
.weather-hours span { color:var(--weather-muted); }
.weather-credit a { color:#1456a0; text-decoration:underline; }
.weather-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:760px) { .weather-layout { grid-template-columns:1fr; } .weather-hero { min-height:0; } }
@media(max-width:420px) { .weather-art { display:none; } .weather-now { grid-template-columns:1fr; } }
.weather .small-button { padding:.55rem .7rem; border-radius:8px; font-size:.82rem; cursor:pointer; }
.weather .small-button:disabled { cursor:default; }
.weather-report-top h2 { scroll-margin-top:7rem; }