/*
 * Email-first auth page (ADR-009).
 *
 * Standalone, full-bleed, AuthKit-quality. The page does not load the
 * theme stylesheet, so this file is fully self-contained. Tokens come
 * from tokens.css (loaded just before this file in the template).
 *
 * Layout: vertically centered card on a brand-wash background.
 * Mobile-first; the only breakpoint is min-width: 480px for the row split.
 */

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

/* `display: flex` on .isjac-auth__field outranks the user-agent
   [hidden] { display: none } rule; restore the intent. */
.isjac-auth [hidden] { display: none; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

.isjac-auth__body {
	font-family: var(--isjac-font-family);
	font-size: var(--isjac-font-size-base);
	line-height: var(--isjac-line-height-base);
	color: var(--isjac-text-primary);
	background:
		radial-gradient(circle at top left, var(--isjac-color-brand-wash), transparent 60%),
		radial-gradient(circle at bottom right, var(--isjac-color-brand-wash), transparent 65%),
		var(--isjac-surface-page);
	min-height: 100vh;
}

.isjac-auth {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--isjac-space-4);
	padding: var(--isjac-space-5);
}

/* Brand block sits ABOVE the card (AuthKit pattern). */
.isjac-auth__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--isjac-space-4);
	width: 100%;
	max-width: 440px;
	text-align: center;
}

.isjac-auth__logo-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	line-height: 0; /* prevent inherited line-height collapsing the img height */
}

.isjac-auth__logo {
	display: block;
	height: auto;
	width: auto;
	max-height: 64px;
	max-width: 220px;
}

.isjac-auth__logo--text {
	font-weight: var(--isjac-font-weight-bold);
	font-size: var(--isjac-font-size-lg);
	color: var(--isjac-color-brand-deep);
}

.isjac-auth__title {
	font-size: 1.5rem;
	line-height: var(--isjac-line-height-tight);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-text-primary);
	margin: 0;
}

.isjac-auth__card {
	width: 100%;
	max-width: 440px;
	background: var(--isjac-surface-card);
	border: 1px solid var(--isjac-border-default);
	border-radius: var(--isjac-radius-lg);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-space-6);
}

.isjac-auth__alert {
	background: rgba(176, 0, 15, 0.08);
	color: var(--isjac-color-error);
	border: 1px solid rgba(176, 0, 15, 0.25);
	border-radius: var(--isjac-radius-md);
	padding: var(--isjac-space-3) var(--isjac-space-4);
	margin-bottom: var(--isjac-space-5);
	font-size: var(--isjac-font-size-small);
}

.isjac-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-4);
}

.isjac-auth__field {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-2);
}

.isjac-auth__label {
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	color: var(--isjac-text-primary);
}

.isjac-auth__input {
	width: 100%;
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-space-3);
	font: inherit;
	color: var(--isjac-text-primary);
	background: var(--isjac-surface-card);
	border: 1px solid var(--isjac-border-default);
	border-radius: 6px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.isjac-auth__input:focus {
	outline: none;
	border-color: var(--isjac-color-brand-deep);
	box-shadow: 0 0 0 3px rgba(21, 82, 111, 0.18);
}

.isjac-auth__input[aria-invalid="true"] {
	border-color: var(--isjac-color-error);
	box-shadow: 0 0 0 3px rgba(176, 0, 15, 0.15);
}

.isjac-auth__error {
	margin: 0;
	font-size: var(--isjac-font-size-micro);
	color: var(--isjac-color-error);
}

.isjac-auth__help {
	margin: 0;
	font-size: var(--isjac-font-size-micro);
	color: var(--isjac-text-muted);
}

.isjac-auth__row {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-3);
}

@media (min-width: 480px) {
	.isjac-auth__row { flex-direction: row; }
	.isjac-auth__col { flex: 1; display: flex; flex-direction: column; gap: var(--isjac-space-2); }
}

.isjac-auth__col {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-2);
}

.isjac-auth__email-recap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--isjac-space-3);
	padding: var(--isjac-space-3) var(--isjac-space-4);
	background: var(--isjac-color-brand-wash);
	border-radius: var(--isjac-radius-md);
	font-size: var(--isjac-font-size-small);
	margin-bottom: var(--isjac-space-2);
}

.isjac-auth__email-recap-value {
	font-weight: var(--isjac-font-weight-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.isjac-auth__link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--isjac-color-brand-deep);
	cursor: pointer;
	text-decoration: underline;
}

.isjac-auth__link {
	color: var(--isjac-color-brand-deep);
	text-decoration: underline;
}

.isjac-auth__link:hover { color: var(--isjac-color-ink); }

.isjac-auth__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--isjac-space-2);
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-space-5);
	font: inherit;
	font-weight: var(--isjac-font-weight-medium);
	color: var(--isjac-button-primary-text);
	background: var(--isjac-button-primary-bg);
	border: 0;
	border-radius: var(--isjac-radius-md);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.isjac-auth__submit:hover { background: var(--isjac-button-primary-hover); }

.isjac-auth__submit:disabled {
	opacity: 0.85;
	cursor: progress;
}

.isjac-auth__spinner {
	display: none;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: isjac-auth-spin 720ms linear infinite;
}

.isjac-auth__submit[data-loading="true"] .isjac-auth__spinner {
	display: inline-block;
}

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

.isjac-auth__turnstile {
	display: flex;
	justify-content: center;
}