:root{--sp-bg: #f3f7fa;--sp-surface: #ffffff;--sp-surface-soft: #f1f8fc;--sp-text: #10243e;--sp-muted: #526071;--sp-line: #c9d9e5;--sp-accent: #0f5f8b;--sp-good: #14734c;--sp-warn: #8b5b00}.surf-preview-body{margin:0;min-height:100vh;overflow-x:clip;background:radial-gradient(circle at top,rgba(255,244,216,.46),transparent 36%),radial-gradient(circle at 80% 20%,rgba(140,196,255,.22),transparent 28%),linear-gradient(180deg,#f3f7fa,#dbe3ea);color:var(--sp-text);font-family:Inter,Segoe UI,Arial,sans-serif}.surf-preview-wrap{width:min(960px,100% - 2rem);margin:0 auto;padding:1.25rem 0 2.5rem}.surf-preview-header{margin-bottom:.8rem}.surf-preview-kicker{margin:0;text-transform:uppercase;letter-spacing:.08em;color:var(--sp-muted);font-size:.82rem}.surf-preview-header h1{margin:.2rem 0;color:#17395c;font-size:clamp(1.7rem,4vw,2.1rem);line-height:1.1}.surf-preview-header__nav{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.6rem;width:100%}.surf-preview-header__nav h1{text-align:left}.surf-preview-menu-link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:0 .85rem;border:1px solid rgba(198,210,220,.96);border-radius:999px;background:linear-gradient(135deg,#0f5f8b,#18476b);box-shadow:0 7px 16px #0f5f8b33;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.035em;text-decoration:none}.surf-preview-menu-link:hover{filter:brightness(1.08)}.surf-preview-menu-link__icon{display:grid;gap:3px;width:16px}.surf-preview-menu-link__icon span{display:block;width:16px;height:2px;border-radius:999px;background:currentColor}.surf-preview-info-button{width:2rem;aspect-ratio:1;border-radius:999px;border:1px solid #b8cad9;background:#fff;color:var(--sp-accent);font-weight:700;line-height:1;font-size:1rem;cursor:pointer}.surf-preview-info-button:hover{filter:brightness(1.1)}.surf-preview-menu-link:focus-visible,.surf-preview-info-button:focus-visible{outline:3px solid rgba(15,95,139,.35);outline-offset:2px}.surf-preview-subtitle,.surf-preview-caption{margin:0;color:var(--sp-muted)}.surf-preview-safety-status{display:inline-flex;align-items:center;gap:.38rem;width:fit-content;margin-top:.65rem;padding:.42rem .62rem;border:1px solid #9dc8d7;border-radius:999px;background:#e7f6f8;color:#0f5f8b;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.surf-preview-safety-status.is-attention{border-color:#e3b25f;background:#fff3dd;color:#8b5b00}.surf-preview-safety-status.is-critical{border-color:#d96b60;background:#fbe8e6;color:#9a312b}.surf-preview-safety-status.is-unavailable{border-color:var(--sp-line);background:#eef2f5;color:var(--sp-muted)}.surf-preview-safety-panel{display:grid;gap:.24rem;margin:.8rem 0;padding:.72rem .8rem;border:1px solid #9dc8d7;border-radius:12px;background:#e7f6f8}.surf-preview-safety-panel strong{color:#17395c}.surf-preview-safety-panel span,.surf-preview-safety-panel small{color:var(--sp-muted)}.surf-preview-safety-panel.is-attention{border-color:#e3b25f;background:#fff8e8}.surf-preview-safety-panel.is-critical{border-color:#d96b60;background:#fff0ee}.surf-preview-safety-panel.is-unavailable{border-color:var(--sp-line);background:#f4f7f9}.surf-preview-top-controls{display:grid;gap:.75rem;grid-template-columns:1fr;margin-bottom:.75rem}.surf-preview-wrap .hidden{display:none}.surf-preview-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin:0 0 .75rem;padding:.35rem;border:1px solid var(--sp-line);border-radius:999px;background:#ffffffc7}.surf-preview-tab{min-height:2.5rem;border:0;border-radius:999px;background:transparent;color:var(--sp-muted);font:inherit;font-weight:800;cursor:pointer}.surf-preview-tab.is-active{background:linear-gradient(135deg,#0f5f8b,#18476b);color:#fff;box-shadow:0 3px 9px #0f5f8b33}.surf-preview-field{display:grid;gap:.35rem}.surf-preview-field span{color:var(--sp-muted);font-size:.85rem}.surf-preview-peak-picker{display:flex;gap:.5rem}.surf-preview-select,.surf-preview-button{border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-surface);color:var(--sp-text);padding:.7rem .8rem}.surf-preview-select{flex:1;appearance:none}.surf-preview-button{min-width:6.5rem;border-color:#0f5f8b;background:linear-gradient(135deg,#0f5f8b,#18476b);color:#fff;font-weight:800}.surf-preview-card{background:#ffffffeb;border:1px solid rgba(201,217,229,.98);border-radius:18px;padding:1rem;margin-bottom:1rem;box-shadow:0 10px 28px #1b395c0f}.surf-preview-card.hidden{display:none}.surf-preview-card-head{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;flex-wrap:wrap}.surf-preview-card-head h2,.surf-preview-card h3{margin:0 0 .5rem}.surf-preview-kpi-grid{margin-top:.75rem;display:grid;gap:.65rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.surf-preview-tide-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(8rem,.8fr);gap:.8rem;align-items:center;margin-top:.9rem;padding:.9rem;border:1px solid rgba(15,95,139,.42);border-radius:15px;background:radial-gradient(circle at 86% 20%,rgba(70,174,204,.22),transparent 38%),linear-gradient(135deg,#e7f6f8,#d9edf5)}.surf-preview-tide-hero__label,.surf-preview-tide-hero__source,.surf-preview-tide-hero__detail{display:block;color:var(--sp-muted);font-size:.8rem;line-height:1.35}.surf-preview-tide-hero__label{color:#0f5f8b;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.surf-preview-tide-hero strong{display:block;margin:.16rem 0;color:#17395c;font-size:clamp(1.25rem,4vw,1.7rem)}.surf-preview-tide-hero__progress{display:grid;gap:.35rem;justify-items:end;text-align:right}.surf-preview-tide-hero__progress strong{color:#17395c;font-size:clamp(1.35rem,4vw,1.9rem)}.surf-preview-tide-hero__percentage{display:grid;gap:.08rem;justify-items:end;color:var(--sp-muted);font-size:.78rem}.surf-preview-tide-hero__percentage b{color:#0f5f8b;font-size:.96rem}.surf-preview-tide-hero__percentage small{font:inherit}.surf-preview-tide-graph{grid-column:1 / -1;display:grid;gap:.24rem;margin-top:.15rem}.surf-preview-tide-graph svg{width:100%;overflow:visible}.surf-preview-tide-graph__baseline{fill:none;stroke:#10243ea6;stroke-width:.55}.surf-preview-tide-graph__guide{fill:none;stroke:#0f5f8b;stroke-linecap:round;stroke-width:1.55}.surf-preview-tide-graph__event line{stroke:#0f5f8b47;stroke-width:.4}.surf-preview-tide-graph__event circle{fill:#f8fcfd;stroke:#0f5f8b;stroke-width:1.2}.surf-preview-tide-graph__event--low circle{fill:#dff3f6;stroke:#28758e}.surf-preview-tide-graph__event text{fill:#17395c;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:3.15px;font-weight:800;text-anchor:middle}.surf-preview-tide-graph__event-time,.surf-preview-tide-graph__event-height{color:var(--sp-muted);font-size:2.8px;font-weight:700}.surf-preview-tide-graph__area{fill:url(#surf-preview-tide-area);stroke:none}.surf-preview-tide-graph__now{fill:#fff7f4;stroke:#d9594c;stroke-width:.8}.surf-preview-tide-graph__now-guide{stroke:#d9594c8c;stroke-width:.45;stroke-dasharray:1.5 1.3}.surf-preview-tide-graph__now-label{fill:#b44338;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:3.1px;font-weight:800;text-anchor:middle}.surf-preview-tide-graph small,.surf-preview-tide-hero__empty{color:var(--sp-muted);font-size:.72rem;line-height:1.35}.surf-preview-tide-hero__empty{grid-column:1 / -1;margin:0}.surf-preview-kpi{padding:.8rem;border:1px solid rgba(201,217,229,.98);border-radius:12px;background:linear-gradient(145deg,#ffffff 0%,var(--sp-surface-soft) 100%)}.surf-preview-kpi:first-child,.surf-preview-kpi:nth-child(2){border-color:#0f5f8b4d;background:linear-gradient(145deg,#fff,#e8f4f8)}.surf-preview-kpi--estimate,.surf-preview-kpi--sources{border-color:#0f5f8b4d;background:linear-gradient(145deg,#fff,#e8f4f8)}.surf-preview-kpi--direction{grid-column:1 / -1}.surf-preview-kpi strong{display:block;margin:.35rem 0;font-size:1.25rem}.surf-preview-kpi small{color:var(--sp-muted)}.surf-preview-kpi--intensity{display:grid;align-content:start;gap:.28rem}.surf-preview-intensity{display:grid;gap:.2rem;width:fit-content;max-width:100%}.surf-preview-intensity__waves{display:flex;gap:.3rem;align-items:center}.surf-preview-intensity-wave{display:inline-grid;width:clamp(1.7rem,6vw,2.25rem);aspect-ratio:4 / 3;place-items:center;color:#fff}.surf-preview-intensity-wave svg{display:block;width:100%;height:auto;overflow:visible}.surf-preview-intensity-wave path{fill:currentColor;stroke:#aab8c4;stroke-linejoin:round;stroke-width:1.5}.surf-preview-intensity-wave.is-active{color:#0f6fa5}.surf-preview-intensity-wave.is-active path{stroke:#0a567f}.surf-preview-intensity>strong{margin:0;color:#17395c;font-size:1.05rem}.surf-preview-table .surf-preview-intensity-wave{width:1.55rem}.surf-preview-table .surf-preview-intensity>strong{font-size:.85rem}.surf-preview-compass{width:132px;aspect-ratio:1;position:relative;margin:.1rem auto;border:1px solid rgba(15,95,139,.44);border-radius:50%;background:linear-gradient(90deg,transparent 49.4%,rgba(82,96,113,.25) 50%,transparent 50.6%),linear-gradient(transparent 49.4%,rgba(82,96,113,.25) 50%,transparent 50.6%),radial-gradient(circle,rgba(15,95,139,.22) 0 4%,transparent 5%)}.surf-preview-compass__ring{position:absolute;inset:13%;border:1px dashed rgba(15,95,139,.24);border-radius:50%}.surf-preview-compass__ring--inner{inset:31%}.surf-preview-compass__core{position:absolute;top:50%;left:50%;display:grid;width:1.65rem;aspect-ratio:1;place-items:center;border:1px solid rgba(15,95,139,.42);border-radius:50%;background:#f8fcfd;color:#0f5f8b;font-size:.85rem;transform:translate(-50%,-50%)}.surf-preview-compass__label{position:absolute;color:var(--sp-muted);font-size:.68rem;font-weight:700}.surf-preview-compass__label--north{top:5px;left:50%;transform:translate(-50%)}.surf-preview-compass__label--east{top:50%;right:5px;transform:translateY(-50%)}.surf-preview-compass__label--south{bottom:5px;left:50%;transform:translate(-50%)}.surf-preview-compass__label--west{top:50%;left:5px;transform:translateY(-50%)}.surf-preview-compass__arrow{position:absolute;top:calc(50% - var(--arrow-length, 44px));left:calc(50% - 3px);width:6px;height:var(--arrow-length, 44px);border-radius:999px;background:var(--sp-accent);transform:rotate(var(--arrow-angle, 0deg));transform-origin:50% 100%;box-shadow:0 0 10px #0f5f8b4d}.surf-preview-compass__arrow--primary{z-index:2;background:#0f5f8b}.surf-preview-compass__arrow--secondary{z-index:1;width:4px;background:#62b6d0;box-shadow:0 0 8px #62b6d061}.surf-preview-compass__arrow:before{content:"";position:absolute;top:-7px;left:-5px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:11px solid var(--sp-accent)}.surf-preview-compass__arrow--primary:before{border-bottom-color:#0f5f8b}.surf-preview-compass__arrow--secondary:before{border-bottom-color:#62b6d0}.surf-preview-direction-layout{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem}.surf-preview-swell-legend{display:grid;gap:.55rem}.surf-preview-swell-legend__item{position:relative;display:grid;gap:.14rem;padding-left:1rem}.surf-preview-swell-legend__item strong{color:#17395c;font-size:.91rem}.surf-preview-swell-legend__item small{color:var(--sp-muted)}.surf-preview-swell-legend__item.is-unavailable{opacity:.68}.surf-preview-swell-legend__key{position:absolute;top:.28rem;left:0;width:.55rem;height:.55rem;border-radius:999px}.surf-preview-swell-legend__key--primary{background:#0f5f8b}.surf-preview-swell-legend__key--secondary{background:#62b6d0}.surf-preview-disclaimer{display:grid;gap:.22rem;margin-top:.8rem;padding:.72rem .8rem;border-left:3px solid #0f5f8b;border-radius:0 10px 10px 0;background:#0f5f8b12;color:var(--sp-muted);font-size:.82rem;line-height:1.4}.surf-preview-disclaimer strong{color:#17395c}.surf-preview-windguru{overflow:hidden}.surf-preview-button--secondary{min-width:auto;background:#fff;color:#0f5f8b}.surf-preview-windguru-content{margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(201,217,229,.9)}.surf-preview-windguru-content p{margin:0 0 .7rem;color:var(--sp-muted);font-size:.84rem;line-height:1.4}.surf-preview-windguru-frame{display:block;width:100%;min-height:460px;border:1px solid rgba(201,217,229,.98);border-radius:10px;background:#fff}.surf-preview-windguru-link{display:inline-flex;margin-top:.7rem;color:#0f5f8b;font-weight:800}.surf-preview-status{color:var(--sp-accent);margin-bottom:.8rem;min-height:1.2rem}.surf-preview-error{border-left:3px solid #b34a3d;background:#fbe8e6;border-radius:8px;padding:.75rem;color:#8b1f1f}.surf-preview-error.hidden{display:none}.surf-preview-table-shell{overflow:clip}.surf-preview-today-timeline{display:grid;gap:.65rem;margin-top:.85rem}.surf-preview-today-tide{display:grid;gap:.42rem;padding:.7rem .8rem;border:1px solid rgba(15,95,139,.24);border-radius:12px;background:#e8f4f8;color:#17395c}.surf-preview-today-tide .tide-row{grid-template-columns:repeat(auto-fit,minmax(5.8rem,1fr))}.surf-preview-today-tide .surf-preview-pill{margin:0;justify-content:center}.surf-preview-hour{display:grid;grid-template-columns:minmax(4.6rem,.7fr) repeat(5,minmax(0,1fr));gap:.5rem;align-items:stretch;padding:.8rem;border:1px solid rgba(201,217,229,.98);border-radius:14px;background:linear-gradient(145deg,#fff,#f1f8fc)}.surf-preview-hour.is-current{border-color:#0f5f8b;box-shadow:0 5px 16px #0f5f8b24}.surf-preview-hour>div:not(.surf-preview-hour__time){display:grid;gap:.14rem;padding-left:.55rem;border-left:1px solid rgba(201,217,229,.82)}.surf-preview-hour span,.surf-preview-hour small{color:var(--sp-muted);font-size:.73rem;line-height:1.25}.surf-preview-hour strong{color:#17395c;font-size:.98rem;line-height:1.2}.surf-preview-hour__time{display:grid;align-content:center;gap:.12rem}.surf-preview-hour.is-current .surf-preview-hour__time strong,.surf-preview-hour.is-current .surf-preview-hour__time span{color:#0f5f8b}.surf-preview-table{width:100%;border-collapse:collapse;margin-top:.6rem}.surf-preview-table thead th{text-align:left;color:var(--sp-muted);font-size:.82rem;padding:.6rem .4rem;border-bottom:1px solid rgba(151,177,201,.25)}.surf-preview-table tbody td{padding:.7rem .4rem;border-bottom:1px dashed rgba(151,177,201,.15);vertical-align:middle}.surf-preview-table tbody tr:last-child td{border-bottom:none}.surf-preview-empty{color:var(--sp-muted);margin:.8rem 0 0}.surf-preview-empty.hidden{display:none}.surf-preview-metric-switch{display:flex;gap:.8rem;flex-wrap:wrap}.surf-preview-metric-switch label{font-size:.85rem;color:var(--sp-muted)}.surf-preview-chart{width:100%;height:auto;display:block;background:var(--sp-surface);border:1px solid rgba(201,217,229,.98);border-radius:10px}.surf-preview-source-panel{margin:1rem 0;border:1px solid #c9d9e5;border-radius:12px;background:#fffffff0;padding:.8rem}.surf-preview-source-panel.hidden{display:none}.surf-preview-source-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.45rem}.surf-preview-source-panel__head h2{margin:0;font-size:1rem}.surf-preview-source-close{border:0;background:transparent;color:var(--sp-muted);font-size:1.2rem;cursor:pointer}.surf-preview-sources-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.surf-preview-source-item{border-left:2px solid #0f5f8b;padding-left:.55rem;color:var(--sp-text);line-height:1.35}.surf-preview-source-item a{color:#0f5f8b;text-wrap:wrap}.tide-row{display:grid;gap:.28rem;line-height:1.2;font-size:.84rem}.tide-row span{display:block}.surf-preview-pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;font-size:.8rem;padding:.2rem .55rem;margin-right:.35rem;margin-top:.25rem;background:#e7f1f7;color:#0f5f8b;white-space:nowrap}.surf-preview-pill--low{background:#fff3dd;color:#8b5b00}.surf-preview-tab:focus-visible,.surf-preview-button:focus-visible,.surf-preview-select:focus-visible,.surf-preview-info-button:focus-visible,.surf-preview-source-close:focus-visible{outline:3px solid rgba(15,95,139,.34);outline-offset:2px}.surf-preview-pill--period-short{background:#fff3dd;color:#8b5b00}.surf-preview-pill--period-medium{background:#e7f1f7}.surf-preview-pill--period-long{background:#e5f5ea;color:#116b3e}.surf-preview-pill--power-low{background:#eef2f5;color:#526071}.surf-preview-pill--power-medium{background:#fff3dd;color:#8b5b00}.surf-preview-pill--power-high{background:#fbe8e6;color:#9a312b}.surf-preview-pill--muted{background:#95b0cb29;color:var(--sp-muted)}#surf-preview-chart-section{margin:.85rem 0}#surf-preview-chart-section h3{color:#17395c;font-size:.95rem}@media(max-width:680px){.surf-preview-wrap{width:min(960px,100% - 1.1rem)}.surf-preview-table,.surf-preview-table tbody,.surf-preview-table tr,.surf-preview-table td{display:block;width:100%;box-sizing:border-box}.surf-preview-table thead{display:none}.surf-preview-table tbody{display:grid;gap:.7rem;margin-top:.7rem}.surf-preview-table tbody tr{padding:.25rem .65rem;border:1px solid rgba(149,176,203,.22);border-radius:10px;background:var(--sp-surface-soft)}.surf-preview-table tbody td{display:grid;grid-template-columns:minmax(5.3rem,37%) minmax(0,1fr);gap:.55rem;padding:.55rem 0;overflow-wrap:anywhere}.surf-preview-table tbody td:before{content:attr(data-label);color:var(--sp-muted);font-size:.78rem;font-weight:700}.surf-preview-table tbody td:last-child{border-bottom:none}.surf-preview-hour{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;overflow:hidden}.surf-preview-tide-hero{grid-template-columns:minmax(0,1fr) auto;gap:.55rem}.surf-preview-tide-graph__event text{font-size:3.45px}.surf-preview-tide-graph__event text:last-child{font-size:3.05px}.surf-preview-direction-layout{grid-template-columns:1fr;justify-items:center}.surf-preview-swell-legend{width:100%}.surf-preview-windguru-frame{min-height:530px}.surf-preview-hour>div,.surf-preview-hour>div:not(.surf-preview-hour__time){min-height:3.9rem;padding:.7rem;border:0;border-bottom:1px solid rgba(201,217,229,.82)}.surf-preview-hour>div:nth-child(odd){border-right:1px solid rgba(201,217,229,.82)}.surf-preview-hour>div:nth-last-child(-n+2){border-bottom:0}}