/**
 * Registration page. Reuses the landing page's action-card components so the
 * sign-in card and the sign-up form read as one flow rather than two designs.
 */

.aik-auth {
	display: flex;
	align-items: center;
	min-height: 70vh;
	padding-block: var(--sp-12);
}

.aik-auth__inner {
	width: var(--aik-container-wide);
	margin-inline: auto;
}

.aik-auth__card {
	max-width: 470px;   /* the landing page's sign-in card measures the same */
	margin-inline: auto;
}

.aik-auth__terms {
	align-items: flex-start;
	gap: var(--sp-3);
	margin-block: var(--sp-4) var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--aik-muted);
}

.aik-auth__terms input {
	margin-top: 2px;
	flex: none;
}

.aik-auth__alt {
	margin: var(--sp-5) 0 0;
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--aik-muted);
}

.aik-auth__alt a {
	font-weight: var(--fw-semibold);
}

/* ═══ Account page ══════════════════════════════════════════════════════
   Three panels rather than one long form: what you are paying for, who you
   are, and how you get in. They are independent, and separate forms mean a
   failed password change never discards a name edit.
   ═════════════════════════════════════════════════════════════════════════ */

.aik-account-page {
	padding-block: var(--sp-12) var(--sp-16);
}

.aik-account-page__inner {
	width: var(--aik-container-wide);
	max-width: 1180px;
	margin-inline: auto;
}

.aik-account-page__head {
	margin-bottom: var(--sp-6);
}

.aik-account-page__head h1 {
	margin-bottom: var(--sp-1);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	letter-spacing: -0.02em;
}

.aik-account-page__head p {
	margin: 0;
}

.aik-account-page__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-6);
	align-items: start;
}

.aik-panel__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-lg);
}

.aik-panel__note {
	margin: var(--sp-2) 0 var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--aik-muted);
	line-height: var(--lh-snug);
}

.aik-panel form .aik-btn {
	margin-top: var(--sp-2);
}

/* Definition list used for read-only facts, so they are not mistaken for fields. */
.aik-datalist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3) var(--sp-5);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
}

.aik-datalist dt {
	color: var(--aik-muted);
}

.aik-datalist dd {
	margin: 0;
	color: var(--aik-navy-900);
	font-weight: var(--fw-medium);
}

/* Unverified-email banner — informational, so gold rather than red. Nothing is
   broken and nothing is blocked. */
.aik-verify {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	flex-wrap: wrap;
	background: var(--aik-gold-soft);
	border: 1px solid rgb(200 162 74 / 0.35);
	border-radius: var(--r-lg);
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-6);
}

.aik-verify p {
	margin: 2px 0 0;
	font-size: var(--fs-sm);
	color: var(--aik-text);
}

.aik-verify form {
	flex: none;
}

.aik-account-page__signout {
	margin: var(--sp-8) 0 0;
	text-align: center;
}

.aik-account-page__signout a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--aik-muted);
}

.aik-account-page__signout a:hover {
	color: var(--aik-danger);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.aik-account-page__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* ── "Check your inbox" state ────────────────────────────────────────────
   The same card, after the account exists. There is nothing left to fill in,
   so the form is replaced rather than disabled. */

.aik-auth__sentto {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-base);
	color: var(--aik-text);
}

.aik-auth__sentto strong {
	display: block;
	margin-top: 2px;
	color: var(--aik-navy-900);
	word-break: break-all;
}

.aik-auth__hint {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--aik-muted);
}

/* Back link, sitting above a page title. Quiet until hovered — it is an escape
   hatch, not something to compete with the heading. */
.aik-backlink {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--aik-muted);
}

.aik-backlink:hover {
	color: var(--aik-sky);
	text-decoration: none;
}