/* /rainfall/wales and /reservoirs/wales (6 Nov 2026): the graphics. Colours are roles, set once. The site's dark theme darkens
   the header only (public/home-v4/chrome.css); page bodies stay light, so these pages do too.
   Dry-to-wet: two reds, a neutral grey midpoint and a blue (a diverging scale, never a rainbow); checked with the
   dataviz validator for colour-blind separation on all pairs (light: worst CVD ΔE 8.8, normal 17.0). The three
   reservoir lines are the reference palette's first three slots (blue, orange, aqua), which pass on all pairs. */
.wwv {
  --wwv-surface: #fff;
  --wwv-ink: #1c2430;
  --wwv-ink-2: #5b6470;
  --wwv-line: #e2e6eb;
  --wwv-track: #e8ecf1;
  --wwv-dry2: #9e1b1b; --wwv-dry1: #ec8b67; --wwv-norm: #86857f; --wwv-wet: #2a78d6; --wwv-none: #c9ccd1;
  --wwv-rain: #2a78d6; --wwv-avg: #1c2430;
  --wwv-s1: #2a78d6; --wwv-s2: #eb6834; --wwv-s3: #1baf7a;
  --wwv-water: #2a78d6; --wwv-water-track: #cde2fb;
}
.wwv .wwv-dry2 { --c: var(--wwv-dry2); } .wwv .wwv-dry1 { --c: var(--wwv-dry1); } .wwv .wwv-norm { --c: var(--wwv-norm); }
.wwv .wwv-wet { --c: var(--wwv-wet); } .wwv .wwv-none { --c: var(--wwv-none); }

/* Meter: 0 to 150% of the average, a tick at 100%. */
.wwv-meter { position: relative; height: 10px; border-radius: 5px; background: var(--wwv-track); margin: 10px 0 18px; }
.wwv-meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--c, var(--wwv-norm)); }
.wwv-meter > b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--wwv-avg); border-radius: 1px; }
.wwv-meter > span { position: absolute; top: 14px; transform: translateX(-50%); font-size: 11px; color: var(--wwv-ink-2); white-space: nowrap; }
.wwv-card-v { color: var(--wwv-ink); }
.wwv-card-v .wwv-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: middle; }

/* Column chart (server SVG). */
.wwv-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wwv-chart { width: 100%; min-width: 560px; height: auto; display: block; }   /* below 560 px it scrolls in its box, so the lettering stays readable */
.wwv-chart text { fill: var(--wwv-ink-2); font-size: 11px; }
.wwv-chart .grid { stroke: var(--wwv-line); stroke-width: 1; }
.wwv-chart .bar { fill: var(--wwv-rain); }
.wwv-chart .avg { stroke: var(--wwv-avg); stroke-width: 2; stroke-linecap: round; }
.wwv-chart .hit { fill: transparent; }
.wwv-chart g.m:hover .bar, .wwv-chart g.m:focus .bar { opacity: .8; }
.wwv-chart .pct { font-size: 10px; fill: var(--wwv-ink); }
.wwv-chart .s1 { stroke: var(--wwv-s1); } .wwv-chart .s2 { stroke: var(--wwv-s2); } .wwv-chart .s3 { stroke: var(--wwv-s3); }
.wwv-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wwv-chart .end { stroke: var(--wwv-surface); stroke-width: 2; }
.wwv-chart .end.s1 { fill: var(--wwv-s1); } .wwv-chart .end.s2 { fill: var(--wwv-s2); } .wwv-chart .end.s3 { fill: var(--wwv-s3); }
.wwv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88em; color: var(--wwv-ink-2); margin: 6px 0 4px; }
.wwv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wwv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.wwv-legend i.tick { width: 14px; height: 2px; border-radius: 1px; background: var(--wwv-avg); }
.wwv-legend i.ring { background: transparent; border: 2px solid var(--wwv-norm); border-radius: 50%; width: 10px; height: 10px; }
.wwv-legend .s1 { --c: var(--wwv-s1); } .wwv-legend .s2 { --c: var(--wwv-s2); } .wwv-legend .s3 { --c: var(--wwv-s3); }
.wwv-legend .rain { --c: var(--wwv-rain); }

/* Tall segmented bar: one whole (the gauges), split by how wet. */
.wwv-split { display: flex; gap: 2px; height: 28px; margin: 10px 0 6px; }
.wwv-split > div { background: var(--c); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; line-height: 28px;
  padding: 0 6px; overflow: hidden; white-space: nowrap; min-width: 2px; }
.wwv-split > div.wwv-dry1, .wwv-split > div.wwv-none { color: #1c2430; }

/* Map. */
.wwv-map { height: 460px; border-radius: 10px; border: 1px solid var(--wwv-line); margin: 10px 0 6px; z-index: 0; }
.wwv-tabs { display: inline-flex; border: 1px solid var(--wwv-line); border-radius: 8px; overflow: hidden; margin: 4px 0; }
.wwv-tabs button { background: var(--wwv-surface); color: var(--wwv-ink); border: 0; padding: 6px 12px; font: inherit; font-size: .9em; cursor: pointer; }
.wwv-tabs button + button { border-left: 1px solid var(--wwv-line); }
.wwv-tabs button[aria-pressed="true"] { background: var(--wwv-ink); color: var(--wwv-surface); }

/* Reservoir tanks: % full as a water level. */
.wwv-tanks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.wwv-tank { border: 1px solid var(--wwv-line); border-radius: 10px; padding: 12px; background: var(--wwv-surface); text-decoration: none; color: var(--wwv-ink); display: block; }
.wwv-tank .vessel { position: relative; height: 96px; border-radius: 8px; background: var(--wwv-water-track); overflow: hidden; margin: 8px 0; }
.wwv-tank .vessel > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--wwv-water); }
.wwv-tank .vessel > b { position: absolute; left: 10px; bottom: 8px; color: #fff; font-size: 22px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wwv-tank .vessel.low > b { color: var(--wwv-ink); text-shadow: none; bottom: auto; top: 8px; }
.wwv-tank .nm { font-weight: 600; } .wwv-tank .co, .wwv-tank .dt { font-size: .82em; color: var(--wwv-ink-2); }

details.wwv-more > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
@media (max-width: 600px) { .wwv-map { height: 380px; } .wwv-tank .vessel { height: 80px; } }

/* /reservoirs/wales: the page's own frame and list rows (public/reservoir.css styles the single reservoir page only;
   the company pages' rows have no rules of their own). */
.wwv.rsv { max-width: 1040px; margin: 0 auto; padding: 22px 16px 56px; }
.wwv .rsv-detail-sec h2 { color: var(--wwv-ink); }
.wwv .rsv-note { border: 1px solid var(--wwv-line); border-left: 4px solid var(--wwv-norm); border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; background: var(--wwv-surface); line-height: 1.5; }
.wwv .rsv-rows { border-top: 1px solid var(--wwv-line); }
.wwv .rsv-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 92px 96px 150px; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--wwv-line); font-size: .95em; }
.wwv .rsv-row.rsv-row-child { padding-left: 18px; }
.wwv .rsv-c-cap, .wwv .rsv-c-date { color: var(--wwv-ink-2); font-size: .9em; text-align: right; font-variant-numeric: tabular-nums; }
.wwv .rsv-c-date.rsv-stale { font-style: italic; }
.wwv .rsv-c-spark svg { display: block; color: var(--wwv-water); }
.wwv .rsv-badge { display: inline-block; min-width: 56px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--wwv-water-track); color: var(--wwv-ink); }
.wwv .rsv-badge.rsv-band-none { background: var(--wwv-track); color: var(--wwv-ink-2); font-weight: 500; }
.wwv .rsv-foot { background: var(--wwv-surface); border-color: var(--wwv-line); color: var(--wwv-ink-2); }
.wwv .rsv-foot b { color: var(--wwv-ink); }
@media (max-width: 600px) {
  .wwv .rsv-row { grid-template-columns: minmax(0, 1fr) 70px; }
  .wwv .rsv-c-cap, .wwv .rsv-c-spark { display: none; }
  .wwv .rsv-c-date { grid-column: 1 / -1; text-align: left; margin-top: -4px; }
}