@layer components {
  /* ============================================================================
   * ONBOARDING COMPONENT
   * Guided walkthrough checklist for onboarding users
   * ========================================================================= */

  .onboarding {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ============================================================================
   * HEADER
   * ========================================================================= */

  .onboarding__header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-gray-2);
  }

  .onboarding__subtitle {
    color: var(--color-gray-4);
    margin-top: var(--space-xs);
    font-size: var(--font-size-base);
  }

  .onboarding__progress {
    margin-top: var(--space-lg);
  }

  .onboarding__progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-4);
    text-align: center;
    margin: var(--space-sm) 0 0;
  }

  /* ============================================================================
   * STEPS LIST
   * ========================================================================= */

  .onboarding__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ============================================================================
   * INDIVIDUAL STEP
   * ========================================================================= */

  .onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-gray-2);
    transition: background-color var(--transition-fast);
  }

  .onboarding-step:last-child {
    border-bottom: none;
  }

  .onboarding-step:hover {
    background-color: var(--color-bg-secondary, #fafafa);
  }

  /* Completed step styling */
  .onboarding-step--completed {
    opacity: 0.8;
  }

  /* Disabled step styling */
  .onboarding-step--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .onboarding-step--disabled:hover {
    background-color: transparent;
  }

  /* ============================================================================
   * STEP MARKER (Icon/Circle)
   * ========================================================================= */

  .onboarding-step__marker {
    flex-shrink: 0;
  }

  .onboarding-step__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Incomplete step icon */
  .onboarding-step__icon--incomplete {
    border: 2px solid var(--color-gray-3);
    background-color: transparent;
  }

  /* Completed step icon */
  .onboarding-step__icon--complete {
    color: var(--color-success);
  }

  .onboarding-step--completed .onboarding-step__marker {
    color: var(--color-success);
  }

  /* ============================================================================
   * STEP CONTENT
   * ========================================================================= */

  .onboarding-step__content {
    flex: 1;
    min-width: 0;
  }

  .onboarding-step__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
  }

  .onboarding-step__description {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-4);
  }

  /* ============================================================================
   * STEP ACTION
   * ========================================================================= */

  .onboarding-step__action {
    flex-shrink: 0;
  }

  /* ============================================================================
   * PROGRESS BAR (Nested within onboarding)
   * ========================================================================= */

  .onboarding .progress-bar {
    height: 8px;
    background: var(--color-gray-2);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .onboarding .progress-bar--sm {
    height: 6px;
  }

  .onboarding .progress-bar__fill {
    height: 100%;
    background: var(--color-brand);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
  }

  /* ============================================================================
   * DARK MODE ADJUSTMENTS
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .onboarding__header {
      border-bottom-color: var(--color-gray-3);
    }

    .onboarding-step {
      border-bottom-color: var(--color-gray-3);
    }

    .onboarding-step:hover {
      background-color: var(--color-gray-1);
    }

    .onboarding-step__icon--incomplete {
      border-color: var(--color-gray-4);
    }
  }
}