/* Sign-in and results pages, served by the Worker. Same tokens as app.css. */
@font-face {
	font-family: "Parafina Black Large";
	src: url("/fonts/Parafina-BlackL-embed.woff2") format("woff2");
	font-weight: 700;
	font-display: block;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/fonts/Atkinson-Regular-embed.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/fonts/Atkinson-Bold-embed.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("/fonts/SpaceGrotesk-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "League Spartan";
	src: url("/fonts/LeagueSpartan-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
/* The "fab." wordmark, set like the brand mark on fabulousapps.studio. */
.wordmark { font: 400 30px/0.82 "League Spartan", sans-serif; letter-spacing: -0.08em; color: #131313; }
.wordmark-dot { margin-left: -0.02em; color: #0000ff; }
.legal {
	position: fixed; right: 10px; bottom: 8px; z-index: 4; margin: 0; pointer-events: none;
	font: 500 11px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: 0.06em; color: #4b5563;
}

:root {
	--ink: #131313;
	--text: #1c1917;
	--ground: #f1f5f9;
	--accent: #643dff;
	--mark: #0000ff;
	--muted: #6b7280;
	--danger: #b42318;
	--primary: #18181b;
	color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); }
body { min-height: 100dvh; font: 17px/1.55 "Atkinson Hyperlegible", system-ui, sans-serif; color: var(--text); overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.eyebrow { margin: 0; font: 500 11px/1.4 "Space Grotesk", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.display { margin: 0; font-family: "Parafina Black Large", sans-serif; text-transform: uppercase; line-height: 0.95; color: var(--ink); font-weight: 700; }

.gate { position: relative; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; }
.glow {
	position: absolute; top: -8rem; right: -8rem; width: 40rem; max-width: 140%; aspect-ratio: 1; z-index: -1; opacity: 0.6; pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in oklch, var(--accent) 50%, transparent), transparent 70%);
}
.gate-form { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 12px; }
.gate-form .wordmark { margin-bottom: 18px; font-size: 36px; }
.results .wordmark { font-size: 28px; }
.r-files { margin: 4px 0 0; padding-left: 18px; }
.r-files a { color: var(--mark); }
.gate-form h1 { font-size: clamp(2.6rem, 14vw, 4rem); margin-bottom: 20px; }
.field-label { font-weight: 700; color: var(--ink); }
.gate-form input {
	height: 48px; padding: 0 14px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff;
	font: inherit; font-size: 16px; color: var(--text);
}
.gate-form input[aria-invalid="true"] { border-color: var(--danger); }
.gate-form button {
	height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: var(--primary); color: #fff;
	font: 700 1rem "Atkinson Hyperlegible", sans-serif; cursor: pointer;
}
.err { margin: 0; color: var(--danger); }

.results { max-width: 46rem; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 16px; }
.results h1 { font-size: clamp(2.2rem, 9vw, 3.25rem); }
.r-when { margin: 0; color: var(--muted); }
.results section { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 19, 19, 0.1); }
.results h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ink); }
.r-q { margin-top: 10px; }
.r-text { margin: 0; color: var(--muted); font-size: 0.92rem; }
.r-ans { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.r-comment { margin: 2px 0 0; white-space: pre-wrap; }
details pre { white-space: pre-wrap; font-size: 0.85rem; background: #fff; padding: 12px; border-radius: 10px; }