/* ============================================================
   app.css — общий прикладной слой поверх design-system.css.
   Дополнительные базовые компоненты, не привязанные к одному экрану.
   Без CDN, токены берутся из design-system.css. Не дублирует и не
   переопределяет селекторы модульных CSS (upload.css / previews.css).
   ============================================================ */

/* ---------- run-stepper (прогресс прогона как в demo_v3) ----------
   Самостоятельный, ни с чем не конфликтующий неймспейс `.stepper`.
   Разметка:
   <ol class="stepper">
     <li class="stepper-step done"><span class="stepper-mark"></span>
         <span class="stepper-label">Ingest</span></li>
     <li class="stepper-step active">…</li>
     <li class="stepper-step">…</li>
   </ol>
*/
.stepper{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.stepper-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;color:var(--text-mute);font-size:12px;text-align:center}
/* соединительная линия между шагами */
.stepper-step::before{content:'';position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0}
.stepper-step:first-child::before{display:none}
.stepper-step.done::before,.stepper-step.active::before{background:var(--primary)}
.stepper-mark{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:11px;color:var(--text-mute);transition:border-color .2s,background .2s,color .2s}
.stepper-step.active .stepper-mark{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.stepper-step.active .stepper-mark::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);animation:spin .8s linear infinite}
.stepper-step.done .stepper-mark{border-color:var(--success);background:var(--success);color:white}
.stepper-step.fail .stepper-mark{border-color:var(--danger);background:var(--danger);color:white}
.stepper-step.active{color:var(--text)}
.stepper-step.done{color:var(--text-sec)}
.stepper-step.fail{color:var(--danger)}
.stepper-label{font-weight:500;line-height:1.3;max-width:110px}
.stepper-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-mute);letter-spacing:.03em}

/* ---------- разделитель / служебные утилиты ---------- */
.hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.mt-8{margin-top:8px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-24{margin-bottom:24px}
.text-center{text-align:center}
.w-full{width:100%}
.gap-8{gap:8px}.gap-12{gap:12px}

/* ---------- адаптив прикладного слоя ---------- */
@media (max-width:640px){
  .stepper{flex-wrap:wrap;gap:14px 0}
  .stepper-step{flex:0 0 33.333%}
  .stepper-step::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}