@layer layout {
	html,
	body {
		height: 100%;
	}

	.app {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.container {
		width: 100%;
		max-width: var(--container-width);
		margin-inline: auto;
		padding-inline: var(--space-5);
	}

	.app-bar {
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		background: var(--color-surface);
		border-block-end: 1px solid var(--color-border);
	}

	.app-bar-title {
		font-weight: 900;
		font-size: var(--fs-md);
		color: var(--color-primary-dark);
	}

	.app-views {
		flex: 1;
	}

	.view {
		padding-block: var(--space-6) var(--space-8);
	}
}