/* touch.css -- the iPad pass, commit 1: sizes for a finger, on touch screens ONLY.
 *
 * Every rule sits under (pointer: coarse), so a desktop with a mouse renders exactly as before.
 * Loaded by every page a pilot uses (book, review, grid editor, workspace, the template wizard).
 *
 * WHY 16px IN EVERY INPUT. iPad Safari zooms the whole page into any text box whose text is
 * smaller than 16px the moment it is tapped, and leaves it zoomed. The review table's boxes were
 * 12.8px -- measured: all 273 cells on a spread -- so every tap on a cell zoomed.
 *
 * WHY 44px. Apple's minimum tap target. Measured at iPad mini width: 19 targets on /book under it
 * (the left/right switch was 19px tall), 48 field buttons on the Columns screen, the grid editor's
 * sidebar buttons. Text boxes in the review table get 36px rather than 44: they sit edge to edge
 * in a dense table, and the whole box is the target. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }

  /* THE ONE BUTTON PAIR. tokens.css sets them to --ctl (40px), which is the pointer size;
     on a touch screen they must clear 44px like everything else here. Before the cohesion
     pass each page defined its own at 44px outright, so this rule is what keeps the wizard
     and /book at 44 on glass now that the geometry is shared. */
  button.primary, label.primary, a.primary,
  button.ghost, label.ghost, a.ghost { min-height: 44px; }

  /* /book */
  #btn-tplbrowse, .linkbtn, #btn-accept-pairs { min-height: 44px; padding: 10px 6px; }
  .pagefoot a, .signin-note a { display: inline-block; padding: 12px 0; }
  .sideswitch button { min-height: 44px; min-width: 56px; font-size: 12px; }
  .sideq button { min-height: 44px; padding: 8px 14px; }
  .movebtn { min-height: 44px; min-width: 64px; font-size: 12px; }
  .pairhead a, .pairhead .off { display: inline-flex; align-items: center; min-height: 44px; }
  .tplcard .tacts button, .tplcard .tacts a { min-height: 44px; display: inline-flex; align-items: center; }

  /* review */
  .rowsview input.valin, .rowsview select { min-height: 36px; }
  .topbar button, #btn-done, #btn-export, #btn-upload, #btn-resume, #btn-ocr,
  .hiddenbar button, .showall, .hidebtn, .checklist li { min-height: 44px; }
  #year { min-height: 40px; }
  .rowsview .rn.tapcrop { min-height: 36px; display: flex; align-items: center; justify-content: flex-end; }

  /* REVIEW V2 -- the DEFAULT renderer, which this file never mentioned. It was written for
     v1 and names zero v2 classes: its review rules target `.topbar` (0 occurrences in
     review_v2.css) and `.rowsview` (v1 only), so the renderer every pilot actually gets had no
     touch sizing at all while the one almost nobody sees did. Measured against the 44px this
     file sets for everything else: .v2nav was 28x28, .v2sw 18x14, the Done button ~31px,
     .v2pill ~27px. The in-table boxes get 36px, the same allowance v1's cells get above and
     for the same reason -- they sit edge to edge and the whole box is the target. */
  .v2nav { min-width: 44px; min-height: 44px; }
  .v2done, .v2back, .v2pill, .v2chip { min-height: 44px; }
  .v2pill, .v2chip { padding-left: 12px; padding-right: 12px; }
  .v2sw { min-width: 44px; min-height: 28px; }
  .v2box input, .v2box select { min-height: 36px; }
  .v2totrow input.totin { min-height: 36px; }

  /* grid editor + workspace (scoped .ge) */
  .ge button { min-height: 44px; }
  .ge #sheet { min-height: 44px; }      /* #31: the bottom sheet's handle */
  .backbook { padding-top: 12px; padding-bottom: 12px; min-height: 44px; box-sizing: border-box; }

  /* template wizard */
  .fbtn, .ghost.small { min-height: 44px; }
  select { min-height: 44px; }
  #tools button, .btnrow button, .navbtns button { min-height: 44px; height: auto; }
  .stepper button { width: 44px; height: 44px; }
}