/* ==========================================================================
   § 040 · Photograph it, check the match, add it — scroll sequence
   Figma gjYZkxeha34OwmNUr91aQn · ITER 5 › Frame 39 ›
   "§ 010 how it works · ALT E · scroll sequence · state 1 · photo" 1272:15021
   Markup: index.html @@SECTION idflow · Logic: scripts/sec-idflow.js

   Stacked first. Every step keeps its own screen and paragraph in normal flow,
   so the section reads with JS off, in find-in-page and to a screen reader.
   The pinned stage is the enhancement: sec-idflow.js adds `is-js`, and only at
   981px and up, with motion allowed, does the phone become a sticky stage.
   Shares the .hp-* kit (wrap, section head, card title/body) with §030/§050.
   ========================================================================== */

.idflow {
  --idflow-muted: #6d5441;          /* text/secondary */
  --idflow-step-shadow: 8px -3px 7px rgba(41, 18, 8, 0.14);
}

/* Frame 1272:15021 is 96/96 padded with 48 between header, stage and dots.
   The 60px gap to the next frame (§ 050 native) rides on the bottom padding,
   and § 030 above carries the 60 that precedes this one. */
@media (min-width: 981px) {
  #idflow { padding-top: 96px; padding-bottom: calc(var(--chapter-gap) - 96px); }   /* 96 = the sticky wrap's bottom padding under the content; § 050 has no top padding */
}
.idflow__head { margin-bottom: 48px; }        /* frame gap, header → stage */

/* Stacked (no JS, reduced motion, narrow): one readable column. */
.idflow__steps { display: flex; flex-direction: column; gap: var(--s5); max-width: 760px; margin-inline: auto; }

/* The <li> carries the scroll distance; the card inside it hugs its content, so
   the manila block never stretches to a viewport-tall empty box. */
.idflow__step { display: flex; }
.idflow__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: var(--s5); border-radius: var(--radius);
  background: var(--card-light); border: 1px solid var(--hairline);
  box-shadow: var(--idflow-step-shadow);
}
.idflow__no {
  font-family: var(--f-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--idflow-muted);
}
.idflow__no .idflow__label { margin-left: var(--s2); }
.idflow__card .card__title { font-weight: 800; line-height: 1.1; }
.idflow__card .card__body { margin: 0; font-size: 16px; color: var(--idflow-muted); opacity: 1; }
/* Title and body sit in a folder only on phones (bottom of this file); at every
   other width the wrap is transparent to layout, so they stay direct children
   of .idflow__card and the pinned card is unchanged. */
.idflow__folder-wrap, .idflow__folder { display: contents; }

/* The in-flow screen: the no-JS / narrow / reduced-motion source of truth. */
.idflow__shot {
  display: block; width: 100%; max-width: 320px; height: auto;
  margin: 0 auto var(--s3); align-self: center;
  filter: drop-shadow(10px 12px 18px rgba(41, 18, 8, 0.22));
}

/* The sticky stage only exists in the enhanced layout. */
.idflow__stage { display: none; }
.idflow__phone { position: relative; width: 100%; aspect-ratio: 1004 / 1272; }
.idflow__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(10px 12px 18px rgba(41, 18, 8, 0.22));
}

/* Dots: indicator and control at once. Real anchors, so they jump to a step
   with JS off; sec-idflow.js moves aria-current as you scroll. */
.idflow__dots { display: flex; justify-content: center; gap: var(--s3); margin-top: 48px; }
.idflow__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--hairline);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.idflow__dot:hover { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.idflow__dot[aria-current="step"] { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ── Enhanced: pinned block, one step at full strength ────────────────
   Figma 1272:15021: the three steps sit 16 apart in a 624 column beside a 486
   phone, all present at once. The active one is a manila card at full strength;
   the other two keep their place at 30%. Nothing appears or disappears.

   The block pins for three viewports and scroll progress picks the active step,
   so scrolling moves the card down the list rather than revealing content.
   Clicking a step jumps straight to it (sec-idflow.js). */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  /* Three screens of travel: one per step. The pin rides on .hp-wrap, so no
     extra wrapper is needed in the markup. */
  .idflow.is-js { min-height: 300vh; padding-top: 0; padding-bottom: 0; }
  .idflow.is-js > .hp-wrap {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 0 96px;
  }

  .idflow.is-js .idflow__layout {
    display: grid; grid-template-columns: minmax(0, 624px) minmax(0, 486px);
    gap: 64px; justify-content: center; align-items: start;
  }
  /* 36px lead-in mirrors the Figma stage, where the steps block sits 35.66
     below the phone's top edge (1272:15024 inside 1272:15023). */
  .idflow.is-js .idflow__steps {
    grid-column: 1; grid-row: 1; max-width: none;
    margin: 0; padding-top: 36px; gap: 16px;   /* margin: 0 drops the ol's UA margin-block */
  }
  .idflow.is-js .idflow__step { min-height: 0; cursor: pointer; }
  .idflow.is-js .idflow__step:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }

  /* Inactive: in place, no card, 30%. Active: manila card, full strength. */
  .idflow.is-js .idflow__card {
    opacity: 0.3; background: transparent; border-color: transparent; box-shadow: none;
    transition: opacity .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .idflow.is-js .idflow__step.is-active .idflow__card {
    opacity: 1; background: var(--card-light); border-color: var(--hairline);
    box-shadow: var(--idflow-step-shadow);
  }
  .idflow.is-js .idflow__shot { display: none; }
  .idflow.is-js .idflow__dots { display: none; }

  /* The phone sits in the pinned block, so it needs no sticky of its own. */
  .idflow.is-js .idflow__stage {
    display: flex; align-items: flex-start; grid-column: 2; grid-row: 1;
    position: static; height: auto;
  }
  .idflow.is-js .idflow__frame { opacity: 0; transition: opacity .2s ease-out; }
  .idflow.is-js[data-idflow-active="1"] .idflow__frame[data-idflow-frame="1"],
  .idflow.is-js[data-idflow-active="2"] .idflow__frame[data-idflow-frame="2"],
  .idflow.is-js[data-idflow-active="3"] .idflow__frame[data-idflow-frame="3"] { opacity: 1; }
}

/* ── Phones: the same idea without a pin ──────────────────────────
   Pinning a stage on a phone is where scroll-jacking feels worst, and a
   100dvh sticky box is unreliable while mobile browser chrome grows and
   shrinks. So the steps stay in normal flow, each keeping its own screen, and
   only the active treatment carries over: the step nearest the middle of the
   screen lifts to full strength while the others hold their place at 30%.
   sec-idflow.js picks it; tapping a step still activates it directly. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .idflow.is-js .idflow__step { cursor: pointer; }
  .idflow.is-js .idflow__step:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }
  .idflow.is-js .idflow__card {
    opacity: 0.3; background: transparent; border-color: transparent; box-shadow: none;
    transition: opacity .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .idflow.is-js .idflow__step.is-active .idflow__card {
    opacity: 1; background: var(--card-light); border-color: var(--hairline);
    box-shadow: var(--idflow-step-shadow);
  }
}

/* Reduced motion: no pin, no crossfade — the stacked layout, which is also
   what a visitor without JS gets. */
@media (prefers-reduced-motion: reduce) {
  .idflow__frame { transition: none; }
}

@media (max-width: 980px) {
  .idflow__head { margin-bottom: var(--s6); }
  .idflow__dots { margin-top: var(--s6); }
}
@media (max-width: 720px) {
  .idflow .hp-head .sec-title { font-size: 36px; font-weight: 600; line-height: 1.15; }
  .idflow__step { padding: var(--s4); }
  .idflow__shot { max-width: 260px; }
}

/* ── Phones: § 030's card, with the phone at full size ────────────────────
   Corbin, 2026-09-18: structure these exactly like chapter three, with the
   phones much larger, with the tabbed card. So each step drops the flat manila
   block and takes § 030's anatomy (sec-identify.css .hp-card): a 91.7%-wide
   phone tucked 22.4% of the column behind a tabbed folder, in § 030's mobile
   column (520) at its card gap (48). The step number becomes the tab. The
   active-step treatment survives as opacity alone, so all three read as the
   same tabbed card and only the emphasis moves.
   Last in the file, so it wins over the 720px block above. */
@media (max-width: 980px) {
  /* The <ol> keeps its UA padding-inline-start at this width (only the pinned
     layout zeroed it), which held the cards 40px in and shrank the phone. */
  .idflow__steps { max-width: 520px; gap: var(--s7); margin-block: 0; padding: 0; }
  .idflow__step { padding: 0; }   /* § 030's cards carry no outer padding */

  /* The card is now just the stack; the surface lives on the tab and folder. */
  .idflow__card { gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .idflow.is-js .idflow__card,
  .idflow.is-js .idflow__step.is-active .idflow__card {
    background: none; border-color: transparent; box-shadow: none;
  }

  /* § 030's .hp-phone geometry: 91.7% wide, 5.15% in, and 22.4% of the column
     tucked behind the card (a margin percentage resolves against width). */
  .idflow__shot {
    position: relative; z-index: 0;
    width: 91.7%; max-width: none; align-self: flex-start;
    margin: 0 0 -22.4% 5.15%;
    pointer-events: none; user-select: none;
  }

  /* The step number becomes the folder's tab. Figma Tab/* is 32 tall with
     16/20 side padding and an 8 gap, serif number then sans label. */
  .idflow__no {
    display: inline-flex; align-items: center; gap: var(--s2);
    position: relative; z-index: 1;
    height: 32px; padding: 0 20px 0 16px; margin-bottom: -1px;
    background: var(--card-light); border: 1px solid var(--hairline); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--tab-shadow);
    font-family: var(--f-serif); font-weight: 500; font-size: 12px; letter-spacing: 0.04em;
    line-height: 1; text-transform: none; white-space: nowrap; color: var(--ink); opacity: 0.85;
  }
  .idflow__no .idflow__label {
    margin-left: 0;
    font-family: var(--f-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Folder, with the card shadow on a box UNDER it so the folder's own shadow
     never falls on the tab — § 030's .hp-folder-wrap::before. */
  .idflow__folder-wrap { display: flex; position: relative; width: 100%; }
  .idflow__folder-wrap::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    box-shadow: 8px -3px 13px rgba(41, 18, 8, 0.14);   /* Shadow/Card */
  }
  .idflow__folder {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
    position: relative; z-index: 2; flex: 1; width: 100%; padding: var(--s6);
    background: var(--card-light); border: 1px solid var(--hairline);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
  }
}
/* § 030 tightens its folder padding at this width; match it. */
@media (max-width: 720px) {
  .idflow__folder { padding: var(--s5); }
}