/* ══════════════════════════════════════════════════════════════════════════
   gxmobile.css v1.1 — GLOBAL MOBILE FOUNDATION (s-audit, #691 Phase 1; v1.1 #1800 FullCalendar exclusion)
   Loaded LAST by every page. Wins on specificity where it must.
   Nick ruling 2026-09-08: full mobile pass, every page, all best practices.

   Rules:
   1. No horizontal scroll, ever.
   2. Every tap target ≥ 44×44 (Apple HIG / WCAG 2.5.5).
   3. Body text ≥ 15px, labels ≥ 12px. iOS zooms inputs < 16px — so inputs are 16px.
   4. Tables scroll inside a container, never push the page.
   5. Fixed elements stack in known corners — no collisions.
   6. Forms stack vertically, full width.
   7. Modals fit the viewport and scroll internally.
   8. Media never overflows.
   Breakpoint: 760px (matches gxnav.js / webnav.js).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. NEVER SCROLL SIDEWAYS ─────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}

/* ── 2. TABLES — scroll the table, not the page ────────────────────────────── */
.gx-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gx-scroll>table{min-width:560px}
.gx-scroll::-webkit-scrollbar{height:6px}
.gx-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

/* ── 3. FIXED-ELEMENT CORNERS — assigned once, honored everywhere ──────────── */
/* Top-right cluster: help (?) · bell · identity. Already positioned by their scripts. */
/* Bottom-right: gxnav FAB (mobile menu). Bottom-left: beta/version stamp.      */
/* Top-center: demoband. Nothing else may claim these corners.                   */

/* ═══════════════════════════════ MOBILE ════════════════════════════════════ */
@media (max-width:760px){

  /* ── TYPE FLOOR ──────────────────────────────────────────────────────────── */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px;line-height:1.5}
  h1{font-size:clamp(26px,7.5vw,34px)!important;line-height:1.1!important;overflow-wrap:anywhere}
  h2{font-size:clamp(20px,5.8vw,26px)!important;line-height:1.15!important}
  h3{font-size:clamp(17px,4.8vw,20px)!important}
  small,.small,.lbl,.label,.meta,.hint,.note,.sub,.tlbl,.mono,.eyebrow{font-size:max(12px,1em)}
  /* GigEx design system uses 9–11px mono labels on desktop. On a phone that is unreadable.
     Lift every inline/declared size under 12px to 12px. Matches the most common patterns. */
  [style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],
  [style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size: 9px"],
  [style*="font-size: 10px"],[style*="font-size: 11px"]{font-size:12px!important}
  .fig .l,.shead,.eyebrow,.rmeta,.cnum,.cmath,.wnote,.src,.attrib,.verdict,.slab,.paykey,
  .vizhead,.tracelabels,.chartkey,.yrtbl th,.scale th,.tbl th,.otbl th,.comp th,
  .rval small,.step .sn,.wt1,.wt2,.wt3,.wtag,.wdesc,.ph{font-size:12px!important}
  .gxtopnav .gxg .ch{font-size:12px}
  /* letter-spacing that looks fine at 10px looks gappy at 12px — pull it in */
  [style*="letter-spacing:.16em"],[style*="letter-spacing:.18em"],[style*="letter-spacing:.15em"]{letter-spacing:.08em!important}

  /* ── TAP TARGETS ─────────────────────────────────────────────────────────── */
  button,.btn,[role="button"],
  a.btn,a.navlogin,a.gx-face,.sitenav a,.gxg,.gxdeckbtn,.gxfab,
  input[type="button"],input[type="submit"],input[type="reset"],
  select,summary,.tab,.tabs button,.pill,.chip,.card-btn,.row-btn{
    min-height:44px;
    padding-top:max(10px,var(--gx-pt,10px));padding-bottom:max(10px,var(--gx-pb,10px));
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    touch-action:manipulation;
  }
  /* Icon-only round buttons stay square, not stretched */
  .gxfab,.gxhelp-fab,.gxbell-btn,.close,.x,[aria-label="Close"],[aria-label="close"]{
    min-width:44px;min-height:44px;padding:0;
  }
  /* Links inside body text keep flowing — only standalone action links grow */
  p a,li a,td a,.prose a,.faq-a a{min-height:0;display:inline;padding:0}
  /* Brand / wordmark links in headers */
  .gxbrand,.brand,.wordmark{min-height:44px;display:inline-flex;align-items:center}
  /* Quick-links panel & tour trigger */
  .gxql a,.gxtour-trigger{min-height:44px;display:inline-flex;align-items:center;padding:6px 10px}
  /* Footer nav links (marketing pages) */
  .footnav a{min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  /* Action links: getting-started .go, cockpit shortcut ▸ links, connections chips */
  a.go,.cs-cta,.cs-chip,a.addCredBtn,
  a[href*="card"],a[href*="perks"],a[href*="sync"],a[href*="checklist"],
  a[href*="getting-started"]{
    min-height:44px;display:inline-flex;align-items:center;padding:10px 12px;
  }
  /* Hospital dashboard cost/fee inline action links */
  .costline a,.feenote a{min-height:44px;display:inline-flex;align-items:center;padding:8px 0}
  /* Platform pillar nav & create-account door link */
  .pillar-nav a,.pup a{min-height:44px;display:inline-flex;align-items:center;padding:10px 12px}
  /* Tap feedback */
  button:active,.btn:active,[role="button"]:active{transform:scale(.98)}

  /* ── FORMS — stack and stretch ───────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,textarea{
    width:100%;max-width:100%;font-size:16px;  /* 16px stops iOS auto-zoom */
    min-height:46px;padding:11px 13px;
  }
  textarea{min-height:110px}
  label{display:block;margin-bottom:6px}
  .form,.form-row,.frow,.field-row,.inline-form,.filters,.toolbar,.controls{
    flex-direction:column!important;flex-wrap:wrap!important;align-items:stretch!important;
  }
  .form>*,.form-row>*,.frow>*{width:100%!important;max-width:100%!important;flex:1 1 100%!important}
  form button[type="submit"],.form .btn,.form button{width:100%}

  /* ── GRIDS — collapse to one column ──────────────────────────────────────── */
  /* #1800: FullCalendar internals (.fc-timegrid-body, .fc-timegrid-cols, .fc-scrollgrid, .fc-daygrid-*) match these
     wildcards and collapsed every calendar to ~5px on phones. :not(:where(...)) excludes the .fc subtree with ZERO
     specificity change, so no other page's cascade moves. */
  [class*="grid"]:not(.dkgrid):not(.gxfold-in):not(:where(.fc,.fc *)),
  [class*="cols"]:not(:where(.fc,.fc *)),[class*="columns"]:not(:where(.fc,.fc *)),
  .tiles,.cards,.stats,.kpis,.figures,.metrics,.row-2,.row-3,.row-4,.two-col,.three-col{
    grid-template-columns:1fr!important;
    display:grid;gap:12px;
  }
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* Stats / KPI tiles look better 2-up on phones */
  .stats,.kpis,.figures,.metrics,.mstat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ── FLEX ROWS — wrap instead of overflow ────────────────────────────────── */
  .crow,.mrow,.row,.bar,.header-row,.title-row,.actions,.btn-row,.button-row,.split,.between{
    flex-wrap:wrap!important;gap:10px;
  }
  .crow>*,.mrow>*,.actions>*,.btn-row>*,.button-row>*{min-width:0}

  /* ── CARDS & PANELS — edge-to-edge ───────────────────────────────────────── */
  .card,.panel,.tile,.box,.sheet,.section{
    padding:14px!important;border-radius:12px;margin-left:0!important;margin-right:0!important;
  }
  .wrap,.container,.content,.main,main,.page,.inner{
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
    max-width:100%!important;
  }

  /* ── TABLES — force scroll wrapper behaviour even when not wrapped ───────── */
  /* #1800: FullCalendar lays out its own tables; the block/560px-min rules below must not reach inside .fc. */
  table:not(:where(.fc,.fc *)){display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table:not(:where(.fc,.fc *))>thead,table:not(:where(.fc,.fc *))>tbody,table:not(:where(.fc,.fc *))>tfoot{display:table;width:100%;min-width:560px}
  .gx-scroll>table{display:table;overflow:visible}
  /* #1743: restore native row-group roles so thead/tbody share one column grid (display:table above split them). */
  .gx-scroll>table>thead{display:table-header-group;min-width:0}
  .gx-scroll>table>tbody{display:table-row-group;min-width:0}
  .gx-scroll>table>tfoot{display:table-footer-group;min-width:0}
  th:not(:where(.fc,.fc *)),td:not(:where(.fc,.fc *)){padding:10px 8px;white-space:nowrap}
  td.wrap,th.wrap{white-space:normal}

  /* ── MODALS — fit the screen ─────────────────────────────────────────────── */
  .modal,[role="dialog"],.dialog,.overlay>.box,.gxdlg,.sheet-modal{
    max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;
    margin:10px auto!important;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:14px;
  }
  .modal .close,.modal .x,[role="dialog"] .close{position:sticky;top:0;float:right;z-index:2}

  /* ── FIXED ELEMENTS — keep them out of each other's way ──────────────────── */
  /* Bottom-left stamps must not collide with the bottom-right FAB */
  .pagestamp,.betastamp,.beta-stamp,.mockstamp,.demo-stamp,[class*="stamp"]{
    left:10px!important;right:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    font-size:12px!important;padding:5px 9px!important;max-width:44vw;
  }
  .gxfab{right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
  /* Help panel and deck take the full screen on phones */
  .gxhelp-panel,.gxdeck{width:100vw!important;max-width:100vw!important;right:0!important;left:0!important}

  /* ── NAV ─────────────────────────────────────────────────────────────────── */
  .gxtop-inner{padding-right:110px!important}            /* room for ? and bell */
  .gxtopnav .curpill{max-width:40vw;overflow:hidden;text-overflow:ellipsis}
  .gx-webhdr{grid-template-columns:auto 1fr auto!important;gap:10px!important;padding:10px 14px!important}
  .gx-webhdr .brand{font-size:18px!important;min-height:44px;display:inline-flex;align-items:center}
  .onav{flex-wrap:wrap!important;padding:10px 14px!important;gap:8px!important}
  .onav a,.onav button{min-height:44px}
  /* Portal header brand */
  .gxbrand{min-height:44px;display:inline-flex;align-items:center}

  /* ── FOOTER NAV — marketing pages ──────────────────────────────────────── */
  .footnav a,.footbottom a{min-height:44px;display:inline-flex;align-items:center;padding:4px 0}

  /* ── QUICK-LINKS PANEL (gxql) + tour trigger ───────────────────────────── */
  .gxql a,.gxtour-trigger{min-height:44px;display:inline-flex;align-items:center;padding:6px 10px}

  /* ── PAGE-SPECIFIC TAP FIXES (cockpit, connections, getting-started, hospital) ── */
  /* Cockpit shortcut links inside headings (▸ YOUR CARD, ▸ PERKS, etc.) + meta links */
  h4 a,.meta a,.sysrow a{min-height:44px;display:inline-flex;align-items:center;padding:4px 0}
  /* Connections page CTAs */
  .cs-cta,.cs-chip{min-height:44px;display:inline-flex;align-items:center}
  /* Getting-started action links */
  a.go,.item a.go{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px}
  /* Sidebar upload button */
  .addCredBtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Hospital wordmark + cost links */
  .wordmark{min-height:44px;display:inline-flex;align-items:center}
  .costline a,.feenote a{min-height:44px;display:inline-flex;align-items:center;padding:4px 0}
  /* Breadcrumbs (platform/* pages), foot sign-in, topbar back, standalone brand */
  .crumb a,.crumb,.foot a,.topbar a,.brand{min-height:44px;display:inline-flex;align-items:center;padding:4px 0}
  /* Remaining one-off action links found in sweep (9 pages) */
  a.back,.back a,.crosslink,.rp-banner a,.redeem,.prefill-note a,
  .empty a,.upload a,.top a{min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  /* Final 3: inline-styled links with no class hooks */
  a[href*="getting-started"],a[href*="expirations"],a[href*="cockpit"]:not(.gxql a){min-height:44px!important;display:inline-flex;align-items:center}
  /* Gig offer card CTAs (opportunities page) */
  .offer-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* ── HIDE THINGS THAT ONLY MAKE SENSE ON DESKTOP ─────────────────────────── */
  .desktop-only,.hide-mobile,.no-mobile,[data-desktop-only]{display:none!important}
  .mobile-only,.show-mobile{display:block!important}

  /* ── SAFE AREA (notch / home indicator) ──────────────────────────────────── */
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ══════════════════════════════ DESKTOP ════════════════════════════════════ */
@media (min-width:761px){
  .mobile-only,.show-mobile{display:none!important}
}

/* ── REDUCED MOTION — respect the OS setting ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}