/**
 * Docs shell — right "On this page" TOC (sticky, single-scrollbar).
 */

/* The TOC stays pinned beside the content and follows the reader as the page
 * scrolls. It has no scrollbar of its own: the list is clipped and nudged into
 * view by the scroll-spy, so the reader only ever uses the single page
 * scrollbar. */
.sd-docs__toc {
	position: sticky;
	top: calc(var(--sd-header-h) + var(--sd-topbar, 0px));
	overflow: hidden;
	align-self: start;
	padding: 40px 40px 40px 0;
}

.sd-toc__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc(100vh - var(--sd-header-h) - var(--sd-topbar, 0px) - 80px);
	/* Cap to the viewport minus the header and the panel's own 40+40 padding
	 * so the list clips (and the scroll-to-top link stays visible) instead of
	 * spilling past the fold. */
	gap: 16px;
}

/* The heading list is the only part that clips; the title and the
 * scroll-to-top link stay put. Wheel events fall through to the page. */
.sd-toc {
	overflow: hidden;
	flex: 1 1 auto;
	min-height: 0;
}

.sd-toc__title {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sd-text-muted);
}

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

.sd-toc__item a {
	font-size: 14px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	padding: 6px 16px;
	text-decoration: none;
	color: var(--sd-text-muted);
}

.sd-toc__item a:hover {
	text-decoration: none;
	color: var(--sd-text-soft);
}

.sd-toc__item a:focus-visible {
	color: var(--sd-text-soft);
	border: none;
	outline: none;
}

.sd-toc__item a.is-active {
	color: var(--sd-accent);
}

/* Nested (H3) entries keep the flat look with a subtle indent. */
.sd-toc__item--l3 a {
	padding-left: 28px;
}

/* Scroll-to-top link, revealed once the reader scrolls past the first screen. */
.sd-toc__totop {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	display: none;
	align-items: center;
	flex: 0 0 auto;
	justify-content: center;
	width: fit-content;
	margin: 0;
	padding: 12px 8px;
	cursor: pointer;
	transition: opacity 0.15s ease;
	color: var(--sd-accent);
	border: 0;
	background: none;
	gap: 8px;
}

.sd-toc__totop[hidden] {
	display: none;
}

.sd-toc__totop.is-visible {
	display: inline-flex;
}

.sd-toc__totop:hover {
	opacity: 0.75;
}

.sd-toc__totop svg {
	flex: 0 0 auto;
}