/*
 * Starbase design tokens: primitives.
 *
 * An Open-Props-like vocabulary, prefixed --sb-. Primitives are raw values
 * (ramps, scales, curves). Components never use them directly: they read the
 * semantic tokens in theme.css, which is what makes components themeable.
 *
 * The first stylesheet on the page declares the cascade layer order.
 */
@layer reset, tokens, theme, base, layout, components, utilities;

@layer tokens {
	:root {
		/* ── Ink: the night-sky neutrals (hue ~266) ─────────────────────── */
		--sb-ink-0: oklch(97% 0.008 279);   /* #F3F4FA-ish */
		--sb-ink-1: oklch(88% 0.028 270);
		--sb-ink-2: oklch(79.3% 0.05 268.7); /* #AEBBDD */
		--sb-ink-3: oklch(70% 0.055 268);
		--sb-ink-4: oklch(61.8% 0.056 267.8); /* #7785A8 */
		--sb-ink-5: oklch(50% 0.058 266);
		--sb-ink-6: oklch(40% 0.057 265.5);
		--sb-ink-7: oklch(33.2% 0.055 265.2); /* #283552 */
		--sb-ink-8: oklch(27.5% 0.048 265.5);
		--sb-ink-9: oklch(23.4% 0.043 265.6); /* #141D32 */
		--sb-ink-10: oklch(21.2% 0.04 265.8); /* #10182B */
		--sb-ink-11: oklch(18.6% 0.038 266.6); /* #0B1224 */
		--sb-ink-12: oklch(16.4% 0.035 268.9); /* #080D1D */

		/* ── Violet: primary signal (hue ~290) ──────────────────────────── */
		--sb-violet-0: oklch(96% 0.03 292);
		--sb-violet-1: oklch(90% 0.06 292);
		--sb-violet-2: oklch(82% 0.1 292);
		--sb-violet-3: oklch(74.6% 0.144 292.6); /* #B09AFF */
		--sb-violet-4: oklch(68.5% 0.18 291);
		--sb-violet-5: oklch(63.5% 0.21 289.3); /* #8C6BFF */
		--sb-violet-6: oklch(56% 0.215 288);
		--sb-violet-7: oklch(48% 0.2 287);
		--sb-violet-8: oklch(40% 0.17 286);
		--sb-violet-9: oklch(32% 0.13 285);
		--sb-violet-10: oklch(25% 0.09 284);

		/* ── Green: Datastar / success (hue ~152) ───────────────────────── */
		--sb-green-1: oklch(95% 0.07 152);
		--sb-green-3: oklch(87.2% 0.174 151.8); /* #6EF59A */
		--sb-green-5: oklch(74% 0.17 152);
		--sb-green-7: oklch(55% 0.13 153);
		--sb-green-9: oklch(32% 0.07 154);

		/* ── Cyan: secondary accent (hue ~242) ──────────────────────────── */
		--sb-cyan-1: oklch(93% 0.05 240);
		--sb-cyan-3: oklch(77.5% 0.126 241.8); /* #65BFFF */
		--sb-cyan-5: oklch(66% 0.14 243);
		--sb-cyan-7: oklch(50% 0.12 245);
		--sb-cyan-9: oklch(30% 0.07 248);

		/* ── Status ─────────────────────────────────────────────────────── */
		--sb-amber-3: oklch(84% 0.15 80);
		--sb-amber-7: oklch(55% 0.12 70);
		--sb-red-3: oklch(72% 0.17 22);
		--sb-red-5: oklch(64% 0.2 25);
		--sb-red-7: oklch(50% 0.17 25);

		/* ── Space: 4/8 rhythm ──────────────────────────────────────────── */
		--sb-space-px: 1px;
		--sb-space-1: 0.25rem; /*  4 */
		--sb-space-2: 0.5rem; /*  8 */
		--sb-space-3: 0.75rem; /* 12 */
		--sb-space-4: 1rem; /* 16 */
		--sb-space-5: 1.25rem; /* 20 */
		--sb-space-6: 1.5rem; /* 24 */
		--sb-space-8: 2rem; /* 32 */
		--sb-space-10: 2.5rem; /* 40 */
		--sb-space-12: 3rem; /* 48 */
		--sb-space-16: 4rem; /* 64 */

		/* ── Radius: crisp, never bubbly ────────────────────────────────── */
		--sb-radius-xs: 4px;
		--sb-radius-sm: 6px;
		--sb-radius-md: 8px;
		--sb-radius-lg: 10px;
		--sb-radius-pill: 999px;

		/* ── Type ───────────────────────────────────────────────────────── */
		--sb-font-display: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
		--sb-font-ui: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

		--sb-font-size-00: 0.6875rem; /* 11 */
		--sb-font-size-0: 0.75rem; /* 12 */
		--sb-font-size-1: 0.8125rem; /* 13 */
		--sb-font-size-2: 0.875rem; /* 14 */
		--sb-font-size-3: 1rem; /* 16 */
		--sb-font-size-4: 1.125rem; /* 18 */
		--sb-font-size-5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
		--sb-font-size-6: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
		--sb-font-size-7: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
		--sb-font-size-8: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);

		--sb-font-weight-regular: 400;
		--sb-font-weight-medium: 500;
		--sb-font-weight-semibold: 600;
		--sb-font-weight-bold: 700;

		--sb-line-height-tight: 1.05;
		--sb-line-height-snug: 1.3;
		--sb-line-height-normal: 1.55;
		--sb-letter-spacing-display: 0.02em;
		--sb-letter-spacing-caps: 0.08em;

		/* ── Borders & elevation ────────────────────────────────────────── */
		--sb-border-width: 1px;
		--sb-border-width-thick: 2px;
		--sb-shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 1px 2px oklch(0% 0 0 / 0.35);
		--sb-shadow-2: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 8px 24px -12px oklch(0% 0 0 / 0.6);
		--sb-shadow-3: 0 24px 48px -16px oklch(0% 0 0 / 0.7);

		/* ── Pixel frame ────────────────────────────────────────────────────
		 * A notched 8-bit frame drawn with stepped box-shadows (see
		 * .sb-pixel-frame in utilities.css). The colour comes from the
		 * semantic --sb-frame-color. To tone the whole site down to a plain
		 * hairline, set --sb-frame-step: 1px.
		 */
		--sb-frame-step: 3px;

		/* ── Pixel corners ──────────────────────────────────────────────────
		 * Components notch their corners by --sb-notch "pixels": 1 is the
		 * 8-bit look, 0 turns it off (components then use their normal
		 * border radius). [data-sb-style="smooth"] sets it for you.
		 */
		--sb-notch: 1;

		/* ── Motion ─────────────────────────────────────────────────────── */
		--sb-duration-instant: 80ms;
		--sb-duration-fast: 120ms;
		--sb-duration-base: 180ms;
		--sb-duration-slow: 320ms;
		--sb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
		--sb-ease-out: cubic-bezier(0, 0, 0.2, 1);
		--sb-ease-in: cubic-bezier(0.4, 0, 1, 1);
		--sb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
		--sb-ease-steps: steps(4, end); /* pixel-y motion for illustrations */

		/* ── Layers ─────────────────────────────────────────────────────── */
		--sb-z-base: 0;
		--sb-z-raised: 1;
		--sb-z-sticky: 10;
		--sb-z-dropdown: 20;
		--sb-z-overlay: 40;
		--sb-z-modal: 50;
		--sb-z-toast: 60;
		--sb-z-tooltip: 70;

		/* ── Sizes ──────────────────────────────────────────────────────── */
		--sb-control-height-sm: 2rem;
		--sb-control-height-md: 2.5rem;
		--sb-control-height-lg: 3rem;
		--sb-content-max: 90rem;
		--sb-sidebar-width: 17rem;
	}
}

/* Typed custom properties so they can be transitioned/animated. */
@property --sb-glow-strength {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}
/*
 * Semantic tokens. This is the contract every component styles against.
 * Themes are nothing but a different mapping of these names; they inherit
 * through shadow DOM, so Rocket components pick them up automatically.
 */
@layer theme {
	:root,
	[data-sb-theme="deep-space"] {
		color-scheme: dark;

		--sb-bg: var(--sb-ink-12);
		--sb-bg-glow: oklch(30% 0.12 285 / 0.35);
		--sb-surface-raised: var(--sb-ink-10);
		--sb-surface-card: var(--sb-ink-9);
		--sb-surface-inset: var(--sb-ink-11);
		--sb-surface-hover: oklch(from var(--sb-ink-9) calc(l + 0.03) c h);
		--sb-surface-overlay: oklch(12% 0.03 268 / 0.72);

		--sb-border: var(--sb-ink-7);
		--sb-border-subtle: oklch(from var(--sb-ink-7) l c h / 0.6);
		--sb-border-strong: var(--sb-ink-6);

		--sb-text-1: var(--sb-ink-0);
		--sb-text-2: var(--sb-ink-2);
		--sb-text-muted: var(--sb-ink-4);
		--sb-text-on-brand: var(--sb-ink-0);

		--sb-brand: var(--sb-violet-5);
		--sb-brand-hover: var(--sb-violet-4);
		--sb-brand-light: var(--sb-violet-3);
		--sb-brand-subtle: oklch(from var(--sb-violet-5) l c h / 0.14);
		--sb-accent: var(--sb-cyan-3);
		--sb-datastar: var(--sb-green-3);

		--sb-ok: var(--sb-green-3);
		--sb-ok-subtle: oklch(from var(--sb-green-3) l c h / 0.12);
		--sb-warn: var(--sb-amber-3);
		--sb-warn-subtle: oklch(from var(--sb-amber-3) l c h / 0.12);
		--sb-danger: var(--sb-red-3);
		--sb-danger-subtle: oklch(from var(--sb-red-3) l c h / 0.12);
		--sb-info: var(--sb-cyan-3);
		--sb-info-subtle: oklch(from var(--sb-cyan-3) l c h / 0.12);

		--sb-control-bg: var(--sb-ink-11);
		--sb-control-border: var(--sb-ink-7);
		--sb-control-border-hover: var(--sb-ink-6);
		--sb-control-text: var(--sb-ink-0);
		--sb-control-placeholder: var(--sb-ink-4);
		--sb-control-radius: var(--sb-radius-sm);

		--sb-radius: var(--sb-radius-md);
		--sb-frame-color: var(--sb-violet-3);
		--sb-glow-brand: 0 0 0 1px oklch(from var(--sb-violet-5) l c h / 0.35), 0 8px 32px -8px oklch(from var(--sb-violet-5) l c h / 0.45);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--sb-brand-light);
		--sb-selection: oklch(from var(--sb-violet-5) l c h / 0.4);

		--sb-font-body: var(--sb-font-ui);
		--sb-font-heading: var(--sb-font-ui);

		/* Syntax highlighting (code blocks and sb-code-editor). */
		--sb-code-keyword: var(--sb-violet-3);
		--sb-code-function: var(--sb-violet-2);
		--sb-code-tag: var(--sb-cyan-3);
		--sb-code-string: var(--sb-green-3);
		--sb-code-number: var(--sb-amber-3);
		--sb-text-on-danger: #1B0A0C;
	}

	/* Opt out of the 8-bit details: smooth corners, hairline frames and the
	 * UI font for display text. Combine with any theme. */
	[data-sb-style="smooth"] {
		--sb-notch: 0;
		--sb-frame-step: 1px;
		--sb-font-display: var(--sb-font-ui);
	}
}
/*
 * SailPolars design tokens, on top of Starbase (starbase/css/tokens.css and
 * starbase/css/theme.css, which declare the layer order).
 *
 * One palette for the product pages (Rust/Topcoat), the game's HTML shell
 * and the canvas HUD. The --sp-* primitives are plain sRGB hex so the Odin
 * HUD can mirror them exactly: source/game/palette.odin names each one it
 * uses, and tools/check_design.py fails when a value drifts.
 *
 * Themes map Starbase's semantic --sb-* tokens (what every component styles
 * against):
 *   open-water  dark, the default and the game's only theme
 *   daylight    light; also "auto" on a light system (no data-sb-theme)
 * Both use Starbase's smooth style: no pixel notches, hairline frames and
 * Atkinson Hyperlegible for display text, the face the HUD draws with.
 *
 * Colour meaning follows the product rules: blue/orange are lifted/headed,
 * red means over early (OCS) or a destructive action, never decoration.
 */

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-regular-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-regular-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-bold-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-bold-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-italic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Barlow Condensed (OFL, fonts/OFL-BarlowCondensed.txt): the display face
 * for headlines, mode tiles and instrument numbers (--sp-font-display). The
 * HUD draws the same face from assets/fonts.
 */
@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-700i-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-700i-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-800i-latin-ext.woff2") format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-800i-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
	:root {
		/* ── Ink: sea-at-dusk neutrals ───────────────────────────────────── */
		--sp-ink-0: #EEF5FA;
		--sp-ink-1: #D6E3EE;
		--sp-ink-2: #B7CAD9;
		--sp-ink-3: #9DB3C6;
		--sp-ink-4: #8AA2B7;
		--sp-ink-5: #6F879D;
		--sp-ink-6: #3D5A77;
		--sp-ink-7: #2B4560;
		--sp-ink-8: #173049;
		--sp-ink-9: #11253A;
		--sp-ink-10: #0C1C2C;
		--sp-ink-11: #081624;
		--sp-ink-12: #06131F;

		/* ── Polar: the brand blue (primary actions, TACK) ──────────────── */
		--sp-polar-2: #8CCBF2;
		--sp-polar-3: #5DB2E8;
		--sp-polar-5: #2B84C2;
		--sp-polar-6: #2476B0;
		--sp-polar-7: #1B5F90;
		--sp-polar-8: #134A70;

		/* ── Foam: secondary accent (course over ground, highlights) ────── */
		--sp-foam: #66D2DE;
		--sp-foam-deep: #0E7C8A;

		/* ── Signals ─────────────────────────────────────────────────────── */
		--sp-green-4: #35C47A; /* on course, GO, Best VMG */
		--sp-green-7: #157A45;
		--sp-amber-3: #E8B93E; /* ease, caution */
		--sp-amber-7: #8A6100;
		--sp-red-3: #F2564F; /* over early, destructive (text) */
		--sp-red-5: #D2302B; /* over early, destructive (fill) */
		--sp-red-7: #C0302B;

		/* ── Tactics (fixed meaning in every view) ──────────────────────── */
		--sp-lifted: #4AA3FF;
		--sp-headed: #FF9C3A;
		--sp-ocs: var(--sp-red-5);

		/* ── Mode identity: tiles and tabs only, never race chrome ───────── */
		--sp-mode-race: var(--sp-polar-5);
		--sp-mode-start: var(--sp-amber-3);
		--sp-mode-beat: var(--sp-foam);
		--sp-mode-online: var(--sp-green-4);
		--sp-mode-free: var(--sp-sail);

		/* ── Cloth and paper (light theme) ──────────────────────────────── */
		--sp-sail: #F4F1EA;
		--sp-paper-0: #FFFFFF;
		--sp-paper-1: #F3F6F9;
		--sp-paper-2: #EDF2F7;
		--sp-paper-3: #E8EEF3;
		--sp-paper-4: #D3DEE7;
		--sp-paper-5: #B5C4D1;
		--sp-slate-4: #7F93A6;
		--sp-slate-5: #566B7E;
		--sp-slate-7: #304559;
		--sp-slate-9: #0B1B2B;

		/* ── Type ─────────────────────────────────────────────────────── */
		--sb-font-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--sb-font-display: var(--sb-font-ui);
		--sp-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
		--sp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
		--sb-letter-spacing-display: -0.01em;

		/* ── Shape: smooth, crisp corners ─────────────────────────────────── */
		--sb-notch: 0;
		--sb-frame-step: 1px;
		--sb-radius-xs: 4px;
		--sb-radius-sm: 6px;
		--sb-radius-md: 10px;
		--sb-radius-lg: 14px;
		--sb-content-max: 76rem;
	}
}

@layer theme {
	:root,
	[data-sb-theme="open-water"] {
		color-scheme: dark;

		--sb-bg: var(--sp-ink-12);
		--sb-bg-glow: rgb(36 118 176 / 0.28);
		--sb-surface-raised: var(--sp-ink-10);
		--sb-surface-card: var(--sp-ink-9);
		--sb-surface-inset: var(--sp-ink-11);
		--sb-surface-hover: var(--sp-ink-8);
		--sb-surface-overlay: rgb(3 10 18 / 0.72);

		--sb-border: var(--sp-ink-7);
		--sb-border-subtle: rgb(43 69 96 / 0.6);
		--sb-border-strong: var(--sp-ink-6);

		--sb-text-1: var(--sp-ink-0);
		--sb-text-2: var(--sp-ink-2);
		--sb-text-muted: var(--sp-ink-4);
		--sb-text-on-brand: #FFFFFF;

		--sb-brand: var(--sp-polar-6);
		--sb-brand-hover: var(--sp-polar-5);
		--sb-brand-light: var(--sp-polar-2);
		--sb-brand-subtle: rgb(36 118 176 / 0.18);
		--sb-accent: var(--sp-foam);
		--sb-datastar: var(--sp-green-4);

		--sb-ok: var(--sp-green-4);
		--sb-ok-subtle: rgb(53 196 122 / 0.14);
		--sb-warn: var(--sp-amber-3);
		--sb-warn-subtle: rgb(232 185 62 / 0.14);
		--sb-danger: var(--sp-red-3);
		--sb-danger-subtle: rgb(242 86 79 / 0.14);
		--sb-info: var(--sp-polar-2);
		--sb-info-subtle: rgb(140 203 242 / 0.12);

		--sb-control-bg: var(--sp-ink-11);
		--sb-control-border: #46617C;
		--sb-control-border-hover: #5E7B97;
		--sb-control-text: var(--sp-ink-0);
		--sb-control-placeholder: var(--sp-ink-5);
		--sb-control-radius: var(--sb-radius-sm);

		--sb-radius: var(--sb-radius-md);
		--sb-frame-color: var(--sp-ink-7);
		--sb-glow-brand: 0 0 0 1px rgb(36 118 176 / 0.4), 0 10px 32px -10px rgb(36 118 176 / 0.55);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--sp-polar-2);
		--sb-selection: rgb(36 118 176 / 0.45);

		--sb-font-body: var(--sb-font-ui);
		--sb-font-heading: var(--sb-font-ui);

		--sb-code-keyword: var(--sp-polar-2);
		--sb-code-function: var(--sp-ink-1);
		--sb-code-tag: var(--sp-foam);
		--sb-code-string: var(--sp-green-4);
		--sb-code-number: var(--sp-amber-3);
		--sb-text-on-danger: #1B0A0C;

		/* SailPolars extras */
		--sp-danger-fill: var(--sp-red-5);
		--sp-hull: var(--sp-sail);
		--sp-sea: #10385C;
		--sp-hud-panel: rgb(6 14 24 / 0.78);
		--sp-hud-border: rgb(238 245 250 / 0.24);
	}

	[data-sb-theme="daylight"] {
		color-scheme: light;

		--sb-bg: var(--sp-paper-1);
		--sb-bg-glow: rgb(36 118 176 / 0.12);
		--sb-surface-raised: var(--sp-paper-0);
		--sb-surface-card: var(--sp-paper-0);
		--sb-surface-inset: var(--sp-paper-3);
		--sb-surface-hover: var(--sp-paper-2);
		--sb-surface-overlay: rgb(11 27 43 / 0.4);

		--sb-border: var(--sp-paper-4);
		--sb-border-subtle: #E2E9EF;
		--sb-border-strong: var(--sp-paper-5);

		--sb-text-1: var(--sp-slate-9);
		--sb-text-2: var(--sp-slate-7);
		--sb-text-muted: var(--sp-slate-5);
		--sb-text-on-brand: #FFFFFF;

		--sb-brand: var(--sp-polar-7);
		--sb-brand-hover: var(--sp-polar-8);
		--sb-brand-light: var(--sp-polar-7);
		--sb-brand-subtle: rgb(27 95 144 / 0.1);
		--sb-accent: var(--sp-foam-deep);
		--sb-datastar: var(--sp-green-7);

		--sb-ok: var(--sp-green-7);
		--sb-ok-subtle: rgb(21 122 69 / 0.1);
		--sb-warn: var(--sp-amber-7);
		--sb-warn-subtle: rgb(138 97 0 / 0.1);
		--sb-danger: var(--sp-red-7);
		--sb-danger-subtle: rgb(192 48 43 / 0.1);
		--sb-info: var(--sp-polar-7);
		--sb-info-subtle: rgb(27 95 144 / 0.1);

		--sb-control-bg: var(--sp-paper-0);
		--sb-control-border: var(--sp-slate-4);
		--sb-control-border-hover: var(--sp-slate-5);
		--sb-control-text: var(--sp-slate-9);
		--sb-control-placeholder: #6B7F91;
		--sb-control-radius: var(--sb-radius-sm);

		--sb-radius: var(--sb-radius-md);
		--sb-frame-color: var(--sp-paper-4);
		--sb-glow-brand: 0 0 0 1px rgb(27 95 144 / 0.2), 0 10px 26px -12px rgb(27 95 144 / 0.35);
		--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--sp-polar-7);
		--sb-selection: rgb(27 95 144 / 0.2);

		--sb-code-keyword: var(--sp-polar-7);
		--sb-code-function: var(--sp-slate-7);
		--sb-code-tag: var(--sp-foam-deep);
		--sb-code-string: var(--sp-green-7);
		--sb-code-number: var(--sp-amber-7);
		--sb-text-on-danger: #FFFFFF;

		--sp-danger-fill: var(--sp-red-7);
		--sp-hull: #FFFFFF;
		--sp-sea: #D7E8F4;
	}

	/* "auto" on a light system: the daylight block again (kept identical by
	 * tools/check_design.py). */
	@media (prefers-color-scheme: light) {
		:root:not([data-sb-theme]) {
			color-scheme: light;

			--sb-bg: var(--sp-paper-1);
			--sb-bg-glow: rgb(36 118 176 / 0.12);
			--sb-surface-raised: var(--sp-paper-0);
			--sb-surface-card: var(--sp-paper-0);
			--sb-surface-inset: var(--sp-paper-3);
			--sb-surface-hover: var(--sp-paper-2);
			--sb-surface-overlay: rgb(11 27 43 / 0.4);

			--sb-border: var(--sp-paper-4);
			--sb-border-subtle: #E2E9EF;
			--sb-border-strong: var(--sp-paper-5);

			--sb-text-1: var(--sp-slate-9);
			--sb-text-2: var(--sp-slate-7);
			--sb-text-muted: var(--sp-slate-5);
			--sb-text-on-brand: #FFFFFF;

			--sb-brand: var(--sp-polar-7);
			--sb-brand-hover: var(--sp-polar-8);
			--sb-brand-light: var(--sp-polar-7);
			--sb-brand-subtle: rgb(27 95 144 / 0.1);
			--sb-accent: var(--sp-foam-deep);
			--sb-datastar: var(--sp-green-7);

			--sb-ok: var(--sp-green-7);
			--sb-ok-subtle: rgb(21 122 69 / 0.1);
			--sb-warn: var(--sp-amber-7);
			--sb-warn-subtle: rgb(138 97 0 / 0.1);
			--sb-danger: var(--sp-red-7);
			--sb-danger-subtle: rgb(192 48 43 / 0.1);
			--sb-info: var(--sp-polar-7);
			--sb-info-subtle: rgb(27 95 144 / 0.1);

			--sb-control-bg: var(--sp-paper-0);
			--sb-control-border: var(--sp-slate-4);
			--sb-control-border-hover: var(--sp-slate-5);
			--sb-control-text: var(--sp-slate-9);
			--sb-control-placeholder: #6B7F91;
			--sb-control-radius: var(--sb-radius-sm);

			--sb-radius: var(--sb-radius-md);
			--sb-frame-color: var(--sp-paper-4);
			--sb-glow-brand: 0 0 0 1px rgb(27 95 144 / 0.2), 0 10px 26px -12px rgb(27 95 144 / 0.35);
			--sb-focus-ring: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--sp-polar-7);
			--sb-selection: rgb(27 95 144 / 0.2);

			--sb-code-keyword: var(--sp-polar-7);
			--sb-code-function: var(--sp-slate-7);
			--sb-code-tag: var(--sp-foam-deep);
			--sb-code-string: var(--sp-green-7);
			--sb-code-number: var(--sp-amber-7);
			--sb-text-on-danger: #FFFFFF;

			--sp-danger-fill: var(--sp-red-7);
			--sp-hull: #FFFFFF;
			--sp-sea: #D7E8F4;
		}
	}
}
/*
 * SailPolars native controls: the plain-HTML twins of Starbase's components,
 * shared by the product pages and the game's HTML shell.
 *
 * Starbase's sb-button is not a submit button, so forms submit with
 * <button class="sp-btn">; it matches sb-button (same tokens, sizes and
 * variants). The game shell uses these classes for every control, because it
 * must stay one self-contained page (archived replay builds keep exactly
 * index.html and its runtime files).
 */

@layer components {
	.sp-btn {
		--_h: var(--sb-control-height-md, 2.5rem);
		--_px: 1.125rem;
		--_fs: 0.875rem;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		block-size: var(--_h);
		padding: 0 var(--_px);
		border: 1px solid var(--sb-brand);
		border-radius: var(--sb-control-radius);
		background: var(--sb-brand);
		color: var(--sb-text-on-brand);
		font: inherit;
		font-size: var(--_fs);
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
		transition: background var(--sb-duration-fast, 120ms), border-color var(--sb-duration-fast, 120ms),
			translate var(--sb-duration-fast, 120ms), box-shadow var(--sb-duration-fast, 120ms);
	}

	.sp-btn:hover {
		background: var(--sb-brand-hover);
		border-color: var(--sb-brand-hover);
		color: var(--sb-text-on-brand);
		text-decoration: none;
		translate: 0 -1px;
	}

	.sp-btn:active {
		translate: 0 1px;
	}

	.sp-btn:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--sb-focus-ring);
	}

	.sp-btn:disabled,
	.sp-btn[aria-disabled="true"] {
		pointer-events: none;
		opacity: 0.5;
	}

	.sp-btn[aria-busy="true"] {
		cursor: progress;
		opacity: 0.8;
	}

	.sp-btn.is-outline {
		background: transparent;
		border-color: var(--sb-brand-light);
		color: var(--sb-text-1);
	}

	.sp-btn.is-outline:hover,
	.sp-btn.is-outline[aria-pressed="true"] {
		background: var(--sb-brand-subtle);
	}

	.sp-btn.is-ghost {
		background: transparent;
		border-color: transparent;
		color: var(--sb-text-1);
	}

	.sp-btn.is-ghost:hover,
	.sp-btn.is-ghost[aria-pressed="true"] {
		background: var(--sb-surface-hover);
	}

	.sp-btn.is-quiet {
		background: var(--sb-surface-raised);
		border-color: var(--sb-border);
		color: var(--sb-text-1);
	}

	.sp-btn.is-quiet:hover {
		background: var(--sb-surface-hover);
		border-color: var(--sb-border-strong);
	}

	.sp-btn.is-ok {
		background: var(--sb-ok);
		border-color: var(--sb-ok);
		color: var(--sb-bg);
	}

	.sp-btn.is-ok:hover {
		filter: brightness(1.08);
	}

	.sp-btn.is-danger {
		background: var(--sb-danger);
		border-color: var(--sb-danger);
		color: var(--sb-text-on-danger);
	}

	.sp-btn.is-danger:hover {
		filter: brightness(1.1);
	}

	.sp-btn.is-sm {
		--_h: var(--sb-control-height-sm, 2rem);
		--_px: 0.75rem;
		--_fs: 0.8125rem;
	}

	.sp-btn.is-lg {
		--_h: var(--sb-control-height-lg, 3rem);
		--_px: 1.5rem;
		--_fs: 1rem;
	}

	/* Fields: a label above its control, with an optional hint. */
	.sp-field {
		display: grid;
		gap: var(--sb-space-1, 0.25rem);
		min-inline-size: 0;
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-1, 0.8125rem);
		font-weight: 700;
	}

	.sp-field .sp-hint {
		color: var(--sb-text-muted);
		font-weight: 400;
	}

	.sp-input,
	.sp-select,
	.sp-textarea {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--sb-control-height-md, 2.5rem);
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--sb-control-border);
		border-radius: var(--sb-control-radius);
		background: var(--sb-control-bg);
		color: var(--sb-control-text);
		font: inherit;
		font-size: var(--sb-font-size-2, 0.875rem);
		font-weight: 400;
	}

	.sp-textarea {
		min-block-size: 5.5rem;
		resize: vertical;
	}

	.sp-input::placeholder,
	.sp-textarea::placeholder {
		color: var(--sb-control-placeholder);
	}

	.sp-input:hover,
	.sp-select:hover,
	.sp-textarea:hover {
		border-color: var(--sb-control-border-hover);
	}

	.sp-input:focus-visible,
	.sp-select:focus-visible,
	.sp-textarea:focus-visible {
		outline: 2px solid transparent;
		border-color: var(--sb-brand-light);
		box-shadow: var(--sb-focus-ring);
	}

	/* A raised surface: cards, dialogs, HUD-adjacent panels. */
	.sp-panel {
		background: var(--sb-surface-card);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg);
		box-shadow: var(--sb-shadow-2);
	}

	.sp-eyebrow {
		margin: 0;
		color: var(--sb-brand-light);
		font-size: var(--sb-font-size-00, 0.6875rem);
		font-weight: 700;
		letter-spacing: var(--sb-letter-spacing-caps, 0.08em);
		text-transform: uppercase;
	}

	.sp-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		padding: 0.15rem 0.55rem;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-pill, 999px);
		background: var(--sb-surface-inset);
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-0, 0.75rem);
		font-weight: 700;
		white-space: nowrap;
	}

	.sp-chip.is-ok { color: var(--sb-ok); border-color: color-mix(in srgb, var(--sb-ok) 45%, transparent); background: var(--sb-ok-subtle); }
	.sp-chip.is-warn { color: var(--sb-warn); border-color: color-mix(in srgb, var(--sb-warn) 45%, transparent); background: var(--sb-warn-subtle); }
	.sp-chip.is-danger { color: var(--sb-danger); border-color: color-mix(in srgb, var(--sb-danger) 45%, transparent); background: var(--sb-danger-subtle); }
	.sp-chip.is-brand { color: var(--sb-brand-light); border-color: color-mix(in srgb, var(--sb-brand-light) 45%, transparent); background: var(--sb-brand-subtle); }

	.sp-kbd {
		display: inline-block;
		min-inline-size: 1.6em;
		padding: 0.05em 0.4em;
		border: 1px solid var(--sb-border-strong);
		border-block-end-width: 2px;
		border-radius: var(--sb-radius-xs);
		background: var(--sb-surface-inset);
		color: var(--sb-text-1);
		font-family: var(--sp-font-mono);
		font-size: 0.85em;
		text-align: center;
	}

	.sp-code {
		font-family: var(--sp-font-mono);
		letter-spacing: 0.12em;
	}

	/* Marine-instrument number: the look of the HUD's big-digit cells. */
	.sp-stat {
		display: grid;
		gap: 0.1rem;
		padding: var(--sb-space-3, 0.75rem) var(--sb-space-4, 1rem);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius);
		background: var(--sb-surface-inset);
	}

	.sp-stat > .sp-stat-label {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-00, 0.6875rem);
		font-weight: 700;
		letter-spacing: var(--sb-letter-spacing-caps, 0.08em);
		text-transform: uppercase;
	}

	.sp-stat > .sp-stat-value {
		color: var(--sb-text-1);
		font-size: var(--sb-font-size-6, 1.75rem);
		font-weight: 700;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	/* Room list: public race rooms, the same in the game's lobby and on the
	 * site's Race online page. A row is a title, fact chips (format, sailors,
	 * boat, course, wind) and a Join action. */
	.sp-rooms {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-md);
		background: var(--sb-surface-inset);
		overflow: hidden;
	}

	.sp-room {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sb-space-3);
		align-items: center;
		padding: var(--sb-space-3) var(--sb-space-4);
		border-block-end: 1px solid var(--sb-border-subtle);
		transition: background var(--sb-duration-fast, 120ms);
	}

	.sp-room:last-child {
		border-block-end: 0;
	}

	.sp-room:hover {
		background: var(--sb-surface-card);
	}

	.sp-room-title {
		display: block;
		margin: 0;
		color: var(--sb-text-1);
		font-size: var(--sb-font-size-3, 1rem);
		font-weight: 700;
		overflow-wrap: anywhere;
	}

	.sp-room-facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-1, 0.25rem);
		margin-block-start: var(--sb-space-2, 0.5rem);
	}

	.sp-room-facts .sp-chip {
		font-weight: 400;
	}

	.sp-room-facts .sp-chip b {
		color: var(--sb-text-1);
	}

	.sp-rooms-empty {
		padding: var(--sb-space-10, 2.5rem) var(--sb-space-5, 1.25rem);
		color: var(--sb-text-2);
		text-align: center;
	}

	.sp-rooms-empty strong {
		display: block;
		margin-block-end: var(--sb-space-1, 0.25rem);
		color: var(--sb-text-1);
		font-size: var(--sb-font-size-3, 1rem);
	}

	/* Display type: condensed italic capitals for headlines, tiles and the
	 * big numbers (Barlow Condensed, --sp-font-display). */
	.sp-display {
		margin: 0;
		font-family: var(--sp-font-display);
		font-style: italic;
		font-weight: 800;
		line-height: 0.92;
		letter-spacing: -0.005em;
		text-transform: uppercase;
		text-wrap: balance;
	}

	/* The call to play: a pill in the display face with a play glyph. Brand
	 * blue by default; .is-outline on photos, .is-warn for the coaches band,
	 * .is-sm in the site header. */
	.sp-cta {
		--_h: 3.75rem;
		--_px: 2rem;
		--_fs: 1.625rem;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55em;
		min-block-size: var(--_h);
		padding: 0 var(--_px);
		border: 2px solid var(--sb-brand);
		border-radius: var(--sb-radius-pill, 999px);
		background: var(--sb-brand);
		color: var(--sb-text-on-brand);
		font-family: var(--sp-font-display);
		font-size: var(--_fs);
		font-style: italic;
		font-weight: 800;
		letter-spacing: 0.02em;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--sb-brand) 70%, transparent);
		transition: background var(--sb-duration-fast, 120ms), border-color var(--sb-duration-fast, 120ms),
			translate var(--sb-duration-fast, 120ms), box-shadow var(--sb-duration-fast, 120ms);
	}

	.sp-cta svg {
		flex: none;
		inline-size: 0.7em;
		block-size: 0.7em;
	}

	.sp-cta:hover {
		background: var(--sb-brand-hover);
		border-color: var(--sb-brand-hover);
		color: var(--sb-text-on-brand);
		text-decoration: none;
		translate: 0 -1px;
	}

	.sp-cta:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--sb-focus-ring);
	}

	.sp-cta.is-outline {
		background: transparent;
		border-color: color-mix(in srgb, var(--sb-text-1) 70%, transparent);
		color: var(--sb-text-1);
		box-shadow: none;
	}

	.sp-cta.is-outline:hover {
		background: color-mix(in srgb, var(--sb-text-1) 10%, transparent);
		border-color: var(--sb-text-1);
	}

	.sp-cta.is-warn {
		background: var(--sb-warn);
		border-color: var(--sb-warn);
		color: var(--sb-bg);
		box-shadow: none;
	}

	.sp-cta.is-warn:hover {
		filter: brightness(1.08);
	}

	.sp-cta.is-sm {
		--_h: 2.25rem;
		--_px: 1rem;
		--_fs: 1.125rem;
		border-width: 1px;
		box-shadow: none;
	}

	.sp-cta.is-md {
		--_h: 3rem;
		--_px: 1.5rem;
		--_fs: 1.25rem;
		border-width: 2px;
		box-shadow: none;
	}

	.sp-cta.is-lg {
		--_h: 4.25rem;
		--_px: 2.5rem;
		--_fs: 2rem;
	}

	/* A photographic hero: the still fills the section under two shades (a
	 * side shade for the copy, a bottom one into the page). Put
	 * data-sb-theme="open-water" on it: it is the dark sea in every theme.
	 * Children stack above the image. */
	.sp-hero {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		background: var(--sb-bg);
		color: var(--sb-text-1);
	}

	.sp-hero-media {
		position: absolute;
		inset: 0;
		z-index: -2;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}

	.sp-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(180deg, rgb(6 19 31 / 0.7) 0%, rgb(6 19 31 / 0) 18%, rgb(6 19 31 / 0) 62%, var(--sb-bg) 100%),
			linear-gradient(90deg, rgb(6 19 31 / 0.94) 0%, rgb(6 19 31 / 0.72) 38%, rgb(6 19 31 / 0.1) 70%, rgb(6 19 31 / 0) 100%);
	}

	/* Instrument strip: big numbers with a caption, like the HUD's cells. */
	.sp-stat-strip {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		gap: var(--sb-space-3, 0.75rem);
		margin: 0;
	}

	.sp-stat-cell {
		min-inline-size: 0;
		padding: var(--sb-space-3, 0.75rem) var(--sb-space-5, 1.25rem);
		border: 1px solid var(--sp-hud-border, var(--sb-border));
		border-radius: var(--sb-radius-md, 10px);
		background: var(--sp-hud-panel, var(--sb-surface-card));
		backdrop-filter: blur(8px);
	}

	.sp-stat-cell dt {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-00, 0.6875rem);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.sp-stat-cell dd {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 0.5rem;
		margin: 0;
	}

	.sp-stat-big {
		color: var(--sb-text-1);
		font-family: var(--sp-font-display);
		font-size: 2.75rem;
		font-weight: 700;
		line-height: 1.05;
		font-variant-numeric: tabular-nums;
	}

	.sp-stat-words {
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2, 0.875rem);
	}

	/* A mode tile: a coloured tab with the mode's name, a still and a line
	 * of text. data-mode picks the mode colour (--sp-mode-*); the colours
	 * mark modes only, never race chrome. */
	.sp-mode-tile {
		--_mode: var(--sp-mode-race);
		--_on-mode: #FFFFFF;
		position: relative;
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
		overflow: hidden;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg, 14px);
		background: var(--sb-surface-card);
		color: var(--sb-text-1);
		text-decoration: none;
		transition: translate var(--sb-duration-fast, 120ms), box-shadow var(--sb-duration-base, 180ms),
			border-color var(--sb-duration-fast, 120ms);
	}

	.sp-mode-tile[data-mode="start"] { --_mode: var(--sp-mode-start); --_on-mode: var(--sp-ink-12); }
	.sp-mode-tile[data-mode="beat"] { --_mode: var(--sp-mode-beat); --_on-mode: var(--sp-ink-12); }
	.sp-mode-tile[data-mode="online"] { --_mode: var(--sp-mode-online); --_on-mode: var(--sp-ink-12); }
	.sp-mode-tile[data-mode="free"] { --_mode: var(--sp-mode-free); --_on-mode: var(--sp-ink-12); }

	.sp-mode-tile:hover {
		border-color: var(--_mode);
		color: var(--sb-text-1);
		text-decoration: none;
		translate: 0 -3px;
		box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--_mode) 70%, transparent);
	}

	.sp-mode-tile:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--sb-focus-ring);
	}

	.sp-mode-tab {
		display: block;
		padding: 0.6rem 1rem 0.5rem;
		/* A hairline keeps the pale free-sail tab off a white card. */
		border-block-end: 1px solid color-mix(in srgb, var(--sb-text-1) 12%, transparent);
		background: var(--_mode);
		color: var(--_on-mode);
		font-family: var(--sp-font-display);
		font-size: 1.5rem;
		font-style: italic;
		font-weight: 800;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sp-mode-media {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		background: var(--sb-surface-inset);
	}

	.sp-mode-body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--sb-space-3, 0.75rem);
		padding: var(--sb-space-4, 1rem);
	}

	.sp-mode-text {
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2, 0.875rem);
		line-height: 1.5;
	}

	.sp-mode-meta {
		margin-block-start: auto;
		color: var(--sb-brand-light);
		font-size: var(--sb-font-size-1, 0.8125rem);
		font-weight: 700;
	}

	/* The embedded game player (views::game_player): a 16:9 poster with a
	 * play button, replaced by an iframe of the game when played. The stage
	 * carries data-sb-theme="open-water": it is the sea in every theme. */
	.sp-player {
		display: grid;
		gap: var(--sb-space-2, 0.5rem);
		min-inline-size: 0;
		margin: 0;
	}

	.sp-player[hidden] {
		display: none;
	}

	.sp-player-stage {
		container-type: inline-size;
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg, 14px);
		background: var(--sb-bg);
		box-shadow: var(--sb-shadow-2);
	}

	.sp-player-poster,
	.sp-player-frame {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		border: 0;
	}

	.sp-player-poster {
		object-fit: cover;
	}

	.sp-player-frame {
		background: var(--sb-bg);
	}

	.sp-player-start {
		position: absolute;
		inset: 0;
		display: grid;
		align-content: center;
		justify-items: center;
		gap: var(--sb-space-4, 1rem);
		padding: var(--sb-space-4, 1rem);
		background: linear-gradient(180deg, rgb(6 19 31 / 0.15) 0%, rgb(6 19 31 / 0.35) 45%, rgb(6 19 31 / 0.8) 100%);
		color: var(--sb-text-1);
		text-align: center;
		text-decoration: none;
	}

	.sp-player-start:hover {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.sp-player-button {
		display: grid;
		place-items: center;
		inline-size: clamp(3.5rem, 9cqi, 5rem);
		block-size: clamp(3.5rem, 9cqi, 5rem);
		padding-inline-start: 0.3rem;
		border-radius: 50%;
		background: var(--sb-brand);
		color: var(--sb-text-on-brand);
		box-shadow: 0 12px 36px -8px color-mix(in srgb, var(--sb-brand) 80%, transparent);
		transition: scale var(--sb-duration-fast, 120ms), background var(--sb-duration-fast, 120ms);
	}

	.sp-player-start:hover .sp-player-button {
		background: var(--sb-brand-hover);
		scale: 1.06;
	}

	.sp-player-start:focus-visible {
		outline: 2px solid transparent;
		box-shadow: inset var(--sb-focus-ring);
	}

	.sp-player-caption {
		display: grid;
		justify-items: center;
		gap: 0.3rem;
		max-inline-size: 36rem;
	}

	.sp-player-title {
		font-family: var(--sp-font-display);
		font-size: clamp(1.25rem, 3.4vw, 2rem);
		font-style: italic;
		font-weight: 800;
		line-height: 1;
		text-transform: uppercase;
		text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
	}

	.sp-player-detail {
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2, 0.875rem);
	}

	.sp-player:not([data-state="poster"]) .sp-player-start,
	.sp-player:not([data-state="poster"]) .sp-player-poster {
		display: none;
	}

	.sp-player-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--sb-space-2, 0.5rem) var(--sb-space-4, 1rem);
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1, 0.8125rem);
	}

	.sp-player-status {
		font-variant-numeric: tabular-nums;
	}

	.sp-player-full {
		margin-inline-start: auto;
		color: var(--sb-brand-light);
		font-weight: 700;
	}

	/* Touch screens keep :hover after a tap; no lift there (it also moved
	 * the button mid-measure in the mobile layout checks). */
	@media (hover: none) {
		.sp-btn:hover,
		.sp-btn:active,
		.sp-cta:hover,
		.sp-mode-tile:hover {
			translate: none;
		}
	}

	@media (forced-colors: active) {
		.sp-btn { border: 1px solid ButtonBorder; }
		.sp-btn:focus-visible,
		.sp-input:focus-visible,
		.sp-select:focus-visible,
		.sp-textarea:focus-visible { outline: 2px solid Highlight; }
	}
}
/*
 * SailPolars product pages. Served after Starbase's tokens and theme, the
 * SailPolars themes and the native controls (design/ in the repository),
 * which declare the layer order: reset, tokens, theme, base, layout,
 * components, utilities. Only semantic --sb-* tokens here, so the page works
 * in open-water (dark) and daylight (light).
 */

@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		background: var(--sb-bg);
		scrollbar-color: var(--sb-border-strong) var(--sb-bg);
		scroll-padding-top: 5rem;
	}

	.app-backdrop {
		/* Keep the sailing scene behind the whole page, including after scroll. */
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		overflow: hidden;
	}
	.app-backdrop img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: center 42%;
	}
	.app-backdrop::after {
		content: "";
		position: absolute;
		inset: 0;
		/* Tint for readable copy without fading the boats and water to solid colour. */
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--sb-bg) 60%, transparent),
			color-mix(in srgb, var(--sb-bg) 48%, transparent) 40%,
			color-mix(in srgb, var(--sb-bg) 60%, transparent));
	}


	body {
		position: relative;
		isolation: isolate;
		margin: 0;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		color: var(--sb-text-1);
		background:
			radial-gradient(64rem 28rem at 78% -8%, var(--sb-bg-glow), transparent 70%),
			radial-gradient(40rem 22rem at -10% 30%, color-mix(in srgb, var(--sb-accent) 7%, transparent), transparent 70%),
			var(--sb-bg);
		background-attachment: fixed;
		font: var(--sb-font-size-3) / var(--sb-line-height-normal) var(--sb-font-body);
		-webkit-font-smoothing: antialiased;
		overflow-wrap: anywhere;
	}

	::selection {
		background: var(--sb-selection);
	}

	a {
		color: var(--sb-brand-light);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	a:hover {
		color: var(--sb-text-1);
	}

	:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--sb-focus-ring);
		border-radius: var(--sb-radius-xs);
	}

	h1,
	h2,
	h3 {
		margin: 0 0 var(--sb-space-2);
		font-family: var(--sb-font-heading);
		font-weight: var(--sb-font-weight-bold);
		line-height: var(--sb-line-height-snug);
		letter-spacing: -0.015em;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--sb-font-size-7);
		line-height: var(--sb-line-height-tight);
		letter-spacing: -0.025em;
	}

	h2 {
		font-size: var(--sb-font-size-5);
	}

	h3 {
		font-size: var(--sb-font-size-4);
	}

	p {
		margin: 0 0 var(--sb-space-3);
	}

	table {
		border-collapse: collapse;
		inline-size: 100%;
	}

	blockquote {
		margin: var(--sb-space-3) 0;
		padding: var(--sb-space-3) var(--sb-space-4);
		border-inline-start: 3px solid var(--sb-border-strong);
		background: var(--sb-surface-inset);
		border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
		color: var(--sb-text-2);
	}
}

@layer components {
	.guide-intro { max-inline-size: 70ch; margin-block: var(--sb-space-6); }
	.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--sb-space-5); }
	.guide-card { display: flex; flex-direction: column; align-items: start; gap: var(--sb-space-3); }
	.guide-card h2 { font-size: var(--sb-font-size-5); margin: 0; }
	.guide-card p { margin: 0; }
	.guide-card .sp-btn { margin-block-start: auto; }
	.guide-article { max-inline-size: 52rem; margin-inline: auto; }
	.guide-article section { margin-block: var(--sb-space-8); scroll-margin-block-start: 6rem; }
	.guide-article p, .guide-article li { max-inline-size: 70ch; line-height: 1.7; }
	.guide-article li + li { margin-block-start: var(--sb-space-3); }
	.guide-article .sp-cta { max-inline-size: 100%; white-space: normal; text-align: center; }
	.guide-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--sb-radius-lg); margin-block: var(--sb-space-5); }
	.guide-references .sp-btn { margin-block: var(--sb-space-2); max-inline-size: 100%; white-space: normal; text-align: start; }
}

@layer layout {
	/* ── Site chrome ─────────────────────────────────────────────────── */

	.skip-link {
		position: absolute;
		inset-inline-start: var(--sb-space-4);
		inset-block-start: -4rem;
		z-index: var(--sb-z-toast);
		padding: var(--sb-space-2) var(--sb-space-4);
		border-radius: var(--sb-radius-sm);
		background: var(--sb-brand);
		color: var(--sb-text-on-brand);
		font-weight: 700;
	}

	.skip-link:focus {
		inset-block-start: var(--sb-space-3);
	}

	.site-top {
		position: sticky;
		top: 0;
		z-index: var(--sb-z-sticky);
		background: color-mix(in srgb, var(--sb-surface-raised) 86%, transparent);
		backdrop-filter: blur(12px) saturate(140%);
		border-bottom: 1px solid var(--sb-border);
	}

	.site-top-inner {
		max-width: var(--sb-content-max);
		margin: 0 auto;
		padding: var(--sb-space-3) var(--sb-space-5);
		display: flex;
		align-items: center;
		gap: var(--sb-space-5);
	}

	.brand {
		display: inline-flex;
		align-items: center;
		gap: var(--sb-space-2);
		color: var(--sb-text-1);
		font-size: 1.2rem;
		font-weight: var(--sb-font-weight-bold);
		letter-spacing: -0.01em;
		text-decoration: none;
		flex: none;
	}

	.brand:hover {
		color: var(--sb-text-1);
	}

	.brand img {
		display: block;
		border-radius: 8px;
	}

	/* The wordmark: the display face, upright (header, footer). */
	.brand span,
	.wordmark {
		font-family: var(--sp-font-display);
		font-size: 1.6rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		line-height: 1;
	}

	.primary-nav {
		display: flex;
		gap: var(--sb-space-1);
		min-width: 0;
	}

	.primary-nav a,
	.account-menu nav a,
	.drawer-nav a:not(.sp-btn) {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-block-size: 2.75rem;
		padding: 0 var(--sb-space-3);
		border-radius: var(--sb-radius-sm);
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.primary-nav a:hover,
	.account-menu nav a:hover,
	.drawer-nav a:not(.sp-btn):hover {
		background: var(--sb-surface-hover);
		color: var(--sb-text-1);
	}

	.primary-nav a[aria-current="page"],
	.account-menu nav a[aria-current="page"],
	.drawer-nav a[aria-current="page"] {
		color: var(--sb-text-1);
		background: var(--sb-brand-subtle);
	}

	.primary-nav a[aria-current="page"]::after {
		content: "";
		position: absolute;
		inset-inline: var(--sb-space-3);
		inset-block-end: -0.8rem;
		block-size: 2px;
		border-radius: 2px;
		background: var(--sb-brand-light);
	}

	.top-actions {
		margin-inline-start: auto;
		display: flex;
		align-items: center;
		gap: var(--sb-space-2);
	}

	.account-trigger {
		min-inline-size: 2.75rem;
		display: inline-flex;
		align-items: center;
		gap: var(--sb-space-2);
		block-size: 2.75rem;
		padding: 0 var(--sb-space-3) 0 var(--sb-space-1);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-pill);
		background: var(--sb-surface-card);
		color: var(--sb-text-1);
		font: inherit;
		font-size: var(--sb-font-size-2);
		font-weight: 700;
		cursor: pointer;
	}

	.account-trigger:hover {
		border-color: var(--sb-border-strong);
		background: var(--sb-surface-hover);
	}

	.avatar {
		display: inline-grid;
		place-items: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: 50%;
		background: var(--sb-brand);
		color: var(--sb-text-on-brand);
		font-size: 0.72rem;
		letter-spacing: 0.02em;
	}

	.account-name {
		max-inline-size: 10rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.account-menu {
		display: grid;
		gap: var(--sb-space-2);
		min-inline-size: 14rem;
	}

	.account-who {
		display: grid;
		margin: 0;
		padding: 0 var(--sb-space-3) var(--sb-space-2);
		border-bottom: 1px solid var(--sb-border);
	}

	.account-who span {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
	}

	.account-menu nav {
		display: grid;
	}

	.sign-out {
		justify-content: flex-start;
	}

	.drawer-nav {
		display: grid;
		gap: var(--sb-space-1);
	}

	.drawer-nav .sp-btn,
	.drawer-nav .sp-cta {
		margin-block-end: var(--sb-space-3);
	}

	.drawer-nav .sp-eyebrow {
		margin: var(--sb-space-4) var(--sb-space-3) var(--sb-space-1);
	}

	.page {
		flex: 1;
		inline-size: 100%;
		max-width: var(--sb-content-max);
		margin: 0 auto;
		padding: var(--sb-space-12) var(--sb-space-5) var(--sb-space-16);
	}

	.site-foot {
		border-top: 1px solid var(--sb-border);
		background: var(--sb-surface-raised);
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
	}

	.site-foot-inner {
		max-width: var(--sb-content-max);
		margin: 0 auto;
		padding: var(--sb-space-6) var(--sb-space-5);
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-4) var(--sb-space-8);
		justify-content: space-between;
		align-items: center;
	}

	.site-foot p {
		flex: 1 1 20rem;
		margin: 0;
		max-inline-size: 44rem;
	}

	.site-foot .wordmark {
		color: var(--sb-text-1);
		font-size: 1.4rem;
	}

	.site-foot strong {
		color: var(--sb-text-1);
	}

	.site-foot nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-4);
	}

	.site-foot a {
		color: var(--sb-text-2);
		text-decoration: none;
	}

	.site-foot a:hover {
		color: var(--sb-text-1);
		text-decoration: underline;
	}

	/* ── Page structure ──────────────────────────────────────────────── */

	.legal-page {
		max-inline-size: 72ch;
		margin-inline: auto;
		line-height: 1.7;
		overflow-wrap: anywhere;
	}

	.legal-page section {
		margin-block-start: var(--sb-space-8);
		scroll-margin-block-start: 6rem;
	}

	.legal-page h2 {
		font-family: var(--sp-font-display);
		font-size: var(--sb-font-size-5);
		line-height: 1.2;
		margin-block-end: var(--sb-space-4);
	}

	.legal-page p,
	.legal-page ul {
		margin-block-end: var(--sb-space-4);
	}

	.legal-page ul {
		padding-inline-start: 1.5em;
	}

	.legal-page li + li {
		margin-block-start: var(--sb-space-3);
	}

	.legal-toc {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--sb-space-2) var(--sb-space-4);
	}

	.legal-toc a {
		display: flex;
		align-items: center;
		min-block-size: 44px;
	}

	.page-head {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-4) var(--sb-space-8);
		align-items: flex-end;
		justify-content: space-between;
		margin-block-end: var(--sb-space-8);
		padding-block-end: var(--sb-space-6);
		border-block-end: 1px solid var(--sb-border);
	}

	.page-head-text {
		max-inline-size: 42rem;
		min-inline-size: 0;
	}

	.page-head h1 {
		font-family: var(--sp-font-display);
		font-size: clamp(2.5rem, 4.5vw, 3.75rem);
		font-weight: 700;
		line-height: 1;
		margin-block-end: var(--sb-space-2);
	}

	.page-head .sp-eyebrow {
		margin-block-end: var(--sb-space-2);
	}

	.page-head-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
	}

	.page-head-actions:empty {
		display: none;
	}

	.page-head-actions form {
		margin: 0;
	}

	.lead {
		color: var(--sb-text-2);
		font-size: clamp(1rem, 1.4vw, 1.125rem);
		line-height: 1.65;
		margin: 0;
	}

	.crumbs {
		margin-block-end: var(--sb-space-3);
		font-size: var(--sb-font-size-1);
		color: var(--sb-text-muted);
	}

	.crumbs a {
		color: var(--sb-text-2);
		font-weight: 700;
		text-decoration: none;
	}

	.section {
		margin-block: var(--sb-space-12);
	}

	.section-head {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2) var(--sb-space-6);
		align-items: baseline;
		justify-content: space-between;
		margin-block-end: var(--sb-space-5);
	}

	.section-head h2,
	.section-head p {
		margin: 0;
	}

	.stack {
		display: grid;
		gap: var(--sb-space-5);
		align-content: start;
		/* One column that may shrink: a wide table scrolls in its panel. */
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-panel {
		min-inline-size: 0;
		padding: var(--sb-space-5) var(--sb-space-6);
	}

	.sp-panel > h2:first-child,
	.sp-panel > header:first-child h2 {
		font-family: var(--sp-font-display);
		font-size: 1.5rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		margin-block-end: var(--sb-space-4);
	}

	.two-col {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--sb-space-5);
		align-items: start;
	}

	sb-alert {
		display: block;
		margin-block-end: var(--sb-space-5);
	}

	sb-meter {
		display: block;
		margin-block: var(--sb-space-3) var(--sb-space-2);
	}
}

@layer components {
	.muted {
		color: var(--sb-text-muted);
	}

	.small {
		font-size: var(--sb-font-size-1);
	}

	.note {
		color: var(--sb-text-2);
	}

	.sr-only {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.num {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	/* A card whose heading link covers the whole card. */
	.stretched::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.go {
		color: var(--sb-brand-light);
		font-weight: 700;
		transition: translate var(--sb-duration-fast) var(--sb-ease-standard);
	}

	/* ── Your sailing: activity cards (/me) ──────────────────────────── */

	.activity-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
		gap: var(--sb-space-4);
	}

	.activity-card h3 {
		margin-block: var(--sb-space-1) var(--sb-space-1);
	}

	.activity-card h3 a {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.activity-card h3 a:hover {
		text-decoration: underline;
	}

	/* ── Landing (/) ─────────────────────────────────────────────────── */
	/* Full-bleed sections; the hero, the cockpit, the venue tiles and the
	 * coaches band carry data-sb-theme="open-water" (the dark sea in both
	 * themes), everything else follows the theme. */

	.page.is-landing {
		max-width: none;
		padding: 0;
	}

	.landing {
		--_gutter: clamp(1rem, 5vw, 5rem);
		--_section: clamp(3.5rem, 8vw, 6rem);
		overflow-x: clip;
	}

	.landing-wrap {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: calc(80rem + 2 * var(--_gutter));
		margin-inline: auto;
		padding-inline: var(--_gutter);
	}

	/* The header floats over the hero; once the hero has scrolled away it
	 * comes back as a solid bar (app.js sets .is-scrolled). */
	body.is-landing .site-top {
		position: absolute;
		inset-inline: 0;
		inset-block-start: var(--privacy-height, 0px);
		background: transparent;
		border-bottom-color: transparent;
		backdrop-filter: none;
	}
	/* Reserve the notice and navigation before JavaScript measures height. */
	:root:not(.privacy-decided) body.is-landing:not(.is-scrolled) .site-top {
		position: relative;
		inset-block-start: 0;
		background: var(--sb-bg);
	}

	body.is-landing.is-scrolled .site-top {
		position: fixed;
		inset-block-start: 0;
		background: color-mix(in srgb, var(--sb-bg) 90%, transparent);
		backdrop-filter: blur(12px) saturate(140%);
		border-bottom-color: var(--sb-border);
		animation: landing-drop var(--sb-duration-base) var(--sb-ease-standard, ease-out);
	}

	@keyframes landing-drop {
		from { translate: 0 -100%; }
	}

	.landing .accent {
		color: var(--sb-accent);
	}

	.landing-hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: clamp(2rem, 5vw, 3.5rem);
		min-block-size: min(56.25rem, 100svh);
		padding-block: clamp(6.5rem, 12vw, 9rem) clamp(1.5rem, 3vw, 2.5rem);
	}

	.landing-hero-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.75rem);
		gap: var(--sb-space-10);
		align-items: end;
	}

	.landing-hero-copy {
		display: grid;
		gap: clamp(1.25rem, 2.4vw, 1.75rem);
		justify-items: start;
		min-inline-size: 0;
	}

	.landing-kicker {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		margin: 0;
		color: var(--sb-accent);
		font-size: var(--sb-font-size-2);
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.landing-kicker-dot {
		inline-size: 0.625rem;
		block-size: 0.625rem;
		flex: none;
		border-radius: 50%;
		background: var(--sb-ok);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-ok) 25%, transparent);
	}

	.landing-title {
		font-size: clamp(3.4rem, 9.2vw, 8.25rem);
		line-height: 0.88;
		letter-spacing: -0.01em;
	}

	.landing-title span {
		display: block;
	}

	.landing-title .accent {
		padding-inline-start: 0.42em;
	}

	.landing-lead {
		max-inline-size: 35rem;
		margin: 0;
		color: var(--sb-text-1);
		font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
		line-height: 1.55;
		opacity: 0.92;
	}

	.landing-ctas {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-4);
	}

	.landing-note {
		margin: 0;
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
	}

	/* Rooms waiting now */
	.rooms-card {
		padding: 1.375rem;
		border: 1px solid var(--sp-hud-border);
		border-radius: 20px;
		background: color-mix(in srgb, var(--sb-bg) 78%, transparent);
		backdrop-filter: blur(10px);
	}

	.rooms-card-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sb-space-3);
	}

	.rooms-card-label {
		margin: 0;
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-1);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.rooms-card-live {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--sb-ok);
		font-size: var(--sb-font-size-1);
		font-weight: 700;
	}

	.rooms-card-live .dot {
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: 50%;
		background: currentColor;
		animation: rooms-live 2.4s ease-in-out infinite;
	}

	@keyframes rooms-live {
		50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sb-ok) 0%, transparent); opacity: 0.55; }
		0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-ok) 45%, transparent); }
	}

	.rooms-card-list {
		margin: var(--sb-space-3) 0 0;
		padding: 0;
		list-style: none;
	}

	.rooms-card-row {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding-block: 0.75rem;
		border-block-start: 1px solid color-mix(in srgb, var(--sb-text-1) 12%, transparent);
	}

	.rooms-card-text {
		flex: 1;
		min-inline-size: 0;
	}

	.rooms-card-title {
		margin: 0;
		overflow: hidden;
		color: var(--sb-text-1);
		font-size: 1.0625rem;
		font-weight: 700;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rooms-card-facts {
		margin: 0.1rem 0 0;
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
		line-height: 1.4;
	}

	.rooms-card .rooms-card-join {
		flex: none;
		border-radius: var(--sb-radius-pill);
	}

	.rooms-card-more {
		display: inline-block;
		margin-block-start: var(--sb-space-2);
		color: var(--sb-brand-light);
		font-size: var(--sb-font-size-1);
		font-weight: 700;
		text-decoration: none;
	}

	.rooms-card-more:hover {
		text-decoration: underline;
	}

	.rooms-card-empty {
		display: grid;
		justify-items: start;
		gap: var(--sb-space-3);
		margin-block-start: var(--sb-space-3);
		padding-block-start: var(--sb-space-4);
		border-block-start: 1px solid color-mix(in srgb, var(--sb-text-1) 12%, transparent);
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
	}

	.rooms-card-empty svg {
		color: var(--sb-accent);
	}

	.rooms-card-empty p {
		margin: 0;
	}

	.rooms-card-empty strong {
		display: block;
		margin-block-end: var(--sb-space-1);
		color: var(--sb-text-1);
		font-size: var(--sb-font-size-3);
	}

	/* Sections */
	.landing-section {
		padding-block-start: var(--_section);
	}

	.landing-head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--sb-space-4) var(--sb-space-10);
		margin-block-end: var(--sb-space-8);
	}

	.landing-h2 {
		max-inline-size: 15em;
		font-size: clamp(2.5rem, 5.5vw, 4.5rem);
		line-height: 0.95;
	}

	.landing-head .landing-h2 .accent {
		display: block;
	}

	.landing-eyebrow {
		margin: 0 0 var(--sb-space-4);
		color: var(--sb-accent);
		font-size: var(--sb-font-size-2);
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.landing-eyebrow.is-warm {
		color: var(--sb-warn);
	}

	.landing-aside {
		max-inline-size: 26rem;
		margin: 0;
		color: var(--sb-text-2);
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	.landing-foot {
		margin: var(--sb-space-5) 0 0;
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-2);
	}

	.mode-grid {
		--_mode-columns: 1;
		--_mode-image-scale: calc(2 / 3);
		display: grid;
		grid-template-columns: repeat(var(--_mode-columns), minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: var(--sb-space-5);
		container-type: inline-size;
	}

	/* Every image uses the regular column width, including the full-row tile. */
	.mode-grid .sp-mode-media {
		block-size: calc(((100cqi - (var(--_mode-columns) - 1) * var(--sb-space-5)) / var(--_mode-columns) - 2px) * var(--_mode-image-scale));
	}

	.mode-featured {
		grid-column: 1 / -1;
	}

	/* In the cockpit: a dark band in the daylight theme too. */
	.landing-cockpit {
		margin-block-start: var(--_section);
		padding-block-end: var(--_section);
		background: var(--sb-bg);
		color: var(--sb-text-1);
	}

	.cockpit-shot {
		position: relative;
		margin: 0;
		overflow: hidden;
		border-radius: 20px;
		box-shadow: 0 40px 120px rgb(0 0 0 / 0.6), 0 0 0 1px var(--sp-hud-border);
		container-type: inline-size;
	}

	.cockpit-shot img {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	.cockpit-callout {
		position: absolute;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.55em 1em;
		border-radius: var(--sb-radius-pill);
		background: var(--sb-accent);
		color: var(--sb-bg);
		font-size: clamp(0.625rem, 1.1cqi, 0.875rem);
		font-weight: 700;
		white-space: nowrap;
		box-shadow: 0 6px 20px rgb(0 0 0 / 0.4);
	}

	.cockpit-callout svg {
		inline-size: 1em;
		block-size: auto;
	}

	/* Positions on the 16:9 screenshot, from the approved mockup. */
	.cockpit-callout.at-compass { inset-inline-start: 64.5%; inset-block-start: 4.2%; }
	.cockpit-callout.at-standings { inset-inline-start: 1.1%; inset-block-start: 44%; }
	.cockpit-callout.at-conditions { inset-inline-end: 20.5%; inset-block-start: 58%; }
	.cockpit-callout.at-actions { inset-inline-end: 25.8%; inset-block-start: 92%; }

	.instrument-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--sb-space-6) var(--sb-space-8);
		margin: var(--sb-space-10) 0 0;
		padding: 0;
		list-style: none;
	}

	.instrument-list h3 {
		margin: 0 0 var(--sb-space-2);
		font-size: 1.125rem;
	}

	.instrument-list p {
		margin: 0;
		color: var(--sb-text-2);
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	/* Umpire and 2D view */
	.feature-pair {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
		gap: var(--sb-space-6);
	}

	.feature-card {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--sb-border);
		border-radius: 24px;
		background: var(--sb-surface-card);
	}

	.feature-media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--sb-surface-inset);
	}

	.feature-media > img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}

	.feature-body {
		display: grid;
		gap: 0.875rem;
		padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
	}

	.feature-body .landing-eyebrow {
		margin: 0;
	}

	.feature-title {
		font-size: clamp(2rem, 3.4vw, 3rem);
		line-height: 1;
	}

	.feature-body p:last-child {
		margin: 0;
		color: var(--sb-text-2);
		line-height: 1.55;
	}

	/* The umpire's card, drawn like the game's (rules_card.odin). */
	.rule-call {
		position: absolute;
		inset-inline-end: 1rem;
		inset-block-end: 1rem;
		inline-size: min(17.5rem, calc(100% - 2rem));
		margin: 0;
		padding: 0.75rem 0.875rem 0.875rem;
		border: 1px solid var(--sp-hud-border);
		border-radius: 12px;
		background: var(--sp-hud-panel);
		color: var(--sb-text-1);
		backdrop-filter: blur(6px);
		box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
	}

	.rule-call-head {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.rule-call-badge {
		padding: 0.15rem 0.5rem 0.1rem;
		border-radius: 6px;
		background: var(--sb-warn);
		color: var(--sb-bg);
		font-family: var(--sp-font-display);
		font-size: 0.9375rem;
		font-style: italic;
		font-weight: 800;
		text-transform: uppercase;
	}

	.rule-call-title {
		font-family: var(--sp-font-display);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.rule-call-diagram {
		display: block;
		inline-size: 100%;
		block-size: auto;
		margin-block: 0.375rem;
	}

	.rule-call-diagram .wind {
		fill: none;
		stroke: var(--sb-text-muted);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.rule-call-diagram .track {
		fill: none;
		stroke: color-mix(in srgb, var(--sb-text-1) 35%, transparent);
		stroke-dasharray: 3 4;
	}

	.rule-call-diagram .margin {
		fill: color-mix(in srgb, var(--sb-accent) 12%, transparent);
		stroke: var(--sb-accent);
		stroke-dasharray: 4 3;
	}

	.rule-call-diagram .hull.row { fill: var(--sb-accent); }
	.rule-call-diagram .hull.give { fill: var(--sb-warn); }

	.rule-call-diagram .label {
		font: 700 9px var(--sb-font-ui);
		letter-spacing: 0.08em;
	}

	.rule-call-diagram .label.row { fill: var(--sb-accent); }
	.rule-call-diagram .label.give { fill: var(--sb-warn); }

	.rule-call-why,
	.rule-call-do {
		margin: 0;
		font-size: var(--sb-font-size-1);
		line-height: 1.4;
	}

	.rule-call-why {
		font-weight: 700;
	}

	.rule-call-do {
		margin-block-start: 0.25rem;
		color: var(--sb-text-2);
	}

	/* Venues */
	.venue-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sb-space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.venue-tile {
		position: relative;
		display: grid;
		align-content: end;
		gap: 0.2rem;
		aspect-ratio: 16 / 9;
		padding: 0.875rem 1rem;
		overflow: hidden;
		border-radius: 16px;
		background: var(--sb-bg);
		color: var(--sb-text-1);
		isolation: isolate;
	}

	.venue-tile img {
		position: absolute;
		inset: 0;
		z-index: -2;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.venue-tile::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgb(6 19 31 / 0) 40%, rgb(6 19 31 / 0.9) 100%);
	}

	.venue-name {
		font-size: clamp(1.25rem, 2.2vw, 1.875rem);
		line-height: 1;
	}

	.venue-caption {
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-1);
	}

	/* Boats */
	.class-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sb-space-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.class-card {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--sb-border);
		border-radius: 18px;
		background: var(--sb-surface-card);
	}

	.class-card img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.class-body {
		display: grid;
		flex: 1;
		grid-template-rows: auto 1fr auto;
		gap: 0.625rem;
		padding: 1.25rem;
	}

	.class-name {
		font-size: 2.125rem;
		line-height: 1;
	}

	.class-body p {
		margin: 0;
		color: var(--sb-text-2);
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.class-facts {
		display: flex;
		gap: 1.25rem;
		margin: 0;
		padding-block-start: 0.75rem;
		border-block-start: 1px solid var(--sb-border-subtle);
		font-size: var(--sb-font-size-1);
	}

	.class-facts div {
		display: flex;
		gap: 0.35rem;
	}

	.class-facts dt {
		color: var(--sb-text-muted);
	}

	.class-facts dd {
		margin: 0;
		color: var(--sb-text-1);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* Public FAQ: native disclosures work with touch, keyboard and no script. */
	#faq, .landing-faq-item { scroll-margin-block-start: 6rem; }
	.landing-faq { max-inline-size: 54rem; margin-inline: auto; }
	.landing-faq-item { border-block-end: 1px solid var(--sb-border); }
	.landing-faq-item:first-child { border-block-start: 1px solid var(--sb-border); }
	.landing-faq-item summary { min-block-size: 44px; padding: 1rem 0; cursor: pointer; font-size: var(--sb-font-size-3); font-weight: 700; line-height: 1.4; }
	.landing-faq-item summary::marker { color: var(--sb-accent); }
	.landing-faq-item summary:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 4px; }
	.landing-faq-answer { padding-block-end: 1.25rem; color: var(--sb-text-2); line-height: 1.6; }
	.landing-faq-answer p { margin-block: 0 1rem; }
	.landing-faq-answer p:last-child { margin-block-end: 0; }
	.landing-faq-answer ol { padding-inline-start: 1.5rem; }
	.landing-faq-answer li + li { margin-block-start: 0.75rem; }
	.class-facts { flex-wrap: wrap; }

	/* Coaches band */
	.coach-hero {
		position: relative;
		display: flex;
		justify-content: flex-end;
		min-block-size: 27.5rem;
		overflow: hidden;
		border: 1px solid var(--sp-hud-border);
		border-radius: 28px;
		background: var(--sb-bg);
		color: var(--sb-text-1);
		isolation: isolate;
	}

	.coach-hero > img {
		position: absolute;
		inset: 0;
		z-index: -2;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 20% 40%;
	}

	.coach-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(270deg, rgb(6 19 31 / 0.96) 0%, rgb(6 19 31 / 0.85) 45%, rgb(6 19 31 / 0.1) 80%);
	}

	.coach-hero-copy {
		display: grid;
		align-content: center;
		gap: 1.25rem;
		max-inline-size: 37.5rem;
		padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4.5vw, 4rem);
	}

	.coach-hero-copy .landing-eyebrow {
		margin: 0;
	}

	.coach-hero-copy .landing-h2 {
		font-size: clamp(2.25rem, 4.5vw, 4rem);
	}

	.coach-hero-copy p {
		margin: 0;
		color: var(--sb-text-1);
		font-size: 1.0625rem;
		line-height: 1.55;
		opacity: 0.9;
	}

	/* Closing call */
	.landing-final {
		display: grid;
		justify-items: center;
		gap: var(--sb-space-8);
		padding: clamp(5rem, 10vw, 7.5rem) var(--_gutter) clamp(4rem, 8vw, 6.25rem);
		text-align: center;
	}

	.landing-final-title {
		font-size: clamp(3rem, 8.3vw, 7.5rem);
		line-height: 0.9;
	}

	.landing-final-title .accent {
		font-variant-numeric: tabular-nums;
	}

	@media (min-width: 36rem) {
		.mode-grid {
			--_mode-columns: 2;
		}

		.class-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 60rem) {
		.venue-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.class-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	@media (min-width: 76rem) {
		.mode-grid {
			--_mode-columns: 4;
		}
	}

	@media (max-width: 64rem) {
		.landing-hero-grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.rooms-card {
			max-inline-size: 30rem;
		}
	}

	@media (max-width: 40rem) {
		.landing-title {
			font-size: clamp(2.75rem, 14vw, 3.6rem);
		}

		.landing-title .accent {
			padding-inline-start: 0;
		}

		.landing-hero .sp-hero-media {
			object-position: 62% 30%;
		}

		.mode-grid {
			--_mode-image-scale: calc(7 / 16);
		}

		.venue-grid {
			grid-template-columns: 1fr;
		}

		.venue-tile {
			padding: 0.75rem;
		}

		.venue-name {
			font-size: 1.25rem;
		}

		.venue-caption {
			font-size: 0.75rem;
			line-height: 1.3;
		}

		.cockpit-callout {
			display: none;
		}

		.feature-media.is-umpire {
			display: grid;
			aspect-ratio: auto;
			overflow: visible;
			background: none;
		}

		.feature-media.is-umpire > img {
			aspect-ratio: 16 / 9;
		}

		.rule-call {
			position: relative;
			inset: auto;
			inline-size: auto;
			margin: -2.5rem 1rem 0;
			background: var(--sb-bg);
		}

		.coach-hero {
			min-block-size: 0;
			padding-block-start: 10rem;
		}

		.coach-hero::before {
			background: linear-gradient(180deg, rgb(6 19 31 / 0.1) 0%, rgb(6 19 31 / 0.85) 38%, rgb(6 19 31 / 0.96) 100%);
		}

		.landing-ctas .sp-cta {
			--_h: 3.25rem;
			--_px: 1.5rem;
			--_fs: 1.375rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.rooms-card-live .dot,
		body.is-landing.is-scrolled .site-top {
			animation: none;
		}
	}

	/* ── Lists and cards ─────────────────────────────────────────────── */

	.card-list {
		display: grid;
		gap: var(--sb-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.card-list + .sp-panel {
		margin-block-start: var(--sb-space-5);
	}

	.list-card {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-3) var(--sb-space-5);
		align-items: center;
		justify-content: space-between;
		padding: var(--sb-space-4) var(--sb-space-5);
		transition: border-color var(--sb-duration-fast);
	}

	.list-card:has(.stretched):hover {
		border-color: var(--sb-brand-light);
	}

	.list-card:has(.stretched):hover .go {
		translate: 4px 0;
	}

	.list-card-main {
		min-inline-size: 0;
		flex: 1 1 20rem;
	}

	.list-card h3 {
		margin: 0;
		font-size: var(--sb-font-size-4);
	}

	.list-card h3 a {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.list-card p {
		margin: var(--sb-space-1) 0 0;
	}

	.list-card-kicker {
		display: flex;
		align-items: center;
		gap: var(--sb-space-2);
		margin: 0 0 var(--sb-space-1) !important;
		font-size: var(--sb-font-size-1);
	}

	.row-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
		align-items: center;
	}

	.list-card .row-actions {
		position: relative;
		z-index: 1;
	}

	.list-card .row-actions form {
		margin: 0;
	}

	.sp-chip.live::before {
		content: "";
		inline-size: 0.5em;
		block-size: 0.5em;
		border-radius: 50%;
		background: currentColor;
		animation: sp-pulse 1.6s ease-in-out infinite;
	}

	@keyframes sp-pulse {
		50% { opacity: 0.35; }
	}

	@media (prefers-reduced-motion: reduce) {
		.sp-chip.live::before { animation: none; }
	}

	.empty {
		display: grid;
		justify-items: center;
		gap: var(--sb-space-3);
		padding: var(--sb-space-10) var(--sb-space-5);
		border: 1px dashed var(--sb-border-strong);
		border-radius: var(--sb-radius-lg);
		color: var(--sb-text-muted);
		text-align: center;
	}

	.empty svg {
		color: var(--sb-border-strong);
	}

	.empty p {
		margin: 0;
		max-inline-size: 30rem;
	}

	/* A results table has a column per race: it scrolls inside its
	   panel, the page does not. */
	.table-scroll {
		position: relative;
		overflow-x: auto;
		max-width: 100%;
		min-inline-size: 0;
		overscroll-behavior-inline: contain;
		scrollbar-color: var(--sb-border-strong) var(--sb-surface-inset);
	}

	.data-table th,
	.data-table td {
		padding: var(--sb-space-3);
		border-bottom: 1px solid var(--sb-border-subtle);
		text-align: start;
		vertical-align: middle;
		/* Names can wrap at spaces; numbers and handles must stay legible. */
		overflow-wrap: normal;
	}

	.data-table thead th {
		white-space: nowrap;
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-00);
		font-weight: 700;
		letter-spacing: var(--sb-letter-spacing-caps);
		text-transform: uppercase;
		border-bottom-color: var(--sb-border);
	}

	.data-table td:has(.person),
	.data-table td:has(> strong) {
		min-inline-size: 10rem;
	}

	.data-table .person-name strong,
	.data-table .person-name a {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.data-table th.num,
	.data-table td.num {
		text-align: end;
		white-space: nowrap;
	}

	.data-table tbody tr:hover {
		background: var(--sb-surface-hover);
	}

	.data-table .rank {
		inline-size: 2.5rem;
		color: var(--sb-text-muted);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.data-table tbody tr:nth-child(-n + 3) .rank {
		color: var(--sb-brand-light);
	}

	.board-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		gap: var(--sb-space-5);
	}

	.board-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sb-space-3);
		margin-block-end: var(--sb-space-3);
	}

	.board-head h2 {
		margin: 0;
	}

	/* ── Forms ───────────────────────────────────────────────────────── */

	.sp-form {
		display: grid;
		gap: var(--sb-space-4);
		margin: 0;
	}

	.form-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		align-items: start;
	}

	.form-grid > .wide,
	.form-grid > p,
	.form-grid .form-actions {
		grid-column: 1 / -1;
	}

	.form-inline {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-3);
		align-items: end;
		margin: 0;
	}

	.form-inline .sp-field {
		flex: 1 1 14rem;
	}

	.form-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
	}

	[role="tab"][aria-selected="true"] {
		background: var(--sb-brand);
		border-color: var(--sb-brand);
		color: var(--sb-text-on-brand);
	}

	.composer > form + form {
		margin-block-start: var(--sb-space-4);
	}

	sb-modal::part(footer) {
		flex-wrap: wrap;
	}

	form[aria-busy]:not([aria-busy="false"]) button[type="submit"] {
		cursor: progress;
		opacity: 0.7;
	}

	.toggle-row {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
	}

	sb-toggle {
		--sb-toggle-on: var(--sb-brand);
	}

	/* ── Training ────────────────────────────────────────────────────── */

	.lesson-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
		gap: var(--sb-space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lesson {
		position: relative;
		display: grid;
		align-content: start;
		grid-template-rows: auto auto 1fr auto auto;
		gap: var(--sb-space-2);
		padding: var(--sb-space-4);
		transition: border-color var(--sb-duration-fast), box-shadow var(--sb-duration-fast);
	}

	.lesson:hover,
	.lesson:focus-within {
		border-color: var(--sb-brand-light);
		box-shadow: var(--sb-shadow-3);
	}

	.lesson-media {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		border-radius: var(--sb-radius-sm);
		margin-block-end: var(--sb-space-2);
	}

	.lesson-top {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-1);
		margin-block-end: var(--sb-space-2);
	}

	.lesson h3 {
		margin: 0;
		font-size: 1.125rem;
		min-block-size: 2.75rem;
	}

	.lesson h3 a {
		color: var(--sb-text-1);
		text-decoration: none;
	}

	.lesson-score {
		margin: 0;
		font-size: var(--sb-font-size-1);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.lesson-free {
		border-style: dashed;
	}

	/* ── Cups ────────────────────────────────────────────────────────── */

	.cup-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
		gap: var(--sb-space-5);
		align-items: start;
	}

	.cup-content {
		display: grid;
		gap: var(--sb-space-5);
	}

	.status-head,
	.heat-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--sb-space-2);
	}

	.status-head h2 {
		margin: 0;
	}

	.capacity {
		color: var(--sb-text-2);
		font-weight: 700;
	}

	.entry-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-3);
		align-items: center;
		margin-block-start: var(--sb-space-3);
	}

	.entry-actions p {
		margin: 0;
	}

	.entry-state {
		font-weight: 700;
		color: var(--sb-ok);
	}

	.notices ul {
		display: grid;
		gap: var(--sb-space-2);
		margin: 0 0 var(--sb-space-2);
		padding: 0;
		list-style: none;
	}

	.notices sb-alert {
		margin: 0;
	}

	.heat-list {
		display: grid;
		gap: var(--sb-space-4);
	}

	.heat {
		padding: var(--sb-space-4);
		border: 1px solid var(--sb-border-subtle);
		border-radius: var(--sb-radius);
		background: var(--sb-surface-inset);
	}

	.heat-head h3 {
		margin: 0;
		font-size: var(--sb-font-size-3);
	}

	.heat-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
		margin-block: var(--sb-space-3);
	}

	.heat-actions:empty {
		display: none;
	}

	.results {
		display: grid;
		gap: var(--sb-space-1);
		margin: var(--sb-space-3) 0 0;
		padding: 0;
		list-style: none;
		counter-reset: place;
	}

	.result {
		display: grid;
		grid-template-columns: 5rem minmax(0, 1fr) auto auto;
		gap: var(--sb-space-3);
		align-items: center;
		padding: var(--sb-space-2) var(--sb-space-3);
		border-radius: var(--sb-radius-sm);
		background: var(--sb-surface-card);
	}

	.result .sep {
		display: none;
	}

	.result .seat {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
		font-weight: 700;
	}

	.result .who {
		font-weight: 700;
	}

	.result .points {
		font-variant-numeric: tabular-nums;
		font-weight: 700;
	}

	/* Follow and finish controls drive the race's embedded player. */
	.result:has(.player-controls) {
		grid-template-columns: 5rem minmax(0, 1fr) auto auto auto;
	}

	.result .player-controls {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-1);
	}

	.sp-player-control[aria-pressed="true"] {
		background: var(--sb-brand-subtle);
		color: var(--sb-brand-light);
	}

	.heat .sp-player,
	.has-player .sp-player {
		flex-basis: 100%;
		margin-block: var(--sb-space-3) 0;
	}

	.replay-layout {
		display: grid;
		gap: var(--sb-space-5);
	}

	.replay-layout .player-jump {
		margin: calc(-1 * var(--sb-space-2)) 0 0;
	}

	.replay-archived {
		display: grid;
		justify-items: start;
		gap: var(--sb-space-2);
	}

	.race-points {
		color: var(--sb-text-2);
		font-variant-numeric: tabular-nums;
	}

	.rules p {
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
	}

	.facts {
		display: grid;
		gap: var(--sb-space-2);
		margin: 0 0 var(--sb-space-4);
	}

	.facts div {
		display: flex;
		justify-content: space-between;
		gap: var(--sb-space-3);
		padding-block-end: var(--sb-space-2);
		border-bottom: 1px solid var(--sb-border-subtle);
	}

	.facts dt {
		color: var(--sb-text-muted);
	}

	.facts dd {
		margin: 0;
		font-weight: 700;
		text-align: end;
	}

	/* ── Profile ─────────────────────────────────────────────────────── */

	.profile-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--sb-space-5);
		align-items: start;
	}

	.achievements {
		display: grid;
		gap: var(--sb-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.achievement {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		padding: var(--sb-space-2) var(--sb-space-3);
		border-radius: var(--sb-radius-sm);
		background: var(--sb-surface-inset);
		font-weight: 700;
	}

	.danger-zone {
		border-color: color-mix(in srgb, var(--sb-danger) 35%, var(--sb-border));
	}

	.danger-zone h2 {
		color: var(--sb-danger);
	}

	.signin-card {
		max-inline-size: 36rem;
	}

	/* ── People, clubs and messages ──────────────────────────────────── */

	.person {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		min-inline-size: 0;
	}

	.person .avatar {
		flex: none;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		font-size: 0.8rem;
	}

	.person-name {
		display: grid;
		min-inline-size: 0;
	}

	.person-name strong,
	.person-name a {
		color: var(--sb-text-1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.person-name span {
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: var(--sb-space-2);
		margin-block: var(--sb-space-8) var(--sb-space-3);
		font-size: var(--sb-font-size-4);
	}

	.section-title .count {
		color: var(--sb-text-muted);
		font-weight: 400;
	}

	.thread {
		display: grid;
		gap: var(--sb-space-3);
		margin: 0 0 var(--sb-space-5);
		padding: 0;
		list-style: none;
	}

	.message {
		display: grid;
		gap: var(--sb-space-1);
		inline-size: fit-content;
		min-inline-size: min(18rem, 100%);
		max-inline-size: min(42rem, 100%);
		padding: var(--sb-space-3) var(--sb-space-4);
		border: 1px solid var(--sb-border-subtle);
		border-radius: var(--sb-radius-lg) var(--sb-radius-lg) var(--sb-radius-lg) var(--sb-radius-xs);
		background: var(--sb-surface-card);
	}

	.message.mine {
		justify-self: end;
		border-radius: var(--sb-radius-lg) var(--sb-radius-lg) var(--sb-radius-xs) var(--sb-radius-lg);
		background: var(--sb-brand-subtle);
		border-color: color-mix(in srgb, var(--sb-brand-light) 30%, transparent);
	}

	.message-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-0);
	}

	.message-meta strong {
		color: var(--sb-text-2);
	}

	.message-body {
		margin: 0;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.message details {
		font-size: var(--sb-font-size-1);
	}

	.message details summary {
		cursor: pointer;
		color: var(--sb-text-muted);
	}

	.message details form {
		margin-block-start: var(--sb-space-2);
	}

	.composer {
		position: sticky;
		inset-block-end: var(--sb-space-3);
		padding: var(--sb-space-4);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg);
		background: color-mix(in srgb, var(--sb-surface-raised) 94%, transparent);
		backdrop-filter: blur(8px);
		box-shadow: var(--sb-shadow-2);
	}

	.presets {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
	}

	.room-code {
		font-family: var(--sp-font-mono);
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	/* ── Organizer ───────────────────────────────────────────────────── */

	.tool-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
		gap: var(--sb-space-5);
		align-items: start;
	}

	.metric-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		gap: var(--sb-space-3);
		margin-block-end: var(--sb-space-5);
	}

	.timeline {
		display: grid;
		gap: var(--sb-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.timeline li {
		padding: var(--sb-space-2) var(--sb-space-3);
		border-inline-start: 2px solid var(--sb-border-strong);
		color: var(--sb-text-2);
		font-size: var(--sb-font-size-2);
	}


	/* ── Online ──────────────────────────────────────────────────────── */

	.code-join {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-3);
		align-items: end;
		margin-block-end: var(--sb-space-6);
		padding: var(--sb-space-4) var(--sb-space-5);
	}

	.code-join .sp-field {
		flex: 0 1 18rem;
	}

	.online-layout {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
		gap: var(--sb-space-5);
		align-items: start;
	}

	.rooms-head {
		margin-block: var(--sb-space-8) var(--sb-space-3);
	}

	.rooms-head .section-title {
		margin: 0;
	}

	.invites-for-you {
		border-color: color-mix(in srgb, var(--sb-brand-light) 45%, var(--sb-border));
		box-shadow: var(--sb-glow-brand);
	}

	details.more {
		margin-block-start: var(--sb-space-2);
	}

	details.more > summary {
		cursor: pointer;
		color: var(--sb-text-muted);
		font-size: var(--sb-font-size-1);
		font-weight: 700;
	}

	details.more[open] > summary {
		margin-block-end: var(--sb-space-2);
	}

	details.more > form + form {
		margin-block-start: var(--sb-space-2);
	}

	.data-table .manage {
		text-align: end;
	}

	.data-table .manage .form-inline {
		justify-content: flex-end;
	}

	.data-table .manage .sp-field {
		flex: 0 0 8rem;
	}

	.sp-field.wide {
		grid-column: 1 / -1;
	}

	.conversation {
		margin-block-end: var(--sb-space-4);
	}

	.page-head-actions .sp-form {
		display: contents;
	}

	.lead .sp-chip {
		vertical-align: middle;
	}

	/* ── Error pages ─────────────────────────────────────────────────── */

	.error-page {
		display: grid;
		justify-items: center;
		gap: var(--sb-space-2);
		max-inline-size: 38rem;
		margin: var(--sb-space-12) auto;
		text-align: center;
	}

	.error-page svg {
		color: var(--sb-brand-light);
		margin-block-end: var(--sb-space-3);
	}

	.error-page h1 {
		font-size: var(--sb-font-size-7);
	}

	.error-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--sb-space-3);
		margin-block-start: var(--sb-space-5);
	}

	/* ── Your sailing (/me) ──────────────────────────────────────────── */

	.me-section {
		margin-block: var(--sb-space-8);
	}

	.page-head-actions .sp-cta.is-sm {
		--_h: 2.5rem;
	}

	.club-links {
		display: grid;
		gap: var(--sb-space-2);
		margin: var(--sb-space-2) 0 0;
		padding: 0;
		list-style: none;
	}

	.club-links a {
		color: var(--sb-text-1);
		font-weight: 700;
	}

	.signin-prompt {
		display: grid;
		justify-items: center;
		gap: var(--sb-space-2);
		max-inline-size: 40rem;
		margin: var(--sb-space-12) auto;
		text-align: center;
	}

	.signin-prompt svg {
		color: var(--sb-brand-light);
		margin-block-end: var(--sb-space-3);
	}

	.signin-prompt h1 {
		font-size: var(--sb-font-size-7);
	}

	.sp-panel {
		background: linear-gradient(145deg, color-mix(in srgb, var(--sb-surface-raised) 35%, var(--sb-surface-card)), var(--sb-surface-card));
		box-shadow: 0 8px 28px color-mix(in srgb, var(--sb-bg) 16%, transparent);
	}

	/* Native forms and disclosures, including the organizer's nested groups. */
	.sp-cta { min-block-size: 2.75rem; }

	.sp-btn {
		min-inline-size: 2.75rem;
		min-block-size: 2.75rem;
		block-size: auto;
		max-inline-size: 100%;
		padding-block: 0.625rem;
		white-space: normal;
		text-align: center;
		line-height: 1.35;
	}

	.sp-input, .sp-select, .sp-textarea {
		min-inline-size: 0;
		min-block-size: 2.75rem;
	}

	fieldset.sp-form {
		min-inline-size: 0;
		margin: var(--sb-space-2) 0 0;
		padding: var(--sb-space-4);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-md);
		background: var(--sb-surface-inset);
	}

	fieldset.sp-form legend {
		padding-inline: var(--sb-space-2);
		color: var(--sb-brand-light);
		font-family: var(--sp-font-display);
		font-size: 1.25rem;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	details.more > summary, .message details summary {
		display: list-item;
		min-block-size: 2.75rem;
		padding-block: var(--sb-space-3);
		color: var(--sb-text-2);
	}

	.sp-chip {
		max-inline-size: 100%;
		white-space: normal;
	}

	.list-card-kicker, .board-head, .facts div {
		flex-wrap: wrap;
	}

	.toggle-row sb-toggle {
		flex: 0 1 auto;
		min-inline-size: 0;
		max-inline-size: 100%;
		min-block-size: 2.75rem;
	}
	sb-toggle::part(switch) { flex: none; }
	sb-toggle::part(label) { min-inline-size: 0; white-space: normal; }
	sb-button::part(button), sb-theme-switch::part(button), sb-drawer::part(close), sb-modal::part(close) {
		min-inline-size: 2.75rem;
		min-block-size: 2.75rem;
	}
	sb-theme-switch::part(option) { min-block-size: 2.75rem; }

	.activity-card {
		align-self: stretch;
		border-block-start: 2px solid var(--sb-brand-light);
	}

	.activity-card h3 { font-size: 1.125rem; }

	.drawer-settings {
		margin-block-start: var(--sb-space-4);
		padding-block-start: var(--sb-space-4);
		border-block-start: 1px solid var(--sb-border);
	}

	.site-foot nav a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.75rem;
	}

	/* ── Toasts ──────────────────────────────────────────────────────── */

	sb-toast {
		z-index: var(--sb-z-toast);
	}
}

@layer utilities {
	/* Phones use the full game player. This layer must win over .sp-btn
	 * and .result .player-controls, including their small-button styles. */
	@media (pointer: coarse) and (max-width: 48rem) {
		.sp-player-control, .player-controls, .player-hint { display: none; }
	}

	.menu-toggle {
		display: none;
		--_px: 0.5rem;
	}

	@media (max-width: 70rem) {
		.primary-nav { display: none; }
		.menu-toggle { display: inline-flex; }
	}

	@media (max-width: 64rem) {
		.primary-nav a {
			padding-inline: var(--sb-space-2);
		}

		.account-name {
			display: none;
		}

		.account-trigger {
			padding-inline-end: var(--sb-space-1);
		}

		.cup-layout,
		.profile-grid,
		.online-layout,
		.two-col {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 52rem) {
		.theme,
		.top-actions > .sp-btn.is-ghost {
			display: none;
		}

		.menu-toggle {
			display: inline-flex;
		}

		.page:not(.is-landing) {
			padding: var(--sb-space-6) var(--sb-space-4) var(--sb-space-12);
		}

		.site-top-inner {
			padding-inline: var(--sb-space-4);
			gap: var(--sb-space-3);
		}

		.sp-panel {
			padding: var(--sb-space-4);
		}

		.result,
		.result:has(.player-controls) {
			grid-template-columns: 4rem minmax(0, 1fr) auto;
		}

		.result .points,
		.result .player-controls {
			grid-column: 2 / -1;
			justify-self: start;
		}


	}

	@media (max-width: 30rem) {
		.result,
		.result:has(.player-controls) {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--sb-space-2);
		}
		.result .seat { grid-column: 1; grid-row: 1; }
		.result .status,
		.result > .sp-player-control { grid-column: 2; grid-row: 1; }
		.result .who { grid-column: 1 / -1; grid-row: 2; }
		.result .points,
		.result .player-controls { grid-column: 1 / -1; }

		.account {
			display: none;
		}

		.drawer-nav .sign-in {
			display: flex;
		}
	}
}

@layer components {
	.sp-auth {
		inline-size: 100%;
		max-inline-size: 32rem;
		margin: var(--sb-space-6) auto;
		padding: clamp(1.25rem, 4vw, 2.5rem);
		border-block-start: 3px solid var(--sb-brand-light);
	}
	.sp-auth.is-security { max-inline-size: 46rem; }
	.sp-auth h1 {
		font-family: var(--sp-font-display);
		font-size: clamp(2.25rem, 5vw, 3rem);
		line-height: 1.05;
		margin-block-end: var(--sb-space-5);
	}
	.sp-auth > h2 {
		margin-block-start: var(--sb-space-8);
		padding-block-start: var(--sb-space-5);
		border-block-start: 1px solid var(--sb-border);
		font-family: var(--sp-font-display);
		font-size: 1.625rem;
	}
	.sp-auth > form { margin-block-end: var(--sb-space-5); }
	.sp-auth > p { color: var(--sb-text-2); }
	.sp-auth [data-auth-show-password] { justify-self: start; }
	.sp-auth > img {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		margin-block: var(--sb-space-5);
		border-radius: var(--sb-radius-sm);
	}
	.sp-auth code { overflow-wrap: anywhere; }
	.auth-recovery-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		gap: var(--sb-space-2);
		padding: 0;
		list-style: none;
	}
	.auth-recovery-list li {
		padding: var(--sb-space-3);
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-sm);
		background: var(--sb-surface-inset);
		font-size: 0.875rem;
	}
	.auth-acknowledge {
		display: flex;
		align-items: center;
		gap: var(--sb-space-3);
		min-block-size: 2.75rem;
	}
	.auth-acknowledge input {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		flex: none;
		accent-color: var(--sb-brand);
	}
	.auth-age-note {
		padding: var(--sb-space-3) var(--sb-space-4);
		border-inline-start: 3px solid var(--sb-brand-light);
		border-radius: var(--sb-radius-sm);
		background: var(--sb-surface-inset);
		color: var(--sb-text-2);
		font-size: 0.875rem;
	}
	.auth-age-note p { margin: 0; }
	.auth-age-note p + p { margin-block-start: var(--sb-space-2); }
	body > .sp-auth {
		flex: none;
		inline-size: calc(100% - 2rem);
		margin-block: clamp(1rem, 5vh, 3rem);
	}
}

@layer utilities {
	@media (pointer: coarse) {
		.sp-input, .sp-select, .sp-textarea { font-size: 1rem; }
	}
	@media (max-width: 22rem) {
		.site-top-inner { gap: var(--sb-space-2); }
		.brand span { font-size: 1.3rem; }
		.play-now { padding-inline: var(--sb-space-2); }
	}
	@media (max-width: 18rem) {
		.brand span { display: none; }
	}
	@media (max-width: 52rem) {
		.sp-input, .sp-select, .sp-textarea { font-size: 1rem; }
		.page-head-actions { inline-size: 100%; }
		.page-head-actions > .sp-btn { flex: 0 1 auto; }
		.site-top-inner { padding-block: var(--sb-space-2); }
		.site-foot nav { gap: var(--sb-space-2) var(--sb-space-4); }
		.sp-room { grid-template-columns: minmax(0, 1fr); }
		.sp-room > .sp-btn { justify-self: start; }
	}
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
	}
}

/* Competitive progress and achievement previews use the shared theme roles. */
.race-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.rank-journey, .rank-guide { margin-block: 1.5rem; }
.rank-card { padding-block: 1rem; border-block-end: 1px solid var(--sb-border); }
.rank-medal { color: var(--sb-warn); }
.rank-value { font: 700 2rem var(--sp-font-display, sans-serif); margin-block: .5rem; }
.rank-progress { display: block; inline-size: 100%; max-inline-size: 28rem; block-size: .7rem; accent-color: var(--sb-brand); margin-block: 1rem; }
.rank-history { padding-inline-start: 1.2rem; }
.rank-history li { margin-block: .7rem; }
.rank-tiers { display: flex; flex-wrap: wrap; gap: .5rem; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.achievement-preview { border: 1px solid var(--sb-border); border-radius: 12px; padding: 1rem; }
.achievement-preview[data-earned="true"] { border-color: var(--sb-warn); }
.achievement-preview h4 { margin-block: .5rem; }
@media (max-width: 700px) { .race-paths { grid-template-columns: 1fr; } }

/* Text-first community. Attachments will be separate post children. */
@layer components {
    .forum-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sb-space-4); }
    .forum-board { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sb-space-3); }
    .forum-board h2, .forum-thread-card h2 { margin: 0; font-size: var(--sb-font-size-4); }
    .forum-board p { margin: 0; }
    .forum-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sb-space-5); align-items: start; }
    .forum-compose, .forum-posts { margin-block: var(--sb-space-5); }
    .forum-layout .forum-compose { margin-block: 0; }
    .forum-posts { max-width: 900px; }
    .forum-post, .forum-thread-card, .forum-compose { min-width: 0; }
    .forum-body, .forum-thread-card h2, .forum-report-text { overflow-wrap: anywhere; }
    .forum-compose .sp-hint { color: var(--sb-text-2); font-size: var(--sb-font-size-2); line-height: 1.5; }
    .forum-body { line-height: 1.7; margin-block: var(--sb-space-4); }
    .forum-body u { text-decoration-style: dotted; text-underline-offset: 0.2em; }
    .forum-post-meta, .forum-thread-tools, .forum-flags, .forum-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); }
    .forum-post-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sb-space-3); }
    .forum-post-actions .sp-btn { min-height: 44px; }
    .forum-post-actions details { min-width: 0; max-width: 100%; }
    .forum-post-actions details[open] { flex-basis: 100%; }
    .forum-post-actions summary, .forum-moderation summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
    .forum-compose textarea, .forum-post textarea { width: 100%; resize: vertical; min-height: 100px; }
    .forum-pagination { margin-block: var(--sb-space-4); }
    .forum-checkbox { display: flex; align-items: center; gap: var(--sb-space-3); min-height: 44px; cursor: pointer; }
    .forum-checkbox input { width: 20px; height: 20px; flex-shrink: 0; }
    .forum-report-text { white-space: pre-wrap; }
    .forum-thread-card .forum-flags:empty { display: none; }
    .forum-post { scroll-margin-top: var(--sb-space-5); }
    @media (max-width: 800px) {
        .forum-boards, .forum-layout { grid-template-columns: minmax(0, 1fr); }
    }
}

@layer components {
    .forum-followed { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); }
    .forum-followed h3, .forum-followed p { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
    .forum-image-list { display: flex; flex-wrap: wrap; gap: var(--sb-space-4); }
    .forum-image { margin: 0; min-width: 0; max-width: 100%; flex: 0 1 260px; }
    .forum-image img { display: block; max-width: 100%; height: auto; border-radius: var(--sb-radius-2); }
    .forum-image figcaption { color: var(--sb-text-2); font-size: var(--sb-font-size-2); overflow-wrap: anywhere; margin-block: var(--sb-space-2); }
    .forum-image .sp-btn { min-height: 44px; }
    .forum-preview { max-width: 100%; overflow-wrap: anywhere; }
    .forum-compose [data-forum-composer-status] { min-height: 1.5em; }
    [data-forum-enhancement]:not([hidden]) { display: grid; gap: var(--sb-space-3); }
    [data-forum-files] { max-width: 100%; min-height: 44px; }
    [data-forum-files]::file-selector-button { min-height: 44px; }
}

@layer components {
    .forum-moderation > .form-actions { margin-top: var(--sb-space-4); }
    .forum-layout .empty { background: var(--sb-surface-card); }
    .forum-thread-tools details { min-width: 0; max-width: 100%; }
    .forum-thread-tools summary, .forum-moderation summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
}

@layer app {
  .analytics { margin-block: 1.5rem; min-width: 0; }
  .analytics-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; }
  .analytics-filters .sp-field { flex: 1 1 10rem; min-width: 0; }
  .analytics-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1rem; }
  .analytics-stat strong { display: block; font-family: var(--sp-font-display); font-size: 2.6rem; line-height: 1.1; color: var(--sb-text-1); }
  .analytics-stat p { margin-block: .5rem; }
  .analytics-charts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 1rem; }
  .analytics-charts > section { min-width: 0; }
  .analytics-chart { width: 100%; height: 300px; }
  .analytics .data-table td:first-child { min-width: 10rem; }
  .analytics .data-table time { white-space: nowrap; }
  .profile-racing { margin-block-end: 1.5rem; }
  .profile-divisions { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 1.5rem; }
  .profile-divisions > div { display: grid; gap: .4rem; }
  @media (max-width: 540px) {
    .analytics-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
    .analytics-stat { padding: 1rem; }
    .analytics-chart { height: 260px; }
    .analytics-filters button { width: 100%; }
  }
}

@layer components {
    .account-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.5rem; }
    .account-nav a { padding: .65rem .9rem; border-radius: var(--sb-radius); color: var(--sb-text-2); text-decoration: none; }
    .account-nav a[aria-current="page"] { background: var(--sb-surface-raised); color: var(--sb-text-1); box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
    .profile-grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
    .profile-settings { display: grid; gap: 1rem; }
    .profile-settings h3 { margin-block: 1.5rem .75rem; }
    .profile-links + details { margin-block-start: 1rem; }
    .profile-settings details > summary { cursor: pointer; font-weight: 700; padding-block: .25rem; }
    .profile-settings details[open] > summary { margin-block-end: 1rem; }
    .profile-links { display: grid; gap: 1rem; }
    .profile-links a { display: block; color: var(--sb-text-1); font-weight: 700; }
    .profile-links p { margin-block: .3rem 0; font-size: .9rem; }
    .auth-email-code { max-inline-size: 14rem; font-family: monospace; font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; }
    .sp-auth.is-security .security-section { border-block-start: 1px solid var(--sb-border); margin-block-start: 1.75rem; padding-block-start: 1.5rem; }
    .security-section h2 { margin-block: 0 .75rem; }
    .security-section .sp-form { margin-block: .75rem; }
    .security-section details { margin-block-start: 1rem; }
    .security-section summary { cursor: pointer; font-weight: 700; }
    .security-section details[open] summary { margin-block-end: 1rem; }
    @media (max-width: 760px) {
        .profile-grid { grid-template-columns: minmax(0, 1fr); }
        .account-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .account-nav a { text-align: center; }
    }
}

/* Operator investigations stay readable at phone widths. */
.operator-nav { gap: .6rem 1.2rem; margin-bottom: 1.5rem; }
.operator-table { min-width: 0; }
.operator-table td { max-width: 28rem; overflow-wrap: anywhere; }
.operator-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: 1rem; }
.operator-fields dt { color: var(--sb-text-2); text-transform: capitalize; font-size: .85rem; }
.operator-fields dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#operator_health, #operator_product { margin-block: 1.5rem; }
#operator_health h2, #operator_product h2 { scroll-margin-top: 6rem; }

@layer utilities {
	/* Closed overlays must take no space before Rocket upgrades them. Hiding
	   visibility alone left their light DOM in flow, shifting the whole page. */
	sb-modal:not(:defined), sb-drawer:not(:defined), sb-toast:not(:defined),
	sb-tooltip:not(:defined) { display: none; }
	sb-popover:not(:defined) { display: inline-flex; }
	sb-popover:not(:defined) > :not([slot="trigger"]) { display: none; }
	.sb-cloak :not(:defined):not(sb-popover) { visibility: hidden; }

}

.operator-details > summary { cursor: pointer; font-weight: 600; padding-block: .6rem; }
.operator-details[open] > summary { margin-bottom: .5rem; }

/* ── Club coaching: assigned practice and the coach's progress grid ── */
@layer components {
	.club-practice {
		margin-block: var(--sb-space-8);
	}

	.club-practice > .two-col,
	.club-practice > .stack {
		margin-block-end: var(--sb-space-5);
	}

	.practice-card .practice-status {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sb-space-2);
	}

	.practice-card .practice-status:empty {
		display: none;
	}

	.practice-card .row-actions {
		flex: 1 1 100%;
	}

	.practice-card .copy-field {
		flex: 1 1 16rem;
		min-inline-size: 0;
	}

	.progress-table td.num {
		white-space: nowrap;
	}
}
/* In normal page flow, above navigation. The game reserves the same space. */
:root { --privacy-height: 0px; }
.privacy-banner {
  position: relative;
  z-index: 200;
  flex: none;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  color: var(--sb-text-1);
  background: var(--sb-surface-raised);
  border-bottom: 1px solid var(--sb-border-strong);
  font: 1rem/1.5 var(--sb-font-body);
  -webkit-user-select: text;
  user-select: text;
}
.privacy-banner[hidden], :root.privacy-decided .privacy-banner, .privacy-banner [hidden] { display: none !important; }
.privacy-inner { max-width: 80rem; margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.privacy-copy { flex: 1; min-width: 0; }
.privacy-copy p { margin: 0; }
.privacy-copy strong { display: block; }
.privacy-copy a { color: var(--sb-brand-light); text-decoration: underline; }
.privacy-status { font-size: .875rem; color: var(--sb-text-2); }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.privacy-actions button, .privacy-open {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--sb-border-strong);
  border-radius: var(--sb-radius-sm); background: var(--sb-surface); color: var(--sb-text-1);
  font: inherit; cursor: pointer;
}
.privacy-actions button:hover, .privacy-open:hover { background: var(--sb-surface-hover); }
.privacy-actions button:focus-visible, .privacy-open:focus-visible { outline: 2px solid var(--sb-brand-light); outline-offset: 3px; }
@media (max-width: 48rem) {
  .privacy-banner { font-size: .875rem; line-height: 1.4; padding-block: 12px; }
  .privacy-inner { align-items: stretch; flex-direction: column; gap: 8px; }
  .privacy-actions button { flex: 1; }
}