/* Entry pages (SU1-01): sign-in, the status pages and the account pages; the home page has its
	own sheet, home.css (SU-3). Colours are the :root tokens of app.css only. */

/* Sign in (SU2-16, SU-3): one column at the form width (main "narrow login"), a little above
	the middle of the band; a link home above the h1, notices as wide as the fields, then who
	issues accounts and the guest way in. */
@media (min-width: 48rem) {
	main.login { padding-top: 0; padding-bottom: var(--space-16); justify-content: center; }
}
.entry-page {
	display: grid;
	gap: var(--gap-section);
	justify-items: start;
	max-width: var(--w-reading);
}

.entry-page > :is(.notice, .error),
.login-form {
	justify-self: stretch;
}

.login-more { display: grid; gap: var(--space-3); justify-self: stretch; font-size: var(--text-md);
	color: var(--muted); text-wrap: balance; }

/* Status pages (SU2-16, spec 4.9; AI1-12): the h1, one sentence and one button, left-aligned
	at the reading width; no code line above the h1. The sentence is the page's lead, plain on
	the page: the h1 already says what went wrong, so no box and no mark beside it. */
.status-page {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
	width: 100%;
	max-width: var(--w-reading);
}

.status-page > .error {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fg);
	font-size: var(--text-lead);
}

.status-page > .error::before { content: none; }

.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-self: stretch;
	margin: var(--space-2) 0 0; }

/* On a phone the page's one filled button and the guest button are full width at the large
	touch height. */
@media (max-width: 47.99rem) {
	.login-form button[type="submit"],
	.login-more a.button,
	.status-actions a.button {
		width: 100%;
		height: var(--control-h-lg);
	}
}

/* Account pages (SU2-10, spec 3.3, 3.4): the facts or the one panel form, then the actions.
	A refusal puts its line between the label and the field, and the summary links to it. */
.account-page { display: grid; gap: var(--gap-section); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.password-input { display: flex; align-items: center; gap: var(--space-2); }
.password-input input { flex: 1; min-width: 0; }

@media (max-width: 47.99rem) {
	.account-actions button[type="submit"] {
		height: var(--control-h-lg);
	}
}