/* tech/assets/css/field_app_sizing.css
 *
 * Two-tier responsive sizing for the Field App.
 * Mobile-first: defaults target phone (< 768px); the single media query
 * promotes everything for iPad-and-up (>= 768px).
 *
 * This file MUST load AFTER per-page CSS (shared.css, field_visit.css, etc.)
 * so that same-specificity rules (e.g. `.fv-material-row input` defined in
 * field_visit.css at 13px) lose to ours on cascade order. Where the existing
 * rule has higher specificity, we mirror its selector here.
 *
 * Linked by: index.html, active_projects.html, project_actions.html, visit_form.html
 * (gallery.html intentionally not linked — Phase 2.)
 */

/* ──────────────────────────────────────────────────────────────────────────
 *  Container cap — prevents content from stretching on ultrawide monitors.
 *  iPads (1024–1366px wide) sit well under the cap and fill naturally.
 * ──────────────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
 *  Phone tier (< 768px) — base styles
 * ──────────────────────────────────────────────────────────────────────── */

/* iOS Safari auto-zooms form inputs below 16px. Hold the floor at 16px
 * everywhere, and explicitly bump the two existing sub-16px selectors
 * defined in field_visit.css. */
input,
select,
textarea {
  font-size: 16px;
}

.fv-textarea {
  font-size: 16px;
}

.fv-material-row input {
  font-size: 16px;
}

/* Tap-target minimum — Apple HIG / Material guidance is 44–48px. */
.btn-menu {
  min-height: 48px;
}

.btn-primary,
.btn-secondary {
  min-height: 44px;
}

/* ──────────────────────────────────────────────────────────────────────────
 *  iPad / Desktop tier (>= 768px) — fills the screen up to the .wrap cap,
 *  larger typography and roomier tap targets so the app feels like a native
 *  iPad app at arm's length rather than a phone screen blown up.
 * ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }

  /* Form inputs scale up too — still well above the iOS no-zoom floor. */
  input,
  select,
  textarea {
    font-size: 18px;
  }

  .fv-textarea {
    font-size: 18px;
  }

  .fv-material-row input {
    font-size: 18px;
  }

  /* Action tiles — bigger touch surfaces, larger label text. */
  .btn-menu {
    min-height: 64px;
    padding: 20px 24px;
    font-size: 20px;
  }

  .btn-menu .hint {
    font-size: 16px;
  }

  /* Primary action buttons (Submit, Sign, etc.) — comfortable thumb reach. */
  .btn-primary,
  .btn-secondary {
    min-height: 56px;
    font-size: 18px;
    padding: 14px 22px;
  }

  /* Headings and supporting text — proportional bump so layouts stay balanced. */
  .title {
    font-size: 28px;
  }

  .desc,
  .helper {
    font-size: 16px;
  }

  /* Card-chrome buttons (Back to Apps / App Home / Back) — readable but
   * not so big they steal focus from the page title. */
  .btn-home,
  .home-link {
    font-size: 16px;
  }
}