/* Hoofdstukkenlijn rechts op lange pagina's (js/toc-rail.js). Rustig: een
 * haarlijn, kleine bolletjes, alleen het huidige hoofdstuk rood. Alleen
 * kleurrollen uit sellgrip.css, dus de donkere modus volgt vanzelf. Alleen
 * vervagen, geen schuifbeweging: Firefox animeert transform verkeerd onder
 * html zoom (zie nav.js). */
.toc-rail {
	position: fixed;
	z-index: 9;
	right: var(--toc-right, 24px);
	top: calc(var(--header-h) + (100vh / var(--vz, 1) - var(--header-h)) / 2);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(6px, calc(1.6vh / var(--vz, 1)), 14px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.toc-rail.is-on {
	opacity: 1;
}

.toc-rail[hidden] {
	display: none;
}

/* De lijn loopt van het eerste tot het laatste bolletje; het gelezen deel
 * is donkerder. */
.toc-rail-track {
	position: absolute;
	right: 11px;
	top: var(--toc-top, 12px);
	width: 2px;
	height: var(--toc-len, 0px);
	border-radius: 1px;
	background: var(--line);
}

.toc-rail-fill {
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--toc-fill, 0px);
	border-radius: 1px;
	background: var(--muted);
}

/* Doelvlak 24 × 24 px; het label hangt er los naast en vangt geen klikken. */
.toc-rail-stop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--ink);
	text-decoration: none;
}

.toc-rail-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
}

.toc-rail-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--field);
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.toc-rail-stop.is-past .toc-rail-dot::before {
	background: var(--muted);
	border-color: var(--muted);
}

.toc-rail-stop[aria-current] .toc-rail-dot::before {
	width: 12px;
	height: 12px;
	background: var(--red);
	border-color: var(--red);
}

.toc-rail-stop:hover .toc-rail-dot::before,
.toc-rail-stop:focus-visible .toc-rail-dot::before {
	border-color: var(--ink);
}

.toc-rail-stop:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.toc-rail-label {
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	translate: 0 -50%;
	/* Breed genoeg voor elke kop op één regel; naast een artikel begrensd
	 * door de lege kolom (toc-rail.js zet --toc-label). */
	width: max-content;
	max-width: var(--toc-label, 22rem);
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: right;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.toc-rail-stop:hover .toc-rail-label,
.toc-rail-stop:focus-visible .toc-rail-label,
.toc-rail-stop.is-flash .toc-rail-label {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease, visibility 0s;
}

/* Buitenmarge: de naam van een nieuw hoofdstuk vervaagt rustig. */
.toc-rail-stop .toc-rail-label {
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Naast de leeskolom van een artikel: een kleine inhoudsopgave. Alle namen
 * op één regel in grijs, het huidige hoofdstuk in zwart; naam en bolletje
 * zijn samen de link. */
.toc-rail-inside .toc-rail-stop {
	width: auto;
	height: auto;
	min-height: 24px;
	gap: 4px;
	border-radius: var(--radius);
}

.toc-rail-inside .toc-rail-label,
.toc-rail-inside .toc-rail-stop:hover .toc-rail-label,
.toc-rail-inside .toc-rail-stop:focus-visible .toc-rail-label {
	position: static;
	translate: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-weight: 500;
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition: color 0.2s ease;
}

.toc-rail-inside .toc-rail-stop:hover .toc-rail-label {
	color: var(--ink);
}

.toc-rail-inside .toc-rail-stop[aria-current] .toc-rail-label {
	color: var(--ink);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.toc-rail,
	.toc-rail-dot,
	.toc-rail-label {
		transition: none;
	}
}

@media (max-width: 1099px), print {
	.toc-rail {
		display: none;
	}
}