Step bar

Step bar

StepBarHandler · #step-bar · handlers/stepbar/step-bar.css

Top-center card. Phase progress, phase chip, step counter, Space Grotesk instruction (v1 chrome — 22 px / 1.3, instruction-dominant), optional Continue / Unpause / Restart action. Always visible during an investigation.

Observation Step 3 of 8
Watch the iron filings align with the field lines.
Default — observation, no action
Observation Step 5 of 8
When you are done observing, continue to the next step.
With Continue CTA — ui: button
Observation Step 4 of 6
Take a moment to record your readings before resuming.
Unpause variant — paused_reading
Action Step 3 of 3 Completed!
Great work — moving to the next phase.
Step-advance flash — green "Completed!" overwrites the header