.auth-shell {
	position: relative;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* The brand column packs from the top and its footer follows directly; any
	   spare height stays below the footer instead of opening gaps. */
	grid-template-rows: auto minmax(0, 1fr);
}

.auth-brand {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-5);
	padding: var(--space-7) var(--space-7) var(--space-4);
	background: var(--color-surface);
	border-right: 1px solid var(--color-border);
	overflow: hidden;
}

.auth-brand__top {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.auth-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.auth-brand__copy {
	max-width: 46rem;
}

.auth-brand__copy h1 {
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.auth-brand__copy p {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* Two calls to action under the reel: the tour is the eye-catcher, the
   feature list a quieter text link beside it. */
.auth-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin-top: var(--space-5);
}

.auth-features-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	background: var(--color-surface-raised);
	color: var(--color-text);
	box-shadow: var(--shadow-sm);
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.auth-features-link span { transition: transform var(--duration-fast) var(--ease-standard); }
.auth-features-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); transform: translateY(-1px); }
.auth-features-link:hover span { transform: translateX(3px); }
.auth-features-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.auth-features-link:active { background: var(--accent-soft); color: var(--accent-strong); transform: translateY(0); }
.auth-features-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* The feature reel takes the brand panel's middle band on wide layouts,
   with See features directly under it; the stacked phone/tablet layout
   hides the reel and keeps the sign-in form near the top. */
.auth-brand__showcase {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* The inline reel is a preview: its stage and chapters shrink on shorter
   screens so both calls to action stay above the fold, its caption spans the
   whole column, and a click anywhere on it opens the full tour. */
.auth-brand .fr-reel {
	width: 100%;
	max-width: none;
}

.auth-brand :is(.fr-stage-wrap, .fr-chapters) {
	width: 100%;
	max-width: max(22rem, calc((100dvh - 32rem) * 1.78));
}

.auth-brand .fr-caption { grid-template-columns: minmax(0, 1fr); }
.auth-brand .fr-controls,
.auth-brand .fr-chapter .fr-name { display: none; }
.auth-brand .fr-stage-wrap { cursor: pointer; }

.auth-brand .fr-stage-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") center / 30px no-repeat;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
	pointer-events: none;
}

.auth-brand .fr-stage-wrap:hover::after,
.auth-brand .fr-stage-wrap:focus-visible::after { opacity: 1; transform: scale(1); }
.auth-brand .fr-stage-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.auth-brand__foot {
	grid-column: 1;
	grid-row: 2;
	display: grid;
	gap: var(--space-2);
	align-content: start;
	padding: var(--space-2) var(--space-7) var(--space-6);
	background: var(--color-surface);
	border-right: 1px solid var(--color-border);
	color: var(--color-text-faint);
	font-size: 0.8125rem;
}

.auth-brand__foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.auth-brand__foot a,
.auth-brand__foot button {
	padding: 0;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

.auth-brand__foot a:hover,
.auth-brand__foot button:hover {
	color: var(--accent);
}

/* The stage hangs from a fixed top line rather than centring, so the switch
   stays under the pointer while the card grows or shrinks during a flip. The
   offset roughly centres the shorter Sign in card. */
.auth-stage-wrap {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--space-6);
	padding-top: clamp(var(--space-8), calc(50dvh - 17.5rem), 30dvh);
	position: relative;
}

.auth-top-controls {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	display: flex;
	gap: var(--space-2);
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	--hover-duration: var(--duration-hover-compact);
	transition: background-color var(--hover-duration) var(--ease-hover), color var(--hover-duration) var(--ease-hover), border-color var(--hover-duration) var(--ease-hover), opacity var(--hover-duration) var(--ease-hover);
}

.icon-button:hover {
	background: var(--color-border);
	color: var(--color-text);
}

.icon-button svg {
	width: 20px;
	height: 20px;
}

.auth-stage {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	max-width: 26rem;
}

/* The form card: a sheet of paper that flips horizontally in 3D between
   Sign in and Create account while its height eases to the new content
   (auth.js). The buddy peeks over its top edge from behind. */
.auth-card-wrap {
	position: relative;
	margin-top: 22px;
	perspective: 1400px;
}

.auth-card {
	position: relative;
	z-index: 1;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	background: var(--color-surface);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent), 0 14px 40px color-mix(in srgb, var(--color-text) 8%, transparent);
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	will-change: transform;
}

.auth-card.is-flipping { overflow: hidden; }

/* Light falling across the sheet as it turns. */
.auth-card-shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 18%, transparent), transparent 55%, color-mix(in srgb, #fff 30%, transparent));
	opacity: 0;
	pointer-events: none;
}

.auth-buddy {
	position: absolute;
	top: -30px;
	right: 26px;
	z-index: 0;
	width: 60px;
	height: 38px;
	transition: transform var(--duration-base) var(--ease-standard);
}

.auth-buddy svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-buddy-body { fill: var(--accent); }
.auth-buddy-white { fill: #fff; }
.auth-buddy-pupil { fill: #16181f; transition: transform 120ms ease-out; }
.auth-buddy-lid {
	fill: var(--accent);
	transform: scaleY(0);
	transform-box: fill-box;
	transform-origin: 50% 0;
	transition: transform 140ms ease-in-out;
}

/* Two small paws hold the card's top edge in front of it; they let go while
   the card turns and grab on again once it is flat. */
.auth-buddy-paws {
	position: absolute;
	top: -4px;
	right: 32px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	width: 48px;
	pointer-events: none;
	transition: opacity 160ms ease, transform var(--duration-base) var(--ease-standard);
}

.auth-buddy-paws span {
	width: 13px;
	height: 9px;
	border-radius: 7px 7px 5px 5px;
	background: var(--accent);
	box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}

.auth-card-wrap:has(.auth-card.is-flipping) .auth-buddy-paws {
	opacity: 0;
	transform: translateY(-6px);
	transition-duration: 90ms;
}

.auth-buddy.is-blinking .auth-buddy-lid,
.auth-buddy.is-shy .auth-buddy-lid { transform: scaleY(1); }
.auth-buddy.is-shy { transform: translateY(6px); }
.auth-buddy.is-hopping { animation: auth-buddy-hop 520ms var(--ease-standard); }

@keyframes auth-buddy-hop {
	0%, 100% { transform: translateY(0); }
	35% { transform: translateY(-8px); }
	60% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
	.auth-buddy, .auth-buddy-pupil, .auth-buddy-lid, .auth-buddy-paws { transition: none; }
	.auth-buddy.is-hopping { animation: none; }
}

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

.auth-panel[hidden] {
	display: none;
}

.auth-panel.is-entering {
	animation: auth-panel-fade var(--duration-base) var(--ease-standard);
}

@keyframes auth-panel-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.auth-panel.is-entering {
		animation: none;
	}
}

.auth-panel__head h2 {
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-1);
}

/* auth.js moves DOM focus to the panel heading on every panel switch
   (tabindex="-1" + .focus()) purely so screen readers announce the new
   panel; it is never reachable by real Tab-key navigation (tabindex="-1"
   excludes it from the tab order), so a sighted keyboard user can never
   land here themselves. Without this, the browser's default focus
   indication (our own :focus-visible outline, plus Chrome/Safari's native
   highlight for a focused non-form element) rendered on every panel
   switch and on first load, looking like a stray, meaningless selection
   box around the heading. */
.auth-panel h2:focus {
	outline: none;
}

.auth-panel__head p {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

/* One switch above the card; the thumb slides between the two modes. */
.auth-switch {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	background: color-mix(in srgb, var(--color-bg) 84%, var(--color-border));
	border: 1px solid var(--color-border-strong);
	border-radius: 14px;
	box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.auth-switch[hidden] { display: none; }

.auth-switch-thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--color-border));
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent) 10%, var(--color-surface));
	box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--accent);
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.auth-switch[data-mode="register"] .auth-switch-thumb { transform: translateX(100%); }

.auth-switch button {
	position: relative;
	z-index: 1;
	padding: 10px var(--space-3);
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: color 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.auth-switch button:hover { color: var(--color-text); }
.auth-switch button[aria-pressed="true"] { color: var(--accent-strong); }
.auth-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.auth-switch-thumb, .auth-switch button { transition: none; }
}

/* Even rhythm inside the card: label to field 6px, one group to the next
   16px (the reserved error line included), actions set a little apart. */
.auth-panel form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.auth-panel form > .btn-primary { margin-top: var(--space-2); }

.field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
}

.field-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.field-input {
	width: 100%;
	padding: 11px var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 0.9375rem;
	transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.field-input:focus-visible {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

.field-input.has-error {
	border-color: var(--color-danger);
}

.field-input[type="password"] {
	padding-right: 44px;
}

.field-toggle-visibility {
	position: absolute;
	right: 6px;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--color-text-faint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.field-toggle-visibility:hover {
	color: var(--color-text);
	background: var(--color-border);
}

.field-hint {
	font-size: 0.75rem;
	color: var(--color-text-faint);
}

.field-error {
	font-size: 0.75rem;
	color: var(--color-danger);
	margin: 0;
}

.field-error:empty {
	display: none;
}

.field-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.password-strength {
	display: flex;
	gap: 4px;
	margin-top: 2px;
}

.password-strength__bar {
	height: 4px;
	flex: 1;
	border-radius: 999px;
	background: var(--color-border);
	transition: background var(--duration-fast) var(--ease-standard);
}

.password-strength[data-level="1"] .password-strength__bar:nth-child(1) { background: var(--color-danger); }
.password-strength[data-level="2"] .password-strength__bar:nth-child(-n+2) { background: var(--color-warning); }
.password-strength[data-level="3"] .password-strength__bar:nth-child(-n+3) { background: var(--color-success); }
.password-strength[data-level="4"] .password-strength__bar { background: var(--color-success); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px var(--space-4);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	font-weight: 600;
	--hover-duration: var(--duration-hover-normal);
	transition: background-color var(--hover-duration) var(--ease-hover), color var(--hover-duration) var(--ease-hover), border-color var(--hover-duration) var(--ease-hover), opacity var(--hover-duration) var(--ease-hover);
}

.btn-primary {
	background: var(--accent);
	color: var(--accent-contrast);
	width: 100%;
}

.btn-primary:hover {
	background: var(--accent-strong);
}

.btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-link {
	color: var(--color-text-muted);
	font-size: 0.875rem;
	font-weight: 500;
	padding: var(--space-1) 0;
}

.btn-link:hover {
	color: var(--accent);
}

.auth-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
}

.checkbox-field {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.checkbox-field input {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

.form-alert {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-danger-soft);
	color: var(--color-danger);
	font-size: 0.875rem;
	line-height: 1.5;
}

.form-alert[hidden] {
	display: none;
}

.form-alert.is-success {
	background: rgba(31, 157, 106, 0.12);
	color: var(--color-success);
}

.auth-footer-note {
	margin-top: 0.5rem;
	padding-inline: var(--space-3);
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-text-faint);
}

.verify-icon-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-2);
}

.verify-icon-wrap svg {
	width: 48px;
	height: 48px;
	color: var(--accent);
}

.auth-invitation-detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-raised);
}

.auth-invitation-detail strong { font-size: 1rem; }
.auth-invitation-detail span { color: var(--color-text-muted); font-size: 0.8125rem; }
.auth-invitation-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Mid-width windows have a narrow brand column where the pitch wraps to more
   lines, so the preview leaves a little more height for text. */
@media (min-width: 901px) and (max-width: 1200px) {
	.auth-brand {
		padding-inline: var(--space-6);
	}

	.auth-brand__foot {
		padding-inline: var(--space-6);
	}

	.auth-brand :is(.fr-stage-wrap, .fr-chapters) {
		max-width: max(20rem, calc((100dvh - 36rem) * 1.78));
	}
}

/* Stacked phone/tablet layout: brand and pitch, the two calls to action,
   the form, then the footer last. The theme toggle joins the brand row. */
@media (max-width: 900px) {
	.auth-shell {
		display: flex;
		flex-direction: column;
	}

	.auth-brand {
		gap: var(--space-5);
		justify-content: flex-start;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-5) var(--space-5) var(--space-6);
	}

	.auth-brand__top {
		min-height: 40px;
		padding-right: 48px;
	}

	.auth-brand__copy {
		max-width: 36rem;
	}

	.auth-brand__copy h1 {
		margin-bottom: var(--space-3);
		font-size: clamp(1.75rem, 7.4vw, 2.25rem);
		line-height: 1.12;
	}

	.auth-brand__copy p {
		font-size: 0.9375rem;
	}

	.auth-brand .fr-reel {
		display: none;
	}

	.auth-brand__showcase {
		margin-block: 0;
	}

	.auth-cta-row {
		margin-top: 0;
	}

	.auth-stage-wrap {
		position: static;
		padding: var(--space-6) var(--space-5);
	}

	.auth-top-controls {
		top: var(--space-5);
		right: var(--space-4);
	}

	.auth-brand__foot {
		justify-items: center;
		gap: var(--space-3);
		padding: var(--space-5) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
		border-right: none;
		border-top: 1px solid var(--color-border);
		text-align: center;
	}

	.auth-brand__foot nav {
		justify-content: center;
		gap: var(--space-2) var(--space-4);
	}
}

@media (max-width: 480px) {
	.auth-brand, .auth-stage-wrap {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	/* Both calls to action share one row on phones. */
	.auth-cta-row {
		flex-wrap: nowrap;
		gap: var(--space-2);
	}

	.auth-cta-row .tour-button {
		flex: none;
		gap: 8px;
		padding-right: 16px;
		font-size: 0.875rem;
	}

	.auth-cta-row .tour-button small { display: none; }

	.auth-features-link {
		flex: 0 1 auto;
		min-width: 0;
		padding: 0 14px;
		font-size: 0.875rem;
		white-space: nowrap;
	}
}