/* ============================================================
   Yohaku-style reading rail  —  1:1 port of innei.in's TocAside rail
   Source of truth: _next/static/chunks/0e5j0s4h3kad_.js (readRail component)
   Geometry + algorithm kept identical; only the host DOM differs.
   ============================================================ */

:root {
  --yh-accent: #ac9753;            /* oklch(0.6802524 0.0914655 92.6612963) */
  --yh-rail-w: 48px;               /* w-12 */
  --yh-rail-x: 8px;                /* path's fixed x */

  /* rail stroke/fill tokens, resolved per mode below so they are never
     `color-mix(var(--x))` — a form that can collapse to transparent. */
  --yh-rail-base:      rgba(255, 255, 255, 0.15);
  --yh-rail-dot:       rgba(255, 255, 255, 0.18);
  --yh-rail-dot-root:  rgba(255, 255, 255, 0.30);
  --yh-rail-dot-cur:   rgba(172, 151, 83, 0.72);
  --yh-rail-title:     rgba(255, 255, 255, 0.42);
}
@media (prefers-color-scheme: light) {
  :root:not([color-scheme='dark']) {
    --yh-rail-base:      rgba(20, 19, 18, 0.14);
    --yh-rail-dot:       rgba(20, 19, 18, 0.20);
    --yh-rail-dot-root:  rgba(20, 19, 18, 0.34);
    --yh-rail-dot-cur:   rgba(150, 130, 66, 0.80);
    --yh-rail-title:     rgba(20, 19, 18, 0.45);
  }
}
:root[color-scheme='light'] {
  --yh-rail-base:      rgba(20, 19, 18, 0.14);
  --yh-rail-dot:       rgba(20, 19, 18, 0.20);
  --yh-rail-dot-root:  rgba(20, 19, 18, 0.34);
  --yh-rail-dot-cur:   rgba(150, 130, 66, 0.80);
  --yh-rail-title:     rgba(20, 19, 18, 0.45);
}

/* ---------- container: pointer-events-none absolute inset-y-0 left-0 w-12 ---------- */
.yh-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--yh-rail-w);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yh-rail.yh-rail-visible { opacity: 1; }

/* left offset is computed in JS so the rail lands in the article's left gutter */

/* the inner track is inset 64px top & bottom, exactly like the original */
.yh-rail-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 64px;
}

.yh-rail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* grey base line: stroke-width 1.2, stroke-neutral-8/15 */
.yh-rail-base {
  fill: none;
  stroke: var(--yh-rail-base);
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity 200ms ease;
}
.yh-rail.yh-rail-active .yh-rail-base { opacity: 1; }

/* gold line: pathLength=1, dasharray 0.12 0.88, round caps, 1.6px, accent glow */
.yh-rail-progress {
  fill: none;
  stroke: var(--yh-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  opacity: 0;
  transition: opacity 300ms ease;
  filter: drop-shadow(0 0 4px rgba(172, 151, 83, 0.35));
}
.yh-rail.yh-rail-active .yh-rail-progress { opacity: 0.55; }

/* dots: current 2.5px accent/70 · root 1.75px neutral-8/30 · child 1.25px neutral-8/18 */
.yh-rail-dot {
  fill: var(--yh-rail-dot);
  opacity: 0;
  transition: opacity 300ms ease, r 350ms cubic-bezier(0.4, 0, 0.2, 1), fill 350ms ease;
}
.yh-rail.yh-rail-active .yh-rail-dot { opacity: 1; }
.yh-rail-dot.is-root { fill: var(--yh-rail-dot-root); }
.yh-rail-dot.is-current { fill: var(--yh-rail-dot-cur); }

/* read-out label: absolute left-9, title + percent */
.yh-rail-readout {
  position: absolute;
  left: 36px;                      /* left-9 */
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;                        /* gap-0.5 */
  opacity: 0;
  transition: opacity 300ms ease;
  will-change: transform;
}
.yh-rail.yh-rail-active .yh-rail-readout { opacity: 1; }
/* not enough clearance before the text: keep the line, hide the label */
.yh-rail-no-label .yh-rail-readout { display: none; }

.yh-rail-title {
  display: block;
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1.25;
  color: var(--yh-rail-title);
}
.yh-rail-percent {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(172, 151, 83, 0.50);
}

/* ---------- right-edge hairline progress (ReadIndicator) ---------- */
.yh-edge-progress {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 1px;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}
.yh-edge-progress > i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  background: rgba(172, 151, 83, 0.80);
  transition: height 75ms linear;
}

@media (max-width: 768px) {
  .yh-rail { display: none; }
  .yh-edge-progress { display: none; }
}
@media print {
  .yh-rail, .yh-edge-progress { display: none !important; }
}

/* ---------- hover gutter ----------
   A thin invisible strip in the left gutter. Without it the rail is only
   reachable by hovering the text itself, which feels accidental. */
.yh-rail-gutter {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 120px;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
}
@media (max-width: 768px) { .yh-rail-gutter { display: none; } }

/* ---------- TOC accessories: wavy rule + ring progress + back-to-top ---------- */
.yh-toc-wavy {
  display: block;
  height: 10px;
  width: 150px;
  max-width: 100%;
  margin: 14px 0 4px;
  opacity: 0.55;
}
.yh-toc-wavy path {
  fill: none;
  stroke: var(--yh-rail-base);
  stroke-width: 1.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.yh-toc-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.yh-toc-ring {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--yh-text, #e3e3e3);
}
.yh-toc-ring svg { flex: none; display: block; }
.yh-toc-ring-progress {
  transition: stroke-dashoffset 300ms ease;
}
.yh-toc-pct {
  font-variant-numeric: tabular-nums;
}
.yh-toc-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-top: 2px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--yh-muted, #a8a8a8);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, color 180ms ease;
}
.yh-toc-top.yh-toc-top-shown { opacity: 1; pointer-events: auto; }
.yh-toc-top:hover { color: var(--yh-accent, #ac9753); }
.yh-toc-top svg { flex: none; display: block; }