/* SRM Surf Guide. Tokens follow the Oahu Travel Guide Brand Guide v1.0.
   oklch is the source of truth. The hex twins exist only where JS or SVG
   attributes need them, and live in PHP, not here. */
.srm-surf {
	--srm-surf-ink: #1A1F1C;
	--srm-surf-ink-2: #2E342F;
	--srm-surf-ink-mute: #5A605B;
	--srm-surf-ink-soft: #7E857F;
	--srm-surf-paper: #F5F1EA;
	--srm-surf-paper-2: #EDE7DC;
	--srm-surf-paper-3: #E2DACB;
	--srm-surf-ocean: oklch(0.45 0.08 200);
	--srm-surf-ocean-deep: oklch(0.36 0.07 200);
	--srm-surf-coral: oklch(0.68 0.14 35);
	/* Coral is a fill color. On the dark Module B panel it has to carry 12px
	   text, so it needs a lighter sibling to clear 4.5:1. Same hue, lightness
	   raised; chroma trimmed only because sRGB runs out of red above 0.12
	   at this lightness. */
	--srm-surf-coral-on-dark: oklch(0.78 0.12 35);

	--srm-surf-skill-beg: oklch(0.58 0.09 165);
	--srm-surf-skill-int: oklch(0.70 0.10 85);
	--srm-surf-skill-adv: oklch(0.58 0.15 28);

	--srm-surf-font-display: "Source Serif 4", Georgia, serif;
	--srm-surf-font-body: "IBM Plex Sans", system-ui, sans-serif;
	--srm-surf-font-data: "IBM Plex Mono", monospace;

	--srm-surf-radius-sm: 6px;
	--srm-surf-radius-md: 10px;
	--srm-surf-radius-lg: 14px;
	--srm-surf-shadow: 0 1px 2px rgba(26, 31, 28, 0.04), 0 8px 24px -12px rgba(26, 31, 28, 0.12);
	--srm-surf-shadow-hover: 0 2px 6px rgba(26, 31, 28, 0.08), 0 20px 48px -20px rgba(26, 31, 28, 0.22);

	font-family: var(--srm-surf-font-body);
	color: var(--srm-surf-ink);
}

/* ---------------------------------------------------------------------------
   Base. Scoped to the plugin container so nothing leaks into the theme.
   --------------------------------------------------------------------------- */
.srm-surf,
.srm-surf *,
.srm-surf *::before,
.srm-surf *::after { box-sizing: border-box; }

.srm-surf {
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.srm-surf h1,
.srm-surf h2,
.srm-surf h3 {
	font-family: var(--srm-surf-font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}

.srm-surf a { color: var(--srm-surf-ocean); }

.srm-surf-wrap {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 20px;
}

.srm-surf-reading,
.srm-surf-breaks,
.srm-surf-etiquette { padding: 40px 0; }

.srm-surf-muted { color: var(--srm-surf-ink-mute); }

/* ---------------------------------------------------------------------------
   Module A. Hero
   --------------------------------------------------------------------------- */
.srm-surf-hero {
	background:
		radial-gradient(120% 90% at 80% -10%, color-mix(in oklch, var(--srm-surf-ocean) 18%, transparent), transparent 60%),
		linear-gradient(180deg, var(--srm-surf-paper-2) 0%, var(--srm-surf-paper) 100%);
	border-bottom: 1px solid var(--srm-surf-paper-3);
	padding: 46px 0 8px;
}

.srm-surf-kicker {
	font-family: var(--srm-surf-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--srm-surf-ocean);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.srm-surf-kicker .srm-surf-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--srm-surf-ocean);
	display: inline-block;
}

.srm-surf-hero h1 {
	font-size: clamp(34px, 7vw, 62px);
	font-weight: 600;
	max-width: 15ch;
}

.srm-surf-hero h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--srm-surf-ocean-deep);
}

.srm-surf-lede {
	font-size: clamp(17px, 2.4vw, 20px);
	max-width: 58ch;
	color: var(--srm-surf-ink);
	margin: 20px 0 6px;
}

/* ---------------------------------------------------------------------------
   Module A. The skill filter above the break list

   This was the legend of a Leaflet map that used to sit here. The map went:
   it drew approximate pins on a grey basemap immediately above the depth map,
   which draws the same breaks on real bathymetry. The chips stayed, because
   filtering the list below was the half of their job worth keeping, and they
   now sit on the list rather than on a legend.
   --------------------------------------------------------------------------- */
.srm-surf-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--srm-surf-paper-3);
}

.srm-surf-filter-label {
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--srm-surf-ink-soft);
}

.srm-surf-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.srm-surf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--srm-surf-ink-mute);
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
}

.srm-surf-chip[aria-pressed="true"] {
	color: var(--srm-surf-paper);
	background: var(--srm-surf-ocean);
	border-color: var(--srm-surf-ocean);
}

.srm-surf-chip:focus-visible {
	outline: 2px solid var(--srm-surf-ocean);
	outline-offset: 2px;
}

.srm-surf-swatch {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.srm-surf-swatch-beg { background: var(--srm-surf-skill-beg); }
.srm-surf-swatch-int { background: var(--srm-surf-skill-int); }
.srm-surf-swatch-adv { background: var(--srm-surf-skill-adv); }

/* ---------------------------------------------------------------------------
   Module A. Section heads and the reading-the-shore fact grid
   --------------------------------------------------------------------------- */
.srm-surf-sec-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 10px 44px;
	align-items: end;
	margin-bottom: 22px;
}

.srm-surf-sec-head h2 { font-size: clamp(26px, 4.4vw, 38px); }

.srm-surf-sec-head p {
	color: var(--srm-surf-ink-mute);
	margin: 0;
	max-width: 62ch;
}

/* A head whose right column carries more than one paragraph. `align-items:
   end` bottom-aligns the title against a single line of intro, which is the
   right call for one paragraph and wrong for two: the title drops to the foot
   of a tall block and strands the space above it. */
.srm-surf-sec-head-tall { align-items: start; }

.srm-surf-sec-prose { display: grid; gap: 12px; }

/* Below the two-column threshold the head stacks and keeps a reading measure. */
@media (max-width: 860px) {
	.srm-surf-sec-head {
		display: block;
		max-width: 60ch;
	}

	.srm-surf-sec-head p { margin-top: 12px; }
}

.srm-surf-shore-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.srm-surf-fact {
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: 12px;
	padding: 20px 20px 22px;
}

.srm-surf-fact h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.srm-surf-fact p {
	margin: 0;
	font-size: 15.5px;
	color: var(--srm-surf-ink);
}

.srm-surf-fact .srm-surf-big {
	font-family: var(--srm-surf-font-display);
	font-size: 30px;
	color: var(--srm-surf-ocean-deep);
	display: block;
	line-height: 1;
	margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   Module A. Break directory
   --------------------------------------------------------------------------- */
.srm-surf-dir {
	display: grid;
	gap: 14px;
}

.srm-surf-brk {
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: 13px;
	border-left: 5px solid var(--srm-surf-ocean);
	overflow: hidden;
	scroll-margin-top: 16px;
}

.srm-surf-brk[data-skill="beginner"] { border-left-color: var(--srm-surf-skill-beg); }
.srm-surf-brk[data-skill="intermediate"] { border-left-color: var(--srm-surf-skill-int); }
.srm-surf-brk[data-skill="advanced"] { border-left-color: var(--srm-surf-skill-adv); }

.srm-surf-brk.is-active { box-shadow: 0 0 0 2px var(--srm-surf-ocean); }

.srm-surf-brk-top {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 18px 20px;
	color: inherit;
	font: inherit;
}

.srm-surf-brk-top:focus-visible {
	outline: 2px solid var(--srm-surf-ocean);
	outline-offset: -2px;
}

.srm-surf-brk-num {
	font-family: var(--srm-surf-font-data);
	font-size: 14px;
	font-weight: 500;
	color: var(--srm-surf-ink-mute);
	min-width: 26px;
	font-variant-numeric: tabular-nums;
}

.srm-surf-brk-id { flex: 1; }

.srm-surf-brk-id h3 { font-size: 21px; }

.srm-surf-haw {
	font-size: 13.5px;
	color: var(--srm-surf-ink-mute);
	font-style: italic;
}

.srm-surf-tag {
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.srm-surf-tag-beg { background: color-mix(in oklch, var(--srm-surf-skill-beg) 18%, var(--srm-surf-paper)); color: oklch(0.42 0.08 165); }
.srm-surf-tag-int { background: color-mix(in oklch, var(--srm-surf-skill-int) 22%, var(--srm-surf-paper)); color: oklch(0.45 0.09 85); }
.srm-surf-tag-adv { background: color-mix(in oklch, var(--srm-surf-skill-adv) 18%, var(--srm-surf-paper)); color: oklch(0.44 0.14 28); }

.srm-surf-chev {
	transition: transform .2s ease;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-brk.is-open .srm-surf-chev { transform: rotate(180deg); }

/* The `hidden` attribute on the body is authoritative: no display rule here,
   so removing the attribute is what reveals the card. */
.srm-surf-brk-body {
	padding: 0 20px 20px 60px;
}

.srm-surf-brk-summary { margin: 0 0 16px; }

/* Two columns while they fit, one when they do not, rather than two fixed
   columns that squeeze. The rows used to size to the tallest cell in the row,
   so a value that wrapped ("Shapely right, short left") left its neighbour's
   label stranded at the top of a tall row. Each spec is now its own little
   grid with its content packed to the start, so a wrap affects only itself. */
.srm-surf-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px 32px;
	border-top: 1px solid var(--srm-surf-paper-3);
	padding-top: 18px;
}

.srm-surf-spec {
	display: grid;
	gap: 3px;
	align-content: start;
}

.srm-surf-spec .srm-surf-k {
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-spec .srm-surf-v {
	font-family: var(--srm-surf-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--srm-surf-ink);
}

/* ---------------------------------------------------------------------------
   Module A. Etiquette rules and the growth note
   --------------------------------------------------------------------------- */
.srm-surf-rules {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.srm-surf-rule {
	display: flex;
	gap: 13px;
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: 12px;
	padding: 16px 18px;
}

.srm-surf-rule .srm-surf-mk {
	font-family: var(--srm-surf-font-display);
	font-size: 20px;
	color: var(--srm-surf-ocean);
	line-height: 1.2;
}

.srm-surf-rule h3 {
	font-size: 16.5px;
	margin-bottom: 4px;
}

.srm-surf-rule p {
	margin: 0;
	font-size: 14.5px;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-footer {
	border-top: 1px solid var(--srm-surf-paper-3);
	padding: 26px 0 40px;
	color: var(--srm-surf-ink-mute);
	font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   Module B. The swell canvas panel.
   This is the one deliberately dark surface in the guide, and the only place
   Coral appears. Its local properties stay inside the panel.
   --------------------------------------------------------------------------- */
.srm-surf-seasons {
	--srm-surf-seasons-line: color-mix(in oklch, var(--srm-surf-paper) 14%, transparent);
	--srm-surf-seasons-muted: color-mix(in oklch, var(--srm-surf-paper) 72%, var(--srm-surf-ocean-deep));
	--srm-surf-seasons-lift: color-mix(in oklch, var(--srm-surf-ocean-deep) 82%, var(--srm-surf-ocean));

	max-width: 640px;
	margin: 0 auto;
	padding: 26px 18px 40px;
	background: var(--srm-surf-ocean-deep);
	color: var(--srm-surf-paper);
	border-radius: var(--srm-surf-radius-lg);
}

.srm-surf-seasons h1,
.srm-surf-seasons h2,
.srm-surf-seasons h3 { color: var(--srm-surf-paper); }

.srm-surf-seasons-title {
	font-family: var(--srm-surf-font-display);
	font-weight: 600;
	font-size: clamp(24px, 6vw, 34px);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.srm-surf-sub {
	color: var(--srm-surf-seasons-muted);
	margin: 0 0 20px;
	font-size: 15.5px;
}

.srm-surf-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.srm-surf-season-btn {
	flex: 1;
	font: inherit;
	font-family: var(--srm-surf-font-body);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--srm-surf-seasons-muted);
	background: var(--srm-surf-ocean-deep);
	border: 1px solid var(--srm-surf-seasons-line);
	border-radius: 11px;
	padding: 11px 8px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.srm-surf-season-btn .srm-surf-mo {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
	opacity: .7;
	margin-top: 2px;
}

.srm-surf-season-btn.is-active,
.srm-surf-season-btn[aria-pressed="true"] {
	color: var(--srm-surf-paper);
	border-color: var(--srm-surf-ocean);
	background: var(--srm-surf-seasons-lift);
}

.srm-surf-season-btn:focus-visible {
	outline: 2px solid var(--srm-surf-ocean);
	outline-offset: 2px;
}

.srm-surf-stage {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--srm-surf-seasons-line);
	background: var(--srm-surf-ocean-deep);
	aspect-ratio: 1 / 1;
}

.srm-surf-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.srm-surf-caption {
	margin-top: 16px;
	background: var(--srm-surf-ocean-deep);
	border: 1px solid var(--srm-surf-seasons-line);
	border-radius: 13px;
	padding: 16px 18px;
}

.srm-surf-caption .srm-surf-cap-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}

.srm-surf-cap-title {
	font-family: var(--srm-surf-font-display);
	font-size: 20px;
	margin: 0;
	font-weight: 600;
}

.srm-surf-cap-badge {
	font-size: 12px;
	font-weight: 700;
	color: var(--srm-surf-coral-on-dark);
	border: 1px solid color-mix(in oklch, var(--srm-surf-coral-on-dark) 40%, transparent);
	border-radius: 999px;
	padding: 2px 9px;
}

.srm-surf-cap-text {
	margin: 0;
	color: var(--srm-surf-seasons-muted);
	font-size: 15px;
	line-height: 1.55;
}

.srm-surf-cap-text strong {
	color: var(--srm-surf-paper);
	font-weight: 600;
}

.srm-surf-foot {
	color: var(--srm-surf-seasons-muted);
	font-size: 12.5px;
	margin-top: 16px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   The surf lesson placement.

   Was a bordered paragraph with a text link, which read as a footnote on a
   page whose job is telling a first-timer where it is safe to paddle out. It
   now carries the product's own photograph beside the copy, following the
   drive map's guided-tour card so the two placements on this site look like
   they came from the same publisher.
   --------------------------------------------------------------------------- */
.srm-surf-viator {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	margin: 30px 0 6px;
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-lg);
	box-shadow: var(--srm-surf-shadow);
	overflow: hidden;
}

.srm-surf-viator-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.srm-surf-viator-body { padding: 24px 26px 22px; }

.srm-surf-viator-eyebrow {
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--srm-surf-ocean-deep);
	margin: 0 0 8px;
}

.srm-surf-viator-title {
	font-family: var(--srm-surf-font-display);
	font-size: clamp(20px, 2.6vw, 25px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	color: var(--srm-surf-ink);
}

.srm-surf-viator-pitch {
	margin: 0 0 16px;
	max-width: 58ch;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-viator-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: 18px;
}

.srm-surf-viator-meta span {
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--srm-surf-ink);
	background: var(--srm-surf-paper);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: 999px;
	padding: 6px 12px;
}

.srm-surf-viator-cta-row { margin: 0 0 12px; }

/* Selector carries `.srm-surf a` deliberately. That generic rule is (0,1,1),
   a class plus a type, and it beats a lone `.srm-surf-viator-cta` at (0,1,0),
   so the label took the ocean colour that is also this button's background and
   the CTA rendered as a blank teal slab. The retired `.srm-surf-cta` had the
   same shape and the same bug. Raising this to (0,2,1) fixes it on the
   cascade's own terms rather than with !important. */
.srm-surf a.srm-surf-viator-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--srm-surf-ocean);
	color: var(--srm-surf-paper);
	text-decoration: none;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: var(--srm-surf-radius-sm);
	transition: background 140ms ease;
}

.srm-surf a.srm-surf-viator-cta:hover { background: var(--srm-surf-ocean-deep); color: var(--srm-surf-paper); }

.srm-surf a.srm-surf-viator-cta:focus-visible {
	outline: 2px solid var(--srm-surf-ocean-deep);
	outline-offset: 3px;
}

.srm-surf-viator-fine {
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--srm-surf-ink-soft);
	margin: 0;
}

/* One column below the point where a 300 px photo starves the copy beside it. */
@media (max-width: 720px) {
	.srm-surf-viator { grid-template-columns: 1fr; }
	.srm-surf-viator-img { min-height: 0; aspect-ratio: 3 / 2; }
	.srm-surf-viator-body { padding: 20px 20px 18px; }
}

/* ---------------------------------------------------------------------------
   Related guides. The same card as .sdm-related-card on the drive map page,
   rebuilt on this plugin's tokens rather than that page's scoped variables.
   --------------------------------------------------------------------------- */
.srm-surf-related { margin: 44px 0 8px; }

.srm-surf-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 640px) { .srm-surf-related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .srm-surf-related-grid { grid-template-columns: repeat(4, 1fr); } }

.srm-surf-related-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
	background: var(--srm-surf-paper);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 140ms ease, transform 140ms ease;
}

.srm-surf-related-card:hover {
	border-color: var(--srm-surf-ocean);
	transform: translateY(-1px);
	color: inherit;
}

.srm-surf-related-card:focus-visible {
	outline: 2px solid var(--srm-surf-ocean);
	outline-offset: 2px;
}

.srm-surf-related-card-img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--srm-surf-paper-2);
}

.srm-surf-related-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.srm-surf-related-card-body {
	padding: 14px 15px 17px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.srm-surf-related-card-kicker {
	font-family: var(--srm-surf-font-data);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--srm-surf-ocean-deep);
}

.srm-surf-related-card-title {
	font-family: var(--srm-surf-font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--srm-surf-ink);
	margin: 0;
}

.srm-surf-related-card-desc {
	font-size: 13.5px;
	color: var(--srm-surf-ink-mute);
	line-height: 1.5;
	margin: 2px 0 0;
}

/* The transform is the only motion here, so this is the whole reduced-motion
   story for these cards; the global block further down covers transitions. */
@media (prefers-reduced-motion: reduce) {
	.srm-surf-related-card:hover { transform: none; }
}

/*
 * Wide screens: the island sits beside its caption, not above it.
 *
 * This module was built as a standalone 640px card. Once it went onto the
 * guide alongside two full-width modules it read as an orphan, a narrow column
 * between wide ones. Widening it alone is not enough: the stage has to stay
 * square because drawing scales x by W and y by H independently, so a wide
 * stage stretches Oahu. So the square keeps its proportion at a usable size
 * and the season controls and caption take the space beside it, which is
 * where a map's explanation belongs anyway.
 */
@media (min-width: 900px) {
	.srm-surf-seasons {
		max-width: 1100px;
		display: grid;
		grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: 30px;
		align-items: start;
		padding: 30px 30px 34px;
	}
	.srm-surf-seasons-title { grid-column: 1 / -1; grid-row: 1; }
	.srm-surf-seasons .srm-surf-sub { grid-column: 1 / -1; grid-row: 2; }
	.srm-surf-seasons .srm-surf-stage { grid-column: 1; grid-row: 3 / 6; }
	.srm-surf-seasons .srm-surf-toggle { grid-column: 2; grid-row: 3; }
	.srm-surf-seasons .srm-surf-caption { grid-column: 2; grid-row: 4; margin-top: 0; }
	.srm-surf-seasons .srm-surf-foot { grid-column: 2; grid-row: 5; align-self: end; margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Responsive and motion
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.srm-surf-shore-grid { grid-template-columns: 1fr; }
	.srm-surf-rules { grid-template-columns: 1fr; }
	.srm-surf-specs { grid-template-columns: 1fr; }
	.srm-surf-brk-body { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.srm-surf * { transition: none !important; }
}

/* ---- Waikiki break map ------------------------------------------------ */
.srm-surf-breakmap { padding: 40px 0; }
.srm-surf-bm-stage {
	position: relative;
	border-radius: var(--srm-surf-radius-lg);
	overflow: hidden;
	border: 1px solid var(--srm-surf-paper-3);
	background: var(--srm-surf-ocean-deep);
	aspect-ratio: 16 / 9;
	box-shadow: var(--srm-surf-shadow);
}
.srm-surf-bm-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* Zoom controls, top right, over the map. touch-action above keeps a
   one-finger swipe scrolling the page: the map only claims two fingers. */
.srm-surf-bm-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}

.srm-surf-bm-zbtn {
	font-family: var(--srm-surf-font-data);
	font-size: 15px;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--srm-surf-ink);
	background: rgba(246, 244, 237, 0.92);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-sm);
	box-shadow: 0 1px 3px rgba(16, 44, 52, 0.18);
}

.srm-surf-bm-zbtn:hover { background: #FFFFFF; }
.srm-surf-bm-zbtn:focus-visible { outline: 2px solid var(--srm-surf-ocean); outline-offset: 2px; }

.srm-surf-bm-zreset {
	width: auto;
	padding: 0 9px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.srm-surf-bm-hint {
	margin: 8px 0 0;
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--srm-surf-ink-mute);
}
.srm-surf-bm-caption {
	margin: 14px 0 0;
	min-height: 1.6em;
	font-size: 16px;
	color: var(--srm-surf-ink);
}
.srm-surf-bm-key {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 10px 0 0;
	font-family: var(--srm-surf-font-data);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--srm-surf-ink-mute);
}
.srm-surf-bm-curl::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	margin-right: 8px;
	vertical-align: middle;
	background: linear-gradient(90deg, rgba(232,121,58,0), var(--srm-surf-coral));
}
.srm-surf-breakmap .srm-surf-foot {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--srm-surf-ink-mute);
	line-height: 1.5;
}
.srm-surf-breakmap .srm-surf-foot a { color: var(--srm-surf-ocean); }
@media (max-width: 720px) {
	.srm-surf-bm-stage { aspect-ratio: 4 / 3; }
	.srm-surf-bm-caption { font-size: 15px; }
}

.srm-surf-bm-sub { margin: 0 0 14px; color: var(--srm-surf-ink-mute); font-size: 15px; }

/* ---- the swell state control, and the break map height scale ---------
   One control in two places: the break map and the break list both include
   templates/parts/state-control.php and both write to the same module, so
   these rules are shared rather than duplicated per shortcode. ------------ */
.srm-surf-states { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
/* display:flex beats the browser's own [hidden] rule, so the group needs its
   own. It is hidden when the payload carries no states to select. */
.srm-surf-states[hidden] { display: none; }
.srm-surf-state {
	flex: 1 1 140px;
	font-family: var(--srm-surf-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--srm-surf-ink-mute);
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
	padding: 9px 12px;
	cursor: pointer;
	line-height: 1.25;
}
.srm-surf-state-sub {
	display: block;
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.8;
	margin-top: 2px;
}
.srm-surf-state.is-active {
	color: var(--srm-surf-paper);
	background: var(--srm-surf-ocean);
	border-color: var(--srm-surf-ocean);
}
/* The only keyboard affordance this control has now that the range input is
   gone, so it stays. */
.srm-surf-state:focus-visible { outline: 2px solid var(--srm-surf-ocean); outline-offset: 2px; }
.srm-surf-state[disabled] { opacity: 0.45; cursor: default; }
/* In the break list the note and source sit inside a padded box. On the break
   map the same two paragraphs sit in the page flow, directly above the
   canvas, so they carry their own space there. */
.srm-surf-breakmap .srm-surf-state-note { margin-bottom: 4px; }
.srm-surf-breakmap .srm-surf-state-source { margin-bottom: 14px; }
/* The wind source line travels with the control because the break cards that
   quote that reading are rendered by the directory, which can appear on a
   page with no break map on it. Inside the list's padded box it needs less
   room above it than a page footnote under a figure does; in the break map
   the footnote rule above already sets its spacing. */
.srm-surf-wind-source { margin-top: 10px; }

.srm-surf-bm-scale {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 10px;
	margin: 14px 0 0;
	max-width: 420px;
}
.srm-surf-bm-scale-label {
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--srm-surf-ink-mute);
}
.srm-surf-bm-ramp {
	height: 10px;
	border-radius: 5px;
	border: 1px solid var(--srm-surf-paper-3);
	/*
	 * Depth, not surf height. Must stay in step with DEPTH_RAMP in
	 * assets/js/breakmap.js: stops are placed at their depth as a fraction of
	 * the 40 m range, so shallow reads pale on the left and deep dark on the
	 * right, matching the map. A legend that drifts from its raster is worse
	 * than no legend.
	 */
	background: linear-gradient(90deg,
		rgb(138,198,202) 0%, rgb(92,164,178) 7.5%, rgb(50,122,142) 20%,
		rgb(27,92,110) 37.5%, rgb(16,68,84) 62.5%, rgb(7,50,59) 100%);
}
.srm-surf-bm-ticks {
	grid-column: 2;
	display: flex;
	justify-content: space-between;
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	color: var(--srm-surf-ink-mute);
}
.srm-surf-bm-ticks i { font-style: normal; }
@media (max-width: 560px) { .srm-surf-state { flex: 1 1 100%; } }

/* ---------------------------------------------------------------------------
   The swell control's box in the break list, and the reef cross-section
   inside each break card.

   The control sits above the break list because that is where the diagrams it
   governs now live: one cross-section per card, drawn only while that card is
   open. Eight canvases animating in a grid under the map was eight diagrams
   competing for one reader's attention. A reader who opens Queens wants the
   reef at Queens.
   --------------------------------------------------------------------------- */
.srm-surf-swell {
	margin: 0 0 18px;
	padding: 14px 16px 12px;
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
}
.srm-surf-state-note {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--srm-surf-ink-2);
	/* No reserved height. It existed because the sentence changed length on
	   every drag of the old range input and the break list below it jumped.
	   The slider is gone, and the three states change this sentence once per
	   click rather than continuously. Reserving three lines for one sentence
	   left an empty band inside this box whenever there was nothing to show. */
}
.srm-surf-state-source {
	margin: 4px 0 0;
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--srm-surf-ink-soft);
}

.srm-surf-brk-section { margin: 14px 0 0; }
.srm-surf-brk-section canvas {
	display: block;
	width: 100%;
	/* Tall enough that the depth axis, the distance axis and the feature
	   labels are not on top of each other, which is what killed the four-up
	   grid this replaces. Raised from 260 with the axis rebuild: the bottom
	   stack (rule, ticks, labels, two scale lines) now claims 74 px of it, so
	   at 260 the water was down to a strip. */
	height: 320px;
	border-radius: var(--srm-surf-radius-md);
	border: 1px solid var(--srm-surf-paper-3);
}
.srm-surf-brk-section-cap {
	margin: 7px 2px 0;
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--srm-surf-ink-mute);
}
@media (max-width: 600px) {
	.srm-surf-brk-section canvas { height: 240px; }
}

/* ---------------------------------------------------------------------------
   Module D. The live report header: the skill card and the conditions readout.

   Both panels are plain cards on the page's own paper surface, not the dark
   Module B treatment; a rating the reader is meant to trust reads better on
   the same surface as the rest of the page than inside a showcase panel.
   --------------------------------------------------------------------------- */
.srm-surf-report { display: grid; gap: 18px; padding: 24px 0; }

.srm-surf-rep-skill,
.srm-surf-rep-now {
	background: var(--srm-surf-paper-2);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-lg);
	box-shadow: var(--srm-surf-shadow);
	padding: 22px 22px 24px;
}

.srm-surf-rep-eyebrow {
	font-family: var(--srm-surf-font-body);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--srm-surf-ocean-deep);
	margin: 0 0 16px;
}

/* The skill panel's heading gets more air beneath it than the conditions
   panel's does. It is a question, and its three answers sit in cards directly
   under it; at the shared 16px the heading read as a label stuck to the first
   card rather than as the panel's own title. */
.srm-surf-rep-skill .srm-surf-rep-eyebrow { margin-bottom: 28px; }

/* ---- the skill card: three tiers, one best reef each, or a decline ---- */
.srm-surf-rep-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.srm-surf-rep-tier {
	background: var(--srm-surf-paper);
	border: 1px solid var(--srm-surf-paper-3);
	border-left: 4px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
	padding: 16px 18px 18px;
}

/* Skill color lives on the card's edge, identifying which column this is.
   It never reaches the bar meter: see .srm-surf-rep-bars below for why. */
.srm-surf-rep-tier[data-skill="beginner"] { border-left-color: var(--srm-surf-skill-beg); }
.srm-surf-rep-tier[data-skill="intermediate"] { border-left-color: var(--srm-surf-skill-int); }
.srm-surf-rep-tier[data-skill="advanced"] { border-left-color: var(--srm-surf-skill-adv); }

.srm-surf-rep-tier-name {
	font-size: 18px;
	margin-bottom: 8px;
}

.srm-surf-rep-decline {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-style: italic;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-rep-break {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
}

.srm-surf-rep-break-name {
	font-family: var(--srm-surf-font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--srm-surf-ink);
}

.srm-surf-rep-sentence {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--srm-surf-ink-2);
}

.srm-surf-rep-note {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-style: italic;
	color: var(--srm-surf-ink-soft);
}

/* ---- the five-bar meter. Shared by the coast rating, each tier's pick and
   the eight-reef disclosure. Ocean, not a skill color: a beginner-tier
   meter drawn in the beginner-tier green would read as a skill tag rather
   than a rating. ---- */
.srm-surf-rep-bars {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.srm-surf-rep-bars i {
	display: inline-block;
	width: 8px;
	height: 16px;
	border-radius: 2px;
	background: var(--srm-surf-paper-3);
	font-style: normal;
}

.srm-surf-rep-bars i.is-on { background: var(--srm-surf-ocean); }

/* ---- the conditions readout: rating word, tiles, disclosure ---- */
.srm-surf-rep-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.srm-surf-rep-word {
	font-family: var(--srm-surf-font-display);
	font-weight: 600;
	font-size: 28px;
	color: var(--srm-surf-ink);
}

.srm-surf-rep-age {
	margin: 0;
	font-size: 16px;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-rep-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 18px 0 16px;
}

.srm-surf-rep-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--srm-surf-paper);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
	padding: 12px 14px 14px;
}

.srm-surf-rep-tile-label {
	font-family: var(--srm-surf-font-data);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-rep-tile-value {
	font-family: var(--srm-surf-font-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--srm-surf-ink);
	line-height: 1.25;
}

/* A null reading is drawn quieter and smaller than a real number on
   purpose, never the same weight: a reader skimming the tiles should feel
   the difference between "2 to 3 ft" and "no reading" without reading the
   words. */
.srm-surf-rep-tile-value.srm-surf-rep-tile-unknown {
	font-family: var(--srm-surf-font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 14.5px;
	color: var(--srm-surf-ink-soft);
}

.srm-surf-rep-tile-sub {
	font-size: 12px;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-rep-toggle {
	display: block;
	width: 100%;
	font: inherit;
	font-family: var(--srm-surf-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--srm-surf-ocean-deep);
	background: var(--srm-surf-paper);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
	padding: 11px;
	cursor: pointer;
	text-align: center;
}

.srm-surf-rep-toggle:hover { background: var(--srm-surf-paper-3); }
.srm-surf-rep-toggle:focus-visible { outline: 2px solid var(--srm-surf-ocean); outline-offset: 2px; }

.srm-surf-rep-toggle::after {
	content: "\25BE";
	display: inline-block;
	margin-left: 6px;
	transition: transform .2s ease;
}

.srm-surf-rep-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* The `hidden` attribute is authoritative, the same rule .srm-surf-brk-body
   follows: no display property here, so removing the attribute is what
   reveals the board. */
.srm-surf-rep-board {
	margin-top: 12px;
	padding: 4px 16px;
	background: var(--srm-surf-paper);
	border: 1px solid var(--srm-surf-paper-3);
	border-radius: var(--srm-surf-radius-md);
}

.srm-surf-rep-list { list-style: none; margin: 0; padding: 0; }

.srm-surf-rep-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--srm-surf-paper-3);
}

.srm-surf-rep-list li:first-child { border-top: 0; }

.srm-surf-rep-row-name {
	flex: 1;
	font-weight: 600;
	color: var(--srm-surf-ink);
}

.srm-surf-rep-row-word {
	font-size: 13.5px;
	color: var(--srm-surf-ink-mute);
}

.srm-surf-rep-empty {
	margin: 0;
	padding: 14px 0;
	color: var(--srm-surf-ink-mute);
	font-style: italic;
}

.srm-surf-rep-sources {
	list-style: none;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--srm-surf-paper-3);
	display: grid;
	gap: 6px;
	font-size: 12.5px;
	color: var(--srm-surf-ink-mute);
	line-height: 1.5;
}

.srm-surf-report .srm-surf-foot {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--srm-surf-ink-mute);
	line-height: 1.5;
}

.srm-surf-report .srm-surf-foot a { color: var(--srm-surf-ocean); }

@media (max-width: 700px) {
	.srm-surf-rep-tiers { grid-template-columns: 1fr; }
	/* Three columns collapsing to two, deliberately not one: six tiles
	   stacked single-file would push the whole header past the fold on a
	   phone. */
	.srm-surf-rep-tiles { grid-template-columns: repeat(2, 1fr); }
}