/*
  Neural Thread - the signature scroll element, ported from web3.1's
  design system (Phase 3 of the web3.1/web2 merge; behavior in
  thread.js). A single thin path down the left margin, opacity:0 by
  default: it has no meaningful non-JS state (the path geometry and
  every node position is computed at request time from getTotalLength/
  getPointAtLength, which cannot run without JS), so there is nothing
  to show progressively-enhanced-style the way [data-reveal] content is
  - thread.js adds .is-live only once it has actually built something.

  Hidden below 1200px (same threshold web3.1 used - there is no margin
  for it to live in on tablet/mobile) and frozen-but-visible under
  prefers-reduced-motion, since thread.js's IntersectionObserver guard
  means .is-live is never added there.
*/
.thread {
  position: fixed;
  left: var(--s-6);
  top: 0;
  height: 100vh;
  width: 3.5rem;
  z-index: var(--z-thread);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--m-story) var(--ease-editorial);
}
.thread.is-live {
  opacity: 1;
}

.thread-track {
  stroke: var(--thread-idle);
  stroke-width: var(--thread-w);
  fill: none;
}
.thread-live {
  stroke: var(--thread-live);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
}
.thread-node {
  fill: var(--canvas);
  stroke: var(--thread-idle);
  stroke-width: var(--thread-w);
  transition:
    fill var(--m-normal) var(--ease-human),
    stroke var(--m-normal) var(--ease-human),
    r var(--m-normal) var(--ease-human);
}
.thread-node.is-on {
  fill: var(--thread-live);
  stroke: var(--thread-live);
}
.thread-hit {
  pointer-events: auto;
  cursor: pointer;
  fill: transparent;
}
.thread-node-group {
  cursor: pointer;
}

/* Chapter-name tooltip (thread.js), shown on hover/focus only - keeps
   the Thread's established "whispers, not screams" character rather
   than always-visible permanent labels. Statically present-but-hidden
   in layout.php, same pattern wayfinder.php's own tooltip container
   uses. .thread is position:fixed, so it's this tooltip's containing
   block, matching .wayfinder__viewer/.wayfinder__tooltip's relationship. */
.thread-tooltip {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.3;
  color: var(--color-field-white);
  background: var(--color-navy-deep);
  box-shadow: var(--shadow-1);
  pointer-events: none;
}

@media (max-width: 75rem) {
  .thread {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thread {
    opacity: 1;
  }
}

@media print {
  .thread {
    display: none;
  }
}