/* Shared progress navigation for all makers: connectors, completion and current step. */
.steps { grid-area: steps; display: flex; align-items: center; justify-content: center; padding: 2px 8px 10px; }
.step-tab { flex: none; height: 32px; padding: 0 14px; border: 2px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; background: var(--surface2); color: var(--sub); font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; }
button.step-tab { cursor: pointer; }
button.step-tab:disabled { cursor: default; }
.step-tab .ms { font-size: 16px; font-weight: 800; }
.step-tab.done { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--step-done-text); }
.step-tab.current { background: transparent; border-color: var(--accent-hi); color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(255,122,168,.18); }
.step-link { flex: 1 1 8px; min-width: 8px; max-width: 28px; height: 2px; margin: 0 4px; border-radius: 2px; background: var(--line); }
.step-link.filled { background: var(--accent-hi); }
.step-tab.just-completed { animation: stepComplete 260ms cubic-bezier(.2,.9,.3,1.3); }
@keyframes stepComplete { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .step-tab.just-completed { animation: none; } }
@media (min-width: 720px) {
  .steps { padding: 0; }
  .step-tab { height: 34px; padding: 0 16px; }
  .step-link { flex: none; width: 20px; }
}
@media (max-width: 420px) {
  .steps { padding-left: 4px; padding-right: 4px; }
  .step-tab { height: 30px; padding: 0 7px; font-size: 12px; gap: 2px; }
  .step-tab .ms { font-size: 14px; }
  .step-link { min-width: 3px; max-width: 12px; margin: 0 1px; }
}
.step-tab .ms { flex: none; }
.step-tab:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }