/* ==========================================================
   IROZON DESIGN SYSTEM — Process (canonical, v1)
   A compact, horizontal (or vertical) sequence of stages — "how this
   product/flow works", not a live progress bar with a percentage.
   Public API:
     <ol class="iz-process">
       <li class="iz-process__step" data-state="complete">
         <span class="iz-process__marker">1</span>
         <span class="iz-process__label">Companies</span>
         <span class="iz-process__description">Enter via import</span>
       </li>
       <li class="iz-process__connector" aria-hidden="true"></li>
       <li class="iz-process__step" data-state="current">...</li>
       ...
     </ol>
   An <ol> (ordered list), not a <div> soup — the steps are a real,
   ordered sequence, and a screen reader announcing "list, 6 items"
   plus each item's position is exactly the right semantics for free.
   `.iz-process__connector` items are aria-hidden decoration between
   steps, not counted content.

   States (data-state on .iz-process__step) are entirely optional. No
   attribute at all = neutral/explanatory (every step reads as equally
   informational — the right default for "how this works" copy, e.g.
   a dashboard flow explainer). Opt into "complete" / "current" /
   "upcoming" only for a genuine live tracker (checkout, onboarding
   progress) where one step is actually in progress right now — and
   when you do, also set aria-current="step" on that one <li> (this
   CSS reads data-state for color only; it cannot speak state to
   assistive tech on its own, the same division of labor as
   aria-selected on .iz-tab). Skip aria-current entirely for the
   neutral/explanatory case — there is no "current" step to announce.

   The marker is a plain circular slot — a step number (as text
   content) by default, or a consumer-supplied icon element. This
   package stays icon-library-agnostic, same policy as every other
   component here.
   ========================================================== */

.iz-process {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iz-process[data-orientation="vertical"] {
  flex-direction: column;
}

.iz-process__step {
  display: flex;
  flex: 1 1 96px;
  min-width: 96px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.iz-process[data-orientation="vertical"] .iz-process__step {
  flex-direction: row;
  text-align: start;
  min-width: 0;
}

.iz-process__marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-caption);
}
.iz-process__step[data-state="current"] .iz-process__marker {
  border-color: var(--color-action-primary);
  color: var(--color-action-primary);
}
.iz-process__step[data-state="complete"] .iz-process__marker {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}
.iz-process__step[data-state="upcoming"] .iz-process__marker {
  color: var(--color-text-muted);
}

.iz-process__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}
.iz-process__step[data-state="upcoming"] .iz-process__label {
  color: var(--color-text-muted);
}

.iz-process__description {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Decorative connector between two steps — a plain rule, never a
   focusable/interactive element. Horizontal by default; the vertical
   orientation narrows it to a short stem instead of spanning the row. */
.iz-process__connector {
  flex: 1 1 24px;
  align-self: center;
  block-size: 1px;
  min-inline-size: 16px;
  margin-inline: var(--space-1);
  background: var(--color-border);
}
.iz-process[data-orientation="vertical"] .iz-process__connector {
  flex: none;
  align-self: flex-start;
  inline-size: 1px;
  block-size: var(--space-4);
  margin-inline-start: 13px; /* centers under the 28px marker */
  margin-block: var(--space-1);
}