/* ==============================================================
   Section dots + back to top (section-nav.js), every page.
   Dots: progress rail — a track that fills section by section,
   passed sections filled, the active one ringed with its label.
   Back to top: square button, reading progress drawn round its border.
   ============================================================== */

/* ---------- dots ---------- */
.snav { position: fixed; z-index: 900; right: 28px; top: 50%; display: flex; flex-direction: column; align-items: flex-end; transform: translate(12px, -50%); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.snav.is-visible { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.snav__track { position: absolute; right: 4px; top: 14px; bottom: 14px; width: 1px; background: rgba(246, 245, 245, 0.14); }
.snav__fill { position: absolute; inset: 0; background: var(--vs-theme-color2); transform-origin: top; transform: scaleY(0); transition: transform .3s; }
.snav__link { position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(246, 245, 245, 0.45); text-decoration: none; }
.snav__link:hover { color: var(--title-color); }
.snav__link.is-on { color: var(--vs-theme-color2); }
.snav__dot { position: relative; z-index: 1; flex: none; width: 9px; height: 9px; background: #070d0c; border: 1px solid rgba(246, 245, 245, 0.35); transition: background .2s, border-color .2s; }
.snav__link.is-past .snav__dot { background: var(--vs-theme-color2); border-color: var(--vs-theme-color2); }
.snav__link.is-on .snav__dot { background: #070d0c; border: 2px solid var(--vs-theme-color2); box-shadow: 0 0 10px rgba(84, 184, 147, 0.6); }
.snav__label { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
.snav:hover .snav__label,
.snav__link.is-on .snav__label { opacity: 1; }

/* ---------- back to top ---------- */
.snav-top { position: fixed; z-index: 1000; right: 24px; bottom: 24px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--title-color); background: rgba(8, 17, 15, 0.92); border: 0; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s, color .2s; }
.snav-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.snav-top:hover { color: var(--vs-theme-color2); }
.snav-top__ring { position: absolute; inset: 0; padding: 2px; background: conic-gradient(var(--vs-theme-color2) calc(var(--progress, 0) * 360deg), rgba(246, 245, 245, 0.14) 0); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.snav-top__icon { width: 10px; height: 10px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(2px) rotate(45deg); }

/* ---------- phones / tablets: floating section pill ---------- */
.snav-pill { display: none; }
@media (max-width: 1199px) {
  .snav { display: none; }
  body:has(.snav-pill) .about-toc-mobile { display: none !important; } /* replaced by the pill */
  .snav-pill { position: fixed; z-index: 900; left: 12px; right: 76px; bottom: 16px; display: flex; flex-direction: column-reverse; max-width: 520px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
  .snav-pill.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .snav-pill__btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px 0 50px; text-align: left; color: var(--title-color); background: rgba(8, 17, 15, 0.96); border: 1px solid rgba(246, 245, 245, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
  .snav-pill__ring { position: absolute; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--vs-theme-color2) calc(var(--progress, 0) * 360deg), rgba(246, 245, 245, 0.14) 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); }
  .snav-pill__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--title-font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .snav-pill__chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--vs-theme-color2); border-bottom: 2px solid var(--vs-theme-color2); transform: rotate(-135deg) translateY(-2px); transition: transform .25s; }
  .snav-pill.is-open .snav-pill__chev { transform: rotate(45deg) translateY(-3px); }
  .snav-pill__sheet { display: none; gap: 2px; max-height: 55vh; overflow-y: auto; padding: 8px; background: rgba(7, 13, 12, 0.98); border: 1px solid rgba(246, 245, 245, 0.1); border-bottom: 0; }
  .snav-pill.is-open .snav-pill__sheet { display: grid; }
  .snav-pill__k { padding: 4px 6px 8px; font-family: var(--title-font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-color4); }
  .snav-pill__item { display: flex; gap: 12px; padding: 10px 8px; text-align: left; font-size: 0.86rem; color: var(--text-color1); background: none; border: 0; border-left: 2px solid transparent; }
  .snav-pill__item b { font-family: var(--title-font); font-weight: 300; color: var(--vs-theme-color2); }
  .snav-pill__item.is-group { font-family: var(--title-font); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: var(--title-color); }
  .snav-pill__item.is-on { color: #fff; border-left-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.1); }
  .snav-top { right: 12px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .snav, .snav-top, .snav * { transition: none !important; } }