/* Phones and tablets only (a coarse pointer), so the desktop's density is untouched.
 *
 * Two things this fixes, found by measuring every page at 375px:
 *   - controls too small to hit: checkboxes were 13px, chips and tab buttons 20-24px tall, footer links 17px;
 *   - iOS Safari zooming the whole page whenever a field is tapped, which it does to any input whose text is
 *     smaller than 16px. That's why the fields below are 16px on touch screens and their old size everywhere else.
 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 40px;
  }

  button,
  summary,
  .map-btn,
  .alerts-btn,
  .alerts-toggle,
  .records-btn,
  .juniors-btn,
  .rare-chip,
  .fleet-day,
  .news-tab-btn,
  .caught-tab-btn,
  .spotter-mode-btn,
  .records-tab,
  .sticker-wear,
  .board-sort {
    min-height: 36px;
  }

  /* The board's headings are the buttons, so the room goes inside them rather than round them. */
  .board-sort {
    padding: 8px 2px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* The footer shows icons only on phones; they were 17px across. */
  #footer a,
  #footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
  }

  /* A link in a table is a word in a row: give it something to be tapped by without stretching the table. */
  td a,
  .rare-item a,
  .records-list a {
    display: inline-block;
    padding: 4px 0;
  }

  summary {
    display: flex;
    align-items: center;
  }

  /* TODAY's "read its life story" style links sit on their own, so they get the room rather than the padding. */
  .today-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}