:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; color:#e8f3f5; background:#09232f; }
* {box-sizing:border-box} body {margin:0} #map {position:absolute;inset:0} button,select,input,summary {cursor:pointer}
header {position:absolute;top:0;left:0;right:0;height:62px;background:#081c29ed;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:20px;border-bottom:1px solid #28424e;z-index:2}
header strong {font-size:22px;letter-spacing:1px} header strong span {font-size:11px;color:#75dfcc;border:1px solid #528f87;padding:5px;border-radius:5px;vertical-align:middle;margin-left:8px}
#validity {font-size:12px;color:#bbd2da;text-align:right}
#controls {position:absolute;left:20px;top:80px;width:286px;max-height:calc(100dvh - 105px);overflow:auto;z-index:3;background:#0b2231f5;border:1px solid #35505f;border-radius:12px;box-shadow:0 8px 32px #0005}
summary {padding:15px 16px;font-size:14px;font-weight:650;list-style:none;display:flex;justify-content:space-between} summary::-webkit-details-marker {display:none} #controls section {padding:0 16px 16px}
label {display:block;font-size:12px;color:#c4dbe1;margin:13px 0 6px}
select,button {width:100%;font:inherit;font-size:12px;color:#eef9fa;background:#143445;border:1px solid #40616e;border-radius:7px;padding:10px 8px}
select:focus-visible,button:focus-visible,summary:focus-visible {outline:2px solid #6ae4ce;outline-offset:2px} select:disabled,button:disabled {opacity:.6;cursor:wait}
.divider {height:1px;background:#304652;margin:12px 0} .check {display:flex;align-items:center;gap:7px;margin:10px 0}.check input {accent-color:#6ce1c9} a {display:block;font-size:11px;color:#8cdacf;margin-top:15px}
   
.crosshair {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff9;text-shadow:0 1px 3px #000;font-weight:200;font-size:20px}
.legend {position:absolute;bottom:52px;left:50%;transform:translateX(-50%);width:440px;max-width:calc(100% - 36px);background:#0b2231f2;border:1px solid #35505f;border-radius:10px;padding:12px 16px;pointer-events:none} .legend>div:first-child {display:flex;justify-content:space-between;font-size:12px;margin-bottom:9px}.legend p {font-size:10px;color:#bed3dc;margin:5px 0 9px} #ramp {height:15px;border-radius:3px} .ticks {display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:#d1e1e8}
#status {position:absolute;left:0;right:0;bottom:0;min-height:32px;padding:8px 22px;font-size:11px;background:#081c29ed;color:#bfd4de;text-align:center} .maplibregl-ctrl-top-right {top:78px;right:10px}.maplibregl-ctrl-bottom-right {bottom:32px}.maplibregl-ctrl-attrib {font-size:9px!important}
#loading {position:absolute;inset:62px 0 32px;z-index:5;background:#071a2df2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;font-size:14px} #loading span {height:25px;width:25px;border-radius:50%;border:2px solid #395264;border-top-color:#77dfcd;animation:spin 1s linear infinite} #loading[hidden],#error[hidden] {display:none} #error {position:absolute;bottom:165px;left:50%;transform:translateX(-50%);z-index:6;background:#702f34;color:#fff;padding:16px;border-radius:10px;max-width:90%;font-size:13px}
@keyframes spin {to {transform:rotate(360deg)}}
@media (max-width:760px) {header {padding:0 12px}header strong {font-size:17px}header strong span {font-size:9px;margin-left:2px}#validity {font-size:10px;max-width:160px}#controls {left:10px;top:73px;width:260px;max-height:calc(100dvh - 130px)}.legend {bottom:66px;padding:10px 12px}#status {font-size:10px;padding:6px;min-height:43px}.maplibregl-ctrl-bottom-right {bottom:43px}.maplibregl-ctrl-top-right {top:69px;right:0}#loading {bottom:43px} }

.direction-canvas {position:absolute;inset:0;pointer-events:none;z-index:1}
.pair {display:grid;grid-template-columns:1fr 1fr;gap:10px}
#controls {max-height:calc(100dvh - 255px)}
#timeline {position:absolute;bottom:42px;left:330px;right:24px;max-width:1050px;margin:auto;background:#0b2231f5;border:1px solid #35505f;border-radius:12px;padding:12px 16px;z-index:3;box-shadow:0 8px 32px #0005}
.time-heading {display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:10px}
#frame-count {margin-left:auto;color:#91b9c4;font-size:10px;white-space:nowrap}
#frame-loading {color:#80e4ce;font-size:11px}
.time-controls {display:flex;align-items:center;gap:8px}
.time-controls button {width:34px;height:33px;padding:4px;font-size:20px;flex-shrink:0}
.time-controls #play {width:42px;color:#05222a;background:#82e2cd;border-color:#82e2cd;font-size:15px}
.time-controls input {min-width:40px;flex:1;accent-color:#82e2cd}
.time-controls select {width:90px;padding:7px}
.time-footer {display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:10px;color:#b1cbd3}
.time-footer .check {font-size:10px;margin:0}
.legend {bottom:181px;left:auto;right:24px;transform:none;width:420px}
#error {bottom:292px}
.crosshair {z-index:2}
#status {z-index:2}
@media (max-width:1000px) and (min-width:761px) {.legend {width:360px}}
@media (max-width:760px) {
  #timeline {left:10px;right:10px;bottom:53px;padding:10px;max-width:none}
  .time-heading {font-size:11px;gap:6px}#frame-count {font-size:9px}
  .time-controls {gap:5px}.time-controls button {width:28px}.time-controls #play {width:32px}.time-controls select {width:75px;font-size:10px}
  .time-footer {font-size:9px}.legend {bottom:189px;right:10px;left:10px;width:auto;max-width:none;padding:8px 10px}
  #controls {max-height:calc(100dvh - 360px)}
  #error {bottom:291px}
}

.maplibregl-ctrl-bottom-right {bottom:36px;right:auto;left:10px;z-index:4}
.maplibregl-ctrl-attrib {max-width:286px}
@media(max-width:760px){.maplibregl-ctrl-bottom-right{bottom:160px;right:8px;left:auto}}

#wind-key {border-top:1px solid #35505f;margin-top:10px;padding-top:3px}
#wind-key[hidden] {display:none}
.wind-references {display:flex;justify-content:space-between;gap:10px}
.wind-references>div {display:flex;align-items:center;gap:7px;font-size:10px}
.wind-symbol {width:60px;height:16px;position:relative;display:inline-flex;align-items:center;overflow:hidden}
.wind-symbol svg {stroke:#eefaff;stroke-width:1.5;fill:none}
.wind-symbol i {display:none;position:absolute;width:12px;height:2px;top:7px;left:-12px;background:linear-gradient(90deg,transparent,#fff);animation:reference-flow var(--duration,2s) linear infinite;animation-play-state:var(--motion-state,running)}
#wind-key[data-mode=trails] svg {display:none}
#wind-key[data-mode=trails] i {display:block}
@keyframes reference-flow {from{transform:translateX(0)}to{transform:translateX(60px)}}


#map-screen {position:relative;height:100dvh;isolation:isolate}
#map {z-index:0;isolation:isolate}
#show-beaches {position:absolute;right:20px;top:164px;z-index:3;width:auto;display:flex;gap:18px;align-items:center;background:#0b2231f5;box-shadow:0 4px 20px #0003}
#beach-error {position:absolute;right:20px;top:204px;z-index:3;max-width:260px;background:#702f34;padding:12px;border-radius:8px;font-size:12px}
.beach-marker {width:14px;height:14px;z-index:2}
.beach-point {position:relative;display:block;width:14px;height:14px;padding:0;border:2px solid #fff;border-radius:50%;background:#20b8a5;box-shadow:0 1px 7px #0009}
.beach-point.selected {background:#ffcf70;box-shadow:0 0 0 3px #ffcf7044,0 1px 7px #0009}
.beach-label {position:absolute;left:22px;top:-12px;white-space:nowrap;font-size:11px;font-weight:600;background:#082330ed;color:#fff;padding:4px 7px;border:1px solid #73a8ad;border-radius:5px;line-height:16px;box-shadow:0 2px 8px #0004}
.beach-point.label-hidden .beach-label {visibility:hidden}
.beach-marker:has(.beach-point:hover),.beach-marker:has(.beach-point:focus-visible) {z-index:4}
#beach-dashboard {min-height:calc(100dvh - 64px);background:#081b28;border-top:1px solid #35505f;padding:44px 32px 64px}
#beach-dashboard[hidden],#beach-error[hidden] {display:none}
.dashboard-inner {max-width:1160px;margin:0 auto}
.dashboard-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
#beach-location {font-size:13px;color:#8dc0c6;margin:0 0 8px}
#beach-title {margin:0;font-size:32px;font-weight:600;letter-spacing:-.6px}
#beach-title:focus {outline:none}
#back-to-map {width:auto;padding:11px 16px}
.chart-card {background:#0e2736;border:1px solid #304e5e;border-radius:14px;padding:26px}
.chart-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.chart-heading h2 {font-size:16px;font-weight:600;margin:0}
#chart-value {font-size:13px;color:#8de4d3;font-variant-numeric:tabular-nums}
#beach-period,.chart-footer {font-size:12px;color:#9ebbc8;line-height:1.5}
#beach-period {margin:12px 0 22px}.chart-footer {margin:8px 0 0}
#beach-chart svg {display:block;width:100%;touch-action:pan-y;overflow:visible}
.chart-grid {stroke:#294858;stroke-width:1}
.chart-tick {fill:#a7c2ce;font-size:12px;font-family:inherit}
.wave-series {stroke:#79dec9;stroke-width:2.5}
.chart-cursor {stroke:#8eb4bd;stroke-width:1;stroke-dasharray:4 5}
.chart-dot {fill:#79dec9;stroke:#0e2736;stroke-width:2}
@media(max-width:760px){
  #show-beaches {right:10px;top:154px;font-size:11px;padding:8px;gap:8px}
  #beach-dashboard {padding:28px 14px 40px}
  .dashboard-heading {gap:14px;margin-bottom:20px}
  #beach-title {font-size:25px}#back-to-map {font-size:11px;padding:9px;white-space:nowrap}
  .chart-card {padding:18px 12px}.chart-heading {gap:12px}.chart-heading h2 {font-size:15px}
  #beach-period {font-size:11px}#chart-value {font-size:12px}
}

/* Animation rail: dates follow the actual forecast-record positions. */
.time-controls {align-items:flex-start;gap:12px}
.time-controls #play {width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;line-height:1}
.time-controls select {height:38px;flex-shrink:0}
.time-track {flex:1;min-width:0;padding-top:9px}
.time-controls #time {display:block;width:100%;height:20px;margin:0}
#time-dates {position:relative;height:23px;margin:0 8px;color:var(--muted,#526e73);font-size:10px;font-variant-numeric:tabular-nums}
.time-date {position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap}
.time-date::before {content:'';position:absolute;left:50%;top:-5px;height:4px;border-left:1px solid #8aa5a4}
@media(max-width:760px){.time-controls{gap:8px}.time-controls #play{width:34px;height:34px}.time-controls select{width:64px;height:34px}.time-track{padding-top:7px}#time-dates{font-size:9px}}