@import './fonts/fonts.css';
@import './theme.css';

/* sdocs shell styles — scoped to .sdocs-app
 *
 * Used by the sdocs UI (sidebar, panels, nav).
 * Scoped to .sdocs-app so it doesn't leak into the host app when embedded.
 */

.sdocs-app {
	margin: 0;
	font-family: var(--sans);
	color: var(--color-base-900);
}

/* Guard the Explorer's typography against host element rules when embedded:
 * hosts commonly style bare `code`/`pre`/`a` (e.g. font-size: 0.875em), which
 * would otherwise reach into the Explorer. Sizing stays wrapper-driven. */
.sdocs-app code,
.sdocs-app pre {
	font-family: var(--mono);
	font-size: inherit;
	line-height: inherit;
}

.sdocs-app a {
	color: inherit;
	text-decoration: none;
}

/* Highlighted code blocks always render shiki's dark theme — a dark stage
 * for code in both app themes (the inline light-theme colors lose to the
 * dual-theme --shiki-dark variables). */
.sdocs-app pre.shiki,
.sdocs-app pre.shiki span {
	color: var(--shiki-dark) !important;
	background-color: var(--shiki-dark-bg) !important;
}

/* Inline markdown in descriptions — `code` renders as a chip, like doc prose */
.sdocs-view-description code,
.sdocs-block-description code,
.sdocs-api-desc code {
	font-size: 0.92em;
	background: var(--color-base-100);
	border-radius: 4px;
	padding: 1px 5px;
}

/* Type chips and value literals, color-coded by kind (shared by doc tables) */
.sdocs-app code[class*='sdocs-type-'] {
	font-family: var(--mono);
	font-size: 12px;
	padding: 1px 4px;
	border-radius: 3px;
}
.sdocs-app code.sdocs-type-string { color: var(--color-green-700); background: var(--color-green-100); }
.sdocs-app code.sdocs-type-number { color: var(--color-amber-700); background: var(--color-amber-100); }
.sdocs-app code.sdocs-type-boolean { color: var(--color-purple-700); background: var(--color-purple-100); }
.sdocs-app code.sdocs-type-function { color: var(--color-blue-700); background: var(--color-blue-100); }
.sdocs-app code.sdocs-type-snippet { color: var(--color-pink-700); background: var(--color-pink-100); }
.sdocs-app code.sdocs-type-color { color: var(--color-cyan-700); background: var(--color-cyan-100); }
.sdocs-app code.sdocs-type-dimension { color: var(--color-amber-700); background: var(--color-amber-100); }
.sdocs-app code.sdocs-type-void { color: var(--color-slate-500); background: var(--color-slate-100); }
.sdocs-app code.sdocs-type-other { color: var(--color-base-700); background: var(--color-base-100); }

.sdocs-app .sdocs-typesep {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--color-base-300);
}

.sdocs-app .sdocs-value {
	font-family: var(--mono);
	font-size: 12px;
}
.sdocs-app .sdocs-value-string { color: var(--color-green-700); }
.sdocs-app .sdocs-value-number { color: var(--color-amber-700); }
.sdocs-app .sdocs-value-boolean { color: var(--color-purple-700); }
.sdocs-app .sdocs-value-dimension { color: var(--color-amber-700); }
.sdocs-app .sdocs-value-mixed { color: var(--color-base-500); font-style: italic; cursor: help; }
.sdocs-app .sdocs-value-color { color: var(--color-cyan-700); }
.sdocs-app .sdocs-value-other { color: var(--color-base-600); }

/* Raw hue tokens don't invert with the theme; flip shades for dark */
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-string { color: var(--color-green-400); background: var(--color-green-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-number { color: var(--color-amber-400); background: var(--color-amber-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-boolean { color: var(--color-purple-400); background: var(--color-purple-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-function { color: var(--color-blue-400); background: var(--color-blue-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-snippet { color: var(--color-pink-400); background: var(--color-pink-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-color { color: var(--color-cyan-400); background: var(--color-cyan-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-dimension { color: var(--color-amber-400); background: var(--color-amber-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-void { color: var(--color-slate-400); background: var(--color-slate-950); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-string { color: var(--color-green-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-number { color: var(--color-amber-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-boolean { color: var(--color-purple-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-dimension { color: var(--color-amber-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-color { color: var(--color-cyan-400); }

.sdocs-app[data-sdocs-theme='dark'] {
	/* base — layouts, backgrounds, surfaces, borders, text (inverted) */
	--color-base-0: var(--color-zinc-1000);
	--color-base-50: var(--color-zinc-950);
	--color-base-100: var(--color-zinc-900);
	--color-base-150: var(--color-zinc-850);
	--color-base-200: var(--color-zinc-800);
	--color-base-250: var(--color-zinc-750);
	--color-base-300: var(--color-zinc-700);
	--color-base-350: var(--color-zinc-650);
	--color-base-400: var(--color-zinc-600);
	--color-base-450: var(--color-zinc-500);
	/* The mirror pivots here, and a straight mirror puts the same mid-grey on
	   both grounds — which does not work, because contrast is not symmetric.
	   zinc-500 reads at 4.8:1 on white and 4.35:1 on near-black, and base-500
	   is the secondary-text step: descriptions, API notes, glossary subtitles,
	   the inactive preview tab. Half a step lighter clears 4.5 for all of
	   them. */
	--color-base-500: var(--color-zinc-450);
	--color-base-550: var(--color-zinc-400);
	--color-base-600: var(--color-zinc-400);
	--color-base-650: var(--color-zinc-350);
	--color-base-700: var(--color-zinc-300);
	--color-base-750: var(--color-zinc-250);
	--color-base-800: var(--color-zinc-200);
	--color-base-850: var(--color-zinc-150);
	--color-base-900: var(--color-zinc-100);
	--color-base-950: var(--color-zinc-50);
	--color-base-1000: var(--color-zinc-0);
	/* success (inverted) */
	--color-success-50: var(--color-green-950);
	--color-success-100: var(--color-green-900);
	--color-success-150: var(--color-green-850);
	--color-success-200: var(--color-green-800);
	--color-success-250: var(--color-green-750);
	--color-success-300: var(--color-green-700);
	--color-success-350: var(--color-green-650);
	--color-success-400: var(--color-green-600);
	--color-success-450: var(--color-green-550);
	--color-success-500: var(--color-green-500);
	--color-success-550: var(--color-green-450);
	--color-success-600: var(--color-green-400);
	--color-success-650: var(--color-green-350);
	--color-success-700: var(--color-green-300);
	--color-success-750: var(--color-green-250);
	--color-success-800: var(--color-green-200);
	--color-success-850: var(--color-green-150);
	--color-success-900: var(--color-green-100);
	--color-success-950: var(--color-green-50);
	/* danger (inverted) */
	--color-danger-50: var(--color-red-950);
	--color-danger-100: var(--color-red-900);
	--color-danger-150: var(--color-red-850);
	--color-danger-200: var(--color-red-800);
	--color-danger-250: var(--color-red-750);
	--color-danger-300: var(--color-red-700);
	--color-danger-350: var(--color-red-650);
	--color-danger-400: var(--color-red-600);
	--color-danger-450: var(--color-red-550);
	--color-danger-500: var(--color-red-500);
	--color-danger-550: var(--color-red-450);
	--color-danger-600: var(--color-red-400);
	--color-danger-650: var(--color-red-350);
	--color-danger-700: var(--color-red-300);
	--color-danger-750: var(--color-red-250);
	--color-danger-800: var(--color-red-200);
	--color-danger-850: var(--color-red-150);
	--color-danger-900: var(--color-red-100);
	--color-danger-950: var(--color-red-50);
	/* warning (inverted) */
	--color-warning-50: var(--color-orange-950);
	--color-warning-100: var(--color-orange-900);
	--color-warning-150: var(--color-orange-850);
	--color-warning-200: var(--color-orange-800);
	--color-warning-250: var(--color-orange-750);
	--color-warning-300: var(--color-orange-700);
	--color-warning-350: var(--color-orange-650);
	--color-warning-400: var(--color-orange-600);
	--color-warning-450: var(--color-orange-550);
	--color-warning-500: var(--color-orange-500);
	--color-warning-550: var(--color-orange-450);
	--color-warning-600: var(--color-orange-400);
	--color-warning-650: var(--color-orange-350);
	--color-warning-700: var(--color-orange-300);
	--color-warning-750: var(--color-orange-250);
	--color-warning-800: var(--color-orange-200);
	--color-warning-850: var(--color-orange-150);
	--color-warning-900: var(--color-orange-100);
	--color-warning-950: var(--color-orange-50);
	/* focus (inverted) */
	--color-focus-50: var(--color-yellow-950);
	--color-focus-100: var(--color-yellow-900);
	--color-focus-150: var(--color-yellow-850);
	--color-focus-200: var(--color-yellow-800);
	--color-focus-250: var(--color-yellow-750);
	--color-focus-300: var(--color-yellow-700);
	--color-focus-350: var(--color-yellow-650);
	--color-focus-400: var(--color-yellow-600);
	--color-focus-450: var(--color-yellow-550);
	--color-focus-500: var(--color-yellow-500);
	--color-focus-550: var(--color-yellow-450);
	--color-focus-600: var(--color-yellow-400);
	--color-focus-650: var(--color-yellow-350);
	--color-focus-700: var(--color-yellow-300);
	--color-focus-750: var(--color-yellow-250);
	--color-focus-800: var(--color-yellow-200);
	--color-focus-850: var(--color-yellow-150);
	--color-focus-900: var(--color-yellow-100);
	--color-focus-950: var(--color-yellow-50);
	/* component (inverted) */
	--color-component-50: var(--color-pink-950);
	--color-component-100: var(--color-pink-900);
	--color-component-150: var(--color-pink-850);
	--color-component-200: var(--color-pink-800);
	--color-component-250: var(--color-pink-750);
	--color-component-300: var(--color-pink-700);
	--color-component-350: var(--color-pink-650);
	--color-component-400: var(--color-pink-600);
	--color-component-450: var(--color-pink-550);
	--color-component-500: var(--color-pink-500);
	--color-component-550: var(--color-pink-450);
	--color-component-600: var(--color-pink-400);
	--color-component-650: var(--color-pink-350);
	--color-component-700: var(--color-pink-300);
	--color-component-750: var(--color-pink-250);
	--color-component-800: var(--color-pink-200);
	--color-component-850: var(--color-pink-150);
	--color-component-900: var(--color-pink-100);
	--color-component-950: var(--color-pink-50);
	/* layout (inverted) */
	--color-layout-50: var(--color-purple-950);
	--color-layout-100: var(--color-purple-900);
	--color-layout-150: var(--color-purple-850);
	--color-layout-200: var(--color-purple-800);
	--color-layout-250: var(--color-purple-750);
	--color-layout-300: var(--color-purple-700);
	--color-layout-350: var(--color-purple-650);
	--color-layout-400: var(--color-purple-600);
	--color-layout-450: var(--color-purple-550);
	--color-layout-500: var(--color-purple-500);
	--color-layout-550: var(--color-purple-450);
	--color-layout-600: var(--color-purple-400);
	--color-layout-650: var(--color-purple-350);
	--color-layout-700: var(--color-purple-300);
	--color-layout-750: var(--color-purple-250);
	--color-layout-800: var(--color-purple-200);
	--color-layout-850: var(--color-purple-150);
	--color-layout-900: var(--color-purple-100);
	--color-layout-950: var(--color-purple-50);

	--color-pattern-50: var(--color-emerald-950);
	--color-pattern-100: var(--color-emerald-900);
	--color-pattern-150: var(--color-emerald-850);
	--color-pattern-200: var(--color-emerald-800);
	--color-pattern-250: var(--color-emerald-750);
	--color-pattern-300: var(--color-emerald-700);
	--color-pattern-350: var(--color-emerald-650);
	--color-pattern-400: var(--color-emerald-600);
	--color-pattern-450: var(--color-emerald-550);
	--color-pattern-500: var(--color-emerald-500);
	--color-pattern-550: var(--color-emerald-450);
	--color-pattern-600: var(--color-emerald-400);
	--color-pattern-650: var(--color-emerald-350);
	--color-pattern-700: var(--color-emerald-300);
	--color-pattern-750: var(--color-emerald-250);
	--color-pattern-800: var(--color-emerald-200);
	--color-pattern-850: var(--color-emerald-150);
	--color-pattern-900: var(--color-emerald-100);
	--color-pattern-950: var(--color-emerald-50);
	/* example (inverted) */
	--color-example-50: var(--color-cyan-950);
	--color-example-100: var(--color-cyan-900);
	--color-example-150: var(--color-cyan-850);
	--color-example-200: var(--color-cyan-800);
	--color-example-250: var(--color-cyan-750);
	--color-example-300: var(--color-cyan-700);
	--color-example-350: var(--color-cyan-650);
	--color-example-400: var(--color-cyan-600);
	--color-example-450: var(--color-cyan-550);
	--color-example-500: var(--color-cyan-500);
	--color-example-550: var(--color-cyan-450);
	--color-example-600: var(--color-cyan-400);
	--color-example-650: var(--color-cyan-350);
	--color-example-700: var(--color-cyan-300);
	--color-example-750: var(--color-cyan-250);
	--color-example-800: var(--color-cyan-200);
	--color-example-850: var(--color-cyan-150);
	--color-example-900: var(--color-cyan-100);
	--color-example-950: var(--color-cyan-50);
	/* docs (inverted) */
	--color-docs-50: var(--color-amber-950);
	--color-docs-100: var(--color-amber-900);
	--color-docs-150: var(--color-amber-850);
	--color-docs-200: var(--color-amber-800);
	--color-docs-250: var(--color-amber-750);
	--color-docs-300: var(--color-amber-700);
	--color-docs-350: var(--color-amber-650);
	--color-docs-400: var(--color-amber-600);
	--color-docs-450: var(--color-amber-550);
	--color-docs-500: var(--color-amber-500);
	--color-docs-550: var(--color-amber-450);
	--color-docs-600: var(--color-amber-400);
	--color-docs-650: var(--color-amber-350);
	--color-docs-700: var(--color-amber-300);
	--color-docs-750: var(--color-amber-250);
	--color-docs-800: var(--color-amber-200);
	--color-docs-850: var(--color-amber-150);
	--color-docs-900: var(--color-amber-100);
	--color-docs-950: var(--color-amber-50);
	/* page (inverted) */
	--color-page-50: var(--color-yellow-950);
	--color-page-100: var(--color-yellow-900);
	--color-page-150: var(--color-yellow-850);
	--color-page-200: var(--color-yellow-800);
	--color-page-250: var(--color-yellow-750);
	--color-page-300: var(--color-yellow-700);
	--color-page-350: var(--color-yellow-650);
	--color-page-400: var(--color-yellow-600);
	--color-page-450: var(--color-yellow-550);
	--color-page-500: var(--color-yellow-500);
	--color-page-550: var(--color-yellow-450);
	--color-page-600: var(--color-yellow-400);
	--color-page-650: var(--color-yellow-350);
	--color-page-700: var(--color-yellow-300);
	--color-page-750: var(--color-yellow-250);
	--color-page-800: var(--color-yellow-200);
	--color-page-850: var(--color-yellow-150);
	--color-page-900: var(--color-yellow-100);
	--color-page-950: var(--color-yellow-50);
	/* action (inverted) */
	--color-action-50: var(--color-blue-950);
	--color-action-100: var(--color-blue-900);
	--color-action-150: var(--color-blue-850);
	--color-action-200: var(--color-blue-800);
	--color-action-250: var(--color-blue-750);
	--color-action-300: var(--color-blue-700);
	--color-action-350: var(--color-blue-650);
	--color-action-400: var(--color-blue-600);
	--color-action-450: var(--color-blue-550);
	--color-action-500: var(--color-blue-500);
	--color-action-550: var(--color-blue-450);
	--color-action-600: var(--color-blue-400);
	--color-action-650: var(--color-blue-350);
	--color-action-700: var(--color-blue-300);
	--color-action-750: var(--color-blue-250);
	--color-action-800: var(--color-blue-200);
	--color-action-850: var(--color-blue-150);
	--color-action-900: var(--color-blue-100);
	--color-action-950: var(--color-blue-50);
}

/* ── Rendered prose ────────────────────────────────────────────────────────
 *
 * The typography of a rendered markdown body, shared by everything that has
 * one: a [DOC]'s content and a [SHOWCASE]'s [PROSE] blocks. Global rather than
 * component-scoped because the markup it styles is compiled at build time and
 * arrives as its own component — there is no scope to share with it.
 */
.sdocs-prose {
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-base-800);
}
.sdocs-prose h1,
.sdocs-prose h2,
.sdocs-prose h3,
.sdocs-prose h4,
.sdocs-prose h5,
.sdocs-prose h6 {
	color: var(--color-base-900);
	font-weight: 650;
	line-height: 1.3;
	margin: 1.6em 0 0.5em;
	scroll-margin-top: 16px;
}
/* The body h1 serves as the page title — match .sdocs-view-title */
.sdocs-prose h1 {
	font-size: 24px;
	font-weight: 700;
}
.sdocs-prose h2 { font-size: 18px; }
.sdocs-prose h3 { font-size: 15px; }
.sdocs-prose h4,
.sdocs-prose h5,
.sdocs-prose h6 { font-size: 14px; }
.sdocs-prose h1:first-child,
.sdocs-prose h2:first-child,
.sdocs-prose h3:first-child {
	margin-top: 0;
}
/* The measure, not the column.
 *
 * Prose set to the full content width runs 102 characters per line at 1280px
 * and 139 at 1920 — roughly double what is comfortable to read. The column
 * itself has to stay wide, since tables, stages and code all want the room, so
 * the cap goes on the text elements instead.
 *
 * Fixed rather than configurable: every other content knob (`maxWidth`,
 * `padding`, `contentX`) sizes a container, while a measure is a typographic
 * constant. A project that wants narrower prose narrows the whole column with
 * `maxWidth` on the entity. */
.sdocs-prose p,
.sdocs-prose li,
.sdocs-prose blockquote {
	max-width: 70ch;
}
.sdocs-prose p {
	margin: 0.7em 0;
}
/* `action` is an aliased ramp and inverts with the theme, so one step covers
   both grounds — unlike the raw `blue`/`red` ramps below, which do not, and
   which each need saying twice. At action-500 a link sat at 3.4:1 on the
   tinted chip an inline `code` carries, which is the shape most of these
   links have. */
.sdocs-prose a {
	color: var(--color-action-600, var(--color-base-900));
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sdocs-prose ul,
.sdocs-prose ol {
	margin: 0.7em 0;
	padding-left: 1.6em;
}
.sdocs-prose li {
	margin: 0.25em 0;
}
.sdocs-prose blockquote {
	margin: 0.9em 0;
	padding: 2px 16px;
	border-left: 3px solid var(--color-base-200);
	color: var(--color-base-600);
}
.sdocs-prose hr {
	border: none;
	border-top: 1px solid var(--color-base-200);
	margin: 24px 0;
}
.sdocs-prose code {
	font-family: var(--mono);
	font-size: 0.92em;
}
/* Inline code only — a `code` that is not a direct child of a `pre`. The
   parens matter: `:not(pre > code)` matches nearly every element on the page,
   and puts this chip's background and padding behind all of them. */
.sdocs-prose :not(pre) > code {
	background: var(--color-base-100);
	border-radius: 4px;
	padding: 1px 5px;
}
.sdocs-prose pre {
	margin: 0.9em 0;
	padding: 12px;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.5;
	tab-size: 4;
}
.sdocs-prose table {
	border-collapse: collapse;
	margin: 0.9em 0;
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
.sdocs-prose th,
.sdocs-prose td {
	border: 1px solid var(--color-base-200);
	padding: 6px 12px;
	text-align: left;
}
.sdocs-prose td[align='center'],
.sdocs-prose th[align='center'] {
	text-align: center;
}
.sdocs-prose td[align='right'],
.sdocs-prose th[align='right'] {
	text-align: right;
}
.sdocs-prose th {
	background: var(--color-base-50);
	font-weight: 600;
}
.sdocs-prose img {
	max-width: 100%;
	border-radius: 6px;
}

/* Task lists: GitHub-style checkboxes, no bullet */
.sdocs-prose li:has(> input[type='checkbox']:first-child) {
	list-style: none;
	margin-left: -1.3em;
}
.sdocs-prose li > input[type='checkbox'] {
	margin-right: 6px;
	vertical-align: -2px;
}

/* GitHub-style alerts: > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION] */
.sdocs-prose .sdocs-alert {
	margin: 0.9em 0;
	padding: 8px 16px;
	border-left: 3px solid var(--sdocs-alert-color);
	border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, var(--sdocs-alert-color) 6%, transparent);
}
/* The label is text and needs 4.5:1; the rule beside it is not, and 3:1 is
   enough there. One token each, so the border keeps the weight it was drawn
   with instead of darkening to satisfy a rule that isn't about it. */
.sdocs-prose .sdocs-alert-label {
	font-size: 13px;
	font-weight: 650;
	color: var(--sdocs-alert-text, var(--sdocs-alert-color));
	margin: 0.25em 0 0;
}
.sdocs-app[data-sdocs-theme='dark'] {
	--sdocs-required-color: var(--color-red-400);
}
.sdocs-app[data-sdocs-theme='dark'] .sdocs-prose .sdocs-alert-label {
	color: var(--sdocs-alert-text-dark, var(--sdocs-alert-color));
}
.sdocs-prose .sdocs-alert-note {
	--sdocs-alert-color: var(--color-blue-500);
	--sdocs-alert-text: var(--color-blue-600);
	--sdocs-alert-text-dark: var(--color-blue-400);
}
.sdocs-prose .sdocs-alert-tip {
	--sdocs-alert-color: var(--color-green-500);
	--sdocs-alert-text: var(--color-green-600);
	--sdocs-alert-text-dark: var(--color-green-400);
}
.sdocs-prose .sdocs-alert-important {
	--sdocs-alert-color: var(--color-purple-500);
	--sdocs-alert-text: var(--color-purple-600);
	--sdocs-alert-text-dark: var(--color-purple-400);
}
.sdocs-prose .sdocs-alert-warning {
	--sdocs-alert-color: var(--color-amber-500);
	--sdocs-alert-text: var(--color-amber-600);
	--sdocs-alert-text-dark: var(--color-amber-400);
}
.sdocs-prose .sdocs-alert-caution {
	--sdocs-alert-color: var(--color-red-500);
	--sdocs-alert-text: var(--color-red-600);
	--sdocs-alert-text-dark: var(--color-red-400);
}

/* ── Example stages in the page flow ── */

/* A heading links to its own section — it inherits the heading's type entirely,
 * so the only sign it is a link is the cursor. */
.sdocs-prose .sdocs-heading-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.sdocs-prose .sdocs-heading-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--color-base-300);
}

/* Passed-through HTML.
 *
 * Markdown has no syntax for these, so they only appear when an author writes
 * the tag directly. Unstyled, a <kbd> reads as ordinary prose and a
 * <figcaption> as a stray paragraph — an element that renders wrong is worse
 * than one that does not render at all. */
.sdocs-prose kbd {
	display: inline-block;
	min-width: 1em;
	padding: 1px 5px;
	border: 1px solid var(--color-base-200);
	/* The bottom edge is what reads as a key's depth — a full border with an
	   even shadow reads as a chip instead. */
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--color-base-50);
	font-family: var(--mono);
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--color-base-800);
	text-align: center;
	white-space: nowrap;
}

.sdocs-prose figure {
	margin: 1.2em 0;
	/* Wide figures scroll inside themselves rather than the page. */
	overflow-x: auto;
}

.sdocs-prose figure > :first-child {
	margin-top: 0;
}

.sdocs-prose figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-base-600);
}

.sdocs-prose sup,
.sdocs-prose sub {
	font-size: 0.75em;
	/* Keeps a line with a footnote marker on the same rhythm as one without. */
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.sdocs-prose sup {
	top: -0.5em;
}

.sdocs-prose sub {
	bottom: -0.25em;
}

/* ── Copy button ───────────────────────────────────────────────────────────
 *
 * Created as a DOM node by the copyCode attachment rather than as a component:
 * the code it sits on is `{@html}` in every case — a rendered fence, a shiki
 * panel — so there is no markup to hang a component off. Global for the same
 * reason: the button is not inside any component's scope. */
.sdocs-copy {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--color-base-200);
	border-radius: 5px;
	background: var(--color-base-0);
	color: var(--color-base-600);
	cursor: pointer;
	/* Hidden until the pointer or focus finds it, but always in the layout —
	   appearing out of display:none has nothing to transition from. */
	opacity: 0;
	transition: opacity 120ms ease;
}

.sdocs-copy-host:hover > .sdocs-copy,
.sdocs-copy:focus-visible {
	opacity: 1;
}

.sdocs-copy:hover {
	border-color: var(--color-base-300);
	color: var(--color-base-900);
}

.sdocs-copy.is-copied {
	color: var(--color-success-600, var(--color-base-900));
}

/* Touch has no hover: on a coarse pointer the button is simply always there. */
@media (hover: none) {
	.sdocs-copy {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdocs-copy {
		transition: none;
	}
}