/* Glue language site — shared stylesheet
   Black-on-white(ish) with dark blue accents. No frameworks, no external fonts. */

:root {
	--ink: #1c2028;
	--paper: #fcfcfa;
	--accent: #1e3a8a;
	--accent-dark: #16295e;
	--accent-link: #1d4ed8;
	--accent-soft: #eaeffa;
	--rule: #d9dde5;
	--muted: #5b6472;
	--code-bg: #f4f6fb;
	--mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.02rem;
	line-height: 1.65;
}

/* ---------- header ---------- */

header.site {
	background: linear-gradient(135deg, var(--accent-dark), var(--accent));
	color: #fff;
	padding: 2.2rem 1.25rem 1.6rem;
}

header.site .wrap,
main,
footer.site .wrap {
	max-width: 46rem;
	margin: 0 auto;
}

header.site h1 {
	margin: 0 0 0.2rem;
	font-size: 2.1rem;
	letter-spacing: 0.01em;
}

header.site .tagline {
	margin: 0 0 1.1rem;
	color: #c9d6f2;
	font-size: 1.05rem;
}

header.site nav {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 0.8rem;
	font-size: 0.95rem;
}

header.site nav a {
	color: #dbe4f7;
	text-decoration: none;
	padding-bottom: 0.15rem;
}

header.site nav a:hover { color: #fff; text-decoration: underline; }

header.site nav a[aria-current="page"] {
	color: #fff;
	font-weight: 600;
	border-bottom: 2px solid #fff;
}

/* ---------- main content ---------- */

main { padding: 1.6rem 1.25rem 3.5rem; }

h2 {
	color: var(--accent);
	font-size: 1.45rem;
	margin: 2.6rem 0 0.8rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--rule);
}

h3 {
	color: var(--accent-dark);
	font-size: 1.12rem;
	margin: 1.9rem 0 0.5rem;
}

h2 .specref, h3 .specref {
	float: right;
	font-size: 0.68em;
	font-weight: 400;
	color: var(--muted);
	margin-top: 0.55em;
}

p, ul, ol { margin: 0.7rem 0; }

a { color: var(--accent-link); }
a:hover { color: var(--accent-dark); }

strong { color: inherit; }

.muted { color: var(--muted); }

.status {
	font-size: 0.9rem;
	color: var(--muted);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	margin: 1.2rem 0;
	background: #fff;
}

.note {
	background: var(--accent-soft);
	border-left: 3px solid var(--accent);
	border-radius: 0 6px 6px 0;
	padding: 0.7rem 1rem;
	margin: 1rem 0;
	font-size: 0.95rem;
}

/* ---------- code ---------- */

code {
	font-family: var(--mono);
	font-size: 0.88em;
	background: var(--accent-soft);
	border-radius: 4px;
	padding: 0.08em 0.35em;
}

pre {
	background: var(--code-bg);
	border-left: 3px solid var(--accent);
	border-radius: 0 6px 6px 0;
	padding: 0.85rem 1.05rem;
	margin: 1rem 0;
	overflow-x: auto;
	tab-size: 4;
	line-height: 1.55;
}

pre code {
	background: none;
	border-radius: 0;
	padding: 0;
	font-size: 0.895rem;
	display: block;
}

/* syntax highlighting (see highlight.js) */
.hl-kw    { color: #1d4ed8; font-weight: 600; }
.hl-decl  { color: #7c3aed; font-weight: 600; }
.hl-const { color: #0f766e; }
.hl-def   { color: #16295e; font-weight: 700; }
.hl-str   { color: #15803d; }
.hl-ipunc { color: #b45309; font-weight: 700; }
.hl-num   { color: #a16207; }
.hl-com   { color: #767f8d; font-style: italic; }
.hl-opt   { color: #be185d; }
.hl-brace { color: #475569; font-weight: 600; }
.hl-out   { color: #64748b; font-style: italic; }

/* ---------- tables ---------- */

table {
	border-collapse: collapse;
	margin: 1rem 0;
	width: 100%;
	font-size: 0.95rem;
}

th, td {
	text-align: left;
	padding: 0.45rem 0.7rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

th {
	background: var(--accent-soft);
	color: var(--accent-dark);
	font-weight: 600;
}

td code { white-space: nowrap; }

/* ---------- footer ---------- */

footer.site {
	border-top: 1px solid var(--rule);
	padding: 1.3rem 1.25rem 2.2rem;
	font-size: 0.9rem;
	color: var(--muted);
}

.cta {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 0.55rem 1.1rem;
	border-radius: 6px;
	font-weight: 600;
	margin: 0.4rem 0 0.2rem;
}

.cta:hover { background: var(--accent-dark); color: #fff; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
	body { font-size: 0.98rem; }
	header.site { padding: 1.6rem 1rem 1.2rem; }
	header.site h1 { font-size: 1.7rem; }
	main { padding: 1.2rem 1rem 2.5rem; }
	pre { padding: 0.7rem 0.8rem; }
	td code { white-space: normal; }
}