/* ═══════════════════════════════════════════════════════════════
   THE GOOD HARVEST — gh_device
   The things a phone or tablet needs that a desktop browser never
   asked for, and the motion preference every device can express.

   LINKED LAST, ON PURPOSE. Several pages carry their own inline
   <style> — good-harvest-staff.html, good-harvest.html,
   admin/documents.html, admin/planning.html, privacy.html,
   terms.html — and those rules are more specific than a bare element
   selector. This file has to win against them, so it is linked after
   every other stylesheet and uses !important in the two places where
   losing has a user-visible cost. Both are marked and explained; do
   not add a third without the same justification.

   SCOPED TO `pointer: coarse`, NOT TO A WIDTH. A narrow desktop window
   is not a phone: shrinking a browser must not start rewriting form
   controls. `pointer: coarse` matches when the primary input is a
   finger, which is exactly the population these rules are for, and
   leaves every mouse-driven layout untouched at every width.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. iOS stops zooming the page when a field is tapped ────────
   Mobile Safari auto-zooms on focus whenever an input's font-size is
   under 16px, and does NOT zoom back out afterwards — the user is left
   on a page that no longer fits. Measured under 16px on
   good-harvest.html, good-harvest-staff.html, admin/documents.html and
   admin/planning.html.

   !important is load-bearing here: the offending rules are page-local
   and class-scoped (`.ed-form input`, `.input`), so they out-specify a
   bare element selector no matter what order the files load in.
   Checkboxes and radios are excluded — font-size does not size them,
   and Safari does not zoom for them. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── 2. Touch targets ───────────────────────────────────────────
   Measured at 390px: the burger sat at 38x31, footer links at 87x18,
   the legal-page links at 41x24. Apple and Android both ask for ~44px;
   WCAG 2.2 AA (2.5.8) sets the floor at 24px.

   PROSE LINKS ARE DELIBERATELY EXCLUDED. A link inside a running
   paragraph — the 6 measured inside <p> on privacy.html and
   terms.html — is covered by WCAG's inline exception, and padding it
   to 44px would break the line box it lives in. Only standalone
   controls are enlarged. */
@media (pointer: coarse) {
  /* All three menu buttons. They measured 38x31, 36x30 and 20x30 — the last
     is a bare glyph with no padding at all. */
  .nav__burger,
  .admin__burger,
  .burger {
    min-width: 44px;
    min-height: 44px;
  }

  /* Buttons sat at 31px almost everywhere, and 18px in the two page-local
     `.btn` definitions. min-height leaves the horizontal sizing alone, so
     nothing reflows sideways — measured, no page gained overflow. */
  .btn,
  .gs-btn,
  .sb__foot button,
  .admin__tab {
    min-height: 44px;
  }

  /* The icon buttons on an admin table row and in the course editor: 32x32
     everywhere they appear. Both sides are raised, since the button is a
     square around one icon; the icon itself stays 14px. A row of four grows
     from 152px to 200px, inside a table that already scrolls in its own card. */
  .admin__action-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* A tick box on a table row (the Officers tab): the box stays 18, the label
     around it is the target, raised as the row buttons are. It measured 18x18. */
  .admin__tick {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* Form fields. The shared admin field is 47 high and needs nothing; the
     staff page's field inside a table row (.gs-compact, 37) and its grading
     bar (.grade, 40 where the window is wider than 820) are raised to 44
     under a finger, as the buttons beside them are. */
  .admin__input,
  .admin__select,
  .admin__filter-input {
    min-height: 44px;
  }

  /* Breadcrumbs: 15px on the admin pages, 20px on topic and lesson. They are
     a navigation trail, not prose, so they take the same padding as the
     footer lists. */
  .admin__breadcrumb a,
  .lesson__breadcrumbs a,
  .topic-hero__breadcrumb a {
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* "Don't have an account? Sign up" — inline in a sentence, so the WCAG
     inline exception would forgive it, but it is the only way to reach the
     signup form and it measured 49x18. The sentence is a one-line div of its
     own rather than running prose, so padding it moves nothing else. */
  .auth__footer a {
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* Footer and legal-page navigation: these are lists of destinations,
     not prose, so vertical padding both enlarges the target and gives
     the list room to breathe on a small screen. */
  .footer__col ul li a,
  .footer__line a,
  .lg-top__links a,
  .lg-foot a,
  .lg-toc li a {
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* The <label> already wraps this input, so the real target is the
     whole row of text — this only stops the box itself being a 18px
     speck next to it. */
  .byte__checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

/* ── 3. Motion, when the device asks for less ───────────────────
   css/gh_dialog.css and css/gh_skeleton.css already honour this;
   css/gh_styles.css does not, and it owns fadeUp, gradientShift and
   orbFloat. This is the standard global damper rather than three
   hand-written exceptions, so an animation added tomorrow is covered
   without anyone remembering to come back here.

   Not `animation: none` — that would cancel a final keyframe some
   layouts settle into. Collapsing the duration lets each one finish
   instantly in its end state. !important is required because it must
   beat the shorthand `animation:` declarations already in place. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4. Small quality-of-life fixes for touch ───────────────────
   iOS inflates font sizes in landscape unless told not to; the tap
   highlight is a grey flash Android draws over any tapped element,
   which the site's own :active states already replace. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (pointer: coarse) {
  a, button, [role="button"], .btn {
    -webkit-tap-highlight-color: rgba(27, 67, 50, 0.15);
  }
}