/* Tonka Explorer — css/dark.css (2.0.16): dark mode, switched from Info › Appearance (js/app.js setTheme; localStorage tonka.theme).
   Everything dark lives HERE so the other stylesheets stay light-only: the tokens are re-pointed and a handful of literal colours are
   overridden. The chart itself is one canvas drawn from JS constants, so at night it is DIMMED in place, never inverted
   (2.0.19: inversion made the shoals dark and the deep holes glow — on a chart lighter must always mean shallower) — the buoys, pins, labels, route and boat are DOM/SVG on top and keep their true
   colours, which is the point: red stays red, green stays green. Satellite imagery is never filtered. */
:root[data-theme="dark"]{
  --navy:#2E7FB5; --navy-2:#6DB3E2; --ink:#E6EEF2; --mute:#9DB0BC; --line:#2B3B45; --surf:#0C151A; --card:#16242C;
  --ok:#2E9E68; --ok-bg:#12291D; --warn:#C98A1A; --warn-bg:#33270B; --bad:#E8695A; --bad-bg:#35140F;
  --shadow-1:0 1px 3px rgba(0,0,0,.5); --shadow-2:0 4px 18px rgba(0,0,0,.6);
  --land:#2D2A21; --land-edge:#3A362B; --water:#0B1E2B; --island:#2D2A21;   /* land is a warm dark khaki: against blue-black water it cannot be mistaken for it */
  --dl-border:#3E6F96;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--surf);color:var(--ink)}
/* the chart canvas (depth bands, contours, shoreline, streets) at night */
:root[data-theme="dark"] .leaflet-lakefill-pane canvas,
:root[data-theme="dark"] .leaflet-streets-pane canvas{filter:brightness(.44) contrast(1.12) saturate(1.35)}
:root[data-theme="dark"] body.sat .leaflet-lakefill-pane canvas,
:root[data-theme="dark"] body.sat .leaflet-streets-pane canvas{filter:none}   /* over satellite the chart lines stay as drawn */
:root[data-theme="dark"] .leaflet-container{background:var(--land)}
/* depth figures and map labels: light ink, dark halo */
:root[data-theme="dark"] .dl{background:#0F2230;color:#BFDCF0}
:root[data-theme="dark"] .lbl,:root[data-theme="dark"] .maplabel,:root[data-theme="dark"] [class^="lbl-"],:root[data-theme="dark"] [class*=" lbl-"]{color:#D4E3EC;text-shadow:0 0 3px #0B1E2B,0 0 3px #0B1E2B,0 0 2px #0B1E2B}
/* surfaces that set a literal colour */
:root[data-theme="dark"] .toast{background:#24343D;color:#fff}
:root[data-theme="dark"] #app::before{background:#0A1217}
:root[data-theme="dark"] nav.tabs{border-top-color:var(--line)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color:var(--ink);background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] ::placeholder{color:#6F8592}
:root[data-theme="dark"] #scrim.on,:root[data-theme="dark"] .goscrim{background:rgba(0,0,0,.55)}
:root[data-theme="dark"] a{color:var(--navy-2)}
/* the boat keeps a white ring; its heading line turns white so it still reads on dark water */
:root[data-theme="dark"] .mehl{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
/* Info › Appearance switch (both themes) */
.lookrow{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:56px;background:var(--card)}
.lookrow .lk{flex:1;min-width:0;font:700 17px/1.2 var(--font);color:var(--ink)}
.lookrow .lk small{display:block;font:500 12px/1.3 var(--font);color:var(--mute);margin-top:2px}
.switch{position:relative;flex:none;width:52px;height:32px;border-radius:16px;background:var(--line);transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--navy)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surf);color:var(--navy);font:700 22px/1 var(--font)}
.stepper button:disabled{opacity:.35}
.stepper b{min-width:58px;text-align:center;font:700 17px/1 var(--font);color:var(--ink)}
.tbl .toolow{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:6px;background:var(--bad-bg);color:var(--bad);font:700 11px/1.5 var(--font)}
.tag.featured{background:var(--warn-bg);color:var(--warn);font-weight:700}
.featline{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--ink);font:500 14px/1.4 var(--font)}
.featline b{color:var(--warn)}
.terms p{margin:0 0 10px}
#termsbar{position:fixed;left:10px;right:10px;bottom:calc(var(--tab-h) + var(--safe-b) + 10px);z-index:1005;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#14232C;color:#fff;font:500 13px/1.35 var(--font);box-shadow:var(--shadow-2)}
#termsbar span{flex:1;min-width:0}
#termsbar button{flex:none;min-height:40px;padding:0 12px;border-radius:10px;font:700 13px var(--font);color:#fff;background:rgba(255,255,255,.16)}
#termsbar .tb-ok{background:#fff;color:#14232C}
body.routing #termsbar{display:none}
@media (min-width:700px){#termsbar{left:auto;right:16px;width:460px}}

/* ===== 2.0.19 — dark-mode fixes from the overnight audit (reports/bughunt/bh1_pwa_dark.md). Each line names the literal it overrides. ===== */
:root[data-theme="dark"] #msearch .field{background:var(--card);border-color:var(--line)}                 /* P0-1 white capsule, ghost text */
:root[data-theme="dark"] #msearch .field svg{stroke:var(--navy-2)}
:root[data-theme="dark"] #msearch input{color:var(--ink);background:none}
:root[data-theme="dark"] .wx-hours > div.now{background:#12212B}                                          /* P0-2 white NOW column */
:root[data-theme="dark"] .linkrow a.pri,:root[data-theme="dark"] a.btn.pri,:root[data-theme="dark"] .btn.pri{color:#fff}   /* P0-3 Water Patrol button lost its white text to the link colour */
:root[data-theme="dark"] .note{background:var(--warn-bg);border-left-color:var(--warn);color:var(--ink)}  /* P0-4 cream box */
:root[data-theme="dark"] .chip[aria-pressed="false"]{background:#0F1A21;color:var(--mute)}                /* P1-1 white OFF chips */
:root[data-theme="dark"] .chip[aria-pressed="false"] .dot{background:#3A4A55;border-color:#3A4A55}
:root[data-theme="dark"] .wx-now .wx-sky,:root[data-theme="dark"] .wx-lake p,:root[data-theme="dark"] .wx-day .sk,:root[data-theme="dark"] .wx-day > p{color:var(--ink)}   /* P1-2 #3B4A53 prose */
:root[data-theme="dark"] .wx-hours .pp,:root[data-theme="dark"] .wx-day .pp{color:#7FB6E0}                /* P1-3 rain % */
:root[data-theme="dark"] .rn,:root[data-theme="dark"] .shop .nm{color:#C9BFA6;text-shadow:0 0 2px #1C1A14,0 0 3px #1C1A14,0 0 4px #1C1A14}   /* P1-4 tan halos */
:root[data-theme="dark"] .shop{--k:#7FB6E0}
:root[data-theme="dark"] .total div{color:#F0F6FA}                                                         /* P1-8 route totals labels */
:root[data-theme="dark"] .wq-g{color:#0C151A;font-weight:800}                                              /* P1-9 grade letters: dark ink on the grade colour */
:root[data-theme="dark"] #offline{background:var(--warn-bg);color:var(--warn)}                            /* P2-1 … */
:root[data-theme="dark"] #selftest{color:var(--ink)}
:root[data-theme="dark"] :focus-visible{box-shadow:0 0 0 4px var(--card)}
:root[data-theme="dark"] .skel{background:linear-gradient(90deg,#16242C,#1E303A,#16242C)}
:root[data-theme="dark"] #mres i.mkres,:root[data-theme="dark"] .row .ic.mkic{background:#22343F}
:root[data-theme="dark"] .bars .bar.approx{background:repeating-linear-gradient(90deg,#4F8BC0 0 6px,#16242C 6px 8px)}
:root[data-theme="dark"] .nowt.up{border-color:var(--ok)}
:root[data-theme="dark"] .tag.ok{border-color:#1F4A33}:root[data-theme="dark"] .tag.warn{border-color:#5A4312}:root[data-theme="dark"] .tag.no{border-color:#5C2119}
:root[data-theme="dark"] #sheet .ed-bk:active,:root[data-theme="dark"] .pairedit .pe-b:active,:root[data-theme="dark"] .buoypick .bp-k:active{background:#22343F}
/* both themes — P1-5: the first-run bar sat on top of the Locate button. It now lives under the Layers row, clear of every map control. */
#termsbar{bottom:auto;top:calc(var(--safe-t) + 64px)}
/* both themes — P1-6: viewport-fit=cover with no left/right insets put the map controls under the notch in landscape */
@supports (left:env(safe-area-inset-left)){
  #mapbar,#msearch,.trackbar,.nearstrip,.pairedit,.buoypick{left:calc(8px + env(safe-area-inset-left,0px))}
  .northarrow,#edits-mode{left:calc(12px + env(safe-area-inset-left,0px))}
  .locate,.fxzoom{right:calc(12px + env(safe-area-inset-right,0px))}
  nav.tabs{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .view:not(#v-map){padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
}

:root[data-theme="dark"] .meboat{filter:drop-shadow(0 0 1.4px #DCE8EF) drop-shadow(0 0 1.4px #DCE8EF) drop-shadow(0 2px 4px rgba(0,0,0,.7))}

/* 2.0.21 — Route › Start from my location */
.fromme{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);margin:6px 16px 8px;min-height:48px;padding:0 14px;border-radius:12px;border:1px dashed var(--line);background:var(--surf);color:var(--navy);font:700 15px/1.2 var(--font)}
.fromme svg,.mek svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.stop .k.mek{display:flex;align-items:center;justify-content:center;background:var(--me,#1A66BB);color:#fff}
.mestop .nm{color:var(--ink)}

.tourbtn{flex:none;min-height:44px;padding:0 16px}

/* 2.0.22 — Low wind layer: its chip dot, the overlay image and the one-line key (only while the layer is on) */
.chip.lowwind .dot{background:#0FA37E;border-color:#0FA37E}
.lwimg{image-rendering:auto;pointer-events:none}
.lwpill{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(var(--tab-h) + var(--safe-b) + 12px);z-index:805;display:flex;align-items:center;gap:9px;max-width:calc(100% - 84px);min-height:44px;padding:6px 12px 6px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);text-align:left;color:var(--ink)}
.lwpill .lwk{display:flex;flex-direction:column;gap:3px;flex:none}
.lwpill .lwk i{display:block;width:18px;height:9px;border-radius:3px}
.lwpill .lwk .c1{background:#0FA37E}.lwpill .lwk .c2{background:#7ED6B4}
:root[data-theme="dark"] .lwpill .lwk .c1{background:#35E0B6}:root[data-theme="dark"] .lwpill .lwk .c2{background:#1C8C78}
.lwpill .lwt{min-width:0;font:700 13px/1.25 var(--font)}
.lwpill .lwt small{display:block;font:500 11px/1.3 var(--font);color:var(--mute)}
body.routing .lwpill{display:none}

/* 2.0.22 — long-press sheet: Add this point to the route */
.ed-route{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin:4px 0 6px;font-size:16px}
.ed-route svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ed-routehint{margin:0 0 12px;font:500 12px/1.4 var(--font);color:var(--mute);text-align:center}