/*! it-touch-v1.css
   The touch and tablet pass, on thirty three pages. */
/* touch-and-tablet-pass */
/* ===== touch targets =====
   Prefixed with html body because several pages already set a 40px minimum inside their own
   coarse-pointer rules, and an equal-specificity rule later in the file was losing to them. */
@media (pointer:coarse), (max-width:1024px){
  html body button, html body select, html body input[type="button"], html body input[type="submit"],
  html body a.mini-cta, html body a.lc-cta, html body .chips button, html body .stx-seg button,
  html body .seg button, html body .modeBtn, html body .shapeBtn, html body .presetBtn,
  html body .cc-shape, html body .lc-actions button, html body .step, html body .qg-zoom-level,
  html body .h-8, html body .h-9, html body .h-10{
    /* !important is deliberate: several pages set a 40px minimum inside their own rules, and this
       stylesheet cannot outrank every one of them by specificity alone. A 44px touch target is
       the one thing worth forcing. */
    min-height:44px !important;
  }
  /* a fixed height on a flex item wins over min-height, so it has to be released too */
  html body .step, html body .h-8, html body .h-9, html body .h-10,
  html body .qg-zoom button, html body .qg-zoom-level{
    height:auto !important;
  }
  html body select{ padding-top:10px; padding-bottom:10px; }
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]){
    min-height:44px;
  }
}

/* ===== the salary page's chip bar =====
   It uses negative side margins to sit flush with the page edge, and the compensation was scoped
   to phones. It overflowed on tablets and on desktop alike, so the fix is unconditional. */
.chipbar{ flex-wrap:wrap; gap:10px; margin-left:-16px; margin-right:-16px;
  padding-left:16px; padding-right:16px; box-sizing:border-box; max-width:100vw; }
.chipbar .chips{ flex-wrap:wrap; min-width:0; }

/* ===== field rows line up =====
   Two fields side by side with labels of different lengths put their inputs at different heights
   the moment the longer label wraps. Reserving two lines for every label in a row keeps the
   inputs on the same line whatever the width, and costs nothing when the label is short. */
.f-row .f-lab, .stx-two .stx-lab, .cc-dims .cc-dim label{
  min-height:2.2em; display:flex; align-items:flex-end;
}
.f-row > div, .stx-two > div{ display:flex; flex-direction:column; }
.f-row > div > .f, .stx-two > div > .stx-field{ margin-top:10px; }

/* ===== tablet layout =====
   Two-column calculator panels are cramped rather than broken between 768 and 900, so they stack
   where the columns stop being readable rather than at an arbitrary phone width. */
@media (max-width:900px){
  .calc-grid, .calc-grid.two{ grid-template-columns:minmax(0,1fr); }
  .stx-two, .f-row, .cc-dims{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:600px){
  .stx-two, .f-row, .cc-dims{ grid-template-columns:minmax(0,1fr); }
}