/* Swell Otter live forecast widget (forecast-widget.js). Used in articles and inside the Hi Otter chat.
   Uses the site colour tokens (--navy, --paper, ...). */
.so-widget{display:block;margin:20px 0;background:var(--paper);border:2px solid var(--navy);border-radius:12px;overflow:hidden;box-shadow:3px 3px 0 var(--rust);font-size:13.5px;line-height:1.35}
.sow-head{display:flex;align-items:center;gap:10px;background:var(--navy);color:var(--cream);padding:7px 12px}
.sow-head b{font:400 17px/1.1 var(--display);text-shadow:2px 2px 0 var(--rust)}
.sow-live{display:flex;align-items:center;gap:6px;font:800 10.5px var(--narrow);text-transform:uppercase;letter-spacing:.12em;color:var(--mustard)}
.sow-live i{width:8px;height:8px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 3px rgba(63,160,69,.3);animation:sowp 2s infinite}
@keyframes sowp{50%{box-shadow:0 0 0 5px rgba(63,160,69,0)}}
@media (prefers-reduced-motion:reduce){.sow-live i{animation:none}}
.so-widget .sow-src{margin-left:auto;font:600 10.5px var(--narrow);color:var(--sage)}
.so-widget .sow-src a{color:inherit}
.sow-load{margin:0;padding:14px 12px;color:var(--muted)}
.sow-cam a:first-child{display:block;position:relative;aspect-ratio:16/5;overflow:hidden;background:#14212f}
.sow-cam{position:relative;border-bottom:2px solid var(--line)}
.sow-cam img{width:100%;height:100%;object-fit:cover;display:block}
.sow-cam span{position:absolute;left:8px;bottom:6px;background:rgba(31,48,68,.75);color:var(--cream);font:700 10.5px var(--narrow);padding:2px 8px;border-radius:999px}
.so-widget .sow-camcr{position:absolute;right:6px;top:6px;font:600 10px var(--narrow);color:var(--cream);background:rgba(31,48,68,.6);padding:2px 6px;border-radius:999px;text-decoration:none}
.sow-now{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:8px 12px;border-bottom:2px solid var(--line);color:var(--navy)}
.sow-now>small{font:800 10.5px var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sow-nowv{display:flex;align-items:center;gap:6px}
.sow-nowv b{font:900 17px var(--body)}
.sow-nowv b small{font-size:11px}
.sow-nowv .stars{font-size:13px}
.sow-dir{display:inline-flex;align-items:center;gap:3px;font:800 13px var(--body)}
.sow-dir svg{width:13px;height:13px}
.sow-now .badge{font-size:11px;padding:1px 8px}
.sow-days{list-style:none;margin:0;padding:16px 8px 10px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;text-align:center}
.sow-days li{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:10px;background:var(--cream);border:2px solid var(--line);border-top-width:5px;--q:var(--line)}
.sow-days li.q1{--q:var(--orange)} .sow-days li.q2{--q:var(--mustard)} .sow-days li.q3{--q:var(--teal)} .sow-days li.q4{--q:var(--olive)}
.sow-days li:not(.q0){border-color:var(--q)}
.sow-days li.q0{opacity:.75}
.sow-days>li>small{font:800 11px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.sow-days b{font:900 clamp(14px,3.8vw,17px)/1 var(--body);color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.sow-days b small{font-size:.6em;font-weight:800;letter-spacing:0}
.sow-bar{display:flex;align-items:flex-end;width:12px;height:22px;border-radius:3px;background:rgba(31,48,68,.08);overflow:hidden}
.sow-bar i{display:block;width:100%;background:var(--q)}
.sow-days li.q0 .sow-bar i{background:#cfc4ab}
.sow-days .stars{font-size:clamp(8.5px,2.3vw,11px);letter-spacing:0}
.sow-w{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:999px;background:var(--muted);color:#fff;font:800 11px var(--narrow)}
.sow-w svg{width:11px;height:11px}
.sow-w.off-shore{background:var(--olive)} .sow-w.cross{background:var(--orange)} .sow-w.on-shore{background:var(--rust)}
.sow-at{font:700 10.5px var(--narrow);color:var(--teal)}
.sow-days li.pick{background:var(--navy);border-color:var(--mustard);transform:translateY(-3px);box-shadow:0 3px 0 var(--orange),0 6px 0 var(--rust)}
.sow-days li.pick>small,.sow-days li.pick b,.sow-days li.pick .sow-at{color:var(--cream)}
.sow-days li.pick .stars .off{color:#4a5d72}
.sow-days li.pick .sow-bar{background:rgba(255,255,255,.12)}
.sow-days li.pick .sow-bar i{background:var(--mustard)}
.sow-best{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--mustard);color:var(--navy);font:900 9px var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.12em;padding:2px 7px;border-radius:999px;box-shadow:0 2px 0 var(--navy);white-space:nowrap}
.sow-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 10px}
.sow-tides{display:flex;flex-wrap:wrap;gap:2px 10px;font:600 12px var(--narrow);color:var(--muted)}
.sow-tides b{color:var(--navy);font-weight:800}
.so-widget .sow-cta{flex:none;padding:6px 12px;border-radius:999px;background:var(--mustard);color:var(--navy);font:800 12.5px var(--body);text-decoration:none}
.so-widget .sow-cta:hover{background:var(--orange);color:#fff}
@media (max-width:420px){.so-widget .sow-src{display:none}.sow-days{gap:3px;padding-inline:5px}}