/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — Upload package: processing screen (step 4)
   Covers: icon wrap, progress bar, stage list.
   Fonts + variables → tokens.css  |  od-spin / od-pulse → upload-hero.css
   ────────────────────────────────────────────────────────────────────────── */

@layer components {

/* ── PROCESSING WRAP ────────────────────────────────────────────────────── */
.processing-wrap { text-align: center; padding: 8px 0 4px; }

/* ── STATUS ICON ────────────────────────────────────────────────────────── */
.processing-icon-wrap {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid rgba(59,91,219,.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; color: var(--accent);
  box-shadow: 0 0 24px rgba(59,91,219,.2);

  &.spinning svg { animation: od-spin 1.2s linear infinite; }
  &.done {
    background: var(--success-dim); border-color: rgba(34,197,94,.3);
    color: var(--success); box-shadow: 0 0 24px rgba(34,197,94,.15);
  }
}

/* ── TITLE / SUB ────────────────────────────────────────────────────────── */
.processing-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: -.3px; }
.processing-sub   { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }

/* ── PROGRESS BAR ───────────────────────────────────────────────────────── */
.progress-track { height: 5px; border-radius: 3px; background: var(--bg-hover); margin: 22px 0 6px; overflow: hidden; }
.progress-fill  { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-hover), var(--accent), #7b96ff); transition: width .5s ease; }
.progress-pct   { font-size: var(--fs-xs); font-family: var(--mono); color: var(--text-muted); text-align: right; }

/* ── STAGE LIST ─────────────────────────────────────────────────────────── */
.processing-steps { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }

.proc-step {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); color: var(--text-muted); transition: color .2s;

  &.active { color: var(--text-primary); }
  &.done   { color: var(--success); }

  &.active .proc-step-dot { background: var(--accent); animation: od-pulse 1s ease-in-out infinite; }
  &.done   .proc-step-dot { background: var(--success); }
}

.proc-step-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border-light); transition: background .2s; }

} /* @layer components */