body {
	min-block-size: 100dvh;
	display: grid;
	place-items: center;
	padding: var(--global-size-unit-16);
	box-sizing: border-box;
	background: var(--theme-surface-page);
}

.login {
	box-sizing: border-box;
	inline-size: min(100%, 26rem);
	padding: var(--global-size-unit-32);
}

.login .step {
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-16);
}

.login p {
	margin: 0;
	color: var(--theme-text-muted);
	font-size: var(--global-font-size-14);
}

.login form {
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-16);
}

.login .field {
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-4);
	font-size: var(--global-font-size-14);
	font-weight: var(--global-font-weight-bold);
}

.login input {
	padding: var(--global-size-unit-12) var(--global-size-unit-16);
	border-radius: var(--global-radius-8);
	border: var(--global-size-unit-1) solid var(--theme-border-default);
	background: var(--theme-surface-card);
	font-weight: var(--global-font-weight-regular);
}

.login input:focus-visible {
	outline-offset: 0;
	border-color: var(--theme-focus-ring);
}

.login .step[hidden] {
	display: none;
}

.login .button {
	justify-content: center;
	padding: var(--global-size-unit-12) var(--global-size-unit-16);
	font-size: var(--global-font-size-16);
}

.login .note {
	font-size: var(--global-font-size-12);
}

.login .message {
	color: var(--theme-status-danger-text);
}

.login .message[hidden] {
	display: none;
}