/* Project styles: the accent & fonts. Edit freely; the scaffold never overwrites this file. */
:root {
	--accent: #d22d6f;
	/* Fonts: load your own (@font-face or @import), then put the family first.
	--font-sans: "Your Sans", var(--sans-stack);
	--font-display: "Your Display", var(--font-sans); */
}

/* The core's `block-size: auto` overrides the logo's height attribute, so size it here. */
body > header a[rel="home"] img {
	block-size: 2rem;
	inline-size: auto;
}

body > header [data-tagline] {
	flex: 1 1 14rem;
	color: var(--fg-muted);
	font-size: 0.95rem;
}

@media (max-width: 40rem) {
	body > header [data-tagline] {
		display: none;
	}
}

/* Home: headline, actions, & facts. */
.hero h1 {
	display: block;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hero h1 em {
	color: var(--accent-text);
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
}

/* Code: two-space tabs. */
pre {
	tab-size: 2;
}

/* Home: the usage sample gets the same terminal title bar as the hero. */
#usage {
	--chrome: terminal;
}

/* Home: four cards sit two by two. */
#features > ul {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Home: what's included. */
#included table {
	inline-size: 100%;
	border-collapse: collapse;
	border-block-end: 1px solid var(--border);
}

#included :is(th, td) {
	padding: var(--space-xs) var(--space-s);
	border-block-end: 1px solid var(--border);
	text-align: start;
}

#included a:has(> svg) {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

#included td:last-child,
#included th:last-child {
	text-align: end;
}

/* Docs sidebar: the category that holds the current module page. */
nav[aria-label="Documentation"] {
	min-inline-size: 0;
}

nav[aria-label="Documentation"] a[aria-current="true"] {
	color: var(--fg);
	font-weight: 600;
}

/* Search: Pagefind UI, themed from the site tokens. Results float over the page. */
[data-search] {
	position: relative;
	margin-block-end: var(--space-m);
	--pagefind-ui-scale: 0.8;
	--pagefind-ui-primary: var(--accent-text);
	--pagefind-ui-text: var(--fg);
	--pagefind-ui-background: var(--bg);
	--pagefind-ui-border: var(--border);
	--pagefind-ui-tag: var(--bg-elev);
	--pagefind-ui-border-width: 1px;
	--pagefind-ui-border-radius: 0.5rem;
	--pagefind-ui-font: var(--font-sans);
}

[data-search] .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
	position: absolute;
	z-index: 20;
	inset-inline-start: 0;
	inset-block-start: calc(100% + 0.5rem);
	box-sizing: border-box;
	inline-size: min(34rem, 100vw - 2 * var(--space-m));
	max-block-size: 70vh;
	overflow-y: auto;
	padding: var(--space-s);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: var(--shadow);
}

/* The field's height follows the container's width, so a narrow sidebar gets a short field & a wide one the full height. */
[data-search] {
	container-type: inline-size;
	--search-h: clamp(2.25rem, 16cqi, calc(64px * var(--pagefind-ui-scale)));
}

[data-search] input.pagefind-ui__search-input {
	height: var(--search-h);
}

[data-search] form.pagefind-ui__form::before {
	top: calc((var(--search-h) - 18px * var(--pagefind-ui-scale)) / 2);
}

[data-search] button.pagefind-ui__search-clear {
	top: calc(3px * var(--pagefind-ui-scale));
	height: calc(var(--search-h) - 6px * var(--pagefind-ui-scale));
}

[data-search] ul {
	display: block;
}

[data-search] input.pagefind-ui__search-input::placeholder {
	color: var(--fg-muted);
	opacity: 1;
}

/* Narrow screens: wide tables, samples, & code wrap inside the article instead of widening the page. */
main > div > article {
	grid-template-columns: minmax(0, 1fr);
	min-inline-size: 0;
}

main > div > article figure {
	grid-template-columns: minmax(0, 1fr);
}