/* Natural hazards page (app/hazards-page.php) — on top of housing.css (.housing2 cards, .page-head, .kicker).
   Approved design: hazards-mock-v2.html. Rating scale runs cool → warm; green only on the small kickers. */
.hazards2{--hz-r1:#7fb3d1;--hz-r2:#4f93bf;--hz-r3:#e2b34a;--hz-r4:#dd8a3e;--hz-r5:#c0492f;--hz-water:#2f7fb5;--hz-water-2:#8cc0e2}
.hazards2 .hl-chip{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 10px}
.hazards2 .hs-p{font-size:14.5px;color:var(--copy);max-width:66ch}
.hazards2 .hz-h3{font-family:var(--display);font-size:14px;margin:18px 0 0}
.hazards2 .hz-b1{--c:var(--hz-r1)}.hazards2 .hz-b2{--c:var(--hz-r2)}.hazards2 .hz-b3{--c:var(--hz-r3)}.hazards2 .hz-b4{--c:var(--hz-r4)}.hazards2 .hz-b5{--c:var(--hz-r5)}

/* 1. overview */
.hazards2 .hz-ov{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:center;margin-top:10px}
.hazards2 .hz-gauge{text-align:center;color:var(--text)}
.hazards2 .hz-gauge svg{width:100%;max-width:250px;display:block;margin:0 auto}
.hazards2 .hz-gnum{font:800 30px var(--display);fill:currentColor}
.hazards2 .hz-lv{font:800 26px var(--display);margin-top:-8px;color:var(--c)}
.hazards2 .hz-gauge small{display:block;font-size:12.5px;color:var(--muted)}
.hazards2 .hz-sum{font-size:16px;line-height:1.55;color:var(--copy)}
.hazards2 .hz-sum b{color:var(--text)}
.hazards2 .hz-donut{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;align-items:center;margin-top:14px}
.hazards2 .hz-donut svg{width:130px;height:130px}
.hazards2 .hz-dkey{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.hazards2 .hz-dkey span{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.hazards2 .hz-dkey i{width:12px;height:12px;border-radius:4px}
.hazards2 .hz-dkey b{font-variant-numeric:tabular-nums}

/* 2. hazard tiles (the Health report-card tiles) */
.hazards2 .hz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.hazards2 .hz-tile{background:var(--surface-2);border-radius:14px;padding:14px}
.hazards2 .hz-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:color-mix(in srgb,var(--hc,var(--dc)) 18%,#fff);margin-bottom:8px}
.hazards2 .hz-tile h3{font-family:var(--display);font-size:15.5px;margin:0}
.hazards2 .hz-big{font:800 26px var(--display);margin-top:6px;color:var(--hc)}
.hazards2 .hz-big small{font:500 12.5px var(--sans);color:var(--muted)}
.hazards2 .hz-meter{display:flex;gap:3px;margin-top:10px}
.hazards2 .hz-meter i{flex:1;height:7px;border-radius:99px;background:var(--line-2)}
.hazards2 .hz-meter i.on{background:var(--c)}
.hazards2 .hz-vs{font-size:12px;color:var(--muted);margin-top:5px}
.hazards2 .hz-vs b{color:var(--text)}
.hazards2 .hz-fq{font-size:12px;color:var(--muted);margin-top:6px;border-top:1px dashed var(--line-2);padding-top:6px}
.hazards2 .hz-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.hazards2 .hz-two h3{font-family:var(--display);font-size:14px;margin:0}
.hazards2 .hz-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hazards2 .hz-chips span{font-size:12.5px;border-radius:999px;padding:3px 10px;background:var(--surface-2);color:var(--copy)}
.hazards2 .hz-chips.none span{background:none;border:1px dashed var(--line-2);color:var(--faint)}
.hazards2 .hz-tip{display:flex;gap:12px;align-items:center;margin-top:16px;background:linear-gradient(90deg,rgba(47,127,181,.12),rgba(47,127,181,.04));border-radius:14px;padding:12px 14px;font-size:14px;color:var(--copy)}
.hazards2 .hz-tip>span:first-child{font-size:22px}
.hazards2 .hz-tip a{color:var(--hz-water);font-weight:700}

/* 3. floods */
.hazards2 .hz-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.hazards2 .hz-stat{background:var(--surface-2);border-radius:14px;padding:14px}
.hazards2 .hz-stat>span{font-size:20px}
.hazards2 .hz-stat b{display:block;font:800 28px var(--display);margin-top:4px}
.hazards2 .hz-stat small{font-size:12.5px;color:var(--muted)}
.hazards2 .hz-chart{position:relative;margin-top:22px;height:150px;display:flex;align-items:flex-end;gap:2px;border-bottom:2px solid var(--line-2);padding-top:26px}
.hazards2 .hz-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--hz-water),var(--hz-water-2));min-width:2px;position:relative}
.hazards2 .hz-chart i.pk::after{content:attr(data-l);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);font:700 11px var(--sans);color:var(--text);white-space:nowrap;background:var(--surface);padding:1px 5px;border-radius:6px;border:1px solid var(--line-2)}
.hazards2 .hz-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:4px}
.hazards2 .hz-ev{margin:6px 0 0 18px;font-size:14px;color:var(--copy);display:flex;flex-direction:column;gap:3px}
.hazards2 .hz-houses{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.hazards2 .hz-houses svg{width:18px;height:18px}
.hazards2 .hz-ins{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:18px;align-items:center;margin-top:16px}
.hazards2 .hz-ring{text-align:center;width:110px}
.hazards2 .hz-ring svg{width:92px;height:92px}
.hazards2 .hz-ring text{font:800 19px var(--display);fill:var(--text)}
.hazards2 .hz-ring small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.hazards2 .hz-crs{background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--copy)}
.hazards2 .hz-crs b{color:var(--text)}
.hazards2 .hz-done{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.hazards2 .hz-done div{background:var(--surface-2);border-radius:14px;padding:12px 14px}
.hazards2 .hz-done b{display:block;font:800 24px var(--display);color:var(--violet,#6b57c9)}
.hazards2 .hz-done small{font-size:12.5px;color:var(--muted)}

/* 4. disasters */
.hazards2 .hz-decs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;height:150px;margin-top:16px}
.hazards2 .hz-dc{display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.hazards2 .hz-dcb{width:100%;max-width:46px;flex:1;display:flex;flex-direction:column-reverse;gap:2px}
.hazards2 .hz-dcb i{display:block;border-radius:6px}
.hazards2 .hz-dcb i.c{background:var(--line-2)}
.hazards2 .hz-dcb i.h{background:linear-gradient(180deg,var(--hz-water),var(--hz-water-2))}
.hazards2 .hz-dc b{font:800 13px var(--display);margin-top:4px;min-height:16px}
.hazards2 .hz-dc small{font-size:11px;color:var(--faint)}
.hazards2 .hz-skey{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-top:6px}
.hazards2 .hz-skey span{display:inline-flex;align-items:center;gap:6px}
.hazards2 .hz-skey i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.hazards2 .hz-skey i.h{background:var(--hz-water)}
.hazards2 .hz-dcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.hazards2 .hz-dcard{border:1px solid var(--line-2);border-radius:14px;padding:14px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;background:var(--surface)}
.hazards2 .hz-dcard .hz-ic{width:44px;height:44px;margin:0}
.hazards2 .hz-dcards:not(.all) .hz-more{display:none}
.hazards2 .hz-yr{font:800 12px var(--display);letter-spacing:.06em;color:var(--dc)}
.hazards2 .hz-dcard h4{font-family:var(--display);font-size:15.5px;margin:1px 0 0}
.hazards2 .hz-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hazards2 .hz-m span{font-size:12px;background:var(--surface-2);border-radius:8px;padding:3px 8px;color:var(--copy)}
.hazards2 .hz-m b{color:var(--text)}
.hazards2 .hz-btn{font-size:13px;font-weight:700;color:var(--hz-water);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;background:var(--surface);cursor:pointer;margin-top:12px}
.hazards2 .hz-county{margin-top:14px;font-size:14px;color:var(--copy)}
.hazards2 .hz-county .hz-btn{margin:0 0 0 6px}

/* 5. map */
.hazards2 .hz-mapwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;margin-top:12px;align-items:start}
.hazards2 .hz-map{background:var(--surface-2);border-radius:14px;padding:6px}
.hazards2 .hz-map svg{width:100%;height:auto;display:block}
.hazards2 .hz-map path{stroke:#fffdf9;stroke-width:1.2}
.hazards2 .hz-map path.me{stroke:#2a2c22;stroke-width:2.6}
.hazards2 .hz-map text{font:600 11px var(--sans);fill:#2a2c22;paint-order:stroke;stroke:#fffdf9;stroke-width:3px}
.hazards2 .hz-map text.me{font-weight:800;font-size:12.5px}
.hazards2 .hz-mleg{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.hazards2 .hz-mleg i{width:22px;height:10px;border-radius:3px;display:inline-block;vertical-align:-1px;margin-right:4px}
.hazards2 .hz-mlist div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.hazards2 .hz-mlist div.me{font-weight:800}
.hazards2 .hz-mlist .sw{width:12px;height:12px;border-radius:4px}
.hazards2 .hz-mlist small{display:block;font-size:12px;color:var(--muted);font-weight:400}

/* "How to read this page" (same three tiles as the Health page's explainer) */
.hazards2 .hl-how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.hazards2 .hl-how div{background:var(--surface-2);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--copy)}
.hazards2 .hl-how b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:3px;color:var(--text)}

/* Safety-page card + home-card line */
.hazards2 .hz-ss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:8px}
.hazards2 .hz-ss b{font:800 17px var(--display)}
.hazards2 .hz-ss p{font-size:14px;color:var(--copy);margin:2px 0 0}
.hz-lvbar{display:flex;gap:3px}
.hz-lvbar i{width:12px;height:24px;border-radius:4px;background:var(--surface-2,#f3ecdf)}
.hz-lvbar.sm i{width:8px;height:18px;border-radius:3px}
.hz-lvbar.hz-b1 i.on{background:#7fb3d1}.hz-lvbar.hz-b2 i.on{background:#4f93bf}.hz-lvbar.hz-b3 i.on{background:#e2b34a}.hz-lvbar.hz-b4 i.on{background:#dd8a3e}.hz-lvbar.hz-b5 i.on{background:#c0492f}
.h3-hz{display:flex;align-items:center;gap:12px;margin:12px 18px 16px;padding:10px 12px;border:1px solid var(--line,#ece3d3);border-radius:12px;color:inherit;text-decoration:none}
.h3-hz b{display:block;font-size:14px}
.h3-hz small{display:block;font-size:12.5px;color:var(--muted)}
.h3-hz .h3-hz-go{margin-left:auto;font-size:13px;font-weight:700;color:var(--green);white-space:nowrap}

@media(max-width:700px){
  .hazards2 .hz-ov,.hazards2 .hz-two,.hazards2 .hz-mapwrap,.hazards2 .hz-ins,.hazards2 .hl-how{grid-template-columns:1fr}
  .hazards2 .hz-tiles,.hazards2 .hz-stats,.hazards2 .hz-dcards{grid-template-columns:1fr}
  .hazards2 .hz-ss{grid-template-columns:auto minmax(0,1fr)}.hazards2 .hz-ss a{grid-column:2}
  .hazards2 .hz-decs{gap:5px}
}