/* Documentation layout details Yeti leaves to the site, in the house's
   terminal voice. Unlayered on purpose, so these win over Yeti's cascade
   layers without specificity fights. Colors and sizes come from Yeti's tokens
   and the house theme contract (house.css), so a product's theme.css restyles
   all of it. Code highlighting colors are appended to this file at build time.

   The prose flow, the heading markers, the eyebrow, the cursor and linked
   cards are the house style's (pa-prose, pa-eyebrow, pa-cursor, pa-card);
   this file adds only what is particular to documentation. The markers
   drawn here (//) are decoration: content's empty alternative text keeps
   assistive technology to the words. */

/* Search: Pagefind's modal in the house colors. */
:root {
	--pf-font: var(--yeti-font-sans);
	--pf-background: var(--yeti-color-surface-raised);
	--pf-text: var(--yeti-color-text);
	--pf-text-secondary: var(--yeti-color-text);
	--pf-text-muted: var(--yeti-color-text-muted);
	--pf-border: var(--yeti-color-border);
	--pf-border-focus: var(--yeti-color-primary);
	--pf-outline-focus: var(--yeti-color-primary);
	--pf-hover: color-mix(in oklch, var(--yeti-color-primary) 10%, var(--yeti-color-surface-raised));
	--pf-border-radius: var(--yeti-radius-md);
	--pf-mark: var(--yeti-color-primary-text);
	--pf-modal-backdrop: color-mix(in oklch, var(--yeti-color-surface) 75%, transparent);
	--pf-skeleton: var(--yeti-color-surface-sunken);
}

/* The version picker: Yeti's dropdown. On a release's pages it heads the
   sidebar, as wide as the column so the release reads as the title of what
   follows, and on phones, where the sidebar stacks below the article, a copy
   opens the article instead. The main pages carry it in the bar. The release
   being read is the selected line, as in the sidebar. */
.pa-docs-versions-side > button {
	inline-size: 100%;
	justify-content: space-between;
}

/* The sidebar scrolls on its own and starts scrolled to the current page, so
   the picker stays pinned at its top rather than scrolling away with the
   list. Painted with the screen, so the list passes under it cleanly. */
.pa-docs-versions-side {
	position: sticky;
	/* Over the sidebar's own 2px of padding too, which the list would
	   otherwise show through above the button. */
	inset-block-start: -2px;
	z-index: 1;
	padding-block: 2px var(--yeti-space-xs);
	background-color: var(--yeti-color-surface);
}

.pa-docs-versions-phone {
	display: none;
}

@media (width < 40rem) {
	.pa-docs-versions-phone {
		display: block;
	}

	.pa-docs-versions-side {
		display: none;
	}
}

.pa-docs-versions [popover] a[aria-current] {
	color: var(--yeti-color-primary-text);
	font-weight: var(--yeti-weight-strong);
}

.pa-docs-versions [popover] a[aria-current]::before {
	content: "> " / "";
}

/* The sidebar and the table of contents pin below the nav (the sticky offset
   the document sets) and, when longer than the window, scroll on their own
   rather than run off its bottom: the reference lists every type. The scroll
   stays inside them at either end instead of carrying on into the page. */
.pa-docs-side,
.pa-docs-toc-column {
	max-block-size: calc(100dvh - var(--yeti-sticky-offset) - var(--yeti-space-md));
	overflow-y: auto;
	/* Only ever down: the contents' active marker reaches past the column. */
	overflow-x: clip;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--yeti-color-border-strong) transparent;
	/* Room for the focus ring and the selected line's edge, which the scroll
	   box would otherwise clip. */
	padding: 2px;
}

/* The sidebar: groups as disclosures, links as a file listing. */
.pa-docs-nav details > summary {
	cursor: pointer;
	font-weight: var(--yeti-weight-strong);
	padding-block: calc(var(--yeti-space-xs) / 2);
}

/* A group's titled sections (the reference's modules) fold too, as quieter
   subheadings. */
.pa-docs-nav .pa-docs-nav-module {
	margin-block-start: var(--yeti-space-xs);
}

.pa-docs-nav .pa-docs-nav-module > summary {
	margin: 0;
	padding-block: 0.15em;
	font-weight: var(--yeti-weight-normal);
}

.pa-docs-nav .pa-docs-nav-module > summary:hover {
	color: var(--yeti-color-text);
}

.pa-docs-nav ul {
	margin: 0;
	padding-inline-start: var(--yeti-space-sm);
	list-style: none;
	border-inline-start: var(--yeti-border-width) solid var(--yeti-color-border);
}

.pa-docs-nav li a {
	display: block;
	padding-block: 0.15em;
	padding-inline: var(--yeti-space-xs);
	margin-inline-start: calc(-1 * var(--yeti-space-sm) - var(--yeti-border-width));
	border-inline-start: 2px solid transparent;
	color: var(--yeti-color-text-muted);
	text-decoration: none;
	font-size: var(--yeti-text-sm);
	/* Type names are long single words. They break at the word boundaries the
	   layout marks inside them (before each capital, after an underscore), and
	   mid-word only as a last resort. */
	overflow-wrap: anywhere;
}

.pa-docs-nav li a:hover {
	color: var(--yeti-color-text);
}

/* The current page is the selected line in a file picker. */
.pa-docs-nav li a[aria-current="page"] {
	border-inline-start-color: var(--yeti-color-primary);
	background-color: color-mix(in oklch, var(--yeti-color-primary) 12%, transparent);
	color: var(--yeti-color-primary-text);
	font-weight: var(--yeti-weight-strong);
}

.pa-docs-nav-section,
.pa-docs-toc-title {
	margin: var(--yeti-space-xs) 0 0;
	font-size: var(--yeti-text-xs);
	font-weight: var(--yeti-weight-normal);
	color: var(--yeti-color-text-muted);
}

.pa-docs-nav-section::before,
.pa-docs-toc-title::before {
	content: "// " / "";
	color: var(--yeti-color-primary-text);
	opacity: 0.6;
}

/* The table of contents. */
.pa-docs-toc-title {
	margin: 0 0 var(--yeti-space-xs);
	text-transform: lowercase;
}

.pa-docs-toc-sub {
	padding-inline-start: var(--yeti-space-sm);
}

/* The columns. The contents column only earns its width on a wide screen; below that the
   article takes the room. On a phone, where the sidebar stacks, the article comes first and the
   sidebar's long list follows it. */
@media (width < 80rem) {
	.pa-docs-toc-column {
		display: none;
	}
}

@media (width < 40rem) {
	/* Stacked under the article, the sidebar is ordinary page content: it
	   neither pins nor scrolls on its own. */
	.pa-docs-side {
		order: 1;
		position: static;
		max-block-size: none;
		overflow: visible;
	}
}

/* The article. */
.pa-docs-article h2 {
	margin-block-start: var(--yeti-space-xl);
}

/* Type names are long single words: a reference title is set smaller than a page title, and any
   title breaks rather than run under the next column. */
.pa-docs-prose h1 {
	overflow-wrap: anywhere;
}

.pa-docs-prose h1.pa-docs-symbol {
	font-size: var(--yeti-text-2xl);
}

/* Callouts (`> [!NOTE]`, `> [!WARNING]`): a raised pane with a lit edge and a
   bracketed label. */
.markdown-alert {
	padding: var(--yeti-space-sm) var(--yeti-space-md);
	border: var(--yeti-border-width) solid var(--yeti-color-border);
	border-inline-start: 2px solid var(--pa-alert-edge, var(--yeti-color-primary));
	border-radius: var(--yeti-radius-sm);
	background-color: color-mix(in oklch, var(--pa-alert-edge, var(--yeti-color-primary)) 6%, var(--yeti-color-surface-raised));
}

.markdown-alert > * + * {
	margin-block-start: var(--yeti-space-xs);
}

.markdown-alert-title {
	font-size: var(--yeti-text-xs);
	font-weight: var(--yeti-weight-strong);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pa-alert-edge, var(--yeti-color-primary-text));
}

.markdown-alert-title::before {
	content: "[" / "";
}

.markdown-alert-title::after {
	content: "]" / "";
}

.markdown-alert-tip {
	--pa-alert-edge: var(--yeti-color-secondary-text);
}

.markdown-alert-warning,
.markdown-alert-caution {
	--pa-alert-edge: var(--yeti-color-alert-text);
}

.pa-docs-relations {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: calc(var(--yeti-space-xs) / 2) var(--yeti-space-md);
}

.pa-docs-relations dt {
	font-weight: var(--yeti-weight-strong);
	color: var(--yeti-color-text-muted);
}

.pa-docs-relations dd {
	margin: 0;
}

.pa-docs-source,
.pa-docs-meta {
	color: var(--yeti-color-text-muted);
}

.pa-docs-meta {
	border-block-start: var(--yeti-border-width) dashed var(--yeti-color-border-strong);
	padding-block-start: var(--yeti-space-md);
}

/* Highlighted code: the colors are appended below; this is the box around them. */
pre.syntax-highlighting {
	padding: var(--yeti-space-sm) var(--yeti-space-md);
	border-radius: var(--yeti-radius-sm);
	overflow-x: auto;
	font-size: var(--yeti-text-sm);
	line-height: 1.6;
}

/* Highlighted code, colored from the theme's own hues: keywords glow in the
   phosphor (primary), literals in the second accent, comments and punctuation
   recede. A product's theme.css restyles its code by setting its hues. The
   classes are syntect's scope names with the hl- prefix; a span carries every
   part of its scope (hl-entity hl-name hl-function), so the rules match
   combinations, most general first. */

pre.syntax-highlighting {
	color: var(--yeti-color-text);
}

.hl-comment {
	color: var(--yeti-color-text-muted);
	font-style: italic;
}

.hl-punctuation,
.hl-keyword.hl-operator {
	color: color-mix(in oklch, var(--yeti-color-text-muted) 80%, var(--yeti-color-text));
}

.hl-keyword,
.hl-storage {
	color: var(--yeti-color-primary-text);
}

.hl-entity.hl-name,
.hl-support {
	color: color-mix(in oklch, var(--yeti-color-primary-text) 45%, var(--yeti-color-text));
}

.hl-entity.hl-name.hl-function,
.hl-support.hl-function {
	color: var(--yeti-color-text);
	font-weight: var(--yeti-weight-strong);
}

.hl-string,
.hl-constant,
.hl-meta.hl-preprocessor .hl-string {
	color: var(--yeti-color-secondary-text);
}

.hl-string .hl-punctuation {
	color: inherit;
	opacity: 0.7;
}

.hl-variable.hl-parameter {
	font-style: italic;
}

.hl-invalid {
	color: var(--yeti-color-alert-text);
}