/**
 * Prompt 51 — Commercial Customer Onboarding's own small amount of
 * layout the shared Design System has no reason to define (a stepper,
 * a checkbox-card product picker, a checklist) — every color/spacing/
 * radius/font value below is one of packages/design-system/src/tokens.css's
 * existing tokens; no new palette is invented here (mirrors
 * apps/portal/public/styles.css's own "Portal-specific layout only"
 * convention).
 */

.onboarding-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--senviq-space-6);
  gap: var(--senviq-space-2);
  flex-wrap: wrap;
}

.onboarding-stepper__step {
  flex: 1;
  min-width: 100px;
  text-align: center;
  font-size: var(--senviq-fs-small);
  padding-bottom: var(--senviq-space-2);
  border-bottom: 3px solid var(--senviq-border);
  color: var(--senviq-muted);
}

.onboarding-stepper__step--done {
  border-bottom-color: var(--senviq-success);
  color: var(--senviq-success);
}

.onboarding-stepper__step--active {
  border-bottom-color: var(--senviq-blue);
  color: var(--senviq-navy);
  font-weight: var(--senviq-fw-medium);
}

.onboarding-actions {
  display: flex;
  gap: var(--senviq-space-3);
  margin-top: var(--senviq-space-5);
  flex-wrap: wrap;
}

.onboarding-product-option {
  display: flex;
  gap: var(--senviq-space-3);
  align-items: flex-start;
  padding: var(--senviq-space-4);
  border: 1px solid var(--senviq-border);
  border-radius: var(--senviq-radius-md);
  margin-bottom: var(--senviq-space-3);
  cursor: pointer;
}

.onboarding-product-option:has(input:checked) {
  border-color: var(--senviq-blue);
  background: var(--senviq-blue-tint);
}

.onboarding-product-option input {
  margin-top: 0.2rem;
}

.onboarding-checklist {
  list-style: none;
  padding: 0;
  margin: var(--senviq-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--senviq-space-2);
}

.onboarding-checklist li {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-2);
  color: var(--senviq-navy);
  font-size: var(--senviq-fs-body);
}

@media (max-width: 480px) {
  .onboarding-stepper__step {
    font-size: var(--senviq-fs-caption);
    min-width: 72px;
  }
}