/* =============================================================================
   STATUS TIMELINE
   Универсальный пошаговый таймлайн в chip-формате.
   Используется через <x-status-timeline :steps="$steps" />.
   Все цвета — из tokens.css; dark-mode — автоматически через семантические токены.
   Внешнюю карточку/секцию даёт вызывающая страница (компонент без обёртки).
   ============================================================================= */

.sts-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.sts-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    white-space: nowrap;
}

.sts-chip--done {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.sts-chip--current {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.sts-chip--pending {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.sts-chip--rejected {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.sts-arrow {
    color: var(--color-text-subtle);
    font-size: var(--font-size-base);
    user-select: none;
}