/* ════════════════════════════════════════════════════════════════════════
   MSP UI layer: the design system of the MOBEX ServicePortal, brand-neutral.

   Two layers, always loaded together and in this order:
     1. a brand preset   themes/msp.css (reference) | themes/indigo.css | your own
        → defines only --brand-* ramps, font, ink. No component knows a hex.
     2. this file        semantic tokens (which rung does which job, light and
        dark), base rules, component classes, motion. Identical for every brand.

   Extracted from Mx.FrontendReact/src/styles.css (main of 20.10.2026,
   feat/frontend-react-rebuild @ 9ae08b399), cleaned of app-specific selectors.
   Rules and reasons: ../references/*.md. React sources: see SKILL.md.

   ── Plain HTML ──────────────────────────────────────────────────────────
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap">
     <link rel="stylesheet" href="themes/msp.css">
     <link rel="stylesheet" href="msp-ui.css">
     <script src="morph-panel.js"></script>   (every overlay is a morph panel)
     <script>  (pre-paint: no light flash for dark users)
       try { if (localStorage.getItem('msp-theme') === 'dark') document.documentElement.classList.add('dark') } catch {}
     </script>
   Self-hosted instead (as MSP does): npm i @fontsource/lato and import
   '@fontsource/lato/400.css', '400-italic.css', '700.css'. Only 400 and 700:
   the hierarchy is size plus 400/700, never a 500 or 600.

   ── Tailwind v4 ─────────────────────────────────────────────────────────
     @import "tailwindcss";
     @import "./themes/msp.css";
     @import "./msp-ui.css";
     @import "./msp-tailwind.css";   (variants, @theme mapping, type-* utilities)

   ── Dark mode ───────────────────────────────────────────────────────────
   Class `.dark` on <html>. MSP starts light, the user toggles in the header,
   the choice persists (localStorage) and is applied before first paint. It
   does not follow prefers-color-scheme. Dark is a second assignment of the
   same ramps (navy page, lifted card), never an inversion.
   ════════════════════════════════════════════════════════════════════════ */

@layer base, components;

/* ── 1. Semantic tokens, light ─────────────────────────────────────────── */
:root {
	--font-sans: var(--brand-font, "Lato", system-ui, sans-serif);
	--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
	--ink: var(--brand-ink-rgb, 9, 27, 40);
	--shadow-tint: var(--brand-shadow-rgb, 102, 133, 153);

	/* Status ramps: semantic, shared by every brand (Petrol, Gelb, Rot from the
	   MOBEX Styleguide). A preset may override them; check-theme.mjs then
	   verifies contrast and that no status shares a hue with the primary. */
	--success-100: #c5eae7;
	--success-300: #6ac0ba;
	--success-400: #29aba4;
	--success-600: #217b76;
	--warning-100: #ffe5b5;
	--warning-200: #ffce7b;
	--warning-300: #feb729;
	--warning-400: #d19517;
	--warning-600: #8c6312;
	--warning-700: #6d4a00;
	--error-100: #ffd9d2;
	--error-300: #ff9c8e;
	--error-500: #de4f44;
	--error-600: #bf0711;

	/* Status dots (graphics; the word beside them carries the meaning). */
	--status-success: var(--success-400);
	--status-warning: var(--warning-400);
	--status-error: var(--error-600);
	/* Status as text (AA on the card in both themes). */
	--text-success: var(--success-600);
	--text-warning: var(--warning-600);
	--text-error: var(--error-600);
	--warning-badge-text: var(--warning-700);

	/* Surfaces and text. Recession below muted is size and weight, not a lighter grey. */
	--surface-page: var(--brand-neutral-100);
	--surface-card: #ffffff;
	--surface-elevated: var(--brand-neutral-100);
	--surface-muted: var(--brand-neutral-50);
	--text-heading: var(--brand-neutral-950);
	--text-body: var(--brand-neutral-700);
	--text-muted: var(--brand-neutral-600);
	--text-dimmed: var(--brand-neutral-600);
	/* The carrier: label-role text (column heads, eyebrows). Never clickable. */
	--text-label: var(--brand-carrier-500);
	--border-default: var(--brand-neutral-200);

	/* Interaction: the one acting hue. */
	--primary: var(--brand-primary-600);
	--primary-foreground: #ffffff;
	--primary-hover: var(--brand-primary-700);
	--primary-badge-text: var(--brand-primary-700);
	--link: var(--brand-primary-600);
	--ring: var(--brand-primary-500);
	--signal: var(--brand-primary-300);
	--signal-mark: var(--brand-primary-500);
	--destructive: var(--error-600);
	--destructive-foreground: #ffffff;

	/* Domains (optional): accent = domain 1, carrier = domain 2. As text, the 700 twin. */
	--domain-1: var(--brand-accent-400);
	--domain-2: var(--brand-carrier-500);
	--domain-text-1: var(--brand-accent-700);
	--domain-text-2: var(--brand-carrier-700);

	/* One categorical palette, handed out in order 2 → 3 → 4 → 5 → 1; 6 is "over". */
	--chart-1: var(--brand-primary-500);
	--chart-2: var(--brand-accent-600);
	--chart-3: var(--brand-carrier-500);
	--chart-4: var(--brand-cat-a-500);
	--chart-5: var(--brand-cat-b-500);
	--chart-6: var(--brand-neutral-550);
	--chart-grid: var(--brand-neutral-200);
	--chart-label: var(--brand-neutral-500);

	/* Brand-derived fills the components need. */
	--anchor-fill: var(--brand-primary-900);
	--avatar-fill: linear-gradient(135deg, var(--brand-primary-600), var(--brand-primary-800));
	--action-tile-from: var(--brand-primary-700);
	--action-tile-to: var(--brand-primary-800);
	--orb-1: var(--brand-carrier-500);
	--orb-2: var(--brand-primary-500);
	--backdrop: color-mix(in srgb, var(--brand-neutral-950) 38%, transparent);
	--segmented-separator: color-mix(in srgb, var(--brand-neutral-400) 45%, transparent);

	/* Shape: four radii, four meanings, plus round. */
	--radius-card: 24px;
	--radius-tile: 14px;
	--radius-control: 10px;
	--radius-chip: 6px;
	--radius-pill: 9999px;

	/* Rhythm: 4 in a control, 8 related, 14 between cards/rows, 18 card padding, 24/32 regions. */
	--space-hair: 4px;
	--space-xs: 8px;
	--space-base: 14px;
	--space-card: 18px;
	--space-lg: 24px;
	--space-xl: 32px;

	/* Shell. */
	--mx-sidebar-width: 236px;
	--mx-sidebar-width-rail: 72px;
	--mx-header-height: 58px;
	--mx-sticky-top: 86px; /* 14 + 58 + 14 */

	/* Material: glass (stage), opaque pop (overlay). */
	--gblur: 32px;
	--glass-border: rgba(255, 255, 255, 0.62);
	--glass-shadow: 0 18px 48px -12px rgba(var(--ink), 0.22), 0 6px 16px -8px rgba(var(--ink), 0.16);
	--card-glass: color-mix(in srgb, var(--surface-card) 78%, transparent);
	--card-glass-pop: var(--surface-card);
	--inset-fill: color-mix(in srgb, var(--text-heading) 6%, transparent);
	--option-hover: color-mix(in srgb, var(--primary) 10%, transparent);
	--combo-ring: 0 0 0 2px color-mix(in srgb, var(--primary) 38%, transparent);
	--combo-lift: 0 14px 30px -10px rgba(var(--ink), 0.28);
	--pinned-tint: color-mix(in srgb, var(--brand-neutral-100) 85%, var(--surface-card));
	--pinned-glass: color-mix(in srgb, var(--pinned-tint) 80%, transparent);
	--segmented-track: color-mix(in srgb, var(--brand-neutral-200) 65%, transparent);
	--segmented-track-inset: inset 0 1px 2px rgba(var(--ink), 0.06);
	--segmented-step-shadow: 0 1px 3px rgba(var(--ink), 0.14), 0 3px 8px rgba(var(--ink), 0.08);
	--input-shadow: 0 1px 2px rgba(var(--ink), 0.06), 0 8px 22px -10px rgba(var(--ink), 0.18);
	--product-plate: #ffffff;

	/* Four shadows are the whole vocabulary: glass, raised, raised-icon, gradient-primary. */
	--shadow-glass: var(--glass-shadow);
	--shadow-raised:
		0.3px 0.5px 0.7px rgba(var(--shadow-tint), 0.08), 0.8px 1.6px 2px rgba(var(--shadow-tint), 0.08),
		1.5px 3px 3.8px rgba(var(--shadow-tint), 0.08), 2.5px 5px 6.3px rgba(var(--shadow-tint), 0.08),
		4px 8px 10px rgba(var(--shadow-tint), 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(0, 0, 0, 0.04);
	--shadow-raised-icon:
		0.2px 0.4px 0.5px rgba(var(--shadow-tint), 0.06), 0.5px 1px 1.3px rgba(var(--shadow-tint), 0.06),
		1px 2px 2.5px rgba(var(--shadow-tint), 0.06), 1.8px 3.5px 4.4px rgba(var(--shadow-tint), 0.06),
		3px 6px 7.5px rgba(var(--shadow-tint), 0.07);
	--shadow-gradient-primary:
		0 6px 16px -4px color-mix(in srgb, var(--brand-primary-600) 30%, transparent),
		0 3px 8px -2px color-mix(in srgb, var(--brand-primary-800) 24%, transparent),
		0 1px 3px 0 color-mix(in srgb, var(--brand-primary-900) 16%, transparent),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);

	/* Motion. Every infinite loop reads --amb (paused under reduced motion). */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-morph: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 150ms;
	--dur-normal: 300ms;
	--dur-slow: 600ms;
	--dur-reveal: 320ms;
	--amb: running;

	--select-chevron: 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='%23758b90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

	/* shadcn/ui variable names, for React projects on shadcn (Base UI preset). */
	--background: var(--surface-page);
	--foreground: var(--text-body);
	--card: var(--surface-card);
	--card-foreground: var(--text-body);
	--popover: var(--surface-card);
	--popover-foreground: var(--text-body);
	--secondary: var(--brand-neutral-100);
	--secondary-foreground: var(--brand-neutral-700);
	--muted: var(--brand-neutral-100);
	--muted-foreground: var(--brand-neutral-500);
	--accent: var(--brand-primary-50);
	--accent-foreground: var(--brand-primary-700);
	--border: var(--border-default);
	--input: var(--border-default);
	--radius: var(--radius-control);
}

/* ── 1b. Semantic tokens, dark: a second assignment, measured on the card ── */
.dark {
	--surface-page: var(--brand-neutral-950);
	--surface-card: var(--brand-neutral-900);
	--surface-elevated: var(--brand-neutral-800);
	--surface-muted: var(--brand-neutral-900);
	--text-heading: var(--brand-neutral-50);
	--text-body: var(--brand-neutral-200);
	--text-muted: var(--brand-neutral-400);
	/* Up the ramp, not down: light text loses against a lighter ground. */
	--text-dimmed: var(--brand-neutral-425);
	--text-label: var(--brand-carrier-300);
	--border-default: color-mix(in srgb, #ffffff 12%, var(--surface-card));

	--status-success: var(--success-300);
	--status-warning: var(--warning-200);
	--status-error: var(--error-300);
	--text-success: var(--success-300);
	--text-warning: var(--warning-400);
	--text-error: var(--error-300);
	--warning-badge-text: var(--warning-300);

	/* The dark commit is primary-400 with an ink label; white on it would fail. */
	--primary: var(--brand-primary-400);
	--primary-foreground: var(--brand-neutral-950);
	--primary-hover: var(--brand-primary-300);
	--primary-badge-text: var(--brand-primary-200);
	--link: var(--brand-primary-400);
	--ring: var(--brand-primary-300);
	--signal: var(--brand-primary-200);
	--signal-mark: var(--signal);
	/* A fill, so it moves the other way from the lifted error text. */
	--destructive: var(--error-500);

	--domain-1: var(--brand-accent-400);
	--domain-2: var(--brand-carrier-400);
	--domain-text-1: var(--brand-accent-300);
	--domain-text-2: var(--brand-carrier-300);

	--chart-1: var(--brand-primary-400);
	--chart-2: var(--brand-accent-400);
	--chart-3: var(--brand-carrier-400);
	--chart-4: var(--brand-cat-a-400);
	--chart-5: var(--brand-cat-b-400);
	--chart-6: var(--brand-neutral-300);
	--chart-grid: var(--border-default);
	--chart-label: var(--brand-neutral-400);

	--glass-border: rgba(255, 255, 255, 0.14);
	--glass-shadow: 0 20px 54px -14px rgba(0, 0, 0, 0.6), 0 8px 20px -10px rgba(0, 0, 0, 0.45);
	--card-glass: color-mix(in srgb, var(--surface-card) 76%, transparent);
	/* A well recedes downward in both themes; dark mixes the ink, not black. */
	--inset-fill: rgba(var(--ink), 0.22);
	--pinned-tint: color-mix(in srgb, var(--surface-elevated) 30%, var(--surface-card));
	--segmented-track: color-mix(in srgb, var(--brand-neutral-950) 42%, transparent);
	--segmented-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.32);
	--segmented-step-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.28);
	--input-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -12px rgba(0, 0, 0, 0.5);
	--shadow-raised:
		0.3px 0.5px 0.7px rgba(20, 28, 31, 0.25), 0.8px 1.6px 2px rgba(20, 28, 31, 0.24),
		1.5px 3px 3.8px rgba(20, 28, 31, 0.23), 2.5px 5px 6.3px rgba(20, 28, 31, 0.22),
		4px 8px 10px rgba(20, 28, 31, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	--select-chevron: 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='%2393a5aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

	--secondary: var(--brand-neutral-800);
	--secondary-foreground: var(--brand-neutral-200);
	--muted: var(--brand-neutral-800);
	--muted-foreground: var(--brand-neutral-400);
	--accent: color-mix(in srgb, var(--brand-primary-400) 16%, transparent);
	--accent-foreground: var(--brand-primary-200);
}

/* The one dark anchor of a screen carries the accent's deepest rung; inside it
   the accent steps one rung lighter (it sits on its own 900). */
.dark.mx-anchor,
.mx-anchor.dark {
	--primary: var(--brand-primary-300);
	--link: var(--brand-primary-300);
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
@layer base {
	/* Tailwind preflight does this; plain-CSS apps need it for every width: 100% control. */
	*,
	::before,
	::after {
		box-sizing: border-box;
		border-color: var(--border-default);
	}
	/* `hidden` wins over component display rules (an enhanced native select stays hidden). */
	[hidden] {
		display: none !important;
	}
	html {
		font-family: var(--font-sans);
		-webkit-font-smoothing: antialiased;
	}
	body {
		margin: 0;
		background: var(--surface-page);
		color: var(--text-body);
		font-size: 13px;
		line-height: 20px;
	}
	/* Focus is an outline, never a box-shadow and never removed. */
	:focus-visible {
		outline: 2px solid var(--ring) !important;
		outline-offset: 2px;
		border-radius: var(--radius-chip);
	}
	/* Programmatic focus (a heading after navigation): the move is the announcement. */
	.mx-focus-quiet:focus-visible {
		outline: none !important;
	}
	/* A bare input inside a field shell hands its ring to the shell. */
	.mx-input :is(input, textarea):focus-visible,
	.mx-morph input:focus-visible {
		outline: none !important;
	}
	.mx-input:has(:is(input, textarea):focus-visible):not([data-popup-open]) {
		outline: 2px solid var(--ring);
		outline-offset: 2px;
	}
	button:not(:disabled),
	[role="button"] {
		cursor: pointer;
	}
	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}
	select:not([multiple]):not([size]),
	select:not([multiple])[size="1"] {
		appearance: none;
		background-image: var(--select-chevron) !important;
		background-repeat: no-repeat !important;
		background-position: right 0.7rem center !important;
		background-size: 16px 16px !important;
		padding-right: 2.25rem;
	}
	::selection {
		background: color-mix(in srgb, var(--signal) 35%, transparent);
	}
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	::-webkit-scrollbar-thumb {
		background: rgba(128, 150, 160, 0.35);
		border-radius: var(--radius-chip);
		border: 2px solid transparent;
		background-clip: content-box;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
	@supports not selector(::-webkit-scrollbar) {
		html {
			scrollbar-color: rgba(128, 150, 160, 0.45) transparent;
		}
	}
	/* No native chrome: no spin buttons, no search cross, own checkbox/radio. */
	input[type="number"] {
		appearance: textfield;
	}
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button,
	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
		appearance: none;
		margin: 0;
	}
	input:is([type="checkbox"], [type="radio"]):not(.sr-only) {
		appearance: none;
		display: inline-grid;
		place-content: center;
		flex: none;
		width: 1rem;
		height: 1rem;
		margin: 0;
		border: 1.5px solid color-mix(in srgb, var(--text-heading) 32%, transparent);
		background: var(--surface-card) center / 100% 100% no-repeat;
		box-shadow: var(--input-shadow);
		cursor: pointer;
		transition:
			background-color 120ms ease-out,
			border-color 120ms ease-out;
	}
	input[type="checkbox"]:not(.sr-only) {
		border-radius: 4px;
	}
	input[type="radio"]:not(.sr-only) {
		border-radius: 9999px;
	}
	input:is([type="checkbox"], [type="radio"]):not(.sr-only):hover:not(:disabled) {
		border-color: color-mix(in srgb, var(--primary) 60%, transparent);
	}
	input:is([type="checkbox"]:is(:checked, :indeterminate), [type="radio"]:checked):not(.sr-only) {
		border-color: var(--primary);
		background-color: var(--primary);
	}
	input[type="checkbox"]:checked:not(.sr-only) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.8 8.3 2.7 2.7 5.7-6'/%3E%3C/svg%3E");
	}
	input[type="checkbox"]:indeterminate:not(.sr-only) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
	}
	input[type="radio"]:checked:not(.sr-only) {
		background-image: radial-gradient(circle, white 0 28%, transparent 32%);
	}
	input:is([type="checkbox"], [type="radio"]):not(.sr-only):disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

/* ── 3. Components ──────────────────────────────────────────────────────── */
@layer components {
	/* Type roles: a size exists only as a role, and the leading ships with it.
	   Weight stays at the call site (400 or 700). */
	.type-display {
		font-size: 26px;
		line-height: 34px;
		letter-spacing: -0.01em;
	}
	.type-metric {
		font-size: 30px;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}
	.type-metric-md {
		font-size: 26px;
		line-height: 32px;
		font-variant-numeric: tabular-nums;
	}
	.type-metric-sm {
		font-size: 22px;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}
	.type-title {
		font-size: 15px;
		line-height: 22px;
	}
	.type-body {
		font-size: 13px;
		line-height: 20px;
	}
	.type-meta {
		font-size: 12px;
		line-height: 16px;
	}
	.type-label {
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
	}
	.type-mono {
		font-family: var(--font-mono);
		font-size: 12px;
		line-height: 16px;
	}
	/* The page h1: display role, inline so the subtitle shares its baseline. */
	.mx-display {
		display: inline;
		font-size: 26px;
		font-weight: 700;
		line-height: 34px;
		letter-spacing: -0.01em;
		color: var(--text-heading);
		margin: 0;
	}
	.mx-subtitle {
		display: inline;
		margin: 0 0 0 12px;
		font-size: 13px;
		line-height: 20px;
		color: var(--text-muted);
	}

	/* Text colour roles (plain CSS; Tailwind generates the same names). */
	.text-heading {
		color: var(--text-heading);
	}
	.text-body {
		color: var(--text-body);
	}
	.text-subtle {
		color: var(--text-muted);
	}
	.text-dimmed {
		color: var(--text-dimmed);
	}
	.text-label {
		color: var(--text-label);
	}
	.text-link {
		color: var(--link);
	}
	.text-error {
		color: var(--text-error);
	}
	.text-warning {
		color: var(--text-warning);
	}
	.text-success {
		color: var(--text-success);
	}
	.tabular {
		font-variant-numeric: tabular-nums;
	}

	/* ── Material: stage, work surface, overlay ── */
	.glass {
		background: var(--card-glass);
		backdrop-filter: blur(var(--gblur)) saturate(1.9);
		-webkit-backdrop-filter: blur(var(--gblur)) saturate(1.9);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-card);
		box-shadow:
			var(--glass-shadow),
			inset 0 1px 0 rgba(255, 255, 255, 0.55);
		transition: background 400ms;
	}
	.dark .glass {
		box-shadow:
			var(--glass-shadow),
			inset 0 1px 0 rgba(255, 255, 255, 0.12);
	}
	/* The same grade at rest: the default for tiles that only lie on the page. */
	.glass-quiet,
	.glass.glass-quiet {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}
	.dark .glass-quiet,
	.dark .glass.glass-quiet {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	/* What is read or edited: opaque, hairline, no blur, no drop. */
	.surface {
		background: var(--surface-card);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-card);
		transition: background 400ms;
	}
	/* What lies on top (menus, dialogs, toasts): opaque, strong drop. */
	.glass-pop {
		background: var(--card-glass-pop);
		border: 1px solid var(--glass-border);
		box-shadow:
			var(--glass-shadow),
			inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}
	/* Passive inset: filter tracks, note boxes, wells. Not for commands. */
	.glass-inset {
		background: var(--inset-fill);
		border: 1px solid var(--glass-border);
	}
	:is(button, a).glass-inset {
		transition:
			border-color 150ms ease-out,
			color 150ms ease-out,
			background-color 150ms ease-out;
	}
	:is(button, a).glass-inset:hover:not(:disabled, [aria-disabled="true"]) {
		border-color: color-mix(in srgb, var(--primary) 35%, transparent);
		background-color: color-mix(in srgb, var(--text-heading) 10%, transparent);
		color: var(--text-heading);
	}
	/* The one dark anchor per screen. Add `.dark` beside it. */
	.mx-anchor {
		background: var(--anchor-fill);
		border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
		border-radius: var(--radius-card);
		box-shadow: 0 8px 28px rgba(var(--ink), 0.22);
	}
	/* A card's inner block: grey fill, no blur, no shadow. Dark lifts instead. */
	.mx-tile {
		background: var(--inset-fill);
		border: 1px solid color-mix(in srgb, var(--text-heading) 5%, transparent);
		border-radius: var(--radius-tile);
	}
	.dark .mx-tile {
		background: color-mix(in srgb, #ffffff 6%, transparent);
		border-color: color-mix(in srgb, #ffffff 7%, transparent);
	}
	button.mx-tile:hover,
	.mx-tile:has(> a:hover) {
		background: color-mix(in srgb, var(--text-heading) 9%, transparent);
	}
	/* A tile that names its subject's colour: set --band-accent. */
	.mx-stat-band {
		background: color-mix(in srgb, var(--band-accent, var(--text-label)) 8%, transparent);
		border: 1px solid color-mix(in srgb, var(--band-accent, var(--text-label)) 22%, transparent);
		border-radius: var(--radius-tile);
	}
	.dark .mx-stat-band {
		background: color-mix(in srgb, var(--band-accent, var(--text-label)) 14%, transparent);
		border-color: color-mix(in srgb, var(--band-accent, var(--text-label)) 30%, transparent);
	}
	/* A control that rises off a tile. */
	.mx-raised {
		background: var(--surface-card);
		border: 1px solid color-mix(in srgb, var(--text-heading) 7%, transparent);
		box-shadow: var(--input-shadow);
	}
	:is(button, a).mx-raised:hover:not(:disabled, [aria-disabled="true"]) {
		background: color-mix(in srgb, var(--primary) 7%, var(--surface-card));
	}
	/* Card padding owned by the component: 18 in list/flow cards, 24/22 in detail cards. */
	.mx-card {
		padding: 18px;
	}
	.mx-detail-card {
		padding: 22px 24px;
	}
	/* Every card header is separated by a hairline, never a filled bar. */
	.card-hairline {
		border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 7%, transparent);
	}
	.mx-card-head {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-bottom: 14px;
		margin-bottom: 16px;
	}

	/* ── Status: a glowing dot plus a word, never a pill ── */
	.status-dot {
		display: inline-block;
		width: 7px;
		height: 7px;
		border-radius: 9999px;
		flex-shrink: 0;
		background: var(--dot-color, currentColor);
		box-shadow: 0 0 6px color-mix(in srgb, var(--dot-color, currentColor) 55%, transparent);
	}
	.status-dot--success {
		--dot-color: var(--status-success);
	}
	.status-dot--warning {
		--dot-color: var(--status-warning);
	}
	.status-dot--error {
		--dot-color: var(--status-error);
	}
	.status-dot--info {
		--dot-color: var(--primary);
	}
	.status-dot--neutral {
		--dot-color: var(--text-dimmed);
	}
	.mx-status {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--text-body);
	}
	/* The one outlined capsule: a deactivated reference. */
	.mx-state-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 1px 8px;
		border: 1px solid color-mix(in srgb, var(--status-warning) 45%, transparent);
		border-radius: 9999px;
		font-size: 12px;
		line-height: 16px;
		color: var(--text-body);
	}

	/* ── Commands ── */
	/* The filled primary commit: one per view. */
	.mx-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 36px;
		padding: 0 14px;
		border: 0;
		border-radius: var(--radius-tile);
		background: var(--primary);
		color: var(--primary-foreground);
		font-size: 13px;
		line-height: 20px;
		font-weight: 700;
		white-space: nowrap;
		box-shadow: var(--shadow-gradient-primary);
		transition:
			background-color 150ms,
			scale 150ms;
	}
	.mx-primary:hover:not(:disabled, [aria-disabled="true"]) {
		background: color-mix(in srgb, var(--primary) 86%, black);
	}
	.mx-primary:active:not(:disabled, [aria-disabled="true"]) {
		scale: 0.97;
	}
	/* Inert recedes in the label, never in the surface (no opacity). */
	.mx-primary:is(:disabled, [aria-disabled="true"]) {
		cursor: not-allowed;
		color: color-mix(in srgb, var(--primary-foreground) 72%, transparent);
	}
	.mx-primary--sm {
		height: 32px;
		padding: 0 12px;
		font-size: 12px;
		line-height: 16px;
	}
	.mx-primary--flow {
		width: 100%;
		height: auto;
		padding: 10px 14px;
	}
	/* The destructive commit: error fill, always behind a confirmation. */
	.mx-primary.mx-danger {
		background: var(--destructive);
		color: var(--destructive-foreground);
		box-shadow: none;
	}
	/* The second rank: outlined in the acting hue, no fill. At most four per header. */
	.mx-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 36px;
		padding: 0 14px;
		white-space: nowrap;
		border: 1.5px solid var(--link);
		border-radius: var(--radius-control);
		background: transparent;
		color: var(--link);
		font-size: 13px;
		line-height: 1;
		font-weight: 700;
		text-decoration: none;
		transition:
			transform 150ms var(--ease-out-expo),
			background-color 150ms var(--ease-out-expo);
	}
	.mx-action:hover {
		background: color-mix(in srgb, var(--primary) 10%, transparent);
	}
	.mx-action:active {
		transform: scale(0.97);
	}
	.mx-action.mx-danger,
	.mx-action.text-destructive {
		border-color: var(--destructive);
		color: var(--destructive);
	}
	.mx-action.mx-danger:hover {
		background: color-mix(in srgb, var(--destructive) 7%, transparent);
	}
	.mx-action:is(:disabled, [aria-disabled="true"]) {
		border-color: color-mix(in srgb, var(--text-heading) 18%, transparent);
		color: var(--text-dimmed);
		background: transparent;
		cursor: not-allowed;
		transform: none;
	}
	.mx-action--sm {
		height: 32px;
		padding: 0 13px;
		font-size: 12.5px;
	}
	/* The way out of a form or dialog: text only. */
	.mx-quiet {
		display: inline-flex;
		align-items: center;
		padding: 8px 14px;
		border: 0;
		border-radius: var(--radius-tile);
		background: transparent;
		color: var(--text-muted);
		font-size: 13px;
		line-height: 20px;
		font-weight: 700;
		transition: color 150ms;
	}
	.mx-quiet:hover {
		color: var(--text-heading);
	}
	/* Round glyph button (close, row command): 28–32px, label via aria-label. */
	.mx-icon-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 9999px;
		color: var(--text-muted);
		transition: color 150ms;
	}
	.mx-icon-button:not(.glass-inset) {
		border: 0;
		background: transparent;
	}
	.mx-icon-button:not(.glass-inset):hover {
		color: var(--text-heading);
		background: color-mix(in srgb, var(--text-heading) 8%, transparent);
	}
	.mx-icon-button.glass-inset:hover {
		filter: brightness(0.95);
	}
	/* The text link: link colour, underline on hover. */
	.mx-link {
		color: var(--link);
		font-weight: 700;
		text-decoration: none;
		text-underline-offset: 3px;
	}
	.mx-link:hover {
		text-decoration: underline;
	}
	/* The back pill of a detail screen. */
	.mx-back {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 8px 14px;
		border-radius: 9999px;
		font-weight: 700;
		color: var(--text-body);
		text-decoration: none;
	}

	/* ── Fields: raised, because an input is touchable ── */
	.mx-input {
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-height: 36px;
		padding: 8px 14px;
		background: var(--surface-card);
		border: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
		border-radius: var(--radius-control);
		box-shadow: var(--input-shadow);
		color: var(--text-heading);
		font-size: 13px;
		line-height: 20px;
		transition: border-color 150ms ease-out;
	}
	.mx-input::placeholder,
	.mx-input input::placeholder {
		color: var(--text-muted);
	}
	.mx-input:hover:not(:disabled, [data-disabled], [aria-invalid="true"], :focus-within) {
		border-color: color-mix(in srgb, var(--primary) 40%, transparent);
	}
	.mx-input:is(:disabled, [data-disabled]) {
		background: var(--inset-fill);
		box-shadow: none;
		cursor: not-allowed;
	}
	.mx-input[aria-invalid="true"] {
		border-color: color-mix(in srgb, var(--destructive) 45%, transparent);
	}
	/* Search fields are capsules; a shell holds a glyph plus a bare input. */
	.mx-input--pill {
		border-radius: 9999px;
	}
	.mx-input--shell {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.mx-input--shell > input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0;
		outline: none;
	}
	textarea.mx-input {
		min-height: 80px;
		resize: vertical;
	}
	/* The write form's field: label (label role), control, one line under it
	   that the error replaces. Prose under a field sits at body size. */
	.mx-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}
	.mx-field > label,
	.mx-field-label {
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-label);
	}
	.mx-field-hint {
		margin: 0;
		max-width: 68ch;
		font-size: 13px;
		line-height: 20px;
		color: var(--text-muted);
		min-height: 20px;
	}
	.mx-field-hint[data-error] {
		color: var(--text-error);
	}
	/* No hint, no line (MSP grows the line in with Expand when one arrives). */
	.mx-field-hint:empty {
		display: none;
	}
	/* The on/off control: a 38×22 track, role="switch" on a button. */
	.mx-switch {
		position: relative;
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		width: 38px;
		height: 22px;
		padding: 2px;
		box-sizing: border-box;
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		background: color-mix(in srgb, var(--text-heading) 10%, transparent);
		transition:
			background-color 150ms,
			border-color 150ms;
	}
	.mx-switch::before {
		content: "";
		width: 16px;
		height: 16px;
		border-radius: 9999px;
		background: var(--surface-card);
		box-shadow: var(--shadow-raised-icon);
		transition: transform 150ms;
	}
	.mx-switch::after {
		content: "";
		position: absolute;
		inset: -3px -4px;
	}
	.mx-switch[aria-checked="true"] {
		background: color-mix(in srgb, var(--primary) 70%, transparent);
	}
	.mx-switch[aria-checked="true"]::before {
		transform: translateX(16px);
	}
	.mx-switch:hover:not(:disabled) {
		border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	}

	/* ── Choice: one contiguous track, the active step a raised plate ── */
	.mx-segmented {
		display: inline-flex;
		flex-wrap: wrap;
		align-self: flex-start;
		border-radius: var(--radius-control);
		padding: 2px;
		background: var(--segmented-track);
		box-shadow: var(--segmented-track-inset);
	}
	.mx-segmented > :is(button, a) {
		position: relative;
		border: none;
		cursor: pointer;
		font-size: 12.5px;
		line-height: 1.4;
		font-weight: 400;
		color: var(--text-body);
		background: transparent;
		border-radius: var(--radius-control);
		padding: 8px 13px;
		text-decoration: none;
		transition: color 150ms;
	}
	.mx-segmented > :is(button, a) + :is(button, a)::before {
		content: "";
		position: absolute;
		left: -1px;
		top: 22%;
		bottom: 22%;
		width: 1px;
		background: var(--segmented-separator);
	}
	.mx-segmented > :is(button, a):hover {
		color: var(--text-heading);
	}
	.mx-segmented > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) {
		color: var(--text-heading);
		font-weight: 700;
		background: var(--surface-card);
		box-shadow: var(--segmented-step-shadow);
	}
	.mx-segmented > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"])::before,
	.mx-segmented > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) + :is(button, a)::before {
		opacity: 0;
	}
	.mx-segmented--compact > :is(button, a) {
		font-size: 11.5px;
		font-variant-numeric: tabular-nums;
		padding: 4px 10px;
	}
	/* Filter chip (toggle) and active-filter chip (removable). */
	.mx-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		background: color-mix(in srgb, var(--text-heading) 5%, transparent);
		color: var(--text-muted);
		font-size: 12px;
		line-height: 16px;
		font-weight: 700;
		transition: color 150ms;
	}
	.mx-chip:hover {
		color: var(--text-heading);
	}
	.mx-chip[aria-pressed="true"],
	.mx-chip--active {
		border-color: color-mix(in srgb, var(--primary) 30%, transparent);
		background: color-mix(in srgb, var(--primary) 12%, transparent);
		color: var(--text-heading);
	}
	.mx-chip--active {
		padding: 4px 6px 4px 10px;
	}
	.mx-chip--active > button {
		display: inline-flex;
		border: 0;
		padding: 0;
		background: none;
		border-radius: 9999px;
		color: var(--text-muted);
	}
	.mx-chip--active > button:hover {
		color: var(--text-error);
	}
	/* A count badge (numerals have no case). */
	.mx-count {
		display: inline-flex;
		align-items: center;
		padding: 1px 6px;
		border-radius: 9999px;
		background: color-mix(in srgb, var(--text-heading) 8%, transparent);
		font-size: 10.5px;
		line-height: 14px;
		font-weight: 700;
		color: var(--text-label);
		font-variant-numeric: tabular-nums;
	}

	/* ── Navigation ── */
	.mx-nav-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 7px 12px;
		border-radius: var(--radius-control);
		color: var(--text-body);
		font-size: 13px;
		line-height: 20px;
		text-decoration: none;
		transition: background 150ms;
	}
	.mx-nav-item > svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--text-muted);
	}
	.mx-nav-item:hover {
		background: color-mix(in srgb, var(--text-heading) 7%, transparent);
	}
	.mx-nav-item[aria-current="page"] {
		background: color-mix(in srgb, var(--primary) 16%, transparent);
		color: var(--text-heading);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
	}
	.mx-nav-item[aria-current="page"] > svg {
		color: var(--primary);
	}
	.mx-nav-item[aria-current="page"]:hover {
		background: color-mix(in srgb, var(--primary) 20%, transparent);
	}
	/* Section heading: label size, neutral (it folds, so it is a control). */
	.mx-nav-section {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 12px 0 4px;
		padding: 4px 12px;
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-body);
	}
	.mx-nav-section::after {
		content: "";
		flex: 1;
		height: 1px;
		background: color-mix(in srgb, var(--text-heading) 8%, transparent);
	}

	/* ── Data table on the work surface ── */
	.mx-table-wrap {
		overflow: auto;
		min-height: 0;
	}
	.mx-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 13px;
		line-height: 20px;
	}
	.mx-table th {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--surface-card);
		padding: 8px 10px 8px 0;
		text-align: left;
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-label);
		white-space: nowrap;
	}
	.mx-table td {
		white-space: nowrap;
		padding: 9px 10px 9px 0;
		border-top: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
		color: var(--text-body);
		vertical-align: middle;
	}
	.mx-table :is(th, td):first-child {
		padding-left: 18px;
	}
	.mx-table :is(th, td):last-child {
		padding-right: 18px;
	}
	.mx-table tbody tr {
		transition: background-color 150ms;
	}
	.mx-table tbody tr:hover {
		background: color-mix(in srgb, var(--text-heading) 6%, transparent);
	}
	.mx-table tbody tr[aria-selected="true"] {
		background: color-mix(in srgb, var(--primary) 12%, transparent);
	}
	.mx-table .num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
	/* Three tiers: identity/fact bold heading, value body, meta subtle 12px. */
	.mx-cell-strong {
		font-weight: 700;
		color: var(--text-heading);
	}
	.mx-cell-meta {
		display: block;
		font-size: 12px;
		line-height: 16px;
		color: var(--text-muted);
	}
	/* Below md a table folds into ledger cards: identity cell as title, every
	   other cell one line, label (data-label) left and value right. */
	@media (max-width: 767px) {
		.mx-table--fold thead {
			display: none;
		}
		.mx-table--fold,
		.mx-table--fold tbody {
			display: block;
		}
		.mx-table--fold tr {
			display: flex;
			flex-direction: column;
			gap: 4px;
			padding: 12px 16px;
			border-top: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
		}
		.mx-table--fold td,
		.mx-table--fold td:first-child,
		.mx-table--fold td:last-child {
			display: flex;
			align-items: baseline;
			gap: 4px;
			padding: 0;
			border: 0;
			text-align: right;
			white-space: normal;
		}
		.mx-table--fold td::before {
			content: attr(data-label);
			flex-shrink: 0;
			margin-right: auto;
			padding-right: 8px;
			text-align: left;
			font-family: var(--font-sans);
			letter-spacing: normal;
			font-size: 12px;
			line-height: 20px;
			color: var(--text-muted);
		}
		.mx-table--fold td:first-child {
			display: block;
			text-align: left;
			margin-bottom: 4px;
		}
		.mx-table--fold td:first-child::before {
			content: none;
		}
		.mx-table--fold td > .mx-cell-meta {
			display: inline;
		}
	}
	.mx-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding: 12px 18px;
	}
	.mx-table-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 18px;
		border-top: 1px solid color-mix(in srgb, var(--text-heading) 7%, transparent);
		font-size: 12px;
		line-height: 16px;
		color: var(--text-muted);
	}
	/* A horizontal scroller shows a shadow only on the side with more content. */
	.mx-scroll-shadow-x {
		background:
			linear-gradient(to right, var(--surface-card) 60%, transparent) left center,
			linear-gradient(to left, var(--surface-card) 60%, transparent) right center,
			radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text-heading) 20%, transparent), transparent)
				left center,
			radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text-heading) 20%, transparent), transparent)
				right center;
		background-repeat: no-repeat;
		background-size:
			30px 100%,
			30px 100%,
			13px 100%,
			13px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	/* ── Empty, loading, error: one shape, inside the card ── */
	.mx-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 18px 16px;
		text-align: center;
		font-size: 13px;
		line-height: 20px;
		color: var(--text-muted);
	}
	.mx-message > strong {
		color: var(--text-heading);
	}
	.mx-skeleton {
		display: block;
		border-radius: var(--radius-chip);
		background: color-mix(in srgb, var(--text-heading) 8%, transparent);
		animation-name: mx-pulse-soft;
		animation-duration: 1600ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-play-state: var(--amb);
	}
	/* An info note: inset box, 15px glyph, one sentence. */
	.mx-note {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 10px 12px;
		border-radius: var(--radius-control);
		background: var(--inset-fill);
		border: 1px solid var(--glass-border);
		color: var(--text-body);
	}

	/* ── Overlays ── */
	.mx-backdrop {
		position: fixed;
		inset: 0;
		z-index: 50;
		background: var(--backdrop);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		animation: mx-fade-in 200ms var(--ease-out-expo);
	}
	/* Dialog: centred popup from 768px, full-screen sheet below. Width via --dialog-width. */
	.dialog-surface {
		position: fixed;
		inset: 0;
		z-index: 51;
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		color: var(--text-body);
		animation: mx-dialog-in 200ms var(--ease-out-expo);
	}
	.dialog-surface > :nth-child(2):not(:last-child) {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
	/* A question is not a form: bottom sheet below md. */
	.dialog-surface.dialog-ask {
		top: auto;
		height: auto;
		max-height: 88vh;
		border-radius: var(--radius-tile) var(--radius-tile) 0 0;
	}
	.mx-dialog-head {
		padding: 14px 18px;
		border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 7%, transparent);
	}
	.mx-dialog-body {
		padding: 14px 18px;
	}
	.mx-dialog-foot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		padding: 14px 18px max(14px, env(safe-area-inset-bottom));
		border-top: 1px solid color-mix(in srgb, var(--text-heading) 9%, transparent);
	}
	@media (min-width: 768px) {
		.dialog-surface,
		.dialog-surface.dialog-ask {
			inset: auto;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			width: min(var(--dialog-width, 480px), calc(100vw - 28px));
			height: auto;
			max-height: min(var(--dialog-max-height, 760px), calc(100vh - 28px));
			border-radius: var(--radius-tile);
		}
		.dialog-surface > :nth-child(2):not(:last-child) {
			flex: 0 1 auto;
		}
		.mx-dialog-foot {
			padding-bottom: 14px;
		}
	}
	/* Slide-over: right panel, 380px (560 wide), sheet below md. */
	.mx-slide-over {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 51;
		display: flex;
		flex-direction: column;
		width: 100%;
		animation: mx-panel-in 260ms var(--ease-out-expo);
	}
	@media (min-width: 768px) {
		.mx-slide-over {
			max-width: 380px;
			border-radius: var(--radius-card) 0 0 var(--radius-card);
		}
		.mx-slide-over--wide {
			max-width: 560px;
		}
	}
	/* Toast: bottom right, one per write, status glyph, 5s / errors 10s. */
	.mx-toast-stack {
		position: fixed;
		right: 14px;
		bottom: 14px;
		z-index: 70;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: min(360px, calc(100vw - 28px));
	}
	.mx-toast {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 14px;
		border-radius: var(--radius-tile);
		animation: mx-toast-in 260ms var(--ease-out-expo);
	}
	/* The one tooltip (draws every title); never the browser's. */
	.mx-tooltip {
		position: fixed;
		z-index: 70;
		max-width: min(320px, calc(100vw - 16px));
		padding: 5px 9px;
		border-radius: var(--radius-control);
		background: var(--surface-card);
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--text-heading) 10%, transparent),
			0 10px 24px -10px rgba(var(--ink), 0.28);
		color: var(--text-heading);
		font-size: 12px;
		line-height: 16px;
		pointer-events: none;
	}
	/* ── Morph overlay (The Morph-Overlay Rule): every overlay opened from a
	   trigger grows out of the trigger's real box and corners and shrinks back
	   into it. Open 300ms on cubic-bezier(0.22,1,0.36,1), no overshoot; close
	   160ms accelerating away, then unmount. Geometry (top/left/width/height/
	   radius) is set by the script: assets/morph-panel.js or React MorphPanel. ── */
	.mx-morph {
		position: fixed;
		z-index: 60;
		overflow: hidden;
		outline: none;
		background: var(--surface-card);
		box-shadow: var(--combo-ring), var(--combo-lift);
		transition-property: top, left, width, height, border-radius;
		transition-duration: 300ms;
		transition-timing-function: var(--ease-morph);
	}
	.mx-morph[data-closing] {
		transition-duration: 160ms;
		transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	}
	/* The list under the head: a hairline between them, on the side facing the list. */
	.mx-morph-body {
		position: absolute;
		overscroll-behavior: contain;
		border-top: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
	}
	.mx-morph[data-side="top"] .mx-morph-body {
		border-top: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
	}
	/* The entries settle in one after another once the card has grown. */
	.mx-morph[data-grown]:not([data-closing]) .mx-morph-body > div > * {
		animation: mx-morph-entry 220ms var(--ease-out-expo) both;
		animation-delay: 70ms;
	}
	.mx-morph[data-grown] .mx-morph-body > div > :nth-child(2) {
		animation-delay: 95ms;
	}
	.mx-morph[data-grown] .mx-morph-body > div > :nth-child(3) {
		animation-delay: 120ms;
	}
	.mx-morph[data-grown] .mx-morph-body > div > :nth-child(n + 4) {
		animation-delay: 145ms;
	}
	/* A head at the trigger's own size (glyph, short field) stands still while
	   the card grows past it; a panel beside a container uncovers its content. */
	.mx-morph-head-at,
	.mx-morph-aside-body {
		transition: translate 300ms var(--ease-morph);
	}
	.mx-morph[data-closing] .mx-morph-aside-body,
	.mx-morph[data-closing] .mx-morph-head-at {
		transition-duration: 160ms;
		transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	}
	/* The copy of the trigger in the head is a picture: no own edge or drop. */
	.mx-morph-head {
		cursor: pointer;
	}
	.mx-morph-head :is(.mx-input, .mx-combo, .mx-action),
	.mx-morph-head-at .mx-input {
		border-color: transparent;
		box-shadow: none;
		background: transparent;
	}
	/* The chevron turns while open. */
	.mx-morph-chevron {
		flex-shrink: 0;
		transition: rotate 240ms var(--ease-out-expo);
	}
	.mx-morph[data-grown]:not([data-closing]) .mx-morph-chevron {
		rotate: 180deg;
	}
	/* A field that opens a list is the head of the growing card: open, it drops
	   its edge and drop, the corners facing the list go square. */
	.mx-combo {
		display: flex;
		align-items: center;
		gap: 8px;
		text-align: left;
		transition:
			box-shadow 160ms var(--ease-out-expo),
			border-radius 160ms var(--ease-out-expo);
	}
	.mx-combo > .mx-combo-value {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mx-combo[data-popup-open] {
		border-color: transparent;
		box-shadow: none;
	}
	.mx-combo[data-popup-open][data-popup-side="bottom"] {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.mx-combo[data-popup-open][data-popup-side="top"] {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.mx-combo[data-popup-open] .mx-morph-chevron {
		rotate: 180deg;
	}
	/* The Base UI variant (React SelectMenu / RecordCombobox with MorphFieldCard):
	   the popup lies over its field (sideOffset = minus the anchor height), the
	   field shows through the head band, the card grows to the list, and the list
	   is uncovered by a clip moving with the card's edge, never reflowed. */
	.mx-morph-pop {
		--morph-radius: var(--radius-control);
		position: relative;
		display: flex;
		flex-direction: column;
		pointer-events: none;
		transition: opacity 160ms linear;
	}
	.mx-morph-pop[data-side="top"] {
		flex-direction: column-reverse;
	}
	.mx-morph-pop[data-ending-style] {
		opacity: 0.999;
	}
	.mx-morph-pop[data-closed]:not([data-ending-style]) {
		visibility: hidden;
	}
	.mx-morph-card {
		position: absolute;
		inset-inline: 0;
		height: 100%;
		box-shadow: var(--combo-ring), var(--combo-lift);
		transition-property: height, border-radius;
		transition-duration: 300ms;
		transition-timing-function: var(--ease-morph);
	}
	.mx-morph-pop[data-side="bottom"] .mx-morph-card {
		top: 0;
		border-radius: var(--morph-radius) var(--morph-radius) var(--radius-tile) var(--radius-tile);
	}
	.mx-morph-pop[data-side="top"] .mx-morph-card {
		bottom: 0;
		border-radius: var(--radius-tile) var(--radius-tile) var(--morph-radius) var(--morph-radius);
	}
	.mx-morph-pop:is([data-starting-style], [data-ending-style], [data-closed]) .mx-morph-card {
		height: var(--anchor-height);
		border-radius: var(--morph-radius);
	}
	.mx-morph-pop .mx-morph-head {
		flex: none;
		height: var(--anchor-height);
	}
	.mx-morph-list {
		position: relative;
		min-height: 0;
		pointer-events: auto;
		background: var(--surface-card);
		transition: clip-path 300ms var(--ease-morph);
	}
	.mx-morph-pop[data-side="bottom"] .mx-morph-list {
		border-top: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
		border-radius: 0 0 var(--radius-tile) var(--radius-tile);
		clip-path: inset(0);
	}
	.mx-morph-pop[data-side="top"] .mx-morph-list {
		border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
		border-radius: var(--radius-tile) var(--radius-tile) 0 0;
		clip-path: inset(0);
	}
	.mx-morph-pop[data-side="bottom"]:is([data-starting-style], [data-ending-style], [data-closed]) .mx-morph-list {
		clip-path: inset(0 0 100% 0);
	}
	.mx-morph-pop[data-side="top"]:is([data-starting-style], [data-ending-style], [data-closed]) .mx-morph-list {
		clip-path: inset(100% 0 0 0);
	}
	.mx-morph-pop[data-ending-style] :is(.mx-morph-card, .mx-morph-list) {
		transition-duration: 160ms;
		transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	}
	.mx-morph-pop[data-open] .mx-morph-list > * {
		animation: mx-morph-entry 220ms var(--ease-out-expo) 70ms both;
	}
	/* A clicked Base UI popover unfolds out of the edge facing its trigger. */
	.mx-unfold {
		clip-path: inset(-24px -24px -44px -24px round var(--radius-tile));
		transition:
			clip-path 220ms var(--ease-out-expo),
			opacity 160ms ease-out;
	}
	.mx-unfold[data-ending-style] {
		transition-duration: 150ms;
		transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	}
	.mx-unfold:is([data-starting-style], [data-ending-style]) {
		opacity: 0;
		clip-path: inset(0 0 100% 0 round var(--radius-tile));
	}
	.mx-unfold[data-side="top"]:is([data-starting-style], [data-ending-style]) {
		clip-path: inset(100% 0 0 0 round var(--radius-tile));
	}
	@media (prefers-reduced-motion: reduce) {
		.mx-morph,
		.mx-morph[data-closing],
		.mx-morph .mx-morph-head-at,
		.mx-morph .mx-morph-aside-body,
		.mx-morph-chevron,
		.mx-combo,
		.mx-morph-pop,
		.mx-morph-card,
		.mx-morph-list {
			transition: none;
		}
		.mx-morph[data-grown] .mx-morph-body > div > *,
		.mx-morph-pop[data-open] .mx-morph-list > * {
			animation: none;
		}
	}
	/* The head row of a grown menu: label left, chevron on the right edge. */
	.mx-morph-row {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		height: 100%;
		padding: 0 16px;
		box-sizing: border-box;
		font-size: 13px;
		line-height: 20px;
		font-weight: 700;
		color: var(--text-heading);
	}
	/* A menu entry: label over an optional one-line description, 44px floor. */
	.mx-menu-entry {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		width: 100%;
		min-height: 44px;
		padding: 8px 11px;
		border: 0;
		border-radius: var(--radius-control);
		background: transparent;
		text-align: left;
		color: var(--text-body);
		transition: background-color 150ms;
	}
	.mx-menu-entry:hover,
	.mx-menu-entry:focus-visible {
		background: var(--option-hover);
	}
	.mx-menu-entry.mx-danger {
		color: var(--text-error);
	}
	/* A group label inside a morph list. */
	.mx-option-group {
		padding: 8px 10px 4px;
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-label);
	}
	/* The calendar of a morph date field (never the browser's date popup). */
	.mx-cal {
		padding: 6px 4px 4px;
	}
	.mx-cal-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 2px 6px;
		font-weight: 700;
		color: var(--text-heading);
	}
	.mx-cal-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 2px;
		text-align: center;
	}
	.mx-cal-grid > abbr {
		padding: 4px 0;
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: 0.08em;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--text-label);
	}
	.mx-cal-day {
		height: 34px;
		border: 0;
		border-radius: var(--radius-control);
		background: transparent;
		color: var(--text-heading);
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}
	.mx-cal-day:hover {
		background: var(--option-hover);
	}
	.mx-cal-day[data-outside] {
		color: var(--text-dimmed);
	}
	.mx-cal-day[data-today] {
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
	}
	.mx-cal-day[aria-selected="true"] {
		background: var(--primary);
		color: var(--primary-foreground);
		font-weight: 700;
	}
	/* An option row in any overlay list. */
	.mx-option {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 8px 10px;
		border: 0;
		border-radius: var(--radius-control);
		background: transparent;
		text-align: left;
		font-size: 13px;
		line-height: 20px;
		color: var(--text-heading);
	}
	.mx-option:hover,
	.mx-option[data-highlighted] {
		background: var(--option-hover);
	}
	.mx-option[aria-selected="true"] {
		font-weight: 700;
	}
	.mx-option > .mx-option-check {
		margin-left: auto;
		color: var(--primary);
		visibility: hidden;
	}
	.mx-option[aria-selected="true"] > .mx-option-check {
		visibility: visible;
	}
	.mx-option[aria-disabled="true"] {
		color: var(--text-dimmed);
		cursor: not-allowed;
	}
	.mx-option.mx-danger {
		color: var(--text-error);
	}
	@media (max-width: 767px), (pointer: coarse) {
		.mx-option {
			min-height: 44px;
		}
	}

	/* ── Shell ── */
	.mx-shell-sidebar {
		position: fixed;
		top: 14px;
		bottom: 14px;
		left: 14px;
		z-index: 40;
		display: flex;
		flex-direction: column;
		width: var(--mx-sidebar-width);
		padding: 14px;
		box-sizing: border-box;
	}
	.mx-shell-main {
		position: fixed;
		inset: 0;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-gutter: stable;
		padding: 0 16px 14px;
	}
	@media (min-width: 768px) {
		.mx-shell-main {
			left: calc(var(--mx-sidebar-width) + 28px);
			padding-left: 0;
		}
	}
	@media (max-width: 767px) {
		.mx-shell-sidebar {
			display: none;
		}
	}
	.mx-header {
		position: sticky;
		top: 14px;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 14px;
		height: var(--mx-header-height);
		margin-top: 14px;
		padding: 0 18px;
		border-radius: var(--radius-tile);
	}
	.mx-page {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 14px;
	}
	.mx-page-header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		min-height: 36px;
		padding: 0 2px;
	}
	.mx-page-header-actions {
		margin-left: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 8px;
	}
	@media (max-width: 639px) {
		.mx-subtitle {
			display: block;
			margin: 4px 0 0;
		}
	}
	/* Dashboard and record detail: content left, rail right from 1280px. */
	.mx-two-zone {
		--mx-rail: clamp(392px, 27vw, 470px);
		display: grid;
		align-items: start;
		gap: 14px;
	}
	.mx-two-zone > * {
		min-width: 0;
	}
	@media (min-width: 1280px) {
		.mx-two-zone {
			grid-template-columns: minmax(0, 1fr) var(--mx-rail);
		}
	}
	/* The ground: page colour, two ambient orbs, a quiet dot grid. */
	.mx-ground {
		position: fixed;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		background: var(--surface-page);
	}
	.mx-orb {
		position: absolute;
		border-radius: 9999px;
		background: radial-gradient(
			circle,
			color-mix(in srgb, var(--orb-color, var(--orb-1)) var(--orb-strength, 32%), transparent),
			transparent 70%
		);
		filter: blur(80px);
		animation-name: glass-drift;
		animation-duration: 30s;
		animation-timing-function: var(--ease-smooth);
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-play-state: var(--amb);
	}
	.mx-app-dots {
		position: absolute;
		inset: 0;
		background-image: radial-gradient(color-mix(in srgb, var(--text-heading) 11%, transparent) 1px, transparent 1px);
		background-size: 18px 18px;
		-webkit-mask-image: radial-gradient(150% 130% at 20% 10%, black 50%, transparent 100%);
		mask-image: radial-gradient(150% 130% at 20% 10%, black 50%, transparent 100%);
	}
	.dark .mx-app-dots {
		background-image: radial-gradient(color-mix(in srgb, var(--text-heading) 7%, transparent) 1px, transparent 1px);
	}
	.dot-pattern {
		background-image: radial-gradient(color-mix(in srgb, var(--text-heading) 22%, transparent) 1px, transparent 1px);
		background-size: 22px 22px;
		-webkit-mask-image: radial-gradient(480px 300px at 88% 10%, black, transparent 72%);
		mask-image: radial-gradient(480px 300px at 88% 10%, black, transparent 72%);
		opacity: 0.5;
	}
	/* Action tile: the screen's one deep brand surface (add `.dark`). */
	.mx-action-tile {
		background: linear-gradient(
			150deg,
			color-mix(in srgb, var(--action-tile-from) 94%, transparent),
			color-mix(in srgb, var(--action-tile-to) 96%, transparent) 70%
		);
		backdrop-filter: blur(var(--gblur)) saturate(1.6);
		-webkit-backdrop-filter: blur(var(--gblur)) saturate(1.6);
		border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
		border-radius: var(--radius-card);
		box-shadow:
			0 12px 30px -16px rgba(var(--ink), 0.35),
			inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent);
	}
	.mx-avatar-fill {
		background: var(--avatar-fill);
		color: #ffffff;
	}

	/* ── Gaps (validation in a flow): edge plus 7% tint, never a left border ── */
	.mx-gap-field,
	.mx-gap-field:hover,
	.mx-gap-field:focus,
	.mx-gap-field:focus-within {
		border-color: var(--status-error);
		border-style: solid;
		background-color: color-mix(in srgb, var(--status-error) 7%, var(--surface-card));
	}
	.mx-gap-text {
		color: var(--status-error);
	}
	.mx-gap-summary {
		border-color: color-mix(in srgb, var(--status-error) 55%, transparent);
	}
	/* A changed field before save: dot after the label, label tint, 8% value fill. */
	.mx-changed-dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 6px;
		border-radius: 9999px;
		background: var(--primary);
		vertical-align: middle;
	}
	.mx-changed-value {
		background: color-mix(in srgb, var(--primary) 8%, transparent);
	}

	/* ── Motion helpers ── */
	.mx-reveal {
		opacity: 0;
		animation: mx-fade-up var(--dur-reveal) var(--ease-out-expo) forwards;
		animation-delay: calc(min(var(--i, 0), 8) * 35ms);
	}
	.mx-spin {
		animation-name: mx-spin;
		animation-duration: 1000ms;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-play-state: var(--amb);
	}
	.mx-signal-pulse {
		animation-name: mx-signal-ring;
		animation-duration: 2400ms;
		animation-timing-function: ease-out;
		animation-iteration-count: infinite;
		animation-play-state: var(--amb);
	}
	/* Grow open on the grid row instead of jumping (add/remove data-open). */
	.mx-collapse {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 0fr;
		opacity: 0;
		transition:
			grid-template-rows 240ms var(--ease-out-expo),
			opacity 180ms ease-out;
	}
	.mx-collapse > * {
		overflow: clip;
		min-height: 0;
	}
	.mx-collapse[data-open] {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.mx-bar-presence {
		animation: mx-bar-in 220ms var(--ease-out-expo) both;
	}

	/* ── Hit areas: 24px everywhere (WCAG 2.5.8), 44px under a thumb ── */
	.mx-tap {
		position: relative;
	}
	.mx-tap::after {
		content: "";
		position: absolute;
		inset: -3px;
	}
	@media (max-width: 767px), (pointer: coarse) {
		.mx-tap::after {
			inset: min(-8px, calc(50% - 22px)) -8px;
		}
		.mx-action,
		.mx-action--sm,
		.mx-primary,
		.mx-quiet,
		.mx-input,
		.mx-nav-item,
		.mx-segmented > :is(button, a),
		.dialog-surface > :last-child :is(button, a) {
			min-height: 44px;
		}
		button.glass-inset,
		a.glass-inset {
			min-height: 44px;
			min-width: 44px;
		}
	}
	@media (max-width: 767px) {
		/* A segmented control fills the width and breaks into full rows. */
		.mx-segmented {
			display: flex;
			max-width: 100%;
		}
		.mx-segmented > :is(button, a) {
			flex: 1 1 auto;
			white-space: nowrap;
		}
		.mx-card {
			padding: 16px;
		}
		.mx-detail-card {
			padding: 16px;
		}
	}
}

/* Unlayered on purpose: must beat utility classes on the search field. */
@media (max-width: 767px) {
	.mx-toolbar > .mx-input {
		order: -1;
		flex: 1 1 100%;
	}
}

/* ── 4. Keyframes ───────────────────────────────────────────────────────── */
@keyframes mx-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes mx-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes mx-dialog-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}
@keyframes mx-toast-in {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
}
@keyframes mx-morph-entry {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}
@keyframes mx-panel-in {
	from {
		opacity: 0.4;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes mx-bar-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
@keyframes mx-pulse-soft {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.55;
	}
}
@keyframes mx-spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes mx-signal-ring {
	0% {
		box-shadow:
			0 0 6px color-mix(in srgb, var(--dot-color, currentColor) 55%, transparent),
			0 0 0 0 color-mix(in srgb, var(--dot-color, currentColor) 50%, transparent);
	}
	70%,
	100% {
		box-shadow:
			0 0 6px color-mix(in srgb, var(--dot-color, currentColor) 55%, transparent),
			0 0 0 5px color-mix(in srgb, var(--dot-color, currentColor) 0%, transparent);
	}
}
@keyframes glass-drift {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(70px, -45px) scale(1.1);
	}
	66% {
		transform: translate(-55px, 35px) scale(0.94);
	}
}

/* ── 5. Reduced motion: everything stops, loops pause ───────────────────── */
@media (prefers-reduced-motion: reduce) {
	:root {
		--amb: paused;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}