/* ---------------------------------------------------------------------------
   The phone floor.

   The LAST stylesheet a storefront loads, after base and after the theme, so a
   rule here can raise a floor under any theme including one written later. It
   holds nothing decorative: only the two things a phone needs that a desktop
   design keeps forgetting.

   1. TYPE. A theme's smallest label is a tracked 0.6rem caption, which is 9.6px
      on a phone. That is under every legibility floor there is, and it is the
      size the storefront writes its figures' captions in. Nothing under 11.5px
      survives here.
   2. TOUCH. A link 23px tall is a link a thumb misses. Footer links, section
      links and the disclosure summaries were all in the low twenties.

   Written as one block per idea rather than one block per theme, because a
   seventh theme should inherit this without anybody remembering it exists.
   Found by scripts/mobile-audit.js, which is what will find the next ones.
   --------------------------------------------------------------------------- */

@media(max-width:620px){
  /* --- legibility ---------------------------------------------------------
     Only sizes, never weights or tracking: the look of these labels is the
     theme's business and this is only saying how small it may go. */
  .x-badge,.x-claims span,.x-leg label,.x-stats dd,
  .mk th,.mk-card-l,.rv-pair,.bl-tag,
  .stat-l,.s3-eye b,.s3-eye i,.s2-eye b,.s2-eye i,.s3-orb-tx em,.s2-route-tx i,.s3-route-tx i,
  .s2-cmp thead th,.s3-cmp thead th,.s2-cmp td,.s3-cmp td,
  .p-foot strong,.s3-foot-grid strong,.foot-col h2{font-size:.72rem}
  /* a table header that has to hold "Market cap" in a 72px column needs the
     room back that the larger type takes, so these lose their tracking */
  .mk th{letter-spacing:.02em}

  /* --- touch targets ------------------------------------------------------
     44px is the iOS guideline and 48 is Android's. These reach 40 and over
     without moving anything on the page, because the padding grows into space
     the rows already had. */
  .p-brand{min-height:44px}
  .p-foot a{padding-block:.45rem}
  .sec-link,.gh-feat2-go,.bl-more,.s3-orb{display:inline-flex;align-items:center;min-height:40px}
  details>summary{min-height:40px}
  .x-ref>summary,.x-adv>summary{display:flex;align-items:center}
  /* the language popover in the header is already a 36px pill and is sized
     against the header's own height, so it is left alone */
  .p-lang>summary{min-height:36px}
  .x-amt{min-height:40px}

  /* iOS zooms the whole page in when a focused field's type is under 16px, and
     it does not zoom back out. Every text field on a storefront was between
     14px and 15px. The amount field is bigger than this already and keeps its
     own size. */
  input:not(.x-amt),select,textarea{font-size:16px}
}