/* =============================================================================
   useful. coaching — style.css

   Conventions
   - Cascade layers order the sheet; later layers win: reset → fonts → tokens →
     base → layout → components → pages → utilities.
   - 4px grid: every font-size pairs with a leading token whose line box lands
     on the grid (verify with the footer grid toggle).
   - Logical properties throughout (block/inline, no top/left except viewport
     positioning).
   - Borders: `var(--border)` (composite token) or
     `var(--border-width) solid <color>` when the color differs.
   - Radius policy: rectangles (buttons, cards, inputs) are square; --radius-s
     is reserved for small floating UI (tooltips, mark, chart bars).
   - Sizes are rem literals or sizing tokens; --space-* is for space between
     things only.
   ============================================================================= */

@layer reset, fonts, tokens, base, layout, components, pages, utilities;

/* =============================================================================
   TODO: line-height and text alignment

   Line-height adds space above and below text, making precise alignment tricky.

   Future solution - when browser support improves, use text-box-trim:
   https://caniuse.com/css-text-box-trim

   text-box-trim: both;
   text-box-edge: cap alphabetic;

   This trims line-height spacing from first/last lines while keeping readable
   line-height for multi-line text.
   ============================================================================= */

/* =============================================================================
   RESET LAYER - Browser fixes ONLY (no opinions)
   kudos: https://github.com/schalkneethling/css-community-reset

   A combination of the following resets:
   https://piccalil.li/blog/a-more-modern-css-reset/
   https://www.joshwcomeau.com/css/custom-css-reset/
   https://dbushell.com/2025/09/12/css-reset/
   ============================================================================= */

@layer reset {
	/* Use a more-intuitive box-sizing model. */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Prevent font size inflation */
	/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
	/* https://caniuse.com/text-size-adjust */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		tab-size: 4;
	}

	/* Google Translate RTL support */
	/* https://dbushell.com/2025/09/12/css-reset/#:~:text=translated%2Drtl */
	html.translated-rtl {
		direction: rtl;
	}

	/* Browsers add 8px margin */
	body {
		margin: 0;
	}

	/* Remove default margin in favour of better control in authored CSS */
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ul,
	ol {
		margin-block: 0;
	}

	/* Remove built-in form typography styles */
	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* Chrome/Safari border inheritance bug */
	table {
		border-color: currentColor;
	}

	/* Weight varies 400-700 across browsers */
	b,
	strong {
		font-weight: bolder;
	}

	/* Monospace font sizing bug - double declaration intentional */
	code,
	kbd,
	samp,
	pre {
		font-family: var(--font-mono), monospace;
		font-size: 1em;
	}

	/* Line-height issues across browsers */
	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	/* Dialog inconsistent padding/border across browsers */
	dialog {
		padding: 0;
		border: none;
	}

	/* Firefox dims placeholder to 0.54 opacity */
	::placeholder {
		opacity: 1;
	}

	/* Ensure [hidden] cannot be overridden */
	[hidden] {
		/* biome-ignore lint/complexity/noImportantStyles: Required to enforce hidden attribute */
		display: none !important;
	}

	/* Respect user motion preferences - !important required for accessibility override */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			/* biome-ignore lint/complexity/noImportantStyles: A11y requirement to override all animations */
			animation-duration: 0.01ms !important;
			/* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			animation-iteration-count: 1 !important;
			/* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			transition-duration: 0.01ms !important;
			/* biome-ignore lint/complexity/noImportantStyles: A11y requirement */
			scroll-behavior: auto !important;
		}
	}
}

/* =============================================================================
   FONTS LAYER - @font-face declarations
   ============================================================================= */

@layer fonts {
	@font-face {
		font-family: InterVariable;
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url("/assets/fonts/InterVariable.woff2") format("woff2");
	}

	@font-face {
		font-family: InterVariable;
		font-style: italic;
		font-weight: 100 900;
		font-display: optional;
		src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
	}

	/* Fallback font with metrics adjusted to match Inter, preventing CLS on font swap */
	@font-face {
		font-family: "Inter-fallback";
		src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
		size-adjust: 107%;
		ascent-override: 96%;
		descent-override: 24%;
		line-gap-override: 0%;
	}

	/* IBM Plex Mono — static weights matching project tokens */
	@font-face {
		font-family: "IBM Plex Mono";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: italic;
		font-weight: 400;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: italic;
		font-weight: 500;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: italic;
		font-weight: 600;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: italic;
		font-weight: 700;
		font-display: swap;
		src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
	}
}

/* =============================================================================
   TOKENS LAYER - Design tokens (custom properties)
   Semantic tokens alias primitives (or each other) so every value has a single
   source of truth.
   ============================================================================= */

@layer tokens {
	:root {
		/* Typography Scale — fixed steps.
		   Every use pairs with a leading token so line boxes land on the 4px grid */
		--step--3: 0.625rem; /* 10px */
		--step--2: 0.75rem; /* 12px */
		--step--1: 0.875rem; /* 14px */
		--step-0: 1rem; /* 16px */
		--step-1: 1.125rem; /* 18px */
		--step-2: 1.25rem; /* 20px */
		--step-3: 1.5rem; /* 24px */
		--step-4: 1.875rem; /* 30px */
		--step-5: 2.5rem; /* 40px */

		/* Spacing Scale — fixed, 4px grid. Space between things, never sizes */
		--space-3xs: 0.25rem; /*  4px */
		--space-2xs: 0.5rem; /*  8px */
		--space-xs: 0.75rem; /* 12px */
		--space-s: 1rem; /* 16px */
		--space-m: 1.5rem; /* 24px */
		--space-l: 2rem; /* 32px */
		--space-xl: 3rem; /* 48px */
		--space-3xl: 6rem; /* 96px */

		/* Grid */
		--grid-max-width: 70rem; /* 1120px */
		--grid-gutter: var(--space-m); /* 24px */

		/* Font stacks */
		--font-body: "InterVariable", "Inter-fallback", system-ui, sans-serif;
		--font-mono:
			"IBM Plex Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

		/* Font Weights */
		--weight-normal: 400;
		--weight-medium: 500;
		--weight-semibold: 600;
		--weight-bold: 700;

		/* Line Heights — grid-aligned.
		   Each ratio targets 4px-grid line boxes at its intended sizes */
		--leading-none: 1; /* single-line UI: buttons, inputs, badges */
		--leading-body: 1.5; /* 24px on 16px — body baseline */
		--leading-lg: calc(28 / 18); /* 28px on 18px — lead text */
		--leading-sm: calc(24 / 14); /* 24px on 14px — reading text */
		--leading-sm-compact: calc(20 / 14); /* 20px on 14px — UI chrome */
		--leading-xs-compact: calc(20 / 12); /* 20px on 12px — UI chrome */
		--leading-xs-tight: calc(16 / 12); /* 16px on 12px — single-line micro-labels */
		--leading-title: calc(48 / 40); /* 48px on 40px hero; 36px on 30px h1 */
		--leading-heading: calc(32 / 24); /* 32px on 24px h2; 24px on 18px h3 */

		/* Letter spacing */
		--tracking-wide: 0.05em; /* uppercase micro-labels */
		--tracking-wider: 0.1em; /* uppercase display labels */

		/* Border Radius — reserved for small floating UI (tooltips, mark,
		   chart bars); rectangles stay square */
		--radius-s: 0.25rem; /* 4px */

		/* Sizing */
		--nav-height: 3rem; /* 48px */
		--indicator-size: 1.5rem;
		--icon-size-lg: 1.25rem; /* 20px — rem, not em, so icons stay whole-px in 14px contexts */
		--touch-target-min: 44px;
		--border-width: 1px;

		/* Transitions */
		--transition-fast: 0.15s ease;

		/* Elevation shadows */
		--shadow-dialog: 0 1rem 3rem oklch(0 0 0 / 0.2);
		--shadow-overlay: 0 0.25rem 0.75rem oklch(0 0 0 / 0.12);

		/* Colors - Primitives
		   ========================================================================= */

		/* Neutral scale */
		--color-neutral-100: #f5f5f5;
		--color-neutral-200: #e5e5e5;
		--color-neutral-300: #d4d4d4;
		--color-neutral-400: #a3a3a3;
		--color-neutral-600: #525252;
		--color-neutral-700: #404040;
		--color-neutral-900: #171717;
		--color-neutral-950: #0a0a0a;

		--color-white: #fff;

		/* Brand */
		--color-brand: #2b67f1;
		--color-member: #10b981;
		--color-brand-alpha: oklch(from var(--color-brand) l c h / 0.2);

		/* Colors - Semantic
		   Each token is declared once via light-dark(); the element's used
		   color-scheme picks the value. auto inherits color-scheme: light dark
		   (here) and follows the OS; explicit themes pin color-scheme in the
		   [data-theme] rules after this block.
		   Dark palette: 300 (text), 400 (muted), 700 (borders), 900 (surfaces),
		   950 (background).
		   ========================================================================= */
		color-scheme: light dark;

		/* Body */
		--body-foreground: light-dark(var(--color-neutral-700), var(--color-neutral-300));
		--body-background: light-dark(var(--color-white), var(--color-neutral-950));
		--body-muted: light-dark(var(--color-neutral-600), var(--color-neutral-400));

		/* Surfaces */
		--surface-raised: light-dark(var(--color-white), var(--color-neutral-900));
		--surface-lowered: var(--body-background);
		--surface-border: light-dark(var(--color-neutral-200), var(--color-neutral-700));
		--surface-hover: var(--surface-border);
		--surface-tint: light-dark(var(--color-neutral-100), var(--color-neutral-900));

		/* Default border — pair with --surface-border when only the color is needed */
		--border: var(--border-width) solid var(--surface-border);

		/* Navigation */
		--nav-foreground-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));

		/* Logo */
		--logo-foreground: light-dark(var(--color-neutral-700), var(--color-white));
		--logo-box-text-hover: light-dark(var(--color-white), var(--color-neutral-950));

		/* Hero */
		--hero-overlay-dark: light-dark(oklch(0% 0 0 / 0.2), oklch(0% 0 0 / 0));

		/* Box */
		--box-background: light-dark(
			oklch(from var(--color-brand) 97% 0.02 h),
			oklch(from var(--color-brand) 25% 0.04 h)
		);

		/* Focus */
		--focus-ring: var(--color-brand);

		/* Status colors */
		--danger-foreground: light-dark(oklch(45% 0.2 25), oklch(75% 0.12 25));

		/* Journal colors */
		--journal-menses: light-dark(oklch(49% 0.21 15 / 0.3), oklch(70% 0.21 15 / 0.5));
		--journal-estradiol: light-dark(oklch(57% 0.17 301 / 0.3), oklch(75% 0.17 301 / 0.5));
		--journal-rec-worse: light-dark(oklch(55% 0.2 25 / 0.5), oklch(60% 0.2 25 / 0.7));
		--journal-rec-same: light-dark(oklch(75% 0.17 70 / 0.5), oklch(75% 0.17 70 / 0.7));
		--journal-rec-better: light-dark(oklch(60% 0.2 131 / 0.5), oklch(60% 0.2 131 / 0.7));
		--journal-weight-down: light-dark(oklch(62% 0.2 251 / 0.3), oklch(75% 0.2 251 / 0.7));
		--journal-weight-up: light-dark(oklch(60% 0 0 / 0.3), oklch(70% 0 0 / 0.5));
		--journal-chart-weight: light-dark(oklch(34% 0 0), oklch(78% 0 0));
		--journal-chart-median: light-dark(oklch(34% 0 0 / 0.3), oklch(78% 0 0 / 0.3));
		--journal-chart-trend: light-dark(oklch(50% 0.15 250 / 0.5), oklch(65% 0.15 250));
		--journal-chart-gap: light-dark(oklch(34% 0 0 / 0.15), oklch(78% 0 0 / 0.15));
		--journal-chart-target: light-dark(oklch(55% 0.18 150), oklch(65% 0.18 150));
	}

	/* Explicit theme choices pin the color scheme (auto follows the OS via
	   color-scheme: light dark on :root above) */
	[data-theme="light"] {
		color-scheme: light;
	}

	[data-theme="dark"] {
		color-scheme: dark;

		/* Slightly higher chroma than auto's dark value */
		--danger-foreground: oklch(75% 0.18 25);
	}
}

/* =============================================================================
   BASE LAYER - Element defaults with :where() for easy overrides
   ============================================================================= */

@layer base {
	/* Body defaults */
	:where(body) {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		font-family: var(--font-body);
		font-size: var(--step-0);
		font-weight: var(--weight-normal);
		line-height: var(--leading-body);
		color: var(--body-foreground);
		background-color: var(--body-background);
	}

	/* Headings */
	:where(h1, h2, h3, h4, h5, h6) {
		font-weight: var(--weight-semibold);
		/* stylelint-disable-next-line plugin/use-baseline */
		text-wrap: balance;
	}

	:where(h1) {
		font-size: var(--step-4);
		line-height: var(--leading-title);
	}
	:where(h2) {
		font-size: var(--step-3);
		line-height: var(--leading-heading);
	}
	:where(h3) {
		font-size: var(--step-1);
		line-height: var(--leading-heading);
	}
	:where(h4) {
		font-size: var(--step-0);
		line-height: var(--leading-body);
	}
	:where(h5) {
		font-size: var(--step--1);
		font-weight: var(--weight-bold); /* bold, not semibold: keeps hierarchy at body-adjacent size */
		line-height: var(--leading-sm-compact);
	}
	:where(h6) {
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
	}

	/* Text elements */
	:where(p) {
		text-wrap: pretty;
	}

	:where(small) {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	:where(strong) {
		font-weight: var(--weight-semibold);
	}

	:where(mark) {
		background: light-dark(oklch(92% 0.12 95 / 0.5), oklch(50% 0.09 95 / 0.4));
		color: inherit;
		padding-inline: 2px;
		border-radius: var(--radius-s);
	}

	/* Links */
	:where(a) {
		color: inherit;
		text-decoration: underline;
		transition: color var(--transition-fast);
	}

	:where(a:hover) {
		color: var(--color-brand);
	}

	/* Media defaults */
	:where(img, picture, video, canvas) {
		display: block;
		max-width: 100%;
		height: auto;
	}

	:where(svg:not(.icon)) {
		display: block;
		max-width: 100%;
	}

	/* Nav list reset */
	:where(nav ul, nav ol) {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Lists */
	:where(ul, ol) {
		padding-inline-start: var(--space-s);
		padding-block-start: var(--space-2xs);
	}

	:where(nav ul, nav ol) {
		padding-block-start: 0;
	}

	:where(li > ul, li > ol) {
		padding-block-start: 0;
	}

	:where(li + li) {
		margin-block-start: var(--space-3xs);
	}

	:where(li:has(> ul) + li, li:has(> ol) + li) {
		margin-block-start: var(--space-2xs);
	}

	/* Focus styles */
	:where(:focus-visible) {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* Anchor scroll offset */
	:where(:target) {
		scroll-margin-block: 5ex;
	}

	/* Summary cursor */
	:where(summary) {
		cursor: pointer;
	}

	/* Single-line UI gets a line box equal to its font size, so padding alone
	   sets control height (a 14px control with 8px padding is a 32px control).
	   Labels are excluded: they can wrap, so they keep readable leading;
	   14px form labels get a 20px box in .form-field instead. */
	:where(button, input, select) {
		line-height: var(--leading-none);
	}

	/* Make sure textareas without a rows attribute are not tiny */
	:where(textarea:not([rows])) {
		min-block-size: 10em;
	}

	/* Figure */
	:where(figure) {
		margin-block: var(--space-m);
		margin-inline: 0;
	}

	:where(figcaption) {
		margin-block-start: var(--space-2xs);
		font-size: var(--step--1);
		line-height: var(--leading-sm-compact);
		color: var(--body-muted);
	}

	/* Blockquote */
	:where(blockquote) {
		margin-block: var(--space-m) 0;
		margin-inline: 0;
		padding: 0;
		font-family: var(--font-body);
		font-size: var(--step--1);
		color: var(--body-foreground);
		line-height: var(--leading-sm);
	}

	:where(blockquote:not(.review)) {
		border-inline-start: 2px solid var(--surface-border);
		padding-inline-start: var(--space-s);
	}

	:where(blockquote p + p) {
		margin-block-start: var(--space-2xs);
	}

	:where(blockquote cite) {
		display: block;
		font-style: inherit;
		margin-block-start: var(--space-3xs);
	}

	:where(blockquote cite)::before {
		content: "— ";
	}

	/* HR */
	:where(hr) {
		width: 100%;
		height: 0;
		border: none;
		border-block-start: var(--border);
	}

	/* Tables */
	:where(table) {
		width: 100%;
		border-collapse: collapse;
	}

	:where(th, td) {
		padding: var(--space-2xs) var(--space-xs);
		text-align: start;
		vertical-align: top;
	}

	:where(th) {
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		line-height: var(--leading-sm-compact);
	}

	:where(tbody tr) {
		border-block-start: var(--border);
	}
}

/* =============================================================================
   LAYOUT LAYER - Structural patterns
   ============================================================================= */

@layer layout {
	.container {
		width: 100%;
		max-width: var(--grid-max-width);
		padding-inline: var(--grid-gutter);
		margin-inline: auto;
	}

	/* Stack - vertical rhythm (every-layout.dev/layouts/stack/).
	   Margin-based so headings can carry asymmetric space */
	.stack {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.stack:only-child {
		block-size: 100%;
	}

	.stack > * + * {
		margin-block-start: var(--stack-space, var(--space-s));
	}

	.stack > * + :is(h2, h3, h4, h5, h6) {
		margin-block-start: var(--space-l);
		margin-block-end: var(--space-2xs);
	}

	/* Must be in layout layer to override .stack > * + * */
	.stack > hr {
		margin-block-start: var(--space-m);
	}

	/* Form stack - gap-based sibling of .stack: gap skips [hidden] elements
	   cleanly, which margins cannot, so dynamic forms use this variant */
	.form-stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-space, var(--space-s));
	}

	/* Grid - responsive auto-fit */
	.grid {
		display: grid;
		gap: var(--grid-gutter);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-column, 20ch)), 1fr));
	}

	/* Grid - explicit 3-column */
	.grid-3 {
		display: grid;
		gap: var(--grid-gutter);
		grid-template-columns: 1fr;
	}

	@media (width >= 40rem) {
		.grid-3 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width >= 60rem) {
		.grid-3 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* Grid - asymmetric 1:2 */
	.grid-1-2 {
		display: grid;
		gap: var(--grid-gutter);
		grid-template-columns: 1fr;
	}

	/* On mobile, show the main content (2fr column) first */
	.grid-1-2 > :last-child {
		order: -1;
	}

	@media (width >= 60rem) {
		.grid-1-2 {
			grid-template-columns: 1fr 2fr;
		}

		.grid-1-2 > :last-child {
			order: 0;
		}
	}

	/* Sync stack spacing with grid gutter when customized */
	.grid-1-2 > .stack {
		--stack-space: var(--grid-gutter);
	}

	/* Compact grid variant - tighter spacing */
	.grid-compact {
		--grid-gutter: var(--space-s);
	}

	/* Reset figure margins in grids - let gap handle spacing */
	.grid figure,
	.grid-3 figure {
		margin-block: 0;
	}

	/* Cluster - horizontal flex with wrap (every-layout.dev/layouts/cluster/) */
	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster-space, var(--space-s));
	}

	.cluster-between {
		justify-content: space-between;
	}

	/* Icon - inline icons that scale with text */
	.icon {
		display: inline-block;
		width: 1em;
		height: 1em;
		vertical-align: -0.125em;
	}

	/* Split - sidebar + main (every-layout.dev/layouts/sidebar/) */
	.split {
		display: flex;
		flex-wrap: wrap;
		gap: var(--grid-gutter);
	}

	.split > :first-child {
		flex-basis: var(--split-sidebar, 20rem);
		flex-grow: 1;
	}

	.split > :last-child {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: 50%;
	}
}

/* =============================================================================
   COMPONENTS LAYER - Reusable UI patterns
   ============================================================================= */

@layer components {
	/* ─── Site Chrome ─────────────────────────────────────────────────────────── */

	/* Site Banner — 4 + 16 + 4 = 24px, so banner + nav is exactly 72px and the
	   top of the hero lands on a major (24px) gridline */
	.site-banner {
		background: var(--color-brand-alpha);
		color: var(--color-brand);
		text-align: center;
		padding-block: var(--space-3xs);
	}

	.site-banner p {
		font-family: var(--font-mono);
		font-size: var(--step--2);
		line-height: var(--leading-xs-tight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* Logo */
	.logo {
		font-weight: var(--weight-medium);
		color: var(--logo-foreground);
	}

	.logo-box {
		color: var(--color-white);
		background: var(--color-brand);
		/* em, not px: matches the ~0.24em the font's own metrics leave above
		   and below the letters, so the box stays balanced at every size */
		padding-inline: 0.17em;
		transition:
			color var(--transition-fast),
			background var(--transition-fast);
	}

	a:hover .logo-box {
		color: var(--logo-box-text-hover);
		background: var(--body-foreground);
	}

	/* Navigation */
	.nav-site {
		height: var(--nav-height);
		background: var(--body-background);
		color: var(--body-foreground);
		border-block-end: var(--border);
	}

	.nav-site .container {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.nav-site a,
	.nav-site-toggle,
	.nav-site-close {
		color: var(--body-muted);
		transition: color var(--transition-fast);
		text-decoration: none;
	}

	.nav-site a:hover,
	.nav-site a[aria-current="page"],
	.nav-site-toggle:hover,
	.nav-site-close:hover {
		color: var(--nav-foreground-active);
	}

	.nav-site a:has(.logo) {
		color: var(--body-foreground);
	}

	.nav-site-toggle,
	.nav-site-close {
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.nav-site-toggle {
		margin-inline-start: auto;
	}

	.nav-site-links {
		display: none;
		margin-inline-start: auto;
	}

	.nav-site-dialog {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding-inline: var(--grid-gutter);
		background: var(--body-background);
		color: var(--body-foreground);
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	.nav-site-dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: var(--nav-height);
	}

	.nav-site-dialog .nav-site-links {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--space-s);
		font-size: var(--step-1);
		line-height: var(--leading-lg);
	}

	@media (width >= 72rem) {
		.nav-site-links {
			display: flex;
			align-items: center;
			gap: var(--space-s);
		}

		.nav-site-toggle {
			display: none;
		}
	}

	.nav-site-links li + li {
		margin-block-start: 0;
	}

	/* Header Hero */
	.header-hero {
		padding-block: var(--space-l) var(--space-m);
		background: var(--body-background);
		border-block-end: var(--border);
	}

	/* Header Hero with background image */
	.header-hero--image {
		position: relative;
		padding-block: var(--space-3xl);
		background:
			linear-gradient(var(--hero-overlay-dark), var(--hero-overlay-dark)),
			var(--hero-image) var(--hero-image-position, center) / cover no-repeat;
		border-block-end: none;
	}

	.header-hero--image .header-hero-title,
	.header-hero--image .header-hero-subtitle,
	.header-hero--image .breadcrumb,
	.header-hero--image .byline {
		color: var(--color-white);
	}

	.header-hero--image .breadcrumb [aria-current="page"] {
		color: var(--color-white);
	}

	.header-hero--image .breadcrumb a:hover {
		color: inherit;
		text-decoration: underline;
	}

	/* Header Hero with background video */
	.header-hero--video {
		overflow: hidden;
		background: none;
	}

	.header-hero-video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	.header-hero--video::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--hero-overlay-dark);
		z-index: 1;
		pointer-events: none;
	}

	.header-hero--video .container,
	.header-hero--video .header-hero-caption {
		position: relative;
		z-index: 2;
	}

	.header-hero-caption {
		position: absolute;
		right: max(var(--grid-gutter), calc((100% - var(--grid-max-width)) / 2 + var(--grid-gutter)));
		bottom: var(--space-xs);
		font-size: var(--step--3);
		color: var(--color-white);
		font-family: var(--font-mono);
		opacity: 0.8;
	}

	.header-hero .stack {
		--stack-space: var(--space-xs);
	}

	.header-hero-byline {
		--stack-space: var(--space-s);
	}

	.header-hero-title {
		color: var(--body-foreground);
		font-size: var(--step-5);
		font-weight: var(--weight-bold);
		line-height: var(--leading-title);
	}

	.header-hero-subtitle {
		color: var(--body-foreground);
		font-size: var(--step-2);
		font-weight: var(--weight-normal);
		line-height: var(--leading-title);
	}

	/* Breadcrumb */
	.breadcrumb {
		font-size: var(--step--1);
		line-height: var(--leading-sm-compact);
		color: var(--body-muted);
	}

	.breadcrumb ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs);
		padding: 0;
	}

	.breadcrumb li {
		display: flex;
		align-items: center;
		margin: 0; /* undo base li + li spacing in this flex row */
	}

	.breadcrumb li:not(:last-child)::after {
		content: "/";
		margin-inline-start: var(--space-2xs);
		line-height: var(--leading-none);
	}

	.breadcrumb a,
	.breadcrumb span {
		color: inherit;
		text-decoration: none;
		line-height: var(--leading-none);
	}

	.breadcrumb a:hover {
		color: var(--body-foreground);
		text-decoration: underline;
	}

	.breadcrumb [aria-current="page"] {
		color: var(--body-foreground);
	}

	/* Byline */
	.byline {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s);
		font-size: var(--step--1);
		line-height: var(--leading-sm-compact);
		color: var(--body-muted);
	}

	.byline > * {
		display: flex;
		align-items: center;
		gap: var(--space-3xs);
	}

	.byline a {
		color: inherit;
	}

	.byline a:hover {
		text-decoration: none;
	}

	/* Main */
	main {
		flex: 1;
		min-height: 50vh;
		padding-block-start: var(--space-m);
		background-color: var(--body-background);
	}

	/* Footer */
	footer {
		margin-block-start: var(--space-3xl);
		padding-block: var(--space-l);
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		border-block-start: var(--border);
	}

	footer .container {
		align-items: center;
	}

	footer .footer-avatar {
		width: 6rem; /* 96px */
		height: 6rem;
		border-radius: 50%;
		flex-shrink: 0;
	}

	@media (width >= 60rem) {
		footer .container {
			flex-direction: row;
		}

		footer .footer-avatar {
			margin-inline-end: var(--space-m);
		}
	}

	/* Theme + grid toggles */
	.theme-toggle,
	.grid-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3xs);
		padding: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--1);
		color: var(--body-muted);
		background: transparent;
		border: var(--border);
		cursor: pointer;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.theme-toggle:hover,
	.grid-toggle:hover,
	.grid-toggle[aria-pressed="true"] {
		color: var(--body-foreground);
		border-color: var(--body-muted);
	}

	/* Icon sizing shared by chrome and components */
	.theme-toggle svg,
	.grid-toggle svg,
	.card-header .icon,
	.card-details summary .icon,
	.callout .icon {
		width: var(--icon-size-lg);
		height: var(--icon-size-lg);
		flex-shrink: 0;
	}

	/* Theme toggle shows one icon per theme state (moon = light/unset) */
	.theme-toggle svg {
		display: none;
	}

	html:not([data-theme="dark"], [data-theme="auto"]) .theme-toggle .icon-moon,
	html[data-theme="dark"] .theme-toggle .icon-sun,
	html[data-theme="auto"] .theme-toggle .icon-auto {
		display: block;
	}

	/* ─── Content ─────────────────────────────────────────────────────────────── */

	/* Footnotes */
	.footnotes,
	.footnotes p,
	.footnotes li {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	/* Table of Contents */
	.table-of-contents-title {
		font-size: var(--step-1);
		line-height: var(--leading-lg);
	}

	.table-of-contents {
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
		padding-block: var(--space-2xs);
	}

	.table-of-contents ul {
		padding-inline-start: var(--space-xs);
		margin-block-start: var(--space-3xs);
		list-style: none;
	}

	.table-of-contents > ul {
		padding-inline-start: 0;
	}

	.table-of-contents a {
		color: var(--body-muted);
		text-decoration: none;
	}

	.table-of-contents a:hover {
		color: var(--body-foreground);
		text-decoration: underline;
	}

	/* Blockquote review variant */
	blockquote.review {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-2xs);
		margin-block: var(--space-m) 0;
	}

	blockquote.review::before {
		content: "";
		width: 1.5em;
		height: 1.5em;
		background: var(--surface-border);
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/%3E%3C/svg%3E");
		mask-size: contain;
		mask-repeat: no-repeat;
	}

	blockquote.review p,
	blockquote.review cite {
		grid-column: 2;
	}

	/* Table utilities */
	.table-scroll {
		overflow-x: auto;
	}

	.table-scroll td {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	table.zebra-rows tbody tr:nth-child(odd) {
		background-color: var(--surface-tint);
	}

	@media (hover: hover) {
		table.hover-rows tbody tr:hover {
			background-color: var(--surface-tint);
		}
	}

	/* ─── Cards & Containers ──────────────────────────────────────────────────── */

	/* Box */
	.box {
		padding: var(--space-s);
		background: var(--box-background);
		border: var(--border);
	}

	/* Card */
	.card,
	.card-details {
		--stack-space: var(--space-2xs);
		padding: var(--space-s);
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		border: var(--border);
	}

	.card-header,
	.card-details summary {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
	}

	.card-header h3,
	.card-details summary h3 {
		flex: 1;
		min-width: 0;
		font-size: var(--step-0);
		font-weight: var(--weight-semibold);
		line-height: var(--leading-body);
	}

	.card-header .icon,
	.card-details summary .icon {
		color: inherit;
	}

	/* Boxed icon variant - add .card-icon-boxed to .card or .card-details */
	.card-icon-boxed .card-header .icon,
	.card-icon-boxed summary .icon {
		width: 2em;
		height: 2em;
		padding: var(--space-3xs);
		background: var(--color-brand);
		color: var(--color-white);
	}

	.card-details summary {
		list-style: none;
		cursor: pointer;
	}

	.card-details summary::after {
		content: "";
		margin-inline-start: auto;
		width: 1em;
		height: 1em;
		background: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		mask-size: contain;
		transition: transform var(--transition-fast);
	}

	.card-details[open] summary::after {
		transform: rotate(180deg);
	}

	.card-details[open] summary {
		padding-block-end: var(--space-s);
		border-block-end: var(--border);
	}

	.card-details.card-divided[open] summary {
		border-block-end: none;
	}

	.card-details.card-divided > summary + * {
		margin-block-start: 0;
	}

	.card-details-item {
		padding-block-start: var(--space-s);
	}

	.card-divided > * + * {
		padding-block-start: var(--space-s);
		margin-block-start: var(--space-s);
		border-block-start: var(--border);
	}

	/* Card link - stretched link makes the whole card clickable */
	.card-link {
		position: relative;
		cursor: pointer;
	}

	.card-link a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.card-link:has(a:hover) {
		border-color: var(--color-brand);
	}

	.card-link:has(a:focus-visible) {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.card-link a:focus-visible {
		outline: none;
	}

	/* ─── Interactive ─────────────────────────────────────────────────────────── */

	/* Button — leading-none + padding = 32px control (24px for .btn-sm) */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		width: fit-content;
		min-block-size: 2rem; /* 32px */
		padding: var(--space-2xs) var(--space-xs);
		font-size: var(--step--1);
		font-weight: var(--weight-medium);
		line-height: var(--leading-none);
		color: var(--body-foreground);
		background: transparent;
		border: var(--border);
		text-decoration: none;
		cursor: pointer;
		transition:
			background var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}

	.btn:hover {
		background: var(--surface-hover);
	}

	.btn-brand {
		color: var(--color-white);
		background: var(--color-brand);
		border-color: var(--color-brand);
	}

	.btn-brand:hover {
		color: var(--body-background);
		background: var(--body-foreground);
		border-color: var(--body-foreground);
	}

	.btn-secondary {
		color: var(--body-muted);
	}

	.btn-secondary:hover {
		color: var(--body-foreground);
		background: var(--surface-hover);
	}

	.btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.btn.loading {
		position: relative;
		color: transparent;
	}

	.btn.loading::after {
		content: "";
		position: absolute;
		width: 1rem;
		height: 1rem;
		border: 2px solid transparent;
		border-top-color: var(--color-white);
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.btn-sm {
		min-block-size: 1.5rem; /* 24px */
		padding: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--2);
	}

	/* Badge */
	.badge {
		flex-shrink: 0;
		padding: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--2);
		font-weight: var(--weight-medium);
		line-height: var(--leading-none);
	}

	.badge-toggle {
		cursor: pointer;
		user-select: none;
		border: var(--border);
		transition:
			background var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}

	.badge-toggle input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	.badge-toggle:has(input:checked) {
		background: var(--color-brand);
		border-color: var(--color-brand);
		color: var(--color-white);
	}

	/* Callout */
	.callout {
		--callout-hue: 260;
		--callout-fill: light-dark(
			oklch(95% 0.03 var(--callout-hue)),
			oklch(25% 0.05 var(--callout-hue))
		);
		--callout-accent: light-dark(
			oklch(55% 0.15 var(--callout-hue)),
			oklch(80% 0.1 var(--callout-hue))
		);
		display: flex;
		align-items: center;
		gap: var(--space-s);
		padding: var(--space-s);
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		background: var(--callout-fill);
	}

	.callout .icon {
		color: var(--callout-accent);
	}

	.callout p {
		color: var(--callout-accent);
	}

	.callout-tip {
		--callout-hue: 145;
	}
	.callout-danger {
		--callout-hue: 25;
	}
	.callout-info {
		--callout-hue: 260;
	}

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

	.form-profile {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	fieldset {
		margin: 0;
		padding: var(--space-s);
		border: var(--border);
		background: var(--surface-raised);
	}

	legend {
		padding: 0 var(--space-2xs);
		font-size: var(--step-0);
		font-weight: var(--weight-semibold);
	}

	fieldset > div + div {
		margin-block-start: var(--space-s);
	}

	.form-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
	}

	.form-field label {
		font-size: var(--step--1);
		font-weight: var(--weight-medium);
		line-height: var(--leading-sm-compact);
		color: var(--body-foreground);
	}

	.form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--space-s);
	}

	.form-grid-3 {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}

	/* Form controls — 14px text in a 32px control (padding sets the height,
	   see the interactive line-height rule in base) */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	input[type="number"],
	input:not([type]),
	select,
	textarea {
		width: 100%;
		padding: var(--space-2xs) var(--space-xs);
		font-family: inherit;
		font-size: var(--step--1);
		color: var(--body-foreground);
		background: var(--surface-raised);
		border: var(--border);
		border-radius: 0;
		outline: none;
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);
	}

	:where(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="date"],
		input[type="number"],
		input:not([type]),
		select,
		textarea
	):where(:focus, :focus-visible) {
		border-color: var(--color-brand);
		box-shadow: 0 0 0 3px var(--color-brand-alpha);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--body-muted);
	}

	select {
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--space-xs) center;
		padding-inline-end: var(--space-l);
	}

	textarea {
		resize: vertical;
		min-height: 5rem;
	}

	.required {
		color: var(--danger-foreground);
	}

	.form-error {
		color: var(--danger-foreground);
	}

	[aria-invalid="true"] {
		border-color: var(--danger-foreground);
	}

	/* PWYW Slider */
	input[type="range"].input-slider,
	.slider-labels {
		width: 50%;
	}

	input[type="range"].input-slider {
		height: var(--space-2xs);
		border-radius: var(--radius-s);
		background: var(--surface-border);
		cursor: pointer;
		accent-color: var(--color-brand);
	}

	input[type="range"].input-slider:focus {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* Form actions and button overrides */
	.form-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-xs);
		margin-block-start: var(--space-s);
	}

	.form-profile .btn {
		margin-block-start: var(--space-s);
	}

	.form-profile .form-actions .btn {
		margin-block-start: 0;
	}

	#save-status {
		margin-block-start: var(--space-2xs);
		color: var(--body-muted);
		font-style: italic;
	}

	/* ─── Dialogs ─────────────────────────────────────────────────────────────── */

	dialog {
		margin: auto;
		max-width: min(90vw, 28rem);
		width: 100%;
		border: none;
		box-shadow: var(--shadow-dialog);
		opacity: 0;
		transform: translateY(var(--space-2xs));
		transition:
			opacity var(--transition-fast),
			transform var(--transition-fast),
			overlay var(--transition-fast) allow-discrete,
			display var(--transition-fast) allow-discrete;
	}

	dialog[open] {
		opacity: 1;
		transform: translateY(0);
	}

	@starting-style {
		dialog[open] {
			opacity: 0;
			transform: translateY(var(--space-2xs));
		}
	}

	dialog::backdrop {
		background: oklch(0 0 0 / 0);
		transition:
			background var(--transition-fast),
			overlay var(--transition-fast) allow-discrete,
			display var(--transition-fast) allow-discrete;
	}

	dialog[open]::backdrop {
		background: oklch(0 0 0 / 0.5);
	}

	@starting-style {
		dialog[open]::backdrop {
			background: oklch(0 0 0 / 0);
		}
	}

	.dialog-content {
		padding: var(--space-m);
	}

	.dialog-content h3 {
		margin-block-end: var(--space-2xs);
		font-size: var(--step-1);
	}

	.dialog-content p {
		margin-block-end: var(--space-m);
		color: var(--body-muted);
	}

	.dialog-content .btn {
		margin-block-start: 0;
	}

	/* ─── Content diagrams (context model + ACT matrix) ───────────────────────── */

	.model {
		border: var(--border);
		padding: var(--space-s);
		margin-block: var(--space-m);
		margin-inline: 0;
	}

	.model-title {
		text-align: center;
		font-weight: var(--weight-semibold);
		font-size: var(--step-1);
		line-height: var(--leading-lg);
		letter-spacing: var(--tracking-wider);
		color: var(--body-muted);
	}

	.model-subtitle {
		text-align: center;
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		color: var(--body-muted);
		margin-block-end: var(--space-s);
	}

	.model-axis {
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
		color: var(--body-muted);
		text-align: center;
	}

	.model-axis strong {
		font-weight: var(--weight-semibold);
		color: var(--body-foreground);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.model-axis--top {
		margin-block-end: var(--space-2xs);
	}

	.model-axis--bottom {
		margin-block-start: var(--space-2xs);
	}

	.model-quadrants {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		text-align: center;
	}

	.model-quad {
		padding: var(--space-s);
	}

	.model-quad--tl,
	.model-quad--tr {
		border-block-end: var(--border);
		padding-block-end: var(--space-xl);
	}

	.model-quad--bl,
	.model-quad--br {
		padding-block-start: var(--space-xl);
	}

	.model-quad--tl,
	.model-quad--bl {
		border-inline-end: var(--border);
	}

	.model-hub {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--body-background);
		border: var(--border);
		border-radius: 50%;
		width: 6.5rem;
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		font-weight: var(--weight-semibold);
		font-size: var(--step--1);
		color: var(--body-foreground);
	}

	.model-axis--away,
	.model-axis--toward {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: var(--body-background);
		padding-inline: var(--space-2xs);
	}

	.model-axis--away {
		left: 0;
	}

	.model-axis--toward {
		right: 0;
	}

	.model-card-title {
		font-weight: var(--weight-semibold);
		color: var(--body-foreground);
	}

	.model-card-subtitle {
		color: var(--body-muted);
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	.model-card-body {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		color: var(--body-muted);
		margin-block-start: var(--space-2xs);
	}

	.model-tag {
		display: inline-block;
		border: var(--border);
		padding: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--2);
		font-weight: var(--weight-semibold);
		color: var(--body-foreground);
		margin-block-start: var(--space-2xs);
	}

	.model-footer {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
		color: var(--body-muted);
		text-align: left;
		padding-block-start: var(--space-m);
		max-width: 36rem;
		margin-inline: auto;
	}

	.model-flow {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-s);
		margin-block-start: var(--space-s);
	}

	.model-stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 26rem;
	}

	.model-stage svg {
		width: 13rem;
		margin-block-end: var(--space-3xs);
	}

	.model-stage--good {
		--stage-accent: var(--color-member);
	}

	.model-stage--bad {
		--stage-accent: var(--danger-foreground);
	}

	.model-stage--good .model-card-title,
	.model-stage--bad .model-card-title {
		color: var(--stage-accent);
	}

	.model-fork {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: var(--space-s);
		width: 100%;
		margin-block-start: var(--space-3xs);
	}

	.model-fork .model-stage {
		margin-inline: auto;
	}

	.model-branch {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-s);
	}

	@media (width < 40rem) {
		.model-card-title {
			font-size: var(--step--1);
		}

		.model-card-subtitle,
		.model-card-body {
			font-size: var(--step--2);
			line-height: var(--leading-xs-compact);
		}

		.model-hub {
			width: 5rem;
			font-size: var(--step--2);
		}

		.model-fork {
			grid-template-columns: 1fr;
			gap: var(--space-m);
		}
	}

	/* ─── Mobile chrome ───────────────────────────────────────────────────────── */

	@media (width < 40rem) {
		/* Tap targets — dialogs, forms, and chart controls */
		dialog .btn,
		.form-profile .btn,
		.chart-range-btn {
			min-block-size: var(--touch-target-min);
		}

		/* Dialog → bottom sheet */
		dialog {
			position: fixed;
			inset: auto 0 0;
			margin: 0;
			max-width: 100%;
			max-height: 90dvh;
			overflow-y: auto;
			transform: translateY(100%);
			border-radius: var(--space-s) var(--space-s) 0 0;
		}

		dialog[open] {
			transform: translateY(0);
		}

		@starting-style {
			dialog[open] {
				transform: translateY(100%);
			}
		}
	}
}

/* =============================================================================
   PAGES LAYER - Page-specific patterns (journal, admin) that are not reused
   across the site
   ============================================================================= */

@layer pages {
	/* ─── Journal entries ─────────────────────────────────────────────────────── */

	#entries-body {
		display: grid;
		grid-template-columns: auto auto auto 1fr auto auto auto auto auto;
		column-gap: var(--space-xs);
		font-size: var(--step--1);
		line-height: var(--leading-sm-compact);
	}

	.entry-row {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: center;
		padding: var(--space-2xs) var(--space-xs);
		border-block-end: var(--border);
		transition: background var(--transition-fast);
	}

	@media (hover: hover) {
		.entry-row:not(.entry-row--header):hover {
			background: var(--surface-tint);
		}
	}

	.entry-row--header {
		font-weight: var(--weight-semibold);
		font-size: var(--step--2);
		color: var(--body-muted);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		margin-block-end: var(--space-3xs);
	}

	#empty-row {
		grid-column: 1 / -1;
		padding: var(--space-xs);
	}

	.entry-row--empty {
		color: var(--body-muted);
	}

	.entry-row__date {
		font-weight: var(--weight-medium);
		white-space: nowrap;
	}

	.entry-row__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs);
		font-size: var(--step--2);
	}

	.tag-chip {
		border: var(--border);
		box-sizing: content-box;
		font-size: var(--step--3);
		font-weight: var(--weight-medium);
	}

	.entry-row__weight,
	.entry-row__event,
	.entry-row__notes {
		color: var(--body-muted);
	}

	.entry-row__event,
	.entry-row__notes {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.entry-row__weight,
	.entry-row__dc,
	.entry-row__wm {
		font-variant-numeric: tabular-nums;
		text-align: right;
	}

	.col-right {
		text-align: right;
	}

	.col-center {
		text-align: center;
	}

	.entry-row__weight {
		white-space: nowrap;
	}

	/* Quick-log inputs — width, type size, and placeholder color come from the
	   sitewide form-control rules */
	.ql-weight-input {
		appearance: textfield;
	}

	.ql-weight-input::-webkit-inner-spin-button,
	.ql-weight-input::-webkit-outer-spin-button {
		display: none;
	}

	.entry-row__dc,
	.entry-row__wm {
		white-space: nowrap;
		font-size: var(--step--2);
	}

	.entry-row__wm {
		color: var(--body-muted);
	}

	.entry-row__action {
		text-align: right;
	}

	/* Indicators */
	.indicator {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--indicator-size);
		height: var(--indicator-size);
		line-height: var(--leading-none);
		vertical-align: middle;
	}

	.entry-row__dc .indicator,
	.entry-row__wm .indicator {
		padding-inline: var(--space-3xs);
	}

	.dc-down {
		background: var(--journal-weight-down);
	}

	.dc-up {
		background: var(--journal-weight-up);
	}

	.dc-zero {
		background: var(--body-background);
	}

	/* Single-indicator column wrappers */
	.entry-row__rec,
	.entry-row__est,
	.entry-row__menses {
		width: var(--indicator-size);
		text-align: center;
	}

	.rec-worse {
		background: var(--journal-rec-worse);
	}

	.rec-same {
		background: var(--journal-rec-same);
	}

	.rec-better {
		background: var(--journal-rec-better);
	}

	.est-indicator {
		background: var(--journal-estradiol);
	}

	.menses-indicator {
		background: var(--journal-menses);
	}

	.badge-menses:has(input:checked) {
		background: var(--journal-menses);
		border-color: var(--journal-menses);
		color: var(--color-white);
	}

	#entry-tags-list {
		max-height: 6rem; /* 96px */
		overflow-y: auto;
	}

	/* ─── Weight chart ────────────────────────────────────────────────────────── */

	#weight-chart-container {
		margin-block: var(--space-s);
	}

	#weight-chart {
		position: relative;
	}

	#weight-chart svg {
		display: block;
		border: var(--border);
		background: var(--surface-raised);
	}

	#chart-tooltip {
		position: absolute;
		background: var(--surface-raised);
		border: var(--border);
		border-radius: var(--radius-s);
		padding: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
		pointer-events: none;
		white-space: nowrap;
		z-index: 10;
	}

	.chart-range-toggles {
		display: flex;
		gap: var(--space-3xs);
		margin-block-end: var(--space-2xs);
	}

	.chart-range-btn {
		font-size: var(--step--2);
		padding: var(--space-3xs) var(--space-xs);
	}

	.chart-range-btn.active {
		background: var(--color-brand);
		color: var(--color-white);
		border-color: var(--color-brand);
	}

	#load-more-container {
		text-align: center;
		margin-block-start: var(--space-m);
	}

	/* ─── Journal mobile: entries → card layout ───────────────────────────────── */

	@media (width < 40rem) {
		/* Override subgrid display — required to switch to card layout on mobile */
		#entries-body {
			display: block;
		}

		.entry-row--header {
			display: none;
		}

		.entry-row:not(.entry-row--header) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: var(--space-3xs);
			row-gap: var(--space-3xs);
			padding: var(--space-s) var(--space-xs);
		}

		.entry-row > :empty {
			display: none;
		}

		/* Force line break after date + action */
		.entry-row:not(.entry-row--header)::before {
			content: "";
			order: 3;
			flex-basis: 100%;
			height: 0;
		}

		/* Date + action on first line */
		.entry-row__date {
			order: 1;
			flex: 1;
		}

		.entry-row__action {
			order: 2;
			flex: 0 0 auto;
		}

		.entry-row__action .btn {
			min-block-size: var(--touch-target-min);
			min-inline-size: var(--touch-target-min);
		}

		/* Weight + change inline */
		.entry-row__weight {
			order: 10;
		}

		.entry-row__dc {
			order: 11;
		}

		/* Indicators inline: weight, change, indicators */
		.entry-row__dc,
		.entry-row__rec,
		.entry-row__est,
		.entry-row__menses {
			width: auto;
			text-align: left;
		}

		.entry-row__est {
			order: 20;
		}

		.entry-row__menses {
			order: 21;
		}

		.entry-row__rec {
			order: 22;
		}

		/* Tags, event, notes — full width rows */
		.entry-row__tags {
			order: 30;
			flex-basis: 100%;
		}

		.entry-row__event {
			order: 40;
			flex-basis: 100%;
			white-space: normal;
		}

		.entry-row__notes {
			order: 50;
			flex-basis: 100%;
			white-space: normal;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		/* Hide median on mobile */
		.entry-row__wm {
			display: none;
		}
	}

	/* ─── Admin: Gantt chart ──────────────────────────────────────────────────── */

	.gantt {
		--gantt-row-height: 1.75rem;
		--gantt-bar-min: 3px;
		--gantt-today-width: 2px;
		--gantt-tooltip-max-width: 260px;
		font-size: var(--step--1);
		line-height: var(--leading-sm-compact);
		margin-block-start: var(--space-s);
	}

	.gantt-stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-s);
		margin-block: var(--space-m);
	}

	.gantt-stat-card {
		padding: var(--space-xs) var(--space-s);
		background: var(--surface-lowered);
		border: var(--border);
	}

	.gantt-stat-value {
		font-size: var(--step-1);
		font-weight: var(--weight-semibold);
		color: var(--body-foreground);
		line-height: var(--leading-lg);
	}

	.gantt-stat-label {
		font-size: var(--step--2);
		color: var(--body-muted);
		margin-block-start: var(--space-3xs);
	}

	.gantt-legend {
		display: flex;
		gap: var(--space-s);
		margin-block-end: var(--space-s);
		flex-wrap: wrap;
		font-size: var(--step--2);
		color: var(--body-muted);
	}

	.gantt-legend-item {
		display: flex;
		align-items: center;
		gap: var(--space-3xs);
	}

	.gantt-legend-swatch {
		display: inline-block;
		width: var(--space-s);
		height: var(--space-2xs);
		border-radius: 2px;
		flex-shrink: 0;
	}

	.gantt-section-header {
		padding: var(--space-2xs) 0 var(--space-3xs);
		font-size: var(--step--2);
		font-weight: var(--weight-semibold);
		color: var(--body-muted);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		border-block-end: var(--border);
		margin-block-start: var(--space-l);
		margin-block-end: var(--space-3xs);
	}

	.gantt-section-header:first-child {
		margin-block-start: 0;
	}

	.gantt-section-header + .gantt-row .gantt-track {
		border-block-start: none;
	}

	.gantt-row {
		display: grid;
		grid-template-columns: var(--gantt-label-width, 200px) 1fr;
		min-height: var(--gantt-row-height);
		align-items: stretch;
	}

	.gantt-label {
		padding: var(--space-3xs) var(--space-xs) var(--space-3xs) 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		align-self: center;
	}

	.gantt-label--user {
		font-weight: var(--weight-medium);
		color: var(--body-foreground);
		padding-block-start: var(--space-2xs);
	}

	.gantt-label--sub {
		color: var(--body-muted);
		padding-inline-start: var(--space-xs);
		font-size: var(--step--2);
	}

	.gantt-track {
		position: relative;
		height: var(--gantt-row-height);
		border-block-end: var(--border);
		align-self: center;
	}

	.gantt-track--user {
		height: var(--space-2xs);
		border-block-end: none;
		border-block-start: var(--border);
	}

	.gantt-grid-line {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--surface-border);
	}

	.gantt-today-line {
		position: absolute;
		top: calc(var(--gantt-today-width) * -1);
		bottom: calc(var(--gantt-today-width) * -1);
		width: var(--gantt-today-width);
		background: var(--color-brand);
		opacity: 0.5;
		z-index: 1;
	}

	.gantt-bar {
		position: absolute;
		top: var(--space-3xs);
		height: calc(var(--gantt-row-height) - 2 * var(--space-3xs)); /* 20px in the 28px row */
		border-radius: var(--radius-s);
		min-width: var(--gantt-bar-min);
		cursor: default;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.gantt-bar-total {
		padding: 0 var(--space-3xs);
		font-size: var(--step--2);
		font-weight: var(--weight-semibold);
		color: var(--color-white);
		white-space: nowrap;
		pointer-events: none;
	}

	.gantt-bar--client {
		background: var(--color-brand);
	}

	.gantt-bar--member {
		background: var(--color-member);
	}

	.gantt-bar--ended {
		opacity: 0.4;
	}

	.gantt-bar--cancelled {
		opacity: 0.65;
		background-image: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 4px,
			oklch(0 0 0 / 0.2) 4px,
			oklch(0 0 0 / 0.2) 8px
		);
	}

	.gantt-bar--active-coaching {
		outline: 1px solid var(--color-brand);
		outline-offset: 1px;
	}

	.gantt-bar--active-member {
		outline: 1px solid var(--color-member);
		outline-offset: 1px;
	}

	.gantt-bar--scheduled {
		opacity: 0.3;
		outline: 2px dashed var(--color-brand);
		outline-offset: 1px;
	}

	.gantt-footer {
		display: grid;
		grid-template-columns: var(--gantt-label-width, 200px) 1fr;
		margin-block-start: var(--space-3xs);
	}

	.gantt-timeline {
		position: relative;
		height: 1.5rem; /* 24px */
	}

	.gantt-month-label {
		position: absolute;
		top: 0;
		font-size: var(--step--3);
		color: var(--body-muted);
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.gantt-summary {
		margin-block-start: var(--space-xs);
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
		color: var(--body-muted);
	}

	.gantt-tooltip {
		position: fixed;
		z-index: 9999;
		pointer-events: none;
		padding: var(--space-2xs) var(--space-xs);
		background: var(--surface-raised);
		border: var(--border);
		border-radius: var(--radius-s);
		box-shadow: var(--shadow-overlay);
		font-size: var(--step--2);
		line-height: var(--leading-xs-compact);
		max-width: var(--gantt-tooltip-max-width);
	}
}

/* =============================================================================
   UTILITIES LAYER - Helper classes (zero specificity with :where())
   Spacing modifiers are suffixed with the space token they apply
   (.stack-2xs = --space-2xs)
   ============================================================================= */

@layer utilities {
	/* Text */
	:where(.text-sm) {
		font-size: var(--step--1);
		line-height: var(--leading-sm);
	}

	:where(.text-muted) {
		color: var(--body-muted);
	}

	:where(.text-lead) {
		font-size: var(--step-1);
		line-height: var(--leading-lg);
	}

	/* Accessibility */
	:where(.u-visually-hidden) {
		position: absolute;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		border: none;
		overflow: hidden;
		white-space: nowrap;
		padding: 0;
	}

	/* Layout helpers */
	:where(.flex-1) {
		flex: 1;
	}

	:where(.list-none) {
		padding-inline-start: 0;
		list-style: none;
	}

	/* Block centred, fits its content */
	:where(.u-center) {
		display: block;
		margin-inline: auto;
		width: fit-content;
	}

	/* Flow — vertical rhythm for prose/long-form content */
	:where(.flow > * + *) {
		margin-block-start: var(--flow-space, var(--space-m));
	}

	/* Stack spacing overrides */
	:where(.stack-2xs) {
		--stack-space: var(--space-2xs);
	}

	:where(.stack-3xs) {
		--stack-space: var(--space-3xs);
	}

	/* Cluster spacing overrides */
	:where(.cluster-2xs) {
		--cluster-space: var(--space-2xs);
	}

	:where(.cluster-3xs) {
		--cluster-space: var(--space-3xs);
	}

	:where(.gap-2xs) {
		gap: var(--space-2xs);
	}

	/* Width utilities */
	:where(.w-4r) {
		width: 4rem;
	}
	:where(.w-5r) {
		width: 5rem;
	}
	:where(.w-7r) {
		width: 7rem;
	}
	:where(.w-8r) {
		width: 8rem;
	}
	:where(.w-full) {
		width: 100%;
	}

	/* Scrollable container capped at 200px */
	:where(.scroll-200) {
		max-height: 12.5rem;
		overflow-y: auto;
	}

	/* Pixel grid overlay — design aid, toggled via .grid-toggle in the footer.
	   4px minor / 24px major cells match the token scales ("fixed, 4px grid";
	   body baseline and --grid-gutter are 24px). Sized and centred exactly
	   like .container so gridlines anchor to it, not the viewport; the 24px
	   gutter is one major cell, so a major line also lands on the content edge.
	   Document-anchored: html carries data-grid, so positioning it makes the
	   absolute overlay span the full document and scroll with the content —
	   row 0 stays pinned to the top of the page, not the viewport. */
	html[data-grid="on"] {
		position: relative;
	}

	[data-grid="on"]::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline: 0;
		width: 100%;
		max-width: var(--grid-max-width);
		margin-inline: auto;
		z-index: 9999;
		pointer-events: none;
		background-image:
			linear-gradient(to right, var(--grid-line-major, rgb(255 0 128 / 0.35)) 1px, transparent 1px),
			linear-gradient(to bottom, var(--grid-line-major, rgb(255 0 128 / 0.35)) 1px, transparent 1px),
			linear-gradient(to right, var(--grid-line, rgb(255 0 128 / 0.12)) 1px, transparent 1px),
			linear-gradient(to bottom, var(--grid-line, rgb(255 0 128 / 0.12)) 1px, transparent 1px);
		background-size:
			24px 24px,
			24px 24px,
			4px 4px,
			4px 4px;
	}
}