.onboarding-banner {
  position: sticky;
  top: 0;
  z-index: var(--um-z-sticky);
  padding: var(--um-space-3) var(--um-space-6);
  background: var(--um-color-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--um-color-bg-surface) 18%, transparent);
}

.onboarding-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--um-space-4);
  width: min(100%, 72rem);
  margin: 0 auto;
}

.onboarding-banner__progress {
  display: flex;
  align-items: center;
  gap: var(--um-space-3);
}

.onboarding-banner__label,
.onboarding-banner__pct,
.onboarding-banner__next {
  color: var(--um-color-bg-surface);
}

.onboarding-banner__label,
.onboarding-banner__next {
  font-size: var(--um-text-small);
}

.onboarding-banner__pct {
  font-size: var(--um-text-caption);
  font-weight: var(--um-weight-bold);
}

.onboarding-banner__bar {
  width: 7.5rem;
  height: 0.375rem;
  border-radius: var(--um-radius-full);
  overflow: hidden;
  background: color-mix(in srgb, var(--um-color-bg-surface) 22%, transparent);
}

.onboarding-banner__fill {
  height: 100%;
  background: var(--um-color-accent);
}

.onboarding-banner__next {
  flex: 1;
}

.onboarding-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--um-space-2) var(--um-space-4);
  border-radius: var(--um-radius-full);
  background: var(--um-color-accent);
  color: var(--um-color-bg-surface);
  text-decoration: none;
  font-weight: var(--um-weight-semibold);
}

.onboarding-banner__cta:hover {
  color: var(--um-color-bg-surface);
  background: var(--um-color-accent-light);
}

.onboarding-banner__dismiss {
  border: none;
  background: transparent;
  color: var(--um-color-bg-surface);
  font-size: var(--um-text-h3);
  line-height: 1;
  cursor: pointer;
}

.onboarding-page {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100%;
  background: var(--um-color-bg-page);
  border: 1px solid var(--um-color-border-light);
  border-radius: var(--um-radius-lg);
  overflow: hidden;
}

.onboarding-sidebar {
  padding: var(--um-space-8) var(--um-space-6);
  background: color-mix(in srgb, var(--um-color-primary) 3%, var(--um-color-bg-surface));
  border-right: 1px solid var(--um-color-border-light);
}

.onboarding-sidebar__header {
  margin-bottom: var(--um-space-8);
}

.onboarding-sidebar__header p {
  margin: var(--um-space-2) 0 0;
}

.onboarding-step-list {
  display: grid;
  gap: var(--um-space-3);
}

.onboarding-step {
  display: flex;
  gap: var(--um-space-3);
  align-items: flex-start;
  padding: var(--um-space-3);
  border-radius: var(--um-radius-md);
  background: var(--um-color-bg-surface);
  border: 1px solid var(--um-color-border-light);
}

.onboarding-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--um-radius-full);
  font-size: var(--um-text-caption);
  font-weight: var(--um-weight-bold);
}

.onboarding-step--complete .onboarding-step__icon {
  background: var(--um-color-success);
  color: var(--um-color-bg-surface);
}

.onboarding-step--current .onboarding-step__icon {
  background: var(--um-color-primary);
  color: var(--um-color-bg-surface);
}

.onboarding-step--locked .onboarding-step__icon {
  background: var(--um-color-border-light);
  color: var(--um-color-text-tertiary);
}

.onboarding-step__body {
  display: grid;
  gap: var(--um-space-1);
}

.onboarding-step__label {
  font-weight: var(--um-weight-semibold);
}

.onboarding-step__link,
.onboarding-step__meta {
  font-size: var(--um-text-small);
}

.onboarding-stage-shell {
  padding: var(--um-space-8);
  display: grid;
  gap: var(--um-space-6);
}

.onboarding-stage-header {
  display: grid;
  gap: var(--um-space-3);
}

.onboarding-stage-header p {
  margin: 0;
}

.onboarding-stage-card {
  padding: var(--um-space-6);
  border-radius: var(--um-radius-lg);
  border: 1px solid var(--um-color-border);
  background: var(--um-color-bg-surface);
  box-shadow: var(--um-shadow-card);
}

.onboarding-stage-card--summary {
  display: grid;
  gap: var(--um-space-4);
}

.onboarding-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--um-space-4);
  padding-bottom: var(--um-space-4);
  border-bottom: 1px solid var(--um-color-border-light);
}

.onboarding-summary-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.onboarding-summary-row__locked {
  color: var(--um-color-text-tertiary);
  font-size: var(--um-text-small);
}

.onboarding-stage-grid {
  display: grid;
  gap: var(--um-space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-stage-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--um-space-4);
  margin-bottom: var(--um-space-4);
}

.onboarding-admin-list {
  display: grid;
  gap: var(--um-space-3);
  margin-bottom: var(--um-space-6);
}

.onboarding-admin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--um-space-4);
  padding: var(--um-space-4);
  border-radius: var(--um-radius-md);
  background: color-mix(in srgb, var(--um-color-primary) 2%, var(--um-color-bg-surface));
  border: 1px solid var(--um-color-border-light);
}

.onboarding-matching-grid {
  display: grid;
  gap: var(--um-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-matching-card {
  display: grid;
  gap: var(--um-space-2);
  padding: var(--um-space-4);
  border-radius: var(--um-radius-md);
  background: color-mix(in srgb, var(--um-color-primary) 2%, var(--um-color-bg-surface));
  border: 1px solid var(--um-color-border-light);
}

.onboarding-roster {
  overflow-x: auto;
}

.onboarding-roster__table {
  width: 100%;
  border-collapse: collapse;
}

.onboarding-roster__table th,
.onboarding-roster__table td {
  padding: var(--um-space-3);
  border-bottom: 1px solid var(--um-color-border-light);
  text-align: left;
}

.help-tip {
  display: inline-flex;
  position: relative;
  margin-left: var(--um-space-1);
}

.help-tip__trigger {
  border: none;
  background: transparent;
  color: var(--um-color-text-secondary);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
}

.help-tip__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.help-tip__popover {
  position: absolute;
  top: calc(100% + var(--um-space-2));
  left: 0;
  width: min(18rem, 70vw);
  padding: var(--um-space-4);
  border-radius: var(--um-radius-md);
  border: 1px solid var(--um-color-border);
  background: var(--um-color-bg-elevated);
  box-shadow: var(--um-shadow-dropdown);
  z-index: var(--um-z-dropdown);
}

.help-tip__what,
.help-tip__why,
.help-tip__example {
  margin: 0;
  font-size: var(--um-text-small);
}

.help-tip__why,
.help-tip__example {
  margin-top: var(--um-space-2);
  color: var(--um-color-text-secondary);
}

.um-form-error {
  margin-top: var(--um-space-4);
  padding: var(--um-space-3) var(--um-space-4);
  border-radius: var(--um-radius-md);
  background: color-mix(in srgb, var(--um-color-error) 10%, var(--um-color-bg-surface));
  color: var(--um-color-error);
}

.um-btn-secondary--small {
  padding: var(--um-space-2) var(--um-space-3);
  font-size: var(--um-text-small);
}

@media (max-width: 960px) {
  .onboarding-page {
    grid-template-columns: 1fr;
  }

  .onboarding-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--um-color-border-light);
  }

  .onboarding-stage-grid,
  .onboarding-matching-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-banner__inner,
  .onboarding-summary-row,
  .onboarding-stage-card__header,
  .onboarding-admin-card {
    flex-direction: column;
    align-items: flex-start;
  }
}