/* ============================================================
   Signup intake funnel — `/signup/` page-specific layout chrome.
   ============================================================
   **Re-cut by pre-Batch-7 update SC-1 (2026-08-21)** against
   `couple-website-markup/intake.jsx`. 2.5 shipped a simplified shell on
   purpose ("the frozen acceptance bar for this batch is the real funnel's
   data contract, not pixel-matching a React prototype"); SC-1 closes that
   gap on the owner's direction, at the decisions recorded in
   `docs/PRE_BATCH_7_UPDATES.md` § "SC-1 scope":

     D1  the design's page shell — nav + footer (`layout/base`), the same
         shell `/signup/know-you` uses, replacing the wordmark-only
         `layout/auth` interstitial.
     D2  `intake-input--underline` on every field, the design's own variant.
     D3  **selects and the date field stay NATIVE** — the recorded
         `styles.css` decision ("v3 deliberately ships a NATIVE <select> ...
         on /signup (2.5) and /profile (5.1) alike") stands; the mock's
         custom listbox/date-picker widgets are NOT built.
     D7  the age range is the design's AgeRange *look* over the two native
         inputs — the same rail/fill/overlay recipe `/profile` ports.
     D8  the actions rail with the design's arrow glyphs.

   `intake.jsx`'s own class names are used deliberately — `.intake-welcome`,
   `.intake-stepper-strip`, `.intake-body`, `.intake-actions`,
   `.intake-actions-inner`, `.intake-grid-2` — because styles.css ALREADY
   carries their full responsive gutter ladder (ported at S2/S3 for a page
   that did not exist yet). This file supplies the base rules that ladder
   needs (Lesson 2: every ported class needs a base rule v3 loads), and
   nothing else.

   `.btn-pill`, `.intake-input`, `.intake-chip` (and its selected state),
   `.intake-range`, `.field-error`, `.eyebrow`, `.cta-link`,
   `.intake-back-link`, `.intake-stepper-numbered`, `.intake-step-pill`,
   `.intake-code-box`, `.h1-hero--on-white`, `.grad-gold`, `.measure-intro`,
   `.h3-eyebrow` all live in styles.css and are used as-is.
   ============================================================ */

/* The page wrapper. Deliberately NOT `.intake-page` — see the note in
   templates/pages/signup.php. Sections below carry the design's own
   1440/96 shell, matching `.ky-shell` on the funnel's next step. */
.su-page { background: var(--white); }

/* === Step 0 — the welcome hero (D4) ======================================= */
.intake-welcome {
  padding: var(--rhythm-hero-top) 96px var(--rhythm-80);
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}
.intake-welcome[hidden] { display: none; }
.intake-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 980px;
}
.intake-welcome-start {
  margin-top: var(--rhythm-80);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.intake-welcome-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}
.su-agree {
  font: 500 italic 14px/1.5 var(--font-body);
  color: var(--ink-400);
  margin: -12px 0 0;
}
.su-agree a { color: var(--couple-purple); text-decoration: underline; text-underline-offset: 2px; }
/* The mock's "or" is centred inside the CTA column's own 240px measure. */
.su-or {
  font: 500 italic 16px/1 var(--font-body);
  color: var(--ink-400);
  min-width: 240px;
  text-align: center;
}
.su-match-me { text-transform: uppercase; letter-spacing: 1px; }

/* === The sticky stepper strip (steps 1–4) ================================
   `top` is v3's nav geometry, NOT the mock's: `site.css` fixes `.nav-bar` at
   top 16 with height 64, so the nav's bottom edge is 80 and 92 clears it by
   12 — the identical sum `.faq-rail` already uses, at the same z-index 15
   (the nav-layering ruling: below the nav's 20). `margin-top` matches `top`,
   so the strip's resting position IS its stuck position and it never jumps.
   The two overrides below re-state that against the ported `top: 80px`
   media rules in styles.css, which were cut for the mock's own taller nav. */
.intake-stepper-strip {
  padding: 32px 96px 8px;
  max-width: 1440px;
  margin: 92px auto 0;
  position: sticky;
  top: 92px;
  z-index: 15;
  background: var(--white);
  box-sizing: border-box;
}
.intake-stepper-strip[hidden] { display: none; }
.intake-stepper-strip-inner { padding-bottom: 16px; }

/* The numbered stepper itself. styles.css carries only its <=640 label-hiding
   rules (`.intake-step-pill span:last-child`, `.intake-stepper-numbered
   .intake-step-pill[data-active]`) — the base geometry lived inline in the
   JSX and had no v3 home until now (Lesson 2). Values are `Stepper`'s own. */
.intake-stepper-numbered {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.intake-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  background: transparent;
  border: 0;
  opacity: 0.55;
  font: 500 14px/1 var(--font-display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.intake-step-pill[data-su-reached] { opacity: 1; color: var(--fg-heading); }
.intake-step-pill[data-active] { color: var(--couple-purple); font: var(--type-eyebrow); }
.intake-step-connector {
  flex: 1;
  min-width: 24px;
  height: 1.5px;
  background: var(--lavender-border);
  margin: 0 4px;
  transition: background 200ms ease;
}
.intake-step-connector[data-su-done] { background: var(--couple-purple); }
.su-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--white);
  border: var(--border-hairline) solid var(--ink-200);
  color: var(--ink-400);
  margin-right: 12px;
  font: var(--type-eyebrow);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* Reached = the current step or any step behind it, which is what
   `signup.js` marks; the mock fills both the same way. */
.intake-step-pill[data-su-reached] .su-step-num {
  background: var(--couple-purple);
  border-color: var(--couple-purple);
  color: var(--white);
}
.intake-step-pill[data-su-jump] { cursor: pointer; }
.intake-step-pill[data-su-jump][disabled] { cursor: default; }

/* === Step body =========================================================== */
.intake-body {
  padding: var(--rhythm-96) 96px 24px;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}
.intake-body[hidden] { display: none; }
.intake-body-inner { max-width: 880px; }
/* `intake.jsx`'s own step container: one 48px rhythm between a step's
   heading and its field block. */
.intake-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.su-step[hidden] { display: none; }
.su-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* === Step 2 — age range (D7) =============================================
   The design draws the control as two stacked bars (a full-width unfilled
   rail plus a purple selected span) because `.intake-range`'s own native
   track is deliberately transparent in styles.css. Geometry is the mock's
   AgeRange, unchanged: 4px tall, centred, pill-capped. Both bars sit BEFORE
   the inputs in the DOM so the thumbs paint over them, and neither takes
   pointer events. Same recipe `/profile` ports at `.profile-range-*`. */
.su-agerange { gap: 12px; }
.su-range-pair { position: relative; height: 36px; }
.su-range-track,
.su-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  pointer-events: none;
}
.su-range-track { left: 0; right: 0; background: var(--ink-100); }
.su-range-fill { background: var(--couple-purple); }
.su-range-pair .intake-range {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
}

/* === Step 3 — interests (FF-3: server-rendered from the one catalog) ====== */
.su-interests { display: flex; flex-direction: column; gap: 32px; }
.su-interest-group { display: flex; flex-direction: column; gap: 14px; }
/* gap 12 is ChipGroup's own value in intake.jsx. */
.su-chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* The count and step 3's repeated error sit together at the foot of the step,
   so the message lands where the member actually is when they press Next
   (walkthrough follow-up #2). Deliberately NO `display` on the error itself —
   `[hidden]` has to keep working on it. */
.su-interests-foot { display: flex; flex-direction: column; gap: 8px; }
.su-interests-count {
  margin: 0;
  font: 500 italic 16px/1.4 var(--font-body);
  color: var(--ink-500);
}
.su-interests-count b { color: var(--couple-purple); font-style: normal; }
#su-step-3-error-bottom { margin: 0; }

/* === Step 4 — verify phone ===============================================
   The mock holds this step to a 720px measure rather than the 880 the
   form steps use, and the actions rail follows it (below). */
.su-step--verify { max-width: 720px; gap: 40px; }
.su-verify-head { display: flex; flex-direction: column; gap: 20px; }
.su-verify-head p { max-width: 640px; margin: 0; }
.su-verify-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 8px;
}
.su-verify-fields > .su-field { align-self: stretch; }
.su-code-boxes { display: flex; gap: 12px; margin-top: 8px; }
.su-resend {
  font: 500 16px/1 var(--font-body);
  color: var(--couple-purple);
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 16px;
  cursor: pointer;
}
.su-verify-note {
  font: 500 italic 14px/1.5 var(--font-body);
  color: var(--ink-400);
  margin: 0;
  max-width: 560px;
}

/* === Actions rail (D8) ===================================================
   The rail hugs the step's own answer column — 880 for the form steps, 720
   for verify (the June 2026 ruling shared with Get to Know You). */
.intake-actions {
  padding: 32px 96px var(--rhythm-96);
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}
.intake-actions[hidden] { display: none; }
.intake-actions-inner {
  max-width: 880px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Step 1 has no Back control, so a spacer holds Next at the right edge —
   the mock's own `<span aria-hidden>` in that position. */
#su-actions-spacer[hidden] { display: none; }
#su-next[hidden], #su-next-check[hidden], #su-next-arrow[hidden] { display: none; }

/* === Responsive ==========================================================
   Horizontal gutters, the strip's sticky offset and the ≤640 body clearance
   all come from the ported `.intake-*` ladder in styles.css. Only the
   sticky offset is re-stated here, because that ladder's `top: 80px` was
   cut against the mock's nav, not v3's: at ≤900 `.nav-bar` is still 64 tall
   (bottom edge 80, so 80 would leave no gap at all), and only at ≤640 does
   it drop to 56 (bottom edge 72). signup.css loads after styles.css, so
   these win on order at equal specificity. */
@media (max-width: 900px) {
  .intake-stepper-strip { top: 92px !important; margin-top: 92px; }
}
@media (max-width: 640px) {
  .intake-stepper-strip { top: 84px !important; margin-top: 84px; }
  .su-or { min-width: 0; align-self: stretch; }
  .su-code-boxes { gap: 8px; }
}