/* Bynzo Phase 9 · Final Mobile + Motion Polish
   Presentation-only refinement. Existing routes, IDs, data-actions, permissions and backend contracts remain unchanged. */
:root{
  --p9-ease:cubic-bezier(.2,.75,.25,1);
  --p9-ease-spring:cubic-bezier(.18,.89,.32,1.18);
  --p9-touch:44px;
  --p9-safe-top:env(safe-area-inset-top,0px);
  --p9-safe-right:env(safe-area-inset-right,0px);
  --p9-safe-bottom:env(safe-area-inset-bottom,0px);
  --p9-safe-left:env(safe-area-inset-left,0px);
}

/* Production shell behaviour */
html{scroll-padding-top:88px}
body{min-height:100dvh;overflow-x:hidden}
.sidebar{height:100dvh;padding-bottom:max(14px,var(--p9-safe-bottom));transition:transform .28s var(--p9-ease),box-shadow .28s ease}
.sidebar nav{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.main{min-height:100dvh}
.topbar{padding-top:var(--p9-safe-top);height:calc(70px + var(--p9-safe-top));transition:box-shadow .2s ease,background .2s ease}
.app-content{padding-bottom:max(46px,calc(30px + var(--p9-safe-bottom)))}
.mobile-scrim{backdrop-filter:blur(0);transition:opacity .24s ease,backdrop-filter .24s ease}
.mobile-scrim.show{backdrop-filter:blur(4px)}

/* Calm first-load motion: module content enters as one coherent scene. */
.app-content>:not(.page-loader){animation:p9SceneIn .42s var(--p9-ease) both}
:where(.role-command-hero,.campaign-stage-hero,.finance-stage-hero,.access-stage-hero,.profile-stage-hero,.settings-stage-hero,.intel-stage-hero,.service-discovery-hero,.service-detail-hero,.category-page-hero){animation:p9HeroIn .5s var(--p9-ease) both;transform-origin:50% 20%}
:where(.metric,.professional-card,.service-card,.package-card,.settings-card,.bill-card,.detail-card,.intel-report-card){transition:transform .2s var(--p9-ease),box-shadow .2s ease,border-color .2s ease,background .2s ease}
@keyframes p9SceneIn{from{opacity:.01;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes p9HeroIn{from{opacity:.01;transform:translateY(10px) scale(.994)}to{opacity:1;transform:none}}

/* Micro-interactions only where hover is real; touch devices should never feel sticky. */
@media(hover:hover) and (pointer:fine){
  :where(.metric,.professional-card,.service-card,.package-card,.settings-card,.bill-card,.detail-card,.intel-report-card):hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(18,54,62,.095)}
  .nav-item:hover i{transform:translateY(-1px) scale(1.04)}
  .icon-btn:hover{transform:translateY(-1px)}
  .quick-add,.primary-btn,.secondary-btn,.row-btn,.icon-btn{transition:transform .16s var(--p9-ease),box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease,filter .16s ease}
  .quick-add:active,.primary-btn:active,.secondary-btn:active,.row-btn:active,.icon-btn:active{transform:translateY(0) scale(.975)}
  .service-card-media img,.service-gallery img,.category-page-hero img{transition:transform .42s var(--p9-ease),filter .42s ease}
  .service-card:hover .service-card-media img,.service-gallery img:hover,.category-page-hero:hover img{transform:scale(1.025)}
}

/* Prevent accidental hover motion on dense table rows; emphasis remains readable. */
tbody tr:hover{box-shadow:inset 3px 0 rgba(8,123,115,.13)}

/* More tactile navigation without changing module routing. */
.nav-item i{transition:transform .18s var(--p9-ease),background .18s ease,border-color .18s ease,color .18s ease}
.nav-item.active i{box-shadow:0 5px 14px rgba(5,25,34,.14)}
.menu-toggle,.icon-btn,.quick-add{touch-action:manipulation}

/* Lifecycle rails feel intentional when they overflow on narrow layouts. */
:where(.campaign-stage-steps,.finance-stage-steps,.access-stage-steps,.profile-stage-steps,.settings-stage-steps,.intel-stage-steps){scrollbar-width:none}
:where(.campaign-stage-steps,.finance-stage-steps,.access-stage-steps,.profile-stage-steps,.settings-stage-steps,.intel-stage-steps)::-webkit-scrollbar{display:none}

/* Form and modal finishing */
:where(input,select,textarea){transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
:where(input,select,textarea):focus{background:#fff}
.modal-backdrop{padding-top:max(20px,var(--p9-safe-top));padding-right:max(20px,var(--p9-safe-right));padding-bottom:max(20px,var(--p9-safe-bottom));padding-left:max(20px,var(--p9-safe-left))}
.modal{animation:p9ModalIn .24s var(--p9-ease) both}
@keyframes p9ModalIn{from{opacity:.01;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-actions{padding-bottom:max(14px,calc(10px + var(--p9-safe-bottom)))}

/* Data-heavy screens: polished horizontal scrolling instead of squeezed columns. */
.table-scroll{position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-gutter:stable}
.table-scroll table{min-width:560px}
.table-scroll table:has(th:nth-child(6)){min-width:760px}
.table-scroll table:has(th:nth-child(9)){min-width:980px}
.table-scroll::-webkit-scrollbar{height:7px}
.table-scroll::-webkit-scrollbar-thumb{background:#b9ccc7;border-radius:999px}
.table-scroll::-webkit-scrollbar-track{background:#edf3f1;border-radius:999px}

/* Authentication and approval screens get the same production polish. */
.login-body{min-height:100dvh}
.login-shell{min-height:100dvh}
.login-brand{position:relative;overflow:hidden}
.login-brand:after{content:"";position:absolute;width:360px;height:360px;right:-190px;bottom:-175px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018);pointer-events:none}
.login-card,.pending-card{animation:p9AuthIn .48s var(--p9-ease) both;box-shadow:0 28px 70px rgba(10,43,53,.13)}
@keyframes p9AuthIn{from{opacity:.01;transform:translateY(12px)}to{opacity:1;transform:none}}
.login-submit{min-height:44px}
.recovery-assist summary{min-height:44px;display:flex;align-items:center}

/* Tablet optimisation */
@media(max-width:900px){
  html{scroll-padding-top:74px}
  .topbar{height:calc(64px + var(--p9-safe-top))}
  .app-content{padding-bottom:max(38px,calc(26px + var(--p9-safe-bottom)))}
  :where(.role-command-hero,.campaign-stage-hero,.finance-stage-hero,.access-stage-hero,.profile-stage-hero,.settings-stage-hero,.intel-stage-hero,.service-discovery-hero,.service-detail-hero,.category-page-hero){box-shadow:0 16px 38px rgba(19,55,64,.075)!important}
  .service-page-grid{gap:15px}
}

/* Mobile production pass */
@media(max-width:760px){
  html{scroll-padding-top:76px}
  body{font-size:14px}
  .sidebar{width:min(304px,88vw);padding-top:max(16px,var(--p9-safe-top));padding-left:max(14px,var(--p9-safe-left));transform:translate3d(-106%,0,0);will-change:transform}
  .sidebar.open{transform:translate3d(0,0,0)}
  .sidebar-foot{padding-bottom:max(4px,var(--p9-safe-bottom))}
  .mobile-scrim{background:rgba(5,25,34,.54)}
  .topbar{height:calc(62px + var(--p9-safe-top));padding-left:max(12px,var(--p9-safe-left));padding-right:max(12px,var(--p9-safe-right));gap:7px}
  .menu-toggle,.icon-btn,.quick-add{width:var(--p9-touch);height:var(--p9-touch);min-width:var(--p9-touch);min-height:var(--p9-touch);border-radius:12px}
  .quick-add{padding:0}
  .topbar-actions{gap:3px}
  .search{height:44px;min-height:44px;border-radius:12px}
  .search input{font-size:16px!important}
  .app-content{padding-top:18px;padding-left:max(13px,var(--p9-safe-left));padding-right:max(13px,var(--p9-safe-right));padding-bottom:max(34px,calc(22px + var(--p9-safe-bottom)))}

  .page-head{gap:12px}.page-head p{max-width:100%;line-height:1.65}
  .page-head .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .page-head .actions>*{width:100%;min-height:var(--p9-touch)}
  :where(.primary-btn,.secondary-btn,.ghost-btn,.row-btn,.mini-btn){min-height:var(--p9-touch)}
  .row-actions{gap:6px}
  .row-actions .row-btn{padding-inline:11px}

  /* Native inputs remain 16px to prevent Safari auto-zoom. */
  :where(input,select,textarea){font-size:16px!important;min-height:46px!important}
  textarea{min-height:110px!important}
  input[type="checkbox"],input[type="radio"]{min-height:auto!important;width:20px;height:20px}
  .form-grid{gap:14px}
  .form-grid label,.modal-body label,.inline-grid label{font-size:11px}

  /* One-dimensional swipe rails preserve sequence and reduce vertical bloat. */
  :where(.campaign-stage-steps,.finance-stage-steps,.access-stage-steps,.profile-stage-steps,.settings-stage-steps,.intel-stage-steps){display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  :where(.campaign-stage-steps,.finance-stage-steps,.access-stage-steps,.profile-stage-steps,.settings-stage-steps,.intel-stage-steps)>*{flex:0 0 min(245px,78vw);scroll-snap-align:start}

  /* Keep 3D atmosphere, but move it behind content instead of consuming space. */
  :where(.campaign-stage-orbit,.finance-stage-orbit,.access-stage-orbit,.profile-stage-orbit,.settings-stage-orbit,.intel-stage-orbit){opacity:.12!important;filter:saturate(.85);transform:scale(.86);transform-origin:top right}
  .role-command-visual{opacity:.13!important}

  .toolbar{position:relative;gap:9px}
  .toolbar label,.toolbar select{min-height:46px!important}
  .toolbar select{font-size:16px!important}

  .table-panel{border-radius:14px}
  .table-scroll{margin:0 -1px;padding-bottom:5px}
  .table-scroll table{min-width:620px}
  .table-scroll table:has(th:nth-child(6)){min-width:820px}
  .table-scroll table:has(th:nth-child(9)){min-width:1040px}
  thead th{font-size:10px!important;padding:12px!important}
  tbody td{font-size:11px!important;padding:12px!important}
  td strong{font-size:11px}td small{font-size:10px!important}

  .modal-backdrop{padding:var(--p9-safe-top) 0 0;align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:calc(100dvh - var(--p9-safe-top));border-radius:22px 22px 0 0;border-bottom:0;animation:p9SheetIn .28s var(--p9-ease) both}
  @keyframes p9SheetIn{from{opacity:.01;transform:translateY(28px)}to{opacity:1;transform:none}}
  .modal:before{content:"";display:block;width:42px;height:4px;margin:8px auto 0;border-radius:999px;background:#d7e1de}
  .modal-head{min-height:64px;padding:12px 16px 14px}
  .modal-head button{width:var(--p9-touch);height:var(--p9-touch);font-size:20px}
  .modal-body{padding:16px;padding-bottom:20px}
  .modal-actions{gap:8px;padding:12px 16px max(12px,calc(10px + var(--p9-safe-bottom)));background:rgba(251,253,252,.96);backdrop-filter:blur(14px)}
  .modal-actions>*{min-height:var(--p9-touch)}

  .toast-region{top:calc(70px + var(--p9-safe-top));left:max(12px,var(--p9-safe-left));right:max(12px,var(--p9-safe-right))}
  .toast{min-height:56px;font-size:12px}

  .service-hero-actions{gap:8px}.service-hero-actions>*{min-height:44px}
  .sticky-service-cta .primary-btn{min-height:48px}
  .service-gallery{scroll-snap-type:x proximity}

  /* Auth pages: single-column, safe-area aware, no input zoom. */
  .login-panel{min-height:100dvh;padding-top:max(24px,calc(18px + var(--p9-safe-top)));padding-right:max(18px,var(--p9-safe-right));padding-bottom:max(26px,calc(18px + var(--p9-safe-bottom)));padding-left:max(18px,var(--p9-safe-left))}
  .login-card{width:min(100%,520px);border-radius:20px}
  .login-card input,.login-card select,.login-card textarea{font-size:16px!important;min-height:48px!important}
  .login-submit,.login-card .primary-btn,.login-card .secondary-btn{min-height:48px}
  .pending-shell{min-height:100dvh;padding:max(18px,var(--p9-safe-top)) max(18px,var(--p9-safe-right)) max(18px,var(--p9-safe-bottom)) max(18px,var(--p9-safe-left))}
}

@media(max-width:540px){
  .page-head h1{font-size:27px}
  .page-head .actions{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .role-command-actions{grid-template-columns:1fr!important}
  :where(.campaign-stage-copy,.finance-stage-copy,.access-stage-copy,.profile-stage-copy,.settings-stage-copy,.intel-stage-copy){padding-right:0!important}
  :where(.campaign-stage-orbit,.finance-stage-orbit,.access-stage-orbit,.profile-stage-orbit,.settings-stage-orbit,.intel-stage-orbit,.role-command-visual){display:none!important}
  :where(.role-command-hero,.campaign-stage-hero,.finance-stage-hero,.access-stage-hero,.profile-stage-hero,.settings-stage-hero,.intel-stage-hero,.service-discovery-hero,.service-detail-hero,.category-page-hero){border-radius:18px!important}
  .service-detail-hero,.category-page-hero{padding-inline:17px}
  .service-section{padding:20px 17px}
  .service-gallery{display:flex;overflow-x:auto;gap:10px;padding-bottom:5px;-webkit-overflow-scrolling:touch}
  .service-gallery img{flex:0 0 84%;height:210px;scroll-snap-align:start}
  .modal-actions{display:grid;grid-template-columns:1fr}
  .modal-actions>*{width:100%}
  .topbar .search{min-width:0}
}

@media(max-width:390px){
  .topbar{gap:4px}.topbar-actions{gap:1px}
  .topbar .icon-btn{width:40px;height:40px;min-width:40px;min-height:40px}
  .menu-toggle,.quick-add{width:42px;height:42px;min-width:42px;min-height:42px}
  .app-content{padding-inline:max(10px,var(--p9-safe-left)) max(10px,var(--p9-safe-right))}
  .page-head h1{font-size:25px}
  .panel-head{padding-inline:13px}
  :where(.campaign-stage-steps,.finance-stage-steps,.access-stage-steps,.profile-stage-steps,.settings-stage-steps,.intel-stage-steps)>*{flex-basis:82vw}
}

/* Motion and data-saving accessibility. */
@media(prefers-reduced-motion:reduce){
  .app-content>:not(.page-loader),
  :where(.role-command-hero,.campaign-stage-hero,.finance-stage-hero,.access-stage-hero,.profile-stage-hero,.settings-stage-hero,.intel-stage-hero,.service-discovery-hero,.service-detail-hero,.category-page-hero),
  .modal,.login-card,.pending-card{animation:none!important}
  .sidebar,.mobile-scrim{transition:none!important}
}
@media(prefers-contrast:more){
  :where(.panel,.metric,.professional-card,.package-card,.settings-card,.bill-card,.detail-card,.modal){border-color:#aebfbb!important}
  :where(input,select,textarea){border-color:#9fb4ae!important}
  .status{border-color:currentColor}
}