/**
 * The three-step line under the title (Photo, Count, Review) and the check count once
 * known. Chrome, so it stays small and gray; only the current step is dark.
 */

.step-indicator {
  display: flex;
  gap: calc(var(--spacing-unit) * 2.5);
  list-style: none;
  margin: calc(var(--spacing-unit) * 0.5) 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.step-indicator-step {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A small numbered disc per step; the current one fills with the accent. */
.step-indicator-step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 0.7rem;
  font-weight: 600;
}

.step-indicator {
  counter-reset: step;
}

.step-indicator-step[aria-current="step"]::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

.step-indicator-step--done::before {
  content: "✓";
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.step-indicator-step[aria-current="step"] {
  color: var(--color-text);
  font-weight: 600;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 2);
  flex-wrap: wrap;
}