/* Uthena email sign-up pop-up (SignupPopup.php). Theme tokens only.
 *
 * Desktop: centred dialog, 480px. Below 600px: bottom sheet (thumb reach,
 * the page stays visible above it). Native <dialog> in the top layer, so
 * opening it never shifts the page. Motion: 250ms fade + 8px rise, none
 * with prefers-reduced-motion.
 */

.uthena-signup {
	box-sizing: border-box;
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: var(--space-4) var(--space-4) var(--space-3);
	overflow: auto;
	border: 1px solid var(--border-default);
	border-top: 3px solid var(--teal-500);
	border-radius: var(--uthena-radius-xl);
	background: var(--surface-raised);
	color: var(--text-body);
	box-shadow: var(--uthena-shadow-pop);
	font-family: var(--font-body);
	font-size: var(--type-body);
	line-height: var(--leading-body);
}

.uthena-signup::backdrop {
	background: var(--overlay-scrim);
}

.uthena-signup *,
.uthena-signup *::before,
.uthena-signup *::after {
	box-sizing: border-box;
}

.uthena-signup__close {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--uthena-radius-md);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--uthena-dur-hover) var(--uthena-ease), background-color var(--uthena-dur-hover) var(--uthena-ease);
}

.uthena-signup__close:hover {
	background: var(--action-ghost-hover);
	color: var(--text-strong);
}

.uthena-signup__close:focus-visible,
.uthena-signup .uthena-button:focus-visible,
.uthena-signup a:focus-visible {
	outline: none;
	box-shadow: var(--uthena-focus-ring);
}

.uthena-signup__title {
	margin: 0 var(--space-4) var(--space-1) 0;
	font-family: var(--font-display);
	font-size: var(--type-display-4);
	font-weight: var(--weight-display);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--text-strong);
	text-wrap: balance;
}

.uthena-signup__intro {
	margin: 0 0 var(--space-3);
	color: var(--text-secondary);
	max-width: 46ch;
}

/* "Recently added": the proof of what the email contains. */
.uthena-signup__recent {
	margin: 0 0 var(--space-3);
	padding: var(--space-15) var(--space-2);
	border: 1px solid var(--border-subtle);
	border-radius: var(--uthena-radius-lg);
	background: var(--surface-inset);
}

.uthena-signup__recent-title {
	margin: 0 0 var(--space-05);
	font-size: var(--type-caption);
	font-weight: var(--weight-strong);
	color: var(--text-identity);
}

.uthena-signup__recent-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uthena-signup__recent-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-1) 0;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--type-body-sm);
	color: var(--text-strong);
}

.uthena-signup__recent-item:first-child {
	border-top: 0;
}

.uthena-signup__recent-name {
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.uthena-signup__recent-tiers {
	display: inline-flex;
	flex: none;
	gap: var(--space-05);
}

.uthena-signup__label {
	display: block;
	margin: 0 0 var(--space-05);
	font-size: var(--type-body-sm);
	font-weight: var(--weight-strong);
	color: var(--text-strong);
}

.uthena-signup__row {
	display: flex;
	gap: var(--space-1);
}

.uthena-signup .uthena-signup__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.uthena-signup__input[aria-invalid="true"] {
	border-color: var(--danger-500);
}

.uthena-signup__submit {
	flex: none;
	min-height: 44px;
}

.uthena-signup__submit[aria-busy="true"] {
	cursor: progress;
}

.uthena-signup__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.uthena-signup__error {
	margin: var(--space-1) 0 0;
	font-size: var(--type-body-sm);
	color: var(--danger-500);
}

.uthena-signup__consent {
	margin: var(--space-15) 0 0;
	font-size: var(--type-caption);
	line-height: var(--leading-ui);
	color: var(--text-muted);
}

.uthena-signup__consent a {
	color: var(--text-link);
	text-decoration: underline;
}

.uthena-signup__consent a:hover {
	color: var(--text-link-hover);
}

.uthena-signup__done {
	outline: none;
	padding-top: var(--space-1);
}

.uthena-signup__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-2);
	border-radius: var(--uthena-radius-pill);
	background: var(--surface-identity);
	color: var(--text-identity);
}

/* Open / close motion. */
@media (prefers-reduced-motion: no-preference) {
	.uthena-signup[open] {
		animation: uthena-signup-in var(--uthena-dur-modal) var(--uthena-ease);
	}

	.uthena-signup[open]::backdrop {
		animation: uthena-signup-fade var(--uthena-dur-modal) var(--uthena-ease);
	}

	.uthena-signup.is-closing {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 150ms var(--uthena-ease), transform 150ms var(--uthena-ease);
	}
}

@keyframes uthena-signup-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes uthena-signup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Phones: bottom sheet. */
@media (max-width: 599px) {
	.uthena-signup {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		padding: var(--space-3) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: var(--uthena-radius-xl) var(--uthena-radius-xl) 0 0;
		max-height: 88dvh;
	}

	.uthena-signup__title {
		font-size: var(--type-display-5);
	}

	.uthena-signup__row {
		flex-direction: column;
	}

	.uthena-signup__submit {
		width: 100%;
	}

	.uthena-signup__recent-item:nth-child(n + 3) {
		display: none;
	}
}