/*
 * Multi-step onboarding flow: one question per screen.
 * Used by app/views/registrations/new.html.erb + onboarding_controller.js.
 *
 * Replaces belajarbelajar-rails's course-pricing onboarding pattern with
 * a multi-step intake flow. Each step is a vertically-centered card with
 * a big question, single input, and a primary CTA. Steps fade as the
 * user advances. Enter advances. Back arrow goes back.
 */

@layer components {
  .onboarding {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    padding: var(--block-space);
  }

  /* Progress strip — thin bar + N of M counter */
  .onboarding__progress {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-bottom: var(--block-space-double);
    font-size: var(--text-small);
    color: oklch(var(--lch-gray-darker, 50% 0 0));
  }

  .onboarding__progress-bar {
    flex: 1;
    height: 4px;
    background: oklch(var(--lch-gray-lighter, 90% 0 0));
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
  }

  .onboarding__progress-bar-fill {
    height: 100%;
    background: oklch(var(--lch-green, 55% 0.15 145));
    transition: width 300ms ease;
  }

  /* Step container — centered vertically + horizontally */
  .onboarding__steps {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .onboarding__step {
    width: 100%;
    max-width: var(--content-width-sm, 42rem);
    margin: 0 auto;
    animation: onboarding-fade-in 350ms ease;
  }

  .onboarding__step[hidden] {
    display: none !important;
  }

  @keyframes onboarding-fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* The big question */
  .onboarding__question {
    font-size: var(--text-xx-large);
    font-weight: 600;
    line-height: var(--leading-snug);
    margin-bottom: var(--block-space);
    letter-spacing: var(--tracking-tight);
  }

  .onboarding__hint {
    font-size: var(--text-medium);
    color: oklch(var(--lch-gray-darker, 50% 0 0));
    margin-bottom: var(--block-space-double);
  }

  /* Large, prominent input */
  .onboarding__input {
    width: 100%;
    font-size: var(--text-x-large);
    font-family: inherit;
    padding: var(--block-space-half) 0;
    border: none;
    border-bottom: 2px solid oklch(var(--lch-gray-lighter, 90% 0 0));
    background: transparent;
    color: inherit;
    transition: border-color 200ms ease;
  }

  .onboarding__input:focus {
    outline: none;
    border-bottom-color: oklch(var(--lch-green, 55% 0.15 145));
  }

  .onboarding__input::placeholder {
    color: oklch(var(--lch-gray, 65% 0 0));
  }

  /* Tile-style radio choices — for choosing one of N */
  .onboarding__choices {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin-block: var(--block-space-double) var(--block-space);
  }

  .onboarding__choice {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-3quarter) var(--block-space);
    border: 1.5px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    background: var(--color-gray-lightest);
    cursor: pointer;
    transition: all 150ms ease;
    font-size: var(--text-medium);
  }

  .onboarding__choice:hover {
    border-color: var(--color-gray-dark);
    background: var(--color-white);
  }

  .onboarding__choice input[type="radio"],
  .onboarding__choice input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .onboarding__choice:has(input:checked) {
    border-color: var(--color-green);
    background: var(--color-green-lightest);
    color: var(--color-green-darkest);
  }

  .onboarding__choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border: 1.5px solid var(--color-gray);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-gray-darker);
    background: var(--color-white);
  }

  .onboarding__choice:has(input:checked) .onboarding__choice-key {
    border-color: var(--color-green-dark);
    background: var(--color-green);
    color: var(--color-white);
  }

  /* Step CTA row */
  .onboarding__cta {
    margin-top: var(--block-space-double);
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .onboarding__enter-hint {
    color: oklch(var(--lch-gray, 65% 0 0));
    font-size: var(--text-small);
  }

  .onboarding__enter-hint kbd {
    display: inline-block;
    padding: 0.125rem var(--inline-space-half);
    border: 1px solid oklch(var(--lch-gray-lighter, 90% 0 0));
    border-radius: var(--radius-xs, 0.125rem);
    background: var(--color-white, white);
    font-size: 0.7em;
    font-family: ui-monospace, monospace;
  }

  /* Back button — minimal, top-left */
  .onboarding__back {
    background: none;
    border: none;
    color: oklch(var(--lch-gray-darker, 50% 0 0));
    cursor: pointer;
    padding: var(--block-space-half) 0;
    font-size: var(--text-small);
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
  }

  .onboarding__back:hover {
    color: inherit;
  }

  /* Skippable steps */
  .onboarding__skip {
    background: none;
    border: none;
    color: oklch(var(--lch-gray, 65% 0 0));
    cursor: pointer;
    font-size: var(--text-small);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Mobile tweaks */
  @media (max-width: 640px) {
    .onboarding__question {
      font-size: var(--text-x-large);
    }
    .onboarding__input {
      font-size: var(--text-large);
    }
    .onboarding__step {
      padding: 0 var(--inline-space);
    }
  }
}