/* A maritime forecast board: day tabs, an hourly table, and optional Simple cards. */
@font-face {
	font-family: 'SSC Forecast Condensed';
	src: url('../fonts/plex-cond-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'SSC Forecast Mono';
	src: url('../fonts/plex-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
.sscf {
	--sscf-ink: #142b4f;
	--sscf-muted: #556b80;
	--sscf-rule: #d7e2e9;
	--sscf-paper: #fff;
	--sscf-soft: #eaf5f7;
	--sscf-blue: #194b79;
	--sscf-warning: #813d20;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	container-type: inline-size;
	color: var(--sscf-ink);
	background: var(--sscf-paper);
	border: 1px solid var(--sscf-rule);
	border-radius: 6px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.45;
	margin: 1.5rem auto;
	max-width: 76rem;
}
.sscf *, .sscf *::before, .sscf *::after { box-sizing: border-box; }
/* The page theme assigns large paragraph and heading margins inside content. */
.sscf.sscf.sscf :where(p, h2, h3, h4, ul) { margin: 0; }
.sscf :where(ul) { list-style: none; padding: 0; }
.sscf__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sscf__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem clamp(1rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--sscf-rule);
}
.sscf .sscf__heading .sscf__eyebrow {
	color: var(--sscf-blue);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sscf .sscf__heading .sscf__title {
	color: var(--sscf-ink);
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	margin-top: .2rem;
}
.sscf .sscf__heading .sscf__meta { color: var(--sscf-muted); font-size: .83rem; margin-top: .3rem !important; }
.sscf__mode {
	position: relative;
	display: inline-flex;
	flex: none;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--sscf-rule);
	border-radius: 5px;
	background: var(--sscf-soft);
	font-size: .83rem;
	cursor: pointer;
}
.sscf__mode span { padding: .55rem .65rem; border-radius: 3px; color: var(--sscf-muted); }
.sscf__mode span:first-child { background: var(--sscf-blue); color: #fff; }
.sscf__mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sscf__mode:has(input:checked) span:first-child { background: transparent; color: var(--sscf-muted); }
.sscf__mode:has(input:checked) span:last-child { background: var(--sscf-blue); color: #fff; }
.sscf__mode:has(input:focus-visible) { outline: 3px solid #1e40af; outline-offset: 3px; }
.sscf.sscf .sscf__notice {
	padding: .75rem clamp(1rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--sscf-rule);
	background: var(--sscf-soft);
	font-size: .87rem;
}
.sscf__notice--stale { border-left: 4px solid #9c5726; background: #fff6ee; }
.sscf [hidden] { display: none !important; }
.sscf__day-tabs {
	display: flex;
	gap: .5rem;
	padding: 1rem clamp(1rem, 3vw, 1.6rem) .2rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-color: #94afbf var(--sscf-soft);
}
.sscf .sscf__day-tab {
	display: flex;
	flex: 0 0 140px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-height: 64px;
	margin: 0;
	padding: .65rem .85rem;
	border: 1px solid var(--sscf-rule);
	border-radius: 4px;
	background: var(--sscf-paper);
	color: var(--sscf-muted);
	font: 500 .8rem/1.3 Inter, sans-serif;
	cursor: pointer;
}
.sscf .sscf__day-tab strong { color: var(--sscf-ink); font: 700 1.12rem/1.2 'SSC Forecast Condensed', Inter, sans-serif; }
.sscf .sscf__day-tab:hover { background: var(--sscf-soft); border-color: #94afbf; }
.sscf .sscf__day-tab[aria-selected="true"] { border-color: var(--sscf-ink); background: var(--sscf-ink); color: #fff; }
.sscf .sscf__day-tab[aria-selected="true"] strong { color: #fff; }
.sscf .sscf__day-tab:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: -4px; }
.sscf .sscf__day-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }
.sscf__days { min-width: 0; padding: 0 clamp(1rem, 3vw, 1.6rem) 1rem; }
.sscf__day { min-width: 0; padding: 1.25rem 0 .35rem; }
.sscf__day + .sscf__day { border-top: 1px solid var(--sscf-rule); margin-top: .8rem; }
.sscf--tabbed .sscf__day { border-top: 0; margin-top: 0; }
.sscf__day:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: -3px; }
.sscf .sscf__day .sscf__date {
	color: var(--sscf-ink);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: .65rem;
}
.sscf__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: .5rem 1rem;
	padding: .65rem .9rem;
	border: 1px solid var(--sscf-rule);
	border-radius: 3px;
	background: var(--sscf-soft);
	color: var(--sscf-ink);
	margin-bottom: .65rem;
}
.sscf__summary-item { min-width: 0; }
.sscf__summary-item span { display: block; color: var(--sscf-muted); font-size: .69rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.sscf__summary-item strong { display: block; color: var(--sscf-ink); font-size: .92rem; font-weight: 650; margin-top: .1rem; }
.sscf .sscf__direction-note { color: var(--sscf-muted); font-size: .8rem; padding-top: .8rem; }
.sscf__hours { min-width: 0; }
.sscf__scroll-controls { display: flex; justify-content: flex-end; gap: .45rem; margin-bottom: .4rem; }
.sscf__scroll-controls[hidden] { display: none; }
.sscf__scroll-controls button {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sscf-rule);
	border-radius: 3px;
	background: #fff;
	color: var(--sscf-blue);
	font: 700 1.15rem/1 Inter, sans-serif;
	cursor: pointer;
}
.sscf__scroll-controls button:disabled { color: #8ca0ae; opacity: .55; cursor: default; }
.sscf__scroll-controls button:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: 2px; }
.sscf__viewport { position: relative; }
.sscf__viewport::before, .sscf__viewport::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	width: 30px;
	pointer-events: none;
}
.sscf__hours.has-earlier .sscf__viewport::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.sscf__hours.has-later .sscf__viewport::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.sscf__strip {
	/* Keep absolute screen-reader labels inside the hourly scroll container. */
	position: relative;
	display: flex;
	min-width: 0;
	overflow-x: auto;
	border: 1px solid var(--sscf-rule);
	border-radius: 3px;
	background: var(--sscf-soft);
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scrollbar-color: #94afbf var(--sscf-soft);
}
.sscf__strip:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: 2px; }
.sscf__card {
	display: flex;
	flex: 0 0 166px;
	flex-direction: column;
	min-width: 0;
	min-height: 166px;
	padding: .7rem .6rem .8rem;
	border-right: 1px solid var(--sscf-rule);
	border-top: 3px solid transparent;
	background: #fff;
	scroll-snap-align: start;
}
.sscf__card:last-child { border-right: 0; }
.sscf__card--brisk { border-top-color: #36728e; }
.sscf__card--strong { border-top-color: #a05b25; }
.sscf__card--severe { border-top-color: #a23934; }
.sscf__time {
	color: var(--sscf-muted);
	font: 400 .76rem/1.2 'SSC Forecast Mono', monospace;
	font-variant-numeric: tabular-nums;
}
.sscf .sscf__card .sscf__direction { display: flex; align-items: center; gap: .3rem; margin-top: .55rem !important; color: var(--sscf-blue); font-size: .77rem; font-weight: 650; line-height: 1.3; }
.sscf__bearing { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; transform: rotate(var(--sscf-bearing)); }
.sscf__bearing::before { content: ''; position: absolute; left: 7px; top: 3px; width: 2px; height: 11px; border-radius: 2px; background: currentColor; }
.sscf__bearing::after { content: ''; position: absolute; left: 4px; top: 2px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.sscf .sscf__card .sscf__speed { color: var(--sscf-ink); margin-top: .3rem !important; }
.sscf__speed strong { font: 700 1.65rem/1.1 'SSC Forecast Condensed', Inter, sans-serif; font-variant-numeric: tabular-nums; }
.sscf .sscf__card .sscf__missing { color: var(--sscf-muted); font-size: .78rem; margin-top: .35rem !important; }
.sscf .sscf__card .sscf__gust { color: var(--sscf-muted); font-size: .77rem; margin-top: .15rem !important; line-height: 1.3; }
.sscf__gust strong { color: var(--sscf-ink); font-weight: 650; }
.sscf .sscf__card .sscf__rain { display: flex; justify-content: space-between; gap: .2rem; font-size: .74rem; line-height: 1.3; color: var(--sscf-muted); margin-top: auto !important; padding-top: .55rem; border-top: 1px solid var(--sscf-rule); }
.sscf__rain strong { color: var(--sscf-ink); font-weight: 650; white-space: nowrap; }
.sscf .sscf__card .sscf__warning { display: flex; gap: .3rem; align-items: baseline; color: var(--sscf-warning); border-top: 1px solid #ead7c9; font-size: .72rem; line-height: 1.3; margin-top: .55rem !important; padding-top: .45rem; }
.sscf__warning-mark { font-weight: 700; }
.sscf--cards .sscf__hours--simple .sscf__strip { display: grid; grid-template-columns: repeat(auto-fill, 190px); gap: .65rem; overflow: visible; border: 0; background: none; }
.sscf--cards .sscf__card { min-height: 175px; padding: .8rem; border: 1px solid var(--sscf-rule); border-top: 3px solid var(--sscf-rule); border-radius: 3px; }
.sscf--cards .sscf__card--brisk { border-top-color: #36728e; }
.sscf--cards .sscf__card--strong { border-top-color: #a05b25; }
.sscf--cards .sscf__card--severe { border-top-color: #a23934; }
.sscf__hours--detail { display: none; }
.sscf:has(.sscf__detail-control:checked) .sscf__hours--simple,
.sscf:has(.sscf__detail-control:checked) .sscf__direction-note { display: none; }
.sscf:has(.sscf__detail-control:checked) .sscf__hours--detail { display: block; }
.sscf__hours--detail { --sscf-time-width: 88px; --sscf-wind-width: 165px; --sscf-measure-width: 100px; }
.sscf__hours--detail .sscf__strip,
.sscf__comparison-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--sscf-rule);
	border-radius: 4px;
	background: #fff;
	overscroll-behavior-inline: contain;
	scroll-snap-type: none;
	scrollbar-color: #94afbf var(--sscf-soft);
}
.sscf__comparison-scroll:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: 2px; }
.sscf__hours--detail.has-earlier .sscf__viewport::before { left: var(--sscf-time-width); }
/* Isolate the board from theme-wide table, heading, and zebra-striping styles. */
.sscf.sscf .sscf__comparison {
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: #fff;
	color: var(--sscf-ink);
	font: 400 .86rem/1.4 Inter, sans-serif;
	font-variant-numeric: tabular-nums;
}
.sscf__comparison .sscf__time-col { width: var(--sscf-time-width); }
.sscf__comparison .sscf__wind-col { width: var(--sscf-wind-width); }
.sscf__comparison .sscf__measure-col { width: var(--sscf-measure-width); }
.sscf.sscf .sscf__comparison :is(th, td) {
	height: 68px;
	padding: .7rem .65rem;
	border: 0;
	border-bottom: 1px solid var(--sscf-rule);
	background: #fff;
	color: var(--sscf-ink);
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.sscf.sscf .sscf__comparison thead th {
	height: 58px;
	background: var(--sscf-ink);
	color: #fff;
	font-size: .78rem;
	font-weight: 650;
	line-height: 1.3;
	white-space: normal;
}
.sscf.sscf .sscf__comparison thead .sscf__column-heading { min-width: var(--sscf-measure-width); }
.sscf.sscf .sscf__comparison tbody tr:nth-child(even) :is(th, td) { background: #f5f9fa; }
.sscf.sscf .sscf__comparison tbody tr:last-child :is(th, td) { border-bottom: 0; }
.sscf.sscf .sscf__comparison .sscf__row-label {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--sscf-time-width);
	min-width: var(--sscf-time-width);
	padding: .45rem .55rem;
	border-right: 1px solid var(--sscf-rule);
	background: #fff;
	text-align: center;
	white-space: normal;
}
.sscf.sscf .sscf__comparison thead .sscf__row-label { z-index: 3; background: var(--sscf-ink); border-right-color: #36506f; }
.sscf__row-name { display: block; font-weight: 650; line-height: 1.25; }
.sscf__row-unit { display: block; color: var(--sscf-muted); font-size: .7rem; font-weight: 400; margin-top: .2rem; }
.sscf__comparison thead .sscf__row-unit { color: #c4d4e3; }
.sscf.sscf .sscf__comparison td[aria-label="Unavailable"] { color: #788c99; }
.sscf__wind-reading { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.sscf__wind-number { font: 700 1.65rem/1 'SSC Forecast Condensed', Inter, sans-serif; }
.sscf__direction-cell { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem; color: var(--sscf-blue); font-size: .77rem; font-weight: 650; }
.sscf__direction-cell .sscf__bearing { width: 24px; height: 24px; border: 1px solid #b8cdd9; border-radius: 50%; }
.sscf__direction-cell .sscf__bearing::before { left: 10px; top: 5px; height: 13px; }
.sscf__direction-cell .sscf__bearing::after { left: 7px; top: 5px; }
.sscf__direction-cell .sscf__degree { color: var(--sscf-muted); font-size: .68rem; font-weight: 400; }
.sscf__cell-range { display: block; margin-top: .35rem; color: var(--sscf-muted); font-size: .7rem; line-height: 1.2; }
.sscf__gust-cell { font: 700 1.2rem/1.25 'SSC Forecast Condensed', Inter, sans-serif; }
.sscf__temperature { font-weight: 650; }
.sscf__rain-probability {
	display: inline-block;
	min-width: 3.6rem;
	padding: .3rem .2rem .4rem;
	background: linear-gradient(to right, #b8dce5 var(--sscf-rain, 0%), #eaf5f7 var(--sscf-rain, 0%)) left bottom / 100% 3px no-repeat;
	font-weight: 650;
}
.sscf.sscf .sscf__comparison tbody tr.is-hour-active :is(th, td),
.sscf.sscf .sscf__comparison :is(th, td).is-hour-active { background: var(--sscf-soft); }
.sscf.sscf .sscf__comparison .sscf__row-label.is-hour-active { box-shadow: inset 3px 0 var(--sscf-blue); }
.sscf .sscf__hour-select {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: .55rem .15rem;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: inherit;
	font: 400 .81rem/1.2 'SSC Forecast Mono', monospace;
	cursor: pointer;
}
.sscf .sscf__hour-select[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: .25rem; }
.sscf .sscf__hour-select:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: -3px; }
.sscf__comparison-details { width: 100%; min-width: 0; margin-top: .6rem; }
.sscf__comparison-details summary {
	min-height: 44px;
	padding: .75rem .85rem;
	border: 1px solid var(--sscf-rule);
	border-radius: 4px;
	background: #f5f9fa;
	color: var(--sscf-blue);
	font-size: .82rem;
	font-weight: 650;
	cursor: pointer;
}
.sscf__comparison-details[open] summary { margin-bottom: .4rem; }
.sscf__comparison-details summary:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: -3px; }
.sscf .sscf__comparison .sscf__empty { padding: .75rem 1rem; color: var(--sscf-muted); text-align: left; }
.sscf__footer {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .75rem clamp(1rem, 3vw, 1.6rem);
	border-top: 1px solid var(--sscf-rule);
	color: var(--sscf-muted);
	font-size: .75rem;
}
.sscf__retrieval { width: 100%; }
.sscf__retrieval summary { width: fit-content; border-bottom: 1px dotted currentColor; color: var(--sscf-blue); cursor: pointer; }
.sscf__retrieval summary:focus-visible { outline: 3px solid var(--sscf-blue); outline-offset: 2px; }
.sscf__method-note { padding-top: .65rem; line-height: 1.5; }
.sscf__times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .6rem; padding-top: .65rem; }
.sscf__retrieval-source {
	display: grid;
	gap: .3rem;
	min-width: 0;
	padding: .65rem .8rem;
	border: 1px solid var(--sscf-rule);
	border-radius: 4px;
	background: var(--sscf-soft);
}
.sscf__retrieval-title { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .65rem; color: var(--sscf-ink); font-size: .78rem; }
.sscf__freshness { padding: .1rem .4rem; border-radius: 3px; background: #e4f3ed; color: #216353; font-size: .68rem; font-weight: 650; }
.sscf__freshness.is-stale { background: #fff0df; color: #865122; }
.sscf.sscf .sscf__retrieval-source p { font-size: .74rem; line-height: 1.4; }
.sscf .sscf__retrieval-time { color: var(--sscf-muted); }
.sscf.sscf .sscf__retrieval-source .sscf__source { color: var(--sscf-muted); font-family: 'SSC Forecast Mono', monospace; font-size: .69rem; overflow-wrap: anywhere; }
.sscf__credit { white-space: nowrap; }
@container (max-width: 700px) {
	.sscf__heading { align-items: flex-start; }
	.sscf__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sscf__card { flex-basis: 166px; }
	.sscf--cards .sscf__hours--simple .sscf__strip { display: flex; overflow-x: auto; }
	.sscf--cards .sscf__card { flex: 0 0 190px; }
}
@container (max-width: 430px) {
	.sscf__heading { flex-wrap: wrap; }
	.sscf__mode { margin-top: .2rem; }
	.sscf__summary { gap: .55rem; padding: .7rem; }
	.sscf__summary-item strong { font-size: .83rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sscf__strip, .sscf__comparison-scroll, .sscf__day-tabs { scroll-behavior: auto; }
}