/* First run (task I). Full-screen steps, no tab bar, actions within thumb reach at the bottom. */

.ob {
  display: flex; flex-direction: column; gap: var(--s-6);
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--s-5) - var(--s-6));
}
.ob-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: var(--s-3); }
.ob-body { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
.ob-body > h1 { font-size: var(--fs-2xl); text-wrap: balance; }
.ob-body > .mascot { margin-left: calc(-1 * var(--s-2)); }
.ob-lead { font-size: var(--fs-md); line-height: 1.45; max-width: 34ch; }
.ob-actions {
  margin-top: auto; display: grid; gap: var(--s-3);
  /* long steps on a small iPhone: the action stays within thumb reach */
  position: sticky; bottom: 0; z-index: 2;
  margin-inline: calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5) calc(env(safe-area-inset-bottom) + var(--s-3));
  margin-bottom: calc(-1 * (env(safe-area-inset-bottom) + var(--s-6)));
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ob-actions.is-flow {
  /* big text: a fixed bar would cover half the step, so it goes back to the end of the page */
  position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ob.is-big .ob-body > .mascot { width: 72px; height: 72px; }
.ob.is-big .ob-body > h1 { font-size: var(--fs-xl); }
.ob-foot { font-size: var(--fs-sm); color: var(--text-2); }
.ob-note {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--surface-2); box-shadow: inset 4px 0 0 var(--ovulation);
  font-size: var(--fs-sm); line-height: 1.4;
}

.ob-lang { display: grid; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
.ob-label { font-size: var(--fs-md); }
.ob-lang .segmented button { min-height: 44px; font-size: var(--fs-md); }

.ob-choices { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-2); }
.ob-choice {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--text);
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 76px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--tone-soft); box-shadow: inset 4px 0 0 var(--tone);
  transition: transform var(--t-fast) var(--ease);
}
.ob-choice:active { transform: scale(.98); }
.ob-choice-text { flex: 1; display: grid; gap: 2px; }
.ob-choice-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; color: var(--tone-ink); }
.ob-choice-sub { font-size: var(--fs-sm); color: var(--text-2); }
.ob-choice .ls-chev { color: var(--tone-ink); }

.ob-dates { display: grid; gap: var(--s-4); width: 100%; }
.ob-date { appearance: none; text-align: left; }
.ob-date-wrap { position: relative; width: 100%; }
.ob-date-hint {
  display: none; position: absolute; inset-inline-start: var(--s-4); top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--text-2); font-size: max(16px, 1rem);
}
.ob-date-wrap.is-empty:not(:focus-within) .ob-date-hint { display: block; }
.ob-date-wrap.is-empty:not(:focus-within) .ob-date::-webkit-datetime-edit { color: transparent; }
.ob-body > .btn.ghost { margin-left: calc(-1 * var(--s-2)); }