:root {
	--bg-hover: rgba(0, 0, 0, 0.06);
	--bg-active: rgba(0, 0, 0, 0.12);
	--grid-dot-light: rgba(0, 0, 0, 0.13);
	--grid-dot-standard: rgba(0, 0, 0, 0.2);
	--grid-dot-strong: rgba(0, 0, 0, 0.34);
	--grid-fine-light: rgba(0, 0, 0, 0.05);
	--grid-fine-standard: rgba(0, 0, 0, 0.07);
	--grid-fine-strong: rgba(0, 0, 0, 0.12);
	--grid-coarse-light: rgba(0, 0, 0, 0.1);
	--grid-coarse-standard: rgba(0, 0, 0, 0.14);
	--grid-coarse-strong: rgba(0, 0, 0, 0.24);
	--watermark: rgba(0, 0, 0, 0.26);
	--node-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
	--comment-fill: 0.1;
	--head-tint: 0.14;
	--cat-ink: 85%;
	--tree-script-server: #4b5563;
	--tree-script-local: #2e7d47;
	--tree-script-module: #1f64c4;
	--tree-folder-plain: var(--fg-muted);
	--tree-folder-special: #1f64c4;
	--tree-folder-packages: #7048c0;
	--bg-app: #eceef2;
	--bg-panel: #f6f7f9;
	--bg-canvas: #d9dce3;
	--bg-input: #ffffff;
	--fg: #1c1f24;
	--fg-muted: #5c636e;
	--fg-faint: #8b93a0;
	--border: #c6cad2;
	--border-strong: #a8aeb9;
	--node-body: #fbfbfd;
	--node-border: #b3b9c4;
	--wire-exec: #5a616d;
	--accent: #3b6ea5;
	--danger: #c0392b;
	--warning: #b8860b;
	--ok: #2e7d47;
	--select: #ff9c2e;
	--pure-edge: #6aa84f;
	--capsule-bg: #e9ebf0;
	--capsule-border: #b3b9c4;
	--code-keyword: #9a4f9a;
	--code-string: #2f7f4f;
	--code-number: #8a5a2f;
	--code-comment: #7a8290;
	--code-operator: #4a6fa5;
	--code-property: #2c6f8f;
	--code-global: #2c6f8f;
	--code-function: #7a5a2f;
	--code-type: #2f7a6a;
	--pin-well: #2a2f37;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-hover: rgba(255, 255, 255, 0.07);
		--bg-active: rgba(255, 255, 255, 0.13);
		--grid-dot-light: rgba(255, 255, 255, 0.1);
		--grid-dot-standard: rgba(255, 255, 255, 0.15);
		--grid-dot-strong: rgba(255, 255, 255, 0.28);
		--grid-fine-light: rgba(255, 255, 255, 0.04);
		--grid-fine-standard: rgba(255, 255, 255, 0.05);
		--grid-fine-strong: rgba(255, 255, 255, 0.09);
		--grid-coarse-light: rgba(255, 255, 255, 0.08);
		--grid-coarse-standard: rgba(255, 255, 255, 0.1);
		--grid-coarse-strong: rgba(255, 255, 255, 0.18);
		--watermark: rgba(255, 255, 255, 0.22);
		--node-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
		--comment-fill: 0.14;
		--head-tint: 0.24;
		--cat-ink: 45%;
		--tree-script-server: #ffffff;
		--tree-script-local: #5cb87a;
		--tree-script-module: #5ea2ee;
		--tree-folder-plain: var(--fg-muted);
		--tree-folder-special: #5ea2ee;
		--tree-folder-packages: #b48cf0;
		--bg-app: #16181d;
		--bg-panel: #1b1e24;
		--bg-canvas: #101216;
		--bg-input: #23272f;
		--fg: #e4e7ec;
		--fg-muted: #9aa2af;
		--fg-faint: #6b7280;
		--border: #2d323b;
		--border-strong: #414855;
		--node-body: #262a32;
		--node-border: #3a404b;
		--wire-exec: #b9c0cc;
		--accent: #5b9bd5;
		--danger: #e06c5a;
		--warning: #d8a83a;
		--ok: #5cb87a;
		--select: #ff9c2e;
		--pure-edge: #7fbf5f;
		--capsule-bg: #2b3038;
		--capsule-border: #3d434e;
		--code-keyword: #c98fd0;
		--code-string: #8fce9b;
		--code-number: #d9a86c;
		--code-comment: #6b7280;
		--code-operator: #86b3e0;
		--code-property: #7fc4d6;
		--code-global: #7fc4d6;
		--code-function: #d9b06c;
		--code-type: #6fc2a8;
		--pin-well: #06080b;
	}
}

/* The technical specification's own stylesheet, for spec.roswaal.app.

   Small on purpose: a page of the specification loads this and its own text,
   not the editor's stylesheet. The colour tokens above this comment are
   written by `scripts/build-spec.mjs` from Roswaal's built-in light and dark
   themes, so the site and the editor share one palette; what follows uses
   only those names. The class names inside an article are the docs' block
   renderer's (`docs-note`, `docs-table`, `docs-preview`), because the same
   renderer draws both. */

* {
	box-sizing: border-box;
}

html {
	color-scheme: light dark;
	scroll-padding-top: 72px;
}

body {
	margin: 0;
	background: var(--bg-app);
	color: var(--fg);
	font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--accent);
	text-underline-offset: 2px;
}

code {
	font: 0.88em "Cascadia Mono", Consolas, ui-monospace, monospace;
	padding: 1px 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}

.spec-skip {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 10;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--bg-panel);
}

.spec-skip:focus {
	top: 12px;
}

/* ---------------------------------------------------------------- the bar */

.spec-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 10px 20px;
	background: var(--bg-panel);
	border-bottom: 1px solid var(--border);
}

.spec-home {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fg);
	text-decoration: none;
	font-weight: 700;
}

.spec-home svg {
	height: 22px;
	width: auto;
}

.spec-home .what {
	font-weight: 500;
	color: var(--fg-muted);
}

.spec-drafts {
	position: relative;
	font-size: 13px;
}

.spec-drafts summary {
	list-style: none;
	cursor: pointer;
	padding: 2px 10px;
	border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent);
	border-radius: 999px;
	color: var(--warning);
	font-weight: 650;
}

.spec-drafts summary::-webkit-details-marker {
	display: none;
}

.spec-drafts ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 150px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--bg-panel);
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.spec-drafts a {
	display: block;
	padding: 5px 10px;
	border-radius: 5px;
	color: var(--fg);
	text-decoration: none;
}

.spec-drafts a:hover,
.spec-drafts a[aria-current] {
	background: var(--bg-hover);
}

.spec-search {
	position: relative;
	flex: 1 1 220px;
	max-width: 420px;
	margin-left: auto;
}

.spec-search input {
	width: 100%;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	background: var(--bg-input);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
}

.spec-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 60vh;
	overflow: auto;
	padding: 6px;
	background: var(--bg-panel);
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.spec-results a {
	display: block;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--fg);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
}

.spec-results a .where {
	display: block;
	color: var(--fg-muted);
	font-size: 12.5px;
}

.spec-results a:hover,
.spec-results a.active {
	background: var(--bg-hover);
}

.spec-results .none {
	padding: 7px 10px;
	color: var(--fg-muted);
	font-size: 14px;
}

/* Into the editor: the one call to action, as the docs' own "Try it" is. */
.spec-try {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}

.spec-try:hover {
	background: color-mix(in srgb, var(--accent) 85%, #000);
}

/* --------------------------------------------------------------- the body */

.spec-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 1320px;
	margin: 0 auto;
}

.spec-nav {
	flex: 1 1 240px;
	max-width: 280px;
	position: sticky;
	top: 57px;
	max-height: calc(100vh - 57px);
	overflow: auto;
	padding: 24px 16px 40px 20px;
	font-size: 14px;
	line-height: 1.45;
}

/* Open on a wide screen, where the summary is hidden; folded on a phone, where
   the chapters would push the text a screen down (`spec.js` folds it there). */
.spec-nav-fold > summary {
	display: none;
}

.spec-nav-part {
	margin: 18px 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.spec-nav-part:first-child {
	margin-top: 0;
}

.spec-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spec-nav a {
	display: block;
	padding: 4px 10px;
	border-radius: 6px;
	color: var(--fg);
	text-decoration: none;
}

.spec-nav a:hover {
	background: var(--bg-hover);
}

.spec-nav li.on > a {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: color-mix(in srgb, var(--accent) 70%, var(--fg));
	font-weight: 650;
}

.spec-nav-sections {
	margin: 2px 0 6px 10px !important;
	border-left: 1px solid var(--border);
}

.spec-nav-sections a {
	padding: 2px 10px;
	font-size: 13px;
	color: var(--fg-muted);
}

.spec-main {
	flex: 999 1 560px;
	min-width: 0;
	padding: 28px 28px 64px;
}

.spec-article {
	max-width: 74ch;
}

.spec-part {
	margin: 0;
	font-size: 13px;
	color: var(--fg-muted);
}

.spec-article h1 {
	margin: 4px 0 8px;
	font-size: 34px;
	line-height: 1.2;
}

.spec-summary {
	margin: 0 0 12px;
	font-size: 18px;
	color: var(--fg-muted);
}

.spec-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

/* Status as filled pills, as the drafts drew them: Normative and its levels in
   the danger colour, the draft in the warning colour. */
.badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 650;
	background: color-mix(in srgb, var(--fg) 9%, transparent);
	color: var(--fg-muted);
}

.badge.normative {
	background: color-mix(in srgb, var(--danger) 15%, transparent);
	color: color-mix(in srgb, var(--danger) 75%, var(--fg));
}

.badge.draft {
	background: color-mix(in srgb, var(--warning) 20%, transparent);
	color: color-mix(in srgb, var(--warning) 60%, var(--fg));
}

.spec-tally {
	margin-left: auto;
	font-size: 13px;
	color: var(--fg-muted);
	text-decoration: none;
}

.spec-tally:hover {
	color: var(--accent);
}

.spec-article h2 {
	margin: 44px 0 12px;
	padding-top: 8px;
	font-size: 25px;
	line-height: 1.25;
}

.spec-article h3 {
	margin: 28px 0 8px;
	font-size: 19px;
}

.spec-article p,
.spec-article ul,
.spec-article ol {
	margin: 0 0 14px;
}

.spec-article li {
	margin: 4px 0;
}

.spec-article strong {
	font-weight: 650;
}

/* The specification's own neighbours, Back and Next, a book's way round. */
.spec-neighbours {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.spec-neighbour {
	display: flex;
	flex-direction: column;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--fg);
	text-decoration: none;
}

.spec-neighbour.next {
	text-align: right;
}

.spec-neighbour .which {
	font-size: 12px;
	color: var(--fg-muted);
}

.spec-neighbour:hover {
	border-color: var(--accent);
}

.spec-foot {
	padding: 20px;
	border-top: 1px solid var(--border);
	color: var(--fg-muted);
	font-size: 13px;
	text-align: center;
}

/* ------------------------------------------- blocks, as the docs draw them */

.docs-table {
	margin: 0 0 18px;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-panel);
}

.docs-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.5;
}

.docs-table th {
	padding: 9px 12px;
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-muted);
	border-bottom: 1px solid var(--border);
}

.docs-table td {
	padding: 9px 12px;
	vertical-align: top;
	border-top: 1px solid var(--border);
}

.docs-table tr:first-child td {
	border-top: 0;
}

.docs-note {
	--note: var(--border-strong);
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--note) 45%, transparent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--note) 9%, var(--bg-input));
	line-height: 1.6;
}

.docs-note.note-info {
	--note: var(--accent);
}

.docs-note.note-good {
	--note: var(--ok);
}

.docs-note.note-warn {
	--note: var(--warning);
}

.docs-note.note-danger {
	--note: var(--danger);
}

.docs-note-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--note);
}

.docs-note-body > :last-child {
	margin-bottom: 0;
}

.docs-code {
	margin: 0 0 18px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-input);
}

.docs-code-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	color: var(--fg-muted);
}

.docs-code-head .copy {
	padding: 2px 10px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.docs-code pre {
	margin: 0;
	padding: 12px 14px;
	overflow-x: auto;
	font: 13.5px/1.6 "Cascadia Mono", Consolas, ui-monospace, monospace;
}

.tok-keyword { color: var(--code-keyword); }
.tok-string { color: var(--code-string); }
.tok-number { color: var(--code-number); }
.tok-comment { color: var(--code-comment); font-style: italic; }
.tok-operator { color: var(--code-operator); }
.tok-global { color: var(--code-global); }
.tok-function { color: var(--code-function); }
.tok-type,
.tok-meta { color: var(--code-type); }
.tok-property { color: var(--code-property); }
.tok-bracket,
.tok-punctuation { color: var(--fg-muted); }

/* A node, drawn as the canvas draws it, on the canvas's dotted ground. */
.docs-preview {
	margin: 0 0 20px;
	padding: 18px 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background-color: var(--bg-canvas);
	background-image: radial-gradient(circle, var(--grid-dot-light) 1.2px, transparent 1.6px);
	background-size: 24px 24px;
}

.docs-preview .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
}

.docs-preview .node-preview-frame {
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 18%));
}

.docs-preview svg.node-preview {
	display: block;
	max-width: 100%;
	height: auto;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.docs-preview figcaption {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-muted);
}

/* ----------------------------------------------------- narrow and printed */

@media (max-width: 860px) {
	/* Three rows tall on a phone: pinned, it would cover a screen's worth of text. */
	html {
		scroll-padding-top: 12px;
	}

	.spec-bar {
		position: static;
	}

	.spec-nav {
		position: static;
		max-width: none;
		max-height: none;
		flex-basis: 100%;
		padding-bottom: 0;
		border-bottom: 1px solid var(--border);
	}

	.spec-nav-sections {
		display: none;
	}

	.spec-nav-fold > summary {
		display: block;
		padding: 8px 12px;
		border: 1px solid var(--border);
		border-radius: 8px;
		font-weight: 650;
		cursor: pointer;
	}

	.spec-nav-fold[open] > summary {
		margin-bottom: 12px;
	}

	.spec-nav {
		padding-bottom: 16px;
	}

	.spec-main {
		padding: 20px 16px 48px;
	}

	.spec-article h1 {
		font-size: 28px;
	}
}

@media print {
	.spec-bar,
	.spec-nav,
	.spec-neighbours,
	.spec-skip {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ---------------------------------------------- specification blocks */
/* The technical specification's own blocks: requirement rows, key words as
   pins, cards side by side, and framed examples. Drawn the same in the Docs
   panel, the static docs and spec.roswaal.app: `scripts/build-spec.mjs` copies
   this section, from here to its end marker, into the specification site's
   stylesheet, so the two cannot drift apart. Only tokens a theme sets. */

/* A key word of RFC 2119, as a pin coloured by how hard it binds. */
.kw {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 4px;
	font: 700 0.72em/1.35 "Cascadia Mono", Consolas, ui-monospace, monospace;
	letter-spacing: 0.04em;
	vertical-align: 0.08em;
	white-space: nowrap;
}

.kw.kw-must {
	background: color-mix(in srgb, var(--danger) 16%, transparent);
	color: color-mix(in srgb, var(--danger) 78%, var(--fg));
}

.kw.kw-should {
	background: color-mix(in srgb, var(--warning) 20%, transparent);
	color: color-mix(in srgb, var(--warning) 62%, var(--fg));
}

.kw.kw-may {
	background: color-mix(in srgb, var(--fg) 10%, transparent);
	color: color-mix(in srgb, var(--fg) 80%, transparent);
}

/* A numbered requirement: its number, what it requires, and whether Roswaal
   meets it. Consecutive ones join into one card. */
.spec-req {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 6px 14px;
	align-items: start;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-input);
}

.spec-req:has(+ .spec-req) {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.spec-req + .spec-req {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.spec-req:target {
	box-shadow: inset 3px 0 0 var(--accent);
}

.spec-req-id {
	padding-top: 2px;
	font: 600 12px/1.7 "Cascadia Mono", Consolas, ui-monospace, monospace;
	color: var(--fg-muted);
	text-decoration: none;
	white-space: nowrap;
}

.spec-req-id:hover {
	color: var(--accent);
}

.spec-req-text p {
	margin: 0;
}

.spec-req-text .spec-req-gap {
	margin-top: 6px;
	font-size: 0.9em;
	color: var(--fg-muted);
}

.spec-req-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-top: 3px;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.spec-req-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.spec-req-status.st-meets {
	color: var(--ok);
}

.spec-req-status.st-partly {
	color: var(--warning);
}

.spec-req-status.st-not-yet {
	color: var(--danger);
}

@media (max-width: 640px) {
	.spec-req {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.spec-req-text {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Statements side by side, each in a card of its own under a small label. */
.docs-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin: 0 0 18px;
}

.docs-compare-card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--fg) 5%, var(--bg-input));
	line-height: 1.5;
}

.docs-compare-card.tone-warn {
	background: color-mix(in srgb, var(--danger) 9%, var(--bg-input));
	color: color-mix(in srgb, var(--danger) 45%, var(--fg));
}

.docs-compare-card .label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* An example in a frame that says whose it is. */
.docs-preview.framed {
	padding-top: 0;
	overflow: hidden;
}

.docs-frame-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 -16px 16px;
	padding: 7px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-panel);
	font-size: 12px;
	color: var(--fg-muted);
}

.docs-frame-head .aside {
	font-style: italic;
}