/* steps.css — этапы обработки созвона «Загружено → Подготовка → Расшифровка → Разбор → Готово» и полоса хода.
   Владелец — агент `calls` (волна 1). Правила: только var(--…) токены (tests/ui/test_ui_regulation.py), docs/THEMES.md.
   Этап отличается не только цветом: номер/галочка/«!» в кружке, рамка и вес шрифта; текущий — aria-current="step". */
.steps { display: flex; flex-wrap: wrap; gap: var(--s1h) var(--s2); list-style: none; margin: 0; padding: 0;
  counter-reset: step; }
.steps li { counter-increment: step; display: inline-flex; align-items: center; gap: var(--s1h); min-height: 28px;
  padding: 2px var(--s2) 2px 3px; font-size: var(--fs-sm); color: var(--fg-muted); background: var(--surface-1);
  border: var(--border-w) solid var(--border); border-radius: var(--r-pill); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; font: var(--fw-semibold) var(--fs-xs) var(--font-data); background: var(--surface-2);
  color: var(--fg-muted); }
.steps li.done { color: var(--fg); border-color: var(--success); }
.steps li.done::before { content: "✓"; background: var(--success-soft); color: var(--success); }
.steps li.now { color: var(--fg); border-color: var(--info); background: var(--info-soft); font-weight: var(--fw-semibold); }
.steps li.now::before { background: var(--info); color: var(--on-info); }
.steps li.failed { color: var(--danger); border-color: var(--danger); background: var(--danger-soft);
  font-weight: var(--fw-semibold); }
.steps li.failed::before { content: "!"; background: var(--danger); color: var(--on-danger); }
@media (prefers-reduced-motion: no-preference) {
  .steps li.now::before { animation: pulse 1.6s ease-in-out infinite; }
}

/* полоса хода обработки: .call-progress > .meter[role=progressbar] > i (ширина — из JS) + процент */
.call-progress { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.call-progress .meter { flex: 1 1 auto; min-width: 60px; }
.call-progress .meter i { transition: width var(--dur) var(--ease); }
.call-progress .pct { flex: none; min-width: 3.5ch; text-align: right; color: var(--fg-muted); font: var(--fs-xs) var(--font-data); }
.call-step-text { color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .call-progress .meter i { transition: none; }
}