/* Manual layout — builds on style.css design tokens. Pure CSS, no JS. */

.manual-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.manual-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-block: clamp(28px, 4vw, 48px);
}

/* Sidebar ----------------------------------------------------------- */

.manual-sidebar {
	position: sticky;
	top: 72px;
	align-self: start;
	max-height: calc(100vh - 88px);
	overflow-y: auto;
	/* Always reserve room for the scrollbar so the sidebar width (and the
	   content beside it) never shifts when the list is short enough to not
	   need one. */
	scrollbar-gutter: stable;
	font-size: 15px;
}

.sidebar-group + .sidebar-group {
	margin-top: 24px;
}

/* Chapter accordions are separated by divider lines instead of gaps, so the
   whole list reads as one grouped tree. The margin-top above still applies
   before the first utility group (Language, Get the app). */
details.sidebar-group + details.sidebar-group {
	margin-top: 0;
	border-top: 1px solid var(--border);
}

.sidebar-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* Chapter groups are native <details> accordions (no JS). The group holding the
   current page is rendered `open`, so the current chapter is always on screen
   without the sidebar having to scroll. A left disclosure triangle shows open
   vs closed, and the links sit indented under their header. */
details.sidebar-group > summary.sidebar-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 0;
	cursor: pointer;
	user-select: none;
	list-style: none;
	color: var(--muted);
}

details.sidebar-group > summary.sidebar-label::-webkit-details-marker {
	display: none;
}

/* Disclosure triangle: points right when closed, down when open. */
details.sidebar-group > summary.sidebar-label::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease;
}

/* Open or hovered header stands out from the muted closed ones. */
details.sidebar-group[open] > summary.sidebar-label,
details.sidebar-group > summary.sidebar-label:hover {
	color: var(--fg);
}

details.sidebar-group[open] > summary.sidebar-label::before {
	transform: rotate(90deg);
}

/* Links nested under their header, aligned past the triangle. */
details.sidebar-group > .toc {
	padding: 0 0 8px 13px;
}

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

.toc a {
	display: block;
	padding: 5px 0;
	color: var(--muted);
	line-height: 1.35;
}

.toc a:hover {
	color: var(--fg);
	text-decoration: none;
}

.toc a[aria-current="page"] {
	color: var(--fg);
	font-weight: 500;
}

/* Language switch */
.lang-switch {
	display: flex;
	gap: 8px;
}

.lang-switch a {
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 13px;
}

.lang-switch a:hover {
	color: var(--fg);
	text-decoration: none;
}

.lang-switch a[aria-current="true"] {
	color: var(--fg);
	border-color: var(--accent);
}

/* Sidebar CTA */
.sidebar-cta {
	display: block;
	margin-top: 4px;
}

.sidebar-cta img {
	width: 149px;
	height: auto;
}

.sidebar-cta:hover {
	opacity: 0.85;
}

/* Content ----------------------------------------------------------- */

.manual-content {
	min-width: 0;
	max-width: 720px;
}

.manual-content h1 {
	margin-bottom: 12px;
}

.manual-content .lead {
	font-size: 1.1875rem;
	color: var(--fg);
}

.manual-content p,
.manual-content li {
	color: var(--muted);
}

.manual-content .callout {
	margin: 28px 0;
	padding: 16px 20px;
	background: var(--surface);
	border-radius: var(--radius);
	border-left: 3px solid var(--accent);
}

.manual-content .callout p {
	margin: 0;
	color: var(--fg);
	font-size: 0.9375rem;
}

/* Home / table of contents ------------------------------------------ */

.toc-list {
	list-style: none;
	margin: 8px 0 28px;
	padding: 0;
}

.toc-list li {
	margin-bottom: 12px;
}

.toc-list a {
	font-weight: 500;
}

.toc-desc {
	display: block;
	color: var(--muted);
	font-size: 0.9375rem;
	margin-top: 2px;
}

/* Not-yet-written chapters: visible in the TOC, muted, not a link. */
.toc-todo {
	color: var(--muted);
}

.toc-soon {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	vertical-align: middle;
}

/* Step blocks ------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

.step {
	/* style.css sets section{padding-block} for landing sections; the manual
	   wants steps to flow top-down using only the height they need, so cancel
	   that padding and space steps with a modest margin instead. */
	padding-block: 0;
	margin-block: 28px;
	/* offset so the sticky nav doesn't cover the target when jumped to */
	scroll-margin-top: 76px;
}

/* clearfix so each step contains its floated image */
.step::after {
	content: "";
	display: block;
	clear: both;
}

.step h2 {
	margin-top: 0;
}

/* Float the image right so the text wraps around it (magazine style).
   Screenshots go on the right only — no left/right alternating. */
.step-shot {
	float: right;
	width: 38%;
	max-width: 280px;
	margin: 6px 0 16px 32px;
}

.step-shot img {
	width: 100%;
	height: auto;   /* let the width/height attrs set aspect ratio (CLS) without forcing height */
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.step-shot figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* Chapter pager (prev / current / next) ----------------------------- */

.chapter-pager {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

.pager-link {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

a.pager-link:hover {
	border-color: var(--accent);
	text-decoration: none;
}

.pager-prev { text-align: left; }
.pager-next { text-align: right; }

.pager-dir {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.pager-prev .pager-dir::before { content: "\2190\00a0"; }   /* ←  */
.pager-next .pager-dir::after { content: "\00a0\2192"; }    /*  → */

.pager-title {
	display: block;
	color: var(--fg);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pager-current {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px 8px;
	color: var(--muted);
	font-size: 0.9375rem;
}

.pager-empty {
	flex: 1 1 0;
	border: none;
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 640px) {
	.chapter-pager {
		flex-direction: column;
		gap: 8px;
	}

	.pager-next { text-align: left; }
	.pager-next .pager-dir::after { content: none; }
	.pager-next .pager-dir::before { content: "\2192\00a0"; }   /* →  */

	.pager-current {
		order: -1;   /* show "you are here" first when stacked */
		justify-content: flex-start;
		text-align: left;
		padding: 4px 2px;
	}

	.pager-empty { display: none; }
}

@media (max-width: 900px) {
	.manual-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.manual-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Stack on small screens: image no longer floats */
	.step-shot {
		float: none;
		width: auto;
		max-width: 300px;
		margin: 16px 0;
	}
}