/* ============================================================================
   section-rail.css — навигатор по разделам подстраницы (section-rail.js).
   Колонка слева: справа место занято процентом прокрутки из ui-base.
   От 1900 px — полный вид, 1600–1899 — компактный (там отступ страницы 40 px), ниже — скрыт.
   ============================================================================ */
.mx-side { display: none; }
@media (min-width: 1600px) {
    .mx-side { position: fixed; left: 22px; top: 50%; z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; transform: translateY(-50%); }
    .mx-rail { position: relative; display: flex; flex-direction: column; gap: 12px; }
    .mx-rail-line { position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1px; background: var(--mx-line-strong, rgba(255,255,255,.14)); }
    .mx-rail-line i { position: absolute; left: 0; top: 0; width: 1px; background: var(--gold, #d4af37); box-shadow: 0 0 6px rgba(212,175,55,.6); transition: height .2s; }
    .mx-rail button { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
    .mx-rail em { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid var(--mx-line-strong, rgba(255,255,255,.14)); border-radius: 50%; background: var(--bg-color, #0b0b0a); font: 600 9.5px var(--mx-f-display, sans-serif); font-style: normal; transition: border-color .2s, color .2s, box-shadow .2s; }
    .mx-rail button.past em { border-color: var(--mx-gold-line, rgba(212,175,55,.38)); color: var(--gold, #d4af37); }
    .mx-rail button.on em { border-color: var(--gold, #d4af37); color: #141413; background: var(--gold, #d4af37); box-shadow: 0 0 14px rgba(212,175,55,.45); }
    .mx-rail button:hover em { border-color: var(--gold, #d4af37); }
    /* подпись раздела — всплывает при наведении на колонку */
    .mx-rail span { padding: 4px 10px; border: 1px solid var(--mx-line-strong, rgba(255,255,255,.14)); border-radius: 8px; background: rgba(16,16,15,.9); color: #ecebe4; font-size: 12px; white-space: nowrap; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .15s, transform .15s; }
    .mx-rail button:hover span { opacity: 1; transform: none; }
}
@media (min-width: 1600px) and (max-width: 1899px) {
    .mx-side { left: 7px; gap: 16px; }
    .mx-rail { gap: 9px; }
    .mx-rail em { width: 24px; height: 24px; font-size: 8.5px; }
    .mx-rail-line { left: 12px; }
}
body.light .mx-rail em { background: #fff; }
body.light .mx-rail span { background: rgba(255,255,255,.95); color: #141414; }
body.light .mx-rail button.on em { color: #fff; background: #b8902c; border-color: #b8902c; }
/* навигатор налезает на содержимое (узкое окно / масштаб) — прячем, см. fit() в section-rail.js */
.mx-side.mx-side-off { display: none !important; }
/* 10.10.2026: мышь ловят только кружки. Невидимая подпись раньше растягивала кнопку вправо
   и перекрывала панель рисования «Графика» и другие элементы у левого края */
@media (min-width: 1600px) {
    .mx-side, .mx-rail, .mx-rail button { pointer-events: none; }
    .mx-rail em { pointer-events: auto; cursor: pointer; }
    .mx-rail span { position: absolute; left: calc(100% + 10px); top: 50%; margin-top: -13px; }
    .mx-rail button { width: max-content; }
    .mx-rail button:has(em:hover) span { opacity: 1; transform: none; }
}