/* wizard-steps.css — pattern: multi-step flow indicator.
   Aria contract: <ol aria-label="Steps"> with aria-current="step" on the
   active step, aria-disabled="true" on locked future steps.
   See FSE_UI.md → Wizard Steps. */

.biq-steps {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0 0 var(--biq-space-5) 0;
    padding: 0;
    counter-reset: biq-step;
    gap: var(--biq-space-1);
}

.biq-steps__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: var(--biq-space-3);
    padding: var(--biq-space-3) var(--biq-space-3);
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-border);
    border-radius: var(--biq-radius-md);
    counter-increment: biq-step;
    min-height: var(--biq-touch-target);
}

.biq-steps__item::before {
    content: counter(biq-step);
    flex: 0 0 auto;
    width: var(--biq-space-5);
    height: var(--biq-space-5);
    display: inline-grid;
    place-items: center;
    background: var(--biq-color-surface-sunk);
    color: var(--biq-color-text-secondary);
    border-radius: var(--biq-radius-pill);
    font-size: var(--biq-fs-xs);
    font-weight: var(--biq-fw-semibold);
}

.biq-steps__item--complete::before {
    content: "✓";
    background: var(--biq-color-success);
    color: var(--biq-color-action-on);
}

.biq-steps__item[aria-current="step"] {
    border-color: var(--biq-color-action);
    background: var(--biq-color-action-soft);
}

.biq-steps__item[aria-current="step"]::before {
    background: var(--biq-color-action);
    color: var(--biq-color-action-on);
}

.biq-steps__item[aria-disabled="true"] {
    opacity: 0.55;
    background: var(--biq-color-surface-sunk);
}

.biq-steps__label {
    font-size: var(--biq-fs-sm);
    font-weight: var(--biq-fw-medium);
    color: var(--biq-color-text-primary);
    line-height: var(--biq-lh-snug);
}

.biq-steps__sublabel {
    display: block;
    font-size: var(--biq-fs-xs);
    color: var(--biq-color-text-muted);
    font-weight: var(--biq-fw-regular);
}

@media (max-width: 720px) {
    .biq-steps { flex-direction: column; }
}