/* what: CEDUIX UI stylesheet — 96-token LLM-optimal component framework + chart engine, single file
   concepts: css, design-system, oklch, color-mix, light-dark, layer, property, components, tokens, charts
   ═══════════════════════════════════════════════════════════
   CEDUIX UI  v1.3.0  —  The LLM-Optimal Component Framework
   One attribute. Every component. Zero imports.
   Part of CEDUIX (~/dev/ceduix/)  ·  MIT License
   ═══════════════════════════════════════════════════════════
   USAGE:  <div ui="card elevated">...</div>
   VOCAB:  96 words  ·  max 4 per ui attribute
   CHARTS: ced.chart(el, data, keys) — line/area/bar/scatter/pie
   ═══════════════════════════════════════════════════════════
   v1.3: ced-charts merged — 12-color palette, glass tooltip,
         synced crosshair, legend toggle, heatmap
   v1.2: +13 platform-native primitives (dialog, popover,
         tabs, accordion, switch, progress, skeleton,
         avatar, breadcrumb, table)
   v1.1: @layer, OKLCH, color-mix(), light-dark(),
         @starting-style, @property
   ═══════════════════════════════════════════════════════════ */

/* ── @property — smooth animated theme transitions ───────── */
@property --bg-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.97 0.006 80);
}
@property --tx-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.18 0.01 70);
}
@property --ac-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.5 0.12 70);
}
@property --ok-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.7 0.134 166);
}
@property --wr-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.76 0.152 75);
}
@property --er-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.62 0.205 26);
}
@property --in-base {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.65 0.161 257);
}

/* ── @property --hue — parametric color engine ──────────────
   Change ONE number → entire accent palette recomputes.
   Animatable: transition --hue smoothly between brand colors.
   No framework can do this. OKLCH hue rotation is perceptually uniform.
   --hue: 70 = gold, 200 = ocean, 340 = rose, 140 = forest, 270 = violet */
@property --hue {
	syntax: "<number>";
	inherits: true;
	initial-value: 70;
}

@layer ceduix {
	/* ── TOKENS ───────────────────────────────────────────────── */
	:root {
		color-scheme: light dark;

		/* Spacing */
		--s-1: 0.25rem;
		--s-2: 0.5rem;
		--s-3: 0.75rem;
		--s-4: 1rem;
		--s-5: 1.25rem;
		--s-6: 1.5rem;
		--s-8: 2rem;
		--s-10: 2.5rem;
		--s-12: 3rem;
		--s-16: 4rem;
		--s-20: 5rem;
		--s-24: 6rem;

		/* Base colors (OKLCH) — cream white, warm dark, gold
     Fallback: light-mode value for browsers without light-dark() (~13%) */
		--bg-base: oklch(0.97 0.006 80);
		--bg-base: light-dark(oklch(0.97 0.006 80), oklch(0.16 0.015 70));
		--tx-base: oklch(0.18 0.01 70);
		--tx-base: light-dark(oklch(0.18 0.01 70), oklch(0.92 0.01 82));
		/* Accent derived from --hue (parametric). Change --hue → new palette. */
		--ac-base: oklch(0.5 0.12 var(--hue));
		--ac-base: light-dark(
			oklch(0.5 0.12 var(--hue)),
			oklch(0.73 0.089 var(--hue))
		);

		/* Harmony colors — computed from --hue, no manual palette needed */
		--comp: oklch(0.65 0.08 calc(var(--hue) + 180));
		--analog1: oklch(0.7 0.07 calc(var(--hue) + 30));
		--analog2: oklch(0.7 0.07 calc(var(--hue) - 30));
		--ok-base: oklch(0.7 0.134 166);
		--wr-base: oklch(0.76 0.152 75);
		--er-base: oklch(0.62 0.205 26);
		--in-base: oklch(0.65 0.161 257);

		/* Derived: backgrounds */
		--bg-0: var(--bg-base);
		--bg-1: color-mix(in oklch, var(--bg-base), var(--tx-base) 4%);
		--bg-2: color-mix(in oklch, var(--bg-base), var(--tx-base) 8%);
		--bg-3: color-mix(in oklch, var(--bg-base), var(--tx-base) 12%);
		--bg-4: color-mix(in oklch, var(--bg-base), var(--tx-base) 17%);

		/* Derived: borders */
		--bdr-0: color-mix(in oklch, var(--tx-base) 4%, transparent);
		--bdr-1: color-mix(in oklch, var(--tx-base) 8%, transparent);
		--bdr-2: color-mix(in oklch, var(--tx-base) 14%, transparent);
		--bdr-3: color-mix(in oklch, var(--tx-base) 22%, transparent);

		/* Derived: text */
		--tx-0: var(--tx-base);
		--tx-1: color-mix(in oklch, var(--tx-base) 75%, var(--bg-base));
		--tx-2: color-mix(in oklch, var(--tx-base) 50%, var(--bg-base));
		--tx-3: color-mix(in oklch, var(--tx-base) 32%, var(--bg-base));

		/* Derived: accent */
		--ac: var(--ac-base);
		--ac-hi: color-mix(in oklch, var(--ac-base), white 20%);
		--ac-lo: color-mix(in oklch, var(--ac-base), black 30%);
		--ac-bg: color-mix(in oklch, var(--ac-base) 10%, transparent);
		--ac-gl: color-mix(in oklch, var(--ac-base) 18%, transparent);

		/* Derived: semantic */
		--ok: var(--ok-base);
		--ok-bg: color-mix(in oklch, var(--ok-base) 10%, transparent);
		--wr: var(--wr-base);
		--wr-bg: color-mix(in oklch, var(--wr-base) 10%, transparent);
		--er: var(--er-base);
		--er-bg: color-mix(in oklch, var(--er-base) 10%, transparent);
		--in: var(--in-base);
		--in-bg: color-mix(in oklch, var(--in-base) 10%, transparent);

		/* Chart palette — 12 series colors for ced-charts */
		--ch-1: #3b82f6;
		--ch-2: #ef4444;
		--ch-3: #22c55e;
		--ch-4: #f59e0b;
		--ch-5: #8b5cf6;
		--ch-6: #ec4899;
		--ch-7: #06b6d4;
		--ch-8: #f97316;
		--ch-9: #14b8a6;
		--ch-10: #a855f7;
		--ch-11: #6366f1;
		--ch-12: #84cc16;
		/* Chart chrome — dark glass tooltip, subtle grid (premium look) */
		--ch-grid: rgba(255, 255, 255, 0.08);
		--ch-grid: light-dark(rgba(26, 21, 16, 0.1), rgba(255, 255, 255, 0.08));
		--ch-axis: rgba(255, 255, 255, 0.75);
		--ch-axis: light-dark(rgba(26, 21, 16, 0.75), rgba(255, 255, 255, 0.75));
		--ch-tip-bg: rgba(9, 8, 13, 0.82);
		--ch-tip-bg: light-dark(rgba(9, 8, 13, 0.82), rgba(9, 8, 13, 0.88));
		--ch-tip-bdr: rgba(255, 255, 255, 0.1);
		--ch-tip-bdr: light-dark(
			rgba(196, 162, 101, 0.12),
			rgba(255, 255, 255, 0.1)
		);

		/* Radii */
		--r-sm: 4px;
		--r-md: 8px;
		--r-lg: 12px;
		--r-xl: 18px;

		/* Fonts — Inter only. One font = faster load, simpler spec, zero mismatches. */
		--f-ui: "Inter", system-ui, sans-serif;
		--f-mono: "Inter", system-ui, sans-serif;
		--f-disp: "Inter", system-ui, sans-serif;

		/* Shadows — light-dark for appropriate depth (fallback: light values) */
		--sh-sm: 0 1px 3px oklch(0 0 0 / 0.15);
		--sh-sm: light-dark(
			0 1px 3px oklch(0 0 0 / 0.15),
			0 1px 3px oklch(0 0 0 / 0.5)
		);
		--sh-md: 0 4px 16px oklch(0 0 0 / 0.12);
		--sh-md: light-dark(
			0 4px 16px oklch(0 0 0 / 0.12),
			0 4px 16px oklch(0 0 0 / 0.6)
		);
		--sh-lg: 0 12px 48px oklch(0 0 0 / 0.15);
		--sh-lg: light-dark(
			0 12px 48px oklch(0 0 0 / 0.15),
			0 12px 48px oklch(0 0 0 / 0.7)
		);
		--sh-ac: 0 0 0 1px var(--ac-lo), 0 4px 24px var(--ac-gl);

		/* Glass */
		--glass-bg: oklch(0.16 0.03 261 / 0.75);
		--glass-bdr: color-mix(in oklch, var(--ac-base) 8%, transparent);

		/* Motion */
		--ease: cubic-bezier(0.16, 1, 0.3, 1);
		--t-fast: 0.12s;
		--t-mid: 0.22s;
		--t-slow: 0.4s;

		/* Theme + hue transition — animate between brand palettes */
		transition:
			--bg-base var(--t-slow) var(--ease),
			--tx-base var(--t-slow) var(--ease),
			--ac-base var(--t-slow) var(--ease),
			--hue var(--t-slow) var(--ease);
	}

	/* ── DENSITY — one attribute reshapes entire UI ──────────── */
	/* No framework does this. compact for dashboards, spacious for landing. */
	[data-density="compact"] {
		--s-1: 0.15rem;
		--s-2: 0.35rem;
		--s-3: 0.5rem;
		--s-4: 0.7rem;
		--s-5: 0.9rem;
		--s-6: 1.1rem;
		--s-8: 1.5rem;
		--s-10: 1.85rem;
		--s-12: 2.25rem;
		--s-16: 3rem;
		--s-20: 3.75rem;
		--s-24: 4.5rem;
		font-size: 0.875rem;
		--r-sm: 3px;
		--r-md: 6px;
		--r-lg: 8px;
		--r-xl: 12px;
	}
	[data-density="spacious"] {
		--s-1: 0.35rem;
		--s-2: 0.65rem;
		--s-3: 1rem;
		--s-4: 1.35rem;
		--s-5: 1.65rem;
		--s-6: 2rem;
		--s-8: 2.75rem;
		--s-10: 3.5rem;
		--s-12: 4rem;
		--s-16: 5.5rem;
		--s-20: 7rem;
		--s-24: 8.5rem;
		font-size: 1.1rem;
		--r-sm: 6px;
		--r-md: 12px;
		--r-lg: 16px;
		--r-xl: 24px;
	}

	/* ── CONTAINER-ADAPTIVE — components reshape to their container ── */
	/* Layouts become container query contexts. Children adapt to container, not viewport. */
	[ui~="grid"],
	[ui~="sidebar"],
	[ui~="contain"] {
		container-type: inline-size;
	}

	@container (max-width: 24rem) {
		[ui~="cluster"] {
			flex-direction: column;
			align-items: stretch;
		}
		[ui~="stat"] {
			font-size: clamp(1.5rem, 3vw, 2rem);
		}
		[ui~="heading"] {
			font-size: 1.2rem;
		}
		[ui~="button"] {
			width: 100%;
		}
	}

	/* ── RESET ────────────────────────────────────────────────── */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	img,
	svg {
		display: block;
		max-width: 100%;
	}
	button {
		cursor: pointer;
		border: none;
		background: none;
		font: inherit;
	}
	input,
	select,
	textarea {
		font: inherit;
	}

	/* ── PAGE ─────────────────────────────────────────────────── */
	[ui~="page"] {
		font-family: var(--f-ui);
		font-size: 1rem;
		line-height: 1.6;
		color: var(--tx-0);
		background: var(--bg-0);
		min-height: 100vh;
	}

	/* ── LAYOUT ───────────────────────────────────────────────── */
	[ui~="stack"] {
		display: flex;
		flex-direction: column;
		gap: var(--s-4);
	}
	[ui~="cluster"] {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s-2);
	}
	[ui~="grid"] {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
		gap: var(--s-4);
	}
	[ui~="center"] {
		display: grid;
		place-items: center;
		text-align: center;
	}
	[ui~="sidebar"] {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
	}
	[ui~="cover"] {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	[ui~="section"] {
		padding: var(--s-16) clamp(var(--s-6), 5vw, var(--s-16));
	}
	[ui~="contain"] {
		max-width: 72rem;
		margin-inline: auto;
		width: 100%;
	}

	/* Gap modifiers */
	[ui~="sm"] {
		gap: var(--s-2);
	}
	[ui~="md"] {
		gap: var(--s-4);
	}
	[ui~="lg"] {
		gap: var(--s-8);
	}
	[ui~="xl"] {
		gap: var(--s-12);
	}

	/* Flex alignment modifiers */
	[ui~="between"] {
		justify-content: space-between;
	}
	[ui~="end"] {
		justify-content: flex-end;
	}

	/* Spacing modifiers */
	[ui~="pad"] {
		padding-block: var(--s-8);
	}
	[ui~="loose"] {
		gap: var(--s-8);
	}
	[ui~="tight"] {
		gap: 0.4rem;
	}

	/* Opacity modifiers */
	[ui~="dim"] {
		opacity: 0.6;
	}
	[ui~="faint"] {
		opacity: 0.35;
	}

	/* Button size modifiers */
	[ui~="button"][ui~="sm"] {
		padding: 0.25rem 0.75rem;
		font-size: 0.8rem;
	}
	[ui~="button"][ui~="xs"] {
		padding: 0.15rem 0.6rem;
		font-size: 0.75rem;
	}

	/* Data cell tokens (use on BOTH <th> and <td> — alignment must match) */
	[ui~="num"] {
		text-align: right;
		font-variant-numeric: tabular-nums lining-nums;
		white-space: nowrap;
	}
	[ui~="addr"] {
		font-size: 0.75rem;
		color: var(--tx-3);
		white-space: nowrap;
	}

	/* ── SURFACES ─────────────────────────────────────────────── */
	[ui~="card"] {
		background: var(--bg-2);
		border: 1px solid var(--bdr-1);
		border-radius: var(--r-lg);
		padding: var(--s-6);
		transition: border-color var(--t-mid) var(--ease);
	}
	[ui~="card"]:hover {
		border-color: var(--bdr-2);
	}
	[ui~="panel"] {
		background: var(--bg-1);
		border: 1px solid var(--bdr-1);
		border-radius: var(--r-xl);
		padding: var(--s-8);
	}
	[ui~="sheet"] {
		background: var(--bg-3);
		border-radius: var(--r-md);
		padding: var(--s-4);
	}
	[ui~="overlay"] {
		background: color-mix(in oklch, var(--bg-0) 85%, transparent);
		backdrop-filter: blur(16px) saturate(1.4);
		border: 1px solid var(--bdr-2);
		border-radius: var(--r-xl);

		/* @starting-style — native entry transition */
		transition:
			opacity var(--t-slow) var(--ease),
			transform var(--t-slow) var(--ease),
			display var(--t-slow) var(--ease) allow-discrete;
		@starting-style {
			opacity: 0;
			transform: translateY(0.5rem) scale(0.98);
		}
	}

	/* Surface modifiers */
	[ui~="elevated"] {
		box-shadow: var(--sh-md);
	}
	[ui~="raised"] {
		box-shadow: var(--sh-lg);
	}
	[ui~="accent"] {
		border-color: var(--ac-lo) !important;
		box-shadow: var(--sh-ac);
	}
	[ui~="muted"] {
		background: var(--bg-1);
		border-color: var(--bdr-0);
	}
	[ui~="ghost"] {
		background: transparent;
		border-color: transparent;
	}
	[ui~="outline"] {
		background: transparent;
		border: 1px solid var(--bdr-2);
	}
	[ui~="glass"] {
		background: var(
			--glass-bg,
			color-mix(in oklch, var(--bg-0) 75%, transparent)
		);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid var(--glass-bdr, var(--bdr-1));
		box-shadow: 0 4px 24px -2px oklch(0 0 0 / 0.3);
	}

	/* ── TYPOGRAPHY ───────────────────────────────────────────── */
	[ui~="heading"] {
		font-family: var(--f-ui);
		font-size: clamp(1.5rem, 3vw, 2.25rem);
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.02em;
		color: var(--tx-0);
		margin: 0;
		text-wrap: balance;
	}
	[ui~="heading"][ui~="sm"] {
		font-size: 1.1rem;
	}
	[ui~="heading"][ui~="lg"] {
		font-size: clamp(2rem, 5vw, 3.5rem);
		letter-spacing: -0.03em;
	}
	[ui~="heading"][ui~="xl"] {
		font-size: clamp(2.5rem, 7vw, 5rem);
		letter-spacing: -0.04em;
	}

	[ui~="subheading"] {
		font-size: clamp(1.1rem, 2vw, 1.4rem);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.015em;
		color: var(--tx-0);
		margin: 0;
		text-wrap: balance;
	}
	[ui~="eyebrow"] {
		font-family: var(--f-mono);
		font-size: 0.65rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ac);
	}
	[ui~="body"] {
		font-size: 0.9rem;
		line-height: 1.7;
		color: var(--tx-1);
		font-weight: 300;
		text-wrap: pretty;
	}
	[ui~="caption"] {
		font-size: 0.75rem;
		line-height: 1.5;
		color: var(--tx-2);
		letter-spacing: 0.02em;
	}
	[ui~="code"] {
		font-family: var(--f-mono);
		font-size: 0.82em;
		background: var(--bg-3);
		border: 1px solid var(--bdr-1);
		border-radius: var(--r-sm);
		padding: 0.1em 0.4em;
		color: var(--ac-hi);
	}
	pre[ui~="code"] {
		padding: var(--s-5);
		font-size: 0.8rem;
		overflow-x: auto;
		border-radius: var(--r-lg);
		line-height: 1.7;
		color: var(--tx-1);
	}

	/* ── BUTTON ───────────────────────────────────────────────── */
	[ui~="button"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-2);
		font-family: var(--f-ui);
		font-size: 0.875rem;
		font-weight: 500;
		padding: 0.55em 1.2em;
		border-radius: var(--r-md);
		background: var(--ac);
		color: var(--bg-0);
		border: 1px solid transparent;
		transition:
			background var(--t-fast) var(--ease),
			transform var(--t-fast) var(--ease),
			box-shadow var(--t-fast) var(--ease);
		white-space: nowrap;
		user-select: none;
		letter-spacing: 0.01em;
	}
	[ui~="button"]:hover {
		background: var(--ac-hi);
		transform: translateY(-1px);
		box-shadow: 0 4px 16px var(--ac-gl);
	}
	[ui~="button"]:active {
		transform: translateY(0);
		box-shadow: none;
	}
	[ui~="button"]:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}

	[ui~="button"][ui~="outline"] {
		background: transparent;
		color: var(--tx-0);
		border-color: var(--bdr-2);
	}
	[ui~="button"][ui~="outline"]:hover {
		border-color: var(--bdr-3);
		background: var(--bg-3);
	}
	[ui~="button"][ui~="ghost"] {
		background: transparent;
		color: var(--tx-1);
		border-color: transparent;
	}
	[ui~="button"][ui~="ghost"]:hover {
		background: var(--bg-3);
		color: var(--tx-0);
	}
	[ui~="button"][ui~="muted"] {
		background: var(--bg-3);
		color: var(--tx-1);
		border-color: var(--bdr-1);
	}
	[ui~="button"][ui~="muted"]:hover {
		background: var(--bg-4);
		color: var(--tx-0);
	}
	[ui~="button"][ui~="danger"] {
		background: var(--er);
		color: var(--bg-0);
	}
	[ui~="button"][ui~="danger"]:hover {
		background: color-mix(in oklch, var(--er-base), white 15%);
	}

	[ui~="button"][ui~="sm"] {
		font-size: 0.78rem;
		padding: 0.4em 0.9em;
		border-radius: var(--r-sm);
	}
	[ui~="button"][ui~="lg"] {
		font-size: 1rem;
		padding: 0.7em 1.6em;
		border-radius: var(--r-lg);
	}
	[ui~="button"]:disabled,
	[ui~="button"][aria-disabled="true"] {
		opacity: 0.4;
		pointer-events: none;
		filter: grayscale(0.5);
	}

	/* ── INPUT ────────────────────────────────────────────────── */
	[ui~="input"] {
		display: block;
		width: 100%;
		font-family: var(--f-ui);
		font-size: 0.875rem;
		padding: 0.6em 0.9em;
		background: var(--bg-2);
		color: var(--tx-0);
		border: 1px solid var(--bdr-2);
		border-radius: var(--r-md);
		outline: none;
		transition:
			border-color var(--t-fast) var(--ease),
			box-shadow var(--t-fast) var(--ease);
	}
	[ui~="input"]:focus-visible {
		border-color: var(--ac-lo);
		box-shadow: 0 0 0 3px var(--ac-bg);
	}
	[ui~="input"]::placeholder {
		color: var(--tx-3);
	}
	[ui~="input"]:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background: var(--bg-1);
	}

	/* ── BADGE ────────────────────────────────────────────────── */
	/* Base: 12px mono 600 uppercase — WCAG-legible. Soft (default) + solid variants.
   Dot/pulse leading indicators use currentColor. Pulse honors prefers-reduced-motion. */
	[ui~="badge"] {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		font-family: var(--f-mono);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
		padding: 0.35em 0.8em;
		border-radius: var(--r-md);
		line-height: 1.2;
		background: var(--bg-3);
		color: var(--tx-0);
		border: 1px solid var(--bdr-2);
	}
	[ui~="badge"]:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	/* Soft variants — tinted bg, high-contrast darkened foreground (WCAG AA) */
	[ui~="badge"][ui~="accent"] {
		background: var(--ac-bg);
		color: var(--ac-lo);
		border-color: color-mix(in oklch, var(--ac-base) 35%, transparent);
	}
	[ui~="badge"][ui~="success"] {
		background: var(--ok-bg);
		color: oklch(from var(--ok-base) calc(l - 0.25) c h);
		border-color: color-mix(in oklch, var(--ok-base) 35%, transparent);
	}
	[ui~="badge"][ui~="warning"] {
		background: var(--wr-bg);
		color: oklch(from var(--wr-base) calc(l - 0.3) c h);
		border-color: color-mix(in oklch, var(--wr-base) 35%, transparent);
	}
	[ui~="badge"][ui~="danger"] {
		background: var(--er-bg);
		color: oklch(from var(--er-base) calc(l - 0.15) c h);
		border-color: color-mix(in oklch, var(--er-base) 40%, transparent);
	}
	[ui~="badge"][ui~="info"] {
		background: var(--in-bg);
		color: oklch(from var(--in-base) calc(l - 0.2) c h);
		border-color: color-mix(in oklch, var(--in-base) 35%, transparent);
	}
	/* Fallback for browsers without relative color */
	@supports not (color: oklch(from red l c h)) {
		[ui~="badge"][ui~="success"] {
			color: var(--ok);
		}
		[ui~="badge"][ui~="warning"] {
			color: var(--wr);
		}
		[ui~="badge"][ui~="danger"] {
			color: var(--er);
		}
		[ui~="badge"][ui~="info"] {
			color: var(--in);
		}
	}
	/* Solid — high-emphasis (priority urgent, live status). Solid bg, max contrast fg. */
	[ui~="badge"][ui~="solid"] {
		background: var(--tx-0);
		color: var(--bg-0);
		border-color: transparent;
	}
	[ui~="badge"][ui~="solid"][ui~="accent"] {
		background: var(--ac);
		color: var(--bg-0);
	}
	[ui~="badge"][ui~="solid"][ui~="success"] {
		background: var(--ok);
		color: var(--bg-0);
	}
	[ui~="badge"][ui~="solid"][ui~="warning"] {
		background: var(--wr);
		color: var(--bg-0);
	}
	[ui~="badge"][ui~="solid"][ui~="danger"] {
		background: var(--er);
		color: var(--bg-0);
	}
	[ui~="badge"][ui~="solid"][ui~="info"] {
		background: var(--in);
		color: var(--bg-0);
	}
	/* Size modifiers */
	[ui~="badge"][ui~="sm"] {
		font-size: 0.68rem;
		padding: 0.25em 0.6em;
		letter-spacing: 0.04em;
	}
	[ui~="badge"][ui~="lg"] {
		font-size: 0.85rem;
		padding: 0.5em 1em;
		letter-spacing: 0.05em;
	}
	/* Dot + pulse — leading indicator (online/active/status) */
	[ui~="badge"][ui~="dot"]::before,
	[ui~="badge"][ui~="pulse"]::before {
		content: "";
		width: 0.5em;
		height: 0.5em;
		border-radius: 50%;
		background: currentColor;
		flex: none;
	}
	[ui~="badge"][ui~="pulse"]::before {
		animation: ceduix-pulse 1.6s ease-in-out infinite;
	}
	@keyframes ceduix-pulse {
		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.4;
			transform: scale(0.85);
		}
	}

	/* ── ALERT ────────────────────────────────────────────────── */
	[ui~="alert"] {
		padding: var(--s-4) var(--s-5);
		border-radius: var(--r-lg);
		font-size: 0.875rem;
		line-height: 1.6;
		background: var(--in-bg);
		color: var(--tx-1);
		border: 1px solid color-mix(in oklch, var(--in-base) 20%, transparent);
		display: flex;
		gap: var(--s-3);
		align-items: flex-start;
	}
	[ui~="alert"][ui~="success"] {
		background: var(--ok-bg);
		border-color: color-mix(in oklch, var(--ok-base) 20%, transparent);
	}
	[ui~="alert"][ui~="warning"] {
		background: var(--wr-bg);
		border-color: color-mix(in oklch, var(--wr-base) 20%, transparent);
	}
	[ui~="alert"][ui~="danger"] {
		background: var(--er-bg);
		border-color: color-mix(in oklch, var(--er-base) 20%, transparent);
	}

	/* ── STAT ─────────────────────────────────────────────────── */
	[ui~="stat"] {
		font-family: var(--f-disp);
		font-size: clamp(2rem, 4vw, 2.75rem);
		font-weight: 600;
		letter-spacing: -0.03em;
		line-height: 1;
		color: var(--tx-0);
	}
	/* ── METRIC — sensor/data numeric display (Inter, tabular) ── */
	[ui~="metric"] {
		font-family: var(--f-ui);
		font-size: 1.75rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		color: var(--tx-0);
	}
	@container (max-width: 24rem) {
		[ui~="metric"] {
			font-size: 1.25rem;
		}
	}

	/* ── NAV ──────────────────────────────────────────────────── */
	[ui~="nav"] {
		display: flex;
		align-items: center;
		gap: var(--s-8);
		padding: var(--s-4) clamp(var(--s-6), 5vw, var(--s-16));
		border-bottom: 1px solid var(--bdr-1);
		position: sticky;
		top: 0;
		z-index: 100;
		background: color-mix(in oklch, var(--bg-0) 85%, transparent);
		backdrop-filter: blur(20px) saturate(1.5);
	}
	[ui~="nav-spacer"] {
		flex: 1;
	}

	/* ── DIVIDER ──────────────────────────────────────────────── */
	[ui~="divider"] {
		height: 1px;
		width: 100%;
		background: linear-gradient(
			to right,
			transparent,
			var(--bdr-2) 30%,
			var(--bdr-2) 70%,
			transparent
		);
	}

	/* ── ANIMATIONS ───────────────────────────────────────────── */
	@keyframes ceduix-in {
		from {
			opacity: 0;
			transform: translateY(1rem);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	[ui~="animate"] {
		animation: ceduix-in 0.7s var(--ease) both;
	}
	[ui~="animate"][ui~="d1"] {
		animation-delay: 0.1s;
	}
	[ui~="animate"][ui~="d2"] {
		animation-delay: 0.2s;
	}
	[ui~="animate"][ui~="d3"] {
		animation-delay: 0.3s;
	}
	[ui~="animate"][ui~="d4"] {
		animation-delay: 0.4s;
	}
	[ui~="animate"][ui~="d5"] {
		animation-delay: 0.5s;
	}
	[ui~="animate"][ui~="d6"] {
		animation-delay: 0.6s;
	}
	[ui~="animate"][ui~="d7"] {
		animation-delay: 0.7s;
	}
	[ui~="animate"][ui~="d8"] {
		animation-delay: 0.8s;
	}

	[ui~="reveal"] {
		opacity: 0;
		transform: translateY(2rem);
		transition:
			opacity 0.7s var(--ease),
			transform 0.7s var(--ease);
	}
	[ui~="reveal"][ui~="from-left"] {
		transform: translateX(-2rem);
	}
	[ui~="reveal"][ui~="from-right"] {
		transform: translateX(2rem);
	}
	[ui~="reveal"][ui~="from-down"] {
		transform: translateY(-2rem);
	}
	[ui~="reveal"][ui~="fade"] {
		transform: none;
	}
	[ui~="reveal"].in-view {
		opacity: 1;
		transform: none;
	}
	[ui~="reveal"][ui~="d1"].in-view {
		transition-delay: 0.1s;
	}
	[ui~="reveal"][ui~="d2"].in-view {
		transition-delay: 0.2s;
	}
	[ui~="reveal"][ui~="d3"].in-view {
		transition-delay: 0.3s;
	}
	[ui~="reveal"][ui~="d4"].in-view {
		transition-delay: 0.4s;
	}
	[ui~="reveal"][ui~="d5"].in-view {
		transition-delay: 0.5s;
	}
	[ui~="reveal"][ui~="d6"].in-view {
		transition-delay: 0.6s;
	}
	[ui~="reveal"][ui~="d7"].in-view {
		transition-delay: 0.7s;
	}
	[ui~="reveal"][ui~="d8"].in-view {
		transition-delay: 0.8s;
	}

	/* ── PROSE (markdown article rendering) ───────────────────── */
	[ui~="prose"] {
		font-family: var(--f-ui);
		font-size: 1rem;
		line-height: 1.75;
		color: var(--tx-1);
		text-wrap: pretty;
	}
	[ui~="prose"] h1 {
		font-size: 2rem;
		font-weight: 700;
		color: var(--tx-0);
		margin: 2em 0 0.5em;
		line-height: 1.2;
		text-wrap: balance;
	}
	[ui~="prose"] h2 {
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--tx-0);
		margin: 1.75em 0 0.5em;
		line-height: 1.25;
		text-wrap: balance;
	}
	[ui~="prose"] h3 {
		font-size: 1.25rem;
		font-weight: 600;
		color: var(--tx-0);
		margin: 1.5em 0 0.5em;
		line-height: 1.3;
		text-wrap: balance;
	}
	[ui~="prose"] h4 {
		font-size: 1rem;
		font-weight: 600;
		color: var(--tx-0);
		margin: 1.25em 0 0.5em;
		text-wrap: balance;
	}
	[ui~="prose"] p {
		margin: 0.75em 0;
	}
	[ui~="prose"] a {
		color: var(--ac);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	[ui~="prose"] a:hover {
		color: var(--ac-hi);
	}
	[ui~="prose"] a:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	[ui~="prose"] strong {
		color: var(--tx-0);
		font-weight: 600;
	}
	[ui~="prose"] ul,
	[ui~="prose"] ol {
		margin: 0.75em 0;
		padding-inline-start: 1.5em;
	}
	[ui~="prose"] li {
		margin: 0.25em 0;
	}
	[ui~="prose"] li::marker {
		color: var(--tx-3);
	}
	[ui~="prose"] blockquote {
		border-inline-start: 3px solid var(--ac-lo);
		padding: 0.5em 0 0.5em 1.25em;
		margin: 1em 0;
		color: var(--tx-2);
		font-style: italic;
	}
	[ui~="prose"] code {
		font-family: var(--f-mono);
		font-size: 0.875em;
		background: var(--bg-2);
		padding: 0.15em 0.35em;
		border-radius: var(--r-sm);
	}
	[ui~="prose"] pre {
		background: var(--bg-1);
		border: 1px solid var(--bdr-1);
		border-radius: var(--r-lg);
		padding: var(--s-4);
		overflow-x: auto;
		margin: 1em 0;
	}
	[ui~="prose"] pre code {
		background: none;
		padding: 0;
		font-size: 0.85em;
		line-height: 1.6;
	}
	[ui~="prose"] hr {
		border: none;
		height: 1px;
		background: var(--bdr-2);
		margin: 2em 0;
	}
	[ui~="prose"] img {
		max-width: 100%;
		height: auto;
		border-radius: var(--r-lg);
		margin: 1.5em 0;
	}
	[ui~="prose"] table {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
		font-size: 0.9em;
	}
	[ui~="prose"] th {
		text-align: left;
		font-weight: 600;
		color: var(--tx-0);
		padding: 0.5em;
		border-bottom: 2px solid var(--bdr-2);
	}
	[ui~="prose"] td {
		padding: 0.5em;
		border-bottom: 1px solid var(--bdr-1);
	}

	/* ── DIALOG (native <dialog>) ────────────────────────────── */
	[ui~="dialog"] {
		background: var(--bg-2);
		color: var(--tx-0);
		border: 1px solid var(--bdr-2);
		border-radius: var(--r-xl);
		padding: var(--s-8);
		max-width: 32rem;
		width: calc(100% - var(--s-8));
		box-shadow: var(--sh-lg);
		transition:
			opacity var(--t-slow) var(--ease),
			transform var(--t-slow) var(--ease),
			overlay var(--t-slow) var(--ease) allow-discrete,
			display var(--t-slow) var(--ease) allow-discrete;
	}
	[ui~="dialog"][open] {
		@starting-style {
			opacity: 0;
			transform: translateY(1rem) scale(0.96);
		}
	}
	[ui~="dialog"]::backdrop {
		background: oklch(0.1 0.02 260 / 0.7);
		backdrop-filter: blur(6px);
		transition:
			opacity var(--t-slow) var(--ease),
			display var(--t-slow) var(--ease) allow-discrete;
	}
	[ui~="dialog"][open]::backdrop {
		@starting-style {
			opacity: 0;
		}
	}

	/* ── POPOVER (native [popover]) ──────────────────────────── */
	[ui~="popover"] {
		background: var(--bg-2);
		color: var(--tx-0);
		border: 1px solid var(--bdr-2);
		border-radius: var(--r-lg);
		padding: var(--s-4);
		box-shadow: var(--sh-md);
		margin: 0;
		inset: unset;
		transition:
			opacity var(--t-mid) var(--ease),
			transform var(--t-mid) var(--ease),
			overlay var(--t-mid) var(--ease) allow-discrete,
			display var(--t-mid) var(--ease) allow-discrete;
		@starting-style {
			opacity: 0;
			transform: translateY(-0.5rem);
		}
	}

	/* ── TABS (CSS-only via radio + :has) ────────────────────── */
	[ui~="tabs"] {
		display: flex;
		flex-direction: column;
	}
	[ui~="tab-list"] {
		display: flex;
		gap: 0;
		border-bottom: 1px solid var(--bdr-1);
	}
	[ui~="tab-list"] input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	[ui~="tab"] {
		padding: var(--s-3) var(--s-5);
		font-family: var(--f-ui);
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--tx-2);
		cursor: pointer;
		border-bottom: 2px solid transparent;
		margin-block-end: -1px;
		transition:
			color var(--t-fast) var(--ease),
			border-color var(--t-fast) var(--ease);
		user-select: none;
	}
	[ui~="tab"]:hover {
		color: var(--tx-1);
	}
	input:checked + [ui~="tab"],
	[ui~="tab"][aria-selected="true"] {
		color: var(--ac);
		border-bottom-color: var(--ac);
	}
	input:focus-visible + [ui~="tab"] {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	/* Tab panels — use <nav ui="tab-list"> (not div) so nth-of-type counts correctly */
	[ui~="tab-panel"] {
		display: none;
		padding: var(--s-6) 0;
	}
	[ui~="tabs"]:not(:has(input:checked)) > [ui~="tab-panel"]:first-of-type {
		display: block;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(1):checked)
		> [ui~="tab-panel"] {
		display: none;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(1):checked)
		> [ui~="tab-panel"]:nth-of-type(1) {
		display: block;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(2):checked)
		> [ui~="tab-panel"] {
		display: none;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(2):checked)
		> [ui~="tab-panel"]:nth-of-type(2) {
		display: block;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(3):checked)
		> [ui~="tab-panel"] {
		display: none;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(3):checked)
		> [ui~="tab-panel"]:nth-of-type(3) {
		display: block;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(4):checked)
		> [ui~="tab-panel"] {
		display: none;
	}
	[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(4):checked)
		> [ui~="tab-panel"]:nth-of-type(4) {
		display: block;
	}

	/* ── ACCORDION (native <details>) ────────────────────────── */
	[ui~="accordion"] {
		border: 1px solid var(--bdr-1);
		border-radius: var(--r-lg);
		overflow: hidden;
	}
	[ui~="accordion"] + [ui~="accordion"] {
		margin-top: -1px;
	}
	[ui~="accordion"] summary {
		padding: var(--s-4) var(--s-5);
		font-family: var(--f-ui);
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--tx-0);
		cursor: pointer;
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--bg-1);
		transition: background var(--t-fast) var(--ease);
	}
	[ui~="accordion"] summary:hover {
		background: var(--bg-2);
	}
	[ui~="accordion"] summary:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: -2px;
	}
	[ui~="accordion"] summary::after {
		content: "+";
		font-family: var(--f-mono);
		font-size: 1rem;
		color: var(--tx-2);
		transition: transform var(--t-mid) var(--ease);
	}
	[ui~="accordion"][open] summary::after {
		content: "−";
	}
	[ui~="accordion"] summary::-webkit-details-marker {
		display: none;
	}
	[ui~="accordion"] > :not(summary) {
		padding: var(--s-4) var(--s-5);
		font-size: 0.875rem;
		line-height: 1.7;
		color: var(--tx-1);
		background: var(--bg-0);
	}

	/* ── SWITCH (styled checkbox toggle) ─────────────────────── */
	[ui~="switch"] {
		display: inline-flex;
		align-items: center;
		gap: var(--s-3);
		cursor: pointer;
		user-select: none;
		font-family: var(--f-ui);
		font-size: 0.875rem;
		color: var(--tx-1);
	}
	[ui~="switch"] input {
		appearance: none;
		-webkit-appearance: none;
		width: 2.5rem;
		height: 1.375rem;
		background: var(--bg-4);
		border-radius: var(--r-md);
		position: relative;
		cursor: pointer;
		flex-shrink: 0;
		transition: background var(--t-fast) var(--ease);
	}
	[ui~="switch"] input::before {
		content: "";
		position: absolute;
		top: 2px;
		inset-inline-start: 2px;
		width: 1rem;
		height: 1rem;
		border-radius: var(--r-sm);
		background: var(--tx-1);
		transition:
			transform var(--t-mid) var(--ease),
			background var(--t-fast) var(--ease);
	}
	[ui~="switch"] input:checked {
		background: var(--ac);
	}
	[ui~="switch"] input:checked::before {
		transform: translateX(1.125rem);
		background: var(--bg-0);
	}
	[ui~="switch"] input:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	[ui~="switch"] input:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}
	[ui~="switch"]:has(input:disabled) {
		cursor: not-allowed;
		opacity: 0.5;
	}

	/* ── PROGRESS ────────────────────────────────────────────── */
	[ui~="progress"] {
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		height: 6px;
		border: none;
		border-radius: var(--r-md);
		background: var(--bg-3);
		overflow: hidden;
	}
	[ui~="progress"]::-webkit-progress-bar {
		background: var(--bg-3);
		border-radius: var(--r-md);
	}
	[ui~="progress"]::-webkit-progress-value {
		background: var(--ac);
		border-radius: var(--r-md);
		transition: width var(--t-mid) var(--ease);
	}
	[ui~="progress"]::-moz-progress-bar {
		background: var(--ac);
		border-radius: var(--r-md);
	}
	[ui~="progress"][ui~="success"]::-webkit-progress-value,
	[ui~="progress"][ui~="success"]::-moz-progress-bar {
		background: var(--ok);
	}
	[ui~="progress"][ui~="warning"]::-webkit-progress-value,
	[ui~="progress"][ui~="warning"]::-moz-progress-bar {
		background: var(--wr);
	}
	[ui~="progress"][ui~="danger"]::-webkit-progress-value,
	[ui~="progress"][ui~="danger"]::-moz-progress-bar {
		background: var(--er);
	}
	[ui~="progress"][ui~="lg"] {
		height: 10px;
	}
	[ui~="progress"][ui~="sm"] {
		height: 3px;
	}

	/* ── SKELETON (loading placeholder) ──────────────────────── */
	@keyframes ceduix-shimmer {
		from {
			background-position: -200% center;
		}
		to {
			background-position: 200% center;
		}
	}
	[ui~="skeleton"] {
		background: linear-gradient(
			90deg,
			var(--bg-2) 25%,
			var(--bg-4) 50%,
			var(--bg-2) 75%
		);
		background-size: 200% 100%;
		animation: ceduix-shimmer 1.8s ease-in-out infinite;
		border-radius: var(--r-md);
		color: transparent !important;
		user-select: none;
		pointer-events: none;
	}
	[ui~="skeleton"]::before,
	[ui~="skeleton"]::after {
		display: none;
	}
	[ui~="skeleton"] * {
		visibility: hidden;
	}

	/* ── AVATAR ──────────────────────────────────────────────── */
	[ui~="avatar"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--r-lg);
		overflow: hidden;
		flex-shrink: 0;
		background: var(--ac-bg);
		color: var(--ac);
		font-family: var(--f-ui);
		font-size: 0.875rem;
		font-weight: 600;
		border: 2px solid var(--bdr-1);
	}
	[ui~="avatar"] img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	[ui~="avatar"][ui~="sm"] {
		width: 2rem;
		height: 2rem;
		font-size: 0.7rem;
	}
	[ui~="avatar"][ui~="lg"] {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.2rem;
	}
	[ui~="avatar"][ui~="xl"] {
		width: 5rem;
		height: 5rem;
		font-size: 1.6rem;
	}

	/* ── BREADCRUMB ──────────────────────────────────────────── */
	[ui~="breadcrumb"] {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		font-family: var(--f-ui);
		font-size: 0.8rem;
		color: var(--tx-2);
	}
	[ui~="breadcrumb"] a {
		color: var(--tx-2);
		text-decoration: none;
		transition: color var(--t-fast) var(--ease);
	}
	[ui~="breadcrumb"] a:hover {
		color: var(--ac);
	}
	[ui~="breadcrumb"] a:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	[ui~="breadcrumb"] span:last-child,
	[ui~="breadcrumb"] a:last-child {
		color: var(--tx-0);
		font-weight: 500;
	}
	[ui~="breadcrumb"] > :not(:last-child)::after {
		content: "/";
		margin-inline-start: var(--s-2);
		color: var(--tx-3);
		pointer-events: none;
	}

	/* ── TABLE ───────────────────────────────────────────────── */
	/* Header alignment MUST match cell alignment. Text left, numbers right.
   No vertical borders. No center alignment. Opt-in stripe via token.
   40px default row, 32px compact. Uppercase headers. Sticky. */
	[ui~="table"] {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		border-collapse: collapse;
		font-family: var(--f-ui);
		font-size: 0.875rem;
		line-height: 1.25;
	}
	[ui~="table"][ui~="full"] {
		width: 100%;
	}
	[ui~="table"] th {
		text-align: left;
		font-weight: 600;
		color: var(--tx-2);
		padding: 0 var(--s-4);
		height: 2.5rem;
		vertical-align: middle;
		border-bottom: 2px solid var(--bdr-3);
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		white-space: nowrap;
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--bg-0);
	}
	[ui~="table"] td {
		text-align: left;
		padding: 0 var(--s-4);
		height: 2.5rem;
		vertical-align: middle;
		border-bottom: 1px solid var(--bdr-1);
		color: var(--tx-0);
		white-space: nowrap;
		max-width: 30rem;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background var(--t-fast) var(--ease);
	}
	[ui~="table"] tr:hover td {
		background: var(--bg-2);
	}
	[ui~="table"][ui~="stripe"] tbody tr:nth-child(even) td {
		background: var(--bg-2);
	}
	[ui~="table"][ui~="stripe"] tbody tr:hover td {
		background: var(--bg-3);
	}
	[ui~="table"] tr[aria-selected="true"] td,
	[ui~="table"] tr[data-selected] td {
		background: var(--ac-bg);
	}
	[ui~="table"] tbody tr:last-child td {
		border-bottom: 0;
	}
	[ui~="table"][ui~="accent"] th {
		color: var(--ac);
		border-bottom-color: var(--ac-lo);
	}
	/* Sort — inline arrow, muted when idle, accent when active */
	[ui~="table"] th[data-sort] {
		cursor: pointer;
		user-select: none;
		transition: color var(--t-fast) var(--ease);
	}
	[ui~="table"] th[data-sort]:hover {
		color: var(--ac);
	}
	[ui~="table"] th[data-sort]:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: -2px;
	}
	[ui~="table"] th[data-sort]::after {
		content: "\2195";
		margin-inline-start: 0.3em;
		font-size: 0.8em;
		opacity: 0.38;
		transition:
			color var(--t-fast) var(--ease),
			opacity var(--t-fast) var(--ease);
	}
	[ui~="table"] th[data-sort="asc"]::after {
		content: "\2191";
		color: var(--ac);
		opacity: 1;
	}
	[ui~="table"] th[data-sort="desc"]::after {
		content: "\2193";
		color: var(--ac);
		opacity: 1;
	}
	/* Group rows */
	[ui~="table"] tr[ui~="group"] {
		cursor: pointer;
		background: var(--bg-2);
		font-weight: 600;
		transition: background var(--t-fast) var(--ease);
	}
	[ui~="table"] tr[ui~="group"]:hover {
		background: var(--bg-3);
	}
	[ui~="table"] tr[ui~="group"] td {
		padding: 0 var(--s-4);
		height: 2.5rem;
	}
	[ui~="table"] tr[ui~="muted"] {
		opacity: 0.6;
	}
	[ui~="table"] :is(td, th)[ui~="num"] {
		text-align: right;
	}
	/* Density — via data-density on table or parent */
	[data-density="compact"] [ui~="table"] th,
	[data-density="compact"] [ui~="table"] td {
		height: 2rem;
		padding: 0 var(--s-3);
	}

	/* ── SCROLL CONTAINER ──────────────────────────────────────── */
	[ui~="scroll"] {
		max-height: var(--scroll-h, 70vh);
		overflow-y: auto;
	}

	/* ── TOGGLE (expand/collapse indicator) ────────────────────── */
	[ui~="toggle"] {
		font-size: 0.75rem;
		color: var(--tx-2);
		margin-inline-end: var(--s-1);
		transition: transform var(--t-fast) var(--ease);
		display: inline-block;
	}
	[ui~="toggle"][aria-expanded="true"] {
		transform: rotate(90deg);
	}
	[ui~="toggle"]:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}

	/* ── ASIDE (inline secondary text) ─────────────────────────── */
	[ui~="aside"] {
		font-size: 0.75rem;
		font-weight: 400;
		color: var(--tx-2);
		margin-inline-start: var(--s-2);
	}

	/* ── PRIORITY INDICATOR ────────────────────────────────────── */
	[ui~="pri"] {
		padding: var(--s-1) var(--s-2);
		border-radius: var(--r-sm);
		border: 1px solid var(--bdr-1);
		background: none;
		cursor: pointer;
		font-size: 0.75rem;
		font-weight: 600;
		transition: all var(--t-fast) var(--ease);
		line-height: 1;
	}
	[ui~="pri"]:hover {
		transform: scale(1.1);
	}
	[ui~="pri"]:focus-visible {
		outline: 2px solid var(--ac);
		outline-offset: 2px;
	}
	[ui~="pri"][data-pri="P0"] {
		color: var(--er);
		border-color: var(--er);
	}
	[ui~="pri"][data-pri="P0"][ui~="active"] {
		background: var(--er);
		color: var(--bg-0);
	}
	[ui~="pri"][data-pri="P1"] {
		color: var(--wr);
		border-color: var(--wr);
	}
	[ui~="pri"][data-pri="P1"][ui~="active"] {
		background: var(--wr);
		color: var(--bg-0);
	}
	[ui~="pri"][data-pri="P2"] {
		color: var(--tx-1);
		border-color: var(--bdr-2);
	}
	[ui~="pri"][data-pri="P2"][ui~="active"] {
		background: var(--tx-1);
		color: var(--bg-0);
	}
	[ui~="pri"][data-pri="P3"] {
		color: var(--tx-2);
		border-color: var(--bdr-1);
	}
	[ui~="pri"][data-pri="P3"][ui~="active"] {
		background: var(--tx-2);
		color: var(--bg-0);
	}

	/* ── FORM VALIDATION (CSS-only, no JS) ───────────────────── */
	/* :user-invalid fires AFTER user interaction — no flash on load.
   Replaces React Hook Form visual feedback entirely. */
	[ui~="input"]:user-valid {
		border-color: color-mix(in oklch, var(--ok-base) 40%, transparent);
	}
	[ui~="input"]:user-invalid {
		border-color: var(--er);
		box-shadow: 0 0 0 3px var(--er-bg);
	}
	[ui~="input"]:user-invalid + [ui~="caption"] {
		color: var(--er);
	}
	[ui~="input"]:user-valid + [ui~="caption"] {
		color: var(--ok);
	}
	/* Auto-disable submit when form has invalid inputs — zero JS */
	form:has([ui~="input"]:user-invalid) [ui~="button"][type="submit"] {
		opacity: 0.4;
		pointer-events: none;
		filter: grayscale(0.5);
	}

	/* ── AUTO-STAGGER — position-aware animation ─────────────── */
	/* Eliminates manual d1, d2, d3... Just wrap: ui="grid stagger"
   Children auto-delay based on position. Up to 12 items. */
	[ui~="stagger"] > * {
		animation: ceduix-in 0.6s var(--ease) both;
		animation-play-state: paused;
	}
	[ui~="stagger"].in-view > * {
		animation-play-state: running;
	}
	[ui~="stagger"] > :nth-child(1) {
		animation-delay: 0s;
	}
	[ui~="stagger"] > :nth-child(2) {
		animation-delay: 0.06s;
	}
	[ui~="stagger"] > :nth-child(3) {
		animation-delay: 0.12s;
	}
	[ui~="stagger"] > :nth-child(4) {
		animation-delay: 0.18s;
	}
	[ui~="stagger"] > :nth-child(5) {
		animation-delay: 0.24s;
	}
	[ui~="stagger"] > :nth-child(6) {
		animation-delay: 0.3s;
	}
	[ui~="stagger"] > :nth-child(7) {
		animation-delay: 0.36s;
	}
	[ui~="stagger"] > :nth-child(8) {
		animation-delay: 0.42s;
	}
	[ui~="stagger"] > :nth-child(9) {
		animation-delay: 0.48s;
	}
	[ui~="stagger"] > :nth-child(10) {
		animation-delay: 0.54s;
	}
	[ui~="stagger"] > :nth-child(11) {
		animation-delay: 0.6s;
	}
	[ui~="stagger"] > :nth-child(12) {
		animation-delay: 0.66s;
	}

	/* ── CLAMP — progressive disclosure ──────────────────────── */
	/* Truncate long text to N lines. Default 3. Override with style="--lines:5" */
	[ui~="clamp"] {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--lines, 3);
		overflow: hidden;
	}

	/* ── UTILS ────────────────────────────────────────────────── */
	[ui~="truncate"] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	[ui~="grow"] {
		flex: 1;
	}
	[ui~="shrink-0"] {
		flex-shrink: 0;
	}

	/* ── MOBILE NAV ──────────────────────────────────────────── */
	.nav-toggle {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
		padding: var(--s-2);
		color: var(--tx-2);
	}
	.nav-toggle:hover {
		color: var(--tx-0);
	}
	.nav-mobile {
		display: none;
		position: fixed;
		top: 60px;
		right: var(--s-4);
		z-index: 99;
		border-radius: var(--r-lg);
		padding: var(--s-2) 0;
		min-width: 160px;
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease;
		pointer-events: none;
	}
	.nav-mobile.open {
		display: block;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.nav-mobile a:hover {
		color: var(--tx-0);
		background: var(--ac-bg);
	}
	@media (max-width: 640px) {
		.nav-desktop {
			display: none !important;
		}
		.nav-toggle {
			display: block;
		}
	}

	/* ── GLOBAL POLISH ────────────────────────────────────────── */
	::selection {
		background: var(--ac);
		color: var(--bg-0);
	}
	::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
	::-webkit-scrollbar-track {
		background: var(--bg-0);
	}
	::-webkit-scrollbar-thumb {
		background: var(--ac-lo);
		border-radius: var(--r-md);
	}

	/* ── OPTICAL ALIGNMENT (text-box-trim) ───────────────────── */
	/* CSS Snapshot 2026 · Chrome/Edge 133+, Safari 18.2+ · Firefox pending
   Trims browser's built-in over/under leading so heading/button/eyebrow
   bounding boxes hug cap-to-alphabetic edges. */
	@supports (text-box: trim-both cap alphabetic) {
		[ui~="heading"],
		[ui~="subheading"],
		[ui~="eyebrow"],
		[ui~="button"],
		[ui~="badge"],
		[ui~="caption"] {
			text-box: trim-both cap alphabetic;
		}
	}

	/* ── ACCESSIBILITY (prefers-*) ───────────────────────────── */
	/* #1 reduced-motion — covers all UI + chart transitions */
	@media (prefers-reduced-motion: reduce) {
		:root,
		[ui~="animate"],
		[ui~="reveal"],
		[ui~="stagger"] > *,
		[ui~="skeleton"],
		[ui~="tab"],
		[ui~="dialog"],
		[ui~="pulse"]::before,
		[popover],
		dialog,
		[ui~="card"],
		[ui~="overlay"],
		[ui~="button"],
		[ui~="input"],
		[ui~="accordion"] summary,
		[ui~="accordion"] summary::after,
		[ui~="switch"] input,
		[ui~="switch"] input::before,
		[ui~="progress"]::-webkit-progress-value,
		[ui~="breadcrumb"] a,
		[ui~="table"] th[data-sort],
		[ui~="table"] th[data-sort]::after,
		[ui~="table"] tr[ui~="group"],
		[ui~="toggle"],
		[ui~="pri"],
		.nav-mobile {
			animation: none !important;
			transition: none !important;
		}
		[ui~="reveal"] {
			opacity: 1;
			transform: none;
		}
	}
	/* #3 prefers-contrast: more — bump borders + muted text for clearer edges */
	@media (prefers-contrast: more) {
		:root {
			--bdr-1: color-mix(in oklch, var(--tx-base) 14%, transparent);
			--bdr-2: color-mix(in oklch, var(--tx-base) 22%, transparent);
			--bdr-3: color-mix(in oklch, var(--tx-base) 34%, transparent);
			--tx-2: color-mix(in oklch, var(--tx-base) 65%, var(--bg-base));
			--tx-3: color-mix(in oklch, var(--tx-base) 45%, var(--bg-base));
		}
	}
	/* #4 prefers-reduced-data — drop backdrop-filter (GPU + bandwidth) */
	@media (prefers-reduced-data: reduce) {
		[ui~="glass"],
		[ui~="dialog"]::backdrop,
		dialog::backdrop {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}

	/* ── CED CHARTS — line/area/bar/scatter/pie/heatmap ────────── */
	.ax,
	.ax-wrap {
		position: relative;
		width: 100%;
	}
	.ax svg {
		display: block;
	}
	.ax-axes text,
	.ax-mark-label,
	.ax-heat-x,
	.ax-heat-y,
	.ax-heat-legend-label,
	.ax-range-btn,
	.ax-range-input,
	.ax-range-sep,
	.ax-tip-time,
	.ax-leg-name,
	.ax-heat-label {
		font-family: var(--f-mono);
	}
	.ax-s,
	.ax-bar,
	.ax-dot,
	.ax-heat-cell,
	.ax-leg-item {
		transition: opacity 0.15s ease;
	}
	.ax-grid line {
		stroke: var(--ch-grid);
		stroke-width: 1;
		stroke-dasharray: 4, 4;
	}
	.ax-axes text {
		font-size: 11.5px;
		font-weight: 500;
		fill: var(--ch-axis);
		letter-spacing: 0.02em;
	}
	.ax-mark-line {
		stroke-width: 1;
		stroke-dasharray: 6, 3;
		opacity: 0.6;
	}
	.ax-mark-label {
		font-size: 9px;
		fill: var(--ch-axis);
	}
	.ax-line {
		vector-effect: non-scaling-stroke;
	}
	.ax-wedge {
		stroke: var(--bg-0);
		stroke-width: 2;
	}
	.ax-pie-label {
		font-family: var(--f-ui);
		font-size: 11px;
		font-weight: 500;
		fill: var(--bg-0);
	}
	.ax-cross {
		stroke: var(--ch-axis);
		stroke-width: 1;
		stroke-dasharray: 4, 3;
		opacity: 0.4;
		pointer-events: none;
	}
	/* Tooltip — dark glass */
	.ax-tip {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		pointer-events: none;
		min-width: 140px;
		background: var(--ch-tip-bg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid var(--ch-tip-bdr);
		border-radius: var(--r-lg);
		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
		padding: 10px 14px;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease;
		font-family: var(--f-ui);
	}
	.ax-tip-time {
		font-size: 0.7rem;
		color: rgba(255, 255, 255, 0.55);
		letter-spacing: 0.04em;
		margin-bottom: 6px;
		white-space: nowrap;
	}
	.ax-tip-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		font-size: 0.8rem;
		line-height: 1.6;
	}
	.ax-tip-name {
		display: flex;
		align-items: center;
		gap: 6px;
		color: rgba(255, 255, 255, 0.8);
		white-space: nowrap;
	}
	.ax-tip-dot,
	.ax-leg-dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 2px;
		flex-shrink: 0;
	}
	.ax-tip-val {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		color: #fff;
		white-space: nowrap;
	}
	.ax-tip-cols {
		column-count: 2;
		column-gap: 20px;
	}
	.ax-tip-cols .ax-tip-row {
		break-inside: avoid;
	}
	/* Legend — columnar, click to toggle */
	.ax-leg {
		column-width: 210px;
		column-gap: 4px;
		padding: 8px 0 0;
	}
	.ax-leg-item {
		display: flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		user-select: none;
		font-size: 0.78rem;
		break-inside: avoid;
		height: 22px;
	}
	.ax-leg-item.off {
		opacity: 0.3;
	}
	.ax-leg-item.off .ax-leg-dot {
		background: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 2px,
			var(--tx-3) 2px,
			var(--tx-3) 3px
		) !important;
	}
	.ax-leg-name {
		font-size: 0.72rem;
		color: var(--tx-2);
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ax-leg-val {
		font-variant-numeric: tabular-nums;
		font-weight: 500;
		color: var(--tx-1);
		margin-left: 4px;
		white-space: nowrap;
		flex-shrink: 0;
	}
	/* Heatmap */
	.ax-heat-cell:hover {
		opacity: 0.8;
		stroke: var(--ch-axis);
		stroke-width: 1.5;
	}
	.ax-heat-label {
		font-size: 11px;
		font-weight: 500;
		pointer-events: none;
	}
	.ax-heat-x,
	.ax-heat-y {
		font-size: 11.5px;
		font-weight: 500;
		fill: var(--ch-axis);
	}
	.ax-heat-legend-label {
		font-size: 10px;
		fill: var(--ch-axis);
	}
	/* Range selector */
	.ax-range {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		padding: 0 0 10px;
	}
	.ax-range-presets {
		display: flex;
		gap: 2px;
		border: 1px solid var(--ch-grid);
		border-radius: 8px;
		padding: 2px;
	}
	.ax-range-btn {
		background: none;
		border: none;
		padding: 4px 12px;
		border-radius: 6px;
		font-size: 0.72rem;
		color: var(--ch-axis);
		cursor: pointer;
	}
	.ax-range-btn:hover {
		background: var(--ch-grid);
	}
	.ax-range-btn.active {
		background: var(--ac);
		color: var(--bg-0);
	}
	.ax-range-custom {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-left: auto;
	}
	.ax-range-input {
		background: transparent;
		border: 1px solid var(--ch-grid);
		border-radius: 6px;
		padding: 3px 8px;
		font-size: 0.72rem;
		color: var(--ch-axis);
		outline: none;
	}
	.ax-range-input:focus {
		border-color: var(--ch-axis);
	}
	.ax-range-input::-webkit-calendar-picker-indicator {
		filter: invert(0.5);
	}
} /* end @layer ceduix */