/* 7-day outlook (homepage). Uses the site's colour variables, so dark mode follows automatically. */
.wx-band { padding: 18px 0 16px; }
.wx-band[hidden] { display: none; }
.wx-band .band-head { margin-bottom: 10px; flex-wrap: wrap; }
.wx-sub { font-size: .85rem; color: var(--muted); }
.wx-ic { width: 30px; height: 30px; flex: none; color: var(--gold-ink); }
.wx-ic.xs { width: 13px; height: 13px; color: currentColor; vertical-align: -2px; }
.wx-alerts { display: grid; gap: 8px; margin: 0 0 12px; }
.wx-alerts[hidden] { display: none; }
.wx-alert { border-radius: 12px; border: 1px solid #e3b26b; background: #fdf3e2; color: #5a3a0c; }
.wx-alert.sev { border-color: #c9424f; background: #fbe7e9; color: #6b1520; }
.wx-alert summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.wx-alert summary::-webkit-details-marker { display: none; }
.wx-alert summary .wx-ic { width: 22px; height: 22px; color: currentColor; }
.wx-at { flex: 1; } .wx-at strong { font-weight: 700; }
.wx-amore { font-size: .8rem; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.wx-alert[open] .wx-amore { text-decoration: none; opacity: .7; }
.wx-ahead, .wx-adesc { margin: 0; padding: 0 14px 10px 46px; font-size: .88rem; }
.wx-ahead { font-weight: 600; }
.wx-amore2 { margin: 0; font-size: .82rem; color: var(--muted); }
[data-theme="dark"] .wx-alert { background: #33240b; color: #f6d9a6; border-color: #8a6420; }
[data-theme="dark"] .wx-alert.sev { background: #3a1419; color: #f8c2c9; border-color: #8f2e3a; }
.wx-umb { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: .93rem; }
.wx-umb[hidden] { display: none; }
.wx-umb .wx-ic { width: 24px; height: 24px; }
.wx-umb.yes { border-left: 4px solid #2f6fae; } .wx-umb.yes .wx-ic { color: #2f6fae; }
.wx-umb.no { border-left: 4px solid var(--gold); }
[data-theme="dark"] .wx-umb.yes { border-left-color: #6fb4ee; } [data-theme="dark"] .wx-umb.yes .wx-ic { color: #6fb4ee; }
.wx-days { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.wx-btn { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.wx-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); }
.wx-btn[aria-expanded="true"] { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); background: var(--surface-2); }
.is-today .wx-btn { border-top: 3px solid var(--gold); }
.wx-dname { font-weight: 700; font-size: .92rem; }
.wx-date { font-size: .75rem; color: var(--muted); margin-top: -4px; }
.wx-btn .wx-ic { margin: 4px 0 2px; }
.wx-temps { display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.wx-hi { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.wx-lo { color: var(--muted); font-size: .95rem; }
.wx-pop { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wx-pop.wet { color: #2f6fae; font-weight: 700; } [data-theme="dark"] .wx-pop.wet { color: #6fb4ee; }
.wx-short { font-size: .78rem; line-height: 1.3; color: var(--ink-2); }
.wx-detail { margin-top: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); animation: drop .16s ease-out; }
.wx-detail[hidden] { display: none; }
.wx-dh { font-size: 1.05rem; margin-bottom: 8px; }
.wx-drow { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.wx-drow + .wx-drow { border-top: 1px solid var(--line); padding-top: 10px; }
.wx-drow p { margin: 0; } .wx-dname2 { font-size: .85rem; color: var(--ink-2); } .wx-dtext { margin-top: 2px !important; }
.wx-src { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.wx-src a { color: var(--gold-ink); font-weight: 600; }
@media (max-width: 960px) {
  .wx-days { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; }
  .wx-day { flex: 0 0 112px; scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .wx-day { flex-basis: 104px; }
  .wx-ahead, .wx-adesc { padding-left: 14px; }
}
@media print { .wx-band { display: none !important; } }