/* ==========================================================================
   Public "How It Works" process flowchart (how-it-works.html only).
   Ported from the Claude-Artifact mockup built earlier in the project —
   same fork/branch structure, same measure-then-draw JS layout technique
   (see js/flowchart.js), same visual language, adapted to:
     - the real site's own design tokens (css/styles.css) instead of the
       mockup's private, duplicated :root — no dark-mode block either,
       since this site doesn't have a dark/light toggle.
     - real product names (Foundations Course, Document Generation,
       Interview Audio) instead of the mockup's placeholder names.
     - every class prefixed `flow-` so nothing collides with existing
       site-wide classes of the same shape (.card, .eyebrow, .is-optional…).
   This is a purely informational map of the possible paths — no "you are
   here" / done / in-progress framing, since visitors aren't logged in and
   nothing here is tracking a real status. The only visual distinction is
   structural: solid = the main path, terracotta = the one real either/or
   fork, dashed/muted = conditional or optional steps that may not apply.
   One custom property the real token set doesn't have (a rest-state
   shadow) is scoped locally to .flow-wrap rather than added to the global
   :root in styles.css. ========================================================================== */

.flow-wrap {
  --flow-shadow: 0 1px 2px rgba(44,36,25,.06), 0 4px 14px rgba(44,36,25,.05);
  margin-top: 28px;
}

/* ---- Diagram canvas ---- */
.flow-canvas-scroll { overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-lg); margin-bottom: 8px; }
.flow-canvas { position: relative; width: 760px; height: 3400px; margin: 0 auto; }

svg.flow-connectors { position: absolute; top: 0; left: 0; z-index: 1; overflow: visible; pointer-events: none; }
.flow-ln { fill: none; stroke-width: 2.5; }
.flow-ln-trunk { stroke: var(--burgundy); }
.flow-ln-fork { stroke: var(--terracotta); }
.flow-ln-cond { stroke: var(--border-strong); stroke-dasharray: 1 6; stroke-linecap: round; opacity: .6; }
.flow-ln-optional { stroke: var(--terracotta); stroke-dasharray: 1 5; stroke-linecap: round; opacity: .7; }
.flow-jdot { fill: var(--white); stroke: var(--border-strong); stroke-width: 2; }

/* Every node is placed with a fixed left/width; top is computed by
   js/flowchart.js from each previous card's REAL rendered height — never
   guessed — so nothing can overlap no matter how text wraps. Connector
   lines and stage-note positions are computed the same way, after layout
   settles. */
.flow-node { position: absolute; z-index: 2; transform: translateX(-50%); }
.flow-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; box-shadow: var(--flow-shadow); }
.flow-card.is-optional { border-style: dashed; border-color: var(--terracotta); }

.flow-node-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 5px; }
.flow-node-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--tag-bg); color: var(--burgundy); }
.flow-node-icon svg { width: 14px; height: 14px; }
.is-optional .flow-node-icon { background: transparent; border: 1px dashed var(--terracotta); color: var(--terracotta); }
.flow-node-title { font-size: 13.5px; font-weight: 700; margin: 0; line-height: 1.3; font-family: var(--font-body); color: var(--text); }
.flow-node-desc { font-size: 11.5px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.flow-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.flow-duration { font-size: 10px; color: var(--text-faint); font-weight: 600; }
.flow-node-note { margin-top: 6px; font-size: 10.5px; color: var(--eyebrow); font-weight: 600; line-height: 1.35; }

.flow-stage-note {
  position: absolute; z-index: 2; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 6px;
  background: var(--white); border: 1px dashed var(--eyebrow); border-radius: var(--radius-md); padding: 6px 12px;
  box-shadow: var(--flow-shadow); max-width: 230px;
}
.flow-stage-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--eyebrow); }
.flow-stage-note span { font-size: 10.5px; font-style: italic; font-weight: 600; color: var(--eyebrow); line-height: 1.35; }

.flow-scroll-hint { font-size: 12px; color: var(--text-faint); margin: 6px 4px 0; }

/* ---- Legend ---- */
.flow-legend {
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.flow-legend h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 0 0 10px; font-family: var(--font-body); }
.flow-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.flow-swatch { flex: none; width: 22px; height: 2px; }
.flow-sw-trunk { background: var(--burgundy); }
.flow-sw-fork { background: var(--terracotta); }
.flow-sw-cond { background-image: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 6px); opacity: .7; }
.flow-sw-optional { background-image: repeating-linear-gradient(to right, var(--terracotta) 0 1px, transparent 1px 5px); opacity: .7; }