/* The staging access page (src/worker/wip-gate.ts). Colours and fonts follow src/web/styles/tokens.css. */
@font-face {
	font-family: "Inter";
	src: url("/fonts/inter-variable-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/poppins-bold-latin.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--ink: #11231c;
	--ink-muted: #3d4f47;
	--surface: #f6f8f7;
	--surface-raised: #ffffff;
	--border: #7a8b83;
	--border-soft: #dce3e0;
	--brand-blue: #1478bc;
	--action: #0e5a8f;
	--action-pressed: #0a4570;
	--warning: #f2b705;
	--critical-text: #951d17;
	--critical-bg: #fbe9e7;
	--success-text: #145a26;
	--success-bg: #e3f5e7;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
	background: var(--surface);
	color: var(--ink);
	font-family:
		Inter,
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.card {
	width: min(420px, 100%);
	padding: 28px 24px 24px;
	background: var(--surface-raised);
	border: 1px solid var(--border-soft);
	border-top: 6px solid var(--brand-blue);
	border-radius: 16px;
	box-shadow: 0 10px 30px -18px rgb(17 35 28 / 0.35);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wordmark {
	font-family: Poppins, Inter, sans-serif;
	font-size: 22px;
	font-weight: 700;
}

.tag {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--warning);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

h1 {
	margin: 22px 0 6px;
	font-family: Poppins, Inter, sans-serif;
	font-size: 28px;
	line-height: 1.2;
}

.lead {
	margin: 0 0 18px;
	color: var(--ink-muted);
}

.status {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: 12px;
	font-weight: 600;
}

.status.error {
	color: var(--critical-text);
	background: var(--critical-bg);
}

.status.ok {
	color: var(--success-text);
	background: var(--success-bg);
}

form {
	display: grid;
	gap: 8px;
}

label {
	font-weight: 600;
}

input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-raised);
	color: var(--ink);
	font: inherit;
}

button {
	margin-top: 8px;
	min-height: 48px;
	border: 0;
	border-radius: 10px;
	background: var(--action);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

button:active {
	background: var(--action-pressed);
}

input:focus-visible,
button:focus-visible {
	outline: 3px solid var(--brand-blue);
	outline-offset: 2px;
}