/* V121: app-like mobile layer (phones only; dashboards and reports keep the PC layout) */
@media (max-width:760px){
  html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none;scroll-padding-top:70px}
  body{overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  main{overflow-x:clip;animation:dxIn .28s ease-out both}
  @keyframes dxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  a,button,summary,label,[role=button]{touch-action:manipulation}
  .tabbar,.tabbar a,button,.btn,.chip,.hw-tabbar button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  /* press feedback on everything tappable */
  a.btn:active,button:active,.btn:active,a.ixc:active,a.th:active,.chip:active,summary:active{transform:scale(.97);transition:transform .08s}
  a.ixc,a.th,.card,.panel{-webkit-tap-highlight-color:transparent}
  /* comfortable touch targets; 16px fields stop the iOS zoom-on-focus */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important;min-height:46px;border-radius:12px}
  textarea{min-height:96px}
  .btn,button.btn,a.btn,button[type=submit]{min-height:46px;border-radius:14px}
  /* app bar: frosted, respects the notch */
  .appbar{padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 rgba(15,23,42,.06)}
  /* tab bar: bigger icons, active pill, safe area */
  .tabbar{padding:6px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(15,23,42,.07);border-top:0;border-radius:20px 20px 0 0}
  .tabbar a{padding:8px 2px 6px;border-radius:16px;font-size:10.5px}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a.on{background:#EEF0FE;box-shadow:inset 0 0 0 1px rgba(79,70,229,.12)}
  body:has(.tabbar) main,body:has(.tabbar) .sf{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* cards read as app tiles */
  .card,.panel{border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05)}
  h1{letter-spacing:-.02em}
  /* public home: industries grid was forced to 5 columns on phones */
  .ind-g{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .ind-h{flex-direction:column;align-items:flex-start;gap:8px}
  .ixc{border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px rgba(15,23,42,.06)}
  .ixc.sbk em{left:6px;top:6px;padding:1px 7px;font-size:9.5px;line-height:1.6}
  .ixc span{padding:9px 10px;font-size:12.5px;gap:6px}
  .ixc .nm{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ixc small{display:none}
  /* hero buttons full width, like app calls to action */
  .hx .hx-cta,.hx-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hx-cta a{justify-content:center;text-align:center;min-height:48px}
  /* tables and wide content scroll inside their own box instead of the page */
  .tbl-wrap,.table-wrap,table{max-width:100%}
  .table-wrap,.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* floating chat button sits clear of the tab bar */
  [class*=sh-fab],[id*=Fab],[class*=chat-fab],[class*=helpfab]{bottom:calc(86px + env(safe-area-inset-bottom))!important;width:52px!important;height:52px!important}
}
@media (max-width:760px) and (display-mode:standalone){
  .sh,.appbar{padding-top:calc(10px + env(safe-area-inset-top))}
  .skip-link{display:none}
}
@media (prefers-reduced-motion:reduce){main{animation:none!important}}
/* V191: app-like phone polish */
@media (max-width:760px){
  .appbar{flex-wrap:nowrap!important;overflow:hidden;gap:6px;padding-left:12px;padding-right:10px}
  .appbar-brand{min-width:0;flex:1 1 auto;gap:8px}.appbar-brand .brand-word{font-size:17px;white-space:nowrap;overflow:hidden}
  .appbar-user{gap:2px!important;flex:0 0 auto}.appbar-user .appbar-fav{width:38px;height:38px}.appbar-adm{padding:8px 10px!important}.appbar-adm span{display:none}
  .wrap,.tp-wrap{padding-left:14px!important;padding-right:14px!important}
  /* home */
  .h3-hero{padding-top:6px}.h3-in{padding-left:14px!important;padding-right:14px!important}
  .h3-who{gap:12px}.h3-av{width:56px!important;height:56px!important;font-size:22px!important}.h3-who h1{font-size:26px!important;line-height:1.1}.h3-eb{font-size:10px!important;letter-spacing:.12em}.h3-sub{font-size:12.5px!important;word-break:break-all}
  .h3-act{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}.h3-act .w{grid-column:1/3}.h3-btn{height:44px;font-size:14px;justify-content:center}
  .h3-sh{flex-direction:column;align-items:stretch;gap:10px}.h3-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.h3-tabs::-webkit-scrollbar{display:none}.h3-tab{flex:0 0 auto;white-space:nowrap;font-size:13.5px;padding:9px 14px}.h3-pill{align-self:flex-start;font-size:12px}
  .h3-five{grid-template-columns:1fr 1fr!important;gap:10px!important}.h3-s{min-height:0!important}.h3-fl{min-height:262px!important}.h3-im{height:90px!important}.h3-bd b{font-size:14px!important;line-height:1.2}.h3-bd small{font-size:11px!important}.h3-row a{font-size:12.5px;padding:9px 4px;min-height:40px}
  .h3-grid{grid-template-columns:1fr!important}.h3-lh{flex-direction:column;align-items:stretch}.h3-tools{display:flex;flex-direction:column;gap:8px;width:100%}.h3-tools .h3-find,.h3-tools .h3-sub{width:100%}
  .h3-keep{grid-template-columns:1fr 1fr!important;gap:10px}
  /* reports gallery */
  .rg-grid{grid-template-columns:1fr 1fr!important;gap:10px}.rg-b small{display:none}.rg-b b{font-size:14px}.rg-a{display:grid!important;grid-template-columns:1fr;gap:6px}.rg-a a{width:100%;text-align:center;min-height:38px;padding:8px 6px;font-size:13px}.rg-st{gap:3px;margin:6px 0 8px}.rg-u{margin-left:0;width:100%}
  .rg-wrap{padding-top:12px!important}.rg-wrap h1{font-size:28px}
  /* boards page */
  .sbh-wrap .tp-head{flex-wrap:wrap}.sbh-top{width:100%;margin-top:0!important}.sbh-top .sbh-find{min-width:0;width:100%}
  .sbh-grid{grid-template-columns:1fr!important}
  /* design gallery */
  .tp-grid{grid-template-columns:1fr 1fr!important;gap:10px}.tp-filters{padding:10px}.tp-fr{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}.tp-fr::-webkit-scrollbar{display:none}.tp-f{flex:0 0 auto}
  /* data sheet and wide tables scroll sideways inside their own box */
  .sbd-card,.panel,.tp-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:760px){
  .h3-n{top:68px!important;left:8px!important;width:26px!important;height:26px!important;font-size:12px!important}.h3-s .h3-bd{padding-top:18px!important}
  .ct-tools{flex-direction:column;align-items:stretch;gap:10px}.ct-chips{display:flex;flex-wrap:nowrap!important;overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.ct-chips::-webkit-scrollbar{display:none}.ct-chip{flex:0 0 auto;white-space:nowrap;width:auto!important}.ct-tools input[type=search],.ct-tools .ct-find{width:100%}
  .dx-chat,#dx-chat-btn{bottom:calc(88px + env(safe-area-inset-bottom))!important}
}
/* phones turned sideways: give the screen to the content */
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .tabbar{display:none!important}.appbar{padding:4px 12px!important;position:sticky;top:0}.appbar-brand .brand-word{font-size:15px}
  body:has(.tabbar) main,body:has(.tabbar) .sf{padding-bottom:12px!important}
}
/* V196: seven tabs always fit the phone width */
@media (max-width:760px){
  .tabbar{gap:0;padding-left:4px;padding-right:4px;overflow:hidden}
  .tabbar a{flex:1 1 0;min-width:0;padding:7px 0 5px;font-size:9.6px;letter-spacing:-.01em}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a span{max-width:100%}
  .rg-h{flex-direction:column;align-items:stretch;gap:10px}
  .rg-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .rg-cat>.btn{width:100%;justify-content:center;white-space:nowrap;padding-left:8px;padding-right:8px}
  .rg-cl{left:0;right:auto;min-width:min(280px,86vw)}
  .rg-cat:nth-child(2) .rg-cl{left:auto;right:0}
}
@media (max-width:760px){
  .tabbar a span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  .tabbar:has(a:nth-child(8)) a:not(.on) span{display:none}
  .tabbar:has(a:nth-child(8)) a.on{flex:2.2 1 0}
}
@media (max-width:760px){
  .h3-pane[data-pane=rep] .h3-s:not(.h3-e){min-height:255px!important}
  .h3-pane[data-pane=rep] .h3-s .h3-bd{padding-top:56px}
}
/* V287: five-tab bar, DB in the middle, a line above the open tab */
@media (max-width:760px){
  .tabbar.tb5{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;align-items:end;gap:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px rgba(30,27,75,.10);overflow:visible}
  .tabbar.tb5 a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:9px 0 4px;background:none!important;box-shadow:none!important;border-radius:14px;color:#6B7691;font-size:11px;font-weight:700;letter-spacing:0}
  .tabbar.tb5 a svg{width:23px;height:23px;transition:transform .18s}
  .tabbar.tb5 a::before{content:"";position:absolute;top:-8px;left:50%;width:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#4F46E5,#7C5CF0);transform:translateX(-50%);transition:width .22s ease}
  .tabbar.tb5 a.on{color:#4F46E5}.tabbar.tb5 a.on::before{width:34px}.tabbar.tb5 a.on svg{transform:translateY(-1px)}
  .tabbar.tb5 a.mid{padding-top:0}.tabbar.tb5 a.mid::before{display:none}
  .tabbar.tb5 .mid-i{display:grid;place-items:center;width:58px;height:58px;margin-top:-26px;border-radius:50%;background:linear-gradient(145deg,#5B52F0,#3F37C9);color:#fff;border:4px solid #fff;box-shadow:0 10px 22px -6px rgba(79,70,229,.65);transition:transform .18s,box-shadow .18s}
  .tabbar.tb5 .mid-i svg{width:26px;height:26px;color:#fff}
  .tabbar.tb5 a.mid span{color:#4F46E5;font-weight:800}
  .tabbar.tb5 a.mid:active .mid-i{transform:scale(.94)}
  .tabbar.tb5 a.mid.on .mid-i{box-shadow:0 0 0 5px rgba(79,70,229,.16),0 10px 22px -6px rgba(79,70,229,.7)}
  .tabbar.tb5 a span{display:block!important}
  :root[data-theme=dark] .tabbar.tb5{background:rgba(18,28,56,.94)}:root[data-theme=dark] .tabbar.tb5 .mid-i{border-color:#121C38}
}
/* V287: a calmer top bar on phones - logo only, the profile sits in the tab bar */
@media (max-width:560px){
  .appbar-brand .brand-word{display:none}
  .appbar-user .who{display:none}
  .appbar{padding-left:14px}
  .appbar-user{margin-left:auto}
  .appbar-user .appbar-fav,.appbar-user .btn{width:40px;height:40px}
  .appbar-user .btn .so{display:none}
  .appbar-user .btn{padding:0;display:inline-grid;place-items:center}
}

@media (max-width:700px){
  body.app .appbar{overflow:visible!important}
  body.app .appbar-user .dx-lg .dx-lg-m{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 62px);width:auto;z-index:100000}
  body.app .appbar,body.app:has(.h3-main) .appbar{-webkit-backdrop-filter:none;backdrop-filter:none}
  .h3-pill{white-space:nowrap;gap:8px}.h3-pill i.m{display:none}
  .h3-all{width:100%}
}