/* Standalone error / not-found page. Deliberately self-contained: it must also
   render when the app cannot reach its dependencies, so it pulls in no CDN
   stylesheet and no javascript.

   ORTEC corporate palette:
     Deep    #3F0123  (PMS 4975) — headings and actions on light, page ground on dark
     Coral   #FF7458  (PMS 1645 C) — the mark on light grounds, the action on dark
     Breeze  #D9E8FF  (PMS 2707 C) — the mark and the type on the deep ground
   The dark theme is the deep colour carrying the Breeze mark, which is what the
   two supplied logo variants are for. */
:root {
	--nf-deep: #3F0123;
	--nf-coral: #FF7458;
	--nf-breeze: #D9E8FF;

	--nf-background: #f5f6f8;
	--nf-surface: #fff;
	--nf-text: var(--nf-deep);
	--nf-muted: #6b5560;
	--nf-border: #e4dde1;
	--nf-action: var(--nf-deep);
	--nf-action-text: #fff;
	--nf-logo: url(/images/ortec-logo.svg);
}
@media (prefers-color-scheme: dark) {
	:root {
		--nf-background: var(--nf-deep);
		--nf-surface: #4d0a2d;
		--nf-text: var(--nf-breeze);
		--nf-muted: #c3a9b7;
		--nf-border: #63203f;
		--nf-action: var(--nf-coral);
		--nf-action-text: var(--nf-deep);
		--nf-logo: url(/images/ortec-logo-pale.svg);
	}
}

body#notfound {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--nf-background);
	color: var(--nf-text);
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
}

.nf-card {
	max-width: 520px;
	width: 100%;
	padding: 40px 32px;
	background: var(--nf-surface);
	border: 1px solid var(--nf-border);
	border-radius: 12px;
	box-shadow: 0 2px 18px rgba(63, 1, 35, 0.08);
}

/* The corporate mark; the Breeze variant is the one meant for the deep ground. */
.nf-logo {
	width: 116px;
	height: 47px;
	margin: 0 auto 18px;
	background: var(--nf-logo) center / contain no-repeat;
}

.nf-code {font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--nf-muted);}
.nf-title {margin: 6px 0 10px; font-size: 26px; font-weight: 500;}
.nf-message {margin: 0 0 24px; color: var(--nf-muted);}
.nf-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--nf-action);
	color: var(--nf-action-text);
	text-decoration: none;
	font-weight: 500;
}
.nf-btn:hover {filter: brightness(1.12);}
.nf-hint {margin: 22px 0 0; font-size: 12px; color: var(--nf-muted);}