/* Bright's Beaches: look and feel. Colours and fonts are the variables at the top. */
:root{--bg:#e9f1f4;--card:rgba(251,253,250,.82);--line:rgba(60,110,110,.16);--ink:#1d3a3c;--mute:#6a8587;--accent:#3f7f68;--accent2:#7fb7cf;
 --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"DM Sans",ui-rounded,"Avenir Next",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:15px/1.45 var(--sans);min-height:100vh;
 background:radial-gradient(900px 600px at 95% -10%,#cfe5f2 0%,transparent 62%),radial-gradient(800px 700px at -10% 45%,#d5ead9 0%,transparent 60%),var(--bg);background-attachment:fixed}
.layout{max-width:1180px;margin:0 auto;padding:34px 16px 60px;display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:28px;grid-template-areas:"top vid" "about vid";align-items:start}
.top{grid-area:top;min-width:0}
.hero{text-align:center;margin:6px 0 26px}
h1{font:700 clamp(44px,8vw,76px)/1 var(--serif);letter-spacing:-.03em;margin:0;color:#1d4a45}
.tagline{font:italic 500 clamp(17px,2.6vw,22px) var(--serif);color:var(--accent);margin:10px 0 0}
.hero::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.intro{margin:0 0 10px;font-size:15px;line-height:1.55}.intro a{color:var(--accent);font-weight:700;text-decoration:none}.intro a:hover{text-decoration:underline}
.sub{color:var(--mute);margin:0 0 10px;font-size:13px}
.sub a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}.sub a:hover{color:var(--accent)}
.tip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--accent);background:rgba(63,127,104,.1);border:1px solid rgba(63,127,104,.25);border-radius:999px;padding:5px 12px;margin:0 0 14px;font-weight:500}
section,#vid{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px 8px;margin-bottom:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(40,90,100,.08)}
h2{font:500 italic 17px var(--serif);color:var(--accent);margin:0 0 6px}
.row{display:grid;grid-template-columns:minmax(92px,1.7fr) repeat(7,minmax(0,1fr));align-items:center}
.row+.row{border-top:1px solid var(--line)}
.head{font-size:11px;color:var(--mute);text-align:center;line-height:1.25}
.head div:first-child{text-align:left}
.head div:nth-child(2){color:var(--accent);font-weight:700}
.sticky{position:sticky;top:0;z-index:5;background:rgba(233,241,244,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;margin:0 0 10px;border-bottom:1px solid var(--line);border-radius:0 0 14px 14px}
.name{font-size:14px;font-weight:500;padding:4px 6px 4px 0}
.name button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.name button:hover .nm{color:var(--accent)}.name button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.nm{border-bottom:1px dotted rgba(63,127,104,.5)}.play{font-size:9px;color:var(--accent)}
.name button.sel .nm{color:var(--accent);font-weight:700;border-bottom-style:solid}
.cell{min-height:48px;padding:3px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cell:nth-child(2){background:rgba(127,183,207,.2);border-radius:10px}
.dot{border-radius:50%;flex:none}
.num{font-size:10px;color:var(--mute);display:none}.t-scores .num{display:block}
/* Score guide */
.guide{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0 0 12px;font-size:12.5px;color:var(--mute)}
.gi{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.gi b{color:var(--ink);font-weight:700}
/* Toggle bar */
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{display:inline-flex;cursor:pointer;user-select:none}.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{font-size:13px;font-weight:500;color:var(--mute);border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px;padding:5px 14px;transition:all .15s}
.chip:hover span{border-color:rgba(63,127,104,.5);color:var(--ink)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip.needslive,.chip input:disabled+span{opacity:.45;cursor:not-allowed}
/* Swell arrows, swell size, rain: hidden until their toggle is on */
.sw,.rn{display:none;flex-direction:column;align-items:center;line-height:1.1;min-height:0}
.t-swell .sw,.t-size .sw,.t-rain .rn{display:flex}
.sw .arrows{display:none;align-items:center;justify-content:center;gap:3px;height:22px}.t-swell .sw .arrows{display:inline-flex}
.sw .size{display:none;font-size:10px;color:var(--mute);white-space:nowrap}.t-size .sw .size{display:block}
.ar{flex:none;transition:transform .2s}.ar.p{fill:var(--accent)}.ar.s{fill:#5d97b3;opacity:.85}
.rn span{font-size:10.5px;color:#4d7f93;font-weight:500}.rn small{font-size:8.5px;margin-left:1px;opacity:.8}.rn .wet{color:#b0652a;font-weight:700}
#msg{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:12px;font-size:14px;color:var(--mute)}
#about{grid-area:about;margin-top:16px}#about h2{margin-bottom:10px}#about p{margin:0 0 10px;font-size:15px;line-height:1.65;color:#2f4f50}#about a{color:var(--accent);font-weight:700;text-decoration:none}#about a:hover{text-decoration:underline}
#vid{grid-area:vid;position:sticky;top:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;margin-bottom:0}
#vid h3{margin:0;font:700 19px/1.2 var(--serif);color:var(--ink)}#vid h3 small{display:block;font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
#vnote{font-size:12px;color:#8a6a2f;background:rgba(214,168,70,.16);border-radius:10px;padding:5px 10px;margin:0}
#vbody video{cursor:pointer;display:block;width:auto;max-width:100%;height:min(calc(100vh - 230px),560px);aspect-ratio:9/16;border-radius:16px;background:#0e2a2b;box-shadow:0 10px 30px rgba(40,90,100,.25)}
#vbody .none{color:var(--mute);font-size:14px;padding:30px 10px}
.vfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font-size:12px;color:var(--mute)}.vfoot a{color:var(--accent);text-decoration:none;font-weight:700}
.pbtn{background:rgba(63,127,104,.1);color:var(--accent);border:1px solid rgba(63,127,104,.35);border-radius:999px;padding:6px 14px;font:700 13px var(--sans);cursor:pointer}.pbtn:hover{background:rgba(63,127,104,.2)}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 290px;column-gap:20px}}
@media(max-width:899px){.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "vid" "about";padding:22px 8px 40px}
 #vid{position:static;margin-bottom:14px}#vbody video{height:auto;width:min(100%,330px)}}
@media(max-width:520px){.name{font-size:12px}.head{font-size:10px}section{padding:12px 10px 4px}.sticky{padding:8px 10px}}

@media(max-width:520px){.sec{display:none}.sw .arrows{height:20px}.rn span{font-size:9.5px}.rn small{display:none}.chip span{padding:5px 11px;font-size:12.5px}.guide{gap:6px 12px;font-size:12px}}

.modenote{margin:-6px 0 14px;font-size:12.5px;color:var(--mute);background:rgba(127,183,207,.18);border-radius:10px;padding:7px 12px;line-height:1.45}.modenote b{color:var(--ink)}

.howlink{margin:-4px 0 12px;font-size:12.5px}.howlink a{color:var(--accent);font-weight:500}
#about .steps{margin:0 0 12px;padding-left:20px}#about .steps li{margin:0 0 10px;font-size:15px;line-height:1.6;color:#2f4f50}#about .steps strong{color:var(--ink)}
#about .fine{font-size:13px;color:var(--mute);line-height:1.55}#about h2.why{margin-top:22px}