/* ReefNav UI — one full-bleed map, one adaptive sheet, one tab bar.
   Everything that used to live in a scrolling header now lives either on the
   map as a floating control or inside the sheet. Nothing overflows. */
:root{
  --bg:#EDEDE7; --s1:#FBFBF8; --s2:#F2F2EC; --s3:#E6E6DE; --s4:#CFCFC4;
  --line:#E0E0D6; --line2:#C6C6B8;
  --tx:#14181B; --tx2:#5A6167; --tx3:#8C9299;
  --acc:#0F6E78; --acc2:#0B5A63; --accTx:#FBFBF8;
  --calm:#12A392; --good:#2E9E63; --mod:#D9A006; --rough:#E06B28; --dgr:#D14343;
  --mapbg:#DDE3E6;
  --glass:rgba(251,251,248,.92);
  --shadow:0 2px 10px rgba(13,22,32,.10),0 8px 30px rgba(13,22,32,.10);
  --shadowU:0 -6px 30px rgba(13,22,32,.14);
  --r:14px; --rs:10px;
  --top:48px; --tabs:58px; --scrub:62px;
  --fs:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  --fm:ui-monospace,'SF Mono',Menlo,monospace;
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
}
body.dark{
  --bg:#0B0F11; --s1:#131A1D; --s2:#182126; --s3:#212C32; --s4:#2E3B43;
  --line:#1F2A30; --line2:#2E3B43;
  --tx:#EDF1F0; --tx2:#94A3A6; --tx3:#657277;
  --acc:#35C6C0; --acc2:#22A8A4; --accTx:#06201F;
  --calm:#2FD2B8; --good:#4FC46A; --mod:#E8B23A; --rough:#F08A45; --dgr:#E85A50;
  --mapbg:#0B0F11;
  --glass:rgba(19,26,29,.92);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.45);
  --shadowU:0 -6px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;}
body{background:var(--bg);color:var(--tx);font-family:var(--fs);font-size:15px;
  line-height:1.4;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;}
button,input,select{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
a{color:var(--acc);text-decoration:none;}
.mono{font-family:var(--fm);}
.lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);font-weight:650;}
::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:6px;}

/* ---------- map ---------- */
#map{position:fixed;inset:0;background:var(--mapbg);z-index:0;touch-action:none;}
/* touch-action:none is load-bearing, not tidiness. Without it the browser
   claims the two-finger gesture for page zoom before MapLibre ever sees it,
   and tilt appears not to exist. */
.mkwrap{will-change:transform;}
.maplibregl-canvas:focus{outline:none;}
.maplibregl-popup.tip .maplibregl-popup-content{padding:7px 10px;font-size:12px;}
.maplibregl-popup.tip .maplibregl-popup-tip{display:none;}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important;}
.lyr{position:absolute;top:0;left:0;pointer-events:none;}
.maplibregl-map{background:var(--mapbg);font-family:var(--fs);outline:none;}
.maplibregl-ctrl-attrib{display:none;}
.mk i{display:block;border-radius:50%;
  box-shadow:0 0 0 1.6px var(--s1),0 1px 4px rgba(0,0,0,.4);}
.mk.sel i{box-shadow:0 0 0 2px var(--s1),0 0 0 5px var(--acc);}
.mk.spot i{border-radius:3px;transform:rotate(45deg);}
.mkl{position:absolute;left:50%;transform:translateX(-50%);top:13px;font-size:10px;
  font-weight:650;white-space:nowrap;pointer-events:none;color:var(--tx);
  text-shadow:0 0 3px var(--s1),0 0 6px var(--s1),0 0 9px var(--s1);}
body.dark .mkl{text-shadow:0 0 3px #000,0 0 7px #000;}
.wpt{width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--accTx);
  font:650 11px/22px var(--fs);text-align:center;box-shadow:0 0 0 2px var(--s1),var(--shadow);}
.boat svg{position:absolute;left:-14px;top:-14px;}
.acc{stroke:var(--acc);fill:var(--acc);fill-opacity:.08;stroke-opacity:.45;}
.maplibregl-popup tip{background:var(--glass)!important;border:1px solid var(--line2)!important;
  color:var(--tx)!important;border-radius:10px!important;box-shadow:var(--shadow)!important;
  font-size:12px!important;padding:7px 9px!important;backdrop-filter:blur(14px);}
.maplibregl-popup tip::before{display:none!important;}

/* ---------- top bar ---------- */
#top{position:fixed;top:0;left:0;right:0;height:calc(var(--top) + var(--safeT));
  padding:var(--safeT) 10px 0;display:flex;align-items:center;gap:8px;z-index:40;
  pointer-events:none;}
#top>*{pointer-events:auto;}
.brandbtn{display:flex;align-items:center;gap:7px;background:var(--glass);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 6px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);height:36px;}
.brandbtn .m{width:24px;height:24px;border-radius:0;flex:none;
  background:none;object-fit:contain;display:block;}
.brandbtn b{font-size:14px;font-weight:700;letter-spacing:-.03em;}
.pill{background:var(--glass);border:1px solid var(--line);border-radius:99px;
  height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);font-size:12.5px;color:var(--tx2);
  white-space:nowrap;}
.led{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;}
.led.warn{background:var(--mod);} .led.bad{background:var(--dgr);}
#searchWrap{flex:1;min-width:0;max-width:340px;position:relative;}
#q{width:100%;height:36px;border-radius:99px;border:1px solid var(--line);
  background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(14px);
  padding:0 14px;font-size:13.5px;}
#q:focus{outline:none;border-color:var(--acc);}
#qres{position:absolute;top:42px;left:0;right:0;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);max-height:52vh;overflow:auto;display:none;}
#qres.on{display:block;}
#qres div{padding:9px 13px;font-size:13.5px;cursor:pointer;display:flex;
  justify-content:space-between;gap:10px;}
#qres div:hover{background:var(--s2);}
#qres small{color:var(--tx3);}

/* ---------- floating map controls ---------- */
#mctl{position:fixed;right:10px;z-index:35;display:flex;flex-direction:column;gap:7px;
  top:calc(var(--top) + var(--safeT) + 8px);}
.fab{width:42px;height:42px;border-radius:12px;background:var(--glass);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px);
  display:grid;place-items:center;font-size:16px;color:var(--tx2);transition:.12s;}
.fab:active{transform:scale(.94);}
.fab[aria-pressed=true]{background:var(--acc);color:var(--accTx);border-color:transparent;}
.fab.zoom{height:36px;font-size:19px;}
#hud{position:fixed;left:10px;z-index:35;top:calc(var(--top) + var(--safeT) + 8px);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:8px 11px;display:none;
  min-width:132px;cursor:pointer;}
#hud.on{display:block;}
#hud .v{font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.05;}
#hud .v s{text-decoration:none;font-size:11px;color:var(--tx3);font-weight:400;}
#hud .r{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--tx2);
  margin-top:2px;}
#hud .r b{color:var(--tx);font-weight:650;}
#attrib{position:fixed;left:10px;z-index:20;font-size:9.5px;color:var(--tx3);
  background:var(--glass);border-radius:7px;padding:3px 7px;max-width:60vw;
  bottom:calc(var(--tabs) + var(--scrub) + var(--safeB) + 6px);}

/* ---------- layers popover ---------- */
#layers{position:fixed;right:62px;top:calc(var(--top) + var(--safeT) + 8px);z-index:45;
  width:248px;background:var(--s1);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:14px;display:none;}
#layers.on{display:block;}
#layers .lbl{margin:0 0 8px;}
#layers .lbl+.lbl,#layers .tog+.lbl{margin-top:14px;}
@media (max-width:420px){
  #layers{right:10px;left:10px;width:auto;}
}
/* iOS-style segmented control */
.seg{display:flex;background:var(--s3);border-radius:10px;padding:2px;gap:2px;margin-bottom:14px;}
.seg button{flex:1;font-size:13px;height:30px;border-radius:8px;color:var(--tx2);
  font-weight:550;letter-spacing:-.01em;transition:.14s;}
.seg button[aria-pressed=true]{background:var(--s1);color:var(--tx);font-weight:620;
  box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04);}
/* iOS-style switch row */
.tog{display:flex;align-items:center;gap:14px;width:100%;padding:11px 0;
  font-size:14.5px;letter-spacing:-.01em;text-align:left;}
.tog>span:first-child{flex:1;min-width:0;}
.tog+.tog{border-top:1px solid var(--line);}
.sw{position:relative;width:46px;height:28px;border-radius:99px;background:var(--s4);
  transition:background .2s;flex:none;}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;
  border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.32,.72,0,1);
  box-shadow:0 1px 3px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.04);}
.tog[aria-pressed=true] .sw{background:var(--acc);}
.tog[aria-pressed=true] .sw::after{transform:translateX(18px);}

/* ---------- sheet ---------- */
#sheet{position:fixed;z-index:50;background:var(--s1);display:flex;flex-direction:column;
  box-shadow:var(--shadowU);}
#grip{height:24px;display:none;align-items:center;justify-content:center;flex:none;
  touch-action:none;cursor:grab;}
#grip::after{content:"";width:38px;height:4px;border-radius:3px;background:var(--s4);}
#sheetHead{display:flex;align-items:center;gap:8px;padding:0 14px 10px;flex:none;}
#sheetHead h2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);flex:1;}
#sheetBody{flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:0 14px calc(18px + var(--safeB));-webkit-overflow-scrolling:touch;}
/* iPad landscape: docked right panel, tab bar stays along the bottom */

.close{width:28px;height:28px;border-radius:50%;background:transparent;display:grid;
  place-items:center;color:var(--tx3);font-size:13px;flex:none;transition:.13s;}
.close:hover,.close:active{background:var(--s2);color:var(--tx);}

/* ---------- tab bar ---------- */
#tabs{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tabs) + var(--safeB));
  padding-bottom:var(--safeB);background:var(--glass);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);display:flex;z-index:55;}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10.5px;color:var(--tx3);font-weight:600;letter-spacing:0;
  transition:color .14s;position:relative;border-radius:13px;margin:6px 3px;}
#tabs button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
#tabs button[aria-pressed=true]{color:var(--acc);
  background:color-mix(in srgb,var(--acc) 9%,transparent);}
#tabs button[aria-pressed=true] svg{stroke-width:2;}

/* ---------- scrubber ---------- */
#scrub{position:fixed;left:0;right:0;bottom:calc(var(--tabs) + var(--safeB));
  height:var(--scrub);background:var(--glass);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
  padding:0 12px;z-index:45;}
#scrub .t{font-size:12.5px;font-weight:650;white-space:nowrap;min-width:96px;}
#scrub .t s{text-decoration:none;display:block;font-size:9.5px;color:var(--tx3);font-weight:400;}
#tSlider{flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:30px;min-width:0;}
#tSlider::-webkit-slider-runnable-track{height:4px;background:var(--s3);border-radius:3px;}
#tSlider::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--acc);border:2.5px solid var(--s1);margin-top:-6.5px;box-shadow:var(--shadow);}
#tSlider::-moz-range-track{height:4px;background:var(--s3);border-radius:3px;}
#tSlider::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--acc);border:2.5px solid var(--s1);}
.sbtn{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--tx2);font-size:13px;flex:none;}

/* ---------- sheet content ---------- */
.card{background:var(--s2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;margin-bottom:10px;}
/* let a finger scrub a chart without the sheet stealing the gesture */
.card canvas{touch-action:none;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cell{background:var(--s1);border:1px solid var(--line);border-radius:var(--rs);padding:9px 10px;}
.cell .v{font-size:17px;font-weight:650;letter-spacing:-.02em;margin-top:2px;}
.cell .v s{text-decoration:none;font-size:11px;color:var(--tx3);font-weight:400;}
.hero{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.hero .tmp{font-size:44px;font-weight:250;line-height:1;letter-spacing:-.04em;}
.hero .tmp s{text-decoration:none;font-size:18px;color:var(--tx3);}
.hero .meta{font-size:12px;color:var(--tx2);line-height:1.5;padding-top:4px;}
.rose{width:68px;height:68px;margin-left:auto;flex:none;}
.chip{padding:4px 11px;border-radius:99px;font-size:12px;font-weight:650;}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:13.5px;}
.row b{font-weight:650;}
.row+.row{border-top:1px solid var(--line);}
.listrow{display:grid;grid-template-columns:3px 1fr auto;gap:10px;align-items:center;
  padding:9px 8px;border-radius:10px;cursor:pointer;}
.listrow:active{background:var(--s2);}
.listrow[aria-selected=true]{background:var(--s2);box-shadow:inset 0 0 0 1px var(--acc);}
.listrow .bar{width:3px;height:26px;border-radius:2px;}
.listrow .n{font-size:14px;}
.listrow .s{font-size:11px;color:var(--tx3);}
.listrow .r{text-align:right;font-size:12px;line-height:1.3;}
.listrow .r b{font-size:14px;}
.grp{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);
  font-weight:700;padding:12px 8px 5px;position:sticky;top:0;background:var(--s1);z-index:1;}
.btn{height:40px;border-radius:10px;background:var(--acc);color:var(--accTx);font-weight:650;
  font-size:14px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn.sec{background:var(--s2);color:var(--tx);border:1px solid var(--line);font-weight:600;}
.btn.wide{width:100%;}
.fld{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.fld select,.fld input{height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--s1);padding:0 10px;font-size:13.5px;width:100%;
  -webkit-appearance:none;appearance:none;}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--acc);}
.note{font-size:11px;color:var(--tx3);line-height:1.55;margin-top:8px;}
/* warnings */
.warncard{background:color-mix(in srgb,var(--dgr) 8%,var(--s1));
  border:1px solid color-mix(in srgb,var(--dgr) 32%,transparent);
  border-radius:var(--r);padding:12px;margin-bottom:10px;}
.wrow{display:flex;gap:10px;align-items:flex-start;padding:3px 0;font-size:13.5px;}
.wdot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;}
.ws{font-size:11.5px;color:var(--tx2);}
/* bite windows */
.bite{border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--rs);
  padding:9px 11px;margin-bottom:6px;background:var(--s1);}
.bite.hot{border-left-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--s1));}
.bite .bt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;}
.bite .bs{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--good);}
.bite.hot .bs{color:var(--acc);}
.bite .bw{font-size:11.5px;color:var(--tx3);margin-top:2px;}
/* saved marks */
.mk.mark i{width:14px;height:14px;background:var(--acc);border-radius:3px;
  transform:rotate(45deg);display:block;}
.mini{background:var(--s2);border:1px solid var(--line);border-radius:7px;height:28px;
  padding:0 10px;font-size:12px;color:var(--tx2);}
.maplibregl-popup-content{border-radius:12px!important;background:var(--s1)!important;
  color:var(--tx)!important;box-shadow:var(--shadow)!important;}
.maplibregl-popup-tip{background:var(--s1)!important;}
.maplibregl-popup-content{margin:12px 14px!important;}
/* high / low table — the times a fisho plans around */
.tidetbl{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px;}
.tt{display:flex;align-items:baseline;gap:6px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--rs);padding:7px 9px;font-size:12px;}
.tt .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;width:26px;flex:none;}
.tt b{font-weight:650;font-size:13px;}
.tt .d{color:var(--tx3);font-size:10.5px;}
.tt .m{margin-left:auto;color:var(--tx2);font-size:11.5px;}
@media (min-width:1180px){.tidetbl{grid-template-columns:repeat(2,1fr);}}
.big-n{font-size:26px;font-weight:650;letter-spacing:-.03em;line-height:1;}
.big-n s{text-decoration:none;font-size:12px;color:var(--tx3);font-weight:400;}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;}
.bar{height:6px;background:var(--s3);border-radius:4px;overflow:hidden;margin:8px 0 4px;}
.bar i{display:block;height:100%;background:var(--acc);width:0;transition:width .25s;}
.empty{color:var(--tx3);font-size:13px;padding:22px 0;text-align:center;}
details summary{font-size:13px;color:var(--tx2);padding:8px 0;cursor:pointer;}
.fishgrp{border:1px solid var(--line);border-radius:var(--rs);margin-bottom:6px;overflow:hidden;}
.fishgrp summary{padding:11px 12px;background:var(--s2);font-size:13.5px;color:var(--tx);font-weight:600;}
.fishgrp .in{padding:10px 12px;font-size:12.5px;color:var(--tx2);line-height:1.6;}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--s3);
  border-top-color:var(--acc);animation:sp .7s linear infinite;display:inline-block;vertical-align:-3px;}
@keyframes sp{to{transform:rotate(360deg)}}
#boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  transition:opacity .3s;}
#boot.gone{opacity:0;pointer-events:none;}
#boot .in{text-align:center;}
/* the logo is the mark — no tile, no gradient behind it */
#boot .m{width:104px;height:104px;margin:0 auto 16px;display:block;
  background:none;border-radius:0;object-fit:contain;}
#boot b{display:block;font-size:24px;font-weight:650;letter-spacing:-.03em;}
#boot p{font-size:12.5px;color:var(--tx3);margin-top:5px;}
@media (hover:none){.fab{width:46px;height:46px;} .fab.zoom{height:40px;}}

/* =========================================================
   RESPONSIVE — must stay at the end of this file. These rules
   override component rules defined above; when this block sat
   mid-file the base #tabs height won the cascade and collapsed
   the desktop sidebar to 0.
   ========================================================= */
/* phone: bottom sheet, two detents */
@media (max-width:900px){
  #sheet{left:0;right:0;bottom:calc(var(--tabs) + var(--safeB));
    height:min(78dvh,720px);border-radius:18px 18px 0 0;border-top:1px solid var(--line);
    transform:translateY(calc(100% + var(--tabs)));transition:transform .26s cubic-bezier(.32,.72,0,1);}
  #sheet.peek{transform:translateY(calc(100% - 210px));}
  #sheet.open{transform:translateY(0);}
  #grip{display:flex;}
}

@media (min-width:901px) and (max-width:1179px){
  #sheet{top:0;right:0;bottom:0;width:394px;border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .24s ease;padding-top:calc(var(--safeT) + 8px);}
  #sheet.peek,#sheet.open{transform:translateX(0);}
  #top{right:auto;left:0;width:min(100%,calc(100% - 394px));}
  body.sheetOpen #mctl{right:404px;}
  #tabs,#scrub{left:0;width:calc(100% - 394px);}
  body:not(.sheetOpen) #tabs,body:not(.sheetOpen) #scrub,body:not(.sheetOpen) #top{width:100%;}
}

/* ---------- desktop: a real sidebar application ----------
   A phone tab bar stretched across a 27-inch monitor is not a desktop app.
   Here the tabs become a vertical icon rail, the sheet is a permanently
   docked panel, and the map is inset beside them rather than hidden behind. */
@media (min-width:1180px){
  :root{--rail:78px;--panel:392px;--tabs:0px;}
  /* right:auto matters — the base rule sets left:0 AND right:0, which would
     otherwise over-constrain the box and fight the fixed rail width. */
  #tabs{top:0;left:0;right:auto;bottom:0;width:var(--rail);height:100%;flex-direction:column;
    justify-content:flex-start;gap:4px;padding:14px 0 var(--safeB);
    border-top:none;border-right:1px solid var(--line);background:var(--s1);
    backdrop-filter:none;}
  #tabs button{flex:none;width:100%;height:62px;gap:5px;font-size:10px;border-radius:0;
    position:relative;}
  #tabs button svg{width:24px;height:24px;}
  #tabs button[aria-pressed=true]::before{content:"";position:absolute;left:0;top:11px;bottom:11px;
    width:3px;border-radius:0 3px 3px 0;background:var(--acc);}
  #sheet{left:var(--rail);right:auto;top:0;bottom:0;width:var(--panel);
    border-right:1px solid var(--line);border-left:none;transform:none;
    box-shadow:none;transition:none;padding-top:10px;}
  #sheet:not(.open):not(.peek){transform:translateX(calc(-1 * var(--panel)));}
  #grip{display:none;}
  #sheetHead{padding:2px 16px 12px;}
  #sheetBody{padding:0 16px 24px;}
  /* map sits beside the chrome, never underneath it */
  #map{left:calc(var(--rail) + var(--panel));}
  body:not(.sheetOpen) #map{left:var(--rail);}
  #top{left:calc(var(--rail) + var(--panel) + 14px);right:14px;width:auto;
    top:14px;height:auto;padding:0;}
  body:not(.sheetOpen) #top{left:calc(var(--rail) + 14px);}
  #searchWrap{max-width:380px;}
  #mctl{right:16px;top:70px;}
  #hud{left:calc(var(--rail) + var(--panel) + 16px);top:70px;}
  body:not(.sheetOpen) #hud{left:calc(var(--rail) + 16px);}
  #layers{right:70px;top:70px;}
  #scrub{left:calc(var(--rail) + var(--panel));width:auto;right:0;bottom:0;
    height:52px;padding:0 18px;}
  body:not(.sheetOpen) #scrub{left:var(--rail);}
  #attrib{left:calc(var(--rail) + var(--panel) + 14px);bottom:64px;}
  body:not(.sheetOpen) #attrib{left:calc(var(--rail) + 14px);}
  .close{display:none;}
  /* roomier data density on a big screen */
  .g2{grid-template-columns:repeat(2,1fr);gap:9px;}
  .card{padding:14px;}
  body{font-size:14px;}
}
@media (min-width:1600px){
  :root{--panel:430px;}
  #searchWrap{max-width:460px;}
}

/* radar zoom hint inside the Layers row */
.hint{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);margin-top:1px;}
.hint:empty{display:none;}

/* ---------- model agreement ---------- */
.mdl{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12.5px;}
.mdl .n{width:62px;color:var(--tx2);flex:none;}
.mdl .track{flex:1;height:6px;background:var(--s3);border-radius:4px;overflow:hidden;}
.mdl .fill{display:block;height:100%;border-radius:4px;}
.mdl .v{width:34px;text-align:right;font-weight:650;flex:none;}

/* ---------- bite timeline ---------- */
.tlrow{margin-bottom:12px;}
.tlh{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:5px;font-size:12px;}
.tlh b{font-size:13px;}
.tt2{font-size:10.5px;padding:1px 6px;border-radius:99px;background:var(--s3);color:var(--tx2);}
.tt2.hi{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);font-weight:650;}
.tlbox{position:relative;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--rs);overflow:hidden;}
.tlsvg{display:block;width:100%;height:74px;}
.tlax{position:relative;height:15px;border-top:1px solid var(--line);}
.tlax span{position:absolute;top:1px;transform:translateX(-50%);font-size:9px;color:var(--tx3);}
.tlax span:first-child{transform:none;} .tlax span:last-child{transform:translateX(-100%);}
.tlkey{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:10.5px;color:var(--tx3);}
.tlkey span{display:flex;align-items:center;gap:5px;}
.tlkey i{width:11px;height:11px;border-radius:3px;display:block;}
.k-win{background:color-mix(in srgb,var(--acc) 30%,transparent);}
.k-maj{background:color-mix(in srgb,var(--mod) 45%,transparent);}
.k-min{background:color-mix(in srgb,var(--tx3) 30%,transparent);}
.k-sun{background:repeating-linear-gradient(180deg,var(--rough) 0 2px,transparent 2px 4px);}
.prov{font-size:9.5px;background:var(--s3);color:var(--tx3);padding:0 5px;
  border-radius:99px;margin-left:4px;}

/* ---------- Outlook ---------- */
.ocard{background:var(--s1);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:12px;}
.hero-o{background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 9%,var(--s1)),var(--s1));
  border-color:color-mix(in srgb,var(--acc) 22%,var(--line));}
.okicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--acc);font-weight:700;margin-bottom:7px;}
.otitle{font-size:23px;line-height:1.22;letter-spacing:-.03em;font-weight:650;}
.otitle.sm{font-size:18px;}
.ometa{font-size:11.5px;color:var(--tx3);margin-top:7px;}
.ostats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line);}
.ostats b{display:block;font-size:20px;font-weight:650;letter-spacing:-.03em;}
.ostats span{font-size:10.5px;color:var(--tx3);}
.obody p{font-size:14px;line-height:1.62;color:var(--tx2);margin-top:8px;}
.obody p:first-child{margin-top:6px;color:var(--tx);}
.ogrid2{display:grid;gap:12px;grid-template-columns:1fr;}
.opanel p{font-size:13.5px;line-height:1.6;color:var(--tx2);margin-top:6px;}
.obite{display:grid;gap:7px;}
.obt{background:var(--s2);border:1px solid var(--line);border-radius:var(--rs);padding:9px 11px;}
.obt b{font-size:13.5px;} .obt span{font-size:12px;color:var(--tx2);margin-left:6px;}
.obt i{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:3px;}
.owin{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.owin:last-child{border-bottom:none;}
.owin span{font-size:11.5px;color:var(--tx3);text-align:right;}
.obom{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--rs);overflow:hidden;
  background:var(--s2);}
.obom img{display:block;width:100%;height:auto;background:#fff;}
.obom figcaption{padding:9px 11px;font-size:12px;}
.obom figcaption b{display:block;} 
.obom figcaption span{color:var(--tx3);font-size:11.5px;}
@media (min-width:1180px){
  .ogrid2{grid-template-columns:1fr 1fr;}
  .otitle{font-size:27px;}
  .obody p{font-size:14.5px;}
}

/* ---------- computed reef verdict ---------- */
.verdict{border-radius:14px;padding:16px;margin-bottom:12px;border:1px solid var(--line);
  background:var(--s1);}
.verdict.v-good{background:color-mix(in srgb,var(--good) 9%,var(--s1));
  border-color:color-mix(in srgb,var(--good) 30%,transparent);}
.verdict.v-marginal{background:color-mix(in srgb,var(--mod) 10%,var(--s1));
  border-color:color-mix(in srgb,var(--mod) 32%,transparent);}
.verdict.v-poor{background:color-mix(in srgb,var(--dgr) 8%,var(--s1));
  border-color:color-mix(in srgb,var(--dgr) 28%,transparent);}
.verdict .vt{font-size:19px;font-weight:650;letter-spacing:-.025em;line-height:1.25;}
.verdict .vs{font-size:12.5px;color:var(--tx2);margin-top:4px;}
.vdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:13px;}
.vd{text-align:center;border-radius:9px;padding:7px 2px;background:var(--s2);
  border:1px solid var(--line);}
.vd span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);}
.vd b{display:block;font-size:15px;font-weight:650;letter-spacing:-.02em;margin-top:1px;}
.vd i{display:block;font-style:normal;font-size:9.5px;color:var(--tx3);}
.vd.v-good{background:color-mix(in srgb,var(--good) 16%,transparent);
  border-color:color-mix(in srgb,var(--good) 34%,transparent);}
.vd.v-marginal{background:color-mix(in srgb,var(--mod) 15%,transparent);
  border-color:color-mix(in srgb,var(--mod) 32%,transparent);}
.vd.v-poor{background:color-mix(in srgb,var(--dgr) 11%,transparent);
  border-color:color-mix(in srgb,var(--dgr) 26%,transparent);}

/* ---------- multi-layer base maps ---------- */
.blend-multiply{mix-blend-mode:multiply;}
body.dark .blend-multiply{mix-blend-mode:luminosity;opacity:.5;}
.seg.wrap{flex-wrap:wrap;}
.seg.wrap button{flex:1 1 30%;min-width:62px;}

/* ---------- layer bar (Orca-style: overlays live on the map) ---------- */
#lbar{position:fixed;z-index:36;display:flex;gap:6px;
  left:10px;bottom:calc(var(--tabs) + var(--scrub) + var(--safeB) + 30px);
  max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
#lbar::-webkit-scrollbar{display:none;}
#lbar button{display:inline-flex;align-items:center;gap:6px;flex:none;
  height:34px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--glass);border:1px solid var(--line);color:var(--tx2);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);transition:.13s;white-space:nowrap;}
#lbar button svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
#lbar button[aria-pressed=true]{background:var(--acc);color:var(--accTx);border-color:transparent;}
#lbar button:active{transform:scale(.96);}
@media (max-width:600px){
  #lbar button{height:32px;padding:0 10px;font-size:12px;}
  #lbar button svg{width:15px;height:15px;}
}
@media (min-width:1180px){
  #lbar{left:calc(var(--rail) + var(--panel) + 14px);bottom:76px;}
  body:not(.sheetOpen) #lbar{left:calc(var(--rail) + 14px);}
}

/* Esri's ocean ramp is flat by default — the reef edges, gutters and shelf
   break only read as structure once the depth ramp is pushed. This is the
   difference between "a blue map" and something you can find a drop-off on. */
.depth-pop{filter:saturate(1.65) contrast(1.32) brightness(1.02);}
.blend-multiply{filter:contrast(1.5);}
body.dark .depth-pop{filter:saturate(1.5) contrast(1.25) brightness(.82);}

/* =========================================================
   DECISION-FIRST CONDITIONS
   The call, then four signals, then the evidence on request.
   ========================================================= */
.verdictbar{border-radius:16px;padding:16px 16px 14px;margin-bottom:12px;
  border:1px solid var(--line);background:var(--s1);}
.vb-top{display:flex;align-items:flex-start;gap:12px;}
.vb-l{flex:1;min-width:0;}
.vb-name{font-size:18px;font-weight:650;letter-spacing:-.025em;line-height:1.2;}
.vb-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tx3);font-weight:650;margin-top:2px;}
.vb-r{text-align:right;flex:none;}
.vb-call{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;
  letter-spacing:-.01em;padding:5px 12px;border-radius:99px;}
.vb-call::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.v-calm .vb-call,.v-good .vb-call{color:var(--good);
  background:color-mix(in srgb,var(--good) 11%,transparent);}
.v-mod .vb-call{color:color-mix(in srgb,var(--mod) 80%,#000 8%);
  background:color-mix(in srgb,var(--mod) 13%,transparent);}
.v-rough .vb-call,.v-dgr .vb-call{color:var(--dgr);
  background:color-mix(in srgb,var(--dgr) 11%,transparent);}
.vb-when{font-size:11px;color:var(--tx3);margin-top:1px;}
.vb-sig{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px;}
.sg{background:var(--s1);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;text-align:center;}
.sg span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}
.sg b{display:block;font-size:13.5px;font-weight:650;margin-top:2px;letter-spacing:-.02em;}
.sg b i{font-style:normal;color:var(--tx3);margin-left:1px;}
.sg.no b{color:var(--rough);}
.vb-act{display:flex;gap:8px;margin-top:12px;}
.vb-act .btn{flex:1;height:36px;background:transparent;border:1px solid var(--line2);
  color:var(--tx2);font-weight:600;font-size:13px;border-radius:11px;}
.vb-act .btn:active{background:var(--s2);}
.wbadge{flex:none;height:36px;padding:0 13px;border-radius:11px;font-size:13px;font-weight:650;
  background:color-mix(in srgb,var(--dgr) 14%,transparent);color:var(--dgr);
  border:1px solid color-mix(in srgb,var(--dgr) 32%,transparent);}
.wbadge[aria-pressed=true]{background:var(--dgr);color:#fff;border-color:transparent;}
.warnpop{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.warnpop.on{display:block;}
.vb-foot{font-size:11px;color:var(--tx3);margin-top:10px;line-height:1.5;}
.eviD{margin-bottom:10px;}
.eviD>summary{font-size:12.5px;color:var(--tx3);padding:11px 2px;cursor:pointer;
  font-weight:600;list-style:none;display:flex;align-items:center;gap:7px;}
.eviD>summary::-webkit-details-marker{display:none;}
.eviD>summary::before{content:"";width:7px;height:7px;border-left:1.6px solid var(--tx3);
  border-bottom:1.6px solid var(--tx3);transform:rotate(-45deg);transition:.15s;margin-left:2px;}
.eviD[open]>summary::before{transform:rotate(135deg);}
.eviD[open]>summary{margin-bottom:10px;}

/* =========================================================
   TIME MUST STAY VISIBLE WITH THE SHEET OPEN
   Scrubbing conditions while the clock is hidden behind the
   sheet is useless. On phone the scrubber pins directly above
   the sheet edge; the map stays visible above that.
   ========================================================= */
@media (max-width:900px){
  #sheet{height:56dvh;}
  /* Scrub docks as the drawer's rounded cap — same surface, shared edges,
     no floating bar with map showing through the corner gaps. */
  #sheet.open{border-radius:0;border-top:none;box-shadow:none;}
  #sheet.open ~ #scrub{bottom:calc(var(--tabs) + var(--safeB) + 56dvh);
    background:var(--s1);backdrop-filter:none;
    border:none;border-radius:18px 18px 0 0;box-shadow:var(--shadowU);}
  body.sheetOpen #lbar{display:none;}
  body.sheetOpen #hud{display:none;}
}
/* layer bar was clipping off-screen on phone — it now scrolls edge to edge
   with a fade, and sits clear of the scrubber */
@media (max-width:600px){
  #lbar{left:0;right:0;max-width:none;padding:0 10px 2px;
    bottom:calc(var(--tabs) + var(--scrub) + var(--safeB) + 8px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 18px),transparent);}
  #attrib{bottom:calc(var(--tabs) + var(--scrub) + var(--safeB) + 50px);font-size:9px;}
  .vb-name{font-size:16.5px;}
}

/* =========================================================
   TIME RIBBON — the week's wind, painted.
   You aim at the calm before you drag, instead of scrubbing
   blind and reading a number afterwards.
   ========================================================= */
#scrub{gap:10px;padding:0 12px;align-items:center;}
#scrub .sbtn{width:36px;height:36px;border-radius:11px;flex:none;
  background:var(--s2);border:1px solid var(--line);color:var(--tx2);
  display:grid;place-items:center;transition:.14s;}
#scrub .sbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linejoin:round;}
#scrub .sbtn:first-child svg{fill:currentColor;stroke:none;}
#scrub .sbtn.on{background:var(--acc);color:var(--accTx);border-color:transparent;}
#scrub .sbtn:hover{border-color:var(--line2);color:var(--tx);}
.tnow{flex:none;min-width:104px;line-height:1.15;}
.tnow b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.025em;}
.tnow s{display:block;text-decoration:none;font-size:10.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums;}
#ribwrap{position:relative;flex:1;min-width:0;height:38px;border-radius:9px;
  overflow:hidden;background:var(--s2);border:1px solid var(--line);
  cursor:pointer;touch-action:none;}
#ribwrap.drag{cursor:grabbing;}
#ribbon{display:block;width:100%;height:100%;}
#ribdays{position:absolute;inset:0;pointer-events:none;}
#ribdays span{position:absolute;top:3px;font-size:9px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx);
  opacity:.5;transform:translateX(3px);}
body.dark #ribdays span{color:#fff;opacity:.45;}
#ribhead{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tx);
  pointer-events:none;transition:left .06s linear;}
#ribhead::before{content:"";position:absolute;top:-1px;left:-4px;
  width:10px;height:10px;border-radius:50%;background:var(--tx);
  box-shadow:0 0 0 2px var(--s1);}
body.dark #ribhead,body.dark #ribhead::before{background:#fff;}

/* =========================================================
   CONDITIONS — decision first, but with the numbers a fisho
   actually plans on: tide direction and next turn, gusts,
   swell, and where the wind is going.
   ========================================================= */
.vb-sig{grid-template-columns:repeat(3,1fr);}
.sg{padding:9px 7px;}
.sg b{font-size:14px;}
.tideminis{display:flex;align-items:center;gap:10px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line);}
.tideminis canvas{flex:1;min-width:0;height:34px;display:block;}
.tidenext{flex:none;text-align:right;}
.tidenext b{display:block;font-size:14px;font-weight:650;letter-spacing:-.02em;}
.tidenext span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}

/* softer, less "SaaS card" surfaces throughout */
.card{border-radius:var(--r);}
.fab{border-radius:13px;}
#lbar button{font-weight:650;letter-spacing:-.01em;}

/* signal grid — 3 across, unit on its own line so numbers stay large */
.vb-sig{grid-template-columns:repeat(3,1fr);gap:1px;margin-top:12px;
  background:var(--line);border-radius:12px;overflow:hidden;}
.sg{background:var(--s1);border:none;border-radius:0;text-align:left;padding:10px 11px 9px;}
.sg span{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.07em;}
.sg span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--good);flex:none;}
.sg.no span::before{background:var(--rough);}
.sg b{font-size:17px;font-weight:600;letter-spacing:-.03em;margin-top:3px;}
.sg.no b{color:var(--tx);}
.sg u{display:block;text-decoration:none;font-size:10px;color:var(--tx3);
  margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tidestrip{display:flex;align-items:center;gap:12px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line);}
.tidestrip canvas{flex:1;min-width:0;height:34px;display:block;}

/* =========================================================
   THE RIBBON MUST OWN THE WIDTH ON A PHONE
   At 390 px a single row left it 140 px wide for 168 hours —
   the day labels ran together into one smear and the calm was
   impossible to aim at. On phone and tablet the controls take
   a slim top row and the ribbon gets the full width beneath.
   ========================================================= */
@media (max-width:1179px){
  :root{--scrub:96px;}
  #scrub{display:grid;grid-template-columns:36px 1fr 36px;
    grid-template-rows:auto 46px;gap:7px 10px;align-items:center;
    padding:8px 12px 9px;}
  #scrub #tPlay{grid-column:1;grid-row:1;}
  #scrub .tnow{grid-column:2;grid-row:1;min-width:0;display:flex;
    align-items:baseline;gap:7px;}
  #scrub .tnow b{font-size:13px;}
  #scrub .tnow s{font-size:11px;}
  #scrub #tNowBtn{grid-column:3;grid-row:1;}
  #ribwrap{grid-column:1/-1;grid-row:2;height:46px;}
}
/* desktop keeps one row but the ribbon gets real height */
@media (min-width:1180px){
  #scrub{height:64px;}
  #ribwrap{height:44px;}
}
#ribdays span{top:1px;font-size:8.5px;font-weight:750;opacity:.72;}
body.dark #ribdays span{opacity:.7;}
/* tide strip gets a label so the shape is unambiguous */
.tidestrip::before{content:"Tide";flex:none;font-size:9.5px;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);}

/* =========================================================
   POLISH PASS — 2026 restraint. One glass panel for the layer
   bar instead of six floating pills; pill-highlight rail;
   flat minimal brand; overlay blend for the Structure layer.
   ========================================================= */
.blend-overlay{mix-blend-mode:overlay;}
body.dark .blend-overlay{mix-blend-mode:overlay;}

/* layer bar: one surface, quiet buttons, filled active */
#lbar{background:var(--glass);border:1px solid var(--line);border-radius:16px;
  padding:4px;gap:2px;box-shadow:var(--shadow);backdrop-filter:blur(16px);
  overflow-x:auto;}
#lbar button{background:none;border:none;box-shadow:none;backdrop-filter:none;
  height:32px;padding:0 11px;border-radius:12px;font-size:12px;font-weight:600;
  color:var(--tx2);}
#lbar button[aria-pressed=true]{background:var(--acc);color:var(--accTx);}
@media (max-width:600px){
  #lbar{border-radius:0;border-left:none;border-right:none;padding:4px 10px;}
}

/* desktop rail: active pill, not an edge bar */
@media (min-width:1180px){
  #tabs button{height:58px;margin:2px 8px;width:auto;border-radius:13px;}
  #tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 9%,transparent);}
  #tabs button[aria-pressed=true]::before{display:none;}
}

/* brand: quieter — the map is the hero, not the logo */
.brandbtn{padding:5px 11px 5px 5px;gap:6px;}
.brandbtn .m{width:22px;height:22px;border-radius:0;background:none;
  object-fit:contain;display:block;}
.brandbtn b{font-size:13.5px;font-weight:650;}

/* floating controls: lighter borders, tighter radius */
.fab{border-radius:13px;font-size:15px;}
.fab.zoom{font-size:18px;}

/* =========================================================
   3D REEF VIEW + FLAT 2026 SURFACES
   ========================================================= */

/* shadows: 2026 = one soft ambient hint, never a smeared drop */
:root{--shadow:0 1px 2px rgba(13,22,32,.05),0 6px 24px rgba(13,22,32,.07);
  --shadowU:0 -2px 18px rgba(13,22,32,.08);}
body.dark{--shadow:0 1px 2px rgba(0,0,0,.35),0 6px 24px rgba(0,0,0,.30);
  --shadowU:0 -2px 18px rgba(0,0,0,.35);}

/* map pin popup: one clean card, not a chat bubble */
.maplibregl-popup-content{background:var(--glass)!important;
  color:var(--tx)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:var(--shadow)!important;
  backdrop-filter:blur(16px);}
.maplibregl-popup-content{margin:12px 14px!important;line-height:1.5!important;}
.maplibregl-popup-tip{background:var(--s1)!important;border:1px solid var(--line)!important;
  box-shadow:none!important;}
.maplibregl-popup-close-button{color:var(--tx3)!important;font-size:16px!important;
  padding:6px 8px 0 0!important;}
.maplibregl-popup .btn{height:32px;font-size:12.5px;border-radius:9px;width:100%;
  margin-top:8px;}

/* primary buttons: quieter, tighter */
.btn{height:38px;border-radius:11px;font-size:13.5px;font-weight:600;}
.btn:active{transform:scale(.98);}

body.dark #map,body.dark .maplibregl-map{background:#05080A;}

/* labels and marks have to survive that darkness */
body.dark .mkl{color:#F2F7F6;text-shadow:0 0 3px #000,0 0 8px #000,0 0 12px #000;}
body.dark .mk i{box-shadow:0 0 0 1.6px rgba(6,10,12,.9),0 1px 5px rgba(0,0,0,.7);}

/* =========================================================
   MAP PIN POPUP + SHARE
   The pin card was a cramped stack with the close button
   landing on top of the coordinates. Now: coordinates own the
   first line with room reserved for the ✕, conditions read as
   one quiet line, and the two actions sit as equal pills.
   ========================================================= */
.maplibregl-popup-content{padding:0!important;}
.maplibregl-popup-content{margin:0!important;}
.pin{padding:14px 15px 13px;}
.pin-co{font-size:13px;font-weight:650;letter-spacing:-.02em;color:var(--tx);
  padding-right:22px;line-height:1.3;}
.pin-cond{display:flex;align-items:center;gap:9px;margin-top:7px;
  font-size:12.5px;color:var(--tx3);}
.pin-cond b{color:var(--tx);font-weight:650;font-size:14px;}
.pin-cond i{width:3px;height:3px;border-radius:50%;background:var(--line2);flex:none;}
.pin-act{display:flex;gap:7px;margin-top:12px;}
.pbtn{flex:1;height:34px;border-radius:10px;background:var(--acc);color:var(--accTx);
  font-size:12.5px;font-weight:650;letter-spacing:-.01em;}
.pbtn.ghost{background:transparent;color:var(--tx2);border:1px solid var(--line2);}
.pbtn:active{transform:scale(.97);}
.maplibregl-popup-close-button{width:22px!important;height:22px!important;
  top:8px!important;right:8px!important;padding:0!important;line-height:22px!important;
  text-align:center;border-radius:50%;font-size:14px!important;}
.maplibregl-popup-close-button:hover{background:var(--s2);}

/* square icon-only action in the verdict bar */
.vb-act .btn.iconb{flex:none;width:36px;padding:0;}
.vb-act .btn.iconb svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(14px);
  bottom:calc(var(--tabs) + var(--scrub) + var(--safeB) + 22px);
  background:var(--tx);color:var(--bg);font-size:13px;font-weight:600;
  padding:10px 17px;border-radius:99px;z-index:90;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:var(--shadow);white-space:nowrap;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* =========================================================
   ON THE CHEW — modelled species activity
   Ranked, with the reasoning one tap away. Collapsed by
   default so the card stays scannable on a phone.
   ========================================================= */
.chew{padding:14px;}
.chew-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.chew-sub{font-size:11.5px;color:var(--tx3);margin-top:3px;}
.chewnote{display:none;margin:9px 0 2px;}
.chewnote.on{display:block;}
.chew-foot{font-size:10.5px;color:var(--tx3);margin-top:11px;line-height:1.5;}

.spx{padding:11px 0 10px;border-top:1px solid var(--line);cursor:pointer;}
.spx:first-of-type{margin-top:9px;}
.spx-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.spx-top b{font-size:14.5px;font-weight:650;letter-spacing:-.02em;}
.spx-pc{font-size:13px;font-weight:700;letter-spacing:-.02em;}
.spx-pc.hi{color:var(--good);} .spx-pc.md{color:var(--mod);} .spx-pc.lo{color:var(--tx3);}
.spx-shut{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dgr);background:color-mix(in srgb,var(--dgr) 13%,transparent);
  padding:3px 8px;border-radius:99px;}
.spx-bar{height:3px;border-radius:2px;background:var(--s3);margin:7px 0 6px;overflow:hidden;}
.spx-bar i{display:block;height:100%;border-radius:2px;transition:width .25s;}
.spx-bar i.hi{background:var(--good);} .spx-bar i.md{background:var(--mod);}
.spx-bar i.lo{background:var(--s4);}
.spx-why{font-size:12px;color:var(--tx2);line-height:1.5;}
.spx.shut .spx-why{color:var(--dgr);}
.spx.shut .spx-top b{color:var(--tx3);}
/* factor chips: hidden until the row is tapped */
.spx-f{display:none;flex-wrap:wrap;gap:5px;margin-top:9px;}
.spx.open .spx-f{display:flex;}
.fchip{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;
  padding:4px 9px;border-radius:99px;background:var(--s2);
  border:1px solid var(--line);color:var(--tx);}
.fchip s{text-decoration:none;font-size:9px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tx3);}
.fchip.hi{border-color:color-mix(in srgb,var(--good) 40%,transparent);
  background:color-mix(in srgb,var(--good) 9%,transparent);}
.fchip.md{border-color:color-mix(in srgb,var(--mod) 38%,transparent);
  background:color-mix(in srgb,var(--mod) 9%,transparent);}
.fchip.lo{color:var(--tx3);}

/* map pin: likely species here */
.pin-sp{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--tx2);}
.pin-sp b{color:var(--tx);font-weight:650;}
.pin-sp .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.pin-sp .dot.hi{background:var(--good);} .pin-sp .dot.md{background:var(--mod);}

/* ---- Target species list ---- */
.fishgrp>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fishgrp>summary b{font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--good);
  background:color-mix(in srgb,var(--good) 12%,transparent);
  padding:2px 8px;border-radius:99px;}
.tsplist{display:flex;flex-wrap:wrap;gap:6px;}
.tsp{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:5px 10px;border-radius:99px;background:var(--s1);
  border:1px solid var(--line);color:var(--tx);}
.tsp i{width:6px;height:6px;border-radius:50%;background:var(--s4);flex:none;}
.tsp.on i{background:var(--good);}
.tsp.mid i{background:var(--mod);}
.tsp.off{color:var(--tx3);} .tsp.off i{background:var(--s4);}
.tsp.na{color:var(--tx3);} .tsp.na i{background:transparent;box-shadow:inset 0 0 0 1px var(--s4);}
.tsp.shut{color:var(--dgr);border-color:color-mix(in srgb,var(--dgr) 30%,transparent);
  background:color-mix(in srgb,var(--dgr) 8%,transparent);}
.tsp.shut i{background:var(--dgr);}

/* ---- On the chew, now nested inside Target species ---- */
.chew{background:var(--s1);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:12px;}
.chew-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);}

/* tide line scrub readout on the bite timeline */
.tlbox{touch-action:pan-y;}
.tlread{position:absolute;top:4px;transform:translateX(-50%);
  background:var(--tx);color:var(--bg);font-size:10.5px;font-weight:650;
  padding:3px 8px;border-radius:99px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:2;}
.tlread.on{opacity:1;}

/* =========================================================
   THE WEEK, WIND AND SEA ON ONE CHART
   Main flow, not behind a disclosure: "when is my window?" is
   the question the app exists to answer. Height is the only
   thing that changes across breakpoints — the drawing code
   reads clientWidth/clientHeight and lays itself out, so
   there is one implementation for phone, iPad and desktop.
   ========================================================= */
.wkcard{padding-bottom:10px;}
.wkhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:8px;min-height:16px;}
.wkread{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:11.5px;color:var(--tx3);}
.wkread b{font-weight:650;font-size:12px;color:var(--tx2);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.wkread span{font-size:10.5px;color:var(--tx3);white-space:nowrap;}
.wkread u{text-decoration:none;font-size:11px;color:var(--tx2);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* the plot owns its own box so the canvas can size from clientWidth/Height
   without the day labels feeding back into the height and oscillating */
.wkplot{position:relative;height:132px;touch-action:pan-y;}
.wkplot canvas{display:block;width:100%;height:100%;cursor:crosshair;}
.wkdays{position:absolute;inset:auto 0 -1px 0;height:12px;pointer-events:none;}
.wkdays span{position:absolute;transform:translateX(-50%);font-size:8.5px;font-weight:750;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);opacity:.8;white-space:nowrap;}
.wklegend{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:14px;
  font-size:10px;color:var(--tx3);}
.wklegend .lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.wklegend .lg::before{content:"";width:12px;height:2px;border-radius:2px;background:currentColor;}
.wklegend .lg-w::before{background:linear-gradient(90deg,#40c4a0,#f0c446,#e85452);height:2.4px;}
/* the gust swatch is a filled block now, matching the envelope it labels */
.wklegend .lg-g::before{height:8px;border-radius:2px;
  background:color-mix(in srgb,var(--rough) 26%,transparent);
  border-top:1px solid color-mix(in srgb,var(--rough) 55%,transparent);}
.wklegend .lg-s::before{background:var(--acc);opacity:.75;}
.wklegend .lg-b::before{height:8px;border-radius:2px;
  background:color-mix(in srgb,var(--tx3) 34%,transparent);}
.wklegend .wkhint{margin-left:auto;opacity:.7;}
@media (min-width:901px){.wkplot{height:156px;}}
@media (min-width:1180px){.wkplot{height:168px;}}
/* iPad and up in landscape have the height to spare and the extra 30 px is
   what makes the sea area readable underneath the wind trace */
@media (min-width:768px) and (orientation:landscape){.wkplot{height:172px;}}

/* a turning point the water barely moves through — see TIDE_STAND_M */
.tt.stand{opacity:.62;border-style:dashed;}
.tt .stt{font-size:8.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);border:1px solid var(--line2);border-radius:4px;padding:0 3px;line-height:1.5;}
.note.standnote{margin-top:8px;}

/* =========================================================
   SCRUB READOUT
   The numbers under the finger already on the ribbon. Fixed
   and hidden until a pointer touches it, so it occupies no
   layout at rest — the reason it can exist on a phone at all.
   ========================================================= */
#ribTip{position:fixed;z-index:60;pointer-events:none;transform:translateX(-50%);
  min-width:132px;max-width:min(74vw,240px);padding:7px 11px 6px;border-radius:11px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  border:1px solid var(--line2);box-shadow:var(--shadow);
  opacity:0;transition:opacity .13s ease;will-change:left,top;
  --rt:var(--acc);--caret:50%;}
#ribTip.on{opacity:1;}
/* caret, tracking the real pointer x even when the bubble is clamped */
#ribTip::after{content:"";position:absolute;top:100%;left:var(--caret);
  transform:translateX(-50%);border:5px solid transparent;
  border-top-color:var(--line2);}
#ribTip .rt-top{display:flex;align-items:baseline;gap:7px;}
#ribTip .rt-top b{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--tx2);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
#ribTip .rt-top s{text-decoration:none;margin-left:auto;font-size:9.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
#ribTip .rt-row{display:flex;align-items:baseline;gap:10px;margin-top:2px;}
#ribTip .rt-wind{display:flex;align-items:baseline;gap:3px;min-width:0;}
#ribTip .rt-wind b{font-size:19px;font-weight:650;letter-spacing:-.03em;color:var(--rt);
  font-variant-numeric:tabular-nums;line-height:1;}
#ribTip .rt-sea b{font-size:19px;font-weight:650;letter-spacing:-.03em;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1;}
#ribTip u{text-decoration:none;font-size:9.5px;color:var(--tx3);}
#ribTip .rt-wind s{text-decoration:none;font-size:10px;color:var(--tx2);font-weight:600;
  margin-left:1px;white-space:nowrap;}
#ribTip .rt-sea{display:flex;align-items:baseline;gap:3px;margin-left:auto;}
/* arrow rides with the wind value and carries its colour */
#ribTip .rt-wind i{flex:none;width:12px;height:12px;align-self:center;color:var(--rt);}
#ribTip .rt-wind i svg{width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block;}
#ribTip .rt-sub{margin-top:3px;font-size:9.5px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ribTip .rt-sub:empty{display:none;}
/* Phones: the bubble is the only thing on screen that matters mid-drag, so it
   can be a touch larger, but it must never crowd the ribbon it points at. */
@media (max-width:900px){
  #ribTip{min-width:124px;padding:6px 10px 5px;border-radius:10px;}
  #ribTip .rt-wind b,#ribTip .rt-sea b{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){#ribTip{transition:none;}}

/* ---- passage: searchable endpoints + pick on map ---- */
.planpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pickrow{display:flex;gap:5px;align-items:stretch;min-width:0;}
.pickrow input{flex:1;min-width:0;}
.pinb{flex:none;width:34px;border:1px solid var(--line2);border-radius:9px;
  background:var(--s1);color:var(--tx3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.14s;}
.pinb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.pinb:hover{color:var(--tx);border-color:var(--line2);}
.pinb.on{background:var(--acc);color:var(--accTx);border-color:transparent;}
.picknote{margin-top:8px;font-size:11.5px;color:var(--acc);font-weight:600;}
/* On a phone two fields side by side leaves ~120px each, which cannot show a
   place name AND its pin button. Stack them instead. */
@media (max-width:560px){.planpick{grid-template-columns:1fr;}}