/*
 * Account pages (log in, register, forgot, reset, verify), the in-app 404, and the
 * maintenance and error pages. One stylesheet for the set.
 *
 * Mobile first: the brand column is a slim gradient band above the card, its illustration
 * capped at 200px so the form stays above the fold. From 60rem it becomes a full-height
 * column beside the card. All motion lives in the reduced-motion block at the end; outside
 * it every state is simply shown finished.
 */

/* ==========================================================================
   Split-screen layout
   ========================================================================== */

.ivp-app .ivp-auth-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--ivp-bg);
}

.ivp-app .ivp-auth-hero {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ivp-sp-2);
	padding: var(--ivp-sp-3) var(--ivp-sp-4) var(--ivp-sp-2);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--ivp-bg);
	background-image: var(--ivp-grad-mesh);
	border-bottom: 1px solid var(--ivp-border);
}

.ivp-app .ivp-auth-hero__blob {
	--ivp-blob-size: 12rem;
	--ivp-blob-opacity: 0.4;
	z-index: -1;
}

.ivp-app .ivp-auth-hero__blob--a {
	top: -5rem;
	left: -4rem;
}

.ivp-app .ivp-auth-hero__blob--b {
	right: -4rem;
	bottom: -6rem;
}

.ivp-app .ivp-auth-hero__logo {
	align-self: flex-start;
}

.ivp-app .ivp-auth-hero__copy,
.ivp-app .ivp-auth-trust {
	display: none;
}

.ivp-app .ivp-auth-art {
	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0;
}

.ivp-app .ivp-auth-art__float {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

.ivp-app .ivp-auth-art .ivp-illus {
	display: block;
	width: auto;
	max-width: 100%;
	height: min(200px, 26vh);
}

.ivp-app .ivp-auth-main {
	display: flex;
	flex-direction: column;
	gap: var(--ivp-sp-4);
	min-width: 0;
	padding: var(--ivp-sp-3) var(--ivp-sp-4) var(--ivp-sp-12);
}

.ivp-app .ivp-auth-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ivp-sp-2);
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
}

.ivp-app .ivp-auth-card-wrap {
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
}

.ivp-app .ivp-auth-card {
	display: grid;
	padding: var(--ivp-sp-6) var(--ivp-sp-5);
	border-radius: var(--ivp-r-2xl);
	box-shadow: var(--ivp-shadow-xl);
}

.ivp-app .ivp-auth-card:focus {
	outline: none;
}

.ivp-app .ivp-auth-card:focus-visible {
	outline: 2px solid var(--ivp-focus);
	outline-offset: 3px;
}

@media (min-width: 30rem) {
	.ivp-app .ivp-auth-card {
		padding: var(--ivp-sp-8);
	}
}

@media (min-width: 60rem) {
	.ivp-app .ivp-auth-layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.ivp-app .ivp-auth-hero {
		position: sticky;
		top: 0;
		display: grid;
		align-content: center;
		justify-items: start;
		gap: var(--ivp-sp-8);
		height: 100vh;
		height: 100dvh;
		padding: var(--ivp-sp-12) var(--ivp-sp-10);
		border-right: 1px solid var(--ivp-border);
		border-bottom: 0;
	}

	.ivp-app .ivp-auth-hero__blob {
		--ivp-blob-size: 22rem;
	}

	.ivp-app .ivp-auth-hero__logo {
		position: absolute;
		top: var(--ivp-sp-6);
		left: var(--ivp-sp-10);
	}

	.ivp-app .ivp-auth-hero__copy {
		display: grid;
		gap: var(--ivp-sp-3);
		max-width: 28rem;
	}

	.ivp-app .ivp-auth-art {
		justify-content: flex-start;
	}

	.ivp-app .ivp-auth-art .ivp-illus {
		width: min(100%, 26rem);
		height: auto;
	}

	.ivp-app .ivp-auth-trust {
		display: grid;
	}

	.ivp-app .ivp-auth-main {
		justify-content: center;
		padding: var(--ivp-sp-8) var(--ivp-sp-10);
	}
}

/* Brand column copy */
.ivp-app .ivp-auth-hero__headline {
	margin: 0;
	font-size: var(--ivp-fs-4xl);
	font-weight: var(--ivp-fw-black);
	line-height: var(--ivp-lh-tight);
	letter-spacing: var(--ivp-ls-tight);
	color: var(--ivp-text);
}

.ivp-app .ivp-auth-hero__text {
	margin: 0;
	font-size: var(--ivp-fs-lg);
	color: var(--ivp-text-muted);
}

/* Trust points */
.ivp-app .ivp-auth-trust {
	gap: var(--ivp-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivp-app .ivp-auth-trust__item {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	color: var(--ivp-text);
}

.ivp-app .ivp-auth-trust__icon {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--ivp-r-md);
	color: var(--ivp-primary);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-auth-trust__icon > .ivp-icon {
	--ivp-icon-size: 1.125rem;
}

/* ==========================================================================
   Card contents
   ========================================================================== */

.ivp-app .ivp-auth-face {
	display: grid;
	gap: var(--ivp-sp-5);
	min-width: 0;
}

.ivp-app .ivp-auth-head {
	display: grid;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-auth-title {
	margin: 0;
	font-size: var(--ivp-fs-3xl);
	line-height: var(--ivp-lh-tight);
	letter-spacing: var(--ivp-ls-tight);
}

.ivp-app .ivp-auth-title:focus {
	outline: none;
}

.ivp-app .ivp-auth-sub {
	margin: 0;
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-auth-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ivp-sp-2) var(--ivp-sp-4);
}

.ivp-app .ivp-auth-row__link {
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-auth-foot {
	margin: 0;
	font-size: var(--ivp-fs-sm);
	text-align: center;
}

.ivp-app .ivp-auth-foot .ivp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-auth-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-2);
	margin: 0;
	padding: var(--ivp-sp-3) var(--ivp-sp-4);
	border-radius: var(--ivp-r-md);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-auth-plan > .ivp-icon {
	color: var(--ivp-primary);
}

.ivp-app .ivp-auth-plan > .ivp-link {
	margin-inline-start: auto;
}

/* Honeypot: off-screen, out of the tab order, hidden from assistive tech. */
.ivp-app .ivp-auth-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Terms checkbox with a drawn tick */
.ivp-app .ivp-auth-terms {
	align-items: flex-start;
}

.ivp-app .ivp-auth-terms .ivp-check__box {
	margin-top: 0.0625rem;
}

.ivp-app .ivp-auth-terms .ivp-check__label {
	line-height: var(--ivp-lh-snug);
	padding-top: 0.125rem;
}

.ivp-app .ivp-auth-tick__svg {
	display: block;
	width: 0.9375rem;
	height: 0.9375rem;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.ivp-app .ivp-check__input:checked + .ivp-auth-tick .ivp-auth-tick__svg {
	stroke-dashoffset: 0;
}

.ivp-app .ivp-field.is-invalid .ivp-check__box {
	border-color: var(--ivp-danger);
}

/* reCAPTCHA renders a fixed 304px box: clip it rather than ever scroll sideways. */
.ivp-app .ivp-captcha {
	max-width: 100%;
	min-height: 78px;
	overflow: hidden;
}

@media (max-width: 23.99rem) {
	.ivp-app .ivp-captcha > div {
		transform: scale(0.88);
		transform-origin: 0 0;
	}
}

/* Status faces: success, sent, expired, pending */
.ivp-app .ivp-auth-status {
	justify-items: center;
	text-align: center;
}

.ivp-app .ivp-auth-status__art {
	width: min(100%, 14rem);
}

.ivp-app .ivp-auth-status__chip {
	--ivp-chip-size: 3.5rem;
	border-radius: var(--ivp-r-lg);
}

.ivp-app .ivp-auth-status__chip--success {
	color: var(--ivp-success);
	background: var(--ivp-success-soft);
}

.ivp-app .ivp-auth-status__chip--warning {
	color: var(--ivp-warning);
	background: var(--ivp-warning-soft);
}

.ivp-app .ivp-auth-status__spinner {
	color: var(--ivp-primary);
}

.ivp-app .ivp-auth-status__spinner .ivp-icon {
	--ivp-icon-size: 2.5rem;
}

.ivp-app .ivp-auth-status__actions {
	display: grid;
	gap: var(--ivp-sp-3);
	width: 100%;
	text-align: start;
}

.ivp-app .ivp-auth-status .ivp-auth-alert {
	width: 100%;
	text-align: start;
}

.ivp-app .ivp-auth-countdown {
	min-height: 1.5em;
	margin: 0;
	font-weight: var(--ivp-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--ivp-primary);
}

/* Illustration states that are visible without motion too */
.ivp-app .ivp-auth-art.is-sent .ivp-il-plane {
	opacity: 0;
}

.ivp-app [data-ivp-state="pending"] .ivp-illus--verify .ivp-il-pop {
	opacity: 0;
}

/* ==========================================================================
   In-app 404
   ========================================================================== */

.ivp-app .ivp-404 {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--ivp-sp-4);
	max-width: 46rem;
	margin-inline: auto;
	padding-bottom: var(--ivp-sp-16);
	text-align: center;
}

.ivp-app .ivp-404__art {
	position: relative;
	z-index: 0;
	width: min(100%, 22rem);
	isolation: isolate;
}

.ivp-app .ivp-404__blob {
	--ivp-blob-size: 14rem;
	--ivp-blob-opacity: 0.32;
	z-index: -1;
}

.ivp-app .ivp-404__blob--a {
	top: -2rem;
	left: -3rem;
}

.ivp-app .ivp-404__blob--b {
	right: -3rem;
	bottom: -2rem;
}

.ivp-app .ivp-404__code {
	margin: calc(-1 * var(--ivp-sp-6)) 0 0;
	font-size: clamp(5rem, 3rem + 10vw, 9rem);
	font-weight: var(--ivp-fw-black);
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--ivp-primary);
	background: var(--ivp-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ivp-app .ivp-404__title {
	margin: 0;
	font-size: var(--ivp-fs-3xl);
	line-height: var(--ivp-lh-tight);
}

.ivp-app .ivp-404__text {
	max-width: 34rem;
	margin: 0;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ivp-sp-3);
}

.ivp-app .ivp-404__search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ivp-sp-2);
	width: 100%;
	max-width: 32rem;
	margin-top: var(--ivp-sp-4);
}

.ivp-app .ivp-404__search:focus {
	outline: none;
}

.ivp-app .ivp-404__search .ivp-search {
	flex: 1 1 14rem;
	min-width: 0;
}

.ivp-app .ivp-404__search > .ivp-btn {
	flex: 0 0 auto;
}

.ivp-app .ivp-404__results {
	display: grid;
	gap: var(--ivp-sp-3);
	width: 100%;
	max-width: 32rem;
	text-align: start;
}

.ivp-app .ivp-404__none {
	margin: 0;
	text-align: center;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-404__results-title {
	margin: 0;
	font-size: var(--ivp-fs-lg);
}

.ivp-app .ivp-404__list {
	display: grid;
	gap: var(--ivp-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivp-app .ivp-404__item {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-width: 0;
	padding: var(--ivp-sp-3);
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-lg);
	color: var(--ivp-text);
	text-decoration: none;
	background: var(--ivp-surface);
}

.ivp-app .ivp-404__item:hover {
	border-color: var(--ivp-primary);
	box-shadow: var(--ivp-shadow-md);
}

.ivp-app .ivp-404__item:focus-visible {
	outline: 2px solid var(--ivp-focus);
	outline-offset: 2px;
}

.ivp-app .ivp-404__item-icon {
	--ivp-chip-size: 2.5rem;
}

.ivp-app .ivp-404__item-body {
	display: grid;
	min-width: 0;
}

.ivp-app .ivp-404__item-title {
	overflow: hidden;
	font-weight: var(--ivp-fw-semibold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ivp-app .ivp-404__item-meta {
	font-size: var(--ivp-fs-xs);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-404__item-go {
	margin-inline-start: auto;
	color: var(--ivp-text-subtle);
}

/* ==========================================================================
   Maintenance and error pages
   ========================================================================== */

.ivp-app .ivp-status {
	position: relative;
	z-index: 0;
	display: grid;
	align-content: start;
	justify-items: center;
	gap: var(--ivp-sp-8);
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--ivp-sp-4) var(--ivp-sp-4) var(--ivp-sp-12);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--ivp-bg);
	background-image: var(--ivp-grad-mesh);
}

.ivp-app .ivp-status:focus {
	outline: none;
}

.ivp-app .ivp-status__blob {
	--ivp-blob-size: 18rem;
	--ivp-blob-opacity: 0.38;
	z-index: -1;
}

.ivp-app .ivp-status__blob--a {
	top: -6rem;
	left: -6rem;
}

.ivp-app .ivp-status__blob--b {
	right: -6rem;
	bottom: -6rem;
}

.ivp-app .ivp-status__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ivp-sp-3);
	width: 100%;
	max-width: var(--ivp-container);
}

.ivp-app .ivp-status__card {
	width: 100%;
	max-width: 36rem;
	padding: var(--ivp-sp-2) var(--ivp-sp-4) var(--ivp-sp-6);
	border-radius: var(--ivp-r-2xl);
	box-shadow: var(--ivp-shadow-xl);
}

.ivp-app .ivp-status__empty {
	padding-block: var(--ivp-sp-8) var(--ivp-sp-4);
}

.ivp-app .ivp-status__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-2);
	margin: 0;
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-status__ref code {
	padding: var(--ivp-sp-1) var(--ivp-sp-2);
	border-radius: var(--ivp-r-sm);
	font-family: var(--ivp-font-mono);
	color: var(--ivp-text);
	background: var(--ivp-surface-2);
}

@media (min-width: 48rem) {
	.ivp-app .ivp-status {
		padding: var(--ivp-sp-6) var(--ivp-sp-8) var(--ivp-sp-16);
	}
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Trust point icons */
	.ivp-app .ivp-auth-trust__icon--0 > .ivp-icon {
		animation: ivp-bounceSoft 2.6s var(--ivp-ease) infinite;
		--ivp-bounce: -3px;
	}

	.ivp-app .ivp-auth-trust__icon--1 > .ivp-icon {
		animation: ivp-pulse 2.2s var(--ivp-ease-in-out) infinite;
		--ivp-pulse-scale: 1.15;
	}

	.ivp-app .ivp-auth-trust__icon--2 > .ivp-icon {
		animation: ivp-spin 14s linear infinite;
	}

	/* Validation feedback */
	.ivp-app .ivp-field.is-valid .ivp-field__status-valid,
	.ivp-app .ivp-field.is-invalid .ivp-field__status-invalid {
		--ivp-slide: 10px;
		animation: ivp-slideInRight var(--ivp-dur) var(--ivp-ease) both;
	}

	.ivp-app .ivp-field.is-loading .ivp-field__status-loading {
		animation: ivp-spin 0.8s linear infinite;
	}

	.ivp-app .ivp-field.is-shaking .ivp-control,
	.ivp-app .ivp-field.is-shaking .ivp-check__box,
	.ivp-app .ivp-field.is-shaking .ivp-captcha {
		animation: ivp-shake 0.4s var(--ivp-ease-in-out);
	}

	.ivp-app .ivp-field__msg:not(:empty) {
		animation: ivp-fadeIn var(--ivp-dur) var(--ivp-ease) both;
	}

	.ivp-app .ivp-auth-tick__svg {
		transition: stroke-dashoffset var(--ivp-dur) var(--ivp-ease) 0.05s;
	}

	.ivp-app .ivp-check__input:checked + .ivp-auth-tick {
		animation: ivp-checkPop 0.4s var(--ivp-ease-spring);
	}

	/* Card: one short shake on failure, flip between faces, slide out on success */
	.ivp-app .ivp-auth-card.is-shaking {
		--ivp-shake: 8px;
		animation: ivp-shake 0.45s var(--ivp-ease-in-out);
	}

	.ivp-app .ivp-auth-face.is-flip-out {
		animation: ivp-flipOut 0.28s ease-in forwards;
	}

	.ivp-app .ivp-auth-face.is-flip-in {
		animation: ivp-flipIn 0.45s var(--ivp-ease) both;
	}

	.ivp-app .ivp-auth-card.is-leaving {
		--ivp-slide: 56px;
		animation: ivp-slideInRight var(--ivp-dur-slow) var(--ivp-ease) reverse forwards;
	}

	/* Illustration moments */
	.ivp-app .ivp-auth-art.is-unlocking .ivp-il-key {
		animation: ivp-keyUnlock 0.9s var(--ivp-ease-in-out) forwards;
	}

	.ivp-app .ivp-auth-art.is-sent .ivp-il-plane {
		animation: ivp-planeAway 1.1s var(--ivp-ease) forwards;
	}

	.ivp-app .ivp-auth-art.is-locked .ivp-il-shackle {
		stroke-dasharray: 1;
		animation: ivp-shackleClose 1.1s var(--ivp-ease) both;
	}

	/* Verify: hold the envelope closed until the token is confirmed, then let it play. */
	.ivp-app [data-ivp-state="pending"] .ivp-auth-art .ivp-illus *,
	.ivp-app [data-ivp-state="pending"] .ivp-auth-art .ivp-auth-art__float {
		animation-play-state: paused;
	}

	.ivp-app .ivp-auth-status__chip {
		animation: ivp-checkPop 0.5s var(--ivp-ease-spring) both;
	}

	.ivp-app .ivp-auth-status__art .ivp-illus {
		animation: ivp-scaleIn var(--ivp-dur-slow) var(--ivp-ease-spring) both;
	}

	/* 404 */
	.ivp-app .ivp-404__item {
		transition: border-color var(--ivp-dur-fast) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-404__item:hover {
		transform: translate3d(0, -2px, 0);
	}

	.ivp-app .ivp-404__item:hover .ivp-404__item-go {
		animation: ivp-bounceSoft 1s var(--ivp-ease);
	}

	.ivp-app .ivp-404__code {
		background-size: 200% 200%;
		animation: ivp-scaleIn var(--ivp-dur-slow) var(--ivp-ease-spring) both, ivp-gradientShift 8s var(--ivp-ease-in-out) infinite;
	}
}