/* ---------- Chips + stepper ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--idle-soft); color: var(--idle); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.building { background: var(--accent-soft); color: var(--accent); }
.chip.review { background: var(--violet-soft); color: var(--violet); }
.chip.shipping { background: var(--teal-soft); color: var(--teal); }
.chip.done { background: var(--ok-soft); color: var(--ok); }
.chip.attention { background: var(--warn-soft); color: var(--warn); }
.chip.closed { background: var(--surface-2); color: var(--muted); }
.stepper { display: inline-flex; gap: 3px; align-items: center; }
.stepper i { width: 16px; height: 5px; border-radius: 3px; background: var(--rule-strong); display: block; opacity: 0.6; }
.stepper i.on { background: var(--accent); opacity: 1; }
.stepper i.now { background: var(--accent); opacity: 1; box-shadow: 0 0 0 2px var(--accent-soft); }
.stepper i.ok { background: var(--ok); opacity: 1; }
.stepper i.warn { background: var(--warn); opacity: 1; }