/* RESPONSIVE_V1 (29-Oct-2026): shell-wide phone + tablet layer for the Gauntlet console (pairs with mod/mobileapp.js).
   Rules live in three bands so the desktop stays exactly as it was:
     (max-width:820px)                    = the drawer layout (phones, tablets in portrait): bottom tab bar, safe areas
     (max-width:820px),(pointer:coarse)   = touch sizes: 40px+ tap targets
     (max-width:640px)                    = phones: 16px fields (no iPhone zoom), tables as cards, bottom-sheet dialogs
   Notes kept from the console: the phone drawer needs #shell{z-index:auto} (set in the console) or the scrim covers it;
   z order here: tab bar 28 < scrim 29 < drawer 30 < help button 45 < dialogs 60 < toast 90. */
:root{--gx-tabh:58px;--gx-sab:env(safe-area-inset-bottom,0px);--gx-sat:env(safe-area-inset-top,0px);--gx-sal:env(safe-area-inset-left,0px);--gx-sar:env(safe-area-inset-right,0px)}
#gxTabbar{display:none}
.help-search svg{pointer-events:none}   /* the search icon sits over the field; taps go to the field */

/* ---------- drawer layout: app shell ---------- */
@media (max-width:820px){
  .main{min-height:100vh;min-height:100dvh}
  .topbar{padding-top:calc(10px + var(--gx-sat));padding-bottom:10px;padding-left:calc(14px + var(--gx-sal));padding-right:calc(14px + var(--gx-sar))}
  .topbar .lft{flex:1 1 auto}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sidebar{padding-top:calc(16px + var(--gx-sat));padding-bottom:calc(16px + var(--gx-sab));padding-left:calc(12px + var(--gx-sal));overscroll-behavior:contain;max-width:86vw}
  .content{padding-left:calc(14px + var(--gx-sal));padding-right:calc(14px + var(--gx-sar))}
  body.gx-tabs #gxTabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:28;height:calc(var(--gx-tabh) + var(--gx-sab));padding:0 calc(4px + var(--gx-sar)) var(--gx-sab) calc(4px + var(--gx-sal));
    background:var(--surface);background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(18,22,40,.06)}
  #gxTabbar a,#gxTabbar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:5px 2px;border:0;border-radius:12px;background:none;
    color:var(--ink-faint);font:600 11px/1.15 var(--fb);letter-spacing:.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0 2px}
  #gxTabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #gxTabbar svg{width:22px;height:22px;flex:0 0 22px;padding:0;border-radius:999px;transition:background .15s}
  #gxTabbar .on{color:var(--accent-text)}
  #gxTabbar .on svg{background:var(--accent-soft);box-sizing:content-box;padding:2px 12px;margin:-2px 0}
  #gxTabbar a:active,#gxTabbar button:active{background:var(--surface-2)}
  body.gx-tabs .content{padding-bottom:calc(var(--gx-tabh) + var(--gx-sab) + 76px)}
  body.gx-tabs #supBtn{bottom:calc(var(--gx-tabh) + var(--gx-sab) + 12px)!important;right:calc(14px + var(--gx-sar))!important;min-height:44px}
  body.gx-tabs #supPanel{bottom:calc(var(--gx-tabh) + var(--gx-sab) + 66px)!important;height:min(540px,calc(100dvh - var(--gx-tabh) - var(--gx-sab) - var(--gx-sat) - 140px))!important}
  body:has(#sidebar.open) #supBtn,body:has(#sidebar.open) #supPanel{display:none!important}   /* menu open: the help bubble waits */
  body.gx-tabs #toast{bottom:calc(var(--gx-tabh) + var(--gx-sab) + 14px)}
  .page-head{gap:10px}
  .page-head h1{font-size:22px}
  .stage,.stage-empty{min-height:0}
}

/* ---------- touch sizes ---------- */
@media (max-width:820px),(pointer:coarse){
  .hamb,.iconbtn{width:42px;height:42px}
  .avatar{width:40px;height:40px}
  .searchbtn{min-height:42px;min-width:42px;justify-content:center}
  :root .btn{min-height:42px;min-width:40px}
  :root .btn.sm{min-height:40px}
  .side-foot a[href]{min-height:40px;display:flex!important;align-items:center}
  .nav a,.side-foot .nav-a{min-height:44px}
  .seg button,.tc-modes button,.help-cats button{min-height:40px}
  .modal .x{width:40px;height:40px}
  .demo-creds .row{min-height:40px;align-items:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:0 0 20px}
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:40px;align-items:center}
  summary{min-height:40px;display:list-item;padding:9px 0}
  .tbl td{padding-top:10px;padding-bottom:10px}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  /* iPhone zooms into any field under 16px; keep them all at 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),select,textarea{font-size:16px!important}
  /* dialogs = bottom sheets that never run off the screen; the button row stays in reach */
  .overlay{align-items:flex-end}
  .modal{max-height:calc(100dvh - var(--gx-sat) - 24px);padding:20px 16px calc(18px + var(--gx-sab));border-radius:18px 18px 0 0;overscroll-behavior:contain}
  .modal>form>div:last-child:has(> .btn),.modal>div:last-child:has(> .btn.primary){position:sticky;bottom:calc(-18px - var(--gx-sab));z-index:2;background:var(--surface);margin:12px -16px 0;padding:12px 16px calc(12px + var(--gx-sab));border-top:1px solid var(--line);flex-wrap:wrap}
  .rowact{white-space:normal}
  .tblwrap{-webkit-overflow-scrolling:touch}
  /* tables as cards (labels come from mobileapp.js: td[data-label]) */
  .gx-cardwrap{overflow:visible!important;max-height:none!important;border:0!important;background:none!important;box-shadow:none!important}
  table.gx-cards,table.gx-cards>tbody{display:block;width:100%;min-width:0!important}
  table.gx-cards>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.gx-cards>tbody>tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;padding:14px 14px 12px;margin:0 0 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r,14px);box-shadow:var(--shadow)}
  table.gx-cards>tbody>tr>td{display:block;padding:0!important;border:0!important;text-align:left!important;min-width:0;width:auto!important;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere;font-size:14px}
  table.gx-cards>tbody>tr>td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
  table.gx-cards>tbody>tr>td[data-label=""]::before{display:none}
  table.gx-cards>tbody>tr>td.gx-first{grid-column:1/-1;font-weight:600;font-size:15px}
  table.gx-cards>tbody>tr>td.gx-first::before{display:none}
  table.gx-cards>tbody>tr>td.gx-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding-top:4px!important}
  table.gx-cards>tbody>tr>td.gx-act::before{display:none}
  table.gx-cards>tbody>tr>td.gx-act>*{margin-left:0!important}
  table.gx-cards>tbody>tr>td:empty{display:none}
  table.gx-cards>tbody>tr.gx-full{display:block}
  table.gx-cards>tbody>tr.gx-full>td{display:block}
  table.gx-cards>tbody>tr.gx-full>td::before{display:none}
}
@media print{#gxTabbar{display:none!important}}