/**
 * webapp-touch.css — touch ergonomics for the web apps
 *
 * Audited at 390px and 820px: none of the web apps overflow horizontally and
 * all carry a viewport tag, so the layouts were already sound. What they were
 * failing was hit-target size — 8 to 12 controls per page came in under 40px,
 * against the 44px both Apple and Google publish as the minimum. Small targets
 * are the difference between an app that works in gloves on site and one that
 * does not, which matters most for the CAT timer.
 *
 * WHAT THIS DELIBERATELY DOES NOT TOUCH
 * Inline links inside body text. Forcing a 44px box onto an <a> in the middle
 * of a sentence would either wreck the line height or silently expand a
 * clickable box over the text around it — worse than the problem. Only real
 * controls are targeted: buttons, nav links, form fields, and anything already
 * marked up as a button.
 *
 * Scoped to coarse pointers so nothing changes for mouse users on desktop.
 */

@media (hover: none) and (pointer: coarse) {

  /* .sw is excluded on purpose. Toggle switches are a fixed-size pill — the
     CAT timer's are 50×28 — and forcing them to 44px tall inflated them into
     blobs with the knob stranded at the top. They get their hit area extended
     below instead, which is the correct fix: the touchable region grows, the
     control keeps its shape. */
  button:not(.sw),
  [role="button"]:not(.sw),
  .btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  summary {
    min-height: 44px;
    /* Keeps icon-only buttons square rather than letting them stay a thin
       sliver that happens to be tall enough. */
    min-width: 44px;
  }

  /* Switches: visual stays 50×28, touch target becomes 58×46. ::after is
     already the knob, so the extender uses ::before. */
  .sw { position: relative; }
  .sw::before {
    content: '';
    position: absolute;
    inset: -9px -4px;
  }

  /* Text inputs get the height but not the width floor — a narrow numeric
     field is legitimate, an unreachable one is not. */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  textarea {
    min-height: 44px;
    /* 16px stops iOS Safari zooming the whole page in on focus, which is the
       single most jarring thing a form can do on a phone. */
    font-size: max(16px, 1em);
  }

  /* Navigation and list-style links: block-level, so a height floor is safe. */
  nav a,
  .cyber-nav-link,
  .nav-links a,
  li > a[class] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Anything that has ended up genuinely tiny — close buttons, icon toggles —
     gets its hit area extended outwards without changing where it sits or how
     big it looks. The visual stays put; only the touchable region grows. */
  .close, .bot-close, .modal-close, [aria-label*="close" i], [aria-label*="Close"] {
    position: relative;
  }
  .close::after, .bot-close::after, .modal-close::after,
  [aria-label*="close" i]::after {
    content: '';
    position: absolute;
    inset: -12px;
  }

  /* Comfortable spacing between adjacent controls so a fat finger cannot
     catch two at once. */
  nav button + button,
  .row > button + button {
    margin-left: 2px;
  }
}

/* A pointer that can hover but is still coarse (some tablets, TV browsers)
   gets the same treatment — the deciding factor is the finger, not the hover. */
@media (pointer: coarse) and (hover: hover) {
  button, [role="button"], .btn, select { min-height: 44px; }
}