/* ============================================================
   SuperFile — shared mobile optimization layer.

   Loads AFTER base.css AND each page's own stylesheet, so these
   rules win the cascade by source order (equal specificity, later
   wins). This is what lets us fix pages whose own CSS re-declares
   grids / the localbar WITHOUT a mobile breakpoint — e.g. partners
   redeclares `.pcards{grid-template-columns:repeat(3,1fr)}` after
   base.css, which would otherwise defeat base.css's mobile collapse.

   Everything here is scoped to phone widths (<=740px). Desktop is
   untouched, preserving pixel-parity with the designed site.
   ============================================================ */
@media (max-width:740px){

  /* Belt-and-suspenders: clip any stray horizontal overflow from
     full-bleed (100vw) elements so no page ever side-scrolls.
     `clip` (unlike `hidden`) doesn't create a scroll container,
     so it won't break position:sticky heroes. */
  html,body{overflow-x:clip}

  /* --- Local sub-nav: scrollable tab strip -------------------
     The localbar is `.t` (page title) + `.r` (tab links) laid out
     space-between. With 3-4 tabs that row runs wider than the phone
     and the tabs overlap the title (see /partners, /registry).
     Turn the whole bar into a single horizontally-scrollable strip:
     title first, tabs after, nothing overlaps, all reachable. */
  /* Only the legacy (non-enhanced) localbar becomes a scroll strip. The Apple-style
     localnav (.localbar.lb, from localnav.js) uses a chevron dropdown instead — and it
     must NOT be an overflow container, or iOS Safari clips the dropdown to the bar. */
  .localbar:not(.lb) .in{
    justify-content:flex-start;
    gap:20px;
    overflow-x:auto;
    scrollbar-width:none;               /* Firefox */
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style:none;            /* old Edge */
  }
  .localbar:not(.lb) .in::-webkit-scrollbar{display:none;width:0;height:0}
  .localbar:not(.lb) .t{flex:none}
  .localbar:not(.lb) .r{flex:none;gap:20px}
  /* keep each tab on one line + give it a ~44px tap target */
  .localbar:not(.lb) .r a{
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* --- Marketing grids collapse to one column ----------------
     base.css already collapses these at <=740px, but any page CSS
     that re-declares them without a media query (partners) would
     override that. Re-assert here from the last-loaded sheet. */
  .pcards,
  .tiers,
  .bens{grid-template-columns:1fr}

  /* the partner cards get comfortable phone padding once stacked */
  .pcard{padding:26px 22px}

  /* --- Data tables never clip: let their container scroll -----
     Wide registry (.tbl, 5 cols) and transparency (.ztbl) tables
     are pinned to their content width and exceed the phone. Their
     wrappers clip (registry `.tablecard{overflow:hidden}`), so the
     rightmost columns are unreachable. Switch the wrapper to
     horizontal scroll — swipe to see every column, nothing cut. */
  .tablecard,
  .trwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* keep the wide report table from being squeezed unreadable */
  .ztbl{min-width:560px}
}