/* ═══════════════════════════════════════════════════════════════════
   Coarse floor  (shared stylesheet)

   SHARED MODULE. Edit in gusta-web-shared, then run `npm run sync-shared`
   in each consumer app. Do NOT edit the vendored copy under vendor/shared/.

   On touch, nothing a finger needs is under 40 px and every text input is
   at least 16 px, so iOS does not zoom the page when a field takes focus.
   Link it FIRST, before the app's own sheet, so the app's rules win:
     <link rel="stylesheet" href="vendor/shared/gusta-coarse.css">
   A linked file, never injected: GIF's CSP has no 'unsafe-inline' styles.

   Every selector is wrapped in :where(), so its specificity is zero. An app
   rule that sets min-height on a control wins; that is the way to draw a
   small control with an invisible hit area of its own (testkit/floor.mjs
   then measures the hit area). Input text is the exception: iOS zoom is not
   a style choice, so it is !important, and only the app's own !important
   can go above it. .gusta-floor-skip opts a subtree out of the target size
   (prose links, canvas overlays); the floor helper lists every opt-out.
   See CONTRACTS.md section 3.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gusta-target: 44px;
  --gusta-target-min: 40px;
  --gusta-input-font: 16px;
  --gusta-gap: 8px;
}

@media (pointer: coarse) {
  :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]), select, textarea) {
    font-size: max(var(--gusta-input-font), 1em) !important;
    min-height: var(--gusta-target);
  }

  :where(button, summary, [role=button], [role=tab], [role=menuitem], [role=option], [role=switch], [role=radio],
         input:is([type=button], [type=submit], [type=reset])):where(:not(.gusta-floor-skip, .gusta-floor-skip *)) {
    min-height: var(--gusta-target);
    min-width: var(--gusta-target);
    touch-action: manipulation;
  }

  :where(input[type=checkbox], input[type=radio]) {
    width: 22px;
    height: 22px;
  }
}