/*
 * core/styles/wfd.css
 *
 * The England surface waters analysis. Extracted from the standalone document
 * this was authored as, and scoped: EVERY selector is prefixed with .wfd.
 *
 * That is not tidiness. The original styles bare elements — body, footer, a,
 * h1, h2, h3, h4, select, input — which inside a site page would have restyled
 * the header, the footer and every heading on it. :root and body both become
 * .wfd itself, so the component's light palette applies to the component and
 * the page keeps its own.
 *
 * Scoping also settles the one class the component shares with the site,
 * `.card`: `.wfd .card` (0,2,0) outranks the site's `.card` (0,1,0), so the
 * component keeps its own styling without either side being renamed.
 *
 * The Google Fonts @import was removed — start.php already loads Sora and
 * DM Sans, and an @import inside a stylesheet blocks rendering on a second
 * round trip for fonts the page has already asked for.
 *
 * Loaded only by pages placing [[wfd]], via core/includes/wfd/registry.php.
 */

.wfd{
  --navy:#30549e; --light-blue:#57c6dc; --teal:#00c4a0; --dark-navy:#080f1a;
  --water:#28aae1; --water-dark:#0282af; --water-light:#92d6e9;
  --bg:#f4f7fb; --panel:#ffffff; --ink:#0c1b2e; --ink-2:#3d4d63; --ink-3:#6b7a90;
  --line:#dfe6f0; --line-2:#eef2f8; --card-shadow:0 1px 3px rgba(8,15,26,.07);
  --map-bg:#0b1622; --map-ink:#e8eef7; --map-ink-2:#9dadc2;
  --s-high:#4a90d9; --s-good:#4ecb84; --s-mod:#fbdb45; --s-poor:#f5891a;
  --s-bad:#c92030; --s-none:#5a6472;
  --heading:#30549e; --accent:#0282af; --warnbg:#fff8e8; --warnline:#e6c86a;
}



.wfd, .wfd *{box-sizing:border-box}
.wfd{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Aptos','DM Sans',system-ui,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased}
.wfd h1, .wfd h2, .wfd h3, .wfd h4, .wfd .headline{font-family:'Aptos','Sora',system-ui,sans-serif;color:var(--heading);
  text-wrap:balance;margin:0}
.wfd a{color:var(--accent)}
.wfd :focus-visible{outline:2px solid var(--water);outline-offset:2px;border-radius:3px}

.wfd .topbar{background:var(--navy);height:76px;display:flex;align-items:center;
  justify-content:space-between;padding:0 32px;gap:24px}
.wfd .topbar img{height:40px;width:auto;display:block}
.wfd .topbar .bar-meta{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:#cfe0f3;font-weight:500;white-space:nowrap}

.wfd .wrap{max-width:1440px;margin:0 auto;padding:0 32px}

.wfd .hero{padding:40px 0 26px}
.wfd .kicker{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.wfd .kicker::before{content:"";width:26px;height:3px;background:var(--water);border-radius:2px}
.wfd h1{font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.08;letter-spacing:-.02em;
  font-weight:700;max-width:20ch}
.wfd .standfirst{margin:16px 0 0;font-size:1.05rem;color:var(--ink-2);max-width:66ch}
.wfd .standfirst strong{color:var(--ink);font-weight:600}

/* cycle switch — the primary control, so it reads as one */
.wfd .cyclebar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.wfd .cyclesw{display:inline-flex;background:var(--line-2);border:1px solid var(--line);
  border-radius:9px;padding:3px;gap:3px}
.wfd .cyclesw button{font-family:'Aptos','Sora',sans-serif;font-size:.92rem;font-weight:600;
  color:var(--ink-3);background:none;border:0;border-radius:6px;padding:8px 18px;cursor:pointer;
  letter-spacing:-.01em}
.wfd .cyclesw button[aria-pressed="true"]{background:var(--navy);color:#fff;
  box-shadow:0 1px 3px rgba(8,15,26,.18)}
.wfd .cyclesw button:hover:not([aria-pressed="true"]){color:var(--ink)}
.wfd .cyclenote{font-size:.8rem;color:var(--ink-3);max-width:52ch;line-height:1.45}

.wfd .warn{margin-top:20px;background:var(--warnbg);border:1px solid var(--warnline);
  border-radius:9px;padding:14px 17px;font-size:.855rem;color:var(--ink-2);
  line-height:1.55;max-width:96ch}
.wfd .warn strong{color:var(--ink);font-weight:600}

.wfd .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  margin-top:22px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.wfd .stat{background:var(--panel);padding:18px 20px}
.wfd .stat .fig{font-family:'Aptos','Sora',sans-serif;font-size:2.05rem;font-weight:700;
  line-height:1;color:var(--heading);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wfd .stat .fig.warnc{color:var(--s-poor)} .wfd .stat .fig.bad{color:var(--s-bad)}
.wfd .stat .lab{margin-top:8px;font-size:.83rem;color:var(--ink-2);line-height:1.4}
.wfd .stat .sub{margin-top:5px;font-size:.74rem;color:var(--ink-3);line-height:1.45}

.wfd .mapsec{margin:36px 0 0}
.wfd .maphead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:15px}
.wfd .maphead h2{font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.wfd .maphead p{margin:6px 0 0;font-size:.86rem;color:var(--ink-3);max-width:58ch}
.wfd .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.wfd .ctl{display:flex;flex-direction:column;gap:5px}
.wfd .ctl label{font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.wfd select, .wfd input[type=search]{font-family:inherit;font-size:.86rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:8px 11px;min-width:186px;
  /* Explicit height because a select and a search input do NOT agree on their
     own. Same font, same padding, same border, different intrinsic content
     height — the search field rendered visibly taller than the dropdowns beside
     it. Setting it on both is the only way they line up across browsers. */
  height:38px}

/* Safari gives a search input its own rounded shape and an inner clear button,
   both of which change its height and defeat the rule above. Only the search
   input is reset: doing the same to the select would remove its dropdown arrow
   and there is no native way to put one back. */
.wfd input[type=search]{-webkit-appearance:none;appearance:none}
.wfd input[type=search]::-webkit-search-decoration,
.wfd input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

.wfd .mapshell{position:relative;background:var(--map-bg);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--card-shadow)}
.wfd #stage{position:relative;height:min(80vh,880px);min-height:540px;cursor:grab;touch-action:none}
.wfd #stage.dragging{cursor:grabbing}
.wfd #stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0}

.wfd .yearbadge{position:absolute;right:18px;top:18px;z-index:3;
  font-family:'Aptos','Sora',sans-serif;font-size:1.45rem;font-weight:700;
  color:rgba(232,238,247,.92);letter-spacing:-.01em;
  background:rgba(11,22,34,.72);border:1px solid rgba(255,255,255,.12);
  border-radius:9px;padding:6px 15px;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  pointer-events:none}
.wfd .yearbadge span{display:block;font-family:'Aptos','DM Sans',sans-serif;font-size:.62rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--map-ink-2);
  margin-top:1px}

.wfd .legend{position:absolute;left:18px;top:18px;z-index:3;background:rgba(11,22,34,.87);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.11);border-radius:10px;
  padding:14px 15px 12px;min-width:272px;max-width:306px;color:var(--map-ink)}
.wfd .legend h3{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--map-ink-2);font-weight:600;margin:0 0 4px}
.wfd .legend .lg-sub{font-size:.74rem;color:var(--map-ink-2);margin:0 0 11px;line-height:1.42}
.wfd table.lg{width:100%;border-collapse:collapse;font-size:.82rem}
.wfd table.lg caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wfd table.lg tbody tr{cursor:pointer}
.wfd table.lg tbody tr.off{opacity:.32}
.wfd table.lg th{font-weight:500;text-align:left;padding:4px 0;color:var(--map-ink);white-space:nowrap}
.wfd table.lg td{padding:4px 0 4px 8px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--map-ink-2);white-space:nowrap}
.wfd table.lg td.pct{color:var(--map-ink);font-weight:600}
.wfd .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:9px;
  vertical-align:-1px;box-shadow:0 0 0 1px rgba(11,22,34,.9)}
.wfd .lgfoot{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.71rem;color:var(--map-ink-2);line-height:1.45}
.wfd .lgfoot b{color:var(--map-ink);font-weight:600}

.wfd .zoombox{position:absolute;right:18px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:2px}
.wfd .zoombox button{width:34px;height:34px;font-size:1.05rem;line-height:1;cursor:pointer;
  background:rgba(11,22,34,.87);color:var(--map-ink);border:1px solid rgba(255,255,255,.13);
  font-family:inherit;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.wfd .zoombox button:first-child{border-radius:8px 8px 0 0}
.wfd .zoombox button:last-child{border-radius:0 0 8px 8px;font-size:.6rem;letter-spacing:.04em}
.wfd .zoombox button:hover{background:rgba(48,84,158,.92)}

.wfd .credit{position:absolute;left:18px;bottom:16px;z-index:3;font-size:.69rem;
  color:var(--map-ink-2);max-width:46ch;line-height:1.45;pointer-events:none}

.wfd #tip{position:absolute;z-index:5;pointer-events:none;opacity:0;transition:opacity .09s;
  background:rgba(6,13,22,.96);border:1px solid rgba(255,255,255,.14);border-radius:9px;
  padding:11px 13px;min-width:250px;max-width:330px;color:var(--map-ink);
  font-size:.8rem;line-height:1.42;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.wfd #tip.on{opacity:1}
.wfd #tip .t-name{font-family:'Aptos','Sora',sans-serif;font-weight:600;font-size:.91rem;
  color:#fff;margin-bottom:2px;line-height:1.25}
.wfd #tip .t-meta{color:var(--map-ink-2);font-size:.72rem;margin-bottom:9px;line-height:1.4}
.wfd #tip table{width:100%;border-collapse:collapse;font-size:.79rem}
.wfd #tip th{font-weight:500;text-align:left;color:var(--map-ink-2);padding:2.5px 0}
.wfd #tip td{text-align:right;padding:2.5px 0 2.5px 10px;font-weight:600;white-space:nowrap}
.wfd #tip thead th, .wfd #tip thead td{font-weight:500;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--map-ink-2);padding-bottom:5px}
.wfd #tip .t-chip{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.wfd #tip td.now{color:#fff}

.wfd .grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:32px;margin:44px 0 0;align-items:start}
.wfd .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 26px;box-shadow:var(--card-shadow)}
.wfd .card h2{font-size:1.14rem;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.wfd .card p.lede{margin:0 0 20px;font-size:.86rem;color:var(--ink-3);line-height:1.55}
.wfd .bars{display:flex;flex-direction:column;gap:12px}
.wfd .brow{display:grid;grid-template-columns:132px 1fr 54px;gap:12px;align-items:center}
.wfd .brow .bname{font-size:.82rem;color:var(--ink-2);text-align:right;line-height:1.2}
.wfd .btrack{display:flex;height:19px;border-radius:4px;overflow:hidden;gap:2px;background:var(--line-2)}
.wfd .bseg{height:100%;min-width:0}
.wfd .bval{font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink);
  font-weight:600;text-align:right}
.wfd .axisnote{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.73rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:7px 16px}
.wfd .axisnote span{display:inline-flex;align-items:center;gap:6px}

.wfd .notes{display:flex;flex-direction:column;gap:20px}
.wfd .note{border-left:3px solid var(--water);padding:1px 0 1px 16px}
.wfd .note h3{font-size:.94rem;font-weight:600;margin-bottom:5px}
.wfd .note p{margin:0;font-size:.855rem;color:var(--ink-2);line-height:1.6}
.wfd .note.alt{border-left-color:var(--teal)}
.wfd .note.alt2{border-left-color:var(--s-poor)}

.wfd footer{margin-top:54px;border-top:1px solid var(--line);background:var(--panel)}
.wfd .foot{max-width:1440px;margin:0 auto;padding:28px 32px 36px;
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
/* This was the left column of a two-column footer; the right column was a logo
   and a copyright line the site footer already carries, and it was dropped on
   extraction — leaving the text capped at 66ch against the full width with
   nothing beside it. Freed to fill, but flowed into columns on wide screens:
   66ch existed for a reason, and a single 1700px line of 12px small print is
   worse than the constraint was. The heading spans both. */
.wfd .foot .fcol{max-width:none}
@media (min-width:1000px){
  .wfd .foot .fcol{column-count:2;column-gap:3rem}
  .wfd .foot .fcol h4{column-span:all}
}
@media (min-width:1500px){
  .wfd .foot .fcol{column-count:3}
}
.wfd .foot h4{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px;font-weight:600}
.wfd .foot p{margin:0 0 9px;font-size:.78rem;color:var(--ink-3);line-height:1.6}
.wfd .foot .mark{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 15px}
.wfd .foot .mark img{height:28px;width:auto;display:block}

@media (prefers-reduced-motion: reduce){.wfd, .wfd *{transition:none!important;animation:none!important}}
@media (max-width:1080px){
  .wfd .grid2{grid-template-columns:1fr;gap:24px}
  .wfd .legend{left:14px;top:14px;min-width:236px;max-width:266px;padding:12px 13px 10px}
  .wfd #stage{height:min(72vh,700px)}
  .wfd .credit{max-width:30ch}
  .wfd .yearbadge{right:14px;top:14px;font-size:1.2rem;padding:5px 12px}
}
@media (max-width:680px){
  .wfd .legend{position:static;border:0;border-top:1px solid rgba(255,255,255,.12);
    border-radius:0;background:#0b1622;padding:15px 16px 16px;max-width:none}
  .wfd .wrap, .wfd .foot{padding-left:18px;padding-right:18px}
  .wfd .topbar{height:64px;padding:0 18px} .wfd .topbar img{height:32px} .wfd .topbar .bar-meta{display:none}
  .wfd select, .wfd input[type=search]{min-width:0;width:100%}
  .wfd .ctl{flex:1 1 100%}
  .wfd .brow{grid-template-columns:94px 1fr 48px;gap:8px}
  .wfd .card{padding:20px 18px}
  .wfd .credit{display:none}
  .wfd .cyclesw{width:100%} .wfd .cyclesw button{flex:1}
}

/* The component's dark palette, applied unconditionally. It shipped behind
   prefers-color-scheme and a data-theme attribute on :root; this site is dark
   whatever the visitor's OS says and sets no data-theme, so without this a
   light-mode visitor would get a white component on a dark page. */
.wfd{
  --bg:#0a121d; --panel:#101c2b; --ink:#e9eff8; --ink-2:#b3c1d4; --ink-3:#8494ab;
    --line:#22334a; --line-2:#18273a; --card-shadow:0 1px 3px rgba(0,0,0,.3);
    --heading:#57c6dc; --accent:#28aae1; --warnbg:#221c0c; --warnline:#6d5a20;
}


/* ── Placement inside a site page ────────────────────────────────────────────
   The component was authored as a whole document, so it assumed it owned the
   page width and the space around it. Its own .wrap gave it that, and .wrap was
   left behind in the extraction, so without this it runs edge to edge.

   These are the site's own column values, not the component's original ones
   (which were 1440px/32px). Matching .section-inner means the map lines up
   exactly with the section heading above it — at 1440px it visibly overhung the
   heading on both sides, which reads as a mistake rather than as full bleed. */
.wfd {
  /* Deliberately wider than the site's 1200px column (Gary, 2026-09-07). This
     is a map and three charts, and the reading here is scanning a lot of detail
     rather than following a line of prose, so the usual measure works against
     it. The gutter is a percentage so the component takes what the screen has,
     clamped at both ends: below the floor it would crowd the edge on a phone,
     above the ceiling a 2560px monitor would stretch the map past the point
     where any of it is legible at a glance. */
  max-width: 1760px;
  margin: 0 auto;
  padding: 1px clamp(1.25rem, 4%, 5rem) 0;
  border-radius: 16px;
  overflow: hidden;
}

/* Shown until the dataset arrives. The script clears it by adding .wfd-ready,
   and rewrites it into a real message with a download link if the fetch fails —
   a map that never draws is indistinguishable from one still loading. */
.wfd-loading {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.wfd-ready .wfd-loading { display: none; }