@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/inter";
@import "./styles/syntax.css";

@custom-variant dark (&:is(.dark *));
@custom-variant touch (@media (pointer: coarse));
@custom-variant notouch (@media (hover: hover));

/* Squircle corners look visually tighter at equal radii, so the utility
   bumps the --r-* scale on the element. The scale tokens are declared
   `inherits: false` below, so the bump applies only to the squircled
   element itself — non-squircled children fall back to the round baseline.
   The bump is gated on @supports because, without `corner-shape: squircle`,
   the larger radii render as plain rounded corners that look way too round.
   Keeping the bumps inside `@utility` ensures `@apply squircle` (e.g. on
   `.utils:panel`) inlines them too — `:root` baselines ensure non-bumped
   elements still resolve `var(--r-*)` correctly. */
@utility squircle {
	corner-shape: squircle;

	@supports (corner-shape: squircle) {
		--r-sm: 0.625rem;
		--r-md: 0.75rem;
		--r-lg: 1rem;
		--r-xl: 1.25rem;
		--r-2xl: 1.5rem;
		--r-3xl: 1.75rem;
		--r-4xl: 2.25rem;
	}
}

@property --r-sm {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.25rem;
}
@property --r-md {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.375rem;
}
@property --r-lg {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.4375rem;
}
@property --r-xl {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.5625rem;
}
@property --r-2xl {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.6875rem;
}
@property --r-3xl {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.8125rem;
}
@property --r-4xl {
	syntax: "<length>";
	inherits: false;
	initial-value: 1rem;
}

@utility shadow-surface {
	box-shadow: var(--shadow-surface);
}

@utility shadow-composer {
	box-shadow: var(--shadow-composer);
}

@utility shadow-composer-tray {
	box-shadow: var(--shadow-composer-tray);
}

@utility shadow-popover {
	box-shadow: var(--shadow-popover);
}

@utility shadow-modal {
	box-shadow: var(--shadow-modal);
}

@utility shadow-button-primary {
	box-shadow: var(--shadow-button-primary);
}

@utility shadow-button-neutral {
	box-shadow: var(--shadow-button-neutral);
}

@keyframes repo-handoff-sweep {
	100% {
		transform: translateX(200%);
	}
}

@keyframes text-shimmer {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: 0% 0;
	}
}

@utility text-shimmer {
	--text-shimmer-base: var(--color-muted-foreground);
	--text-shimmer-highlight: var(--color-foreground);

	animation: text-shimmer 1.6s linear infinite;
	background-image: linear-gradient(
		120deg,
		var(--text-shimmer-base) 0%,
		var(--text-shimmer-base) 44%,
		var(--text-shimmer-highlight) 50%,
		var(--text-shimmer-base) 56%,
		var(--text-shimmer-base) 100%
	);
	background-size: 300% 100%;
	background-clip: text;
	color: transparent;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
		background-image: none;
		color: var(--text-shimmer-base);
	}
}

.marquee-text[data-overflow="true"] {
	transform: translateX(0);
	transition-property: transform, max-width;
	transition-duration: 0s, 0s;
	transition-timing-function: linear, linear;
	transition-delay: 0s, 0s;
	will-change: transform;
}

.marquee-text-clip[data-active="true"],
.group\/marquee:focus .marquee-text-clip[data-overflow="true"],
.group\/marquee:focus-within .marquee-text-clip[data-overflow="true"] {
	mask-image: linear-gradient(
		to right,
		transparent,
		black 1rem,
		black calc(100% - 1rem),
		transparent
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 1rem,
		black calc(100% - 1rem),
		transparent
	);
}

.marquee-text-clip[data-active="true"] .marquee-text[data-overflow="true"],
.group\/marquee:focus .marquee-text[data-overflow="true"],
.group\/marquee:focus-within .marquee-text[data-overflow="true"] {
	max-width: var(--marquee-width, none);
	transform: translateX(var(--marquee-shift, 0));
	transition-duration:
		var(--marquee-duration, 1.2s),
		0s;
	transition-delay: 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
	.marquee-text-clip[data-active="true"],
	.group\/marquee:focus .marquee-text-clip[data-overflow="true"],
	.group\/marquee:focus-within .marquee-text-clip[data-overflow="true"] {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.marquee-text-clip[data-active="true"] .marquee-text[data-overflow="true"],
	.group\/marquee:focus .marquee-text[data-overflow="true"],
	.group\/marquee:focus-within .marquee-text[data-overflow="true"] {
		max-width: 100%;
		transform: none;
		transition: none;
	}
}

@utility selected-surface {
	border-color: var(--edge);
	--tw-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
	box-shadow:
		var(--tw-inset-shadow, 0 0 #0000),
		var(--tw-inset-ring-shadow, 0 0 #0000),
		var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);

	&:is(.dark *) {
		border-color: rgb(0 0 0 / 0.2);
		--tw-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 0 0 1px var(--edge);
	}
}

@utility panel-inset {
	padding: 1px;

	> * {
		@apply squircle;
		border-radius: calc(var(--r-3xl) - 2px);
		overflow: hidden;
	}
}

@utility scrollbar-muted {
	@apply scrollbar-thin scrollbar-track-transparent
		scrollbar-thumb-[color-mix(in_oklch,var(--muted-foreground),transparent_65%)];

	&:hover {
		@apply scrollbar-thumb-[color-mix(in_oklch,var(--muted-foreground),transparent_40%)];
	}
}

@utility scrollbar-hidden {
	-ms-overflow-style: none;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
		block-size: 0;
		inline-size: 0;
	}
}

* {
	@apply scrollbar-thin;
}

.ace-toaster [data-sonner-toast][data-styled="true"] {
	background: var(--popover);
	border-color: transparent;
	border-radius: var(--r-toast);
	box-shadow: var(--shadow-popover);
	color: var(--popover-foreground);
}

.ace-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
	background: var(--popover);
	border-color: transparent;
	box-shadow: var(--shadow-surface);
	color: var(--popover-foreground);
}

@source "../**/*.tsx";

:root {
	--r-sm: 0.25rem;
	--r-md: 0.375rem;
	--r-lg: 0.4375rem;
	--r-xl: 0.5625rem;
	--r-2xl: 0.6875rem;
	--r-3xl: 0.8125rem;
	--r-4xl: 1rem;
	--r-window: 20px;
	--r-toolbar: calc(var(--r-md) + 2px);
	--r-popover: calc(var(--r-md) + 4px);
	--r-toast: calc(var(--r-md) + 8px);
	/* The timeline lays out text in fixed pixels at this width (LANE in timeline/layout.ts). */
	--main-content-max: 832px;

	@supports (corner-shape: squircle) {
		/* Concentric squircles need a smaller delta than R_inner + linear_gap,
		   because squircles extend further at the corner than circles do. */
		--r-window: 39px;
	}

	--background: oklch(0.94 0.01 93);
	--foreground: oklch(0.153 0.006 107.1);
	--card: oklch(0.97 0.006 90);
	--card-foreground: oklch(0.153 0.006 107.1);
	--popover: oklch(0.98 0.004 90);
	--popover-foreground: oklch(0.153 0.006 107.1);
	--primary: oklch(0.539 0.106 136);
	--primary-hover: oklch(0.58 0.105 136);
	--primary-foreground: oklch(0.986 0.031 120.757);
	--secondary: oklch(0.96 0.006 90);
	--secondary-foreground: oklch(0.21 0.006 285.885);
	--muted: oklch(0.91 0.012 93);
	--muted-foreground: oklch(0.55 0.025 107.3);
	--accent: oklch(0.539 0.106 136);
	--accent-text: oklch(0.46 0.13 136);
	--accent-foreground: oklch(0.986 0.031 120.757);
	--destructive: oklch(0.547 0.185 27.325);
	--success: oklch(0.554 0.178 152);
	--warning: oklch(0.72 0.17 65);
	--warning-strong: oklch(0.58 0.18 55);
	--merged: oklch(0.556 0.138 294.6);
	--border: oklch(0 0 0 / 0.10);
	--input: oklch(0 0 0 / 0.10);
	--ring: oklch(0.737 0.021 106.9);
	--chart-1: oklch(0.871 0.15 154.449);
	--chart-2: oklch(0.723 0.219 149.579);
	--chart-3: oklch(0.627 0.194 149.214);
	--chart-4: oklch(0.527 0.154 150.069);
	--chart-5: oklch(0.448 0.119 151.328);
	--sidebar: oklch(0.90 0.006 100);
	--sidebar-foreground: oklch(0.153 0.006 107.1);
	--sidebar-primary: oklch(0.58 0.13 144.1);
	--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
	--sidebar-accent: oklch(0.96 0.005 106.5);
	--sidebar-accent-foreground: oklch(0.228 0.013 107.4);
	--sidebar-border: oklch(0 0 0 / 0.08);
	--sidebar-ring: oklch(0.737 0.021 106.9);

	/* custom (WIP) */
	--edge: oklch(0 0 0 / 0.18);
	--badge: #a87253;
	--shell-tint: 227 224 219;
	--shell-tint-alpha: 0.65;
	--highlight: oklch(0.670 0.097 132.7);
	--selection: oklch(0.72 0.12 144 / 0.3);
	--code: var(--card);
	--agent-build: oklch(0.57 0.14 145);
	--agent-plan: oklch(0.57 0.14 250);
	--agent-autopilot: oklch(0.57 0.14 305);
	--agent-1: oklch(0.58 0.15 25);
	--agent-2: oklch(0.62 0.14 65);
	--agent-3: oklch(0.57 0.12 190);
	--agent-4: oklch(0.58 0.14 220);
	--agent-5: oklch(0.57 0.14 285);
	--agent-6: oklch(0.59 0.15 335);

	--shadow-surface:
		0 0 0 1px rgb(0 0 0 / 0.08),
		0 1px 2px -1px rgb(0 0 0 / 0.08),
		0 2px 4px rgb(0 0 0 / 0.06);
	--shadow-composer:
		0 0 0 1px rgb(0 0 0 / 0.08),
		0 1px 2px -1px rgb(0 0 0 / 0.08),
		0 2px 4px rgb(0 0 0 / 0.06),
		0 -4px 8px -2px rgb(0 0 0 / 0.06);
	--shadow-composer-tray: 0 0 0 1px rgb(0 0 0 / 0.06), 0 -2px 4px rgb(0 0 0 / 0.04);
	--shadow-popover:
		0 0 0 1px rgb(0 0 0 / 0.10),
		0 2px 4px -2px rgb(0 0 0 / 0.12),
		0 8px 16px -10px rgb(0 0 0 / 0.16);
	--shadow-modal:
		0 0 0 1px rgb(0 0 0 / 0.10),
		0 10px 20px -10px rgb(0 0 0 / 0.18),
		0 24px 48px -24px rgb(0 0 0 / 0.24);
	--shadow-button-primary:
		0 0 0 0.5px oklch(0.33 0.12 136 / 0.76),
		0 1px 1px -1px oklch(0.33 0.12 136 / 0.48),
		0 1px 2px oklch(0.33 0.12 136 / 0.30);
	--shadow-button-neutral:
		0 0 0 0.5px rgb(0 0 0 / 0.10),
		0 1px 1px -1px rgb(0 0 0 / 0.14),
		0 1px 2px rgb(0 0 0 / 0.085);
}

.dark {
	--background: oklch(0.222 0.001 119);
	--foreground: oklch(0.988 0.003 106.5);
	--card: oklch(0.21 0.005 93);
	--card-foreground: oklch(0.988 0.003 106.5);
	--popover: oklch(0.24 0.005 93);
	--popover-foreground: oklch(0.988 0.003 106.5);
	--primary: oklch(0.539 0.106 136);
	--primary-hover: oklch(0.58 0.105 136);
	--primary-foreground: oklch(0.986 0.031 120.757);
	--secondary: oklch(0.30 0.008 93);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.27 0.008 93);
	--muted-foreground: oklch(0.65 0.015 107);
	--accent: oklch(0.65 0.14 136);
	--accent-text: oklch(0.72 0.16 136);
	--accent-foreground: oklch(0.986 0.031 120.757);
	--destructive: oklch(0.704 0.191 22.216);
	--success: oklch(0.696 0.17 152);
	--warning: oklch(0.78 0.15 65);
	--warning-strong: oklch(0.68 0.18 55);
	--merged: oklch(0.623 0.127 294.6);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(0.30 0.008 93);
	--ring: oklch(0.58 0.031 107.3);
	--chart-1: oklch(0.871 0.15 154.449);
	--chart-2: oklch(0.723 0.219 149.579);
	--chart-3: oklch(0.627 0.194 149.214);
	--chart-4: oklch(0.527 0.154 150.069);
	--chart-5: oklch(0.448 0.119 151.328);
	--sidebar: oklch(0.207 0 0);
	--sidebar-foreground: oklch(0.988 0.003 106.5);
	--sidebar-primary: oklch(0.768 0.233 130.85);
	--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
	--sidebar-accent: oklch(0.25 0.008 93);
	--sidebar-accent-foreground: oklch(0.988 0.003 106.5);
	--sidebar-border: oklch(1 0 0 / 10%);
	--sidebar-ring: oklch(0.58 0.031 107.3);

	/* custom */
	--edge: oklch(1 0 0 / 0.10);
	--badge: #ac7556;
	--shell-tint: 30 30 30;
	--shell-tint-alpha: 0.70;
	--highlight: oklch(0.670 0.097 132.7);
	--selection: oklch(0.65 0.15 136 / 0.35);
	--code: var(--sidebar);
	--agent-build: oklch(0.72 0.14 145);
	--agent-plan: oklch(0.72 0.14 250);
	--agent-autopilot: oklch(0.72 0.14 305);
	--agent-1: oklch(0.72 0.15 25);
	--agent-2: oklch(0.76 0.14 65);
	--agent-3: oklch(0.72 0.12 190);
	--agent-4: oklch(0.72 0.14 220);
	--agent-5: oklch(0.72 0.14 285);
	--agent-6: oklch(0.73 0.15 335);

	--shadow-surface: 0 0 0 1px rgb(255 255 255 / 0.1);
	--shadow-composer:
		0 0 0 1px rgb(0 0 0 / 0.2),
		0 1px 2px rgb(0 0 0 / 0.08),
		0 -4px 8px -2px rgb(0 0 0 / 0.12),
		inset 0 0 0 1px var(--edge);
	--shadow-composer-tray: 0 0 0 1px rgb(0 0 0 / 0.2);
	--shadow-popover: 0 0 0 1px rgb(255 255 255 / 0.13);
	--shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.12), 0 18px 36px -18px rgb(0 0 0 / 0.55);
	--shadow-button-primary:
		0 0 0 0.5px oklch(0.78 0.13 136 / 0.22),
		0 1px 1px -1px rgb(0 0 0 / 0.24),
		0 1px 2px rgb(0 0 0 / 0.18);
	--shadow-button-neutral:
		0 0 0 0.5px rgb(255 255 255 / 0.14),
		0 1px 1px -1px rgb(0 0 0 / 0.24),
		0 1px 2px rgb(0 0 0 / 0.18);
}

@theme inline {
	--font-sans: "Inter Variable", sans-serif;
	--text-2xs: 0.6875rem;
	--text-display-xs: 1.375rem;
	--text-display-xs--line-height: 1.18;
	--text-display-xs--letter-spacing: 0em;
	--text-display-xs--font-weight: 600;
	--text-display-sm: 1.625rem;
	--text-display-sm--line-height: 1.16;
	--text-display-sm--letter-spacing: 0em;
	--text-display-sm--font-weight: 600;
	--text-display: 1.75rem;
	--text-display--line-height: 1.14;
	--text-display--letter-spacing: 0em;
	--text-display--font-weight: 600;
	--text-display-lg: 2rem;
	--text-display-lg--line-height: 1.12;
	--text-display-lg--letter-spacing: 0em;
	--text-display-lg--font-weight: 600;
	--color-sidebar-ring: var(--sidebar-ring);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar: var(--sidebar);
	--color-chart-5: var(--chart-5);
	--color-chart-4: var(--chart-4);
	--color-chart-3: var(--chart-3);
	--color-chart-2: var(--chart-2);
	--color-chart-1: var(--chart-1);
	--color-ring: var(--ring);
	--color-input: var(--input);
	--color-border: var(--border);
	--color-destructive: var(--destructive);
	--color-success: var(--success);
	--color-warning: var(--warning);
	--color-warning-strong: var(--warning-strong);
	--color-merged: var(--merged);
	--color-highlight: var(--highlight);
	--color-accent-foreground: var(--accent-foreground);
	--color-accent-text: var(--accent-text);
	--color-accent: var(--accent);
	--color-muted-foreground: var(--muted-foreground);
	--color-muted: var(--muted);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-secondary: var(--secondary);
	--color-primary-foreground: var(--primary-foreground);
	--color-primary-hover: var(--primary-hover);
	--color-primary: var(--primary);
	--color-popover-foreground: var(--popover-foreground);
	--color-popover: var(--popover);
	--color-card-foreground: var(--card-foreground);
	--color-card: var(--card);
	--color-foreground: var(--foreground);
	--color-background: var(--background);
	--radius-sm: var(--r-sm);
	--radius-md: var(--r-md);
	--radius-lg: var(--r-lg);
	--radius-xl: var(--r-xl);
	--radius-2xl: var(--r-2xl);
	--radius-3xl: var(--r-3xl);
	--radius-4xl: var(--r-4xl);

	/* custom */
	--color-edge: var(--edge);
	--color-badge: var(--badge);
	--color-selection: var(--selection);
	--color-code: var(--code);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-spring: linear(
		0,
		0.319,
		0.589,
		0.809,
		0.964,
		1.072,
		1.133,
		1.122,
		1.074,
		1.027,
		0.995,
		0.979,
		0.981,
		0.993,
		1.002,
		1
	);
	--shadow-window:
		0 1px 2px rgb(0 0 0 / 0.1),
		0 4px 8px rgb(0 0 0 / 0.1),
		0 8px 16px rgb(0 0 0 / 0.1),
		0 16px 32px rgb(0 0 0 / 0.1),
		0 32px 80px rgb(0 0 0 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Suppress all transitions during resize/theme/font-size changes.
   Toggle via JS: document.documentElement.classList.add("utils:no-motion") */
.utils\:no-motion,
.utils\:no-motion *,
.utils\:no-motion *::before,
.utils\:no-motion *::after {
	transition-duration: 0s !important;
}
@layer base {
	* {
		@apply border-border outline-ring/50;
		-webkit-tap-highlight-color: transparent;
	}

	body {
		@apply bg-background text-foreground;
		font-optical-sizing: auto;
		accent-color: AccentColor;
	}

	html {
		@apply bg-background font-sans;
		color-scheme: light;
		font-size: clamp(12px, var(--font-size, 1rem), 20px);
	}

	html.dark {
		color-scheme: dark;
	}

	img {
		-webkit-user-drag: none;
	}

	/* Prevent side-effects when dragging */
	:is(*) {
		user-select: none;
		-webkit-user-drag: none;
		-webkit-touch-callout: none !important;
		-webkit-app-region: no-drag;
		-webkit-tap-highlight-color: transparent;
	}

	::selection {
		background: var(--color-selection);
	}
}

@keyframes glow-loop {
	to {
		offset-distance: 100%;
	}
}

.composer\:glow-border {
	@apply squircle;
	position: relative;
	border-radius: var(--r-xl);
	border: 2px solid transparent;
	mask:
		linear-gradient(transparent, transparent),
		linear-gradient(#fff, #fff);
	mask-clip: padding-box, border-box;
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
	pointer-events: none;

	&::before,
	&::after {
		content: "";
		block-size: 150px;
		aspect-ratio: 1;
		background: radial-gradient(circle at center, currentColor 20%, transparent 60%);
		offset-path: rect(0 100% 100% 0 round 14px);
		position: absolute;
		animation: glow-loop 3s linear infinite;
	}

	&::before {
		animation-delay: -1.5s;
	}
}

@property --mask-r {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --fade-start {
	syntax: "<color>";
	inherits: false;
	initial-value: #000;
}

@property --fade-end {
	syntax: "<color>";
	inherits: false;
	initial-value: #000;
}

@property --fade {
	syntax: "<length>";
	inherits: false;
	initial-value: 1.5rem;
}

@keyframes scroll-fade {
	0% {
		--fade-start: #000;
		--fade-end: transparent;
	}
	3%, 97% {
		--fade-start: transparent;
		--fade-end: transparent;
	}
	100% {
		--fade-start: transparent;
		--fade-end: #000;
	}
}

/*
 * Performance: inherits:false stops these vars from propagating to every
 * descendant. Changes only trigger style recalc on the shell itself,
 * not the entire subtree. Descendants use inlined literals instead of
 * var() references so every layout variable can opt out of inheritance.
 */
@property --panel-nav-expanded {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --panel-nav-collapsed {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --panel-left-width {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --panel-right-width {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --_panel-nav {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --_panel-left {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --_panel-right {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@layer components {
	.layout\:shell {
		/* Settings */
		--panel-nav-expanded: 9.375rem;
		--panel-nav-collapsed: calc(2rem + 0.5rem);
		--panel-left-width: 12.5rem;
		--panel-right-width: 16rem;
		/* Computed */
		--_panel-nav: var(--panel-nav-collapsed);
		--_panel-left: var(--panel-left-width);
		--_panel-right: 0rem;

		display: grid;
		min-block-size: 100%;
		contain: strict;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		row-gap: 8px;
		grid-template-areas:
			"main"
			"nav";
		transition: grid-template-columns 200ms var(--ease-in-out);

		&[data-resizing] {
			transition: none;
		}

		@media (width >= 40rem) {
			row-gap: 0;
			grid-template-columns: var(--_panel-nav) minmax(0, 1fr);
			grid-template-rows: auto 1fr auto;
			grid-template-areas:
				"nav main"
				"nav main"
				"nav main";

			&:has(.layout\:left) {
				grid-template-columns: var(--_panel-nav) minmax(0, var(--_panel-left)) minmax(0, 1fr);
				grid-template-areas:
					"nav left main"
					"nav left main"
					"nav left main";
			}

			[data-left="collapsed"] & {
				--_panel-left: 0rem;
			}
		}

		@media (width >= 48rem) {
			--_panel-nav: var(--panel-nav-expanded);

			[data-nav="collapsed"] & {
				--_panel-nav: var(--panel-nav-collapsed);
			}
		}

		@media (width >= 64rem) {
			&:has(.layout\:left) {
				grid-template-columns: var(--_panel-nav) minmax(0, var(--_panel-left)) minmax(0, 1fr);
				grid-template-areas:
					"nav left main"
					"nav left main"
					"nav left main";
			}

			&:has(.layout\:right) {
				grid-template-columns: var(--_panel-nav) minmax(0, 1fr) minmax(0, var(--_panel-right));
				grid-template-areas:
					"nav main right"
					"nav main right"
					"nav main right";
			}

			&:has(.layout\:left):has(.layout\:right) {
				grid-template-columns:
					var(--_panel-nav) minmax(0, var(--_panel-left)) minmax(0, 1fr) minmax(
						0,
						var(--_panel-right)
					);
				grid-template-areas:
					"nav left main right"
					"nav left main right"
					"nav left main right";
			}

			[data-right="expanded"] & {
				--_panel-right: var(--panel-right-width);
			}
		}

		.layout\:main {
			grid-area: main;
			grid-row: 1;
			position: relative;
			contain: strict;
			transition: scale 200ms var(--ease-in-out);

			/* overlay when left or right sidebar is expanded on mobile */
			&::after {
				@apply squircle;
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 17px;
				background: rgb(var(--shell-tint) / 0.5);
				backdrop-filter: blur(1px);
				opacity: 0;
				z-index: 1;
				pointer-events: none;
				transition: opacity 200ms var(--ease-in-out);
			}

			@media (width < 40rem) {
				[data-left="expanded"] & {
					scale: 0.975;
					&::after {
						opacity: 1;
					}
				}
			}

			@media (width < 64rem) {
				[data-right="expanded"] & {
					scale: 0.975;
					&::after {
						opacity: 1;
					}
				}
			}

			@media (width >= 40rem) {
				grid-row: 1 / -1;
			}

			@media (width >= 64rem) {
				z-index: 1;
				scale: 1;
				transition: none;
				&::after {
					display: none;
				}
			}
		}

		/* shared overlay panel (mobile-first) */
		:is(.layout\:left, .layout\:right) {
			@apply squircle;
			grid-area: main;
			grid-row: 1;
			z-index: 2;
			contain: strict;

			max-inline-size: 360px;
			inline-size: calc(100% - 16px);

			visibility: hidden;
			transition: translate 200ms var(--ease-in-out), visibility 0s 200ms;

			border-radius: var(--r-3xl);
			border: 1px solid var(--edge);
			background: var(--background);
			box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);

			.dark & {
				border-color: rgb(0 0 0 / 0.2);
				box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 0 0 1px var(--edge);
			}

			@media (width >= 40rem) {
				grid-row: 1 / -1;
			}
		}

		.layout\:left {
			translate: calc(-100% - 8px) 0;

			[data-left="expanded"] & {
				visibility: visible;
				translate: 0 0;
				transition: translate 200ms var(--ease-in-out), visibility 0s;
			}

			@media (width >= 40rem) {
				grid-area: left;
				grid-row: 1 / -1;
				z-index: 0;
				contain: layout;
				max-inline-size: none;
				inline-size: auto;
				visibility: visible;
				translate: none;
				transition: none;
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: none;

				.dark & {
					box-shadow: none;
				}

				.layout\:left-inner {
					min-inline-size: 12.5rem;
				}
			}
		}
		.layout\:right {
			justify-self: end;
			translate: calc(100% + 8px) 0;

			[data-right="expanded"] & {
				visibility: visible;
				translate: 0 0;
				transition: translate 200ms var(--ease-in-out), visibility 0s;
			}

			@media (width >= 64rem) {
				grid-area: right;
				grid-row: 1 / -1;
				z-index: 0;
				contain: layout paint;
				max-inline-size: none;
				min-inline-size: 0;
				inline-size: 100%;
				visibility: visible;
				translate: none;
				transition: none;
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: none;
				overflow: hidden;
				display: flex;
				justify-content: flex-end;

				.dark & {
					box-shadow: none;
				}

				.layout\:right-inner {
					min-inline-size: 16rem;
				}
			}
		}
	}

	[data-appearance="web"]:has(> .layout\:shell) {
		background: var(--sidebar);
	}

	[data-appearance="native"]:has(> .layout\:shell) {
		background: rgb(var(--shell-tint) / var(--shell-tint-alpha, 0.65));
	}

	.layout\:nav {
		grid-area: nav;
		min-inline-size: 0;
		overflow: hidden;
		contain: layout paint;

		@media (width >= 40rem) {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: subgrid;
		}

		[data-appearance="native"] & {
			@media (width >= 40rem) {
				padding-block-start: 1.75rem;
			}
			pointer-events: none;

			> * {
				pointer-events: auto;
			}
		}

		@media (width < 40rem) {
			@apply scrollbar-none;

			--fade: 2rem;

			display: flex;
			justify-content: safe center;
			overflow-y: hidden;
			overscroll-behavior-x: none;
			padding-block: 2px;
			margin-block: -2px;

			> header {
				display: none;
			}
		}
	}
}

@utility scroll-fade {
	--fade: 1.5rem;

	overflow-y: auto;
	-webkit-mask-image: linear-gradient(
		to bottom,
		var(--fade-start),
		#000 var(--fade),
		#000 calc(100% - var(--fade)),
		var(--fade-end)
	);
	mask-image: linear-gradient(
		to bottom,
		var(--fade-start),
		#000 var(--fade),
		#000 calc(100% - var(--fade)),
		var(--fade-end)
	);
	animation: scroll-fade linear;
	animation-timeline: scroll(self y);

	&[data-axis="x"] {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-mask-image: linear-gradient(
			to right,
			var(--fade-start),
			#000 var(--fade),
			#000 calc(100% - var(--fade)),
			var(--fade-end)
		);
		mask-image: linear-gradient(
			to right,
			var(--fade-start),
			#000 var(--fade),
			#000 calc(100% - var(--fade)),
			var(--fade-end)
		);
		animation-timeline: scroll(self x);
	}
}

@layer utilities {
	.utils\:max-width {
		inline-size: min(100%, var(--main-content-max));
		margin-inline: auto;
	}

	.utils\:panel {
		@apply squircle;
		border-radius: var(--r-3xl);
		border: 1px solid var(--edge);
		background: var(--background);
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);

		.dark & {
			border-color: rgb(0 0 0 / 0.2);
			box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 0 0 1px var(--edge);
		}
	}
}