/* 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 {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: var(--fs-lg);
	color: var(--c-text-inverse);
	text-decoration: none;
}

/* Sized to the account button opposite, not to the name inside it — the two things
   the eye compares across that bar are the two blocks, and matching the text within
   one of them left the logo visibly the shorter of the pair.

   `--tap-min` is that button's height: it has `min-height: var(--tap-min)` and no
   content tall enough to exceed it.

   `width: auto` with the height fixed: the viewBox is very wide — the red mark, the
   wordmark and the tagline under it — so height is the only sensible axis to size on. */
.site-header__brand img {
	height: var(--tap-min);
	width: auto;
	display: block;
}

.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 ------------------------------------------------------- */

/* --- 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);
	}
}