/*
 * The sign-in sheet.
 *
 * Every colour comes from the theme's own tokens, so a niche that changes its
 * palette changes this too without touching a line here.
 */

.prewebsite-login {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	padding: 20px;
}

.prewebsite-login[hidden] {
	display: none;
}

.prewebsite-login__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, 0.45);
}

.prewebsite-login__card {
	position: relative;
	inline-size: 100%;
	max-inline-size: 420px;
	max-block-size: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px 28px 28px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: var(--prewebsite-radius-card, 16px);
	background: var(--prewebsite-color-surface);
	box-shadow: 0 20px 60px rgba(12, 12, 12, 0.18);
}

/* The reference puts the way out on the far edge, level with the mark. */
.prewebsite-login__back {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-end: 24px;
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--prewebsite-color-text);
	cursor: pointer;
	transition: background var(--prewebsite-transition, 0.2s ease);
}

.prewebsite-login__back:hover {
	background: var(--prewebsite-color-tint-3);
}

.prewebsite-login__mark {
	display: grid;
	place-items: center;
	min-block-size: 40px;
	margin-block-end: 32px;
	padding-inline: 40px;
}

.prewebsite-login__mark img {
	max-block-size: 40px;
	inline-size: auto;
	object-fit: contain;
}

.prewebsite-login__wordmark {
	font-size: 20px;
	font-weight: 700;
	color: var(--prewebsite-color-primary);
}

.prewebsite-login__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--prewebsite-color-text);
	text-align: start;
}

.prewebsite-login__lead {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 2;
	color: var(--prewebsite-color-text-50);
	text-align: start;
}

.prewebsite-login__input {
	inline-size: 100%;
	block-size: 52px;
	margin-block-end: 16px;
	padding-inline: 16px;
	border: 1px solid var(--prewebsite-color-trim);
	border-radius: var(--prewebsite-radius-card, 12px);
	background: var(--prewebsite-color-surface);
	font-family: inherit;
	font-size: 15px;
	color: var(--prewebsite-color-text);
	transition: border-color var(--prewebsite-transition, 0.2s ease);
}

.prewebsite-login__input::placeholder {
	color: var(--prewebsite-color-text-30);
}

.prewebsite-login__input:focus {
	border-color: var(--prewebsite-color-primary);
	outline: none;
}

.prewebsite-login__input--code {
	font-size: 22px;
	letter-spacing: 10px;
	text-align: center;
}

.prewebsite-login__submit {
	position: relative;
	inline-size: 100%;
	block-size: 52px;
	border: 0;
	border-radius: var(--prewebsite-radius-card, 12px);
	background: var(--prewebsite-color-primary);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF;
	cursor: pointer;
	transition: filter var(--prewebsite-transition, 0.2s ease);
}

.prewebsite-login__submit:hover:not([disabled]) {
	filter: brightness(0.94);
}

.prewebsite-login__submit[disabled] {
	cursor: default;
	opacity: 0.75;
}

/* Three dots while a request is out, so nobody presses twice. */
.prewebsite-login__submit[aria-busy="true"] > * {
	visibility: hidden;
}

.prewebsite-login__submit[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 8px;
	block-size: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	color: #FFFFFF;
	box-shadow: -14px 0 0 -1px, 0 0 0 -4px, 14px 0 0 -4px;
	animation: prewebsite-login-dots 1.05s infinite ease-in-out;
}

@keyframes prewebsite-login-dots {
	0%,
	100% { box-shadow: -14px 0 0 -1px, 0 0 0 -4px, 14px 0 0 -4px; }
	33% { box-shadow: -14px 0 0 -4px, 0 0 0 -1px, 14px 0 0 -4px; }
	66% { box-shadow: -14px 0 0 -4px, 0 0 0 -4px, 14px 0 0 -1px; }
}

.prewebsite-login__terms {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 2;
	color: var(--prewebsite-color-text-50);
	text-align: center;
}

.prewebsite-login__terms a {
	color: var(--prewebsite-color-primary);
}

.prewebsite-login__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	font-size: 13px;
}

.prewebsite-login__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--prewebsite-color-primary);
	cursor: pointer;
}

.prewebsite-login__link[hidden] {
	display: none;
}

.prewebsite-login__timer {
	font-family: var(--prewebsite-font-latin);
	font-size: 13px;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-login__error {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--prewebsite-radius-card, 12px);
	background: var(--prewebsite-color-tint-3);
	font-size: 13px;
	line-height: 1.9;
	color: var(--prewebsite-color-primary);
}

.prewebsite-login__error[hidden] {
	display: none;
}

.prewebsite-login__step[hidden] {
	display: none;
}

/* the account page, when the sheet is the only way in */

.prewebsite-login__standalone {
	display: grid;
	justify-items: center;
	gap: 16px;
	max-inline-size: 420px;
	margin-inline: auto;
	padding-block: 40px;
	text-align: center;
}

.prewebsite-login__standalone-text {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--prewebsite-color-text-50);
}

.prewebsite-login__standalone .prewebsite-login__submit {
	max-inline-size: 260px;
}

@media (max-width: 480px) {
	.prewebsite-login__card {
		padding: 20px 20px 24px;
	}

	.prewebsite-login__title {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prewebsite-login__submit[aria-busy="true"]::after {
		animation-duration: 2.5s;
	}
}