/* screens/onboarding.css — le tunnel d'entrée (lien magique → foyer → enfant).
   Split out of app.css by S0. TOKENS ONLY.
   NOTE: .onb input is already at 16px — the onboarding is the one surface D3 does NOT affect. */

/* ── onboarding (standalone-first — a parent with zero institutions) ────── */
.onb { padding: 28px 24px 20px; }
.onb h1 { font: 300 30px/1.2 var(--font); text-wrap: balance; }
.onb h1 b { font-weight: 600; }
/* `>` : sinon cette règle repeint les <p> des cartes de U3. */
.onb > p { color: var(--ink-muted); font-size: 14px; margin-top: 10px; }
.onb form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.onb input {
  background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); padding: 13px 15px; font: 400 16px/1.3 var(--font); width: 100%;
}
.onb .steps { display: flex; gap: 6px; margin-top: 20px; }
.onb .steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); }
.onb .steps i.on { background: var(--sport); }

/* U3 — l'exemple de soirée : zéro couleur, tout vient de base.css (card/lit/row/min/quote). */
.onb-demo { margin-top: 22px; }
.onb-eye { font: 600 10.5px/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.onb-demo .list { padding: 12px 0 0; }
.onb-demo .quote { margin: 12px 0 0; }

/* ── famille-in-app (2026-09-03) — the app's consent line, on the app's door. TOKENS ONLY.
   The optional phone field and the checkbox live inside `.onb form`, whose `.onb input` rule
   paints every input as a 16px field; the checkbox opts out of that width/padding here. */
.onb-consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 2px; font: 400 13px/1.45 var(--font); color: var(--ink-muted); cursor: pointer; }
.onb-consent b { color: var(--ink); font-weight: 600; }
.onb-consent a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.onb .onb-consent input { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--sport); }