/*
 * auth-memphis-overlay.css
 *
 * Memphis identity overlay for the cocovox /auth route. Loaded AFTER
 * auth.css. Scoped to `.auth-page-container` — the auth page is the second
 * surface a visitor sees (after /landing), so it ALWAYS wears Memphis
 * regardless of the user's active app theme.
 *
 * Token block is duplicated (not @import'd) from landing-memphis-overlay.css
 * so /auth is self-contained — loading the landing overlay on /auth would
 * pull in 700+ lines of irrelevant marketing-page rules.
 *
 * Hierarchy (per the landing handoff's "shout vs quiet" pattern):
 *   SHOUT  — auth card (signature surface), submit button (primary CTA),
 *            mascot ring, page heading
 *   QUIET  — inputs, OAuth buttons, helper text, trust signals, footer links
 */

/* ============================================================================
 * Memphis brand tokens — defined directly so /auth wears Memphis even when
 * the active theme is plain `html.dark` (default for fresh visitors with
 * system-dark preference). Values match landing-memphis-overlay.css.
 * ============================================================================ */
.auth-page-container {
	/* Teal scale (primary) */
	--cv-mem-teal-100: oklch(95% 0.05 190);
	--cv-mem-teal-200: oklch(89% 0.09 189);
	--cv-mem-teal-300: oklch(85% 0.13 187);
	--cv-mem-teal-400: oklch(80% 0.14 185);
	--cv-mem-teal-500: oklch(70% 0.12 185);
	--cv-mem-teal-700: oklch(50% 0.10 186);
	--cv-mem-teal-900: oklch(28% 0.07 186);

	/* Lime scale (secondary — Memphis spring green) */
	--cv-mem-lime-200: oklch(90% 0.12 131);
	--cv-mem-lime-300: oklch(86% 0.16 130);
	--cv-mem-lime-400: oklch(83% 0.18 130);
	--cv-mem-lime-500: oklch(80% 0.20 130);
	--cv-mem-lime-700: oklch(56% 0.15 128);

	/* Pink scale (accent — Memphis hot pink) */
	--cv-mem-pink-300: oklch(80% 0.18 350);
	--cv-mem-pink-400: oklch(73% 0.22 350);
	--cv-mem-pink-500: oklch(65% 0.25 350);
	--cv-mem-pink-700: oklch(45% 0.18 352);

	/* Other brand hues */
	--cv-mem-purple-500: oklch(66% 0.19 313);
	--cv-mem-coral-500: oklch(72% 0.15 39);

	/* Hairline border default (light surfaces) */
	--cv-mem-hairline: var(--cv-mem-teal-900);

	/* Memphis surfaces — defined directly to keep Memphis identity intact
	   on plain `html.dark` (where --surface-card resolves to cold noir). */
	--cv-mem-surface-card: oklch(98% 0.01 85);
	--cv-mem-cream-text: oklch(98% 0.01 85);
	--cv-mem-ink-text: oklch(15% 0 0);

	/* Stamp shadows — single-stamp for signature card, double-stamp for the
	   primary CTA only (matches landing hierarchy where the hero CTA is the
	   only double-stamp). */
	--cv-mem-shadow: 4px 4px 0 var(--cv-mem-pink-500), 8px 8px 0 var(--cv-mem-lime-500);
	--cv-mem-shadow-hover: 6px 6px 0 var(--cv-mem-pink-500), 12px 12px 0 var(--cv-mem-lime-500);
	--cv-mem-shadow-soft: 4px 4px 0 var(--cv-mem-pink-400);
	--cv-mem-shadow-card: 6px 6px 0 var(--cv-mem-pink-500);

	/* Bouncy easing */
	--cv-mem-dur: 280ms;
	--cv-mem-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode hairline lift — teal-900 disappears against noir backgrounds. */
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container {
	--cv-mem-hairline: var(--cv-mem-teal-300);
}

/* ============================================================================
 * 1. Background — replace pitch-black void with warm Memphis wash.
 * ============================================================================ */
.auth-page-container {
	/* Layered: cream paper → teal/pink/purple soft blobs → confetti tile.
	   Uses background-image stack so the underlying GradientBackground
	   bokeh canvas (mounted in +layout) shows through where opacities allow. */
	position: relative;
	background:
		radial-gradient(
			circle at 12% 18%,
			color-mix(in srgb, var(--cv-mem-pink-500) 16%, transparent) 0%,
			transparent 40%
		),
		radial-gradient(
			circle at 88% 78%,
			color-mix(in srgb, var(--cv-mem-lime-500) 14%, transparent) 0%,
			transparent 40%
		),
		radial-gradient(
			circle at 72% 14%,
			color-mix(in srgb, var(--cv-mem-purple-500) 10%, transparent) 0%,
			transparent 36%
		),
		linear-gradient(
			180deg,
			var(--cv-mem-teal-100) 0%,
			oklch(97% 0.02 85) 50%,
			color-mix(in srgb, var(--cv-mem-pink-300) 22%, oklch(97% 0.02 85)) 100%
		);
}

/* Dark mode wash: dial saturation up and luminance down — Memphis chord
   still legible against deep noir, but no white flash. */
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container {
	background:
		radial-gradient(
			circle at 12% 18%,
			color-mix(in srgb, var(--cv-mem-pink-500) 28%, transparent) 0%,
			transparent 42%
		),
		radial-gradient(
			circle at 88% 78%,
			color-mix(in srgb, var(--cv-mem-lime-700) 26%, transparent) 0%,
			transparent 42%
		),
		radial-gradient(
			circle at 72% 14%,
			color-mix(in srgb, var(--cv-mem-purple-500) 20%, transparent) 0%,
			transparent 36%
		),
		linear-gradient(
			180deg,
			oklch(18% 0.04 200) 0%,
			oklch(13% 0.03 240) 60%,
			oklch(16% 0.05 340) 100%
		);
}

/* ============================================================================
 * 2. Brand header — Memphis mascot ring + DM Serif Display title.
 * ============================================================================ */
.auth-page-container .auth-header {
	position: relative;
	z-index: 1;
}

/* Pink + lime offset ring around the mascot — softer than the landing hero
   (this is a quieter surface) so we use a single-stamp ring + a hairline
   border instead of the landing's double-shadow ring.
   IMPORTANT: when the auth surface is on a dark theme, the global auth.css
   swaps the mascot to the light-tinted PNG (designed for dark backgrounds).
   The Memphis card is cream regardless of theme, so the light-tinted mascot
   becomes white-on-cream (invisible). Force the dark-tinted (light-theme)
   mascot variant any time the Memphis treatment is active. */
.auth-page-container .auth-logo {
	border: 3px solid var(--cv-mem-hairline) !important;
	background: var(--cv-mem-surface-card);
	box-shadow:
		3px 3px 0 var(--cv-mem-pink-500),
		6px 6px 0 var(--cv-mem-lime-500),
		var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1)) !important;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}

/* Mascot swap override: cream Memphis card always wants the dark-tinted
   mascot, even on dark themes. Defeat the auth.css `.dark .auth-logo--*`
   rules. */
.auth-page-container .auth-logo.auth-logo--light-theme {
	display: block !important;
}

.auth-page-container .auth-logo.auth-logo--dark-theme {
	display: none !important;
}

.auth-page-container .auth-logo:hover {
	transform: rotateY(8deg) rotateX(-3deg) scale(1.05) !important;
	box-shadow:
		5px 5px 0 var(--cv-mem-pink-500),
		10px 10px 0 var(--cv-mem-lime-500),
		var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15)) !important;
}

/* Subtle hover glow stays — but tint it Memphis-pink. */
.auth-page-container .auth-logo::after {
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--cv-mem-pink-500) 40%, transparent),
		transparent 70%
	) !important;
}

/* DM Serif Display heading (matches landing's --font-family-heading pattern
   but with explicit literals because landing-memphis-overlay tokens aren't
   loaded here). Cocovox-warm preference: editorial-cinematic, not minimal-tech. */
.auth-page-container .auth-title {
	font-family: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif;
	font-weight: 400;
	color: var(--cv-mem-teal-900);
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: 2.5rem;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-title {
	color: var(--cv-mem-teal-100);
}

/* Subtitle: mono eyebrow — borrowed from landing's section eyebrows. */
.auth-page-container .auth-subtitle {
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv-mem-teal-700);
	margin-top: 0.5rem;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-subtitle {
	color: var(--cv-mem-teal-300);
}

/* ============================================================================
 * 3. Auth card — the SIGNATURE surface. Hairline border + single pink stamp.
 *    No tilt: the card is a working surface, not a decorative trophy.
 * ============================================================================ */
.auth-page-container .auth-card {
	background: var(--cv-mem-surface-card) !important;
	border: 2px solid var(--cv-mem-hairline) !important;
	border-radius: 18px !important;
	box-shadow: var(--cv-mem-shadow-card) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: box-shadow var(--cv-mem-dur) var(--cv-mem-ease) !important;
	position: relative;
	z-index: 1;
}

.auth-page-container .auth-card:hover {
	box-shadow: 8px 8px 0 var(--cv-mem-pink-500) !important;
}

/* Dark mode: keep cream card (Memphis identity priority) but slightly tint
   to acknowledge the dark backdrop. Cream-on-dark passes AA easily. */
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-card {
	background: oklch(97% 0.015 85) !important;
	border-color: var(--cv-mem-teal-900) !important;
}

/* Card title ("Sign in" / "Sign up") — DM Serif Display. */
.auth-page-container .auth-card-title h2,
.auth-page-container .auth-card-title {
	font-family: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif !important;
	font-weight: 400 !important;
	color: var(--cv-mem-teal-900) !important;
	font-size: 1.875rem !important;
	letter-spacing: -0.005em !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-card-title,
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-card-title h2 {
	color: var(--cv-mem-teal-900) !important;
}

/* ============================================================================
 * 4. Form fields — QUIET. Cream surface + teal focus ring (NOT blue or red).
 * ============================================================================ */
.auth-page-container .auth-label {
	color: var(--cv-mem-teal-900) !important;
	font-weight: 600 !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-label {
	/* Card is still cream on dark theme — label color matches card */
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .auth-required-indicator {
	color: var(--cv-mem-pink-700) !important;
}

.auth-page-container .auth-input {
	background: oklch(99% 0.005 85) !important;
	color: var(--cv-mem-ink-text) !important;
	border: 2px solid var(--cv-mem-teal-200) !important;
	border-radius: 10px !important;
	transition:
		border-color var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-input::placeholder {
	/* AA contrast 4.5:1 against oklch(99% 0.005 85): use teal-700 (deep teal) */
	color: var(--cv-mem-teal-700) !important;
	opacity: 0.65;
}

.auth-page-container .auth-input:focus,
.auth-page-container .auth-input:focus-visible {
	border-color: var(--cv-mem-teal-700) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-mem-teal-500) 35%, transparent) !important;
	outline: none !important;
}

/* Validation states — pink for error (Memphis-native), lime-700 for success. */
.auth-page-container .auth-input.has-error {
	border-color: var(--cv-mem-pink-700) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-mem-pink-500) 25%, transparent) !important;
}

.auth-page-container .auth-input.has-success {
	border-color: var(--cv-mem-lime-700) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-mem-lime-500) 25%, transparent) !important;
}

/* Password toggle button — pin to teal-700 for AA against cream input. */
.auth-page-container .auth-password-toggle {
	color: var(--cv-mem-teal-700) !important;
}

.auth-page-container .auth-password-toggle:hover {
	color: var(--cv-mem-pink-700) !important;
}

/* ============================================================================
 * 5. Primary CTA — the SHOUT moment. Teal-700 fill + cream text + double stamp.
 *    Matches the landing's hero primary CTA signature.
 * ============================================================================ */
.auth-page-container .auth-card .btn-primary,
.auth-page-container [data-testid='submit-button'] {
	background: var(--cv-mem-teal-700) !important;
	color: var(--cv-mem-cream-text) !important;
	border: 2px solid var(--cv-mem-teal-900) !important;
	border-radius: 12px !important;
	box-shadow: var(--cv-mem-shadow) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-card .btn-primary:hover:not(:disabled),
.auth-page-container [data-testid='submit-button']:hover:not(:disabled) {
	transform: translate(-2px, -2px);
	box-shadow: var(--cv-mem-shadow-hover) !important;
	background: oklch(46% 0.10 186) !important;
}

.auth-page-container .auth-card .btn-primary:active:not(:disabled),
.auth-page-container [data-testid='submit-button']:active:not(:disabled) {
	transform: translate(0, 0);
	box-shadow: 2px 2px 0 var(--cv-mem-pink-500), 4px 4px 0 var(--cv-mem-lime-500) !important;
}

.auth-page-container .auth-card .btn-primary:disabled,
.auth-page-container [data-testid='submit-button']:disabled {
	background: var(--cv-mem-teal-200) !important;
	color: var(--cv-mem-teal-700) !important;
	border-color: var(--cv-mem-teal-300) !important;
	box-shadow: 3px 3px 0 var(--cv-mem-teal-300) !important;
	cursor: not-allowed;
	opacity: 0.85;
}

/* Focus ring — hot pink, 3px, 3px offset (landing convention) */
.auth-page-container .auth-card .btn-primary:focus-visible,
.auth-page-container [data-testid='submit-button']:focus-visible {
	outline: 3px solid var(--cv-mem-pink-500) !important;
	outline-offset: 3px !important;
}

/* ============================================================================
 * 6. Ghost buttons — Forgot password? + Sign up toggle. Quiet but Memphis-aware.
 * ============================================================================ */
.auth-page-container .auth-card .btn-ghost,
.auth-page-container .auth-remember-me-container .btn-ghost,
.auth-page-container .auth-toggle-mode-container .btn-ghost {
	color: var(--cv-mem-pink-700) !important;
	background: transparent !important;
	border: none !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	position: relative;
	transition: color var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-card .btn-ghost:hover:not(:disabled),
.auth-page-container .auth-remember-me-container .btn-ghost:hover:not(:disabled),
.auth-page-container .auth-toggle-mode-container .btn-ghost:hover:not(:disabled) {
	color: var(--cv-mem-pink-500) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}

.auth-page-container .auth-card .btn-ghost:focus-visible,
.auth-page-container .auth-remember-me-container .btn-ghost:focus-visible,
.auth-page-container .auth-toggle-mode-container .btn-ghost:focus-visible {
	outline: 3px solid var(--cv-mem-pink-500) !important;
	outline-offset: 3px !important;
	border-radius: 6px !important;
}

/* ============================================================================
 * 7. Mode toggle container — eyebrow framing for "Don't have an account? Sign up"
 * ============================================================================ */
.auth-page-container .auth-toggle-mode-container {
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--cv-mem-teal-700) !important;
	margin-top: 1.5rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px dashed var(--cv-mem-teal-200) !important;
}

/* The inner button keeps its own weight; reset uppercase since DM Serif
   numbered styling doesn't suit a CTA. */
.auth-page-container .auth-toggle-mode-container .btn-ghost {
	font-family:
		var(--font-family-base, 'Inter', system-ui, sans-serif) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 0.95rem !important;
}

/* ============================================================================
 * 8. Remember me — softer treatment, paired with forgot-password link.
 * ============================================================================ */
.auth-page-container .auth-remember-me-text {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .auth-remember-me-checkbox {
	accent-color: var(--cv-mem-pink-500);
}

/* ============================================================================
 * 9. Password requirements + strength panel — light teal tint.
 * ============================================================================ */
.auth-page-container .auth-password-requirements {
	background: color-mix(in srgb, var(--cv-mem-teal-200) 30%, var(--cv-mem-surface-card)) !important;
	border: 1.5px solid var(--cv-mem-teal-300) !important;
	border-radius: 10px !important;
}

.auth-page-container .auth-requirements-title {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .auth-requirement {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .auth-requirement.met {
	color: var(--cv-mem-lime-700) !important;
}

.auth-page-container .auth-requirement.unmet {
	color: var(--cv-mem-teal-700) !important;
}

.auth-page-container .auth-requirement.met .auth-requirement-icon {
	color: var(--cv-mem-lime-700) !important;
}

.auth-page-container .auth-requirement.unmet .auth-requirement-icon {
	color: var(--cv-mem-pink-700) !important;
}

/* ============================================================================
 * 10. Verification notice (signup) + security reassurance — light pink tint.
 * ============================================================================ */
.auth-page-container .auth-verification-notice,
.auth-page-container .auth-security-reassurance {
	background: color-mix(in srgb, var(--cv-mem-pink-300) 18%, var(--cv-mem-surface-card)) !important;
	border: 1.5px solid var(--cv-mem-pink-300) !important;
	border-radius: 10px !important;
	color: var(--cv-mem-teal-900) !important;
	padding: 0.75rem 1rem !important;
}

.auth-page-container .auth-verification-notice-text,
.auth-page-container .auth-security-reassurance-text {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .auth-verification-notice-icon,
.auth-page-container .auth-security-reassurance-icon {
	color: var(--cv-mem-pink-700) !important;
}

/* ============================================================================
 * 11. Form error summary — pink-accented alert with hairline.
 * ============================================================================ */
.auth-page-container .auth-form-error-summary {
	background: color-mix(in srgb, var(--cv-mem-pink-300) 22%, var(--cv-mem-surface-card)) !important;
	border: 2px solid var(--cv-mem-pink-500) !important;
	border-radius: 12px !important;
	color: var(--cv-mem-teal-900) !important;
	box-shadow: 3px 3px 0 var(--cv-mem-pink-500) !important;
}

.auth-page-container .auth-error-summary-title {
	color: var(--cv-mem-pink-700) !important;
	font-weight: 700 !important;
}

.auth-page-container .auth-error-summary-icon {
	color: var(--cv-mem-pink-700) !important;
}

/* Per-field validation messages */
.auth-page-container .auth-validation-message.error {
	color: var(--cv-mem-pink-700) !important;
}

.auth-page-container .auth-validation-message.success {
	color: var(--cv-mem-lime-700) !important;
}

/* ============================================================================
 * 12. OAuth section — secondary signature surface. Cream card + lime stamp
 *     (variety with the auth-card's pink stamp prevents single-hue droning).
 *     Vendor-branded buttons stay vendor-clean per the handoff; only the
 *     wrapper card gets Memphis treatment.
 * ============================================================================ */
.auth-page-container .auth-oauth-section {
	background: var(--cv-mem-surface-card) !important;
	border: 2px solid var(--cv-mem-hairline) !important;
	border-radius: 16px !important;
	box-shadow: 4px 4px 0 var(--cv-mem-lime-500) !important;
	padding: 1.5rem !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-oauth-section {
	background: oklch(97% 0.015 85) !important;
	border-color: var(--cv-mem-teal-900) !important;
}

/* Separator divider — re-tint line + label */
.auth-page-container .auth-oauth-separator-line::before {
	background: var(--cv-mem-teal-300) !important;
}

.auth-page-container .auth-oauth-separator-text {
	background: var(--cv-mem-surface-card) !important;
	color: var(--cv-mem-teal-700) !important;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-oauth-separator-text {
	background: oklch(97% 0.015 85) !important;
}

.auth-page-container .auth-oauth-buttons {
	margin-top: 1rem;
}

/* OAuth provider buttons — cream surface, teal-700 text, hairline border.
   No bold Memphis stamp — vendor logos already carry their own color so
   the button stays restrained. */
.auth-page-container .auth-oauth-button {
	background: oklch(99% 0.005 85) !important;
	border: 2px solid var(--cv-mem-teal-200) !important;
	border-radius: 10px !important;
	color: var(--cv-mem-teal-900) !important;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease),
		border-color var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-oauth-button:hover:not(:disabled) {
	border-color: var(--cv-mem-teal-700) !important;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-400) !important;
	background: oklch(99% 0.005 85) !important;
}

.auth-page-container .auth-oauth-button:focus-visible {
	outline: 3px solid var(--cv-mem-pink-500) !important;
	outline-offset: 3px !important;
}

.auth-page-container .auth-oauth-text {
	color: var(--cv-mem-teal-900) !important;
	font-weight: 600 !important;
}

/* Apple Sign-in button: keep Apple HIG (black) — vendor-branded — but match
   the Memphis radius + add subtle hover stamp. */
.auth-page-container .auth-apple-button {
	border-radius: 10px !important;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-apple-button:hover:not(:disabled) {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--cv-mem-lime-500) !important;
}

/* ============================================================================
 * 13. Share context banner (conversion funnel) — quiet warm tint.
 * ============================================================================ */
.auth-page-container .auth-share-context-banner,
.auth-page-container .share-context-banner {
	background: color-mix(in srgb, var(--cv-mem-lime-300) 20%, var(--cv-mem-surface-card)) !important;
	border: 1.5px solid var(--cv-mem-lime-500) !important;
	border-radius: 12px !important;
	color: var(--cv-mem-teal-900) !important;
	box-shadow: 3px 3px 0 var(--cv-mem-lime-500) !important;
}

/* ============================================================================
 * 14. Trust signals + footer links — quietest tier. Hairline + cream.
 * ============================================================================ */
.auth-page-container .auth-trust-signals {
	margin-top: 2rem;
}

.auth-page-container .auth-security-badge-enhanced {
	background: color-mix(in srgb, var(--cv-mem-teal-200) 18%, transparent) !important;
	border: 1px solid var(--cv-mem-teal-300) !important;
	border-radius: 12px !important;
	padding: 0.75rem 1rem !important;
}

.auth-page-container .auth-security-text {
	color: var(--cv-mem-teal-900) !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-security-text {
	color: var(--cv-mem-teal-100) !important;
}

.auth-page-container .auth-security-icon {
	color: var(--cv-mem-pink-700) !important;
}

.auth-page-container .auth-user-count {
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--cv-mem-teal-700) !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-user-count {
	color: var(--cv-mem-teal-300) !important;
}

.auth-page-container .auth-footer-link {
	color: var(--cv-mem-teal-700) !important;
	text-decoration: none !important;
	transition: color var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .auth-footer-link:hover {
	color: var(--cv-mem-pink-700) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 2px !important;
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-footer-link {
	color: var(--cv-mem-teal-300) !important;
}

.auth-page-container .auth-footer-separator {
	color: var(--cv-mem-pink-500) !important;
}

/* ============================================================================
 * 14b. Enhanced signup flow — role cards, step indicator, step titles.
 *      The wrapper .auth-card-enhanced sits in the same place as .auth-card
 *      and inherits its cream Memphis surface. The role cards inside still
 *      use dark surface tokens, so we re-color them onto the cream paper.
 * ============================================================================ */
.auth-page-container .auth-card-enhanced {
	background: var(--cv-mem-surface-card) !important;
	border: 2px solid var(--cv-mem-hairline) !important;
	border-radius: 18px !important;
	box-shadow: var(--cv-mem-shadow-card) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	/* Inherit the 608px max from auth.css's
	   `.auth-form-container:has(.auth-card-enhanced)` rule — that width was
	   chosen specifically to fit a 2-column role grid. Do NOT override here. */
}

/* Role selector grid — override the upstream 3-column rule.
   The component CSS at RoleSelector.svelte sets `repeat(3, 1fr)` at ≥540px,
   which leaves the 4th card (SLP) orphaned alone on row 2 with empty cells
   to its right. 2x2 distributes the four cards as natural pairs:
     Row 1: Learner | Teacher           (student-side perspectives)
     Row 2: Parent  | SLP               (adult-caregiver perspectives)
   The auth-card-enhanced container's 608px max-width still gives each card
   ~270px of effective width — comfortably above the ~210px cramped point
   that triggered this fix. */
.auth-page-container .role-selector {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: var(--space-4) !important;
	align-items: stretch !important;
}

@media (min-width: 540px) {
	.auth-page-container .role-selector {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .auth-page-container .auth-card-enhanced {
	background: oklch(97% 0.015 85) !important;
	border-color: var(--cv-mem-teal-900) !important;
}

/* Step indicator: progress rail + labels (1. Role / 2. Details / 3. Birthday) */
.auth-page-container .step-progress {
	background: var(--cv-mem-teal-200) !important;
	border-radius: 999px !important;
	height: 6px !important;
}

.auth-page-container .step-progress-fill {
	background: linear-gradient(
		90deg,
		var(--cv-mem-pink-500) 0%,
		var(--cv-mem-lime-500) 100%
	) !important;
	border-radius: 999px !important;
}

.auth-page-container .step-label {
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
	font-size: 0.74rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--cv-mem-teal-700) !important;
	opacity: 0.65;
}

.auth-page-container .step-label.active {
	color: var(--cv-mem-pink-700) !important;
	font-weight: 700 !important;
	opacity: 1;
}

.auth-page-container .progress-message {
	color: var(--cv-mem-teal-700) !important;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.05em !important;
}

/* Step titles ("How will you use Cocovox?" etc.) — DM Serif Display */
.auth-page-container .step-title {
	font-family: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif !important;
	font-weight: 400 !important;
	color: var(--cv-mem-teal-900) !important;
	font-size: 1.875rem !important;
	letter-spacing: -0.005em !important;
}

.auth-page-container .step-description {
	color: var(--cv-mem-teal-700) !important;
}

/* Role cards — cream surface, teal hairline, pink stamp on selected. */
.auth-page-container .role-card {
	background: oklch(99% 0.005 85) !important;
	border: 2px solid var(--cv-mem-teal-200) !important;
	border-radius: 14px !important;
	box-shadow: 3px 3px 0 var(--cv-mem-teal-300) !important;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		border-color var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .role-card:hover:not(.disabled) {
	transform: translate(-2px, -2px);
	border-color: var(--cv-mem-pink-500) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-pink-400) !important;
}

.auth-page-container .role-card.selected {
	border-color: var(--cv-mem-pink-500) !important;
	background: color-mix(in srgb, var(--cv-mem-pink-300) 12%, oklch(99% 0.005 85)) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-pink-500), 10px 10px 0 var(--cv-mem-lime-500) !important;
}

.auth-page-container .role-card.selected:hover:not(.disabled) {
	border-color: var(--cv-mem-pink-700) !important;
}

.auth-page-container .role-card.sibling-unselected {
	opacity: 0.75;
	filter: saturate(0.85);
}

.auth-page-container .role-card.sibling-unselected:hover:not(.disabled) {
	opacity: 0.95;
	filter: saturate(1);
}

.auth-page-container .role-card-icon {
	background: var(--cv-mem-teal-200) !important;
	color: var(--cv-mem-teal-900) !important;
	border-radius: 999px !important;
	transition:
		background var(--cv-mem-dur) var(--cv-mem-ease),
		transform var(--cv-mem-dur) var(--cv-mem-ease) !important;
}

.auth-page-container .role-card:hover:not(.disabled) .role-card-icon {
	background: var(--cv-mem-pink-300) !important;
	transform: scale(1.05);
}

.auth-page-container .role-card.selected .role-card-icon {
	background: var(--cv-mem-pink-500) !important;
	color: var(--cv-mem-cream-text) !important;
}

.auth-page-container .role-card-icon :global(svg),
.auth-page-container .role-card-icon svg {
	color: inherit !important;
}

.auth-page-container .role-card-title {
	font-family: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif !important;
	font-weight: 400 !important;
	color: var(--cv-mem-teal-900) !important;
	letter-spacing: -0.005em !important;
}

.auth-page-container .role-card-description {
	color: var(--cv-mem-teal-700) !important;
}

.auth-page-container .role-card-features {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .role-card-feature {
	color: var(--cv-mem-teal-900) !important;
}

.auth-page-container .role-card-feature :global(.feature-check),
.auth-page-container .role-card-feature .feature-check {
	color: var(--cv-mem-lime-700) !important;
}

.auth-page-container .role-card-privacy-note {
	color: var(--cv-mem-teal-700) !important;
}

.auth-page-container .role-card-privacy-note svg {
	color: var(--cv-mem-teal-700) !important;
}

/* Selection indicator (the circle that fills with a check when chosen) */
.auth-page-container .selection-indicator {
	border-color: var(--cv-mem-teal-300) !important;
	background: var(--cv-mem-surface-card) !important;
}

.auth-page-container .role-card.selected .selection-indicator {
	border-color: var(--cv-mem-pink-700) !important;
	background: var(--cv-mem-pink-500) !important;
}

.auth-page-container .role-card.selected .selection-indicator svg {
	color: var(--cv-mem-cream-text) !important;
}

/* Step actions row (Back / Continue buttons) — Continue gets primary CTA */
.auth-page-container .step-actions {
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
}

.auth-page-container .step-actions .btn-primary {
	background: var(--cv-mem-teal-700) !important;
	color: var(--cv-mem-cream-text) !important;
	border: 2px solid var(--cv-mem-teal-900) !important;
	border-radius: 12px !important;
	box-shadow: var(--cv-mem-shadow) !important;
	font-weight: 600 !important;
}

.auth-page-container .step-actions .btn-primary:hover:not(:disabled) {
	transform: translate(-2px, -2px);
	box-shadow: var(--cv-mem-shadow-hover) !important;
}

.auth-page-container .step-actions .btn-secondary,
.auth-page-container .step-actions .btn-ghost {
	color: var(--cv-mem-teal-700) !important;
	background: transparent !important;
	border: 2px solid var(--cv-mem-teal-300) !important;
	border-radius: 12px !important;
}

.auth-page-container .step-actions .btn-secondary:hover:not(:disabled),
.auth-page-container .step-actions .btn-ghost:hover:not(:disabled) {
	border-color: var(--cv-mem-pink-500) !important;
	color: var(--cv-mem-pink-700) !important;
	background: color-mix(in srgb, var(--cv-mem-pink-300) 8%, transparent) !important;
}

/* Pending-consent + parent-handoff message panels inside signup flow */
.auth-page-container .pending-consent-flow,
.auth-page-container .parent-handoff-message {
	color: var(--cv-mem-teal-900) !important;
}

/* ============================================================================
 * 15. Reduced motion — kill transforms + transitions, keep static treatment.
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.auth-page-container .auth-card,
	.auth-page-container .auth-card .btn-primary,
	.auth-page-container [data-testid='submit-button'],
	.auth-page-container .auth-logo,
	.auth-page-container .auth-oauth-buttons .btn {
		transition: none !important;
	}

	.auth-page-container .auth-card .btn-primary:hover:not(:disabled),
	.auth-page-container [data-testid='submit-button']:hover:not(:disabled),
	.auth-page-container .auth-oauth-buttons .btn:hover:not(:disabled) {
		transform: none !important;
	}
}