/* Native readiness — safe areas, tablet breakpoints, touch targets.
   Additive on top of app.css / home.css / bible.css so nothing changes
   for existing web preview at 390×844. All rules degrade to no-ops on
   browsers where the values aren't set. */

:root {
  --rooted-safe-top: env(safe-area-inset-top, 0px);
  --rooted-safe-right: env(safe-area-inset-right, 0px);
  --rooted-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rooted-safe-left: env(safe-area-inset-left, 0px);
}

html, body { background: var(--color-cream-50, #FFFAF0); }

/* Every touchable control at least 44×44 CSS-pt per Apple HIG.
   Selectors intentionally narrow so we don't force the shape of decorative
   buttons that are visually smaller. */
button, [role="button"], .home-tab-button, .bible-audio-btn, .bible-hero-bookmark {
  min-height: 44px;
  min-width: 44px;
}

/* iPad + desktop responsive baseline — same product, more breathing room.
   Does NOT redesign layouts (Charter constraint); it just relaxes the phone
   column cap so the reader gets a comfortable measure on larger surfaces. */
@media (min-width: 768px) {
  :root { --app-width: 640px; }
  .bible-verses { max-width: 34rem; margin-inline: auto; }
  .bible-chapter-head, .bible-chapter-subtitle { max-width: 34rem; margin-inline: auto; }
  .bible-selectors { max-width: 30rem; margin-inline: auto; }
  .bible-audio { max-width: 34rem; margin-inline: auto; }
  .home-bottom-tabs { max-width: 34rem; margin-inline: auto; }
}
@media (min-width: 1200px) {
  :root { --app-width: 720px; }
}

/* Keyboard-safe form behaviour: give the intro / signin form room to scroll
   past the keyboard on iOS. Capacitor's Keyboard plugin (resize: 'body')
   handles the viewport resize; this pads the tail so inputs never sit under
   the accessory bar. */
.account-form, .signin-form {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.local-profile-note {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(24, 53, 41, 0.7);
  background: rgba(24, 53, 41, 0.06);
  border: 1px solid rgba(24, 53, 41, 0.12);
  border-radius: 0.75rem;
  padding: 0.65rem 0.8rem;
  margin: 0 0 0.5rem;
}

.rooted-storage-note {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(24, 53, 41, 0.65);
  margin: 0.35rem 0.15rem 0;
  text-align: center;
}