@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/styles.css

@@ -0,0 +1,882 @@
+@import 'tw-animate-css';
+@import './styles/motion-tokens.css';
+@import './styles/glass.css';
+
+/*
+ * Layer order. `shell` sits ABOVE `utilities` on purpose: the app-shell chrome
+ * materials (translucency over the ambient ground, the Focus sheet) have to win
+ * against the base utilities the primitives hardcode — SidebarInset ships
+ * `bg-background`, sidebar-inner ships `bg-sidebar`. Those are opaque, and an
+ * opaque panel occludes both the --shell-ambient mesh and the aurora canvas, so
+ * the shell's entire atmosphere renders behind a solid rectangle.
+ *
+ * Declared as a statement (not just a block) so the order holds no matter which
+ * side of `@import 'tailwindcss'` a consumer pulls this file in on.
+ */
+@layer theme, base, components, utilities, shell, accessibility;
+
+/*
+ * Make every kit consumer's Tailwind v4 build see this library's compiled
+ * .svelte files so the utility classes inside them (md:block,
+ * group-data-[collapsible=icon], data-[state=open], etc.) actually get
+ * emitted in the consumer's CSS bundle. Paths resolve relative to this
+ * file — at runtime that's dist/lib/styles.css, so ./components etc. resolve
+ * to dist/lib/components etc.
+ *
+ * Without these, app builds compile only their own source's classes and
+ * the kit components render with display:none / w:0 / wrong variants in
+ * prod even though they look correct in source.
+ */
+@source './components';
+@source './forms';
+@source './datatable';
+@source './billing';
+
+/*
+ * Explicit preferences keep the class contract. When SSR has no explicit
+ * light/dark cookie, the root has no data-mode attribute and the system media
+ * query owns the first paint without needing an inline bootstrap script.
+ */
+@custom-variant dark {
+	&:where(.dark, .dark *) {
+		@slot;
+	}
+	@media (prefers-color-scheme: dark) {
+		&:where(
+			:root:not([data-mode]):not(.light):not(.dark),
+			:root:not([data-mode]):not(.light):not(.dark) *
+		) {
+			@slot;
+		}
+	}
+}
+
+/* Defaults stay below externally loaded public and account palettes. */
+@layer base {
+	:root {
+		color-scheme: light;
+		/*
+	 * Compact workspace grammar
+	 *
+	 * Product surfaces may compose these semantic measurements without
+	 * inventing a second spacing, type, or elevation system. They deliberately
+	 * describe roles rather than a numeric scale: workbench chrome stays dense,
+	 * content insets stay readable, and elevation belongs to floating layers.
+	 */
+		--vibes-font-sans:
+			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+		--vibes-font-mono:
+			ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
+		--font-sans: var(--vibes-font-sans);
+		--font-mono: var(--vibes-font-mono);
+		--vibes-workbench-chrome-height: 2rem;
+		--vibes-workbench-row-height: 1.75rem;
+		--vibes-workbench-status-height: 1.375rem;
+		--vibes-workbench-chrome-inset: 0.5rem;
+		--vibes-workbench-panel-inset: 0.75rem;
+		--vibes-workbench-gap: 0.5rem;
+		/*
+	 * Foundations (docs/proposals/appshell-apple-design): one brand accent,
+	 * status inks for text-on-tint duty, spacing steps, elevation scale.
+	 * Additive — existing tokens keep their meaning.
+	 */
+		--success-ink: oklch(0.45 0.13 148);
+		--warning-ink: oklch(0.5 0.12 75);
+		--info-ink: oklch(0.45 0.13 240);
+		--destructive-ink: oklch(0.5 0.19 27);
+		--space-1: 0.25rem;
+		--space-2: 0.5rem;
+		--space-3: 0.75rem;
+		--space-4: 1rem;
+		--space-5: 1.25rem;
+		--space-6: 1.5rem;
+		--space-7: 2rem;
+		--space-8: 2.5rem;
+		--space-9: 3rem;
+		--elevation-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.055);
+		--elevation-2: 0 2px 8px rgb(0 0 0 / 0.08), 0 20px 60px rgb(0 0 0 / 0.14);
+		/*
+	 * Ambient ground + brand material (appshell polish pass): a barely-there
+	 * brand-tinted mesh the shells sit on, and the one gradient the accent
+	 * wears. Chrome translucency over the ambient is gated in @layer components.
+	 */
+		--shell-ambient:
+			linear-gradient(
+				180deg,
+				color-mix(in oklab, white 40%, transparent) 0%,
+				transparent 18%,
+				transparent 78%,
+				color-mix(in oklab, var(--brand-fill) 3%, transparent) 100%
+			),
+			radial-gradient(
+				1240px 720px at 6% -14%,
+				color-mix(in oklab, var(--brand-fill) 12%, transparent),
+				transparent 58%
+			),
+			radial-gradient(
+				1000px 780px at 104% 12%,
+				color-mix(in oklab, var(--info) 8%, transparent),
+				transparent 62%
+			),
+			radial-gradient(
+				900px 620px at 86% 106%,
+				color-mix(in oklab, var(--accent) 7%, transparent),
+				transparent 64%
+			),
+			radial-gradient(
+				700px 460px at 34% 118%,
+				color-mix(in oklab, var(--brand-fill) 5%, transparent),
+				transparent 66%
+			),
+			var(--background);
+		--brand-gradient: linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--brand-fill) 78%, white) 0%,
+			var(--brand-fill) 52%,
+			color-mix(in oklab, var(--brand-fill) 84%, black) 100%
+		);
+		--destructive-foreground: oklch(0.985 0 0);
+		--success: oklch(0.58 0.17 145);
+		--success-foreground: oklch(0.985 0 0);
+		--warning: oklch(0.65 0.18 80);
+		--warning-foreground: oklch(0.141 0.005 285.823);
+		--info: oklch(0.58 0.18 235);
+		--info-foreground: oklch(0.985 0 0);
+		--shadow-ambient: rgba(0, 0, 0, 0.08);
+		/* Scrim behind modals, drawers, and glass overlays — the one token the shell
+	   was missing, so backdrops hardcoded rgba(0,0,0,x). */
+		--overlay: oklch(0 0 0 / 0.5);
+		--vibes-workbench-surface-background: var(--background);
+		--vibes-workbench-chrome-background: color-mix(in oklab, var(--card) 90%, var(--background));
+		--vibes-workbench-sidebar-background: color-mix(
+			in oklab,
+			var(--sidebar) 88%,
+			var(--background)
+		);
+		--vibes-workbench-editor-background: var(--background);
+		--vibes-workbench-hairline: color-mix(in oklab, var(--border) 72%, transparent);
+		--vibes-workbench-elevation: 0 18px 48px
+			color-mix(in oklab, var(--shadow-ambient) 88%, transparent);
+		/* palette:light:start — generated by scripts/generate-theme-palette.ts */
+		--radius: 0.625rem;
+		--background: #fafafa;
+		--foreground: #18181b;
+		--card: #ffffff;
+		--card-foreground: #18181b;
+		--popover: oklch(1 0 0);
+		--popover-foreground: oklch(0.141 0.005 285.823);
+		--primary: #166534;
+		--primary-foreground: #ffffff;
+		--secondary: oklch(0.967 0.001 286.375);
+		--secondary-foreground: oklch(0.21 0.006 285.885);
+		--muted: oklch(0.967 0.001 286.375);
+		--muted-foreground: #52525b;
+		--accent: oklch(0.967 0.001 286.375);
+		--accent-foreground: oklch(0.21 0.006 285.885);
+		--destructive: oklch(0.577 0.245 27.325);
+		--border: oklch(0.92 0.004 286.32);
+		--input: oklch(0.92 0.004 286.32);
+		--ring: #166534;
+		--highlight: #166534;
+		--highlight-foreground: #ffffff;
+		--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);
+		--sidebar: oklch(0.985 0 0);
+		--sidebar-foreground: oklch(0.141 0.005 285.823);
+		--sidebar-primary: #166534;
+		--sidebar-primary-foreground: #ffffff;
+		--sidebar-accent: oklch(0.967 0.001 286.375);
+		--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+		--sidebar-border: oklch(0.92 0.004 286.32);
+		--sidebar-ring: #166534;
+		--brand: #166534;
+		--brand-fill: #166534;
+		--brand-foreground: #ffffff;
+		/* palette:light:end */
+	}
+
+	.dark {
+		color-scheme: dark;
+		--success-ink: oklch(0.82 0.17 148);
+		--warning-ink: oklch(0.85 0.14 82);
+		--info-ink: oklch(0.79 0.13 238);
+		--destructive-ink: oklch(0.75 0.17 25);
+		--elevation-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
+		--elevation-2: 0 2px 8px rgb(0 0 0 / 0.5), 0 20px 60px rgb(0 0 0 / 0.55);
+		--shell-ambient:
+			radial-gradient(
+				1240px 720px at 6% -14%,
+				color-mix(in oklab, var(--brand-fill) 17%, transparent),
+				transparent 58%
+			),
+			radial-gradient(
+				1000px 780px at 110% 0%,
+				color-mix(in oklab, var(--info) 10%, transparent),
+				transparent 62%
+			),
+			radial-gradient(
+				900px 620px at 86% 110%,
+				color-mix(in oklab, var(--accent) 12%, transparent),
+				transparent 64%
+			),
+			radial-gradient(
+				700px 460px at 34% 118%,
+				color-mix(in oklab, var(--brand-fill) 7%, transparent),
+				transparent 66%
+			),
+			var(--background);
+		--destructive-foreground: oklch(0.985 0 0);
+		--success: oklch(0.78 0.18 145);
+		--success-foreground: oklch(0.141 0.005 285.823);
+		--warning: oklch(0.82 0.16 80);
+		--warning-foreground: oklch(0.141 0.005 285.823);
+		--info: oklch(0.75 0.15 235);
+		--info-foreground: oklch(0.141 0.005 285.823);
+		--shadow-ambient: rgba(0, 0, 0, 0.32);
+		--overlay: oklch(0 0 0 / 0.6);
+		/* palette:dark:start — generated by scripts/generate-theme-palette.ts */
+		--background: #09090b;
+		--foreground: #fafafa;
+		--card: #18181b;
+		--card-foreground: #fafafa;
+		--popover: oklch(0.21 0.006 285.885);
+		--popover-foreground: oklch(0.985 0 0);
+		--primary: #b8ff51;
+		--primary-foreground: #18181b;
+		--secondary: oklch(0.274 0.006 286.033);
+		--secondary-foreground: oklch(0.985 0 0);
+		--muted: oklch(0.274 0.006 286.033);
+		--muted-foreground: #a1a1aa;
+		--accent: oklch(0.274 0.006 286.033);
+		--accent-foreground: oklch(0.985 0 0);
+		--destructive: oklch(0.704 0.191 22.216);
+		--border: oklch(1 0 0 / 10%);
+		--input: oklch(1 0 0 / 15%);
+		--ring: #b8ff51;
+		--highlight: #b8ff51;
+		--highlight-foreground: #090c11;
+		--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);
+		--sidebar: oklch(0.21 0.006 285.885);
+		--sidebar-foreground: oklch(0.985 0 0);
+		--sidebar-primary: #b8ff51;
+		--sidebar-primary-foreground: #18181b;
+		--sidebar-accent: oklch(0.274 0.006 286.033);
+		--sidebar-accent-foreground: oklch(0.985 0 0);
+		--sidebar-border: oklch(1 0 0 / 10%);
+		--sidebar-ring: #b8ff51;
+		--brand: #b8ff51;
+		--brand-fill: #b8ff51;
+		--brand-foreground: #18181b;
+		/* palette:dark:end */
+	}
+
+	:root[data-mode='dark'] {
+		color-scheme: dark;
+	}
+
+	/*
+ * CSP-safe first paint for system/absent preferences. Explicit SSR light and
+ * dark modes carry data-mode and therefore never enter this fallback.
+ */
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-mode]):not(.light):not(.dark) {
+			color-scheme: dark;
+			--success-ink: oklch(0.82 0.17 148);
+			--warning-ink: oklch(0.85 0.14 82);
+			--info-ink: oklch(0.79 0.13 238);
+			--destructive-ink: oklch(0.75 0.17 25);
+			--elevation-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
+			--elevation-2: 0 2px 8px rgb(0 0 0 / 0.5), 0 20px 60px rgb(0 0 0 / 0.55);
+			--shell-ambient:
+				radial-gradient(
+					1240px 720px at 6% -14%,
+					color-mix(in oklab, var(--brand-fill) 17%, transparent),
+					transparent 58%
+				),
+				radial-gradient(
+					1000px 780px at 110% 0%,
+					color-mix(in oklab, var(--info) 10%, transparent),
+					transparent 62%
+				),
+				radial-gradient(
+					900px 620px at 86% 110%,
+					color-mix(in oklab, var(--accent) 12%, transparent),
+					transparent 64%
+				),
+				radial-gradient(
+					700px 460px at 34% 118%,
+					color-mix(in oklab, var(--brand-fill) 7%, transparent),
+					transparent 66%
+				),
+				var(--background);
+			--destructive-foreground: oklch(0.985 0 0);
+			--success: oklch(0.78 0.18 145);
+			--success-foreground: oklch(0.141 0.005 285.823);
+			--warning: oklch(0.82 0.16 80);
+			--warning-foreground: oklch(0.141 0.005 285.823);
+			--info: oklch(0.75 0.15 235);
+			--info-foreground: oklch(0.141 0.005 285.823);
+			--shadow-ambient: rgba(0, 0, 0, 0.32);
+			/* palette:system-dark:start — generated by scripts/generate-theme-palette.ts */
+			--background: #09090b;
+			--foreground: #fafafa;
+			--card: #18181b;
+			--card-foreground: #fafafa;
+			--popover: oklch(0.21 0.006 285.885);
+			--popover-foreground: oklch(0.985 0 0);
+			--primary: #b8ff51;
+			--primary-foreground: #18181b;
+			--secondary: oklch(0.274 0.006 286.033);
+			--secondary-foreground: oklch(0.985 0 0);
+			--muted: oklch(0.274 0.006 286.033);
+			--muted-foreground: #a1a1aa;
+			--accent: oklch(0.274 0.006 286.033);
+			--accent-foreground: oklch(0.985 0 0);
+			--destructive: oklch(0.704 0.191 22.216);
+			--border: oklch(1 0 0 / 10%);
+			--input: oklch(1 0 0 / 15%);
+			--ring: #b8ff51;
+			--highlight: #b8ff51;
+			--highlight-foreground: #090c11;
+			--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);
+			--sidebar: oklch(0.21 0.006 285.885);
+			--sidebar-foreground: oklch(0.985 0 0);
+			--sidebar-primary: #b8ff51;
+			--sidebar-primary-foreground: #18181b;
+			--sidebar-accent: oklch(0.274 0.006 286.033);
+			--sidebar-accent-foreground: oklch(0.985 0 0);
+			--sidebar-border: oklch(1 0 0 / 10%);
+			--sidebar-ring: #b8ff51;
+			--brand: #b8ff51;
+			--brand-fill: #b8ff51;
+			--brand-foreground: #18181b;
+			/* palette:system-dark:end */
+		}
+	}
+}
+
+@theme inline {
+	/* Foundations bridge — brand + status inks + elevation + type ramp */
+	--color-brand: var(--brand);
+	--color-brand-fill: var(--brand-fill);
+	--color-brand-foreground: var(--brand-foreground);
+	--color-overlay: var(--overlay);
+	--color-success-ink: var(--success-ink);
+	--color-warning-ink: var(--warning-ink);
+	--color-info-ink: var(--info-ink);
+	--color-destructive-ink: var(--destructive-ink);
+	--shadow-elevation-1: var(--elevation-1);
+	--shadow-elevation-2: var(--elevation-2);
+	--text-large-title: 1.75rem;
+	--text-large-title--line-height: 2.125rem;
+	--text-large-title--font-weight: 700;
+	--text-large-title--letter-spacing: -0.021em;
+	--text-title: 1.375rem;
+	--text-title--line-height: 1.625rem;
+	--text-title--font-weight: 600;
+	--text-title--letter-spacing: -0.017em;
+	--text-headline: 0.9375rem;
+	--text-headline--line-height: 1.25rem;
+	--text-headline--font-weight: 600;
+	--text-callout: 0.8125rem;
+	--text-callout--line-height: 1.125rem;
+	--text-footnote: 0.75rem;
+	--text-footnote--line-height: 1rem;
+	--text-caption: 0.6875rem;
+	--text-caption--line-height: 0.8125rem;
+	--text-caption--font-weight: 600;
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
+	--color-info: var(--info);
+	--color-info-foreground: var(--info-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-highlight: var(--highlight);
+	--color-highlight-foreground: var(--highlight-foreground);
+}
+
+@layer base {
+	::selection {
+		background-color: var(--highlight, var(--ring, #15803d));
+		color: var(--highlight-foreground, #ffffff);
+	}
+	.dark ::selection {
+		background-color: var(--highlight, var(--ring, #b8ff51));
+		color: var(--highlight-foreground, #090c11);
+	}
+	* {
+		border-color: var(--border);
+	}
+	*:focus-visible {
+		outline-color: var(--ring);
+		outline-width: 2px;
+		outline-offset: 2px;
+	}
+	html {
+		min-height: 100%;
+		overflow-x: hidden;
+	}
+	body {
+		background-color: var(--background);
+		color: var(--foreground);
+		font-family: var(--vibes-font-sans);
+		min-height: 100%;
+		overflow-x: hidden;
+	}
+}
+
+/* Accessibility sits after Tailwind utilities in the declared layer order so
+ * touch targets and iOS zoom protection win without `!important` or inline
+ * component styles. Switch, Checkbox, and Radio keep compact visual controls
+ * and expose their 44px hit area through component-owned pseudo-elements. */
+@layer accessibility {
+	@media (max-width: 767px) {
+		html {
+			-webkit-text-size-adjust: 100%;
+			-webkit-tap-highlight-color: transparent;
+		}
+		:where(
+			button:not([data-slot='switch'], [data-slot='checkbox'], [data-slot='radio-group-item']),
+			[role='button'],
+			input,
+			select,
+			textarea
+		) {
+			min-height: 44px;
+		}
+		:where(
+			input,
+			textarea,
+			select,
+			[role='combobox'],
+			[data-slot='select-trigger'],
+			[data-slot='input'],
+			[data-slot='textarea']
+		) {
+			font-size: 16px;
+		}
+	}
+}
+
+@layer components {
+	.vibes-shell {
+		margin-left: auto;
+		margin-right: auto;
+		display: grid;
+		min-height: 100vh;
+		max-width: 80rem;
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+		gap: 1.5rem;
+		padding: 1.5rem 1rem;
+	}
+	@media (min-width: 1024px) {
+		.vibes-shell {
+			grid-template-columns: 280px minmax(0, 1fr);
+		}
+	}
+	.vibes-sidebar {
+		background-color: color-mix(in oklab, var(--card) 80%, transparent);
+		position: sticky;
+		top: 1rem;
+		height: fit-content;
+		border-radius: 1.75rem;
+		border: 1px solid var(--border);
+		padding: 1.25rem;
+		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+		backdrop-filter: blur(8px);
+	}
+	.vibes-panel {
+		background-color: color-mix(in oklab, var(--card) 75%, transparent);
+		border-radius: 1.75rem;
+		border: 1px solid var(--border);
+		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+		backdrop-filter: blur(8px);
+	}
+	.vibes-nav-link {
+		display: block;
+		border-radius: 1rem;
+		border: 1px solid transparent;
+		padding: 0.75rem;
+		transition:
+			color var(--motion-response) var(--ease-settle),
+			background-color var(--motion-response) var(--ease-settle);
+	}
+	.vibes-nav-link:hover {
+		background-color: var(--accent);
+		color: var(--accent-foreground);
+	}
+	.vibes-nav-link[data-active='true'] {
+		background-color: var(--accent);
+		border-color: var(--border);
+	}
+}
+
+@layer components {
+	/*
+	 * Shell chrome material (appshell polish pass). The shells stamp
+	 * data-shell-chrome on their root; the ambient ground paints there and the
+	 * navigation chrome goes translucent over it — but only where the platform
+	 * can afford it. Solid fallbacks are the dependable path, exactly like
+	 * glass.css.
+	 */
+	/*
+	 * Perception of depth while scrolling: the scrollport drives a scroll
+	 * timeline; the toolbar's hairline deepens over the first 64px of scroll.
+	 * Pure progressive enhancement (@supports animation-timeline).
+	 */
+	@supports (animation-timeline: --x) {
+		[data-shell-chrome] {
+			timeline-scope: --shell-scroll;
+		}
+		[data-shell-chrome] #main-content {
+			scroll-timeline: --shell-scroll block;
+		}
+		[data-shell-chrome] [data-slot='sidebar-inset'] > header,
+		[data-shell-chrome='canvas'] > header {
+			animation: vibes-toolbar-elevate linear both;
+			animation-timeline: --shell-scroll;
+			animation-range: 0 64px;
+		}
+	}
+
+	/* Motion: one orchestrated entrance + tactile chrome. Budget tokens only. */
+	@media (prefers-reduced-motion: no-preference) {
+		[data-shell-chrome] [data-sidebar-menu] > *:nth-child(-n + 4) {
+			animation: vibes-nav-in var(--motion-orient) var(--ease-arrive) backwards;
+		}
+		[data-shell-chrome] [data-sidebar-menu] > *:nth-child(2) {
+			animation-delay: 20ms;
+		}
+		[data-shell-chrome] [data-sidebar-menu] > *:nth-child(3) {
+			animation-delay: 35ms;
+		}
+		[data-shell-chrome] [data-sidebar-menu] > *:nth-child(4) {
+			animation-delay: 50ms;
+		}
+		[data-slot='app-switcher-rail'] a {
+			transition:
+				transform var(--motion-response) var(--ease-settle),
+				background-color var(--motion-response) var(--ease-settle);
+		}
+		[data-slot='app-switcher-rail'] a:hover {
+			transform: translateY(-1px);
+		}
+		[data-slot='app-switcher-rail'] a:active {
+			transform: scale(0.96);
+		}
+		[data-slot='app-menu-chip']:active {
+			transform: scale(0.985);
+		}
+	}
+}
+
+/*
+ * Shell chrome material. Lives in the `shell` layer (declared above utilities at
+ * the top of this file) because every rule here has to beat a hardcoded utility
+ * on a kit primitive: SidebarInset's `bg-background`, sidebar-inner's
+ * `bg-sidebar`. Those opaque panels cover the whole viewport, so without this
+ * the --shell-ambient mesh and the aurora canvas paint behind a solid rectangle
+ * and the shell reads flat no matter how rich the gradients get.
+ *
+ * Solid fallbacks first, translucency only under @supports — same contract as
+ * glass.css. Apps still tune the result through --sidebar / --background /
+ * --brand-fill, which these rules consume rather than replace.
+ */
+@layer shell {
+	[data-shell-chrome] {
+		background: var(--shell-ambient);
+	}
+
+	/*
+	 * Suite + Canvas: the content column rides directly on the ambient ground.
+	 * The header is already glass (bg-background/60 + backdrop-blur) — it only
+	 * reads as glass once there is something behind it.
+	 */
+	[data-shell-chrome='suite'] [data-slot='sidebar-inset'] {
+		background: transparent;
+	}
+
+	/*
+	 * Focus: the content sheet is a genuine floating pane — a translucent card
+	 * lit from above, with the ambient drifting behind it.
+	 */
+	[data-shell-chrome='focus'] [data-slot='sidebar-inset'] {
+		border: 0;
+		/* Top-light as a background LAYER, not a ::before. An absolutely
+		   positioned pseudo-element paints above non-positioned in-flow content,
+		   so a decorative wash there would tint the header text it sits over —
+		   faint, but colour on top of content is the wrong side of the paint. */
+		background:
+			radial-gradient(
+				620px 220px at 28% 0%,
+				color-mix(in oklab, var(--brand-fill) 7%, transparent),
+				transparent 72%
+			),
+			color-mix(in oklab, var(--background) 88%, transparent);
+		background-repeat: no-repeat;
+		box-shadow:
+			inset 0 0 0 0.5px color-mix(in oklab, var(--border) 75%, transparent),
+			inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
+			0 18px 50px color-mix(in oklab, var(--shadow-ambient) 60%, transparent);
+	}
+
+	/* The navigation column carries a whisper of brand light behind its header. */
+	[data-shell-chrome] [data-slot='sidebar-inner'] {
+		background:
+			radial-gradient(
+				440px 260px at 40% -6%,
+				color-mix(in oklab, var(--brand-fill) 8%, transparent),
+				transparent 72%
+			),
+			var(--sidebar);
+	}
+	[data-slot='app-switcher-rail'][data-orientation='vertical'] {
+		background:
+			radial-gradient(
+				160px 320px at 50% 0%,
+				color-mix(in oklab, var(--brand-fill) 10%, transparent),
+				transparent 74%
+			),
+			var(--sidebar);
+	}
+
+	/*
+	 * Specular seam: the divider between navigation and content catches brand
+	 * light at the top and fades to a plain hairline — the one detail that makes
+	 * the columns read as separate panes of the same material rather than two
+	 * flat blocks. Suite only; the Focus sidebar floats and owns no seam.
+	 */
+	/* NOT the rail: it ships `fixed`, and a position declaration in this layer
+	   would beat that utility and drop it back into flow. Fixed already makes it
+	   a containing block, so its ::after anchors correctly without one. */
+	[data-shell-chrome='suite'] [data-slot='sidebar-inner'] {
+		position: relative;
+	}
+	[data-shell-chrome='suite'] [data-slot='sidebar-inner']::after,
+	[data-slot='app-switcher-rail'][data-orientation='vertical']::after {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: 0;
+		width: 1px;
+		pointer-events: none;
+		background: linear-gradient(
+			180deg,
+			color-mix(in oklab, var(--brand) 30%, transparent) 0%,
+			color-mix(in oklab, var(--border) 85%, transparent) 24%,
+			color-mix(in oklab, var(--border) 45%, transparent) 100%
+		);
+	}
+
+	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+		[data-shell-chrome] [data-slot='sidebar-inner'] {
+			background:
+				radial-gradient(
+					440px 260px at 40% -6%,
+					color-mix(in oklab, var(--brand-fill) 10%, transparent),
+					transparent 72%
+				),
+				color-mix(in oklab, var(--sidebar) 70%, transparent);
+			-webkit-backdrop-filter: blur(24px) saturate(1.35);
+			backdrop-filter: blur(24px) saturate(1.35);
+		}
+		[data-slot='app-switcher-rail'][data-orientation='vertical'] {
+			background:
+				radial-gradient(
+					160px 320px at 50% 0%,
+					color-mix(in oklab, var(--brand-fill) 12%, transparent),
+					transparent 74%
+				),
+				color-mix(in oklab, var(--sidebar) 62%, transparent);
+			-webkit-backdrop-filter: blur(24px) saturate(1.35);
+			backdrop-filter: blur(24px) saturate(1.35);
+		}
+		[data-shell-chrome='focus'] [data-slot='sidebar-inset'] {
+			background:
+				radial-gradient(
+					620px 220px at 28% 0%,
+					color-mix(in oklab, var(--brand-fill) 9%, transparent),
+					transparent 72%
+				),
+				color-mix(in oklab, var(--background) 76%, transparent);
+			-webkit-backdrop-filter: blur(28px) saturate(1.18);
+			backdrop-filter: blur(28px) saturate(1.18);
+		}
+	}
+
+	/* Mobile: halve the chrome blur — big backdrop filters are the single
+	   costliest paint on phone GPUs, and the sheet overlay reads fine lighter. */
+	@media (max-width: 767px) {
+		[data-shell-chrome] [data-slot='sidebar-inner'],
+		[data-slot='app-switcher-rail'][data-orientation='vertical'],
+		[data-shell-chrome='focus'] [data-slot='sidebar-inset'] {
+			-webkit-backdrop-filter: blur(12px) saturate(1.2);
+			backdrop-filter: blur(12px) saturate(1.2);
+		}
+	}
+
+	/* Accessibility floor: no translucency, no mesh — plain solid surfaces. */
+	@media (prefers-reduced-transparency: reduce) {
+		[data-shell-chrome] [data-slot='sidebar-inner'],
+		[data-slot='app-switcher-rail'][data-orientation='vertical'] {
+			background: var(--sidebar);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		[data-shell-chrome='focus'] [data-slot='sidebar-inset'] {
+			background: var(--background);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		[data-shell-chrome] {
+			background: var(--background);
+		}
+	}
+
+	/* Print: drop the mesh and the blur, keep the token ground. NOT `white` —
+	   in dark mode that would put near-white text on a white page. */
+	@media print {
+		[data-shell-chrome],
+		[data-shell-chrome] [data-slot='sidebar-inset'] {
+			background: var(--background);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		[data-shell-chrome] [data-slot='sidebar-inner'] {
+			background: var(--sidebar);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+}
+
+@keyframes vibes-toolbar-elevate {
+	to {
+		box-shadow:
+			inset 0 -0.5px 0 var(--border),
+			0 6px 20px color-mix(in oklab, var(--shadow-ambient) 60%, transparent);
+	}
+}
+
+@keyframes vibes-nav-in {
+	from {
+		opacity: 0;
+		transform: translateX(-4px);
+	}
+}
+
+/* Sidebar navigation enhancements */
+[data-sidebar] [data-separator] {
+	margin: 0.25rem 0;
+	opacity: 0.3;
+}
+
+[data-sidebar-group-label] > button {
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.375rem;
+	transition: all var(--motion-orient) var(--ease-settle);
+}
+
+[data-sidebar-group-label] > button:hover {
+	/* was hsl(var(--sidebar-accent) / 0.5) — invalid around oklch values, silently dead */
+	background-color: color-mix(in oklab, var(--sidebar-accent) 50%, transparent);
+}
+
+[data-sidebar-menu] {
+	padding: 0 0.25rem;
+}
+
+[data-collapsible-content] {
+	overflow: hidden;
+	transition: all var(--motion-orient) var(--ease-out);
+}
+
+[data-collapsible-trigger] {
+	cursor: pointer;
+	user-select: none;
+}
+
+/*
+ * Removed dead rules (appshell-apple-design pass): the data-active override and
+ * first-item border used hsl() around oklch tokens (invalid, never rendered),
+ * and `.group-data-[…]` is a Tailwind utility name pasted as a CSS selector.
+ * Active styling lives in sidebarMenuButtonVariants.
+ */
+.sidebar-overview-link {
+	font-weight: 500;
+}
+
+[data-sidebar-menu] > :first-child [data-sidebar-menu-button] {
+	margin-bottom: 0.25rem;
+}
+
+@layer utilities {
+	.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;
+	}
+	.not-sr-only {
+		position: static;
+		width: auto;
+		height: auto;
+		padding: 0;
+		margin: 0;
+		overflow: visible;
+		clip: auto;
+		white-space: normal;
+	}
+}