/* Section rail — chapters + subsections (Webflow depth, Copilot chrome). */

.section-rail {
  --rail-ink: rgba(11, 11, 12, 0.55);
  --rail-ink-hover: rgba(11, 11, 12, 0.88);
  --rail-active: var(--case-accent, var(--glow, #4F46E5));
  --rail-spine: rgba(11, 11, 12, 0.12);
  --rail-fill: var(--case-accent, var(--glow, #4F46E5));
  --rail-sub: rgba(11, 11, 12, 0.5);

  position: fixed;
  left: clamp(14px, 2.2vw, 36px);
  top: 50%;
  transform: translateY(calc(-50% + 10px));
  z-index: 28;
  display: none;
  flex-direction: column;
  max-width: 190px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-rail.is-ready { display: flex; }

.section-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.section-rail__spine {
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 2px;
  background: var(--rail-spine);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.section-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--rail-fill);
  border-radius: 2px;
  transition: height 0.2s linear;
}

.section-rail__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 16px;
}

.section-rail__chapter {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 2px;
}

.section-rail a {
  display: block;
  font-family: var(--font-archivo, "Archivo", "Helvetica Neue", sans-serif);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Default = over paper. Per-link .is-over-dark flips when that row sits on ink. */
.section-rail__chapter > a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rail-ink);
  padding: 7px 0;
}

.section-rail__chapter > a:hover { color: var(--rail-ink-hover); }

.section-rail__chapter > a.is-active,
.section-rail__chapter > a.is-current {
  color: var(--rail-active);
  font-weight: 700;
}

.section-rail__chapter > a.is-over-dark {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.section-rail__chapter > a.is-over-dark:hover {
  color: rgba(255, 255, 255, 0.95);
}
.section-rail__chapter > a.is-over-dark.is-active,
.section-rail__chapter > a.is-over-dark.is-current {
  color: var(--case-accent-dark, var(--glow-soft, #9D91FF));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.section-rail__subs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 6px 10px;
  margin: 0;
  border-left: 1px solid transparent;
}

.section-rail__chapter:has(> a.is-current) .section-rail__subs,
.section-rail__chapter:has(> a.is-active) .section-rail__subs {
  border-left-color: rgba(var(--case-accent-rgb, 79, 70, 229), 0.22);
}

.section-rail__subs a {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rail-sub);
  padding: 4px 0;
}

.section-rail__subs a:hover { color: var(--rail-ink-hover); }

.section-rail__subs a.is-active {
  color: var(--rail-active);
  font-weight: 700;
}

.section-rail__subs a.is-over-dark {
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.section-rail__subs a.is-over-dark:hover {
  color: rgba(255, 255, 255, 0.92);
}
.section-rail__subs a.is-over-dark.is-active {
  color: var(--case-accent-dark, var(--glow-soft, #9D91FF));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Label straddles ink + paper — prefer ink treatment + punch */
.section-rail a.is-over-seam {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow:
    0 0 3px rgba(11, 11, 12, 0.9),
    0 1px 2px rgba(11, 11, 12, 0.85);
}

.section-rail__chapter:has(> a.is-current.is-over-dark) .section-rail__subs,
.section-rail__chapter:has(> a.is-active.is-over-dark) .section-rail__subs {
  border-left-color: rgba(var(--case-accent-dark-rgb, 157, 145, 255), 0.28);
}

/* Spine adapts when most of the rail sits on ink */
.section-rail.is-mostly-dark {
  --rail-spine: rgba(255, 255, 255, 0.18);
  --rail-fill: var(--case-accent-dark, var(--glow-soft, #9D91FF));
}

/* Mobile chips — top-level chapters only */
.section-rail-mobile {
  display: none;
  position: sticky;
  top: 56px;
  z-index: 25;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(11, 11, 12, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-rail-mobile.is-ready { display: block; }

.section-rail-mobile.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.section-rail-mobile.is-on-dark {
  background: color-mix(in srgb, var(--case-surface, #0b0b0c) 88%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.section-rail-mobile__scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px clamp(16px, 4vw, 40px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.section-rail-mobile__scroller::-webkit-scrollbar { display: none; }

.section-rail-mobile a {
  flex: 0 0 auto;
  font-family: var(--font-archivo, "Archivo", "Helvetica Neue", sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: rgba(11, 11, 12, 0.55);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(11, 11, 12, 0.14);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.section-rail-mobile a:hover {
  color: rgba(11, 11, 12, 0.85);
  border-color: rgba(11, 11, 12, 0.28);
}

.section-rail-mobile a.is-active,
.section-rail-mobile a.is-current {
  color: var(--case-accent, var(--glow, #4F46E5));
  border-color: rgba(var(--case-accent-rgb, 79, 70, 229), 0.55);
  background: rgba(var(--case-accent-rgb, 79, 70, 229), 0.06);
}

.section-rail-mobile.is-on-dark a {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
}

.section-rail-mobile.is-on-dark a.is-active,
.section-rail-mobile.is-on-dark a.is-current {
  color: var(--case-accent-dark, var(--glow-soft, #9D91FF));
  border-color: rgba(var(--case-accent-dark-rgb, 157, 145, 255), 0.55);
  background: rgba(var(--case-accent-dark-rgb, 157, 145, 255), 0.1);
}

@media (min-width: 1400px) {
  .section-rail.is-ready { display: flex; }
  .section-rail-mobile { display: none !important; }
}

@media (max-width: 1399px) {
  .section-rail { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .section-rail,
  .section-rail-mobile,
  .section-rail__fill {
    transition: opacity 0.2s ease;
  }
}