/* Water visualisations (water spec §3). V1 "O ano da água" (_WaterYear.cshtml, water-year.js); V2–V4 further down.
   Reads the context variables of the poster (green, dark) and paper (light) contexts; the water colours are tokens below
   with a variant for each context. No inline styles: the script writes SVG attributes and textContent only.
   Modes: data-mode="static" (server render, no JS, reduced motion: twelve small multiples with month-end counters) and
   data-mode="anim" (the cross-section, the month strip and the running counters). data-ready = controls work. */

/* ------------------------------------------------------------------ tokens (dark: the green poster) */
.water-year {
  --wy-rain: #8EC9F0;        /* rain on green-900: 8.7:1 */
  --wy-eto: #F0A07A;         /* evaporation (ETo): 7.4:1 */
  --wy-recharge: #5FD0C0;    /* recharge: 8.3:1 */
  --wy-plant: var(--red-300);/* the plant's draw: 5.0:1 */
  --wy-sky: var(--green-800);
  --wy-soil: #3A3B26;
  --wy-granite: #2F3A33;
  --wy-crack: #5E6E62;
  --wy-pipe: #C5DCD8;
}
/* light: paper bands and dossier pages */
.band--paper .water-year,
.dossier .water-year {
  --wy-rain: #1F64A3;        /* on paper-50: 5.4:1 (paper-100 5.1) */
  --wy-eto: #A4471F;         /* 5.2:1 */
  --wy-recharge: #0B6F62;    /* 5.3:1 */
  --wy-plant: var(--red-700);/* 6.4:1 */
  --wy-sky: #E4DED0;
  --wy-soil: #CDBE9C;
  --wy-granite: #BDB6A8;
  --wy-crack: #8C8578;
  --wy-pipe: var(--ink-600);
}

/* ------------------------------------------------------------------ frame and modes */
.water-year { display: grid; gap: var(--s-4); margin: var(--s-5) 0; min-width: 0; color: var(--fg); }
.water-year [hidden] { display: none !important; }
.water-year p { margin: 0; }
.water-year:not([data-ready]) .wy-js { display: none; }
.water-year:not([data-mode="anim"]) .wy-anim { display: none; }
.water-year[data-mode="anim"] .wy-static { display: none; }
.water-year[data-source="mains"] [data-wy-scene-show="groundwater"],
.water-year[data-source="mains"] [data-wy-show-svg="groundwater"],
.water-year:not([data-source="mains"]) [data-wy-scene-show="mains"] { display: none; }

.wy-head__title {
  margin: 0;
  letter-spacing: normal;
  font-family: var(--font-display);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: var(--display-4);
  line-height: 1;
  text-transform: uppercase;
}
/* on the Água page V1 and V2 are sections of their own (h2): same weight and size as the page's other section h2s */
h2:is(.wy-head__title, .ws-head__title) {
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: var(--display-3);
  line-height: 0.9;
  letter-spacing: -0.005em;
}
.wy-head__sub { margin-top: var(--s-1); max-width: 46rem; color: var(--fg-muted); font-size: var(--text-sm); }

/* ------------------------------------------------------------------ controls */
.wy-controls { display: grid; gap: var(--s-3); }
.wy-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.wy-group__l {
  flex: 0 0 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (min-width: 48rem) {
  .wy-controls .wy-group__l { flex: 0 0 9rem; }
}
.wy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.5rem 0.85rem 0.45rem;
  border: 1.5px solid var(--rule-color);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.wy-chip:hover { border-color: var(--fg); }
.wy-chip[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.wy-chip:focus-visible,
.wy-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wy-chip--sm { padding-inline: 0.6rem; }

/* ------------------------------------------------------------------ scenario text */
.wy-scenario { display: grid; gap: var(--s-2); max-width: 52rem; }
.wy-type { display: grid; gap: 0.15rem; font-size: var(--text-sm); }
.wy-type__name { font-weight: 650; }
.wy-type__note { color: var(--fg-muted); }
.wy-draw { font-size: var(--text-md); line-height: 1.4; }
.wy-draw [data-wy-n] { font-weight: 700; }
/* a run of [n] markers wraps inside its own box, so the last marker never hangs past the line (360 px) */
.wy-cites { display: inline-flex; flex-wrap: wrap; gap: 0 0.12em; max-width: 100%; vertical-align: baseline; }
.wy-cites .cite { margin: 0; }
.wy-draw__link { font-size: var(--text-xs); overflow-wrap: anywhere; }
.wy-mode {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ the cross-section (decorative: aria-hidden) */
.wy-stage { position: relative; border: var(--rule-heavy) solid var(--fg); background: var(--wy-sky); overflow: hidden; }
.wy-scene { display: block; width: 100%; height: auto; }
.wy-scene__sky { fill: var(--wy-sky); }
.wy-scene__soil { fill: var(--wy-soil); }
.wy-scene__granite,
.wy-scene__under { fill: var(--wy-granite); }
.wy-scene__crack { fill: none; stroke: var(--wy-crack); stroke-width: 2; stroke-linejoin: round; }
.wy-scene__surface { fill: none; stroke: var(--fg); stroke-width: 3; }
.wy-scene__plant rect,
.wy-scene__plant path { fill: var(--fg); }
.wy-scene__pipe { stroke: var(--wy-pipe); stroke-width: 9; opacity: 0.55; }
.wy-scene__flow { stroke: var(--wy-plant); stroke-width: 4; stroke-dasharray: 7 11; stroke-linecap: round; }
.wy-scene__screen { fill: none; stroke: var(--wy-pipe); stroke-width: 2; stroke-dasharray: 2 3; }
.wy-p--rain { stroke: var(--wy-rain); stroke-width: 2.4; stroke-linecap: round; }
.wy-p--haze { fill: var(--wy-eto); }
.wy-p--infiltration { fill: var(--wy-recharge); }

.wy-tag {
  position: absolute;
  padding: 0.1rem 0.35rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wy-tag--plant { left: 65.5%; top: 24%; transform: translateY(-100%); }
.wy-tag--granite { left: 0.5rem; bottom: 0.5rem; }
.wy-tag--borehole { left: 74.5%; bottom: 14%; }
.wy-tag--mains { left: 0.5rem; top: 61%; }

/* ------------------------------------------------------------------ playback */
.wy-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.wy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.45rem;
  border: 1.5px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.wy-btn__icon { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.water-year[data-playing] .wy-btn__icon--play,
.water-year:not([data-playing]) .wy-btn__icon--pause { display: none; }
.wy-scrub { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--s-2); min-width: 0; }
.wy-scrub__l { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.wy-scrub__input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.wy-scrub__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wy-speed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.wy-speed .wy-group__l { flex: 0 0 auto; }

/* ------------------------------------------------------------------ readout: month, two running counters */
.wy-readout { display: grid; gap: var(--s-3) var(--s-5); align-items: end; }
@media (min-width: 48rem) {
  .wy-readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); }
}
.wy-month {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: var(--display-3);
  line-height: 0.9;
  text-transform: uppercase;
}
.wy-counter { display: grid; gap: 0.2rem; min-width: 0; }
.wy-counter__l { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-muted); }
.wy-counter__n {
  font-family: var(--font-display);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: var(--display-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wy-counter__n small { font-size: 0.55em; }
.wy-counter--recharge .wy-counter__n { color: var(--wy-recharge); }
.wy-counter--plant .wy-counter__n { color: var(--wy-plant); }
.wy-counter__bar { display: block; width: 100%; height: 0.5rem; }
.wy-bar-track { fill: var(--rule-color); }
.wy-bar--recharge { fill: var(--wy-recharge); }
.wy-bar--plant { fill: var(--wy-plant); }

/* ------------------------------------------------------------------ captions: storage (Apr–Oct), year end, mains */
.wy-captions { display: grid; gap: var(--s-3); max-width: 48rem; }
.wy-storage,
.wy-yearend,
.wy-mains { padding-left: var(--s-3); border-left: var(--rule-heavy) solid var(--wy-eto); }
.wy-storage { font-size: var(--text-sm); }
.wy-yearend { border-left-color: var(--wy-plant); font-size: var(--text-md); line-height: 1.4; font-weight: 600; }
.wy-mains { border-left-color: var(--wy-rain); font-size: var(--text-md); line-height: 1.4; }
.wy-yearend [data-wy-n],
.wy-mains [data-wy-n] { font-weight: 800; }
.wy-mains__line { display: block; margin-top: var(--s-1); font-size: var(--text-sm); font-weight: 400; color: var(--fg-muted); }
/* animated: one caption at a time in the same place (no layout jump) */
.water-year[data-mode="anim"] .wy-captions > * { grid-area: 1 / 1; }
.water-year[data-mode="anim"]:not([data-dry]) .wy-storage,
.water-year[data-mode="anim"]:not([data-year-end]) .wy-yearend { visibility: hidden; }

/* ------------------------------------------------------------------ the month strip / small multiples */
.wy-strip { display: grid; gap: var(--s-3); min-width: 0; }
.wy-strip__head { display: grid; gap: var(--s-1); }
.wy-legend { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--fg-muted); }
.wy-legend__unit { white-space: nowrap; }
.wy-key { display: inline-block; width: 0.75em; height: 0.75em; margin: 0 0.35em 0 0.15em; vertical-align: -0.05em; }
.wy-key--rain { background: var(--wy-rain); }
.wy-key--eto { background: var(--wy-eto); }
.wy-key--recharge { background: var(--wy-recharge); }
.wy-key--plant { background: var(--wy-plant); }

.wy-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3) var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 62rem) {
  .wy-months { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
.water-year[data-mode="static"] .wy-months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
@media (min-width: 36rem) {
  .water-year[data-mode="static"] .wy-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .water-year[data-mode="static"] .wy-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wy-m { display: grid; align-content: start; gap: 0.2rem; min-width: 0; padding-top: var(--s-1); border-top: var(--rule-heavy) solid var(--rule-color); }
.wy-m[data-current] { border-top-color: var(--fg); }
.water-year[data-mode="anim"] .wy-m:not([data-current]) .wy-m__bars { opacity: 0.55; }
.wy-m__name { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wy-m__name abbr { text-decoration: none; }
.wy-m__bars { display: block; width: 100%; height: 3rem; }
.water-year[data-mode="static"] .wy-m__bars { height: 3.5rem; }
.wy-m__rain { fill: var(--wy-rain); }
.wy-m__eto { fill: var(--wy-eto); }
.wy-m__vals { display: grid; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.3; font-variant-numeric: tabular-nums; }
.wy-m__v--rain { color: var(--wy-rain); }
.wy-m__v--eto { color: var(--wy-eto); }
.wy-m__wei { display: grid; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; line-height: 1.25; }
.wy-m__weiv { white-space: nowrap; }
.wy-m__wei abbr { text-decoration: none; color: var(--fg-muted); font-weight: 400; }
.wy-m__cum { display: grid; gap: 0.1rem; margin-top: var(--s-1); }
.wy-m__c { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.wy-m__c--recharge { color: var(--wy-recharge); }
.wy-m__c--plant { color: var(--wy-plant); }
.wy-m__cumbar { display: block; width: 100%; height: 0.3rem; }
.wy-m__dry { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
.wy-m:not(.wy-m--dry) .wy-m__dry { display: none; }

/* ================================================================== V2–V4 (water spec §3): shared frame
   V2 "Quanto é isto?" (_WaterScale, water-scale.js), V4 "Chuva: ano a ano" (_RainChart, rain-chart.js) and V3 "Para onde
   corre a água" (_WaterMap, water-map.js). They sit in the paper band below V1 (spec §5); the dark values serve a poster
   context. Scripts write textContent, SVG/CSSOM custom properties (--f, --x, --d, --normal) and classes only. */
.water-scale,
.rain-chart,
.water-map {
  --ws-village: #C5DCD8;      /* the villages' residents and network on green-900 */
  --ws-plant: var(--red-300); /* the plant */
  --rc-guarda: #8EC9F0;
  --rc-alm: #5FD0C0;
  --rc-drought: #F0A07A;
  --wm-stream: #8EC9F0;
  --wm-divide: #C5DCD8;
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0 0;
  min-width: 0;
  color: var(--fg);
}
.band--paper :is(.water-scale, .rain-chart, .water-map),
.dossier :is(.water-scale, .rain-chart, .water-map) {
  --ws-village: var(--ink-600); /* 5.9:1 on paper-50 */
  --ws-plant: var(--red-700);   /* 6.2:1 */
  --rc-guarda: #1F64A3;         /* 5.4:1 */
  --rc-alm: #0B6F62;            /* 5.3:1 */
  --rc-drought: #A4471F;        /* 5.2:1 */
  --wm-stream: #2F6F8F;
  --wm-divide: var(--ink-600);
}
.water-scale:first-child,
.rain-chart:first-child,
.water-map:first-child { margin-top: 0; }
:is(.water-scale, .rain-chart, .water-map) p { margin: 0; }
:is(.water-scale, .rain-chart, .water-map) [hidden] { display: none !important; }
.ws-head__title,
.rc-head__title,
.wm-head__title {
  margin: 0;
  letter-spacing: normal;
  font-family: var(--font-display);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: var(--display-4);
  line-height: 1;
  text-transform: uppercase;
}
.ws-head__sub,
.rc-head__sub,
.wm-head__sub { margin-top: var(--s-1); max-width: 46rem; color: var(--fg-muted); font-size: var(--text-sm); }

/* ------------------------------------------------------------------ V2 "Quanto é isto?" */
.ws-scenario { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--fg-muted); }
.ws-scenario__l { margin-right: 0.4em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); }
.ws-scenario__v { color: var(--fg); font-weight: 600; }
.ws-block {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  padding-top: var(--s-3);
  border-top: var(--rule-heavy) solid var(--fg);
}
@media (min-width: 62rem) {
  .ws-block--people,
  .ws-block--cubes { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s-6); align-items: start; }
  .ws-block--people > :not(.ws-group),
  .ws-block--cubes > :not(.ws-group) { grid-column: 1 / -1; }
  .ws-block--people .ws-group--villagers,
  .ws-block--cubes .ws-group--network { grid-column: 1; }
  .ws-block--people .ws-group--plant,
  .ws-block--cubes .ws-group--plant { grid-column: 2; }
}
.ws-block__title { font-family: var(--font-display); font-stretch: var(--label-stretch); font-weight: 800; font-size: var(--text-md); text-transform: uppercase; }
.ws-key { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
.ws-key__unit { flex: none; border: 1.5px solid var(--fg-muted); }
.ws-key__unit--dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--fg-muted); }
.ws-key__unit--cube { width: 0.85rem; height: 0.85rem; }
.ws-key__unit--bore { width: 0.55rem; height: 1.2rem; }
.ws-group { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.ws-label { font-size: var(--text-base); line-height: 1.4; }
.ws-label [data-wy-n] { font-weight: 800; }
.ws-group--plant .ws-label [data-wy-n] { color: var(--ws-plant); }
.ws-units { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ws-village); }
.ws-dots--plant .ws-dot { background: var(--ws-plant); }
.ws-cubes { gap: 3px; }
.ws-cube,
.ws-bore { position: relative; box-sizing: border-box; border: 1.5px solid var(--ws-village); }
.ws-cube { width: 16px; height: 16px; }
.ws-bore { width: 16px; height: 44px; border: 2px solid var(--ws-plant); border-top-width: 5px; }
.ws-cube::after,
.ws-bore::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 100%; background: var(--ws-village); }
.ws-cubes--plant .ws-cube { border-color: var(--ws-plant); }
.ws-cubes--plant .ws-cube::after,
.ws-bore::after { background: var(--ws-plant); }
.ws-bores { gap: var(--s-2); }
.ws-u--q1::after { height: 25%; }
.ws-u--q2::after { height: 50%; }
.ws-u--q3::after { height: 75%; }
.ws-not { max-width: 44rem; padding-left: var(--s-3); border-left: var(--rule-heavy) solid var(--fg); font-weight: 600; font-size: var(--text-sm); }
.ws-note,
.ws-mains { max-width: 44rem; font-size: var(--text-sm); color: var(--fg-muted); }
.ws-mains { color: var(--fg); padding-left: var(--s-3); border-left: var(--rule-heavy) solid var(--rc-guarda); }

/* units fill in once, when first seen (water-scale.js: data-anim pending → run; --d = each unit's delay) */
@keyframes ws-pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}
.water-scale[data-anim] [data-ws-units] > * { animation: ws-pop 0.34s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.water-scale[data-anim="pending"] [data-ws-units] > * { animation-play-state: paused; }

/* ------------------------------------------------------------------ V4 "Chuva: ano a ano" */
.rc-caption {
  max-width: 48rem;
  padding-left: var(--s-3);
  border-left: var(--rule-heavy) solid var(--rc-guarda);
  font-size: var(--text-md);
  line-height: 1.4;
}
.rc-legend { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.45; color: var(--fg-muted); }
@media (min-width: 62rem) {
  .rc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
}
.rc-key { display: inline-block; width: 1.5em; height: 0.75em; margin-right: 0.5em; vertical-align: -0.05em; }
.rc-key--guarda { background: var(--rc-guarda); }
.rc-key--normal { height: 0; border-top: 2px dashed var(--fg); vertical-align: 0.25em; }
.rc-key--alm,
.rc-line--alm .rc-bar {
  background: repeating-linear-gradient(135deg, var(--rc-alm) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1.5px var(--rc-alm);
}
.rc-key--drought { border: 1.5px solid var(--rc-drought); }
.rc-key--gap { width: 1.5em; height: auto; text-align: center; color: var(--fg); }

.rc-chart:empty { display: none; }
.rc-plot {
  --year-w: 4.2rem;
  --label-w: 8.25rem;
  display: grid;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.rc-axis,
.rc-row { display: grid; grid-template-columns: var(--year-w) minmax(0, 1fr); column-gap: var(--s-2); align-items: center; }
.rc-axis { padding-bottom: 0.2rem; color: var(--fg-muted); }
.rc-axis__unit { text-align: right; }
.rc-axis__scale { position: relative; height: 2.6rem; margin-right: var(--label-w); }
.rc-tick { position: absolute; bottom: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
.rc-tick:first-child { transform: none; }
@media (max-width: 47.99rem) {
  .rc-tick--mid { display: none; } /* a narrow track keeps 0 and the maximum */
}
.rc-axis__normal { position: absolute; top: 0; bottom: 0; left: calc(var(--normal) * 100%); padding-left: 0.35em; color: var(--fg); font-weight: 600; white-space: nowrap; }
.rc-axis__normal::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; border-left: 2px dashed var(--fg); }
.rc-rows { margin: 0; padding: 0; list-style: none; }
.rc-row { border-top: 1px solid var(--rule-color); }
.rc-row__hy { font-weight: 600; }
.rc-row--drought .rc-row__hy { color: var(--rc-drought); }
.rc-row__bars { display: grid; gap: 3px; min-width: 0; padding-block: 4px; }
.rc-line { position: relative; display: flex; align-items: center; gap: 0.4em; min-width: 0; min-height: 13px; }
/* Guarda's normal, only across Guarda bars (rainBars normalMark): never across Almeidinha, another station */
.rc-line--normal::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc((100% - var(--label-w)) * var(--normal));
  border-left: 2px dashed var(--fg);
  opacity: 0.8;
  z-index: 1;               /* over the bar, under the value label */
  pointer-events: none;
}
.rc-bar { flex: none; width: calc((100% - var(--label-w)) * var(--f, 0)); height: 12px; background: var(--rc-guarda); transform-origin: left center; }
.rc-line--alm .rc-bar { height: 10px; }
.rc-bar__v { position: relative; z-index: 2; padding-right: 0.25em; background: var(--bg); white-space: nowrap; }
.rc-drought {
  display: inline-block;
  padding: 0 0.3em;
  border: 1.5px solid var(--rc-drought);
  color: var(--rc-drought);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.rc-gap { display: grid; grid-template-columns: var(--year-w) minmax(0, 1fr); border-top: 1px solid var(--rule-color); color: var(--fg-muted); line-height: 1.1; }
.rc-gap__l { padding-left: 1.2rem; }

.rain-chart[data-anim] :is(.rc-bar, .rc-proj__bar) { transition: transform 0.8s var(--ease-out); }
.rain-chart[data-anim="pending"] :is(.rc-bar, .rc-proj__bar) { transform: scaleX(0); }

.rc-table { min-width: 0; }
.rc-table__sum {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.rc-table__sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rc-table__scroll { position: relative; max-width: 100%; overflow-x: auto; }
.rc-tbl { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.rc-tbl :is(th, td) { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--rule-color); text-align: right; white-space: nowrap; }
.rc-tbl :is(thead th:first-child, th[scope="row"]) { text-align: left; }
.rc-tbl thead th { font-weight: 600; white-space: normal; vertical-align: bottom; }
.rc-tbl__drought :is(th, td) { color: var(--rc-drought); font-weight: 600; }
.rc-tbl--proj :is(td:nth-child(2)) { text-align: left; }
.rc-table__src { margin-top: var(--s-1) !important; font-size: var(--text-xs); }

.rc-projections { display: grid; gap: var(--s-2); min-width: 0; padding-top: var(--s-3); border-top: var(--rule-heavy) solid var(--fg); }
.rc-proj__title { font-family: var(--font-display); font-stretch: var(--label-stretch); font-weight: 800; font-size: var(--text-md); text-transform: uppercase; }
.rc-proj__region,
.rc-proj__key { max-width: 48rem; font-size: var(--text-sm); color: var(--fg-muted); }
.rc-proj { display: grid; gap: var(--s-3) var(--s-6); min-width: 0; }
@media (min-width: 48rem) {
  .rc-proj { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rc-proj__group { display: grid; gap: var(--s-1); min-width: 0; }
.rc-proj__period { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.rc-proj__rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rc-proj__row {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 4.6rem;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.rc-proj__track { position: relative; height: 12px; }
.rc-proj__track::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; border-left: 1.5px solid var(--fg); }
.rc-proj__bar { position: absolute; top: 1px; bottom: 1px; width: calc(50% * var(--f, 0)); }
.rc-proj__bar--neg { right: 50%; background: var(--rc-drought); transform-origin: right center; }
.rc-proj__bar--pos { left: 50%; background: var(--rc-guarda); transform-origin: left center; }
.rc-proj__v { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ V3 "Para onde corre a água" */
.wm-map {
  position: relative;
  min-width: 0;
  height: clamp(22rem, 62vh, 36rem);
  border: var(--rule-heavy) solid var(--fg);
  background: var(--paper-50);
  color: var(--ink-900);
}
.wm-map__fallback { padding: var(--s-4); font-size: var(--text-sm); }
.wm-map.maplibregl-map { font-family: var(--font-mono); }
.wm-map .maplibregl-ctrl-group { border-radius: 0; box-shadow: 0 0 0 1.5px var(--ink-900); }
.wm-map .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.wm-map .maplibregl-ctrl-group button:focus-visible { box-shadow: inset 0 0 0 3px var(--ink-900); }
.wm-map .maplibregl-ctrl-scale { border-color: var(--ink-900); background: rgb(244 242 228 / 0.85); color: var(--ink-900); font-size: 11px; }
.wm-map .maplibregl-ctrl-attrib { font-size: 11px; }
.wm-map .maplibregl-canvas:focus-visible { outline: 3px solid var(--ink-900); outline-offset: -3px; }
.wm-marker { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 10rem; pointer-events: none; }
.wm-marker__dot { flex: none; width: 12px; height: 12px; border: 2px solid var(--paper-50); box-shadow: 0 0 0 1.5px var(--ink-900); background: var(--red-600); }
.wm-marker--zone { align-items: flex-end; text-align: right; } /* hangs to the lower left: clear of Pêra do Moço */
.wm-marker--zone .wm-marker__l { margin-top: 1.25rem; } /* and below the Avelãs de Ambom label, which sits just west of the zone */
.wm-marker--zone .wm-marker__dot { border-radius: 50%; background: #1F64A3; }
.wm-marker__l {
  padding: 2px 5px;
  border: 1px solid var(--ink-900);
  background: rgb(244 242 228 / 0.92);
  color: var(--ink-900);
  font: 600 11px/1.25 var(--font-mono);
  text-align: center;
}
.wm-marker__name { font-weight: 700; }
.wm-marker .noise-flag { color: var(--ochre-700); }

.wm-legend { display: grid; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.45; }
@media (min-width: 62rem) {
  .wm-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-legend__item--zone { grid-row: span 2; }
}
.wm-legend__item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--s-2); align-items: start; min-width: 0; }
.wm-legend__zone { font-weight: 700; }
.wm-key { position: relative; width: 1.4rem; height: 0.95rem; margin-top: 0.2em; }
.wm-key--parcel,
.wm-key--zone { border: 1.5px dashed var(--red-600); background: rgb(227 6 19 / 0.12); border-radius: 50%; }
.wm-key--zone { border-color: #1F64A3; background: rgb(31 100 163 / 0.14); }
.wm-key--parcel::after,
.wm-key--zone::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); background: var(--red-600); }
.wm-key--zone::after { border-radius: 50%; background: #1F64A3; }
.wm-key--circle { width: 0.95rem; margin-left: 0.2rem; border: 1.5px solid var(--fg); border-radius: 50%; }
.wm-key--stream { height: 5px; margin-top: 0.55em; background: var(--wm-stream); }
.wm-key--divide { height: 0; margin-top: 0.7em; border-top: 2px dashed var(--wm-divide); }
.wm-key--village { width: 0.6rem; height: 0.6rem; margin: 0.35em 0 0 0.4rem; border-radius: 50%; background: var(--fg); }
.wm-which { max-width: 48rem; padding-left: var(--s-3); border-left: var(--rule-heavy) solid var(--wm-stream); font-size: var(--text-base); line-height: 1.45; }
.wm-attrib { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }

.water-specimen--below { padding-block: var(--s-6) var(--s-8); }

@media (prefers-reduced-motion: reduce) {
  .water-scale [data-ws-units] > * { animation: none !important; }
  .rain-chart :is(.rc-bar, .rc-proj__bar) { transition: none !important; transform: none !important; }
}

/* ------------------------------------------------------------------ dev specimen (/design/agua) */
.water-specimen { padding-block: var(--s-6); }
.water-specimen__title { margin: 0 0 var(--s-2); font-size: var(--display-3); }
.water-specimen__caveat { max-width: 44rem; margin: 0 0 var(--s-3); font-size: var(--text-sm); color: var(--fg-muted); }

@media (prefers-reduced-motion: reduce) {
  .wy-chip { transition: none; }
}

/* ------------------------------------------------------------------ the Água page (/agua, water spec §5; Task 6)
   First screen: three numbers (datagrid), V1, then the badge, the caveat and the actions. Below, one paper band whose
   sections all have the same weight: V2, then prose sections with h2 (V4 and V3 under their h3), ending with
   "O que os dados não mostram" and what to ask. The paper band's water tokens are the .band--paper ones above. */
.water-hero .datagrid { margin-bottom: var(--s-4); }
.water-figs .datagrid__n .noise-flag { font-size: 0.45em; vertical-align: super; }
.water-figs .datagrid__n small { margin-left: 0.04em; }
.water-figs .datagrid__l { max-width: 26rem; }
@media (max-width: 35.99rem) { .water-figs { grid-template-columns: minmax(0, 1fr); } } /* long labels: one column on phones */
.water-hero__foot { display: grid; gap: var(--s-3); min-width: 0; }
.water-hero__foot .btn { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.water-hero__caveat { max-width: 44rem; margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }

.water-body { padding-block: var(--s-7) var(--s-8); }
.water-body__part { min-width: 0; }
.water-body__part + .water-body__part { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--rule-heavy) solid var(--fg); }
.water-body__part > * + * { margin-top: var(--s-6); }
.water-body .prose h2 { font-size: var(--display-4); margin: 0 0 var(--s-4); }
.water-body .prose h3 { font-size: var(--text-lg); margin: var(--s-6) 0 var(--s-3); }
.water-body .prose > :last-child { margin-bottom: 0; }
.water-body .prose table { margin-bottom: var(--s-3); }
.water-body .prose caption { padding-bottom: var(--s-2); text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.water-body .prose td { font-variant-numeric: tabular-nums; }
.water-plants th:first-child,
.water-plants td:first-child { min-width: 12rem; }
.water-plants td:first-child { font-size: var(--text-sm); }
.water-months { margin-bottom: var(--ruling); }
.water-months__summer > * { font-weight: 650; }
.water-months__note { font-size: var(--text-sm); color: var(--fg-muted); }
.water-villages__ref > * { color: var(--fg-muted); }
.water-notshown > li { padding-left: var(--s-1); }
.water-notshown > li > p:last-child { margin-bottom: 0; }
.water-notshown .link-mono { display: inline-block; margin-top: var(--s-1); }

/* ------------------------------------------------------------------ the home band "Água" (water spec §5; Task 7)
   On the green poster: the dark water tokens at the top apply. The three numbers (shared _WaterFigs), the compact V1
   (no chips, scrubber or speed), the badge and the links. */
.home-water .datagrid { margin-bottom: var(--s-4); }
.home-water .water-year { margin-top: var(--s-6); }
.home-water__links { margin-top: var(--s-4); }
.home-water__links .icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.water-year[data-compact] .wy-play { gap: var(--s-3); }