/**
 * /features flow diagrams (js/tour-flow.js draws the edges) and the auto-play pill/ring
 * (js/tour-autoplay.js). Nodes are real buttons (≥44px). Desktop: a centred flowchart with
 * forks side by side. Mobile: a vertical stepper with branch options as side-by-side chips.
 */
.flow {
  position: relative; display: grid; gap: 30px;
  max-width: 480px; margin: var(--sp-6) 0 0; padding: 0; list-style: none;
}
.flow__row { position: relative; z-index: 1; display: flex; justify-content: center; }
.flow__branch { display: flex; justify-content: center; gap: 28px; width: 100%; }
.flow__node {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--sp-3); align-items: center; width: min(100%, 320px); min-height: 56px;
  padding: 8px 14px 8px 8px; border: 1.5px solid var(--border-strong); border-radius: 16px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background-color var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur);
}
.flow__branch .flow__node { flex: 1 1 0; width: auto; max-width: 260px; }
.flow__branch:has(> .flow__node:nth-child(3)) { gap: 22px; }
.flow__branch:has(> .flow__node:nth-child(3)) .flow__node {
  grid-template-columns: 1fr; justify-items: center; row-gap: 4px; padding: 10px 8px; text-align: center;
}
.flow__branch:has(> .flow__node:nth-child(3)) .flow__icon { grid-row: auto; width: 34px; height: 34px; }
.flow__branch:has(> .flow__node:nth-child(3)) .flow__node[data-alt]::after { left: -11px; }
.flow__node:hover { border-color: var(--accent); }
.flow__node:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.flow__icon {
  position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.flow__icon > svg:first-child { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.flow__label { font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1.25; }
.flow__text { font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.flow__node[data-alt]::after {
  content: 'or'; position: absolute; left: -14px; top: 50%; transform: translate(-50%, -50%);
  font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted);
}
.flow__node.is-visited { border-color: var(--accent); }
.flow__node[aria-current='step'] {
  border-color: transparent; background: var(--grad-button); color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 28px -10px rgba(91, 63, 230, 0.6);
}
.flow__node[aria-current='step'] .flow__text { color: rgba(255, 255, 255, 0.86); }
.flow__node[aria-current='step'] .flow__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* hold ring around the active node's icon */
.flow__ring {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  transform: rotate(-90deg); pointer-events: none;
}
.flow__ring circle { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }

/* edges */
.flow__edges { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.flow__edge { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 5 6; }
.flow__edge.is-travelled { stroke: var(--accent); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .flow__edge { animation: flow-dash 1.4s linear infinite; }
  .flow__edge.is-live { animation-duration: 0.6s; }
}
@keyframes flow-dash { to { stroke-dashoffset: -22; } }

/* auto-play pill + replay (inside the stage) */
.stage__auto { position: absolute; left: 50%; top: calc(633px * var(--s) + 14px); transform: translateX(-50%);
  display: flex; gap: var(--sp-2); white-space: nowrap; }
.stage__pill, .stage__replay {
  min-height: 32px; padding: 0 0.8rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: var(--fw-semibold); cursor: pointer;
}
.stage__pill[data-state='on'] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stage__pill:focus-visible, .stage__replay:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stage__replay { color: var(--accent); }
.chapter-stage .stage__auto { position: static; transform: none; justify-content: center; }
.chapter-stage .stage__pill, .chapter-stage .stage__replay { min-height: 44px; font-size: 12px; }

/* ---------------------------------------------------------- mobile: vertical stepper */
@media (max-width: 1023.98px) {
  .flow { gap: 20px; max-width: none; }
  .flow__node { width: 100%; }
  .flow__branch .flow__node { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 6px; min-height: 48px; max-width: none; }
  .flow__branch .flow__icon { display: none; }
  .flow__branch .flow__text { display: none; }
  .flow__node[data-alt]::after { display: none; }
  .flow__branch { gap: var(--sp-2); }
}