/* Étapes — modèle canonique ; son emploi : canon_steps.md. */

@layer components {
    .steps {
        display: grid;
        gap: var(--canon-space-2);
        margin: 0;
        padding: 0;
    }
    .step {
        display: flex;
        align-items: baseline;
        gap: var(--canon-space-3);
    }
    .step::before {
        flex: none;
        width: var(--canon-space-3);
        height: var(--canon-space-3);
    }
    .step-label {
        min-width: 0;
    }
}

@layer components {
    .step::before {
        border: 2px solid var(--canon-theme-line);
        border-radius: var(--canon-radius-pill);
    }
    .step[aria-current="step"]::before {
        border-width: calc(var(--canon-space-3) / 2);
        border-color: var(--canon-theme-pending);
    }
    .step[data-step="done"]::before {
        border-width: calc(var(--canon-space-3) / 2);
        border-color: var(--canon-theme-success);
    }
    .step[data-step="failed"]::before {
        border-width: calc(var(--canon-space-3) / 2);
        border-color: var(--canon-theme-danger);
    }
    .step[data-step="skipped"]::before {
        border-style: dashed;
    }

    .steps {
        list-style: none;
    }
    .step {
        color: var(--canon-theme-muted);
    }
    .step[aria-current="step"],
    .step[data-step="done"] {
        color: var(--canon-theme-ink);
    }
    .step[aria-current="step"],
    .step[data-step="failed"] {
        font-weight: var(--canon-weight-label);
    }
    .step[data-step="failed"] {
        color: var(--canon-theme-danger);
    }
    .step::before {
        content: "";
    }
    .step-note {
        font-size: var(--canon-size-note);
        font-weight: var(--canon-weight-body);
        color: var(--canon-theme-muted);
    }
}