:root{--bg:#f4f8fb;--fg:#10222e;--card:#fff;--brand:#0b3d5c;--muted:#4a5d6b;--ctl:#64768a;--ic-period:#1f5fb0;--ic-height:#0b7a56;--ic-wind:#b8431a;--flat:#cfd8dc;--poor:#ef9a9a;--fair:#ffe082;--good:#81c784;--unknown:#eceff1}
@media (prefers-color-scheme:dark){:root{--bg:#0e1a22;--fg:#e6eef3;--card:#16262f;--brand:#4fc3f7;--muted:#9bb0bd;--ctl:#7a8f9c;--ic-period:#7db2f5;--ic-height:#4fcf9d;--ic-wind:#f2905f;--flat:#37474f;--poor:#8e3b3b;--fair:#7a5f14;--good:#2e6b32;--unknown:#263238}}
*{box-sizing:border-box}body{margin:0;font:16px/1.45 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#101C33;color:#fff;flex-wrap:wrap}
header a{color:#fff;text-decoration:none;margin-right:.9rem}.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem}.brand .logo{width:32px;height:32px;border-radius:7px;flex:none}.brandtext{display:flex;flex-direction:column;line-height:1.1}.tagline{font-size:.72rem;font-weight:400;opacity:.85;letter-spacing:.02em}
@media (max-width:359px){.tagline{display:none}}
header a:focus-visible,.bottomnav a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:8px}
.leavebox{max-width:min(22rem,calc(100vw - 2rem));border:2px solid var(--ctl);border-radius:12px;background:var(--card);color:var(--fg);padding:1rem 1.2rem}.leavebox::backdrop{background:#0008}.leavebox h2{margin:.1rem 0 .4rem;padding:0;border:0;font-size:1.1rem}.leavebox .row{justify-content:flex-start;margin-top:.8rem}
main{max-width:60rem;margin:0 auto;padding:1rem}footer{max-width:60rem;margin:0 auto;padding:1rem;font-size:.8rem;color:var(--muted)}
a{color:var(--brand)}.card{background:var(--card);border-radius:10px;padding:.8rem 1rem;margin:.6rem 0;box-shadow:0 1px 3px #0002;display:block;text-decoration:none;color:inherit}
.row{display:flex;justify-content:space-between;gap:.5rem;align-items:center;flex-wrap:wrap}
.badge{padding:.1rem .5rem;border-radius:999px;font-size:.8rem;font-weight:600}
.flat{background:var(--flat)}.poor{background:var(--poor)}.fair{background:var(--fair)}.good{background:var(--good)}.unknown{background:var(--unknown)}
.period{font-size:1.15rem;font-weight:700}.muted{color:var(--muted)}.warn{border-left:4px solid #e0a800;padding:.4rem .7rem;background:var(--card);margin:.6rem 0}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.85rem}th,td{padding:.25rem .4rem;text-align:center;white-space:nowrap}
tr.day th{text-align:left;background:var(--card)}td.r{font-weight:600}
.arrow{display:inline-block}button{font:inherit;padding:.4rem .8rem;border-radius:8px;border:1px solid var(--brand);background:var(--card);color:var(--fg)}
label{display:block;margin:.3rem 0}h1,h2{line-height:1.2}

/* Phones: keep every column, Rating included, visible without sideways scrolling. Tide is hidden (see the README note); period stays prominent. */
@media (max-width:480px){
  main{padding:.6rem}
  table{font-size:.75rem}
  th,td{padding:.2rem .15rem}
  .tide,.wc{display:none}
  td .badge{padding:.05rem .35rem;font-size:.7rem}
  td .period{font-size:1.05rem}
}

/* Charts. Colours: reference categorical slots (blue, aqua, orange), validated light and dark; neutrals for bands. */
.viz{--surface:#fcfcfb;--ink:#0b0b0b;--ink2:#52514e;--grid:#d9d8d3;--s-period:#2a78d6;--s-height:#1baf7a;--s-wind:#eb6834;--band0:#0000001a;--band1:#0000000d;--band2:#00000000;--hatch:#52514e}
@media (prefers-color-scheme:dark){.viz{--surface:#1a1a19;--ink:#f0efec;--ink2:#c3c2b7;--grid:#3b3b38;--s-period:#3987e5;--s-height:#199e70;--s-wind:#d95926;--band0:#ffffff1f;--band1:#ffffff0f;--band2:#ffffff00;--hatch:#c3c2b7}}
.fig{margin:.4rem 0 .9rem;padding:.4rem;background:var(--surface);border-radius:10px}
.plot{width:100%}.chart{display:block;max-width:100%;touch-action:pan-y}
.chart .ax,.chart .bandlabel,.chart .nowlabel{font:10px system-ui,sans-serif;fill:var(--ink2)}.chart .nowlabel{fill:var(--ink);font-weight:700}
.chart .grid{stroke:var(--grid);stroke-width:1}.chart .daytick{stroke:var(--grid);stroke-width:1;stroke-dasharray:1 3}
.chart .band-0{fill:var(--band0)}.chart .band-1{fill:var(--band1)}.chart .band-2{fill:var(--band2)}
.chart .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.chart .dot{stroke:none}
.chart .s-period{stroke:var(--s-period);stroke-width:2.5}.chart .dot.s-period{fill:var(--s-period)}
.chart .s-height{stroke:var(--s-height)}.chart .dot.s-height{fill:var(--s-height)}
.chart .s-wind{stroke:var(--s-wind)}.chart .dot.s-wind{fill:var(--s-wind)}
.chart .gust{stroke:var(--s-wind);stroke-dasharray:4 3;stroke-width:1.5;opacity:.8;fill:none}.chart circle.gust{fill:var(--s-wind)}
.chart .hatch{stroke:var(--hatch);stroke-width:1;opacity:.35}.chart .winbar{fill:var(--ink)}
.chart .ref{stroke:var(--ink2);stroke-width:1;stroke-dasharray:5 3}
.chart .now{stroke:var(--ink);stroke-width:1.5}.chart .cross{stroke:var(--ink);stroke-width:1}
.chart .arrow path{fill:var(--ink2)}
.readout{min-height:1.4em;margin:.2rem .2rem 0;font-size:.85rem;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;list-style:none;padding:0;margin:.2rem 0;font-size:.8rem;color:var(--muted)}
.sw{display:inline-block;width:1.2rem;height:.7rem;vertical-align:middle;border:1px solid currentColor}.swwin{background:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 5px)}.swnow{height:0;border-width:0 0 2px;border-color:var(--fg)}.swgust{height:0;border-width:0 0 2px;border-style:dashed}
.small{font-size:.8rem}.windyframe{width:100%;height:min(70vh,420px);border:0;border-radius:10px;margin:.5rem 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.chart .bandlabel,.chart .ax{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}

/* ---------- Redesign: hierarchy, overview, tabs, navigation ---------- */
:root{--line:#d5dee5;--elev:0 1px 2px #0b3d5c1a,0 4px 12px #0b3d5c14;--tap:44px}
@media (prefers-color-scheme:dark){:root{--line:#2c3e49;--elev:0 1px 2px #0006,0 4px 12px #0004}}
h1{font-size:1.8rem;margin:.3rem 0 .6rem}h2{font-size:1.2rem;margin:1.8rem 0 .6rem;padding-top:.4rem;border-top:1px solid var(--line)}h3{font-size:1.05rem;margin:0}
.topnav a{padding:.5rem .2rem;border-bottom:3px solid transparent}.topnav a[aria-current=page]{border-bottom-color:#fff;font-weight:700}
.bottomnav{display:none}
button,.chip{min-height:var(--tap);cursor:pointer}
.badge{border:1px solid #0003;letter-spacing:.02em}
.conf{font-size:.7rem;padding:.05rem .45rem;border-radius:999px;border:1px solid var(--muted);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.conf-unverified{border-style:dashed}
.hint{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border-radius:50%;border:1.5px solid var(--fg);font-size:.75rem;font-weight:700;margin-right:.3rem}
.tags{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.ovhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.seg{display:inline-flex;border:1.5px solid var(--brand);border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;background:var(--card);padding:.3rem .9rem}.seg button[aria-pressed=true]{background:var(--brand);color:var(--card);font-weight:700}
.seg.small button{padding:.2rem .7rem;font-size:.85rem}
.controls{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.4rem 0}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{border-radius:999px;padding:.1rem .9rem;background:var(--card);border:1.5px solid var(--ctl);color:var(--fg)}.chip[aria-pressed=true]{border-color:var(--brand);font-weight:700;box-shadow:inset 0 -3px 0 var(--brand)}
.legend2{font-size:.78rem;color:var(--muted);margin:.4rem 0}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.scard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--elev);padding:.7rem .9rem}
.scard .row{align-items:flex-start;flex-wrap:nowrap}.scard.slim{display:flex;gap:.6rem;align-items:center;padding:.4rem .9rem;box-shadow:none;border-style:dashed;grid-column:1/-1}
.cardlink{color:var(--fg);text-decoration:none;font-weight:700}.cardlink::after{content:"";position:absolute;inset:0;border-radius:12px}.cardlink:focus-visible::after{outline:3px solid var(--brand)}
.scard .retry{position:relative;z-index:1}
.sub{margin:.15rem 0 .4rem;font-size:.85rem}.next{margin:.4rem 0 0;font-size:.9rem;font-weight:600}
.strip{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.6rem;border-radius:5px;font-size:.7rem;border:1px solid #0002;overflow:hidden}
.cell i{font-style:normal;opacity:.75;font-size:.6rem}.cell b{font-size:.95rem}
.cell::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:calc(var(--lvl) * 3px + 1px);background:currentColor;opacity:.55}
.cell.r-flat{background:var(--flat)}.cell.r-poor{background:var(--poor)}.cell.r-fair{background:var(--fair)}.cell.r-good{background:var(--good)}.cell.r-none{background:transparent;border-style:dashed;color:var(--muted)}.cell.r-none::after{display:none}
#mapwrap{position:relative}#map{height:min(62vh,520px);min-height:320px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--elev);z-index:0}
@media (max-width:700px),(pointer:coarse) and (max-height:500px){#map{height:min(55vh,420px);height:min(55svh,420px);min-height:260px}}
.maptools{position:absolute;top:.5rem;right:.5rem;z-index:500}.maptools button{padding:.2rem .7rem;font-size:.85rem;box-shadow:var(--elev)}
#mapmsg{margin-top:.5rem;padding:.6rem .8rem;border-left:4px solid #e0a800;background:var(--card)}
.pinwrap{background:none;border:0}
.pin{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font:700 .65rem/1 system-ui,sans-serif;color:#0b0b0b}
.pinshape{position:absolute;left:-5px;top:-5px;width:56px;height:56px;stroke:#0b0b0b;stroke-width:2.5;stroke-linejoin:round;fill:var(--pf);filter:drop-shadow(0 1px 2px #0006)}
.pin .pinshape{z-index:0}.pin .pin-in{z-index:1}
.pin-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.pin .ico{color:inherit;stroke-width:2.4;vertical-align:baseline}
.pin-flat{--pf:#cfd8dc}.pin-poor{--pf:#ef9a9a}.pin-fair{--pf:#ffe082}.pin-good{--pf:#81c784}.pin-neutral{--pf:#eceff1;color:#37474f}.pin-neutral .pinshape{stroke:#37474f}
.keylist{list-style:none;margin:.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.4rem .8rem}.keyitem{display:flex;align-items:center;gap:.6rem;font-size:.85rem}.keypin{flex:none;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:#e8eef1;border-radius:12px}
.leaflet-marker-icon:focus-visible .pin{outline:3px solid var(--brand);outline-offset:2px}
.popup{display:grid;gap:.25rem;font:14px system-ui,sans-serif}
.spothead{margin-bottom:.3rem}.back{display:inline-block;padding:.3rem 0;text-decoration:none}
.tabs{position:sticky;top:0;z-index:50;display:flex;gap:.2rem;overflow-x:auto;background:var(--bg);border-bottom:1px solid var(--line);margin:0 -1rem;padding:0 1rem;scrollbar-width:none}
.tabs [role=tab]{flex:0 0 auto;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--fg);padding:.5rem .8rem}
.tabs [role=tab][aria-selected=true]{border-bottom-color:var(--brand);font-weight:700}
#panel{padding-top:.6rem;outline:none}#panel:focus-visible{outline:2px solid var(--brand)}
.nowcard{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--elev);padding:.8rem 1rem;margin:.5rem 0}
.nowmain{display:flex;gap:1rem;align-items:center}.bigperiod{font-size:2.8rem;font-weight:800;line-height:1}.bigperiod small{font-size:1rem;font-weight:600}
.reasons{margin:.6rem 0 0;padding-left:1.1rem;font-size:.9rem}
.hintline,.note{font-size:.85rem;color:var(--muted)}.wins{padding-left:0;list-style:none}.wins li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;margin:.4rem 0}
.info{padding-left:1.1rem}.info li{margin:.3rem 0}
@media (max-width:480px){
  header nav.topnav{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;text-decoration:none;color:var(--muted);font-size:.75rem;border-top:3px solid transparent}
  .bottomnav a[aria-current=page]{color:var(--fg);font-weight:700;border-top-color:var(--brand)}.bottomnav .ic{font-size:1.1rem}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tabs{margin:0 -.6rem;padding:0 .6rem}
  h1{font-size:1.55rem}
}
.popup .badge{color:#0b0b0b}.popup .badge.flat{background:#cfd8dc}.popup .badge.poor{background:#ef9a9a}.popup .badge.fair{background:#ffe082}.popup .badge.good{background:#81c784}
.leaflet-popup-content{color:#0b0b0b}.popup a{color:#0b3d5c}
@media (max-width:480px){.tabs [role=tab]{padding:.5rem .55rem;font-size:.95rem}}

/* ---------- Sessions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.3rem 1rem;border:1.5px solid var(--brand);border-radius:8px;background:var(--card);color:var(--fg);text-decoration:none;font:inherit}
.btn.primary,button.primary{background:var(--brand);color:var(--card);font-weight:700}
button.danger{border-color:#b3261e;color:#b3261e;background:var(--card)}
@media (prefers-color-scheme:dark){button.danger{border-color:#f2b8b5;color:#f2b8b5}}
form label{display:block;margin:.8rem 0}form input[type=text],form input[type=number],form input[type=datetime-local],form select,form textarea{display:block;width:100%;min-height:var(--tap);font:inherit;padding:.4rem .6rem;border:1.5px solid var(--ctl);border-radius:8px;background:var(--card);color:var(--fg)}
.chipset{border:0;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.4rem}.chipset legend{font-weight:700;padding:0;margin-bottom:.3rem}
.chip2{margin:0!important;position:relative}.chip2 input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.chip2 span{display:inline-flex;align-items:center;min-height:var(--tap);padding:.2rem .9rem;border:1.5px solid var(--ctl);border-radius:999px;background:var(--card)}
.chip2 input:checked+span{border-color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand);font-weight:700}.chip2 input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.sessions,.sumlist{list-style:none;padding:0;display:grid;gap:.7rem}.session{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--elev);padding:.7rem .9rem}
.session .row{justify-content:space-between;gap:.5rem}.qbadge{font-weight:700;border:1.5px solid var(--fg);border-radius:6px;padding:.05rem .5rem}.snote{white-space:pre-wrap;margin:.4rem 0}
.datarow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.filebtn{display:inline-flex;align-items:center;gap:.4rem;margin:0}.inline{margin:0}
.account{background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:.7rem .9rem}
.sumlist li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}.empty{padding:1rem;border:1px dashed var(--line);border-radius:10px}
select{font:inherit;color:var(--fg);background:var(--card);border:1.5px solid var(--ctl);border-radius:8px;min-height:var(--tap);padding:.2rem .5rem}
.session [data-retry]{display:block;margin-top:.4rem}
.legacy{border-left:4px solid #e0a800;padding:.2rem .6rem;margin:.4rem 0;font-size:.8rem;color:var(--muted)}

/* ---------- Session questionnaire ---------- */
.q{max-width:34rem;margin:0 auto}
.qtop{display:flex;justify-content:space-between;align-items:center;margin:.2rem 0 .6rem}
.qback{border:0;background:none;color:var(--brand);font-size:1.05rem;padding:.3rem .6rem .3rem 0;min-height:var(--tap)}
.qstep{color:var(--muted);font-size:.95rem}
.qprog{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:1rem}.qprog>div{height:100%;background:var(--brand);border-radius:99px}
.qfield{border:0;margin:0;padding:0;min-width:0}.qfield legend{padding:0;margin:0 0 .4rem;width:100%}
.q h1{font-size:1.6rem;margin:.2rem 0 .5rem;line-height:1.2}.q h1:focus{outline:none}
.qhint{color:var(--muted);margin:.2rem 0 .8rem}.qsmall{color:var(--muted);font-size:.85rem;margin:.2rem 0}.qnote{margin:.8rem 0 .2rem}
.qopts{display:grid;gap:.6rem;margin:.6rem 0}
.qopt{position:relative;display:block;margin:0}.qopt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.qopt .qbig{display:flex;align-items:center;gap:.7rem;min-height:3.4rem;padding:.7rem 1rem;border:2px solid var(--ctl);border-radius:14px;background:var(--card);font-size:1.1rem;font-weight:600}
.qopt .qsmall{padding:0 1rem;margin-top:.15rem}
.qopt input:checked+.qbig{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);background:var(--card)}
.qopt input:checked+.qbig::after{content:"\2713";margin-left:auto;color:var(--brand);font-weight:700}
.qopt input:focus-visible+.qbig{outline:3px solid var(--brand);outline-offset:2px}
.qfaces{grid-template-columns:repeat(5,1fr);gap:.35rem}.qfaces .qbig{flex-direction:column;justify-content:center;text-align:center;gap:.25rem;padding:.6rem .1rem;font-size:.78rem;line-height:1.15;min-height:6rem}
.qfaces .qopt input:checked+.qbig::after{content:none}.qfaces .face{color:var(--fg)}.qfaces input:checked+.qbig .face{color:var(--brand)}
.qtext{display:block;font-weight:600;margin:.8rem 0}
.qtext input,.qtext textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem;font:inherit;border:2px solid var(--ctl);border-radius:10px;background:var(--card);color:var(--fg);min-height:3rem}
.qtext input:focus-visible,.qtext textarea:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
.qnav{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0}.qnav .primary{min-width:9rem;font-size:1.05rem}.qnav button,.qnav .btn{min-height:3rem}
.qskip{border:0;background:none;color:var(--brand);text-decoration:underline;font-size:1rem;min-height:var(--tap);padding:0 .6rem}
.qerr{border-left:4px solid #b3261e;background:var(--card);padding:.5rem .8rem;margin:.8rem 0;font-weight:600}.qerr[hidden]{display:none}
.qreview{margin:.6rem 0}.qrow{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.qrow dt{grid-column:1/2;color:var(--muted);font-size:.85rem}.qrow dd{margin:0;grid-column:1/2;font-weight:600;overflow-wrap:anywhere}.qrow .qchg{grid-column:2/3;grid-row:1/3;align-self:center}
.qlink{border:0;background:none;color:var(--brand);text-decoration:underline;font-size:1rem;min-height:var(--tap);padding:0 .3rem}
.stitle{margin:.1rem 0}.sbits{margin:.2rem 0;color:var(--muted)}
@media (max-width:480px){.q .qnav{position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));z-index:5;background:var(--bg);padding:.6rem 0;margin:.8rem 0 0;box-shadow:0 -8px 8px -6px var(--bg)}}

/* ---------- Map name labels ---------- */
.spotlabel{background:none;border:0;pointer-events:none}
.spotlabel span{display:block;white-space:nowrap;font:600 12px/18px system-ui,sans-serif;text-align:center;padding:0 6px;height:20px;border-radius:5px;background:#fffffff0;color:#0b0b0b;border:1px solid #0b0b0b55;box-shadow:0 1px 2px #0003}
@media (prefers-color-scheme:dark){.spotlabel span{background:#0e1a22f0;color:#e6eef3;border-color:#e6eef355}}

/* ---------- Map sharks (just for fun) ---------- */
.sharkfin{background:none;border:0}.sharkfin .fin{display:block;animation:finbob 4.2s ease-in-out infinite;filter:drop-shadow(0 1px 1px #0004)}
.sharkfin:nth-child(2n) .fin{animation-delay:-1.7s;animation-duration:5.1s}.sharkfin:nth-child(3n) .fin{animation-delay:-3s}
@keyframes finbob{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@media (prefers-reduced-motion:reduce){.sharkfin .fin{animation:none}}
.sharktoast{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:1000;background:#101C33;color:#fff;padding:.5rem .9rem;border-radius:999px;font-size:.95rem;box-shadow:0 2px 8px #0005;pointer-events:none;max-width:90%;text-align:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.qnav button:disabled{background:var(--card);color:var(--muted);border-color:var(--ctl);cursor:default}

/* ---------- Icons next to labels ---------- */
.ico{flex:none;vertical-align:-3px}.ico-period{color:var(--ic-period)}.ico-height{color:var(--ic-height)}.ico-wind{color:var(--ic-wind)}
.ilabel{display:inline-flex;align-items:center;gap:.3rem}.charttitle{display:flex;align-items:center;gap:.4rem;font-weight:700;margin:0 0 .2rem}
th.th-icon span{margin-left:.25rem}th.th-icon .ico{vertical-align:-3px}
.ilegend{display:flex;align-items:flex-start;gap:.4rem}.ilegend .ico{margin-top:.1rem}
.nowfacts{list-style:none;padding:0;margin:.2rem 0 0;display:grid;gap:.15rem;color:var(--muted)}.nowfacts b{color:var(--fg)}.charttitle .ico{vertical-align:middle}

.guide h3{margin:1rem 0 .2rem;font-size:1.05rem}.guide h4{margin:.8rem 0 .1rem;font-size:1rem}.guide .info{margin:.1rem 0 .4rem}
/* ---------- Favourites banner ---------- */
.favban[hidden]{display:none}.favban{display:flex;gap:.6rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;box-shadow:var(--elev);padding:.3rem .6rem .3rem .9rem;margin:.2rem 0 .8rem}
.favban ul{flex:1;min-width:0;list-style:none;margin:0;padding:0}
.favban a{display:flex;align-items:center;min-height:var(--tap);color:var(--fg);text-decoration:underline;text-underline-offset:3px}.favban a.storm{font-weight:700}
.favban button{flex:0 0 auto;align-self:center;padding:.1rem .8rem}
.star{color:var(--brand);margin-right:.3rem}