:root{
  --sea:#d5e5ec; --ink:#1b2730; --muted:#5c6c77; --faint:#8d9ba4; --line:#cfd8dd; --panel:#f6f3ea; --panel-2:#ece7d9; --page:#eef2f3;
  --glass:rgba(246,243,234,.9); --accent:#c4522a; --calm:#1f9a63; --marg:#dfa227; --rough:#d0463d; --none:#9aa5ac;
  --calm-bg:rgba(31,154,99,.14); --marg-bg:rgba(223,162,39,.16); --rough-bg:rgba(208,70,61,.14);
  --shadow:0 1px 2px rgba(20,35,45,.1), 0 10px 30px rgba(20,35,45,.14); --label:#3e4c30;
}
@media (prefers-color-scheme: dark){ :root{
  --sea:#0f1e29; --ink:#e7edf0; --muted:#98a8b1; --faint:#6d7d87; --line:#243541; --panel:#16232c; --panel-2:#1d2d38; --page:#0b151c;
  --glass:rgba(22,35,44,.88); --accent:#e9774a; --calm:#3cc487; --marg:#f0b53a; --rough:#f06a5f; --none:#5f6f79;
  --calm-bg:rgba(60,196,135,.16); --marg-bg:rgba(240,181,58,.16); --rough-bg:rgba(240,106,95,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45); --label:#c9d3b4;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--sea);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4;overflow:hidden}
.narrow{font-family:"Archivo Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,.spot-mk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#map{position:fixed;inset:0}
.overlay{position:fixed;inset:0;pointer-events:none}
#wave-canvas{opacity:.9}
.hud{position:fixed;z-index:5;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}

/* header */
.hud.top{top:12px;left:12px;right:12px;display:flex;align-items:center;gap:16px;padding:8px 12px;flex-wrap:nowrap;overflow:hidden}
.brand{display:flex;flex-direction:column;line-height:1.05;min-width:150px}
.brand .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.brand h1{margin:2px 0 0;font-size:22px;font-weight:700;letter-spacing:.01em}
.chips{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--page);min-height:40px;flex:none}
.chip .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1}
.chip .v{font-size:14px;font-weight:500;line-height:1.15;white-space:nowrap}
.chip .sub{font-size:11px;color:var(--muted);line-height:1.1;white-space:nowrap}
.chip svg{width:24px;height:24px;flex:none}
.chip.stale{border-color:var(--marg)} .chip.dead{border-color:var(--rough)}
.tally{display:flex;gap:6px;align-items:center}
.tally b{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot.calm{background:var(--calm)} .dot.marg{background:var(--marg)} .dot.rough{background:var(--rough)} .dot.none{background:var(--none)}
.iconbtn{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--page);font-size:18px;flex:none}

/* tools */
.hud.tools{left:12px;top:84px;width:180px;padding:10px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 170px);overflow-y:auto}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--page)}
.seg button{padding:7px 0;font-weight:600;font-size:13px;letter-spacing:.04em}
.seg button.on{background:var(--accent);color:#fff}
.toggles{display:flex;flex-direction:column;gap:2px}
.tg{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:13px;user-select:none}
.tg:hover{background:var(--page)}
.tg input{position:absolute;opacity:0;width:0;height:0}
.tg span{display:flex;align-items:center;gap:9px;flex:1}
.tg .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--line);background:var(--page);flex:none;position:relative}
.tg input:checked + span .sw{box-shadow:inset 0 0 0 2px var(--panel)}
.sw.wind{background:linear-gradient(90deg,#8cd2e6,#ffd9a0)} .sw.windshade{background:linear-gradient(90deg,#c8e6f0,#ff9a55)} .sw.waves{background:repeating-linear-gradient(0deg,#fff 0 2px,#5aa9c9 2px 5px)}
.sw.sea{background:linear-gradient(90deg,#5ac8eb,#e0bc46,#d54b3d)} .sw.clouds{background:linear-gradient(180deg,#fff,#cfd6df)} .sw.sat{background:linear-gradient(180deg,#333,#bbb)}
.sw.rain{background:linear-gradient(180deg,#5aa0ff,#4030b0)} .sw.sst{background:linear-gradient(90deg,#4a82dc,#f0c85a,#e65a46)} .sw.spots{background:radial-gradient(circle,#1f9a63 45%,transparent 50%)}
.sw.labels{background:var(--page);font:italic 700 9px/14px "Archivo Narrow",sans-serif;text-align:center;color:var(--label)} .sw.labels::after{content:"Aa"}
.sw.tide{background:linear-gradient(180deg,transparent 45%,#3b8fc7 45%)}
.tg input:not(:checked) + span{opacity:.62}
.tg input:not(:checked) + span .sw{filter:grayscale(.8);opacity:.5}
.more{border-top:1px solid var(--line);padding-top:8px;font-size:12.5px}
.more summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.more .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0}
.more select,.more input[type=range]{max-width:96px}
.more button{border:1px solid var(--line);border-radius:6px;padding:5px 8px;width:100%;margin-top:4px;background:var(--page)}

/* time */
.hud.time{left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 14px;width:min(720px,calc(100vw - 24px))}
.hud.time input[type=range]{flex:1;accent-color:var(--accent)}
.hud.time button{padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:var(--page)}
.hud.time button[disabled]{opacity:.5;cursor:default}
.hud.time .when{font-size:13.5px;font-weight:500;min-width:180px;white-space:nowrap}
.hud.time .when small{color:var(--muted);font-weight:400}

/* legend */
.hud.legend{right:12px;bottom:72px;padding:8px 12px;display:flex;gap:12px;font-size:12px;align-items:center}
.hud.legend span{display:inline-flex;align-items:center;gap:5px}
.hud.legend .kinds{gap:6px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
.mk{width:10px;height:10px;display:inline-block;background:var(--none)}
.mk.beach{border-radius:50%} .mk.bar{transform:rotate(45deg) scale(.85)} .mk.anch{border-radius:2px}

/* panel */
.hud.panel{right:12px;top:84px;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 190px);overflow-y:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ph h2{margin:0;font-size:21px;font-weight:700;line-height:1.1}
.ph .sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;flex:none}
.pill.calm{background:var(--calm-bg);color:var(--calm)} .pill.marg{background:var(--marg-bg);color:var(--marg)} .pill.rough{background:var(--rough-bg);color:var(--rough)} .pill.none{background:var(--panel-2);color:var(--muted)}
.reasons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px}
.reasons li{padding-left:14px;position:relative}
.reasons li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.reasons li.bad::before{background:var(--rough)} .reasons li.warn::before{background:var(--marg)} .reasons li.good::before{background:var(--calm)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.kv .cell{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--page);border:1px solid var(--line);border-radius:6px}
.kv .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kv .v{font-size:16px;font-weight:500;line-height:1.15}
.kv .v small,.kv small{font-size:11.5px;color:var(--muted);font-weight:400}
h3{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.strip{display:grid;grid-template-columns:repeat(17,1fr);gap:2px}
.strip .blk{height:32px;border-radius:3px;position:relative;cursor:pointer;border:0;padding:0}
.strip .blk.calm{background:var(--calm)} .strip .blk.marg{background:var(--marg)} .strip .blk.rough{background:var(--rough)} .strip .blk.none{background:var(--none)}
.strip .blk.night{opacity:.5} .strip .blk.cur{outline:2px solid var(--accent);outline-offset:1px}
.strip .blk.dr::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:3px;background:var(--page);opacity:.9;border-radius:2px}
.striplbl{display:grid;grid-template-columns:repeat(17,1fr);gap:2px;font-size:9px;color:var(--muted);text-align:center}
.striplbl span:nth-child(odd){visibility:hidden}
.days{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fcrow{font-size:12.5px;color:var(--muted);min-height:2.6em} .fcrow b{color:var(--ink);font-weight:500}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.list{display:flex;flex-direction:column;gap:2px}
.row-btn{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;text-align:left;width:100%}
.row-btn:hover{background:var(--page)}
.row-btn .nm{flex:1;font-weight:500} .row-btn .is{color:var(--muted);font-size:12px}
.glyph{width:12px;height:12px;flex:none}
.back{font-size:12.5px;color:var(--accent);font-weight:600;padding:0;text-align:left}
.sun{font-size:12.5px;color:var(--muted)} .sun b{color:var(--ink);font-weight:500}
.tidechart{width:100%;height:110px;display:block}
.tidechart .curve{fill:none;stroke:#3b8fc7;stroke-width:1.6} .tidechart .fill{fill:#3b8fc7;opacity:.15} .tidechart .now{stroke:var(--accent);stroke-width:1.5} .tidechart text{fill:var(--muted);font-size:10px} .tidechart .axis{stroke:var(--line)}
.hilo{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px} .hilo b{font-weight:500}

/* map markers (DOM) */
.isl-lbl{font-family:"Archivo Narrow","Arial Narrow",sans-serif;font-style:italic;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--label);font-size:13px;pointer-events:none;white-space:nowrap;text-shadow:0 0 3px var(--sea),0 0 6px var(--sea)}
.isl-lbl.small{font-size:10px;letter-spacing:.06em} .isl-lbl.usvi{opacity:.55}
.mk-wrap{width:0;height:0}
.spot-mk{width:16px;height:16px;position:relative;left:-8px;top:-8px;cursor:pointer}
.isl-lbl{position:relative;transform:translate(-50%,-50%);display:inline-block}
.spot-mk .shape{position:absolute;inset:2px;background:var(--none);border:1.5px solid var(--page);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.spot-mk.beach .shape{border-radius:50%} .spot-mk.bar .shape{transform:rotate(45deg) scale(.86)} .spot-mk.anchorage .shape{border-radius:3px}
.spot-mk.calm .shape{background:var(--calm)} .spot-mk.marg .shape{background:var(--marg)} .spot-mk.rough .shape{background:var(--rough)}
.spot-mk:hover .shape{transform:scale(1.3)} .spot-mk.bar:hover .shape{transform:rotate(45deg) scale(1.1)}
.spot-mk .fac{position:absolute;left:50%;top:50%;width:1.5px;height:13px;background:var(--ink);opacity:.6;transform-origin:50% 0;margin-left:-.75px}
.spot-mk.sel::after{content:"";position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:50%}
.spot-mk .nm{position:absolute;left:20px;top:0;font-size:11.5px;font-weight:500;white-space:nowrap;color:var(--ink);text-shadow:0 0 3px var(--sea),0 0 5px var(--sea);pointer-events:none;display:none}
.zoomed .spot-mk .nm{display:block}
.toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:9;background:var(--rough);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;box-shadow:var(--shadow)}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-bottom-left{bottom:2px}
@media (max-width:820px){.maplibregl-ctrl-bottom-left{display:none}}

@media (max-width:820px){
  .hud.top{right:12px;padding:6px 10px;gap:10px}
  .brand h1{font-size:18px} .brand{min-width:120px}
  .hud.tools{top:auto;bottom:74px;left:12px;right:12px;width:auto;flex-direction:row;align-items:center;gap:8px;padding:8px;max-height:none;overflow-x:auto}
  .toggles{flex-direction:row;gap:2px} .tg{padding:5px 7px;white-space:nowrap} .more{border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:8px}
  .more[open]{position:absolute;bottom:56px;left:0;background:var(--glass);padding:10px;border:1px solid var(--line);border-radius:8px}
  .hud.legend{display:none}
  .hud.time{bottom:12px;padding:6px 10px} .hud.time .when{min-width:0;font-size:12px}
  .hud.panel{top:auto;bottom:130px;left:12px;right:12px;width:auto;max-height:45vh}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }