/* Break pages and the region browse. Tokens come from the site head (Dawn/Dusk via data-theme). */
.sb{padding-bottom:64px}
.sbcrumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:22px 0 0}
.sbcrumbs a{color:var(--muted)} .sbcrumbs a:hover{color:var(--ink)} .sbcrumbs span{color:var(--ink)}
.sbhead{padding:36px 0 28px;display:grid;gap:14px} .sbhead h1{font-size:clamp(38px,6vw,68px)}
.sbhero{background:#0F4C5C;color:#fff;margin-top:18px;border-radius:12px;overflow:hidden}
.sbband{padding:28px 28px 26px}
.sbmap{height:300px;background:var(--ol);cursor:pointer;position:relative}
.sbmap[hidden]{display:none}
@media (max-width:700px){.sbmap{height:220px}}
.sbhero .k{color:#9BB5BC} .sbhero h1{color:#fff;font-size:clamp(34px,6vw,64px);margin-top:6px}
.sbhero .sbsent{font-size:19px;line-height:1.4;color:#C9DADF;margin-top:10px;max-width:60ch}
.sbpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.sbhpl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#C9DADF;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:4px 8px;display:inline-flex;gap:6px;align-items:center}
.sbhpl.sun{color:#111B1F;background:#F0B35B;border-color:#F0B35B}
.sbhpl img{width:12px;height:12px;border-radius:3px;background:#fff;object-fit:contain}
.sbgrid{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:24px;align-items:start}
@media (max-width:860px){.sbgrid{grid-template-columns:1fr}}
.sbcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px}
.sbch{font-weight:800;font-size:23px;letter-spacing:-.03em;line-height:1.15;min-height:1.15em}
.sbcs{font-size:14px;color:var(--ink-2);margin-top:6px}
.sbnums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 6px}
.sbnums i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sbnums b{display:block;font-family:var(--mono);font-size:18px;font-weight:600;margin-top:2px} .sbnums small{display:block;font-size:12px;color:var(--ink-2)}
.sbbars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:76px;align-items:end;margin-top:10px}
.sbbars span{display:block;border-radius:2px 2px 0 0;background:var(--good);min-height:2px}
.sbbars .flat{background:var(--flat)} .sbbars .fair{background:var(--fair)} .sbbars .firing{background:var(--sun)} .sbbars .night{opacity:.45} .sbbars .now{outline:2px solid var(--ink);outline-offset:-2px}
.sbdays{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.sbbest{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:14px} .sbbest span{color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px}
.sbweek{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.sbweek div{border:1px solid var(--line);border-radius:8px;padding:10px 4px;text-align:center}
.sbweek i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sbweek b{display:block;font-family:var(--mono);font-size:14px;margin-top:4px} .sbweek em{display:block;font-style:normal;font-size:11px;color:var(--ink-2)}
.sbweek .wd{display:inline-block;width:6px;height:6px;border-radius:50%;margin-top:6px;background:var(--good)} .sbweek .wd.flat{background:var(--flat)} .sbweek .wd.fair{background:var(--fair)} .sbweek .wd.firing{background:var(--sun)}
.sbsline{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.sbsline img{width:30px;height:30px;border-radius:6px;object-fit:contain;flex:0 0 auto} [data-theme="dusk"] .sbsline img{filter:invert(1)}
.sbsline .sbline{font-weight:600;font-size:14px;line-height:1.3} .sbsline .sbby{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.sbsline .sbby a{color:var(--muted)} .sbsline .sbgo{margin-left:auto;font-weight:700;font-size:13px;white-space:nowrap;color:var(--accent)}
.sbspill{background:var(--sun);color:#111B1F;padding:1px 5px;border-radius:3px}
.sbtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sbtabs button{font:inherit;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.sbtabs button[aria-selected="true"]{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.sbplist{list-style:none;margin:8px 0 12px;padding:0}
.sbplist li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)} .sbplist li:first-child{border-top:0}
.sbplist b{display:block;font-size:15px;line-height:1.25} .sbplist b a{color:var(--ink)} .sbplist small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.sbplist .sbdist{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.sbok{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:var(--ocean);color:#fff;padding:2px 6px;border-radius:4px;white-space:nowrap}
[data-theme="dusk"] .sbok{background:#6FC3CF;color:#0B1416}
.sbzone{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
h2.sbsm{font-size:clamp(24px,3vw,32px)}
.sbcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sbsearch{width:100%;max-width:640px;font:inherit;font-size:17px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.sbsr{list-style:none;margin:6px 0 0;padding:0;max-width:640px} .sbsr a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;color:var(--ink);font-weight:600}
.sbsr a:hover{background:var(--bg-2)} .sbsr small{color:var(--muted);font-weight:500}
/* Section heads follow the home page: mono eyebrow with the Sun dot, headline with one italic phrase, lede. */
.sb .sbsec{padding:28px 0 72px} .sb .sbsec .head{max-width:none;margin-bottom:36px;gap:16px}
.sb .sbsec .head h1{font-size:clamp(40px,6vw,72px)} .sb .sbsec .head .lede{max-width:56ch}
.sbcells{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.sbcells.n2{grid-template-columns:repeat(2,1fr)} .sbcells.n1{grid-template-columns:1fr}
.sbcell{color:var(--ink);border-bottom:1px solid var(--line);transition:background .2s;gap:10px;position:relative}
.sbcells.n3 .sbcell:nth-child(3n){border-right:0} .sbcells.n2 .sbcell:nth-child(2n){border-right:0}
.sbcell:hover{background:var(--bg-2)}
.sbcell::after{content:"";position:absolute;left:28px;bottom:-1px;height:3px;width:0;background:var(--sun);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.sbcell:hover::after{width:calc(100% - 56px)}
.sbcell h3{font-size:24px;letter-spacing:-.03em}
.sbts{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--accent);line-height:1.35;font-variation-settings:"opsz" 18}
.sbchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sbchips i{font-style:normal;font-size:13px;font-weight:600;line-height:1;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--bg-2)}
.sbtc{font-size:14.5px;font-weight:700;color:var(--accent);margin-top:8px}
.sbarrow{position:absolute;top:26px;right:26px;font-size:26px;line-height:1;color:var(--muted);transition:color .2s,transform .2s}
.sbcell:hover .sbarrow{color:var(--accent);transform:translateX(3px)}
@media (max-width:900px){.sbcells,.sbcells.n2{grid-template-columns:1fr} .sbcell{border-right:0}}
/* Break rows: hairline list, like the home page lists. */
.sbrows{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));column-gap:48px;border-top:1px solid var(--line)}
.sbrows.sbone{grid-template-columns:1fr;column-gap:0;margin-top:10px}
.sbrows a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;transition:color .15s}
.sbrows a:hover{color:var(--accent)} .sbrows small{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:500;white-space:nowrap;text-align:right}
.sbzone{margin:34px 0 4px} .sbzone:first-child{margin-top:0}
/* What's on right now: a conditions dot before every break, filled from spots_now. */
.sbdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto;margin-right:10px;vertical-align:middle;transition:background .3s}
.sbdot.flat{background:var(--flat)} .sbdot.fair{background:var(--fair)} .sbdot.good{background:var(--good)} .sbdot.firing{background:var(--sun);box-shadow:0 0 0 3px rgba(240,179,91,.25)}
.sbrows a span:first-child+span{flex:1}
.sbnowline{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .sbnowline .sbdot{margin-right:6px}
.sbnow:empty{display:none} .sbnow{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--good);margin-top:6px} .sbnow .sbdot{margin-right:6px}
/* The break on the map: a Sun pin with a Deep Sea ring and a swell ring that breathes. */
.sbpin{width:18px;height:18px;border-radius:50%;background:var(--sun);border:3px solid #0F4C5C;box-shadow:0 0 0 2px #fff;position:relative}
.sbpin::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(46,125,138,.55);animation:sbping 2.6s ease-out infinite}
@keyframes sbping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.sbpin::after{animation:none;display:none}}
.sbmap .maplibregl-ctrl-attrib{font-size:9px;background:rgba(255,255,255,.6)} [data-theme="dusk"] .sbmap .maplibregl-ctrl-attrib{background:rgba(11,20,22,.6);color:#B8C7CC} [data-theme="dusk"] .sbmap .maplibregl-ctrl-attrib a{color:#B8C7CC}
/* Dusk: lift the type on the Deep Sea band and the card so nothing reads green on green (Nick, 2026-09-07). */
[data-theme="dusk"] .sbhero .k{color:#DCE8EB} [data-theme="dusk"] .sbsent{color:#F2F6F7}
[data-theme="dusk"] .sbhpl{color:#F2F6F7;border-color:rgba(255,255,255,.55)}
[data-theme="dusk"] .sbcs,[data-theme="dusk"] .sbnums small,[data-theme="dusk"] .sbweek em{color:#C9D4D8}
[data-theme="dusk"] .sbnums i,[data-theme="dusk"] .sbdays,[data-theme="dusk"] .sbbest,[data-theme="dusk"] .sbweek i{color:#A9B8BD}
[data-theme="dusk"] .sbbars .good,[data-theme="dusk"] .sbweek .wd.good,[data-theme="dusk"] .sbdot.good{background:#6FC3CF}
[data-theme="dusk"] .sbbars .fair,[data-theme="dusk"] .sbweek .wd.fair,[data-theme="dusk"] .sbdot.fair{background:#8FC9D0}
[data-theme="dusk"] .sbbars .flat,[data-theme="dusk"] .sbweek .wd.flat,[data-theme="dusk"] .sbdot.flat{background:#7A8A90}
[data-theme="dusk"] .sbtc,[data-theme="dusk"] .sbgo,[data-theme="dusk"] .sbnow{color:#B7DDE2}
[data-theme="dusk"] .sbtabs button[aria-selected="true"]{background:#6FC3CF;color:#0B1416;border-color:#6FC3CF}
/* Dawn, alive: water-tinted flat bars, the tide as a Deep Sea line, the Sun on the axis. */
:root{--tide:#0F4C5C} [data-theme="dusk"]{--tide:#9CCBD1}
.sbbars .flat{background:#D3E4E7} [data-theme="dusk"] .sbbars .flat{background:#33474D}
.sbbars .fair{background:#9CCBD1} .sbbars .night{opacity:.55}
.sbbarwrap{position:relative;margin-top:10px} .sbbarwrap .sbbars{margin-top:0}
.sbtide{position:absolute;inset:0;pointer-events:none} .sbtide svg{width:100%;height:100%;display:block}
.sbtide i{position:absolute;top:-2px;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--tide);background:var(--surface);padding:0 3px;border-radius:3px}
.sbsun{position:absolute;left:0;right:0;bottom:-5px;height:10px;pointer-events:none}
.sbsun b{position:absolute;top:0;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);background:var(--sun);box-shadow:0 0 0 2px var(--surface)}
.sbsun b.set{background:var(--surface);border:2px solid var(--sun);width:5px;height:5px;box-shadow:none}
.sbdays{margin-top:12px}
.sblegend{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:flex;gap:14px;align-items:center}
.sbleg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle} .sbleg.rise{background:var(--sun)} .sbleg.set{border:2px solid var(--sun);width:5px;height:5px} .sbleg.tide{width:14px;height:2px;border-radius:1px;background:var(--tide)}
.sbastro{font-size:13px;color:var(--ink-2);margin-top:6px} .sbastro:empty{display:none}
.sbweek div{border-top:3px solid var(--line)} .sbweek div.flat{border-top-color:#D3E4E7} .sbweek div.fair{border-top-color:var(--fair)} .sbweek div.good{border-top-color:var(--good)} .sbweek div.firing{border-top-color:var(--sun)}
[data-theme="dusk"] .sbweek div.flat{border-top-color:#33474D}
/* Phones: two stats per row, the week scrolls sideways, tighter band and card padding. */
@media (max-width:520px){
  .sbnums{grid-template-columns:repeat(2,1fr);gap:12px 10px} .sbnums b{font-size:20px}
  .sbweek{display:flex;overflow-x:auto;gap:6px;scroll-snap-type:x mandatory;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .sbweek::-webkit-scrollbar{display:none}
  .sbweek div{flex:0 0 74px;scroll-snap-align:start}
  .sbband{padding:22px 20px 22px} .sbhero h1{font-size:clamp(32px,11vw,44px)} .sbsent{font-size:17px}
  .sbcard{padding:16px 14px 14px} .sbch{font-size:21px}
  .sbbars{height:64px} .sbtide i{font-size:8px}
  .sbrows{grid-template-columns:1fr;column-gap:0}
  .sbcell{padding:22px 20px 22px} .sbcell h3{font-size:22px} .sbarrow{top:18px;right:18px}
  .sbcta .btn{flex:1 1 auto;justify-content:center}
  .sblegend{gap:10px;flex-wrap:wrap}
  .sb .sbsec .head h1{font-size:clamp(34px,11vw,44px)}
  .sbsearch{font-size:16px}
}
/* Grid children never widen the page: the week's scroll row and the tabs stay inside their column. */
.sbgrid>*{min-width:0} .sbcard{min-width:0} .sbweek{max-width:100%} .sbtabs{max-width:100%}