/* Lake detail — the component's tokens aliased onto the app design system
   (static/css/style.css :root). --accent is intentionally NOT redefined (same
   name + value as the app's). In file:// scaffold preview, build_lake_page.py
   injects a fallback :root with these app tokens so it still renders standalone. */
.lake-detail{--bg:var(--bg-deep);--card:var(--bg-card);--elev:var(--bg-elevated);
--border:var(--border-light);--text:var(--text-bright);--muted:var(--text-muted);
--faint:var(--text-faint);--green:var(--accent-green);--yellow:var(--accent-yellow);
font-family:var(--font);line-height:1.5;color:var(--text)}
.lake-detail *{box-sizing:border-box}
.lake-detail a{color:inherit;text-decoration:none}
.wrap{max-width:none;margin:0;padding:0 0 48px}   /* full-width — no horizontal bounds (mockup) */
#lakemap .leaflet-tile-pane{filter:none}   /* aerial must not get the app's dark invert */
/* Layout: full-width header (.lake-head) + map card + ticker strips, then a 2-column
   band (.lake-cols) — Fish list LEFT, ecology reader + trend RIGHT (the mockup layout)
   — with the Life galleries full-width below. Header/reader styles live in the pass
   below. The reader is fixed-height, so the two columns stay height-balanced. */
.lake-detail .wrap>#overview{margin:0 0 20px}   /* map card sits right under the header */
.lake-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start;margin:6px 0 0}
.lake-col-fish,.lake-col-eco{min-width:0}
.lake-col-fish>.block:first-child,.lake-col-eco>.block:first-child{margin-top:0}
/* responsive rules are consolidated at the end of this file (so they reliably
   override the presentation-pass rules that come after this point) */
.topnav{position:sticky;top:48px;z-index:900;background:rgba(8,12,18,.86);backdrop-filter:blur(10px);
border-bottom:1px solid var(--border)}
.topnav-inner{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;height:46px}
.topnav-name{font-weight:800;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav-links a{font-size:.8rem;color:var(--muted);padding:5px 10px;border-radius:8px;white-space:nowrap}
.topnav-links a:hover{color:var(--text);background:var(--elev)}
.topnav-links a.active{color:var(--accent);background:rgba(88,166,255,.1)}
.hero{position:relative;background-size:cover;background-position:center;min-height:260px;display:flex;align-items:flex-end}
.hero-inner{max-width:1080px;margin:0 auto;width:100%;padding:24px 20px}
.crumb{font-size:.8rem;color:var(--muted);margin-bottom:8px}.crumb a:hover{color:var(--accent)}
.hero h1{font-size:2.6rem;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.hero-meta{color:#cdd9e5;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-meta strong{color:#fff}.dot{color:var(--faint)}
.prov{margin-top:10px;font-size:.72rem;color:var(--muted);background:rgba(0,0,0,.35);
display:inline-block;padding:4px 9px;border-radius:6px;border:1px solid var(--border)}
.hero-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.hero-badge.ok{background:rgba(63,185,80,.18);color:var(--green)}.hero-badge.warn{background:rgba(210,153,34,.18);color:var(--yellow)}
/* --- control-room card (map + rail + notable catches) --- */
.cr-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:22px 0}
.cr-main{display:grid;grid-template-columns:72% 1fr;align-items:stretch;height:560px}
.cr-map{display:flex;flex-direction:column;padding:14px 14px 14px 16px;border-right:1px solid var(--border);min-height:0;min-width:0}
.cr-map-wrap{position:relative;flex:1;min-height:0;min-width:0;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
/* map as a full-width dedicated band (the mockup gives the map its own horizontal space) */
/* map as a FULL-BLEED band — edge to edge (calc negative margins cancel the page
   padding at any breakpoint), square corners, no border, toolbar top-right */
.cr-map-band{margin:2px calc(50% - 50vw) 26px}
.cr-map-band .cr-card{margin:0;border:0;border-radius:0}
.cr-map-band .cr-map{position:relative;border-right:0;height:480px;padding:0}
.cr-map-band .cr-map-wrap{border-radius:0;border:0}
/* glass control panel + depth legend floated at the map's VERTICAL CENTRE (left / right) */
.cr-map-band .cr-map>.map-panel{top:50%;left:16px;transform:translateY(-50%)}
.cr-map-band .cr-map-wrap .map-legend{right:16px;left:auto;top:50%;bottom:auto;transform:translateY(-50%)}
.map-panel{position:absolute;z-index:600;width:200px;padding:12px;border-radius:12px;
  background:rgba(9,13,18,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.11);box-shadow:0 10px 34px -10px rgba(0,0,0,.65)}
.mp-h{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:2px 2px 9px}
.map-panel .seg{display:flex;flex-direction:column;gap:2px;border:0;border-radius:0;overflow:visible;background:none}
.map-panel .seg button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;border-radius:8px;
  background:none;border:0;color:#c9d3de;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .15s}
.map-panel .seg button:hover{background:rgba(255,255,255,.06)}
.map-panel .seg button.on{background:rgba(88,166,255,.2);color:#fff}
.map-panel .seg button .ov-sw{width:16px;height:16px;border-radius:4px;margin:0;flex:none;border:1px solid rgba(255,255,255,.15)}
.ov-sw.off{background:rgba(255,255,255,.09)}
.mp-op{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 2px 3px;font-size:.7rem;color:var(--muted)}
.mp-op input[type=range]{width:98px;accent-color:var(--accent);margin:0}
.mp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.09)}
.mp-act{flex:1 1 auto;padding:7px 8px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#c9d3de;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.mp-act:hover{background:rgba(255,255,255,.12);color:#fff}
.mp-act.on{background:rgba(88,166,255,.22);border-color:rgba(88,166,255,.5);color:#cfe4ff}
.map-legend.lg-vert{flex-direction:column;align-items:flex-start;gap:10px;padding:11px 12px;
  background:rgba(9,13,18,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.11);border-radius:12px;box-shadow:0 10px 34px -10px rgba(0,0,0,.65)}
.lg-vert .lg-scale{display:flex;align-items:stretch;gap:9px;height:118px}
.lg-vbar{width:11px;border-radius:6px;border:1px solid rgba(255,255,255,.12);flex:none}
.lg-vbar.depth{background:linear-gradient(180deg,#fde725,#7ad151,#22a884,#2a788e,#414487,#440154)}
.lg-vbar.edge{background:linear-gradient(180deg,#fcfdbf,#fe9f6d,#de4968,#8c2981,#3b0f70,#000004)}
.lg-vlabels{display:flex;flex-direction:column;justify-content:space-between;font-size:.68rem;color:#c9d3de}
.measure-readout{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:600;
  padding:8px 15px;border-radius:999px;background:rgba(9,13,18,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);color:#e6edf3;font-family:var(--font-mono);font-size:.82rem;font-weight:700;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.65)}
.measure-readout[hidden]{display:none}
/* water section (below the reader): a tile grid (composition) + a stats-list-beside-chart (trend) */
.water-col{margin:0}
.water-col .cr-water{display:block}
.water-col .cr-h{font-size:.8rem;margin-bottom:14px}
.wq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wq-tile{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 13px}
.wq-k{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wq-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:700;color:var(--text-bright);margin:5px 0 10px;letter-spacing:-.01em}
.wq-v small{font-size:.56em;color:var(--muted);font-weight:600;margin-left:2px}
.wq-bar{position:relative;height:4px;background:var(--elev);border-radius:999px}
.wq-band{position:absolute;height:100%;background:rgba(88,166,255,.3);border-radius:999px}
.wq-mark{position:absolute;top:-2.5px;width:3px;height:9px;background:var(--accent);border-radius:2px}
.wq-trend{display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:26px;align-items:center;margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.wq-trend-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px}
.wq-tr{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--border)}
.wq-tr-dot{width:9px;height:9px;border-radius:2px;flex:none}
.wq-tr-n{font-size:.8rem;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wq-tr-v{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--text-bright)}
.wq-tr-v small{color:var(--muted);font-size:.72em;font-weight:600}
.wq-trend-chart{min-width:0}
.cr-rail{display:flex;flex-direction:column;min-height:0;min-width:0;padding:16px}
.cr-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:16px;flex:0 0 auto}
.cr-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px;flex:0 0 auto}
.cr-water{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cr-water-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.cr-water-scroll::-webkit-scrollbar{width:7px}.cr-water-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.stat{background:var(--elev);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.stat-v{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}.stat-v small{font-size:.72rem;color:var(--muted);font-weight:600}
.stat-k{font-size:.68rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.block{margin:38px 0;scroll-margin-top:56px}.block h2{font-size:1.3rem;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.sub{color:var(--muted);font-size:.9rem;margin:0 0 16px}.muted{color:var(--muted)}.tiny{font-size:.74rem}
.count-pill{font-size:.7rem;font-weight:700;background:var(--elev);border:1px solid var(--border);color:var(--accent);padding:3px 9px;border-radius:999px}
/* --- lake context article (SEO prose) --- */
.lake-lede{font-size:1.05rem;color:#cdd9e5;max-width:840px;margin:20px 0 2px}
.lake-article .la-body{max-width:840px}
.lake-article .la-body h2{font-size:1.3rem;margin:22px 0 6px}
.lake-article .la-body p{color:#c9d3de;margin:0 0 12px}
.lake-lede.placeholder{color:var(--faint);font-style:italic;border:1px dashed var(--border);border-radius:10px;padding:12px 14px}
.la-ph{border:1px dashed var(--border);border-radius:12px;overflow:hidden}
.la-ph-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--border)}
.la-ph-row:last-child{border-bottom:0}.la-ph-h{font-weight:700;font-size:.95rem}
/* --- locked lake map --- */
#lakemap{height:100%;width:100%;background:var(--elev);z-index:0}
.map-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg button{background:var(--card);color:var(--muted);border:0;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer}
.seg button.on{background:rgba(88,166,255,.16);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--border);
border-radius:9px;padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.chip input[type=checkbox]{accent-color:var(--accent);margin:0}
/* compact icon controls: opacity slider + outline/reset icon-only buttons */
.chip.cbtn{padding:6px 8px;color:var(--text)}
.chip .cic{display:inline-flex;color:var(--muted)}.chip svg{display:block}
.chip.op{gap:6px;padding:6px 10px 6px 8px}
.chip.op input[type=range]{width:88px;accent-color:var(--accent);margin:0}
.map-toolbar .chip.cbtn:hover{border-color:var(--accent);color:var(--accent)}
.map-toolbar .chip.cbtn.on{color:var(--accent);border-color:rgba(88,166,255,.45);background:rgba(88,166,255,.14)}
.map-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--muted)}
.lg-src{font-weight:700;padding:3px 9px;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em}
.lg-src.ok{background:rgba(63,185,80,.18);color:var(--green)}.lg-src.warn{background:rgba(210,153,34,.18);color:var(--yellow)}
.lg-scale{display:inline-flex;align-items:center;gap:8px}
.lg-bar{display:inline-block;width:130px;height:9px;border-radius:999px;border:1px solid var(--border)}
.lg-bar.depth{background:linear-gradient(90deg,#fde725,#7ad151,#22a884,#2a788e,#414487,#440154)}
.lg-bar.edge{background:linear-gradient(90deg,#000004,#3b0f70,#8c2981,#de4968,#fe9f6d,#fcfdbf)}
.lg-sw{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted)}
.lg-sw i{width:12px;height:12px;border-radius:3px;border:1px solid var(--border);display:inline-block}
.map-legend[hidden]{display:none}
/* legend floats on the imagery (Esri-instrument look) */
.cr-map-wrap .map-legend{position:absolute;left:10px;bottom:10px;margin:0;z-index:500;gap:10px;
background:rgba(13,17,23,.82);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:9px;
padding:6px 10px;max-width:calc(100% - 20px);font-size:.72rem}
/* --- species cards --- */
.sp-grid{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:10px 0 28px}
.sp-grid::-webkit-scrollbar{height:7px}.sp-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.sp-card{flex:0 0 clamp(260px,26vw,320px);background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.rank{position:absolute;top:8px;left:8px;background:rgba(13,17,23,.78);border:1px solid var(--border);
color:var(--muted);font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px;backdrop-filter:blur(4px)}
.sp-body{padding:10px 12px 12px}.sp-name{font-weight:700}.sp-sci{font-style:italic;color:var(--muted);font-size:.76rem;margin-bottom:6px}
.rare-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.01em;
padding:1px 7px;border-radius:999px;vertical-align:middle;white-space:nowrap;cursor:help}
.rare-tag.rare{background:rgba(210,153,34,.18);color:var(--yellow);border:1px solid rgba(210,153,34,.45)}
.rare-tag.uncommon{background:rgba(88,166,255,.14);color:var(--accent);border:1px solid rgba(88,166,255,.35)}
.sp-stats{font-size:.8rem;color:var(--muted)}.sp-count{color:var(--text);font-weight:700}
/* --- fish rows: rich vertical list (photo left, name + stats, chevron right) --- */
.fish-list{display:flex;flex-direction:column;gap:10px}
.fish-row{display:grid;grid-template-columns:128px minmax(0,1fr) auto 20px;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s,box-shadow .2s,transform .2s}
.fish-row:hover{border-color:var(--border-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.fr-photo{position:relative;width:128px;height:82px}
.fish-row:hover .fr-photo .ci-z{transform:scale(1.06);filter:brightness(1) saturate(1.05)}
.fr-photo .rank{top:6px;left:6px;font-size:.62rem;padding:1px 6px}
.fr-main{min-width:0}
.fr-name{font-weight:700;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-sci{font-style:italic;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.fr-stats{display:flex;gap:18px}
.fr-stat{text-align:right;white-space:nowrap}
.fr-stat b{display:block;font-family:var(--font-mono);font-weight:700;color:var(--text-bright);font-size:.95rem;letter-spacing:-.01em}
.fr-stat b small{font-size:.62rem;color:var(--muted);font-weight:600}
.fr-stat>small{font-size:.58rem;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.fr-chev{color:var(--faint);font-size:1.4rem;line-height:1}
.fish-row:hover .fr-chev{color:var(--accent)}
.fish-more{margin-top:12px}
.fish-more>summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--accent);list-style:none;padding:9px 0}
.fish-more>summary::-webkit-details-marker{display:none}
.fish-more>summary:hover{text-decoration:underline}
.fish-mini-list{display:flex;flex-direction:column;margin-top:2px}
.fish-mini{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 2px;border-top:1px solid var(--border);color:var(--text)}
.fish-mini .fm-n{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fish-mini:hover .fm-n{color:var(--accent)}
.sp-cm{color:var(--yellow);font-weight:700;margin-left:6px}
.bar{height:5px;background:var(--elev);border-radius:999px;overflow:hidden;margin:7px 0 3px}
.bar-fill{height:100%;background:var(--accent);border-radius:999px}.bar-fill.green{background:var(--green)}
.sp-suit{font-size:.68rem;color:var(--faint)}
/* --- biota tabs: consolidated Fish / Plants / Invertebrates / Microorganisms --- */
.bt-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.bt-tabbar::-webkit-scrollbar{display:none}
.bt-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font:700 .72rem/1 var(--font);text-transform:uppercase;letter-spacing:.07em;padding:11px 13px;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:7px;margin-bottom:-1px}
.bt-tab:hover{color:var(--text)}
.bt-tab.on{color:var(--text-bright);border-bottom-color:var(--accent)}
.bt-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.bt-n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.64rem;color:var(--muted);
  background:var(--elev);border-radius:999px;padding:2px 7px}
.bt-tab.on .bt-n{color:var(--accent)}
.bt-panel[hidden]{display:none}
.bt-scroll{display:flex;flex-direction:column;gap:10px;max-height:1120px;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin}
.bt-scroll::-webkit-scrollbar{width:7px}.bt-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
/* short, wide letterbox card: the hero shows as a squarer window in the middle, a
   strong side vignette goes to near-black on BOTH edges; name/latin/tag on the dark
   left, stats on the dark right, chevron */
.bt-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:12px;
  min-width:0;min-height:208px;padding:16px 44px 16px 20px;border-radius:10px;overflow:hidden;
  background:#06090d;border:1px solid var(--border);transition:border-color .2s,box-shadow .2s,transform .2s}
.bt-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.bt-card.bt-noimg{background:var(--card)}
.bt-card-org{grid-template-columns:minmax(0,1fr) 96px;padding-right:20px}
/* uniform fill: blurred cover copy of the card's OWN image (--img) for palette-matched
   sides + the SAME image sharp (also cover → no size variation), its side-edges
   MASK-faded so it flows continuously into the blur (no hard rectangle); soft vignette */
.bt-card::before{content:"";position:absolute;inset:-30px;z-index:0;background:var(--img) center/cover;
  filter:blur(26px) brightness(.55) saturate(1.15)}
/* sharp layer inset 15% at each end → picture sits in the center 70%, so cover crops
   LESS vertically (shows more fish height); its edges fade into the shadow ends */
.bt-card::after{content:"";position:absolute;inset:0 15%;z-index:1;background:var(--img) center/cover;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.bt-noimg::before,.bt-noimg::after{display:none}
.bt-grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(6,9,13,.86) 0%,rgba(6,9,13,0) 26%,rgba(6,9,13,0) 74%,rgba(6,9,13,.86) 100%)}
.bt-noimg .bt-grad{display:none}
.bt-tl{position:relative;z-index:3;min-width:0}
.bt-name{font-weight:800;color:#fff;font-size:1.16rem;letter-spacing:-.01em;text-shadow:0 1px 5px rgba(0,0,0,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-sci{font-style:italic;color:#ccd7e3;font-size:.8rem;text-shadow:0 1px 4px rgba(0,0,0,.7);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-preds{font-size:.72rem;color:#dce5ef;margin-top:9px;text-shadow:0 1px 3px rgba(0,0,0,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-preds span{color:#9fb0c0}.bt-preds a{color:#9dc7ff}.bt-preds a:hover{text-decoration:underline}
.bt-stats{position:relative;z-index:3;display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  text-align:left;flex:none}
.bt-stat>small{display:block;font-size:.55rem;color:#aab5c1;text-transform:uppercase;letter-spacing:.05em}
.bt-stat b{display:block;font-family:var(--font-mono);font-weight:700;color:#fff;font-size:1rem;
  letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.7);margin-top:2px}
.bt-stat b small{font-size:.62rem;color:#c6cfd9;font-weight:600}
/* Gated premium figure — a uniform "cipher" that stands in for a record count or
   trophy length the current tier can't see. Same glyph run at every value, so
   nothing about the hidden number (not even its magnitude) leaks; a soft shimmer +
   lock read as "something is here to unlock". Also used in the header .m-v metric. */
.bt-cipher{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-weight:700;white-space:nowrap;cursor:help;text-shadow:none;color:var(--muted)}
.bt-cipher-g{color:var(--faint);letter-spacing:.06em}
.bt-cipher .bt-lock{flex:none;opacity:.75;color:var(--muted);margin-top:-1px}
.bt-cipher small{color:var(--muted);font-weight:600}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bt-cipher-g{background:linear-gradient(100deg,var(--faint) 25%,var(--accent) 50%,var(--faint) 75%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;animation:btCipher 3.4s linear infinite}
}
@keyframes btCipher{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.bt-cipher-g{animation:none}}
.bt-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);z-index:3;color:#ccd7e3;
  font-size:1.5rem;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.bt-card:hover .bt-chev{color:#fff}
/* abundance pills — national-occupancy tiers (the categorical read from the strips) */
.ab-tag{display:inline-block;align-self:flex-start;margin-top:10px;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:4px;border:1px solid transparent}
/* 4-tier occupancy scale: common (neutral) → notable (blue) → rare (gold) → mythic
   (violet-pink gradient + glow, the rarest-recorded thrill) */
.ab-tag.common{background:rgba(139,148,158,.14);color:#adbac7;border-color:rgba(139,148,158,.3)}
.ab-tag.notable{background:rgba(88,166,255,.14);color:var(--accent);border-color:rgba(88,166,255,.34)}
.ab-tag.rare{background:rgba(210,153,34,.17);color:var(--yellow);border-color:rgba(210,153,34,.4)}
.ab-tag.mythic{background:linear-gradient(120deg,rgba(190,130,255,.3),rgba(247,120,186,.22));
  color:#ecd9ff;border-color:rgba(190,130,255,.6);box-shadow:0 2px 14px -3px rgba(190,130,255,.6)}
/* the rarest finds also get a card accent so they stand out in the grid (inset rings are
   hidden behind the image layers, so tint the border + add an outer glow for mythic) */
.bt-card.bt-tier-rare{border-color:rgba(210,153,34,.42)}
.bt-card.bt-tier-rare:hover{border-color:rgba(210,153,34,.6)}
.bt-card.bt-tier-mythic{border-color:rgba(190,130,255,.58);box-shadow:0 4px 22px -8px rgba(190,130,255,.5)}
.bt-card.bt-tier-mythic:hover{border-color:rgba(190,130,255,.78);box-shadow:0 7px 26px -6px rgba(190,130,255,.62);transform:translateY(-1px)}
.cr-water .wqp:first-of-type{border-top:1px solid var(--border)}
.wqp-more{margin:2px 0}.wqp-more>summary{cursor:pointer;font-size:.76rem;color:var(--accent);padding:9px 0;list-style:none}
.wqp-more>summary::-webkit-details-marker{display:none}
.wqp.cyano{border-bottom:0}.wqp.cyano .wqp-head{padding-top:4px}
.wqp{padding:10px 0;border-bottom:1px solid var(--border)}.wqp:last-child{border-bottom:0}
.wqp-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.84rem}
.wqp-name{font-weight:700}.wqp-val{font-weight:800;font-variant-numeric:tabular-nums}
.wqp-val small{color:var(--muted);font-weight:600;font-size:.72rem}
.wqp-bar{position:relative;height:8px;background:var(--elev);border-radius:999px;margin:7px 0 5px;overflow:hidden}
.wqp-band{position:absolute;top:0;bottom:0;background:rgba(139,148,158,.28);border-radius:999px}
.wqp-mark{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1.5px;background:var(--accent);border-radius:2px}
.wqp-foot{display:flex;justify-content:space-between;gap:12px;font-size:.7rem;color:var(--faint)}
/* --- notable-catches strip (bottom of the control-room card) --- */
.cr-strip{border-top:1px solid var(--border);padding:14px 16px}
.cr-strip-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.nc-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:10px 0 28px}
.nc-track::-webkit-scrollbar{height:7px}.nc-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.nc-card{flex:0 0 clamp(240px,24vw,300px);background:var(--elev);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.nc-body{padding:9px 12px 12px}
.nc-len{font-size:1.4rem;font-weight:800;color:var(--yellow);letter-spacing:-.02em;line-height:1}.nc-len small{font-size:.72rem;color:var(--muted);font-weight:600}
.nc-name{font-size:.9rem;font-weight:700;margin-top:2px}
.nc-badge{display:inline-block;font-family:var(--font-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:rgba(210,153,34,.16);color:#e3b341;border:1px solid rgba(210,153,34,.5);backdrop-filter:blur(8px)}
/* --- life scroller rows --- */
.life-row{margin:18px 0}
.life-row-h{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin:0 0 10px;flex-wrap:wrap}
.life-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:10px 0 28px}
.life-track::-webkit-scrollbar{height:7px}.life-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.life-track .og-card{flex:0 0 200px}
/* --- notable-species highlight (rare + uncommon across all groups) --- */
.rare-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:10px 0 28px}
.rare-track::-webkit-scrollbar{height:7px}.rare-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.rare-card{flex:0 0 clamp(240px,24vw,300px);background:var(--elev);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.rare-cat{position:absolute;top:11px;left:11px;z-index:3;background:rgba(8,12,18,.55);border:1px solid rgba(255,255,255,.14);color:rgba(230,237,243,.85);
font-family:var(--font-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;backdrop-filter:blur(8px)}
.rare-body{padding:9px 12px 12px}.rare-name{font-weight:700;font-size:.94rem}.rare-occ,.rare-recs{margin-top:3px}
/* drag-to-scroll (grab anywhere to pan the ticker) */
.sp-grid,.life-track,.nc-track,.rare-track{cursor:grab;
  /* stop the horizontal rubber-band from chaining to the page */
  overscroll-behavior-x:contain}
/* No touch-action override on the in-card tapes: native (auto) lets iOS pick the
   axis per gesture — a horizontal swipe scrolls the tape, a vertical swipe scrolls
   the page — exactly like the working free-standing tapes below. pan-x only captured
   the swipe and, with the card now capped to the viewport, added no scroll range;
   and -webkit-overflow-scrolling:touch is a no-op on modern iOS that can spawn a
   paint layer which mis-clips inside the rounded overflow:hidden card. */
.sp-grid.dragging,.life-track.dragging,.nc-track.dragging,.rare-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.dragging *{cursor:grabbing}
.og-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.og-card.has-pred{cursor:pointer}
.og-body{padding:8px 10px 10px}.og-name{font-weight:700;font-size:.9rem}
.og-fam{font-style:italic;color:var(--muted);font-size:.72rem}
.og-sub{font-size:.72rem;color:var(--faint);margin-top:3px}
.og-link-badge{position:absolute;top:8px;right:8px;z-index:2;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:rgba(88,166,255,.16);color:var(--accent);border:1px solid rgba(88,166,255,.35);
font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.og-pred{position:absolute;inset:0;z-index:3;background:rgba(13,17,23,.95);backdrop-filter:blur(3px);
padding:10px;display:flex;flex-direction:column;gap:7px;opacity:0;visibility:hidden;transition:opacity .12s;overflow:auto}
.og-card:hover .og-pred{opacity:1;visibility:visible}
.og-pred-h{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pred-chips{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.pred-chip{font-size:.72rem;background:var(--elev);border:1px solid var(--border);border-radius:7px;padding:3px 8px;color:var(--text)}
.pred-chip:hover{border-color:var(--accent);color:var(--accent)}
.foot{margin-top:48px;padding-top:16px;border-top:1px solid var(--border);font-size:.74rem;color:var(--faint)}

/* ==========================================================================
   Presentation pass (Fable): instrument-vs-print contrast, mono numerics,
   un-boxed map, de-carded article, one viridis signature + light model.
   ========================================================================== */
/* — light model + atmosphere — */
.lake-detail{position:relative}
.lake-detail::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 460px at 26% 0,rgba(88,166,255,.06),transparent 70%)}
.cr-card{box-shadow:var(--shadow-lg);isolation:isolate}   /* scope the z-index stack to the card */
.cr-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1001;pointer-events:none;
  background:linear-gradient(90deg,#fde725,#22a884,#2a788e,#414487,#440154)}   /* viridis signature — above Leaflet's tile pane so it's one continuous line */
.stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
/* card hover treatment moved to the card-image pass at the end of this file */
/* — mono numeric register (Bloomberg-on-dark) — */
.stat-v,.wqp-val,.nc-len,.sp-count,.count-pill,.la-prov{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-v{font-weight:700;font-size:1.35rem}.wqp-val{font-weight:600}.nc-len{font-weight:700}.count-pill{font-weight:600}
/* — un-box the map; float the controls as glass on the imagery — */
.cr-card{position:relative}
.cr-map{position:relative;padding:0}
.cr-map-wrap{border:0;border-radius:0}
.cr-map-wrap::after{content:"";position:absolute;inset:0;z-index:400;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(8,12,18,.42),inset 0 0 0 1px rgba(8,12,18,.55)}
.cr-map>.map-toolbar{position:absolute;top:10px;left:10px;z-index:600;margin:0;max-width:calc(100% - 20px)}
.cr-map>.map-toolbar .seg,.cr-map>.map-toolbar .chip{background:rgba(13,17,23,.82);backdrop-filter:blur(6px)}
.cr-map>.map-toolbar .seg button{background:transparent}
.cr-map>.map-toolbar .seg button.on{background:rgba(88,166,255,.24)}
#lakemap .leaflet-image-layer{transition:opacity .2s ease}   /* overlay switch/opacity glides */
/* — full-width identity band: broadsheet title + lede above the map — */
/* ============================ horizontal header ============================ */
.lake-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 32px;
  padding:18px 0 20px;border-bottom:1px solid var(--border);margin:0 0 20px}
.lake-head .crumb{font-size:.78rem;color:var(--muted);margin-bottom:9px}
.lake-head .crumb a:hover{color:var(--accent)}
.lh-kicker{display:inline-block;font-size:.67rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.lh-titlerow{display:flex;align-items:center;gap:11px;margin:6px 0 9px}
.lh-title{font-size:clamp(2rem,1.2rem + 2.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--text-bright);margin:0;overflow-wrap:anywhere}
.lh-meta{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.82rem;flex-wrap:wrap}
.lh-meta strong{color:var(--text-bright)}.lh-meta .sep{color:var(--faint)}
.lh-metrics{display:flex;gap:30px}
.lh-metric{display:flex;flex-direction:column-reverse}   /* small label ON TOP, value below (mockup) */
.lh-metric .m-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:1.5rem;line-height:1;color:var(--text-bright);letter-spacing:-.02em;white-space:nowrap}
.lh-metric .m-v small{font-size:.6em;color:var(--muted);font-weight:600}
.lh-metric .m-k{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 7px;white-space:nowrap}
/* favorite star — state lives entirely in aria-pressed (a11y + CSS both read it) */
.lh-fav{background:none;border:0;padding:3px;cursor:pointer;color:var(--faint);line-height:0;border-radius:8px}
.lh-fav svg{fill:none;stroke:currentColor;stroke-width:1.5;transition:fill .15s,color .15s,transform .12s}
.lh-fav:hover{color:var(--text-bright)}
.lh-fav[aria-pressed="true"]{color:var(--yellow)}
.lh-fav[aria-pressed="true"] svg{fill:currentColor;stroke:currentColor}
.lh-fav:active svg{transform:scale(.82)}
.lh-fav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================ ecology reader ============================ */
.er-section{position:relative;margin:0}
/* BORDERLESS reader — no card box; just text (left) + image & quote (right), then a
   separator line down to the water composition (mockup) */
/* NO scroll — the cycler pages between blocks with the buttons/icons only (JS shows
   one .er-block at a time). Without JS every block stays in normal flow (crawlable). */
.er-track{position:relative}
.er-block{box-sizing:border-box;
  display:grid;grid-template-columns:1fr minmax(240px,42%);gap:34px;align-content:center;align-items:start;padding:6px 0 64px}
.er-text{min-width:0}
.er-kicker{display:inline-block;font-size:.67rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.er-h{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.05rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.09;color:var(--text-bright);margin:0 0 14px}
.er-text p{line-height:1.7;color:#c9d3de;margin:0 0 12px;font-size:1rem;max-width:60ch}
.er-text p:last-child{margin-bottom:0}
.er-text a{color:var(--accent)}
.er-lede{font-size:1.08rem!important;line-height:1.6!important;color:#dbe4ee!important}
.col-lede{font-size:1.02rem;line-height:1.58;color:#c9d3de;max-width:none;margin:2px 0 22px}
.er-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.er-side .la-pull{margin:0;font-family:var(--font-mono);font-size:.94rem;line-height:1.6;
  color:var(--accent);font-style:normal;position:relative;padding-left:36px;border-left:0}
.er-side .la-pull::before{content:"\201C";position:absolute;left:0;top:-12px;
  font:700 2.7rem/1 Georgia,'Times New Roman',serif;color:var(--accent)}
.er-media-well{aspect-ratio:4/3;height:auto;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-elevated)}
.er-img{width:100%;height:100%;object-fit:cover;display:block}
.er-text-only{grid-template-columns:minmax(0,64ch);justify-content:start}
.er-text-only .er-h{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem)}
/* cycler table-of-contents: one topic ICON per distinct section (bottom row) + the
   current section's name above it — so the reader knows the topics up front */
.er-cur{position:absolute;left:2px;bottom:41px;font-size:.7rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.07em;z-index:3;pointer-events:none}
.er-dots{position:absolute;left:0;bottom:9px;display:flex;flex-direction:row;gap:5px;z-index:3;align-items:center}
.er-dot{width:29px;height:29px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.04);
  color:var(--faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.er-dot svg{width:17px;height:17px;display:block}
.er-dot:hover{color:var(--muted);background:rgba(255,255,255,.09)}
.er-dot.on{color:var(--accent);background:rgba(88,166,255,.15)}
.er-hint{display:none}   /* the icon rail already signals the cycler — hint is redundant */
/* prev / next cycler buttons (bottom-right) — the clear "you can page through this" cue */
.er-nav{position:absolute;right:0;bottom:6px;display:flex;gap:8px;z-index:3}
.er-navbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;
  border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.er-navbtn:hover{background:rgba(88,166,255,.16);border-color:var(--accent);color:var(--accent)}
.er-navbtn:disabled{opacity:.32;cursor:default;background:none;border-color:var(--border);color:var(--faint)}
.er-navbtn svg{display:block}
/* separator line between the reader and the water composition (borderless, mockup) */
.lake-sep{border:0;border-top:1px solid var(--border);margin:8px 0 26px}
@keyframes er-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* cycler is progressive enhancement — only once JS marks the track .js. The panel
   shows ONE block at a time (button-paged, no scroll); a floor min-height keeps it
   from jumping too much, and it grows for a taller block so nothing ever clips. */
.er-track.js{display:flex;min-height:clamp(430px,52vh,540px)}
.er-track.js .er-block{display:none}
.er-track.js .er-block.active{display:grid;flex:1 1 auto;min-width:0;animation:er-in .45s ease}
.er-track.js .er-block.active .er-img{animation:er-img-in .85s ease}
@keyframes er-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes er-img-in{from{transform:scale(1.06)}to{transform:none}}
.er-fallback .lake-lede{font-size:1.12rem;line-height:1.6;color:#cdd9e5;max-width:74ch;margin:0}
@media(prefers-reduced-motion:reduce){
  .er-track.js .er-block{opacity:1!important;transform:none!important;transition:none}
  .er-track.js .er-block .er-img{transform:none!important;transition:none}
  .er-hint svg{animation:none}
}
/* — the article: one text container in the RIGHT column of the two-col band — */
.lake-article{max-width:none}
.lake-article .la-body{max-width:none}
.lake-article .la-body h2{position:relative;clear:both;padding-top:18px;margin:26px 0 10px;font-size:1.3rem;color:var(--text-bright)}
.lake-article .la-body h2:first-child{margin-top:2px}
.lake-article .la-body h2::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--accent);border-radius:2px}
.lake-article .la-body h3{font-size:1.02rem;margin:0 0 4px;color:var(--text-bright)}
.lake-article .la-body h3 a{color:inherit}.lake-article .la-body h3 a:hover{color:var(--accent)}
.lake-article .la-body p{line-height:1.7;color:#c9d3de;max-width:none}
.lake-article .la-body a{color:var(--accent)}
/* food-web figure floats right within the text column (mussel = the subject) */
.la-fig{float:right;width:clamp(200px,44%,280px);margin:5px 0 12px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-elevated)}
.la-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10}
.la-fig figcaption{font-size:.74rem;color:var(--muted);padding:8px 11px 10px;line-height:1.45}
/* pull-quote: inline editorial break */
.la-pull{margin:16px 0;font-size:1.1rem;line-height:1.5;color:var(--text-bright);font-style:italic;border-left:3px solid var(--accent);padding:2px 0 2px 16px;clear:both}
/* species angling H3s: 2-col grid of .la-sp blocks (each = species H3 + one para),
   text-only — hero images live in the Fish cards below (anti-duplication) */
.la-species{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 34px;margin:14px 0 4px;clear:both}
.la-species .la-sp h3{margin-top:0}
/* water-quality trend chart (inline SVG multiline) */
.tc-block{margin-top:28px}
.tc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 10px}
.tc-key{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted)}
.tc-key i{width:11px;height:3px;border-radius:2px;display:inline-block}
.tc-key b{color:var(--text);font-family:var(--font-mono);font-weight:600}
.tc-plot{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,rgba(88,166,255,.05),transparent);padding:1px}
.tc-svg{display:block;width:100%;height:150px}
.tc-grid{stroke:var(--border);stroke-dasharray:2 3}
.tc-axis{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--font-mono);font-size:.68rem;color:var(--faint);margin-top:5px}
.tc-axis .muted{font-family:var(--font)}
.la-species .la-sp p{margin-bottom:0}
.lake-article .la-species p{max-width:none}
/* notable-catches + bijzondere-soorten strips as a full-width card below the top row */
.cr-strips .cr-strip:first-child{border-top:0}
/* — ticker edge fade: signals "more" better than the 7px scrollbar — */
.sp-grid,.nc-track,.rare-track,.life-track{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent)}
@media(prefers-reduced-motion:reduce){#lakemap .leaflet-image-layer{transition:none}}
/* — overlay-selector palette swatches (self-describing) — */
.seg button .ov-sw{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.ov-sw.depth{background:linear-gradient(90deg,#fde725,#22a884,#414487,#440154)}
.ov-sw.edge{background:linear-gradient(90deg,#000004,#8c2981,#fe9f6d,#fcfdbf)}
.ov-sw.structure{background:linear-gradient(90deg,#c8f0f0,#b4b4ff,#ff3c3c,#ffb400,#320064)}
/* — entrance: stat tiles rise (staggered), water bars draw themselves in (once, on load) — */
@keyframes lk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lk-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lk-fade{from{opacity:0}to{opacity:1}}
.cr-stats .stat{animation:lk-rise .42s both ease-out}
.cr-stats .stat:nth-child(2){animation-delay:.06s}
.cr-stats .stat:nth-child(3){animation-delay:.12s}
.cr-stats .stat:nth-child(4){animation-delay:.18s}
.wqp-band{transform-origin:left;animation:lk-growx .55s .12s both cubic-bezier(.4,0,.2,1)}
.wqp-mark{animation:lk-fade .4s .48s both ease-out}
/* — water-row hover: brighten the this-lake marker + heading — */
.wqp:hover .wqp-mark{width:4px;box-shadow:0 0 6px rgba(88,166,255,.7)}
.wqp:hover .wqp-name{color:var(--text-bright)}
@media(prefers-reduced-motion:reduce){.cr-stats .stat,.wqp-band,.wqp-mark{animation:none}}

/* ==========================================================================
   Card-image pass (Fable): make the photography the hero across all 4 tapes.
   One image language — .ci wrapper + .ci-z slow-zoom layer — as DATA cards
   (image on top, text below). The trophy/rare tapes use the same 3:2 ratio as
   "Fish here" so the fish read head-to-tail (a 4:5 crop lopped off both ends).
   Kept the smooth free-scroll (no scroll-snap); strips not capped.
   ========================================================================== */
/* shared image wrapper + slow cinematic zoom — dim at rest, wake on hover */
.ci{position:relative;overflow:hidden;background:var(--elev)}
.ci-z{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.92) saturate(.97);transform:scale(1.02);
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .4s ease}
.ci-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:800;color:var(--faint);background:var(--card)}
/* aspect ratios: fish / trophy / rare all 3:2 (full fish head-to-tail), life 4:3 */
.sp-ci,.nc-ci,.rare-ci{aspect-ratio:3/2}
.og-ci{aspect-ratio:4/3}
/* seating gradient so the image meets the body softly + mono rank chip */
.sp-ci::after,.nc-ci::after,.rare-ci::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(21,27,35,.55),transparent 24%)}
.sp-ci .rank{top:11px;left:11px;z-index:2;font-family:var(--font-mono)}

/* shared card frame: refined shadow stack; neutral hover lift (accent reserved) */
.sp-card,.nc-card,.rare-card,.life-track .og-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
.sp-card:hover,.nc-card:hover,.rare-card:hover,.life-track .og-card:hover{
  border-color:var(--border-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.45),0 20px 48px -18px rgba(0,0,0,.65)}
/* the top-ranked catch earns a quiet gold hairline */
.sp-grid .sp-card:first-child{
  box-shadow:inset 0 0 0 1px rgba(210,153,34,.4),0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.55)}
@media(prefers-reduced-motion:no-preference){
  .sp-card:hover,.nc-card:hover,.rare-card:hover,.life-track .og-card:hover{transform:translateY(-4px)}
  .sp-card:hover .ci-z,.nc-card:hover .ci-z,.rare-card:hover .ci-z,.og-card:hover .ci-z{
    transform:scale(1.06);filter:brightness(1) saturate(1.08)}
}

/* trophy "TOP x% NL" badge overlays the image top-right, like a medal on the photo */
.nc-card .nc-badge{position:absolute;top:11px;right:11px;z-index:3}

/* ==========================================================================
   Responsive — kept LAST so it reliably overrides the presentation-pass rules
   above (equal specificity → later source order wins). Breakpoints:
   ≤980 the 2-column band stacks (Fish, then reader) · ≤899/coarse the ecology reader
   un-fixes to plain stacked flow (no nested scroll, no iOS rubber-band) · ≤820 map
   controls lift OUT of the short map into a bar above it, legend flips to a slim
   bottom bar, water trend stacks · ≤720 header stacks · ≤560 phone · ≤380 tiny.
   ========================================================================== */
@media(max-width:980px){
  .lake-cols{grid-template-columns:minmax(0,1fr);gap:0}   /* stack; floor track so cards don't blow out */
  .lake-col-eco{margin-top:34px}
  /* biota tabs → natural document flow (no nested scroll on touch); tab switch still works */
  .bt-scroll{max-height:none;overflow:visible;padding-right:0}
}
/* Ecology reader → plain document flow on touch / narrow. Gating on pointer:coarse
   (not just width) means touch tablets/laptops also drop the paged panel, so every
   block stacks in normal flow instead of one-at-a-time (no nested cycler on touch). */
@media(max-width:899px),(pointer:coarse){
  .er-section{max-width:none;margin:30px 0}
  .er-track,.er-track.js{display:block;min-height:0;border:0;background:none}
  .er-block{grid-template-columns:1fr;gap:18px;padding:0;margin:0 0 30px}
  .er-block:last-child{margin-bottom:0}
  .er-side{gap:16px}
  .er-block .er-media-well{aspect-ratio:16/10}   /* image + quote stack under the text */
  .er-text-only{grid-template-columns:1fr}
  .er-dots,.er-count,.er-hint,.er-nav{display:none}
  .lake-sep{margin:22px 0}
  /* show ALL blocks stacked (override the desktop one-at-a-time display:none) */
  .er-track.js .er-block,.er-track.js .er-block.active{display:grid;animation:none;flex:none}
  .er-track.js .er-block .er-img{transform:none;animation:none}
}
@media(max-width:820px){
  .cr-map-band .cr-map{height:auto;padding:0}      /* map wrap drives height on mobile */
  .cr-map-wrap{flex:none;height:300px}
  .block{margin:30px 0}
  /* Map controls on a short (300px) map: lift the glass panel OUT of the map and
     stack it as a compact control bar ABOVE the map — the desktop overlay buries a
     phone-sized map. IDs/structure stay identical so the map JS keeps working. */
  .cr-map-band .cr-map>.map-panel{
    position:static;width:auto;top:auto;left:auto;transform:none;
    margin:0 0 2px;padding:11px 14px;border-radius:0;
    background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;border-bottom:1px solid var(--border);box-shadow:none;
    display:flex;flex-direction:column;gap:9px}
  .map-panel .mp-h{display:none}                     /* swatches self-explanatory; save height */
  .map-panel .seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .map-panel .seg button{width:auto;min-width:0;justify-content:center;gap:7px;
    padding:7px 9px;border:1px solid var(--border);border-radius:8px}
  .map-panel .seg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .map-panel .mp-op{margin:0;gap:10px}
  .map-panel .mp-op input[type=range]{width:auto;flex:1}
  /* actions flow to content width (flex, not forced thirds) so long i18n labels
     — NL "Weergave herstellen", DE "Ansicht zurücksetzen" — stay on one line
     instead of wrapping every button to double height. */
  .map-panel .mp-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border-top:0}
  .map-panel .mp-act{white-space:nowrap}
  /* legend(s) → pinned to the map's bottom edge; the vertical depth legend also
     flips to a slim HORIZONTAL bar (gradient turns 180deg→90deg to read L→R). */
  .cr-map-band .cr-map-wrap .map-legend{top:auto;bottom:8px;left:8px;right:8px;max-width:none;transform:none}
  .cr-map-band .cr-map-wrap .map-legend.lg-vert{flex-direction:row;align-items:center;gap:11px;padding:7px 11px}
  .lg-vert .lg-scale{flex-direction:column;height:auto;flex:1;min-width:0;gap:4px}
  .lg-vert .lg-vbar{width:100%;height:7px}
  .lg-vert .lg-vbar.depth{background:linear-gradient(90deg,#fde725,#7ad151,#22a884,#2a788e,#414487,#440154)}
  .lg-vert .lg-vbar.edge{background:linear-gradient(90deg,#fcfdbf,#fe9f6d,#de4968,#8c2981,#3b0f70,#000004)}
  .lg-vert .lg-vlabels{flex-direction:row;justify-content:space-between;font-size:.6rem}
  .cr-map-band .cr-map-wrap .map-legend .lg-src{white-space:nowrap;flex:none}
  /* the 'Bottom structure' legend is a plain .map-legend (5 swatches, no .lg-vert),
     so the row-flip rules above skip it; keep it a slim single-row band (scroll for
     the rest) instead of wrapping to 2–3 rows over the small map. */
  .cr-map-band .cr-map-wrap .map-legend[data-legend="structure"]{flex-wrap:nowrap;overflow-x:auto;gap:9px;scrollbar-width:none}
  .cr-map-band .cr-map-wrap .map-legend[data-legend="structure"]::-webkit-scrollbar{display:none}
  .cr-map-band .cr-map-wrap .map-legend[data-legend="structure"] .lg-sw{flex:none;white-space:nowrap}
  /* the bottom legend now sits where Leaflet puts its Esri/Maxar attribution
     (bottom-right, trapped inside #lakemap's z-index:0 stacking context, so it can't
     paint over the z-index:500 legend). Move the attribution to the free top-right
     corner on mobile so it stays visible (Esri terms) — zoom stays top-left. */
  .cr-map-band .cr-map-wrap .leaflet-bottom.leaflet-right{top:6px;bottom:auto}
  /* water trend: stats list + chart were side-by-side; stack them on mobile */
  .wq-trend{grid-template-columns:1fr;gap:18px;align-items:stretch}
}
@media(max-width:720px){
  .lake-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .lh-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
}
@media(max-width:560px){
  /* full-bleed cards on a phone: shorter but still a showcase; chevron hidden for width */
  .bt-card{min-height:176px;padding:15px 16px;grid-template-columns:minmax(0,1fr) 86px}
  .bt-name{font-size:1.02rem}
  .bt-stats{gap:8px}
  .bt-chev{display:none}
  .bt-tab{padding:11px 10px}
  .cr-card{border-radius:12px;margin:16px 0}
  .cr-map-wrap{height:300px}
  .cr-rail{padding:14px}
  .cr-strip{padding:12px 12px}
  .cr-stats{gap:8px}
  /* control bar already lifted above the map at ≤820px — just tighten it on phones */
  .cr-map-band .cr-map>.map-panel{padding:9px 11px}
  .map-panel .seg button{padding:6px 8px;font-size:.78rem}
  .mp-act{font-size:.7rem;padding:6px 7px}
  .cr-map-wrap .map-legend .lg-src{font-size:.62rem;padding:2px 7px}
  /* cards: a shade smaller so a peek of the next card always shows on a narrow screen */
  .sp-card{flex-basis:min(72vw,260px)}
  .nc-card,.rare-card{flex-basis:min(68vw,240px)}
  .life-track .og-card{flex-basis:min(52vw,180px)}
  /* fish list: photo + name on row 1, stats reflow to a left-aligned row below (4 cols won't fit) */
  .fish-row{grid-template-columns:88px minmax(0,1fr);gap:9px 12px;padding:8px}
  .fr-photo{width:88px;height:60px}
  .fr-chev{display:none}
  .fr-stats{grid-column:1/-1;justify-content:flex-start;gap:22px;margin-top:1px;padding-top:8px;border-top:1px solid var(--border)}
  .fr-stat{text-align:left}
  /* tighter rhythm + type */
  .block{margin:24px 0}
  .block h2{font-size:1.18rem}
  .lake-header .la-title{font-size:1.85rem}
  .lake-header .lake-lede{font-size:1.06rem;line-height:1.6}
  .lake-article .la-body{max-width:none}
  .lake-article .la-body h2{font-size:1.14rem}
  /* shorter edge-fade so small cards aren't half-hidden by the mask */
  .sp-grid,.nc-track,.rare-track,.life-track{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
}
@media(max-width:380px){
  .cr-map-wrap{height:260px}
  .stat{padding:10px 11px}
  .stat-v{font-size:1.15rem}
  .lake-article .la-title{font-size:1.65rem}
}