@layer pages {
	.auth-page {
		display: block;
	}

	/* the auth pages carry no sidebar, so the header's fixed grid must
	   span the full viewport rather than the app shell column */
	.auth-page .form-page-header::before {
		inset-inline-start: calc((100% - 100vw) / 2);
		inline-size: 100vw;
		opacity: 0.85;
	}

	/* the divider sits well below the sheet, closing the page */
	.auth-divider {
		margin-block: 3.5rem 0;
	}

	/* the login sheet: a plain slip of paper (no red margin line) with
	   the tape hugging its top-right corner and a torn hem */
	.auth-form {
		--tape-offset: 1rem;

		padding: 1.5rem 1.25rem 1.4rem;
		background: var(--color-surface);

		/* every field reserves one error line below its input, and the
		   message is lifted out of flow into that space, so a field with
		   an error can no longer push its input off alignment */
		.form-grid > label {
			position: relative;
			padding-block-end: 1rem;
		}

		.field-error {
			position: absolute;
			inset-inline: 0;
			inset-block-end: 0;
			margin: 0;
		}
	}

	.auth-actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		grid-column: 1 / -1;
		gap: 1.4rem 1.5rem;
	}

	.auth-destinations {
		margin: 0;
		color: var(--color-text-muted);
		font-family: var(--font-sans);
		font-size: 0.85rem;

		/* links wrap as whole units onto their own row, never mid-link */
		white-space: nowrap;

		a {
			color: var(--color-brand);
			font-weight: 800;
			text-decoration: none;

			&:is(:hover, :focus-visible) {
				color: var(--color-accent);
			}
		}
	}
}