/* Arrival theme copied from chat.swoopp.org/static/custom.css, 2026-09-18.
 * Lattice geometry, responsive dimensions, typography, form and footer metrics
 * are shared with chat; the palette and terminal code label are the variants.
 * IBM Plex Sans is served locally under the accompanying SIL OFL 1.1 license.
 */
* { box-sizing: border-box; border: 0 solid; }
html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; color-scheme: dark; }
button, input { font: inherit; color: inherit; padding: 0; margin: 0; background: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
#auth-page { position: relative; width: 100%; height: 100vh; max-height: 100dvh; }
#auth-container { position: fixed; inset: 0; min-height: 100vh; width: 100%; display: flex; justify-content: center; }
.signin-column { width: 100%; padding-inline: 40px; display: flex; flex-direction: column; text-align: center; }
.signin-center { margin-block: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#auth-login-card { width: 100%; }
#signin, .fields { display: flex; flex-direction: column; justify-content: center; }
#signin label { display: block; text-align: left; margin-bottom: 4px; line-height: 1.4285714286; }
.email-field { margin-bottom: 8px; }
#signin input { margin-block: 2px; width: 100%; font-size: 14px; line-height: 20px; outline: none; }
.password-field { display: flex; flex: 1; }
#signin #password { padding-block: 2px; min-width: 0; }
#password-toggle { padding-left: 6px; flex: none; }
#password-toggle svg { display: block; vertical-align: middle; width: 16px; height: 16px; }
.submit-row { margin-top: 20px; }
#signin button[type=submit] { width: 100%; display: flex; justify-content: center; font-size: 14px; line-height: 20px; padding-block: 10px; }
#signin button:disabled { opacity: .5; cursor: wait; }
#error { margin: 0; color: #ffb7ab; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#signin-challenge { display: flex; justify-content: center; width: 100%; }
#error:not(:empty) { margin-top: 12px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: #082b17; color: #d2ffe1; }
.skip-link:focus { top: 12px; }


@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url('/__portal/portal-ui-font.woff2') format('woff2');
}

#auth-page,
#splash-screen {

	--swoopp-font: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, sans-serif;

	--swoopp-band-top: 2.75rem;
	--swoopp-band-bottom: 2.75rem;
	--swoopp-chrome-top: calc(var(--swoopp-band-top) + env(safe-area-inset-top, 0px));
	--swoopp-chrome-bottom: calc(var(--swoopp-band-bottom) + env(safe-area-inset-bottom, 0px));

	--swoopp-tile: clamp(104px, 20vmin, 208px);
	--swoopp-period: calc(var(--swoopp-tile) * 0.4472);
	--swoopp-drift: calc(var(--swoopp-tile) * -0.5);

	--swoopp-void: #010a05;
	--swoopp-strong: #f4fff7;
	--swoopp-muted: rgba(168, 236, 188, 0.85);
	--swoopp-dim: rgba(168, 236, 188, 0.55);
	--swoopp-cyan: rgba(64, 255, 140, 0.92);
	--swoopp-rule: rgba(40, 235, 116, 0.26);
	--swoopp-accent: rgba(40, 235, 116, 0.62);

	--swoopp-field:
		repeating-linear-gradient(
			26.565deg,
			rgba(126, 255, 175, 0.2) 0 1px,
			rgba(8, 72, 38, 0.5) 1px 4px,
			rgba(8, 72, 38, 0) 4px var(--swoopp-period)
		),
		repeating-linear-gradient(
			153.435deg,
			rgba(126, 255, 175, 0.2) 0 1px,
			rgba(8, 72, 38, 0.5) 1px 4px,
			rgba(8, 72, 38, 0) 4px var(--swoopp-period)
		),
		repeating-linear-gradient(
			26.565deg,
			rgba(45, 186, 102, 0.17) 0,
			rgba(45, 186, 102, 0) calc(var(--swoopp-period) * 0.72),
			rgba(45, 186, 102, 0) var(--swoopp-period)
		),
		repeating-linear-gradient(
			153.435deg,
			rgba(45, 186, 102, 0.17) 0,
			rgba(45, 186, 102, 0) calc(var(--swoopp-period) * 0.72),
			rgba(45, 186, 102, 0) var(--swoopp-period)
		);
}

#splash-screen {
	background-color: var(--swoopp-void) !important;

	background-image:
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.49) 100%),
		radial-gradient(
			120% 78% at 50% 44%,
			rgba(10, 78, 40, 0.52) 0%,
			rgba(2, 24, 12, 0.34) 34%,
			rgba(1, 8, 4, 0.76) 82%
		),
		var(--swoopp-field) !important;
}

#splash-screen img#logo,
#splash-screen img#logo-her {
	display: none !important;
}

#splash-screen #progress-background,
#splash-screen #progress-bar {
	display: none;
}

#splash-screen::before {
	content: 'swoopp';
	position: absolute;
	top: env(safe-area-inset-top, 0px);
	left: 0;
	right: 0;
	height: var(--swoopp-band-top);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--swoopp-font);
	font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--swoopp-muted);
	text-shadow: 0 0 24px rgba(40, 235, 116, 0.18);
}

#splash-screen::after {

	--swoopp-cue: calc(var(--swoopp-tile) * 0.34);

	content: '';
	position: absolute;
	top: var(--swoopp-chrome-top);
	right: 0;
	bottom: var(--swoopp-chrome-bottom);
	left: 0;
	margin: auto;
	width: var(--swoopp-cue);
	height: calc(var(--swoopp-cue) / 2);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	background-image: linear-gradient(
		to bottom,
		rgba(220, 255, 232, 0.95),
		rgba(0, 180, 88, 0.6)
	);

	filter: drop-shadow(0 calc(var(--swoopp-cue) * 0.13) 0 rgba(0, 142, 65, 0.85))
		drop-shadow(0 0 calc(var(--swoopp-cue) * 0.6) rgba(40, 235, 116, 0.5));
	will-change: opacity;
	animation: swoopp-splash-breathe 3.2s ease-in-out infinite;
}

@keyframes swoopp-splash-breathe {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}

#auth-page {

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	font-family: var(--swoopp-font);
	background-color: var(--swoopp-void);
}

#auth-page::after {
	content: '';
	position: fixed;
	left: calc(var(--swoopp-tile) * -1);
	right: calc(var(--swoopp-tile) * -1);
	top: calc(var(--swoopp-tile) * -1);
	bottom: calc(var(--swoopp-tile) * -1);
	z-index: 0;
	pointer-events: none;
	background-color: var(--swoopp-void);
	background-image: var(--swoopp-field);
	background-repeat: repeat;
	will-change: auto;
	animation: none;
}

@keyframes swoopp-field-drift {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, var(--swoopp-drift), 0);
	}
}

#auth-page #auth-container::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.58) 100%),
		radial-gradient(
			120% 78% at 50% 44%,
			rgba(10, 78, 40, 0.62) 0%,
			rgba(2, 24, 12, 0.4) 34%,
			rgba(1, 8, 4, 0.9) 82%
		);
	animation: swoopp-field-breathe 14s ease-in-out infinite;
}

@keyframes swoopp-field-breathe {
	0%,
	100% {
		opacity: 0.84;
	}
	50% {
		opacity: 1;
	}
}

#auth-page #auth-container {
	z-index: 60;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--swoopp-chrome-top) var(--swoopp-chrome-bottom);
	font-family: var(--swoopp-font);
	color: var(--swoopp-strong);
}

#auth-page #auth-container > div {
	min-height: calc(100dvh - var(--swoopp-chrome-top) - var(--swoopp-chrome-bottom));
}

#auth-page .swoopp-header,
#auth-page .swoopp-footer {
	position: relative;
	z-index: 70;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-inline: 1rem;
	pointer-events: none;
}

#auth-page .swoopp-header {
	min-height: var(--swoopp-chrome-top);
	padding-top: env(safe-area-inset-top, 0px);
}

#auth-page .swoopp-footer {
	min-height: var(--swoopp-chrome-bottom);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

#auth-page .swoopp-footer a {
	pointer-events: auto;
}

#auth-page .swoopp-mark {
	margin: 0;
	font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	font-weight: 400;
	line-height: 1.2;
	text-transform: lowercase;
	white-space: nowrap;
	color: var(--swoopp-dim);
}

#auth-page .swoopp-mark-name {
	letter-spacing: -0.03em;
	color: var(--swoopp-muted);
	text-shadow: 0 0 24px rgba(40, 235, 116, 0.18);
}

#auth-page .swoopp-mark-separator {
	margin-inline: 0.65em;
	color: rgba(40, 235, 116, 0.32);
}

#auth-page .swoopp-mark-scope {
	margin-right: -0.22em;
	font-weight: 300;
	letter-spacing: 0.22em;
}

#auth-login-card {
	position: relative;
	margin-inline: auto;
	max-width: 22rem;
	padding: clamp(1.375rem, 4.5vw, 1.875rem) clamp(1rem, 3.5vw, 1.5rem)
		clamp(1.625rem, 5vw, 2.125rem);
	border: 1px solid var(--swoopp-rule);
	border-radius: 2px;
	background-color: rgba(8, 45, 23, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(160, 255, 196, 0.1),
		0 24px 64px -28px rgba(0, 170, 80, 0.55);
	font-family: var(--swoopp-font);
}

@supports (backdrop-filter: blur(1px)) {
	#auth-login-card {
		background-color: rgba(8, 45, 23, 0.44);
		backdrop-filter: blur(10px) saturate(1.1);
	}
}

#auth-page img#logo {
	display: none;
}

#auth-login-card form .text-2xl,
#auth-page .swoopp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

#auth-login-card form .text-2xl + div {
	display: none;
}

#auth-login-card form > div:has(> .text-2xl) {
	margin-bottom: 0;
}

#auth-login-card form > div:has(input#email) {
	margin-top: 0;
}

#auth-login-card form label {
	color: var(--swoopp-dim);
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: lowercase;
}

#auth-login-card button {
	font-family: var(--swoopp-font);
}

/* Inputs take the system font: the bundled IBM Plex subset covers Latin only,
 * so browser-autofilled text with other scripts rendered as boxes. */
#auth-login-card input,
#auth-login-card select,
#auth-login-card textarea {
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

#auth-login-card input,
#auth-login-card select,
#auth-login-card textarea {
	background-color: transparent;
	color: var(--swoopp-strong);
	caret-color: var(--swoopp-cyan);
}

#auth-login-card input::placeholder {
	color: rgba(168, 236, 188, 0.4);
}

#auth-login-card div:has(> input#email),
#auth-login-card div:has(> input#password) {
	border-bottom: 1px solid var(--swoopp-rule);
	padding-bottom: 0.25rem;
	transition: border-color 150ms ease;
}

#auth-login-card div:has(> input#email:focus),
#auth-login-card div:has(> input#password:focus) {
	border-bottom-color: var(--swoopp-accent);
}

#auth-login-card form button[type='submit'] {
	border: 1px solid var(--swoopp-accent);
	border-radius: 2px;
	background-color: rgba(0, 155, 72, 0.22);
	color: rgba(214, 255, 229, 0.96);
	font-weight: 400;
	letter-spacing: 0.08em;
	transition:
		background-color 150ms ease,
		border-color 150ms ease;
}

#auth-login-card form button[type='submit']:hover {
	border-color: rgba(64, 255, 140, 0.9);
	background-color: rgba(0, 180, 88, 0.3);
}

#auth-login-card a {
	color: var(--swoopp-cyan);
}

#auth-login-card input:focus-visible,
#auth-login-card button:focus-visible,
#auth-login-card a:focus-visible,
#auth-page .swoopp-legal a:focus-visible {
	outline: 2px solid rgba(64, 255, 140, 0.9);
	outline-offset: 2px;
	border-radius: 2px;
}

#auth-page .swoopp-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	font-size: 11px;
	font-weight: 300;
	line-height: 1.25rem;
	letter-spacing: 0.2em;
	color: var(--swoopp-muted);
}

#auth-page .swoopp-legal a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 4px;
	padding: 0.125rem 0;
	transition: color 150ms ease;
}

#auth-page .swoopp-legal a::before {
	content: '';
	display: inline-block;
	flex: none;
	width: 8px;
	height: 4px;
	margin-right: 0.6em;
	background-color: rgba(64, 255, 140, 0.5);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: background-color 150ms ease;
}

#auth-page .swoopp-legal a:hover,
#auth-page .swoopp-legal a:focus-visible {
	color: var(--swoopp-strong);
}

#auth-page .swoopp-legal a:hover::before,
#auth-page .swoopp-legal a:focus-visible::before {
	background-color: rgba(64, 255, 140, 0.95);
}

#auth-page .swoopp-legal-separator {
	color: rgba(40, 235, 116, 0.25);
}

@media (max-height: 34rem) {
	#auth-page,
	#splash-screen {
		--swoopp-band-top: 2rem;
		--swoopp-band-bottom: 2.25rem;
	}

	#auth-login-card {
		padding-top: 1.125rem;
		padding-bottom: 1.375rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	#splash-screen::after {
		animation: none;
		opacity: 0.86;
	}

	#auth-page *,
	#auth-page *::before,
	#auth-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	#auth-page::after,
	#auth-page #auth-container::before {
		animation: none;
	}
}

/* The only typographic variant: a terminal label with its green insertion bar. */
#auth-page .swoopp-mark-scope { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: #64ff9c; text-shadow: 0 0 13px #64ff9c55; }
.caret { display: inline-block; vertical-align: -.12em; width: .44em; height: 1.05em; margin-left: .28em; background: #64ff9c; box-shadow: 0 0 9px #64ff9c55; animation: cursor-blink 1.2s steps(1, end) infinite; }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #auth-page .caret { animation: none !important; opacity: 1; } }