/**
 * AestheticX — progressive email-first auth flow.
 *
 * Loaded after account.css (inherits :root brand tokens) ONLY on the account
 * page for logged-out visitors (inc/auth-flow.php). Renders a single centered,
 * branded card whose steps fade/slide between one another. Mobile-first; every
 * colour comes from a brand token; prefers-reduced-motion is honoured.
 */

/* The account page hero isn't rendered on this view — give the card room. */
.ax-account-active .ax-auth {
	display: flex;
	justify-content: center;
	padding: 1rem 0 3rem;
}

.ax-auth__card {
	position: relative;
	width: 100%;
	max-width: 27rem;
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	box-shadow: var(--ax-shadow);
	padding: 1.75rem 1.5rem 1.6rem;
	overflow: hidden;
}

@media (min-width: 480px) {
	.ax-auth__card { padding: 2.25rem 2.25rem 2rem; }
}

.ax-auth__brand {
	font-family: var(--ax-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--ax-accent);
	text-align: center;
	margin-bottom: 1.25rem;
}

/* -------- steps + transitions -------- */
.ax-auth__step {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ax-auth__step.is-active {
	opacity: 1;
	transform: none;
}
.ax-auth__step.is-entering {
	opacity: 0;
	transform: translateY(10px);
}
.ax-auth__step.is-leaving {
	opacity: 0;
	transform: translateY(-10px);
}
.ax-auth__step[hidden] {
	display: none;
}

.ax-auth__title {
	font-family: var(--ax-font-heading);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--ax-text);
	margin: 0 0 0.4rem;
}
.ax-auth__lead {
	font-family: var(--ax-font-body);
	font-size: 0.95rem;
	color: var(--ax-muted);
	margin: 0 0 1.35rem;
}

/* -------- identity chip (locked email on step 2) -------- */
.ax-auth__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	background-color: var(--ax-base);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-sm);
	padding: 0.6rem 0.85rem;
	margin-bottom: 1.25rem;
}
.ax-auth__identity-val {
	font-family: var(--ax-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ax-muted);
	word-break: break-word;
	flex: 1 1 auto;
}
.ax-auth__change {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--ax-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ax-accent);
	transition: color var(--ax-transition);
	flex: 0 0 auto;
}
.ax-auth__change:hover { color: var(--ax-accent-hover); }

/* -------- form fields -------- */
.ax-auth__form { margin: 0; }
.ax-auth__field {
	display: block;
	margin-bottom: 1.05rem;
}
.ax-auth__field[hidden] { display: none; }
.ax-auth__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}
@media (min-width: 400px) {
	.ax-auth__row { grid-template-columns: 1fr 1fr; }
}
.ax-auth__label {
	display: block;
	font-family: var(--ax-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ax-text);
	margin-bottom: 0.4rem;
}
.ax-auth__input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ax-font-body);
	font-size: 1rem;
	color: var(--ax-text);
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-sm);
	padding: 0.72rem 0.85rem;
	transition: border-color var(--ax-transition), box-shadow var(--ax-transition);
	-webkit-appearance: none;
	appearance: none;
}
.ax-auth__input:focus {
	outline: none;
	border-color: var(--ax-accent);
	box-shadow: 0 0 0 3px var(--ax-sage-soft);
}
.ax-auth__input::placeholder { color: var(--ax-muted); opacity: 0.7; }

.ax-auth__field.has-error .ax-auth__input {
	border-color: var(--ax-danger);
}
.ax-auth__field.has-error .ax-auth__input:focus {
	box-shadow: 0 0 0 3px rgba(184, 92, 80, 0.16);
}

.ax-auth__hint {
	display: block;
	font-family: var(--ax-font-body);
	font-size: 0.76rem;
	color: var(--ax-muted);
	margin-top: 0.35rem;
}
.ax-auth__err {
	display: none;
	font-family: var(--ax-font-body);
	font-size: 0.78rem;
	color: var(--ax-danger);
	margin-top: 0.35rem;
}
.ax-auth__field.has-error .ax-auth__err {
	display: block;
}

/* password field + show/hide toggle */
.ax-auth__pw { position: relative; }
.ax-auth__pw .ax-auth__input { padding-right: 3.6rem; }
.ax-auth__pwtoggle {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	appearance: none;
	background: none;
	border: 0;
	padding: 0.35rem 0.5rem;
	cursor: pointer;
	font-family: var(--ax-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ax-accent);
	border-radius: var(--ax-radius-sm);
}
.ax-auth__pwtoggle:hover { color: var(--ax-accent-hover); }

/* -------- submit + links -------- */
.ax-auth__submit.button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 0.3rem;
	padding: 0.8rem 1rem;
	font-family: var(--ax-font-heading);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--ax-on-accent);
	background-color: var(--ax-accent);
	border: 1px solid var(--ax-accent);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--ax-transition), box-shadow var(--ax-transition), transform var(--ax-transition);
}
.ax-auth__submit.button:hover {
	background-color: var(--ax-accent-hover);
	border-color: var(--ax-accent-hover);
	color: var(--ax-on-accent);
	box-shadow: var(--ax-shadow-hover);
}
.ax-auth__submit.button:disabled,
.ax-auth.is-busy .ax-auth__submit.button {
	opacity: 0.7;
	cursor: default;
	pointer-events: none;
}

/* spinner appended by JS while a request is in flight */
.ax-auth__spinner {
	width: 1.05em;
	height: 1.05em;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: var(--ax-on-accent);
	border-radius: 50%;
	animation: ax-auth-spin 0.6s linear infinite;
}
@keyframes ax-auth-spin { to { transform: rotate(360deg); } }

.ax-auth__link {
	display: inline-block;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.25rem 0;
	margin-top: 1.05rem;
	cursor: pointer;
	font-family: var(--ax-font-body);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ax-accent);
	transition: color var(--ax-transition);
}
.ax-auth__link:hover { color: var(--ax-accent-hover); }

.ax-auth__fine {
	font-family: var(--ax-font-body);
	font-size: 0.76rem;
	color: var(--ax-muted);
	margin: 1.15rem 0 0;
	line-height: 1.5;
}
.ax-auth__fine a { color: var(--ax-accent); }
.ax-auth__fine a:hover { color: var(--ax-accent-hover); }

/* -------- global alert (server errors) -------- */
.ax-auth__alert {
	background-color: rgba(184, 92, 80, 0.08);
	border: 1px solid rgba(184, 92, 80, 0.3);
	border-radius: var(--ax-radius-sm);
	color: var(--ax-danger);
	font-family: var(--ax-font-body);
	font-size: 0.85rem;
	padding: 0.7rem 0.85rem;
	margin-bottom: 1.1rem;
}
.ax-auth__alert[hidden] { display: none; }

/* -------- forgot-password confirmation -------- */
.ax-auth__step--sent { text-align: center; }
.ax-auth__sent-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0.25rem auto 1rem;
	border-radius: 50%;
	background-color: var(--ax-sage-soft);
	color: var(--ax-accent);
}
.ax-auth__step--sent .ax-auth__lead { margin-bottom: 0.5rem; }
.ax-auth__step--sent .ax-auth__lead strong { color: var(--ax-text); }

@media (prefers-reduced-motion: reduce) {
	.ax-auth__step,
	.ax-auth__submit.button {
		transition: none;
	}
	.ax-auth__step.is-entering,
	.ax-auth__step.is-leaving {
		transform: none;
	}
	.ax-auth__spinner { animation-duration: 1.2s; }
}