/*
 * Skill Suites - sidebar TOC sync.
 *
 * Two problems this fixes, both only visible on a long article:
 *
 * 1. The sidebar is position:sticky, so once its content is taller than the viewport the
 *    bottom of the contents list simply cannot be reached. Giving the list its own scroll
 *    box bounded to the viewport height makes every section reachable again.
 * 2. With a scroll box, the highlighted section can sit outside the visible part of the
 *    list, so the JS scrolls the box to follow the reader. The scroll-margin below keeps
 *    the active entry off the very edge when it does.
 *
 * Everything here is scoped under .ss-toc or .ss-series-nav, so no other part of the
 * theme is affected.
 */

/* The scroll box wraps the list the theme already styles, so the list's own type,
   spacing and active-state rules keep applying untouched. */
.ss-toc__scroll {
	max-height: calc(100vh - 190px);
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain; /* a flick at the end must not scroll the article */
	scrollbar-width: thin;
	scrollbar-color: rgba(20, 33, 43, 0.28) transparent;
	/* room for the fade overlay so the last entry is never half-hidden under it */
	padding-bottom: 2px;
}

/* Only show the scrollbar affordance when there is actually more list to reach. */
.ss-toc__scroll::-webkit-scrollbar {
	width: 8px;
}

.ss-toc__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.ss-toc__scroll::-webkit-scrollbar-thumb {
	background: rgba(20, 33, 43, 0.22);
	border-radius: 999px;
}

.ss-toc__scroll:hover::-webkit-scrollbar-thumb {
	background: rgba(20, 33, 43, 0.38);
}

.ss-toc__scroll a {
	scroll-margin-top: 26px;
	scroll-margin-bottom: 26px;
}

/* A soft fade at the bottom edge, shown only while the list is scrollable and not yet at
   the end, so it reads as "there is more below" rather than as a permanent gradient. */
.ss-toc {
	position: relative;
}

.ss-toc__fade {
	position: absolute;
	left: 1px;
	right: 9px;
	bottom: 1px;
	height: 34px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 160ms ease;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 82%);
	border-radius: 0 0 var(--ss-radius, 6px) var(--ss-radius, 6px);
}

.ss-toc.has-more .ss-toc__fade {
	opacity: 1;
}

/* The theme collapses the TOC by hiding its ul; hide the scroll box and fade with it so a
   collapsed TOC stays the small pill it was designed to be. */
.ss-toc.is-collapsed .ss-toc__scroll,
.ss-toc.is-collapsed .ss-toc__fade {
	display: none;
}

/*
 * In-article whole-series contents. Collapsed by default: the kicker line and the toggle
 * stay visible, the 15-part list is clipped to zero height.
 *
 * Clipped with max-height rather than display:none on purpose. These are internal links to
 * the other parts of the series, and keeping them rendered and in the accessibility tree
 * means collapsing them costs nothing in crawlability. It also matches how the guided
 * reading plugin on this site gates its sections.
 */
.ss-series-nav__list {
	overflow: hidden;
	max-height: 2000px;
	transition: max-height 260ms ease;
}

.ss-series-nav.is-folded .ss-series-nav__list {
	max-height: 0;
}

.ss-series-nav__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ss-series-nav__toggle {
	flex: none;
	background: transparent;
	border: 1px solid rgba(11, 110, 110, 0.35);
	color: #0b6e6e;
	border-radius: 999px;
	cursor: pointer;
	font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
}

.ss-series-nav__toggle:hover {
	background: rgba(11, 110, 110, 0.08);
	border-color: #0b6e6e;
}

.ss-series-nav__toggle:focus-visible {
	outline: 2px solid #0b6e6e;
	outline-offset: 2px;
}

/* Give the collapsed block a little breathing room under the toggle row. */
.ss-series-nav.is-folded .ss-series-nav__bar {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ss-series-nav__list,
	.ss-toc__fade {
		transition: none;
	}
}

/* The theme hides the sidebar TOC entirely on narrow screens, where the in-content outline
   takes over, so the scroll box must not impose a height there. */
@media (max-width: 900px) {
	.ss-toc__scroll {
		max-height: none;
		overflow: visible;
	}
}