/* ============================================================
   Onboarding (participant self-enrollment wizard) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css. See docs/FRONTEND-ARCHITECTURE.md.

   PRE-AUTH flow rooted in <article class="app-screen onboarding"> so the
   citizen-theme palette (body.citizen-theme .app-screen) applies. The
   wizard renders one step at a time into .onboarding__content; the JS
   controller chooses structure + content only.
   ============================================================ */

@layer layout {
  .onboarding { display: grid; gap: var(--mea-space-5); }
  .onboarding__progress:empty { display: none; }
  .onboarding__content { display: grid; }

  /* Progress: a labelled track that fills left-to-right. */
  .onboarding-progress { display: grid; gap: var(--mea-space-2); }
  .onboarding-progress__track { block-size: 0.5rem; border-radius: var(--mea-radius-pill); overflow: hidden; }
  .onboarding-progress__fill { block-size: 100%; inline-size: 0; border-radius: var(--mea-radius-pill);
                               transition: inline-size var(--mea-dur-normal); }
  .onboarding-progress__label { margin: 0; text-align: center; }

  /* A single step: optional back link, then heading + body, stacked. */
  .onboarding-step { display: grid; gap: var(--mea-space-4); align-content: start; }
  .onboarding-step__back { justify-self: start; display: inline-flex; align-items: center;
                           gap: var(--mea-space-1); min-height: var(--t-target-min, 44px);
                           padding: var(--mea-space-2) var(--mea-space-2);
                           border: 0; background: transparent; cursor: pointer; }
  .onboarding-step__title { margin: 0; }
  .onboarding-step__subtitle { margin: 0; }

  /* Generic field group (citation, phone, dob, zip, password). */
  .onboarding-field { display: grid; gap: var(--mea-space-2); }
  .onboarding-field__label { margin: 0; }
  .onboarding-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                             padding: var(--mea-space-3); border-radius: var(--mea-radius-md); }

  /* Inline form error message. */
  .onboarding-error { margin: 0; }
  .onboarding-error--center { text-align: center; }
  .onboarding-error[hidden] { display: none; }

  /* Primary continue / submit action runs full width below the body. */
  .onboarding-step .btn--block { inline-size: 100%; }
  .onboarding-actions { display: grid; gap: var(--mea-space-3); }

  /* Language chooser: stacked full-width choices. */
  .onboarding-langs { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .onboarding-lang { display: flex; align-items: center; justify-content: center;
                     inline-size: 100%; min-height: 3.5rem;
                     padding: var(--mea-space-3) var(--mea-space-4);
                     border: 0; border-radius: var(--mea-radius-xl); cursor: pointer; }

  /* A panel card used for the charge, the legal notice, the bell, etc. */
  .onboarding-panel { display: grid; gap: var(--mea-space-2); justify-items: center;
                      text-align: center; padding: var(--mea-space-6) var(--mea-space-5);
                      border-radius: var(--mea-radius-2xl); }
  .onboarding-panel__icon { line-height: 1; }
  .onboarding-panel__charge { margin: 0; cursor: pointer; }
  .onboarding-panel__hint { margin: 0; }
  .onboarding-panel__meta { margin: 0; }
  .onboarding-panel__body { margin: 0; }
  .onboarding-panel__name { margin: 0; }

  /* "How MEA Works" video promo. */
  .onboarding-media { display: grid; gap: var(--mea-space-2); }
  .onboarding-media__label { margin: 0; }
  .onboarding-media__card { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3);
                            align-items: center; padding: var(--mea-space-4);
                            border-radius: var(--mea-radius-xl); cursor: pointer; }
  .onboarding-media__card--disabled { cursor: default; }
  .onboarding-media__play { display: inline-flex; align-items: center; justify-content: center;
                            inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--mea-radius-circle); }
  .onboarding-media__text { display: grid; gap: var(--mea-space-1); }
  .onboarding-media__heading, .onboarding-media__duration { margin: 0; }

  /* Evidence / bodycam buttons row. */
  .onboarding-evidence { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .onboarding-evidence:empty { display: none; }

  /* OTP boxes for the SMS verification code. */
  .onboarding-otp { display: flex; justify-content: center; gap: var(--mea-space-2);
                    margin: 0; padding: 0; }
  .onboarding-otp__box { inline-size: 2.75rem; min-height: 3.25rem; text-align: center;
                         border-radius: var(--mea-radius-md); }

  .onboarding-resend { display: grid; justify-items: center; }
  .onboarding-resend__btn { min-height: var(--t-target-min, 44px);
                            padding: var(--mea-space-2) var(--mea-space-3);
                            border: 0; background: transparent; cursor: pointer; }

  /* Camera viewfinder + captured preview share a framed box. */
  .onboarding-camera { display: grid; place-items: center; aspect-ratio: 3 / 4;
                       border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .onboarding-camera video, .onboarding-camera img { inline-size: 100%; block-size: 100%;
                                                     object-fit: cover; }
  .onboarding-retake { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mea-space-3); }

  /* Loading / processing spinner screens. */
  .onboarding-processing { display: grid; gap: var(--mea-space-4); justify-items: center;
                           text-align: center; padding: var(--mea-space-12) var(--mea-space-4); }
  .onboarding-processing__spinner { inline-size: 3rem; block-size: 3rem;
                                    border-radius: var(--mea-radius-circle); }
  .onboarding-processing__title, .onboarding-processing__sub { margin: 0; }

  /* Terminal success / invite screens. */
  .onboarding-success { display: grid; gap: var(--mea-space-3); justify-items: center;
                        text-align: center; padding: var(--mea-space-12) var(--mea-space-4); }
  .onboarding-success__icon { display: inline-flex; align-items: center; justify-content: center;
                              inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--mea-radius-circle); }
  .onboarding-success__title, .onboarding-success__sub { margin: 0; }

  /* Media overlay (video / evidence modal). */
  .onboarding-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                        padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .onboarding-overlay__panel { inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh;
                               display: grid; gap: var(--mea-space-3); align-content: start;
                               padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl);
                               overflow-y: auto; }
  .onboarding-overlay__title { margin: 0; }
  .onboarding-overlay__media { display: grid; place-items: center; inline-size: 100%;
                               border-radius: var(--mea-radius-lg); overflow: hidden; }
  .onboarding-overlay__media--unavailable { padding: var(--mea-space-8) var(--mea-space-4);
                                            text-align: center; }
  .onboarding-overlay__media video { inline-size: 100%; }
  .onboarding-overlay__media-link { display: inline-flex; align-items: center; justify-content: center;
                                    min-height: var(--t-target-min, 44px);
                                    padding: var(--mea-space-3) var(--mea-space-6);
                                    border-radius: var(--mea-radius-pill); text-decoration: none; }
  .onboarding-overlay__body { margin: 0; }
}

@layer design {
  .onboarding-progress__track { background: var(--t-bg-active); }
  .onboarding-progress__fill { background: var(--t-accent); }
  .onboarding-progress__label { font-size: var(--mea-text-xs); color: var(--t-text-muted);
                                font-weight: var(--mea-w-semibold); }

  .onboarding-step__back { color: var(--t-text-muted); font-size: var(--mea-text-sm);
                           font-weight: var(--mea-w-semibold);
                           transition: color var(--mea-dur-fast); }
  .onboarding-step__back:hover { color: var(--t-text); }
  .onboarding-step__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                            font-weight: var(--mea-w-bold); color: var(--t-text);
                            line-height: var(--mea-lh-tight); }
  .onboarding-step__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                               line-height: var(--mea-lh-normal); }

  .onboarding-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                             color: var(--t-text); }
  .onboarding-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                             border: 1.5px solid var(--t-border); font-size: var(--mea-text-md); }
  .onboarding-field__input::placeholder { color: var(--t-text-muted); }
  .onboarding-field__input:focus { outline: none; border-color: var(--t-border-focus); }

  .onboarding-error { font-size: var(--mea-text-sm); color: var(--t-error-text);
                      font-weight: var(--mea-w-semibold); }

  .onboarding-lang { background: var(--t-bg-recessed); color: var(--t-text);
                     font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                     font-weight: var(--mea-w-semibold);
                     transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .onboarding-lang:hover { background: var(--t-bg-active); }
  .onboarding-lang.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  .onboarding-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .onboarding-panel__icon { font-size: var(--mea-text-hero); }
  .onboarding-panel__charge { font-family: var(--mea-font-citizen); font-size: var(--mea-text-xl);
                              font-weight: var(--mea-w-bold); color: var(--t-accent); }
  .onboarding-panel__hint { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .onboarding-panel__meta { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .onboarding-panel__body { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                            line-height: var(--mea-lh-relaxed); }
  .onboarding-panel__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-xl);
                            font-weight: var(--mea-w-bold); color: var(--t-text); }

  .onboarding-media__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                             color: var(--t-text); }
  .onboarding-media__card { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                            box-shadow: var(--mea-shadow-sm); transition: box-shadow var(--mea-dur-fast); }
  .onboarding-media__card:hover { box-shadow: var(--mea-shadow-md); }
  .onboarding-media__card--disabled, .onboarding-media__card--disabled:hover {
    box-shadow: none; opacity: .7; }
  .onboarding-media__play { background: var(--t-accent); color: var(--t-accent-text);
                            font-size: var(--mea-text-md); }
  .onboarding-media__heading { font-size: var(--mea-text-base); font-weight: var(--mea-w-semibold);
                               color: var(--t-text); }
  .onboarding-media__duration { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .onboarding-otp__box { background: var(--t-bg-elevated); color: var(--t-text);
                         border: 1.5px solid var(--t-border);
                         font-size: var(--mea-text-xl); font-weight: var(--mea-w-bold); }
  .onboarding-otp__box:focus { outline: none; border-color: var(--t-border-focus); }

  .onboarding-resend__btn { color: var(--t-text-muted); font-size: var(--mea-text-sm);
                            font-weight: var(--mea-w-semibold);
                            transition: color var(--mea-dur-fast); }
  .onboarding-resend__btn:disabled { color: var(--t-text-muted); cursor: default; }
  .onboarding-resend__btn.cit-resend--active { color: var(--t-link); }
  .onboarding-resend__btn.cit-resend--active:hover { color: var(--t-link-hover); }

  .onboarding-camera { background: var(--t-bg-recessed); border: 1px solid var(--t-card-border); }

  .onboarding-processing__spinner { border: 3px solid var(--t-bg-active);
                                    border-block-start-color: var(--t-accent);
                                    animation: onboarding-spin var(--mea-dur-slow) linear infinite; }
  .onboarding-processing__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                                  font-weight: var(--mea-w-bold); color: var(--t-text); }
  .onboarding-processing__sub { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .onboarding-success__icon { background: var(--t-success); color: var(--t-accent-text);
                              font-size: var(--mea-text-3xl); font-weight: var(--mea-w-bold); }
  .onboarding-success__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                               font-weight: var(--mea-w-bold); color: var(--t-text); }
  .onboarding-success__sub { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .onboarding-overlay { background: var(--t-bg-active); }
  .onboarding-overlay__panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                               box-shadow: var(--mea-shadow-lg); }
  .onboarding-overlay__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                               font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .onboarding-overlay__media { background: var(--t-bg-recessed); }
  .onboarding-overlay__media--unavailable { color: var(--t-text-muted); font-size: var(--mea-text-md); }
  .onboarding-overlay__media-link { background: var(--t-accent); color: var(--t-accent-text);
                                    font-family: var(--mea-font-citizen); font-weight: var(--mea-w-bold); }
  .onboarding-overlay__media-link:hover { background: var(--t-accent-hover); }
  .onboarding-overlay__body { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                              line-height: var(--mea-lh-relaxed); }

  @keyframes onboarding-spin { to { transform: rotate(360deg); } }
}