/* Minimum legible sizes on a phone.
 *
 * From the 390px audit of 9 Oct 2026 (tools/mobile-audit.js). No page scrolls
 * sideways, which is the fault that makes a page feel broken. What it did find
 * was text at 10 to 11.5px on about ten pages and tap targets under 44px on
 * about twelve, against Mark's standing rule that every page renders properly
 * on mobile.
 *
 * Scoped to phone widths only, so nothing about the desktop layout moves. Sizes
 * are raised to a floor rather than restyled: the hierarchy the designer chose
 * is kept, the bottom of it is just lifted off the floor.
 *
 * 12px is the practical floor for body-adjacent text on a phone. 44px is the
 * long-standing minimum comfortable touch target. Height is relaxed rather than
 * forced square, because forcing width would break inline navigation rows.
 */
@media (max-width: 430px) {

  /* --- legibility floor ------------------------------------------------- */
  .v-sub, .vm-k, .ui-src, .step-tag, .jc, .rail-tip, .opt-tag, .lbl, .sub,
  .eyebrow, .foot, .paysec, .navsub, .prov, .disc,
  #rail-tip-text, #step-portfolio-sub, #step-loa-sub, #resetPill {
    font-size: 12px !important;
    line-height: 1.45;
  }

  /* Table headers and form labels sat at 11 to 11.5px. A label a thumb is
     about to type under is the worst place to save two pixels. */
  th, label { font-size: 12px !important; }

  /* Dashboard and comparison chrome, found on a second pass once the first
     round of selectors was measured rather than guessed at. The status and
     asset pills were the smallest text anywhere on the platform at 10px. */
  .delta, .filter-label, .pc-name, .region, .status, .asset-pill,
  .head, .ribbon {
    font-size: 12px !important;
  }

  /* --- touch targets ---------------------------------------------------- */
  /* Padding rather than a hard height, so a button that already fits is not
     stretched and existing vertical rhythm survives. */
  .hrnav, .hrnav.pill, .brand, .navback, .chip, .btn-sel, .lnk,
  button.on, a.paid {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The footer "Show" control and the long full-width links were 27 to 28px
     tall. They are full width already, so only height is short. */
  button, .footlink, .foot a { min-height: 44px; }
}