/* F3 "Weather where you are" homepage section. Uses the site's color tokens so light and dark both work. */
.wx-section{padding:72px 0;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}
.wx-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:28px}
.wx-head h2{margin:0}
.wx-head p{color:var(--color-text-muted);margin:12px 0 0;max-width:46ch}
#wx-form{display:flex;gap:10px;align-items:stretch;max-width:440px;justify-self:end;width:100%}
#wx-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#wx-zip{flex:1;min-width:0;font:inherit;font-size:20px;font-weight:700;letter-spacing:.08em;padding:12px 16px;border:1.5px solid var(--color-border);border-radius:999px;background:var(--color-bg);color:var(--color-text)}
#wx-zip:focus{outline:2px solid var(--color-primary);outline-offset:2px}
#wx-form .btn{min-height:52px;padding-inline:24px;font-size:15px}
#wx-msg{color:#A8421C;font-weight:600;min-height:1.4em;margin:6px 0 0}
[data-theme=dark] #wx-msg{color:#FF9B7A}
.wx-hint{font-size:13px;color:var(--color-text-muted);margin:8px 0 0}
.wx-hint button{background:none;border:0;padding:0;font:inherit;color:var(--color-primary);font-weight:700;text-decoration:underline;cursor:pointer}
.wx-loading{display:flex;align-items:center;gap:12px;padding:28px 0;color:var(--color-text-muted)}
.wx-loading span{width:18px;height:18px;border-radius:50%;border:3px solid var(--color-border);border-top-color:var(--color-primary);animation:wxspin .8s linear infinite}
@keyframes wxspin{to{transform:rotate(360deg)}}
.wx-alerts{display:grid;gap:8px;margin-bottom:16px}
.wx-alert{border-radius:12px;padding:12px 16px;background:#FFE9E0;color:#5B1F08;border:1px solid #F3B49C}
.wx-alert.hi{background:#FDE2E2;border-color:#E9A0A0;color:#5E0B0B}
.wx-alert summary{cursor:pointer;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;list-style:none}
.wx-alert summary::-webkit-details-marker{display:none}
.wx-alert summary b{font-size:16px}
.wx-alert summary span{font-size:13px;opacity:.85}
.wx-alert p{font-size:14px;margin:8px 0 0;white-space:pre-line}
.wx-allclear{font-size:14px;color:var(--color-text-muted);margin-bottom:16px;display:flex;gap:8px;align-items:center}
.wx-allclear::before{content:"";width:10px;height:10px;border-radius:50%;background:#5E8C3A;flex:none}
.wx-now{display:grid;grid-template-columns:1fr auto 1.2fr;gap:28px;align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:24px 28px}
.wx-zip{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--color-primary)}
.wx-place h3{margin:4px 0 4px;font-size:clamp(1.5rem,1rem + 1.2vw,2rem);letter-spacing:-.02em}
.wx-place p{margin:0;font-size:13px;color:var(--color-text-muted)}
.wx-temp{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.wx-ico{font-size:52px;line-height:1;grid-row:1/3}
.wx-deg{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1}
.wx-cond{font-size:15px;color:var(--color-text-muted);max-width:18ch}
.wx-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:0}
.wx-facts div{border-top:1px solid var(--color-divider);padding-top:8px}
.wx-facts dt{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.wx-facts dd{margin:2px 0 0;font-size:18px;font-weight:700}
.wx-facts dd small{font-size:12px;color:var(--color-text-muted);font-weight:600}
.wx-small{font-size:12.5px;color:var(--color-text-muted);margin:8px 0 0}
.wx-now .wx-small{grid-column:1/-1;margin:0}
.wx-brief{margin-top:24px}
.wx-brief h4,.wx-block h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text);margin:0 0 12px;font-weight:800}
.wx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.wx-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.wx-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#8FB06A}
.wx-card.lvl1::before{background:#E8AF34}.wx-card.lvl2::before{background:#FF7950}.wx-card.lvl3::before{background:#C2261B}
.wx-card .wx-k{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.wx-card b{font-size:18px;line-height:1.25}
.wx-card span:last-child{font-size:13px;color:var(--color-text-muted);line-height:1.4}
.wx-block{background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:20px 22px;margin-top:16px}
.wx-chart{width:100%;height:auto;display:block;max-height:220px}
.wx-chart .tline{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wx-chart .pb{fill:#9BC8D7;opacity:.75}
.wx-chart text{font-family:inherit;fill:var(--color-text-muted);font-size:11px;text-anchor:middle}
.wx-chart .tv{fill:var(--color-text);font-weight:700;font-size:12px}
.key-line,.key-bar{display:inline-block;width:16px;vertical-align:middle;margin-right:6px}
.key-line{height:3px;background:var(--color-primary);border-radius:2px}.key-bar{height:10px;background:#9BC8D7;border-radius:2px}
.wx-days{list-style:none;margin:0;padding:0}
.wx-days li{display:grid;grid-template-columns:92px 34px 1fr 56px 40px minmax(80px,180px) 40px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--color-divider);font-size:15px}
.wx-days li:first-child{border-top:0}
.wx-days .d{font-weight:700}.wx-days .i{font-size:22px;text-align:center}.wx-days .t{color:var(--color-text-muted);font-size:14px}
.wx-days .p{font-size:13px;color:#2F7A96;font-weight:700;text-align:right}
[data-theme=dark] .wx-days .p{color:#9BC8D7}
.wx-days .lo{color:var(--color-text-muted);text-align:right}.wx-days .hi{font-weight:800}
.wx-days .rng{height:6px;border-radius:99px;background:var(--color-surface);position:relative}
.wx-days .rng i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#9BC8D7,#E8AF34,#FF7950)}
.wx-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.wx-two .wx-block{margin-top:16px}
.wx-radar{height:300px;border-radius:12px;overflow:hidden;background:var(--color-surface)}
.wx-comm{grid-template-columns:1fr 1fr}
.wx-link{display:inline-block;margin-top:12px;font-weight:700;color:var(--color-primary);text-decoration:none}
.wx-link:hover{text-decoration:underline}
.wx-src{margin-top:18px}
@media (max-width:960px){.wx-head{grid-template-columns:minmax(0,1fr);gap:20px}#wx-form{justify-self:start}.wx-now{grid-template-columns:1fr auto}.wx-now .wx-facts{grid-column:1/-1}.wx-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .wx-section{padding:48px 0}
  .wx-now{grid-template-columns:1fr;padding:18px;gap:16px}
  .wx-deg{font-size:54px}.wx-ico{font-size:44px}
  .wx-days li{grid-template-columns:70px 28px 1fr 40px 34px;gap:8px;font-size:14px}
  .wx-days .t,.wx-days .rng{display:none}
  .wx-days li{grid-template-columns:76px 28px 1fr 34px 38px}
  .wx-days .p{text-align:left}
  .wx-block{padding:16px}
  .wx-radar{height:240px}
  #wx-zip{font-size:18px}
}

@media (max-width:420px){#wx-form .btn{padding-inline:16px}.wx-head h2 br{display:none}}

/* compact summary + fold (Oct 2026) */
.wx-sum{display:flex;align-items:center;gap:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:16px 20px}
.wx-sum .wx-ico{font-size:40px;line-height:1;flex:none}
.wx-sum-main{flex:1;min-width:0}
.wx-sum-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wx-sum-deg{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wx-sum-cond{font-size:16px;font-weight:700}
.wx-sum p{margin:4px 0 0;font-size:14px;color:var(--color-text-muted)}
.wx-sum p.wx-sum-watch{color:var(--color-text);font-weight:600}
.wx-sum-watch::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#E0A030;margin-right:8px}
.wx-sum-watch.lvl3::before{background:#D7263D}
.wx-toggle{flex:none;font:inherit;font-weight:700;font-size:14px;border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-text);border-radius:999px;padding:10px 16px;cursor:pointer;display:inline-flex;gap:10px;align-items:center;min-height:44px}
.wx-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}
.wx-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.wx-toggle-i{font-size:18px;line-height:1;font-weight:800}
.wx-more{margin-top:20px}
.wx-more[hidden]{display:none}
.wx-sum + .wx-more + .wx-src,.wx-sum + .wx-more[hidden] + .wx-src{margin-top:12px}
@media(max-width:640px){.wx-sum{flex-wrap:wrap;padding:14px 16px;gap:12px}.wx-sum .wx-ico{font-size:30px;align-self:flex-start;margin-top:2px}.wx-sum-deg{font-size:32px}.wx-toggle{width:100%;justify-content:center}}