/* Touch targets (WCAG 2.5.8 floor is 24px; the goal here is --tap = 44px). Loaded last, so these rules win over the
   per-page files at equal specificity. Everything is inside one query: phones, and any coarse pointer
   (tablets, touch laptops). A fine pointer wider than 640px sees none of it. Two mechanisms:
   1. Controls with a drawn box (buttons, inputs, pills, nav links) simply grow to --tap.
   2. Small controls that sit in dense rows (sort buttons, failure picks, chips, summaries, text links) keep their look;
      an invisible ::after widens the hit area to --tap without moving layout. Rows where two such areas
      would meet are given the height instead (.flt td below). Links inside sentences are exempt (2.5.8). */
@media (max-width: 640px), (pointer: coarse) {
  /* 1. Boxed controls. */
  .btn, .input, .seg-opt, .seg-btn, .token-input, .signin-go, .id-out, .btn-chip, .btn-export, .brand { min-height: var(--tap); }
  .btn-icon, .kv-value-wrap .btn-icon, .filter-ignored .btn-icon, .theme-btn, .id-out { min-width: var(--tap); min-height: var(--tap); }
  .ept-tools .seg-btn { min-height: var(--tap); } /* endpoints.css scopes its own min-height (0,2,0); this keeps the 44px floor ahead of it */
  .seg-btn { display: inline-flex; align-items: center; justify-content: center; }
  .ept-tools .seg, .doc-head .seg { gap: 4px; }
  .shell-nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .id-chip { padding-block: 0; }

  /* Reveal button sits inside the value input: full input height, text keeps clear of it. */
  .kv-value-wrap .btn-icon { right: 1px; padding: 6px 8px; }
  .kv-value-wrap .input[type="password"], .kv-value-wrap .input:has(+ .btn-icon:not([hidden])) { padding-right: calc(var(--tap) + 4px); }

  /* Checkboxes and radios: the label is the target. */
  .fleet-check, label.field-inline { min-height: var(--tap); }
  .pick-hit { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); cursor: pointer; }
  .pick-hit:has(.pick:disabled) { cursor: not-allowed; }
  .control-unit { position: relative; gap: 0; }
  .control-unit input { position: absolute; left: 12px; top: 50%; margin: 0; translate: 0 -50%; }
  .control-unit label { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 38px 10px; cursor: pointer; }

  /* 2. Hit areas that grow without moving layout. */
  .pin-chip, .flt-pick, .sort-btn, .link-btn, summary, .crumbs a, .test-name a, .row-link, .run-ref, .doc-twin, .pair-name a { position: relative; }
  .pin-chip::after, .flt-pick::after, .sort-btn::after, .link-btn::after, summary::after, .crumbs a::after, .test-name a::after,
  .row-link::after, .run-ref::after, .doc-twin::after, .pair-name a::after {
    content: ""; position: absolute; inset-inline: min(-4px, calc((100% - var(--tap)) / 2)); inset-block: min(0px, calc((100% - var(--tap)) / 2));
  }
  .sort-btn::after { inset-inline: -6px; }
  /* The header cell sits at the top edge of a scroll box that clips overflow, so the centred 44px area needs 13px above and below the button (18px tall) inside the cell, so the area never reaches into the first body row. */
  th:has(> .sort-btn) { padding-block: 13px; }
  .pin-chip { margin-bottom: 6px; } /* keeps its hit area clear of the table header sort buttons below */
  .sched-tag { position: relative; margin-top: 6px; } /* under .row-link in the runs table: ~24px, not 44, so the two hit areas never meet */
  .sched-tag::after { content: ""; position: absolute; inset: -3px -4px; }
  .flt td { padding-block: 13px; } /* two failure picks in neighbouring rows would otherwise share 12px of hit area */
  .doc-toc a { display: flex; align-items: center; min-height: var(--tap); }
  .doc-toc li { margin: 0; }
}

@media (max-width: 640px) {
  /* The nav row is taller now, so the sticky header is: anchored jumps clear it. */
  .review, .author-sec, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 { scroll-margin-top: 136px; }
  /* Runs table: the pinned pick column is a 44px target. */
  .runs-table .col-pick { left: 0; width: var(--tap); min-width: var(--tap); max-width: var(--tap); padding-left: 0; }
  .runs-table .col-run { left: var(--tap); }
}