/* Onboarding wizard + DUA status page — layered on ../shared/brand.css and
   capture/styles.css. Colour comes from the brand custom properties only. */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.stepper .step-dot {
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--sandstone);
  color: var(--ash);
  font-size: .75rem;
  font-weight: 600;
}
.stepper .step-dot.active { background: var(--riverbed-slate); color: var(--bone); }
.stepper .step-dot.done   { background: var(--valid); color: var(--bone); }
.stepper .step-dot.done::before { content: "✓ "; }

.status-card {
  background: var(--sandstone);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.status-card p { margin: .25rem 0; }
.status-card:empty { display: none; }

.format-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.format-tab {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--silt);
}
.format-tab:hover:not(:disabled) { background: var(--sandstone); }
.format-tab[aria-selected="true"] {
  background: var(--riverbed-slate);
  color: var(--bone);
  border-color: var(--riverbed-slate);
}
.format-tab[aria-selected="true"]:hover:not(:disabled) { background: var(--slate-dark); }

.button-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

#csv-mapping-table select { min-width: 12rem; }