/* Conditions instrument: scoped to the widget, including in the admin preview. */
.sscw {
	--sscw-navy: #f3f8fa;
	--sscw-deep: #fff;
	--sscw-raised: #f6f1df;
	--sscw-text: #192a35;
	--sscw-muted: #516574;
	--sscw-rule: #d1dde2;
	--sscw-blue: #21659a;
	--sscw-magenta: #ab1e68;
	--sscw-font: Inter, var( --font-family-base, system-ui ), sans-serif;
	box-sizing: border-box;
	width: 100%;
	max-width: 76rem;
	margin: 0 auto;
	container: sscw / inline-size;
	background: var( --sscw-deep );
	color: var( --sscw-text );
	font: 400 16px/1.45 var( --sscw-font );
	text-align: left;
	border: 1px solid var( --sscw-rule );
	border-radius: 14px;
	overflow: hidden;
}
.sscw *, .sscw *::before, .sscw *::after { box-sizing: border-box; }
/* The page template's .entry-content-body h2/p rules are (0,2,1); keep widget spacing independent of them. */
.sscw.sscw.sscw :where( p, h2, dl, dt, dd, figure, ul, ol ) { margin: 0; }
.sscw__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
	background: var( --sscw-navy );
}
.sscw__identity { min-width: 0; }
.sscw__name {
	display: block;
	color: var( --sscw-muted );
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .13em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.sscw.sscw .sscw__title { margin-top: .25rem; font-size: 1.55rem; line-height: 1.2; font-weight: 700; color: var( --sscw-text ); }
.sscw__demo-pill {
	flex: none;
	padding: .45rem .7rem;
	border: 1px solid #d8a0bc;
	border-radius: 6px;
	background: #f9e7ef;
	color: #772250;
	font-size: .8rem;
	font-weight: 700;
	white-space: nowrap;
}
.sscw.sscw .sscw__demo-note {
	padding: .65rem 1.5rem;
	border-bottom: 1px solid var( --sscw-rule );
	background: #fff3d9;
	color: #543d18;
	font-size: .84rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.sscw__demo-note::before { content: 'ⓘ'; margin-right: .5em; font-size: 1rem; }
.sscw__stale-note { display: none; padding: .6rem 1.5rem; background: #fbe7eb; color: #812543; font-size: .86rem; }
.sscw__stale-note.is-shown { display: block; }
.sscw__body { display: grid; grid-template-columns: minmax( 0, 1fr ); }
.sscw__primary, .sscw__secondary { min-width: 0; }
.sscw__primary { padding: 1.35rem 1.5rem; }
.sscw__secondary { border-top: 1px solid var( --sscw-rule ); }
.sscw__section-head, .sscw__panel-head, .sscw__tide-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .2rem 1rem;
}
.sscw.sscw .sscw__h2 { color: var( --sscw-text ); font-size: 1.13rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; }
.sscw__time, .sscw__period, .sscw__tide-source { color: var( --sscw-muted ); font-size: .8rem; font-weight: 400; }
.sscw__hero {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 132px;
	grid-template-areas: 'reading rose' 'reading direction';
	align-items: center;
	gap: 0 1rem;
	margin-top: .7rem;
}
.sscw__readout { grid-area: reading; min-width: 0; }
.sscw__reading-label { display: block; color: var( --sscw-muted ); font-size: .86rem; }
.sscw__knots { font-size: clamp( 4rem, 7.5cqi, 5rem ); font-weight: 700; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sscw__knots small { margin-left: .16em; color: var( --sscw-muted ); font-size: .29em; font-weight: 450; letter-spacing: 0; }
.sscw__gust { margin-top: .65rem; color: var( --sscw-muted ); font-size: .9rem; white-space: nowrap; }
.sscw__gust b { margin-left: .24rem; color: var( --sscw-magenta ); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sscw__gust small { color: var( --sscw-magenta ); font-size: .85rem; }
.sscw__rose { grid-area: rose; width: 132px; height: 132px; max-width: 100%; }
.sscw__rose-land { fill: #faf8ef; }
.sscw__rose-sea { fill: #d9eaf1; }
.sscw__rose-edge { fill: none; stroke: #617f8d; stroke-width: 1.3; }
.sscw__rose-inner { fill: none; stroke: var( --sscw-rule ); stroke-width: 1; }
.sscw__rose-ticks { stroke: #617f8d; stroke-width: 2; }
.sscw__rose-letters { fill: var( --sscw-text ); font: 600 15px var( --sscw-font ); }
.sscw__rose-water { fill: var( --sscw-muted ); font: 11px var( --sscw-font ); }
.sscw__arrow path { stroke: var( --sscw-magenta ); }
.sscw__arrow-head { fill: var( --sscw-magenta ); }
.sscw__rose-hub { fill: var( --sscw-text ); }
.sscw__direction { grid-area: direction; text-align: center; }
.sscw__bearing { color: var( --sscw-text ); font-size: .83rem; font-weight: 600; }
.sscw__aspect { margin-top: .15rem; color: var( --sscw-muted ); font-size: .72rem; }
.sscw__averages { display: flex; flex-wrap: wrap; gap: .15rem .4rem; margin-top: .85rem; color: var( --sscw-muted ); font-size: .76rem; }
.sscw__averages b { color: var( --sscw-text ); font-weight: 650; font-variant-numeric: tabular-nums; }
.sscw__force { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var( --sscw-rule ); }
.sscw__force-track { display: flex; gap: 2px; width: 72px; height: 4px; }
.sscw__force-track span { flex: 1; background: #cbdadf; border-radius: 2px; }
.sscw__force-track span.is-on { background: var( --sscw-blue ); }
.sscw__force-track span.is-hot { background: var( --sscw-magenta ); }
.sscw__force-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .65rem; min-width: 0; }
.sscw__force-num { font-size: .79rem; font-weight: 700; }
.sscw__verdict { color: var( --sscw-muted ); font-size: .76rem; }
.sscw__panel { padding: 1.35rem 1.5rem; }
.sscw__legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1rem 0 .7rem; color: var( --sscw-muted ); font-size: .78rem; }
.sscw__legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.sscw__legend-swatch { display: inline-block; flex: none; width: 22px; border-top: 2px solid; }
.sscw__legend-swatch--mean { border-color: var( --sscw-blue ); }
.sscw__legend-swatch--gust { border-color: var( --sscw-magenta ); border-top-style: dashed; }
.sscw__legend-unit { margin-left: auto; }
.sscw__chart-frame { display: grid; grid-template-rows: 160px 23px; min-width: 0; padding-left: 2rem; }
.sscw__chart-frame.is-empty { grid-template-rows: auto; padding-left: 0; }
.sscw__chart-frame.is-empty .sscw__chart { min-height: 3rem; }
.sscw__chart-frame.is-empty :is( .sscw__spark, .sscw__time-axis ) { display: none; }
.sscw__chart-empty { color: var( --sscw-muted ); font-size: .8rem; }
.sscw__chart-empty[hidden] { display: none; }
.sscw__chart { position: relative; min-width: 0; touch-action: pan-y; }
.sscw__spark { display: block; width: 100%; height: 100%; overflow: visible; }
.sscw__spark-mean { stroke: var( --sscw-blue ); }
.sscw__spark-gust { stroke: var( --sscw-magenta ); }
.sscw__spark-grid line { stroke: var( --sscw-rule ); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sscw__chart-labels { position: absolute; inset: 0; pointer-events: none; }
.sscw__chart-labels span { position: absolute; right: calc( 100% + .4rem ); transform: translateY( -50% ); color: var( --sscw-muted ); font-size: .67rem; white-space: nowrap; }
.sscw__time-axis { position: relative; border-top: 1px solid var( --sscw-rule ); color: var( --sscw-muted ); font-size: .68rem; }
.sscw__time-axis span { position: absolute; top: .3rem; white-space: nowrap; transform: translateX( -50% ); }
.sscw__time-axis span:nth-child( 1 ) { left: 0; transform: none; }
.sscw__time-axis span:nth-child( 2 ) { left: 33.333%; }
.sscw__time-axis span:nth-child( 3 ) { left: 66.667%; }
.sscw__time-axis span:nth-child( 4 ) { right: 0; transform: none; }
.sscw.sscw .sscw__direction-key { margin-top: .35rem !important; color: var( --sscw-muted ); font-size: .68rem; line-height: 1.35; }
.sscw__chart-frame.is-empty + .sscw__direction-key { display: none; }
.sscw__direction-arrows { position: absolute; inset: 0; pointer-events: none; }
.sscw__direction-arrow { position: absolute; width: 12px; height: 14px; filter: drop-shadow( 0 0 2px var( --sscw-deep ) ); }
.sscw__direction-arrow::before { content: ''; position: absolute; top: 1px; left: 5.5px; width: 1px; height: 9px; background: var( --sscw-magenta ); }
.sscw__direction-arrow::after { content: ''; position: absolute; bottom: 0; left: 2px; border-top: 5px solid var( --sscw-magenta ); border-right: 4px solid transparent; border-left: 4px solid transparent; }
.sscw__scrub { position: absolute; inset: 0; pointer-events: none; }
.sscw__scrub[hidden] { display: none; }
.sscw__scrub-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var( --sscw-muted ); }
.sscw__scrub-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate( -50%, -50% ); }
.sscw__scrub-dot--mean { background: var( --sscw-blue ); }
.sscw__scrub-dot--gust { background: var( --sscw-magenta ); }
.sscw__scrub-chip { position: absolute; top: 0; z-index: 1; max-width: min( 260px, 90cqi ); padding: .3rem .45rem; border: 1px solid var( --sscw-rule ); border-radius: 4px; background: #fff; color: var( --sscw-text ); font-size: .68rem; line-height: 1.3; white-space: normal; }
.sscw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
.sscw__tide { padding: 1.2rem 1.5rem; border-top: 1px solid var( --sscw-rule ); background: var( --sscw-raised ); }
.sscw__tide-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1rem; margin-top: .95rem; }
.sscw__tide-grid:has( .sscw__sun ) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) minmax( 0, 1.1fr ); }
.sscw__tide-item { display: flex; flex-direction: column; min-width: 0; gap: .1rem; color: var( --sscw-muted ); font-size: .78rem; }
.sscw__tide-v { color: var( --sscw-text ); font-size: 1.25rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sscw__tide-height { color: var( --sscw-muted ); font-size: .88rem; white-space: nowrap; }
.sscw__tide-item small { color: var( --sscw-muted ); font-size: .7rem; }
.sscw__sun { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding-left: 1.1rem; border-left: 1px solid var( --sscw-rule ); }
.sscw__sun-row { display: flex; justify-content: space-between; gap: .4rem; color: var( --sscw-muted ); font-size: .8rem; }
.sscw__sun-row strong { color: var( --sscw-text ); font-variant-numeric: tabular-nums; }
.sscw.sscw .sscw__tide-datum { margin-top: .75rem; color: var( --sscw-muted ); font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.sscw__strip { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); padding: 1rem 1.5rem; border-top: 1px solid var( --sscw-rule ); }
.sscw__cell { min-width: 0; padding: 0 1rem; border-left: 1px solid var( --sscw-rule ); }
.sscw__cell:first-child { padding-left: 0; border-left: 0; }
.sscw__cell-k { display: block; color: var( --sscw-muted ); font-size: .76rem; overflow-wrap: anywhere; }
.sscw__cell-v { margin-top: .2rem; font-size: 1.45rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sscw__cell-v small { margin-left: .2em; color: var( --sscw-muted ); font-size: .58em; font-weight: 400; white-space: nowrap; }
.sscw__more { border-top: 1px solid var( --sscw-rule ); }
.sscw__summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; color: var( --sscw-text ); font-size: .88rem; font-weight: 600; list-style: none; cursor: pointer; }
.sscw__summary::-webkit-details-marker { display: none; }
.sscw__summary::after { content: ''; width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid; border-bottom: 2px solid; transform: rotate( 45deg ); }
.sscw__more[open] .sscw__summary::after { transform: rotate( -135deg ); }
.sscw__more-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0 1.5rem; padding: 0 1.5rem 1rem; }
.sscw__more-grid div { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var( --sscw-rule ); font-size: .78rem; }
.sscw__more-grid dt { color: var( --sscw-muted ); overflow-wrap: anywhere; }
.sscw__more-grid dd { flex: none; font-variant-numeric: tabular-nums; }
.sscw.sscw .sscw__foot { padding: .8rem 1.5rem; border-top: 1px solid var( --sscw-rule ); color: var( --sscw-muted ); font-size: .77rem; line-height: 1.45; }
.sscw :focus-visible { outline: 2px solid var( --sscw-magenta ); outline-offset: 3px; }
.sscw.is-stale .sscw__spark, .sscw.is-stale .sscw__rose { opacity: .7; }
.sscw.is-direction-unavailable .sscw__arrow { display: none; }
.sscw.is-wind-unavailable .sscw__force-track { opacity: .3; }
.sscw.is-awaiting .sscw__arrow { display: none; }
@container sscw ( min-width: 800px ) {
	.sscw__body { grid-template-columns: minmax( 0, 44fr ) minmax( 0, 56fr ); align-items: start; }
	.sscw__secondary { border-top: 0; border-left: 1px solid var( --sscw-rule ); }
}
@container sscw ( max-width: 600px ) {
	.sscw__tide-grid:has( .sscw__sun ) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.sscw__sun { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 1rem; padding: .65rem 0 0; border-left: 0; border-top: 1px solid var( --sscw-rule ); }
}
@container sscw ( max-width: 430px ) {
	.sscw__bar, .sscw__primary, .sscw__panel, .sscw__tide, .sscw__strip, .sscw__summary, .sscw__foot { padding-left: 1rem; padding-right: 1rem; }
	.sscw__demo-note, .sscw__stale-note { padding-left: 1rem; padding-right: 1rem; }
	.sscw__bar { align-items: flex-start; }
	.sscw .sscw__title { font-size: 1.28rem; }
	.sscw__name { font-size: .65rem; }
	.sscw__demo-pill { padding: .3rem .4rem; font-size: .7rem; }
	.sscw__hero { grid-template-columns: minmax( 0, 1fr ) 112px; grid-template-areas: 'reading rose' 'direction direction'; column-gap: .6rem; }
	.sscw__rose { width: 112px; height: 112px; }
	.sscw__knots { font-size: 4rem; }
	.sscw__direction { margin-top: .3rem; text-align: left; }
	.sscw__bearing, .sscw__aspect { display: inline; margin-right: .5rem; }
	.sscw__tide-v { font-size: 1.05rem; }
	.sscw__strip { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: .85rem 0; }
	.sscw__cell:last-child { grid-column: 1 / -1; padding: .7rem 0 0; border-left: 0; border-top: 1px solid var( --sscw-rule ); }
	.sscw__cell { padding-left: .55rem; padding-right: .2rem; }
	.sscw__cell-v { font-size: 1.06rem; }
	.sscw__more-grid { grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
}
@container sscw ( max-width: 285px ) {
	.sscw__bar { flex-wrap: wrap; gap: .45rem; }
	.sscw__hero { grid-template-columns: minmax( 0, 1fr ) 100px; }
	.sscw__rose { width: 100px; height: 100px; }
	.sscw__knots { font-size: 3.5rem; }
	.sscw__sun { flex-wrap: wrap; }
	.sscw__chart-frame { padding-left: 1.6rem; }
	.sscw__time-axis span:nth-child( 2 ) { display: none; }
}
@media ( prefers-reduced-motion: no-preference ) {
	.sscw__arrow { transition: transform 700ms ease-out; }
	.sscw__scrub-line, .sscw__scrub-dot, .sscw__scrub-chip { transition: left 90ms ease-out, top 90ms ease-out; }
	.sscw [data-sscw].is-updated { animation: sscw-reading-update 900ms ease-out; }
}
@keyframes sscw-reading-update {
	from { text-shadow: 0 0 12px var( --sscw-blue ); }
	to { text-shadow: none; }
}