/* ---------------------------------------------------------------------------
   Phone and touch corrections, loaded last on every public page.

   Two separate problems, and they are not the same problem.

   Width is mostly fine already: the layouts use max-width, flex-wrap and grid,
   so they reflow. What was wrong is *touch*. Nearly every control on these
   pages was between 15 and 39 pixels tall — a nav link 15px, a "Clear" button
   15px, a Choose button 35px — against a finger that needs about 44. On a
   desk with a mouse that is invisible. On a phone it is the difference between
   a working page and one that feels broken.

   `pointer: coarse` is the right test rather than screen width: it asks
   whether the thing pointing at the page is a finger, which is the actual
   question, and it leaves a small laptop window alone.
--------------------------------------------------------------------------- */

@media (pointer: coarse){
  /* Anything you tap gets a real target. Padding rather than height, so the
     text stays where it was and only the hit area grows. */
  .nav nav a,
  .nav .right a,
  header nav a{
    padding:11px 4px;
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .cta-sm,.inspect{min-height:44px;display:inline-flex;align-items:center;padding:11px 16px}
  .brand{min-height:44px;display:flex;align-items:center}

  button,.pick,.go,.cta,.link,.more button,.egs button,.pill-acc{min-height:44px}
  .link{padding:6px 2px}
  .egs button{padding:10px 14px}

  select,input[type=text],input[type=password],input[type=tel],input[type=email],textarea{
    min-height:44px;
    /* 16px or Safari zooms the whole page in when the field is focused, and
       then leaves it zoomed. */
    font-size:16px;
  }

  /* A slider thumb is dragged, not tapped, but 19px is still small for a
     thumb — literally. The track stays thin; the grabbable box around it does
     not. Setting height alone capped it at 24px, which was the opposite of
     the intention. */
  input[type=range]{
    min-height:44px;
    height:auto;
    padding:19px 0;
    background-clip:content-box;
  }
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  input[type=range]::-moz-range-thumb{width:26px;height:26px}

  /* Rows that are themselves links need room, not just their text. */
  .car,.qrow{min-height:60px}

  /* "View the listing on olx" is the main thing a customer taps on the
     shortlist we send them, and it was twenty pixels tall. */
  .act a,.car .act a,.checks + .act a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:2px 0;
  }

  /* A link standing on its own in a footer is a control and gets a target.
     A link inside a sentence is not, and padding it out would open gaps in
     the middle of the prose — those stay as they are. */
  .foot p a,.foot .tiny a,.sfoot a,.doc .foot a{
    display:inline-block;
    padding:14px 2px;
  }
}

/* Narrow phones: the places where two things sit side by side and one of them
   is a long car name. Let them stack rather than squeeze. */
@media (max-width: 430px){
  .shead{flex-wrap:wrap;gap:8px}
  .car .top{flex-wrap:wrap;gap:4px 12px}
  .car .pr{font-size:18px}
  .act{flex-wrap:wrap;gap:10px}
  .act .pick{margin-left:0;width:100%;justify-content:center}
  .counter{flex-wrap:wrap;gap:6px 12px}
  .dial .row{flex-wrap:wrap;gap:2px 12px}

  /* The search field and its button: a 28px-wide button beside a shrinking
     input helps nobody. */
  .ask{flex-wrap:wrap}
  .ask input{flex:1 1 100%}
  .go{flex:1 1 100%}

  .mfig{gap:18px;flex-wrap:wrap}
  .rbar{gap:8px}
}

/* Very narrow, and older small phones. */
@media (max-width: 360px){
  .hero h1{font-size:27px}
  .car .nm{font-size:15.5px}
  .chip,.chk{font-size:11px}
}