/* Mobile-first. The phone layout is the default; wider screens are the exception,
   added at 48rem. */

body {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.page {
	flex: 1;
	width: 100%;
	max-width: var(--width-content);
	margin-inline: auto;
	padding: var(--s-4);
}

.page--wide {
	max-width: var(--width-wide);
}

.page--narrow {
	max-width: 26rem;
}

/* --- Site header ------------------------------------------------------- */

.site-header {
	background: var(--c-primary);
	color: var(--c-text-inverse);
	padding: var(--s-3) var(--s-4);
}

.site-header__inner {
	max-width: var(--width-wide);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.site-header__brand {
	font-weight: 600;
	font-size: var(--fs-lg);
	color: var(--c-text-inverse);
	text-decoration: none;
}

.site-header__user {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--fs-sm);
}

.site-header a {
	color: var(--c-text-inverse);
}

/* --- Dashboard navigation ---------------------------------------------- */

.site-nav {
	background: var(--c-primary-hover);
	padding: 0 var(--s-4);
}

.site-nav__inner {
	max-width: var(--width-wide);
	margin-inline: auto;
	gap: var(--s-4);
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--c-text-inverse);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-sm);
}

.site-nav a:hover {
	color: var(--c-text-inverse);
	text-decoration: underline;
}

/* --- Site footer ------------------------------------------------------- */

.site-footer {
	padding: var(--s-4);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* --- Utilities --------------------------------------------------------- */

.stack > * + * {
	margin-top: var(--s-4);
}

.stack-sm > * + * {
	margin-top: var(--s-2);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}

.mt-4 {
	margin-top: var(--s-4);
}

.mt-5 {
	margin-top: var(--s-5);
}

.skip-link {
	position: absolute;
	top: var(--s-2);
	left: var(--s-2);
	z-index: 100;
	padding: var(--s-2) var(--s-3);
	background: var(--c-surface);
	color: var(--c-text);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.skip-link:not(:focus):not(:focus-within) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (min-width: 48rem) {
	.page {
		padding: var(--s-6) var(--s-5);
	}
}