/* ============================================================
   Component · Sheet index rail  ·  built by section-rail.js
   A compact fixed rail: one tick per [data-rail] section, the
   current one accented and extended, labels sliding out on hover.
   It mirrors a drawing sheet's index strip.

   Pointer affordance only — aria-hidden and unfocusable, because
   on pages with a real contents list these links already exist in
   the document, and on pages without one the sections are reachable
   by scrolling.
   ============================================================ */

.sheetrail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  z-index: var(--z-nav);
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--space-sm) var(--space-sm);
  opacity: 0;
  /* Never blocks the page. Only the ticks themselves take the
     pointer, and only once the rail is live — otherwise the rail's
     box would sit over a strip of content and swallow clicks. */
  pointer-events: none;
  /* Labels slide out over page content, so the rail lays down a
     panel underneath them while it is being used. */
  background: color-mix(in srgb, var(--color-white) 0%, transparent);
  border-left: 1px solid transparent;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}
@media (min-width: 1024px) {
  .sheetrail { display: flex; }
}
.sheetrail:hover {
  background: color-mix(in srgb, var(--color-white) 92%, transparent);
  border-left-color: var(--color-border-light);
  backdrop-filter: blur(6px);
}
.sheetrail.is-active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sheetrail.is-active .sheetrail__item { pointer-events: auto; }

.sheetrail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* No flex gap: a gap still reserves space either side of a
     collapsed label, which is exactly what the collapse is for.
     The spacing rides on the labels' own padding instead, so it
     is clipped away with them. */
  gap: 0;
  padding: 6px 0;
}

.sheetrail__label,
.sheetrail__num {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
/* Idle is a bare column of ruled ticks — that is the whole point, and
   it also keeps the rail's box narrow enough to sit in the page
   gutter. Labels and numbers must therefore collapse, not merely fade:
   a transparent label still occupies ~180px of the viewport. */
.sheetrail__label,
.sheetrail__num {
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(6px);
  transition:
    max-width var(--duration-normal) var(--ease-out),
    padding-right var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.sheetrail:hover .sheetrail__label,
.sheetrail:hover .sheetrail__num {
  max-width: 16rem;
  padding-right: var(--space-sm);
  opacity: 1;
  transform: translateX(0);
}
.sheetrail:hover .sheetrail__num { opacity: 0.55; }
.sheetrail:hover .sheetrail__item:nth-child(1) .sheetrail__label { transition-delay:   0ms; }
.sheetrail:hover .sheetrail__item:nth-child(2) .sheetrail__label { transition-delay:  35ms; }
.sheetrail:hover .sheetrail__item:nth-child(3) .sheetrail__label { transition-delay:  70ms; }
.sheetrail:hover .sheetrail__item:nth-child(4) .sheetrail__label { transition-delay: 105ms; }
.sheetrail:hover .sheetrail__item:nth-child(5) .sheetrail__label { transition-delay: 140ms; }
.sheetrail:hover .sheetrail__item:nth-child(6) .sheetrail__label { transition-delay: 175ms; }
.sheetrail:hover .sheetrail__item:nth-child(7) .sheetrail__label { transition-delay: 210ms; }


.sheetrail__tick {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--color-border);
  transition:
    width var(--duration-normal) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out);
}
.sheetrail__item:hover .sheetrail__tick { width: 26px; background: var(--color-ink-muted); }
.sheetrail__item:hover .sheetrail__label,
.sheetrail__item:hover .sheetrail__num { color: var(--color-ink); }

.sheetrail__item.is-current .sheetrail__tick {
  width: 32px;
  height: 2px;
  background: var(--color-accent);
}
.sheetrail__item.is-current .sheetrail__num { color: var(--color-accent); opacity: 1; }
.sheetrail__item.is-current .sheetrail__label { color: var(--color-ink); }

/* --- Over an ink section ----------------------------------
   Border-coloured ticks vanish against dark, so the whole rail
   flips palette while the current section is a dark one. */
.sheetrail.is-on-dark .sheetrail__label,
.sheetrail.is-on-dark .sheetrail__num {
  color: color-mix(in srgb, var(--color-white) 60%, transparent);
}
.sheetrail.is-on-dark .sheetrail__tick {
  background: color-mix(in srgb, var(--color-white) 35%, transparent);
}
.sheetrail.is-on-dark:hover {
  background: color-mix(in srgb, var(--color-ink) 88%, transparent);
  border-left-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}
.sheetrail.is-on-dark .sheetrail__item:hover .sheetrail__tick {
  background: color-mix(in srgb, var(--color-white) 70%, transparent);
}
.sheetrail.is-on-dark .sheetrail__item:hover .sheetrail__label,
.sheetrail.is-on-dark .sheetrail__item:hover .sheetrail__num { color: var(--color-white); }
.sheetrail.is-on-dark .sheetrail__item.is-current .sheetrail__tick { background: var(--color-accent); }
.sheetrail.is-on-dark .sheetrail__item.is-current .sheetrail__label { color: var(--color-white); }

/* --- Companion: in-page contents list ---------------------- */
.subhero__contents-indicator {
  position: absolute;
  top: 0;
  left: -10px;
  width: 2px;
  height: 0;
  background: var(--color-accent);
  opacity: 0;
  transition:
    transform var(--duration-normal) var(--ease-out),
    height var(--duration-normal) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}
.subhero__contents-indicator.is-active { opacity: 1; }

.subhero__contents a .num { transition: color var(--duration-fast) var(--ease-out); }
.subhero__contents li.is-current > a { color: var(--color-accent); padding-left: 8px; }
.subhero__contents li.is-current > a .num { color: var(--color-accent); }

/* Section anchors clear the fixed header when jumped to */
[data-rail] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .sheetrail,
  .sheetrail__tick,
  .sheetrail__label { transition: none; }
  .sheetrail { transform: translateY(-50%); }
  .subhero__contents-indicator { transition: none; }
}