#surf-report-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0a1628;border-radius:14px;overflow:hidden;color:#e8f4fd;} /* Banner */ #surf-report-wrap .sr-banner{width:100%;max-height:220px;object-fit:cover;display:block;} /* Header */ #surf-report-wrap .sr-header{text-align:center;padding:24px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;} #surf-report-wrap .sr-help-btn{position:absolute;top:14px;right:16px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid #1e3d5c;color:#7ab8e8;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;transition:all .18s;} #surf-report-wrap .sr-help-btn:hover{background:#0f2236;} #surf-report-wrap .sr-help-btn.open{background:#1a6fc4;border-color:#1a6fc4;color:#fff;} #surf-report-wrap .sr-help-btn .sr-help-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#1a6fc4;color:#fff;font-size:.7rem;font-weight:800;} #surf-report-wrap .sr-help-btn.open .sr-help-q{background:#fff;color:#1a6fc4;} #surf-report-wrap .sr-help{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:18px 22px;font-size:.88rem;color:#c0daf0;line-height:1.6;} #surf-report-wrap .sr-help[hidden]{display:none;} #surf-report-wrap .sr-help h3{margin:0 0 8px;font-size:1.05rem;color:#fff;} #surf-report-wrap .sr-help-sec{border-top:1px solid #1e3d5c;} #surf-report-wrap .sr-help-sec summary{cursor:pointer;padding:11px 0;font-size:.74rem;font-weight:700;color:#5ab4f5;text-transform:uppercase;letter-spacing:.6px;list-style:none;display:flex;align-items:center;justify-content:space-between;} #surf-report-wrap .sr-help-sec summary::-webkit-details-marker{display:none;} #surf-report-wrap .sr-help-sec summary::after{content:'+';font-size:1.1rem;font-weight:400;color:#7ab8e8;line-height:1;} #surf-report-wrap .sr-help-sec[open] summary::after{content:'\2212';} #surf-report-wrap .sr-help-sec > ul,#surf-report-wrap .sr-help-sec > p{margin-bottom:12px;} #surf-report-wrap .sr-help .sr-help-src{font-size:.8rem;color:#7ab8e8;margin:0;} #surf-report-wrap .sr-help p{margin:0 0 10px;color:#c0daf0;} #surf-report-wrap .sr-help ul{margin:0;padding-left:18px;} #surf-report-wrap .sr-help li{margin:6px 0;} #surf-report-wrap .sr-help b{color:#fff;} #surf-report-wrap .sr-logo{max-height:56px;max-width:200px;object-fit:contain;} #surf-report-wrap .sr-header h2{font-size:1.7rem;font-weight:700;margin:0;color:#fff;} #surf-report-wrap .sr-header p{font-size:.85rem;color:#7ab8e8;margin:0;} /* Hero block */ #surf-report-wrap .sr-hero{margin:0 16px 16px;border-radius:14px;overflow:hidden;position:relative;min-height:200px;background:#0f2236;border:1px solid #1e3d5c;} #surf-report-wrap .sr-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;} #surf-report-wrap .sr-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,22,40,.35) 0%,rgba(10,22,40,.85) 100%);} #surf-report-wrap .sr-hero-body{position:relative;padding:22px 22px 20px;} #surf-report-wrap .sr-hero-pill{display:inline-block;background:#1a6fc4;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:10px;} #surf-report-wrap .sr-hero-name{font-size:1.6rem;font-weight:800;color:#fff;line-height:1.1;} #surf-report-wrap .sr-hero-shore{font-size:.78rem;color:#7ab8e8;margin-bottom:12px;} #surf-report-wrap .sr-hero-size{font-size:2.4rem;font-weight:800;color:#5ab4f5;line-height:1;} #surf-report-wrap .sr-hero-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;} #surf-report-wrap .sr-hero-stat .sr-dl{font-size:.68rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;} #surf-report-wrap .sr-hero-stat .sr-dv{font-size:.85rem;color:#c8e6f8;} #surf-report-wrap .sr-hero-summary b{color:#fff;} #surf-report-wrap .sr-hero-link{display:block;margin-top:14px;padding:10px 14px;border-radius:10px;border:1px solid rgba(245,197,66,.7);background:rgba(10,22,40,.55); color:#f5c542;font-size:.86rem;font-weight:700;text-align:center;text-decoration:none;} #surf-report-wrap .sr-hero-link:hover{background:rgba(245,197,66,.15);} #surf-report-wrap .sr-hero-acts{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:10px;} /* v3.280: bell + share, top right */ #surf-report-wrap .sr-hero-acts .sr-share{margin:0;position:relative;} #surf-report-wrap .sr-hero-acts .sr-share-btn{width:auto;background:rgba(10,22,40,.6);} #surf-report-wrap .sr-hero-acts .sr-share-row{position:absolute;right:0;top:calc(100% + 6px);width:260px;padding:8px;border-radius:10px;background:#0f2236;border:1px solid #1e3d5c;box-shadow:0 8px 20px rgba(0,0,0,.5);max-width:calc(100vw - 80px);} #surf-report-wrap .sr-hero-acts .sr-bell{flex-direction:row;gap:7px;padding:5px 12px 5px 5px;border:1px solid #f5c542;border-radius:10px;background:rgba(10,22,40,.6);} /* v3.283: labelled */ #surf-report-wrap .sr-hero-acts .sr-bell small{display:none;} #surf-report-wrap .sr-bell-txt{color:#f5c542;font-size:.82rem;font-weight:700;white-space:nowrap;} #surf-report-wrap .sr-bell .sr-bell-txt{display:none;} #surf-report-wrap .sr-hero-acts .sr-bell .sr-bell-txt{display:inline;} @media (max-width:600px){#surf-report-wrap .sr-hero-acts .sr-bell{padding:0;border:0;background:none;flex-direction:column;gap:0;} #surf-report-wrap .sr-hero-acts .sr-bell small{display:block;} #surf-report-wrap .sr-hero-acts .sr-bell .sr-bell-txt{display:none;}} @media (max-width:600px){#surf-report-wrap .sr-hero-acts{top:12px;right:12px;} #surf-report-wrap .sr-hero-acts .sr-share-btn{font-size:0;gap:0;padding:8px 10px;}} /* phones: icon only, clears the pill */ #surf-report-wrap .sr-hero-summary{margin-top:14px;font-size:.88rem;color:#c0daf0;line-height:1.55;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;} /* Tide */ /* Marine warnings */ #surf-report-wrap .sr-alerts{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px;} #surf-report-wrap .sr-alerts-label{font-size:.68rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;} #surf-report-wrap .sr-alert{display:flex;align-items:flex-start;gap:11px;border-radius:10px;padding:11px 13px;margin-bottom:8px;border:1px solid;} #surf-report-wrap .sr-alert-warning{color:#ff7a66;background:rgba(255,90,70,.10);border-color:rgba(255,90,70,.45);} #surf-report-wrap .sr-alert-advisory{color:#f5c542;background:rgba(245,197,66,.08);border-color:rgba(245,197,66,.38);} #surf-report-wrap .sr-alert-clear{color:#5dde87;background:rgba(93,222,135,.08);border-color:rgba(93,222,135,.38);} #surf-report-wrap .sr-alert-body{min-width:0;} #surf-report-wrap .sr-alert-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;} #surf-report-wrap .sr-alert-event{font-size:.92rem;font-weight:700;} #surf-report-wrap .sr-alert-until{font-size:.74rem;opacity:.85;} #surf-report-wrap .sr-alert-sum{margin-top:4px;font-size:.84rem;line-height:1.45;color:#dCe9f5;} #surf-report-wrap .sr-alert-areas{margin-top:4px;font-size:.72rem;color:#7ab8e8;} #surf-report-wrap .sr-alerts-src{font-size:.68rem;color:#5a8ab0;margin-top:2px;} #surf-report-wrap .sr-rose{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;} #surf-report-wrap .sr-rose h3:first-child{margin-top:0;} @media (max-width:640px){#surf-report-wrap .sr-rose{grid-template-columns:minmax(0,1fr);}} #surf-report-wrap .sr-rose-map{position:relative;aspect-ratio:1;max-width:500px;overflow:hidden;border-radius:12px;background:#0b2a3f;} #surf-report-wrap .sr-rose-tiles{position:absolute;left:50%;top:50%;width:0;height:0;} #surf-report-wrap .sr-rose-tiles img{position:absolute;width:256px;height:256px;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;} #surf-report-wrap .sr-rose-tiles img.sr-rose-photo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;} #surf-report-wrap .sr-rose-tiles.sr-rose-full{left:0;top:0;width:100%;height:100%;} #surf-report-wrap .sr-rose-svg{position:absolute;inset:0;width:100%;height:100%;} #surf-report-wrap .sr-rose-deg text{font-size:16px;font-weight:700;fill:#fff;paint-order:stroke;stroke:rgba(4,16,31,.65);stroke-width:3px;} #surf-report-wrap .sr-rose-src{font-size:.7rem;color:#5a8ab0;margin-top:6px;} #surf-report-wrap .sr-rose-rows{border-collapse:collapse;font-size:.88rem;color:#c8e6f8;margin:0 0 6px;} #surf-report-wrap .sr-rose-rows td{padding:3px 14px 3px 0;border:0;white-space:nowrap;} #surf-report-wrap .sr-rose-rows i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;} #surf-report-wrap .sr-rose-top td{font-weight:800;color:#fff;} #surf-report-wrap .sr-rose-wind{font-size:.8rem;color:#c8e6f8;margin:4px 0 0;} #surf-report-wrap .sr-rose-wind b{color:#fff;} #surf-report-wrap .sr-tide,#surf-report-wrap .sr-uvcard{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px 10px;} #surf-report-wrap .sr-tide-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;} #surf-report-wrap .sr-tide-label{font-size:.68rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;} #surf-report-wrap .sr-tide-link{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;background:#1a6fc4;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:4px 11px;border-radius:20px;text-decoration:none;line-height:1.3;transition:background .18s;} #surf-report-wrap .sr-tide-link:hover{background:#1a85e8;color:#fff;} #surf-report-wrap .sr-tide-link svg{width:11px;height:11px;} #surf-report-wrap .sr-tide-summary{font-size:.92rem;color:#c8e6f8;line-height:1.4;margin-bottom:8px;} #surf-report-wrap .sr-tide-summary strong{color:#5ab4f5;} #surf-report-wrap .sr-tide-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:6px;font-size:.72rem;color:#7ab8e8;} #surf-report-wrap .sr-tide-legend span{display:flex;align-items:center;gap:5px;} #surf-report-wrap .sr-tide-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;} #surf-report-wrap .sr-sunchip{color:#e0b972;gap:5px;} #surf-report-wrap .sr-moonchip{margin-left:auto;color:#7ab8e8;} #surf-report-wrap .sr-jelly{display:flex;align-items:center;gap:9px;font-size:.82rem;color:#f5c542;background:rgba(245,197,66,.07);border:1px solid rgba(245,197,66,.35);border-radius:9px;padding:8px 12px;margin:4px 0 10px;} #surf-report-wrap .sr-jelly b{font-weight:700;} #surf-report-wrap .sr-kingnote{font-size:.8rem;color:#f0b24a;margin:6px 0 4px;} #surf-report-wrap .sr-tide-svg{width:100%;height:auto;display:block;} #surf-report-wrap .sr-uv-svg{width:100%;height:auto;display:block;margin-top:6px;} #surf-report-wrap .sr-uvcard .sr-tide-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;} #surf-report-wrap .sr-sp-uv .sr-tide-head .sr-tide-label{display:none;} /* the spot box has its own title */ #surf-report-wrap .sr-uv-rows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:.84rem;color:#c8e6f8;} #surf-report-wrap .sr-uv-rows li{display:flex;align-items:baseline;gap:8px;line-height:1.35;} #surf-report-wrap .sr-uv-rows i{flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(1px);} #surf-report-wrap .sr-uv-rows b{flex:none;min-width:70px;color:#fff;} #surf-report-wrap .sr-uv-src{font-size:.7rem;color:#5a8ab0;margin:8px 0 2px;} /* Scale toggle, stale note, outlook, buoys */ #surf-report-wrap .sr-scale-wrap{position:absolute;top:14px;left:16px;display:inline-flex;align-items:center;gap:8px;} #surf-report-wrap .sr-scale-label{font-size:.66rem;font-weight:600;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;} #surf-report-wrap .sr-scale{display:inline-flex;border:1px solid #1e3d5c;border-radius:20px;overflow:hidden;} #surf-report-wrap .sr-scale button{background:transparent;border:none;color:#7ab8e8;font-size:.72rem;font-weight:600;padding:5px 10px;cursor:pointer;font-family:inherit;line-height:1.3;} #surf-report-wrap .sr-scale button.on{background:#1a6fc4;color:#fff;} #surf-report-wrap .sr-stale{margin:0 16px 14px;padding:9px 14px;border-radius:10px;font-size:.84rem;color:#f5c542;background:rgba(245,197,66,.07);border:1px solid rgba(245,197,66,.35);} #surf-report-wrap .sr-stale[hidden]{display:none;} #surf-report-wrap .sr-open-warn{margin:0 16px 14px;padding:10px 14px;border-radius:10px;font-size:.86rem;line-height:1.5;color:#ffd9d2;background:rgba(255,122,102,.1);border:1px solid rgba(255,122,102,.45);} #surf-report-wrap .sr-open-warn b{color:#fff;} #surf-report-wrap .sr-answer{margin:0 16px 14px;font-size:.84rem;line-height:1.5;color:#7ab8e8;text-align:center;} #surf-report-wrap .sr-daily .sr-answer{margin:20px 0 4px;} @media (max-width:440px){#surf-report-wrap .sr-daily .sr-answer{font-size:.74rem;margin-left:-6px;margin-right:-6px;}} /* keeps the date + time on one line */ @media (min-width:601px){#surf-report-wrap .sr-answer .sr-mbr{display:none;}} /* phones: date + time get their own line */ #surf-report-wrap .sr-first-visit{margin:0 16px 14px;padding:10px 14px;border-radius:10px;font-size:.86rem;line-height:1.5;color:#c8e6f8;background:rgba(90,180,245,.08);border:1px solid rgba(90,180,245,.35);} #surf-report-wrap .sr-first-visit b{color:#fff;} #surf-report-wrap .sr-sub{display:block;font-size:.66rem;font-weight:500;color:#7ab8e8;text-transform:uppercase;letter-spacing:.4px;} #surf-report-wrap .sr-outlook,#surf-report-wrap .sr-buoys,#surf-report-wrap .sr-accuracy{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px 12px;} #surf-report-wrap .sr-o-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:.7rem;color:#7ab8e8;} #surf-report-wrap .sr-o-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;} #surf-report-wrap .sr-outlook p{font-size:.9rem;color:#c8e6f8;line-height:1.55;margin:10px 0 0;} #surf-report-wrap .sr-outlook-scroll{overflow-x:auto;margin-top:8px;} #surf-report-wrap .sr-outlook-table{width:100%;border-collapse:collapse;font-size:.86rem;color:#e8f4fd;} #surf-report-wrap .sr-outlook-table th,#surf-report-wrap .sr-outlook-table td{padding:7px 8px;text-align:center;border-bottom:1px solid #1e3d5c;white-space:nowrap;background:transparent;} #surf-report-wrap .sr-outlook-table thead th{font-size:.66rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.4px;font-weight:600;} #surf-report-wrap .sr-outlook-table tbody th{text-align:left;color:#7ab8e8;font-weight:600;} #surf-report-wrap .sr-outlook-table td{font-weight:700;color:#5ab4f5;} #surf-report-wrap .sr-outlook-table tbody tr:last-child th,#surf-report-wrap .sr-outlook-table tbody tr:last-child td{border-bottom:none;} #surf-report-wrap .sr-outlook .sr-alerts-src,#surf-report-wrap .sr-buoys .sr-alerts-src,#surf-report-wrap .sr-accuracy .sr-alerts-src,#surf-report-wrap .sr-wind .sr-alerts-src{margin-top:10px;} #surf-report-wrap .sr-buoy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:10px;} #surf-report-wrap .sr-buoy{background:#0a1628;border:1px solid #1e3d5c;border-radius:10px;padding:11px 13px 9px;} #surf-report-wrap .sr-buoy.stale{opacity:.55;} #surf-report-wrap .sr-offshore-intro{font-size:.78rem;color:#7ab8e8;margin-top:4px;} #surf-report-wrap details.sr-offshore > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;} #surf-report-wrap details.sr-offshore > summary::-webkit-details-marker{display:none;} #surf-report-wrap .sr-off-chev{width:16px;height:16px;color:#7ab8e8;transition:transform .18s;flex:none;} #surf-report-wrap details.sr-offshore:not([open]) .sr-off-chev{transform:rotate(-90deg);} #surf-report-wrap details.sr-offshore:not([open]){padding-bottom:16px;} #surf-report-wrap .sr-offmap{width:100%;border-radius:10px;overflow:hidden;background:#0a1628;margin:10px 0 4px;position:relative;z-index:0;} #surf-report-wrap .sr-offmap.sr-swan-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.75) contrast(.95) saturate(.35);} #surf-report-wrap .sr-offmap .leaflet-control-attribution{background:rgba(10,22,40,.78);color:#7ab8e8;font-size:.6rem;} #surf-report-wrap .sr-offmap .leaflet-control-attribution a{color:#5ab4f5;} #surf-report-wrap .sr-offmap .leaflet-bar a{background:#0f2236;color:#c8e6f8;border-color:#1e3d5c;} #surf-report-wrap .sr-offmap-note{font-size:.68rem;color:#5a8ab0;margin-bottom:6px;} #surf-report-wrap .sr-off-pin{background:none;border:0;} .leaflet-tooltip.sr-off-tip{position:absolute;white-space:nowrap;background:#0f2236;color:#c8e6f8;border:1px solid #1e3d5c;font-size:.68rem;padding:3px 7px;box-shadow:none;} .leaflet-tooltip.sr-off-tip::before{display:none;} .leaflet-tooltip.sr-off-tip-new{color:#0a1628;background:#f5c542;border-color:#f5c542;font-weight:700;} .leaflet-tooltip.sr-off-tip-in{color:#fff;background:#1a6fc4;border-color:#1a6fc4;font-weight:700;} .leaflet-tooltip.sr-off-oahu{background:transparent;border:0;color:#fff;font-weight:700;padding:0 4px;} #surf-report-wrap .sr-off-row{display:flex;align-items:center;justify-content:space-between;gap:8px;} #surf-report-wrap .sr-compass{width:38px;height:38px;flex:none;} #surf-report-wrap .sr-off-geo span{color:#5a8ab0;} /* offshore buoy states: new swell (gold) / incoming (blue) / past or away (grey) */ #surf-report-wrap .sr-buoy.sr-card-new{border-color:#f5c542;box-shadow:0 0 0 1px rgba(245,197,66,.3),0 0 18px rgba(245,197,66,.12);} #surf-report-wrap .sr-buoy.sr-card-in{border-color:#5ab4f5;} #surf-report-wrap .sr-buoy.sr-card-away{border-color:#2a3a4d;border-style:dashed;opacity:.72;} #surf-report-wrap .sr-st{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:#7ab8e8;} #surf-report-wrap .sr-st svg{width:15px;height:15px;flex:none;} #surf-report-wrap .sr-st b{font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.62rem;} #surf-report-wrap .sr-st-new{color:#f5c542;} #surf-report-wrap .sr-st-in{color:#5ab4f5;} #surf-report-wrap .sr-st-away{color:#8193a8;} #surf-report-wrap .sr-st-pill{margin-top:5px;border:1px solid currentColor;border-radius:12px;padding:2px 9px 2px 6px;} #surf-report-wrap .sr-st-pill.sr-st-new{background:#f5c542;color:#0a1628;border-color:#f5c542;} #surf-report-wrap .sr-st-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 2px;} #surf-report-wrap .sr-st-key .sr-st{color:#7ab8e8;} #surf-report-wrap .sr-st-key .sr-st svg{color:inherit;} #surf-report-wrap .sr-st-key .sr-st-new svg,#surf-report-wrap .sr-st-key .sr-st-new b{color:#f5c542;} #surf-report-wrap .sr-st-key .sr-st-in svg,#surf-report-wrap .sr-st-key .sr-st-in b{color:#5ab4f5;} #surf-report-wrap .sr-st-key .sr-st-away svg,#surf-report-wrap .sr-st-key .sr-st-away b{color:#8193a8;} #surf-report-wrap .sr-buoy-line span{color:#5a8ab0;} #surf-report-wrap .sr-buoy-name{font-size:.84rem;font-weight:700;color:#fff;} #surf-report-wrap .sr-buoy-name small{font-weight:500;color:#5a8ab0;margin-left:4px;} #surf-report-wrap .sr-buoy-hs{font-size:1.45rem;font-weight:800;color:#5ab4f5;line-height:1.25;margin-top:2px;} #surf-report-wrap .sr-buoy-hs small{font-size:.8rem;font-weight:600;color:#c8e6f8;} #surf-report-wrap .sr-buoy-line{font-size:.76rem;color:#7ab8e8;margin-top:2px;} #surf-report-wrap .sr-buoy-line b{color:#e8f4fd;font-weight:600;} #surf-report-wrap .sr-buoy-spark{width:100%;height:28px;display:block;margin-top:7px;} #surf-report-wrap .sr-buoy-foot{display:flex;justify-content:space-between;gap:8px;font-size:.66rem;color:#5a8ab0;margin-top:3px;} @media (max-width:600px){ #surf-report-wrap .sr-outlook,#surf-report-wrap .sr-buoys,#surf-report-wrap .sr-accuracy,#surf-report-wrap .sr-wind{padding:14px 12px 10px;} #surf-report-wrap .sr-outlook-table th,#surf-report-wrap .sr-outlook-table td{padding:6px 3px;font-size:.8rem;} } /* Wave-height chart + swell map, driven by one time slider */ #surf-report-wrap .sr-wave{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px 14px;} /* inside the daily card (sponsor โ†’ player โ†’ all reports โ†’ map + chart) it is a section, not a card-in-a-card */ #surf-report-wrap .sr-daily .sr-wave{margin:16px 0 0;padding:14px 0 0;border:none;border-top:1px solid #1e3d5c;border-radius:0;background:transparent;} #surf-report-wrap .sr-spots-label{padding:0 16px 10px;} #surf-report-wrap .sr-spots-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;} #surf-report-wrap .sr-spot-go{margin:0 16px 10px;max-width:100%;padding:7px 30px 7px 14px;border-radius:20px;border:1px solid #f5c542;background:#0f2236 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23f5c542' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/11px; color:#f5c542;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;} #surf-report-wrap .sr-daily .sr-spot-go{margin:0 0 10px;} /* while floating the pull-down lives in (iPhone Safari taps); phones go full width below, so it carries its own look */ body > select.sr-spot-go.sr-go-fixed{position:fixed;left:12px;right:12px;width:auto;max-width:420px;height:40px;margin:0 auto;z-index:2147483000;box-sizing:border-box; padding:7px 30px 7px 14px;border-radius:20px;border:1.5px solid #f5c542;color:#f5c542;font:700 16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-appearance:none;appearance:none;box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(10,22,40,.85); background:#0f2236 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23f5c542' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/11px;} #surf-report-wrap .sr-card{scroll-margin-top:90px;} #surf-report-wrap .sr-card-flash{animation:srFlash 1.6s ease-out;} @keyframes srFlash{0%,30%{box-shadow:0 0 0 3px #f5c542;}100%{box-shadow:0 0 0 3px rgba(245,197,66,0);}} #surf-report-wrap .sr-daily .sr-spots{margin:16px 0 0;padding:14px 0 0;border-top:1px solid #1e3d5c;} #surf-report-wrap .sr-daily .sr-spots-label{padding:0 0 10px;} #surf-report-wrap .sr-daily .sr-spots .sr-tabs{padding:0 0 14px;} #surf-report-wrap .sr-daily .sr-spots .sr-lineup-cta{margin:0 0 14px;} #surf-report-wrap .sr-daily .sr-spots .sr-grid{padding:0;} #surf-report-wrap .sr-daily .sr-spots .sr-card{background:#0a1a2c;} #surf-report-wrap .sr-wave .sr-tide-head{flex-wrap:wrap;} #surf-report-wrap .sr-wave-when{font-size:.8rem;color:#c8e6f8;font-weight:600;text-align:right;white-space:nowrap;margin-left:auto;} #surf-report-wrap .sr-wave-when b{color:#5ab4f5;font-size:.64rem;text-transform:uppercase;letter-spacing:.5px;margin-left:6px;} #surf-report-wrap .sr-wave-when b.past{color:#7ab8e8;} #surf-report-wrap #windy{width:100%;border-radius:10px;overflow:hidden;background:#0a1628;margin:10px 0 8px;position:relative;z-index:0;} #surf-report-wrap .sr-swan{width:100%;border-radius:10px;overflow:hidden;background:#0a1628;margin:10px 0 8px;position:relative;z-index:0;} #surf-report-wrap .sr-swan.leaflet-container{background:#0a1628;font-family:inherit;} #surf-report-wrap .sr-swan-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.75) contrast(.95) saturate(.35);} #surf-report-wrap .sr-swan .leaflet-control-attribution{background:rgba(10,22,40,.78);color:#7ab8e8;font-size:.6rem;padding:2px 6px;} #surf-report-wrap .sr-swan .leaflet-control-attribution a{color:#5ab4f5;} #surf-report-wrap .sr-swan .leaflet-bar a{background:#0f2236;color:#c8e6f8;border-color:#1e3d5c;} #surf-report-wrap .sr-swan .leaflet-bar a:hover{background:#1a6fc4;color:#fff;} #surf-report-wrap .sr-region{display:inline-flex;border:1px solid #1e3d5c;border-radius:20px;overflow:hidden;background:#0f2236;margin:10px 0 0;} #surf-report-wrap .sr-region + .sr-swan{margin-top:8px;} #surf-report-wrap .sr-region button{background:transparent;border:0;color:#c8e6f8;font:inherit;font-size:.72rem;font-weight:600;padding:6px 12px;cursor:pointer;} #surf-report-wrap .sr-region button.on{background:#1a6fc4;color:#fff;} #surf-report-wrap .sr-swan-legend{display:flex;align-items:flex-start;gap:12px;font-size:.68rem;color:#7ab8e8;margin:0 0 8px;} #surf-report-wrap .sr-swan-legend-label{white-space:nowrap;padding-top:1px;} #surf-report-wrap .sr-swan-scale{flex:1;display:flex;flex-direction:column;gap:3px;min-width:120px;} #surf-report-wrap .sr-swan-bar{display:block;height:8px;border-radius:4px;} /* numbers sit under the bar at each stop's position, centred on it (ends flush) */ #surf-report-wrap .sr-swan-ticks{position:relative;height:1em;color:#c8e6f8;font-weight:600;} #surf-report-wrap .sr-swan-ticks i{font-style:normal;position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;} #surf-report-wrap .sr-swan-ticks i.first{transform:none;} #surf-report-wrap .sr-swan-ticks i.last{left:auto !important;right:0;transform:none;} @media (max-width:600px){ #surf-report-wrap .sr-swan-legend{flex-wrap:wrap;} #surf-report-wrap .sr-swan-scale{flex-basis:100%;} #surf-report-wrap .sr-swan-ticks i:not(.m){display:none;} } #surf-report-wrap .sr-wave-note{font-size:.72rem;color:#7ab8e8;margin:0 0 6px;} #surf-report-wrap .sr-wave-note[hidden]{display:none;} #surf-report-wrap .sr-wave-canvas{position:relative;height:230px;margin-top:6px;} #surf-report-wrap .sr-wave-scrub-row{display:flex;align-items:center;gap:10px;margin:10px 0 2px;} #surf-report-wrap .sr-wave-scrub{display:block;flex:1;width:auto;margin:0;accent-color:#5ab4f5;cursor:pointer;} #surf-report-wrap .sr-wave-play{width:34px;height:34px;border-radius:50%;border:none;padding:0;background:#1a6fc4;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .18s;} #surf-report-wrap .sr-wave-play:hover{background:#1a85e8;} #surf-report-wrap .sr-wave-play svg{width:16px;height:16px;} #surf-report-wrap .sr-wave-play .ic-pause{display:none;} #surf-report-wrap .sr-wave-play.playing .ic-play{display:none;} #surf-report-wrap .sr-wave-play.playing .ic-pause{display:block;} #surf-report-wrap .sr-wave-ends{display:flex;justify-content:space-between;gap:8px;font-size:.68rem;color:#5a8ab0;margin-bottom:8px;} #surf-report-wrap .sr-wave-ends span:nth-child(2){text-align:center;} #surf-report-wrap .sr-wave-chips{display:flex;flex-wrap:wrap;gap:8px;} #surf-report-wrap .sr-wave-chip{display:inline-flex;align-items:center;gap:6px;background:#0a1628;border:1px solid #1e3d5c;border-radius:20px;padding:4px 11px;font-size:.76rem;color:#c8e6f8;cursor:pointer;font-family:inherit;line-height:1.3;} #surf-report-wrap .sr-wave-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;} #surf-report-wrap .sr-wave-chip b{color:#fff;font-weight:700;} #surf-report-wrap .sr-wave-chip.off{opacity:.4;} @media (max-width:600px){ #surf-report-wrap .sr-wave{padding:14px 12px 12px;} #surf-report-wrap .sr-wave-canvas{height:190px;} #surf-report-wrap .sr-wave-when{font-size:.74rem;} } /* Tabs */ /* Daily report player */ #surf-report-wrap .sr-daily{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px;} #surf-report-wrap .sr-daily-label{font-size:.68rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;} #surf-report-wrap .sr-daily-media{width:100%;max-height:420px;object-fit:cover;border-radius:10px;display:block;margin-bottom:12px;background:#0a1628;} #surf-report-wrap .sr-daily .sr-hero{margin:0 0 12px;} #surf-report-wrap .sr-daily .sca-sponsor{margin:0 0 12px;} #surf-report-wrap .sr-player{display:flex;align-items:center;gap:14px;background:#0a1628;border:1px solid #1e3d5c;border-radius:12px;padding:12px 14px;} #surf-report-wrap .sr-player-art{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none;background:#0f2236;} #surf-report-wrap .sr-player-main{flex:1;min-width:0;} @media (max-width:600px){ /* the phone card: top right, beside the title */ #surf-report-wrap .sr-np .sr-player{position:relative;} #surf-report-wrap .sr-np .sr-player-title{padding-right:92px;} #surf-report-wrap .sr-np .sr-np-share{position:absolute;top:0;right:0;z-index:2;} } #surf-report-wrap .sr-np-share{order:5;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid #ff8a00;background:rgba(10,22,40,.6);color:#fff;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;} #surf-report-wrap .sr-np-share:hover{background:rgba(255,138,0,.12);} #surf-report-wrap .sr-np-share svg{color:#ff9d2e;flex:none;} #surf-report-wrap .sr-player-title{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #surf-report-wrap .sr-player-bar{height:6px;border-radius:3px;background:#1e3d5c;cursor:pointer;position:relative;} #surf-report-wrap .sr-player-fill{height:100%;width:0%;border-radius:3px;background:#5ab4f5;transition:width .2s linear;} #surf-report-wrap .sr-player-times{display:flex;justify-content:space-between;font-size:.7rem;color:#5a8ab0;margin-top:5px;font-variant-numeric:tabular-nums;} #surf-report-wrap .sr-play-btn{width:52px;height:52px;border-radius:50%;border:none;background:#1a6fc4;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .18s;} #surf-report-wrap .sr-play-btn:hover{background:#1a85e8;} #surf-report-wrap .sr-play-btn svg{width:24px;height:24px;} #surf-report-wrap .sr-player-art-icon{display:flex;align-items:center;justify-content:center;background:#1a6fc4;color:#fff;} #surf-report-wrap .sr-player-art-icon svg{width:28px;height:28px;} #surf-report-wrap .sr-player-posted{font-weight:400;color:#5a8ab0;font-size:.72rem;} #surf-report-wrap .sr-player-posted:not(:empty)::before{content:'ยท ';} #surf-report-wrap .sr-skip-btn{width:40px;height:40px;border-radius:50%;border:1px solid #1e3d5c;background:transparent;color:#7ab8e8;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:all .18s;} #surf-report-wrap .sr-skip-btn:hover{color:#fff;border-color:#5ab4f5;} #surf-report-wrap .sr-skip-btn svg{width:24px;height:24px;} #surf-report-wrap .sr-player-ctrls{display:flex;align-items:center;gap:12px;flex:none;} #surf-report-wrap .sr-follow-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;} #surf-report-wrap .sr-follow-row .sr-follow{flex:1 1 240px;margin-top:0;} #surf-report-wrap .sr-follow-video .sr-follow-ic{background:linear-gradient(180deg,#5adcff,#1a6fc4);} #surf-report-wrap .sr-follow-video:hover{border-color:#5adcff;} #surf-report-wrap .sr-follow-spotify:hover{border-color:#1ed760;} #surf-report-wrap .sr-follow-spotify .sr-follow-ic{background:#1ed760;border-radius:50%;} #surf-report-wrap .sr-follow{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;background:#0f2236;border:1px solid #1e3d5c;border-radius:12px;color:#c8e6f8;text-decoration:none;transition:all .18s;} #surf-report-wrap .sr-follow:hover{border-color:#b150e2;background:#16304a;color:#fff;} #surf-report-wrap .sr-follow-ic{width:36px;height:36px;border-radius:9px;background:linear-gradient(180deg,#f452ff,#832bc1);display:flex;align-items:center;justify-content:center;flex:none;} #surf-report-wrap .sr-follow-ic svg{width:24px;height:24px;} #surf-report-wrap .sr-follow b{display:block;font-size:.88rem;color:#fff;} #surf-report-wrap .sr-follow small{display:block;font-size:.74rem;color:#7ab8e8;} #surf-report-wrap .sr-arch-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-top:1px solid #16304a;color:#c8e6f8;font-size:.85rem;padding:9px 4px;cursor:pointer;} #surf-report-wrap .sr-arch-row:hover{color:#fff;} #surf-report-wrap .sr-arch-row.active{color:#5ab4f5;} #surf-report-wrap .sr-editions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px;} #surf-report-wrap .sr-arch-row.sr-edition{width:auto;flex:1 1 150px;border:1px solid #1e3d5c;border-radius:22px;padding:6px 14px 6px 6px;background:#0f2236;font-weight:600;} #surf-report-wrap .sr-arch-row.sr-edition.active{border-color:#5ab4f5;} #surf-report-wrap .sr-arch-play{width:30px;height:30px;border-radius:50%;background:#1a6fc4;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:background .18s;} #surf-report-wrap .sr-arch-row:hover .sr-arch-play{background:#1a85e8;} #surf-report-wrap .sr-arch-play svg{width:14px;height:14px;} #surf-report-wrap .sr-arch-ic-pause{display:none;} #surf-report-wrap .sr-arch-row.playing .sr-arch-ic-play{display:none;} #surf-report-wrap .sr-arch-row.playing .sr-arch-ic-pause{display:block;} #surf-report-wrap .sr-arch-tag{margin-left:auto;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#0a1628;background:#f5c542;border-radius:20px;padding:3px 10px;} #surf-report-wrap .sr-back-latest{background:transparent;border:none;padding:0;margin-left:8px;color:#5ab4f5;font-size:.72rem;font-weight:600;cursor:pointer;} #surf-report-wrap .sr-back-latest:hover{text-decoration:underline;} #surf-report-wrap .sr-back-latest[hidden]{display:none;} /* v3.270/3.272: now-playing card on phones (matches the iOS app); desktop keeps the original wide player + follow cards */ #surf-report-wrap .sr-np{margin-top:12px;} #surf-report-wrap .sr-np[data-ed="am"] .sr-np-ic-pm,#surf-report-wrap .sr-np[data-ed="pm"] .sr-np-ic-am{display:none;} @media (max-width:600px){ #surf-report-wrap .sr-np{max-width:680px;margin:14px auto 4px;padding:16px;border-radius:20px;background:linear-gradient(180deg,#16385c,#0f2236);border:1px solid rgba(26,111,196,.45);} #surf-report-wrap .sr-np .sr-player{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:center;background:none;border:0;padding:0;} #surf-report-wrap .sr-np .sr-player-main{display:contents;} #surf-report-wrap .sr-np .sr-player-art{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#1a6fc4,#0e9bb0);} #surf-report-wrap .sr-np .sr-player-art svg{width:28px;height:28px;} #surf-report-wrap .sr-np .sr-player-title{margin:0;white-space:normal;font-size:1.05rem;line-height:1.25;} #surf-report-wrap .sr-np .sr-player-posted{display:block;margin-top:2px;font-size:.86rem;font-weight:400;} #surf-report-wrap .sr-np .sr-player-posted:not(:empty)::before{content:'';} #surf-report-wrap .sr-np .sr-editions{grid-column:1/-1;display:flex;gap:2px;margin:14px 0 0;padding:2px;border-radius:10px;background:rgba(255,255,255,.08);} #surf-report-wrap .sr-np .sr-arch-row.sr-edition{flex:1 1 0;justify-content:center;min-height:36px;border:0;border-radius:8px;padding:6px 8px;font-size:.86rem;font-weight:600;color:#e8f4fd;background:transparent;} #surf-report-wrap .sr-np .sr-arch-row.sr-edition.active{background:rgba(255,255,255,.2);color:#fff;} #surf-report-wrap .sr-np .sr-edition[data-date$="-pm"]{order:2;} #surf-report-wrap .sr-np .sr-player-bar{grid-column:1/-1;margin-top:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.15);transition:height .15s;} #surf-report-wrap .sr-np .sr-player-bar::before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px;} #surf-report-wrap .sr-np .sr-player-bar:hover,#surf-report-wrap .sr-np .sr-player-bar:active{height:9px;} #surf-report-wrap .sr-np .sr-player-fill{background:#7ab8e8;border-radius:3px;} #surf-report-wrap .sr-np .sr-player-times{grid-column:1/-1;margin-top:6px;font-size:.74rem;} #surf-report-wrap .sr-np .sr-player-ctrls{grid-column:1/-1;justify-content:center;gap:40px;margin-top:8px;width:auto;} #surf-report-wrap .sr-np .sr-skip-btn{width:44px;height:44px;border:0;color:#e8f4fd;} #surf-report-wrap .sr-np .sr-skip-btn svg{width:30px;height:30px;} #surf-report-wrap .sr-np .sr-play-btn{width:62px;height:62px;} #surf-report-wrap .sr-np .sr-play-btn svg{width:30px;height:30px;} } @media (max-width:600px){#surf-report-wrap .sr-np-shows .sr-follow-video{display:none;}} #surf-report-wrap .sr-np-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;} #surf-report-wrap .sr-np-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;border:0;border-radius:999px;background:rgba(122,184,232,.16);color:#a8d4f5;font-size:.86rem;font-weight:600;cursor:pointer;} #surf-report-wrap .sr-np-btn:hover{background:rgba(122,184,232,.28);color:#fff;} #surf-report-wrap .sr-np-btn svg{width:16px;height:16px;} #surf-report-wrap .sr-sheet{padding:0;border:0;border-radius:16px;background:#0f2236;color:#e8f4fd;width:min(560px,calc(100vw - 24px));max-height:80vh;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;} #surf-report-wrap .sr-sheet::backdrop{background:rgba(0,0,0,.55);} #surf-report-wrap .sr-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #1e3d5c;} #surf-report-wrap .sr-sheet-hd b{font-size:1rem;color:#fff;} #surf-report-wrap .sr-sheet-done{min-height:36px;padding:7px 16px;border:0;border-radius:999px;background:rgba(122,184,232,.16);color:#e8f4fd;font-weight:700;font-size:.9rem;cursor:pointer;} #surf-report-wrap .sr-sheet .sr-sheet-body{padding:14px 16px calc(18px + env(safe-area-inset-bottom));overflow:auto;max-height:calc(80vh - 62px);font-size:.95rem;line-height:1.6;color:#c8e6f8;} #surf-report-wrap .sr-np-shows{margin-top:14px;} #surf-report-wrap .sr-sheet .sr-follow-row{display:flex;flex-direction:column;gap:10px;margin:0;} #surf-report-wrap .sr-sheet .sr-follow-row .sr-follow{flex:none;} @media (max-width:600px){#surf-report-wrap .sr-np{margin:14px -10px 4px;padding:14px;}#surf-report-wrap .sr-np .sr-arch-row.sr-edition{font-size:.8rem;white-space:nowrap;padding:6px 4px;}#surf-report-wrap .sr-np-actions{flex-wrap:nowrap;gap:6px;}#surf-report-wrap .sr-np-btn{flex:1 1 auto;justify-content:center;padding:7px 8px;font-size:.8rem;white-space:nowrap;}} @media (max-width:400px){#surf-report-wrap .sr-np-btn svg{display:none;}} @media (min-width:601px){#surf-report-wrap .sr-np{display:flex;flex-direction:column;}#surf-report-wrap .sr-np-shows{order:2;margin-top:12px;}#surf-report-wrap .sr-np-actions{order:3;justify-content:flex-start;margin-top:12px;}#surf-report-wrap .sr-np-btn[data-sheet="sr-sheet-follow"]{display:none;}#surf-report-wrap .sr-np .sr-editions{margin:2px 0 8px;gap:6px;}#surf-report-wrap .sr-np .sr-arch-row.sr-edition{flex:0 0 auto;padding:4px 12px;font-size:.78rem;}} @media (max-width:600px){#surf-report-wrap .sr-sheet{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:16px 16px 0 0;max-height:85vh;}#surf-report-wrap .sr-sheet .sr-sheet-body{max-height:calc(85vh - 62px);}} #surf-report-wrap .sr-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;} #surf-report-wrap .sr-tabs-row{display:contents;} @media (max-width:600px){ /* phone: Go-to full width, All | My spots | Edit spots, then shores 2 x 2, all one height */ #surf-report-wrap .sr-spots-head{display:block;} #surf-report-wrap .sr-spot-go{display:block;width:calc(100% - 32px);height:40px;} #surf-report-wrap .sr-daily .sr-spot-go{width:100%;} #surf-report-wrap .sr-spots .sr-spot-go.sr-go-fixed{position:fixed;left:12px;right:12px;width:auto;margin:0;z-index:9990;box-shadow:0 6px 18px rgba(0,0,0,.5);} body > select.sr-spot-go.sr-go-fixed{max-width:none;} #surf-report-wrap .sr-tabs{flex-direction:column;} #surf-report-wrap .sr-tabs-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;} #surf-report-wrap .sr-tabs-shores{grid-auto-flow:row;grid-template-columns:1fr 1fr;} #surf-report-wrap .sr-tab{height:40px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;font-size:.8rem;min-width:0;} #surf-report-wrap .sr-tab-edit{padding:0 4px;letter-spacing:-.1px;} } #surf-report-wrap .sr-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 14px;} #surf-report-wrap .sr-daily .sr-spots .sr-sort{padding:0 0 14px;} #surf-report-wrap .sr-sort-label{color:#5d87ad;font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;} #surf-report-wrap .sr-sort-btn{padding:6px 14px;border-radius:20px;border:1px solid #1e3d5c;background:transparent;color:#7ab8e8;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;} #surf-report-wrap .sr-sort-btn:hover{background:#0f2236;} #surf-report-wrap .sr-sort-btn.active{background:#13304d;border-color:#7ab8e8;color:#fff;} #surf-report-wrap .sr-sort-btn.active::after{content:" \2193";} #surf-report-wrap .sr-cmp-btn{padding:6px 14px;border-radius:20px;border:1px dashed #f5c542;background:transparent;color:#f5c542;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;} #surf-report-wrap .sr-cmp-btn.active{background:#f5c542;border-style:solid;color:#04253c;} #surf-report-wrap .sr-grid.sr-cmp-mode .sr-card{position:relative;} #surf-report-wrap .sr-grid.sr-cmp-mode,#surf-report-wrap .sr-daily .sr-spots .sr-grid.sr-cmp-mode{padding-bottom:calc(var(--sr-cmp-h, 60px) + 24px);} /* the bar's real height (JS), it grows when its text wraps */ #surf-report-wrap .sr-grid.sr-cmp-two{grid-template-columns:repeat(2,minmax(0,440px)) !important;justify-content:center;} /* no Ohana Pass: the 2 picks side by side, the rest hidden */ #surf-report-wrap .sr-grid.sr-cmp-two > .sr-card:not(.sr-cmp-sel){display:none !important;} #surf-report-wrap .sr-grid.sr-cmp-two > .sr-card.sr-cmp-sel{display:block !important;min-width:0;} #surf-report-wrap .sr-grid.sr-cmp-mode .sr-card:has(.sr-cmp-pick.on){border-color:#f5c542;box-shadow:0 0 0 1px #f5c542;} #surf-report-wrap .sr-cmp-pick{position:absolute;top:10px;left:10px;z-index:6;min-height:40px;padding:7px 14px;border-radius:20px;border:1px solid #f5c542;background:rgba(4,13,28,.88);color:#f5c542;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;} #surf-report-wrap .sr-cmp-pick.on{background:#f5c542;color:#04253c;} #surf-report-wrap .sr-grid:not(.sr-cmp-mode) .sr-cmp-pick{display:none;} /* stop comparing (x, or Go to surf spot) takes the chips away */ #surf-report-wrap .sr-cmp-pick.full{opacity:.45;} #surf-report-wrap .sr-cmp-bar{position:fixed;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px));box-sizing:border-box;bottom:calc(66px + env(safe-area-inset-bottom));z-index:9990;display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px 9px 16px;border:1px solid #f5c542;border-radius:14px;background:#13233a;box-shadow:0 8px 24px rgba(0,0,0,.5);} #surf-report-wrap .sr-cmp-bar[hidden]{display:none;} #surf-report-wrap .sr-cmp-msg{flex:1;min-width:0;color:#c8e6f8;font-size:.88rem;line-height:1.35;} #surf-report-wrap .sr-cmp-msg b{color:#fff;} #surf-report-wrap .sr-cmp-msg.warn{color:#f5c542;} #surf-report-wrap .sr-cmp-go{flex:none;background:#ffc400;color:#04253c;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:800;font-size:.86rem;text-decoration:none;cursor:pointer;white-space:nowrap;} #surf-report-wrap .sr-cmp-x{flex:none;min-width:40px;min-height:40px;background:none;border:0;color:#7ab8e8;font-size:1.4rem;line-height:1;padding:4px 6px;cursor:pointer;} @media (max-width:600px){ #surf-report-wrap .sr-sort{display:grid;grid-template-columns:auto 1fr 1fr 1fr;} #surf-report-wrap .sr-sort-btn{height:36px;padding:0 4px;white-space:nowrap;} #surf-report-wrap .sr-cmp-btn{grid-column:1/-1;height:36px;} #surf-report-wrap .sr-cmp-go{padding:9px 12px;font-size:.8rem;} #surf-report-wrap .sr-grid.sr-cmp-two{grid-template-columns:1fr !important;} /* phones: 2 columns would be ~130px wide, so the two picks stack */ } #surf-report-wrap .sr-tab{padding:7px 18px;border-radius:20px;border:1px solid #1e3d5c;background:transparent;color:#7ab8e8;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;} #surf-report-wrap .sr-tab:hover{background:#0f2236;} #surf-report-wrap .sr-tab.active{background:#1a6fc4;border-color:#1a6fc4;color:#fff;} /* Grid */ #surf-report-wrap .sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:0 16px 24px;} #surf-report-wrap .sr-card{background:#0f2236;border:1px solid #1e3d5c;border-radius:12px;overflow:hidden;} #surf-report-wrap .sr-card.sr-error{border-color:#7a2020;} #surf-report-wrap .sr-card-photo{width:100%;height:160px;object-fit:cover;display:block;} #surf-report-wrap .sr-card-body{padding:14px 16px;} #surf-report-wrap .sr-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;} #surf-report-wrap .sr-name{font-size:1rem;font-weight:700;} #surf-report-wrap .sr-updated{font-size:.72rem;color:#5a8ab0;margin-top:2px;} #surf-report-wrap .sr-badge{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap;} #surf-report-wrap .sr-size{font-size:1.9rem;font-weight:800;color:#5ab4f5;line-height:1;} #surf-report-wrap .sr-surf-label{font-size:.78rem;color:#7ab8e8;margin-top:2px;} #surf-report-wrap .sr-src{display:inline-block;vertical-align:middle;font-size:.6rem;font-weight:700;letter-spacing:.5px;color:#0a1628;background:#5ab4f5;border-radius:4px;padding:2px 5px;margin-left:2px;line-height:1;cursor:help;} #surf-report-wrap .sr-hero-alt{font-size:.8rem;color:#c8e6f8;margin-top:4px;} #surf-report-wrap .sr-agree{font-style:normal;color:#5dde87;font-weight:700;cursor:help;} #surf-report-wrap .sr-agree.sr-diff{color:#f0c040;} #surf-report-wrap .sr-wind{margin:0 16px 16px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px 12px;} #surf-report-wrap .sr-wind-scroll{overflow-x:auto;margin-top:8px;} #surf-report-wrap .sr-wind{scroll-margin-top:150px;} /* card links land below the floating section bar */ #surf-report-wrap .sr-wind-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} #surf-report-wrap .sr-wind-tabs{display:flex;gap:4px;background:#0a1a2c;border:1px solid #1e3d5c;border-radius:18px;padding:3px;} #surf-report-wrap .sr-wind-tabs button{border:0;background:transparent;color:#7ab8e8;font-weight:700;font-size:.78rem;font-family:inherit;padding:5px 12px;border-radius:14px;cursor:pointer;} #surf-report-wrap .sr-wind-tabs button[aria-pressed="true"]{background:#1a6fc4;color:#fff;} #surf-report-wrap .sr-wind[data-view="map"] .sr-wind-list,#surf-report-wrap .sr-wind[data-view="list"] .sr-wind-mapbox{display:none;} #surf-report-wrap .sr-wind-map{height:340px;border-radius:10px;overflow:hidden;margin-top:8px;background:#13304d;} #surf-report-wrap .sr-wind-slide{display:flex;align-items:center;gap:10px;margin-top:8px;} #surf-report-wrap .sr-wind-slide input{flex:1;accent-color:#5ab4f5;} #surf-report-wrap .sr-wind-when{min-width:86px;text-align:right;color:#e8f4fd;font-size:.85rem;} #surf-report-wrap .sr-wind-pin{background:none;border:0;} #surf-report-wrap .sr-wmini{display:block;margin:10px 0 2px;text-decoration:none;} #surf-report-wrap .sr-wmini-t{display:flex;align-items:baseline;gap:6px;font-size:.72rem;color:#7ab8e8;text-transform:uppercase;letter-spacing:.4px;} #surf-report-wrap .sr-wmini-t b{color:#e8f4fd;text-transform:none;letter-spacing:0;font-size:.78rem;} #surf-report-wrap .sr-wmini-t em{margin-left:auto;font-style:normal;font-size:1.1rem;color:#5ab4f5;} #surf-report-wrap .sr-wmini-row{display:flex;align-items:flex-end;gap:10px;margin-top:5px;} #surf-report-wrap .sr-wmini-bars{position:relative;display:block;flex:1;height:30px;border-bottom:1px solid #1e3d5c;} #surf-report-wrap .sr-wchip{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:3px solid;background:#0a1628;color:#fff;box-sizing:border-box;} #surf-report-wrap .sr-wchip b{font-size:.72rem;line-height:1;} #surf-report-wrap .sr-wind-pick{display:block;width:100%;max-width:360px;margin:10px 0 2px;padding:9px 34px 9px 12px;border-radius:10px;border:1px solid #2c5a84;background:#0a1a2c;color:#e8f4fd;font-size:16px;font-family:inherit;} #surf-report-wrap .sr-wind.sr-wind-picked .sr-wind-list{display:none;} #surf-report-wrap .sr-wind-one{margin-top:10px;} #surf-report-wrap .sr-wind-onehead{font-size:.85rem;color:#c8e6f8;} #surf-report-wrap .sr-wind-onehead b{color:#fff;} #surf-report-wrap .sr-wind-onehead small{display:block;color:#7ab8e8;font-size:.72rem;margin-top:2px;} #surf-report-wrap .sr-wind-hint{margin:6px 0 0;font-size:.75rem;color:#7ab8e8;} #surf-report-wrap .sr-wmini-bars i{position:absolute;bottom:0;border-radius:2px 2px 0 0;opacity:.9;} #surf-report-wrap .sr-tchip{border-color:#5ab4f5;} #surf-report-wrap .sr-tmini{margin-top:12px;margin-bottom:14px;} #surf-report-wrap .sr-tmini-plot{position:relative;display:block;flex:1;height:34px;margin-top:12px;border-bottom:1px solid #1e3d5c;} #surf-report-wrap .sr-tmini-plot svg{position:absolute;inset:0;width:100%;height:100%;} #surf-report-wrap .sr-tmini-m{position:absolute;width:0;height:0;} #surf-report-wrap .sr-tmini-m i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#1a6fc4;border:1px solid #cfe9ff;} #surf-report-wrap .sr-tmini-l i{background:#cfe9ff;border-color:#1a6fc4;} #surf-report-wrap .sr-tmini-m small{position:absolute;bottom:5px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:.62rem;color:#c8e6f8;} #surf-report-wrap .sr-tmini-l small{bottom:auto;top:5px;} #surf-report-wrap .sr-tmini-now{position:absolute;width:0;height:0;z-index:1;} #surf-report-wrap .sr-tmini-now i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0a1628;box-shadow:0 0 0 2px rgba(255,255,255,.35);box-sizing:border-box;} #surf-report-wrap .sr-tmini-now b{position:absolute;bottom:9px;left:0;transform:translateX(-50%);font-size:.62rem;font-weight:800;letter-spacing:.5px;color:#fff;} #surf-report-wrap .sr-wind-svg{width:100%;min-width:640px;height:auto;display:block;} #surf-report-wrap .sr-wind-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.72rem;color:#7ab8e8;margin-top:6px;} #surf-report-wrap .sr-wind-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;} #surf-report-wrap .sr-wind-unit{margin-left:auto;color:#5a8ab0;} #surf-report-wrap .sr-acc-table td{font-weight:500;color:#e8f4fd;white-space:normal;} #surf-report-wrap .sr-acc-table td b{color:#5ab4f5;} #surf-report-wrap .sr-acc-table td small{color:#7ab8e8;font-size:.72rem;} #surf-report-wrap .sr-acc-table th small{font-weight:500;color:#5a8ab0;margin-left:3px;} #surf-report-wrap .sr-acc-best{background:rgba(93,222,135,.08)!important;box-shadow:inset 0 0 0 1px rgba(93,222,135,.35);border-radius:6px;} #surf-report-wrap .sr-accuracy p{font-size:.9rem;color:#c8e6f8;line-height:1.55;margin:10px 0 0;} #surf-report-wrap .sr-details{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:7px;} #surf-report-wrap .sr-dl{font-size:.7rem;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;} #surf-report-wrap .sr-dv{font-size:.82rem;color:#c8e6f8;margin-top:1px;} #surf-report-wrap .sr-wxv{display:flex;align-items:center;gap:5px;} #surf-report-wrap .sr-wxi{flex:none;} #surf-report-wrap .sr-caption{font-size:.78rem;color:#7ab8e8;padding:8px 16px 12px;border-top:1px solid #1e3d5c;font-style:italic;} /* conditions box: coloured header strip says the verdict, body tinted, 2px outline (Working / Partly working / Not working) */ #surf-report-wrap .sr-note{--c:240,192,64;margin-top:12px;padding:0 11px 9px;border-radius:9px;overflow:hidden;font-size:.8rem;line-height:1.45;color:#e8f4fd; border:2px solid rgba(var(--c),.6);background:rgba(var(--c),.09);} #surf-report-wrap .sr-note::before{content:"Partly working";display:block;margin:0 -11px 8px;padding:4px 11px;background:rgb(var(--c));color:#0a1628; font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;} #surf-report-wrap .sr-note-good{--c:93,222,135;} #surf-report-wrap .sr-note-good::before{content:"Working";} #surf-report-wrap .sr-note-poor{--c:122,152,184;} #surf-report-wrap .sr-note-poor::before{content:"Not working";} #surf-report-wrap .sr-safety{margin-top:10px;font-size:.76rem;line-height:1.5;color:#c8e6f8;} #surf-report-wrap .sr-safety b{color:#e8f4fd;font-weight:600;} #surf-report-wrap .sr-guard-on{color:#5dde87;font-weight:700;} #surf-report-wrap .sr-guard-off{color:#f0c040;font-weight:700;} #surf-report-wrap .sr-safety-alert{display:inline-block;margin:3px 4px 0 0;padding:1px 8px;border-radius:10px;font-weight:700;font-size:.7rem;color:#0a1628;background:#f5c542;} #surf-report-wrap .sr-safety-alert.sr-warn{background:#ff7a66;} #surf-report-wrap .sr-safety a{color:#5ab4f5;text-decoration:none;white-space:nowrap;} #surf-report-wrap .sr-lineup{position:relative;} #surf-report-wrap .sr-days{margin-top:12px;font-size:.72rem;} #surf-report-wrap .sr-days.sr-days-box{position:relative;margin-top:20px;padding:16px 10px 10px;border:1px solid #2c5a84;border-radius:12px;background:rgba(10,26,44,.45);} #surf-report-wrap .sr-days-badge{position:absolute;top:-10px;left:12px;padding:2px 10px;border-radius:10px;background:#1a6fc4;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;line-height:1.5;} #surf-report-wrap .sr-d11-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px;-webkit-overflow-scrolling:touch;} #surf-report-wrap .sr-d11{border-collapse:separate;border-spacing:3px;min-width:640px;width:100%;font-size:.85rem;table-layout:fixed;} /* equal day columns */ #surf-report-wrap .sr-d11 thead th:first-child{width:28px;} #surf-report-wrap .sr-d11 th{color:#7ab8e8;font-weight:700;text-align:center;padding:2px 0;white-space:nowrap;vertical-align:top;} #surf-report-wrap .sr-d11 tbody th{vertical-align:middle;} #surf-report-wrap .sr-d11 th small{display:block;color:#5a8ab0;font-weight:400;font-size:.66rem;} #surf-report-wrap .sr-d11 .sr-d11-lab{color:#5a8ab0;font-size:.66rem;width:24px;} #surf-report-wrap .sr-d11 td{text-align:center;vertical-align:top;} #surf-report-wrap .sr-d11 td small{display:block;height:1.4em;line-height:1.4em;margin-top:2px;font-size:.66rem;font-weight:700;white-space:nowrap;} #surf-report-wrap .sr-w-off{color:#5dde87;} #surf-report-wrap .sr-w-cross{color:#f0c040;} #surf-report-wrap .sr-w-on{color:#f07040;} #surf-report-wrap .sr-d11-far{opacity:.82;} #surf-report-wrap .sr-d11-lock{cursor:pointer;} #surf-report-wrap td.sr-d11-lock > *{filter:blur(4px);-webkit-user-select:none;user-select:none;} #surf-report-wrap th.sr-d11-lock::after{content:"\1F512";display:block;font-size:.7rem;margin-top:1px;filter:grayscale(.2);} #surf-report-wrap .sr-ohana-more{display:block;width:100%;margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed rgba(245,197,66,.6); background:rgba(245,197,66,.07);color:#f5c542;font-family:inherit;font-weight:700;font-size:.84rem;cursor:pointer;} #surf-report-wrap .sr-ohana-more:hover{background:rgba(245,197,66,.14);} #surf-report-wrap .sr-spot-link{display:block;margin-top:10px;padding:9px 12px;border:1px solid #5ab4f5;border-radius:10px;background:rgba(90,180,245,.08); text-align:center;font-size:.8rem;font-weight:700;color:#5ab4f5;text-decoration:none;} #surf-report-wrap .sr-spot-link:hover{background:rgba(90,180,245,.18);} #surf-report-wrap .sr-spot-page{padding:0 16px 24px;max-width:820px;margin:0 auto;} #surf-report-wrap .sr-sp-back{display:inline-block;margin:0 0 12px;color:#5ab4f5;font-weight:700;font-size:.85rem;text-decoration:none;} #surf-report-wrap .sr-sp-hero{margin-bottom:14px;} #surf-report-wrap .sr-sp-hero .sr-lineup img,#surf-report-wrap .sr-sp-hero .sr-lineup video,#surf-report-wrap .sr-sp-hero .sr-card-photo{height:auto;max-height:440px;aspect-ratio:16/9;} #surf-report-wrap .sr-sp-hero .sr-lineup-ph{height:220px;} #surf-report-wrap .sr-sp-name{font-size:1.6rem;font-weight:800;margin:0;color:#fff;line-height:1.15;} #surf-report-wrap .sr-sp-head{margin:0 2px 16px;} #surf-report-wrap .sr-subnav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -2px 16px;padding:16px 2px 4px;} #surf-report-wrap .sr-subnav::-webkit-scrollbar{display:none;} #surf-report-wrap .sr-subnav > a,#surf-report-wrap .sr-subnav > span{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px; background:#13304d;border:1px solid #1e3d5c;color:#e8f4fd;font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;} #surf-report-wrap .sr-subnav > a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--r,transparent);} #surf-report-wrap .sr-subnav a b{color:#5ab4f5;font-weight:700;} #surf-report-wrap .sr-subnav a:hover{border-color:#5ab4f5;} #surf-report-wrap .sr-subnav .sr-subnav-all{background:transparent;color:#5ab4f5;border-color:#2a5a86;} #surf-report-wrap .sr-subnav .sr-subnav-all::before{display:none;} #surf-report-wrap .sr-subnav .sr-subnav-on{background:#1a6fc4;border-color:#1a6fc4;color:#fff;} /* section bar: jump links, floats at the top while the spot page scrolls */ #surf-report-wrap .sr-secnav-slot{margin:0 0 14px;} #surf-report-wrap .sr-secnav-slot.sr-secnav-main{margin:0 16px 16px;} #surf-report-wrap .sr-secnav,body > nav.sr-secnav{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;gap:3px;padding:3px;border-radius:12px;background:#12304e;border:1.5px solid #4a90d9;box-sizing:border-box;} #surf-report-wrap .sr-secnav a,body > nav.sr-secnav a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px; color:#c8e6f8;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} #surf-report-wrap .sr-secnav a:hover,body > nav.sr-secnav a:hover{color:#fff;background:#13304d;} #surf-report-wrap .sr-secnav a.on,body > nav.sr-secnav a.on{background:#f5c542;color:#0a1628;} #surf-report-wrap .sr-secnav.sr-secnav-fixed,body > nav.sr-secnav.sr-secnav-fixed{position:fixed;left:12px;right:12px;z-index:2147483000;max-width:760px;margin:6px auto 0; box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 0 4px rgba(10,22,40,.85);} /* top layer: nothing in the theme can sit over it and swallow taps */ #surf-report-wrap .sr-sp-anchor{scroll-margin-top:150px;} @media (max-width:700px){header.sr-hdr-away{visibility:hidden !important;}} /* phones: the theme header steps aside while the section bar floats */ #surf-report-wrap .sr-sp-anchor{height:0;} /* phones: the theme pads its content 60px from the header; match the 16px side margin instead */ @media (max-width:700px){div:has(> .entry-content > #surf-report-wrap){padding-top:16px !important;}} #surf-report-wrap .sr-sp-title{font-size:2.1rem;font-weight:800;margin:0;color:#fff;line-height:1.1;letter-spacing:-.01em;} #surf-report-wrap .sr-sp-sub{margin:6px 0 12px;color:#7ab8e8;font-size:.88rem;} #surf-report-wrap .sr-sp-head .sr-head-tools{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;} #surf-report-wrap .sr-sp-head .sr-help-btn,#surf-report-wrap .sr-sp-head .sr-scale-wrap{position:static;} #surf-report-wrap .sr-sp-now{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7ab8e8;align-self:center;} #surf-report-wrap .sr-sp-hero .sr-size{font-size:2.6rem;} #surf-report-wrap .sr-sp-empty{color:#c8e6f8;font-size:.9rem;} #surf-report-wrap .sr-sp-box{position:relative;margin:0 0 14px;border-radius:14px;background:#0f2236;border:1px solid #1e3d5c;padding:16px 18px;} #surf-report-wrap .sr-wind-all{position:absolute;top:11px;right:14px;padding:5px 12px;border-radius:14px;background:#1a6fc4;color:#fff;font-size:.78rem;font-weight:700;text-decoration:none;} #surf-report-wrap .sr-sp-box .sr-tide-label{margin:0 0 10px;} #surf-report-wrap .sr-sp-box > .sr-tide-head{margin-bottom:10px;} #surf-report-wrap .sr-sp-box > .sr-tide-head .sr-tide-label{margin:0;} #surf-report-wrap .sr-sp-box .sr-days{font-size:.85rem;} #surf-report-wrap .sr-gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 22px;margin:14px 0 4px;} #surf-report-wrap .sr-gm-t{font-size:.72rem;color:#7ab8e8;} #surf-report-wrap .sr-gm-v{font-size:1.02rem;font-weight:800;color:#e8f4fd;margin:2px 0 10px;} #surf-report-wrap .sr-gm-bar{height:6px;border-radius:3px;background:#1e3d5c;overflow:hidden;} #surf-report-wrap .sr-gm-bar i{display:block;height:100%;border-radius:3px;background:#5ab4f5;} #surf-report-wrap .sr-gm-ends{display:flex;justify-content:space-between;font-size:.62rem;color:#5a8ab0;margin-top:3px;} #surf-report-wrap .sr-gm-seg{display:flex;gap:4px;} #surf-report-wrap .sr-gm-seg span{flex:1;text-align:center;font-size:.62rem;color:#5a8ab0;} #surf-report-wrap .sr-gm-seg i{display:block;height:6px;border-radius:3px;background:#1e3d5c;margin-bottom:3px;} #surf-report-wrap .sr-gm-seg .on i{background:#5ab4f5;} #surf-report-wrap .sr-gm-seg .on{color:#c8e6f8;} #surf-report-wrap .sr-gm p{font-size:.84rem;line-height:1.5;color:#c8e6f8;margin:8px 0 0;} #surf-report-wrap .sr-gf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 22px;margin:18px 0 6px;} #surf-report-wrap .sr-gf-grid b{font-size:.78rem;color:#7ab8e8;} #surf-report-wrap .sr-ideal{margin-top:6px;} #surf-report-wrap .sr-gf-grid p{font-size:.9rem;line-height:1.5;color:#e8f4fd;margin:2px 0 0;} #surf-report-wrap .sr-sp-h3{font-size:.85rem;color:#7ab8e8;margin:14px 0 6px;} #surf-report-wrap .sr-sp-p{font-size:.92rem;line-height:1.6;color:#c8e6f8;margin:0 0 10px;} #surf-report-wrap .sr-sp-p b{color:#fff;} #surf-report-wrap .sr-sp-new{color:#f5c542 !important;} #surf-report-wrap .sr-sp-admin{border:1px dashed #f5c542;border-radius:8px;padding:8px 10px;} #surf-report-wrap .sr-sp-admin a{color:#f5c542;} #surf-report-wrap .sr-sp-swells{width:100%;border-collapse:collapse;font-size:.85rem;} #surf-report-wrap .sr-sp-swells th{text-align:left;color:#5a8ab0;font-weight:600;padding:4px 0;} #surf-report-wrap .sr-sp-swells td{color:#e8f4fd;padding:5px 0;border-top:1px solid #1e3d5c;} #surf-report-wrap .sr-sp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;} #surf-report-wrap .sr-sp-facts li{background:#13304d;border-radius:10px;padding:8px 10px;color:#fff;font-weight:700;font-size:.88rem;} #surf-report-wrap .sr-sp-facts span{display:block;font-size:.66rem;font-weight:700;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;} #surf-report-wrap .sr-sp-allgal{display:block;margin:2px 0 12px;padding:11px 14px;border-radius:12px;border:1px solid #5ab4f5;background:rgba(90,180,245,.08);color:#5ab4f5;font-weight:700;font-size:.9rem;text-align:center;text-decoration:none;} #surf-report-wrap .sr-sp-allgal:hover{background:rgba(90,180,245,.18);} #surf-report-wrap .sr-sp-sub a{color:#5ab4f5;text-decoration:none;font-weight:600;} #surf-report-wrap .sr-gal-pager{display:flex;justify-content:space-between;gap:10px;margin-top:12px;} #surf-report-wrap .sr-gal-pager a{color:#5ab4f5;font-weight:700;text-decoration:none;} #surf-report-wrap .sr-sp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:10px;} #surf-report-wrap .sr-sp-tile{background:#0a1a2c;border:1px solid #1e3d5c;border-radius:10px;overflow:hidden;padding-bottom:8px;} #surf-report-wrap .sr-sp-tile .sr-lineup-credit{padding:6px 10px 0;} #surf-report-wrap .sr-sp-upload{display:inline-block;margin-top:4px;color:#f5c542;font-weight:700;font-size:.85rem;text-decoration:none;} #surf-report-wrap .sr-sp-map{display:block;width:100%;height:320px;border:0;border-radius:10px;overflow:hidden;background:#13304d;} #surf-report-wrap .sr-ci{margin:10px 0 2px;container-type:inline-size;} @container (min-width:560px){#surf-report-wrap .sr-ci-acts{grid-template-columns:1fr 1fr;}} @container (max-width:559px){#surf-report-wrap .sr-ci-up{font-size:.8rem;padding:10px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}} /* phones: one line, never wraps */ /* wide cards (computer): side by side; phones + narrow cards: one per line */ #surf-report-wrap .sr-ci-sum{font-size:.82rem;color:#c8e6f8;line-height:1.45;margin-bottom:6px;} #surf-report-wrap .sr-ci-sum b{color:#fff;} #surf-report-wrap .sr-ci-first .sr-ci-dot{background:#7ab8e8;opacity:.5;} #surf-report-wrap .sr-ci-go{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#7dd3fc;cursor:pointer;text-align:left;} #surf-report-wrap .sr-ci-ago{color:#7ab8e8;} #surf-report-wrap .sr-ci-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px;} #surf-report-wrap .sr-ci-better{background:#5dde87;} #surf-report-wrap .sr-ci-same{background:#5ab4f5;} #surf-report-wrap .sr-ci-worse{background:#ff9500;} #surf-report-wrap .sr-ci-acts{display:grid;gap:8px;} #surf-report-wrap .sr-ci-acts[hidden]{display:none;} #surf-report-wrap .sr-ci-up,#surf-report-wrap .sr-up-cta{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;border-radius:10px;border:0;background:#ff8a00; color:#04253c;font-weight:700;font-size:.86rem;line-height:1.2;padding:10px 12px;text-decoration:none;} /* upload = the solid orange call to action */ #surf-report-wrap .sr-ci-up:hover,#surf-report-wrap .sr-up-cta:hover{background:#ff9d2e;} #surf-report-wrap .sr-card-up{margin:12px 16px 0;} #surf-report-wrap .sr-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;width:100%;margin:12px 0 4px;padding:10px 12px;border-radius:10px;border:2.5px solid #5ab4f5;background:rgba(90,180,245,.10);color:#e8f4fd;font:inherit;font-size:.95rem;font-weight:800;cursor:pointer;} #surf-report-wrap .sr-more-btn:hover{background:rgba(90,180,245,.22);color:#fff;} #surf-report-wrap .sr-more-btn small{flex-basis:100%;font-size:.74rem;font-weight:600;color:#7ab8e8;} #surf-report-wrap .sr-more-btn[aria-expanded="true"] small{display:none;} #surf-report-wrap .sr-more[hidden]{display:none;} #surf-report-wrap .sr-up-cta{font-size:.9rem;padding:11px 14px;margin:4px 0 8px;} #surf-report-wrap .sr-ci-thanks a{color:#f5c542;font-weight:700;text-decoration:none;} #surf-report-wrap .sr-ci-ask{background:rgba(26,111,196,.1);border:1.5px solid #1a6fc4;border-radius:10px;color:#7ab8e8;font-weight:600;font-size:.86rem;line-height:1.2;font-family:inherit;padding:10px 12px;width:100%;cursor:pointer;} #surf-report-wrap .sr-ci-form{border:1px solid #1e3d5c;border-radius:12px;padding:10px;background:rgba(10,22,40,.5);} #surf-report-wrap .sr-ci-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px;} #surf-report-wrap .sr-ci-row button{min-height:40px;border-radius:10px;border:1px solid #1e3d5c;background:#13304d;color:#c8e6f8;font-weight:600;font-size:.78rem;line-height:1.2;font-family:inherit;cursor:pointer;padding:4px;} #surf-report-wrap .sr-ci-row button.on{background:#1a6fc4;border-color:#1a6fc4;color:#fff;} #surf-report-wrap .sr-ci-send{width:100%;min-height:40px;border-radius:10px;border:0;background:#f5c542;color:#0a1628;font-weight:800;font-size:.85rem;line-height:1;font-family:inherit;cursor:pointer;} #surf-report-wrap .sr-ci-send:disabled{opacity:.45;cursor:default;} #surf-report-wrap .sr-ci-msg{font-size:.78rem;color:#ff9d8c;margin-top:6px;} #surf-report-wrap .sr-ci-thanks{font-size:.8rem;color:#5dde87;font-weight:700;} #surf-report-wrap .sr-ci-join{font-size:.78rem;color:#c8e6f8;margin-top:6px;line-height:1.4;} #surf-report-wrap .sr-ci-join a{color:#f5c542;font-weight:800;text-decoration:none;} #surf-report-wrap .sr-sp-mapwrap{position:relative;} #surf-report-wrap .sr-map-tools{position:absolute;top:10px;right:10px;z-index:1000;display:flex;gap:6px;} #surf-report-wrap .sr-map-btn{padding:7px 11px;border-radius:18px;border:1px solid rgba(255,255,255,.35);background:rgba(10,22,40,.82);color:#fff; font-weight:700;font-size:.8rem;line-height:1;font-family:-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;white-space:nowrap;} #surf-report-wrap .sr-map-btn[aria-pressed="true"]{background:#1a6fc4;border-color:#1a6fc4;} @media (max-width:480px){ #surf-report-wrap .sr-sp-mapwrap:not(.sr-map-full) .sr-fs-word{display:none;} } #surf-report-wrap .sr-map-info{font-size:.78rem;color:#c8e6f8;line-height:1.45;} #surf-report-wrap .sr-map-info span{display:block;margin-top:8px;} #surf-report-wrap .sr-map-info span[hidden]{display:none;} #surf-report-wrap .sr-sp-mapwrap.sr-map-full{position:fixed;inset:0;z-index:2147483000;background:#0a1628;} html.sr-map-open .sr-secnav,html.sr-map-open .sr-secnav-slot > *{visibility:hidden !important;} #surf-report-wrap .sr-map-full .sr-sp-map{height:100%;border-radius:0;} #surf-report-wrap .sr-map-full .sr-map-tools{top:calc(env(safe-area-inset-top) + 12px);right:12px;} #surf-report-wrap .sr-map-full .sr-map-btn{padding:10px 14px;font-size:.9rem;} #surf-report-wrap .sr-sp-look{margin-top:10px;border-radius:10px;overflow:hidden;background:#13304d;} #surf-report-wrap .sr-sp-look[hidden]{display:none;} #surf-report-wrap .sr-look-view{width:100%;height:200px;} #surf-report-wrap .sr-look-cap{font-size:.72rem;color:#7ab8e8;padding:6px 10px;} #surf-report-wrap .sr-pin span{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid #0a1628; color:#0a1628;font-weight:800;font-size:12px;box-shadow:0 0 0 3px rgba(255,255,255,.55);} #surf-report-wrap .sr-sp-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.76rem;color:#c8e6f8;} #surf-report-wrap .sr-sp-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;} #surf-report-wrap .sr-ln{display:inline-block;width:18px;height:0;margin-right:5px;vertical-align:3px;border-top:3px solid;} #surf-report-wrap .sr-ln-route{border-top:3px dashed #5dde87;} #surf-report-wrap .sr-ln-channel{border-color:#5ab4f5;} #surf-report-wrap .sr-ln-hazard{height:9px;border:2px solid #ff6b6b;background:rgba(255,107,107,.3);vertical-align:-1px;} #surf-report-wrap .sr-sp-hz{margin:6px 0 0;font-size:.8rem;color:#ffb3b3;} #surf-report-wrap .sr-sp-hz b{color:#ff8b8b;} #surf-report-wrap .sr-pin-spot{background:#f5c542;} #surf-report-wrap .sr-pin-park{background:#5ab4f5;} #surf-report-wrap .sr-pin-entry{background:#5dde87;} #surf-report-wrap .sr-sp-dir{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} #surf-report-wrap .sr-sp-dir a{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:10px; border:1px solid #5ab4f5;background:rgba(90,180,245,.1);color:#e8f4fd;font-weight:700;font-size:.85rem;text-decoration:none;} #surf-report-wrap .sr-sp-dir a svg{color:#f5c542;flex:none;} #surf-report-wrap .sr-sp-dir a:hover{background:rgba(90,180,245,.2);} #surf-report-wrap .sr-sp-mapsrc{margin-top:6px;font-size:.68rem;color:#5a8ab0;} #surf-report-wrap .sr-sp-nearby{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:10px;} #surf-report-wrap .sr-sp-near{display:block;background:#13304d;border:1px solid #1e3d5c;border-radius:10px;padding:9px 11px;text-decoration:none;} #surf-report-wrap .sr-sp-near b{display:block;color:#fff;font-size:.9rem;} #surf-report-wrap .sr-sp-near span{color:#5ab4f5;font-size:.8rem;font-weight:700;} #surf-report-wrap .sr-sp-near:hover{border-color:#5ab4f5;} #surf-report-wrap .sr-days-row{display:grid;grid-template-columns:24px repeat(5,1fr);gap:3px;margin-top:3px;} #surf-report-wrap .sr-days-head{margin-top:0;color:#7ab8e8;font-weight:700;text-align:center;} #surf-report-wrap .sr-days-lab{color:#5a8ab0;font-weight:700;align-self:center;font-size:.66rem;} #surf-report-wrap .sr-day{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;padding:0 0 11px;border-radius:6px; background:#13304d;color:#e8f4fd;font-weight:700;white-space:nowrap;} #surf-report-wrap .sr-sp-box .sr-day{height:44px;padding-bottom:13px;} #surf-report-wrap .sr-key-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:14px;border:1px solid #1e3d5c; background:#0a1a2c;color:#7ab8e8;font-family:inherit;font-size:.72rem;font-weight:700;cursor:pointer;} #surf-report-wrap .sr-key-btn:hover{border-color:#5ab4f5;color:#e8f4fd;} #surf-report-wrap .sr-key-dlg{width:calc(100% - 32px);max-width:440px;max-height:calc(100% - 48px);overflow:auto;box-sizing:border-box;padding:16px 18px 18px; border:1px solid #1e3d5c;border-radius:16px;background:#0f2236;color:#e8f4fd;box-shadow:0 18px 50px rgba(0,0,0,.6);} #surf-report-wrap .sr-key-dlg::backdrop{background:rgba(4,10,20,.72);} #surf-report-wrap .sr-key-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;} #surf-report-wrap .sr-key-top b{font-size:1.05rem;} #surf-report-wrap .sr-key-x{width:34px;height:34px;border-radius:50%;border:1px solid #1e3d5c;background:#0a1a2c;color:#e8f4fd;font-size:20px;line-height:1;cursor:pointer;} #surf-report-wrap .sr-key-p{margin:0 0 12px;font-size:.82rem;color:#c8e6f8;line-height:1.45;} #surf-report-wrap .sr-key-exs{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px 10px;} #surf-report-wrap .sr-key-ex .sr-day{height:44px;padding-bottom:13px;font-size:.95rem;} #surf-report-wrap .sr-key-ex .sr-tr{height:11px;} #surf-report-wrap .sr-key-ex .sr-tr-up b:nth-child(3),#surf-report-wrap .sr-key-ex .sr-tr-down b:nth-child(1){height:11px;} #surf-report-wrap .sr-key-ex b{display:block;margin-top:6px;font-size:.8rem;} #surf-report-wrap .sr-key-ex small{display:block;font-size:.7rem;color:#7ab8e8;line-height:1.35;} /* gold rings: solid = Good or better, yellow-to-green gradient (rating key colours) = Fair to good (has potential, not promised) */ #surf-report-wrap .sr-day-good,#surf-report-wrap .sr-day-pot{border:2px solid transparent;} #surf-report-wrap .sr-day-good{border-color:#f5c542;box-shadow:0 0 8px rgba(245,197,66,.45);} #surf-report-wrap .sr-day-pot{background:linear-gradient(#13304d,#13304d) padding-box, linear-gradient(90deg,#ffcd1e 0%,#0bd674 100%) border-box;} /* rating key: Poor to fair -> Fair */ #surf-report-wrap .sr-tr{position:absolute;left:5px;right:5px;bottom:4px;height:9px;display:flex;align-items:flex-end;gap:2px;} #surf-report-wrap .sr-tr b{flex:1;height:5px;border-radius:2px;background:var(--r,#2a4a6c);} #surf-report-wrap .sr-tr-up b:nth-child(1),#surf-report-wrap .sr-tr-down b:nth-child(3){height:3px;} #surf-report-wrap .sr-tr-up b:nth-child(2),#surf-report-wrap .sr-tr-down b:nth-child(2){height:6px;} #surf-report-wrap .sr-tr-up b:nth-child(3),#surf-report-wrap .sr-tr-down b:nth-child(1){height:9px;} #surf-report-wrap .sr-sp-box .sr-tr{height:11px;} #surf-report-wrap .sr-sp-box .sr-tr-up b:nth-child(3),#surf-report-wrap .sr-sp-box .sr-tr-down b:nth-child(1){height:11px;} #surf-report-wrap .sr-sp-box .sr-tr-up b:nth-child(2),#surf-report-wrap .sr-sp-box .sr-tr-down b:nth-child(2){height:7px;} #surf-report-wrap .sr-sp-box .sr-tr-flat b{height:6px;} #surf-report-wrap .sr-k-tr{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;} #surf-report-wrap .sr-days-key .sr-tr{position:static;width:30px;height:10px;flex:none;gap:3px;--r:#7ab8e8;} #surf-report-wrap .sr-days-key .sr-tr-up b:nth-child(3),#surf-report-wrap .sr-days-key .sr-tr-down b:nth-child(1){height:9px;} #surf-report-wrap .sr-days-key .sr-tr-flat b{height:5px;} #surf-report-wrap .sr-k-good{display:inline-block;box-sizing:border-box;width:18px;height:14px;border-radius:4px;margin-right:3px;} #surf-report-wrap .sr-k-good.sr-day-good{background:#13304d;} #surf-report-wrap .sr-d11 td small em{font-style:normal;font-weight:400;opacity:.75;} @media (max-width:700px){#surf-report-wrap .sr-d11 td small em{display:none;}} /* phones: 14/22, the key says mph */ #surf-report-wrap .sr-days-key{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding:9px 12px;border-radius:10px;background:#0a1a2c;border:1px solid #1e3d5c; font-size:.74rem;color:#c8e6f8;align-items:center;} #surf-report-wrap .sr-days-key b{color:#7ab8e8;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;margin-right:2px;} #surf-report-wrap .sr-k{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;} #surf-report-wrap .sr-k::before{content:"";width:16px;height:5px;border-radius:3px;background:var(--r);} #surf-report-wrap .sr-days-key .sr-kw{font-weight:700;white-space:nowrap;} #surf-report-wrap .sr-days-key-br{flex-basis:100%;height:0;} #surf-report-wrap .sr-day-none{color:#5a8ab0;font-weight:400;} #surf-report-wrap .sr-days-src{margin-top:4px;color:#5a8ab0;font-size:.66rem;} #surf-report-wrap .sr-card-top-r{display:flex;align-items:center;gap:6px;} #surf-report-wrap .sr-bell{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1;-webkit-tap-highlight-color:transparent;} #surf-report-wrap .sr-bell-i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid #f5c542;font-size:15px;box-sizing:border-box;} #surf-report-wrap .sr-bell small{margin-top:3px;font-size:.55rem;font-weight:800;letter-spacing:.05em;color:#f5c542;} #surf-report-wrap .sr-bell:hover .sr-bell-i{background:rgba(245,197,66,.15);} #surf-report-wrap .sr-bell.on .sr-bell-i{background:#f5c542;} #surf-report-wrap .sr-bell-tip{position:absolute;z-index:5;width:210px;padding:9px 11px;border-radius:10px;background:#f5c542;color:#0a1628;font-size:.8rem;font-weight:700;line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.5);} #surf-report-wrap .sr-bell-tip::before{content:"";position:absolute;top:-7px;right:var(--arrow,20px);border:7px solid transparent;border-top:0;border-bottom-color:#f5c542;} #surf-report-wrap .sr-bell-tip button{border:0;background:none;padding:0;margin-left:2px;font:inherit;font-weight:600;color:#0a1628;opacity:.7;cursor:pointer;} #surf-report-wrap .sr-fav{background:none;border:0;padding:0 2px;font-size:1.25rem;line-height:1;color:#5a8ab0;cursor:pointer;} #surf-report-wrap .sr-fav.on{color:#f5c542;} #surf-report-wrap .sr-tab-fav{border-color:rgba(245,197,66,.6);color:#f5c542;} #surf-report-wrap .sr-tab-edit{display:inline-flex;align-items:center;gap:5px;border-style:dashed;} #surf-report-wrap .sr-tab svg{flex:none;} #surf-report-wrap .sr-tab-edit.open{background:#13304d;color:#fff;border-style:solid;} #surf-report-wrap .sr-tab-locked .sr-lock{color:#f5c542;} #surf-report-wrap .sr-ohana-dialog{box-sizing:border-box;max-width:340px;width:calc(100% - 40px);padding:24px 22px 18px;border:1px solid #f5c542;border-radius:16px; background:#0f2236;color:#e8f4fd;text-align:center;box-shadow:0 0 0 3px rgba(245,197,66,.12),0 20px 50px rgba(0,0,0,.5);} #surf-report-wrap .sr-ohana-dialog::backdrop{background:rgba(4,13,28,.72);} #surf-report-wrap .sr-od-star{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;background:rgba(245,197,66,.16);color:#f5c542;font-size:1.6rem;line-height:48px;} #surf-report-wrap .sr-ohana-dialog h3{margin:0 0 8px;font-size:1.1rem;color:#fff;} #surf-report-wrap .sr-ohana-dialog p{margin:0 0 16px;font-size:.88rem;line-height:1.5;color:#c8e6f8;} #surf-report-wrap .sr-ohana-dialog .sr-od-tiers{margin-top:-8px;font-size:.82rem;color:#f3e3b0;} #surf-report-wrap .sr-ohana-dialog .sr-od-tiers b{color:#f5c542;} #surf-report-wrap .sr-ohana-dialog .sr-od-trial{margin:-6px 0 14px;font-size:.95rem;font-weight:700;color:#fff;} #surf-report-wrap .sr-ohana-dialog .sr-od-trial b{color:#f5c542;} #surf-report-wrap .sr-od-join{display:block;padding:12px;border-radius:24px;background:#f5c542;color:#0a1628;font-weight:800;text-decoration:none;} #surf-report-wrap .sr-od-close{margin-top:10px;background:none;border:0;color:#7ab8e8;font-family:inherit;font-size:.85rem;cursor:pointer;} #surf-report-wrap .sr-grid-empty{margin:0 16px 16px;padding:18px;border:1px dashed #1e3d5c;border-radius:12px;text-align:center;color:#7ab8e8;font-size:.88rem;} #surf-report-wrap .sr-grid-empty[hidden]{display:none;} #surf-report-wrap .sr-daily .sr-spots .sr-grid-empty{margin:0;} #surf-report-wrap .sr-grid-empty button{margin-left:6px;padding:5px 12px;border-radius:14px;border:1px solid #5ab4f5;background:transparent;color:#e8f4fd;font-family:inherit;font-weight:700;cursor:pointer;} #surf-report-wrap .sr-edit-panel{margin:0 16px 14px;padding:12px 14px;border:1px solid #1e3d5c;border-radius:12px;background:#0a1a2c;} #surf-report-wrap .sr-edit-panel[hidden]{display:none;} #surf-report-wrap .sr-daily .sr-spots .sr-edit-panel{margin:0 0 14px;} #surf-report-wrap .sr-edit-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:8px;font-size:.85rem;color:#fff;} #surf-report-wrap .sr-edit-head span{color:#7ab8e8;font-size:.76rem;} #surf-report-wrap .sr-edit-shores{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:6px 14px;} #surf-report-wrap .sr-edit-shores fieldset{border:0;margin:0;padding:0;} #surf-report-wrap .sr-edit-shores legend{font-size:.68rem;font-weight:700;color:#5a8ab0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;} #surf-report-wrap .sr-edit-shores label{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:.84rem;color:#e8f4fd;cursor:pointer;} #surf-report-wrap .sr-edit-shores input{width:17px;height:17px;accent-color:#5ab4f5;} #surf-report-wrap .sr-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;} #surf-report-wrap .sr-edit-actions button{padding:7px 14px;border-radius:16px;border:1px solid #1e3d5c;background:transparent;color:#7ab8e8;font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;} #surf-report-wrap .sr-edit-actions .sr-edit-done{background:#1a6fc4;border-color:#1a6fc4;color:#fff;} #surf-report-wrap .sr-tab-fav.active{background:#f5c542;border-color:#f5c542;color:#0a1628;} #surf-report-wrap .sr-myspots-lock{display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:10px 12px;border-radius:12px; border:1px dashed rgba(245,197,66,.55);background:rgba(245,197,66,.06);color:#c8e6f8;font-size:.8rem;line-height:1.35;text-decoration:none;} #surf-report-wrap .sr-myspots-lock b{color:#fff;margin-right:4px;} #surf-report-wrap .sr-ms-star{flex:none;font-size:1.3rem;color:#f5c542;opacity:.75;} #surf-report-wrap .sr-ms-text{flex:1;min-width:0;} #surf-report-wrap .sr-ms-pill{flex:none;padding:5px 10px;border-radius:14px;background:#f5c542;color:#0a1628;font-weight:800;font-size:.72rem;white-space:nowrap;} #surf-report-wrap .sr-myspots-hint{margin:0 16px 12px;font-size:.78rem;color:#7ab8e8;} #surf-report-wrap .sr-myspots-hint[hidden]{display:none;} #surf-report-wrap .sr-daily .sr-spots .sr-myspots-lock,#surf-report-wrap .sr-daily .sr-spots .sr-myspots-hint{margin:0 0 12px;} #surf-report-wrap .sr-uvchip{display:inline-flex;align-items:center;gap:4px;color:#c8e6f8;} #surf-report-wrap .sr-uvchip b{color:var(--uv);} #surf-report-wrap .sr-transcript-body{padding:0 14px 14px;font-size:.9rem;line-height:1.6;color:#c8e6f8;} #surf-report-wrap .sr-share{margin-top:12px;} #surf-report-wrap .sr-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;} #surf-report-wrap .sr-card-acts .sr-share{display:contents;} /* its button + platform row join the grid */ #surf-report-wrap .sr-card-acts .sr-share-btn{order:0;white-space:nowrap;} #surf-report-wrap .sr-card-acts .sr-spot-link{order:1;margin:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;} #surf-report-wrap .sr-card-acts .sr-share-row{order:2;grid-column:1/-1;margin-top:0;} #surf-report-wrap .sr-card-acts > .sr-spot-link:only-child{grid-column:1/-1;} #surf-report-wrap .sr-share-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid #ff8a00; background:transparent;color:#ff9d2e;font-family:inherit;font-weight:700;font-size:.86rem;cursor:pointer;} /* outline: the upload button is the solid one */ #surf-report-wrap .sr-share-btn:hover{background:rgba(255,138,0,.12);} @media (max-width:600px){#surf-report-wrap .sr-share-btn{font-size:.8rem;padding:10px 8px;white-space:nowrap;} #surf-report-wrap .sr-share-spot{display:none;}} /* phones: one line */ #surf-report-wrap .sr-share-btn svg{color:#ff9d2e;flex:none;} #surf-report-wrap .sr-share-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} #surf-report-wrap .sr-share-row[hidden]{display:none;} #surf-report-wrap .sr-share-row a,#surf-report-wrap .sr-share-row button{flex:1 1 28%;padding:8px 6px;border-radius:8px;background:#13304d;border:1px solid #1e3d5c; color:#c8e6f8;font-family:inherit;font-weight:600;font-size:.76rem;text-align:center;text-decoration:none;cursor:pointer;} #surf-report-wrap .sr-share-row a:hover,#surf-report-wrap .sr-share-row button:hover{border-color:#5ab4f5;color:#fff;} #surf-report-wrap .sr-share-row .sr-share-ig{flex-basis:100%;border-color:rgba(245,197,66,.5);color:#f5c542;} #surf-report-wrap .sr-card{transition:box-shadow .5s;} #surf-report-wrap .sr-card.sr-card-hl{box-shadow:0 0 0 2px #f5c542,0 0 26px rgba(245,197,66,.45);} #surf-report-wrap .sr-lineup img,#surf-report-wrap .sr-lineup video{width:100%;height:200px;object-fit:cover;display:block;background:#040d1c;} #surf-report-wrap .sr-lineup video,#surf-report-wrap video.sr-daily-media,#surf-report-wrap .sr-lineup img,#surf-report-wrap img.sr-daily-media,#surf-report-wrap .sr-card-photo{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;} #surf-report-wrap .sr-lineup-tag{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:12px;background:rgba(10,22,40,.82);font-size:.7rem;font-weight:700;color:#e8f4fd;pointer-events:none;} #surf-report-wrap .sr-lineup-tag i{font-style:normal;color:#5dde87;} #surf-report-wrap .sr-lineup-credit{padding:6px 16px 0;font-size:.74rem;color:#7ab8e8;} #surf-report-wrap .sr-lineup-credit a{color:#5ab4f5;font-weight:600;text-decoration:none;} #surf-report-wrap .sr-lineup-vcredit{display:flex;align-items:center;justify-content:space-between;gap:8px;} #surf-report-wrap .sr-lineup-tag.sr-lineup-tag-r{left:auto;right:8px;} #surf-report-wrap .sr-lineup-fs{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:16px;border:1px solid #5ab4f5; background:rgba(90,180,245,.12);color:#e8f4fd;font-family:inherit;font-size:.74rem;font-weight:700;cursor:pointer;} #surf-report-wrap .sr-lineup-fs:hover{background:rgba(90,180,245,.24);} #surf-report-wrap .sr-lineup video:fullscreen{object-fit:contain;width:100%;height:100%;background:#000;} #surf-report-wrap .sr-lineup video:-webkit-full-screen{object-fit:contain;width:100%;height:100%;background:#000;} /* lineup call-to-action card + no-photo placeholder (markup from the Surf Chronic Lineup plugin) */ #surf-report-wrap .sr-lineup-cta{display:flex;align-items:center;gap:12px;margin:0 16px 14px;padding:12px 14px;border:1.5px solid #f5c542;border-radius:12px; background:linear-gradient(135deg,rgba(245,197,66,.10),#0f2236 60%);box-shadow:0 0 0 3px rgba(245,197,66,.10),0 0 18px rgba(245,197,66,.12);color:#e8f4fd;text-decoration:none;} #surf-report-wrap .sr-lineup-cta:hover{box-shadow:0 0 0 3px rgba(245,197,66,.22),0 0 22px rgba(245,197,66,.22);} #surf-report-wrap .sr-cta-icon{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(245,197,66,.16);color:#f5c542;} #surf-report-wrap .sr-cta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.84rem;line-height:1.35;color:#c8e6f8;} #surf-report-wrap .sr-cta-text b{font-size:.98rem;color:#fff;} #surf-report-wrap .sr-cta-btn{flex:none;padding:8px 14px;border-radius:20px;background:#f5c542;color:#0a1628;font-weight:800;font-size:.82rem;white-space:nowrap;} #surf-report-wrap .sr-lineup-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:160px;padding:0 18px;box-sizing:border-box;text-align:center; text-decoration:none;color:#c8e6f8;font-size:.8rem;line-height:1.35;border-bottom:1px dashed rgba(245,197,66,.55); background:radial-gradient(ellipse at 50% 120%,rgba(90,180,245,.18),transparent 60%),repeating-linear-gradient(170deg,#0f2236 0 14px,#11283f 14px 28px);} #surf-report-wrap .sr-lineup-ph b{font-size:.95rem;color:#fff;} #surf-report-wrap .sr-lineup-ph em{font-style:normal;font-weight:700;color:#f5c542;margin-top:2px;} #surf-report-wrap .sr-lineup-ph:hover em{text-decoration:underline;} #surf-report-wrap .sr-ph-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px dashed #f5c542;color:#f5c542;margin-bottom:2px;} @media (max-width:600px){ /* phones: the CTA button drops under the text instead of squeezing it to a word per line */ #surf-report-wrap .sr-lineup-cta,#surf-report-wrap .sr-myspots-lock{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:8px;} #surf-report-wrap .sr-cta-icon,#surf-report-wrap .sr-ms-star{grid-row:span 2;align-self:start;} #surf-report-wrap .sr-cta-btn,#surf-report-wrap .sr-ms-pill{justify-self:start;} } /* Rating colours */ /* Surfline's rating scale and colours (their --conditions* "traffic light" set), so the badge reads the way surfers already know it. Text colour is whichever of navy/white contrasts more. */ #surf-report-wrap .r-VERY_POOR{background:#f4496d;color:#0a1628} #surf-report-wrap .r-POOR{background:#ff9500;color:#0a1628} #surf-report-wrap .r-POOR_TO_FAIR{background:#ffcd1e;color:#0a1628} #surf-report-wrap .r-FAIR{background:#0bd674;color:#0a1628} #surf-report-wrap .r-FAIR_TO_GOOD{background:#009371;color:#0a1628} #surf-report-wrap .r-GOOD,#surf-report-wrap .r-VERY_GOOD{background:#6851f4;color:#fff} #surf-report-wrap .r-EPIC,#surf-report-wrap .r-GOOD_TO_EPIC{background:#5c00d0;color:#fff} #surf-report-wrap .r-FLAT{background:#4d8ba7;color:#0a1628} #surf-report-wrap .sr-help .sr-badge{display:inline-block;margin:2px 1px;font-size:.68rem;line-height:1.5;} @media(max-width:700px){ /* keep the Help button out of the centered title on narrow screens */ #surf-report-wrap .sr-help-btn{position:static;margin-top:2px;} #surf-report-wrap .sr-head-tools{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:2px;} #surf-report-wrap .sr-head-tools .sr-help-btn{margin-top:0;} #surf-report-wrap .sr-head-tools .sr-scale-wrap{position:static;} #surf-report-wrap .sr-player{gap:12px;padding:12px;flex-wrap:wrap;} #surf-report-wrap .sr-player-art{width:44px;height:44px;} #surf-report-wrap .sr-player-ctrls{width:100%;justify-content:center;gap:22px;margin-top:2px;} #surf-report-wrap .sr-player-title{white-space:normal;} #surf-report-wrap .sr-player-posted{display:block;margin-top:1px;} #surf-report-wrap .sr-player-posted:not(:empty)::before{content:'';} } @media(max-width:540px){ #surf-report-wrap .sr-grid{grid-template-columns:1fr;} #surf-report-wrap .sr-hero-size{font-size:1.9rem;} }