/* story-depth.css — fills the empty gutters of the scroll story.
   Companion to story-depth.js. Everything here is wide-screen only: at <=700px
   the phone already fills the frame and there is no gutter to fill.

   Layout of the left gutter on a 1440px frame:
     x 28 – 110   chapter rail (always present)
     x 148 – 298  ruled-out candidates (scan beat only)
     x 313 –      phone's left edge once it has slid left
   The rail and the candidate list are deliberately adjacent: the list reads as
   detail belonging to the active "03 IDENTIFY" chapter beside it. */

/* ── Left-gutter furniture — wide screens only ───────────────────────────── */
@media (min-width: 701px) {

  /* ── Chapter rail ──────────────────────────────────────────────────────
     Five beats of the story, marking where the reader is in a 980vh scroll. */
  #sd-rail {
    position: absolute;
    left: clamp(20px, 2.4vw, 34px);
    top: 50%;
    transform: translateY(-50%);
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-left: 15px;
    pointer-events: none;
    will-change: opacity;
  }

  /* Track line running the full height of the rail, with a fill that grows
     downward as the story advances. */
  #sd-rail-track {
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--line);
  }
  #sd-rail-fill {
    position: absolute;
    inset: 0;
    background: var(--green);
    transform-origin: 50% 0;
    transform: scaleY(0);
    will-change: transform;
  }

  .sd-chapter {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    will-change: opacity;
  }

  /* Marker for the active chapter, sitting on the track line. */
  .sd-ch-dot {
    position: absolute;
    left: -18px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0;
    will-change: transform, opacity;
  }

  .sd-ch-num {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--muted);
  }
  .sd-ch-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: var(--ink);
    white-space: nowrap;
  }

  /* ── Ruled-out candidates (scan beat) ──────────────────────────────────
     An explicit width is required, not max-width: the element is absolutely
     positioned from the left with absolutely positioned strike bars inside,
     so a shrink-to-fit box would collapse and wrap every name. */
  #sd-scan {
    position: absolute;
    left: clamp(132px, 10.5vw, 156px);
    top: 50%;
    width: 150px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .sd-scan-eyebrow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.62;
    margin-bottom: 12px;
  }

  .sd-cand {
    position: relative;
    margin-bottom: 9px;
    width: fit-content;
  }
  .sd-cand-name {
    font-size: 11.5px;
    font-style: italic;
    color: var(--muted);
    white-space: nowrap;
    will-change: opacity;
  }
  /* Strike bar wipes across the name as the scan rules that species out. */
  .sd-cand-strike {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--muted);
    transform-origin: 0 50%;
    transform: scaleX(0);
    will-change: transform;
  }

  /* The reader is told the answer on the phone; this is the confirmation. */
  #sd-scan-hit {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    opacity: 0;
    will-change: opacity;
  }
  .sd-hit-name {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
  }
  .sd-hit-lbl {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* The scroll story is replaced by a static fallback under reduced motion, so
   this module never loads there. The rule documents the intent regardless. */
@media (prefers-reduced-motion: reduce) {
  #sd-rail, #sd-scan { display: none; }
}