/* ---------- How we work: stepper component ---------- */
/* Uses only existing design tokens from style.css (--brand, --brand-light,
   --accent, --ink, --ink-soft, --paper, --paper-alt, --line, --white,
   --radius, --font-serif, --font-sans, --shadow-card, --ease). Track A is
   colour-coded with the existing --brand-light green, Track B with the
   existing --accent gold — no new colours introduced. */

/* Intro paragraph sits between the centered section title and the stepper
   itself, on the live site (not present in the isolated preview) — reuses
   the same 640px measure as .section-title.center so the two align, with
   its own bottom margin taking over the spacing job .section-title.center
   normally does on its own. */
.section-intro {
  max-width: 640px;
  margin: -32px auto 48px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.stepper {
  --track-a: var(--brand-light);
  --track-a-soft: rgba(47, 107, 84, 0.08);
  --track-b: var(--accent);
  --track-b-soft: rgba(185, 138, 61, 0.08);
  max-width: 860px;
  margin: 0 auto;
}

.stepper-cta {
  text-align: center;
  margin-top: 40px;
}

.stepper-connector {
  width: 2px;
  height: 32px;
  margin: 0 auto;
  /* Neutral --line is too pale to read as a solid connector on its own
     (it only works elsewhere as a subtle border/rule). For the standalone
     step1-to-step2 connector — the only place this base colour is
     actually seen, since both in-fork connectors override it below with
     their own track colour — use --ink-soft instead: solid and clearly
     visible, but a neutral dark tone rather than leaning toward either
     track's green or gold. */
  background: var(--ink-soft);
}

/* ---------- Step card ---------- */

.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.step--a { border-left: 3px solid var(--track-a); }
.step--b { border-left: 3px solid var(--track-b); }

.step-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.2s ease;
}

.step-header:hover { background: var(--paper-alt); }

.step--a .step-header:hover { background: var(--track-a-soft); }
.step--b .step-header:hover { background: var(--track-b-soft); }

.step-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(31, 77, 61, 0.25);
}

.step-heading {
  flex: 1;
  min-width: 0;
}

.step-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.step-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}

.step-summary {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.step-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease), border-color 0.2s ease, background 0.2s ease;
}

.step-icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-soft);
  transition: stroke 0.2s ease;
}

.step--a .step-icon { border-color: var(--track-a); }
.step--a .step-icon svg { stroke: var(--track-a); }
.step--b .step-icon { border-color: var(--track-b); }
.step--b .step-icon svg { stroke: var(--track-b); }

.step.is-open .step-icon { transform: rotate(135deg); }

/* ---------- Collapsible panel (CSS grid-track trick, no JS height calc) ---------- */

.step-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
}

.step.is-open .step-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.step-panel-inner { overflow: hidden; min-height: 0; }

.step-panel-body {
  padding: 0 24px 24px 24px;
  font-size: 0.98rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .step-panel { transition: none; }
  .step-icon { transition: none; }
}

/* ---------- Fork (steps 3 / 4: two parallel tracks) ---------- */

.stepper-fork {
  position: relative;
}

/* Smooth bezier-curve connectors, drawn with SVG rather than blocky
   right-angle borders, for a cleaner diagram feel. preserveAspectRatio
   "none" lets the curve stretch to the container's actual width while
   vector-effect keeps the stroke a crisp, constant 2px regardless of
   that stretch. */
.stepper-fork-connector-wrap {
  width: 100%;
  height: 40px;
}

.stepper-fork-connector {
  display: block;
  width: 100%;
  height: 100%;
}

.stepper-fork-connector path {
  fill: none;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.stepper-fork-connector .connector-a { stroke: var(--track-a); }
.stepper-fork-connector .connector-b { stroke: var(--track-b); }

/* No transform here: unlike the split curve (a static mirror image would
   do), the merge curve's two paths are recomputed independently in JS
   (see js/stepper.js) so each one can reach its own card's real bottom
   edge, even when the two cards end at different heights. The wrap/svg
   box itself is never resized or shifted (no inline height/margin/viewBox
   mutation) — only path `d` attributes change, and the shorter column's
   path is allowed to start above the box's nominal top edge (negative y)
   via overflow: visible, so nothing here is a layout-affecting mutation
   that could race with ResizeObserver's own reflow. */
.stepper-fork-connector-wrap--merge,
.stepper-fork-connector--merge {
  overflow: visible;
}

.stepper-fork-line-mobile {
  display: none;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background: var(--line);
}

/* Two independent columns, each a self-contained track (step, connector,
   step). Deliberately NOT a single grid with shared rows: sharing rows
   between tracks means opening a card in one track pushes the other
   track's *unrelated* card down too (via the shared row boundary),
   breaking that track's own internal connector line. Keeping the tracks
   fully independent means each one's internal 3-to-4 connector always
   touches its own two cards, no matter what the other track is doing.
   Only the split (top) and merge (bottom) fork curves need to bridge the
   two independent columns — the split is safe statically since both
   columns start at the same top edge; the merge is kept in sync
   dynamically by js/stepper.js, which measures each column's real
   bottom edge and redraws the curve to match. */
.stepper-fork-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.stepper-track-col {
  display: flex;
  flex-direction: column;
  /* No `gap` here (unlike a generic flex stack): the connector between
     3a/4a and 3b/4b is itself a 32px-tall element, exactly like the
     step1-to-step2 connector outside the fork, which also relies on its
     own height alone for spacing rather than extra flow gap. Adding a
     gap on top of that height would push the line away from both cards
     instead of letting it touch them. */
}

/* Each track's internal connector (between its own 3-card and 4-card)
   picks up that track's colour, matching the curved split/merge
   connectors above and below it — only the plain step1-to-step2
   connector outside the fork stays the neutral --line grey. */
.stepper-track-col:nth-child(1) .stepper-connector { background: var(--track-a); }
.stepper-track-col:nth-child(2) .stepper-connector { background: var(--track-b); }

/* ---------- Responsive: stack tracks on mobile ---------- */

@media (max-width: 760px) {
  .stepper-fork-tracks {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* The curved split/merge only reads as a diagram in two columns; once
     stacked, swap it for a plain straight line so the flow still scans
     top-to-bottom. */
  .stepper-fork-connector { display: none; }
  .stepper-fork-line-mobile { display: block; }

  .step-title { font-size: 1.05rem; }
}