/* Touch sizing. Loaded LAST on every page on purpose: a page level rule must
 * not be able to leave a control smaller than a finger. Nothing here applies to
 * a mouse, so the desktop layout is untouched.
 */
@media (pointer: coarse) {
  .btn { height: 44px; padding: 0 16px; font-size: 14.5px; }
  .btn-sm { height: 38px; padding: 0 13px; font-size: 13.5px; }
  .btn-lg { height: 48px; padding: 0 20px; }
  .seg { padding: 4px; }
  .seg button { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .hdr { --header-h: 64px; }
  .hdr-in { height: 64px; }
  .brand { padding: 9px 0; }
  .hdr nav a { padding: 12px 12px; }
  .ca button { min-height: 36px; }

  small, .hint, .stats small, .pill, .win-bar, footer,
  .eyebrow, .supply-key, .supply-key span { font-size: 12.5px; }
  .mono { font-size: 12.5px; }
  input[type="text"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
    height: 46px; font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  }
  textarea { height: auto; min-height: 96px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

/* The specific controls a finger actually misses, measured on an iPhone
 * profile rather than guessed. */
@media (pointer: coarse) {
  /* Every button a finger can reach is a real target, not just the ones in the
     header. 44px is the size Apple asks for and Android is close behind. */
  .btn, .btn-sm, button.btn, a.btn { min-height: 44px; }
  .hdr-right .btn, .hdr-right .btn-sm { height: 44px; padding: 0 14px; }
  .tok-copy, .ca button, .js-copy, .file-btn { min-height: 44px; }
  .seg button { height: 44px; padding: 0 16px; }
  .board .search input, .board input[type="search"], input[type="search"],
  input[type="text"], input[type="url"], input[type="number"] { height: 46px; font-size: 16px; }
  select, select.pairing { height: 46px; font-size: 15px; }
  .chip, button.chip { min-height: 44px; padding: 10px 14px; }
  footer nav a { display: inline-block; padding: 13px 4px; }
  .lbl-row .count, .count, span.count { font-size: 12.5px; }
}

@media (pointer: coarse) {
  /* The wordmark hides on the narrowest phones, which leaves only the mark as
     the way home. Keep it a real target rather than a 26px icon. */
  .brand { min-width: 44px; min-height: 44px; align-items: center; }
}