/* False River Flood Watch — mobile-first dashboard. Plain CSS, no build step. */
:root{
  --navy:#0d3b66; --navy2:#11497e; --blue:#1565a8; --sky:#5fa8e0;
  --ink:#15242f; --muted:#5d6b76; --line:#e2e8ee; --bg:#eef3f7; --card:#ffffff;
  --green:#1f9d57; --amber:#e0a106; --orange:#e2731b; --red:#cf3b32;
  --radius:16px; --shadow:0 2px 14px rgba(13,59,102,.08);
  --maxw:720px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px }
a{ color:var(--blue) }
h2{ font-size:1.12rem; margin:0 0 .5rem; color:var(--navy) }
h3{ font-size:1rem; margin:1.2rem 0 .5rem; color:var(--navy) }
.micro{ font-size:.8rem; color:var(--muted); margin:.4rem 0 0 }
.microcopy{ font-size:.82rem; color:var(--muted); margin:.7rem 0 0 }
.hint{ font-size:.88rem; color:var(--muted); margin:0 0 .8rem }

/* hero */
.hero{ background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; padding:22px 0 18px }
.hero h1{ font-size:1.5rem; margin:0; font-weight:800; letter-spacing:.2px }
.hero h1 span{ font-weight:400; opacity:.85 }
.tagline{ margin:.3rem 0 .2rem; opacity:.92; font-size:.95rem }
.issued{ margin:.2rem 0 0; font-size:.78rem; opacity:.72 }

/* cards */
main{ padding:16px 0 28px }
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:14px 0;
}

/* answer card */
.answer{ border-top:4px solid var(--blue) }
/* consistent tile grid: level row, rise row, drainage row */
.tile-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px }
.tile{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px;
  padding:11px 13px; background:#f6f9fc }
.t-lab{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700 }
.t-sub2{ display:block; font-size:.67rem; color:var(--muted) }
.t-big{ display:block; font-size:2.2rem; font-weight:800; color:var(--navy); line-height:1.1; margin-top:3px }
.t-big .u{ font-size:.8rem; font-weight:600; color:var(--muted); margin-left:3px }
.t-foot{ display:block; font-size:.74rem; color:var(--muted) }
.tile.rise.lvl-normal{ border-left-color:var(--green) }
.tile.rise.lvl-watch{ border-left-color:var(--amber) }
.tile.rise.lvl-elevated{ border-left-color:var(--orange) }
.tile.rise.lvl-flood{ border-left-color:var(--red) }
.t-worst{ display:block; font-size:.9rem; color:var(--ink); margin-top:8px }
.t-worst b.worst{ color:var(--red); font-weight:800 }
/* rain forecast under each rise tile — two lines, a touch more prominent than the old note */
.t-rain{ display:block; margin-top:7px; padding-top:6px; border-top:1px solid var(--line) }
.rain-likely{ display:block; font-size:.8rem; font-weight:700; color:var(--navy) }
.rain-worst{ display:block; font-size:.72rem; color:var(--muted); margin-top:1px }
.t-status{ display:block; font-size:1.5rem; font-weight:800; margin-top:2px; color:var(--muted) }
.t-status.on{ color:var(--green) }
.t-note{ display:block; font-size:.67rem; color:var(--muted); margin-top:4px }
.t-src{ display:inline-block; font-size:.67rem; margin-top:3px; color:#1565a8; text-decoration:none }
.t-src:hover{ text-decoration:underline }
/* inline scenario sliders, kept right beside the calculation */
.scenario{ background:#eaf1f8; border:1px solid var(--line); border-radius:12px;
  padding:9px 14px 12px; margin:0 0 12px }
.scenario-head{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:700 }
.scenario .slider{ margin:8px 0 0 }
.scenario .slider label{ font-size:.84rem }
#scenario-context{ margin-top:8px }
/* at-a-glance: the three drivers (level, saturation, forecast rain) */
.glance{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.g-stat{ min-width:0 }
.g-stat.rain{ padding-left:10px; border-left:3px solid var(--sky) }
.g-lab{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:700 }
.g-num{ display:block; font-size:1.85rem; font-weight:800; color:var(--navy); line-height:1.15 }
.g-num.word{ font-size:1.5rem }
.g-num .u{ font-size:.75rem; font-weight:600; color:var(--muted); margin-left:3px }
.g-sub{ display:block; font-size:.7rem; color:var(--muted); margin-top:2px }
.gates{ margin-top:14px }
.gates .g-lab{ margin-bottom:5px }
.chip{ display:inline-block; margin:4px 6px 0 0; padding:5px 10px; border-radius:999px;
  font-size:.76rem; font-weight:700; background:var(--line); color:var(--ink); white-space:nowrap }
.chip.on{ background:#dff3e6; color:var(--green) }
.chip.off{ background:#f0f2f4; color:var(--muted) }

.rise-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }
.rise-box{ border-radius:12px; padding:12px; background:#f6f9fc; border:1px solid var(--line);
  text-align:left; border-left:5px solid var(--muted) }
.rise-box.lvl-normal{ border-left-color:var(--green) }
.rise-box.lvl-watch{ border-left-color:var(--amber) }
.rise-box.lvl-elevated{ border-left-color:var(--orange) }
.rise-box.lvl-flood{ border-left-color:var(--red) }
.rise-h{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:700 }
.rl{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:1px 8px; margin-top:8px }
.rl-lab{ grid-column:1/-1; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700 }
.rl-val{ font-size:1.5rem; font-weight:800; line-height:1 }
.rl-val.likely{ color:var(--navy) }
.rl-val.worst{ color:var(--red) }
.rl-rise{ font-size:.82rem; color:var(--muted); font-weight:600 }
.rise-flag{ display:inline-block; margin-top:10px; font-size:.72rem; font-weight:800;
  padding:3px 9px; border-radius:999px; line-height:1.3 }
.h3-sub{ font-weight:400; font-size:.8rem; color:var(--muted) }
.micro-inline{ font-weight:400; font-size:.76rem; color:var(--muted) }
.lvl-normal .rise-flag{ background:#dff3e6; color:var(--green) }
.lvl-watch .rise-flag{ background:#fbf0cf; color:#9a7400 }
.lvl-elevated .rise-flag{ background:#fbe3cf; color:#a8521a }
.lvl-flood .rise-flag{ background:#fbdad7; color:var(--red) }

/* sliders */
.slider{ margin:16px 0 4px }
.slider label{ display:flex; justify-content:space-between; align-items:baseline;
  font-weight:600; font-size:.92rem; margin-bottom:6px }
.slider .rdg{ font-weight:800; color:var(--blue) }
input[type=range]{ width:100%; height:30px; -webkit-appearance:none; background:transparent }
input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:5px;
  background:linear-gradient(90deg,#cfe2f2,#5fa8e0) }
input[type=range]::-moz-range-track{ height:8px; border-radius:5px; background:#cfe2f2 }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px;
  margin-top:-9px; border-radius:50%; background:#fff; border:3px solid var(--blue);
  box-shadow:0 1px 4px rgba(0,0,0,.2); cursor:pointer }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff;
  border:3px solid var(--blue); cursor:pointer }
.ticks{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); margin-top:2px }
.link-btn{ background:none; border:none; color:var(--blue); font:inherit; font-size:.86rem;
  text-decoration:underline; cursor:pointer; padding:0 }

/* capacity */
.cap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:center }
.cap-num{ display:block; font-size:2rem; font-weight:800; color:var(--navy) }
.cap-lab{ display:block; font-size:.78rem; color:var(--muted) }

/* chart */
.chart{ width:100%; overflow:hidden }
.chart svg{ width:100%; height:auto; display:block }
.ev{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line) }
.ev:last-child{ border-bottom:none }
.ev .yr{ font-weight:800; color:var(--navy); width:3.2rem; flex:none }
.ev .pk{ font-weight:800; flex:none; width:5.2rem }
.ev .nt{ font-size:.8rem; color:var(--muted) }
.ev.flood .pk{ color:var(--red) }

/* signup */
.signup form{ display:flex; gap:8px; flex-wrap:wrap }
.signup input[type=email]{ flex:1 1 12rem; min-width:0; padding:12px 14px; font-size:1rem;
  border:1px solid var(--line); border-radius:10px }
.signup button{ flex:none; padding:12px 18px; font-size:1rem; font-weight:700; color:#fff;
  background:var(--blue); border:none; border-radius:10px; cursor:pointer }
.signup button:active{ background:var(--navy) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.sub-msg{ font-size:.86rem; margin:.6rem 0 0; min-height:1.1em }
.sub-msg.ok{ color:var(--green) } .sub-msg.err{ color:var(--red) }

/* footer */
.foot{ background:#dde6ee; color:var(--muted); padding:18px 0; font-size:.78rem; text-align:center }
.foot p{ margin:.2rem 0 }

/* splash / loading */
.splash{ position:fixed; inset:0; background:var(--bg); display:grid; place-items:center;
  z-index:50; transition:opacity .3s }
.splash p{ color:var(--muted); margin-top:12px }
.spinner{ width:38px; height:38px; border:4px solid #cfe0ee; border-top-color:var(--blue);
  border-radius:50%; animation:spin .9s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
#app:not(.loading) .splash{ opacity:0; pointer-events:none }

@media (max-width:400px){
  .cap-grid .cap-num{ font-size:1.7rem }
  .t-big{ font-size:1.7rem } .t-status{ font-size:1.3rem }
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f1822; --card:#17222e; --ink:#e6edf3; --muted:#93a3b1; --line:#243240; --navy:#cfe2f5 }
  .hero{ background:linear-gradient(160deg,#0a2942,#0d3b66) }
  .tile{ background:#1c2935 } .scenario{ background:#15202b }
  .foot{ background:#101a24 }
  .signup input[type=email]{ background:#0f1822; color:var(--ink) }
}