/* Touch sizing, shared by every page on this site.
   ⚠️ WHY A SEPARATE FILE. Each page inlines its own CSS and six of them are generated by
   build_*.py, so a hand edit to the HTML is overwritten the next time anyone rebuilds a
   feature page. One file, linked from every page and from the builders' templates, is the
   only version of this that survives.

   ⚠️ WHAT IT FIXES. Measured on the live site with a real touch context: the pricing slider's
   hit area was FOUR PIXELS tall, the "The detail→" links were 13px, the nav links 31px, and
   most buttons 31–39px. Apple's minimum is 44px and Material's is 48. A 4px drag target on a
   phone is not a small target, it is no target — the pricing slider could not be used at all.

   ⚠️ SCOPED TO `pointer: coarse`, never to a width. A phone-sized browser window on a laptop
   is still a mouse and should keep the tighter rhythm these layouts were drawn for; a tablet
   at 1024px is a thumb and should not. The viewport is not the input device — a headless
   browser at 390px still reports `pointer: fine`, which is exactly how an earlier version of
   this check measured 36px where a real phone gets 44. */
@media (pointer: coarse){
  /* ⚠️ min-WIDTH too, not just height. "Log in" came out 39x44 — tall enough and still too
     narrow to hit reliably; a control has two dimensions and only one of them was floored. */
  .btn, button, [role="button"], select{ min-height: 44px; min-width: 44px; }

  /* inline text links that act as controls: height through padding and a flex centre, so the
     text does not move and nothing re-wraps around it */
  /* ⚠️ HEIGHT ALONE LEFT A 39px-WIDE TARGET. A short label like "Log in" is only as wide as
     its text, so flooring the height fixed one dimension and left the other. Widened with
     padding rather than a hard min-width: a min-width would make every short link the same
     size as a long one and open gaps in the footer rhythm, whereas padding grows each target
     by the same amount around whatever text it has. */
  nav a, footer a, .foot a, a.go, a.p3, .links a, .crumb a{
    display: inline-flex; align-items: center; min-height: 44px;
    padding-inline: 8px; margin-inline: -8px;   /* the hit area grows, the layout does not */
  }

  /* an icon button is square, so it needs the floor in both directions */
  .icob, .engine-plus, .engine-opts{ min-width: 44px; min-height: 44px; }

  /* ⚠️ THE TERMS CHECKBOX WAS 15x15, AND IT GATES SIGNUP. Nobody can create an account
     without ticking it, so a target a thumb keeps missing is not a nuisance, it is the front
     door. Grown with transform rather than width/height because a scaled checkbox keeps the
     native control's own rendering, and the origin is pinned left so it does not drift into
     the label beside it. The 11px margin is (44 - 15*1.5) / 2, keeping the row's rhythm. */
  input[type="checkbox"], input[type="radio"]{
    transform: scale(1.5); transform-origin: left center;
    margin-right: 11px;
  }
  /* and the label is part of the target — clicking the words should tick the box */
  label:has(input[type="checkbox"]), label:has(input[type="radio"]){
    display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  }

  /* ⚠️ THE RANGE INPUT NEEDS THE BOX, NOT THE TRACK. Making `.slider` 44px tall would draw a
     44px bar; the track is painted by ::-webkit-slider-runnable-track, so the input becomes a
     transparent 44px grab area with the thin track drawn inside it, and the thumb is centred
     on that track by hand. Firefox uses ::-moz-range-track and centres its own thumb. */
  input[type="range"], .slider{
    height: 44px; background: transparent; padding: 0;
  }
  input[type="range"]::-webkit-slider-runnable-track, .slider::-webkit-slider-runnable-track{
    height: 4px; border-radius: 2px; background: currentColor; opacity: .18;
  }
  input[type="range"]::-webkit-slider-thumb, .slider::-webkit-slider-thumb{
    margin-top: -12px;           /* (4px track - 28px thumb) / 2 */
    width: 28px; height: 28px;
  }
  input[type="range"]::-moz-range-track, .slider::-moz-range-track{
    height: 4px; border-radius: 2px;
  }
  input[type="range"]::-moz-range-thumb, .slider::-moz-range-thumb{
    width: 26px; height: 26px;
  }
}