@layer base {
	/* body/link box + the type scale a view inherits. background/padding/font-family:
	 * theme/20-shell.css — absorbed. */
	body {
		font-size: var(--fs-type);
		font-weight: var(--fs-weight-normal);
		line-height: var(--fs-leading); /* unitless: inherits as a FACTOR, not a clipping flat length */
		color: var(--fs-text);
		min-height: 100%;
		display: flex;
		flex-direction: column;
		scrollbar-gutter: stable; /* no-reflow guarantee without a dead scrollbar on a short page */
	}

	a {
		color: var(--fs-accent);
		text-decoration: none;
		line-height: inherit;
		font-weight: inherit;
	}

	a:hover {
		color: var(--fs-accent);
		text-decoration: underline;
	}

	.nowrap:not(span) {
	/*	:not(span) — a badge must be free to wrap on a narrow screen, and nowrap
		defeats every other width constraint on it */
		white-space: nowrap;
	}

	p,
	.cbi-map-descr,
	.cbi-section-descr,
	.table .tr.cbi-section-table-descr .th {
		font-size: var(--fs-type);
		font-weight: var(--fs-weight-normal);
		margin-bottom: var(--fs-space-2);
		/* prose, so no orphans: a single trailing word on its own line reads as a rendering fault.
		 * `pretty`, not `balance` — balance is capped at a few lines and re-flows the whole block,
		 * which is for headings. An unsupporting browser ignores it. */
		text-wrap: pretty;
	}

	p small {
		font-size: var(--fs-type-xs);
		color: var(--fs-dim);
	}

	/* The heading ramp lives in theme/45-misc.css — absorbed whole (weights, sizes, ink);
	 * theme/30-tables.css owns `legend`. Only the `<h_ small>` treatment remains here. */

	/* one rule for every `<h_ small>`, relative so it tracks whatever step its heading sits on */
	h1 small,
	h2 small,
	h3 small,
	h4 small,
	h5 small,
	h6 small {
		font-size: .7em;
		font-weight: var(--fs-weight-normal);
		color: var(--fs-dim);
	}

	ul, ol {
		margin: 0 0 var(--fs-space-4) var(--fs-space-6);
	}

	ul ul,
	ul ol,
	ol ol,
	ol ul {
		margin-bottom: 0;
	}

	ul {
		list-style: disc;
	}

	ol {
		list-style: decimal;
	}

	li {
		color: var(--fs-dim);
	}

	dl {
		margin-bottom: var(--fs-space-4);
	}

	dl dt {
		font-weight: var(--fs-weight-bold);
	}

	dl dd {
		margin-inline-start: var(--fs-space-2);
	}

	hr {
		margin: var(--fs-space-5) 0;
		border: 0;
		border-bottom: var(--fs-hairline);
	}

	strong {
		font-style: inherit;
		font-weight: var(--fs-weight-bold);
	}

	em {
		font-style: italic;
		font-weight: inherit;
		line-height: inherit;
	}

	small { font-size: var(--fs-type) }

	address {
		display: block;
		margin-bottom: var(--fs-space-4);
	}

	/* no shared padding: both members set their own below (code a chip's inset, pre a block's) */
	code, pre {
		font-family: var(--fs-font-mono);
		font-size: var(--fs-type);
		border-radius: var(--fs-radius-sm);
	}

	code {
		/* panel2 (6.45:1): --fs-text on a border-level surface is 4.40:1 in dark, under AA */
		background-color: var(--fs-panel2);
		color: var(--fs-text);
		padding: 1px var(--fs-space-1);
		/* docs/css.md "Typography and widgets: an opaque token needs overflow-wrap: anywhere, a
		 * tooltip needs pre-wrap" — a WireGuard key measured 64px past the column at 320px. */
		overflow-wrap: anywhere;
	}

	/* border-radius: the shared `code, pre` rule above already sets it — a second copy of the
	 * same value here restates, not overrides. */
	pre {
		background-color: var(--fs-panel2);
		display: block;
		padding: var(--fs-space-2);
		margin: 0 0 var(--fs-space-4);
		border: 1px solid color-mix(in srgb, var(--fs-border) 15%, transparent);
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}
}