/* Local Conditions section on /map only (weather widget + FEMA flood-zone reference layer). Linked only from views/map.html's own block: no other page loads this file, and it never redefines a rule from public/css/site.css. Colors reuse the tokens already defined on :root / [data-theme="dark"] in site.css (loaded first), so this file needs no theme block of its own. */ .local-conditions__grid { display: grid; gap: clamp(16px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; } /* Flood disclaimer: deliberately louder than the standard .notice (gold left border) because a wrong flood-zone impression is a real legal-exposure point -- it needs to read as a warning, not a footnote, right next to the toggle that reveals the layer. */ .notice--flood { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); font-size: .85rem; } /* ---------- weather widget ---------- */ .weather-now { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; } .weather-now__temp { font: 700 2.1rem var(--font-display); line-height: 1; } .weather-now__cond { font-size: .92rem; color: var(--ink-2); } .weather-now__meta { font-size: .78rem; color: var(--ink-2); margin-top: 2px; } .weather-forecast { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; } .weather-forecast__day { flex: 1 1 80px; text-align: center; font-size: .8rem; } .weather-forecast__day .wf-label { font-weight: 700; color: var(--ink); } .weather-forecast__day .wf-cond { color: var(--ink-2); font-size: .72rem; margin: 2px 0; } .weather-forecast__day .wf-range { color: var(--ink-2); } .weather-error { color: var(--warn); font-size: .88rem; }