/* The map page never scrolls. .map-wrap used to carry margin-top:78px, which
   collapsed through <body> on top of body's 100dvh: the document was 78px
   taller than the screen (922 in 844) and dragged up under the header.
   Absolute against the viewport-sized root instead, nothing is in flow. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{min-height:0}
.map-wrap{
  /* Under the floating header: its offset and height are bm-shared's tokens */
  --map-top:calc(var(--hdr-top) + var(--hdr-h) + 8px);
  /* Room for a closed edge tab (26px wide, bm-shared.css) and its gap */
  --map-tab-clear:40px;
  position:absolute;top:var(--map-top);left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 300px;
  grid-template-rows:minmax(0,1fr) auto;
}

/* ── LEFT PANEL ──────────────────────────────────────────────── */
.map-left{
  border-right:1px solid var(--line);
  padding:18px var(--sp-4);
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;grid-row:1/3;
}
.map-left::-webkit-scrollbar{width:3px}
.map-left::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.map-section-lbl{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
:where(.mapbtn){appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
button.filter-row,button.layer-item{width:100%}
.mapbtn[disabled]{cursor:not-allowed;opacity:.75}
.layer-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px var(--sp-2);border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.layer-item.on{background:var(--bg-elev);border-color:var(--line)}
.layer-l{display:flex;align-items:center;gap:var(--sp-2)}
.layer-sq{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.layer-name{font-size:var(--fs-sm)}
.layer-ct{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3)}
.filter-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--ink-2);padding:6px 6px;min-height:32px;border-radius:var(--r-sm);cursor:pointer;transition:background .1s}
.filter-v{font-family:var(--mono)}
.filter-v.on{color:var(--ink)}
.filter-v.off{color:var(--ink-2)}
/* Hover only where there is a pointer that hovers: on touch a :hover sticks
   after the tap. Touch gets :active as its feedback instead. */
@media(hover:hover){
  .layer-item:hover,.filter-row:hover{background:var(--bg-elev)}
  .leg-item:hover{background:var(--bg-elev-2)}
}
.layer-item:active,.filter-row:active,.leg-item:active{background:var(--bg-elev-2)}
.basemap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.bm-tile{
  height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg-elev);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:7px var(--sp-1) var(--sp-1);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;
  transition:border-color .12s, color .12s;
}
.bm-tile.active{border-color:var(--water);background:var(--bg-elev-2)}
.map-foot-note{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5;margin-top:auto}

/* While a drawer is open the other edge's tab hides (map.html toggles the
   class). The tabs sit above the scrim, so a tap beside an open drawer, meant
   to close it, landed on the other tab and opened that drawer instead. */
body.map-drawer-open .bm-edge-handle:not(.is-open){visibility:hidden;pointer-events:none}

/* ── MAP CENTER ───────────────────────────────────────────────── */
/* isolation: the overlays below stack inside the map, with small local
   z-indexes. At 1000–1002 in the root layer they covered the header's tips
   and pickers. Local order: Leaflet 1 · cards 3 · search 4 · pill 5 · tip 6. */
.map-center{position:relative;overflow:hidden;grid-row:1/2;isolation:isolate}

/* Leaflet container — fills the entire map-center */
#map-leaflet{
  position:absolute;
  inset:0;
  z-index:1;
}

/* Search bar and overlays — above Leaflet. Wide screens: the column is not a
   box, and search (top-left) and live card (top-right) keep their corners. */
.map-tl-col{display:contents}
.map-overlay-tl{
  position:absolute;left:max(14px,env(safe-area-inset-left));top:14px;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-md);padding:7px var(--sp-3);
  display:flex;align-items:center;gap:10px;width:310px;max-width:calc(100% - 28px);
  z-index:4;
}
/* 310px, not 250: the placeholder ("Search ditches, gauges, structures…",
   longer in Spanish) was cut at "…structure". */
.map-search-icon{color:var(--ink-3);flex-shrink:0}
/* Two legend cards stacked bottom-left: drought key above, flow/features below */
.map-legend-stack{
  --leg-left:max(14px,env(safe-area-inset-left));
  /* Wide screens: above the credits strip (18px) that runs along the bottom-right */
  position:absolute;left:var(--leg-left);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 12px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:calc(100% - var(--leg-left) - 186px);   /* clear of the scale and the zoom buttons */
  pointer-events:none;   /* the stack's empty corners pass taps to the map; its cards and chip take them */
}
.map-legend-stack>*{pointer-events:auto}
.map-legend-cards{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:0}
/* The phone-only chip that opens both keys (see the phone block below) */
.map-legend-btn{display:none;align-items:center;gap:var(--sp-2);min-height:var(--ctl-touch);padding:0 var(--sp-3);
  background:var(--bg-elev);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);
  font:500 var(--fs-sm)/1 var(--font);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.map-legend-btn[aria-expanded="true"]{border-color:var(--water);color:var(--water)}
.map-legend{
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-md);padding:9px var(--sp-3);
  display:flex;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);color:var(--ink-2);
  flex-wrap:wrap;
}
.leg-title{
  flex-basis:100%;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px;
}
.map-legend-drought{flex-direction:column;flex-wrap:nowrap;gap:3px}
/* In a column the title's flex-basis:100% is a height: in a height-bounded
   open legend it pushed the swatches into a second column */
.map-legend-drought .leg-title{flex-basis:auto}
.map-legend-cards>.map-legend{flex-shrink:0}   /* the open key scrolls; its cards keep their height */
/* Touch: every row is a 44px tap target (bm-shared's minimum), which is
   spacing enough; the cards' own row gap on top of it read as stretched. */
@media(pointer:coarse){.map-legend,.leg-row{row-gap:0}.map-legend-drought{gap:0}}
.leg-row{display:flex;gap:10px;flex-wrap:wrap}
.leg-sw{width:14px;height:9px;border-radius:2px;border:1px solid rgba(0,0,0,.35);opacity:.5}   /* nearer the polygons' light fill */
.leg-sub{font-size:var(--fs-xs);color:var(--ink-3)}
/* Dotted swatch matching the state line */
.leg-l-co{width:16px;height:0;border-top:3px dotted var(--ink)}
.leg-item{display:flex;align-items:center;gap:var(--sp-1);cursor:help;border-radius:4px;padding:1px 3px;transition:background .1s}
.leg-d{width:7px;height:7px;border-radius:50%}
.leg-l{width:12px;height:5px;border-top:2px solid;box-sizing:border-box}

/* ── Political boundaries — cosmetic underlay, styled here so they follow the theme ── */
:root,html[data-bm-theme="dark"]{--tribal:#b592e8;--tribal-soft:rgba(181,146,232,.14)}
html[data-bm-theme="day"]{--tribal:#6d4fb3;--tribal-soft:rgba(109,79,179,.12)}
/* Colorado line: round dots over a soft casing, so it reads on any basemap and over drought fills */
.bm-b-jurisdiction-casing{stroke:var(--bg);stroke-width:7;stroke-opacity:.55;fill:none}
.bm-b-jurisdiction{stroke:var(--ink);stroke-width:3.2;stroke-opacity:.95;stroke-dasharray:0.1 7;stroke-linecap:round;fill:none}
.bm-b-state{stroke:var(--ink-3);stroke-width:1.2;stroke-opacity:.7;stroke-dasharray:6 4;fill:none}
.bm-b-tribal{stroke:var(--tribal);stroke-width:1.6;stroke-opacity:.95;fill:var(--tribal);fill-opacity:.14}
.bm-b-tribal-near{stroke-opacity:.5;fill-opacity:.06;stroke-dasharray:3 3}
.bm-b-trust{stroke-dasharray:2 2}
.map-scale{
  /* Beside the zoom buttons and above Leaflet's attribution strip, which it
     used to sit on (both live in Leaflet's bottom-right corner) */
  position:absolute;right:calc(max(14px,env(safe-area-inset-right)) + 48px);bottom:26px;
  font-size:var(--fs-xs);color:var(--ink-3);
  display:flex;align-items:center;gap:6px;
  z-index:3;pointer-events:none;
}
.map-scale-bar{display:block;width:60px;border-top:1px solid var(--ink-3)}

/* ── Leaflet dark-theme overrides ─────────────────────────────── */
#map-leaflet .leaflet-bar a{
  background:var(--bg-elev);
  color:var(--ink);
  border-color:var(--line);
}
@media(hover:hover){#map-leaflet .leaflet-bar a:hover{background:var(--bg-elev-2)}}
#map-leaflet .leaflet-bar a:active{background:var(--bg-elev-2)}
/* 44px zoom buttons on touch (Leaflet's own touch size is 30) */
@media(pointer:coarse){#map-leaflet .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}}
/* Leaflet's corners keep clear of the notch and the home indicator */
#map-leaflet .leaflet-right .leaflet-control{margin-right:max(14px,env(safe-area-inset-right))}
#map-leaflet .leaflet-bottom .leaflet-control{margin-bottom:8px}
#map-leaflet .leaflet-bottom .leaflet-control:last-child{margin-bottom:max(14px,env(safe-area-inset-bottom))}
#map-leaflet .leaflet-bar{
  border:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  border-radius:var(--r-md);overflow:hidden;
}
#map-leaflet .leaflet-bar a:first-child{border-bottom-color:var(--line)}
/* Attribution (map.html AttrWrap). Wide screens: the strip, flush in the
   corner as Leaflet draws it, but opaque, so it reads over the basemap. */
#map-leaflet .leaflet-bottom.leaflet-right .bm-attr.leaflet-control{margin:0}
#map-leaflet .bm-attr .leaflet-control-attribution{
  float:none;margin:0;
  background:var(--bg-elev);
  color:var(--ink-2);
  font-size:var(--fs-xs);
  border-radius:4px 0 0 0;
}
#map-leaflet .bm-attr .leaflet-control-attribution a{color:var(--ink)}
.bm-attr-btn{display:none}

/* ── Leaflet marker icons — no default shadow/bg ─────────────── */
.bm-map-marker{
  background:none !important;
  border:none !important;
}

/* ── Leaflet tooltip — BasinMind design system ────────────────── */
.bm-map-tt{
  background:var(--bg-elev) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:10px 13px !important;
  font-size:var(--fs-xs);
  color:var(--ink-2);
  box-shadow:0 4px 16px rgba(0,0,0,.35) !important;
  /* Long names ran past a 320px map: wrap inside it. max-content first, or
     an absolutely placed tooltip shrinks to a word per line. */
  white-space:normal;width:max-content;max-width:min(280px,calc(100vw - 32px));
}
.bm-map-tt::before,.bm-map-tt:before{
  border-top-color:var(--line) !important;
}
.bm-map-tt .bm-tt-name{
  font-family:var(--serif);
  font-size:var(--fs-md);
  color:var(--ink);
  margin-bottom:3px;
  display:block;
}
.bm-map-tt .bm-tt-val{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  color:var(--ink-2);
}
.bm-map-tt .bm-tt-extra{
  display:block;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  color:var(--ink-3);
  margin-top:2px;
}

/* Live overlay — shown by map.html adding .on. z-index on the class, not the
   id: an id rule beat the narrow column's order and the card covered the
   search results. */
.map-live.on{display:block}
.map-live{display:none;position:absolute;z-index:3;top:14px;right:max(14px,env(safe-area-inset-right));max-width:260px;max-height:45%;overflow-y:auto;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;
  font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.map-live-head{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.map-live-retry{margin-top:var(--sp-1);min-height:var(--ctl-sm);font-size:var(--fs-xs)}
.map-live-more{display:inline-flex;align-items:center;margin-top:var(--sp-1);min-height:var(--ctl-sm);padding:0;
  background:none;border:0;color:var(--water);font:600 var(--fs-xs)/1 var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.map-live-more[hidden]{display:none}

/* ── Search input ──────────────────────────────────────────────── */
/* map-overlay-tl is already position:absolute; the dropdown is positioned
   relative to it via the block-level wrapper */
.map-overlay-tl{cursor:text}
.map-search-input{
  flex:1;min-width:0;
  background:none;border:none;outline:none;
  font-size:var(--fs-sm);color:var(--ink);
  font-family:var(--sans,inherit);
}
.map-search-input::placeholder{color:var(--ink-3)}

/* ── Search dropdown ───────────────────────────────────────────── */
.map-search-drop{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:-1px;right:-1px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  /* map.html's _msFit sets the real cap from the visual viewport, so the list
     ends above an on-screen keyboard; this is the fallback without it. */
  max-height:min(320px,calc(100vh - 200px));max-height:min(320px,calc(100dvh - 200px));overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  z-index:2;
}
.map-search-drop::-webkit-scrollbar{width:3px}
.map-search-drop::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.search-group-lbl{
  font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 13px var(--sp-1);
}
.search-item{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) 13px;cursor:pointer;
  transition:background .1s;
}
@media(hover:hover){.search-item:hover{background:var(--bg-elev-2)}}
.search-item:active{background:var(--bg-elev-2)}
/* A discontinued gauge: ranked after the live ones and says so */
.search-item.off .search-item-name{color:var(--ink-2)}
.search-item-off{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);flex-shrink:0;
  padding:1px var(--sp-1);border:1px dashed var(--line);border-radius:3px}
.search-item-badge{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  padding:1px var(--sp-1);border-radius:3px;flex-shrink:0;
}
.search-item-badge.gauge{background:rgba(56,189,248,.15);color:var(--water)}
.search-item-badge.ditch{background:rgba(255,255,255,.07);color:var(--ink-2)}
.search-item-name{
  font-size:var(--fs-sm);color:var(--ink);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-hl{background:none;color:var(--water);font-weight:600}
.search-item-meta{
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);flex-shrink:0
}
.search-status{
  padding:var(--sp-3) 13px;font-size:var(--fs-xs);color:var(--ink-3)
}

/* ── Division crossing suggestion pill ─────────────────────────── */
.div-suggest{
  position:absolute;
  bottom:68px;left:50%;transform:translateX(-50%);
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px var(--sp-2) 6px 14px;
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--ink-2);
  z-index:5;
  /* Wraps inside the map at 320 rather than running past both edges */
  width:max-content;max-width:calc(100% - 28px);
  box-shadow:0 4px 22px rgba(0,0,0,.4);
}
/* Slide-up entry animation — re-triggered by JS adding/removing the class */
.div-suggest-anim{
  animation:_dsUp .22s cubic-bezier(.22,.65,.36,1);
}
/* Old/new labels inside the pill */
.div-xing-from{color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-xs)}
.div-xing-arrow{color:var(--ink-3);opacity:.6;font-size:var(--fs-xs);margin:0 1px}
.div-xing-to{color:var(--water);font-family:var(--mono);font-size:var(--fs-xs);font-weight:500}
.div-suggest-btn{
  background:var(--water);color:var(--bg);border:none;
  border-radius:var(--r-pill);padding:var(--sp-1) 11px;
  font-size:var(--fs-xs);font-family:var(--mono);
  cursor:pointer;letter-spacing:.04em;flex-shrink:0;
  transition:opacity .12s;
}
@media(hover:hover){.div-suggest-btn:hover{opacity:.85}}
.div-suggest-btn:active{opacity:.75}
.div-suggest-close{
  background:none;border:none;color:var(--ink-3);
  cursor:pointer;font-size:var(--fs-md);padding:0 3px;line-height:1;
}
@keyframes _dsUp{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ── Marker cluster ────────────────────────────────────────────── */
/* Override markercluster default styles with BM design tokens */
.bm-cluster-wrap{background:none !important;border:none !important}
.bm-cluster{
  width:30px;height:30px;border-radius:50%;
  background:var(--bg-elev);
  border:1.5px solid var(--water);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--water);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
/* Hide the default blue/green cluster icons from MarkerCluster.Default.css */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .3s ease, opacity .3s ease}

/* ── Tooltip fixes — dark tooltip on USGS light basemap ────────── */
/* Ensure tooltip arrow aligns with dark bg-elev box on the Hydro basemap */
.bm-map-tt.leaflet-tooltip-top::before{
  border-top-color:var(--line) !important;
}
/* Enlarge the transparent hit area around small markers so hover is easier */
.bm-map-marker svg{overflow:visible}
.bm-map-marker{cursor:pointer !important}

/* ── RIGHT PANEL ──────────────────────────────────────────────── */
.map-right{
  border-left:1px solid var(--line);
  padding:18px;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;grid-row:1/3;
}
.map-right::-webkit-scrollbar{width:3px}
.map-right::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.feat-source{font-family:var(--mono);font-size:var(--fs-xs);color:var(--water)}
.feat-title{font-family:var(--serif);font-size:var(--fs-d1);line-height:1.1;color:var(--ink);margin-top:2px}
.feat-sub{font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px}
.feat-ssr-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.feat-ssr{display:inline-block;font-size:var(--fs-xs);color:var(--water);text-decoration:none;border-bottom:1px dotted currentColor}
@media(hover:hover){.feat-ssr:hover{border-bottom-style:solid}}
.feat-big{font-family:var(--serif);font-size:var(--fs-d2);line-height:1;color:var(--ink)}
.feat-big-unit{font-size:var(--fs-md);color:var(--ink-3)}
.feat-spark{margin:.35rem 0}
/* A sparkline with no data says so in words, at the chart's own height. */
.feat-spark-none{height:56px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--r-sm)}
/* The drawer's copy of the range chips: phones only (the scrubber is hidden there). */
.feat-range{display:none;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2)}
.feat-row{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-3)}
.feat-row .v{font-family:var(--mono);color:var(--ink)}
.related-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2)}
.related-row>:first-child{flex-shrink:0}   /* the label stays whole; a long value wraps under itself */
.related-row .v,.related-row .warn{font-family:var(--mono);text-align:right;min-width:0;overflow-wrap:anywhere}
.related-row .v{color:var(--ink)}
.related-row .warn{color:var(--dry)}
/* Side-panel mini-card values */
.stat-val{font-size:var(--fs-sm);color:var(--ink)}
.feat-retry{margin-left:var(--sp-1);min-height:var(--ctl-sm);font-size:var(--fs-xs)}

/* ── SCRUBBER ─────────────────────────────────────────────────── */
.map-scrubber{
  grid-column:2/3; grid-row:2/3;
  border-top:1px solid var(--line);
  background:var(--bg);
  display:flex; flex-direction:column;
  padding:var(--sp-2) 18px 6px;
  gap:5px;
}
.scrub-top-row{
  display:flex; align-items:center; gap:14px;
}
.scrub-wy-label{
  display:flex; align-items:center; gap:var(--sp-2); flex:1; min-width:0;
}
.scrub-wy-title{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink-3);
  letter-spacing:.08em; white-space:nowrap;
}
.scrub-wy-bar{
  flex:1; height:4px; background:var(--line); border-radius:2px;
  position:relative; min-width:60px;
}
.scrub-wy-fill{
  position:absolute; left:0; top:0; height:100%;
  background:var(--water); border-radius:2px; opacity:.55;
  transition:width .4s ease;
}
.scrub-wy-wave{
  position:absolute; left:0; bottom:0; width:100%; height:8px;
  pointer-events:none; overflow:visible;
}
.scrub-wy-now{
  position:absolute; top:-4px; width:2px; height:12px;
  background:var(--ink); border-radius:1px;
  transform:translateX(-50%);
}
.scrub-wy-pct{
  font-size:var(--fs-xs); color:var(--ink-3); white-space:nowrap; cursor:help;
}
.scrub-range-group{
  display:flex; align-items:center; gap:var(--sp-1); flex-shrink:0;
}
.scrub-range-lbl{
  font-size:var(--fs-xs); color:var(--ink-3); margin-right:2px;
}
.range-chip{
  font-size:var(--fs-xs); padding:0 10px; min-height:28px; border-radius:var(--r-pill);
  border:1px solid var(--line); cursor:pointer;
  color:var(--ink-2); background:transparent;
  transition:background .1s, color .1s, border-color .1s;
  white-space:nowrap;
}
@media(hover:hover){ .range-chip:hover{ background:var(--bg-elev); color:var(--ink); } }
.range-chip:active{ background:var(--bg-elev); }
.range-chip.active{ background:var(--water-soft); color:var(--water); border-color:var(--water); font-weight:600; }
/* Day: --water on --water-soft measured 4.37:1; one step darker clears 4.5:1 */
html[data-bm-theme="day"] .range-chip.active{ color:var(--water-2); }
.scrub-chips{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none;
}
.scrub-chips::-webkit-scrollbar{ display:none; }
.scrub-chip{
  display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0;
  padding:9px 18px 9px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg-elev);
  cursor:pointer; transition:opacity .2s, border-color .15s;
  white-space:nowrap;
}
@media(hover:hover){ .scrub-chip:hover{ border-color:var(--ink-3); } }
.scrub-chip.dimmed{ opacity:.3; }
.scrub-chip.not-found{ opacity:.8; border-style:dotted; }
.scrub-chip-glyph{ display:flex; align-items:center; }
.scrub-chip-text{ display:flex; flex-direction:column; gap:3px; }
.scrub-chip-label{ font-size:var(--fs-xs); color:var(--ink); line-height:1; }
.scrub-chip-date{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink-3); line-height:1; }
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ── Narrow screens: map only ─────────────────────────────────────
   Must come after the panel rules above: at equal specificity the later
   display:flex won, so on phones the panels stayed in the grid and the page
   was ~640px wide. minmax(0,1fr) lets the map column shrink below its
   overlays' width. A phone held landscape (wide but short, touch) counts too:
   three columns would leave it a ~390px map.
   Breakpoints are bm-shared's: phone <640 · tablet <900 · nav <1100 ·
   short = (max-height:500px) and (pointer:coarse). map.html's _MAP_MQ holds the
   same queries for the JS; keep the two in step. */
@media (width < 900px),(max-height:500px) and (pointer:coarse){
  .map-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .map-left,.map-right,.map-scrubber{display:none}
  .map-center{grid-column:1;grid-row:1}
  /* The drawer's range chips: one segmented row of equal parts, not five
     pills and a label wrapping to two rows. The label stays for screen readers. */
  .feat-range{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:2px;
    border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg)}
  .feat-range .scrub-range-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .feat-range .range-chip{justify-content:center;min-width:0;padding:0 2px;border-color:transparent;font-family:var(--font);overflow:hidden;text-overflow:ellipsis}
  .feat-range .range-chip.active{border-color:var(--water)}
  /* Search over the live card, one column 8px apart. The card used a fixed
     top:64px, which assumed a 50px search box; on touch the box is 60px and
     the card covered its bottom edge. The column follows whatever height it has. */
  .map-tl-col{display:flex;flex-direction:column;align-items:stretch;gap:8px;
    position:absolute;z-index:4;top:14px;
    left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));
    pointer-events:none}   /* the gaps beside the boxes still pan the map */
  .map-tl-col>*{pointer-events:auto}
  .map-overlay-tl{position:relative;left:auto;top:auto;width:auto;max-width:320px;z-index:2}   /* its list opens over the card */
  .map-live{position:relative;top:auto;right:auto;max-width:560px;z-index:1;
    max-height:30vh;max-height:30dvh}
  /* Clear of the Layers tab on the left edge, which covered the open key */
  .map-legend-stack{--leg-left:max(var(--map-tab-clear),env(safe-area-inset-left))}
}

@media(pointer:coarse){.layer-item,.filter-row,.range-chip{min-height:44px}}

/* Search: a visible focus ring (the input itself has outline:none), 16px text
   on touch so iOS does not zoom, and the keyboard-highlighted result. */
.map-overlay-tl:focus-within{outline:2px solid var(--water);outline-offset:2px}
.search-item.active{background:var(--bg-elev-2);color:var(--ink)}
@media(pointer:coarse){.map-search-input{font-size:16px}}   /* exactly 16px: iOS zooms below it, and a rem token moves with the root size */

/* ── Phones: the map is the content ────────────────────────────────
   At 360–390 the two legend cards and the live card covered 45–90% of the
   map and each other. The live card shows two lines and a More toggle beside
   its heading. Keep in step with map.html's _MAP_PHONE_MQ. */
@media (width < 640px),(max-height:500px) and (pointer:coarse){
  .map-live{max-height:none;overflow:visible}
  .map-live.on{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-2);align-items:center}
  .map-live-head{grid-column:1;grid-row:1}
  .map-live-body{grid-column:1;grid-row:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .map-live-more{grid-column:2;grid-row:1/3;margin-top:0}
  .map-live.open{max-height:50vh;max-height:50dvh;overflow-y:auto}
  .map-live.open .map-live-body{display:block;-webkit-line-clamp:none;line-clamp:none}
  .map-live.open .map-live-more{align-self:start}
}
/* More: a 44px target on touch without making the card taller (the negative
   margin hands the extra back to the card's padding). */
@media(pointer:coarse){.map-live-more{min-height:44px;min-width:44px;padding:0 var(--sp-2);margin-block:-5px;justify-content:center}}

/* ── Legend chip, credits button, scale: phones, a phone held landscape, and
   touch screens up to the nav breakpoint (768–1024 tablets kept both keys open
   and the 20 mi scale bar ran through them). Keep in step with _MAP_LEGEND_MQ. */
@media (width < 640px),(max-height:500px) and (pointer:coarse),(width < 1100px) and (pointer:coarse){
  .map-legend-btn{display:inline-flex}
  .map-legend-cards{display:none}
  /* Clear of the zoom/credits column on the right (14 + 44 + 8) */
  .map-legend-stack{bottom:max(14px,env(safe-area-inset-bottom));max-width:calc(100% - var(--leg-left) - 66px)}
  /* Open: the stack runs from under the search box to the bottom and the keys
     scroll inside it. It used max-height:calc(100dvh - 300px), which had no
     vh fallback and left 90px on a landscape phone. */
  .map-legend-stack.open{top:calc(14px + var(--ctl-touch,44px) + 24px);justify-content:flex-end}
  .map-legend-stack.open .map-legend-cards{display:flex;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  /* The live card folds away while the key is open: at 320 they stacked */
  .map-center.legend-open .map-live{display:none}
  /* Credits: an (i) that opens them on an opaque card (map.html AttrWrap).
     The strip was two see-through lines over the labels. */
  #map-leaflet .leaflet-bottom.leaflet-right .bm-attr.leaflet-control{position:relative;
    margin:8px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) 0}
  .bm-attr-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-touch,44px);height:var(--ctl-touch,44px);
    padding:0;border-radius:50%;border:1px solid var(--line);background:var(--bg-elev);color:var(--ink-2);cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .bm-attr-btn[aria-expanded="true"]{color:var(--water);border-color:var(--water)}
  #map-leaflet .bm-attr .leaflet-control-attribution{display:none}
  #map-leaflet .bm-attr.open .leaflet-control-attribution{display:block;position:absolute;right:0;bottom:calc(100% + 6px);
    width:max-content;max-width:min(320px,calc(100vw - 32px));padding:var(--sp-2) var(--sp-3);white-space:normal;line-height:1.45;
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 6px 22px rgba(0,0,0,.3)}
  /* The scale sits left of the (i), on its centre line: clear of the legend
     chip, the zoom buttons and the credits */
  .map-scale{right:calc(max(14px,env(safe-area-inset-right)) + var(--ctl-touch,44px) + 8px);
    bottom:calc(max(14px,env(safe-area-inset-bottom)) + 14px)}
}

/* ── A phone held landscape: ~300px of map under the header ─────────
   The full-width live card and the search box covered over half of it. The
   card takes at most half the width, under the search box, one line and
   More; the column keeps clear of the Layers tab on the left, and the right
   half (the Details tab's side) stays map. */
@media (max-height:500px) and (pointer:coarse){
  .map-tl-col{left:max(var(--map-tab-clear),env(safe-area-inset-left));right:50%}
  .map-live-body{-webkit-line-clamp:1;line-clamp:1}
  .map-live.open{max-height:calc(100vh - var(--map-top) - 110px);max-height:calc(100dvh - var(--map-top) - 110px)}
}

.div-suggest-close{min-width:32px;min-height:32px}
@media(pointer:coarse){.div-suggest-close,.div-suggest-btn{min-width:44px;min-height:44px}}

.leg-sym{flex-shrink:0;display:block}

/* Side-panel stat labels: one line, cut with an ellipsis (the full text is in the title). */
.stat-lbl{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Water divisions: an outline in each division's colour (--div-N); the
   division in view is drawn heavier. Labels sit at each division's centre. */
.bm-b-division{fill:none;stroke-width:1.6;stroke-opacity:.75;stroke-dasharray:6 4}
.bm-b-division.bm-div-current{stroke-width:3;stroke-opacity:1;stroke-dasharray:none}
.bm-b-division.bm-div-1{stroke:var(--div-1)}
.bm-b-division.bm-div-2{stroke:var(--div-2)}
.bm-b-division.bm-div-3{stroke:var(--div-3)}
.bm-b-division.bm-div-4{stroke:var(--div-4)}
.bm-b-division.bm-div-5{stroke:var(--div-5)}
.bm-b-division.bm-div-6{stroke:var(--div-6)}
.bm-b-division.bm-div-7{stroke:var(--div-7)}
.bm-div-label{background:none;border:0}
.bm-div-label span{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;padding:2px var(--sp-2);border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--bg-elev) 88%,transparent);border:1.5px solid currentColor;font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.bm-div-label.bm-div-1 span{border-color:var(--div-1)}
.bm-div-label.bm-div-2 span{border-color:var(--div-2)}
.bm-div-label.bm-div-3 span{border-color:var(--div-3)}
.bm-div-label.bm-div-4 span{border-color:var(--div-4)}
.bm-div-label.bm-div-5 span{border-color:var(--div-5)}
.bm-div-label.bm-div-6 span{border-color:var(--div-6)}
.bm-div-label.bm-div-7 span{border-color:var(--div-7)}
.leg-l-div{border-color:var(--div-5);border-style:dashed}

/* Markers are 12–18px to draw but get a 44px invisible hit area, so a finger can hit them. */
.bm-map-marker{position:relative}
.bm-map-marker::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
/* The basemap follows the theme: dimmer under Dark, crisper under Accessibility. */
html[data-bm-theme="dark"] .leaflet-tile-pane{filter:brightness(.78) contrast(1.08) saturate(.9)}
html[data-bm-contrast="high"] .leaflet-tile-pane{filter:contrast(1.25) saturate(.7)}
html[data-bm-contrast="high"][data-bm-theme="dark"] .leaflet-tile-pane{filter:brightness(.7) contrast(1.3) saturate(.6)}

/* ── Space held for what the scripts fill after first paint (layout shift) ──
   The layer list is drawn by renderPage at the end of the page script, the
   timeline chips and the selected feature's sparkline and summary after their
   requests; each pushed the rest of its panel (and, for the scrubber, the map
   and its bottom controls) after the first paint. Heights are the loaded ones
   (15 layer rows; one row of 48px chips; the spark's data-h of 56px). */
#layerList:empty{min-height:490px}
#scrubChips:not(:has(.scrub-chip)){min-height:48px}
#featSpark{min-height:56px}
#featInterpText:empty{min-height:3.6em}