/* ================================================================
   DOCS
   ================================================================
   The documentation pages: a contents column beside the article on a
   wide screen and above it on a narrow one. Every value comes from
   tokens.css through var(), as in site.css.
   ================================================================ */

/* ---------------- frame ---------------- */

/* the header and footer take the docs width too, so their edges line up
   with the contents column and the article instead of sitting inside them */
.site-header > .page,
.site-footer > .page,
.docs {
	max-width: var(--docs-page-max);
}

.docs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--space-xl);
}

.docs-nav {
	padding-block: var(--space-l) 0;
	font-size: var(--size-step--1);
}

/* the contents stay in view while the article scrolls, and scroll on
   their own once they are taller than the window */
@media (min-width: 60rem) {
	.docs {
		grid-template-columns: var(--docs-nav-width) minmax(0, 1fr);
		align-items: start;
	}

	.docs-nav {
		position: sticky;
		top: 0;
		max-height: 100vh;
		overflow-y: auto;
		padding-block: var(--space-l);
	}
}

.docs-nav__section {
	margin-block: var(--space-m) var(--space-3xs);
	color: var(--text-muted);
	font-weight: 600;
}

.docs-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.docs-nav__list a {
	display: block;
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
}

.docs-nav__list a:hover {
	text-decoration: underline;
}

.docs-nav__list a[aria-current="page"] {
	background: var(--surface);
	color: var(--accent);
	font-weight: 600;
}

/* ---------------- article ---------------- */

.docs-article :is(ul, ol) {
	margin-block: 0 var(--space-s);
	padding-inline-start: var(--space-m);
}

.docs-article li + li {
	margin-block-start: var(--space-3xs);
}

/* a block inside a list item sits close under the item's own text */
.docs-article li > :is(ul, ol, p, pre, figure, .callout, table) {
	margin-block: var(--space-2xs) 0;
}

.docs-article h4 {
	margin-block: var(--space-m) var(--space-2xs);
	font-size: var(--size-step-0);
	line-height: var(--leading-tight);
}

.docs-article :is(code, kbd, pre) {
	font-family: var(--font-mono);
}

.docs-article :not(pre) > code {
	padding-inline: var(--space-3xs);
	border-radius: var(--radius);
	background: var(--code-bg);
	font-size: var(--size-step--1);
	overflow-wrap: anywhere;
}

.docs-article kbd {
	padding-inline: var(--space-3xs);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: var(--size-step--1);
	white-space: nowrap;
}

/* ---------------- code ---------------- */

.code {
	margin-block: 0 var(--space-s);
	padding: var(--space-s);
	overflow-x: auto;
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	background: var(--code-bg);
	font-size: var(--size-step--1);
	line-height: var(--leading-body);
	tab-size: 4;
}

.code-file {
	margin: 0 0 var(--space-s);
}

.code-file figcaption {
	padding: var(--space-3xs) var(--space-s);
	border: var(--border-width) solid var(--border);
	border-block-end: 0;
	border-start-start-radius: var(--radius);
	border-start-end-radius: var(--radius);
	background: var(--surface);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--size-step--1);
}

.code-file .code {
	margin: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.tok-comment {
	color: var(--code-comment);
}

.tok-keyword {
	color: var(--code-keyword);
}

.tok-string {
	color: var(--code-string);
}

.tok-number {
	color: var(--code-number);
}

.tok-preproc {
	color: var(--code-preproc);
}

/* ---------------- tables ---------------- */

.docs-article table {
	width: 100%;
	margin-block: 0 var(--space-s);
	border-collapse: collapse;
	font-size: var(--size-step--1);
}

.docs-article :is(th, td) {
	padding: var(--space-2xs) var(--space-xs);
	border-block-end: var(--border-width) solid var(--border);
	text-align: start;
	vertical-align: top;
}

/* the first column names things - a file, a key, a panel - and a name
   broken across two lines reads as two names. The other columns wrap */
.docs-article td:first-child code {
	overflow-wrap: normal;
	white-space: nowrap;
}

/* ---------------- callouts ---------------- */

.callout {
	max-width: var(--measure);
	margin-block: 0 var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-inline-start: var(--callout-bar) solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface);
}

.callout > :last-child {
	margin-block-end: 0;
}

.callout__label {
	margin-block-end: var(--space-3xs);
	font-weight: 600;
}

.callout--warning {
	border-inline-start-color: var(--notice-border);
	background: var(--notice-bg);
	color: var(--notice-text);
}

/* ---------------- previous and next ---------------- */

.docs-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-s);
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-m);
	border-block-start: var(--border-width) solid var(--border);
}

.docs-pager a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.docs-pager a:hover {
	text-decoration: underline;
}

.docs-pager a[rel="next"] {
	margin-inline-start: auto;
	text-align: end;
}

.docs-pager__label {
	color: var(--text-muted);
	font-size: var(--size-step--1);
}