/* Weather — component styles for the full page (.weather2) and the Home strip
   (.wx-preview). Shares site tokens (--surface, --line, --green, --cat-*). Only the
   weather-specific pieces live here; the header/nav/rail chrome is not duplicated. */

.weather2{padding:20px 24px 40px;display:flex;flex-direction:column;gap:22px}
.weather2 .page-head .kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.weather2 .page-head h1{font-size:30px;font-weight:700;font-family:var(--display,'Figtree',sans-serif);letter-spacing:-.02em;line-height:1.18}
.weather2 .page-head p{color:var(--muted);font-size:15px;margin-top:6px;max-width:62ch}

/* fallbacks for the category accents this page uses (already defined site-wide for News/Places) */
.weather2,.wx-preview{--cat-blue:#3b7fd4;--cat-amber:#c67e18;--cat-teal:#1f9c93;--cat-rose:#d6547a;--cat-slate:#64748b}

/* section jump pills + updated status */
.wx-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wx-nav .nn-pills{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto}
.wx-nav .nn-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;white-space:nowrap}
.wx-nav .nn-pill.on{color:#fff;background:var(--green);border-color:var(--green)}
.wx-nav .nn-pill.cat-amber{--cat:var(--cat-amber)}.wx-nav .nn-pill.cat-blue{--cat:var(--cat-blue)}.wx-nav .nn-pill.cat-teal{--cat:var(--cat-teal)}
.wx-nav .nn-dot{width:8px;height:8px;border-radius:50%;background:var(--cat,var(--green))}
.wx-updated{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap}
.wx-updated .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-bg,rgba(14,159,87,.1))}

.wx-body{display:flex;flex-direction:column;gap:22px}
.wx-body>div:empty{display:none}
.wx-status{color:var(--muted);font-size:14px;padding:8px 2px}
.wx-credit{font-size:11px;color:var(--faint);opacity:.85;margin-top:2px;line-height:1.5}

/* active alert + reassurance */
.wx-alert{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:16px;box-shadow:var(--shadow);background:color-mix(in srgb,var(--cat-amber) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--cat-amber) 32%,transparent)}
.wx-alert+.wx-alert{margin-top:10px}
.wx-alert .a-icon{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--cat-amber) 16%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat-amber) 30%,transparent)}
.wx-alert .a-b{min-width:0;flex:1}
.wx-alert .a-tag{display:inline-block;font-family:var(--display,sans-serif);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--cat-amber);padding:3px 9px;border-radius:7px;margin-bottom:7px}
.wx-alert h3{font-size:16px;font-weight:700}
.wx-alert p{font-size:13px;color:var(--copy,var(--text));margin-top:5px;max-width:70ch;line-height:1.5}
.wx-alert .a-meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.wx-alert .a-meta .sep{color:var(--faint)}
.wx-alert .a-read{margin-top:11px}
.wx-alert .a-read a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--cat-amber)}
.wx-alert .a-read svg{width:14px;height:14px}
.wx-noalert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--green-tint,#eafaf1);border:0;font-size:13px;font-weight:600;color:var(--green-strong,#0b7f45)}
.wx-noalert .na-ic{font-size:16px}

/* current conditions spotlight */
.now{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.now-hero{position:relative;display:grid;place-items:center;padding:26px;min-height:240px;background:linear-gradient(155deg,color-mix(in srgb,var(--cat-teal) 30%,var(--surface)),color-mix(in srgb,var(--cat-blue) 60%,var(--surface)))}
.now-glyph{font-size:82px;line-height:1;filter:drop-shadow(0 6px 12px rgba(16,24,40,.18))}
.now-cap{position:absolute;left:14px;top:14px;font-family:var(--display,sans-serif);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);backdrop-filter:blur(4px);padding:5px 10px;border-radius:8px}
.now-b{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.now-eyebrow{font-family:var(--display,sans-serif);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cat-teal)}
.now-temp{display:flex;align-items:flex-start;gap:16px;margin-top:6px}
.now-temp .t{font-family:var(--display,sans-serif);font-weight:800;font-size:66px;line-height:.92;letter-spacing:-.04em}
.now-temp .t sup{font-size:26px;font-weight:700;top:-.5em}
.now-cond{padding-top:6px}
.now-cond .c{font-size:19px;font-weight:700}
.now-cond .fl{font-size:13.5px;font-weight:600;color:var(--muted);margin-top:2px}
.now-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.now-stats .stat{background:var(--surface-2,#f6f8f9);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.now-stats .stat .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:5px}
.now-stats .stat .v{font-size:16px;font-weight:700;margin-top:3px}
.now-obs{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--muted);font-size:12.5px;font-weight:600;flex-wrap:wrap}
.now-obs .src-mark{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-family:var(--display,sans-serif);font-weight:700;font-size:10px;background:var(--cat-teal);flex:none}
.now-obs .sep{color:var(--faint)}

/* section head — shared rhythm with News/Places */
.wx-sec-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.wx-sec-head .wx-tile{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:17px;background:color-mix(in srgb,var(--cat,var(--green)) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--green)) 26%,transparent)}
.wx-sec-head.cat-blue{--cat:var(--cat-blue)}.wx-sec-head.cat-teal{--cat:var(--cat-teal)}.wx-sec-head.cat-slate{--cat:var(--cat-slate)}
.wx-sec-head h2{font-size:19px;font-weight:700;font-family:var(--display,sans-serif)}
.wx-sec-head .wx-rule{flex:1;height:1px;background:var(--line)}
.wx-sec-head .cnt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}

/* 7-day cards */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 10px;text-align:center;transition:box-shadow .15s,transform .15s,border-color .15s}
.day:hover{box-shadow:0 2px 4px rgba(16,24,40,.06),0 8px 20px rgba(16,24,40,.08);transform:translateY(-1px);border-color:var(--cat-blue)}
.day.today{border-color:var(--green-line,rgba(14,159,87,.28));background:linear-gradient(180deg,var(--green-tint,#eafaf1),var(--surface))}
.day .dow{font-family:var(--display,sans-serif);font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.day.today .dow{color:var(--green-strong,#0b7f45)}
.day .g{font-size:32px;margin:8px 0 6px;line-height:1}
.day .hi{font-family:var(--display,sans-serif);font-size:20px;font-weight:800;letter-spacing:-.02em}
.day .lo{font-size:14px;font-weight:700;color:var(--faint);margin-top:1px}
.day .pop{display:inline-flex;align-items:center;gap:3px;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--cat-blue)}
.day .pop.dry{color:var(--faint)}
.day .desc{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.35;min-height:2.7em}

/* hourly strip */
.hourly-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -2px}
.hourly{display:flex;gap:9px;padding:2px}
.hour{flex:none;width:80px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:12px 8px;text-align:center}
.hour.now-cell{border-color:var(--cat-teal);background:linear-gradient(180deg,color-mix(in srgb,var(--cat-teal) 8%,var(--surface)),var(--surface))}
.hour .h{font-size:12px;font-weight:700;color:var(--muted)}
.hour.now-cell .h{color:var(--cat-teal)}
.hour .g{font-size:24px;margin:7px 0 5px;line-height:1}
.hour .t{font-family:var(--display,sans-serif);font-size:17px;font-weight:800}
.hour .p{font-size:11px;font-weight:700;color:var(--cat-blue);margin-top:6px}
.hour .p.dry{color:var(--faint)}
.hour .w{font-size:10.5px;font-weight:600;color:var(--faint);margin-top:4px}

/* detailed narrative periods */
.periods{display:flex;flex-direction:column;gap:10px}
.period{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.period .pg{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--cat-blue) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat-blue) 20%,transparent)}
.period .pb{min-width:0;flex:1}
.period .wx-pt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.period .wx-pt b{font-family:var(--display,sans-serif);font-size:15px;font-weight:700}
.period .wx-pt .deg{font-family:var(--display,sans-serif);font-weight:800;font-size:16px}
.period .wx-pt .deg.hi{color:var(--cat-rose)}.period .wx-pt .deg.lo{color:var(--cat-blue)}
.period .pd{font-size:13px;color:var(--copy,var(--text));margin-top:5px;line-height:1.5}

/* degraded state */
.weather2 .retry-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface-2,#f6f8f9);border:1px dashed var(--line-2);border-radius:12px;font-size:13px;color:var(--muted)}
.weather2 .retry-row .wx-retry{margin-left:auto}

/* ---------- Home preview strip ---------- */
.wx-preview{margin:0}
.wx-preview .wxp-now,.wx-preview .wxp-alert{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s}
.wx-preview .wxp-now:hover,.wx-preview .wxp-alert:hover{box-shadow:0 2px 4px rgba(16,24,40,.06),0 8px 20px rgba(16,24,40,.08)}
.wxp-glyph{font-size:38px;line-height:1;flex:none}
.wxp-mid{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.wxp-temp{font-family:var(--display,sans-serif);font-size:32px;font-weight:800;letter-spacing:-.03em}
.wxp-line{display:flex;flex-direction:column;min-width:0}
.wxp-line b{font-size:15px;font-weight:700}
.wxp-hilo{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}
.wxp-go{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:var(--green)}
/* alert variant of the strip */
.wx-preview.has-alert .wxp-alert{background:color-mix(in srgb,var(--cat-amber) 9%,var(--surface));border-color:color-mix(in srgb,var(--cat-amber) 34%,transparent)}
.wxp-ic{font-size:26px;flex:none}
.wxp-b{display:flex;flex-direction:column;min-width:0;flex:1}
.wxp-b b{font-size:15px;font-weight:700;color:var(--cat-amber)}
.wxp-sub{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-preview.has-alert .wxp-go{color:var(--cat-amber)}

@media(max-width:980px){.days{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.weather2{padding:16px 16px 32px}.now{grid-template-columns:1fr}.now-hero{min-height:170px}.now-stats{grid-template-columns:repeat(2,1fr)}.weather2 .page-head h1{font-size:25px}.days{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.days{grid-template-columns:repeat(2,1fr)}}