/* Sketch PSP — base layer. Tailwind (Play CDN) provides the utilities; this
   file handles the full-screen shell, fonts, the brand colour system, and the
   pre-React placeholders. */

html.psp-fullscreen-html,
body.psp-fullscreen {
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	background: #f8fafc;
}

body.psp-fullscreen {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: #1e293b;
}

#psp-root {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Brand colour system — --psp-primary is injected from Settings; the rest are
   derived so the brand-* Tailwind utilities work for any chosen hex. Keep these
   color-mix formulas intact: the soft/softer tints are what the active nav pill,
   avatars and focus rings are built on. */
:root {
	--psp-primary: #111827;
	--psp-primary-fg: #ffffff;
	--psp-primary-hover: color-mix(in srgb, var(--psp-primary) 86%, #000);
	--psp-primary-soft: color-mix(in srgb, var(--psp-primary) 14%, #fff);
	--psp-primary-softer: color-mix(in srgb, var(--psp-primary) 7%, #fff);
}

/* Pre-hydration placeholder, replaced the moment React mounts. Deliberately a
   bare spinner rather than text: it shows for a few hundred ms, and a flash of
   copy that is instantly replaced reads as a glitch. */
.psp-boot {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.psp-boot-spinner {
	width: 22px;
	height: 22px;
	border: 2px solid #e2e8f0;
	border-top-color: var(--psp-primary, #111827);
	border-radius: 50%;
	animation: psp-spin 0.7s linear infinite;
}

@keyframes psp-spin {
	to { transform: rotate(360deg); }
}

/* Tailwind's Play CDN doesn't ship a preflight for elements React injects via
   dangerouslySetInnerHTML, so keep icon spans from inheriting line-height. */
.psp-i {
	line-height: 0;
}