/* R5.6: VisualViewport guard. Handles mobile browsers whose layout viewport remains desktop-wide after zoom/accessibility settings. */
html.r56-narrow #appView.app:not(.hidden){width:100vw!important;max-width:100vw!important;overflow-x:hidden!important}
html.r56-narrow #appView.app:not(.hidden) .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:'brand role' 'manage profile logout'!important;padding:14px!important;gap:8px!important}
html.r56-narrow #appView.app:not(.hidden) .topbar .logo{grid-area:brand}.r56-narrow #appView .role-chip{grid-area:role}.r56-narrow #appView #managementLink{grid-area:manage}.r56-narrow #appView #profileBtn{grid-area:profile}.r56-narrow #appView #logoutBtn{grid-area:logout}.r56-narrow #appView .whoami,.r56-narrow #appView .spacer{display:none!important}.r56-narrow #appView #managementLink,.r56-narrow #appView #profileBtn,.r56-narrow #appView #logoutBtn{width:100%!important;font-size:10px!important;padding:9px 5px!important}
html.r56-narrow #appView .intro-band,html.r56-narrow #appView .module-nav,html.r56-narrow #appView .main{box-sizing:border-box!important;inline-size:calc(100vw - 28px)!important;max-inline-size:calc(100vw - 28px)!important;margin-inline:14px!important;padding-inline:0!important}
html.r56-narrow #appView .intro-band p,html.r56-narrow #appView .saas-command-center{box-sizing:border-box!important;inline-size:100%!important;max-inline-size:100%!important;margin-inline:0!important;overflow:hidden!important;overflow-wrap:anywhere!important;word-break:break-word!important}
html.r56-narrow #appView .intro-band p{max-height:126px!important;line-height:1.48!important}
html.r56-narrow #appView .module-nav{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}html.r56-narrow #appView .module-nav button{box-sizing:border-box!important;inline-size:100%!important;min-height:60px!important}
html.r56-narrow #appView .main{padding-bottom:170px!important}html.r56-narrow #appView .saas-command-center .saas-copy{max-height:3.15em!important;overflow:hidden!important}html.r56-narrow #appView .tabs{position:relative!important;inset:auto!important;inline-size:100%!important;max-inline-size:100%!important;margin-bottom:84px!important;overflow-x:auto!important}html.r56-narrow #mfLangPill{display:none!important}

/* R5.7: tablet-width browser sessions must use the compact shell too. Evidence showed a 943px-wide mobile browser being treated as desktop. */
@media screen and (max-width:1024px){
  #appView.app:not(.hidden) .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:'brand role' 'manage profile logout'!important;padding:14px!important;gap:8px!important}.topbar .logo{grid-area:brand}.topbar .role-chip{grid-area:role}.topbar #managementLink{grid-area:manage}.topbar #profileBtn{grid-area:profile}.topbar #logoutBtn{grid-area:logout}.topbar .whoami,.topbar .spacer{display:none!important}.topbar #managementLink,.topbar #profileBtn,.topbar #logoutBtn{width:100%!important;padding:9px 6px!important;font-size:11px!important}
  #appView.app:not(.hidden) .intro-band,#appView.app:not(.hidden) .module-nav,#appView.app:not(.hidden) .main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding-left:18px!important;padding-right:18px!important}
  #appView.app:not(.hidden) .intro-band{padding-top:16px!important}#appView.app:not(.hidden) .intro-band p{width:100%!important;max-width:100%!important;overflow:hidden!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  #appView.app:not(.hidden) .module-nav{grid-template-columns:1fr!important;margin-top:14px!important;gap:8px!important}#appView.app:not(.hidden) .module-nav button{width:100%!important;min-height:60px!important}
  #appView.app:not(.hidden) .main{padding-top:24px!important;padding-bottom:170px!important}#appView.app:not(.hidden) .saas-command-center{width:100%!important;max-width:100%!important;margin:0!important;overflow:hidden!important}#appView.app:not(.hidden) .saas-command-center .saas-copy{max-width:100%!important;overflow:hidden!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  #appView.app:not(.hidden) .tabs{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;margin-bottom:84px!important}#mfLangPill{display:none!important}
}