/* WF1: onboarding birth sheet, date drums, step dock, My details. Tokens only. Loaded after wd2.css. */

.app[data-screen="onboarding"] .onboarding { padding-bottom: 14rem; }
.onb-dock {
  position: fixed; z-index: 24; left: 0; right: 0; bottom: 0;
  display: grid; gap: var(--s2);
  padding: var(--s3) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--ink) 28%);
}
.onb-dock .actions { flex-direction: column; align-items: stretch; }
.onb-dock .btn { width: 100%; min-height: 48px; }
.onb-dots { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 16px; }
.onb-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--dim) 45%, transparent); }
.onb-dot.is-on { width: 8px; height: 8px; background: var(--pearl); }
@media (min-width: 760px) { .onb-dock { left: 92px; } }
@media (min-width: 1100px) { .onb-dock { left: 236px; } }
@media (prefers-reduced-motion: reduce) { .onb-dot { transition: none; } }
html[data-motion="reduced"] .onb-dot { transition: none; }
.onboarding :is(button, label, .toggle-row, [data-onb-seal]) { scroll-margin-bottom: 14rem; }

.birth-sheet { grid-template-columns: minmax(0, 1fr) !important; }
.onb-dob-q { margin: 0; text-align: center; }
.date-readout {
  margin: 0 auto var(--s2); width: min(100%, 26rem); text-align: center;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--pearl);
}
.date-drums, .time-drums { width: min(100%, 26rem); max-width: 26rem; margin-inline: auto; }
.year-direct { width: min(100%, 26rem); max-width: 26rem; margin-inline: auto; margin-block: var(--s3) var(--s2); }
.onb-name-card { text-align: center; padding: var(--s4); margin-block: var(--s4); }
.onb-name-card #onb-name-preview { margin: 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--pearl); }

.detail-list { display: grid; }
.detail-row { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s4); border-top: 1px solid var(--glass-edge); }
.detail-row:first-child { border-top: 0; }
.detail-row > div { flex: 1; min-width: 0; }
.detail-row .btn { flex: none; }
.detail-links .settings-entry { min-height: 64px; }
/* OB1: terms sentence + privacy policy under the save options; long sentences wrap inside the 48-px target. */
.onb-legal { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.onb-legal .btn { width: 100%; min-height: 48px; padding: var(--s2) var(--s4); text-align: center; white-space: normal; overflow-wrap: anywhere; }
.onb-legal .onb-privacy { margin: 0; }
.onb-terms__text { padding: var(--s4); }
.onb-terms__text h3 { margin-top: 0; }