/* =====================================================================
   Meridian water: the page side of the land-map water look (v1, Oct 29, 2026)
   Pairs with meridian-water.js. Values: ../WATER.md
   - .mw-grade      full-screen colour grade over the map (add .is-on in Water)
   - .mw-label      creek / river / lake names (map markers)
   - .mw-key        legend swatches, including an animated runoff dash
   Set html.mw-water (or body.mode-water) while Water is showing.
   ===================================================================== */

:root {
  --mw-glow: #5ec8ff;
  --mw-core: #bdeaff;
  --mw-creek: #7cc8ff;
  --mw-pond: #46b4ff;
  --mw-low: rgba(70, 170, 255, .75);
  --mw-wet-line: #9be7ff;
  --mw-soil-flood: #ffb454;
  --mw-label: #bfe6ff;
  --mw-accent: #6cc6ff;             /* UI accent while Water shows (buttons, active tab) */
  --mw-ease: cubic-bezier(.22, .8, .2, 1);
}

/* whole-scene grade: soft-light navy, .7, fades over 1.1 s */
.mw-grade { position: fixed; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(180deg, #0d3a66, #0a2440); transition: opacity 1.1s var(--mw-ease); }
.mw-grade.is-on, html.mw-water .mw-grade, body.mode-water .mw-grade { opacity: .7; }

/* names on the water: italic serif, pale blue, tracked, never uppercase */
.mw-label { pointer-events: none; white-space: nowrap; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 16px; letter-spacing: .14em; text-transform: none; color: var(--mw-label); text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
  opacity: 0; transition: opacity .6s var(--mw-ease); }
html.mw-water .mw-label, body.mode-water .mw-label, html.mw-land .mw-label, body.mode-land .mw-label { opacity: 1; }
@media (max-width: 720px) { .mw-label { font-size: 14px; } }

/* legend */
.mw-keys { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.mw-keys li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(243, 239, 231, .74); }
.mw-key { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--c, var(--mw-pond)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.mw-key.line { height: 3px; border-radius: 2px; }
.mw-key.runoff { height: 3px; border-radius: 2px; box-shadow: 0 0 6px var(--mw-glow);
  background: repeating-linear-gradient(90deg, #fff 0 3px, var(--mw-core) 3px 7px); background-size: 7px 3px; animation: mw-run .84s linear infinite; }
.mw-key.runoff { width: 18px; }
@keyframes mw-run { to { background-position: 7px 0; } }
@media (prefers-reduced-motion: reduce) { .mw-key.runoff { animation: none; } }