/* Nord mobile stacking contract. Loaded after other application styles. */
@media(max-width:1024px){
 :root{--nord-mobile-sidebar-layer:9200;--nord-mobile-modal-layer:20000;--nord-mobile-notice-layer:30000}
 html,body{max-width:100%;overflow-x:clip}
 .nord-shell,.nord-main,.nord-content,.main-content,.page-content{min-width:0;max-width:100%}
 .nord-rail,#workspaceRail{z-index:9000!important}
 .nord-sidebar,#sidebar{z-index:var(--nord-mobile-sidebar-layer)!important}
 .sidebar-backdrop,#sidebarBackdrop{z-index:9150!important}
 .modal-backdrop,[class*="modal-overlay"],[class*="dialog-backdrop"],[class*="drawer-backdrop"],[role="dialog"][aria-modal="true"]{z-index:var(--nord-mobile-modal-layer)!important}
 .modal-backdrop,[class*="modal-overlay"],[class*="dialog-backdrop"]{position:fixed!important;inset:0!important;max-height:100dvh!important;overflow:auto!important;overscroll-behavior:contain;box-sizing:border-box;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}
 .modal-backdrop .modal,[class*="modal-overlay"] .modal,[role="dialog"][aria-modal="true"]{max-width:min(100%,720px)!important;max-height:calc(100dvh - 28px)!important;min-width:0!important;box-sizing:border-box}
 .modal-backdrop .modal{overflow-y:auto;overscroll-behavior:contain}
 .modal .modal-body,.modal [class*="modal-content"],[role="dialog"] [class*="modal-body"]{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .modal input,.modal select,.modal textarea,.modal button{max-width:100%;box-sizing:border-box}
 .modal .form-grid,.modal [class*="form-grid"]{grid-template-columns:minmax(0,1fr)!important}
 .toast,.toast-container,[id*="toastContainer"],[class*="notification-stack"],[class*="toast-stack"],[role="alertdialog"]{z-index:var(--nord-mobile-notice-layer)!important}
 .toast-container,[id*="toastContainer"],[class*="notification-stack"],[class*="toast-stack"]{position:fixed;max-width:calc(100vw - 24px);left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
 .toast,[role="status"].toast{max-width:calc(100vw - 24px)!important;overflow-wrap:anywhere}
 table{max-width:100%}
 .table-wrap,.table-responsive,[class*="table-scroll"]{overflow-x:auto;overscroll-behavior-x:contain}
}
@media(max-width:600px){
 .modal-backdrop .modal,[class*="modal-overlay"] .modal{width:100%!important;max-width:100%!important;border-radius:14px!important}
 .modal-actions,.modal-footer{flex-wrap:wrap;gap:8px}
 .modal-actions button,.modal-footer button{min-height:40px}
}

/* Mobile viewport flow: the workspace rail stays pinned, the active page scrolls. */
@media(max-width:1024px){
 html,body{height:auto!important;min-height:100%!important;overflow-y:auto!important;overscroll-behavior-y:auto}
 body:not(.sidebar-open):not(.onboarding-open):not(.nord-tour-active){touch-action:pan-y pinch-zoom!important}
 #appShell.nord-shell{min-height:100dvh!important;height:auto!important;overflow:visible!important;align-items:stretch!important}
 #appShell .nord-main{min-width:0!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important}
 #appShell .nord-main>.nord-topbar{position:relative!important;top:auto!important;left:auto!important;right:auto!important;min-height:64px!important;height:auto!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;z-index:50!important}
 #appShell .nord-topbar>*{min-width:0}
 #appShell .nord-topbar .mobile-menu{flex:0 0 44px!important;position:relative!important}
 #appShell .nord-topbar .topbar-title,#appShell .nord-topbar .topbar-context,#appShell .nord-topbar .account-topbar-context{flex:1 1 120px;min-width:0!important;max-width:100%!important}
 #appShell .nord-topbar h1,#appShell .nord-topbar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:clamp(15px,4vw,22px)}
 #appShell .nord-content,#appShell .nord-page-content,#appShell .page.active,#page-community-nexus.page.active{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;min-width:0!important}
 #appShell .page.active{padding-bottom:max(32px,env(safe-area-inset-bottom))!important}
 #appShell #page-community-nexus,#appShell #cnxPageContent{width:100%;max-width:100%;min-width:0;overflow:visible!important;max-height:none!important;height:auto!important}
 #appShell .cnx-page-head,#appShell .cnx-toolbar{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:10px!important;height:auto!important;min-width:0!important}
 #appShell .cnx-page-title,#appShell .cnx-page-actions{min-width:0!important;max-width:100%!important}
 #appShell .cnx-page-actions{display:flex!important;flex-wrap:wrap!important}
 #appShell .cnx-tabs,#appShell [role="tablist"]{max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #appShell .cnx-tabs>*{flex-shrink:0}
 #appShell .cnx-card,#appShell .cnx-post-card,#appShell .cnx-section-grid{min-width:0!important;max-width:100%}
}
@media(max-width:600px){
 #appShell .nord-topbar{min-height:62px!important;padding:9px 11px!important;gap:8px!important}
 #appShell .nord-topbar .mobile-menu{width:42px!important;height:42px!important;flex-basis:42px!important}
 #appShell .nord-topbar .account-topbar-context{flex-basis:125px!important}
 #appShell .cnx-page-head{padding-block:8px!important}
 #appShell .cnx-page-title h1{font-size:21px!important;line-height:1.25!important}
 #appShell .cnx-page-actions button{min-height:38px}
}
