/* area-map.css — the Area map's styles (public/area-map.js): its on-canvas buttons, Layers panel, notes and credits, soil
 * strip, "Play last 24 h" bar, background switch and postcode row, Flood layers menu, key and foot note, and the box a page
 * prints for it (includes/area-map.php amBlock()). Linked straight after styles.css by station.php, river.php,
 * admin-area-map.php and scripts/area-map-page.php, so the cascade is the one styles.css gave; area-map.js links it
 * itself, straight after styles.css, when a page cached before this file existed has no link to it.
 *
 * Moved here from public/styles.css (its lines 1647–1906) on 15 Oct 2026 (step 1 of
 * docs/superpowers/specs/2026-10-15-replay-area-map-tab-design.md); the copy in styles.css was removed the same day, once
 * the deploy had left the edge cache. This file is now the only home of these rules.
 *
 * The station page's look must not change: every rule below is the one the station page already had, in the same order.
 * Change a rule here only when the station page's map is meant to change too (scripts/test-area-map-browser.js --compare=).
 *
 * NOT the map's, though they were inside the block (they are still in styles.css, where other pages read them; the
 * duplicates below are harmless and keep the station page's cascade exactly as it was):
 *   - the ".h3-ea-stamp, .fr-ea-stamp" part of the source-stamp rule and the three ".leaflet-control-attribution …
 *     .h3-ea-stamp / .fr-ea-stamp" rules: /map, the homepage maps, postcode-flood.php and public/app.js use them, and
 *     scripts/test-ea-tile.php asserts the hover rule is in styles.css;
 *   - the "#stationDetails .sd-*" rules (Station Details, compact): the station page's details card, not the map.
 */
/* Area-map on-canvas controls (station page, Nearby Stations "Area map" view).
   38px targets, overlaid top-left inside #nrgWaveMap (top-right holds the compass). */
#nrgMapCtrls { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
#nrgMapCtrls .nrg-map-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #d8e0ea; border-radius: 8px; background: #fff; color: #3d4a5c;
    font-size: 19px; font-weight: 600; line-height: 1; padding: 0; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); touch-action: manipulation; }
#nrgMapCtrls .nrg-map-btn:hover { background: #f4f8fc; }
#nrgMapCtrls .nrg-map-btn:active { background: #e9f1f9; }
#nrgMapCtrls .nrg-map-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 1px; }
/* The Area map's Layers panel (nrgMapLayers(), 12 Oct 2026): switches as on the homepage's Layers panel. */
.nrg-layers { position: absolute; top: 10px; left: 56px; bottom: 10px; width: 300px; max-width: calc(100% - 66px); z-index: 5; overflow-y: auto;
    overscroll-behavior: contain; background: #fff; border: 1px solid #dfe6ee; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 35, 60, .18);
    padding: 4px 14px 12px; color: #1f2d3d; font-size: .88rem; }
.nrg-layers[hidden] { display: none; }
.nrg-layers-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; font-size: .95rem; }
.nrg-layers-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: #5b6b7c; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.nrg-layers-x:hover { background: #f1f5f9; }
.nrg-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #eef1f5; cursor: pointer; font-weight: 500; }
.nrg-sw small { display: block; font-size: .72rem; font-weight: 400; color: #7a8794; }
.nrg-sw input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 12px;
    background: #c5cfda; cursor: pointer; transition: background .15s; }
.nrg-sw input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.nrg-sw input:checked { background: #2b6cb0; }
.nrg-sw input:checked::before { transform: translateX(16px); }
.nrg-sw input:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
.nrg-layers-flood { border-top: 1px solid #eef1f5; margin-top: 2px; padding-top: 8px; }
.nrg-layers-flood .nrg-fl-panel { position: static; width: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
#nrgMapTools.nrg-has-layers #nrgFloodBtn { display: none !important; }
@media (max-width: 640px) { .nrg-layers { left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; max-width: none; z-index: 6; } }
@media (prefers-reduced-motion: reduce) { .nrg-sw input, .nrg-sw input::before { transition: none; } }
[data-theme="dark"] #nrgMapCtrls .nrg-map-btn { background: #131c2e; border-color: #223049; color: #e6edf6; }
[data-theme="dark"] #nrgMapCtrls .nrg-map-btn:hover { background: #1b2740; }
/* Area map, real rivers (2026-09-30): a note on the map (loading, "not available", "zoom in"), the OS attribution while OS
   lines are drawn, a key for the line styles and the lines in words. The note sits between the buttons (left) and the
   compass (right); the attribution bottom-left. The soil shows as a strip down the left edge (below), no longer a box. */
#nrgWaveMap .nrg-map-note { position: absolute; top: 10px; left: 58px; right: 52px; margin: 0 auto; width: fit-content; max-width: calc(100% - 110px);
    z-index: 2; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.94); border: 1px solid #d8e3df; color: #34495e;
    font-size: 0.74rem; line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
/* The soil strip (station.js nrgSoilStrip()): a slim bar down the map's left edge, dry (brown) at the foot to wet (blue) at
   the top, one mark on it; its words open on hover, focus or a tap. The buttons and the credit step right to clear it. */
#nrgWaveMap .nrg-soil { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 3; cursor: help; outline: none; }
#nrgWaveMap .nrg-soil-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(to top, #8a5a2b, #cdb98a 45%, #7fb2e6 70%, #2e86de); }
#nrgWaveMap .nrg-soil-mark { position: absolute; left: 0; width: 15px; height: 4px; margin-bottom: -2px; border-radius: 0 3px 3px 0; background: #1f2a3a;
    box-shadow: 0 0 0 1.5px #fff; }
#nrgWaveMap .nrg-soil.is-old .nrg-soil-bar { opacity: 0.45; }
#nrgWaveMap .nrg-soil.is-old .nrg-soil-mark { background: #fff; box-shadow: 0 0 0 1.5px #1f2a3a; }
#nrgWaveMap .nrg-soil:focus-visible .nrg-soil-bar { box-shadow: 0 0 0 2px #4a90d9; }
#nrgWaveMap .nrg-soil-tip { display: none; position: absolute; left: 22px; bottom: 24px; width: max-content; max-width: min(300px, calc(100vw - 90px)); padding: 6px 10px;
    border-radius: 8px; background: rgba(255,255,255,0.97); border: 1px solid #d8e3df; color: #34495e; font-size: 0.72rem; line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
#nrgWaveMap .nrg-soil:hover .nrg-soil-tip, #nrgWaveMap .nrg-soil:focus .nrg-soil-tip { display: block; }
#nrgWaveMap .nrg-soil-tip span { display: block; }
#nrgWaveMap .nrg-soil-head { font-weight: 700; color: #1f3b63; }
#nrgSoilKey[hidden] { display: none; }
#nrgWaveMap.has-soil #nrgMapCtrls { left: 22px; }
#nrgWaveMap.has-soil .nrg-map-attr { left: 20px; max-width: calc(100% - 26px); }
#nrgWaveMap.has-soil .nrg-map-note { left: 70px; }
[data-theme="dark"] #nrgWaveMap .nrg-soil-tip { background: rgba(19,28,46,0.97); border-color: #223049; color: #e6edf6; }
[data-theme="dark"] #nrgWaveMap .nrg-soil-head { color: #cfe0f7; }
[data-theme="dark"] #nrgWaveMap .nrg-soil-mark { background: #e6edf6; box-shadow: 0 0 0 1.5px #0e1626; }
#nrgWaveMap .nrg-map-attr { position: absolute; left: 6px; bottom: 5px; z-index: 2; max-width: calc(100% - 12px); padding: 1px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.78); color: #4a5a6c; font-size: 0.62rem; line-height: 1.4; pointer-events: none; }
@media (max-width: 600px) { #nrgWaveMap .nrg-map-attr { font-size: 9px; padding: 0 4px; left: 4px; bottom: 3px; }
    #nrgWaveMap.has-soil .nrg-map-attr { left: 18px; } }
/* the source stamp after the EA credit, "(ca20260520)": cache + the EA's edition; "fr" when drawn from our own shapes (station.js nrgFloodStamp()) */
#nrgWaveMap .nrg-map-attr .nrg-fl-stamp, .h3-ea-stamp, .fr-ea-stamp { opacity: 0.72; font-size: 0.92em; letter-spacing: 0.01em; }
/* the station page's "Map sources" line at the foot (the stamp left the map's credit, Marc 2026-10-03) */
.nrg-map-sources { font-size: 0.82em; color: #64748b; line-height: 1.45; margin: 0.6em 0 0; }
.nrg-map-sources[hidden] { display: none; }
.nrg-map-sources .nrg-fl-stamp { opacity: 0.72; }
/* the Leaflet maps: the stamp shows while the credit is hovered or focused, not all the time */
.leaflet-control-attribution .h3-ea-stamp, .leaflet-control-attribution .fr-ea-stamp { display: none; }
.leaflet-control-attribution:hover .h3-ea-stamp, .leaflet-control-attribution:hover .fr-ea-stamp,
.leaflet-control-attribution:focus-within .h3-ea-stamp, .leaflet-control-attribution:focus-within .fr-ea-stamp { display: inline; }
#nrgWaveMap .nrg-map-note[hidden], #nrgWaveMap .nrg-map-attr[hidden], #nrgMapView .nrg-linekey[hidden], #nrgMapView .nrg-lines-sum[hidden] { display: none; }
#nrgMapView .nrg-linekey { padding-top: 0.1rem; }
#nrgMapView .nrg-linekey svg { flex: 0 0 auto; }
#nrgMapView .nrg-leg-pill { display: inline-block; padding: 0 6px; border: 1px solid #d8e3df; border-radius: 9px; background: #fff; color: #2b2620;
    font-size: 0.62rem; font-weight: 700; line-height: 1.5; }
/* Station Details, compact (2026-10-01, Marc: "more compact, smaller font"): the essentials in two columns beside the
   UK locator, the technical rows folded under a details line, the lists at 0.82rem. */
#stationDetails .sd-row { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
#stationDetails .detail-grid { flex: 1 1 320px; min-width: 0; }
#stationDetails .sd-list { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; line-height: 1.5; columns: 2; column-gap: 1.5rem; }
#stationDetails .sd-list li { margin: 0 0 0.3rem; break-inside: avoid; }
#stationDetails .sd-list strong { font-weight: 600; color: #34495e; }
#stationDetails .sd-list a { color: #1f6fbf; }
#stationDetails .sd-more { margin-top: 0.6rem; }
#stationDetails .sd-more > summary { cursor: pointer; font-size: 0.8rem; color: #1f6fbf; list-style: none; padding: 0.2rem 0; }
#stationDetails .sd-more > summary::-webkit-details-marker { display: none; }
#stationDetails .sd-more > summary::before { content: '\25B8'; display: inline-block; width: 1em; transition: transform .15s; }
#stationDetails .sd-more[open] > summary::before { transform: rotate(90deg); }
#stationDetails .sd-more .sd-list { margin-top: 0.4rem; }
#stationDetails .sd-aside { flex: 0 0 150px; display: flex; flex-direction: column; gap: 10px; }
#stationDetails .sd-note { font-size: 0.74rem; color: #8a94a0; margin: 0.7rem 0 0; font-style: italic; }
@media (max-width: 640px) {
  #stationDetails .sd-list { columns: 1; }
  #stationDetails .sd-aside { flex: 0 0 120px; }
}
/* The key folds: the compact set is the data-key="core" items; "Full key" shows the rest. "About this map" is a details. */
#nrgMapView .nrg-keys { position: relative; }
#nrgMapView .nrg-keys--compact .nrg-leg:not([data-key="core"]) { display: none; }
#nrgMapView .nrg-keys--compact .nrg-legend:not(:has(.nrg-leg[data-key="core"])) { display: none; }
#nrgMapView .nrg-key-toggle { display: inline-block; margin: 0.1rem 0.3rem 0.3rem; padding: 0.1rem 0.55rem; font-size: 0.74rem; line-height: 1.5; color: #1f6fbf; background: #fff; border: 1px solid #d8e3df; border-radius: 9px; cursor: pointer; }
#nrgMapView .nrg-key-toggle:hover, #nrgMapView .nrg-key-toggle:focus-visible { border-color: #1f6fbf; }
#nrgMapView .nrg-about { margin: 0.2rem 0.3rem 0; }
#nrgMapView .nrg-about > summary { cursor: pointer; font-size: 0.78rem; color: #1f6fbf; padding: 0.25rem 0; list-style: none; }
#nrgMapView .nrg-about > summary::-webkit-details-marker { display: none; }
#nrgMapView .nrg-about > summary::before { content: '\25B8'; display: inline-block; width: 1em; transition: transform .15s; }
#nrgMapView .nrg-about[open] > summary::before { transform: rotate(90deg); }
#nrgMapView .nrg-about > .nrg-lines-sum, #nrgMapView .nrg-about > .nrg-foot { margin-left: 0; }
#nrgMapView .nrg-lines-sum { margin: 0; padding: 0.15rem 0.3rem 0.1rem; font-size: 0.74rem; line-height: 1.45; color: #34495e; }
[data-theme="dark"] #nrgWaveMap .nrg-map-note { background: rgba(19,28,46,0.94); border-color: #223049; color: #e6edf6; }
[data-theme="dark"] #nrgWaveMap .nrg-map-attr { background: rgba(14,22,38,0.78); color: #9fb3d1; }
/* Area map, "Play last 24 h" (2026-09-30): the button joins the map's controls; while playing, a bar under the map (play
   or pause, the scrubber, back to now; 40 px targets for a thumb) and a line of words under it. The scrubber takes the
   touch while it is dragged (touch-action: none) so scrubbing never scrolls the page; everywhere else scrolls as before.
   In the dark theme the bar is dark like the map's own buttons; the words stay in the panel's colours (the panel is light). */
#nrgMapCtrls .nrg-play-btn, #nrgMapView #nrgMapCtrls .nrg-map-btn.nrg-play-btn { width: auto; padding: 0 12px 0 10px; gap: 6px; font-size: 0.8rem;
    font-weight: 700; white-space: nowrap; }   /* the second selector outranks the phone rule for the map's buttons (44 px squares, further down) */
#nrgMapCtrls .nrg-play-btn { color: #1f3b63; }
#nrgMapCtrls .nrg-play-btn .nrg-play-ico { font-size: 0.72rem; }
#nrgMapCtrls .nrg-play-btn[disabled] { opacity: 0.65; cursor: progress; }
#nrgMapCtrls .nrg-play-btn[hidden] { display: none; }
@media (max-width: 600px) { #nrgMapCtrls .nrg-play-btn .nrg-play-long { display: none; } }
#nrgMapView .nrg-playbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 5px 6px; border: 1px solid #d8e3df;
    border-radius: 10px; background: #f6faf8; max-width: 100%; box-sizing: border-box; }
#nrgMapView .nrg-playbar[hidden] { display: none; }
#nrgMapView .nrg-playbar button { flex: 0 0 auto; height: 40px; min-width: 44px; padding: 0 10px; border: 1px solid #d8e0ea; border-radius: 8px;
    background: #fff; color: #1f3b63; font-size: 0.82rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; }
#nrgMapView .nrg-playbar button:focus-visible, #nrgMapView .nrg-pb-range:focus-visible { outline: 2px solid #4a90d9; outline-offset: 1px; }
#nrgMapView .nrg-pb-range { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; background: transparent; touch-action: none; cursor: pointer;
    -webkit-appearance: none; appearance: none; }
#nrgMapView .nrg-pb-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #c9d7e6; }
#nrgMapView .nrg-pb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
    background: #1f6fbf; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#nrgMapView .nrg-pb-range::-moz-range-track { height: 6px; border-radius: 3px; background: #c9d7e6; }
#nrgMapView .nrg-pb-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #1f6fbf; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#nrgMapView .nrg-pb-cap { margin: 4px 0 6px; padding: 0 0.3rem; font-size: 0.74rem; line-height: 1.45; color: #34495e; }
#nrgMapView .nrg-pb-cap[hidden] { display: none; }
/* Window mode only (a past window: /replay's Area map tab, /admin/area-map's window form): the words about the gauge's trusted
   pairings (frAreaMapPairsHtml()), in the pairs' own violet. No station page prints it. */
#nrgMapView .nrg-pairs { margin: 0.3rem 0.1rem 0.4rem; padding: 0.4rem 0.6rem; border-left: 3px solid #7652ba; background: #f6f3fc; font-size: 0.8rem; line-height: 1.45; color: #2c3e50; border-radius: 0 6px 6px 0; }
#nrgMapView .nrg-pairs[hidden] { display: none; }
#nrgMapView .nrg-pair-say { display: block; }
#nrgMapView .nrg-pair-say + .nrg-pair-say { margin-top: 0.3rem; }
[data-theme="dark"] #nrgMapCtrls .nrg-play-btn { color: #e6edf6; }
[data-theme="dark"] #nrgMapView .nrg-playbar { background: #101a2c; border-color: #223049; }
[data-theme="dark"] #nrgMapView .nrg-playbar button { background: #131c2e; border-color: #223049; color: #e6edf6; }
[data-theme="dark"] #nrgMapView .nrg-pb-range::-webkit-slider-runnable-track { background: #2c3b55; }
[data-theme="dark"] #nrgMapView .nrg-pb-range::-moz-range-track { background: #2c3b55; }
[data-theme="dark"] #nrgMapView .nrg-pb-range::-webkit-slider-thumb { background: #5ea9ef; border-color: #0e1626; }
[data-theme="dark"] #nrgMapView .nrg-pb-range::-moz-range-thumb { background: #5ea9ef; border-color: #0e1626; }
/* Area map, overflows by their monitor and water-sampling points (2026-09-30 night): their key, and the words under the map
   (what is marked, what is left out, whose data). */
#nrgMapView .nrg-markkey { padding-top: 0.1rem; }
#nrgMapView .nrg-markkey svg { flex: 0 0 auto; }
#nrgMapView .nrg-marks-credit { color: #6b7886; font-size: 0.68rem; }
[data-theme="dark"] #nrgMapView .nrg-marks-credit { color: #9fb3d1; }
/* Area map, where am I? (2026-09-30 23:44): Plain / Streets / Satellite and "Show my postcode" in one row under the map (two
   rows on a phone, 44 px targets), the pin's words under it, the underlay's attribution on the map above the OS badge (its
   licence asks for it there; it takes the map's own dark rule), and the page-credits fallback line. */
#nrgMapView .nrg-map-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0.1rem 0.15rem; }
#nrgMapView .nrg-map-tools[hidden], #nrgMapView .nrg-map-tools [hidden], #nrgMapView .nrg-pc-out[hidden], #nrgMapView .nrg-map-credits[hidden] { display: none; }
#nrgMapView .nrg-seg { display: inline-flex; border: 1px solid #d7e0ea; border-radius: 8px; overflow: hidden; background: #fff; }
#nrgMapView .nrg-seg-btn { border: 0; border-left: 1px solid #d7e0ea; background: #fff; color: #4a5a6c; font: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.85rem; min-height: 36px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
#nrgMapView .nrg-seg-btn:first-child { border-left: 0; }
#nrgMapView .nrg-seg-btn[aria-pressed="true"] { background: #2f6fb3; color: #fff; }
#nrgMapView .nrg-seg-btn:focus-visible, #nrgMapView .nrg-pc-go:focus-visible, #nrgMapView .nrg-pc-clear:focus-visible { outline: 2px solid #2f6fb3; outline-offset: 2px; }
#nrgMapView .nrg-pc { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; min-width: 0; }
#nrgMapView .nrg-pc-label { font-size: 0.72rem; font-weight: 700; color: #4a5a6c; }
#nrgMapView .nrg-pc-row { display: flex; gap: 0.35rem; align-items: stretch; }
#nrgMapView .nrg-pc-input { width: 9.5rem; min-width: 0; min-height: 36px; padding: 0.3rem 0.55rem; border: 1px solid #c9d4e0; border-radius: 8px; background: #fff;
    color: #1f2d3d; font: inherit; font-size: 0.85rem; text-transform: uppercase; }
#nrgMapView .nrg-pc-input::placeholder { text-transform: none; color: #8a96a3; }
#nrgMapView .nrg-pc-input:focus { outline: 2px solid #2f6fb3; outline-offset: 0; border-color: #2f6fb3; }
#nrgMapView .nrg-pc-go, #nrgMapView .nrg-pc-clear { min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 8px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
#nrgMapView .nrg-pc-go { border: 1px solid #2f6fb3; background: #2f6fb3; color: #fff; }
#nrgMapView .nrg-pc-clear { border: 1px solid #d7e0ea; background: #fff; color: #4a5a6c; }
#nrgMapView .nrg-pc-out { margin: 0.3rem 0.1rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid #0d9488; background: #f2faf8; font-size: 0.8rem; line-height: 1.45; color: #2c3e50; border-radius: 0 6px 6px 0; }
#nrgMapView .nrg-pc-out a { color: #1f5e98; font-weight: 600; }
#nrgMapView .nrg-pc-note { color: #6b7886; font-size: 0.72rem; }
#nrgWaveMap .nrg-tile-attr { bottom: 23px; pointer-events: auto; }
#nrgWaveMap .nrg-tile-attr a { color: inherit; text-decoration: underline; }
#nrgWaveMap .nrg-tile-attr[hidden] { display: none; }
#nrgMapView .nrg-map-credits { color: #6b7886; }
/* The station page's content stays light under the dark theme (only the map and its on-map buttons go dark), so the row
   under the map keeps the light look in both themes, as the view buttons and filters above it do. */
@media (max-width: 600px) {
    #nrgMapView .nrg-map-tools { flex-direction: column; align-items: stretch; }
    #nrgMapView .nrg-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
    #nrgMapView .nrg-seg-btn, #nrgMapView .nrg-pc-input, #nrgMapView .nrg-pc-go, #nrgMapView .nrg-pc-clear { min-height: 44px; }
    #nrgMapView .nrg-pc-input { flex: 1 1 auto; width: auto; font-size: 16px; }
    #nrgWaveMap .nrg-tile-attr { bottom: 17px; }
}

/* Area map, Flood layers (2026-10-01, BACKLOG §2.47 item 53: the retired Station Details map's menu): a button beside Plain /
   Streets / Satellite opens the menu under the row (one tick box a layer, its swatch and what it is); the layers switched on
   join the key; their words (zoom in, England only, a part not loaded, community reports) under the row; the EA's credit on
   the map just above the tile credit (bottom-left). Light in both themes, as the rest of the row. Swatches are the colours
   the EA draws: zones dark and light blue, warning areas orange with a red edge, surface water three blues, defences magenta. */
#nrgMapView .nrg-fl-btn { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: auto; border: 1px solid #d7e0ea; border-radius: 8px;
    background: #fff; color: #4a5a6c; font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.75rem; min-height: 36px;
    cursor: pointer; white-space: nowrap; touch-action: manipulation; }
#nrgMapView .nrg-fl-btn:hover { border-color: #b9c9da; }
#nrgMapView .nrg-fl-btn:focus-visible, #nrgMapView .nrg-fl-act:focus-visible { outline: 2px solid #2f6fb3; outline-offset: 2px; }
#nrgMapView .nrg-fl-btn[data-on]:not([data-on="0"]) { border-color: #2f6fb3; color: #1f4f86; background: #eef5fc; }
#nrgMapView .nrg-fl-count { font-weight: 700; }
#nrgMapView .nrg-fl-caret { font-size: 0.7rem; transition: transform .15s; }
#nrgMapView .nrg-fl-btn[aria-expanded="true"] .nrg-fl-caret { transform: rotate(180deg); }
#nrgMapView .nrg-fl-panel { margin: 0.45rem 0.1rem 0; padding: 0.5rem 0.6rem 0.45rem; border: 1px solid #d8e3df; border-radius: 10px; background: #fbfdfc; }
#nrgMapView .nrg-fl-panel[hidden], #nrgMapView .nrg-fl-out[hidden], #nrgMapView .nrg-floodkey[hidden] { display: none; }
#nrgMapView .nrg-fl-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.15rem 0.9rem; }
#nrgMapView .nrg-fl-legend { padding: 0; margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; color: #4a5a6c; }
#nrgMapView .nrg-fl-opt { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 8px; cursor: pointer; min-height: 36px; }
#nrgMapView .nrg-fl-opt:hover { background: #f1f6f9; }
#nrgMapView .nrg-fl-opt input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: #2f6fb3; cursor: pointer; }
#nrgMapView .nrg-fl-txt { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
#nrgMapView .nrg-fl-name { font-size: 0.82rem; font-weight: 700; color: #2c3e50; }
#nrgMapView .nrg-fl-what { font-size: 0.72rem; line-height: 1.4; color: #5b6876; }
#nrgMapView .nrg-fl-note { margin: 0.35rem 0.4rem 0.1rem; font-size: 0.7rem; line-height: 1.45; color: #6b7886; }
#nrgMapView .nrg-fl-sw { flex: 0 0 auto; display: inline-block; width: 22px; height: 14px; margin-top: 0.2rem; border-radius: 3px; box-sizing: border-box; }
#nrgMapView .nrg-fl-sw--zones { background: linear-gradient(90deg, rgba(57,67,134,0.55) 0 50%, rgba(155,207,251,0.6) 50% 100%); }
#nrgMapView .nrg-fl-sw--warnings { background: rgba(255,103,0,0.25); border: 2px solid rgba(231,76,60,0.75); }
#nrgMapView .nrg-fl-sw--surface { background: linear-gradient(90deg, rgba(85,91,157,0.5) 0 34%, rgba(154,159,222,0.55) 34% 67%, rgba(195,224,255,0.75) 67% 100%); }
#nrgMapView .nrg-fl-sw--defences { height: 4px; margin-top: 0.45rem; border-radius: 2px; background: rgba(233,30,140,0.9); }
#nrgMapView .nrg-fl-sw--community { background: rgba(20,184,166,0.3); border: 2px solid #0f766e; }
#nrgMapView .nrg-floodkey .nrg-fl-sw { width: 18px; height: 11px; margin-top: 0; }
#nrgMapView .nrg-floodkey .nrg-fl-sw--defences { height: 4px; }
#nrgMapView .nrg-fl-out { margin: 0.35rem 0.1rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid #2f6fb3; background: #f3f7fc; font-size: 0.8rem;
    line-height: 1.45; color: #2c3e50; border-radius: 0 6px 6px 0; }
#nrgMapView .nrg-fl-out a { color: #1f5e98; font-weight: 600; }
#nrgMapView .nrg-fl-act { margin-left: 0.25rem; padding: 0.2rem 0.65rem; min-height: 30px; border: 1px solid #2f6fb3; border-radius: 7px; background: #2f6fb3;
    color: #fff; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
#nrgMapView .nrg-fl-photos img { height: 56px; width: auto; margin: 0.2rem 0.25rem 0 0; border-radius: 4px; vertical-align: middle; }
#nrgWaveMap .nrg-flood-attr { bottom: 41px; }
#nrgWaveMap .nrg-tile-attr[hidden] + .nrg-flood-attr { bottom: 23px; }
@media (max-width: 600px) {
    #nrgMapView .nrg-fl-btn { justify-content: center; min-height: 44px; margin-right: 0; }
    #nrgMapView .nrg-fl-set { grid-template-columns: 1fr; }
    #nrgMapView .nrg-fl-opt { min-height: 44px; padding: 0.5rem 0.35rem; }
    #nrgMapView .nrg-fl-opt input { width: 22px; height: 22px; }
    #nrgMapView .nrg-fl-act { min-height: 40px; margin: 0.35rem 0 0; display: inline-block; }
    #nrgWaveMap .nrg-flood-attr { bottom: 31px; }
    #nrgWaveMap .nrg-tile-attr[hidden] + .nrg-flood-attr { bottom: 17px; }
}
/* The Area map's key and its foot note (moved from station.php's inline styles on 2026-10-12, when the map became
   public/area-map.js and other pages began to call it). The station page's River order view uses the same four. */
.nrg-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; font-size: 0.72rem; color: #5b6b7d; padding: 0.45rem 0.3rem 0.2rem; }
.nrg-leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.nrg-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.nrg-foot { font-size: 0.68rem; color: #5f6b78; padding: 0.25rem 0.3rem 0.3rem; line-height: 1.45; }
@media (max-width: 600px) {
    #nrgMapView #nrgMapCtrls .nrg-map-btn { width: 44px; height: 44px; }
}
/* The Area map's box on a page that prints it (includes/area-map.php amBlock()): it holds the finished map's height from
   the first paint, so nothing below it moves when the map arrives. */
.fr-area-map { min-height: var(--am-h, 630px); }
.fr-area-map-wait { margin: 0; padding: 2rem 1rem; text-align: center; color: #8a94a0; font-size: .85rem; }
/* What a wide view leaves out (a long river on a narrow map: public/area-map.js frAreaMapPick()). The line keeps its
   height with or without words, so nothing under the map jumps as the reader zooms in and out. */
#nrgMapLeft { margin: 0.35rem 0.3rem 0; min-height: 1.45em; font-size: 0.76rem; line-height: 1.45; color: #5b6b7d; }
@media (max-width: 600px) { #nrgMapLeft { min-height: 7.25em; } }   /* five lines: the longest a phone shows */
@media (max-width: 600px) { .fr-area-map { min-height: var(--am-hp, 610px); } }