/* Mobile application shell shared by the mechanic workspace and client portal. */
html,body{max-width:100%;overflow-x:clip}
body.tf-modal-open{overflow:hidden}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

.client-mobile-nav{display:none}

@media(max-width:760px){
  html{scroll-padding-top:72px}
  body{overscroll-behavior-y:none}
  button,a{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}

  /* Mechanic app: persistent top and bottom chrome with safe-area spacing. */
  #mechanicApp{min-height:100dvh;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  #mechanicApp .topbar{padding-top:calc(9px + env(safe-area-inset-top));min-height:calc(66px + env(safe-area-inset-top))}
  #mechanicApp .workspace-nav{height:calc(68px + env(safe-area-inset-bottom));padding-bottom:max(7px,env(safe-area-inset-bottom))}
  #mechanicApp .workspace-nav button{min-height:52px;min-width:56px}
  #mechanicApp .shell{padding-bottom:18px}
  #mechanicApp .btn,#mechanicApp button:not(.workspace-nav-icon){min-height:44px}
  #mechanicApp .tf-status{bottom:calc(82px + env(safe-area-inset-bottom));width:calc(100% - 28px);max-width:none;text-align:center}
  #mechanicApp .prep-dock{bottom:calc(80px + env(safe-area-inset-bottom))}
  #mechanicApp .project-jump-nav{scrollbar-width:none;overscroll-behavior-x:contain}
  #mechanicApp .project-jump-nav::-webkit-scrollbar{display:none}

  /* Client app: a thumb-reachable three-action dock. */
  #clientPortal{min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom));overscroll-behavior-y:contain}
  #clientPortal .portal-nav{padding-top:calc(12px + env(safe-area-inset-top));min-height:calc(62px + env(safe-area-inset-top));flex-wrap:nowrap}
  #clientPortal .portal-nav .public-brand strong{font-size:16px}
  #clientPortal .portal-nav .btn{min-height:42px;padding:10px 12px}
  #clientPortal .portal-shell{width:calc(100% - 28px);padding:28px 0 30px}
  #clientPortal .client-job,#clientPortal .cpm-car,#clientPortal .mg-card,#clientPortal .mg-hero,#clientPortal .mg-panel{border-radius:14px}
  #clientPortal .client-job{padding:19px}
  #clientPortal .client-update-grid{grid-template-columns:1fr 1fr}
  #clientPortal .client-update-grid>div:last-child{grid-column:1/-1}
  #clientPortal .client-mobile-nav{position:fixed;z-index:50;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);height:calc(68px + env(safe-area-inset-bottom));padding:5px 10px max(7px,env(safe-area-inset-bottom));border-top:1px solid #2f5449;background:rgba(22,48,42,.97);box-shadow:0 -10px 30px rgba(0,0,0,.2);backdrop-filter:blur(16px)}
  #clientPortal .client-mobile-nav button{display:flex;min-width:0;min-height:52px;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:0;border-radius:9px;background:transparent;color:#bccbc2;font:600 9px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
  #clientPortal .client-mobile-nav button i{font:500 18px/1 Inter,system-ui,sans-serif}
  #clientPortal .client-mobile-nav button.active{background:#264a40;color:#efe7d2}

  /* Forms behave like native bottom sheets and never hide behind browser UI. */
  #accessModal.diagnostic,#requestModal.diagnostic,#addVehicleModal.diagnostic,#mgAddModal.diagnostic,#mechanicApp .diagnostic{place-items:end center;padding:0;background:rgba(12,14,16,.68)}
  #accessModal .tf-sheet,#requestModal .tf-sheet,#addVehicleModal .tfa-sheet,#mgAddModal .tfa-sheet,#mechanicApp .diag-card{width:100%;max-width:none;max-height:94dvh;margin:0;overflow:auto;border-radius:18px 18px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom))}
  #accessModal .client-signup-action{align-items:flex-start;flex-direction:column;gap:7px}
}

@media(max-width:390px){
  #mechanicApp .workspace-nav{padding-inline:3px}
  #mechanicApp .workspace-nav button{min-width:0;padding-inline:5px}
  #mechanicApp .brand-mark{width:30px;height:30px}
  #mechanicApp .brand-name{font-size:15px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}