/* Onboarding: the step progress at the top of every step and the choice
 * pills of the about step. Everything sits on paper inside the stage window.
 * ---------------------------------------------------------------------- */

@layer modules {
  .onboarding-progress {
    counter-reset: step;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .onboarding-progress__step {
    align-items: center;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: 99rem;
    color: var(--color-ink);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.45rem;
    padding: 0.35rem 0.875rem 0.35rem 0.35rem;
  }

  .onboarding-progress__link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 0.45rem;
    text-decoration: none;
  }

  .onboarding-progress__link:hover .onboarding-progress__label {
    text-decoration: underline;
  }

  .onboarding-progress__index {
    align-items: center;
    background-color: var(--color-surface-2);
    border-radius: 50%;
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem;
  }

  .onboarding-progress__step--current {
    background-color: var(--color-accent);
    color: var(--color-ink-inverted, #fff);
  }

  .onboarding-progress__step--current .onboarding-progress__index {
    background-color: var(--color-sun);
    color: var(--color-ink);
  }

  .onboarding-progress__step--done .onboarding-progress__index {
    background-color: var(--color-sun);
  }

  .onboarding-progress__step--todo {
    border-color: var(--color-border);
    color: var(--color-ink-medium);
  }

  .onboarding-progress__label {
    font-weight: 600;
  }

  .onboarding-choices {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .onboarding-choices > legend {
    font-weight: 600;
    margin-block-end: var(--space-xxs);
    padding: 0;
  }

  .onboarding-choice {
    align-items: center;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: 99rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
  }

  .onboarding-choice:hover {
    background-color: var(--color-hover);
  }

  .onboarding-choice:has(input:checked) {
    background-color: var(--color-sun);
  }

  .onboarding-choice input {
    accent-color: var(--color-ink);
    margin: 0;
  }

  .product-card__select {
    cursor: pointer;
    font-weight: 600;
    margin-block-start: auto;
    padding-block-start: var(--space-s);
  }

  .product-card__select input {
    accent-color: var(--color-accent);
  }
}