/* Shared stage states with a horizontal rail in the order workspace. */
.progress-steps { --steps-line: var(--input-line); --steps-paper: var(--surface); --steps-done: var(--stage-done); --steps-muted: var(--stage-muted); --steps-ink: var(--ink); list-style: none; margin: 0 0 var(--space-2); padding: 0; position: relative; }
.progress-steps--client { --steps-line: var(--client-line); --steps-paper: var(--client-background); --steps-done: var(--client-done); --steps-muted: var(--client-muted); --steps-ink: var(--client-ink); margin-top: var(--space-2); }
.progress-steps::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: var(--steps-line); }
.progress-steps__step { position: relative; display: flex; align-items: center; gap: var(--brand-icon-gap); height: var(--field-row-height); }
.progress-steps__marker { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 0; border: 1px solid var(--steps-line); background: var(--steps-paper); font-size: 10px; line-height: 1; color: var(--steps-muted); }
.progress-steps__marker svg { width: 10px; height: 10px; }
.progress-steps__label { font-size: var(--text-meta); color: var(--steps-muted); }
.progress-steps__step--complete .progress-steps__marker { background: var(--steps-done); border-color: var(--steps-done); color: var(--surface); }
.progress-steps__step--current .progress-steps__marker { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.progress-steps__step--current .progress-steps__label { color: var(--steps-ink); font-weight: 600; }

.progress-steps--app { display: flex; overflow-x: auto; overscroll-behavior-x: contain; }
.progress-steps--app::before { content: none; }
.progress-steps--app:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.progress-steps--app .progress-steps__step { flex: 1 0 calc(var(--space-12) + var(--space-2)); min-width: 0; height: auto; flex-direction: column; gap: var(--space-2); text-align: center; }
.progress-steps--app .progress-steps__step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--stage-circle-size) / 2); left: calc(50% + var(--stage-circle-size) / 2); right: calc(-50% + var(--stage-circle-size) / 2); height: 1px; background: var(--steps-line); }
.progress-steps--app .progress-steps__label { width: 100%; font-size: var(--text-tiny); line-height: var(--line-meta); overflow-wrap: anywhere; }