/* alert.templ */
/* Entrance animation */
		@keyframes alert-enter {
			from {
				opacity: 0;
				transform: translateY(4px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Base */
		.alert {
			position: relative;
			display: grid;
			width: 100%;
			gap: 0.25rem;
			border-radius: var(--radius-lg);
			border: 1px solid var(--border);
			padding: 0.625rem 0.75rem;
			text-align: left;
			font-size: 0.875rem;
			line-height: 1.25rem;
			animation: alert-enter 250ms cubic-bezier(0.2, 0, 0.2, 1) both;
		}

		.alert:has(> svg) {
			grid-template-columns: auto 1fr;
			column-gap: 0.5rem;
		}

		.alert > svg {
			grid-row: span 2;
			translate: 0 0.125rem;
			color: currentColor;
			width: 1rem;
			height: 1rem;
		}

		.alert:has([data-slot="alert-action"]) {
			padding-right: 4.5rem;
		}

		/* Variant: default */
		.alert-default {
			background-color: var(--card);
			color: var(--card-foreground);
		}

		/* Variant: destructive */
		.alert-destructive {
			background-color: color-mix(in oklch, var(--destructive) 5%, var(--card));
			color: var(--destructive);
		}

		.alert-destructive .alert-description {
			color: color-mix(in oklch, var(--destructive) 90%, transparent);
		}

		.alert-destructive > svg {
			color: currentColor;
		}

		/* AlertTitle */
		.alert-title {
			font-weight: 500;
			line-height: 1.375;
		}

		.alert:has(> svg) .alert-title {
			grid-column-start: 2;
		}

		.alert-title a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.alert-title a:hover {
			color: var(--foreground);
		}

		/* AlertDescription */
		.alert-description {
			font-size: 0.875rem;
			color: var(--muted-foreground);
			text-wrap: balance;
		}

		@media (min-width: 768px) {
			.alert-description {
				text-wrap: pretty;
			}
		}

		.alert-description a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.alert-description a:hover {
			color: var(--foreground);
		}

		.alert-description p:not(:last-child) {
			margin-bottom: 1rem;
		}

		/* AlertAction */
		.alert-action {
			position: absolute;
			top: 50%;
			right: 0.5rem;
			transform: translateY(-50%);
		}

		/* Dark mode */
		.dark .alert-destructive {
			background-color: color-mix(in oklch, var(--destructive) 10%, var(--card));
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.alert {
				animation: none;
			}
		}

/* avatar.templ */
/* Avatar: Base */
		.avatar {
			position: relative;
			display: inline-flex;
			width: 2rem;
			height: 2rem;
			flex-shrink: 0;
			border-radius: 9999px;
			user-select: none;
			vertical-align: middle;
		}

		/* Subtle border overlay for definition against backgrounds */
		.avatar::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 9999px;
			border: 1px solid var(--border);
			mix-blend-mode: darken;
			pointer-events: none;
		}

		/* Size: sm */
		.avatar-sm {
			width: 1.5rem;
			height: 1.5rem;
		}

		/* Size: lg */
		.avatar-lg {
			width: 2.5rem;
			height: 2.5rem;
		}

		/* Avatar Image */
		.avatar-image {
			aspect-ratio: 1 / 1;
			width: 100%;
			height: 100%;
			border-radius: 9999px;
			object-fit: cover;
		}

		/* Hide broken image when src fails to load */
		.avatar-image[data-error="true"] {
			display: none;
		}

		/* Avatar Fallback */
		.avatar-fallback {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			border-radius: 9999px;
			background-color: var(--muted);
			color: var(--muted-foreground);
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1;
		}

		.avatar-sm .avatar-fallback {
			font-size: 0.75rem;
		}

		.avatar-lg .avatar-fallback {
			font-size: 1rem;
		}

		/* Fallback hidden when image loaded successfully */
		.avatar-image:not([data-error="true"]) ~ .avatar-fallback {
			display: none;
		}

		/* Avatar Badge */
		.avatar-badge {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 10;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 9999px;
			background-color: var(--primary);
			color: var(--primary-foreground);
			ring: 2px solid var(--background);
			box-shadow: 0 0 0 2px var(--background);
			user-select: none;
		}

		/* Badge sizes per avatar size */
		.avatar[data-size="sm"] .avatar-badge {
			width: 0.5rem;
			height: 0.5rem;
		}
		.avatar[data-size="sm"] .avatar-badge svg {
			display: none;
		}

		.avatar[data-size="default"] .avatar-badge {
			width: 0.625rem;
			height: 0.625rem;
		}
		.avatar[data-size="default"] .avatar-badge svg {
			width: 0.5rem;
			height: 0.5rem;
		}

		.avatar[data-size="lg"] .avatar-badge {
			width: 0.75rem;
			height: 0.75rem;
		}
		.avatar[data-size="lg"] .avatar-badge svg {
			width: 0.5rem;
			height: 0.5rem;
		}

		/* Avatar Group */
		.avatar-group {
			display: flex;
		}
		.avatar-group > .avatar {
			margin-left: -0.5rem;
			box-shadow: 0 0 0 2px var(--background);
		}
		.avatar-group > .avatar:first-child {
			margin-left: 0;
		}

		/* Avatar Group Count */
		.avatar-group-count {
			position: relative;
			display: flex;
			width: 2rem;
			height: 2rem;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			border-radius: 9999px;
			background-color: var(--muted);
			color: var(--muted-foreground);
			font-size: 0.875rem;
			font-weight: 500;
			margin-left: -0.5rem;
			box-shadow: 0 0 0 2px var(--background);
		}

		.avatar-group-count svg {
			width: 1rem;
			height: 1rem;
		}

		/* Group count adapts to avatar sizes in the group */
		.avatar-group:has(.avatar-sm) .avatar-group-count {
			width: 1.5rem;
			height: 1.5rem;
			font-size: 0.75rem;
		}
		.avatar-group:has(.avatar-sm) .avatar-group-count svg {
			width: 0.75rem;
			height: 0.75rem;
		}

		.avatar-group:has(.avatar-lg) .avatar-group-count {
			width: 2.5rem;
			height: 2.5rem;
		}
		.avatar-group:has(.avatar-lg) .avatar-group-count svg {
			width: 1.25rem;
			height: 1.25rem;
		}

		/* Image load transition */
		.avatar-image {
			opacity: 0;
			transition: opacity 200ms ease-out;
		}
		.avatar-image[data-loaded="true"] {
			opacity: 1;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.avatar-image {
				transition-duration: 0ms;
				opacity: 1;
			}
		}

		/* Dark mode */
		.dark .avatar::after {
			mix-blend-mode: lighten;
		}

/* badge.templ */
/* Base */
		.badge {
			display: inline-flex;
			height: 1.5rem;
			width: fit-content;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			gap: 0.25rem;
			overflow: hidden;
			border-radius: 9999px;
			border: 1px solid transparent;
			padding: 0.125rem 0.5rem;
			font-size: 0.75rem;
			line-height: 1rem;
			font-weight: 500;
			white-space: nowrap;
			transition-property: background-color, color, border-color, box-shadow, opacity, transform;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		.badge:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
			outline: none;
		}

		.badge[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		.badge svg {
			pointer-events: none;
			width: 0.75rem !important;
			height: 0.75rem !important;
		}

		/* Icon padding: more breathing room on the side with an icon */
		.badge:has(> [data-icon="inline-start"]) {
			padding-left: 0.375rem;
		}
		.badge:has(> [data-icon="inline-end"]) {
			padding-right: 0.375rem;
		}

		/* Interactive badges (inside links) */
		a:active > .badge {
			transform: scale(0.95);
			transition-duration: 100ms;
		}

		/* Variant: default */
		.badge-default {
			background-color: var(--primary);
			color: var(--primary-foreground);
		}
		a:hover > .badge-default {
			background-color: color-mix(in oklch, var(--primary) 80%, transparent);
		}

		/* Variant: secondary */
		.badge-secondary {
			background-color: var(--secondary);
			color: var(--secondary-foreground);
		}
		a:hover > .badge-secondary {
			background-color: color-mix(in oklch, var(--secondary) 80%, transparent);
		}

		/* Variant: destructive */
		.badge-destructive {
			background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
			color: var(--destructive);
		}
		.badge-destructive:focus-visible {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}
		a:hover > .badge-destructive {
			background-color: color-mix(in oklch, var(--destructive) 25%, transparent);
		}

		/* Variant: outline */
		.badge-outline {
			border-color: var(--border);
			color: var(--foreground);
		}
		a:hover > .badge-outline {
			background-color: var(--muted);
			color: var(--muted-foreground);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.badge {
				transition-duration: 75ms;
			}
			a:active > .badge {
				transform: none;
			}
		}

		/* Dark mode */
		.dark .badge-destructive {
			background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
		}
		.dark a:hover > .badge-destructive {
			background-color: color-mix(in oklch, var(--destructive) 30%, transparent);
		}
		.dark .badge-destructive:focus-visible {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}
		.dark .badge[aria-invalid="true"] {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

/* base.templ */
/* --- Fonts --- */
				@font-face {
					font-family: 'Geist';
					src: url('/static/font/GeistVF.woff2') format('woff2');
					font-weight: 100 900;
					font-style: normal;
					font-display: swap;
				}

				@font-face {
					font-family: 'Geist';
					src: url('/static/font/GeistItalicVF.woff2') format('woff2');
					font-weight: 100 900;
					font-style: italic;
					font-display: swap;
				}

				@font-face {
					font-family: 'Geist Mono';
					src: url('/static/font/GeistMonoVF.woff2') format('woff2');
					font-weight: 100 900;
					font-style: normal;
					font-display: swap;
				}

				/* --- Tokens --- */
				:root {
					--background: oklch(1 0 0);
					--foreground: oklch(0.145 0 0);
					--card: oklch(1 0 0);
					--card-foreground: oklch(0.145 0 0);
					--popover: oklch(1 0 0);
					--popover-foreground: oklch(0.145 0 0);
					--primary: oklch(0.205 0 0);
					--primary-foreground: oklch(0.985 0 0);
					--secondary: oklch(0.97 0 0);
					--secondary-foreground: oklch(0.205 0 0);
					--accent: oklch(0.97 0 0);
					--accent-foreground: oklch(0.205 0 0);
					--muted: oklch(0.97 0 0);
					--muted-foreground: oklch(0.556 0 0);
					--destructive: oklch(0.58 0.22 27);
					--border: oklch(0.922 0 0);
					--input: oklch(0.922 0 0);
					--ring: oklch(0.708 0 0);
					--radius: 0.625rem;
					--radius-md: calc(var(--radius) * 0.8);
					--radius-lg: var(--radius);
					--chart-1: oklch(0.646 0.222 41.116);
					--chart-2: oklch(0.6 0.118 184.704);
					--chart-3: oklch(0.398 0.07 227.392);
					--chart-4: oklch(0.828 0.189 84.429);
					--chart-5: oklch(0.769 0.188 70.08);
				}

				.dark {
					--background: oklch(0.145 0 0);
					--foreground: oklch(0.985 0 0);
					--card: oklch(0.145 0 0);
					--card-foreground: oklch(0.985 0 0);
					--popover: oklch(0.145 0 0);
					--popover-foreground: oklch(0.985 0 0);
					--primary: oklch(0.985 0 0);
					--primary-foreground: oklch(0.205 0 0);
					--secondary: oklch(0.269 0 0);
					--secondary-foreground: oklch(0.985 0 0);
					--accent: oklch(0.269 0 0);
					--accent-foreground: oklch(0.985 0 0);
					--muted: oklch(0.269 0 0);
					--muted-foreground: oklch(0.708 0 0);
					--destructive: oklch(0.58 0.22 27);
					--border: oklch(0.269 0 0);
					--input: oklch(0.269 0 0);
					--ring: oklch(0.556 0 0);
					--chart-1: oklch(0.488 0.243 264.376);
					--chart-2: oklch(0.696 0.17 162.48);
					--chart-3: oklch(0.769 0.188 70.08);
					--chart-4: oklch(0.627 0.265 303.9);
					--chart-5: oklch(0.645 0.246 16.439);
				}

				/* --- Reset --- */
				*,
				::after,
				::before,
				::backdrop,
				::file-selector-button {
					box-sizing: border-box; /* 1 */
					margin: 0; /* 2 */
					padding: 0; /* 2 */
					border: 0 solid; /* 3 */
				}

				html,
				:host {
					line-height: 1.5; /* 1 */
					-webkit-text-size-adjust: 100%; /* 2 */
					tab-size: 4; /* 3 */
					font-family: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
					font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
					font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
					-webkit-tap-highlight-color: transparent; /* 7 */
				}

				hr {
					height: 0; /* 1 */
					color: inherit; /* 2 */
					border-top-width: 1px; /* 3 */
				}

				abbr:where([title]) {
					-webkit-text-decoration: underline dotted;
					text-decoration: underline dotted;
				}

				h1,
				h2,
				h3,
				h4,
				h5,
				h6 {
					font-size: inherit;
					font-weight: inherit;
				}

				a {
					color: inherit;
					-webkit-text-decoration: inherit;
					text-decoration: inherit;
				}

				b,
				strong {
					font-weight: bolder;
				}

				code,
				kbd,
				samp,
				pre {
					font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
					font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
					font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
					font-size: 1em; /* 4 */
				}

				small {
					font-size: 80%;
				}

				sub,
				sup {
					font-size: 75%;
					line-height: 0;
					position: relative;
					vertical-align: baseline;
				}

				sub {
					bottom: -0.25em;
				}

				sup {
					top: -0.5em;
				}

				table {
					text-indent: 0; /* 1 */
					border-color: inherit; /* 2 */
					border-collapse: collapse; /* 3 */
				}

				:-moz-focusring {
					outline: auto;
				}

				progress {
					vertical-align: baseline;
				}

				summary {
					display: list-item;
				}

				ol,
				ul,
				menu {
					list-style: none;
				}

				img,
				svg,
				video,
				canvas,
				audio,
				iframe,
				embed,
				object {
					display: block; /* 1 */
					vertical-align: middle; /* 2 */
				}

				img,
				video {
					max-width: 100%;
					height: auto;
				}

				button,
				input,
				select,
				optgroup,
				textarea,
				::file-selector-button {
					font: inherit; /* 1 */
					font-feature-settings: inherit; /* 1 */
					font-variation-settings: inherit; /* 1 */
					letter-spacing: inherit; /* 1 */
					color: inherit; /* 1 */
					border-radius: 0; /* 2 */
					background-color: transparent; /* 3 */
					opacity: 1; /* 4 */
				}

				:where(select:is([multiple], [size])) optgroup {
					font-weight: bolder;
				}

				:where(select:is([multiple], [size])) optgroup option {
					padding-inline-start: 20px;
				}

				::file-selector-button {
					margin-inline-end: 4px;
				}

				::placeholder {
					opacity: 1;
				}

				@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
				(contain-intrinsic-size: 1px) /* Safari 17+ */ {
					::placeholder {
						color: color-mix(in oklab, currentcolor 50%, transparent);
					}
				}

				textarea {
					resize: vertical;
				}

				::-webkit-search-decoration {
					-webkit-appearance: none;
				}

				::-webkit-date-and-time-value {
					min-height: 1lh;
					text-align: inherit;
				}

				::-webkit-datetime-edit {
					display: inline-flex;
				}

				::-webkit-datetime-edit-fields-wrapper {
					padding: 0;
				}

				::-webkit-datetime-edit,
				::-webkit-datetime-edit-year-field,
				::-webkit-datetime-edit-month-field,
				::-webkit-datetime-edit-day-field,
				::-webkit-datetime-edit-hour-field,
				::-webkit-datetime-edit-minute-field,
				::-webkit-datetime-edit-second-field,
				::-webkit-datetime-edit-millisecond-field,
				::-webkit-datetime-edit-meridiem-field {
					padding-block: 0;
				}

				::-webkit-calendar-picker-indicator {
					line-height: 1;
				}

				:-moz-ui-invalid {
					box-shadow: none;
				}

				button,
				input:where([type='button'], [type='reset'], [type='submit']),
				::file-selector-button {
					appearance: button;
				}

				::-webkit-inner-spin-button,
				::-webkit-outer-spin-button {
					height: auto;
				}

				[hidden]:where(:not([hidden='until-found'])) {
					display: none !important;
				}

				body {
					background-color: var(--background);
					color: var(--foreground);
				}

				/* --- Skip Link --- */
				.skip-link {
					position: absolute;
					top: -40px;
					left: 0;
					background-color: var(--primary);
					color: var(--primary-foreground);
					padding: 0.5rem 1rem;
					text-decoration: none;
					border-radius: 0 0 var(--radius-md) 0;
					font-weight: 500;
					z-index: 9999;
					transition: top 150ms ease-out;
				}
				.skip-link:focus {
					top: 0;
				}
				@media (prefers-reduced-motion: reduce) {
					.skip-link { transition: none; }
				}

/* breadcrumb.templ */
/* Base nav */
		.breadcrumb {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}

		/* List */
		.breadcrumb-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.375rem;
			overflow-wrap: break-word;
			list-style: none;
			padding: 0;
			margin: 0;
			color: var(--muted-foreground);
		}

		/* Item */
		.breadcrumb-item {
			display: inline-flex;
			align-items: center;
			gap: 0.25rem;
		}

		/* Link */
		.breadcrumb-link {
			color: var(--muted-foreground);
			text-decoration: none;
			transition-property: color;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		.breadcrumb-link:hover {
			color: var(--foreground);
		}

		/* Current page */
		.breadcrumb-page {
			font-weight: 400;
			color: var(--foreground);
		}

		/* Separator */
		.breadcrumb-separator {
			display: inline-flex;
			align-items: center;
		}

		.breadcrumb-separator svg {
			width: 0.875rem;
			height: 0.875rem;
			color: var(--muted-foreground);
		}

		/* Ellipsis */
		.breadcrumb-ellipsis {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.25rem;
			height: 1.25rem;
		}

		.breadcrumb-ellipsis svg {
			width: 1rem;
			height: 1rem;
			color: var(--muted-foreground);
		}

		/* Screen reader only */
		.breadcrumb .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;
		}

		/* Dark mode */
		.dark .breadcrumb-link:hover {
			color: var(--foreground);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.breadcrumb-link {
				transition-duration: 0ms;
			}
		}

/* button.templ */
/* Base */
		.btn {
			display: inline-flex;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			gap: 0.375rem;
			border-radius: var(--radius-lg);
			border: 1px solid transparent;
			background-clip: padding-box;
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 500;
			white-space: nowrap;
			transition-property: background-color, color, border-color, box-shadow, opacity, transform;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
			user-select: none;
			cursor: pointer;
			text-decoration: none;
			color: inherit;
		}

		.btn:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.btn:disabled {
			pointer-events: none;
			opacity: 0.5;
		}

		.btn[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		.btn svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		.btn:active:not(:disabled),
		.btn.btn-pressed {
			transform: scale(0.97);
			transition-duration: 100ms;
		}

		/* Variant: default */
		.btn-default {
			background-color: var(--primary);
			color: var(--primary-foreground);
		}
		.btn-default:hover {
			background-color: color-mix(in oklch, var(--primary) 80%, transparent);
		}

		/* Variant: outline */
		.btn-outline {
			border-color: var(--border);
			background-color: var(--background);
		}
		.btn-outline:hover {
			background-color: var(--muted);
			color: var(--foreground);
		}
		.btn-outline[aria-expanded="true"] {
			background-color: var(--muted);
			color: var(--foreground);
		}

		/* Variant: secondary */
		.btn-secondary {
			background-color: var(--secondary);
			color: var(--secondary-foreground);
		}
		.btn-secondary:hover {
			background-color: color-mix(in oklch, var(--secondary) 80%, transparent);
		}
		.btn-secondary[aria-expanded="true"] {
			background-color: var(--secondary);
			color: var(--secondary-foreground);
		}

		/* Variant: ghost */
		.btn-ghost {
			background-color: transparent;
		}
		.btn-ghost:hover {
			background-color: var(--muted);
			color: var(--foreground);
		}
		.btn-ghost[aria-expanded="true"] {
			background-color: var(--muted);
			color: var(--foreground);
		}

		/* Variant: destructive */
		.btn-destructive {
			background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
			color: var(--destructive);
		}
		.btn-destructive:hover {
			background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
		}
		.btn-destructive:focus-visible {
			border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Variant: link */
		.btn-link {
			background-color: transparent;
			color: var(--primary);
			text-underline-offset: 4px;
		}
		.btn-link:hover {
			text-decoration: underline;
		}

		/* Size: default */
		.btn-size-default {
			height: 2.25rem;
			gap: 0.375rem;
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		/* Size: xs */
		.btn-size-xs {
			height: 1.75rem;
			gap: 0.25rem;
			border-radius: min(var(--radius-md), 10px);
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			font-size: 0.75rem;
			line-height: 1rem;
		}
		.btn-size-xs svg {
			width: 0.75rem;
			height: 0.75rem;
		}

		/* Size: sm */
		.btn-size-sm {
			height: 2rem;
			gap: 0.25rem;
			border-radius: min(var(--radius-md), 12px);
			padding-left: 0.625rem;
			padding-right: 0.625rem;
			font-size: 0.8rem;
		}
		.btn-size-sm svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* Size: lg */
		.btn-size-lg {
			height: 2.5rem;
			gap: 0.375rem;
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		/* Size: icon */
		.btn-size-icon {
			width: 2.25rem;
			height: 2.25rem;
			padding: 0;
		}

		/* Size: icon-xs */
		.btn-size-icon-xs {
			width: 1.75rem;
			height: 1.75rem;
			padding: 0;
			border-radius: min(var(--radius-md), 10px);
		}
		.btn-size-icon-xs svg {
			width: 0.75rem;
			height: 0.75rem;
		}

		/* Size: icon-sm */
		.btn-size-icon-sm {
			width: 2rem;
			height: 2rem;
			padding: 0;
			border-radius: min(var(--radius-md), 12px);
		}

		/* Size: icon-lg */
		.btn-size-icon-lg {
			width: 2.5rem;
			height: 2.5rem;
			padding: 0;
		}

		/* Rounded */
		.btn.rounded-full {
			border-radius: 9999px;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.btn {
				transition-duration: 75ms;
			}
			.btn:active:not(:disabled),
			.btn.btn-pressed {
				transform: none;
			}
		}

		/* Dark mode */
		.dark .btn-outline {
			border-color: var(--input);
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .btn-outline:hover {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .btn-ghost:hover {
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}
		.dark .btn-destructive {
			background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
		}
		.dark .btn-destructive:hover {
			background-color: color-mix(in oklch, var(--destructive) 30%, transparent);
		}
		.dark .btn-destructive:focus-visible {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}
		.dark .btn[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

/* calendar.templ */
/* ── Root ── */
		.cal {
			--cal-cell: 2.2rem;
			--cal-radius: var(--radius-md);
			display: inline-flex;
			flex-direction: column;
			background: var(--background);
			padding: 0.5rem;
			width: fit-content;
			user-select: none;
		}

		/* ── Navigation ── */
		.cal-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.25rem;
			margin-bottom: 0.25rem;
		}

		.cal-nav-btn {
			width: var(--cal-cell);
			height: var(--cal-cell);
		}

		.cal-title {
			font-size: 0.875rem;
			font-weight: 500;
			text-align: center;
			flex: 1;
		}

		/* ── Grid ── */
		.cal-grid {
			width: 100%;
			border-collapse: collapse;
		}

		.cal-head {
			font-size: 0.8rem;
			font-weight: 400;
			color: var(--muted-foreground);
			text-align: center;
			width: var(--cal-cell);
			height: var(--cal-cell);
			padding: 0;
		}

		.cal-cell {
			padding: 1px;
			text-align: center;
		}

		/* ── Day button ── */
		.cal-day {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: var(--cal-cell);
			height: var(--cal-cell);
			border-radius: var(--cal-radius);
			border: 1px solid transparent;
			background: transparent;
			font-size: 0.875rem;
			line-height: 1;
			font-weight: 400;
			cursor: pointer;
			outline: none;
			padding: 0;
			font-family: inherit;
			color: var(--foreground);
			transition-property: background-color, color, border-color, box-shadow;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Anticipation — hover hints interactivity before click */
		.cal-day:hover:not(:disabled):not([data-selected]) {
			background: var(--muted);
		}

		.cal-day:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Follow Through — press feedback mirrors Button component */
			.cal-day:active:not(:disabled) {
				transform: scale(0.97);
				transition-duration: 80ms;
			}

		/*
		 * Von Restorff — today gets a unique dot indicator that persists
		 * across hover and selection states, acting as a spatial anchor
		 * the user can always find (Working Memory).
		 */
		.cal-day[data-today]::after {
			content: '';
			position: absolute;
			bottom: 2px;
			left: 50%;
			transform: translateX(-50%);
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: var(--primary);
			transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		.cal-day[data-today]:not([data-selected]) {
			font-weight: 500;
		}

		/* Selected today — dot inverts to stay visible (Selective Attention) */
		.cal-day[data-today][data-selected]::after {
			background: var(--primary-foreground);
		}

		/* Selected */
		.cal-day[data-selected] {
			background: var(--primary);
			color: var(--primary-foreground);
			font-weight: 500;
		}

		.cal-day[data-selected]:hover {
			background: color-mix(in oklch, var(--primary) 90%, transparent);
		}

		/*
		 * Squash & Stretch — selection pops with spring easing
		 * to confirm the tap registered (Doherty Threshold < 400 ms).
		 */
		.cal-day[data-selecting] {
			animation: cal-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		@keyframes cal-pop {
			from { transform: scale(0.85); }
			to   { transform: scale(1); }
		}

		/* Outside days — Law of Similarity: muted color signals "not this month" */
		.cal-day[data-outside] {
			color: var(--muted-foreground);
		}

		.cal-day[data-outside][data-selected] {
			background: color-mix(in oklch, var(--primary) 60%, transparent);
			color: var(--primary-foreground);
		}

		/* Disabled */
		.cal-day:disabled {
			color: var(--muted-foreground);
			opacity: 0.5;
			pointer-events: none;
			cursor: default;
		}

		.cal-day:disabled[data-today]::after {
			background: var(--muted-foreground);
		}

		/*
		 * ── Month transition ──
		 * Staging + Solid Drawing — directional slide communicates
		 * which way in time the user moved, maintaining spatial
		 * continuity with the prev/next button positions.
		 */

		/* Title slides in from navigation direction */
		.cal[data-direction="next"] .cal-title {
			animation: cal-slide-next 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}
		.cal[data-direction="prev"] .cal-title {
			animation: cal-slide-prev 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		/* Grid rows slide in with staggered delays
		   (Follow Through & Overlapping Action — parts settle
		   at slightly different times for organic feel) */
		.cal[data-direction="next"] .cal-week,
		.cal[data-direction="prev"] .cal-week {
			animation-duration: 150ms;
			animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1);
			animation-fill-mode: backwards;
		}
		.cal[data-direction="next"] .cal-week { animation-name: cal-slide-next; }
		.cal[data-direction="prev"] .cal-week { animation-name: cal-slide-prev; }

			.cal[data-direction] .cal-week:nth-child(1) { animation-delay: 0ms; }
			.cal[data-direction] .cal-week:nth-child(2) { animation-delay: 10ms; }
			.cal[data-direction] .cal-week:nth-child(3) { animation-delay: 20ms; }
			.cal[data-direction] .cal-week:nth-child(4) { animation-delay: 30ms; }
			.cal[data-direction] .cal-week:nth-child(5) { animation-delay: 40ms; }
			.cal[data-direction] .cal-week:nth-child(6) { animation-delay: 50ms; }

		@keyframes cal-slide-next {
			from { opacity: 0; transform: translateX(8px); }
			to   { opacity: 1; transform: translateX(0); }
		}
		@keyframes cal-slide-prev {
			from { opacity: 0; transform: translateX(-8px); }
			to   { opacity: 1; transform: translateX(0); }
		}

		/* ── Dark mode ── */
		.dark .cal-day:hover:not(:disabled):not([data-selected]) {
			background: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		.dark .cal-day[data-selected] {
			background: var(--primary);
			color: var(--primary-foreground);
		}

		.dark .cal-day[data-selected]:hover {
			background: color-mix(in oklch, var(--primary) 80%, transparent);
		}

		.dark .cal-day[data-today]::after {
			background: var(--primary);
		}

		.dark .cal-day[data-today][data-selected]::after {
			background: var(--primary-foreground);
		}

		/* ── Reduced motion — instant state changes, no transform (Timing) ── */
		@media (prefers-reduced-motion: reduce) {
			.cal-day {
				transition: none;
			}
			.cal-day:active:not(:disabled) {
				transform: none;
			}
			.cal-day[data-selecting] {
				animation: none;
			}
			.cal[data-direction] .cal-title,
			.cal[data-direction] .cal-week {
				animation: none;
			}
		}

/* card.templ */
/* Card base */
		.card {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			overflow: hidden;
			border-radius: 0.75rem;
			background-color: var(--card);
			padding-top: 1rem;
			padding-bottom: 1rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: var(--card-foreground);
			box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
			outline: none;
			transition-property: box-shadow, transform;
			transition-duration: 200ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		.card:has([data-slot="card-footer"]) {
			padding-bottom: 0;
		}

		.card:has(> img:first-child) {
			padding-top: 0;
		}

		.card > img:first-child {
			border-top-left-radius: 0.75rem;
			border-top-right-radius: 0.75rem;
		}

		.card > img:last-child {
			border-bottom-left-radius: 0.75rem;
			border-bottom-right-radius: 0.75rem;
		}

		/* Focus-visible */
		.card:focus-visible {
			box-shadow:
				0 0 0 1px var(--ring),
				0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Interactive card */
		.card-interactive {
			cursor: pointer;
		}

		.card-interactive:hover {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 12px color-mix(in oklch, var(--foreground) 8%, transparent);
			transform: translateY(-1px);
		}

		.card-interactive:active {
			transform: translateY(0);
			transition-duration: 100ms;
		}

		/* Card size: sm */
		.card[data-size="sm"] {
			gap: 0.75rem;
			padding-top: 0.75rem;
			padding-bottom: 0.75rem;
		}

		.card[data-size="sm"]:has([data-slot="card-footer"]) {
			padding-bottom: 0;
		}

		/* CardHeader */
		.card-header {
			display: grid;
			grid-auto-rows: min-content;
			align-items: start;
			gap: 0.25rem;
			border-top-left-radius: 0.75rem;
			border-top-right-radius: 0.75rem;
			padding-left: 1rem;
			padding-right: 1rem;
		}

		.card[data-size="sm"] .card-header {
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		.card-header:has([data-slot="card-action"]) {
			grid-template-columns: 1fr auto;
		}

		.card-header:has([data-slot="card-description"]) {
			grid-template-rows: auto auto;
		}

		.card-header.border-b {
			padding-bottom: 1rem;
			border-bottom: 1px solid var(--border);
		}

		.card[data-size="sm"] .card-header.border-b {
			padding-bottom: 0.75rem;
		}

		/* CardTitle */
		.card-title {
			font-size: 1rem;
			line-height: 1.375;
			font-weight: 500;
		}

		.card[data-size="sm"] .card-title {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}

		/* CardDescription */
		.card-description {
			font-size: 0.875rem;
			color: var(--muted-foreground);
		}

		/* CardAction */
		.card-action {
			grid-column-start: 2;
			grid-row: span 2 / span 2;
			grid-row-start: 1;
			align-self: start;
			justify-self: end;
		}

		/* CardContent */
		.card-content {
			padding-left: 1rem;
			padding-right: 1rem;
		}

		.card[data-size="sm"] .card-content {
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		/* CardFooter */
		.card-footer {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			border-bottom-left-radius: 0.75rem;
			border-bottom-right-radius: 0.75rem;
			border-top: 1px solid var(--border);
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
			padding: 1rem;
		}

		.card[data-size="sm"] .card-footer {
			padding: 0.75rem;
		}

		/* Dark mode */
		.dark .card {
			box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 15%, transparent);
		}

		.dark .card-interactive:hover {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 15%, transparent),
				0 4px 16px color-mix(in oklch, var(--foreground) 12%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.card {
				transition-duration: 0ms;
			}

			.card-interactive:hover {
				transform: none;
			}

			.card-interactive:active {
				transform: none;
			}
		}

/* carousel.templ */
/* Screen reader only — scoped to carousel */
		.carousel .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;
		}

		/* Carousel base */
		.carousel {
			outline: none;
		}
		.carousel:focus-visible {
			outline: 2px solid var(--ring);
			outline-offset: 2px;
			border-radius: var(--radius-lg);
		}

		/* Body — positioning context for nav buttons */
		.carousel-body {
			position: relative;
		}

		/* Viewport — clip boundary with cursor hint */
		.carousel-viewport {
			overflow: hidden;
			border-radius: var(--radius-lg);
			-webkit-user-select: none;
			user-select: none;
		}
		/* Tell the browser which axis we own — prevents page scroll fighting the drag */
		.carousel[data-orientation="horizontal"] .carousel-viewport {
			touch-action: pan-y pinch-zoom;
		}
		.carousel[data-orientation="vertical"] .carousel-viewport {
			touch-action: pan-x pinch-zoom;
		}
		.carousel-viewport[data-draggable] {
			cursor: grab;
		}
		.carousel-viewport[data-dragging] {
			cursor: grabbing;
		}

		/*
		 * Content track — spring curve overshoots slightly on arrival.
		 * During drag [data-dragging] kills transition for 1:1 finger tracking.
		 */
		.carousel-content {
			display: flex;
			will-change: transform;
			transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
		}
		.carousel[data-orientation="vertical"] .carousel-content {
			flex-direction: column;
		}
		.carousel-viewport[data-dragging] .carousel-content {
			transition: none;
		}

		/* Item — sized by JS */
		.carousel-item {
			flex: none;
		}

		/* Navigation buttons */
		.carousel .carousel-prev,
		.carousel .carousel-next {
			position: absolute;
			border-radius: 9999px;
			touch-action: manipulation;
			z-index: 1;
		}

		/* Horizontal button positions — outside content */
		.carousel[data-orientation="horizontal"] .carousel-prev {
			top: 50%;
			left: -2.5rem;
			transform: translateY(-50%);
		}
		.carousel[data-orientation="horizontal"] .carousel-next {
			top: 50%;
			right: -2.5rem;
			transform: translateY(-50%);
		}
		.carousel[data-orientation="horizontal"] .carousel-prev:hover:not(:disabled) {
			transform: translateY(-50%) translateX(-1px);
		}
		.carousel[data-orientation="horizontal"] .carousel-next:hover:not(:disabled) {
			transform: translateY(-50%) translateX(1px);
		}

		/* Vertical button positions — outside content */
		.carousel[data-orientation="vertical"] .carousel-prev {
			top: -2.5rem;
			left: 50%;
			transform: translateX(-50%) rotate(90deg);
		}
		.carousel[data-orientation="vertical"] .carousel-next {
			bottom: -2.5rem;
			left: 50%;
			transform: translateX(-50%) rotate(90deg);
		}
		.carousel[data-orientation="vertical"] .carousel-prev:hover:not(:disabled) {
			transform: translateX(-50%) rotate(90deg) translateX(-1px);
		}
		.carousel[data-orientation="vertical"] .carousel-next:hover:not(:disabled) {
			transform: translateX(-50%) rotate(90deg) translateX(1px);
		}

		/* Vertical layout: dots/counter beside viewport without shrinking content */
		.carousel[data-orientation="vertical"] {
			position: relative;
		}

		/* Dot indicators */
		.carousel-dots {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.25rem;
			padding-top: 0.75rem;
		}
		.carousel-dot {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;
			border: none;
			padding: 0;
			cursor: pointer;
			background: transparent;
			outline: none;
		}
		.carousel-dot::before {
			content: "";
			display: block;
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 9999px;
			background-color: var(--border);
			transition:
				width 250ms cubic-bezier(0.34, 1.4, 0.64, 1),
				background-color 200ms ease;
		}
		.carousel-dot:hover::before {
			background-color: var(--muted-foreground);
		}
		.carousel-dot:focus-visible {
			outline: 2px solid var(--ring);
			outline-offset: 0;
			border-radius: 9999px;
		}
		.carousel-dot[data-active]::before {
			width: 1.25rem;
			background-color: var(--foreground);
		}

		/* Vertical dots: column beside viewport */
		.carousel[data-orientation="vertical"] .carousel-dots {
			position: absolute;
			right: -2rem;
			top: 0;
			bottom: 0;
			flex-direction: column;
			justify-content: center;
			padding-top: 0;
		}
		.carousel[data-orientation="vertical"] .carousel-dot[data-active]::before {
			width: 0.5rem;
			height: 1.25rem;
		}

		/* Counter */
		.carousel-counter {
			text-align: center;
			padding-top: 0.5rem;
			font-size: 0.75rem;
			line-height: 1rem;
			color: var(--muted-foreground);
			font-variant-numeric: tabular-nums;
		}

		/* Vertical counter */
		.carousel[data-orientation="vertical"] .carousel-counter {
			position: absolute;
			right: -2.5rem;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding-top: 0;
			writing-mode: vertical-lr;
			text-orientation: mixed;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.carousel-content {
				transition: none;
			}
			.carousel-dot::before {
				transition: none;
			}
			.carousel[data-orientation="horizontal"] .carousel-prev:hover:not(:disabled) {
				transform: translateY(-50%);
			}
			.carousel[data-orientation="horizontal"] .carousel-next:hover:not(:disabled) {
				transform: translateY(-50%);
			}
			.carousel[data-orientation="vertical"] .carousel-prev:hover:not(:disabled) {
				transform: translateX(-50%) rotate(90deg);
			}
			.carousel[data-orientation="vertical"] .carousel-next:hover:not(:disabled) {
				transform: translateX(-50%) rotate(90deg);
			}
		}

		/* Dark mode */
		.dark .carousel-dot::before {
			background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
		}
		.dark .carousel-dot:hover::before {
			background-color: color-mix(in oklch, var(--foreground) 50%, transparent);
		}
		.dark .carousel-dot[data-active]::before {
			background-color: var(--foreground);
		}

/* chart.templ */
/* === Chart Container === */
		.chart {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			font-size: 0.75rem;
			line-height: 1rem;
		}

		.chart svg {
			display: block;
			width: 100%;
			height: auto;
			overflow: visible;
		}

		/* === Grid & Axes === */
		.chart-grid-line {
			stroke: var(--border);
			stroke-width: 1;
			stroke-dasharray: 4 4;
			opacity: 0.5;
		}

		.chart-axis-line {
			stroke: var(--border);
			stroke-width: 1;
		}

		.chart-axis-tick {
			fill: var(--muted-foreground);
			font-size: 0.7rem;
			font-family: inherit;
		}

		/* === Bars === */
		.chart-bar {
			transition: opacity 150ms ease-out;
		}
		.chart-bar:hover {
			opacity: 0.8;
		}

		/* === Lines === */
		.chart-line {
			fill: none;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* === Area === */
		.chart-area {
			opacity: 0.15;
		}

		/* === Dots === */
		.chart-dot {
			stroke-width: 2;
			stroke: var(--background);
			opacity: 0;
			transition: opacity 150ms ease-out;
		}
		.chart-dot-active {
			opacity: 1;
		}

		/* === Pie / Donut === */
		.chart-slice {
			transition: opacity 150ms ease-out;
			stroke: var(--background);
			stroke-width: 2;
		}
		.chart-slice:hover {
			opacity: 0.8;
		}
		.chart-donut-label {
			fill: var(--foreground);
			font-size: 1.5rem;
			font-weight: 600;
			dominant-baseline: central;
		}
		.chart-donut-sublabel {
			fill: var(--muted-foreground);
			font-size: 0.75rem;
			dominant-baseline: central;
		}

		/* === Tooltip === */
		.chart-tooltip {
			position: absolute;
			z-index: 50;
			pointer-events: none;
			display: none;
			min-width: 8rem;
			border-radius: var(--radius-lg);
			border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
			background-color: var(--background);
			padding: 0.375rem 0.625rem;
			font-size: 0.75rem;
			line-height: 1rem;
			color: var(--foreground);
			box-shadow:
				0 10px 15px -3px rgba(0, 0, 0, 0.1),
				0 4px 6px -4px rgba(0, 0, 0, 0.1);
			opacity: 0;
			transform: translateY(2px);
			transition: opacity 120ms ease-out, transform 120ms ease-out;
		}

		.chart-tooltip[data-visible] {
			display: block;
			opacity: 1;
			transform: translateY(0);
		}

		.chart-tooltip-label {
			font-weight: 500;
			margin-bottom: 0.25rem;
		}

		.chart-tooltip-row {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.0625rem 0;
		}

		.chart-tooltip-indicator {
			display: inline-block;
			width: 0.5rem;
			height: 0.5rem;
			flex-shrink: 0;
			border-radius: 2px;
		}

		.chart-tooltip-name {
			color: var(--muted-foreground);
			flex: 1;
		}

		.chart-tooltip-value {
			font-weight: 500;
			font-variant-numeric: tabular-nums;
			font-family: 'Geist Mono', ui-monospace, monospace;
		}

		/* === Legend === */
		.chart-legend {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap: 1rem;
			padding-top: 0.75rem;
		}

		.chart-legend-item {
			display: flex;
			align-items: center;
			gap: 0.375rem;
			font-size: 0.75rem;
			line-height: 1rem;
			color: var(--muted-foreground);
		}

		.chart-legend-color {
			width: 0.5rem;
			height: 0.5rem;
			flex-shrink: 0;
			border-radius: 2px;
		}

		/* === Entrance Animations === */
		@keyframes chart-bar-enter {
			from { transform: scaleY(0); }
			to   { transform: scaleY(1); }
		}

		@keyframes chart-line-enter {
			from { stroke-dashoffset: var(--line-length); }
			to   { stroke-dashoffset: 0; }
		}

		@keyframes chart-slice-enter {
			from { opacity: 0; transform: scale(0.96); }
			to   { opacity: 1; transform: scale(1); }
		}

		@keyframes chart-area-enter {
			from { opacity: 0; }
			to   { opacity: 0.15; }
		}

		.chart[data-animate] .chart-bar {
			transform-origin: center bottom;
			animation: chart-bar-enter 280ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
			animation-delay: calc(var(--i, 0) * 30ms);
		}

		.chart[data-animate] .chart-line {
			stroke-dasharray: var(--line-length);
			stroke-dashoffset: var(--line-length);
			animation: chart-line-enter 300ms ease-out both;
		}

		.chart[data-animate] .chart-area {
			opacity: 0;
			animation: chart-area-enter 250ms ease-out 80ms both;
		}

		.chart[data-animate] .chart-slice {
			transform-origin: center;
			animation: chart-slice-enter 250ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
			animation-delay: calc(var(--i, 0) * 40ms);
		}

		/* === Dark Mode === */
		.dark .chart-tooltip {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 10px 15px -3px rgba(0, 0, 0, 0.3);
		}

		.dark .chart-grid-line {
			opacity: 0.3;
		}

		/* === Reduced Motion === */
		@media (prefers-reduced-motion: reduce) {
			.chart[data-animate] .chart-bar,
			.chart[data-animate] .chart-line,
			.chart[data-animate] .chart-area,
			.chart[data-animate] .chart-slice {
				animation: none;
			}
			.chart-bar,
			.chart-dot,
			.chart-slice,
			.chart-tooltip {
				transition: none;
			}
			.chart-area {
				opacity: 0.15;
			}
		}

/* checkbox.templ */
/* Wrapper */
		.checkbox-wrapper {
			position: relative;
			display: inline-flex;
			width: 1.125rem;
			height: 1.125rem;
			flex-shrink: 0;
		}

		/* Native input: transparent overlay for interaction */
		.checkbox-input {
			position: absolute;
			inset: -0.5rem -0.75rem;
			opacity: 0;
			cursor: pointer;
			margin: 0;
			z-index: 1;
		}

		.checkbox-input:disabled {
			cursor: not-allowed;
		}

		/* Visual checkbox */
		.checkbox-visual {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.125rem;
			height: 1.125rem;
			border-radius: 4px;
			border: 1px solid var(--input);
			background: transparent;
			color: inherit;
			transition-property: color, background-color, border-color, box-shadow, transform;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Pressed feedback */
		.checkbox-input:active:not(:disabled) + .checkbox-visual {
			transform: scale(0.92);
			transition-duration: 100ms;
		}

		/* Focus visible */
		.checkbox-input:focus-visible + .checkbox-visual {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Disabled */
		.checkbox-input:disabled + .checkbox-visual {
			opacity: 0.5;
		}

		/* Disabled via parent group */
		[data-disabled="true"] .checkbox-input {
			pointer-events: none;
		}
		[data-disabled="true"] .checkbox-visual {
			opacity: 0.5;
		}

		/* Invalid */
		.checkbox-input[aria-invalid="true"] + .checkbox-visual {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Checked */
		.checkbox-input:checked + .checkbox-visual {
			border-color: var(--primary);
			background-color: var(--primary);
			color: var(--primary-foreground);
		}

		/* Invalid + Checked */
		.checkbox-input[aria-invalid="true"]:checked + .checkbox-visual {
			border-color: var(--primary);
		}

		/* Indicator */
		.checkbox-indicator {
			display: grid;
			place-content: center;
			color: currentColor;
			opacity: 1;
			transform: scale(1);
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.checkbox-indicator svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* Hide indicator when unchecked */
		.checkbox-input:not(:checked) + .checkbox-visual .checkbox-indicator {
			opacity: 0;
			transform: scale(0.5);
		}

		/* Dark mode */
		.dark .checkbox-visual {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}

		.dark .checkbox-input[aria-invalid="true"] + .checkbox-visual {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		.dark .checkbox-input:checked + .checkbox-visual {
			background-color: var(--primary);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.checkbox-visual {
				transition-duration: 75ms;
			}
			.checkbox-indicator {
				transition: none;
			}
			.checkbox-input:active:not(:disabled) + .checkbox-visual {
				transform: none;
			}
		}

/* collapsible.templ */
/* Base */
		.collapsible {
			border-radius: var(--radius-lg);
			border: 1px solid var(--border);
			background-color: var(--card);
			color: var(--card-foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
		}

		/* Trigger */
		.collapsible-trigger {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.5rem;
			padding: 0.75rem 1rem;
			font-weight: 500;
			cursor: pointer;
			user-select: none;
			list-style: none;
			outline: none;
			border-radius: var(--radius-lg);
			transition-property: background-color, border-radius;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Remove default marker */
		.collapsible-trigger::-webkit-details-marker {
			display: none;
		}
		.collapsible-trigger::marker {
			content: "";
		}

		.collapsible-trigger:hover {
			background-color: var(--muted);
		}

		.collapsible-trigger:focus-visible {
			box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
		}

		/* Chevron icon -- spring easing for follow-through */
		.collapsible-trigger svg {
			width: 1rem;
			height: 1rem;
			flex-shrink: 0;
			color: var(--muted-foreground);
			transition: transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1);
		}

		.collapsible[open] > .collapsible-trigger {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		.collapsible[open] > .collapsible-trigger svg[data-slot="collapsible-chevron"] {
			transform: rotate(180deg);
		}

		/* Restore border-radius during close */
		.collapsible[data-closing] > .collapsible-trigger {
			border-bottom-left-radius: var(--radius-lg);
			border-bottom-right-radius: var(--radius-lg);
			transition: border-radius 120ms cubic-bezier(0.4, 0, 0.7, 0.2);
		}

		/* Chevron animates back on close — faster ease-in for asymmetry */
		.collapsible[data-closing] > .collapsible-trigger svg[data-slot="collapsible-chevron"] {
			transform: rotate(0deg);
			transition: transform 120ms cubic-bezier(0.4, 0, 0.7, 0.2);
		}

		/*
		 * Content — asymmetric enter/exit (overlapping action).
		 * Enter: spring easing with translateY arc (200ms).
		 * Exit: snappy ease-in, faster for responsiveness (120ms).
		 */
		.collapsible-content {
			padding: 0.75rem 1rem;
			border-top: 1px solid var(--border);
			opacity: 1;
			transform: translateY(0);
			transition:
				opacity 200ms cubic-bezier(0.22, 1.1, 0.36, 1),
				transform 200ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		@starting-style {
			.collapsible[open] > .collapsible-content {
				opacity: 0;
				transform: translateY(-4px);
			}
		}

		/* Exit animation */
		.collapsible[data-closing] > .collapsible-content {
			animation: collapsible-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
			transition: none;
		}

		@keyframes collapsible-out {
			from { opacity: 1; transform: translateY(0); }
			to   { opacity: 0; transform: translateY(-4px); }
		}

		/* Dark mode */
		.dark .collapsible-trigger:hover {
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.collapsible-trigger,
			.collapsible-trigger svg,
			.collapsible-content {
				transition-duration: 0ms;
			}
			.collapsible[open]:not([data-closing]) > .collapsible-content,
			.collapsible[data-closing] > .collapsible-content {
				animation: none;
			}
		}

/* combobox.templ */
/* ── Root ── */
		.cbox {
			position: relative;
			display: inline-flex;
		}

		/* ── Input wrapper ── */
		.cbox-input-wrap {
			display: inline-flex;
			align-items: center;
			width: fit-content;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			background-color: transparent;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			height: 2rem;
		}

		/* Anticipation — hover hints at interactivity before click (Jakob's Law) */
		.cbox-input-wrap:hover:not(:has(:disabled)) {
			border-color: color-mix(in oklch, var(--ring) 40%, transparent);
		}

		.cbox-input-wrap:focus-within {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/*
		 * Secondary Action — expanded wrapper gets subtle bg tint so the user
		 * sees a visual connection between the input and the open panel
		 * (Law of Common Region + Working Memory).
		 */
		.cbox[data-open] .cbox-input-wrap {
			border-color: var(--ring);
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		.cbox-input-wrap:has(:disabled) {
			pointer-events: none;
			opacity: 0.5;
			cursor: not-allowed;
		}

		.cbox-input-wrap[aria-invalid="true"],
		.cbox-input-wrap:has([aria-invalid="true"]) {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* ── Input ── */
		.cbox-input {
			flex: 1;
			min-width: 0;
			width: 10rem;
			height: 100%;
			background: transparent;
			border: none;
			outline: none;
			padding: 0 0.625rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: inherit;
		}

		.cbox-input::placeholder {
			color: var(--muted-foreground);
		}

		/* ── Trigger button ── */
		.cbox-trigger {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 1.5rem;
			height: 1.5rem;
			padding: 0;
			border: none;
			background: transparent;
			color: var(--muted-foreground);
			cursor: pointer;
			border-radius: min(var(--radius-md), 10px);
			transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
			margin-right: 0.125rem;
		}

		.cbox-trigger svg {
			width: 1rem;
			height: 1rem;
			pointer-events: none;
		}

		/* Secondary Action — chevron follows hover to reinforce affordance */
		.cbox-trigger:hover {
			color: var(--foreground);
		}

		/* Squash & Stretch — subtle scale on press (physics-active-state) */
		.cbox-trigger:active:not(:disabled) {
			transform: scale(0.9);
			transition-duration: 100ms;
		}

		/* Chevron rotates when open (Anticipation — confirms the state) */
		.cbox[data-open] .cbox-trigger {
			transform: rotate(180deg);
			color: var(--foreground);
		}

		/* ── Clear button ── */
		.cbox-clear {
			display: none;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 1.5rem;
			height: 1.5rem;
			padding: 0;
			border: none;
			background: transparent;
			color: var(--muted-foreground);
			cursor: pointer;
			border-radius: min(var(--radius-md), 10px);
			outline: none;
			margin-right: 0.125rem;
			/* Slow In & Slow Out — fade in when appearing */
			opacity: 0.5;
			transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		.cbox-clear svg {
			width: 0.75rem;
			height: 0.75rem;
			pointer-events: none;
		}

		.cbox-clear:hover {
			color: var(--foreground);
			opacity: 1;
		}

		/* Squash & Stretch — subtle scale on press (physics-active-state) */
		.cbox-clear:active:not(:disabled) {
			transform: scale(0.9);
			transition-duration: 100ms;
		}

		.cbox[data-has-value] .cbox-clear {
			display: flex;
		}

		.cbox[data-has-value] .cbox-trigger {
			display: none;
		}

		/* ── Content / Popup ── */
		.cbox-content {
			position: absolute;
			z-index: 50;
			min-width: 100%;
			max-height: 20rem;
			overflow-y: auto;
			overscroll-behavior: contain;
			border-radius: 0.5rem;
			background: var(--popover);
			padding: 0.25rem;
			color: var(--popover-foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
			outline: none;
			/*
			 * Directional slide via custom properties (Solid Drawing).
			 * --cbox-slide drives the directional translate so the panel
			 * emerges FROM the trigger edge, not just fades in place (Staging).
			 */
			--cbox-slide: 0px;
		}

		/* Thin scrollbar */
		.cbox-content::-webkit-scrollbar {
			width: 6px;
		}
		.cbox-content::-webkit-scrollbar-track {
			background: transparent;
		}
		.cbox-content::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 15%, transparent);
			border-radius: 3px;
		}
		.cbox-content::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 25%, transparent);
		}
		.cbox-content {
			scrollbar-width: thin;
			scrollbar-color: color-mix(in oklch, var(--foreground) 15%, transparent) transparent;
		}

		/* Hidden when closed */
		.cbox-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/*
		 * Side positioning + directional slide offsets.
		 * transform-origin anchors scale to the trigger edge so the panel
		 * appears to grow outward — maintaining spatial continuity (Solid Drawing).
		 * --cbox-slide drives the directional translate so the panel
		 * emerges FROM the input, not just fades in place (Staging).
		 */

		/* Side: bottom (default) */
		.cbox-content[data-side="bottom"] {
			top: calc(100% + 4px);
			transform-origin: top;
			--cbox-slide: -4px;
		}
		.cbox-content[data-side="top"] {
			bottom: calc(100% + 4px);
			transform-origin: bottom;
			--cbox-slide: 4px;
		}

		/* Align */
		.cbox-content[data-side="bottom"][data-align="start"],
		.cbox-content[data-side="top"][data-align="start"] {
			left: 0;
		}
		.cbox-content[data-side="bottom"][data-align="center"],
		.cbox-content[data-side="top"][data-align="center"] {
			left: 50%;
			transform: translateX(-50%);
		}
		.cbox-content[data-side="bottom"][data-align="end"],
		.cbox-content[data-side="top"][data-align="end"] {
			right: 0;
		}

		/*
		 * Animations — asymmetric enter/exit with directional slide.
		 * Enter: spring easing + directional translate for organic arc (150ms).
		 * Exit: snappy accelerate-out, less travel distance than enter so the
		 *   leaving panel doesn't compete for attention (Follow Through + Timing).
		 */

		/* Open (Slow In & Slow Out — spring overshoot on enter) */
		.cbox-content[data-state="open"] {
			animation: cbox-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		/* Close (faster, subtler exit — content yields focus back to input) */
		.cbox-content[data-closing] {
			pointer-events: none;
			animation: cbox-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes cbox-in {
			from {
				opacity: 0;
				transform: scale(0.96) translateY(var(--cbox-slide));
			}
			to {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		@keyframes cbox-out {
			from {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
			to {
				opacity: 0;
				transform: scale(0.97) translateY(calc(var(--cbox-slide) * 0.5));
			}
		}

		/* ── Group ── */
		.cbox-group {
			padding: 0.125rem 0;
		}

		/* ── Label ── */
		.cbox-label {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--muted-foreground);
		}

		/* Chunking — labels after separators get extra top space
		   to form visually distinct groups (Law of Proximity) */
		.cbox-separator + .cbox-group > .cbox-label:first-child,
		.cbox-separator + .cbox-label {
			padding-top: 0.375rem;
		}

		/* ── Item ── */
		.cbox-item {
			position: relative;
			display: flex;
			cursor: default;
			align-items: center;
			gap: 0.375rem;
			border-radius: calc(var(--radius-md) - 2px);
			padding: 0.3125rem 2rem 0.3125rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			user-select: none;
			/* Slow In & Slow Out — smooth highlight instead of instant swap */
			transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Hidden when filtered out */
		.cbox-item[data-hidden] {
			display: none;
		}

		/* Highlighted state (keyboard/hover) */
		.cbox-item:hover:not([data-disabled="true"]):not([data-hidden]) {
			background: var(--accent);
			color: var(--accent-foreground);
		}

		.cbox-item[data-highlighted] {
			background: var(--accent);
			color: var(--accent-foreground);
		}

		/* Selected state */
		.cbox-item[data-selected] {
			font-weight: 500;
		}

		/* Disabled */
		.cbox-item[data-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}

		/* SVG inside items */
		.cbox-item svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		/* ── Item text ── */
		.cbox-item-text {
			display: flex;
			flex: 1;
			flex-shrink: 0;
			align-items: center;
			gap: 0.5rem;
			white-space: nowrap;
		}

		/* ── Item indicator (check) ── */
		.cbox-item-indicator {
			pointer-events: none;
			position: absolute;
			right: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: scale(0.5);
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.cbox-item[data-selected] .cbox-item-indicator {
			opacity: 1;
			transform: scale(1);
		}

		.cbox-item-indicator svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* ── Separator ── */
		.cbox-separator {
			margin: 0.25rem -0.25rem;
			height: 1px;
			background: var(--border);
		}

		/* ── Empty ── */
		.cbox-empty {
			display: none;
			width: 100%;
			justify-content: center;
			padding: 1.5rem 0.5rem;
			text-align: center;
			font-size: 0.875rem;
			color: var(--muted-foreground);
		}

		.cbox-content[data-empty] .cbox-empty {
			display: flex;
		}

		/*
		 * Hide groups/separators when all items inside are filtered out.
		 * Keeps the panel clean while typing (Law of Praegnanz — simple,
		 * orderly form; Cognitive Load — remove noise).
		 */
		.cbox-group:has([data-slot="combobox-item"]):not(:has([data-slot="combobox-item"]:not([data-hidden]))) {
			display: none;
		}
		/* Separator before a fully-hidden group */
		.cbox-separator:has(+ .cbox-group:not(:has([data-slot="combobox-item"]:not([data-hidden])))) {
			display: none;
		}
		/* Separator after a fully-hidden group */
		.cbox-group:not(:has([data-slot="combobox-item"]:not([data-hidden]))) + .cbox-separator {
			display: none;
		}

		/* ── Dark mode ── */
		.dark .cbox-input-wrap {
			border-color: var(--input);
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .cbox-input-wrap:hover:not(:has(:disabled)) {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .cbox[data-open] .cbox-input-wrap {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .cbox-input-wrap[aria-invalid="true"],
		.dark .cbox-input-wrap:has([aria-invalid="true"]) {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}
		.dark .cbox-content {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}
		.dark .cbox-content::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 20%, transparent);
		}
		.dark .cbox-content::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 30%, transparent);
		}
		.dark .cbox-content {
			scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent;
		}

		/* ── Reduced motion — instant show/hide, no transform (Timing) ── */
		@media (prefers-reduced-motion: reduce) {
			.cbox-input-wrap,
			.cbox-trigger,
			.cbox-clear,
			.cbox-item,
			.cbox-item-indicator {
				transition: none;
			}
			.cbox-trigger:active:not(:disabled),
			.cbox-clear:active:not(:disabled) {
				transform: none;
			}
			.cbox-content[data-state="open"],
			.cbox-content[data-closing] {
				animation: none;
			}
		}

/* command.templ */
/* ── Command root ── */
		.cmd {
			display: flex;
			width: 100%;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
			border-radius: 0.75rem;
			background: var(--popover);
			padding: 0.25rem;
			color: var(--popover-foreground);
		}

		/*
		 * ── Command Dialog overrides ──
		 * Staging: dialog sits in the upper third so the user's eye
		 * doesn't travel far — the command palette is a transient tool,
		 * not a destination (Serial Position + Selective Attention).
		 */
		.cmd-dialog .dialog-panel {
			max-width: calc(100% - 2rem);
			padding: 0;
			overflow: hidden;
			gap: 0;
		}

		/*
		 * Fixed-height shell so the search bar never moves
		 * when results filter in/out. The list scrolls internally.
		 */
		.cmd-dialog .cmd {
			height: 20rem;
		}

		@media (min-width: 640px) {
			.cmd-dialog .dialog-panel {
				max-width: 28rem;
			}
		}

		.cmd-dialog[open] {
			align-items: flex-start;
			padding-top: 8vh;
		}

		/* ── Input wrapper ── */
		.cmd-input-wrapper {
			padding: 0.25rem;
			padding-bottom: 0;
		}

		/*
		 * ── Input group (search icon + input) ──
		 * Law of Common Region: border + background create a
		 * shared surface so icon and input read as one control.
		 * Anticipation: border/shadow transitions hint at interactivity
		 * before the user types.
		 */
		.cmd-input-group {
			display: flex;
			height: 2rem;
			align-items: center;
			border-radius: var(--radius-lg);
			border: 1px solid color-mix(in oklch, var(--input) 30%, transparent);
			background: color-mix(in oklch, var(--input) 30%, transparent);
			padding: 0 0.5rem;
			transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		.cmd-input-group:focus-within {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* ── Input ── */
		.cmd-input {
			flex: 1;
			width: 100%;
			font-size: 0.875rem;
			line-height: 1.25rem;
			background: transparent;
			border: none;
			outline: none;
			color: inherit;
		}

		.cmd-input::placeholder {
			color: var(--muted-foreground);
		}

		.cmd-input:disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}

		/*
		 * ── Search icon ──
		 * Selective Attention: icon starts muted, transitions to foreground
		 * on focus to confirm the input is active (Anticipation).
		 */
		.cmd-input-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			order: -1;
			padding-right: 0.5rem;
			color: var(--muted-foreground);
			transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		.cmd-input-icon svg {
			width: 1rem;
			height: 1rem;
			opacity: 0.5;
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Anticipation: icon wakes up on focus to confirm active state */
		.cmd-input-group:focus-within .cmd-input-icon {
			color: var(--foreground);
		}

		.cmd-input-group:focus-within .cmd-input-icon svg {
			opacity: 1;
		}

		/* ── List ── */
		.cmd-list {
			flex: 1;
			min-height: 0;
			max-height: 18rem;
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
			scroll-padding: 0.25rem;
			outline: none;
		}

		/* Thin scrollbar */
		.cmd-list::-webkit-scrollbar {
			width: 6px;
		}
		.cmd-list::-webkit-scrollbar-track {
			background: transparent;
		}
		.cmd-list::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 15%, transparent);
			border-radius: 3px;
		}
		.cmd-list::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 25%, transparent);
		}
		.cmd-list {
			scrollbar-width: thin;
			scrollbar-color: color-mix(in oklch, var(--foreground) 15%, transparent) transparent;
		}

		/* ── Empty state ── */
		.cmd-empty {
			padding: 1.5rem 0;
			text-align: center;
			font-size: 0.875rem;
			color: var(--muted-foreground);
			display: none;
		}

		.cmd-empty[data-visible] {
			display: block;
			animation: cmd-empty-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
		}

		@keyframes cmd-empty-in {
			from { opacity: 0; transform: translateY(-2px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		/*
		 * ── Group ──
		 * Chunking (Miller's Law): groups break the list into
		 * scannable chunks so users process 2-4 groups instead
		 * of N individual items.
		 */
		.cmd-group {
			overflow: hidden;
			padding: 0.25rem;
			color: var(--foreground);
		}

		/* Hidden when all items filtered out */
		.cmd-group[data-hidden] {
			display: none;
		}

		/*
		 * ── Group heading ──
		 * Law of Proximity: extra bottom padding separates the heading
		 * from items just enough to read as a label, not an item.
		 */
		.cmd-group-heading {
			padding: 0.375rem 0.5rem 0.25rem;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--muted-foreground);
			letter-spacing: 0.01em;
		}

		/*
		 * ── Item ──
		 * Fitts's Law: min-height 2rem ensures comfortable mouse
		 * targets; padding gives 32px+ total height per item.
		 * Slow In & Slow Out: 80ms bg transition is fast enough
		 * to feel instant but smooth enough to avoid flicker.
		 */
		.cmd-item {
			position: relative;
			display: flex;
			cursor: default;
			align-items: center;
			gap: 0.5rem;
			min-height: 2rem;
			border-radius: calc(var(--radius-md) - 2px);
			padding: 0.375rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			user-select: none;
			transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Hidden when filtered out */
		.cmd-item[data-hidden] {
			display: none;
		}

		/* Highlighted (keyboard / hover) */
		.cmd-item[data-highlighted] {
			background: var(--muted);
			color: var(--foreground);
		}

		/*
		 * Squash & Stretch: subtle scale on press gives
		 * physical weight to the selection (physics-active-state).
		 * 100ms matches button press timing for consistency.
		 */
		.cmd-item:active:not([data-disabled="true"]) {
			transform: scale(0.98);
			transition-duration: 60ms;
		}

		/* Disabled */
		.cmd-item[data-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}

		/* SVGs inside items */
		.cmd-item svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
			color: var(--muted-foreground);
			transition: color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Follow Through: icon color follows highlight for visual unity */
		.cmd-item[data-highlighted] svg {
			color: var(--foreground);
		}

		/*
		 * ── Shortcut ──
		 * Working Memory: kbd-like styling uses recognition over recall —
		 * users see the shortcut and recognise a key combination
		 * without reading it as plain text (Von Restorff).
		 */
		.cmd-shortcut {
			margin-left: auto;
			display: inline-flex;
			align-items: center;
			height: 1.25rem;
			padding: 0 0.25rem;
			border-radius: 0.25rem;
			border: 1px solid var(--border);
			background: color-mix(in oklch, var(--muted) 60%, transparent);
			font-size: 0.625rem;
			font-weight: 500;
			font-family: inherit;
			letter-spacing: 0.05em;
			color: var(--muted-foreground);
			transition: color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				border-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Follow Through: shortcut badge follows highlight state */
		.cmd-item[data-highlighted] .cmd-shortcut {
			color: var(--foreground);
			border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
		}

		/* ── Separator ── */
		.cmd-separator {
			margin: 0.25rem -0.25rem;
			height: 1px;
			background: var(--border);
		}

		/* ── Dark mode ── */
		.dark .cmd {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}

		.dark .cmd-dialog .dialog-panel {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 16px 48px -8px rgba(0, 0, 0, 0.4),
				0 4px 12px -2px rgba(0, 0, 0, 0.2);
		}

		.dark .cmd-input-group {
			border-color: color-mix(in oklch, var(--input) 50%, transparent);
			background: color-mix(in oklch, var(--input) 40%, transparent);
		}

		.dark .cmd-shortcut {
			background: color-mix(in oklch, var(--muted) 40%, transparent);
			border-color: color-mix(in oklch, var(--foreground) 15%, transparent);
		}

		.dark .cmd-list::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 20%, transparent);
		}
		.dark .cmd-list::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 30%, transparent);
		}
		.dark .cmd-list {
			scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent;
		}

		/* ── Reduced motion ── */
		@media (prefers-reduced-motion: reduce) {
			.cmd-item {
				transition: none;
			}
			.cmd-item:active:not([data-disabled="true"]) {
				transform: none;
			}
			.cmd-input-group,
			.cmd-input-icon,
			.cmd-input-icon svg,
			.cmd-item svg,
			.cmd-shortcut {
				transition: none;
			}
			.cmd-empty[data-visible] {
				animation: none;
			}
		}

/* context-menu.templ */
/* ── Trigger ── */
		.ctxm-trigger {
			user-select: none;
		}

		/* ── Content (positioned fixed at cursor) ── */
		.ctxm-content {
			position: fixed;
			z-index: 50;
			min-width: 12rem;
			max-height: calc(100vh - 2rem);
			overflow-x: hidden;
			overflow-y: auto;
			border-radius: 0.5rem;
			background: var(--background);
			padding: 0.25rem;
			color: var(--foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
			outline: none;
			transform-origin: top left;
		}

		/* Hidden when closed */
		.ctxm-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/*
		 * timing-no-entrance-context-menu — context menus appear instantly
		 * (no entrance animation). Matches native OS behavior (Jakob's Law).
		 * Exit-only animation gives feedback that the action was acknowledged.
		 */

		/* Close animation (exit only) */
		.ctxm-content[data-closing] {
			pointer-events: none;
			animation: ctxm-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes ctxm-out {
			from {
				opacity: 1;
				transform: scale(1);
			}
			to {
				opacity: 0;
				transform: scale(0.95);
			}
		}

		/* ── Item (shared base for item, sub-trigger) ── */
		.ctxm-item,
		.ctxm-checkbox-item,
		.ctxm-radio-item,
		.ctxm-sub-trigger {
			position: relative;
			display: flex;
			cursor: default;
			align-items: center;
			gap: 0.375rem;
			border-radius: calc(var(--radius-md) - 2px);
			padding: 0.3125rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			user-select: none;
			transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Highlighted state */
		.ctxm-item[data-highlighted],
		.ctxm-checkbox-item[data-highlighted],
		.ctxm-radio-item[data-highlighted],
		.ctxm-sub-trigger[data-highlighted] {
			background: var(--muted);
			color: var(--foreground);
		}

		/* Highlighted — icons follow highlight color */
		.ctxm-item[data-highlighted] svg,
		.ctxm-checkbox-item[data-highlighted] svg,
		.ctxm-radio-item[data-highlighted] svg,
		.ctxm-sub-trigger[data-highlighted] svg {
			color: var(--foreground);
		}
		.ctxm-item[data-variant="destructive"][data-highlighted] svg {
			color: var(--destructive);
		}

		/* Destructive variant */
		.ctxm-item[data-variant="destructive"] {
			color: var(--destructive);
		}
		.ctxm-item[data-variant="destructive"][data-highlighted] {
			background: color-mix(in oklch, var(--destructive) 10%, transparent);
			color: var(--destructive);
		}

		/* Inset */
		.ctxm-item[data-inset="true"],
		.ctxm-checkbox-item[data-inset="true"],
		.ctxm-radio-item[data-inset="true"],
		.ctxm-sub-trigger[data-inset="true"],
		.ctxm-label[data-inset="true"] {
			padding-left: 1.75rem;
		}

		/* Disabled */
		.ctxm-item[data-disabled="true"],
		.ctxm-checkbox-item[data-disabled="true"],
		.ctxm-radio-item[data-disabled="true"],
		.ctxm-sub-trigger[data-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}

		/* SVG inside items */
		.ctxm-item svg,
		.ctxm-checkbox-item svg,
		.ctxm-radio-item svg,
		.ctxm-sub-trigger svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		/* ── Checkbox / Radio item indicator ── */
		.ctxm-checkbox-item,
		.ctxm-radio-item {
			padding-right: 2rem;
		}

		.ctxm-item-indicator {
			pointer-events: none;
			position: absolute;
			right: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: scale(0.5);
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.ctxm-checkbox-item[data-checked="true"] .ctxm-item-indicator,
		.ctxm-radio-item[data-checked="true"] .ctxm-item-indicator {
			opacity: 1;
			transform: scale(1);
		}

		.ctxm-item-indicator svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* ── Sub trigger ── */
		.ctxm-sub-trigger {
			padding-right: 0.375rem;
		}

		.ctxm-sub-trigger > svg:last-child {
			margin-left: auto;
			transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.ctxm-sub-trigger[data-open="true"] > svg:last-child {
			transform: rotate(90deg);
		}

		.ctxm-sub-trigger[data-open="true"] {
			background: var(--muted);
			color: var(--foreground);
		}

		/* ── Sub content ── */
		.ctxm-sub-content {
			position: fixed;
			z-index: 50;
			min-width: 8rem;
			border-radius: 0.5rem;
			background: var(--background);
			padding: 0.25rem;
			color: var(--foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 8px 20px -4px rgba(0, 0, 0, 0.12),
				0 2px 8px -2px rgba(0, 0, 0, 0.08);
			outline: none;
		}

		.ctxm-sub-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		.ctxm-sub-content[data-state="open"] {
			animation: ctxm-sub-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}
		.ctxm-sub-content[data-closing] {
			pointer-events: none;
			animation: ctxm-sub-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes ctxm-sub-in {
			from {
				opacity: 0;
				transform: translateX(-4px) scale(0.97);
			}
			to {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
		}

		@keyframes ctxm-sub-out {
			from {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
			to {
				opacity: 0;
				transform: translateX(-4px) scale(0.97);
			}
		}

		.ctxm-sub-content[data-side="left"][data-state="open"] {
			animation-name: ctxm-sub-in-left;
		}
		.ctxm-sub-content[data-side="left"][data-closing] {
			animation-name: ctxm-sub-out-left;
		}

		@keyframes ctxm-sub-in-left {
			from {
				opacity: 0;
				transform: translateX(4px) scale(0.97);
			}
			to {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
		}

		@keyframes ctxm-sub-out-left {
			from {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
			to {
				opacity: 0;
				transform: translateX(4px) scale(0.97);
			}
		}

		/* ── Label ── */
		.ctxm-label {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--muted-foreground);
		}

		.ctxm-separator + .ctxm-label {
			padding-top: 0.375rem;
		}

		/* ── Separator ── */
		.ctxm-separator {
			margin: 0.25rem -0.25rem;
			height: 1px;
			background: var(--border);
		}

		/* ── Shortcut ── */
		.ctxm-shortcut {
			margin-left: auto;
			font-size: 0.75rem;
			letter-spacing: 0.1em;
			color: var(--muted-foreground);
		}

		.ctxm-item[data-highlighted] .ctxm-shortcut,
		.ctxm-checkbox-item[data-highlighted] .ctxm-shortcut,
		.ctxm-radio-item[data-highlighted] .ctxm-shortcut,
		.ctxm-sub-trigger[data-highlighted] .ctxm-shortcut {
			color: var(--foreground);
		}

		.ctxm-item[data-variant="destructive"][data-highlighted] .ctxm-shortcut {
			color: var(--destructive);
		}

		/* ── Dark mode ── */
		.dark .ctxm-content,
		.dark .ctxm-sub-content {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}
		.dark .ctxm-item[data-variant="destructive"][data-highlighted] {
			background: color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* ── Reduced motion ── */
		@media (prefers-reduced-motion: reduce) {
			.ctxm-content[data-closing],
			.ctxm-sub-content[data-state="open"],
			.ctxm-sub-content[data-closing] {
				animation: none;
			}
			.ctxm-item,
			.ctxm-checkbox-item,
			.ctxm-radio-item,
			.ctxm-sub-trigger {
				transition: none;
			}
			.ctxm-sub-trigger > svg:last-child {
				transition: none;
			}
			.ctxm-item-indicator {
				transition: none;
			}
		}

/* dark-mode.templ */
.dark-mode-toggle {
			position: fixed;
			bottom: 1rem;
			right: 1rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			padding: 0.5rem 0.75rem;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
			z-index: 50;
		}

/* date-picker.templ */
/* ── Date Picker ── */

		/* Trigger button — outline style, left-aligned text */
		.dp-trigger {
			justify-content: flex-start;
			min-width: 15rem;
			font-weight: 400;
		}

		/* Placeholder state — muted like input placeholder */
		.dp-trigger-placeholder {
			color: var(--muted-foreground);
		}

		/* Label inside trigger */
		[data-slot="dp-label"] {
			flex: 1;
			text-align: left;
		}

		/* Popover content — auto width to fit calendar */
		.dp-trigger + [data-slot="popover-content"] {
			width: auto;
			padding: 0.25rem;
		}

		/* ── Dark mode ── */
		.dark .dp-trigger-placeholder {
			color: var(--muted-foreground);
		}

/* dialog.templ */
/* Dialog: hidden by default, flex when open */
		.dialog:not([open]) {
			display: none;
		}
		.dialog {
			position: fixed;
			inset: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
			overflow-y: auto;
			overscroll-behavior: contain;
			z-index: 50;
		}
		.dialog[open] {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Backdrop: stronger staging for selective attention */
		.dialog::backdrop {
			background: rgba(0, 0, 0, 0.18);
			-webkit-backdrop-filter: blur(4px);
			backdrop-filter: blur(4px);
		}

		/* Panel: the visible dialog box */
		.dialog-panel {
			position: relative;
			width: 100%;
			max-width: calc(100% - 2rem);
			display: grid;
			gap: 1rem;
			border-radius: 0.75rem;
			background: var(--background);
			color: var(--foreground);
			padding: 1rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 16px 40px -8px rgba(0, 0, 0, 0.1),
				0 4px 12px -2px rgba(0, 0, 0, 0.06);
			outline: none;
		}

		@media (min-width: 640px) {
			.dialog-panel {
				max-width: 24rem;
			}
		}

		/* Close X button — extended hit area for Fitts's Law (min 44px) */
		.dialog-close-x {
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
		}
		.dialog-close-x::after {
			content: '';
			position: absolute;
			inset: -0.5rem;
		}

		/* Header */
		.dialog-header {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		/* Footer */
		.dialog-footer {
			margin: 0 -1rem -1rem -1rem;
			display: flex;
			flex-direction: column-reverse;
			gap: 0.5rem;
			border-radius: 0 0 0.75rem 0.75rem;
			border-top: 1px solid var(--border);
			background: color-mix(in oklch, var(--muted) 50%, transparent);
			padding: 1rem;
		}

		@media (min-width: 640px) {
			.dialog-footer {
				flex-direction: row;
				justify-content: flex-end;
			}
		}

		/* Title */
		.dialog-title {
			font-size: 1rem;
			line-height: 1;
			font-weight: 500;
			margin: 0;
		}

		/* Description */
		.dialog-description {
			font-size: 0.875rem;
			color: var(--muted-foreground);
			margin: 0;
		}
		.dialog-description a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		.dialog-description a:hover {
			color: var(--foreground);
		}

		/*
		 * Animations — asymmetric enter/exit with overlapping action.
		 * Enter: spring easing + slight translateY for organic arc (200ms panel, 150ms backdrop).
		 * Exit: snappy ease-in, faster than enter for responsiveness (120ms panel, 100ms backdrop).
		 */

		/* Open */
		.dialog[open] .dialog-panel {
			animation: dialog-panel-in 200ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}
		.dialog[open]::backdrop {
			animation: dialog-backdrop-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
		}

		/* Close */
		.dialog[data-closing] .dialog-panel {
			animation: dialog-panel-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}
		.dialog[data-closing]::backdrop {
			animation: dialog-backdrop-out 100ms cubic-bezier(0.4, 0, 1, 1) forwards;
		}

		@keyframes dialog-panel-in {
			from { opacity: 0; transform: scale(0.96) translateY(6px); }
			to   { opacity: 1; transform: scale(1) translateY(0); }
		}
		@keyframes dialog-panel-out {
			from { opacity: 1; transform: scale(1) translateY(0); }
			to   { opacity: 0; transform: scale(0.97) translateY(3px); }
		}
		@keyframes dialog-backdrop-in {
			from { opacity: 0; }
			to   { opacity: 1; }
		}
		@keyframes dialog-backdrop-out {
			from { opacity: 1; }
			to   { opacity: 0; }
		}

		/* Dark mode: stronger shadow for depth */
		.dark .dialog-panel {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 16px 48px -8px rgba(0, 0, 0, 0.4),
				0 4px 12px -2px rgba(0, 0, 0, 0.2);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.dialog[open] .dialog-panel,
			.dialog[data-closing] .dialog-panel {
				animation: none;
			}
			.dialog[open]::backdrop,
			.dialog[data-closing]::backdrop {
				animation: none;
			}
		}

/* drawer.templ */
/* Drawer: hidden by default, flex when open */
		.drawer:not([open]) {
			display: none;
		}
		.drawer {
			position: fixed;
			inset: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
			overflow: hidden;
			overscroll-behavior: contain;
			z-index: 50;
		}
		.drawer[open] {
			display: flex;
		}

		/* Direction alignment */
		.drawer-bottom[open] {
			align-items: flex-end;
			justify-content: center;
		}
		.drawer-top[open] {
			align-items: flex-start;
			justify-content: center;
		}
		.drawer-left[open] {
			align-items: stretch;
			justify-content: flex-start;
		}
		.drawer-right[open] {
			align-items: stretch;
			justify-content: flex-end;
		}

		/* Backdrop */
		.drawer::backdrop {
			background: rgba(0, 0, 0, 0.10);
			-webkit-backdrop-filter: blur(2px);
			backdrop-filter: blur(2px);
		}

		/* Panel: the visible drawer box */
		.drawer-panel {
			position: relative;
			display: flex;
			flex-direction: column;
			background: var(--background);
			color: var(--foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			overflow-y: auto;
		}

		/* Bottom panel */
		.drawer-bottom .drawer-panel {
			width: 100%;
			max-height: 80vh;
			margin-top: 6rem;
			border-top-left-radius: 0.75rem;
			border-top-right-radius: 0.75rem;
			border-top: 1px solid var(--border);
		}

		/* Top panel */
		.drawer-top .drawer-panel {
			width: 100%;
			max-height: 80vh;
			margin-bottom: 6rem;
			border-bottom-left-radius: 0.75rem;
			border-bottom-right-radius: 0.75rem;
			border-bottom: 1px solid var(--border);
		}

		/* Left panel */
		.drawer-left .drawer-panel {
			height: 100%;
			width: 75%;
			max-width: 24rem;
			border-right: 1px solid var(--border);
			border-top-right-radius: 0.75rem;
			border-bottom-right-radius: 0.75rem;
		}

		/* Right panel */
		.drawer-right .drawer-panel {
			height: 100%;
			width: 75%;
			max-width: 24rem;
			border-left: 1px solid var(--border);
			border-top-left-radius: 0.75rem;
			border-bottom-left-radius: 0.75rem;
		}

		/*
		 * Handle bar — also a Fitts-friendly close target.
		 * The entire padded region is clickable (data-drawer-close),
		 * giving a ~44px tap area across the full drawer width.
		 */
		.drawer-handle {
			display: flex;
			justify-content: center;
			padding: 1rem 0 0.25rem;
			flex-shrink: 0;
			cursor: pointer;
		}
			.drawer-handle span {
				display: block;
				width: 100px;
				height: 4px;
				border-radius: 9999px;
				background-color: var(--muted-foreground);
				opacity: 0.4;
				/* Secondary action: handle scales in with spring after panel arrives */
				transform: scaleX(1);
				transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1) 120ms;
			}

		/* Close X button — extended hit area for Fitts's Law (min 44px) */
		.drawer-close-x {
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
		}
		.drawer-close-x::after {
			content: '';
			position: absolute;
			inset: -0.5rem;
		}

		/* Header — stages attention on title after panel settles */
		.drawer-header {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			padding: 1rem;
			/* Overlapping action: content fades in after panel slide */
			opacity: 1;
			transform: translateY(0);
			transition: opacity 150ms ease-out 60ms, transform 150ms ease-out 60ms;
		}
		.drawer-bottom .drawer-header,
		.drawer-top .drawer-header {
			text-align: center;
		}
		@media (min-width: 768px) {
			.drawer-bottom .drawer-header,
			.drawer-top .drawer-header {
				text-align: left;
			}
		}

		/* Footer — Law of Common Region: visually distinct action zone */
		.drawer-footer {
			margin-top: auto;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			border-top: 1px solid var(--border);
			background: color-mix(in oklch, var(--muted) 50%, transparent);
			padding: 1rem;
			/* Overlapping action: footer reveals after header */
			opacity: 1;
			transform: translateY(0);
			transition: opacity 150ms ease-out 100ms, transform 150ms ease-out 100ms;
		}

		/* Title */
		.drawer-title {
			font-size: 1rem;
			line-height: 1;
			font-weight: 500;
			margin: 0;
		}

		/* Description */
		.drawer-description {
			font-size: 0.875rem;
			color: var(--muted-foreground);
			margin: 0;
		}

		/*
		 * Animations
		 *
		 * Staging: backdrop leads (150ms), panel follows with spring easing (280ms).
		 * Panel slides at full opacity — real drawers don't ghost while moving.
		 * Exit: snappy ease-in (150ms panel, 120ms backdrop), faster than enter.
		 * Content: @starting-style stagger creates follow-through inside the panel.
		 */

		/* === Enter: panel slides (spring easing with micro-overshoot) === */
		.drawer-bottom[open] .drawer-panel {
			animation: drawer-slide-up-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
		}
		.drawer-top[open] .drawer-panel {
			animation: drawer-slide-down-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
		}
		.drawer-left[open] .drawer-panel {
			animation: drawer-slide-right-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
		}
		.drawer-right[open] .drawer-panel {
			animation: drawer-slide-left-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
		}

		/* Enter: backdrop leads panel (faster, sets the stage) */
		.drawer[open]::backdrop {
			animation: drawer-backdrop-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
		}

		/* === Exit: panel slides out (snappy, no spring) === */
		.drawer-bottom[data-closing] .drawer-panel {
			animation: drawer-slide-up-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}
		.drawer-top[data-closing] .drawer-panel {
			animation: drawer-slide-down-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}
		.drawer-left[data-closing] .drawer-panel {
			animation: drawer-slide-right-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}
		.drawer-right[data-closing] .drawer-panel {
			animation: drawer-slide-left-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		/* Exit: backdrop follows panel (slightly delayed dissolve) */
		.drawer[data-closing]::backdrop {
			animation: drawer-backdrop-out 120ms cubic-bezier(0.4, 0, 1, 1) forwards;
		}

		/* Panel keyframes — pure transform, no opacity (drawers don't ghost) */
		@keyframes drawer-slide-up-in {
			from { transform: translateY(100%); }
			to   { transform: translateY(0); }
		}
		@keyframes drawer-slide-up-out {
			from { transform: translateY(0); }
			to   { transform: translateY(100%); }
		}
		@keyframes drawer-slide-down-in {
			from { transform: translateY(-100%); }
			to   { transform: translateY(0); }
		}
		@keyframes drawer-slide-down-out {
			from { transform: translateY(0); }
			to   { transform: translateY(-100%); }
		}
		@keyframes drawer-slide-right-in {
			from { transform: translateX(-100%); }
			to   { transform: translateX(0); }
		}
		@keyframes drawer-slide-right-out {
			from { transform: translateX(0); }
			to   { transform: translateX(-100%); }
		}
		@keyframes drawer-slide-left-in {
			from { transform: translateX(100%); }
			to   { transform: translateX(0); }
		}
		@keyframes drawer-slide-left-out {
			from { transform: translateX(0); }
			to   { transform: translateX(100%); }
		}

		/* Backdrop keyframes */
		@keyframes drawer-backdrop-in {
			from { opacity: 0; }
			to   { opacity: 1; }
		}
		@keyframes drawer-backdrop-out {
			from { opacity: 1; }
			to   { opacity: 0; }
		}

		/*
		 * Follow-through: content reveals after panel settles.
		 * Header staggered at 60ms, footer at 100ms via transition-delay above.
		 * Handle scales in with spring at 120ms (secondary action).
		 */
		@starting-style {
			.drawer[open] .drawer-header {
				opacity: 0;
				transform: translateY(6px);
			}
			.drawer[open] .drawer-footer {
				opacity: 0;
				transform: translateY(6px);
			}
			.drawer[open] .drawer-handle span {
				transform: scaleX(0.4);
			}
		}

		/* Dark mode */
		.dark .drawer-panel {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 16px 48px -8px rgba(0, 0, 0, 0.4),
				0 4px 12px -2px rgba(0, 0, 0, 0.2);
		}
		.dark .drawer-handle span {
			background-color: var(--muted-foreground);
			opacity: 0.3;
		}
		.dark .drawer-footer {
			background: color-mix(in oklch, var(--muted) 30%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.drawer[open] .drawer-panel,
			.drawer[data-closing] .drawer-panel {
				animation: none;
			}
			.drawer[open]::backdrop,
			.drawer[data-closing]::backdrop {
				animation: none;
			}
			.drawer-header,
			.drawer-footer {
				transition: none;
			}
			.drawer-handle span {
				transition: none;
			}
		}

/* dropdown-menu.templ */
/* ── Root ── */
		.ddm {
			position: relative;
			display: inline-flex;
		}

		/* ── Trigger ── */
		.ddm-trigger {
			cursor: pointer;
		}

		/* ── Content ── */
		.ddm-content {
			position: absolute;
			z-index: 50;
			min-width: 12rem;
			border-radius: 0.5rem;
			background: var(--background);
			padding: 0.25rem;
			color: var(--foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
			outline: none;
		}

		/* Hidden when closed */
		.ddm-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/* Side: bottom (default) */
		.ddm-content[data-side="bottom"] {
			top: calc(100% + 4px);
		}
		.ddm-content[data-side="top"] {
			bottom: calc(100% + 4px);
		}
		.ddm-content[data-side="left"] {
			right: calc(100% + 4px);
			top: 0;
		}
		.ddm-content[data-side="right"] {
			left: calc(100% + 4px);
			top: 0;
		}

		/* Align: start (default) */
		.ddm-content[data-side="bottom"][data-align="start"],
		.ddm-content[data-side="top"][data-align="start"] {
			left: 0;
		}
		.ddm-content[data-side="bottom"][data-align="center"],
		.ddm-content[data-side="top"][data-align="center"] {
			left: 50%;
			transform: translateX(-50%);
		}
		.ddm-content[data-side="bottom"][data-align="end"],
		.ddm-content[data-side="top"][data-align="end"] {
			right: 0;
		}
		.ddm-content[data-side="left"][data-align="start"],
		.ddm-content[data-side="right"][data-align="start"] {
			top: 0;
		}
		.ddm-content[data-side="left"][data-align="end"],
		.ddm-content[data-side="right"][data-align="end"] {
			top: auto;
			bottom: 0;
		}

		/* Open animation */
		.ddm-content[data-state="open"] {
			animation: ddm-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		/* Close animation */
		.ddm-content[data-closing] {
			pointer-events: none;
			animation: ddm-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		/*
		 * Solid Drawing — transform-origin anchors scale to the trigger edge,
		 * maintaining spatial continuity for both enter and exit.
		 */
		.ddm-content[data-side="bottom"] {
			transform-origin: top;
		}
		.ddm-content[data-side="top"] {
			transform-origin: bottom;
		}
		.ddm-content[data-side="left"] {
			transform-origin: right;
		}
		.ddm-content[data-side="right"] {
			transform-origin: left;
		}

		@keyframes ddm-in {
			from {
				opacity: 0;
				transform: scale(0.95) translateY(2px);
			}
			to {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		@keyframes ddm-out {
			from {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
			to {
				opacity: 0;
				transform: scale(0.95) translateY(2px);
			}
		}

		/* ── Item (shared base for item, sub-trigger) ── */
		.ddm-item,
		.ddm-checkbox-item,
		.ddm-radio-item,
		.ddm-sub-trigger {
			position: relative;
			display: flex;
			cursor: default;
			align-items: center;
			gap: 0.375rem;
			border-radius: calc(var(--radius-md) - 2px);
			padding: 0.3125rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			user-select: none;
			/* Slow In & Slow Out — smooth highlight instead of instant swap */
			transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Highlighted state (keyboard/hover) */
		.ddm-item[data-highlighted],
		.ddm-checkbox-item[data-highlighted],
		.ddm-radio-item[data-highlighted],
		.ddm-sub-trigger[data-highlighted] {
			background: var(--muted);
			color: var(--foreground);
		}

		/* Highlighted — icons and shortcuts follow the highlight color */
		.ddm-item[data-highlighted] svg,
		.ddm-checkbox-item[data-highlighted] svg,
		.ddm-radio-item[data-highlighted] svg,
		.ddm-sub-trigger[data-highlighted] svg {
			color: var(--foreground);
		}
		.ddm-item[data-variant="destructive"][data-highlighted] svg {
			color: var(--destructive);
		}

		/* Destructive variant */
		.ddm-item[data-variant="destructive"] {
			color: var(--destructive);
		}
		.ddm-item[data-variant="destructive"][data-highlighted] {
			background: color-mix(in oklch, var(--destructive) 10%, transparent);
			color: var(--destructive);
		}

		/* Inset */
		.ddm-item[data-inset="true"],
		.ddm-checkbox-item[data-inset="true"],
		.ddm-radio-item[data-inset="true"],
		.ddm-sub-trigger[data-inset="true"],
		.ddm-label[data-inset="true"] {
			padding-left: 1.75rem;
		}

		/* Disabled */
		.ddm-item[data-disabled="true"],
		.ddm-checkbox-item[data-disabled="true"],
		.ddm-radio-item[data-disabled="true"],
		.ddm-sub-trigger[data-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}

		/* SVG inside items */
		.ddm-item svg,
		.ddm-checkbox-item svg,
		.ddm-radio-item svg,
		.ddm-sub-trigger svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		/* ── Checkbox / Radio item indicator ── */
		.ddm-checkbox-item,
		.ddm-radio-item {
			padding-right: 2rem;
		}

		.ddm-item-indicator {
			pointer-events: none;
			position: absolute;
			right: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: scale(0.5);
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.ddm-checkbox-item[data-checked="true"] .ddm-item-indicator,
		.ddm-radio-item[data-checked="true"] .ddm-item-indicator {
			opacity: 1;
			transform: scale(1);
		}

		.ddm-item-indicator svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* ── Sub trigger ── */
		.ddm-sub-trigger {
			padding-right: 0.375rem;
		}

		/* Secondary Action — chevron hints at submenu direction and rotates on open */
		.ddm-sub-trigger > svg:last-child {
			margin-left: auto;
			transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.ddm-sub-trigger[data-open="true"] > svg:last-child {
			transform: rotate(90deg);
		}

		.ddm-sub-trigger[data-open="true"] {
			background: var(--muted);
			color: var(--foreground);
		}

		/* ── Sub content ── */
		.ddm-sub {
			position: relative;
		}

		.ddm-sub-content {
			position: absolute;
			z-index: 50;
			min-width: 8rem;
			border-radius: 0.5rem;
			background: var(--background);
			padding: 0.25rem;
			color: var(--foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 8px 20px -4px rgba(0, 0, 0, 0.12),
				0 2px 8px -2px rgba(0, 0, 0, 0.08);
			outline: none;
		}

		.ddm-sub-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/* Sub positioning */
		.ddm-sub-content[data-side="right"] {
			left: 100%;
			top: -0.1875rem;
		}
		.ddm-sub-content[data-side="left"] {
			right: 100%;
			top: -0.1875rem;
		}

		.ddm-sub-content[data-state="open"] {
			animation: ddm-sub-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}
		.ddm-sub-content[data-closing] {
			pointer-events: none;
			animation: ddm-sub-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes ddm-sub-in {
			from {
				opacity: 0;
				transform: translateX(-4px) scale(0.97);
			}
			to {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
		}

		@keyframes ddm-sub-out {
			from {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
			to {
				opacity: 0;
				transform: translateX(-4px) scale(0.97);
			}
		}

		.ddm-sub-content[data-side="left"][data-state="open"] {
			animation-name: ddm-sub-in-left;
		}
		.ddm-sub-content[data-side="left"][data-closing] {
			animation-name: ddm-sub-out-left;
		}

		@keyframes ddm-sub-in-left {
			from {
				opacity: 0;
				transform: translateX(4px) scale(0.97);
			}
			to {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
		}

		@keyframes ddm-sub-out-left {
			from {
				opacity: 1;
				transform: translateX(0) scale(1);
			}
			to {
				opacity: 0;
				transform: translateX(4px) scale(0.97);
			}
		}

		/* ── Label ── */
		.ddm-label {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--muted-foreground);
		}

		/* Chunking — first label sits flush; subsequent labels after separators
		   get extra top space to form visually distinct groups */
		.ddm-separator + .ddm-label {
			padding-top: 0.375rem;
		}

		/* ── Separator ── */
		.ddm-separator {
			margin: 0.25rem -0.25rem;
			height: 1px;
			background: var(--border);
		}

		/* ── Shortcut ── */
		.ddm-shortcut {
			margin-left: auto;
			font-size: 0.75rem;
			letter-spacing: 0.1em;
			color: var(--muted-foreground);
		}

		.ddm-item[data-highlighted] .ddm-shortcut,
		.ddm-checkbox-item[data-highlighted] .ddm-shortcut,
		.ddm-radio-item[data-highlighted] .ddm-shortcut,
		.ddm-sub-trigger[data-highlighted] .ddm-shortcut {
			color: var(--foreground);
		}

		.ddm-item[data-variant="destructive"][data-highlighted] .ddm-shortcut {
			color: var(--destructive);
		}

		/* ── Dark mode ── */
		.dark .ddm-content,
		.dark .ddm-sub-content {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}
		.dark .ddm-item[data-variant="destructive"][data-highlighted] {
			background: color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* ── Reduced motion ── */
		@media (prefers-reduced-motion: reduce) {
			.ddm-content[data-state="open"],
			.ddm-content[data-closing],
			.ddm-sub-content[data-state="open"],
			.ddm-sub-content[data-closing] {
				animation: none;
			}
			.ddm-item,
			.ddm-checkbox-item,
			.ddm-radio-item,
			.ddm-sub-trigger {
				transition: none;
			}
			.ddm-sub-trigger > svg:last-child {
				transition: none;
			}
			.ddm-item-indicator {
				transition: none;
			}
		}

/* empty.templ */
/* Empty base */
		.empty {
			display: flex;
			width: 100%;
			min-width: 0;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			border-radius: 0.75rem;
			border: 1px dashed var(--border);
			padding: 1.5rem;
			text-align: center;
			text-wrap: balance;
		}

		/* EmptyHeader */
		.empty-header {
			display: flex;
			max-width: 24rem;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
		}

		/* EmptyMedia base */
		.empty-media {
			margin-bottom: 0.5rem;
			display: flex;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
		}

		.empty-media svg {
			pointer-events: none;
			flex-shrink: 0;
		}

		/* EmptyMedia variant: icon */
		.empty-media-icon {
			display: flex;
			width: 2rem;
			height: 2rem;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-lg);
			background-color: var(--muted);
			color: var(--foreground);
		}

		.empty-media-icon svg {
			width: 1rem;
			height: 1rem;
		}

		/* EmptyTitle */
		.empty-title {
			font-size: 0.875rem;
			font-weight: 500;
			letter-spacing: -0.01em;
		}

		/* EmptyDescription */
		.empty-description {
			font-size: 0.875rem;
			line-height: 1.625;
			color: var(--muted-foreground);
		}

		.empty-description a {
			text-decoration: underline;
			text-underline-offset: 4px;
		}

		.empty-description a:hover {
			color: var(--primary);
		}

		/* EmptyContent */
		.empty-content {
			display: flex;
			width: 100%;
			max-width: 24rem;
			min-width: 0;
			flex-direction: column;
			align-items: center;
			gap: 0.625rem;
			font-size: 0.875rem;
			text-wrap: balance;
		}

		/* Dark mode */
		.dark .empty {
			border-color: var(--border);
		}

		.dark .empty-media-icon {
			background-color: var(--muted);
			color: var(--foreground);
		}

/* field.templ */
/* ── FieldSet ── */
		.field-set {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			border: none;
			margin: 0;
			padding: 0;
		}
		.field-set:has(> [data-slot="checkbox-group"]),
		.field-set:has(> [data-slot="radio-group"]) {
			gap: 0.75rem;
		}

		/* ── FieldLegend ── */
		.field-legend {
			margin-bottom: 0.375rem;
			font-weight: 500;
		}
		.field-legend[data-variant="label"] {
			font-size: 0.875rem;
			line-height: 1.25rem;
		}
		.field-legend[data-variant="legend"] {
			font-size: 1rem;
			line-height: 1.5rem;
		}

		/* ── FieldGroup ── */
		.field-group {
			container-type: inline-size;
			container-name: field-group;
			display: flex;
			width: 100%;
			flex-direction: column;
			gap: 1.25rem;
		}
		.field-group .field-group {
			gap: 1rem;
		}

		/* ── Field ── */
		.field {
			display: flex;
			width: 100%;
			gap: 0.5rem;
			transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.field[data-invalid="true"] {
			color: var(--destructive);
		}

		/* Orientation: vertical */
		.field[data-orientation="vertical"] {
			flex-direction: column;
		}
		.field[data-orientation="vertical"] > * {
			width: 100%;
		}
		.field[data-orientation="vertical"] > .sr-only {
			width: auto;
		}

		/* Orientation: horizontal */
		.field[data-orientation="horizontal"] {
			flex-direction: row;
			align-items: center;
		}
		.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) {
			align-items: flex-start;
		}
		.field[data-orientation="horizontal"] > [data-slot="field-label"] {
			flex: 1 1 auto;
		}
		.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) [role="checkbox"],
		.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) [role="radio"] {
			margin-top: 1px;
		}

		/* Orientation: responsive (uses container query) */
		.field[data-orientation="responsive"] {
			flex-direction: column;
		}
		.field[data-orientation="responsive"] > * {
			width: 100%;
		}
		.field[data-orientation="responsive"] > .sr-only {
			width: auto;
		}
		@container field-group (min-width: 28rem) {
			.field[data-orientation="responsive"] {
				flex-direction: row;
				align-items: center;
			}
			.field[data-orientation="responsive"] > * {
				width: auto;
			}
			.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) {
				align-items: flex-start;
			}
			.field[data-orientation="responsive"] > [data-slot="field-label"] {
				flex: 1 1 auto;
			}
			.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) [role="checkbox"],
			.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) [role="radio"] {
				margin-top: 1px;
			}
		}

		/* ── FieldContent ── */
		.field-content {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: 0.125rem;
			line-height: 1.375;
		}

		/* ── FieldLabel ── */
		.field-label {
			display: flex;
			width: fit-content;
			gap: 0.5rem;
			line-height: 1.375;
			font-size: 0.875rem;
			font-weight: 500;
			user-select: none;
			cursor: pointer;
			transition-property: opacity, background-color, border-color;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}
		.field[data-disabled="true"] .field-label {
			pointer-events: none;
			opacity: 0.5;
		}
		/* Card-style highlight when containing checked inputs */
		.field-label:has(:checked) {
			border-color: color-mix(in oklch, var(--primary) 30%, transparent);
			background-color: color-mix(in oklch, var(--primary) 5%, transparent);
		}
		/* Card layout when wrapping a nested field */
		.field-label:has(> [data-slot="field"]) {
			border-radius: var(--radius-lg);
			border: 1px solid var(--border);
			width: 100%;
			flex-direction: column;
		}
		.field-label > [data-slot="field"] {
			padding: 0.625rem;
		}
		/* Dark mode */
		.dark .field-label:has(:checked) {
			border-color: color-mix(in oklch, var(--primary) 20%, transparent);
			background-color: color-mix(in oklch, var(--primary) 10%, transparent);
		}

		/* ── FieldTitle ── */
		.field-title {
			display: flex;
			width: fit-content;
			align-items: center;
			gap: 0.5rem;
			font-size: 0.875rem;
			line-height: 1.375;
			font-weight: 500;
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.field[data-disabled="true"] .field-title {
			opacity: 0.5;
		}

		/* ── FieldDescription ── */
		.field-description {
			text-align: left;
			font-size: 0.875rem;
			line-height: 1.5;
			font-weight: 400;
			color: var(--muted-foreground);
		}
		.field[data-orientation="horizontal"] .field-description {
			text-wrap: balance;
		}
		[data-variant="legend"] + .field-description,
		[data-variant="label"] + .field-description {
			margin-top: -0.375rem;
		}
		.field-description:last-child {
			margin-top: 0;
		}
		.field-description:nth-last-child(2) {
			margin-top: -0.25rem;
		}
		.field-description a {
			text-decoration: underline;
			text-underline-offset: 4px;
			transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.field-description a:hover {
			color: var(--primary);
		}

		/* ── FieldSeparator ── */
		.field-separator {
			position: relative;
			margin-top: -0.5rem;
			margin-bottom: -0.5rem;
			height: 1.25rem;
			font-size: 0.875rem;
		}
		.field-separator-line {
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border: none;
			height: 1px;
			background-color: var(--border);
			margin: 0;
		}
		.field-separator-content {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: fit-content;
			background-color: var(--background);
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			color: var(--muted-foreground);
		}
		.field-separator-content:empty {
			display: none;
		}

		/* ── FieldError ── */
		.field-error {
			font-size: 0.875rem;
			font-weight: 400;
			color: var(--destructive);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.field,
			.field-label,
			.field-title,
			.field-description a {
				transition-duration: 75ms;
			}
		}

/* input-group.templ */
/* InputGroup: Base */
		.input-group {
			position: relative;
			display: flex;
			height: 2.25rem;
			width: 100%;
			min-width: 0;
			align-items: center;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			cursor: text;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
		}

		/* Auto height for textarea */
		.input-group:has(> textarea),
		.input-group.input-group-has-textarea {
			height: auto;
		}

		/* Focus-within styling */
		.input-group:focus-within {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Invalid styling */
		.input-group:has([aria-invalid="true"]) {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Disabled styling */
		.input-group[data-disabled="true"] {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
			opacity: 0.5;
			pointer-events: none;
		}

		/* InputGroupAddon: Base */
		.input-group-addon {
			display: flex;
			height: auto;
			cursor: text;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			padding-top: 0.375rem;
			padding-bottom: 0.375rem;
			font-size: 0.875rem;
			font-weight: 500;
			color: var(--muted-foreground);
			user-select: none;
			transition-property: color;
			transition-duration: 200ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Secondary action: addon content shifts to foreground on focus */
		.input-group:focus-within .input-group-addon {
			color: var(--foreground);
		}

		/* Keep addon muted on invalid -- don't compete with error signal */
		.input-group:has([aria-invalid="true"]) .input-group-addon {
			color: var(--muted-foreground);
		}

		.input-group[data-disabled="true"] .input-group-addon {
			opacity: 0.5;
		}

		.input-group-addon svg:not([class*="size-"]) {
			width: 1rem;
			height: 1rem;
		}

		/* Addon: inline-start */
		.input-group-addon-inline-start {
			order: -1;
			padding-left: 0.5rem;
		}

		/* Addon: inline-end */
		.input-group-addon-inline-end {
			order: 999;
			padding-right: 0.5rem;
		}


		/* Input inside group: remove borders and shadows */
		.input-group .input-group-control {
			flex: 1;
			border-radius: 0;
			border: 0;
			background-color: transparent;
			box-shadow: none;
			outline: none;
		}

		.input-group .input-group-control:focus-visible {
			box-shadow: none;
			border-color: transparent;
		}

		.input-group .input-group-control:disabled {
			background-color: transparent;
		}

		.input-group .input-group-control[aria-invalid="true"] {
			box-shadow: none;
		}

		/* Adjust input padding when addon is present */
		.input-group:has(> .input-group-addon-inline-start) > .input-group-control {
			padding-left: 0.375rem;
		}

		.input-group:has(> .input-group-addon-inline-end) > .input-group-control {
			padding-right: 0.375rem;
		}


		/* Textarea inside group */
		.input-group .input-group-control-textarea {
			flex: 1;
			resize: none;
			border-radius: 0;
			border: 0;
			background-color: transparent;
			padding: 0.5rem 0.625rem;
			box-shadow: none;
			outline: none;
		}

		.input-group .input-group-control-textarea:focus-visible {
			box-shadow: none;
			border-color: transparent;
		}

		.input-group .input-group-control-textarea:disabled {
			background-color: transparent;
		}

		.input-group .input-group-control-textarea[aria-invalid="true"] {
			box-shadow: none;
		}

		/* InputGroupButton */
		.input-group-btn {
			box-shadow: none;
		}

		.input-group-btn-size-xs {
			height: 1.5rem;
			gap: 0.25rem;
			border-radius: calc(var(--radius-md) - 3px);
			padding-left: 0.375rem;
			padding-right: 0.375rem;
		}

		.input-group-btn-size-xs svg:not([class*="size-"]) {
			width: 0.875rem;
			height: 0.875rem;
		}

		.input-group-btn-size-sm {
			/* inherits from button sm */
		}

		.input-group-btn-size-icon-xs {
			width: 1.5rem;
			height: 1.5rem;
			border-radius: calc(var(--radius-md) - 3px);
			padding: 0;
		}

		.input-group-btn-size-icon-sm {
			width: 2rem;
			height: 2rem;
			padding: 0;
		}

		/* InputGroupText */
		.input-group-text {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			font-size: 0.875rem;
			color: inherit;
		}

		.input-group-text svg {
			pointer-events: none;
		}

		.input-group-text svg:not([class*="size-"]) {
			width: 1rem;
			height: 1rem;
		}

		/* Dark mode */
		.dark .input-group {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}

		.dark .input-group[data-disabled="true"] {
			background-color: color-mix(in oklch, var(--input) 80%, transparent);
		}

		.dark .input-group:has([aria-invalid="true"]) {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		.dark .input-group .input-group-control {
			background-color: transparent;
		}

		.dark .input-group .input-group-control:disabled {
			background-color: transparent;
		}

		.dark .input-group .input-group-control-textarea {
			background-color: transparent;
		}

		.dark .input-group .input-group-control-textarea:disabled {
			background-color: transparent;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.input-group,
			.input-group-addon {
				transition-duration: 75ms;
			}
		}

/* input.templ */
/* Base */
		.input {
			height: 2.25rem;
			width: 100%;
			min-width: 0;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			background-color: transparent;
			padding: 0.25rem 0.75rem;
			font-size: 1rem;
			line-height: 1.5rem;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
		}

		.input::file-selector-button {
			display: inline-flex;
			height: 1.5rem;
			border: 0;
			background-color: transparent;
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 500;
			color: var(--foreground);
		}

		.input::placeholder {
			color: var(--muted-foreground);
		}

		.input:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.input:disabled {
			pointer-events: none;
			cursor: not-allowed;
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
			opacity: 0.5;
		}

		.input[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		@media (min-width: 768px) {
			.input {
				font-size: 0.875rem;
				line-height: 1.25rem;
			}
		}

		/* Dark mode */
		.dark .input {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .input:disabled {
			background-color: color-mix(in oklch, var(--input) 80%, transparent);
		}
		.dark .input[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.input {
				transition-duration: 75ms;
			}
		}

/* kbd.templ */
/* Kbd
		   Keycap affordance: border + bottom shadow mimics a physical key,
		   triggering instant recognition (Mental Model / Jakob's Law).
		   Distinct from badges via the shadow depth cue (Von Restorff). */
		.kbd {
			pointer-events: none;
			display: inline-flex;
			height: 1.25rem;
			width: fit-content;
			min-width: 1.25rem;
			align-items: center;
			justify-content: center;
			gap: 0.25rem;
			border-radius: calc(var(--radius) - 4px);
			border: 1px solid var(--border);
			background-color: var(--muted);
			padding-left: 0.375rem;
			padding-right: 0.375rem;
			font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
			font-size: 0.75rem;
			line-height: 1rem;
			font-weight: 500;
			color: var(--muted-foreground);
			user-select: none;
			/* Bottom shadow: keycap depth (Law of Praegnanz — simple 3D cue) */
			box-shadow: 0 1px 0 0 color-mix(in oklch, var(--foreground) 7%, transparent);
		}

		.kbd svg {
			width: 0.75rem;
			height: 0.75rem;
		}

		/* Inside tooltip: adapt to dark surface (Cognitive Load — immediate readability) */
		[data-slot="tooltip-content"] .kbd {
			border-color: color-mix(in oklch, var(--background) 25%, transparent);
			background-color: color-mix(in oklch, var(--background) 20%, transparent);
			color: var(--background);
			box-shadow: 0 1px 0 0 color-mix(in oklch, var(--background) 15%, transparent);
		}

		/* Kbd Group (Chunking — related keys grouped with consistent spacing) */
		.kbd-group {
			display: inline-flex;
			align-items: center;
			gap: 0.25rem;
		}

		/* Dark mode */
		.dark .kbd {
			border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
			box-shadow: 0 1px 0 0 color-mix(in oklch, var(--foreground) 5%, transparent);
		}

		.dark [data-slot="tooltip-content"] .kbd {
			border-color: color-mix(in oklch, var(--background) 15%, transparent);
			background-color: color-mix(in oklch, var(--background) 10%, transparent);
			box-shadow: 0 1px 0 0 color-mix(in oklch, var(--background) 8%, transparent);
		}

/* label.templ */
/* Base */
		.label {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			font-size: 0.875rem;
			line-height: 1;
			font-weight: 500;
			user-select: none;
			transition-property: color, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Disabled via parent group */
		[data-disabled="true"] .label {
			pointer-events: none;
			opacity: 0.5;
		}

		/* Disabled via peer sibling input */
		.input:disabled + .label,
		.input:disabled ~ .label {
			cursor: not-allowed;
			opacity: 0.5;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.label {
				transition-duration: 75ms;
			}
		}

/* native-select.templ */
/* Base wrapper */
		.native-select-wrapper {
			position: relative;
			width: fit-content;
		}
		.native-select-wrapper:has(select:disabled) {
			opacity: 0.5;
		}

		/* Base select */
		.native-select {
			height: 2.25rem;
			width: 100%;
			min-width: 0;
			appearance: none;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			background-color: transparent;
			padding: 0.25rem 2rem 0.25rem 0.625rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
			user-select: none;
		}

		.native-select::selection {
			background-color: var(--primary);
			color: var(--primary-foreground);
		}

		.native-select::placeholder {
			color: var(--muted-foreground);
		}

		.native-select:hover:not(:disabled) {
			border-color: color-mix(in oklch, var(--ring) 40%, transparent);
		}

		.native-select:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.native-select:disabled {
			pointer-events: none;
			cursor: not-allowed;
		}

		.native-select[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Size: sm */
		.native-select[data-size="sm"] {
			height: 2rem;
			padding-top: 0.125rem;
			padding-bottom: 0.125rem;
			border-radius: min(var(--radius-md), 10px);
		}

		/* Chevron icon */
		.native-select-icon {
			position: absolute;
			top: 50%;
			right: 0.625rem;
			transform: translateY(-50%);
			pointer-events: none;
			user-select: none;
			color: var(--muted-foreground);
			display: flex;
			align-items: center;
			justify-content: center;
			transition-property: color, transform;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}
		.native-select-icon svg {
			width: 1rem;
			height: 1rem;
		}

		/* Chevron reacts to hover and focus (secondary action / anticipation) */
		.native-select-wrapper:has(select:hover:not(:disabled)) .native-select-icon {
			color: var(--foreground);
		}
		.native-select-wrapper:has(select:focus-visible) .native-select-icon {
			color: var(--foreground);
			transform: translateY(-50%) rotate(180deg);
		}

		/* Dark mode */
		.dark .native-select {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .native-select:hover {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .native-select[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.native-select,
			.native-select-icon {
				transition-duration: 75ms;
			}
			.native-select-wrapper:has(select:focus-visible) .native-select-icon {
				transform: translateY(-50%);
			}
		}

/* pagination.templ */
/* Pagination nav */
		.pagination {
			margin-left: auto;
			margin-right: auto;
			display: flex;
			width: 100%;
			justify-content: center;
		}

		/* Content list — Fitts's Law: wider gap for easier targeting */
		.pagination-content {
			display: flex;
			align-items: center;
			gap: 0.25rem;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		/* Link base */
		.pagination-link {
			text-decoration: none;
			cursor: pointer;
		}

		/* Active page — Von Restorff: bold weight distinguishes current page */
		.pagination-link[data-active="true"] {
			font-weight: 600;
			pointer-events: none;
		}

		/* Disabled boundary state — Cognitive Load: prevent impossible actions */
		.pagination-link[aria-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
			cursor: default;
		}

		/* Previous / Next */
		.pagination-prev {
			padding-left: 0.375rem;
		}
		.pagination-next {
			padding-right: 0.375rem;
		}

		/* Chevron anticipation — 12 Principles: hint at direction */
		.pagination-prev svg,
		.pagination-next svg {
			transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.pagination-prev:not([aria-disabled="true"]):hover svg {
			transform: translateX(-2px);
		}
		.pagination-next:not([aria-disabled="true"]):hover svg {
			transform: translateX(2px);
		}

		/* Text hidden on small screens */
		@media (max-width: 639px) {
			.pagination-text {
				display: none;
			}
		}
		@media (min-width: 640px) {
			.pagination-text {
				display: block;
			}
		}

		/* Mobile touch targets — Fitts's Law: min 44px on touch devices */
		@media (max-width: 639px) {
			.pagination-link.btn-size-icon {
				width: 2.75rem;
				height: 2.75rem;
			}
		}

		/* Ellipsis — Selective Attention: muted to signal non-interactive */
		.pagination-ellipsis {
			display: flex;
			width: 2.25rem;
			height: 2.25rem;
			align-items: center;
			justify-content: center;
			color: var(--muted-foreground);
		}

		.pagination-ellipsis svg {
			width: 1rem;
			height: 1rem;
		}

		/* Screen reader only */
		.pagination .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;
		}

		/* Dark mode */
		.dark .pagination-link[data-active="true"] {
			border-color: var(--input);
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}

		.dark .pagination-link[aria-disabled="true"] {
			opacity: 0.4;
		}

		.dark .pagination-ellipsis {
			color: var(--muted-foreground);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.pagination-prev svg,
			.pagination-next svg {
				transition: none;
			}
			.pagination-prev:hover svg,
			.pagination-next:hover svg {
				transform: none;
			}
		}

/* popover.templ */
/* ── Root ── */
		.popover {
			position: relative;
			display: inline-flex;
		}

		/* ── Trigger ── */
		.popover-trigger {
			cursor: pointer;
		}

		/* ── Content ── */
		.popover-content {
			position: absolute;
			z-index: 50;
			width: 18rem;
			display: flex;
			flex-direction: column;
			gap: 0.625rem;
			border-radius: var(--radius-lg);
			background: var(--popover);
			padding: 0.625rem;
			color: var(--popover-foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
			outline: none;
			/*
			 * --popover-base-* holds the alignment offset (e.g. -50% for centering).
			 * --popover-slide-* holds the directional animation offset per-side.
			 * Both are composed into the keyframes so the base position is never lost.
			 */
			--popover-base-x: 0px;
			--popover-base-y: 0px;
			--popover-slide-x: 0px;
			--popover-slide-y: 0px;
			transform: translate(var(--popover-base-x), var(--popover-base-y));
		}

		/* Hidden when closed */
		.popover-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/*
		 * Side positioning + directional slide offsets.
		 * transform-origin anchors scale to the trigger edge so the panel
		 * appears to grow outward — maintaining spatial continuity (Solid Drawing).
		 * --popover-slide-* drives the directional translate so the panel
		 * emerges FROM the trigger, not just fades in place (Staging).
		 */

		/* Side: bottom (default) */
		.popover-content[data-side="bottom"] {
			top: calc(100% + 4px);
			transform-origin: top;
			--popover-slide-y: -4px;
		}
		.popover-content[data-side="top"] {
			bottom: calc(100% + 4px);
			transform-origin: bottom;
			--popover-slide-y: 4px;
		}
		.popover-content[data-side="left"] {
			right: calc(100% + 4px);
			top: 0;
			transform-origin: right;
			--popover-slide-x: 4px;
		}
		.popover-content[data-side="right"] {
			left: calc(100% + 4px);
			top: 0;
			transform-origin: left;
			--popover-slide-x: -4px;
		}

		/* Align */
		.popover-content[data-side="bottom"][data-align="start"],
		.popover-content[data-side="top"][data-align="start"] {
			left: 0;
		}
		.popover-content[data-side="bottom"][data-align="center"],
		.popover-content[data-side="top"][data-align="center"] {
			left: 50%;
			--popover-base-x: -50%;
		}
		.popover-content[data-side="bottom"][data-align="end"],
		.popover-content[data-side="top"][data-align="end"] {
			right: 0;
		}
		.popover-content[data-side="left"][data-align="start"],
		.popover-content[data-side="right"][data-align="start"] {
			top: 0;
		}
		.popover-content[data-side="left"][data-align="center"],
		.popover-content[data-side="right"][data-align="center"] {
			top: 50%;
			--popover-base-y: -50%;
		}
		.popover-content[data-side="left"][data-align="end"],
		.popover-content[data-side="right"][data-align="end"] {
			top: auto;
			bottom: 0;
		}

		/*
		 * Animations — asymmetric enter/exit with directional slide.
		 * Enter: spring easing + directional translate for organic arc (180ms).
		 *   Slightly longer than dropdown (150ms) because popovers carry richer
		 *   content — the extra 30ms lets the eye settle (Timing + Staging).
		 * Exit: snappy accelerate-out, less travel distance than enter so the
		 *   leaving panel doesn't compete for attention (Follow Through + Timing).
		 */

		/* Open (Slow In & Slow Out — spring overshoot on enter) */
		.popover-content[data-state="open"] {
			animation: popover-in 180ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		/* Close (faster, subtler exit — content yields focus back to trigger) */
		.popover-content[data-closing] {
			pointer-events: none;
			animation: popover-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes popover-in {
			from {
				opacity: 0;
				transform: translate(var(--popover-base-x), var(--popover-base-y))
					scale(0.96)
					translate(var(--popover-slide-x), var(--popover-slide-y));
			}
			to {
				opacity: 1;
				transform: translate(var(--popover-base-x), var(--popover-base-y))
					scale(1);
			}
		}

		@keyframes popover-out {
			from {
				opacity: 1;
				transform: translate(var(--popover-base-x), var(--popover-base-y))
					scale(1);
			}
			to {
				opacity: 0;
				transform: translate(var(--popover-base-x), var(--popover-base-y))
					scale(0.97)
					translate(
						calc(var(--popover-slide-x) * 0.5),
						calc(var(--popover-slide-y) * 0.5)
					);
			}
		}

		/* ── Header ── */
		.popover-header {
			display: flex;
			flex-direction: column;
			gap: 0.125rem;
			font-size: 0.875rem;
		}

		/* ── Title ── */
		.popover-title {
			font-weight: 500;
		}

		/* ── Description ── */
		.popover-description {
			color: var(--muted-foreground);
		}

		/* ── Dark mode ── */
		.dark .popover-content {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}

		/* ── Reduced motion — instant show/hide, no transform (Timing) ── */
		@media (prefers-reduced-motion: reduce) {
			.popover-content[data-state="open"],
			.popover-content[data-closing] {
				animation: none;
			}
		}

/* progress.templ */
/* Keyframes */
		@keyframes progress-shimmer {
			100% {
				transform: translateX(100%);
			}
		}

		@keyframes progress-indeterminate {
			0% {
				left: -40%;
				width: 40%;
			}
			50% {
				left: 20%;
				width: 50%;
			}
			100% {
				left: 100%;
				width: 40%;
			}
		}

		/* Base */
		.progress {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
		}

		/* Track */
		.progress-track {
			position: relative;
			display: flex;
			height: 0.375rem;
			width: 100%;
			align-items: center;
			overflow: hidden;
			border-radius: 9999px;
			background-color: var(--muted);
		}

		/* Indicator */
		.progress-indicator {
			position: relative;
			height: 100%;
			border-radius: 9999px;
			background-color: var(--primary);
			overflow: hidden;
			transition: width 300ms cubic-bezier(0.65, 0, 0.35, 1);
		}

		/* Shimmer – secondary action communicating "in motion" */
		.progress-indicator::after {
			content: '';
			position: absolute;
			inset: 0;
			transform: translateX(-100%);
			background: linear-gradient(
				90deg,
				transparent 0%,
				color-mix(in oklch, var(--primary-foreground) 15%, transparent) 40%,
				color-mix(in oklch, var(--primary-foreground) 25%, transparent) 60%,
				transparent 100%
			);
			animation: progress-shimmer 2s ease-in-out infinite;
		}

		/* Complete: stop shimmer, settle into solid fill (peak-end rule) */
		.progress[data-state="complete"] .progress-indicator::after {
			animation: none;
			display: none;
		}

		/* Indeterminate: own sliding animation (staging) */
		.progress[data-state="indeterminate"] .progress-indicator {
			position: absolute;
			width: 40%;
			animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
		}

		.progress[data-state="indeterminate"] .progress-indicator::after {
			animation: none;
			display: none;
		}

		/* Label */
		.progress-label {
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 500;
		}

		/* Value */
		.progress-value {
			margin-left: auto;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: var(--muted-foreground);
			font-variant-numeric: tabular-nums;
		}

		/* Dark mode – subtler shimmer against dark backgrounds */
		.dark .progress-indicator::after {
			background: linear-gradient(
				90deg,
				transparent 0%,
				color-mix(in oklch, var(--primary-foreground) 8%, transparent) 40%,
				color-mix(in oklch, var(--primary-foreground) 12%, transparent) 60%,
				transparent 100%
			);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.progress-indicator {
				transition-duration: 75ms;
			}

			.progress-indicator::after {
				animation: none;
				display: none;
			}

			.progress[data-state="indeterminate"] .progress-indicator {
				animation: none;
				width: 50%;
				left: 25%;
			}
		}

/* radio-group.templ */
/* Radio Group */
		.radio-group {
			display: grid;
			width: 100%;
			gap: 0.25rem;
		}

		/* Radio Label */
		.radio-label {
			display: inline-flex;
			width: fit-content;
			align-items: center;
			gap: 0.5rem;
			padding: 0.25rem 0;
			cursor: pointer;
		}

		.radio-label-text {
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 500;
			user-select: none;
		}

		/* Wrapper */
		.radio-wrapper {
			position: relative;
			display: inline-flex;
			width: 1.125rem;
			height: 1.125rem;
			flex-shrink: 0;
		}

		/* Native input: transparent overlay for interaction */
		.radio-input {
			position: absolute;
			inset: -0.5rem -0.75rem;
			opacity: 0;
			cursor: pointer;
			margin: 0;
			z-index: 1;
		}

		.radio-input:disabled {
			cursor: not-allowed;
		}

		/* Visual radio */
		.radio-visual {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.125rem;
			height: 1.125rem;
			border-radius: 50%;
			border: 1px solid var(--input);
			background: transparent;
			color: inherit;
			transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				color 100ms cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Hover on radio circle (Anticipation — hint before action) */
		.radio-input:not(:disabled):not(:checked):hover + .radio-visual {
			border-color: color-mix(in oklch, var(--primary) 50%, var(--input));
		}

		/* Pressed feedback */
		.radio-input:active:not(:disabled) + .radio-visual {
			transform: scale(0.92);
			transition-duration: 80ms;
		}

		/* Focus visible */
		.radio-input:focus-visible + .radio-visual {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Disabled */
		.radio-input:disabled + .radio-visual {
			opacity: 0.5;
		}

		/* Disabled label row */
		.radio-label:has(.radio-input:disabled) {
			cursor: not-allowed;
			pointer-events: none;
		}
		.radio-label:has(.radio-input:disabled) .radio-label-text {
			opacity: 0.5;
		}

		/* Invalid */
		.radio-input[aria-invalid="true"] + .radio-visual {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Checked — background fills first (Staging) */
		.radio-input:checked + .radio-visual {
			border-color: var(--primary);
			background-color: var(--primary);
			color: var(--primary-foreground);
		}

		/* Invalid + Checked */
		.radio-input[aria-invalid="true"]:checked + .radio-visual {
			border-color: var(--primary);
		}

		/* Indicator */
		.radio-indicator {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.125rem;
			height: 1.125rem;
		}

		/* Dot — delayed pop-in after background fill (Follow Through) */
		.radio-dot {
			display: block;
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 50%;
			background-color: var(--primary-foreground);
			opacity: 1;
			transform: scale(1);
			transition: opacity 120ms 40ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 200ms 40ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		/* Hide dot when unchecked — scale from 0 for a satisfying pop (Appeal) */
		.radio-input:not(:checked) + .radio-visual .radio-dot {
			opacity: 0;
			transform: scale(0);
			transition-delay: 0ms;
		}

		/* Dark mode */
		.dark .radio-visual {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}

		.dark .radio-input:not(:disabled):not(:checked):hover + .radio-visual {
			border-color: color-mix(in oklch, var(--primary) 60%, var(--input));
		}

		.dark .radio-input[aria-invalid="true"] + .radio-visual {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		.dark .radio-input:checked + .radio-visual {
			background-color: var(--primary);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.radio-visual {
				transition-duration: 75ms;
			}
			.radio-dot {
				transition: none;
			}
			.radio-input:active:not(:disabled) + .radio-visual {
				transform: none;
			}
		}

/* resizable.templ */
/* Resizable Panel Group */
		.resizable-group {
			display: flex;
			height: 100%;
			width: 100%;
		}
		.resizable-group-vertical {
			flex-direction: column;
		}

		/* Resizable Panel */
		.resizable-panel {
			overflow: hidden;
			flex-shrink: 0;
			flex-grow: 0;
		}

		/* Resizable Handle
		   [Fitts's Law] 16px hit area via ::after for comfortable targeting
		   [timing-under-300ms] 150ms transitions for hover/active feedback
		   [easing-entrance-ease-out] ease-out for state appearance */
		.resizable-handle {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 1.5px;
			background-color: var(--border);
			outline: none;
			cursor: col-resize;
			touch-action: none;
			user-select: none;
			transition: background-color 150ms ease-out;
		}

		/* [Fitts's Law] Generous invisible hit area -- 16px wide */
		.resizable-handle::after {
			content: "";
			position: absolute;
			inset: 0;
			left: 50%;
			width: 16px;
			transform: translateX(-50%);
		}

		.resizable-handle:focus-visible {
			background-color: var(--ring);
			box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
		}

		/* [Aesthetic-Usability] Soft intermediate hover before full active */
		.resizable-handle:hover {
			background-color: color-mix(in oklch, var(--primary) 50%, transparent);
		}

		/* [physics-active-state] Active drag gets full primary color */
		.resizable-handle.resizable-handle-active {
			background-color: var(--primary);
			transition-duration: 50ms;
		}

		/* [Flow] Boundary feedback -- subtle pulse when hitting min/max */
		.resizable-handle.resizable-handle-at-limit {
			background-color: var(--destructive);
			transition-duration: 100ms;
		}

		/* Horizontal group handle (separator between top/bottom) */
		.resizable-handle-vertical {
			width: 100%;
			height: 1.5px;
			cursor: row-resize;
		}
		.resizable-handle-vertical::after {
			content: "";
			position: absolute;
			inset: 0;
			top: 50%;
			left: 0;
			width: 100%;
			height: 16px;
			transform: translateY(-50%);
		}

		/* Grip indicator pill */
		.resizable-handle-indicator {
			z-index: 10;
			width: 3px;
			height: 1.5rem;
			flex-shrink: 0;
			border-radius: 9999px;
			background-color: var(--muted-foreground);
			transition: opacity 150ms ease-out, transform 150ms ease-out;
			opacity: 0.5;
		}

		/* Hover: indicator becomes fully visible */
		.resizable-handle:hover .resizable-handle-indicator {
			opacity: 1;
		}

		/* [physics-active-state] Subtle scale on active drag */
		.resizable-handle.resizable-handle-active .resizable-handle-indicator {
			opacity: 1;
			transform: scaleY(1.05);
		}

		/* Vertical handle indicator */
		.resizable-handle-vertical .resizable-handle-indicator {
			width: 1.5rem;
			height: 3px;
		}
		.resizable-handle-vertical .resizable-handle-active .resizable-handle-indicator {
			transform: scaleX(1.05);
		}

		/* Dragging state: change cursor globally */
		body.resizable-dragging-col {
			cursor: col-resize !important;
			user-select: none;
		}
		body.resizable-dragging-row {
			cursor: row-resize !important;
			user-select: none;
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.resizable-handle,
			.resizable-handle-indicator {
				transition: none;
			}
		}

		/* Dark mode */
		.dark .resizable-handle:hover {
			background-color: color-mix(in oklch, var(--primary) 60%, transparent);
		}
		.dark .resizable-handle.resizable-handle-active {
			background-color: var(--primary);
		}
		.dark .resizable-handle-indicator {
			background-color: var(--muted-foreground);
		}

/* select.templ */
/* ── Root ── */
		.sel {
			position: relative;
			display: inline-flex;
		}

		/* ── Trigger ── */
		.sel-trigger {
			display: inline-flex;
			width: fit-content;
			align-items: center;
			justify-content: space-between;
			gap: 0.375rem;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			background-color: transparent;
			padding: 0.5rem 0.5rem 0.5rem 0.625rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			white-space: nowrap;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
			user-select: none;
			cursor: pointer;
			height: 2.25rem;
		}

		/* Anticipation — hover hints at interactivity before click (Jakob's Law) */
		.sel-trigger:hover:not(:disabled) {
			border-color: color-mix(in oklch, var(--ring) 40%, transparent);
		}

		.sel-trigger:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/*
		 * Secondary Action — expanded trigger gets subtle bg tint so the user
		 * sees a visual connection between the trigger and the open panel
		 * (Law of Common Region + Working Memory).
		 */
		.sel-trigger[aria-expanded="true"] {
			border-color: var(--ring);
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		.sel-trigger:disabled {
			pointer-events: none;
			opacity: 0.5;
			cursor: not-allowed;
		}

		.sel-trigger[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Size: sm */
		.sel-trigger-sm {
			height: 2rem;
			border-radius: min(var(--radius-md), 10px);
		}

		/* ── Trigger icon ── */
		.sel-trigger-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			color: var(--muted-foreground);
			flex-shrink: 0;
			transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
				color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.sel-trigger-icon svg {
			width: 1rem;
			height: 1rem;
		}

		/* Secondary Action — chevron follows hover/focus to reinforce affordance */
		.sel-trigger:hover:not(:disabled) .sel-trigger-icon {
			color: var(--foreground);
		}

		/* Chevron rotates when open (Anticipation in reverse — confirms the state) */
		.sel-trigger[aria-expanded="true"] .sel-trigger-icon {
			transform: rotate(180deg);
			color: var(--foreground);
		}

		/* ── Value ── */
		.sel-value {
			display: flex;
			flex: 1;
			align-items: center;
			gap: 0.375rem;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		/* Placeholder — shown via CSS when no value is selected.
		   JS replaces the pseudo-element with real text on selection. */
		.sel-value[data-placeholder]:empty::before {
			content: attr(data-placeholder);
			color: var(--muted-foreground);
		}

		/* ── Content ── */
		.sel-content {
			position: absolute;
			z-index: 50;
			min-width: 100%;
			max-height: 20rem;
			overflow-y: auto;
			overscroll-behavior: contain;
			border-radius: 0.5rem;
			background: var(--popover);
			padding: 0.25rem;
			color: var(--popover-foreground);
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
				0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -2px rgba(0, 0, 0, 0.1);
			outline: none;
			/*
			 * Directional slide via custom properties (Solid Drawing).
			 * --sel-slide drives the directional translate so the panel
			 * emerges FROM the trigger edge, not just fades in place (Staging).
			 */
			--sel-slide: 0px;
		}

		/* Thin scrollbar for long lists */
		.sel-content::-webkit-scrollbar {
			width: 6px;
		}
		.sel-content::-webkit-scrollbar-track {
			background: transparent;
		}
		.sel-content::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 15%, transparent);
			border-radius: 3px;
		}
		.sel-content::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 25%, transparent);
		}
		.sel-content {
			scrollbar-width: thin;
			scrollbar-color: color-mix(in oklch, var(--foreground) 15%, transparent) transparent;
		}

		/* Hidden when closed */
		.sel-content[data-state="closed"] {
			pointer-events: none;
			visibility: hidden;
			opacity: 0;
		}

		/*
		 * Side positioning + directional slide offsets.
		 * transform-origin anchors scale to the trigger edge so the panel
		 * appears to grow outward — maintaining spatial continuity (Solid Drawing).
		 * --sel-slide drives the directional translate so the panel
		 * emerges FROM the trigger, not just fades in place (Staging).
		 */

		/* Side: bottom (default) */
		.sel-content[data-side="bottom"] {
			top: calc(100% + 4px);
			transform-origin: top;
			--sel-slide: -4px;
		}
		.sel-content[data-side="top"] {
			bottom: calc(100% + 4px);
			transform-origin: bottom;
			--sel-slide: 4px;
		}

		/* Align */
		.sel-content[data-side="bottom"][data-align="start"],
		.sel-content[data-side="top"][data-align="start"] {
			left: 0;
		}
		.sel-content[data-side="bottom"][data-align="center"],
		.sel-content[data-side="top"][data-align="center"] {
			left: 50%;
			transform: translateX(-50%);
		}
		.sel-content[data-side="bottom"][data-align="end"],
		.sel-content[data-side="top"][data-align="end"] {
			right: 0;
		}

		/*
		 * Animations — asymmetric enter/exit with directional slide.
		 * Enter: spring easing + directional translate for organic arc (150ms).
		 * Exit: snappy accelerate-out, less travel distance than enter so the
		 *   leaving panel doesn't compete for attention (Follow Through + Timing).
		 */

		/* Open (Slow In & Slow Out — spring overshoot on enter) */
		.sel-content[data-state="open"] {
			animation: sel-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
		}

		/* Close (faster, subtler exit — content yields focus back to trigger) */
		.sel-content[data-closing] {
			pointer-events: none;
			animation: sel-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
		}

		@keyframes sel-in {
			from {
				opacity: 0;
				transform: scale(0.96) translateY(var(--sel-slide));
			}
			to {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		@keyframes sel-out {
			from {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
			to {
				opacity: 0;
				transform: scale(0.97) translateY(calc(var(--sel-slide) * 0.5));
			}
		}

		/* ── Group ── */
		.sel-group {
			padding: 0.125rem 0;
		}

		/* ── Label ── */
		.sel-label {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--muted-foreground);
		}

		/* Chunking — labels after separators get extra top space
		   to form visually distinct groups (Law of Proximity) */
		.sel-separator + .sel-group > .sel-label:first-child,
		.sel-separator + .sel-label {
			padding-top: 0.375rem;
		}

		/* ── Item ── */
		.sel-item {
			position: relative;
			display: flex;
			cursor: default;
			align-items: center;
			gap: 0.375rem;
			border-radius: calc(var(--radius-md) - 2px);
			padding: 0.3125rem 2rem 0.3125rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
			user-select: none;
			/* Slow In & Slow Out — smooth highlight instead of instant swap */
			transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
				color 80ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Highlighted state (keyboard/hover) */
		.sel-item:hover:not([data-disabled="true"]) {
			background: var(--accent);
			color: var(--accent-foreground);
		}

		.sel-item[data-highlighted] {
			background: var(--accent);
			color: var(--accent-foreground);
		}

		/* Selected state */
		.sel-item[data-selected] {
			font-weight: 500;
		}

		/* Disabled */
		.sel-item[data-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}

		/* SVG inside items */
		.sel-item svg {
			pointer-events: none;
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		/* ── Item text ── */
		.sel-item-text {
			display: flex;
			flex: 1;
			flex-shrink: 0;
			align-items: center;
			gap: 0.5rem;
			white-space: nowrap;
		}

		/* ── Item indicator (check) ── */
		.sel-item-indicator {
			pointer-events: none;
			position: absolute;
			right: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: scale(0.5);
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		.sel-item[data-selected] .sel-item-indicator {
			opacity: 1;
			transform: scale(1);
		}

		.sel-item-indicator svg {
			width: 0.875rem;
			height: 0.875rem;
		}

		/* ── Separator ── */
		.sel-separator {
			margin: 0.25rem -0.25rem;
			height: 1px;
			background: var(--border);
		}

		/* ── Dark mode ── */
		.dark .sel-trigger {
			border-color: var(--input);
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .sel-trigger:hover:not(:disabled) {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .sel-trigger[aria-expanded="true"] {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}
		.dark .sel-trigger[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}
		.dark .sel-content {
			box-shadow:
				0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
				0 8px 24px -4px rgba(0, 0, 0, 0.35),
				0 2px 8px -2px rgba(0, 0, 0, 0.2);
		}
		.dark .sel-content::-webkit-scrollbar-thumb {
			background: color-mix(in oklch, var(--foreground) 20%, transparent);
		}
		.dark .sel-content::-webkit-scrollbar-thumb:hover {
			background: color-mix(in oklch, var(--foreground) 30%, transparent);
		}
		.dark .sel-content {
			scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent;
		}

		/* ── Reduced motion — instant show/hide, no transform (Timing) ── */
		@media (prefers-reduced-motion: reduce) {
			.sel-trigger,
			.sel-trigger-icon,
			.sel-item,
			.sel-item-indicator {
				transition: none;
			}
			.sel-content[data-state="open"],
			.sel-content[data-closing] {
				animation: none;
			}
		}

/* separator.templ */
.separator {
			flex-shrink: 0;
			background-color: var(--border);
			transition: background-color 150ms ease;
		}

		.separator-horizontal {
			height: 1px;
			width: 100%;
		}

		.separator-vertical {
			width: 1px;
			align-self: stretch;
		}

		@media (prefers-reduced-motion: reduce) {
			.separator {
				transition: none;
			}
		}

/* skeleton.templ */
@keyframes skeleton-shimmer {
			100% {
				transform: translateX(100%);
			}
		}

		.skeleton {
			position: relative;
			overflow: hidden;
			border-radius: var(--radius-md);
			background-color: var(--muted);
		}

		.skeleton::after {
			content: '';
			position: absolute;
			inset: 0;
			transform: translateX(-100%);
			background: linear-gradient(
				90deg,
				transparent 0%,
				color-mix(in oklch, var(--background) 40%, transparent) 40%,
				color-mix(in oklch, var(--background) 60%, transparent) 60%,
				transparent 100%
			);
			animation: skeleton-shimmer 1.5s ease-in-out infinite;
		}

		.skeleton-circle {
			border-radius: 9999px;
		}

		@media (prefers-reduced-motion: reduce) {
			.skeleton::after {
				animation: none;
				display: none;
			}
			.skeleton {
				opacity: 0.7;
			}
		}

		.dark .skeleton::after {
			background: linear-gradient(
				90deg,
				transparent 0%,
				color-mix(in oklch, var(--foreground) 5%, transparent) 40%,
				color-mix(in oklch, var(--foreground) 8%, transparent) 60%,
				transparent 100%
			);
		}

/* slider.templ */
/* Base */
		.slider {
			position: relative;
			display: flex;
			width: 100%;
			touch-action: none;
			user-select: none;
			align-items: center;
			height: 1.25rem;
		}

		.slider-disabled {
			opacity: 0.5;
			pointer-events: none;
		}

		/* Native input: transparent overlay for interaction
		   Fitts's Law — extend vertically beyond visual bounds for easier targeting */
		.slider-input {
			position: absolute;
			inset: -0.5rem 0;
			width: 100%;
			opacity: 0;
			cursor: pointer;
			margin: 0;
			z-index: 2;
		}

		.slider-input:disabled {
			cursor: not-allowed;
		}

		/* Track */
		.slider-track {
			position: relative;
			width: 100%;
			height: 0.25rem;
			overflow: hidden;
			border-radius: 9999px;
			background-color: var(--muted);
		}

		/* Range (filled portion) */
		.slider-range {
			position: absolute;
			height: 100%;
			border-radius: 9999px;
			background-color: var(--primary);
			transition: width 50ms ease-out;
		}

		/* Thumb — spring return for satisfying settle after drag */
		.slider-thumb {
			position: absolute;
			width: 0.75rem;
			height: 0.75rem;
			border-radius: 9999px;
			border: 1px solid var(--ring);
			background-color: var(--background);
			transform: translateX(-50%);
			pointer-events: none;
			z-index: 1;
			transition:
				box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		/* Hover — anticipation: soft ring hints at interactivity */
		.slider:not(.slider-disabled):hover .slider-thumb {
			box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
		}

		/* Focus-visible — accessible ring, stronger than hover */
		.slider-input:focus-visible ~ .slider-thumb {
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Active — peak engagement: scale + wider ring (staging) */
		.slider-input:active:not(:disabled) ~ .slider-thumb {
			box-shadow: 0 0 0 5px color-mix(in oklch, var(--ring) 30%, transparent);
			transform: translateX(-50%) scale(1.05);
			transition-duration: 80ms;
		}

		/* Dragging — disable transitions for zero-latency direct manipulation */
		.slider-dragging .slider-range,
		.slider-dragging .slider-thumb {
			transition: none;
		}

		/* Dark mode */
		.dark .slider-track {
			background-color: color-mix(in oklch, var(--muted) 80%, transparent);
		}

		.dark .slider-thumb {
			background-color: white;
			border-color: var(--ring);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.slider-range {
				transition: none;
			}
			.slider-thumb {
				transition: none;
			}
			.slider-input:active:not(:disabled) ~ .slider-thumb {
				transform: translateX(-50%);
			}
		}

/* spinner.templ */
@keyframes spin {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}
		.spinner {
			width: 1rem;
			height: 1rem;
			animation: spin 1s linear infinite;
		}
		@media (prefers-reduced-motion: reduce) {
			.spinner {
				animation-duration: 2s;
			}
		}

/* switch.templ */
/* Wrapper */
		.switch-wrapper {
			position: relative;
			display: inline-flex;
			flex-shrink: 0;
		}

		/* Size: default */
		.switch-size-default {
			width: 32px;
			height: 18.4px;
		}

		/* Size: sm */
		.switch-size-sm {
			width: 24px;
			height: 14px;
		}

		/* Native input: transparent overlay for interaction */
		.switch-input {
			position: absolute;
			inset: -0.5rem -0.75rem;
			opacity: 0;
			cursor: pointer;
			margin: 0;
			z-index: 1;
		}

		.switch-input:disabled {
			cursor: not-allowed;
		}

		/* Track — secondary action: bg fills quickly while thumb slides */
		.switch-track {
			display: inline-flex;
			width: 100%;
			height: 100%;
			align-items: center;
			border-radius: 9999px;
			border: 1px solid transparent;
			background-color: var(--input);
			transition:
				background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
				border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
				transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Hover: Anticipation — hint before action */
		.switch-input:not(:disabled):not(:checked):hover + .switch-track {
			background-color: color-mix(in oklch, var(--input) 80%, var(--foreground));
		}

		.switch-input:not(:disabled):checked:hover + .switch-track {
			background-color: color-mix(in oklch, var(--primary) 80%, transparent);
		}

		/* Pressed feedback */
		.switch-input:active:not(:disabled) + .switch-track {
			transform: scale(0.95);
			transition-duration: 80ms;
		}

		/* Track: checked */
		.switch-input:checked + .switch-track {
			background-color: var(--primary);
		}

		/* Track: focus-visible */
		.switch-input:focus-visible + .switch-track {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		/* Track: disabled */
		.switch-input:disabled + .switch-track {
			cursor: not-allowed;
			opacity: 0.5;
		}

		/* Track: invalid */
		.switch-input[aria-invalid="true"] + .switch-track {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* Thumb — primary action: spring slide draws attention (Staging) */
		.switch-thumb {
			pointer-events: none;
			display: block;
			border-radius: 9999px;
			background-color: var(--background);
			box-shadow: none;
			transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		/* Thumb: default size */
		.switch-size-default .switch-thumb {
			width: 1rem;
			height: 1rem;
		}

		/* Thumb: sm size */
		.switch-size-sm .switch-thumb {
			width: 0.75rem;
			height: 0.75rem;
		}

		/* Thumb: unchecked */
		.switch-input:not(:checked) + .switch-track .switch-thumb {
			transform: translateX(0);
		}

		/* Thumb: checked */
		.switch-input:checked + .switch-track .switch-thumb {
			transform: translateX(calc(100% - 2px));
		}

		/* Dark mode */
		.dark .switch-track {
			background-color: color-mix(in oklch, var(--input) 80%, transparent);
		}

		.dark .switch-input:not(:disabled):not(:checked):hover + .switch-track {
			background-color: var(--input);
		}

		.dark .switch-input:checked + .switch-track {
			background-color: var(--primary);
		}

		.dark .switch-input:checked + .switch-track .switch-thumb {
			background-color: var(--primary-foreground);
		}

		.dark .switch-input:not(:checked) + .switch-track .switch-thumb {
			background-color: var(--foreground);
		}

		.dark .switch-input[aria-invalid="true"] + .switch-track {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.switch-track {
				transition-duration: 75ms;
			}
			.switch-thumb {
				transition: none;
			}
			.switch-input:active:not(:disabled) + .switch-track {
				transform: none;
			}
		}

/* table.templ */
/* Container — edge fade hints that content overflows (Selective Attention) */
		.tbl-container {
			position: relative;
			width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}
		.tbl-container::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 2rem;
			pointer-events: none;
			background: linear-gradient(to left, var(--background), transparent);
			opacity: 0;
			transition: opacity 150ms ease;
		}
		.tbl-container.has-overflow-right::after {
			opacity: 1;
		}

		/* Table */
		.tbl {
			width: 100%;
			caption-side: bottom;
			font-size: 0.875rem;
			line-height: 1.25rem;
			border-collapse: collapse;
		}

		/* Header — sticky + stronger visual weight (Working Memory, Make Structure Obvious) */
		.tbl-header {
			position: sticky;
			top: 0;
			z-index: 1;
			background-color: var(--background);
		}
		.tbl-header tr {
			border-bottom: 2px solid var(--border);
		}

		/* Body — zebra striping for scanability (Chunking, Law of Similarity) */
		.tbl-body tr:nth-child(even) {
			background-color: color-mix(in oklch, var(--muted) 25%, transparent);
		}
		.tbl-body tr:last-child {
			border-bottom: 0;
		}

		/* Footer */
		.tbl-footer {
			border-top: 2px solid var(--border);
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
			font-weight: 500;
		}
		.tbl-footer > tr:last-child {
			border-bottom: 0;
		}

		/* Row — hover/focus/selected (Staging, Selective Attention) */
		.tbl-row {
			border-bottom: 1px solid var(--border);
			transition-property: background-color, color, box-shadow;
			transition-duration: 120ms;
			transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
		}
		.tbl-body .tbl-row:hover {
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}
		.tbl-row:focus-visible {
			outline: none;
			box-shadow: inset 3px 0 0 var(--ring);
			background-color: color-mix(in oklch, var(--muted) 40%, transparent);
		}
		.tbl-row[data-state="selected"] {
			background-color: var(--muted);
			box-shadow: inset 3px 0 0 var(--primary);
		}

		/* Head cell — muted color to distinguish from data (Visual Hierarchy) */
		.tbl-head {
			height: 2.75rem;
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			text-align: left;
			vertical-align: middle;
			font-weight: 600;
			font-size: 0.75rem;
			line-height: 1rem;
			letter-spacing: 0.025em;
			white-space: nowrap;
			color: var(--muted-foreground);
		}
		.tbl-head:has([role="checkbox"]) {
			padding-right: 0;
		}

		/* Data cell */
		.tbl-cell {
			padding: 0.625rem;
			vertical-align: middle;
			white-space: nowrap;
		}
		.tbl-cell:has([role="checkbox"]) {
			padding-right: 0;
		}

		/* Caption */
		.tbl-caption {
			margin-top: 1rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: var(--muted-foreground);
		}

		/* Dark mode zebra adjustment */
		.dark .tbl-body tr:nth-child(even) {
			background-color: color-mix(in oklch, var(--muted) 15%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.tbl-row {
				transition-duration: 0ms;
			}
			.tbl-container::after {
				transition-duration: 0ms;
			}
		}

/* tabs.templ */
/* Root */
		.tabs {
			display: flex;
			gap: 0.5rem;
		}
		.tabs[data-orientation="horizontal"] {
			flex-direction: column;
		}
		/* vertical = row (default flex-direction) */

		/* List — base (Law of Common Region: shared container groups triggers) */
		.tabs-list {
			position: relative;
			display: inline-flex;
			width: fit-content;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-lg);
			padding: 3px;
			color: var(--muted-foreground);
		}
		.tabs[data-orientation="horizontal"] > .tabs-list {
			height: 2.5rem;
		}
		.tabs[data-orientation="vertical"] > .tabs-list {
			height: fit-content;
			flex-direction: column;
		}

		/* List — default variant */
		.tabs-list-default {
			background-color: var(--muted);
		}

		/* List — line variant */
		.tabs-list-line {
			gap: 0.25rem;
			background-color: transparent;
			border-radius: 0;
		}

		/*
		 * Sliding indicator — Staging (primary animation draws the eye to
		 * the state change) + Solid Drawing (spatial continuity across the bar).
		 * Hidden until JS positions it; triggers carry their own fallback styles.
		 */
		.tabs-indicator {
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none;
			opacity: 0;
			z-index: 0;
		}

		/* JS-enhanced: indicator visible, transition enabled */
		.tabs-list[data-animated] .tabs-indicator {
			opacity: 1;
			/* Follow Through — spring curve creates slight overshoot on arrival */
			transition:
				transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
				width 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
				height 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
		}

		/* Default variant indicator — background pill slides behind triggers */
		.tabs-list-default .tabs-indicator {
			border-radius: var(--radius-md);
			background-color: var(--background);
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		}

		/* Line variant indicator — thin bar (Staging: singular focal point) */
		/* Horizontal: underline at bottom of list */
		.tabs[data-orientation="horizontal"] .tabs-list-line .tabs-indicator {
			top: auto;
			bottom: 0;
			left: 0;
			height: 2px;
			border-radius: 1px;
			background-color: var(--foreground);
		}
		/* Vertical: sideline at right of list */
		.tabs[data-orientation="vertical"] .tabs-list-line .tabs-indicator {
			top: 0;
			left: auto;
			right: 0;
			width: 2px;
			border-radius: 1px;
			background-color: var(--foreground);
		}

		/* Trigger — base (Fitts's Law: adequate padding for comfortable targets) */
		.tabs-trigger {
			position: relative;
			z-index: 1;
			display: inline-flex;
			height: calc(100% - 1px);
			flex: 1;
			align-items: center;
			justify-content: center;
			gap: 0.375rem;
			border-radius: var(--radius-md);
			border: 1px solid transparent;
			padding: 0.25rem 0.75rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 500;
			white-space: nowrap;
			color: color-mix(in oklch, var(--foreground) 60%, transparent);
			background: none;
			cursor: pointer;
			outline: none;
			/* Slow In & Slow Out — eased color/bg transitions */
			transition-property: color, background-color, border-color, box-shadow, transform;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}
		.tabs[data-orientation="vertical"] .tabs-trigger {
			width: 100%;
			justify-content: flex-start;
		}

		/* Anticipation — hover hint before committing to the action */
		.tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]) {
			color: var(--foreground);
		}
		.tabs-list-line .tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]):not([data-active]) {
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		/* Pressed feedback — Squash and Stretch: subtle scale communicates weight */
		.tabs-trigger:active:not(:disabled):not([aria-disabled="true"]) {
			transform: scale(0.97);
			transition-duration: 80ms;
		}

		.tabs-trigger:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
			outline: 1px solid var(--ring);
		}
		.tabs-trigger:disabled,
		.tabs-trigger[aria-disabled="true"] {
			pointer-events: none;
			opacity: 0.5;
		}
		.tabs-trigger svg {
			pointer-events: none;
			flex-shrink: 0;
		}
		.tabs-trigger svg:not([class*='size-']) {
			width: 1rem;
			height: 1rem;
		}

		/*
		 * Active trigger — no-JS fallback (Cognitive Load: works without scripts).
		 * When JS enhances with [data-animated], the indicator handles the visual
		 * so trigger bg/shadow are removed to avoid doubling.
		 */

		/* Default variant: active trigger fallback */
		.tabs-list-default .tabs-trigger[data-active] {
			background-color: var(--background);
			color: var(--foreground);
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		}
		.tabs-list-default[data-animated] .tabs-trigger[data-active] {
			background-color: transparent;
			box-shadow: none;
		}

		/* Line variant: active trigger */
		.tabs-list-line .tabs-trigger {
			background-color: transparent;
		}
		.tabs-list-line .tabs-trigger[data-active] {
			background-color: transparent;
			color: var(--foreground);
			box-shadow: none;
		}

		/* Line underline/sideline via ::after — no-JS fallback */
		.tabs-trigger::after {
			content: "";
			position: absolute;
			background-color: var(--foreground);
			opacity: 0;
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.tabs[data-orientation="horizontal"] .tabs-trigger::after {
			left: 0;
			right: 0;
			bottom: -5px;
			height: 2px;
		}
		.tabs[data-orientation="vertical"] .tabs-trigger::after {
			top: 0;
			bottom: 0;
			right: -4px;
			width: 2px;
		}
		.tabs-list-line .tabs-trigger[data-active]::after {
			opacity: 1;
		}

		/* JS-enhanced: indicator replaces ::after */
		[data-animated] .tabs-trigger::after {
			display: none;
		}

		/*
		 * Content — Secondary Action: subtle fade-in supports the main indicator
		 * slide without stealing focus.
		 */
		.tabs-content {
			flex: 1;
			font-size: 0.875rem;
			line-height: 1.25rem;
			outline: none;
		}
		.tabs-content:not([data-active]) {
			display: none;
		}
			.tabs-content[data-active] {
				animation: tabs-content-in 150ms cubic-bezier(0, 0, 0.2, 1);
			}

		/* Timing — secondary action is shorter and subtler than the primary slide */
		@keyframes tabs-content-in {
			from {
				opacity: 0;
				transform: translateY(2px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Dark mode */
		.dark .tabs-trigger {
			color: var(--muted-foreground);
		}
		.dark .tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]) {
			color: var(--foreground);
		}
		.dark .tabs-list-default .tabs-trigger[data-active] {
			border-color: var(--border);
			background-color: var(--background);
			color: var(--foreground);
		}
		.dark .tabs-list-default[data-animated] .tabs-trigger[data-active] {
			border-color: transparent;
			background-color: transparent;
		}
		.dark .tabs-list-default .tabs-indicator {
			border: 1px solid var(--border);
			background-color: var(--background);
			box-shadow: none;
		}
		.dark .tabs-list-line .tabs-trigger[data-active] {
			border-color: transparent;
			background-color: transparent;
			color: var(--foreground);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.tabs-trigger {
				transition-duration: 0ms;
			}
			.tabs-trigger:active:not(:disabled) {
				transform: none;
			}
			.tabs-trigger::after {
				transition-duration: 0ms;
			}
			.tabs-list[data-animated] .tabs-indicator {
				transition: none;
			}
			.tabs-content[data-active] {
				animation: none;
			}
		}

/* textarea.templ */
/* Base */
		.textarea {
			display: flex;
			field-sizing: content;
			min-height: 4rem;
			width: 100%;
			border-radius: var(--radius-lg);
			border: 1px solid var(--input);
			background-color: transparent;
			padding: 0.5rem 0.625rem;
			font-size: 1rem;
			line-height: 1.5rem;
			transition-property: color, background-color, border-color, box-shadow, opacity;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			outline: none;
			resize: vertical;
		}

		.textarea::placeholder {
			color: var(--muted-foreground);
		}

		.textarea:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.textarea:disabled {
			pointer-events: none;
			cursor: not-allowed;
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
			opacity: 0.5;
		}

		.textarea[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		@media (min-width: 768px) {
			.textarea {
				font-size: 0.875rem;
				line-height: 1.25rem;
			}
		}

		/* Dark mode */
		.dark .textarea {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .textarea:disabled {
			background-color: color-mix(in oklch, var(--input) 80%, transparent);
		}
		.dark .textarea[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.textarea {
				transition-duration: 75ms;
			}
		}

/* time-picker.templ */
/* ── Root ── */
		.tp {
			display: inline-flex;
			align-items: center;
			gap: 0.125rem;
			user-select: none;
		}

		/* ── Field wrapper ── */
		.tp-field {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.125rem;
			width: 2rem;
		}

		/* ── Label ── */
		.tp-label {
			font-size: 0.625rem;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--muted-foreground);
			line-height: 1;
			white-space: nowrap;
		}

		/* ── Input ── */
		.tp-input {
			width: 2rem;
			height: 2rem;
			border-radius: var(--radius-md);
			border: 1px solid var(--input);
			background-color: transparent;
			text-align: center;
			font-size: 0.875rem;
			font-weight: 500;
			font-family: inherit;
			font-variant-numeric: tabular-nums;
			color: var(--foreground);
			outline: none;
			padding: 0;
			transition-property: border-color, box-shadow, background-color;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		.tp-input::placeholder {
			color: var(--muted-foreground);
			font-weight: 400;
		}

		.tp-input:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.tp-input:disabled {
			pointer-events: none;
			cursor: not-allowed;
			opacity: 0.5;
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}

		.tp-input[aria-invalid="true"] {
			border-color: var(--destructive);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
		}

		/* ── Separator ── */
		.tp-separator {
			font-size: 1rem;
			font-weight: 500;
			color: var(--foreground);
			line-height: 1;
			padding-top: 0.75rem;
		}

		/* ── AM/PM toggle ── */
		.tp-period {
			width: 2rem;
			height: 2rem;
			margin-top: 0.75rem;
			border-radius: var(--radius-md);
			border: 1px solid var(--input);
			background-color: transparent;
			font-size: 0.75rem;
			font-weight: 600;
			font-family: inherit;
			text-transform: uppercase;
			color: var(--foreground);
			cursor: pointer;
			outline: none;
			padding: 0;
			transition-property: border-color, box-shadow, background-color, color;
			transition-duration: 150ms;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		}

		.tp-period:hover {
			background-color: var(--muted);
		}

		.tp-period:focus-visible {
			border-color: var(--ring);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
		}

		.tp-period:disabled {
			pointer-events: none;
			opacity: 0.5;
		}

		/* ── Dark mode ── */
		.dark .tp-input {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .tp-input:disabled {
			background-color: color-mix(in oklch, var(--input) 80%, transparent);
		}
		.dark .tp-input[aria-invalid="true"] {
			border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
		}
		.dark .tp-period {
			background-color: color-mix(in oklch, var(--input) 30%, transparent);
		}
		.dark .tp-period:hover {
			background-color: color-mix(in oklch, var(--input) 50%, transparent);
		}

		/* ── Reduced motion ── */
		@media (prefers-reduced-motion: reduce) {
			.tp-input,
			.tp-period {
				transition-duration: 75ms;
			}
		}

/* toast.templ */
/* Toaster container */
		.toaster {
			position: fixed;
			bottom: 1rem;
			right: 1rem;
			z-index: 100;
			display: flex;
			flex-direction: column-reverse;
			gap: 0.5rem;
			max-width: 24rem;
			width: 100%;
			pointer-events: none;
		}

		@media (max-width: 480px) {
			.toaster {
				left: 1rem;
				right: 1rem;
				max-width: none;
			}
		}

		/* Toast item */
		.toast {
			pointer-events: auto;
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			width: 100%;
			border-radius: var(--radius-lg);
			border: 1px solid var(--border);
			background-color: var(--popover);
			color: var(--popover-foreground);
			padding: 0.75rem 2.25rem 0.75rem 1rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			box-shadow:
				0 4px 12px -2px rgba(0, 0, 0, 0.08),
				0 2px 4px -1px rgba(0, 0, 0, 0.04);
			animation: toast-enter 250ms cubic-bezier(0.22, 1.1, 0.36, 1);
			touch-action: pan-x;
			user-select: none;
			will-change: transform, opacity;
			transition: transform 150ms cubic-bezier(0.33, 1, 0.68, 1);
		}

		.toast[data-swiping] {
			transition: none;
		}

		.toast[data-dismissing] {
			animation: toast-exit 200ms cubic-bezier(0.33, 0, 0.67, 0) forwards;
		}

		.toast[data-swipe-dismiss] {
			animation: toast-swipe-exit 150ms cubic-bezier(0.33, 0, 0.67, 0) forwards;
		}

		/* When title is present, align icon to top */
		.toast:has(.toast-title) {
			align-items: flex-start;
		}

		/* Toast icon */
		.toast > svg:first-child {
			flex-shrink: 0;
			width: 1rem;
			height: 1rem;
		}

		.toast:has(.toast-title) > svg:first-child {
			translate: 0 0.125rem;
		}

		/* Toast content */
		.toast-content {
			flex: 1;
			min-width: 0;
		}

		.toast-title {
			font-weight: 500;
		}

		.toast-title + .toast-description {
			margin-top: 0.125rem;
		}

		.toast-description {
			color: var(--muted-foreground);
		}

		/* Toast close button */
		.toast-close {
			position: absolute;
			right: 4px;
			width: 2.25rem;
			height: 2.25rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-lg);
			border: none;
			background: transparent;
			color: var(--muted-foreground);
			cursor: pointer;
			opacity: 0.4;
			transition: opacity 150ms, background-color 150ms;
		}

		.toast-close svg {
			width: 0.75rem;
			height: 0.75rem;
		}

		.toast:hover .toast-close {
			opacity: 1;
		}

		.toast-close:hover {
			background-color: var(--muted);
			opacity: 1;
		}

		/* Variant: success */
		.toast-success > svg:first-child {
			color: oklch(0.6 0.19 145);
		}

		/* Variant: info */
		.toast-info > svg:first-child {
			color: oklch(0.6 0.19 250);
		}

		/* Variant: warning */
		.toast-warning {
			background-color: color-mix(in oklch, oklch(0.7 0.18 70) 5%, var(--popover));
		}
		.toast-warning > svg:first-child {
			color: oklch(0.7 0.18 70);
		}

		/* Variant: error */
		.toast-error {
			background-color: color-mix(in oklch, var(--destructive) 5%, var(--popover));
			border-color: color-mix(in oklch, var(--destructive) 25%, var(--border));
		}
		.toast-error > svg:first-child {
			color: var(--destructive);
		}

		/*
		 * Animations — asymmetric enter/exit.
		 * Enter: spring overshoot + translateY for organic arc (250ms).
		 * Exit: gentle fade + scale-down, faster than enter (200ms).
		 * Swipe-exit: fast follow-through in swipe direction (150ms).
		 */

		@keyframes toast-enter {
			from {
				opacity: 0;
				transform: translateY(12px) scale(0.96);
			}
			to {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}

		@keyframes toast-exit {
			0% {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
			100% {
				opacity: 0;
				transform: translateY(8px) scale(0.96);
			}
		}

		@keyframes toast-swipe-exit {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
				transform: translateX(110%);
			}
		}

		/* Dark mode */
		.dark .toast {
			box-shadow:
				0 4px 16px -2px rgba(0, 0, 0, 0.3),
				0 2px 6px -1px rgba(0, 0, 0, 0.15);
		}

		.dark .toast-warning {
			background-color: color-mix(in oklch, oklch(0.7 0.18 70) 8%, var(--popover));
		}

		.dark .toast-error {
			background-color: color-mix(in oklch, var(--destructive) 10%, var(--popover));
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.toast {
				animation: none;
				transition: none;
			}
			.toast[data-dismissing],
			.toast[data-swipe-dismiss] {
				animation: none;
				opacity: 0;
			}
		}

/* tooltip.templ */
/* Base */
		.tooltip {
			position: relative;
			display: inline-flex;
			--tooltip-delay: 400ms;
		}

		.tooltip-trigger {
			display: inline-flex;
			align-items: center;
		}

		.tooltip-content {
			position: absolute;
			z-index: 50;
			display: inline-flex;
			width: max-content;
			max-width: 20rem;
			align-items: center;
			gap: 0.375rem;
			border-radius: var(--radius-md);
			background-color: var(--foreground);
			padding: 0.375rem 0.75rem;
			font-size: 0.75rem;
			line-height: 1rem;
			font-weight: 500;
			color: var(--background);
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			/* Exit: fast accelerate-out, no delay (Timing + Slow In & Slow Out) */
			transition:
				opacity 100ms cubic-bezier(0.4, 0, 1, 1),
				transform 100ms cubic-bezier(0.4, 0, 1, 1),
				visibility 0s linear 100ms;
		}

		/* Show on hover — delayed to filter accidental triggers (Jakob's Law) */
		.tooltip:hover > .tooltip-content {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			/* Enter: decelerate-in after delay (Staging + Selective Attention) */
			transition:
				opacity 150ms cubic-bezier(0, 0, 0.2, 1) var(--tooltip-delay),
				transform 150ms cubic-bezier(0, 0, 0.2, 1) var(--tooltip-delay),
				visibility 0s linear var(--tooltip-delay);
		}

		/* Show on keyboard focus — no delay for intentional action (Doherty Threshold) */
		.tooltip:focus-within > .tooltip-content {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transition:
				opacity 150ms cubic-bezier(0, 0, 0.2, 1),
				transform 150ms cubic-bezier(0, 0, 0.2, 1),
				visibility 0s linear 0s;
		}

		/* Dismissed via Escape — instant hide, no transition (Cognitive Load) */
		.tooltip[data-tooltip-dismissed] > .tooltip-content {
			opacity: 0 !important;
			visibility: hidden !important;
			transition: none !important;
		}

		/* Side: top (default) */
		.tooltip-content[data-side="top"] {
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%) translateY(0.25rem) scale(0.95);
			margin-bottom: 0.25rem;
		}
		.tooltip:hover > .tooltip-content[data-side="top"],
		.tooltip:focus-within > .tooltip-content[data-side="top"] {
			transform: translateX(-50%) translateY(0) scale(1);
		}

		/* Side: bottom */
		.tooltip-content[data-side="bottom"] {
			top: 100%;
			left: 50%;
			transform: translateX(-50%) translateY(-0.25rem) scale(0.95);
			margin-top: 0.25rem;
		}
		.tooltip:hover > .tooltip-content[data-side="bottom"],
		.tooltip:focus-within > .tooltip-content[data-side="bottom"] {
			transform: translateX(-50%) translateY(0) scale(1);
		}

		/* Side: left */
		.tooltip-content[data-side="left"] {
			right: 100%;
			top: 50%;
			transform: translateY(-50%) translateX(0.25rem) scale(0.95);
			margin-right: 0.25rem;
		}
		.tooltip:hover > .tooltip-content[data-side="left"],
		.tooltip:focus-within > .tooltip-content[data-side="left"] {
			transform: translateY(-50%) translateX(0) scale(1);
		}

		/* Side: right */
		.tooltip-content[data-side="right"] {
			left: 100%;
			top: 50%;
			transform: translateY(-50%) translateX(-0.25rem) scale(0.95);
			margin-left: 0.25rem;
		}
		.tooltip:hover > .tooltip-content[data-side="right"],
		.tooltip:focus-within > .tooltip-content[data-side="right"] {
			transform: translateY(-50%) translateX(0) scale(1);
		}

		/* Arrow base */
		.tooltip-arrow {
			position: absolute;
			width: 0.5rem;
			height: 0.5rem;
			background-color: var(--foreground);
			border-radius: 1px;
			transform: rotate(45deg);
		}

		/* Arrow: top */
		.tooltip-content[data-side="top"] > .tooltip-arrow {
			bottom: -0.25rem;
			left: 50%;
			margin-left: -0.25rem;
		}

		/* Arrow: bottom */
		.tooltip-content[data-side="bottom"] > .tooltip-arrow {
			top: -0.25rem;
			left: 50%;
			margin-left: -0.25rem;
		}

		/* Arrow: left */
		.tooltip-content[data-side="left"] > .tooltip-arrow {
			right: -0.25rem;
			top: 50%;
			margin-top: -0.25rem;
		}

		/* Arrow: right */
		.tooltip-content[data-side="right"] > .tooltip-arrow {
			left: -0.25rem;
			top: 50%;
			margin-top: -0.25rem;
		}

		/* Reduced motion — instant show/hide, keep delay to prevent noise */
		@media (prefers-reduced-motion: reduce) {
			.tooltip-content {
				transition-duration: 0ms;
			}
			.tooltip:hover > .tooltip-content {
				transition:
					opacity 0ms linear var(--tooltip-delay),
					transform 0ms linear var(--tooltip-delay),
					visibility 0s linear var(--tooltip-delay);
			}
			.tooltip:focus-within > .tooltip-content {
				transition-duration: 0ms;
			}
		}

/* typography.templ */
/* --- Typography --- */

		/* H1 */
		.typo-h1 {
			scroll-margin-top: 5rem;
			text-align: center;
			font-size: 2.25rem;
			line-height: 2.5rem;
			font-weight: 800;
			letter-spacing: -0.025em;
			text-wrap: balance;
			color: var(--foreground);
		}

		/* H2 */
		.typo-h2 {
			scroll-margin-top: 5rem;
			border-bottom: 1px solid var(--border);
			padding-bottom: 0.5rem;
			font-size: 1.875rem;
			line-height: 2.25rem;
			font-weight: 600;
			letter-spacing: -0.025em;
			color: var(--foreground);
			transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.typo-h2:first-child {
			margin-top: 0;
		}

		/* H3 */
		.typo-h3 {
			scroll-margin-top: 5rem;
			font-size: 1.5rem;
			line-height: 2rem;
			font-weight: 600;
			letter-spacing: -0.025em;
			color: var(--foreground);
		}

		/* H4 */
		.typo-h4 {
			scroll-margin-top: 5rem;
			font-size: 1.25rem;
			line-height: 1.75rem;
			font-weight: 600;
			letter-spacing: -0.025em;
			color: var(--foreground);
		}

		/* Paragraph */
		.typo-p {
			line-height: 1.75;
			color: var(--foreground);
		}
		.typo-p + .typo-p {
			margin-top: 1.5rem;
		}

		/* Blockquote */
		.typo-blockquote {
			margin-top: 1.5rem;
			border-left: 2px solid var(--border);
			padding-left: 1.5rem;
			font-style: italic;
			color: var(--foreground);
			transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* Table */
		.typo-table-wrapper {
			margin-top: 1.5rem;
			margin-bottom: 1.5rem;
			width: 100%;
			overflow-y: auto;
		}
		.typo-table-wrapper table {
			width: 100%;
		}
		.typo-table-wrapper thead tr {
			margin: 0;
			border-bottom: 1px solid var(--border);
			padding: 0;
		}
		.typo-table-wrapper th {
			border-bottom: 1px solid var(--border);
			padding: 0.5rem 1rem;
			text-align: left;
			font-weight: 700;
			color: var(--foreground);
		}
		.typo-table-wrapper td {
			padding: 0.5rem 1rem;
			text-align: left;
			color: var(--foreground);
		}
		.typo-table-wrapper tbody tr {
			border-bottom: 1px solid var(--border);
			transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}
		.typo-table-wrapper tbody tr:last-child {
			border-bottom: 0;
		}
		.typo-table-wrapper tbody tr:hover {
			background-color: var(--muted);
		}

		/* List */
		.typo-list {
			margin-top: 1.5rem;
			margin-bottom: 1.5rem;
			margin-left: 1.5rem;
			list-style-type: disc;
		}
		.typo-list > li {
			margin-top: 0.5rem;
			color: var(--foreground);
		}

		/* Inline Code */
		.typo-code {
			position: relative;
			border-radius: var(--radius-md);
			background-color: var(--muted);
			padding-left: 0.3rem;
			padding-right: 0.3rem;
			padding-top: 0.2rem;
			padding-bottom: 0.2rem;
			font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
			font-size: 0.875rem;
			font-weight: 600;
			color: var(--foreground);
		}

		/* Lead */
		.typo-lead {
			font-size: 1.25rem;
			line-height: 1.75rem;
			color: var(--muted-foreground);
		}

		/* Large */
		.typo-large {
			font-size: 1.125rem;
			line-height: 1.75rem;
			font-weight: 600;
			color: var(--foreground);
		}

		/* Small */
		.typo-small {
			font-size: 0.875rem;
			line-height: 1;
			font-weight: 500;
			color: var(--foreground);
		}

		/* Muted */
		.typo-muted {
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: var(--muted-foreground);
		}

		/* Dark mode */
		.dark .typo-h2 {
			border-bottom-color: var(--border);
		}
		.dark .typo-blockquote {
			border-left-color: var(--border);
		}
		.dark .typo-code {
			background-color: var(--muted);
		}
		.dark .typo-table-wrapper tbody tr:hover {
			background-color: color-mix(in oklch, var(--muted) 50%, transparent);
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {
			.typo-h2,
			.typo-blockquote,
			.typo-table-wrapper tbody tr {
				transition-duration: 75ms;
			}
		}

/* home.templ */
.showcase {
		max-width: 80rem;
		margin: 0 auto;
		padding: 2rem 1rem;
	}
	@media (min-width: 40rem) {
		.showcase { padding: 2.5rem 2rem; }
	}
	.showcase-nav {
		position: sticky;
		top: 0;
		z-index: 10;
		background: var(--background);
		display: flex;
		gap: 0.25rem;
		padding: 0.75rem 0;
		margin-bottom: 2rem;
		border-bottom: 1px solid var(--border);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.showcase-nav::-webkit-scrollbar { display: none; }
	.showcase-nav a {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--muted-foreground);
		border-radius: var(--radius-md);
		text-decoration: none;
		white-space: nowrap;
	}
	.showcase-nav a:hover {
		background: var(--accent);
		color: var(--accent-foreground);
	}
	.showcase-section {
		margin-bottom: 3rem;
		scroll-margin-top: 4rem;
	}
	.showcase-section > h2 {
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 1.25rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid var(--border);
	}
	.showcase-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	@media (min-width: 48rem) {
		.showcase-grid { grid-template-columns: repeat(2, 1fr); }
	}
	.showcase-card {
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 1.25rem;
	}
	.showcase-card > h3:first-child {
		font-size: 0.875rem;
		font-weight: 600;
		margin-bottom: 1rem;
	}
	.showcase-label {
		font-size: 0.75rem;
		font-weight: 500;
		color: var(--muted-foreground);
		margin-bottom: 0.5rem;
		margin-top: 0.75rem;
	}
	.showcase-label:first-child,
	h3 + .showcase-label { margin-top: 0; }
	.showcase-wide { grid-column: 1 / -1; }