/* Боковая шкала прокрутки: столбик коротких штрихов у правого края.
 * Цвет адаптивный (data-tone, как у стеклянной панели): светлые штрихи над тёмным, тёмные над светлым.
 */

.yb-scrollnav {
	--yb-sn-fg: 255, 255, 255;
	position: fixed;
	right: 22px;
	top: 50%;
	z-index: var(--yb-z-nav);
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.yb-scrollnav.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.yb-scrollnav[data-tone="light"] {
	--yb-sn-fg: 28, 32, 40;
}

.yb-scrollnav *::before,
.yb-scrollnav *::after {
	content: none;
	display: none;
}

.yb-scrollnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Высота строки 16px — это и шаг между штрихами, и удобная зона наведения. */
.yb-scrollnav .yb-scrollnav__item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	height: 16px;
	padding-left: 12px;
	text-decoration: none;
	color: rgb(var(--yb-sn-fg));
}

.yb-scrollnav__tick {
	display: block;
	width: 12px;
	height: 1.5px;
	border-radius: 1px;
	background: rgba(var(--yb-sn-fg), 0.22);
	transition: width 0.35s var(--yb-ease), background-color 0.35s ease;
}

/* Пройденные разделы темнеют — становятся плотнее. */
.yb-scrollnav__item.is-passed .yb-scrollnav__tick {
	background: rgba(var(--yb-sn-fg), 0.6);
}

.yb-scrollnav__item.is-active .yb-scrollnav__tick {
	width: 22px;
	background: var(--yb-marsala-text);
}

.yb-scrollnav[data-tone="light"] .yb-scrollnav__item.is-active .yb-scrollnav__tick {
	background: var(--yb-marsala);
}

.yb-scrollnav__item:hover .yb-scrollnav__tick,
.yb-scrollnav__item:focus-visible .yb-scrollnav__tick {
	width: 22px;
	background: rgba(var(--yb-sn-fg), 0.9);
}

/* Название раздела — тонкая капитель, как в меню; появляется при наведении. */
.yb-scrollnav__label {
	font-family: var(--yb-font-body);
	font-size: var(--yb-fs-micro);
	font-weight: 400;
	letter-spacing: var(--yb-track-button);
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(var(--yb-sn-fg), 0.85);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.25s ease, transform 0.35s var(--yb-ease);
	pointer-events: none;
}

.yb-scrollnav__item:hover .yb-scrollnav__label,
.yb-scrollnav__item:focus-visible .yb-scrollnav__label {
	opacity: 1;
	transform: none;
}

.yb-scrollnav__item:focus-visible {
	outline: none;
}

@media (max-width: 1023px) {
	.yb-scrollnav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yb-scrollnav__tick,
	.yb-scrollnav__label {
		transition: none;
	}
}