:root {
  --ink: #0f1d26; --muted: #5a6b76; --bg: #f3f6f8; --card: #ffffff; --line: #dfe6ea;
  --navy: #0b2a3c; --teal: #0e7c86;
  --l0: #1d7f46; --l1: #33669e; --l2: #e0ad12; --l3: #b4500f; --l4: #b3122e; --l5: #6b0018;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--teal); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #0b2a3c; outline-offset: 2px; box-shadow: 0 0 0 2px #ffb703; }
.top :focus-visible { outline-color: #ffb703; } .hero :focus-visible { outline-color: #fff; } .hero.lvl-2 :focus-visible { outline-color: #1d1600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 9999; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(16px, 4vw, 40px); background: var(--navy); color: #fff; }
.brand { display: flex; gap: 12px; align-items: center; }
.logo { font-size: 34px; color: #ffb703; text-shadow: 0 0 18px rgba(255,183,3,.7); }
h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: .3px; }
.tag { margin: 2px 0 0; color: #c9dbe5; font-size: 14px; }
.lang button { background: transparent; color: #fff; border: 1px solid #5d7a8b; padding: 6px 10px; border-radius: 8px; }
.lang button[aria-pressed="true"] { background: #fff; color: var(--navy); }

.demo-banner p { margin: 0 0 8px; }
.replay { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.replay input[type=range] { flex: 1 1 220px; accent-color: #b3122e; min-height: 28px; }
.replay button { border: 1px solid #a07a00; background: #fff; color: #3d2d00; border-radius: 8px; padding: 6px 12px; font-weight: 700; }
.replay button[aria-pressed="true"] { background: #3d2d00; color: #fff; }
.replay output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 15ch; }
.demo-banner { background: repeating-linear-gradient(45deg, #fff3cd, #fff3cd 14px, #ffe69c 14px, #ffe69c 28px); color: #5c4400; padding: 10px clamp(16px, 4vw, 40px); font-weight: 600; border-bottom: 2px solid #c99a06; }

.search { padding: 18px clamp(16px, 4vw, 40px) 4px; }
#searchForm { display: flex; flex-wrap: wrap; gap: 8px; }
#addr { flex: 1 1 320px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; background: #fff; }
#searchForm button { padding: 12px 16px; min-height: 46px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
#searchForm .primary { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 14px; }
.chip { border: 1px solid #c9d4da; background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 14px; min-height: 36px; }
.chip:hover { border-color: var(--teal); }
.chip.demo { background: #fff3cd; border-color: #e0b84c; color: #5c4400; font-weight: 600; }
.msg { min-height: 1.4em; color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.msg.err { color: var(--l4); }

main[aria-busy="true"] .grid { opacity: .6; transition: opacity .2s; }
main { padding: 8px clamp(16px, 4vw, 40px) 24px; }
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 20px; border-radius: var(--radius); color: #fff; margin: 8px 0 16px; transition: background .3s; }
.hero.lvl-0 { background: var(--l0); } .hero.lvl-1 { background: var(--l1); } .hero.lvl-2 { background: var(--l2); color: #1d1600; }
.hero.lvl-3 { background: var(--l3); } .hero.lvl-4 { background: var(--l4); }
.hero.lvl-u { background: #4a5a64; } .hero.lvl-l { background: #2c4656; }
.dial { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; font-weight: 800; background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.7); }
.hero.lvl-4 .dial { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } }
@media (prefers-reduced-motion: reduce) { .hero.lvl-4 .dial { animation: none; } }
.hero h2 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); }
.hero p { margin: 4px 0; }
/* Reserve two lines for the level sentence so the hero (and everything under it) doesn't jump when the
   'Checking live sources' text is replaced by the answer (CLS was 0.11 at 1280 px). */
#lvlDesc { min-height: 3em; }
.hero.lvl-2 .drivers li { background: rgba(0,0,0,.1); }
.hero.lvl-2 .ghost { border-color: rgba(0,0,0,.45); background: rgba(255,255,255,.3); }
.hero.lvl-2 .dial { border-color: rgba(0,0,0,.45); background: rgba(255,255,255,.35); }
.place { font-size: 14px; text-transform: uppercase; letter-spacing: .6px; }
.drivers { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 27px; }
.drivers li { background: rgba(0,0,0,.18); border-radius: 999px; padding: 3px 10px; font-size: 14px; }
.ghost { background: rgba(0,0,0,.2); color: inherit; border: 1px solid rgba(255,255,255,.6); border-radius: 10px; padding: 8px 12px; align-self: start; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  grid-template-areas: "map zone wx" "map actions alerts" "rivers rivers rivers" "help help help" "how how how"; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.c-map { grid-area: map; padding: 0; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; }
.c-zone { grid-area: zone; } .c-wx { grid-area: wx; } .c-actions { grid-area: actions; } .c-alerts { grid-area: alerts; }
.c-rivers { grid-area: rivers; } .c-help { grid-area: help; } .c-how { grid-area: how; }
#map { width: 100%; flex: 1 1 auto; min-height: 460px; }
.rivers { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }

.zone .big { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; }
.b0 { background: var(--l0); } .b1 { background: var(--l1); } .b2 { background: var(--l2); color: #1d1600; } .b3 { background: var(--l3); } .b4 { background: var(--l4); }
.leaflet-container { font: inherit; }

.wx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wx > .empty { grid-column: 1 / -1; margin: 0; }
.lang { display: flex; gap: 6px; flex: none; }
.stat { background: var(--bg); border-radius: 10px; padding: 10px; }
.stat b { display: block; font-size: 24px; }
.stat span { color: var(--muted); font-size: 13px; }

.rivers { display: grid; gap: 10px; }
.gauge { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; align-content: start; color: var(--ink); width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; text-align: left; }
.gauge[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(14,124,134,.2); }
.gauge .nm { font-weight: 600; }
.gauge .meta { color: var(--muted); font-size: 13px; }
.gauge .wide { grid-column: 1 / -1; }
.gauge:hover { border-color: var(--teal); }
.stale { color: #8a4b00; font-weight: 600; }
.fine { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.chart-wrap .fine { display: inline-block; }
.empty.ok::before { content: '✓ '; color: var(--l0); font-weight: 700; }
.stat.hot { background: #fff1e6; box-shadow: inset 3px 0 0 var(--l3); }
.pad { padding: 16px; }
.bar { grid-column: 1 / -1; height: 8px; background: #e8eef1; border-radius: 99px; overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: 99px; }
.chart-wrap { margin: 14px 0 0; }
.chart-wrap figcaption { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
#chart { width: 100%; height: auto; background: #fbfcfd; border-radius: 10px; border: 1px solid var(--line); }

.alert { border-left: 5px solid var(--l2); background: #fffaf0; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; }
.alert.a3 { border-left-color: var(--l3); background: #fff4ec; } .alert.a4 { border-left-color: var(--l4); background: #fdeef0; }
.alert b { display: block; }
.alert small { display: block; }
.alert summary { cursor: pointer; color: var(--teal); font-weight: 600; margin-top: 4px; }
.alert small { color: var(--muted); }
.alert details { font-size: 14px; }
.empty { color: var(--muted); }

.actions { margin: 0; padding-left: 20px; }
.actions li { margin: 0 0 8px; }
.help { columns: 3; padding-left: 18px; margin: 0; }
.help li { margin-bottom: 6px; break-inside: avoid; }

.foot { padding: 10px clamp(16px, 4vw, 40px) 30px; color: var(--muted); font-size: 13px; }
.stamp { font-size: 12px; }
.skel { color: var(--muted); font-style: italic; }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr 1fr; grid-template-areas: "zone wx" "actions alerts" "map map" "rivers rivers" "help help" "how how"; }
  .c-map, #map { min-height: 340px; }
  .help { columns: 2; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "zone" "actions" "alerts" "wx" "rivers" "map" "help" "how"; }
  .c-map, #map { min-height: 300px; }
  .rivers { grid-template-columns: 1fr; }
  .top { padding: 14px 16px; } .logo { font-size: 28px; } .tag { font-size: 13px; }
  #addr { flex-basis: 100%; } #searchForm button { flex: 1 1 auto; }
  .hero { grid-template-columns: auto 1fr; }
  .hero .ghost { grid-column: 1 / -1; }
  .help { columns: 1; }
  .dial { width: 64px; height: 64px; font-size: 30px; }
}

/* ---------- printable family flood plan ---------- */
.plan-btn { margin-top: 6px; width: 100%; padding: 10px 14px; min-height: 44px; border-radius: 10px; border: 1px solid var(--teal); background: #e9f5f6; color: #0a5960; font-weight: 700; }
.plan-btn:hover { background: #d8eef0; }
.plan-btn[hidden] { display: none; }
#planDlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: var(--radius); padding: 20px; color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#planDlg::backdrop { background: rgba(11,42,60,.55); }
#planDlg h2 { margin: 0 0 4px; font-size: 22px; }
.plan-fields { display: grid; gap: 10px; margin: 12px 0 4px; }
.plan-fields label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.plan-fields input, .plan-fields textarea { font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid #b9c6cd; border-radius: 8px; width: 100%; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plan-actions button { padding: 10px 14px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.plan-actions .primary { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 700; }
.plan-sheet { display: none; }

@media print {
  body.print-plan > *:not(#planSheet) { display: none !important; }
  body.print-plan { background: #fff; }
  body.print-plan .plan-sheet { display: block; color: #000; font-size: 9.5pt; line-height: 1.25; }
  @page { margin: 9mm; }
}
/* off-screen layout used by fitPlanSheet(): same width and type as the printed sheet */
.plan-sheet.ps-measure { display: block; position: absolute; left: -10000px; top: 0; width: calc(8.5in - 18mm); color: #000; font-size: 9.5pt; line-height: 1.25; }
body.print-plan .plan-sheet.ps-c1, .plan-sheet.ps-measure.ps-c1 { font-size: 8.5pt; line-height: 1.18; }
.plan-sheet.ps-c1 .ps-field span { font-size: 8.5pt; }
.plan-sheet.ps-c1 .ps-box { padding: 4px 8px; margin-bottom: 6px; }
.plan-sheet.ps-c1 .ps-steps li { margin-bottom: 2px; }
body.print-plan .plan-sheet.ps-c2, .plan-sheet.ps-measure.ps-c2 { font-size: 8pt; line-height: 1.12; }
.plan-sheet.ps-c2 .ps-field span { font-size: 8pt; }
.plan-sheet.ps-c2 .ps-check { columns: 3; }
.plan-sheet.ps-c2 h1 { font-size: 15pt; }
.plan-sheet h1 { font-size: 18pt; margin: 0 0 4px; }
.plan-sheet h2 { font-size: 11pt; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; color: #0b2a3c; }
.plan-sheet p { margin: 2px 0; }
.ps-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 3px solid #0b2a3c; padding-bottom: 6px; margin-bottom: 8px; }
.ps-nums th { width: 58%; }
.ps-brand { font-weight: 800; color: #0b2a3c; }
.ps-qr { text-align: center; flex: none; width: 30mm; }
.ps-qr svg { width: 27mm; height: 27mm; display: block; margin: 0 auto; }
.ps-qr small { font-size: 8pt; }
.ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-box { border: 1.5px solid #555; border-radius: 6px; padding: 6px 9px; margin-bottom: 8px; break-inside: avoid; }
.ps-lvl { font-size: 15pt; font-weight: 800; }
.ps-small { font-size: 9pt; color: #333; }
.ps-url { word-break: break-all; margin: 0 0 6px !important; }
.ps-warn { font-weight: 700; border-left: 4px solid #b4500f; padding-left: 6px; margin-top: 6px !important; }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th { text-align: left; font-weight: 600; width: 45%; padding: 3px 8px 3px 0; vertical-align: top; }
.ps-table td { padding: 3px 0; border-bottom: 1px solid #999; }
.ps-table .line { display: block; height: 1.2em; }
.ps-steps { margin: 0; padding-left: 18px; } .ps-steps li { margin-bottom: 4px; }
.ps-check { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.ps-check li { break-inside: avoid; }
.ps-check li { padding-left: 18px; position: relative; margin-bottom: 1px; }
.ps-check li::before { content: ''; position: absolute; left: 0; top: .2em; width: 11px; height: 11px; border: 1.5px solid #000; }
.ps-foot { font-size: 8.5pt; color: #333; border-top: 1px solid #999; padding-top: 6px; }
.ps-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.ps-field b { display: block; font-size: 8.5pt; }
.ps-field span { display: block; min-height: 1.5em; border-bottom: 1px solid #999; }
.ps-nums { font-size: 9pt; }

.offline-note { margin: 10px 0 0; padding: 8px 12px; border-left: 5px solid #ffb703; background: #fff; color: var(--ink); font-size: 14px; border-radius: 6px; }

/* Harvey replay lead time */
.lead { margin-top: 10px; background: #fff; border: 1px solid #c99a06; border-left: 6px solid #b3122e; border-radius: 8px; padding: 10px 14px; color: #2b2100; font-weight: 400; }
.lead:empty { display: none; }
#lead:not(:empty) + #leadBoot { display: none; }  /* first-paint placeholder (index.html) gives way to the real box */
.lead .lead-head { font-size: 17px; font-weight: 800; margin: 0 0 4px; color: #7a0c1f; }
.lead .lead-head b { font-size: 22px; }
.lead p { margin: 0 0 4px; font-size: 14px; line-height: 1.45; }
.lead .lead-out { color: #4a3a00; }
.lead .lead-note { font-size: 12.5px; color: #5c4a10; }
.lead button { margin-top: 4px; border: 1px solid #a07a00; background: #fff; color: #3d2d00; border-radius: 8px; padding: 6px 12px; font-weight: 700; }

/* How it works / tested */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; }
.how h4 { margin: 0 0 4px; font-size: 15px; }
.how p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.how-src { margin: 0 0 6px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
@media (max-width: 1100px) { .how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .how { grid-template-columns: 1fr; } }

/* shown only when JavaScript is off: point people to official sources instead of an endless 'Loading' */
.noscript { margin: 12px 16px; border-left: 4px solid var(--l4); }