/**
 * Courier boot splash: full-bleed image, spinner above footer; version line in React footer (see App.tsx).
 */

@import url("/courier-spike-loader.css");

:root {
	--courier-splash-flat-shadow: 0 1px 2px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
	--courier-splash-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.52), 0 2px 6px rgba(0, 0, 0, 0.34);
	--courier-splash-photo: url("/assets/splash-screen.jpg");
	/* White bars on splash photo — matches logo / app name. */
	--courier-splash-spinner-color: #ffffff;
	--courier-splash-spinner-unit: 0.85px;
}

/* Runs before bundled `index.css`; avoids default body margin + short `#root` until JS/CSS hydrate. */
html {
	margin: 0;
	background-color: #0a0a0a;
	background-image: var(--courier-splash-photo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
html[data-courier-boot] {
	background-image: var(--courier-splash-photo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
html[data-theme="light"] {
	background-color: #fafafa;
	color-scheme: light;
}
body {
	margin: 0;
	background-color: #0a0a0a;
}
html[data-theme="light"] body {
	background-color: #fafafa;
}
#root {
	margin: 0;
	background-color: transparent;
}

@media (display-mode: standalone) {
	html {
		overflow: hidden;
		overscroll-behavior: none;
		min-height: 100lvh;
	}

	body {
		margin: 0;
		overflow: hidden;
		overscroll-behavior: none;
		min-height: 100lvh;
	}

	#root,
	#courier-portal-host,
	.courier-splash {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		height: -webkit-fill-available;
		height: 100dvh;
		height: 100lvh;
		min-height: 100lvh;
		overflow: hidden;
		box-sizing: border-box;
	}

	#root {
		z-index: 0;
	}

	#courier-portal-host {
		pointer-events: none;
		z-index: 500;
	}
}

.courier-splash {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	height: -webkit-fill-available;
	height: 100dvh;
	height: 100lvh;
	min-height: 100lvh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	padding: 0;
	touch-action: manipulation;
	overflow: hidden;
	overscroll-behavior: none;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: #0a0a0a;
	background-image: url("/assets/splash-screen.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.courier-splash__brand {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-top: max(2.75rem, calc(env(safe-area-inset-top) + 1rem));
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

.courier-splash__logo {
	display: flex;
	width: 100%;
	justify-content: center;
}

.courier-splash__logo img {
	display: block;
	height: 3.25rem;
	width: auto;
	max-width: min(16rem, 92vw);
	object-fit: contain;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}

.courier-splash__app-name {
	margin: 0.1875rem 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: calc(1.125rem * 1.2);
	letter-spacing: 0.06em;
	color: #ffffff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: var(--courier-splash-text-shadow);
}

.courier-splash__footer {
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 1rem max(0.5rem, env(safe-area-inset-bottom));
	margin: 0;
}

.courier-splash__footer-placeholder {
	margin: 0;
	width: 100%;
	font-size: 0.65rem;
	font-weight: 500;
	line-height: 1.25;
	min-height: calc(0.65rem * 1.25 * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.025em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: transparent;
	user-select: none;
	pointer-events: none;
}

.courier-splash__version-line {
	margin: 0;
	width: 100%;
	text-align: center;
	font-family: inherit;
	font-size: 0.65rem;
	font-weight: 500;
	line-height: 1.25;
	min-height: calc(0.65rem * 1.25 * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.025em;
	color: #ffffff;
	text-shadow: var(--courier-splash-text-shadow);
}

.courier-splash__main {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding-bottom: 3rem;
}

.courier-splash__content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.courier-splash__spinner {
	--courier-spike-color: var(--courier-splash-spinner-color);
	--courier-spike-unit: var(--courier-splash-spinner-unit);
}

@media (prefers-reduced-motion: reduce) {
	.courier-splash__spinner {
		animation: none;
		opacity: 0.85;
	}
}