/* ========================================================================
   MOBILE POLISH (UI-2, part A, Oct 2026)
   Linked by the four calculators in scope: Property vs Shares, Mortgage,
   LMI and Offset vs Shares, after their own stylesheets and before
   css/calculators.css, which stays last. Retirement does not link it
   (RET-1a/1b own that page), so nothing here reaches it.
   Its own file so the rules stay apart from UI-1's edits to tepuy.css,
   PvS_style.css, calculators.css and site-chrome.css.
   ------------------------------------------------------------------------ */

/* ── 1. Touch-sized sidebar controls (item 2) ────────────────────────────
   Measured before at 320 and 390px: every visible sidebar control on the
   four pages was under 44px tall (text fields and selects 29.6-31.6px, card
   headers 38-40px, Save/Load/Share 26.2-28.2px, the mode pills 22px, the
   PvS radio pills 24.9px, LMI's radios 16.8px, sliders 21.8px). The text
   fields were already 16px (css/tepuy.css's phone rule), so iOS does not
   zoom; this adds the height.
   Same media query as that 16px rule: narrow viewports, plus a primary
   touch pointer at any width (landscape phones, tablets). A mouse at 769px
   and up keeps the desktop sizes. min-height, not height: it wins over the
   pages' own `height: ... !important` without needing to restate them, and
   it never shrinks anything already taller. */
@media (max-width: 768px), (pointer: coarse) {
  body.calc .calc-aside :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    button,
    .card-header
  ) {
    min-height: 44px;
  }

  /* Radios and checkboxes: the tap target is the option's label, so the
     label row gets the height. PvS's pill radios are visually hidden and
     their <label> is the pill; LMI's radios and Mortgage's checkbox sit in a
     row with their label. */
  body.calc .calc-aside .radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  body.calc .calc-aside :is(.radio-row, .check-row) {
    min-height: 44px;
  }
  body.calc .calc-aside .radio-row label {
    display: inline-flex !important;
    align-items: center;
    align-self: stretch;
    /* LMI's property-category row gives every label in it a 0.25rem bottom
       margin (css/tepuy.css), which took the stretched option label to 40px. */
    margin-bottom: 0 !important;
  }

  /* Sliders: the input box becomes the 44px hit area and the pill it drew
     (measured before: 18px tall, border-box, 8px padding, a 1px
     --sidebar-input-border border, the #c8ddd3 fill, 99px radius; the
     css/simulators.css rule with tepuy.css's field border) moves to the
     track, so the slider looks the same: 18px pill, 14px thumb centred in it
     and inset 9px from each end (1px border + 8px track padding, as the
     input's own 1px border + 8px padding did), so the thumb travels the same.
     css/simulators.css styles the input with !important, hence !important. */
  body.calc .calc-aside input[type="range"] {
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.calc .calc-aside input[type="range"]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    height: 18px;
    padding: 0 8px;
    border: 1px solid var(--sidebar-input-border, #6c9279);
    border-radius: 99px;
    background: var(--inp-border, #c8ddd3);
  }
  body.calc .calc-aside input[type="range"]::-webkit-slider-thumb {
    margin-top: 1px; /* (16px inside the border - 14px thumb) / 2 */
  }
  body.calc .calc-aside input[type="range"]::-moz-range-track {
    box-sizing: border-box;
    height: 18px;
    border: 1px solid var(--sidebar-input-border, #6c9279);
    border-radius: 99px;
    background: var(--inp-border, #c8ddd3);
  }
}

/* ── 2. Phone action bar (item 3) ────────────────────────────────────────
   js/mobile-action-bar.js mounts one bar per page: the page's own Run /
   Calculate action and, once the page has computed, its headline result
   (copied from the page's own element, never recomputed). Below 600px only.
   The bar is position:fixed, so mounting it moves nothing; the space it
   covers is reserved by this padding from the first paint, so the end of
   the page (footer) is never hidden under it. */
.mobile-action-bar { display: none; }

@media (max-width: 599.98px) {
  /* A field focused near the bottom of the screen scrolls clear of the bar
     instead of under it (WCAG 2.4.11). */
  :root:has(> body.calc) {
    scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  body.calc {
    --mab-h: 60px;
    padding-bottom: calc(var(--mab-h) + env(safe-area-inset-bottom, 0px));
  }
  body.calc .mobile-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950; /* under the navbar's open menu, dialogs and the consent gate */
    box-sizing: border-box;
    height: calc(var(--mab-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bone, #f3f1e7);
    border-top: 1px solid color-mix(in srgb, var(--ink, #0e1512) 14%, transparent);
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--ink, #0e1512) 8%, transparent);
    font-family: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif;
  }
  body.calc .mobile-action-bar__result {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink, #0e1512);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body.calc .mobile-action-bar__result:empty::before {
    content: attr(data-empty);
    font-weight: 400;
    color: color-mix(in srgb, var(--ink, #0e1512) 70%, transparent);
  }
  body.calc .mobile-action-bar__run {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 96px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--cardH-bg, #1a5236);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
  body.calc .mobile-action-bar__run:focus-visible {
    outline: 3px solid var(--clay, #be6a3e);
    outline-offset: 2px;
  }
  /* While a modal is up (consent gate, scenario dialog), the page under it
     is inert; so is the bar. */
  body.consent-gate-open .mobile-action-bar { display: none; }
}