/* ═══════════════════════════════════════════════════════════════════════
   Watermark — design system

   The map is the document; everything else floats over it as glass. Dark by
   default because a dark basemap makes water read as light, which is the one
   thing every screen here is about.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --ink:            #060b12;
  --ink-2:          #0a121c;
  --glass:          rgba(16, 26, 38, 0.72);
  --glass-hi:       rgba(30, 45, 63, 0.62);
  --hairline:       rgba(148, 178, 208, 0.14);
  --hairline-hi:    rgba(148, 178, 208, 0.26);

  /* type */
  --fg:             #e9f1f8;
  --fg-2:          #b3c5d6;
  --fg-3:          #7e93a8;

  /* meaning */
  --water:          #4fd8ff;
  --water-deep:     #1b8fc4;
  --water-glow:     rgba(79, 216, 255, 0.30);
  --dry:            #7fe0a8;
  --caution:        #ffbb5c;
  --alarm:          #ff7a6b;
  --violet:         #a98cff;

  /* shape */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 9px;
  --panel-w: 428px;

  --shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.38);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto,
          "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set `display` on their own class, which would
   otherwise beat the user-agent rule for [hidden]. Anything marked hidden is
   hidden, full stop. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.muted { color: var(--fg-3); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════ the map ══════════════════════════════ */

/* Never a flat black rectangle. Tiles can be slow, blocked by a firewall, or
   simply absent offline, and in every one of those cases the reader still sees
   something that reads as a night landscape rather than as a broken page — a
   deep horizon wash with the same water tones the data uses. It is what sits
   behind the map while it loads, and what remains if it never arrives. */
#map {
  position: fixed; inset: 0;
  background:
    radial-gradient(115% 80% at 50% 108%, rgba(27, 143, 196, 0.20) 0%, rgba(27, 143, 196, 0) 62%),
    radial-gradient(90% 60% at 78% -8%, rgba(169, 140, 255, 0.10) 0%, rgba(169, 140, 255, 0) 60%),
    linear-gradient(178deg, #060b12 0%, #07101a 46%, #0a1826 78%, #0c2032 100%);
}

/* A soft vignette so floating glass always has something to sit against. */
#map-scrim {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,11,18,0.80) 0%, rgba(6,11,18,0) 20%),
    linear-gradient(0deg,   rgba(6,11,18,0.55) 0%, rgba(6,11,18,0) 24%);
  transition: opacity .5s var(--ease), background .5s var(--ease);
}
/* On the opening screen a soft pool of shade sits behind the headline so the
   type stays readable, while the map is still clearly a live map underneath. */
body[data-mode="explore"] #map-scrim {
  opacity: 1;
  background:
    radial-gradient(ellipse 70% 62% at 50% 44%, rgba(6,11,18,0.90) 0%, rgba(6,11,18,0.62) 45%, rgba(6,11,18,0) 78%),
    linear-gradient(180deg, rgba(6,11,18,0.80) 0%, rgba(6,11,18,0) 22%),
    linear-gradient(0deg,   rgba(6,11,18,0.70) 0%, rgba(6,11,18,0) 30%);
}

.maplibregl-ctrl-attrib { display: none !important; }
.maplibregl-canvas { outline: none; }

/* ══════════════════════════════ top bar ══════════════════════════════ */

.topbar {
  position: fixed; z-index: 30;
  top: calc(14px + var(--safe-t)); left: 14px; right: 14px;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: 999px; backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-soft);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  flex: none;
}
.brand:hover { border-color: var(--hairline-hi); }
.brand:active { transform: scale(.98); }
.brand-mark { width: 26px; height: 26px; color: var(--water); flex: none; }
.brand-mark .brand-peak { fill: rgba(79,216,255,.18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.brand-text b { font-size: 14.5px; letter-spacing: -0.015em; font-weight: 640; }
.brand-text i { font-style: normal; font-size: 11px; color: var(--fg-3); letter-spacing: .01em; }

/* search ------------------------------------------------------------- */

.search {
  position: relative; flex: 1 1 auto; max-width: 560px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 14px; height: 48px;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: 999px; backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-soft);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search:focus-within {
  border-color: rgba(79,216,255,.55);
  box-shadow: var(--shadow-soft), 0 0 0 4px var(--water-glow);
}
.search-icon { width: 18px; height: 18px; color: var(--fg-3); flex: none; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 15px; letter-spacing: -0.005em;
}
.search input::placeholder { color: var(--fg-3); }
.search input::-webkit-search-cancel-button { display: none; }

.search-busy {
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  overflow: hidden; border-radius: 2px;
}
.search-busy::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--water), transparent);
  animation: sweep 1.1s var(--ease) infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.icon-btn {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--fg-2); transition: background .2s, color .2s, transform .2s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: rgba(255,255,255,.07); color: var(--fg); }
.icon-btn:active { transform: scale(.92); }

/* suggestions -------------------------------------------------------- */

.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: 46vh; overflow: auto;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--r-md); backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-lift);
  animation: pop .18s var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.suggest li {
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
  display: flex; align-items: baseline; gap: 8px;
}
.suggest li:hover, .suggest li[aria-selected="true"] { background: rgba(79,216,255,.12); }
.suggest .s-main { font-size: 14px; }
.suggest .s-sub { font-size: 11.5px; color: var(--fg-3); margin-left: auto; flex: none; }
.suggest .s-empty { color: var(--fg-3); cursor: default; }
.suggest .s-empty:hover { background: none; }

/* top actions -------------------------------------------------------- */

.top-actions { display: flex; gap: 8px; flex: none; }
.pill {
  height: 40px; padding: 0 15px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  font-size: 13.5px; color: var(--fg-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.pill:hover { color: var(--fg); border-color: var(--hairline-hi); }
.pill:active { transform: scale(.97); }
.pill.ghost { background: rgba(10,18,28,.5); }
.badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--water); color: #04202c; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* ═══════════════════════════ opening state ═══════════════════════════ */

.opening {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 96px 22px 40px;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.opening-inner {
  pointer-events: auto; max-width: 660px; text-align: center;
  animation: rise .7s var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
body:not([data-mode="explore"]) .opening { opacity: 0; transform: translateY(-14px); pointer-events: none; }
body:not([data-mode="explore"]) .opening-inner { pointer-events: none; }

.eyebrow {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--water); background: rgba(79,216,255,.10);
  border: 1px solid rgba(79,216,255,.24); border-radius: 999px;
}
.opening h1 {
  font-size: clamp(30px, 5.4vw, 52px); line-height: 1.07;
  letter-spacing: -0.032em; font-weight: 660;
  background: linear-gradient(180deg, #ffffff 20%, #a9c6dd 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede {
  margin: 20px auto 0; max-width: 560px;
  font-size: 15.5px; line-height: 1.62; color: var(--fg-2);
}
.opening-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta {
  height: 48px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 560;
  background: linear-gradient(180deg, #63dfff, #23a7d8);
  color: #041824; box-shadow: 0 10px 30px rgba(79,216,255,.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(79,216,255,.36); }
.cta:active { transform: translateY(0) scale(.98); }
.cta.ghost {
  background: rgba(255,255,255,.06); color: var(--fg);
  border: 1px solid var(--hairline-hi); box-shadow: none;
}
.cta.ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; }

.featured {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 34px; max-width: 620px;
}
.feat {
  padding: 8px 14px; border-radius: 999px; font-size: 13px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
  color: var(--fg-2); transition: all .2s var(--ease);
}
.feat:hover { background: rgba(79,216,255,.13); border-color: rgba(79,216,255,.4); color: var(--fg); transform: translateY(-1px); }
.feat b { font-weight: 560; color: var(--fg); }

.opening-foot {
  margin-top: 40px; font-size: 12.5px; color: var(--fg-3);
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center;
}
.linkish {
  color: var(--water); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(79,216,255,.4); font-size: inherit;
}
.linkish:hover { text-decoration-color: var(--water); }

/* ═══════════════════════════════ panel ═══════════════════════════════ */

.panel {
  position: fixed; z-index: 25;
  top: calc(76px + var(--safe-t)); left: 14px; bottom: 14px; width: var(--panel-w);
  display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: slidein .4s var(--ease-out) both;
}
@keyframes slidein { from { opacity: 0; transform: translateX(-22px) scale(.98); } }
.panel-grip { display: none; }

.panel-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 14px 12px 18px; border-bottom: 1px solid var(--hairline);
  flex: none;
}
.panel-head-text { min-width: 0; flex: 1; }
.panel-head h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.28;
  overflow-wrap: anywhere;
}
.panel-head p { font-size: 12.5px; margin-top: 3px; }

.tabs {
  display: flex; gap: 2px; padding: 8px 10px; flex: none;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--fg-3);
  white-space: nowrap; transition: background .2s, color .2s;
}
.tab:hover { color: var(--fg-2); background: rgba(255,255,255,.05); }
.tab.is-on { background: rgba(79,216,255,.14); color: var(--water); }

.panel-body { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(148,178,208,.18); border-radius: 8px; }
.panel-body::-webkit-scrollbar-thumb:hover { background: rgba(148,178,208,.3); }

.tabpane { display: none; animation: fade .28s var(--ease); }
.tabpane.is-on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.panel-foot {
  display: flex; gap: 6px; padding: 10px; flex: none;
  border-top: 1px solid var(--hairline); background: rgba(6,11,18,.35);
}
.foot-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--r-sm); font-size: 11.5px; color: var(--fg-3);
  transition: background .2s, color .2s;
}
.foot-btn svg { width: 18px; height: 18px; }
.foot-btn:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.foot-btn.is-on { color: var(--water); }
.foot-btn.is-on svg { fill: rgba(79,216,255,.2); }

/* ══════════════════════════════ verdict ══════════════════════════════ */

.verdict {
  padding: 18px; margin-bottom: 12px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(79,216,255,.10), rgba(79,216,255,.02));
  border: 1px solid rgba(79,216,255,.20);
}
/* Deliberately not green.
   Green means "safe" in every interface anyone has ever used, and this app is
   not in a position to say that: a clean satellite record is exactly what a
   fast-draining flash-flood catchment produces, because the satellite was not
   looking when the water came. Neutral slate says "here is the record" and
   leaves the conclusion where it belongs. */
.verdict.is-neutral {
  background: linear-gradient(150deg, rgba(148,178,208,.08), rgba(148,178,208,.02));
  border-color: rgba(148,178,208,.20);
}
.verdict.is-wet {
  background: linear-gradient(150deg, rgba(255,187,92,.11), rgba(255,187,92,.02));
  border-color: rgba(255,187,92,.24);
}
.verdict-lead {
  font-size: 20px; line-height: 1.28; letter-spacing: -0.022em; font-weight: 580;
}
.verdict-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
.verdict-skeleton { height: 62px; border-radius: 8px; background: rgba(255,255,255,.05);
  animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* stats -------------------------------------------------------------- */

/* Two columns, not auto-fit. At the panel's width auto-fit resolved to three
   tracks, so the fourth stat was orphaned onto a row of its own and its note
   ("HAWKESBURY R WINDSOR · 2 days ago") was clipped mid-word. Four facts in a
   2x2 block is both tidier and legible at every panel width. */
.stat-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.stat {
  min-width: 0;                     /* or a long note widens its own track */
  padding: 12px 13px; border-radius: var(--r-md);
  background: rgba(255,255,255,.045); border: 1px solid var(--hairline);
}
.stat-k {
  font-size: 11px; color: var(--fg-3); letter-spacing: .015em;
  line-height: 1.25; min-height: 2.5em;   /* one- and two-line labels align */
  display: flex; align-items: flex-start;
}
.stat-v {
  font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-v small { font-size: 13px; font-weight: 500; color: var(--fg-3); margin-left: 2px; letter-spacing: 0; }
.stat-note {
  font-size: 11px; color: var(--fg-3); margin-top: 4px; line-height: 1.35;
  overflow-wrap: anywhere;          /* station names have no spaces to break on */
}
/* The one number on this card that is alive. Everything else here was settled
   years ago; this one moves, and during a flood it is the reason someone is
   looking at the page at all. */
.stat.is-live {
  background: linear-gradient(160deg, rgba(79,216,255,.10), rgba(255,255,255,.03));
  border-color: rgba(79,216,255,.22);
}
.stat.is-live .stat-v { color: var(--water); }
.stat.is-live .stat-k::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%; margin-left: 6px;
  background: var(--water); box-shadow: 0 0 6px var(--water-glow); flex: none;
  align-self: center;
}

/* cards -------------------------------------------------------------- */

.card {
  padding: 14px; margin-bottom: 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035); border: 1px solid var(--hairline);
}
.card.flagship {
  background: linear-gradient(160deg, rgba(169,140,255,.10), rgba(255,255,255,.02));
  border-color: rgba(169,140,255,.24);
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.card-head h3 { font-size: 13.5px; font-weight: 580; letter-spacing: .005em; flex: 1; }
.card-note { font-size: 12px; color: var(--fg-3); line-height: 1.55; margin-top: 9px; }
.help {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.07); color: var(--fg-3);
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.help:hover { background: rgba(79,216,255,.2); color: var(--water); }

.loading-bar { height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.06); position: relative; }
.loading-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--water), transparent);
  animation: sweep 1.2s var(--ease) infinite;
}

/* forty-year strip --------------------------------------------------- */

/* Forty years, two channels: bar height is how many clear passes the satellite
   got that year, blue fill is how many of them found water. A thin bar is a
   year we know little about, and it should look like one. */
.years-strip {
  display: flex; gap: 2px; align-items: flex-end; height: 96px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
}
.yr {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none;
  height: 100%; display: flex; align-items: flex-end; cursor: pointer;
  position: relative; border-radius: 3px;
}
/* The bar itself. `dry` here means observed-and-dry, which is a real
   measurement and deserves to look like one rather than like an absence. */
.yr-bar {
  display: block; width: 100%; position: relative;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgba(148,178,208,.30), rgba(148,178,208,.15));
  transition: filter .18s var(--ease), transform .18s var(--ease);
  transform-origin: bottom;
}
/* The wet portion, anchored to the bottom of its own year's bar. */
.yr-wet {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 0 0 1px 1px;
  background: linear-gradient(180deg, var(--water), var(--water-deep));
}
.yr.has-water .yr-bar { box-shadow: 0 0 12px var(--water-glow); }
.yr.has-water .yr-wet { border-radius: 3px 3px 1px 1px; }
.yr:hover .yr-bar { transform: scaleX(1.35); filter: brightness(1.25); z-index: 1; }
.yr:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
/* A year with no clear pass is not a low reading — it is no reading. Full
   height so it cannot be mistaken for a small number, hatched so it cannot be
   mistaken for a measurement. */
.yr.no-data .yr-bar {
  background: repeating-linear-gradient(45deg,
    rgba(255,187,92,.20) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px rgba(255,187,92,.16);
}
.yr.is-sel .yr-bar { outline: 1.5px solid var(--water); outline-offset: 1px; }

.years-axis {
  display: flex; justify-content: space-between; font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--fg-3); margin-top: 6px;
}
.years-axis .ax-mid { color: var(--fg-3); opacity: .7; }

.years-key {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
  font-size: 11px; color: var(--fg-3);
}
.years-key span { display: inline-flex; align-items: center; gap: 6px; }
.years-key .k { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.years-key .k-wet { background: linear-gradient(180deg, var(--water), var(--water-deep)); }
.years-key .k-dry { background: rgba(148,178,208,.30); }
.years-key .k-none {
  background: repeating-linear-gradient(45deg, rgba(255,187,92,.35) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px rgba(255,187,92,.30);
}
@media (prefers-reduced-motion: reduce) {
  .yr:hover .yr-bar { transform: none; }
}

/* trigger card ------------------------------------------------------- */

.trigger-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trigger-num { font-size: 38px; font-weight: 640; letter-spacing: -0.04em; line-height: 1;
  color: var(--violet); }
.trigger-unit { font-size: 15px; color: var(--fg-3); }
.trigger-vs { margin-top: 12px; }

.gaugebar { position: relative; height: 30px; margin: 14px 0 6px;
  border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.gaugebar-fill { position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--water-deep), var(--water)); opacity: .55;
  transition: width .8s var(--ease-out); }
.gaugebar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--violet);
  box-shadow: 0 0 8px rgba(169,140,255,.7); }
.gaugebar-mark::after {
  content: attr(data-label); position: absolute; top: -19px; left: 50%;
  transform: translateX(-50%); font-size: 10px; color: var(--violet); white-space: nowrap;
}
.gaugebar-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--fg-3); }

.obs-list { margin-top: 12px; display: flex; flex-direction: column; gap: 1px; }
.obs {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 6px; font-size: 12.5px; background: rgba(255,255,255,.03);
}
.obs:hover { background: rgba(255,255,255,.07); }
.obs-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--water); box-shadow: 0 0 6px var(--water-glow); }
.obs-date { flex: 1; color: var(--fg-2); }
.obs-val { font-weight: 560; }

.notice {
  margin-top: 11px; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.55; color: var(--fg-2);
  background: rgba(255,187,92,.09); border: 1px solid rgba(255,187,92,.2);
}
.notice.calm { background: rgba(148,178,208,.07); border-color: var(--hairline); color: var(--fg-3); }
.notice b { color: var(--caution); font-weight: 580; }

/* gauges / live ------------------------------------------------------ */

.gauge-card { padding: 14px; margin-bottom: 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035); border: 1px solid var(--hairline); }
.gauge-top { display: flex; align-items: flex-start; gap: 10px; }
.gauge-name { font-size: 13.5px; font-weight: 560; flex: 1; }
.gauge-dist { font-size: 11.5px; color: var(--fg-3); }
.gauge-now { text-align: right; }
.gauge-val { font-size: 26px; font-weight: 620; letter-spacing: -0.035em; line-height: 1; }
.gauge-val small { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.gauge-trend { font-size: 11.5px; margin-top: 3px; }
.trend-rising { color: var(--caution); }
.trend-falling { color: var(--dry); }
.trend-steady { color: var(--fg-3); }

.spark { width: 100%; height: 46px; margin-top: 10px; overflow: visible; }
.spark path.line { stroke: var(--water); stroke-width: 1.6; }
.spark path.area { fill: url(#sparkgrad); stroke: none; }

.ctx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px;
  padding-top: 11px; border-top: 1px solid var(--hairline); }
.ctx { font-size: 11px; color: var(--fg-3); }
.ctx b { display: block; font-size: 14px; color: var(--fg); font-weight: 580; margin-top: 2px; letter-spacing: -0.02em; }

/* escape routes ------------------------------------------------------ */

.compass { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
.compass-dial { position: relative; width: 128px; height: 128px; }
.compass-dial svg { overflow: visible; }
.route-list { display: flex; flex-direction: column; gap: 3px; }
.route {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: 6px; font-size: 12.5px; background: rgba(255,255,255,.03);
  transition: background .2s;
}
.route:hover { background: rgba(255,255,255,.08); }
.route-dir { width: 26px; font-weight: 600; font-size: 11.5px; color: var(--fg-3); }
.route-road { flex: 1; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-z { font-weight: 560; }
.route.is-best .route-dir { color: var(--dry); }

/* actions tab -------------------------------------------------------- */

.action-item {
  display: flex; gap: 11px; padding: 12px; margin-bottom: 8px;
  border-radius: var(--r-md); background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline);
}
.action-ico { width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: rgba(79,216,255,.13); color: var(--water); }
.action-ico svg { width: 16px; height: 16px; }
.action-body h4 { margin: 0 0 3px; font-size: 13px; font-weight: 570; }
.action-body p { font-size: 12px; color: var(--fg-3); line-height: 1.55; }

.linklist { display: flex; flex-direction: column; gap: 1px; }
.linklist a {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 7px;
  color: var(--fg-2); text-decoration: none; font-size: 13px;
  background: rgba(255,255,255,.03); transition: background .2s, color .2s;
}
.linklist a:hover { background: rgba(79,216,255,.12); color: var(--fg); }
.linklist a::after { content: "↗"; margin-left: auto; color: var(--fg-3); font-size: 12px; }
.linklist a.urgent { background: rgba(255,122,107,.11); border: 1px solid rgba(255,122,107,.24); }
.linklist a.urgent::after { content: "→"; }

/* events ------------------------------------------------------------- */

.event-list { display: flex; flex-direction: column; gap: 5px; }
.event {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.035);
  border: 1px solid transparent; text-align: left; width: 100%;
  transition: background .2s, border-color .2s, transform .15s;
}
.event:hover { background: rgba(79,216,255,.11); border-color: rgba(79,216,255,.3); transform: translateX(2px); }
.event-yr { font-size: 12px; font-weight: 620; color: var(--water); width: 34px; flex: none; }
/* Name above place. Both were inline spans, so they ran together with no
   separator at all — "Hawkesbury-Nepean floodWindsor and Richmond, NSW". */
.event-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.event-name { font-size: 13px; font-weight: 540; line-height: 1.3; }
.event-place {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event.is-near { border-color: rgba(79,216,255,.35); background: rgba(79,216,255,.08); }

/* ═══════════════════════════ scrubber ═══════════════════════════ */

.scrubber {
  position: fixed; z-index: 26; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--safe-b)); width: min(620px, calc(100vw - 28px));
  padding: 13px 16px 14px;
  background: var(--glass); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow-lift);
  animation: slideup .35s var(--ease-out) both;
}
@keyframes slideup { from { opacity: 0; transform: translate(-50%, 20px); } }
body.has-panel .scrubber { left: calc(50% + var(--panel-w) / 2 + 7px); }
.scrub-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.scrub-head b { font-size: 14px; font-weight: 580; }
.scrub-date { display: block; font-size: 12px; color: var(--water); margin-top: 2px; }
.scrub-controls { display: flex; align-items: center; gap: 12px; }
.icon-btn.play { background: rgba(79,216,255,.15); color: var(--water); width: 38px; height: 38px; }
.icon-btn.play:hover { background: rgba(79,216,255,.25); }
.icon-btn.play .ico-play path { fill: currentColor; stroke: none; }

#scrub-range {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px;
  background: rgba(148,178,208,.22); outline: none;
}
#scrub-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--water); box-shadow: 0 0 0 4px var(--water-glow); cursor: grab;
}
#scrub-range::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: var(--water); box-shadow: 0 0 0 4px var(--water-glow); cursor: grab;
}
.scrub-legend { margin-top: 10px; font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }

/* ═════════════════════════ map controls ═════════════════════════ */

.mapctl {
  position: fixed; z-index: 24; right: 14px; bottom: calc(14px + var(--safe-b));
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.map-btn {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--hairline);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft); font-size: 12px; font-weight: 600; color: var(--fg-2);
}
.map-btn.is-on { color: var(--water); border-color: rgba(79,216,255,.4); background: rgba(79,216,255,.14); }
#compass-needle path { fill: currentColor; stroke: none; }
#btn-north { transition: transform .3s var(--ease); }

.layerbox { position: relative; }
.layer-toggle {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px;
  border-radius: 12px; background: var(--glass); border: 1px solid var(--hairline);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft); font-size: 13px; color: var(--fg-2);
  transition: color .2s, border-color .2s;
}
.layer-toggle svg { width: 17px; height: 17px; }
.layer-toggle:hover { color: var(--fg); border-color: var(--hairline-hi); }
.layer-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 274px;
  padding: 8px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--hairline);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow-lift); animation: pop .18s var(--ease-out);
  max-height: 62vh; overflow: auto;
}
.layer-group { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-3); padding: 8px 9px 5px; }
.layer-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border-radius: 8px; font-size: 13px; color: var(--fg-2); text-align: left;
  transition: background .2s, color .2s;
}
.layer-item:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.layer-item.is-on { background: rgba(79,216,255,.13); color: var(--water); }
.layer-swatch { width: 15px; height: 15px; border-radius: 4px; flex: none; border: 1px solid rgba(255,255,255,.15); }
.layer-desc { font-size: 11px; color: var(--fg-3); display: block; margin-top: 1px; }

.attrib {
  position: fixed; z-index: 22; left: 14px; bottom: calc(6px + var(--safe-b));
  font-size: 10.5px; color: rgba(148,178,208,.55); max-width: 46vw;
  pointer-events: none; line-height: 1.45;
}
body.has-panel .attrib { left: calc(var(--panel-w) + 26px); }

/* ══════════════════════════════ sheet ══════════════════════════════ */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(4,8,13,.66);
  backdrop-filter: blur(3px); animation: fade .25s var(--ease);
}
.sheet {
  position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 28px)); max-height: min(80vh, 760px);
  display: flex; flex-direction: column;
  background: rgba(11, 19, 29, .96); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  animation: sheetin .3s var(--ease-out) both;
}
@keyframes sheetin { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.sheet-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--hairline);
}
.sheet-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; flex: 1; }
.sheet-body { padding: 18px 20px 22px; overflow-y: auto; font-size: 14px; line-height: 1.62; color: var(--fg-2); }
.sheet-body h3 { font-size: 14px; color: var(--fg); margin: 20px 0 7px; font-weight: 580; }
.sheet-body h3:first-child { margin-top: 0; }
.sheet-body p { margin-bottom: 11px; }
.sheet-body ul { margin: 0 0 12px; padding-left: 19px; }
.sheet-body li { margin-bottom: 6px; }
.sheet-body code { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,.07);
  padding: 1.5px 5px; border-radius: 4px; color: var(--water); }
.sheet-body a { color: var(--water); text-underline-offset: 3px; }

.limit {
  display: flex; gap: 11px; padding: 12px 13px; margin-bottom: 8px;
  border-radius: var(--r-md); background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline);
}
.limit-sev { width: 3px; border-radius: 3px; flex: none; background: var(--fg-3); }
.limit-sev.high { background: var(--caution); }
.limit h4 { margin: 0 0 3px; font-size: 13px; color: var(--fg); font-weight: 570; }
.limit p { margin: 0; font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }

/* watchlist ---------------------------------------------------------- */

.watch-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin-bottom: 8px;
  border-radius: var(--r-md); background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline); cursor: pointer; transition: background .2s, border-color .2s;
}
.watch-item:hover { background: rgba(79,216,255,.09); border-color: rgba(79,216,255,.28); }
.watch-body { flex: 1; min-width: 0; }
.watch-name { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.watch-status { font-size: 12px; text-align: right; flex: none; }
.watch-del { color: var(--fg-3); width: 30px; height: 30px; }
.watch-del:hover { color: var(--alarm); }

/* ══════════════════════════════ toast ══════════════════════════════ */

.toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b)); padding: 11px 18px; border-radius: 999px;
  background: rgba(16,26,38,.94); border: 1px solid var(--hairline-hi);
  box-shadow: var(--shadow-lift); font-size: 13.5px;
  backdrop-filter: blur(20px); animation: toastin .3s var(--ease-out);
  max-width: calc(100vw - 40px); text-align: center;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ═══════════════════════════ event bar ═══════════════════════════ */

.eventbar {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  top: calc(74px + var(--safe-t)); display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(58, 24, 18, .9); border: 1px solid rgba(255,122,107,.4);
  backdrop-filter: blur(18px); box-shadow: var(--shadow-lift);
  animation: slideup .35s var(--ease-out);
}
.eventbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alarm);
  box-shadow: 0 0 0 0 rgba(255,122,107,.6); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(255,122,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,107,0); } }
.eventbar a { color: var(--alarm); text-decoration: underline; text-underline-offset: 3px; }

/* ═════════════════════════ map popups/markers ═════════════════════════ */

.maplibregl-popup-content {
  background: rgba(11,19,29,.96) !important; color: var(--fg) !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--r-md) !important;
  padding: 12px 14px !important; font-family: var(--font) !important; font-size: 13px !important;
  box-shadow: var(--shadow-lift) !important; backdrop-filter: blur(20px);
}
.maplibregl-popup-tip { border-top-color: rgba(11,19,29,.96) !important;
  border-bottom-color: rgba(11,19,29,.96) !important; }
.maplibregl-popup-close-button { color: var(--fg-3) !important; font-size: 17px !important; padding: 4px 8px !important; }

/* ═══════════════════════════ responsive ═══════════════════════════ */

@media (max-width: 900px) {
  :root { --panel-w: 100%; }

  .topbar { flex-wrap: wrap; gap: 8px; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; }
  .brand-text i { display: none; }
  .search { order: 3; width: 100%; max-width: none; flex-basis: 100%; height: 46px; }
  .top-actions { margin-left: auto; }
  .pill.ghost { display: none; }

  /* The opening has to scroll on a phone: the headline, the explanation and a
     list of places do not fit above the fold on a 375-point screen, and
     squeezing them until they do would cost the type its authority. */
  .opening {
    padding: 118px 16px calc(28px + var(--safe-b));
    align-items: start; justify-items: stretch;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  }
  /* Without min-width:0 the nowrap places rail widens its grid track and drags
     the whole opening sideways off the screen. */
  .opening-inner { width: 100%; max-width: 100%; min-width: 0; }
  body[data-mode="explore"] .opening { pointer-events: auto; }

  /* On a phone the text occupies most of the screen, so the pool of shade has
     to cover most of it too, or place names from the basemap read straight
     through the paragraph. */
  body[data-mode="explore"] #map-scrim {
    background:
      linear-gradient(180deg,
        rgba(6,11,18,0.92) 0%, rgba(6,11,18,0.90) 52%,
        rgba(6,11,18,0.72) 74%, rgba(6,11,18,0.55) 100%);
  }
  .opening h1 { font-size: 29px; }
  .lede { font-size: 14.5px; margin-top: 16px; }
  .opening-actions { margin-top: 24px; flex-direction: column; align-items: stretch; }
  .opening-actions .cta { width: 100%; }

  /* Places become a horizontal rail rather than a wrapping wall of pills. */
  .featured {
    margin: 26px -16px 0; padding: 0 16px 4px; max-width: none;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .featured::-webkit-scrollbar { display: none; }
  .feat { flex: none; scroll-snap-align: start; white-space: nowrap; }

  /* Map controls have nothing to act on until a place is chosen, and they
     collide with the opening content on a narrow screen. */
  body[data-mode="explore"] .mapctl { display: none; }

  /* The panel becomes a bottom sheet.
     It opens at peek height on purpose: a phone should show the map, the pin
     and the headline answer together, and let the reader pull the rest up when
     they want it. Everything that floats above the sheet - the scrubber, the
     map controls - is positioned from --panel-h so nothing ever collides with
     the search bar as the sheet moves. */
  body { --panel-h: 74vh; }
  body.panel-peek { --panel-h: 340px; }

  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    height: var(--panel-h); border-radius: 22px 22px 0 0; border-bottom: 0;
    animation: sheetup .4s var(--ease-out) both;
    transition: height .38s var(--ease);
  }
  @keyframes sheetup { from { transform: translateY(60%); opacity: 0; } }
  .panel-grip {
    display: block; width: 100%; padding: 10px 0 5px; flex: none;
    touch-action: none;
  }
  .panel-grip::after {
    content: ""; display: block; width: 38px; height: 4px; margin: 0 auto;
    border-radius: 4px; background: rgba(148,178,208,.35);
    transition: background .2s;
  }
  .panel-grip:active::after { background: var(--water); }
  .panel-head { padding-top: 2px; }

  body.has-panel .scrubber { left: 50%; }
  .scrubber { bottom: calc(var(--panel-h) + 10px); transition: bottom .38s var(--ease); }

  .mapctl {
    right: 8px; bottom: calc(var(--panel-h) + 10px);
    flex-direction: row; align-items: center;
    transition: bottom .38s var(--ease);
  }
  body:not(.has-panel) .mapctl { bottom: calc(14px + var(--safe-b)); }
  /* At full height there is no map left to control; the buttons would sit
     under the search bar, so they step aside until the sheet comes down. */
  body.has-panel:not(.panel-peek) .mapctl { display: none; }

  .attrib { display: none; }
  .compass { grid-template-columns: 1fr; }
  .compass-dial { margin: 0 auto; }
}

@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .opening h1 { font-size: 26px; }
  .cta { height: 44px; padding: 0 20px; font-size: 14px; }
}

/* ══════════════════════ event mode: legibility first ══════════════════════ */

body[data-event="on"] {
  --fg-2: #cfdcea;
  --fg-3: #9db1c5;
}
body[data-event="on"] .panel-body { font-size: 16.5px; }
body[data-event="on"] .verdict-lead { font-size: 23px; }
body[data-event="on"] .card-note, body[data-event="on"] .stat-k { font-size: 13px; }
body[data-event="on"] .glass, body[data-event="on"] .panel { background: rgba(8, 14, 22, .93); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════ print ══════════════════════════════ */

@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #111; }
  #map, #map-scrim, .topbar, .mapctl, .scrubber, .panel-foot, .tabs,
  .attrib, .opening, .eventbar, .toast, .sheet-scrim, .help, .panel-grip { display: none !important; }
  .panel {
    position: static !important; width: auto !important; height: auto !important;
    background: #fff !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; animation: none !important;
  }
  .panel-body { overflow: visible !important; padding: 0 !important; }
  .tabpane { display: block !important; page-break-inside: avoid; }
  .card, .stat, .verdict, .gauge-card {
    background: #fff !important; border: 1px solid #ccd !important;
    color: #111 !important; page-break-inside: avoid;
  }
  .verdict-lead, .panel-head h2, .stat-v, .card-head h3 { color: #111 !important; }
  .muted, .card-note, .stat-k, .stat-note { color: #555 !important; }
  .yr-wet { background: #2a7fb8 !important; }
  .yr-bar { background: #dde4ea !important; box-shadow: none !important; }
  .yr.has-water .yr-bar { box-shadow: none !important; }
  .yr.no-data .yr-bar { background: repeating-linear-gradient(45deg, #c9a227 0 2px, transparent 2px 5px) !important; }
  .years-strip { border-bottom: 1px solid #ccd4dc !important; }
  .trigger-num { color: #4a3a8a !important; }
}

/* ─────────────────── water-frequency legend ─────────────────── */

.ramp { padding: 6px 10px 10px; }
.ramp-bar { height: 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); }
.ramp-labels {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 5px; font-size: 10.5px; color: var(--fg-3);
}
.ramp-labels span:last-child { text-align: right; }
.ramp-note { margin-top: 5px; font-size: 10.5px; color: var(--fg-3); line-height: 1.45; }

/* ─────────────────── flood memory capture and list ─────────────────── */

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: var(--fg-2);
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { background: rgba(255,255,255,.09); color: var(--fg); }
.chip.is-on { background: rgba(79,216,255,.14); border-color: rgba(79,216,255,.4); color: var(--water); }

.field-label { display: block; margin: 16px 0 6px; font-size: 12.5px; color: var(--fg-3); }
.field {
  width: 100%; padding: 10px 12px; border-radius: 9px; font-family: inherit; font-size: 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  color: var(--fg); outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { border-color: rgba(79,216,255,.5); box-shadow: 0 0 0 3px var(--water-glow); }
.field-btn { width: 100%; height: 42px; font-size: 13.5px; }

.mem-preview { margin-top: 10px; }
.mem-preview img {
  width: 100%; max-height: 240px; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
}

.mem-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px; margin-bottom: 8px;
  border-radius: var(--r-md); background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline);
}
.mem-thumb {
  width: 62px; height: 62px; flex: none; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.05);
}
.mem-thumb-empty { display: grid; place-items: center; color: var(--violet); padding: 16px; }
.mem-body { flex: 1; min-width: 0; }
.mem-title { font-size: 14px; font-weight: 570; }
.mem-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.mem-note { font-size: 12.5px; color: var(--fg-2); margin-top: 5px; line-height: 1.5; }
.mem-actions { display: flex; flex-direction: column; gap: 2px; flex: none; }

/* ─────────────── print-only masthead and colophon ─────────────── */

.printhead, .printfoot { display: none; }

@media print {
  .printhead { display: block; margin-bottom: 16px; }
  .printhead-top {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 8px; border-bottom: 2px solid #111;
  }
  .printhead-top b { font-size: 17px; letter-spacing: -0.02em; }
  .printhead-top span { font-size: 11px; color: #555; }
  .printhead h1 { font-size: 21px; margin: 14px 0 4px; letter-spacing: -0.02em; }
  .printhead p { font-size: 11.5px; color: #555; margin: 0 0 8px; }
  .printhead-warn {
    margin-top: 10px !important; padding: 9px 11px;
    border: 1px solid #bbb; border-left: 3px solid #111;
    font-size: 10.5px !important; line-height: 1.5; color: #333 !important;
  }

  .printfoot {
    display: block; margin-top: 18px; padding-top: 10px;
    border-top: 1px solid #ccc; font-size: 9.5px; line-height: 1.5; color: #555;
    page-break-inside: avoid;
  }
  .printfoot p { margin: 0 0 5px; }
}

@media print {
  .printfoot h2 { font-size: 13px; margin: 0 0 6px; color: #111; }
  .printfoot ol { margin: 0 0 10px; padding-left: 18px; }
  .printfoot li { margin-bottom: 4px; }
  .printfoot li b { color: #111; }
}

.watch-gap { font-size: 11.5px; color: var(--fg-2); margin-top: 4px; }

.layer-item.is-off { opacity: .55; cursor: default; }
.layer-item.is-off:hover { background: none; color: var(--fg-2); }

/* A control that still works but cannot deliver everything it implies. Dimmed
   rather than disabled: tilting a flat map is still useful, and a dead button
   with no explanation is worse than a working one that is honest in its
   tooltip. */
.is-degraded { opacity: 0.6; position: relative; }
.is-degraded::after {
  content: '';
  position: absolute; top: 5px; right: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--caution);
  box-shadow: 0 0 0 2px var(--ink-2);
}

/* Shown only when the map background could not be fetched. Deliberately small
   and low: the reader's attention belongs on the record, which still works.
   Its whole job is to stop an empty map reading as a broken page. */
.basemap-note {
  /* Above the panel and the map chrome. At z-index 6 it sat underneath both, so
     on a phone — where the bottom sheet occupies the lower half of the screen —
     the notice was covered and unclickable exactly when the map was broken,
     which is the only time it exists. */
  position: fixed; z-index: 61;
  /* Bottom left, clear of the centred opening column and of the map controls
     on the right. It is a footnote about one broken part, not an announcement,
     and it must never sit on top of the thing the reader came for. */
  left: 16px;
  bottom: calc(16px + var(--safe-b));
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  width: min(400px, calc(100vw - 32px));
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--hairline-hi); border-radius: var(--r-md);
  background: var(--glass); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-soft);
  animation: note-in .45s var(--ease-out) both;
}
@keyframes note-in { from { opacity: 0; transform: translateY(10px); }
                     to   { opacity: 1; transform: none; } }
.basemap-note .dot {
  width: 7px; height: 7px; border-radius: 50%; margin-top: 5px;
  background: var(--caution); box-shadow: 0 0 8px var(--caution);
}
.basemap-note b { font-size: 13px; color: var(--fg); }
.basemap-note p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--fg-2); }
.basemap-note .x {
  background: none; border: 0; color: var(--fg-3); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.basemap-note .x:hover { color: var(--fg); background: var(--glass-hi); }
@media (prefers-reduced-motion: reduce) { .basemap-note { animation: none; } }

/* A verdict that has nothing to report because nothing could be asked. Neutral
   in tone and colour on purpose: it is neither good news nor bad news, and
   dressing it as either would be its own small lie. */
.verdict.is-unknown {
  background: rgba(255,255,255,.03);
  border-color: var(--hairline-hi);
}
.verdict.is-unknown .verdict-lead { color: var(--fg-2); }

/* A note that has to be read, not skimmed past — the figures above it describe
   less than they appear to. */
.card-note.is-caution {
  color: var(--fg-2);
  border-left: 2px solid var(--caution);
  padding-left: 9px;
}