/* ============================================================
   TYPE SCALE — one knob.
   Every font-size in this file is in rem, relative to this value.
   Raise it to enlarge the entire interface proportionally
   (19px = original, 23px = current, try 25-26px for more).
   ============================================================ */
html{font-size:23px}

/* ============================================================
   Chl-a Bloom Explorer — design system
   Identity: hydrographic instrument. Deep-water slate, one cyan
   accent, a chlorophyll green→amber→red ramp reserved for data.
   The map and the numbers are the hero; chrome stays quiet.
   ============================================================ */
:root{
  /* palette — Daylight Lab (light + cyan) */
  --abyss:#eef3f6; --panel:#ffffff; --panel2:#e8eff3; --line:#cfdbe2;
  --foam:#153341; --muted:#5a7581; --hydro:#0e86b0; --hydro-dim:#57aac2;
  --lo:#2a9d5c; --mid:#e0aa00; --bloom:#e0483d;
  --warn-bg:#fff4df; --warn-line:#e6c079; --warn-fg:#8a5a12;
  --focus:#0e86b0;
  /* scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:32px;
  --r:8px; --r-lg:12px; --r-sm:6px;
  --shadow:0 8px 24px rgba(21,51,65,.10);
  --t:.15s ease;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--abyss);color:var(--foam);font-family:var(--sans);
  font-size:1.0rem;line-height:1.65;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:var(--hydro)}
::selection{background:var(--hydro-dim);color:var(--foam)}

/* focus — visible for keyboard users only */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ---------- top nav ----------
   Two rows, two different marks for "selected". Tier one (water body) is a
   filled pill because it switches the whole context; tier two (tool) is an
   underline on a recessed strip because it is subordinate to it. Same colour,
   different shape — the hierarchy survives a glance. */
.nav{background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.navbar{display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);min-height:74px}
.nav .brand{margin:0;display:flex;align-items:center;gap:var(--s2);
  font-weight:700;font-size:1.105rem;letter-spacing:.2px;
  color:var(--foam);text-decoration:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--hydro);
  box-shadow:0 0 10px var(--hydro);flex:none}
.logo{width:34px;height:34px;flex:none;display:block}

/* tier 1 — water body */
.navlinks{display:flex;gap:var(--s1);margin-left:auto}
.navlinks a{color:var(--muted);text-decoration:none;font-family:var(--mono);
  font-size:0.789rem;letter-spacing:1px;text-transform:uppercase;
  padding:11px 17px;border-radius:var(--r-sm);display:flex;align-items:center;
  gap:7px;transition:background var(--t),color var(--t)}
.navlinks a:hover{color:var(--foam);background:var(--panel2)}
.navlinks a.nav-active{color:#ffffff;background:var(--hydro);font-weight:600}
/* the expectation is set before the click, not after it */
.navbadge{font-size:0.5rem;letter-spacing:.5px;padding:1px 5px;border-radius:3px;
  background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line);
  font-weight:600;line-height:1.5}
.navlinks a.nav-active .navbadge{background:rgba(255,255,255,.22);
  color:#ffffff;border-color:rgba(255,255,255,.4)}

/* About is a page, not a water body: separated, and it collapses tier 2 */
.navutil{display:flex;padding-left:var(--s3);margin-left:var(--s2);
  border-left:1px solid var(--line)}
.navutil a{color:var(--muted);text-decoration:none;font-family:var(--mono);
  font-size:0.737rem;letter-spacing:1px;text-transform:uppercase;
  padding:9px 14px;border-radius:var(--r-sm);transition:background var(--t),color var(--t)}
.navutil a:hover{color:var(--foam);background:var(--panel2)}
.navutil a.nav-active{color:#ffffff;background:var(--hydro);font-weight:600}

/* tier 2 — tool */
.navtools{display:flex;gap:var(--s5);padding:0 var(--s5);
  background:var(--panel2);border-top:1px solid var(--line)}
.navtools a,.navtools .navtool-off{font-family:var(--mono);font-size:0.684rem;
  letter-spacing:1.2px;text-transform:uppercase;padding:10px 2px;
  border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap}
.navtools a{color:var(--muted);transition:color var(--t),border-color var(--t)}
.navtools a:hover{color:var(--foam);border-bottom-color:var(--line)}
.navtools a.tool-active{color:var(--hydro);border-bottom-color:var(--hydro);
  font-weight:600}
.navtools .navtool-off{color:var(--muted);opacity:.45;cursor:default}

/* ---------- app shell (Lakes, Sample) ---------- */
.app{flex:1;min-height:0;display:grid;grid-template-columns:500px 1fr}
.rail{background:var(--panel);border-right:1px solid var(--line);
  padding:var(--s5) var(--s4);overflow-y:auto;overflow-x:hidden;min-width:0}
.sub{color:var(--muted);font-size:0.789rem;margin-bottom:var(--s5)}
.group{margin-bottom:var(--s5)}
.eyebrow{font-family:var(--mono);font-size:0.711rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--hydro);margin-bottom:var(--s3);font-weight:600}
label{display:block;font-size:0.816rem;color:var(--muted);margin:var(--s3) 0 var(--s1)}
select,input{width:100%;background:var(--panel2);color:var(--foam);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
  font:inherit;transition:border-color var(--t),box-shadow var(--t)}
select:hover,input:hover{border-color:var(--hydro-dim)}
select:focus,input:focus{border-color:var(--hydro);
  box-shadow:0 0 0 3px rgba(51,188,203,.18);outline:none}
.row{display:flex;gap:var(--s2);flex-wrap:wrap}
.row>*{flex:1 1 8.5rem;min-width:0}
/* a date field must never be clipped: give it room, or let it take a line */
.row input[type=date]{flex:1 1 8.8rem}
.hr{height:1px;background:var(--line);margin:var(--s5) 0}
.hint{font-size:0.789rem;color:var(--muted);margin-top:var(--s2);line-height:1.5}

/* buttons — one coherent system */
button{width:100%;margin-top:var(--s3);background:var(--hydro);color:#ffffff;
  border:0;border-radius:var(--r-sm);padding:14px 18px;font:inherit;font-weight:600;
  font-size:0.895rem;cursor:pointer;transition:background var(--t),transform var(--t),opacity var(--t)}
button:hover{background:#49cddb}
button:active{transform:translateY(1px)}
button:disabled{background:var(--hydro-dim);color:#eef8fb;cursor:progress;opacity:.8}
button.ghost{background:transparent;color:var(--hydro);
  border:1px solid var(--hydro-dim)}
button.ghost:hover{background:var(--panel2);color:var(--foam)}

/* layer toggles */
.layers{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.lyr{display:flex;align-items:center;gap:var(--s3)}
.lyr .ck{display:flex;align-items:center;gap:7px;margin:0;color:var(--foam);
  font-size:0.842rem;min-width:132px;cursor:pointer}
.lyr .ck input{width:auto;accent-color:var(--hydro)}
.lyr .sw{width:12px;height:12px;border-radius:3px;flex:none}
.lyr .sw.chla{background:linear-gradient(90deg,var(--lo),var(--mid),var(--bloom))}
.lyr .sw.bloom{background:var(--bloom)}
.lyr input[type=range]{flex:1;padding:0;accent-color:var(--hydro);cursor:pointer}
input[type=range]{accent-color:var(--hydro)}

/* ---------- main / map ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.mapwrap{position:relative;flex:1 1 56%;min-height:300px;background:#06121a}
.mapwrap #map{position:absolute;inset:0}
.maploading{position:absolute;inset:0;z-index:640;display:flex;align-items:center;
  justify-content:center;gap:10px;background:rgba(6,18,26,.62);
  color:#eaf4f8;font-family:var(--mono);font-size:0.895rem;letter-spacing:.5px;
  backdrop-filter:blur(1px)}
.maploading[hidden]{display:none}
.results{flex:1 1 44%;overflow-y:auto;border-top:1px solid var(--line);
  background:var(--abyss);padding:var(--s4) var(--s5)}

/* readouts */
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s3);margin-bottom:var(--s4)}
.readout{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);min-width:0;overflow-wrap:anywhere}
.readout .k{font-size:0.684rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);font-family:var(--mono)}
.readout .v{font-family:var(--mono);font-size:1.789rem;font-weight:600;margin-top:3px;
  line-height:1.1}
.readout .u{font-size:0.737rem;color:var(--muted);margin-top:3px}
.readout.bloom{border-color:#5e2a26}
.readout.bloom .v{color:var(--bloom)}

/* warning / status banner */
.warn{display:none;gap:10px;background:var(--warn-bg);border:1px solid var(--warn-line);
  color:var(--warn-fg);padding:10px 14px;border-radius:var(--r);
  font-size:0.842rem;margin-bottom:var(--s4);line-height:1.5}

/* legend */
.legend{display:flex;align-items:center;gap:12px;font-size:0.789rem;
  color:var(--muted);margin:2px 0 var(--s4);flex-wrap:wrap}
.ramp{height:12px;width:170px;border-radius:5px;
  background:linear-gradient(90deg,var(--lo),var(--mid),var(--bloom))}

/* tabs */
.tabs{display:flex;gap:var(--s1);margin-bottom:var(--s3);flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:0.737rem;letter-spacing:1px;text-transform:uppercase;
  padding:11px 17px;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;background:var(--panel);
  transition:background var(--t),color var(--t),border-color var(--t)}
.tab:hover{color:var(--foam);border-color:var(--hydro-dim)}
.tab.active{color:#ffffff;background:var(--hydro);border-color:var(--hydro);font-weight:600}
.pane{display:none}
.pane.active{display:block}

/* charts */
.chartbox{position:relative;height:400px;width:100%}
.chartbox canvas{position:absolute;inset:0}

/* tables */
.tablewrap{max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.842rem}
th,td{padding:11px 13px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--hydro);font-weight:600;position:sticky;top:0;background:var(--abyss);
  letter-spacing:.5px}
th:first-child,td:first-child{text-align:left}
tr:hover td{background:rgba(14,134,176,.06)}
tr.isbloom td{color:var(--bloom)}
.empty{color:var(--muted);font-size:0.895rem;padding:30px 22px;text-align:center}

/* spinner */
.spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* validate input rows */
.vrow{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.vrow input[type=number],.vrow input[type=date]{width:auto;flex:1;min-width:96px}
.vrow input[type=file]{color:var(--muted);font-size:0.816rem}
.vrow button{margin:0;flex:0 0 auto;width:auto}

/* ---------- content pages (Validate / About) ---------- */
.page{flex:1;overflow:auto;padding:var(--s6) var(--s5)}
.page .wrap{max-width:920px;margin:0 auto}
.page h2{font-size:1.684rem;font-weight:700;margin:var(--s2) 0 var(--s2)}
.page h3{font-size:0.895rem;color:var(--hydro);letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--mono);margin:var(--s5) 0 var(--s2);font-weight:600}
.page p,.page li{color:var(--foam);opacity:.9;max-width:72ch}
.page li{margin:var(--s1) 0}
.page .muted{color:var(--muted);opacity:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--shadow)}


code{font-family:var(--mono);font-size:.92em;background:var(--panel2);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}


/* confusion matrix */
table.cm td,table.cm th{text-align:center;vertical-align:middle}
table.cm th.rh{text-align:left;color:var(--foam);font-weight:600;white-space:nowrap}
table.cm td b{font-size:1.368rem;font-family:var(--mono);display:block;line-height:1.15}
table.cm td .cell{font-size:0.632rem;color:var(--muted);font-family:var(--sans);display:block;margin-top:2px}
table.cm td.good{background:rgba(42,157,92,.10)}
table.cm td.good b{color:var(--lo)}
table.cm td.bad{background:rgba(224,72,61,.10)}
table.cm td.bad b{color:var(--bloom)}

/* raster overlays: crisp 20 m pixels, not blurred */
.leaflet-container{font-family:inherit}
.leaflet-image-layer{image-rendering:pixelated;image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges}

/* ---------- responsive ----------
   The desktop shell is viewport-locked: a fixed-height grid holding two panes
   that scroll independently. That model cannot survive a phone, where the
   control rail alone is taller than the screen and nested scroll panes fight
   the page. So below 860px the document scrolls normally, the map takes an
   explicit height instead of a share of one, and the map is ordered above the
   controls so it is the first thing on screen.

   Every font-size in this file is a rem off html{font-size}, so that is the
   main knob: 23px suits a desktop monitor and is far too large on a handset. */

@media(max-width:1080px){
  .app{grid-template-columns:380px 1fr}
}

@media(max-width:860px){
  html{font-size:19px}

  /* one scrolling document, not three */
  html,body{height:auto;min-height:100%}
  .app{display:flex;flex-direction:column}
  .main{order:1}
  .rail{order:2;overflow:visible;max-height:none;
    border-right:0;border-top:1px solid var(--line)}
  .results,.page{overflow:visible}

  .mapwrap{flex:none;height:58vh;height:58dvh;min-height:300px}
  .navbar{padding:0 var(--s3);min-height:64px}
  .navtools{padding:0 var(--s3);gap:var(--s4)}
  .navlinks a{padding:8px 10px}

  /* comfortable tap targets on touch */
  button,select,input,.tab,.navlinks a{min-height:44px}
  .lyr input[type=range]{min-height:auto}
}

@media(max-width:560px){
  html{font-size:17px}

  .navbar{flex-wrap:wrap;gap:var(--s2);min-height:0;padding:10px var(--s3)}
  .logo{width:28px;height:28px}
  /* the logo carries the identity at this width; the wordmark costs a whole row */
  .nav .brand span{display:none}
  .navlinks{gap:0}
  .navlinks a{padding:9px 11px;font-size:0.737rem}
  .navutil a{padding:9px 11px}
  /* three short labels fit, but a long domain name should scroll, not wrap */
  .navtools{gap:var(--s4);overflow-x:auto;scrollbar-width:none}
  .navtools::-webkit-scrollbar{display:none}
  .rail{padding:var(--s4) var(--s3)}
  .results{padding:var(--s3)}
  .mapwrap{height:52vh;height:52dvh;min-height:260px}

  /* two short cards a row reads better than six tall ones */
  .readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .readout{padding:var(--s2) var(--s3)}
  .readout .v{font-size:1.25rem}

  .legend{gap:8px;font-size:0.72rem}
  .ramp{width:auto;flex:1 1 70px;min-width:60px}

  .tab{flex:1 1 auto;text-align:center;padding:11px 10px}
  .lyr .ck{min-width:104px;font-size:0.8rem}
  .lyr input[type=range]{flex:1 1 70px}

  .chartbox{height:300px}
  /* a scroll box inside a scrolling page is a trap on touch: let the table
     grow downward and scroll only sideways when the columns need it */
  .tablewrap{max-height:none}
  th,td{padding:9px 10px}

  .page{padding:var(--s4) var(--s3)}
  .page h2{font-size:1.35rem}
  /* bare DOIs are one long unbreakable token */
  .page li a{overflow-wrap:anywhere}
}

/* ---------- Sample page additions ----------
   Same instrument identity as the Lakes page; the only new ideas are the sampling
   footprint on the map, a coordinate readout that stays legible over imagery,
   and status chips that name which screen stopped a scene. */

/* live coordinate over the map, monospaced so digits do not shift as it updates */
.coordbadge{position:absolute;left:12px;bottom:12px;z-index:620;
  font-family:var(--mono);font-size:0.737rem;letter-spacing:.5px;
  background:rgba(255,255,255,.92);color:var(--foam);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;
  box-shadow:var(--shadow);pointer-events:none}

/* the 3x3 window outline: dashed, so it reads as a measurement, not a feature */
.footprint{stroke-dasharray:5 4}

/* small pill buttons; they sit in a row, so they opt out of the full-width rule */
.chip{width:auto;margin:0;background:transparent;color:var(--hydro);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:0.763rem;font-weight:500;font-family:var(--mono);letter-spacing:.3px}
.chip:hover{background:var(--panel2);color:var(--foam);border-color:var(--hydro-dim)}
.quickrange{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.chip.csv{border-color:var(--hydro-dim)}
.chip.csv:disabled{background:transparent;color:var(--muted);
  border-color:var(--line);cursor:not-allowed;opacity:.7}
.tabs .spacer{flex:1}

/* the screens, as a labelled list: the term is the control, the rest is the rule */
ul.protocol{list-style:none;margin:var(--s3) 0 0;padding:0}
ul.protocol li{font-size:0.789rem;color:var(--muted);line-height:1.5;
  padding:5px 0;border-bottom:1px solid var(--line)}
ul.protocol li:last-child{border-bottom:0}
ul.protocol li span{display:inline-block;min-width:8.2rem;color:var(--foam);
  font-family:var(--mono);font-size:0.711rem;letter-spacing:.6px;
  text-transform:uppercase}

/* status chips in the scene table */
.chip-s{display:inline-block;font-family:var(--mono);font-size:0.658rem;
  letter-spacing:.4px;padding:3px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.chip-s.s-ok{color:#1d6f42;background:rgba(42,157,92,.13);border-color:rgba(42,157,92,.35)}
.chip-s.s-bloom{color:#a5322a;background:rgba(224,72,61,.13);border-color:rgba(224,72,61,.35)}
.chip-s.s-no{color:var(--muted);background:var(--panel2);border-color:var(--line)}

/* spectra ramp legend: the ramp is the measurement, so it gets a real key */
.speclegend{display:flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-family:var(--mono);font-size:0.711rem;color:var(--muted)}
.speclegend .specramp{height:10px;flex:0 1 160px;border-radius:5px;
  background:linear-gradient(90deg,rgb(139,90,43),rgb(201,162,39),rgb(42,157,92))}
.speclegend .specunit{font-family:var(--sans);margin-left:2px}

@media(max-width:560px){
  ul.protocol li span{min-width:0;display:block}
  .coordbadge{font-size:0.68rem;left:8px;bottom:8px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .spin{border-top-color:currentColor;opacity:.6}
}

/* ============ basin switcher ============
   Added for the CONUS build. The prototype served one basin and needed no
   switcher; there are now 203. It is the same filter-plus-select pair as the
   lake control below it, so the rail teaches one interaction rather than two,
   and it costs two controls of height however many basins exist. */
.metaline{font-family:var(--mono);font-size:0.72rem;color:var(--muted);
  margin:var(--s2) 0 0}
/* Native optgroup labels render at the browser default weight and colour; these
   pull them into the rail's type scale so the region headers read as headers. */
#basin optgroup{font-family:var(--mono);font-size:0.75rem;color:var(--muted);
  font-style:normal;font-weight:600}
#basin option,#lake option{font-family:var(--sans);font-size:0.85rem;
  color:var(--foam);font-weight:400}
/* The lake select is collapsed like the basin one, so its options never set the
   rail's height however many lakes the basin holds. */
#lake{max-width:100%}


/* Earth Engine overlays render at B5's native 20 m grid -- chla.to_grid pins it
   with reproject(), so one block is one pixel is one chl-a value from one 5x5
   median. The browser's default bilinear scaling rounds those blocks off and
   softens their edges, which reads as finer resolution than exists.

   pixelated keeps them square, so the support of the estimate stays legible.
   Deliberately NOT applied to .leaflet-tile generally: the Esri basemap is a
   photograph and does have real detail at every zoom. */
.ee-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;   /* Firefox */
}

/* ============================================================
   2026 responsive product UI
   Green is reserved for interface actions; the full spectral ramp is
   reserved for chlorophyll-a data on Explore and Sample.
   ============================================================ */
:root{
  --abyss:#f5f8f6;
  --panel:#ffffff;
  --panel2:#f0f5f2;
  --line:#dce7e0;
  --foam:#17352a;
  --muted:#61756c;
  --hydro:#1f7a4d;
  --hydro-dark:#155c39;
  --hydro-dim:#8ab9a0;
  --lo:#278957;
  --mid:#e7bc3a;
  --bloom:#d84a3e;
  --focus:#1f7a4d;
  --r:10px;
  --r-lg:16px;
  --shadow:0 12px 36px rgba(19,53,41,.10);
  --shadow-sm:0 4px 14px rgba(19,53,41,.07);
  --data-ramp:linear-gradient(90deg,#482173 0%,#3b4cc0 18%,#2c7bb6 34%,#41b6c4 48%,#7fcdbb 59%,#c7e9b4 70%,#f2e85c 82%,#f29e2e 91%,#d73027 100%);
}

html{font-size:18px}
body{font-size:1rem;line-height:1.5;letter-spacing:-.006em}

/* Header */
.nav{position:relative;z-index:1000;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.navbar{min-height:72px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.nav .brand{font-size:1.05rem;gap:10px;justify-self:start}
.logo{width:36px;height:36px;filter:hue-rotate(-55deg) saturate(.9)}
.navlinks{margin:0;gap:8px;justify-self:center}
.navlinks a{position:relative;padding:24px 13px 22px;border-radius:0;color:#566b62;font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:600}
.navlinks a::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent}
.navlinks a:hover{background:transparent;color:var(--hydro)}
.navlinks a.nav-active{background:transparent;color:var(--hydro-dark)}
.navlinks a.nav-active::after{background:var(--hydro)}
.product-mark{justify-self:end;display:inline-flex;align-items:center;gap:8px;color:var(--hydro-dark);background:#e9f4ed;border:1px solid #cde4d5;border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.product-dot{width:7px;height:7px;border-radius:50%;background:#36a268;box-shadow:0 0 0 4px rgba(54,162,104,.13)}
.navtools,.navutil{display:none}

/* App shell */
.app{grid-template-columns:360px minmax(0,1fr);background:var(--abyss)}
.rail{padding:28px 24px 32px;border-right:1px solid var(--line);background:var(--panel)}
.rail-intro{margin-bottom:26px}
.rail-intro h1{font-size:1.55rem;line-height:1.16;letter-spacing:-.035em;margin:3px 0 8px}
.rail-intro .sub{margin:0;max-width:34ch}
.sub{font-size:.88rem;line-height:1.55}
.eyebrow{font-family:var(--sans);font-size:.7rem;line-height:1.2;letter-spacing:.14em;color:var(--hydro);font-weight:750}
.group{margin-bottom:16px}
.control-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:18px 16px 17px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}
.section-number{font-family:var(--mono);font-size:.66rem;color:var(--hydro);padding-top:1px}
.section-copy{min-width:0}
.section-copy>.eyebrow{margin-bottom:12px;color:var(--foam);font-size:.76rem;letter-spacing:.06em;text-transform:none}
label{font-size:.78rem;margin:12px 0 6px;color:#5d7067;font-weight:600}
select,input,textarea{font-size:.88rem;background:#fbfdfc;border:1px solid #cedbd3;border-radius:9px;padding:10px 11px;color:var(--foam)}
select:hover,input:hover,textarea:hover{border-color:var(--hydro-dim)}
select:focus,input:focus,textarea:focus{border-color:var(--hydro);box-shadow:0 0 0 3px rgba(31,122,77,.12)}
.row{gap:10px}
.metaline{font-size:.68rem;line-height:1.45}
.hint{font-size:.76rem;line-height:1.5}
.selection-card{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:10px 11px;border-radius:9px;background:#edf6f0;color:var(--muted);font-size:.72rem}
.selection-card strong{color:var(--foam);font-size:.82rem}

button{border-radius:10px;padding:12px 16px;font-size:.87rem;background:var(--hydro)}
button:hover{background:var(--hydro-dark)}
button:disabled{background:#9cbcac;color:#f6faf8}
.primary-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;box-shadow:0 7px 18px rgba(31,122,77,.18)}
.primary-action span:last-child{font-size:1.15rem;line-height:1}
.chip{font-size:.72rem;padding:7px 12px;color:var(--hydro);border-color:#b8d3c3}
.chip:hover{color:var(--hydro-dark);border-color:var(--hydro);background:#edf6f0}

.display-card{box-shadow:none;background:#fbfdfc}
.layers{gap:12px;margin-top:4px}
.lyr{gap:9px}
.lyr .ck{min-width:134px;font-size:.78rem}
.lyr .ck input{accent-color:var(--hydro)}
.lyr .sw{width:10px;height:10px}
.lyr .sw.chla{background:var(--data-ramp)}
.lyr input[type=range],input[type=range]{accent-color:var(--hydro)}

.advanced-card,.method-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.advanced-card summary,.method-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;cursor:pointer;color:var(--foam);font-size:.82rem;font-weight:700;list-style:none}
.advanced-card summary::-webkit-details-marker,.method-card summary::-webkit-details-marker{display:none}
.advanced-card[open] summary,.method-card[open] summary{border-bottom:1px solid var(--line)}
.advanced-card summary span:last-child,.method-card summary span:last-child{color:var(--hydro);font-size:1rem;transition:transform var(--t)}
.advanced-card[open] summary span:last-child,.method-card[open] summary span:last-child{transform:rotate(180deg)}
.advanced-body,.method-body{padding:4px 17px 17px}

/* Map and scientific results */
.main{background:var(--abyss)}
.mapwrap{flex:1 1 58%;min-height:380px;background:#dce7e0}
.maploading{background:rgba(19,44,34,.62);font-size:.8rem}
.map-legend{position:absolute;right:18px;bottom:18px;z-index:620;width:205px;padding:13px 14px 12px;background:rgba(255,255,255,.94);border:1px solid rgba(220,231,224,.95);border-radius:12px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.legend-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.72rem;font-weight:700;color:var(--foam);margin-bottom:8px}
.legend-title span:last-child{font-weight:500;color:var(--muted)}
.ramp{height:10px;width:100%;border-radius:999px;background:var(--data-ramp)}
.legend-scale{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted);font-family:var(--mono);font-size:.6rem}
.threshold-key{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--muted);font-size:.62rem}
.threshold-key span{width:14px;border-top:1.5px dashed var(--bloom)}
.threshold-key b{font-weight:600}
.coordbadge{left:16px;bottom:16px;padding:7px 10px;border-radius:9px;font-size:.68rem}

.results{flex:1 1 42%;padding:22px 26px 28px;background:var(--abyss)}
.results-heading,.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}
.results-heading h2,.section-heading h2{font-size:1.18rem;line-height:1.2;letter-spacing:-.025em;margin-top:4px}
.results-heading>.metaline{text-align:right;margin:0;max-width:45ch}
.readouts{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.readout{padding:15px 16px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);border-color:var(--line)}
.readout .k{font-family:var(--sans);font-size:.63rem;letter-spacing:.1em;font-weight:700}
.readout .v{font-size:1.55rem;letter-spacing:-.04em;margin-top:6px}
.readout .u{font-size:.67rem;line-height:1.4}
.readout.bloom{border-color:#edcbc7;background:#fffafa}
.warn{font-size:.8rem;border-radius:11px}

.tabs{gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto}
.tab{flex:0 0 auto;padding:10px 13px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font-family:var(--sans);font-size:.76rem;letter-spacing:0;text-transform:none;font-weight:650}
.tab:hover{border-color:var(--hydro-dim);color:var(--hydro)}
.tab.active{background:transparent;color:var(--hydro-dark);border-color:var(--hydro)}
.chartbox{height:320px}
.chart-card{padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}
.tablewrap{border-color:var(--line);border-radius:12px;background:#fff}
table{font-size:.74rem}
th{background:#f3f7f4;color:var(--hydro-dark);font-family:var(--sans);font-size:.68rem;letter-spacing:.02em}
th,td{padding:10px 12px}
tr:hover td{background:#f2f8f4}
.empty{font-size:.8rem;padding:28px 20px}

.sample-heading{align-items:center}
.inline-legend{width:210px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.inline-legend .legend-title{margin-bottom:6px}
.speclegend .specramp,.speclegend .ramp{background:var(--data-ramp)!important}
.chip-s.s-ok{color:#17663d}

/* Content pages */
.page{padding:52px 28px 64px;background:var(--abyss)}
.page .wrap{max-width:980px}
.page .wide-wrap{max-width:1180px}
.page h1{font-size:2.5rem;line-height:1.06;letter-spacing:-.05em;max-width:720px}
.page h2{font-size:1.35rem}
.page h3{font-family:var(--sans);font-size:.95rem;letter-spacing:-.015em;text-transform:none;color:var(--foam);margin:0}
.page p,.page li{font-size:.9rem;line-height:1.62}

.validate-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px}
.validate-hero .eyebrow{margin-bottom:11px}
.hero-copy{max-width:690px!important;margin-top:16px;color:var(--muted)!important;font-size:1rem!important}
.dataset-badge{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:15px 17px;background:#e9f4ed;border:1px solid #cde4d5;border-radius:14px;color:var(--hydro-dark)}
.dataset-badge>span:last-child{display:flex;flex-direction:column;gap:2px}
.dataset-badge small{font-size:.66rem;color:var(--muted)}
.dataset-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--hydro);color:#fff;font-weight:800}
.method-card{margin:18px 0 28px;box-shadow:var(--shadow-sm)}
.method-card summary{font-size:.86rem}
.method-body{padding:18px 20px 22px}
.method-body p:first-child{margin-top:0}
.validation-section{margin-top:40px}
.section-heading{align-items:center;margin-bottom:12px}
.section-heading .eyebrow{margin-bottom:6px}
.section-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#edf4f0;color:var(--hydro-dark);font-size:.68rem;font-weight:700;white-space:nowrap}
.section-tag.open-tag{background:#f0ebfa;color:#65459a}
.reference-section{padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.reference-section>.chart-card{margin-top:14px;box-shadow:none}
.reference-section>.readouts{grid-template-columns:repeat(5,minmax(120px,1fr))}
.fold-card{margin:18px 0 0;box-shadow:none}
.upload-section{padding:32px;border-radius:20px;background:#eaf3ed;border:1px solid #d2e4d8}
.section-lede{max-width:78ch!important;color:var(--muted)!important;margin-bottom:18px}
.upload-card{max-width:760px;padding:24px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}
.upload-card-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.upload-card-head p{font-size:.78rem;color:var(--muted);margin-top:3px}
.upload-step{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--hydro);color:#fff;font-weight:800;font-size:.78rem}
.template-link{font-weight:700;color:var(--hydro-dark)}
.file-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 14px;padding:25px;border:1.5px dashed #9fc5ae;border-radius:14px;background:#f5faf7;text-align:left;cursor:pointer}
.file-drop:hover{border-color:var(--hydro);background:#edf7f1}
.file-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-drop>span:last-of-type{display:flex;flex-direction:column;gap:2px}
.file-drop b{font-size:.84rem;color:var(--hydro-dark)}
.file-drop small{font-size:.69rem;color:var(--muted)}
.file-drop-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#dcefe3;color:var(--hydro);font-size:1.15rem;font-weight:800}
.field-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.08em}
.field-divider::before,.field-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.upload-card textarea{resize:vertical;min-height:112px}
.validation-output{margin-top:28px}
.compact-heading{margin-bottom:0}
.sources-card{margin-top:28px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 24px}
.about-grid .card{box-shadow:var(--shadow-sm)}
.about-grid .card h2{margin:9px 0 8px}
.about-grid .card p{color:var(--muted)}
.text-link{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:750;color:var(--hydro-dark);text-decoration:none}
.text-link:hover{text-decoration:underline}
.about-method{max-width:none}
.about-method h2{margin:9px 0}

/* Mobile */
@media(max-width:1100px){
  .app{grid-template-columns:330px minmax(0,1fr)}
  .readouts,.reference-section>.readouts{grid-template-columns:repeat(3,minmax(130px,1fr))}
}

@media(max-width:860px){
  html{font-size:17px}
  html,body{height:auto;min-height:100%}
  .navbar{grid-template-columns:auto 1fr auto;padding:0 18px}
  .app{display:flex;flex-direction:column}
  .rail{order:1;overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding:24px 18px}
  .main{order:2}
  .mapwrap{height:56vh;height:56dvh;min-height:340px}
  .results{overflow:visible;padding:22px 18px 30px}
  .page{overflow:visible;padding:38px 20px 52px}
  .validate-hero{align-items:flex-start;flex-direction:column;gap:20px}
  .dataset-badge{width:100%}
  .about-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .navbar{display:flex;flex-wrap:wrap;gap:8px 14px;min-height:0;padding:12px 14px 0}
  .nav .brand{font-size:.95rem}
  .nav .brand span{display:inline}
  .logo{width:31px;height:31px}
  .navlinks{order:3;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible}
  .navlinks a{text-align:center;padding:11px 4px 12px;font-size:.76rem}
  .navlinks a::after{left:10px;right:10px}
  .product-mark{margin-left:auto;padding:6px 9px;font-size:.68rem}
  .rail{padding:21px 14px 26px}
  .rail-intro h1{font-size:1.4rem}
  .control-card{grid-template-columns:25px minmax(0,1fr);padding:16px 14px;gap:8px}
  .mapwrap{height:48vh;height:48dvh;min-height:300px}
  .map-legend{right:10px;bottom:10px;width:175px;padding:10px 11px}
  .results{padding:20px 14px 28px}
  .results-heading{align-items:flex-start;flex-direction:column;gap:6px}
  .results-heading>.metaline{text-align:left}
  .readouts,.reference-section>.readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .readout{padding:13px}
  .readout .v{font-size:1.28rem}
  .readout:first-child:nth-last-child(5){grid-column:1/-1}
  .sample-heading{align-items:stretch}
  .inline-legend{width:100%}
  .tabs{margin-left:-2px;margin-right:-2px}
  .tab{padding:10px 11px}
  .chartbox{height:285px}
  .page{padding:30px 14px 44px}
  .page h1{font-size:2rem}
  .section-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .reference-section,.upload-section{padding:20px 14px;border-radius:17px;margin-left:-2px;margin-right:-2px}
  .upload-card{padding:18px 14px}
  .file-drop{padding:20px 12px}
  .dataset-badge{align-items:flex-start}
  .tablewrap{max-height:none}
}

/* ============================================================
   Explore v2 — exact visual alignment with the approved concept
   ============================================================ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.menu-button,.menu-popover{display:none}
.logo{filter:none}
.navlinks a>svg{display:none}
.primary-action svg{width:19px;height:19px;fill:#fff;stroke:none;flex:none}
.map-fullscreen{position:absolute;top:14px;right:14px;z-index:650;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:1px solid #d5dfd8;border-radius:8px;background:#fff;color:#183228;box-shadow:0 3px 12px rgba(7,28,19,.14)}
.map-fullscreen:hover{background:#f2f8f4;color:var(--hydro)}
.map-fullscreen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mapwrap:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}
.leaflet-tile-container img{outline:1px solid transparent}
.leaflet-tile{will-change:transform}
.location-grid{display:grid;grid-template-columns:1fr;gap:0}
.field{min-width:0}
.lake-search{padding-left:39px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607269' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") no-repeat 12px center/17px}
.selection-card{display:grid;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--line)}
.lake-card-icon{display:block;width:43px;height:43px}
.lake-card-icon svg{width:100%;height:100%;fill:#eaf5ed;stroke:var(--hydro);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lake-card-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.lake-card-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.result-title-line>span{color:#172a22;font-size:.8rem}
.result-title-line>strong{font-size:.86rem;color:#172a22;font-weight:650}
.results-heading .metaline{margin-top:4px}
.metric-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.metric-icon svg .dash{stroke-dasharray:3 2}

@media(min-width:861px){
  body.explore-page{padding:18px 0;background:#edf1ee;overflow:hidden}
  .explore-page .nav,.explore-page .app{width:min(calc(100% - 36px),1880px);margin-inline:auto}
  .explore-page .nav{border:1px solid #d5dfd8;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 8px 34px rgba(16,39,30,.08);overflow:visible}
  .explore-page .navbar{min-height:72px;padding:0 22px}
  .explore-page .nav .brand{font-size:1.08rem}
  .explore-page .logo{width:38px;height:38px}
  .explore-page .navlinks a{padding:23px 18px 20px;font-size:.88rem;color:#152a21}
  .explore-page .product-mark{font-size:.8rem;padding:9px 15px}
  .explore-page .app{height:calc(100vh - 108px);min-height:670px;grid-template-columns:clamp(330px,18vw,460px) minmax(0,1fr);border:1px solid #d5dfd8;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 18px 50px rgba(16,39,30,.10)}
  .explore-page .rail{padding:0;background:#fff}
  .explore-page .control-card{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;margin:0;padding:21px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none}
  .explore-page .section-number{display:grid;place-items:center;width:22px;height:22px;padding:0;margin:0;border-radius:50%;background:var(--hydro);color:#fff;font:750 .68rem/1 var(--sans)}
  .explore-page .section-copy>.eyebrow{margin:2px 0 13px;font-size:.85rem;font-weight:800}
  .explore-page label{font-size:.8rem;margin:11px 0 5px;color:#20362d}
  .explore-page select,.explore-page input{min-height:42px;font-size:.84rem;background:#fff}
  .explore-page .lake-search{margin-bottom:2px}
  .explore-page .metaline{margin:5px 0 0}
  .explore-page #lakeNote{display:none}
  .explore-page .selection-card{margin-top:12px}
  .explore-page .primary-action{justify-content:center;min-height:47px;margin-top:15px}
  .explore-page .hint{margin-top:8px}
  .explore-page .display-card{background:#fff}
  .explore-page .layers{gap:13px;margin-top:2px}
  .explore-page .lyr{min-height:31px}
  .explore-page .lyr .ck{min-width:190px;font-size:.79rem;color:#23372f}
  .explore-page .lyr .sw{width:12px;height:12px}
  .explore-page .advanced-card{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff}
  .explore-page .advanced-card summary{justify-content:flex-start;min-height:61px;padding:18px;gap:12px;font-size:.85rem}
  .explore-page .advanced-card summary .section-number{flex:0 0 22px;color:#fff;font-size:.68rem}
  .explore-page .advanced-card .advanced-chevron{margin-left:auto}
  .explore-page .advanced-body{padding:2px 22px 22px 52px}
  .explore-page .main{background:#fff}
  .explore-page .mapwrap{flex:0 0 49%;min-height:390px;border:8px solid #fff;border-bottom:0;border-radius:13px 13px 0 0;overflow:hidden}
  .explore-page .leaflet-control-zoom{margin:14px 0 0 14px;border:0;box-shadow:0 3px 12px rgba(7,28,19,.16)}
  .explore-page .leaflet-control-zoom a{width:36px;height:36px;line-height:35px;font-size:23px;color:#182c23}
  .explore-page .leaflet-control-layers{margin-top:10px;margin-left:14px;border:0;border-radius:7px;box-shadow:0 3px 12px rgba(7,28,19,.16)}
  .explore-page .map-fullscreen{top:22px;right:22px}
  .explore-page .map-legend{right:26px;bottom:24px;width:260px;padding:18px 18px 15px;border-radius:14px}
  .explore-page .legend-title{font-size:.83rem;margin-bottom:10px}
  .explore-page .ramp{height:15px}
  .explore-page .legend-scale{font-size:.7rem;margin-top:6px}
  .explore-page .threshold-key{margin-top:12px;font-size:.68rem}
  .explore-page .results{flex:1 1 51%;padding:14px 18px 22px;background:#fff;border-top:1px solid var(--line)}
  .explore-page .results-heading{margin-bottom:13px}
  .explore-page .results-heading h2{font-size:1.11rem}
  .explore-page .readouts{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}
  .explore-page .readout{min-height:88px;padding:13px 15px;gap:12px;border-radius:10px;box-shadow:0 2px 8px rgba(16,39,30,.035)}
  .explore-page .readout .v{font-size:1.38rem;margin-top:3px}
  .explore-page .readout .u{font-size:.63rem}
  .explore-page .metric-icon{width:44px;height:44px}
  .explore-page .tabs{margin-bottom:11px}
  .explore-page .chartbox{height:235px}
  .explore-page .chart-card{padding:12px 14px}
}

@media(min-width:1800px) and (min-height:900px){
  .explore-page{font-size:20px}
  .explore-page .app{grid-template-columns:460px minmax(0,1fr)}
  .explore-page .mapwrap{flex-basis:51%}
  .explore-page .results{flex-basis:49%}
}

@media(max-width:860px){
  body.explore-page{padding-bottom:76px;background:#f3f6f4}
  .explore-page .nav{position:sticky;top:0;z-index:1800;background:#fff}
  .explore-page .navbar{display:flex;min-height:64px;padding:9px 14px;gap:10px;flex-wrap:nowrap}
  .explore-page .nav .brand{font-size:1.02rem}
  .explore-page .logo{width:35px;height:35px}
  .explore-page .product-mark{margin-left:auto;font-size:.67rem;padding:6px 9px}
  .explore-page .menu-button{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;margin:0;padding:0;border-radius:8px;background:transparent;color:#1b3228}
  .explore-page .menu-button:hover{background:#edf5f0;color:var(--hydro)}
  .explore-page .menu-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .explore-page .menu-popover{position:absolute;top:58px;right:10px;z-index:2100;width:170px;padding:7px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(16,39,30,.16)}
  .explore-page .menu-popover:not([hidden]){display:grid}
  .explore-page .menu-popover a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:#1b3228;text-decoration:none;font-size:.78rem;font-weight:650}
  .explore-page .menu-popover a:hover{background:#edf6f0;color:var(--hydro)}
  .explore-page .menu-popover svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .explore-page .navlinks{position:fixed;left:0;right:0;bottom:0;z-index:2000;display:grid;grid-template-columns:repeat(4,1fr);width:auto;padding:5px 7px calc(5px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,39,30,.08)}
  .explore-page .navlinks a{display:flex;flex-direction:column;gap:2px;padding:6px 3px 5px;font-size:.64rem}
  .explore-page .navlinks a>svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .explore-page .navlinks a::after{left:18%;right:18%;bottom:0;height:2px}
  .explore-page .app{display:flex;width:100%;margin:0;background:#f3f6f4}
  .explore-page .rail{order:1;margin:8px 10px 0;padding:7px;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:visible}
  .explore-page .control-card{display:block;margin:0;padding:6px;border:0;border-radius:0;background:#fff;box-shadow:none}
  .explore-page .control-card+.control-card{padding-top:2px}
  .explore-page .control-card>.section-number,.explore-page .section-copy>.eyebrow{display:none}
  .explore-page .location-grid{grid-template-columns:1fr 1fr;gap:10px}
  .explore-page .lake-search{min-height:38px;margin-bottom:4px;font-size:.74rem}
  .explore-page label{margin:5px 0 3px;font-size:.65rem;color:#1a2d25}
  .explore-page select,.explore-page input{min-height:36px;padding:8px 9px;font-size:.69rem;border-radius:7px;background:#fff}
  .explore-page .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .explore-page .primary-action{min-height:39px;margin-top:8px;padding:8px 12px;justify-content:center;font-size:.77rem;border-radius:7px}
  .explore-page .primary-action svg{width:17px;height:17px}
  .explore-page #basinMeta,.explore-page #lakeNote,.explore-page .selection-card,.explore-page .hint,.explore-page .display-card,.explore-page .advanced-card{display:none}
  .explore-page .main{order:2;background:#f3f6f4}
  .explore-page .mapwrap{height:43vh;height:43dvh;min-height:285px;margin:8px 10px 0;border:0;border-radius:7px;overflow:hidden}
  .explore-page .leaflet-control-zoom{margin:9px 0 0 9px}
  .explore-page .leaflet-control-zoom a{width:31px;height:31px;line-height:30px;font-size:20px}
  .explore-page .leaflet-control-layers{margin-top:8px;margin-left:9px}
  .explore-page .map-fullscreen{top:9px;right:9px;width:34px;height:34px;border-radius:6px}
  .explore-page .map-fullscreen svg{width:18px;height:18px}
  .explore-page .map-legend{right:8px;bottom:8px;width:170px;padding:9px 10px 8px;border-radius:9px}
  .explore-page .legend-title{font-size:.57rem;margin-bottom:5px}
  .explore-page .ramp{height:9px}
  .explore-page .legend-scale{font-size:.51rem;margin-top:3px}
  .explore-page .threshold-key{font-size:.49rem;margin-top:6px;gap:5px}
  .explore-page .results{padding:8px 10px 18px;background:#fff;overflow:visible}
  .explore-page .results-heading{margin-bottom:8px}
  .explore-page .result-title-line{gap:7px}
  .explore-page .result-title-line h2{font-size:.88rem}
  .explore-page .result-title-line>strong{font-size:.66rem}
  .explore-page .results-heading .metaline{font-size:.59rem}
  .explore-page .readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}
  .explore-page .readout{display:flex;align-items:center;gap:8px;min-height:78px;padding:9px;border-radius:8px;box-shadow:none}
  .explore-page .metric-icon{width:34px;height:34px;margin:0}
  .explore-page .metric-icon svg{width:22px;height:22px}
  .explore-page .readout .k{font-size:.52rem;letter-spacing:.03em;text-transform:none}
  .explore-page .readout .v{font-size:1.02rem;margin-top:1px}
  .explore-page .readout .v small{font-size:.52rem}
  .explore-page .readout .u{font-size:.52rem;line-height:1.25}
  .explore-page .tabs{justify-content:space-between;gap:0;margin-bottom:6px;overflow:visible}
  .explore-page .tab{flex:1;padding:8px 3px;font-size:.62rem;text-align:center}
  .explore-page .chartbox{height:210px}
  .explore-page .chart-card{padding:8px 5px;border-radius:8px;box-shadow:none}
}

/* ============================================================
   Approved concept implementation
   Green carries product actions; the spectral ramp is data only.
   ============================================================ */
:root{
  --abyss:#f4f7f5;--panel:#fff;--panel2:#eef4f0;--line:#d7e2db;
  --foam:#10271e;--muted:#607269;--hydro:#17834f;--hydro-dark:#0e633a;
  --hydro-dim:#83b99a;--lo:#248858;--mid:#e4ba35;--bloom:#dc4d3f;
  --focus:#17834f;--r:10px;--r-lg:16px;
  --sans:"Manrope","Space Grotesk",system-ui,-apple-system,sans-serif;
  --data-ramp:linear-gradient(90deg,#4b1d76 0%,#3f49b7 17%,#2474b7 32%,#2cb7b0 48%,#70c66b 62%,#d2dd43 76%,#f4bd32 86%,#ef7d2d 93%,#d83232 100%);
}
html{font-size:17px}
body{line-height:1.5;letter-spacing:-.008em}

/* navigation */
.navbar{min-height:76px;padding:0 34px;grid-template-columns:1fr auto 1fr}
.nav .brand{font-size:1.08rem;font-weight:800;letter-spacing:-.025em}
.navlinks a{display:flex;align-items:center;gap:8px;padding:25px 16px 22px;font-size:.85rem}
.navlinks a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.product-mark{font-size:.74rem;padding:8px 13px;background:#eef8f2;border-color:#c9e4d4}
.product-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.product-dot{display:none}

/* desktop app frame */
.app{grid-template-columns:370px minmax(0,1fr);min-height:0;background:var(--abyss)}
.rail{padding:28px 24px 34px;overflow-y:auto}
.rail-intro h1{font-size:1.65rem}
.control-card{padding:18px 16px;border-radius:15px;box-shadow:0 3px 13px rgba(16,39,30,.045)}
.section-copy>.eyebrow{font-size:.79rem;font-weight:750}
label{font-size:.8rem}
select,input,textarea{min-height:43px;font-size:.85rem}
.primary-action{min-height:48px;font-weight:750;font-size:.88rem}
.advanced-card summary{min-height:52px}
.main{min-height:0}
.mapwrap{min-height:430px;flex:1 1 57%;border:14px solid var(--abyss);border-bottom:0;border-radius:26px 26px 0 0;overflow:hidden}
.map-legend{right:24px;bottom:22px;width:232px;padding:15px 16px}
.legend-title{font-size:.75rem}
.ramp{height:12px;background:var(--data-ramp)}
.results{flex:1 1 43%;padding:25px 28px 30px;border-top:0;overflow-y:auto}
.results-heading h2{font-size:1.28rem}
.results-heading>.metaline{font-size:.73rem}
.readouts{grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.readout{display:flex;align-items:center;gap:13px;min-height:104px;padding:16px 17px;border:1px solid var(--line);box-shadow:0 3px 12px rgba(16,39,30,.045)}
.readout .k{font-size:.67rem;color:#425a4f;letter-spacing:.08em}
.readout .v{font-size:1.6rem;line-height:1.15;color:var(--foam);font-weight:750}
.readout .v small{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:0}
.readout .u{font-size:.68rem;color:var(--muted)}
.metric-icon{display:grid;place-items:center;flex:0 0 auto;width:43px;height:43px;border-radius:50%;background:#e5f2ea;color:var(--hydro);font-size:1.2rem}
.tabs{gap:16px}
.tab{font-size:.79rem;padding:11px 8px}
.chart-card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:15px}
.chartbox{height:300px}
.science-note{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:.69rem;color:var(--muted)}

/* Sample workspace */
.sample-app{grid-template-columns:370px minmax(0,1fr)}
.sample-main{display:flex;flex-direction:column}
.sample-mapwrap{flex:0 0 53%;min-height:420px}
.sample-results{flex:1 1 47%}
.sample-readouts{grid-template-columns:repeat(5,minmax(125px,1fr))}
.sample-readouts .readout{display:block;min-height:96px}
.method-options{display:grid;gap:7px}
.method-option{display:flex;align-items:flex-start;gap:9px;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fbfdfc;cursor:pointer}
.method-option:has(input:checked){border-color:#86bca0;background:#edf7f1}
.method-option input{width:auto;min-height:auto;margin-top:3px;accent-color:var(--hydro)}
.method-option span{display:flex;flex-direction:column;gap:1px}
.method-option b{font-size:.78rem;color:var(--foam)}
.method-option small{font-size:.66rem;color:var(--muted)}
.compact-drop{margin:10px 0;padding:14px 9px}
.sample-point-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:.7rem;color:var(--muted)}
.danger-chip{width:auto;margin:0;color:#a43c35;border-color:#efc8c4}
.danger-chip:hover{color:#842a24;background:#fff2f1;border-color:#db8279}
.map-tools{position:absolute;top:16px;right:16px;z-index:650}
.map-tools button{width:42px;height:42px;margin:0;padding:0;border:1px solid #d7e2db;background:#fff;color:var(--foam);box-shadow:var(--shadow-sm);font-size:1.2rem}
.map-tools button:hover{background:#edf7f1;color:var(--hydro)}
.sample-map-legend{left:20px;right:auto}
.sample-marker-shell{background:transparent;border:0}
.sample-marker-shell span{display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;border-radius:50%;background:var(--marker);color:#fff;font:800 11px/1 var(--sans);box-shadow:0 3px 10px rgba(0,0,0,.34)}
.summary-actions{display:flex;align-items:center;gap:14px}
.summary-actions .metaline{margin:0}
.summary-actions .chip{width:auto;margin:0;white-space:nowrap}
.point-dot{display:inline-block;width:9px;height:9px;margin-right:7px;border:2px solid var(--dot);border-radius:50%;background:var(--dot)}
.range{color:var(--muted);font-size:.68rem;white-space:nowrap}
.protocol li span{min-width:6.4rem}

/* Validate stays map-free and gets a clearer analysis canvas. */
.validate-page{background:linear-gradient(180deg,#f8fbf9 0,#f4f7f5 280px)}
.validate-hero{padding:10px 0 12px}
.reference-section{border-radius:22px;box-shadow:0 10px 36px rgba(16,39,30,.07)}
.reference-section>.readouts{grid-template-columns:repeat(5,minmax(120px,1fr))}
.reference-section .readout{display:block;min-height:98px}
.upload-section{background:#e8f3ec;border-color:#cfe2d6}
.upload-card{max-width:none}
.validation-output>.chartbox{padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px}

@media(max-width:1180px){
  .app,.sample-app{grid-template-columns:340px minmax(0,1fr)}
  .readouts{grid-template-columns:repeat(2,minmax(150px,1fr))}
  .sample-readouts,.reference-section>.readouts{grid-template-columns:repeat(3,minmax(125px,1fr))}
}

@media(max-width:860px){
  html{font-size:17px}
  body{padding-bottom:0}
  .navbar{min-height:68px;padding:0 18px}
  .app,.sample-app{display:flex;flex-direction:column}
  .rail{order:1;padding:22px 18px 26px;overflow:visible}
  .main{order:2}
  .mapwrap,.sample-mapwrap{flex:none;height:54vh;height:54dvh;min-height:360px;border-width:10px;border-radius:22px}
  .results{overflow:visible}
  .page{overflow:visible}
}

@media(max-width:620px){
  body{padding-bottom:72px}
  .navbar{display:flex;min-height:64px;padding:9px 14px;flex-wrap:nowrap}
  .nav .brand{font-size:1rem}
  .navlinks{position:fixed;left:0;right:0;bottom:0;z-index:2000;order:initial;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:5px 8px calc(5px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 25px rgba(16,39,30,.08);backdrop-filter:blur(12px)}
  .navlinks a{display:flex;flex-direction:column;gap:2px;padding:6px 3px 5px;font-size:.63rem;border-radius:9px}
  .navlinks a::after{left:18%;right:18%;bottom:0;height:2px}
  .navlinks a svg{width:20px;height:20px}
  .navlinks a:hover{background:#f2f7f4}
  .product-mark{margin-left:auto;font-size:.64rem;padding:6px 9px}
  .rail{padding:20px 14px 24px}
  .rail-intro{margin-bottom:18px}
  .rail-intro h1{font-size:1.45rem}
  .control-card{grid-template-columns:24px minmax(0,1fr);padding:15px 13px;gap:7px}
  .mapwrap,.sample-mapwrap{height:50vh;height:50dvh;min-height:330px;border:8px solid var(--abyss);border-radius:18px}
  .map-legend{right:10px;bottom:10px;width:185px}
  .sample-map-legend{left:10px;right:auto}
  .results{padding:20px 14px 27px}
  .readouts,.sample-readouts,.reference-section>.readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .readout,.sample-readouts .readout{display:block;min-height:92px;padding:13px}
  .readout .v{font-size:1.35rem}
  .metric-icon{width:34px;height:34px;margin-bottom:8px;font-size:.95rem}
  .summary-actions{width:100%;justify-content:space-between}
  .sample-summary-heading{gap:12px}
  .tablewrap{overflow-x:auto}
  table{min-width:660px}
  .tabs{gap:3px}
  .chartbox{height:280px}
  .page{padding:30px 14px 42px}
  .page h1{font-size:2.1rem}
  .validate-hero{gap:18px}
  .reference-section,.upload-section{padding:18px 13px}
  .reference-section .readout{min-height:84px}
}

/* Keep Explore-specific primitives above later shared component defaults. */
.explore-page .logo{filter:none}
.explore-page .selection-card{display:grid;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--line)}
.explore-page .lake-card-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.explore-page .metric-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.explore-page .metric-icon svg .dash{stroke-dasharray:3 2}
.explore-page .primary-action svg{width:19px;height:19px;fill:#fff;stroke:none;flex:none}
.explore-page .ready-readout{grid-column:1/-1;display:flex;align-items:center;min-height:76px}
.explore-page .ready-readout .v{font-size:1rem;letter-spacing:-.02em}
.explore-page .lake-search{padding-left:39px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607269' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") no-repeat 12px center/17px}
.explore-page .map-basemap{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:5px;background:#fff;color:#183228;box-shadow:0 3px 12px rgba(7,28,19,.16)}
.explore-page .map-basemap:hover{background:#f2f8f4;color:var(--hydro)}
.explore-page .map-basemap svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:861px){.explore-page .app{grid-template-columns:clamp(380px,24vw,460px) minmax(0,1fr)}}
@media(max-width:860px){.explore-page .map-basemap{width:31px;height:31px}.explore-page .leaflet-top.leaflet-left .leaflet-control{margin-left:9px}}
@media(max-width:620px){
  .explore-page .selection-card{display:none}
  .explore-page .map-basemap{display:none}
  .explore-page .mapwrap{height:48vw;min-height:185px;max-height:230px}
}

/* Waterbody product selector */
.waterbody-switch{justify-self:end;display:flex;align-items:center;gap:6px}
.waterbody-button{display:inline-flex;align-items:center;gap:7px;min-height:37px;padding:8px 12px;border:1px solid #cfe2d6;border-radius:999px;background:#fff;color:#50665b;text-decoration:none;font-size:.73rem;font-weight:750;white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.waterbody-button:hover{background:#f0f7f2;border-color:#91bca0;color:var(--hydro-dark);transform:translateY(-1px)}
.waterbody-button.active{background:#e8f5ec;border-color:#afd4bd;color:var(--hydro-dark)}
.waterbody-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* River and Estuary holding pages */
.construction-page{min-height:100%;background:radial-gradient(circle at 50% 28%,#f8fcf9 0,#eef5f1 46%,#e7efea 100%)}
.construction-wrap{display:grid;place-items:center;padding:64px 24px}
.construction-card{width:min(100%,680px);padding:58px 54px;border:1px solid #d4e3d9;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(16,39,30,.11);text-align:center}
.construction-icon{display:grid;place-items:center;width:92px;height:92px;margin:0 auto 24px;border-radius:28px;background:#e6f4eb;color:var(--hydro)}
.construction-icon svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.construction-card .eyebrow{margin-bottom:13px}
.construction-card h1{font-size:2.25rem;line-height:1.08;letter-spacing:-.045em;color:var(--foam)}
.construction-copy{max-width:50ch;margin:18px auto 0;color:var(--muted);font-size:1rem;line-height:1.65}
.construction-status{display:inline-flex;align-items:center;gap:9px;margin-top:25px;padding:8px 13px;border-radius:999px;background:#fff7e6;color:#795611;font-size:.74rem;font-weight:750}
.construction-status span{width:8px;height:8px;border-radius:50%;background:#e1a82f;box-shadow:0 0 0 4px rgba(225,168,47,.14)}
.construction-action{display:inline-flex;align-items:center;justify-content:center;min-height:47px;margin-top:28px;padding:11px 18px;border-radius:11px;background:var(--hydro);color:#fff;text-decoration:none;font-size:.86rem;font-weight:750;box-shadow:0 8px 20px rgba(23,131,79,.18)}
.construction-action:hover{background:var(--hydro-dark)}

@media(max-width:1180px) and (min-width:861px){
  .waterbody-button{padding:8px 10px}
  .waterbody-button svg{display:none}
}
@media(max-width:860px){
  .waterbody-switch{margin-left:auto;gap:4px}
  .waterbody-button{min-height:34px;padding:6px 9px;font-size:.65rem}
  .waterbody-button svg{width:14px;height:14px}
  .construction-wrap{padding:42px 18px}
}
@media(max-width:620px){
  .explore-page .navbar,.construction-page .navbar{gap:7px}
  .waterbody-switch{gap:3px}
  .waterbody-button{min-height:32px;padding:5px 7px;font-size:.59rem}
  .waterbody-button svg{display:none}
  .construction-page{padding-bottom:72px}
  .construction-page .navlinks{left:0;right:0;width:100vw;max-width:none;justify-self:stretch}
  .construction-page .navlinks a>svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .construction-card{padding:38px 20px;border-radius:21px}
  .construction-icon{width:76px;height:76px;border-radius:23px}
  .construction-icon svg{width:48px;height:48px}
  .construction-card h1{font-size:1.75rem}
  .construction-copy{font-size:.88rem}
}

/* ============================================================
   River page — reuses the Bloom Mapper green system. The chl-a
   ramp here is its own green->red class scale (config.RIVER_*),
   rendered inline by river.js; CSS only frames the legend.
   ============================================================ */
.river-page{min-height:100%;background:var(--abyss)}
.river-app{grid-template-columns:360px minmax(0,1fr);min-height:0}
.river-app .rail{padding:0;background:#fff;overflow-y:auto}
.river-app .control-card{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;
  margin:0;padding:20px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none}
.river-app .section-number{display:grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;background:var(--hydro);color:#fff;font:750 .68rem/1 var(--sans)}
.river-app .section-copy>.eyebrow{margin:2px 0 12px;font-size:.86rem;font-weight:800;color:var(--foam);letter-spacing:0;text-transform:none}

.huc-cascade{display:grid;grid-template-columns:1fr;gap:0;margin-top:4px}
.huc-cascade .field label{font-size:.72rem;margin:9px 0 4px}
.river-basin-card{display:block;margin-top:14px;padding:13px 14px;background:#eff7f2;border:1px solid #d5e6dc;border-radius:11px}
.basin-facts>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #dce8e1;font-size:.76rem}
.basin-facts>div:last-child{border-bottom:0}
.basin-facts span{color:var(--muted)}
.basin-facts strong{color:var(--foam);text-align:right}

.segmented{display:flex;gap:6px;margin-top:4px}
.segmented .seg{width:auto;flex:1;margin:0;padding:9px 4px;border:1px solid #cddbd2;border-radius:9px;background:#fbfdfc;color:var(--muted);font-size:.76rem;font-weight:650;box-shadow:none}
.segmented .seg:hover{border-color:var(--hydro-dim);color:var(--hydro-dark);background:#f0f7f2}
.segmented .seg.active{background:#e6f4ec;border-color:#a9d3ba;color:var(--hydro-dark)}
.river-advanced{margin-top:14px}
.method-note{margin-top:12px;padding:12px 13px;background:#f4f8f6;border:1px solid var(--line);border-radius:11px;font-size:.75rem;line-height:1.5;color:var(--muted)}
.method-note .text-link{margin-top:8px;font-size:.76rem}

/* main column */
.river-main{display:flex;flex-direction:column;min-width:0;background:var(--abyss);overflow-y:auto;padding:22px 26px 28px}
.river-summary-bar{margin-bottom:16px}
.summary-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.summary-title h2{font-size:1.24rem;letter-spacing:-.025em}
.summary-meta{color:var(--muted);font-size:.8rem}
.river-readouts{grid-template-columns:repeat(5,minmax(140px,1fr));gap:11px;margin-bottom:18px}
.river-readouts .readout{display:block;min-height:0;padding:14px 16px}
.river-readouts .readout .v small{font-size:.7rem;color:var(--muted);font-weight:600}
.river-readouts .readout .u{font-size:.66rem}

/* map + reach panel */
.river-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-bottom:18px}
.river-mapwrap{position:relative;height:52vh;min-height:400px;border:1px solid var(--line);border-radius:16px;overflow:hidden;flex:none}
.river-mapwrap #map{position:absolute;inset:0}
.river-legend{width:230px}
.river-ramp{height:12px;border-radius:6px}
.river-legend .legend-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);font-size:.58rem;color:var(--muted)}
.legend-toggle{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:.7rem;color:var(--foam)}
.legend-toggle input{width:auto;min-height:auto;accent-color:var(--hydro)}
.legend-states{display:flex;gap:14px;margin-top:8px;font-size:.64rem;color:var(--muted)}
.legend-states span{display:flex;align-items:center;gap:5px}
.legend-states i{width:14px;height:0;border-top:2px dashed #9aa6a0;display:inline-block}
.reach-hover .leaflet-popup-content{font-size:.72rem;line-height:1.5;margin:9px 11px}
.reach-hover .leaflet-popup-content-wrapper{border-radius:9px}

.river-reach-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 17px;box-shadow:var(--shadow-sm);align-self:start;max-height:52vh;overflow-y:auto}
.reach-panel-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.reach-panel-head .eyebrow{font-size:.68rem;font-weight:750;color:var(--hydro)}
.reach-panel-head strong{display:block;font-size:1rem;color:var(--foam);margin-top:2px}
.reach-id{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:2px}
.reach-close{width:auto;margin:0;padding:2px 8px;background:transparent;color:var(--muted);font-size:.9rem}
.reach-close:hover{background:var(--panel2);color:var(--foam)}
.reach-facts{margin:14px 0 4px}
.reach-facts>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.74rem}
.reach-facts dt{color:var(--muted);margin:0}
.reach-facts dd{margin:0;color:var(--foam);font-weight:600;text-align:right}
.reach-topo{display:flex;gap:8px;margin-top:12px}
.reach-topo .chip{flex:1;text-align:center}
.chip:disabled{opacity:.5;cursor:not-allowed}
.reach-profile-btn{width:100%;margin-top:9px;text-align:center}

/* analysis tabs */
.river-analysis{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 18px 18px;box-shadow:var(--shadow-sm)}
.river-tabs{gap:18px;border-bottom:1px solid var(--line);margin-bottom:16px;padding-top:8px}
.network-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.about-view h3{font-size:.95rem;margin-bottom:8px}
.about-view p{font-size:.82rem;color:var(--foam);opacity:.92;margin-bottom:8px;max-width:60ch}
.about-view p.muted{color:var(--muted);opacity:1;font-size:.76rem}
.dist-card{padding:14px 16px}
.dist-card .compact-heading h3{font-size:.85rem}
.dist-foot{display:flex;gap:24px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dist-foot>div{display:flex;flex-direction:column;gap:1px}
.dist-foot span{font-size:.64rem;color:var(--muted)}
.dist-foot strong{font-size:1.1rem;color:var(--foam);letter-spacing:-.02em}
.dist-foot small{font-size:.6rem;color:var(--muted)}
.chartbox-tall{height:380px}
.dist-switch{display:flex;gap:6px}
.dist-switch .chip{width:auto;margin:0;padding:6px 11px;font-size:.7rem}
.dist-switch .chip.active{background:#e6f4ec;border-color:#a9d3ba;color:var(--hydro-dark)}

.table-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.table-toolbar .lake-search{flex:1;margin:0}
.table-toolbar .chip{width:auto;margin:0}
.river-analysis td.tdl,.river-analysis th.thl{text-align:left}
tr.row-sel td{background:#e6f4ec!important;box-shadow:inset 3px 0 0 var(--hydro)}
.table-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.table-pager .chip{width:auto;margin:0;padding:6px 12px}
.table-pager .metaline{margin:0}

.q-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.q-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.66rem;font-weight:700}
.q-good{background:#2a9d5c}.q-tag.q-good{background:#e4f3ea;color:#1a6f42}
.q-moderate{background:#e4ba35}.q-tag.q-moderate{background:#fbf1d4;color:#8a6410}
.q-low{background:#dc4d3f}.q-tag.q-low{background:#fbe5e2;color:#a5322a}
.q-not_observable{background:#9aa6a0}.q-tag.q-not_observable{background:#eef2f0;color:#5f6f68}

.river-disclaimer{margin-top:16px;font-size:.72rem;color:var(--muted);line-height:1.55;max-width:110ch}

/* full-frame desktop, matching the Explore shell */
@media(min-width:861px){
  body.river-page{padding:18px 0;background:#edf1ee;overflow:hidden}
  .river-page .nav,.river-page .app{width:min(calc(100% - 36px),1920px);margin-inline:auto}
  .river-page .nav{border:1px solid #d5dfd8;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 8px 34px rgba(16,39,30,.08)}
  .river-page .app{height:calc(100vh - 108px);min-height:680px;grid-template-columns:clamp(340px,20vw,400px) minmax(0,1fr);border:1px solid #d5dfd8;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 18px 50px rgba(16,39,30,.10)}
}
@media(max-width:1200px){
  .river-body{grid-template-columns:minmax(0,1fr)}
  .river-reach-panel{max-height:none}
  .network-grid{grid-template-columns:minmax(0,1fr)}
  .river-readouts{grid-template-columns:repeat(3,minmax(130px,1fr))}
}
@media(max-width:860px){
  .river-app{display:flex;flex-direction:column}
  .river-app .rail{order:1;border-right:0;border-bottom:1px solid var(--line)}
  .river-main{order:2;overflow:visible;padding:20px 16px 28px}
  .river-mapwrap{height:56vh;min-height:340px}
  .river-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .river-tabs{gap:10px;overflow-x:auto}
}

/* River legend: bloom-threshold marker (lake-style) */
.river-ramp{position:relative}
.bloom-marker{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed #10271e;pointer-events:none}
.bloom-thr-line{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.64rem;color:var(--muted)}
.bloom-thr-swatch{width:16px;height:0;border-top:2px dashed #10271e;display:inline-block}

/* River rail: Map Layers card (reuses lake .ck/.sw) */
.layer-toggles{display:grid;grid-template-columns:1fr;gap:2px;margin-top:4px}
.layer-toggles .ck{margin-top:8px}
.layer-toggles input[type=range]{width:100%;margin:2px 0 4px}
.river-mapwrap .map-basemap,.river-mapwrap .map-fullscreen{z-index:500}