/* ============================================================================
   mobile.css — shared phone-layout conventions for the Hub surfaces
   Linked by: templates/admin.html, templates/dad.html, templates/member.html,
   templates/login.html, templates/join.html, templates/hub_member.html
   (link it AFTER each page's inline <style> so these conventions win).

   WHY THIS FILE EXISTS
   Mobile rules used to be copy-pasted into a per-template @media block. Every
   time a new column/card/input was added, someone had to remember to add a
   matching mobile rule too — and it was easy to forget, so phone layouts
   regressed. This file is the ONE place the shared conventions live. Add the
   documented utility classes to new markup and it "just works" on phones; no
   new @media block required.

   ----------------------------------------------------------------------------
   CONVENTION 1 — .hide-sm  (drop low-priority columns/elements on phones)
   ----------------------------------------------------------------------------
   Put class="hide-sm" on any <th>/<td> (or any element) that is NOT essential
   on a phone. Keep the 3–4 most important columns visible; hide the rest.
   Example — a new column on the hub Members table:

       <th class="hide-sm">First payout</th>
       ...
       <td class="hide-sm">${payoutCell}</td>

   RULE OF THUMB for a new Members-table column: if it is secondary info
   (email, "referred by", version, last check-in, soak status, timestamps),
   give it hide-sm. Only identity + live status + P&L stay visible on a phone.

   BREAKPOINTS (two, because the pages are different widths):
     * Narrow pages (dad.html max-width 760, member.html max-width 720):
       hide-sm collapses at <= 600px. This is the DEFAULT.
     * Wide pages (admin.html max-width 1080, many-column tables):
       add class="sm-wide" to <body> so hide-sm collapses earlier, at <= 720px,
       before the wide table can force horizontal scroll on a tablet.

   ----------------------------------------------------------------------------
   CONVENTION 2 — tap targets & phone-input rules
   ----------------------------------------------------------------------------
   * Form controls (input/select/textarea) must be >= 16px font on phones, or
     iOS Safari auto-zooms the page on focus. This file enforces that; you do
     NOT need to repeat font-size:16px on new inputs.
   * Interactive controls should stay comfortably tappable (~40px min height /
     ~44px is Apple's guidance). Buttons and .tabs links here get a min-height
     on phones. Give any new custom tap target enough padding to match.
   * Toasts/overlays are capped to the viewport width so they never overflow.
   ============================================================================ */

/* ---- CONVENTION 1: hide-sm ------------------------------------------------ */

/* Default (narrow pages: dad, member). */
@media (max-width: 600px) {
  body:not(.sm-wide) .hide-sm { display: none !important; }
}

/* Wide pages opt in with <body class="sm-wide"> (admin). */
@media (max-width: 720px) {
  body.sm-wide .hide-sm { display: none !important; }
}

/* ---- CONVENTION 2: tap targets & phone inputs ---------------------------- */

/* Stop iOS Safari from zooming when a small-font field gains focus. */
@media (max-width: 720px) {
  input[type=text],
  input[type=number],
  input[type=email],
  input[type=password],
  select,
  textarea {
    font-size: 16px;
  }

  /* Keep primary/secondary buttons and tab links thumb-friendly. */
  button,
  .tabs a {
    min-height: 40px;
  }

  /* Overlays never wider than the phone screen. */
  #toast { max-width: 90vw; }
}
