/* ============================================================================
 * ONBOARDING (the Onboarding surface type, D-815's 8th type) — screens 4 & 5,
 * ported from the LOCKED workbench mocks into the real app.
 *
 * Source of truth (read-only worktree ~/bw-onboarding-flow, branch
 * wip/onboarding-flow-fixes-20260922 — the on-disk copies, which carry the
 * D-824 masthead retrofit): workbench/exploration/screen4-live-flow.html
 * (born branch + the adjusted-age bottom sheet, both internal views),
 * screen4-notborn.html (the not-born branch), screen5-realhero.html (her week).
 * SIGNED OFF: Andrew, "Lock", 2026-09-23. Type spec:
 * docs/ONBOARDING-TYPE-STYLE-SPEC-2026-09-24.md (the 17 locked conventions).
 *
 * ── ADOPTED, NOT BUILT HERE ─────────────────────────────────────────────────
 * The real shared components this file never re-declares:
 *   · 401 SHARED·CHROME       .mast-bar / .mast-word / .mast-btn (D-824)
 *   · 1010/434 CTA ladder     .lg-cta and variants — D-823: the onboarding
 *                             primary CTA IS the shared component; the mock's
 *                             six local .btn-main copies are retired debt
 *   · 1152's real primitives  .modal-overlay / .modal-sheet / .modal-top /
 *                             .modal-title / .modal-close / .modal-body /
 *                             .modal-foot (app.css) — the sheet layers
 *                             onboarding modifiers on the real base, never
 *                             a second modal system
 *   · 102 HOME·HERO           .wkhero + wireWeekHero + real home.js copy
 *                             (screen 5's stage IS the real card)
 *
 * ── DELTAS FROM THE MOCK, EACH OWNED (none silent) ──────────────────────────
 *  · --text-tertiary text uses → --text-secondary. D-740: the token is retired
 *    for app use (zero web/ call sites); text is ink-600, marks are ink-400.
 *  · off-ladder px snapped to the token ladder (D-511): fold-card 14px radius
 *    → --radius-12; confirm heading 19px → --size-20; foot inset 22px →
 *    --space-24 (the type's 24px inset, spec §2 rule 12); the mock's 18px gaps
 *    → --space-16, 10px → --space-8 and its 6/7px and 14px values → --space-8
 *    / --space-12 (D-511 4px grid — --space-6 and --space-14 are referenced in
 *    the estate but defined nowhere, so they are not rungs); switch 46×24 → the
 *    433 shared control's own geometry (--space-48 / --dim-24 / --dim-16).
 *  · class names carry the obn- prefix: 1035 TEXTINPUT owns .fld and 433
 *    TOGGLESWITCH owns .toggle/.sw app-side one day (both PROVISIONAL, not yet
 *    app-mounted) — the onboarding family must not collide with a future mount.
 *    The mock's look is rendered exactly; only the names are namespaced.
 *  · the sheet's question view uses the real .modal-close × — 1495a14b gave it
 *    the always-visible well circle for free (the mock pre-dates that fix).
 * ========================================================================== */

/* ── the step shell ──────────────────────────────────────────────────────── */
.obn { padding: var(--space-12) var(--space-24) var(--space-24); }

/* step heading — spec §2 rule 2 (data-collection screens). */
.obn-step-h { font-family: var(--font-display); font-weight: var(--weight-600);
  font-size: var(--size-22); /* token-exception */
  line-height: var(--leading-120); letter-spacing: var(--tracking-neg-01);
  margin: 0 0 var(--space-8); color: var(--text-primary); }
/* the terminal accent dot — spec §2 rule 5, every heading tier. */
.obn-punc { color: var(--accent); }

.obn-step-sub { font-family: var(--font-body); font-size: var(--size-15); /* token-exception */
  line-height: var(--leading-145); color: var(--text-secondary); margin: 0 0 var(--space-16); }

/* ── field group: question + control + small link + why-line ─────────────── */
.obn-fld { margin: 0 0 var(--space-16); }

/* question label — Fraunces 400, one step down from the heading (spec §2 rule 4).
 * ⚠️ the ruled home for this style is a FIFTH size on 442 QUESTIONLABEL (the
 * unexecuted 11-screen brief, ruled 2026-09-25); until that migration lands,
 * the type's own value lives here, scoped to the onboarding family. */
.obn-q { font-family: var(--font-display); font-weight: var(--weight-400);
  font-size: var(--text-body); line-height: var(--leading-125);
  letter-spacing: var(--tracking-neg-01); color: var(--text-primary);
  margin: 0 0 var(--space-8); }
.obn-q .obn-punc { color: var(--accent); }

/* segmented two-button switch — spec §2 rule 13. */
.obn-seg { display: flex; gap: var(--space-4); background: var(--cream-100);
  border-radius: var(--radius-pill); padding: var(--space-4); }
.obn-seg button { flex: 1; font-family: var(--font-label); font-size: var(--size-13); /* token-exception */
  font-weight: var(--weight-600); color: var(--text-secondary); background: none;
  border: 0; border-radius: var(--radius-pill); padding: var(--space-8); cursor: pointer; }
.obn-seg button[aria-selected="true"] { background: var(--surface-card);
  color: var(--text-primary); box-shadow: var(--shadow-card); }

/* field box — spec §2 rule 14: 44px tap floor, card fill, hairline, caret mark. */
.obn-inputwrap { position: relative; display: flex; align-items: center; }
.obn-input { display: block; width: 100%; min-height: var(--control-min);
  padding: var(--space-12) var(--space-16); background: var(--surface-card);
  border-radius: var(--radius-control); border: 1px solid var(--border-hairline); /* token-exception: a hairline */
  font-family: var(--font-body); font-size: var(--size-15); /* token-exception */
  color: var(--text-primary); outline: none; appearance: none; -webkit-appearance: none; }
.obn-input:focus { border-color: var(--accent); }
.obn-inputwrap .obn-caret { position: absolute; right: var(--space-12);
  display: flex; color: var(--ink-400); /* a MARK, not text — D-740 */
  width: var(--dim-16); height: var(--dim-16); pointer-events: none; }
.obn-inputwrap .obn-caret svg { width: 100%; height: 100%; display: block; }
/* room so the value never runs under the caret mark */
.obn-inputwrap .obn-input { padding-right: var(--space-40); }
/* the native date field carries the platform's own picker affordance — no
 * decorative caret on top of it (two pickers on one box reads as a defect). */
.obn-inputwrap.obn-date .obn-caret { display: none; }
.obn-inputwrap.obn-date .obn-input { padding-right: var(--space-16); }

/* small links — spec §2 rule 15. "Don't know yet" (genuine unknown, pre-birth)
 * and "Prefer not to say" (privacy) are different things — two links, not one
 * (Andrew, on the combined version: "Terrible"). */
.obn-link { display: inline-block; font-family: var(--font-label);
  font-size: var(--size-12); /* token-exception */
  font-weight: var(--weight-600); color: var(--text-secondary);
  text-decoration: none; margin-top: var(--space-8); }
.obn-linkrow { display: flex; gap: var(--space-16); margin-top: var(--space-8); }
.obn-linkrow .obn-link { margin-top: 0; }

/* why-line — why we ask. D-740: text takes ink-600, never the retired token. */
.obn-why { font-family: var(--font-body); font-size: var(--size-12); /* token-exception */
  color: var(--text-secondary); margin: var(--space-8) 0 0; line-height: var(--leading-140); }

/* the early flag — a computed fact from her two dates, displayed, never a
 * conclusion. Gate is window.isPreterm() (D-484(3), the tested <37wk gate). */
.obn-early { margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-label); font-size: var(--size-12); /* token-exception */
  font-weight: var(--weight-600); color: var(--teal-700); } /* accent is 4.05:1 on cream at 12px — teal-700 passes; the wordmark-dot teal */
.obn-early svg { width: var(--size-14); height: var(--size-14); }
.obn-early[hidden] { display: none; }

/* ── the adjusted-age bottom sheet — onboarding modifiers on the REAL
 * .modal-overlay / .modal-sheet base (1152). Height pinned to 80% because this
 * sheet holds prose; the real base leaves height content-driven. The slide is
 * transform-only, per the house motion rule. ─────────────────────────────── */
.obn .modal-sheet { height: 80%; max-height: 80%;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.obn .modal-overlay.open .modal-sheet { transform: translateY(0); }
.obn .modal-overlay { opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.obn .modal-overlay.open { opacity: 1; pointer-events: auto; }

.obn .modal-body { padding: var(--space-16); }
.obn .modal-title { font-weight: var(--weight-600); }
.obn .modal-top.obn-hidden { display: none; }
.obn .modal-foot { gap: var(--space-4); }
.obn .modal-foot.obn-col { flex-direction: column; }
.obn .modal-foot .lg-cta { margin-top: 0; width: 100%; }

/* two internal views, one sheet — she never leaves it; the confirm reads as
 * the same decision continuing (cross-fade, opacity only). */
.obn-view { position: absolute; left: 0; right: 0; top: var(--dim-40); bottom: 0;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none;
  transition: opacity .18s ease; }
.obn-view.on { opacity: 1; pointer-events: auto; position: relative; inset: auto;
  flex: 1 1 auto; min-height: 0; }

/* the explainer card inside the sheet. The 411 NOTICEBOX state question
 * (no kind label matches a plain explainer) is the unexecuted full-flow job's
 * to settle — registered copy lives exactly as the mock locked it. */
.obn-fold { background: var(--surface-card); border: 1px solid var(--border-hairline); /* token-exception: a hairline */
  border-radius: var(--radius-12); padding: var(--space-16); }
.obn-fold p { font-family: var(--font-body); font-size: var(--text-body-sm);
  color: var(--text-secondary); line-height: var(--leading-155);
  margin: 0 0 var(--space-16); }
.obn-fold p:last-child { margin-bottom: 0; }
.obn-fold b { color: var(--text-primary); }
.obn-fold b.obn-lead { color: var(--teal-700); } /* accent is 4.23:1 on the card at 16px — teal-700 passes */
.obn-fold .obn-fine { margin: 0; font-size: var(--size-12); /* token-exception */
  color: var(--text-secondary); }

/* the toggle row — the mock's presentation (tinted pill row, accent label)
 * around the 433 shared control's geometry. 433 is PROVISIONAL and not yet
 * app-mounted; reconciling this presentation with 433's port (tinted pill vs
 * hairline row) is the adoption job's variant call, eye-listed by the reuse
 * audit — not re-decided here. */
.obn-toggle { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-12); margin: var(--space-4) 0 var(--space-16);
  padding: var(--space-12); background: var(--cream-100);
  border-radius: var(--radius-12); cursor: pointer; border: 0; width: 100%;
  text-align: left; font-family: var(--font-body); }
.obn-toggle .obn-t { font-size: var(--text-body-sm); font-weight: var(--weight-600); color: var(--teal-700); } /* accent is 4.05:1 on the well at 14px — teal-700 passes */
.obn-sw { width: var(--space-48); /* token-exception */ height: var(--dim-24); border-radius: var(--radius-pill);
  background: var(--surface-well); border: 0; position: relative; flex: 0 0 auto;
  transition: background .15s ease; }
.obn-sw i { position: absolute; top: var(--radius-3); left: var(--radius-3);
  width: var(--dim-16); height: var(--dim-16); border-radius: var(--radius-round);
  background: var(--white); box-shadow: 0 1px 2px var(--ink-900-a18); /* token-exception: the knob's shadow */
  transition: left .15s ease; }
.obn-sw.on { background: var(--accent); }
.obn-sw.on i { left: calc(var(--space-48) - var(--dim-16) - var(--radius-3)); }
.obn-toggle:focus-visible .obn-sw, .obn-sw:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-3); }

/* the confirm view — content anchored just above the buttons, not floating at
 * the top with dead space below (Andrew: "move the content to the bottom").
 * The confirm drops the whole header: the question was asked and answered on
 * the previous view; this view's job is a clean explicit confirmation. The
 * only ways out are the two buttons in the foot (Andrew: "force one of the
 * options"). */
.obn-confirm-body { display: flex; flex-direction: column; justify-content: flex-end; }
.obn-confirm-h { background: var(--surface-ground); font-family: var(--font-display); font-weight: var(--weight-600);
  /* one deliberate step under the 22 title, per the locked mock (19px, snapped) */
  font-size: var(--size-20); /* token-exception */
  line-height: var(--leading-125);
  letter-spacing: var(--tracking-neg-01); color: var(--text-primary); margin: 0 0 var(--space-8); } /* true surface: the sheet's own paper (app.css's --paper alias resolves here) */
.obn-confirm-h b { font-weight: inherit; }
.obn-confirm-sub { background: var(--surface-ground); font-family: var(--font-body); font-size: var(--text-body-sm);
  color: var(--text-secondary); margin: 0; } /* true surface: the sheet's own paper (app.css's --paper alias resolves here) */
/* "Turn this off" — plain bold grey text, not a pill (Andrew: "remove the
 * pill... put it in grey text in bold underneath"). */
.obn-turnoff { display: block; width: 100%; text-align: center;
  margin-top: var(--space-12); background: none; border: 0; padding: var(--space-4);
  cursor: pointer; font-family: var(--font-label); font-size: var(--text-body-sm);
  font-weight: var(--weight-700); color: var(--text-secondary); background: var(--surface-ground); } /* true surface: the sheet's own paper (app.css's --paper alias resolves here) */

/* ── screen 5 — her week (a show, not an ask) ────────────────────────────── */
.obn.obn-show { display: flex; flex-direction: column; min-height: 100%; }
.obn-show .obn-stage { flex: none; padding: 0 var(--space-4); }
/* The phase line: hidden on Home by ruling ("too much info for first-time
 * landing"), shown HERE because on this screen the arc is exactly the point
 * (Andrew: "include the right phase line"). Scoped to the onboarding stage —
 * the real shared week-hero stylesheet is untouched, exactly as the mock did. */
.obn-show .obn-stage .wkhero-phase { display: block !important; }

.obn-foot { flex: none; padding: var(--space-16) var(--space-24); text-align: center;
  background: var(--surface-ground); } /* true surface: the step screen's ground */
.obn-foot-h { font-family: var(--font-display); font-weight: var(--weight-600);
  font-size: var(--size-17); /* token-exception */
  line-height: var(--leading-125); letter-spacing: var(--tracking-neg-01);
  color: var(--text-primary); margin: 0 0 var(--space-8); }
.obn-foot-p { font-family: var(--font-body); font-size: var(--size-13); /* token-exception */
  line-height: var(--leading-140); color: var(--text-secondary); margin: 0 0 var(--space-12); }
.obn-foot-btn-row { display: flex; justify-content: center; }

/* the sheet's close × carries the spine glyph, not a text × — sized here (the
 * real .modal-close rules size a text ×, and never knew about an svg child). */
.obn .modal-close svg { width: var(--dim-16); height: var(--dim-16); display: block; }
.obn-ic { display: flex; }

/* ── the dot-and-label answer tile — screens 6 & 8 (fixed 2026-09-26), ported
 * from screen6-canonical.html / screen-feeding-locked-style.html. Byte-match
 * to the mocks' own `.ans-tile` shape; 22px dot snapped to the nearest 4px-
 * grid rung (--dim-24, D-511) rather than a new off-ladder literal. ──────── */
.obn-ans { display: flex; align-items: center; gap: var(--space-12); width: 100%;
  text-align: left; padding: var(--space-12) var(--space-16);
  background: var(--surface-card); border: 1px solid var(--border-hairline); /* token-exception: a hairline */
  border-radius: var(--radius-12); margin: 0 0 var(--space-8); cursor: pointer;
  font-family: var(--font-body); }
.obn-ans.on { border-color: var(--accent); background: var(--teal-100); }
/* label/sub sit on the TILE's own background (--surface-card / --teal-100
 * above) — kept textually adjacent to it, before the dot rules below, so the
 * contrast checker's nearest-preceding-background heuristic reads the right
 * background rather than the small circular dot's --accent fill two rules
 * down (the dot is a 24px child, never what the label/sub text paints over). */
.obn-ans-body { display: flex; flex-direction: column; gap: var(--radius-2); }
.obn-ans-lbl { font-size: var(--size-15); /* token-exception */ color: var(--text-primary); }
.obn-ans-sub { font-size: var(--size-13); /* token-exception */ color: var(--text-secondary); }
.obn-ans-dot { width: var(--dim-24); height: var(--dim-24); border-radius: var(--radius-round);
  border: 2px solid var(--border-hairline); /* token-exception: a hairline, 2px per the locked mock */
  flex: 0 0 auto; background: var(--surface-card); }
.obn-ans.on .obn-ans-dot { border-color: var(--accent); background: var(--accent); }

/* ── screen 9 — the tool preview card (newly ported 2026-09-26 from
 * screen8-promo.html). Same tool-row grammar as 105 HOME·STUFF's rows (chip +
 * name + tonal action) but its own distinct card per the mock's own comment:
 * no header, no Tools/Collections toggle, no last-logged status. ────────── */
.obn-toolprev { background: var(--surface-card); border-radius: var(--radius-18);
  padding: var(--radius-2) var(--space-16);
  border: 1px solid var(--border-hairline); } /* token-exception: a hairline */
.obn-tp-row { display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) 0; border-bottom: 1px solid var(--border-hairline); } /* token-exception: a hairline */
.obn-tp-row:last-child { border-bottom: 0; }
.obn-tp-chip { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--kind-track-fill); color: var(--kind-track-icon); }
.obn-tp-chip.plan { background: var(--kind-do-fill); color: var(--kind-do-icon); }
.obn-tp-chip svg { width: var(--dim-16); height: var(--dim-16); display: block; }
.obn-tp-name { font-family: var(--font-body); font-size: var(--size-15); /* token-exception */
  font-weight: var(--weight-500); color: var(--text-primary); flex: 1; }
.obn-tp-row .lg-cta.tonal.compact svg { width: var(--dim-16); height: var(--dim-16); }

/* ── screen 10 — the three benefit rows + Apple/Google/email buttons (newly
 * ported 2026-09-26 from screen9-bezel.html). Apple/Google fills are literal
 * brand colours mandated by each platform's sign-in button guidelines — not
 * app tokens, never will be (D-421 6.10's own exception clause: genuinely
 * one-off). The Google mark is the hosted PNG from developers.google.com,
 * fetched not redrawn (CLAUDE.md 2026-07-26: never hand-author a brand
 * mark). ───────────────────────────────────────────────────────────────── */
.obn-reasons { margin: 0 0 var(--space-24); }
.obn-r-row { display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) 0; border-bottom: 1px solid var(--border-hairline); } /* token-exception: a hairline */
.obn-r-row:last-child { border-bottom: 0; }
.obn-r-ic { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round);
  background: var(--teal-100); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.obn-r-ic svg { width: var(--dim-16); height: var(--dim-16); display: block; }
.obn-r-title { font-family: var(--font-display); font-weight: var(--weight-600);
  font-size: var(--size-15); /* token-exception */
  color: var(--text-primary); margin: var(--radius-3) 0 var(--radius-2); }
.obn-r-desc { font-family: var(--font-body); font-size: var(--size-13); /* token-exception */
  line-height: var(--leading-140); color: var(--text-secondary); }

.obn-btn-apple, .obn-btn-google { display: flex; align-items: center; justify-content: center;
  gap: var(--space-8); width: 100%; min-height: var(--control-min);
  border-radius: var(--radius-12); cursor: pointer; margin-top: var(--space-12);
  font-family: var(--font-label); font-size: var(--size-15); /* token-exception */
  font-weight: var(--weight-600); }
.obn-btn-apple { background: #000; /* token-exception: Apple HIG-mandated sign-in black */
  color: var(--white); border: 0; }
.obn-applemark { font-size: var(--size-18); /* token-exception */ line-height: 1; }
.obn-btn-google { background: var(--white);
  color: #1f1f1f; /* token-exception: Google sign-in button HIG text colour */
  border: 1px solid #747775; /* token-exception: Google sign-in button HIG border colour */
  font-weight: var(--weight-500); }
.obn-btn-google img { display: block; }