/* EDITED IN PLACE (10/11, docs/GRADES-ON-PAGES.md: generators are retired for built pages). This file is no longer
   generated: mocks/src/hazards/make_css.py made its first build and now refuses to overwrite it without --force.
   Edit the rules here; tools/css_lint.py guards them (a rule two pages share goes in core.css). The note below is history. */
/* TG hazards.css: Natural Hazards page only (merged direction, 10/8). Generated by mocks/src/hazards/make_css.py:
   the rules of the live TownTapestry app.css that the merged Hazards mocks use (css_audit on the four mocks),
   minus those already in core.css, @media wrappers kept; then the merged page's additions (prefix hzm-). */
.panel-h{font-size:13px;font-weight:600;margin:0 0 8px}
.haz-hchips a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;border-radius:999px;background:var(--paper,#fff);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.haz-hchips a span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--accent-ink)}
.haz-hchips a span .ic{width:14px;height:14px}
.haz-hchips a b{color:color-mix(in srgb,var(--hc) 60%,var(--ink));font-weight:700}
.haz-hchips a:hover{border-color:var(--hc)}
.haz-dc{background:rgba(255,255,255,.94);border-radius:var(--r-lg);padding:14px 14px 12px;width:100%;max-width:256px;text-align:center;box-shadow:0 8px 30px rgba(15,22,35,.12)}
.haz-dc .gauge{width:100%;height:auto;display:block}
.haz-dc small{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.haz-exp{display:flex;flex-direction:column}
.haz-scale{position:relative;display:flex;gap:3px;height:16px;margin:34px 0 8px}
.haz-scale span{flex:1;border-radius:4px;opacity:.55}
.haz-scale span.on{opacity:1;box-shadow:inset 0 0 0 2px rgba(15,22,35,.18)}
.haz-scale em{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink);font-style:normal}
.haz-scale em b{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px}
.haz-sl span{flex:1;text-align:center;font-size:11.5px}
.haz-sl span.on{color:var(--ink);font-weight:700}
.haz-st{margin:16px 0 0;font-size:14.5px;color:var(--ink-2)}
.haz-st b{color:var(--ink)}
.haz-dwrap{display:flex;align-items:center;gap:18px}
.haz-donut{width:132px;height:132px;flex:none}
.haz-dkey{display:flex;flex-direction:column;gap:7px;font-size:13.5px;min-width:0;flex:1}
.haz-dkey span{display:flex;align-items:center;gap:8px}
.haz-dkey b{margin-left:auto;font-variant-numeric:tabular-nums}
.haz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.haz-tile{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:#fff;min-width:0}
.haz-tile h3{font-size:16px;margin:10px 0 0;letter-spacing:-.01em}
.haz-big{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--hc);margin-top:4px}
.haz-big small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:2px}
.haz-meter{display:flex;gap:3px;margin:12px 0 6px}
.haz-meter i{flex:1;height:6px;border-radius:3px;background:#e8ebef}
.haz-meter i.on{background:var(--hc)}
.haz-vs{font-size:12.5px;color:var(--muted);line-height:1.4}
.haz-vs b{color:var(--ink-2)}
.haz-fq{font-size:12.5px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--hair)}
.haz-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.haz-none .chip{background:#fff;border:1px dashed var(--line);color:var(--faint)}
.haz-tip{display:flex;gap:10px;align-items:flex-start;margin-top:16px;border-radius:var(--r);background:var(--surface);padding:12px 14px;font-size:14px;color:var(--ink-2)}
.haz-tip .ic{width:18px;height:18px;color:var(--accent-ink);flex:none;margin-top:1px}
.haz-cc{position:relative;height:150px;margin-top:26px;border-bottom:1px solid var(--line)}
.haz-bars{width:100%;height:100%;display:block}
.haz-bars rect{fill:#8cc0e2}
.haz-bars rect.pk{fill:#2f74d0}
.haz-bars rect.hit{fill:transparent}
.haz-bars g:hover rect:not(.hit){fill:#1f5a86}
.haz-pl{position:absolute;transform:translate(-50%,-3px);font-size:11.5px;font-weight:700;color:var(--ink-2);pointer-events:none;white-space:nowrap}
.haz-axl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:4px}
.haz-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.haz-ev li{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-bottom:1px solid var(--hair);padding-bottom:6px}
.haz-ev li span{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.haz-rep{margin-top:18px}
.haz-houses{display:flex;flex-wrap:wrap;gap:3px;max-width:640px}
.haz-houses svg{width:20px;height:20px}
.haz-ins{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:18px;align-items:center;margin-top:18px;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.haz-ring{display:flex;flex-direction:column;align-items:center;gap:4px;width:118px;text-align:center}
.haz-ring svg{width:84px;height:84px}
.haz-ring text{font:700 17px var(--sans);fill:var(--ink)}
.haz-ring small{font-size:12px;color:var(--muted);line-height:1.3}
.haz-crs{display:flex;flex-direction:column;gap:4px;border-radius:var(--r);padding:12px 14px;background:var(--surface);min-width:0}
.haz-crs.on{background:var(--accent-tint)}
.haz-crs b{font-size:20px;letter-spacing:-.02em}
.haz-crs p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.45}
.haz-crs small{font-size:12px;color:var(--faint)}
.haz-done{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.haz-done div{border-radius:var(--r);background:var(--surface);padding:12px 14px;display:flex;flex-direction:column}
.haz-done small{font-size:13px;color:var(--muted)}
.haz-tl{list-style:none;margin:0;padding:0;position:relative}
.haz-tl::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--hair)}
.haz-tl li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:0 0 16px}
.haz-tdot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--accent-ink);box-shadow:0 0 0 4px #fff}
.haz-tl li > div{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.haz-ty{font-size:12.5px;font-weight:700;color:var(--dc);letter-spacing:.02em}
.haz-tl b{font-size:15.5px;letter-spacing:-.01em}
.haz-tl small{font-size:13.5px;color:var(--muted)}
.haz-more summary{cursor:pointer;font-weight:600;color:var(--accent-ink);font-size:14px;margin:0 0 14px 52px}
.haz-decs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:140px}
.haz-decs > div{display:flex;flex-direction:column;align-items:center;height:100%;gap:3px}
.haz-decs span{flex:1;width:100%;max-width:30px;display:flex;flex-direction:column-reverse}
.haz-decs i{display:block;width:100%}
.haz-decs i.h{background:var(--accent)}
.haz-decs i.c{background:var(--bar);border-radius:4px 4px 0 0}
.haz-decs b{font-size:12px;min-height:15px}
.haz-decs small{font-size:11px;color:var(--faint)}
.haz-cl{margin:12px 0 10px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.haz-clist{margin-top:10px}
.haz-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.haz-kc{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:#fff;display:flex;flex-direction:column}
.haz-kh{display:flex;align-items:center;gap:10px}
.haz-kh b{font-size:17px;letter-spacing:-.015em}
.haz-kc ul, .haz-chk{margin:12px 0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--ink-2);line-height:1.45}
.haz-kc .link{font-size:13.5px;margin-top:auto}

.haz-ready .sf-calls a b{color:var(--accent-ink);font-weight:600}
.haz-map .nbmap .o.haz-b1{fill:#cfe6f5}
.haz-map .nbmap .me{fill:var(--mb);stroke:var(--ink);stroke-width:2.2}
.haz-map .nbl.me{color:var(--ink);text-shadow:0 0 3px #fff,0 0 3px #fff;font-weight:800}
.haz-map .nbmap a:hover .o{filter:brightness(.92)}
.haz-tw .tbl{min-width:0}
@media (max-width:900px){
  .haz-ins{grid-template-columns:auto auto}
  .haz-crs{grid-column:1/-1}
}
@media (max-width:640px){
  .haz-dc{max-width:220px}
  .haz-two{grid-template-columns:1fr}
  .haz-tiles{grid-template-columns:1fr 1fr;gap:8px}
  .haz-tile{padding:12px}
  .haz-big{font-size:28px}
  .haz-dwrap{gap:12px}
  .haz-donut{width:104px;height:104px}
  .haz-decs{gap:3px}
  .haz-sl span{font-size:10px}
  .haz-tw td.sm, .haz-tw th:nth-child(3){display:none}
}
@media (max-width:420px){
  .haz-tiles{grid-template-columns:1fr}
}
.haz-ag a{display:flex;flex-direction:column;gap:4px;min-width:0}
.haz-ag img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--surface);filter:sepia(.15)}
.haz-ag small{font-size:12px;color:var(--muted);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.haz-map .nbmap .o.haz-b5{fill:#ef9f8a}
.haz-map .nbmap .o.haz-b2{fill:#c9ead6}
.haz-map .nbmap .o.haz-b3{fill:#f4e3a6}
.haz-map .nbmap .o.haz-b4{fill:#f5c79c}
.haz-map .nbmap .o.haz-bn{fill:#eef0f3}
.haz-pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}

/* ===== merged-page additions ===== */
/* hero on the shared .hb-hero background (core): text in .hb-in, the gauge as a white card over the photo */
.hzm-hero .hb-in{max-width:600px}
.hzm-hero h1{font-size:38px;letter-spacing:-.035em;line-height:1.06;max-width:600px}
.hzm-hero .hb-in > p{color:var(--ink-2);margin:12px 0 0;font-size:16px;line-height:1.5}
.hzm-gauge{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:1;width:230px}
@media (max-width:1100px){
  .hzm-hero .hb-in{max-width:none;padding-right:32px}
  .hzm-gauge{position:static;transform:none;margin:20px 0 0;width:100%;max-width:256px}
}
@media (max-width:640px){.hzm-hero h1{font-size:28px}}
/* source line under the chips; state rank under the gauge */
.hzm-src{margin:12px 0 0;max-width:62ch}
.haz-dc .hzm-rank{display:block;margin-top:6px;font-size:13px;font-weight:700;color:var(--ink)}
/* the scale label near either end anchors to its marker instead of centering (no overflow at 375px) */
.haz-scale em.hzm-er b{left:auto;right:-4px;transform:none}
.haz-scale em.hzm-el b{left:-4px;transform:none}
/* stats tile: badge + state rank */
.hzm-kv{display:flex;align-items:center;gap:8px}
.hzm-kv small{font-size:14px;font-weight:500;color:var(--muted)}
/* grade card */
.haz-st .badge{vertical-align:middle;margin-right:4px}
.hzm-ctx{margin-top:16px}
.hzm-say{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.hzm-ctx .gb-note span{flex:1}
.hzm-method{margin:14px 0 0;font-size:14px}
/* hazards, record, boroughs, neighbors */
.hzm-top{margin-left:4px;font-size:11.5px;font-weight:700;color:var(--gD)}
.hzm-chn{margin:6px 0 0;font-size:12px;color:var(--muted)}
.hzm-bo{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.hzm-gcell{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.hzm-gcell span:not(.badge){font-size:12.5px;color:var(--muted);text-align:left}
@media (max-width:640px){
        .hzm-btbl th:nth-child(5), .hzm-btbl td:nth-child(5){display:none}
  .hz-sec .gb-note{display:block}
  .hz-sec .gb-note b{margin-right:4px}
}