/* mobile-responsive.css — site-wide mobile floors (feature 008)
   Loaded by portal pages that needed a touch-target + body-text bump.
   All rules scoped under @media (max-width: 600px) so desktop/tablet untouched,
   plus a 601-860px tablet band (wave 4, fable-review 09-DESIGN-SYSTEM.md §7.1/
   §8.1 "the floor must extend to the 601-860px tablet band - currently a gap").
   Cache-bust: ?v=20260703a (wave 4 tablet band). */

@media (max-width: 600px) {

  /* ——— wave 2: touch-target floor — 40x40 px minimum hit area ———
     Carve-outs (per FR-020):
       - inline prose anchors inside <p> and <li> (would force "ladder" line-heights)
       - persistent header toolbar icons (.hdr-sticky descendants — header chrome is tight by necessity)
     Selector list reads "any interactive element that is NOT inline-in-prose AND NOT in the header bar". */
  a:not(p a):not(li a):not(.hdr-sticky a):not(.menu-drawer a):not(footer a):not(nav.site-nav a),
  button:not(.hdr-sticky button):not(.menu-drawer button),
  [role="button"]:not(.hdr-sticky [role="button"]),
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 40px;
    min-width: 40px;
    padding-block: max(8px, 0.5em);
    padding-inline: max(10px, 0.6em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* form text inputs need comfortable tap-area too (single-line height ≥ 40) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    min-height: 40px;
    padding: 10px 12px;
    box-sizing: border-box;
    font-size: 16px; /* iOS won't auto-zoom on focus when font-size >= 16px */
  }

  /* ——— wave 3: body-text floor — 13 px minimum for prose, 12 px for fine print ——— */
  .portal-content p,
  .portal-content li,
  main p,
  main li,
  .prose p,
  .prose li,
  article p,
  article li,
  .body-prose p,
  .body-prose li {
    font-size: max(13px, 1em);
    line-height: 1.55;
  }

  /* fine print stays at 12 px (notch below body) */
  .note,
  .caption,
  .footnote,
  .legal,
  small,
  .small-print,
  .pillar-note,
  .footer-note,
  .road-foot-note {
    font-size: max(12px, 0.85em);
    line-height: 1.5;
  }
}

/* --- wave 4: tablet touch-target band (601-860px) --- */
/*
   09-DESIGN-SYSTEM.md §7.1 2.5.8 Target size + §8.1: the 40px floor above
   stops at 600px, leaving 601-860px (small tablets, large phones in
   landscape) unstyled. Same selector list and carve-outs as the mobile
   band, so any element already excluded there stays excluded here. */
@media (min-width: 601px) and (max-width: 860px) {
  a:not(p a):not(li a):not(.hdr-sticky a):not(.menu-drawer a):not(footer a):not(nav.site-nav a),
  button:not(.hdr-sticky button):not(.menu-drawer button),
  [role="button"]:not(.hdr-sticky [role="button"]),
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 40px;
    min-width: 40px;
    padding-block: max(8px, 0.5em);
    padding-inline: max(10px, 0.6em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    min-height: 40px;
    padding: 10px 12px;
    box-sizing: border-box;
    font-size: 16px;
  }
}