/* tools-mobile.css — mobile hardening for the calculator/tool pages.
   Linked AFTER each page's inline <style> so it wins on equal specificity.
   July 2026. */

/* ---------------------------------------------------------------
   1. Stop iOS Safari zooming the page when a field is focused.
      Safari zooms whenever a focused control's font-size is < 16px.
      The tool pages use .95rem (15.2px), which trips it every time.
   --------------------------------------------------------------- */
@media (max-width: 900px){
  input, select, textarea, button{ font-size: 16px; }
  .qform input[type=text],
  .qform input[type=email],
  .qform textarea,
  .modal input[type=text],
  .modal input[type=email],
  .tool-card select,
  .tool-card input[type=number],
  .ctrl select,
  .ctrl input[type=number],
  .field select,
  .field input[type=number]{ font-size: 16px; }
}

/* ---------------------------------------------------------------
   2. Touch targets. Apple's floor is 44px; the tool buttons were
      35-39px tall.
   --------------------------------------------------------------- */
@media (pointer: coarse){
  button,
  .tbtn,
  input[type=submit],
  input[type=button]{ min-height: 44px; }

  .tool-card input[type=number],
  .tool-card select,
  .ctrl select,
  .ctrl input[type=number],
  .field select,
  .field input[type=number],
  .qform input,
  .modal input{ min-height: 44px; }

  .tbtn-row{ gap: 10px; }
  .tbtn-row .tbtn{ flex: 1 1 auto; }
}

/* ---------------------------------------------------------------
   3. Sliders. The native range control is a 16px-tall strip with a
      ~16px thumb. On a coarse pointer we give it a 44px hit area and
      a 28px thumb, without changing how it looks on desktop.
      Note: -webkit-appearance:none disables accent-color, so the
      track and thumb are painted explicitly here.
   --------------------------------------------------------------- */
@media (pointer: coarse){
  input[type=range]{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height: 6px;
    border-radius: 999px;
    background: #d9d0bd;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -11px;            /* centres a 28px thumb on a 6px track */
    border-radius: 50%;
    background: var(--teal);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  input[type=range]::-moz-range-track{
    height: 6px;
    border-radius: 999px;
    background: #d9d0bd;
  }
  input[type=range]::-moz-range-thumb{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--teal);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  input[type=range]:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------
   4. Tooltips. .tiptext is a fixed 250px box centred on a 17px "?"
      icon. On a phone that pushes the whole document wider than the
      screen (Life-Insurance rendered a 424px layout on a 360px
      device). Below 700px we anchor the tooltip to the label row
      instead, so it spans the field and can never leave the screen.
   --------------------------------------------------------------- */
.label-row{ position: relative; }

@media (max-width: 700px){
  .tip{ position: static; }
  .tip .tiptext{
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    bottom: calc(100% + 12px);
  }
  .tip .tiptext::after{
    left: auto;
    right: 10px;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------
   5. Tap-to-type. The bold value above each slider becomes an
      editable field (see tools-mobile.js). Styling only.
   --------------------------------------------------------------- */
.ctrl .val[data-tappable]{
  display: inline-block;   /* hug the number instead of the whole card */
  width: auto;
  cursor: text;
  border-bottom: 1px dashed rgba(36,85,89,.45);
  padding-bottom: 1px;
  -webkit-tap-highlight-color: transparent;
}
/* Roth / Trump float their readout to the right of the label; keep that. */
.ctrl .val[data-tappable]{ float: none; }
.ctrl label .val[data-tappable]{ float: right; }
.ctrl .val[data-tappable]:hover,
.ctrl .val[data-tappable]:focus-visible{
  border-bottom-color: var(--gold);
  outline: none;
}
.val-edit{
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 6px;
  padding: 4px 8px;
  width: 9ch;
  max-width: 100%;
  min-height: 34px;
  vertical-align: middle;
}
@media (pointer: coarse){
  .val-edit{ min-height: 44px; }
}
.val-edit:focus{ outline: none; }