/* =============================================================================
   PREVIEW CHROME — for the /design/ pages only.
   Not part of the design system. Nothing here ships in the theme.

   Navigation is a fixed left sidebar (pages grouped, then this page's
   sections), so the top bar never runs out of room again. On small screens
   it becomes a drawer behind the ☰ button in the slim top bar.
   ========================================================================== */

:root { --side-w: 16.5rem; --rail-w: 15rem; --bar-h: 3.5rem; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.doc-side {
	position: fixed;
	top: var(--bar-h);
	bottom: 0;
	left: 0;
	width: var(--side-w);
	display: flex;
	flex-direction: column;
	background: var(--bg-surface);
	border-right: var(--border-hair) solid var(--line-default);
	z-index: var(--z-nav);
}

.doc-side__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: var(--border-hair) solid var(--line-subtle);
	flex: none;
}

.doc-side__head .doc-logo { text-decoration: none; color: inherit; }

.doc-side__nav {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4) var(--space-3) var(--space-6);
	scrollbar-width: thin;
}

.doc-side__group {
	display: block;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	padding: var(--space-5) var(--space-2) var(--space-2);
}

.doc-side__nav > .doc-side__group:first-child { padding-top: var(--space-1); }

/* Collapsible groups — <details class="doc-group">, active group ships open. */
details.doc-group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-slate);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-default);
	padding: var(--space-4) var(--space-2) var(--space-2);
	transition: var(--t-colors);
}

/* The open group gets a hairline so the eye can find the block it is in. */
details.doc-group[open] > summary { border-bottom: var(--border-hair) solid var(--line-subtle); margin-bottom: var(--space-2); }

details.doc-group > summary::-webkit-details-marker { display: none; }

.doc-group__l { display: inline-flex; align-items: center; gap: var(--space-2); }
.doc-group__l svg { width: 0.85rem; height: 0.85rem; opacity: 0.75; }
details.doc-group > summary:hover { color: var(--fg-default); }

details.doc-group > summary::after {
	content: '';
	width: 0.35rem;
	height: 0.35rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: var(--t-transform);
	margin-right: var(--space-2);
}

details.doc-group[open] > summary::after { transform: rotate(45deg); }

/* Animation pages: demos loop so nothing has to be caught mid-play. */
body.loop-demos .demo *,
body.loop-demos .surface * { animation-iteration-count: infinite !important; }

.doc-side__nav a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--fg-muted);
	text-decoration: none;
	padding: 5px var(--space-2);
	border-radius: var(--radius-sm);
	transition: var(--t-colors);
}

.doc-side__nav a:hover { color: var(--fg-default); background: var(--bg-sunken); }

/* Current page — accent dot + weight. */
.doc-side__nav a[aria-current='page'] {
	color: var(--fg-default);
	font-weight: var(--weight-semibold);
	background: var(--bg-sunken);
}

.doc-side__nav a[aria-current='page']::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: var(--radius-full);
	background: var(--accent);
	flex: none;
}

.doc-side__foot {
	flex: none;
	padding: var(--space-4) var(--space-5);
	border-top: var(--border-hair) solid var(--line-subtle);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.doc-side__foot .doc-btn { justify-content: center; width: 100%; }

/* ── Sidebar collapse (desktop) ──────────────────────────────────────────── */

.doc-side__hide { padding-inline: var(--space-2); }

button.doc-reopen.doc-reopen {
	display: none;
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	z-index: var(--z-nav);
	box-shadow: var(--shadow-2);
}

@media (min-width: 64rem) {
	.doc-side { transition: transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
	body.has-side.side-collapsed > main { padding-left: 0; }
	body.side-collapsed .doc-side { transform: translateX(-100%); visibility: hidden; }
	body.side-collapsed button.doc-reopen.doc-reopen { display: inline-flex; }
}

@media (max-width: 63.999rem) {
	.doc-side__hide { display: none; }
}

/* ── Top bar (small screens only) ────────────────────────────────────────── */

.doc-top {
	display: none;
	position: sticky;
	top: 0;
	z-index: calc(var(--z-nav) - 1);
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: var(--border-hair) solid var(--line-default);
}

.doc-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--bg-scrim);
	z-index: calc(var(--z-nav) - 1);
}

/* ── Responsive split ────────────────────────────────────────────────────── */

@media (min-width: 64rem) {
	body.has-side > main,
	body.has-side > .doc-top { padding-left: var(--side-w); }
}

@media (max-width: 63.999rem) {
	.doc-top { display: flex; }

	.doc-side {
		transform: translateX(-100%);
		transition: transform var(--dur-2) var(--ease-out);
		box-shadow: var(--shadow-4);
		max-width: 85vw;
	}

	body.nav-open .doc-side { transform: none; }
	body.nav-open .doc-scrim { display: block; }
}

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

/* ── The right rail — this page's headings, then the sponsor ask ─────────────
   The page head runs the full content width, the way a hero should. Below it
   the page splits: content on the left, rail on the right. The rail is sticky
   because a table of contents that scrolls away has stopped being a map, and
   it is the first thing to go when the viewport can no longer afford three
   columns — the same headings are still reachable from the page itself.
   -------------------------------------------------------------------------- */

/* No align-items here on purpose: the rail must stretch to the full height of
   the row, or the sticky card inside it runs out of track a screen in and
   scrolls away with the top of the page. */
.doc-split {
	display: grid;
	gap: var(--space-10);
}

@media (min-width: 78rem) {
	.doc-split { grid-template-columns: minmax(0, 1fr) var(--rail-w); }
}

/* The content column must be allowed to shrink, or a wide demo (a table, a
   thumbnail grid) pushes the rail off the screen instead of scrolling itself. */
.doc-split__main { min-width: 0; }

@media (min-width: 78rem) {
	.doc-rail__in {
		position: sticky;
		top: calc(var(--bar-h) + var(--space-6));
		max-height: calc(100vh - var(--bar-h) - var(--space-10));
		overflow-y: auto;
		scrollbar-width: thin;
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}
}

.doc-toc__title {
	display: block;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hair) solid var(--line-subtle);
}

.doc-toc__links { display: flex; flex-direction: column; padding-top: var(--space-2); }

.doc-toc a {
	font-size: var(--text-sm);
	color: var(--fg-subtle);
	text-decoration: none;
	line-height: var(--leading-snug, 1.35);
	padding: 5px var(--space-3);
	border-left: var(--border-hair) solid var(--line-subtle);
	transition: var(--t-colors);
}

.doc-toc a:hover { color: var(--fg-default); border-left-color: var(--line-strong); }

/* Scrollspy highlight — the accent marks where the reader is, nothing else. */
.doc-toc a.is-active {
	color: var(--fg-default);
	font-weight: var(--weight-medium);
	border-left-color: var(--accent);
}

/* ── Sponsor card ────────────────────────────────────────────────────────── */

.doc-sponsor {
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-card);
	background: var(--bg-surface);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	position: relative;
	overflow: hidden;
}

/* The record light again — the one place on the page allowed to be vermilion. */
.doc-sponsor::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--accent);
}

.doc-sponsor__eyebrow {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
}

.doc-sponsor__lead {
	font-size: var(--text-sm);
	color: var(--fg-subtle);
	margin: 0;
}

.doc-sponsor__cta svg { width: 0.95rem; height: 0.95rem; margin-right: var(--space-2); }

.doc-sponsor__alt {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	color: var(--fg-faint);
	text-decoration: none;
	transition: var(--t-colors);
}

.doc-sponsor__alt:hover { color: var(--fg-default); }

/* Below the split, the rail is gone — so the ask rides the page footer area
   instead of vanishing with it. */
@media (max-width: 77.999rem) {
	.doc-split .doc-rail { display: block; margin-top: var(--space-10); }
	.doc-split .doc-toc { display: none; }
	.doc-split .doc-sponsor { max-width: 34rem; }
}

/* ── Shared bits ─────────────────────────────────────────────────────────── */

.doc-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-tighter);
	text-decoration: none;
}

.doc-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--control-sm);
	padding-inline: var(--space-3);
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-pill);
	background: var(--bg-surface);
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	transition: var(--t-colors);
	cursor: pointer;
	color: inherit;
}

.doc-btn:hover {
	border-color: var(--line-strong);
	background: var(--bg-sunken);
}

section[id] { scroll-margin-top: 2rem; }

.sec-head { margin-bottom: var(--space-8); }

.sec-num {
	font-family: var(--font-slate);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-slate);
	color: var(--accent);
	display: block;
	margin-bottom: var(--space-2);
}

/* The "what this is called" strip under every demo. */
.spec {
	border-top: var(--border-hair) solid var(--line-subtle);
	background: var(--bg-sunken);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: 0.06em;
	color: var(--fg-subtle);
	border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.spec b { color: var(--fg-default); font-weight: var(--weight-medium); }

.demo { padding: var(--space-6); }
.demo-tile { overflow: hidden; }

/* ── Room for an open panel ──────────────────────────────────────────────────
   A dropdown is absolutely positioned: it adds no height, so the tile stays
   the size of the closed bar and its own clipping cuts the panel off halfway.
   Two things fix it, and both are needed. The tile stops clipping, so a panel
   taller than expected is still readable; and the demo reserves room while a
   panel is open, so the usual case lands inside the tile instead of over the
   strip that names it. Nothing is reserved when everything is shut.
   -------------------------------------------------------------------------- */

.demo-tile:has(.nav-menu, .nav-mega) { overflow: visible; }

/* The open tile paints above its neighbours, or the next tile covers the
   panel that just opened. */
.demo-tile:has(.nav-menu[open], .nav-mega[open]) {
	position: relative;
	z-index: 2;
}

.demo:has(.nav-menu[open]) { padding-bottom: 19rem; }
.demo:has(.nav-mega[open]) { padding-bottom: 23rem; }

/* The mega panel spans the island, so the tile must not squeeze it. */
.demo:has(.nav-mega[open]) .nav-mega__panel { max-height: 21rem; overflow-y: auto; }
.demo:has(.nav-menu[open]) .nav-menu__panel { max-height: 17rem; overflow-y: auto; }

/* Sub-label inside a demo, for grouping rows of variants. */
.demo-label {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-bottom: var(--space-3);
	display: block;
}

/* Swatches (foundation page) */
.ramp {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
	gap: var(--space-3);
}

.sw {
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg-surface);
}

.sw__chip { height: 3.5rem; }

.sw__meta {
	padding: var(--space-2) var(--space-3);
	border-top: var(--border-hair) solid var(--line-subtle);
}

.sw__name { font-family: var(--font-slate); font-size: var(--text-2xs); display: block; }
.sw__val { font-family: var(--font-slate); font-size: var(--text-2xs); color: var(--fg-faint); }

.pattern-tile {
	height: 8.5rem;
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	display: flex;
	align-items: flex-end;
	padding: var(--space-3);
}

.pattern-tile code {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	background: var(--bg-canvas);
	border: var(--border-hair) solid var(--line-subtle);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
}

.bar { background: var(--accent); border-radius: var(--radius-xs); height: 0.75rem; }

.rad {
	width: 4.5rem;
	height: 4.5rem;
	border: var(--border-hair) solid var(--line-strong);
	background: var(--bg-sunken);
}

table.spec-table th {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-subtle);
	text-align: left;
	font-weight: var(--weight-medium);
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-hair) solid var(--line-default);
}

table.spec-table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-hair) solid var(--line-subtle);
	font-size: var(--text-sm);
}

table.spec-table tr:last-child td { border-bottom: 0; }

.grid-demo > div {
	background: var(--accent-soft);
	border: var(--border-hair) solid var(--line-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	color: var(--accent-soft-fg);
	text-align: center;
}

/* ── Docs pages (preview/docs/) ──────────────────────────────────────────── */

.docs-head { margin-bottom: var(--space-10); }

.docs-pager {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-16);
}

.docs-pager__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 1 16rem;
	padding: var(--space-3) var(--space-4);
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--fg-default);
	transition: var(--t-colors);
}

.docs-pager__link:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.docs-pager__link-next { text-align: right; }

.docs-pager__dir {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
}

.docs-pager__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }

/* ── Layout wireframes (layouts.html) ────────────────────────────────────── */

.wire {
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-md);
	background: var(--bg-canvas);
	padding: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: 4px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.wire i {
	display: block;
	border-radius: 3px;
	background: var(--bg-sunken);
	border: var(--border-hair) solid var(--line-subtle);
	flex: none;
	font-style: normal;
	min-height: 8px;
}

.wire .w-row { display: flex; gap: 4px; flex: 1; min-height: 0; border: 0; background: none; padding: 0; }
.wire .w-row > i { flex: 1; min-height: 100%; }

.wire .w-nav { height: 10px; border-radius: var(--radius-pill); }
.wire .w-hero { flex: 0 0 32%; }
.wire .w-media { background: repeating-linear-gradient(45deg, var(--bg-sunken) 0 6px, var(--bg-muted) 6px 12px); }
.wire .w-accent { border-color: var(--line-accent); background: var(--accent-soft); }
.wire .w-ink { background: var(--bg-inverse); border-color: var(--bg-inverse); }
.wire .w-rail { flex: 0 0 26%; }
.wire .w-grow { flex: 1 1 auto; min-height: 0; }

.wire-note {
	font-size: var(--text-xs);
	color: var(--fg-subtle);
	line-height: var(--leading-snug);
}

/* Anchors in the docs chrome carry no underline — the colour and the
   hover wash are the affordance. Long-form content sets its own rules. */
.doc-side a,
.doc-top a,
.cds-bar a,
.docs-pager a,
.spec a,
.demo a:not(.t-link) { text-decoration: none; }

/* ── Docs search ─────────────────────────────────────────────────────────── */

.doc-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) var(--space-3) 0;
	padding: 0 var(--space-2) 0 var(--space-3);
	height: var(--control-sm);
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-pill);
	background: var(--bg-sunken);
	flex: none;
	transition: var(--t-colors);
}

.doc-search:focus-within { border-color: var(--line-accent); background: var(--bg-canvas); }
.doc-search .icon { width: 0.9rem; height: 0.9rem; color: var(--fg-faint); flex: none; }

.doc-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--text-sm);
	color: var(--fg-default);
	outline: none;
	padding: 0;
}

.doc-search input::-webkit-search-cancel-button { display: none; }
.doc-search .kbd { flex: none; opacity: 0.5; }
.doc-search:focus-within .kbd { display: none; }

.doc-results {
	margin: var(--space-2) var(--space-3) 0;
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-lg);
	background: var(--bg-canvas);
	box-shadow: var(--shadow-2);
	max-height: 60vh;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: var(--space-1);
}

.doc-results[hidden] { display: none; }

.doc-results a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--fg-default);
	font-size: var(--text-sm);
}

.doc-results a:hover,
.doc-results a.is-sel { background: var(--bg-sunken); }
.doc-results a.is-sel { box-shadow: inset 2px 0 0 var(--accent); }

.doc-results a small {
	display: block;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-top: 1px;
}

.doc-results mark { background: var(--accent-soft); color: var(--accent-soft-fg); border-radius: 2px; }

.doc-results__none {
	padding: var(--space-4);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--fg-faint);
}

/* ── Preview ⇄ Code switch ───────────────────────────────────────────────── */

.demo-switch {
	display: flex;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-2) 0;
	justify-content: flex-end;
}

.demo-switch__btn {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	padding: 3px var(--space-3);
	border-radius: var(--radius-pill);
	transition: var(--t-colors);
}

.demo-switch__btn:hover { color: var(--fg-default); }

.demo-switch__btn[aria-pressed='true'] {
	background: var(--bg-sunken);
	color: var(--fg-default);
}

.demo-code { padding: var(--space-4) var(--space-4) var(--space-2); }
.demo-code .codebox__pre { max-height: 26rem; }

/* ── Navbar playground ───────────────────────────────────────────────────────
   Docs chrome, not system CSS. Every control here sets a knob the component
   already has, so the markup it prints is markup you could have written.
   -------------------------------------------------------------------------- */

.np {
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--bg-surface);
}

.np__stage {
	padding: var(--space-6) var(--space-5);
	background: var(--bg-sunken);
	border-bottom: var(--border-hair) solid var(--line-default);
}

.np__panel {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5);
	border-bottom: var(--border-hair) solid var(--line-default);
}

.np__row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.np__label {
	flex: none;
	width: 7.5rem;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
}

/* Segmented control — radios, so arrow keys and labels come free. */
.np__seg {
	display: inline-flex;
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--bg-canvas);
}

.np__opt > input { position: absolute; opacity: 0; pointer-events: none; }

.np__opt > span {
	display: inline-flex;
	align-items: center;
	height: var(--control-sm);
	padding-inline: var(--space-4);
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-subtle);
	cursor: pointer;
	transition: var(--t-colors);
	border-left: var(--border-hair) solid var(--line-subtle);
}

.np__opt:first-child > span { border-left: 0; }
.np__opt > span:hover { background: var(--bg-sunken); color: var(--fg-default); }
.np__opt > input:checked + span { background: var(--fg-default); color: var(--bg-canvas); }
.np__opt > input:focus-visible + span { outline: var(--border-2) solid var(--accent); outline-offset: -2px; }

.np__checks { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.np__check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--fg-subtle);
	cursor: pointer;
}

.np__check > input { accent-color: var(--accent); }
.np__check:hover { color: var(--fg-default); }

.np__range { flex: 1 1 12rem; max-width: 18rem; accent-color: var(--accent); }

.np__out-val {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	color: var(--fg-subtle);
	font-variant-numeric: tabular-nums;
}

.np__code { padding: var(--space-4); }
.np__code .codebox__pre { max-height: 22rem; }

@media (max-width: 40rem) {
	.np__label { width: 100%; }
}

/* ── The Creator Design System mark ──────────────────────────────────────────
   The project's own brand, not Swarnil's: the word set in the display face
   with the record light riding the shoulder of the final letter. The dot is
   the same idea the system teaches — one vermilion light that means live.
   ------------------------------------------------------------------------- */

.cds-mark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-tighter);
	color: var(--fg-default);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.cds-mark__word { position: relative; }

/* The record light, on the shoulder. */
/* The o IS the record light. A dot parked on the shoulder is a thing added to
   the word; a letter that has become the light is the word saying it itself —
   and it is the round letter already sitting at the centre of "creator".

   Sized in `ex` — the x-height, the height an o occupies — so it stays right in
   any face at any size with no magic numbers to re-tune when --font-display
   changes. At 0.62ex it reads as a light rather than a filled letter: smaller
   than the bowl it replaces, centred in the space that bowl would have taken.
   The letter itself follows as screen-reader text, so the accessible name and a
   copy-paste still read "creator". */
.cds-mark__o {
	display: inline-block;
	width: 0.62ex;
	height: 0.62ex;
	margin-inline: 0.26ex;
	vertical-align: 0.24ex;
	border-radius: var(--radius-full);
	background: var(--accent);
}

/* Only the landing hero breathes; a pulsing dot in a nav is a distraction. */
.cds-mark-live .cds-mark__o { animation: cds-rec 2.4s var(--ease-inout) infinite; }

@keyframes cds-rec {
	0%, 70%, 100% { opacity: 1; }
	82% { opacity: 0.25; }
}

.cds-mark__sub {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-left: 0.5em;
}

@media (max-width: 40rem) { .cds-mark__sub { display: none; } }

/* ── The site bar — on every page ────────────────────────────────────────── */

.cds-bar {
	position: sticky;
	top: 0;
	z-index: calc(var(--z-nav) + 1);
	background: color-mix(in srgb, var(--bg-canvas) 90%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: var(--border-hair) solid var(--line-default);
}

.cds-bar__in {
	min-height: var(--bar-h);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-3) var(--gutter);
	max-width: calc(var(--w-wide) + var(--gutter) * 2);
	margin-inline: auto;
}

/* Docs pages run the bar edge to edge: it sits above both rails and the
   content, so centring it inside a container would leave it hanging over the
   left sidebar rather than spanning the page. */
.cds-bar-wide .cds-bar__in { max-width: none; }

.cds-bar__links { display: none; gap: var(--space-1); margin-inline: auto; }
@media (min-width: 62rem) { .cds-bar__links { display: flex; } }

.cds-bar__links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 5px var(--space-3);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	color: var(--fg-muted);
	transition: var(--t-colors);
}

/* The glyph is a landmark, not a second label: it sits back until the link is
   hovered or current, so the row still reads as words first. */
.cds-bar__links a .icon { opacity: 0.55; transition: opacity var(--dur-2) var(--ease-out); }

.cds-bar__links a:hover { color: var(--fg-default); background: var(--bg-sunken); }
.cds-bar__links a:hover .icon { opacity: 1; }

.cds-bar__links a[aria-current] {
	color: var(--fg-default);
	font-weight: var(--weight-semibold);
	background: var(--bg-sunken);
}

.cds-bar__links a[aria-current] .icon { opacity: 1; color: var(--accent); }

.cds-bar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 62rem) { .cds-bar__end { margin-left: 0; } }

/* GitHub button with the live star count. */
.cds-gh {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--control-sm);
	padding-inline: var(--space-3);
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-pill);
	background: var(--bg-surface);
	color: var(--fg-default);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	transition: var(--t-colors);
}

.cds-gh:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.cds-gh svg { width: 1rem; height: 1rem; flex: none; }

.cds-gh__stars {
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	font-variant-numeric: tabular-nums;
	color: var(--fg-subtle);
	padding-left: var(--space-2);
	border-left: var(--border-hair) solid var(--line-default);
}

@media (max-width: 48rem) { .cds-gh span:not(.cds-gh__stars) { display: none; } }

/* Search moves into the bar, so it is on every page. */
.cds-bar .doc-search { margin: 0; flex: 0 1 16rem; min-width: 6rem; }
@media (max-width: 62rem) { .cds-bar .doc-search { flex: 1 1 auto; } }

.cds-bar .doc-results {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: var(--gutter);
	right: var(--gutter);
	max-width: 26rem;
	margin: 0;
	z-index: var(--z-overlay, 200);
}

/* The reopen chip clears the bar. */
button.doc-reopen.doc-reopen { top: calc(var(--bar-h) + var(--space-3)); }

/* ── Component cards in the explorer ─────────────────────────────────────── */

.cds-card__ico {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-md);
	background: var(--bg-sunken);
	color: var(--fg-subtle);
	margin-bottom: var(--space-3);
	transition: var(--t-colors);
}

.cds-card__icon { width: 1.15rem; height: 1.15rem; }

.cds-card:hover .cds-card__ico { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* ── Principles — the icon rides the right, and draws itself in ──────────── */

.pr-row {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--space-5);
}

.pr-row__art {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-lg);
	background: var(--bg-sunken);
	color: var(--accent);
	order: 2;
}

.pr-row__art svg { width: 2rem; height: 2rem; overflow: visible; }

/* Each stroke draws itself when the row scrolls into view. */
.pr-row__art svg * {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: pr-draw 1.4s var(--ease-out) forwards;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pr-row__art svg * { animation-timeline: view(); animation-range: entry 10% cover 30%; }
	}
}

@keyframes pr-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.pr-row__art svg * { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 40rem) {
	.pr-row { flex-direction: column; }
	.pr-row__art { order: -1; }
}

/* The bar's menu button appears only when the link row is gone. */
.cds-bar__burger { display: none; }
@media (max-width: 61.999rem) { .cds-bar__burger { display: inline-flex; } }
@media (max-width: 55.999rem) { .lp-nav .cds-bar__burger { display: inline-flex; } }

/* Scroll demo box — a page-in-a-box so the morph variant can be shown without
   asking the reader to scroll the actual page. */
.np__scroller { height: 15rem; overflow-y: auto; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.np__scroller-in { min-height: 34rem; position: relative; }
.np__filler { padding: var(--space-6) var(--space-5); color: var(--fg-faint); }

/* Accent swatches in the builder. */
.np__swatches { display: flex; gap: var(--space-2); }

.np__swatch > input { position: absolute; opacity: 0; pointer-events: none; }

.np__swatch {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: var(--radius-full);
	background: var(--sw, var(--accent));
	cursor: pointer;
	border: var(--border-2) solid transparent;
	box-shadow: 0 0 0 1px var(--line-default);
	transition: var(--t-transform);
}

.np__swatch:hover { transform: scale(1.1); }
.np__swatch:has(> input:checked) { border-color: var(--bg-surface); box-shadow: 0 0 0 2px var(--fg-default); }
.np__swatch:has(> input:focus-visible) { outline: var(--border-2) solid var(--accent); outline-offset: 2px; }

/* ── Builder ─────────────────────────────────────────────────────────────── */

.np__group { border-bottom: var(--border-hair) solid var(--line-subtle); }
.np__group:last-of-type { border-bottom: 0; }

.np__group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: var(--fg-default);
}

.np__group > summary::-webkit-details-marker { display: none; }

.np__group > summary::after {
	content: '';
	width: 0.35rem;
	height: 0.35rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate(-45deg);
	opacity: 0.5;
	transition: var(--t-transform);
}

.np__group[open] > summary::after { transform: rotate(45deg); }
.np__rows { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }

.np__text {
	border: var(--border-hair) solid var(--line-default);
	border-radius: var(--radius-md);
	background: var(--bg-canvas);
	color: inherit;
	font: inherit;
	font-size: var(--text-sm);
	padding: 4px var(--space-3);
	height: var(--control-sm);
}

.np__text:focus-visible { outline: var(--border-2) solid var(--accent); outline-offset: 1px; }

/* The stage carries its own theme so the dark preview does not drag the page
   with it — data-theme is the same switch the system ships. */
.np__stage { position: relative; padding: 0; }
.np__stage > .nav-shell { position: static; padding-inline: var(--space-5); max-width: none; }
.np__stage[data-theme='dark'] { background: var(--ink-1000); }

.np__stage:not(.np__stage-over) > .nav-shell { padding-block: var(--space-5); }

/* Over-media: the bar sits on the footage, the way it will on the real page. */
.np__media {
	position: relative;
	height: 9rem;
	background:
		radial-gradient(120% 90% at 30% 20%, #3a3a4a 0%, transparent 60%),
		linear-gradient(160deg, #1a1a24, #0b0b11);
}

.np__media-label {
	position: absolute;
	inset-inline: 0;
	bottom: var(--space-4);
	text-align: center;
	font-family: var(--font-slate);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-slate);
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.3);
}

.np__stage-over > .nav-shell { position: absolute; inset-inline: 0; top: 0; }

/* A few lines of "page" so a transparent or hide-on-scroll bar has context. */
.np__page { display: grid; gap: var(--space-2); padding: var(--space-5); }
.np__page > span { height: 8px; border-radius: 4px; background: var(--line-subtle); }
.np__page > span:nth-child(2) { width: 78%; }
.np__page > span:nth-child(3) { width: 54%; }
.np__stage[data-theme='dark'] .np__page > span { background: rgb(255 255 255 / 0.08); }

/* ── Introduction hero illustration (docs/_build/content_extra.py) ────────── */
@keyframes cds-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(150px); } }
@keyframes cds-blink { 0%, 70%, 100% { opacity: 1; } 82% { opacity: 0.25; } }
@keyframes cds-type { 0% { width: 0; } 60%, 100% { width: 190px; } }
@keyframes cds-orbit { to { transform: rotate(360deg); } }
.cds-illo .scan { animation: cds-scan 5s var(--ease-inout) infinite; }
.cds-illo .dot { animation: cds-blink 2.4s linear infinite; }
.cds-illo .type { animation: cds-type 5s var(--ease-inout) infinite; }
.cds-illo .orbit { transform-origin: 300px 110px; animation: cds-orbit 24s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cds-illo * { animation: none !important; } }

/* Icon-set page: dark theme inverts the demo tiles' <img> icons. */
[data-theme='dark'] .cds-ico { filter: invert(1); }

/* ── Homepage (docs/_build/content_site.py build_home) ─────────────────────
   The homepage runs the docs shell, so the hero takes the docs-head slot and
   the sections below it take the content column. Everything here is therefore
   sized against that column, not the viewport: the two-up hero needs a wider
   window than a full-bleed one would, because the left rail has already spent
   16rem of it. */
	.lp-hero { display: grid; gap: var(--space-10); align-items: center; padding-block: var(--space-6) var(--section-sm); }
	@media (min-width: 78rem) { .lp-hero { grid-template-columns: 1.05fr 1fr; } }
	.lp-hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem); max-width: 15ch; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tighter); line-height: var(--leading-flat); text-wrap: balance; margin-top: var(--space-5); }
	.lp-hero__title em { font-style: normal; color: var(--accent); }
	.lp-illo { width: 100%; height: auto; max-width: 32rem; margin-inline: auto; display: block; border-radius: var(--radius-lg); border: var(--border-hair) solid var(--line-default); }
	@keyframes lp-scan { 0%,100% { transform: translateY(0); } 50% { transform: translateY(354px); } }
	@keyframes lp-blink { 0%,70%,100% { opacity: 1; } 82% { opacity: .2; } }
	@keyframes lp-orbit { to { transform: rotate(360deg); } }
	@keyframes lp-float { 0%,100% { transform: translate(388px, 528px); } 50% { transform: translate(388px, 518px); } }
	.lp-scan { animation: lp-scan 6s var(--ease-inout) infinite; }
	.lp-rec { animation: lp-blink 2.4s linear infinite; }
	.lp-orbit { transform-origin: 300px 300px; animation: lp-orbit 26s linear infinite; }
	.lp-chip { animation: lp-float 5s var(--ease-inout) infinite; }

	/* Four scenes on one 16-second reel: video, then reel, then writing, then
	   code. --d is the scene's slot; children read it so anything that draws
	   itself does so while its own scene is on screen, not somebody else's. */
	.lp-scene { --d: 0s; opacity: 0; animation: lp-cut 16s var(--ease-inout) var(--d) infinite; }
	.lp-scene-2 { --d: 4s; }
	.lp-scene-3 { --d: 8s; }
	.lp-scene-4 { --d: 12s; }
	@keyframes lp-cut { 0% { opacity: 0; } 3%,22% { opacity: 1; } 25%,100% { opacity: 0; } }

	/* Anything that types, fills or draws itself inside a scene. */
	.lp-grow { transform-box: fill-box; transform-origin: left center; animation: lp-grow 16s var(--ease-out) var(--d) infinite; }
	@keyframes lp-grow { 0%,3% { transform: scaleX(0); } 17%,100% { transform: scaleX(1); } }
	.lp-d1 { animation-delay: calc(var(--d) + .35s); }
	.lp-d2 { animation-delay: calc(var(--d) + .7s); }
	.lp-d3 { animation-delay: calc(var(--d) + 1.05s); }
	.lp-d4 { animation-delay: calc(var(--d) + 1.4s); }
	.lp-caret { animation: lp-blink 1s steps(1) infinite; }
	.lp-pulse { transform-box: fill-box; transform-origin: center; animation: lp-pulse 2.6s var(--ease-inout) var(--d) infinite; }
	@keyframes lp-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
	.lp-pop { transform-box: fill-box; transform-origin: center; animation: lp-pop 16s var(--ease-out) var(--d) infinite; }
	@keyframes lp-pop { 0%,8% { transform: scale(.4); opacity: 0; } 13% { transform: scale(1.15); opacity: 1; } 16%,100% { transform: scale(1); opacity: 1; } }

	/* Reduced motion: no reel, no typing — the first scene simply stands. */
	@media (prefers-reduced-motion: reduce) {
		.lp-illo * { animation: none !important; }
		.lp-scene { opacity: 0; }
		.lp-scene-1 { opacity: 1; }
		.lp-grow, .lp-pop { transform: none; }
	}
	.lp-feats { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%), 1fr)); }
	.lp-feat { border: var(--border-hair) solid var(--line-default); border-radius: var(--radius-card); background: var(--bg-surface); padding: var(--space-5); }
	.lp-feat__ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-soft-fg); margin-bottom: var(--space-3); }
	.lp-feat__icon { width: 1.25rem; height: 1.25rem; }
	.lp-install .tabs { margin-bottom: var(--space-4); }
	[data-gh-stars] { font-variant-numeric: tabular-nums; }