/* The wave forecast app (web/) inside the club site, in club colours and type.
   Port of web/style.css: every rule is scoped to .wapp so the app's class names (.panel, .note, .row,
   .bar, .grid) cannot touch club pages. The app's own colour names live on :root, because mapview.js
   and streaks.js read them from the page root; none of them clash with shared.css names. */
:root{
  --panel:var(--surface); --accent:var(--amber); --land:#dde4dc; --current:#0b7285; --noaa:#c2187a;
  --tide:#2563eb; --sun:#d97706; --font-body:var(--f-body); --font-num:var(--f-display);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --land:#142029; --current:#4cc9e0; --noaa:#ff6fb5; --tide:#6ea8ff; --sun:#fbbf24}}
:root[data-theme="dark"]{--land:#142029; --current:#4cc9e0; --noaa:#ff6fb5; --tide:#6ea8ff; --sun:#fbbf24}

.wapp{font-size:15px;line-height:1.45}
.wapp .disclaimer{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--amber);border-radius:8px;padding:12px 16px;margin:0 0 18px}
.wapp .disclaimer p{margin:0;font-size:14px;line-height:1.5}
.wapp .disclaimer a{color:var(--amber-ink)}
.wapp .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:780px){.wapp .grid{grid-template-columns:minmax(0,480px) minmax(0,1fr);align-items:start}}
.wapp .chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;border-radius:999px;font:600 13px var(--font-body);cursor:pointer;min-height:36px}
.wapp .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wapp .chip.noaa[aria-pressed="true"]{background:var(--noaa);border-color:var(--noaa);color:#fff}
.wapp .chip:focus-visible,.wapp .dial:focus-visible,.wapp input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wapp .mapwrap{position:relative;aspect-ratio:2/3;width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--land)}
.wapp #map{position:absolute;inset:0}
.wapp #fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.wapp .maplibregl-ctrl-top-right,.wapp .maplibregl-ctrl-bottom-left,.wapp .maplibregl-ctrl-bottom-right{z-index:2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wapp .maplibregl-ctrl-group{background:var(--panel)}
  :root:not([data-theme="light"]) .wapp .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}}
:root[data-theme="dark"] .wapp .maplibregl-ctrl-group{background:var(--panel)}
:root[data-theme="dark"] .wapp .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.wapp .layers{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:12px;color:var(--muted)}
.wapp .legend{margin-top:10px}
.wapp .bar{height:10px;border-radius:2px;border:1px solid var(--line);margin-top:0;overflow:visible} /* also undoes shared.css .bar */
.wapp .ticks{display:flex;justify-content:space-between;font:500 11px var(--f-data);color:var(--muted);margin-top:3px}
.wapp .legend p{margin:6px 0 0;font-size:12px;color:var(--muted)}
.wapp .controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.wapp .panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px}
.wapp .readout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:end}
.wapp .lab{font:500 11px var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wapp .big{font:800 64px/.9 var(--font-num);font-variant-numeric:tabular-nums}
.wapp .big small{font-size:22px;font-weight:600;margin-left:4px;color:var(--muted)}
.wapp .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.wapp .stats b{display:block;font:700 21px/1.15 var(--font-num);font-variant-numeric:tabular-nums}
.wapp .tag{font:700 20px/1.1 var(--font-num);letter-spacing:normal;text-transform:none;padding:0;border-radius:0;background:none;color:var(--ink)} /* undoes shared.css .tag */
.wapp .delta{font-size:13px;color:var(--muted);margin-top:2px}
.wapp .dialbox{display:flex;justify-content:center}
.wapp .dial{width:100%;max-width:300px;height:auto;touch-action:none;cursor:grab;display:block}
.wapp .dial text{font-family:var(--font-num);fill:var(--ink)}
.wapp .row{display:grid;gap:6px}
.wapp .row label{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:14px}
.wapp .row output{font:500 14px var(--f-data);font-variant-numeric:tabular-nums;color:var(--amber-ink)}
.wapp input[type=range]{width:100%;accent-color:var(--accent);margin:0;min-height:28px}
.wapp #cur{accent-color:var(--current)}
.wapp .row .hint{display:flex;justify-content:space-between;font:500 10px var(--f-data);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.wapp .note{font-size:12.5px;color:var(--muted);margin:0}
.wapp .live{display:grid;gap:10px;margin-bottom:18px}
.wapp .live .livehead .lab{font-size:12px}
/* The forecast chart never squeezes below ~14 px per hour; narrower screens swipe it sideways. */
.wapp .chartscroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.wapp .chartinner{min-width:1000px}
.wapp .swipe{display:none}
@media (max-width:1061px){.wapp .swipe{display:block}}
.wapp .chart{width:100%;height:auto;display:block;cursor:pointer;touch-action:manipulation}
.wapp .chart text{font-family:var(--font-num);fill:var(--ink)}
.wapp .chart text.muted{fill:var(--muted)}
.wapp .chart.manual rect{opacity:.55}
.wapp .chart .tide,.wapp .chart .tidehalo{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.wapp .chart .tide{stroke:var(--tide);stroke-width:1.5;opacity:.75}
.wapp .chart .tidehalo{stroke:var(--panel);stroke-width:3.5;opacity:.6}
.wapp .chart .tidedot{fill:var(--tide);stroke:var(--panel);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.9}
.wapp .tiderow,.wapp .wxrow{position:relative;cursor:pointer}
.wapp .tiderow{height:22px;margin-top:-2px}
.wapp .wxrow{height:84px}
.wapp .tidemark,.wapp .wxcol{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font:600 13px/1.25 var(--font-num)}
.wapp .tidemark{color:var(--tide)}
.wapp .tidemark.low{opacity:.8}
.wapp .wxcol{display:grid;justify-items:center;gap:1px;color:var(--ink)}
.wapp .wxcol .wind,.wapp .wxcol .rain{color:var(--muted);font-weight:500;min-height:16px}
.wapp .wxcol .rain{color:var(--tide)}
.wapp .wxcol .wind{display:inline-flex;align-items:center;gap:1px}
.wapp .wx{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wapp .wx[data-kind=arrow]{width:13px;height:13px;stroke-width:2.6}
.wapp .wx .sun{stroke:var(--sun)}
.wapp .wx .drop{stroke:var(--tide)}
.wapp .wx circle.drop,.wapp .wx .drop circle{fill:var(--tide)}
.wapp .wx .bolt{stroke:var(--sun)}
.wapp .hourwx{margin:-4px 0 0;font-size:16px;color:var(--ink)}
.wapp #hour{accent-color:var(--ink)}
.wapp .hourrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 17px var(--font-body);min-height:36px}
/* Phones (one column): the map stays pinned at the top of the screen while the controls scroll under it,
   so every turn of the dial or slider shows on the map. The Map section's own box is dropped
   (display:contents) so the map can pin against the whole explorer; the overlay toggle and the legend
   move below the controls. The map fits the river to its box, and one finger still scrolls the page. */
@media (max-width:779px){
  .wapp .grid{gap:10px}
  .wapp .grid>section:first-child{display:contents}
  .wapp .mapwrap{position:sticky;top:0;z-index:3;aspect-ratio:auto;height:clamp(220px,42svh,400px);box-shadow:0 8px 18px rgba(6,12,26,.22)}
  .wapp .controls{order:1;gap:10px}
  .wapp .layers{order:2;margin-top:0}
  .wapp .legend{order:3;margin-top:0}
  .wapp .panel{padding:10px 12px}
  .wapp .big{font-size:46px}
  .wapp .big small{font-size:18px}
  .wapp .tag{font-size:18px}
  .wapp .stats{margin-top:8px;padding-top:8px}
  .wapp .stats b{font-size:17px}
  .wapp .dial{max-width:230px}
  .wapp .maplibregl-ctrl-attrib{font-size:10px;line-height:1.3} /* keep the map credit visible, on one line */
}