/*
 * components/stepper: the wizard steps of ui/Stepper.js. The design system has no stepper; this one is composed from
 * its tokens and state rules so it reads as part of the system:
 *   current  "you are here" in brand: a --surface-brand marker with --text-on-brand numeral (near-black on orange,
 *            the DS contrast rule outside the primary button) in a --surface-brand-subtle halo; title --text-strong
 *   done     a success check on the --status-success trio; title --text-body; the rule after it in success
 *   todo     a --border-strong ring with a --text-muted numeral; title --text-muted
 * 20px markers, --text-sm titles, --text-2xs descriptions (shown when the stepper has room), hairline connectors.
 * Reachable steps are buttons with the DS hover (a --surface-hover step, ink to --text-strong).
 */
.ae-stepper { container-type: inline-size; min-width: 0; }
.ae-stepper__list { list-style: none; display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0; }
.ae-stepper__step { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 0; min-width: 0; }
.ae-stepper__step:last-child { flex: 0 1 auto; }
.ae-stepper__step:not(:last-child)::after {
  content: ""; flex: 1 1 var(--s-4); min-width: var(--s-4); height: var(--border-width-hairline); background: var(--border-default);
}
.ae-stepper__step.is-done:not(:last-child)::after { background: var(--status-success-border); }

.ae-stepper__button {
  display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: start;
  transition: var(--transition-control);
}
button.ae-stepper__button { cursor: pointer; }
button.ae-stepper__button:hover { background: var(--surface-hover); }
button.ae-stepper__button:hover .ae-stepper__title { color: var(--text-strong); }
button.ae-stepper__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ae-stepper__marker {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; font-variant-numeric: tabular-nums;
  border: var(--border-width-hairline) solid var(--border-strong); color: var(--text-muted); background: var(--surface-card);
  transition: var(--transition-control);
}
.is-current .ae-stepper__marker {
  border-color: var(--surface-brand); background: var(--surface-brand); color: var(--text-on-brand);
  box-shadow: 0 0 0 3px var(--surface-brand-subtle); /* the 3px of the DS focus ring, as a halo */
}
.is-done .ae-stepper__marker {
  border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-fg);
}
.is-done .ae-stepper__marker .icon { stroke-width: 3; }

.ae-stepper__text { display: grid; min-width: 0; }
.ae-stepper__title {
  font: var(--type-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.is-current .ae-stepper__title { font-weight: var(--weight-semibold); color: var(--text-strong); }
.is-todo .ae-stepper__title { color: var(--text-muted); }
.ae-stepper__desc {
  display: none; font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@container (min-width: 720px) { .ae-stepper__desc { display: block; } }