/* ==========================================================================
   Fleet Support API - simple pages (home, 404, error). Colours match docs.css.
   ========================================================================== */

:root{
	--accent: #2f6fed;
	--accent-soft: #e8efff;
	--accent-text: #1f56c7;
	--bg: #f7f8fa;
	--surface: #ffffff;
	--border: #e4e7ec;
	--text: #1d2433;
	--text-muted: #5b6475;
	--text-faint: #8a93a3;
	--code-bg: #f1f3f6;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: light;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--accent: #6d9bff; --accent-soft: #1d2a47; --accent-text: #9dbcff;
		--bg: #0f131c; --surface: #151a25; --border: #232a38;
		--text: #e3e7ef; --text-muted: #a2abbb; --text-faint: #6f7889;
		--code-bg: #1c2230;
		color-scheme: dark;
	}
}
:root[data-theme="dark"]{
	--accent: #6d9bff; --accent-soft: #1d2a47; --accent-text: #9dbcff;
	--bg: #0f131c; --surface: #151a25; --border: #232a38;
	--text: #e3e7ef; --text-muted: #a2abbb; --text-faint: #6f7889;
	--code-bg: #1c2230;
	color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
body.site{
	margin: 0; min-height: 100vh;
	display: flex; flex-direction: column;
	background: var(--bg); color: var(--text);
	font: 16px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-text); }
code{
	font: .88em var(--mono);
	background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px;
	padding: .1em .4em;
}

/* header */
.site-header{ padding: 20px 24px; }
.site-brand{ display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; text-decoration: none; }
.site-brand__mark{
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
	background: var(--accent); color: #fff;
}

/* main card */
.site-main{ flex: 1; display: grid; place-items: center; padding: 24px 16px 64px; }
.site-main.mod-left{
	place-items: unset;
}
.site-card{
	width: 100%; max-width: 560px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
	padding: 40px;
	box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px -16px rgba(16,24,40,.18);
}
.site-eyebrow{ margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent-text); letter-spacing: .02em; }
.site-card h1{ margin: 0 0 12px; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.site-card p{ margin: 0 0 14px; color: var(--text-muted); }
.site-code{ font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--text-faint); margin: 0 0 16px; }

.site-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn{
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px; border-radius: 8px;
	font: 600 14px var(--font); text-decoration: none;
	border: 1px solid var(--border); color: var(--text); background: var(--surface);
}
.btn:hover{ border-color: var(--text-faint); }
.btn--primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover{ filter: brightness(1.08); border-color: var(--accent); }

.site-meta{ margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; }
.site-meta dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; }
.site-meta dt{ color: var(--text-faint); }
.site-meta dd{ margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* developer error dump (development environment only) */
.site-debug{
	margin-top: 20px; max-height: 420px; overflow: auto;
	font: 12px/1.5 var(--mono); white-space: pre-wrap;
	background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px;
}

.site-footer{ padding: 20px 24px; text-align: center; font-size: 13px; color: var(--text-faint); }

@media (max-width: 520px){
	.site-card{ padding: 28px 20px; }
	.site-card h1{ font-size: 26px; }
	.site-code{ font-size: 52px; }
}