/**
 * Steps
 * =====
 * Live, in-order progress list for a running operation (deposit, scan,
 * withdraw, reclaim). Each step is a dot indicator + label + optional
 * detail (timing / signature). Built entirely from design tokens and the
 * status.css dots — no per-page inline styling.
 */

.steps {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

/* Hidden until the first step is added. */
.steps:empty {
    display: none;
}

.step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    transition: color var(--transition-base);
}

.step-dot {
    flex: 0 0 auto;
}

.step-label {
    flex: 1 1 auto;
}

.step-detail {
    flex: 0 0 auto;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Active + done steps read in primary text; a failed step reads in error. */
.step.is-active .step-label,
.step.is-done .step-label { color: var(--color-text-primary); }
.step.is-error .step-label { color: var(--color-error); }
.step.is-error .step-detail { color: var(--color-error); }

/* Dot colours per state — base .dot (size + shape) lives in status.css.
   Pending is muted, active is the brand purple (paired with .dot-pulse),
   done reuses .dot-success (green), error reuses .dot-error (red). */
.step-dot.is-pending { background: var(--color-text-muted); }
.step-dot.is-active { background: var(--color-primary); }