/* Valyda – Dokumentation.
 *
 * Nur die Hülle: zwei Spalten, Seitennavigation, Entwurfsmarkierung. Typografie,
 * Farben, Tabellen und Code kommen aus style.css, damit die Doku nicht zu einer
 * zweiten Gestaltung auswächst. Erzeugt von scripts/build-docs.py.
 */

/* style.css klemmt .doc .wrap auf die Lesebreite. Mit Seitenspalte daneben
   braucht die Hülle mehr Platz – die Lesebreite gilt weiter für den Text. */
.doc--shell .wrap {
	width: min(100% - 2.5rem, 74rem);
}

.docs-shell {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 61rem) {
	.docs-shell {
		grid-template-columns: 15rem minmax(0, 1fr);
	}
}

.docs-body {
	max-width: var(--measure);
	min-width: 0;
}

/* ------------------------------------------------------------ Seitenspalte */

.docs-nav {
	font-size: 0.9rem;
}

@media (min-width: 61rem) {
	.docs-nav {
		position: sticky;
		/* Kopfzeile ist 3.25rem hoch und klebt ebenfalls. */
		top: 5rem;
		max-height: calc(100vh - 7rem);
		overflow-y: auto;
	}
}

.docs-nav__group {
	margin: 1.6rem 0 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}

.docs-nav__group:first-child {
	margin-top: 0;
}

.docs-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--line);
}

.docs-nav li {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.docs-nav li::marker {
	content: none;
}

.docs-nav a {
	display: block;
	padding: 0.32rem 0 0.32rem 0.85rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

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

.docs-nav a[aria-current="page"] {
	color: var(--accent);
	border-left-color: var(--accent);
	font-weight: 600;
}

.docs-nav__draft {
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.05rem 0.4rem;
	flex: none;
}

/* Auf schmalen Geräten klappt die Navigation zusammen. Ohne JavaScript bleibt
   sie offen – ein zugeklapptes Inhaltsverzeichnis, das sich nicht öffnen
   lässt, wäre schlimmer als ein langes. */
.docs-nav__toggle {
	display: none;
	width: 100%;
	text-align: left;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.docs-nav__toggle::after {
	content: "▾";
	float: right;
	color: var(--muted);
}

@media (max-width: 60.99rem) {
	.js .docs-nav__toggle {
		display: block;
	}

	.js .docs-nav__toggle[aria-expanded="false"] + .docs-nav__list {
		display: none;
	}

	.docs-nav__list {
		padding-top: 1rem;
	}
}

/* ----------------------------------------------------------------- Entwurf */

.docs-draft {
	margin: 0 0 1.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 0.4rem;
	background: var(--surface);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ Inhalt */

/* Überschriften sind verlinkbar; das Ziel darf nicht unter der klebenden
   Kopfzeile verschwinden. */
.docs-body h2,
.docs-body h3 {
	scroll-margin-top: 5rem;
}

.docs-body pre {
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
	background: var(--code-bg);
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	overflow-x: auto;
	font-size: 0.86rem;
	line-height: 1.55;
}

.docs-body pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}

.docs-body blockquote {
	margin: 1.2rem 0 0;
	padding-left: 1rem;
	border-left: 2px solid var(--accent);
	color: var(--muted);
}

.docs-body table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

@media (min-width: 40rem) {
	.docs-body table {
		display: table;
		white-space: normal;
	}
}