/* Shared mobile polish: safe areas (notches/gesture bars) and touch targets.
   Additive only - no effect on desktop layouts. Requires the page viewport
   meta to include viewport-fit=cover for env(safe-area-inset-*) to be non-zero. */

/* Keep fixed/top-level chrome out of the notch and gesture areas. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Pages with their own fixed header manage the top inset themselves;
   for everything else, nudge fixed corner controls (e.g. theme toggle)
   below the status bar / notch. */
.theme-toggle-wrap {
  top: calc(1rem + env(safe-area-inset-top, 0px));
}

@media (pointer: coarse) {
  /* Minimum comfortable touch target (~44px) on touch devices. */
  button,
  .plan-btn,
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"] {
    min-height: 44px;
    /* 16px+ prevents iOS Safari from auto-zooming focused fields. */
    font-size: max(16px, 1em);
  }
}