/* FA-17 Call Flow Guide (board 45). [data-look="v2"] only. See
   frontend/js/callFlowGuideV2.js for the JS half (relocating the existing v1
   flow-picker/flow-label/progress-line/steps-list into the pane below —
   nothing here re-derives step/progress state). With the switch OFF this
   file has no effect and #callflow-v1 renders exactly as it does today.

   #callflow-steps-list's generated cards already pick up the v2 palette for
   free: their inline styles reference --surface-2/--line, which tokens.css
   remaps to --field-raised/--field-border under [data-look="v2"] (same
   "no styling needed" note as jobsSearch.css/inspection.css) — only the new
   progress-bar chrome below is genuinely new. */

[data-look="v2"] #scr-callflow > #callflow-v1 {
  display: none;
}

[data-look="v2"] #callflow-flow-picker button:last-child { margin-bottom: 0; }

[data-look="v2"] .callflowguidev2-progress-card {
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  padding: var(--field-space-3);
  margin-bottom: var(--field-space-3);
}
[data-look="v2"] .callflowguidev2-progress-card #callflow-flow-label {
  font: var(--field-text-card-heading);
  color: var(--field-text-primary);
  margin: 0;
}
[data-look="v2"] .callflowguidev2-progress-card #callflow-progress-line {
  font: var(--field-text-meta);
  color: var(--field-text-secondary);
  margin: 4px 0 0;
}
[data-look="v2"] .callflowguidev2-progress-track {
  height: 8px;
  background: var(--field-border);
  border-radius: var(--field-radius-pill);
  overflow: hidden;
  margin: var(--field-space-2) 0;
}
[data-look="v2"] .callflowguidev2-progress-fill {
  height: 100%;
  background: var(--field-action-fill);
  border-radius: var(--field-radius-pill);
  transition: width 160ms ease-out;
}

[data-look="v2"] #callflow-steps-list .callflow-toggle.picked { border-color: var(--field-action-fill) !important; }