/* ============================================================================
   ВЕТКА НА РЕАЛЬНОЙ СТРАНИЦЕ СВОДА

   Важно про смысл. В настоящей вики глава показывается ОДНА за раз, поэтому
   «прогресс скролла по всему документу» тут невозможен — прокрутка это всегда
   одна глава. Ветка означает другое:
     · где ты среди 36 глав          — станция на линии
     · сколько прочитано в главе     — заливка вокруг текущей станции
   То есть это навигация, а не индикатор загрузки.
   ========================================================================== */

.mrail {
    position: fixed;
    top: 0; bottom: 0; right: 0;
    width: 68px;
    z-index: 30;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1),
                transform .55s cubic-bezier(.16, 1, .3, 1);
}
.mrail.is-on { opacity: 1; transform: translateX(0); }

.mrail svg { width: 100%; height: 74%; overflow: visible; }

/* сам путь — тонкая тусклая нить */
.mrail__base {
    fill: none;
    stroke: rgba(255, 255, 255, .1);
    stroke-width: 1.5;
    stroke-linecap: round;
}
/* прочитанная часть ТЕКУЩЕЙ главы — короткая яркая дуга у станции */
.mrail__read {
    fill: none;
    stroke: url(#mrGrad);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: none;
}

/* ── станции ──────────────────────────────────────────────────────────────
   Были пустые кружки с толстой обводкой и красный светящийся блик у
   «Наказания» — читалось как индикатор ошибки. Делаем плотные заливные точки:
   пройденные приглушённо-красные, текущая белая с кольцом, наказание красное
   без свечения. Одинаковый размер, никакой ряби. */
.mrail .st {
    fill: #3a3d43;
    stroke: none;
    transition: fill .25s cubic-bezier(.16,1,.3,1), r .25s cubic-bezier(.16,1,.3,1);
}
.mrail .st.is-past { fill: rgba(207, 41, 41, .55); }
.mrail .st.is-here { fill: #fff; }
.mrail .st--pun    { fill: rgba(207, 41, 41, .8); }
.mrail .st--pun.is-here { fill: #fff; }

/* кольцо у текущей — отдельным элементом, чтобы точка осталась плотной */
.mrail .st.is-here { r: 4; }

.mrail .st__hit { fill: transparent; pointer-events: auto; cursor: pointer; }
.mrail .st__hit:hover + .st { fill: var(--red-br, #ef3b3b); }

/* бегунок: аккуратная точка, без прожектора */
.mrail .runner {
    fill: #fff;
    stroke: var(--red-br, #ef3b3b);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(239, 59, 59, .55));
}

/* шапка ветки: номер главы */
.mrail__head {
    position: absolute; top: 50%; right: calc(100% + 2px);
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-family: var(--f, "Montserrat", sans-serif);
    pointer-events: none;
    white-space: nowrap;
}
.mrail__head b {
    font-size: 15px; font-weight: 800; color: var(--on-dark, #e7e3da);
    font-variant-numeric: tabular-nums;
}
.mrail__head i {
    font-style: normal; font-size: 9px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--on-dark-faint, #847e73);
}

/* всплывающая подсказка станции */
.mrail__tip {
    position: absolute; right: calc(100% + 10px);
    padding: 5px 10px;
    border: 1px solid var(--line, rgba(255,255,255,.09));
    border-radius: 6px;
    background: rgba(18, 19, 23, .97);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9);
    font-family: var(--f, sans-serif);
    font-size: 11.5px; font-weight: 700; color: var(--on-dark, #e7e3da);
    white-space: nowrap;
    opacity: 0; transform: translateY(-50%) translateX(6px);
    transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
}
.mrail__tip.is-on { opacity: 1; transform: translateY(-50%) translateX(0); }
.mrail__tip small {
    display: block; margin-top: 1px;
    font-size: 9px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--on-dark-faint, #847e73);
}

/* на узких экранах ветки нет: там рейл и так горизонтальный */
@media (max-width: 1180px) { .mrail { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .mrail { transition: none; }
    .mrail .st, .mrail__tip { transition: none; }
}

/* ── постоянные подписи станций ───────────────────────────────────────────
   Ориентиров мало (3–6), поэтому прятать их за наведение незачем: ветка
   становится оглавлением главы, а не декоративной шкалой. */
.mrail__labs { position: absolute; inset: 0; pointer-events: none; }
.mrail__lab {
    position: absolute;
    right: calc(100% - 22px);
    transform: translateY(-50%);
    max-width: 168px;
    padding: 1px 0;
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 11px; font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: right;
    color: #6b665e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: auto; cursor: pointer;
    transition: color .25s cubic-bezier(.16,1,.3,1);
}
.mrail__lab.is-past { color: #7d7870; }
.mrail__lab.is-here { color: #fff; font-weight: 700; }
.mrail__lab:hover { color: var(--red-br, #ef3b3b); }
/* счётчик убран: он дублировал то, что и так видно по подписям */
.mrail__head { display: none; }

/* подпись-номер пункта: короткая, моноширинная, не спорит с названиями разделов */
.mrail__lab--stop {
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #4e4b46;
}
.mrail__lab--stop.is-past { color: #6b675f; }
.mrail__lab--stop.is-here { color: #fff; }
.mrail__lab--pun { color: rgba(207, 41, 41, .75); }
.mrail__lab--pun.is-here { color: #ff8a8a; }

/* подсказка станции: имя раздела бывает длинным — переносим, а не тянем одной
   строкой на полэкрана */
.mrail__tip { max-width: 240px; white-space: normal; line-height: 1.35; }
/* «Вводная» — такой же ориентир, как раздел */
.mrail__lab--intro { color: #7d7870; }
.mrail__lab--intro.is-here { color: #fff; font-weight: 700; }

/* смена главы: старая ветка гаснет, новая проявляется — без скачка */
.mrail svg, .mrail__labs { transition: opacity .19s ease; }
.mrail.is-swap svg, .mrail.is-swap .mrail__labs { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mrail svg, .mrail__labs { transition: none; } }

/* в поиске видны сразу несколько глав — ветке нечего показывать */
body.doc-searching .mrail { opacity: 0 !important; pointer-events: none !important; }

/* подписи не влезают справа от колонки — только подсказка по наведению */
.mrail.is-compact .mrail__labs { opacity: 0 !important; pointer-events: none !important; }
.mrail.is-cramped { opacity: 0 !important; pointer-events: none !important; }