/* Zelivka page styles: the page's own stylesheet, promoted from the D-04 mockup by build step 6
   (docs/mockups/ renders its states through this file). Tokens only - every colour, size and
   duration is a variable from frontend/tokens.css. Layout keys on the page root's own width
   (container queries), so the same page renders at 380 px and on desktop. */

/* base rules the mockup harness's own CSS used to supply (build step 6, decided item 15) */
html, body { margin: 0; background: var(--color-canvas); }
.zl { min-block-size: 100dvh; }

.zl {
  container-type: inline-size;
  container-name: zl;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
}
/* the document is the scroller, so the padding that keeps the sticky header bar from hiding an
   anchor's target or a focused element (WCAG 2.4.11) belongs on the root, not on the page container;
   a target's own scroll-margin adds to it (explain.css, where.css) */
:root { scroll-padding-block-start: calc(var(--header-h) + var(--space-4)); }
.zl *, .zl *::before, .zl *::after { box-sizing: border-box; }
.zl :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
.zl :where(ul, ol) { padding: 0; list-style: none; }
.zl a { color: var(--color-link); text-underline-offset: 0.18em; }
.zl a:hover { text-decoration-thickness: 2px; }
.zl a:focus-visible, .zl .zl-menu-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
/* visually hidden, read by a screen reader (the bar's ", stav: ", a pin's state) */
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the header bar (build step 6f, UI_UX §2.6) ----------
   One sticky bar on every screen and width, above every positioned element of the page (z-index 3);
   the menu panel hangs under it inside the same sticky wrap, an overlay that never pushes the page.
   Its height is --header-h (tokens.css), which the root's scroll padding and the explanation's side
   contents read too; its content edge is the page's. */
.zl-barwrap { position: sticky; inset-block-start: 0; z-index: 3; }
/* the bar is --header-h tall with its hairline included (border-box), its row filling the rest; the
   track may shrink below the row's content, so a column under 320 px never scrolls sideways */
.zl-bar { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: var(--header-h); background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.zl-bar-in { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--gutter); }
.zl-brand { flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; gap: var(--space-2); min-block-size: 44px; color: var(--color-text); text-decoration: none; }
.zl-brand:hover .zl-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.zl-brand:active .zl-name { color: var(--color-text-2); }
.zl-mark { flex: none; }
.zl-mark-board { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 1.4; }
.zl-mark-stripe { fill: var(--color-gauge); }
.zl-mark-water { fill: var(--color-water); }
.zl-mark-surface { fill: none; stroke: var(--color-water-deep); stroke-width: 1.4; stroke-linecap: round; }
.zl-words { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
/* line 1 never wraps: it is the wider line, so it alone sets how narrow the bar can go - 320 px of
   column with 3 px to spare (measured 2026-10-16, an 8 px gap after the mark); in a narrower one the place name is cut at the
   brand's edge, never run under the Menu (clip across only, so the Ž's caron above the line stays) */
.zl-line1 { display: flex; align-items: baseline; white-space: nowrap; overflow-x: clip; }
.zl-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); line-height: 1; letter-spacing: var(--tracking-display); }
.zl-place { font-size: var(--text-xs); color: var(--color-text-2); white-space: pre; }
.zl-status { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.3; white-space: nowrap; overflow-x: clip; }
.zl-status .shape { flex: none; }
.zl-status-fig { display: none; font-weight: var(--weight-regular); color: var(--color-text-2); }
/* the four screen links (from 900 px) and the Menu button (phones) */
.zl-screens { display: none; font-size: var(--text-sm); }
.zl-screens ul { display: flex; gap: var(--space-1); }
.zl-screen { position: relative; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-3); color: var(--color-text-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); }
.zl-screen:hover { background: var(--color-sunk); color: var(--color-text); }
.zl-screen:active { background: var(--color-sunk); color: var(--color-text); }
.zl-screen[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-strong); }
.zl-screen[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--space-3); inset-block-end: var(--space-1); block-size: 3px; border-radius: var(--radius-full); background: var(--color-water-deep); }
.zl-menu-btn { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding-inline: var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.zl-menu-btn:hover, .zl-menu-btn[aria-expanded="true"] { background: var(--color-sunk); }
.zl-menu-btn:active { background: var(--color-sunk); color: var(--color-text-2); }
.zl-menu-icon path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* the menu panel: under the bar across the column, on the surface with the strong border and the
   card radius, no shadow; scrolls on its own when taller than the window below the bar */
.zl-menu { position: absolute; inset-inline: var(--gutter); inset-block-start: calc(100% + var(--space-2)); display: grid; gap: var(--space-4); padding: var(--space-3); max-block-size: calc(100dvh - var(--header-h) - var(--space-4)); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
/* stated, because any author display on .zl-menu would override the hidden attribute */
.zl-menu[hidden] { display: none; }
.zl-menu-list { display: grid; gap: var(--space-1); }
.zl-menu-link { display: grid; gap: 2px; min-block-size: 48px; padding: var(--space-2) var(--space-3); color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); border-inline-start: 3px solid transparent; }
.zl-menu-link:hover, .zl-menu-link:active { background: var(--color-sunk); }
.zl-menu-link[aria-current="page"] { border-inline-start-color: var(--color-water-deep); background: var(--color-sunk); }
.zl-menu-title { font-weight: var(--weight-strong); }
.zl-menu-desc { font-size: var(--text-xs); color: var(--color-text-2); }
.zl-menu-head { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-2); margin-block-end: var(--space-2); }
.zl-menu-jumps ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zl-jump { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.zl-jump:hover, .zl-jump:active { background: var(--color-sunk); }
.zl-menu-foot { display: grid; gap: var(--space-1); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); }
.zl-menu-foot a { display: inline-flex; align-items: center; min-block-size: 44px; }
@container zl (min-width: 900px) {
  .zl-bar-in { gap: var(--space-4); padding-inline: var(--space-8); inline-size: 100%; max-inline-size: 1240px; margin-inline: auto; }
  .zl-name { font-size: 1.5rem; }   /* 24 px from 900 px (UI_UX §2.6 item 2) */
  .zl-status-fig { display: inline; }
  .zl-screens { display: block; }
  .zl-menu-btn, .zl-menu { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .zl-screen, .zl-menu-btn, .zl-menu-link, .zl-jump { transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out; }
}
@media print {
  .zl-barwrap { position: static; }
  .zl-menu-btn, .zl-menu { display: none; }
}

/* flex: 1 keeps the footer at the bottom of a short screen; align-content keeps the spare height
   out of the rows, which would otherwise stretch a lone note to fill it */
.page { flex: 1; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-3) var(--gutter) var(--space-10); }
.col { display: grid; gap: var(--space-4); align-content: start; container: col / inline-size; }
.zl { display: flex; flex-direction: column; }
.page--stations { container: col / inline-size; }
@container zl (min-width: 900px) {
  .page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); padding: var(--space-4) var(--space-8) var(--space-10); inline-size: 100%; max-inline-size: 1240px; margin-inline: auto; }
  .page .footer { grid-column: 1 / -1; }
  .page--stations { grid-template-columns: minmax(0, 720px); justify-content: center; }
}

/* ---------- surfaces ---------- */
.sheet, .card { background: var(--color-surface); border: 1px solid var(--color-border); }
.sheet { border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); }
.card { border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.card-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.card-sub { color: var(--color-text-2); font-size: var(--text-sm); margin-block-start: calc(var(--space-2) * -1); }
.sub-title { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-text-2); margin-block-start: var(--space-2); }
.meta { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---------- status shapes and chips ---------- */
.shape { flex: none; overflow: visible; }
.shape path, .shape circle, .shape rect { stroke-width: 1.5; }
.shape--normal circle { fill: var(--sev-normal-fill); stroke: var(--sev-normal-edge); }
.shape--1 path { fill: var(--sev-1-fill); stroke: var(--sev-1-edge); stroke-linejoin: round; }
.shape--2 path { fill: var(--sev-2-fill); stroke: var(--sev-2-edge); stroke-linejoin: round; }
.shape--3 path { fill: var(--sev-3-fill); stroke: var(--sev-3-edge); stroke-linejoin: round; }
.shape--headsup .ring { fill: none; stroke: var(--sev-headsup-fill); stroke-width: 2; }
.shape--headsup .dot { fill: var(--sev-headsup-fill); }
.shape--info rect { fill: var(--sev-info-fill); stroke: var(--sev-info-fill); }
.shape--stale circle, .shape--suspect circle, .shape--degraded circle { fill: var(--sev-stale-fill); stroke: var(--sev-stale-on); stroke-dasharray: 3 2.4; }
.shape .q { fill: var(--sev-stale-on); font-size: 11px; font-weight: var(--weight-strong); font-family: var(--font-body); }

.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-strong); justify-self: start; border: 1.5px solid transparent; }
.chip--normal { background: var(--sev-normal-fill); color: var(--sev-normal-on); border-color: var(--sev-normal-edge); }
.chip--1 { background: var(--sev-1-fill); color: var(--sev-1-on); border-color: var(--sev-1-edge); }
.chip--2 { background: var(--sev-2-fill); color: var(--sev-2-on); border-color: var(--sev-2-edge); }
.chip--3 { background: var(--sev-3-fill); color: var(--sev-3-on); border-color: var(--sev-3-edge); }
.chip--headsup { background: var(--sev-headsup-fill); color: var(--sev-headsup-on); }
.chip--info { background: var(--sev-info-fill); color: var(--sev-info-on); }
.chip--info .shape rect { fill: var(--sev-info-on); stroke: var(--sev-info-on); }
.chip--stale, .chip--suspect, .chip--degraded { background: var(--sev-stale-fill); color: var(--sev-stale-on); border: 1.5px dashed var(--sev-stale-on); }
/* inside a filled chip the shape keeps its outline but sits on the chip's own colour */
.chip--1 .shape path, .chip--2 .shape path { fill: var(--color-surface); }
.chip--3 .shape path { fill: var(--sev-3-on); stroke: var(--sev-3-on); }
.chip--normal .shape circle { fill: var(--color-surface); }

/* ---------- verdict ---------- */
.verdict-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.verdict-head { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.verdict-sub { color: var(--color-text-2); }
.hero-figure { display: flex; align-items: baseline; gap: var(--space-2); }
.hero-figure .figure { font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-water-text); }
.hero-unit { font-size: var(--text-lg); color: var(--color-text-2); }
.hero-figure--small .figure { font-size: var(--text-xl); }
.quiet-note { font-size: var(--text-sm); color: var(--color-text-2); background: var(--color-sunk); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.historic { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--color-text-2); }
.historic-label { font-size: var(--text-xs); font-weight: var(--weight-strong); }
.frozen { color: var(--color-text-muted); font-size: var(--text-sm); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }

.alerts { display: grid; gap: var(--space-2); }
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-canvas); border-inline-start: 4px solid var(--sev-1-edge); }
.alert--2 { border-inline-start-color: var(--sev-2-edge); }
.alert--3 { border-inline-start-color: var(--sev-3-edge); }
.alert--easing { border-inline-start-style: dashed; }
.alert--easing .shape { opacity: 0.6; }
.alert-title { line-height: 1.3; }
.easing-tag { font-weight: var(--weight-regular); color: var(--color-text-2); font-size: var(--text-sm); }
.alert-meta { font-size: var(--text-sm); color: var(--color-text-2); }
.verdict--sev-1 { border: 2px solid var(--sev-1-edge); }
.verdict--sev-2 { border: 2px solid var(--sev-2-edge); }
.verdict--sev-3 { border: 2px solid var(--sev-3-edge); }
.alert--headsup { border-inline-start-color: var(--sev-headsup-fill); }
.placement { font-size: var(--text-sm); color: var(--color-text-2); }
.placement .shape { vertical-align: -2px; }

.trend { font-size: var(--text-sm); color: var(--color-text-2); }
.trend-arrow { font-weight: var(--weight-display); color: var(--color-water-text); }

/* ---------- drawings ---------- */
/* drawings scale with their column up to a cap, so their labels never grow past body size */
.drawing { display: block; inline-size: 100%; max-inline-size: 520px; block-size: auto; }
.chart-gap { fill: url(#zl-hatch); }
.hatch-bg { fill: var(--color-sunk); }
.hatch-line { stroke: var(--color-border-strong); stroke-width: 1; }
.step-name--unknown { color: var(--color-text-2); }
.drawing text { font-family: var(--font-body); }
.mm-grid { fill: none; }
/* millimetre paper behind the two drawings only - never behind text blocks */
.dam, .cottage {
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 10px 10px;
  border-radius: var(--radius-sm);
}
.label { font-size: 10.5px; fill: var(--color-text-2); }
.label--muted { fill: var(--color-text-muted); }
.label--strong { fill: var(--color-text); font-weight: var(--weight-strong); }
.label--water { fill: var(--color-water-text); font-weight: var(--weight-strong); }
.label--tiny { font-size: 9.5px; fill: var(--color-text-muted); }
/* a label crossing lines or water keeps a halo of the surface colour, so it stays readable */
.halo { paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
.water { fill: var(--color-water); opacity: 0.85; }
.water--glass { opacity: 0.45; }
.water--front { opacity: 0.7; }
.ripple { fill: none; stroke: var(--color-water-deep); stroke-width: 1.5; stroke-linecap: round; }
.ground { fill: var(--color-soil); opacity: 0.55; }
.meadow { fill: var(--color-meadow); }
.tuft { fill: none; stroke: var(--color-meadow-deep); stroke-width: 1.2; }
.dam-body { fill: var(--color-sunk); stroke: var(--color-text-2); stroke-width: 1.5; stroke-linejoin: round; }
.break { fill: none; stroke: var(--color-text-2); stroke-width: 1.2; }
.ref { stroke-width: 1.5; }
.ref--spill { stroke: var(--color-text); stroke-dasharray: 6 4; }
.ref--storage { stroke: var(--color-text-muted); stroke-dasharray: 2 3; }
.gauge-board { fill: var(--color-surface); stroke: var(--color-gauge); stroke-width: 1; }
.gauge-stripe { fill: var(--color-gauge); }
.level-mark { stroke: var(--color-water-text); stroke-width: 2.5; stroke-linecap: round; }
.bracket { fill: none; stroke: var(--color-text); stroke-width: 1.2; stroke-dasharray: 2 2; }
.cottage-wall { fill: var(--color-cottage-wall); stroke: var(--color-text-2); stroke-width: 1.2; }
.cottage-roof { fill: var(--color-cottage-roof); }
.cottage-door { fill: var(--color-cottage-roof); opacity: 0.8; }
.cottage-window { fill: var(--color-water-deep); opacity: 0.35; stroke: var(--color-text-2); stroke-width: 1; }
.flood-mark { stroke: var(--color-text); stroke-width: 1.2; stroke-dasharray: 3 2; }
.plaque { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 1; }
.plaque-text { font-size: 8.5px; font-weight: var(--weight-strong); fill: var(--color-text); }
.axis-grid { stroke: var(--color-grid); stroke-width: 1; }
.axis-grid--day { stroke: var(--color-border-strong); stroke-opacity: 0.4; }
.band { stroke-width: 1.5; }
.band--1 { fill: var(--sev-1-fill); stroke: var(--sev-1-edge); }
.band--2 { fill: var(--sev-2-fill); stroke: var(--sev-2-edge); }
.band--3 { fill: var(--sev-3-fill); stroke: var(--sev-3-edge); }
.band--open { fill-opacity: 0.35; stroke-dasharray: 4 3; }
.threshold { stroke-width: 2.5; }
.threshold--1 { stroke: var(--sev-1-edge); }
.threshold--2 { stroke: var(--sev-2-edge); }
.threshold--3 { stroke: var(--sev-3-edge); }
.obs { stroke: var(--color-text); stroke-width: 1.5; }
.obs--1 { fill: var(--sev-1-fill); }
.obs--2 { fill: var(--sev-2-fill); }
.obs--3 { fill: var(--sev-3-fill); }
.obs--unknown { fill: var(--color-surface); stroke-dasharray: 2 1.5; }
/* a "nothing happened" day on the band view's calm row (U-6, build step 6c); the explanation's ladder too */
.obs--zero { fill: var(--sev-normal-fill); }
.upper-bound { stroke: var(--color-text); stroke-width: 1.2; }
.now-line { stroke: var(--color-water-deep); stroke-width: 2; }
.chart-area { fill: var(--color-water); opacity: 0.25; }
.chart-line { fill: none; stroke: var(--color-water-deep); stroke-width: 2; stroke-linejoin: round; }
.chart-now { fill: var(--color-water-deep); stroke: var(--color-surface); stroke-width: 2; }

/* ---------- Posledních 24 hodin (build step 6d, UI_UX §2.4) ---------- */
/* the page's one hatch pattern lives in a zero-size svg, never display:none (that drops the pattern) */
.zl-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.den { gap: var(--space-4); }
.den-key { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.den-key-stroke { flex: none; }
.den-key-stroke:not(:first-child) { margin-inline-start: var(--space-2); }
.den-fig { display: grid; gap: var(--space-1); margin: 0; }
.den-head { display: grid; gap: var(--space-1); }
.den-line { font-size: var(--text-sm); line-height: 1.4; }
.den-value { font-variant-numeric: tabular-nums; }
.den-line--derived { color: var(--color-text-2); }
/* derived beside measured: dashed and thinner in the secondary ink - told apart by line and label,
   never colour alone (§5); a suspect stretch's curve in the muted ink on the sunk band */
.chart-line--derived { stroke: var(--color-text-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-line--suspect { stroke: var(--color-text-muted); }
.den-suspect { fill: var(--color-sunk); }
.den-bracket { fill: none; stroke: var(--color-text-2); stroke-width: 1; }
/* the pick (S48): a native range control in a 44 px row; "Zavřít" while a moment is picked */
.den-pick { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; flex-wrap: wrap; }
.den-pick-label { font-size: var(--text-sm); font-weight: var(--weight-strong); min-inline-size: 9.5rem; }
.den-range { flex: 1 1 10rem; min-block-size: 44px; margin: 0; accent-color: var(--color-water-deep); cursor: pointer; }
.den-range:focus-visible, .den-close:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.den-close { min-block-size: 44px; padding: var(--space-1) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--color-text); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.den-close:hover { background: var(--color-sunk); }
.den-close:active { background: var(--color-sunk); border-color: var(--color-text-2); }
.den-close[hidden] { display: none; }
.den-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.den-figs { display: grid; gap: var(--space-4); }
.den-chart { touch-action: pan-y; cursor: crosshair; }
.den-pick-line { stroke: var(--color-text); stroke-width: 1; }
.den-pick-dot { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 1.5; }
.den-value--none { color: var(--color-text-2); }
.den-suspect-word { color: var(--color-text-2); white-space: nowrap; }

/* the water rises to the real level once, and the ripple drifts twice - then everything rests */
@media (prefers-reduced-motion: no-preference) {
  .water-rise { animation: zl-rise var(--duration-fill) var(--ease-water) both; }
  .ripple { animation: zl-ripple 1.8s ease-in-out var(--duration-fill) var(--ripple-cycles) alternate; }
}
@keyframes zl-rise { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes zl-ripple { from { transform: translateX(0); } to { transform: translateX(-12px); } }
.page--flood .water-rise, .page--flood .ripple { animation: none; }
/* a refresh whose level did not change re-renders still: the water rises only when it moved
   (build step 6, decided item 5) */
.zl--still .water-rise, .zl--still .ripple { animation: none; }

/* ---------- cottage panel ---------- */
.step-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); }
.step-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); color: var(--color-water-text); }
.steps { display: grid; gap: var(--space-1); }
.step { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "icon thr"; column-gap: var(--space-3); align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.step .shape { grid-area: icon; }
.step-label { grid-area: label; font-weight: var(--weight-strong); line-height: 1.3; }
.step--reached { background: var(--color-sunk); }
.step-thr { grid-area: thr; color: var(--color-text-2); font-size: var(--text-sm); line-height: 1.3; }
.panel-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-2); background: var(--color-sunk); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.panel-note .shape { margin-block-start: 0.2em; }

/* ---------- values ---------- */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.values--stack, .values--pair { gap: var(--space-2) var(--space-4); }
.values--stack { grid-template-columns: 1fr; }
.value { display: grid; gap: 0; align-content: start; }
.value dt { font-size: var(--text-xs); color: var(--color-text-2); font-weight: var(--weight-strong); }
.value .figure { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.value--big .figure { font-size: var(--text-xl); font-weight: var(--weight-display); color: var(--color-water-text); letter-spacing: var(--tracking-display); }
.value .unit { color: var(--color-text-2); font-size: var(--text-sm); }
@container col (min-width: 560px) { .values:not(.values--stack):not(.values--pair) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.flowbands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; font-size: var(--text-xs); text-align: center; }
.flowband { padding: var(--space-2) var(--space-1); background: var(--color-sunk); color: var(--color-text-2); }
.flowband:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.flowband:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.flowband--now { background: var(--color-water-deep); color: var(--color-surface); font-weight: var(--weight-strong); outline: 2px solid var(--color-water-text); outline-offset: 1px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.split > div { display: grid; gap: var(--space-3); }

.meter { display: grid; gap: var(--space-1); }
.meter-head { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.figure-sm { font-weight: var(--weight-strong); }
.meter-track { position: relative; block-size: 12px; background: var(--color-sunk); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); }
.meter-fill { block-size: 100%; background: var(--color-water); border-radius: var(--radius-full); inline-size: 0; }
.meter--dry .meter-fill { background: var(--sev-1-fill); box-shadow: inset 0 0 0 1.5px var(--sev-1-edge); }
.meter-limit { position: absolute; inset-block: -4px; inline-size: 2px; background: var(--color-text); }
.context { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); font-size: var(--text-sm); color: var(--color-text-2); display: grid; gap: var(--space-1); }
.context-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); }

/* ---------- footer ---------- */
.footer { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-2); padding-block: var(--space-4); border-block-start: 1px solid var(--color-border); }
.disclaimer { font-weight: var(--weight-strong); color: var(--color-text); }

/* ---------- stations screen ---------- */
.screen-head { display: grid; gap: var(--space-2); }
.screen-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.back-link { font-size: var(--text-sm); justify-self: start; min-block-size: 24px; }
.river { position: relative; display: grid; gap: var(--space-3); padding-inline-start: var(--space-6); }
.river::before { content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: 9px; inline-size: 4px; border-radius: var(--radius-full); background: var(--color-water); }
.river-label { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-water-text); text-transform: uppercase; letter-spacing: 0.06em; margin-block-start: var(--space-2); }
.station { position: relative; }
.station-node { position: absolute; inset-inline-start: calc(var(--space-6) * -1 + 3px); inset-block-start: var(--space-4); inline-size: 16px; block-size: 16px; border-radius: var(--radius-full); background: var(--color-surface); border: 3px solid var(--color-water-deep); }
.station-node--dam { border-radius: 3px; background: var(--color-water-deep); }
.station-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.station-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.values--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.station-card--dam { background: var(--color-sunk); }