/* viode manual — documentation layout: sticky chapter nav + reading column */

.manual-header {
	padding: var(--space-2xl) 0 var(--space-l);
	background-color: var(--color-neutral-10);

	& > header.hol-column {
		justify-items: start;
		gap: var(--space-s);

		& > .eyebrow {
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--color-color-6);
			font-size: var(--font-size--1);
		}

		& > h1 {
			max-width: 20ch;
		}

		& > .lede {
			max-width: 60ch;
			color: var(--color-neutral-3);
			font-size: var(--font-size-1);
		}

		& > .backlink {
			font-size: var(--font-size--1);

			& > a {
				color: var(--color-neutral-4);
			}
		}
	}
}

.manual-doc {
	padding: var(--space-l) 0 var(--space-2xl);
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		justify-items: stretch;

		& > .doc-layout {
			display: grid;
			grid-template-columns: 15rem minmax(0, 1fr);
			gap: var(--space-xl);
			align-items: start;
			width: 100%;
		}
	}
}

/* The site header is sticky and about 6rem tall (logo + padding); both
   the chapter nav and anchor targets must clear it. */
.doc-nav {
	position: sticky;
	top: 7rem;

	& > nav {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		border-left: 2px solid var(--color-neutral-8);

		& > a {
			padding: var(--space-3xs) 0 var(--space-3xs) var(--space-s);
			color: var(--color-neutral-4);
			text-decoration: none;
			font-size: var(--font-size--1);

			&:hover {
				color: var(--color-neutral-1);
			}
		}
	}
}

.doc-body {
	max-width: 46rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);

	& > h2 {
		scroll-margin-top: 7rem;
		margin-top: var(--space-l);
		padding-top: var(--space-m);
		border-top: 1px solid var(--color-neutral-8);
	}

	& > h2:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	& > h3 {
		margin-top: var(--space-s);
		color: var(--color-neutral-1);
	}

	& > p {
		color: var(--color-neutral-3);
		max-width: 65ch;
	}

	& > ul,
	& > ol.walkthrough {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		padding-left: 1.2em;
		color: var(--color-neutral-3);
		max-width: 65ch;
	}

	& kbd {
		display: inline-block;
		padding: 0.05em 0.45em;
		border: 1px solid var(--color-neutral-7);
		border-bottom-width: 2px;
		border-radius: 0.3em;
		background-color: var(--color-neutral-9);
		color: var(--color-neutral-1);
		font-size: 0.85em;
		font-family: var(--font-family-mono, monospace);
		white-space: nowrap;
	}

	& > .table-scroll {
		width: 100%;
		overflow-x: auto;

		& > table {
			width: 100%;
			border-collapse: collapse;
			font-size: var(--font-size--1);

			& th {
				text-align: left;
				padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
				border-bottom: 2px solid var(--color-neutral-7);
				color: var(--color-neutral-1);
			}

			& td {
				padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
				border-bottom: 1px solid var(--color-neutral-9);
				color: var(--color-neutral-3);
				vertical-align: top;
			}
		}
	}
}

@media (max-width: 56rem) {
	.manual-doc > div.hol-column > .doc-layout {
		grid-template-columns: 1fr;
	}

	.doc-nav {
		position: static;

		& > nav {
			flex-direction: row;
			flex-wrap: wrap;
			gap: var(--space-2xs) var(--space-s);
			border-left: none;
			border-bottom: 1px solid var(--color-neutral-8);
			padding-bottom: var(--space-s);

			& > a {
				padding: 0;
			}
		}
	}
}