/* Onboarding / welcome (issue #361).

   Layout chrome for the /welcome onboarding screen — copied faithfully
   from the legacy :3000 welcome (welcome-page.tsx; not degraded by the
   strip). One scrolling screen with two phases:

     - .welcome__name     — the "What should we call you?" name step.
     - .welcome__discover  — the "What do you want to cook?" discover step.

   The discover step REUSES the Explore surface: the search field, chip
   rail, and masonry are all .recipes-index__* / .recipes-grid--* classes
   from recipes-index.css (the .welcome__browse wrapper carries the
   `recipes-index` class so the container-query masonry context applies),
   and the import block reuses the .paste-form / .import-status blocks
   from paste-form.css. This file only adds the welcome-specific framing:
   the centered hero, the name step, the video-import divider, and the
   skip links.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {

  /* Page root — a single centered column. The app shell (sidebar +
     tabbar) stays; onboarding is an in-app surface, not a bare auth
     shell. The column is centered and capped at the wide content tier so
     the masonry has room while the hero/name copy stays readable. */
  .welcome {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-block: var(--space-10) var(--space-8);
  }

  /* ==============================================
     NAME STEP — "What should we call you?"
     Centered Fraunces heading + body + a single name field with an
     inline Continue, then a quieter Skip. Mirrors the legacy max-w-xs
     name form.
     ============================================== */
  .welcome__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block-start: var(--space-8);
  }

  .welcome__name-form {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    max-width: 22rem;
    margin-block-start: var(--space-6);
  }

  .welcome__name-input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--control-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--md-border);
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--md-on-surface);
    transition:
      border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      box-shadow var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }

  .welcome__name-input::placeholder {
    color: var(--md-on-surface-variant);
  }

  .welcome__name-input:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: var(--focus-ring);
  }

  .welcome__name-submit {
    flex: 0 0 auto;
    height: var(--control-h);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }

  /* state-layer overlay reads as a darken on the tomato surface (same
     override the signin + paste submits use). */
  .welcome__name-submit.state-layer::after {
    background: var(--md-on-surface);
  }

  .welcome__name-submit:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .welcome__name-error {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--md-error);
  }

  .welcome__skip-name-form {
    margin-block-start: var(--space-3);
  }

  .welcome__skip-name {
    border: 0;
    background: none;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    cursor: pointer;
  }

  .welcome__skip-name:hover {
    color: var(--md-on-surface);
    text-decoration: underline;
  }

  /* ==============================================
     DISCOVER STEP — "What do you want to cook?"
     ============================================== */

  /* Hero — centered Fraunces heading + one calm body line. */
  .welcome__hero {
    text-align: center;
    margin-block-end: var(--space-8);
  }

  /* Shared step heading + lede (name + discover both use these). */
  .welcome__title {
    margin: 0;
    font-family: var(--font-heading);
    /* Fraunces 600 + -0.02em tracking — the canonical heading per the
       design bible (ch.1) and matching the signin / home headings, not
       the heavier 700 this carried at port time. Endpoints are the
       --text-3xl..--text-4xl tokens (the prior raw rem literals were
       already those exact values), so the clamp now rides the token
       scale like the home hero. */
    font-weight: var(--weight-semibold);
    font-size: clamp(var(--text-3xl), 4.4vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--md-on-surface);
    text-wrap: balance;
  }

  .welcome__lede {
    margin: var(--space-3) auto 0;
    max-width: 32rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--md-on-surface-variant);
  }

  /* Browse — the reused Explore surface. .welcome__browse also carries
     the `recipes-index` class in the markup, which supplies the
     container-query context (container-type: inline-size) that drives the
     masonry column flips. This wrapper just centers it at the legacy
     max-w-3xl-ish width so the discovery feed reads as the focal block of
     onboarding rather than a full-bleed grid. */
  .welcome__browse {
    width: 100%;
    max-width: 48rem; /* legacy max-w-3xl = 768px */
    margin-inline: auto;
  }

  /* ==============================================
     "or import from video" divider
     A centered label flanked by rules, mirroring the legacy VideoCamera
     divider between the browse feed and the paste form.
     ============================================== */
  .welcome__divider {
    width: 100%;
    max-width: 48rem;
    margin: var(--space-10) auto 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--md-on-surface-variant);
  }

  .welcome__divider::before,
  .welcome__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--md-border);
  }

  .welcome__divider-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  .welcome__divider-label .icon {
    width: 18px;
    height: 18px;
  }

  /* ==============================================
     Import block (reused paste form + import status)
     ============================================== */
  .welcome__import {
    width: 100%;
    max-width: 32rem; /* legacy max-w-md = 448px */
    margin: var(--space-6) auto 0;
  }

  /* ==============================================
     Skip for now -> /recipes
     ============================================== */
  .welcome__skip {
    margin-block-start: var(--space-10);
    text-align: center;
  }

  .welcome__skip-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }

  .welcome__skip-link:hover {
    color: var(--md-on-surface);
  }

  @media (max-width: 640px) {
    .welcome {
      padding-block: var(--space-8) var(--space-6);
    }

    .welcome__name-form {
      flex-direction: column;
    }

    .welcome__name-submit {
      width: 100%;
    }
  }
}