.auth-page {
	--auth-bg-overlay: color-mix(in srgb, var(--surface-0) 72%, transparent);
	--auth-bg-position: center center;
	--auth-info-bg: color-mix(in srgb, var(--brand-100) 34%, var(--surface-0));
	--auth-info-border: color-mix(in srgb, var(--brand-300) 30%, var(--border-200));
	--auth-info-text: var(--text-700);
	--auth-badge-bg: color-mix(in srgb, var(--brand-100) 72%, var(--surface-0));
	--auth-badge-border: color-mix(in srgb, var(--brand-300) 48%, var(--border-200));
	--auth-badge-text: var(--brand-700);
	--auth-success-badge-bg: color-mix(in srgb, var(--brand-700) 82%, var(--text-900));
	--auth-success-badge-border: color-mix(in srgb, var(--brand-600) 65%, var(--border-200));
	--auth-success-badge-text: var(--surface-0);
	--auth-success-text: color-mix(in srgb, var(--brand-700) 82%, var(--text-700));
	--auth-overlay-scrim: color-mix(in srgb, var(--text-900) 18%, transparent);
	background-image:
		linear-gradient(var(--auth-bg-overlay), var(--auth-bg-overlay)),
		url("/images/auth/auth-bg-people.png");
	background-position: center center, var(--auth-bg-position);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
}

html[data-theme="dark"] .auth-page {
	--auth-bg-overlay: color-mix(in srgb, var(--surface-0) 81%, transparent);
	--auth-info-bg: color-mix(in srgb, var(--brand-600) 10%, var(--surface-100));
	--auth-info-border: color-mix(in srgb, var(--brand-400) 28%, var(--border-200));
	--auth-info-text: var(--text-700);
	--auth-badge-bg: color-mix(in srgb, var(--brand-600) 18%, var(--surface-150));
	--auth-badge-border: color-mix(in srgb, var(--brand-400) 36%, var(--border-200));
	--auth-badge-text: var(--text-900);
	--auth-success-badge-bg: color-mix(in srgb, var(--brand-600) 38%, var(--surface-200));
	--auth-success-badge-border: color-mix(in srgb, var(--brand-300) 42%, var(--border-400));
	--auth-success-badge-text: var(--text-900);
	--auth-success-text: var(--text-700);
	--auth-overlay-scrim: color-mix(in srgb, var(--on-dark-text) 54%, transparent);
}

.auth-page .visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.auth-page .adminuiux-header {
	background: transparent;
	box-shadow: none;
}

.auth-page .navbar {
	background: transparent;
	box-shadow: none;
	position: static;
}

.auth-page .container-fluid {
	justify-content: center;
}

.auth-page .header-actions,
.auth-page .company-tagline {
	display: none;
}

.auth-page .navbar-brand {
	margin: 1rem auto 0;
}

.auth-shell {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: 30rem;
	min-height: calc(100vh - 4.75rem);
	padding: 1.5rem 1rem 3rem;
}

.auth-card {
	background: color-mix(in srgb, var(--surface-0) 94%, transparent);
	border: 1px solid var(--border-200);
	border-radius: 1.75rem;
	box-shadow: var(--shadow-md);
	overflow: hidden;
	padding: 1.5rem;
	position: relative;
	width: min(100%, 28rem);
}

.auth-card::before {
	background: linear-gradient(90deg, var(--brand-solid), var(--accent-solid));
	border-radius: 0 0 999rem 999rem;
	content: "";
	height: 0.375rem;
	inset: 0 1.5rem auto;
	position: absolute;
}

.auth-card-login {
	width: min(100%, 26rem);
}

.auth-login-page .auth-shell,
.auth-reset-page .auth-shell {
	max-width: 26.875rem;
	min-height: 100svh;
	padding: clamp(2rem, 5vh, 3.5rem) 1rem clamp(1.75rem, 4vh, 2.5rem);
}

.auth-join-page .auth-shell {
	max-width: 26.875rem;
	min-height: 100svh;
	padding: clamp(2rem, 5vh, 3.5rem) 1rem clamp(1.75rem, 4vh, 2.5rem);
}

.auth-login-page .auth-card,
.auth-reset-page .auth-card {
	border-radius: 1.75rem;
	max-width: 26.875rem;
	padding: 1.25rem 1.25rem 1.25rem;
	width: 100%;
}

.auth-join-page .auth-card {
	border-radius: 1.75rem;
	max-width: 26.875rem;
	padding: 1.25rem 1.25rem 1.25rem;
	width: 100%;
}

.auth-login-page .auth-card::before,
.auth-reset-page .auth-card::before {
	display: none;
}

.auth-join-page .auth-card::before {
	display: none;
}

.auth-login-header {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 0 1rem;
}

.auth-logo-mark {
	align-items: center;
	background: var(--brand);
	border-radius: 0.75rem;
	color: var(--on-brand);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.auth-logo-text {
	color: var(--text-600);
	font-size: 1rem;
	font-weight: 600;
}

.auth-login-page .auth-brand {
	margin-bottom: 1.25rem;
}

.auth-login-page .auth-title {
	font-size: 2rem;
	line-height: 1.1;
}

.auth-login-page .auth-subtitle {
	color: var(--text-700);
	font-weight: 800;
	margin-top: 0.25rem;
}

.auth-login-page .auth-form,
.auth-reset-page .auth-form {
	gap: 0.875rem;
}

.auth-join-page .auth-form {
	gap: 0.875rem;
}

.auth-login-page .auth-field,
.auth-reset-page .auth-field {
	gap: 0.5rem;
}

.auth-join-page .auth-field {
	gap: 0.5rem;
}

.auth-login-page .auth-field input,
.auth-reset-page .auth-field input {
	min-height: 3.125rem;
	padding-block: 0.75rem;
}

.auth-join-page .auth-field input {
	min-height: 3.125rem;
	padding-block: 0.75rem;
}

.auth-brand {
	margin: 0 0 1.25rem;
	text-align: center;
}

.auth-title {
	color: var(--text-600);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.auth-subtitle {
	color: var(--text-500);
	font-size: 0.9375rem;
	margin: 0.5rem 0 0;
}

.auth-age-note {
	background: var(--surface-50);
	border: 1px solid var(--border-200);
	border-radius: 1rem;
	color: var(--text-600);
	font-size: 0.8rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	padding: 0.75rem 0.875rem;
	text-align: center;
}

.auth-age-confirm-field {
	display: grid;
	gap: 0.45rem;
}

.auth-age-confirm {
	align-items: flex-start;
	background: var(--surface-50);
	border: 1px solid var(--border-200);
	border-radius: 1rem;
	color: var(--text-700);
	cursor: pointer;
	display: grid;
	font-size: 0.8125rem;
	gap: 0.55rem;
	grid-template-columns: auto minmax(0, 1fr);
	line-height: 1.45;
	padding: 0.72rem 0.82rem;
}

.auth-age-confirm input {
	accent-color: var(--lt-brand-accent);
	margin-top: 0.16rem;
}

.auth-card .flash {
	margin-bottom: 1rem;
}

.auth-page .lt-ui-modal-backdrop {
	background: color-mix(in srgb, var(--text-900) 34%, transparent);
}

.auth-page .lt-ui-modal-dialog {
	border-color: var(--border-200);
	box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--text-900) 18%, transparent);
}

.auth-page .lt-ui-modal-dialog h2 {
	color: var(--text-900);
	font-weight: 800;
}

.auth-page .lt-ui-modal-dialog p {
	color: var(--text-600);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.auth-page .lt-ui-modal-actions .button,
.auth-page .lt-ui-modal-actions button {
	background: var(--brand);
	border: 0;
	border-radius: 999rem;
	color: var(--on-brand);
	min-width: 6.5rem;
}

.auth-verify-page .auth-card .flash.ok {
	background: var(--auth-info-bg);
	border: 1px solid var(--auth-info-border);
	color: var(--auth-info-text);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.auth-status-modal {
	align-items: center;
	background: var(--auth-overlay-scrim);
	backdrop-filter: blur(0.25rem);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.25rem;
	position: fixed;
	z-index: 1050;
}

.auth-status-modal[hidden] {
	display: none;
}

.auth-status-dialog {
	align-items: center;
	background: color-mix(in srgb, var(--surface-0) 96%, transparent);
	border: 1px solid var(--border-200);
	border-radius: 1rem;
	box-shadow: var(--shadow-md);
	color: var(--text-700);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 800;
	gap: 0.75rem;
	justify-content: center;
	line-height: 1.4;
	padding: 0.875rem 1rem;
	text-align: center;
}

.auth-status-spinner {
	border: 0.125rem solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 50%;
	border-top-color: currentColor;
	flex: 0 0 auto;
	height: 1.125rem;
	width: 1.125rem;
	animation: auth-spin 0.75s linear infinite;
}

.auth-form {
	display: grid;
	gap: 1rem;
}

.auth-field {
	display: grid;
	gap: 0.4375rem;
}

.auth-field label,
.auth-code-label {
	color: var(--text-800);
	font-size: 0.875rem;
	font-weight: 800;
	margin: 0;
}

.auth-field input,
.auth-code-input {
	background: var(--surface-0);
	border: 1px solid var(--border-200);
	border-radius: 1rem;
	color: var(--text-600);
	min-height: 3.125rem;
	padding: 0.75rem 0.875rem;
	transition: var(--btn-transition);
	width: 100%;
}

.auth-field input:focus,
.auth-code-input:focus {
	border-color: var(--brand-400);
	box-shadow: var(--ring-shadow);
	outline: 0;
}

.auth-field input::placeholder {
	color: var(--input-placeholder);
}

.auth-password-field {
	position: relative;
}

.auth-password-field input {
	padding-right: 4.5rem;
}

.auth-password-toggle {
	background: var(--surface-100);
	border: 1px solid var(--border-200);
	border-radius: 999rem;
	color: var(--text-700);
	font-size: 0.8125rem;
	font-weight: 800;
	min-height: 2rem;
	padding: 0 0.75rem;
	position: absolute;
	right: 0.625rem;
	top: 50%;
	transform: translateY(-50%);
}

.auth-page .auth-password-field input {
	padding-right: 3.25rem;
}

.auth-page .auth-password-toggle {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	color: var(--text-600);
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	line-height: 1;
	min-height: 0;
	padding: 0;
	right: 0.625rem;
	width: 2.25rem;
}

.auth-page .auth-password-toggle:focus-visible {
	box-shadow: var(--ring-shadow);
	outline: 0;
}

.auth-password-toggle .bi {
	color: currentColor;
	display: inline-block;
	flex: 0 0 auto;
	height: 1.125rem;
	line-height: 1;
	width: 1.125rem;
}

.auth-password-toggle .bi::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 100%;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 100%;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.auth-password-toggle .bi-eye::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.1 13.1 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.1 13.1 0 0 1 14.828 8a13.1 13.1 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.1 13.1 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.1 13.1 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.1 13.1 0 0 1 14.828 8a13.1 13.1 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.1 13.1 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
}

.auth-password-toggle .bi-eye-slash::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.1 13.1 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.1 13.1 0 0 1 14.828 8a13.1 13.1 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.1 13.1 0 0 1 1.172 8z'/%3E%3Cpath d='M2 1.25 14.75 14l-.75.75L1.25 2z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.1 13.1 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.1 13.1 0 0 1 14.828 8a13.1 13.1 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.1 13.1 0 0 1 1.172 8z'/%3E%3Cpath d='M2 1.25 14.75 14l-.75.75L1.25 2z'/%3E%3C/svg%3E");
}

.auth-password-helper {
	color: var(--text-500);
	font-size: 0.75rem;
	line-height: 1.4;
	margin: 0.125rem 0 0;
}

.auth-password-helper.is-danger {
	color: var(--danger-solid);
}

.auth-remember-option {
	align-items: center;
	color: var(--text-700);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 800;
	gap: 0.5rem;
	line-height: 1.3;
	margin: -0.125rem 0 0;
}

.auth-remember-option input {
	accent-color: var(--brand-solid);
	flex: 0 0 auto;
	height: 1rem;
	width: 1rem;
}

.auth-rule-list {
	display: grid;
	gap: 0.375rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: -0.25rem 0 0;
	padding: 0;
}

.auth-rule-list li {
	align-items: center;
	background: var(--surface-50);
	border: 1px solid var(--border-200);
	border-radius: 999rem;
	color: var(--text-500);
	display: flex;
	font-size: 0.75rem;
	font-weight: 800;
	gap: 0.375rem;
	min-height: 2rem;
	padding: 0.375rem 0.625rem;
}

.auth-rule-list li::before {
	background: var(--border-300);
	border-radius: 50%;
	content: "";
	flex: 0 0 0.375rem;
	height: 0.375rem;
	width: 0.375rem;
}

.auth-rule-list li.is-met {
	background: color-mix(in srgb, var(--success-solid) 12%, var(--surface-0));
	border-color: color-mix(in srgb, var(--success-solid) 35%, var(--border-200));
	color: var(--success-solid);
}

.auth-rule-list li.is-met::before {
	background: var(--success-solid);
}

.auth-actions {
	margin-top: 0.125rem;
}

.auth-login-page .auth-actions {
	margin-top: 0.125rem;
}

.auth-reset-page .auth-actions {
	margin-top: 0.125rem;
}

.auth-submit {
	align-items: center;
	background: var(--brand);
	border: 0;
	border-radius: 999rem;
	color: var(--on-brand);
	display: inline-flex;
	/*font-weight: 600;*/
	justify-content: center;
	min-height: 3.125rem;
	padding: 0 1.125rem;
	transition: var(--btn-transition);
	width: 100%;
}

.auth-submit:disabled,
.auth-inline-control button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.auth-login-page .auth-submit:disabled {
	background: var(--surface-200);
	color: var(--text-500);
	opacity: 1;
}

.auth-reset-page .auth-submit:disabled {
	background: var(--surface-200);
	color: var(--text-500);
	opacity: 1;
}

.auth-note {
	color: var(--text-500);
	font-size: 0.875rem;
	margin: 0;
	text-align: center;
}

.auth-note a {
	font-weight: 600;
}

.auth-login-links {
	display: grid;
	grid-template-columns: max-content max-content;
	justify-content: center;
	column-gap: 0.25rem;
	row-gap: 0.1875rem;
}

.auth-login-links .auth-note {
	display: contents;
	font-size: 0.725rem;
}

.auth-login-links .auth-note span {
	text-align: right;
}

.auth-login-links .auth-note a {
	text-align: left;
}

.auth-verified-mail {
	align-items: center;
	background: var(--surface-50);
	/*border: 1px solid var(--border-200);*/
	border-radius: 1rem;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.75rem 0.875rem;
}

.auth-verified-mail span {
	color: var(--text-700);
	font-size: 0.875rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.auth-verify-page .auth-verified-mail {
	background: var(--auth-info-bg);
	/*border-color: var(--auth-info-border);*/
}

.auth-complete-page .auth-verified-mail {
	background: var(--auth-info-bg);
	/*border-color: var(--auth-info-border);*/
}

.auth-verify-page .auth-verified-mail span {
	color: var(--auth-info-text);
}

.auth-complete-page .auth-verified-mail span {
	color: var(--auth-info-text);
}

.auth-verified-mail strong {
	border: 1px solid transparent;
	border-radius: 999rem;
	flex: 0 0 auto;
	font-size: 0.75rem;
	padding: 0.25rem 0.625rem;
}

.auth-verified-mail.pending strong {
	background: var(--auth-badge-bg);
	/*border-color: var(--auth-badge-border);*/
	box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--brand-600) 10%, transparent);
	color: var(--auth-badge-text);
}

.auth-verified-mail.success strong {
	background: var(--auth-success-badge-bg);
	/*border-color: var(--auth-success-badge-border);*/
	box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--brand-600) 12%, transparent);
	color: var(--auth-success-badge-text);
	font-weight: 500;
}

.auth-code-panel {
	display: grid;
	gap: 0.75rem;
}

.auth-code-grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.auth-code-input {
	aspect-ratio: 1;
	font-size: 1.25rem;
	font-weight: 600;
	min-height: 0;
	padding: 0;
	text-align: center;
}

.auth-code-panel.has-error .auth-code-input {
	border-color: var(--danger-solid);
}

.auth-code-panel.is-shaking {
	animation: auth-shake 0.42s ease;
}

.auth-code-actions,
.auth-final-actions {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
}

.auth-code-actions.is-visible,
.auth-final-actions.is-visible {
	max-height: 4.5rem;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.auth-inline-message {
	color: var(--text-500);
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0;
}

.auth-inline-message.is-success {
	color: var(--auth-success-text);
	font-weight: 800;
}

.auth-inline-message.is-danger {
	color: var(--danger-solid);
	font-weight: 800;
}

.auth-inline-control {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.auth-inline-control button {
	border-radius: 1rem;
	min-height: 3.125rem;
	white-space: nowrap;
}

.auth-complete-page [data-nickname-check]:not(:disabled) {
	background: var(--brand);
	border: 0;
	border-radius: 999rem;
	color: var(--on-brand);
	font-weight: 800;
}

.auth-nickname-row {
	gap: 0.625rem;
}

.auth-accordion-summary {
	align-items: center;
	appearance: none;
	background: var(--auth-info-bg);
	/*border: 1px solid var(--auth-info-border);*/
	border-radius: 1rem;
	color: var(--auth-info-text);
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	min-height: auto;
	padding: 0.75rem 0.875rem;
	text-align: left;
	width: 100%;
}

.auth-accordion-summary:focus-visible {
	border-color: var(--auth-badge-border);
	outline: 0;
}

.auth-accordion-summary[hidden] {
	display: none;
}

.auth-accordion-summary > span:first-child {
	color: var(--auth-info-text);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: normal;
	min-width: 0;
	overflow-wrap: anywhere;
}

.auth-nickname-summary-meta {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.5rem;
	justify-content: flex-end;
	min-width: 0;
}

.auth-nickname-summary-meta strong {
	background: var(--auth-success-badge-bg);
	/*border: 1px solid var(--auth-success-badge-border);*/
	border-radius: 999rem;
	box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--brand-600) 12%, transparent);
	color: var(--auth-success-badge-text);
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: normal;
	min-height: 0;
	padding: 0.25rem 0.625rem;
	white-space: nowrap;
}

.auth-nickname-summary-meta strong span[aria-hidden="true"] {
	display: inline-block;
	font-size: 0.6875rem;
	margin-left: 0.125rem;
}

.auth-nickname-editor {
	display: grid;
	gap: 0.5rem;
	max-height: 12rem;
	opacity: 1;
	overflow: hidden;
	transition: opacity 0.2s ease, max-height 0.2s ease, transform 0.2s ease;
}

.auth-nickname-row.is-collapsed .auth-nickname-editor {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.25rem);
}

.auth-password-section {
	display: grid;
	gap: 1rem;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease;
}

.auth-password-section.is-visible {
	max-height: 30rem;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.auth-password-editor {
	display: grid;
	gap: 1rem;
}

.auth-password-editor[hidden] {
	display: none;
}

.auth-password-summary {
	color: var(--text-500);
	font-size: 0.75rem;
	line-height: 1.45;
	margin: -0.25rem 0 0;
}

.auth-complete-page .auth-rule-list {
	display: none;
}

@keyframes auth-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-0.5rem);
	}

	40%,
	80% {
		transform: translateX(0.5rem);
	}
}

@keyframes auth-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 30rem) {
	.auth-page {
		--auth-bg-position: center top;
		background-size: cover, auto 100%;
	}

	.auth-shell {
		align-items: flex-start;
		padding: 1rem 0.875rem 2rem;
	}

	.auth-card {
		border-radius: 1.5rem;
		padding: 1.25rem;
	}

	.auth-title {
		font-size: 1.5rem;
	}

	.auth-login-page .auth-shell,
	.auth-reset-page .auth-shell {
		align-items: center;
		padding: 1.25rem 0.875rem;
	}

	.auth-join-page .auth-shell {
		align-items: center;
		padding: 1.25rem 0.875rem;
	}

	.auth-login-page .auth-card,
	.auth-reset-page .auth-card {
		border-radius: 1.5rem;
		padding: 1.125rem 1rem 1.125rem;
	}

	.auth-join-page .auth-card {
		border-radius: 1.5rem;
		padding: 1.125rem 1rem 1.125rem;
	}

	.auth-login-page .auth-login-header,
	.auth-reset-page .auth-login-header {
		margin-bottom: 0.875rem;
	}

	.auth-join-page .auth-login-header {
		margin-bottom: 0.875rem;
	}

	.auth-rule-list {
		grid-template-columns: 1fr;
	}

	.auth-inline-control {
		grid-template-columns: 1fr;
	}

	.auth-code-grid {
		gap: 0.375rem;
	}
}