@layer components {
	@scope (.app-shell) {
		:scope {
			display: grid;
			grid-template-rows: auto 1fr;
			min-block-size: 100dvh;
		}
	}

	@scope (.app-header) {
		:scope {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--gutter);
			padding-block: var(--space-3);
			padding-inline: calc(var(--gutter) * 1.4);
			border-block-end: 1px solid var(--color-border);
			background-color: var(--color-surface);
			position: sticky;
			inset-block-start: 0;
			z-index: 10;
			scroll-padding-block-start: 4rem;
		}

		.brand {
			font-weight: 700;
			font-size: 1.05rem;
			letter-spacing: -0.01em;
			text-decoration: none;
		}

		nav ul {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			list-style: none;
			margin: 0;
		}

		nav a {
			text-decoration: none;
			padding: var(--space-1) var(--space-3);
			border-radius: var(--radius);
		}

		nav a:hover {
			background-color: var(--color-surface-muted);
		}

		nav a[aria-current="page"] {
			background-color: var(--color-surface-muted);
			font-weight: 600;
		}

		.current-user {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			color: var(--color-muted);
			font-size: 0.9rem;
		}
	}

	@scope (.app-main) {
		:scope {
			padding-block: var(--space-8);
			padding-inline: calc(var(--gutter) * 1.4);
			inline-size: min(100%, 74rem);
			margin-inline: auto;
		}
	}

	@scope (.page-heading) {
		:scope {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: var(--gutter);
			margin-block-end: var(--space-8);
		}

		p {
			color: var(--color-muted);
			max-inline-size: var(--measure);
		}

		:scope.page-heading-centered {
			justify-content: center;
			text-align: center;
		}
	}

	@scope (.flash) {
		:scope {
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius);
			border: 1px solid var(--color-border);
			margin-block-end: var(--space-6);
			background-color: var(--color-surface);
		}

		:scope[role="alert"] {
			border-color: var(--color-danger);
			color: oklch(from var(--color-danger) 38% c h);
			background-color: color-mix(in oklch, var(--color-danger) 8%, var(--color-surface));
		}
	}

	@scope (.auth-wrap) {
		:scope {
			max-inline-size: 26rem;
			margin-inline: auto;
			padding-block-start: var(--space-12);
			display: grid;
			gap: var(--space-6);
		}

		h1 {
			margin-block-end: 0;
		}

		.auth-note {
			color: var(--color-muted);
		}
	}
}