/* ATLAS · components/scrub-pin.css
 * Provenance: Phase 8 · extracted 2026-04-28
 * Spec: DESIGN_SYSTEM_PHILOSOPHY patterns/pinned-sequence.md
 *       DESIGN-BIBLE-v3 §XVII — pinned narrative reveal
 *
 * The scrub-pin pattern: a sticky container that pins a visual stage
 * while the user scrolls through N beats of prose. The scroll progress
 * within the pin drives a JS beat counter that updates state on the
 * visual stage.
 *
 * Used on: intake.html (4 beats), hunt.html (6 beats), findings.html (5 beats)
 *
 * Markup contract:
 *   <div class="scrub-pin" data-beats="N">        ← outer wrapper, sets height
 *     <div class="scrub-stage">                   ← sticky, full-viewport
 *       <div class="scrub-rail">                  ← left: beat list
 *         <div class="scrub-tick" data-beat="1">…</div>
 *         …
 *       </div>
 *       <div class="scrub-canvas">…</div>         ← center: visual
 *       <div class="scrub-ledger">…</div>         ← right (optional): data
 *     </div>
 *   </div>
 *
 * JS contract (rig/scrub-pin.js):
 *   ScrubPin.init(el)  — call once per .scrub-pin element
 *   Fires CustomEvent 'scrub:beat' on el with detail { beat: N, progress: 0-1 }
 *   Sets data-active-beat="N" on .scrub-stage
 */

/* ── Outer wrapper — sets scroll height ───────────────────────── */
.scrub-pin {
  position: relative;
  /* Height set by JS or inline style: calc(N * 100vh + 100vh) */
}

/* ── Sticky stage — full viewport, fixed during scroll ───────── */
.scrub-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: stretch;
}

/* Three-column variant (rail + canvas + ledger) */
.scrub-stage.has-ledger {
  grid-template-columns: 240px 1fr 320px;
}

/* ── Rail — left beat navigator ───────────────────────────────── */
.scrub-rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0 32px 0 0;
  border-right: 1px solid var(--line);
}

.scrub-tick {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: opacity var(--t-sm) var(--ease-out-expo);
  opacity: 0.38;
  position: relative;
}
.scrub-tick:first-child { border-top: 1px solid var(--line); }

/* Active tick */
.scrub-stage[data-active-beat] .scrub-tick[data-beat] { opacity: 0.38; }
.scrub-stage[data-active-beat="1"] .scrub-tick[data-beat="1"],
.scrub-stage[data-active-beat="2"] .scrub-tick[data-beat="2"],
.scrub-stage[data-active-beat="3"] .scrub-tick[data-beat="3"],
.scrub-stage[data-active-beat="4"] .scrub-tick[data-beat="4"],
.scrub-stage[data-active-beat="5"] .scrub-tick[data-beat="5"],
.scrub-stage[data-active-beat="6"] .scrub-tick[data-beat="6"] { opacity: 1; }

/* Active indicator dot */
.scrub-tick::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--t-sm) var(--ease-out-expo);
}
.scrub-stage[data-active-beat="1"] .scrub-tick[data-beat="1"]::before,
.scrub-stage[data-active-beat="2"] .scrub-tick[data-beat="2"]::before,
.scrub-stage[data-active-beat="3"] .scrub-tick[data-beat="3"]::before,
.scrub-stage[data-active-beat="4"] .scrub-tick[data-beat="4"]::before,
.scrub-stage[data-active-beat="5"] .scrub-tick[data-beat="5"]::before,
.scrub-stage[data-active-beat="6"] .scrub-tick[data-beat="6"]::before { opacity: 1; }

.scrub-tick-n {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.scrub-tick-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 6px;
}
.scrub-tick-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ash);
}

/* ── Canvas — center visual ───────────────────────────────────── */
.scrub-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

/* ── Ledger — right data panel (optional) ─────────────────────── */
.scrub-ledger {
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}

/* ── Reduced motion — collapse to flat scroll ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scrub-stage {
    position: static;
    height: auto;
  }
  .scrub-pin {
    height: auto !important;
  }
  .scrub-tick { opacity: 1; }
  .scrub-tick::before { opacity: 0 !important; }
}

/* ── Mobile — vertical stack ──────────────────────────────────── */
@media (max-width: 767px) {
  .scrub-stage,
  .scrub-stage.has-ledger {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  .scrub-pin { height: auto !important; }
  .scrub-rail {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 24px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .scrub-tick { padding: 12px; border-bottom: none; opacity: 1; }
  .scrub-tick::before { display: none; }
  .scrub-canvas { padding: 24px; min-height: 300px; }
  .scrub-ledger { border-left: none; border-top: 1px solid var(--line); }
}