/* CPG Mobile Speed Repair Layer — 20260510-mobile-speed-002
   Shared safe layer for all pages: phone scroll rows, tap fixes, compact layout, reduced glow, lazy media support.
   Keep this file linked on every page after the page's own CSS. */
:root{
  --cpg-safe-top:env(safe-area-inset-top,0px);
  --cpg-safe-bottom:env(safe-area-inset-bottom,0px);
  --cpg-mobile-radius:14px;
  --cpg-mobile-gap:8px;
}
*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:auto!important}
body{max-width:100%;overflow-x:hidden;touch-action:manipulation;padding-bottom:max(12px,var(--cpg-safe-bottom));}
img,video,iframe,canvas,svg{max-width:100%;height:auto}
img{content-visibility:auto;contain-intrinsic-size:1px 320px}
video{preload:metadata!important;background:#05070d}
iframe{border:0}
button,a,[role="button"],input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a.btn,.btn,.topTool,.miniTopBtn,.topbtn,.tool,.pill,.role-btn,.mini,.card,.wide,.quickBtn,.ctrl,.stat,.tool-link,.cpg-system-btn,.cpg-system-action,.cpg-admin-tab,.cpg-super-card,.cpg-super-btn{min-height:44px}
button:disabled,[aria-disabled="true"]{pointer-events:none;opacity:.65}
.hidden,[hidden]{display:none!important}

/* Reduce the effects that slow low-end phones */
.glass,.hero,.card,.topbar,.top,.panel,.modal,.sheet,.preview,.activity,.quick,.manage,.stat,.section-card,.side-card,.read-box,.saved-card,.help-card,.score-card,.cpg-super-active,.cpg-super-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
@media (max-width:760px){
  body::before,body::after,.stageMedia::after,.hero::after{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .logo,.topLogo,.avatar,.brand-icon,.icon,.tool .ico,.quickBtn .ico,.ctrl,.card,.panel,.hero,.glass,.sheet,.modal,.metric,.wide,.mini,.topbar,.top,.btn,.pill,.role-btn,.cpg-super-card{box-shadow:none!important;text-shadow:none!important;filter:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Lazy paint for long pages. Keep dialogs visible. */
main,section,article,aside,.card,.glass,.panel,.hero,.grid,.tiles,.termGrid,.quickGrid,.tools-grid,.cpg-super-grid{content-visibility:auto;contain-intrinsic-size:1px 680px}
.modal,.sheet,[role="dialog"],.overlay.open,.drawer,.cpg-system-modal{content-visibility:visible!important}

/* Universal horizontal scroll rows. Keeps card/button order on phone. */
.cpg-scroll-x,
.topActions,.top-actions,.navActions,.actions,.tools,.toolGrid,.quickGrid,.quickAccess,.role-buttons,.toprow,.row.scroll,.stats,.metrics,.controls,.legal,.buttons,.quickLeft,.seg,.chips,.tabs,.tabbar,.cpg-super-actions,.topMiniActions{
  max-width:100%;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-inline:contain;
}
.cpg-scroll-x::-webkit-scrollbar,.topActions::-webkit-scrollbar,.top-actions::-webkit-scrollbar,.navActions::-webkit-scrollbar,.actions::-webkit-scrollbar,.tools::-webkit-scrollbar,.quickGrid::-webkit-scrollbar,.role-buttons::-webkit-scrollbar,.toprow::-webkit-scrollbar,.stats::-webkit-scrollbar,.metrics::-webkit-scrollbar,.controls::-webkit-scrollbar,.buttons::-webkit-scrollbar,.chips::-webkit-scrollbar,.tabs::-webkit-scrollbar,.tabbar::-webkit-scrollbar,.topMiniActions::-webkit-scrollbar{display:none}
.topActions,.top-actions,.navActions,.actions,.tools,.quickGrid,.quickAccess,.role-buttons,.toprow,.controls,.buttons,.quickLeft,.seg,.chips,.tabs,.tabbar,.topMiniActions{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px}
.topActions>*,.top-actions>*,.navActions>*,.actions>*,.tools>*,.quickGrid>*,.quickAccess>*,.role-buttons>*,.toprow>*,.controls>*,.buttons>*,.quickLeft>*,.seg>*,.chips>*,.tabs>*,.tabbar>*,.topMiniActions>*{flex:0 0 auto!important;white-space:nowrap}

/* Keep common grids ordered by scrolling instead of bad wrapping. */
@media (max-width:760px){
  .app,.wrap,.shell,.page{width:100%!important;max-width:100%!important;padding-left:10px!important;padding-right:10px!important;margin-left:auto!important;margin-right:auto!important}
  .topbar,.top,.floatBar{max-width:100%!important;position:sticky;top:0;z-index:40}
  .topbar{display:flex!important;align-items:center;gap:8px;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar::-webkit-scrollbar,.top::-webkit-scrollbar{display:none}
  .topbar>*,.top>*{flex:0 0 auto;min-width:0}

  .grid,.tools-grid,.tiles,.quickGrid,.cpg-super-grid,.stats,.metrics,.role-buttons,.grid2,.grid3,.row2,.row3,.subgrid,.tinygrid{
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
  }
  .grid>*,.tools-grid>*,.tiles>*,.quickGrid>*,.cpg-super-grid>*,.stats>*,.metrics>*,.role-buttons>*,.grid2>*,.grid3>*,.row2>*,.row3>*,.subgrid>*,.tinygrid>*{
    flex:0 0 clamp(126px,44vw,190px)!important;min-width:126px!important;max-width:220px;
  }
  .stats>*,.metrics>*{flex-basis:clamp(92px,26vw,130px)!important;min-width:92px!important}
  .role-buttons>*{flex-basis:clamp(96px,28vw,150px)!important;min-width:96px!important}

  .card,.wide,.panel,.sheet,.modal,.hero,.glass,.metric,.tinycard,.subcard,.log,.tool-link,.quickBtn,.cpg-super-card{
    border-radius:var(--cpg-mobile-radius)!important;padding:10px!important;min-height:unset!important;
  }
  h1{font-size:clamp(22px,6vw,30px)!important;line-height:1.08!important}
  h2{font-size:clamp(19px,5vw,25px)!important;line-height:1.12!important}
  h3{font-size:clamp(16px,4.5vw,20px)!important}
  p,li,.muted,.status,.note{font-size:clamp(12px,3.35vw,15px)!important;line-height:1.35!important}
  .brand p,.brand span,.sub,.subtitle,.tiny,.smallL,.card p,.wide p,.stat span,.metric .label{font-size:12px!important;line-height:1.25!important}
  .logo,.topLogo{width:40px!important;height:40px!important}
  .avatar{width:72px!important;height:72px!important;font-size:38px!important}
  .icon{width:52px!important;height:52px!important;font-size:26px!important}
  .card{grid-template-columns:52px 1fr!important;gap:8px!important}
  .wide{grid-template-columns:44px minmax(0,1fr) 22px!important;gap:8px!important}
  .wide .icon{width:42px!important;height:42px!important;font-size:21px!important}
  input,select,textarea{min-height:42px!important;font-size:16px!important;padding:9px 10px!important}
  textarea{min-height:70px!important}
  .stage,.readerFrame{max-height:70dvh;min-height:260px!important}
  .footer,.bottom-nav{margin-bottom:calc(12px + var(--cpg-safe-bottom))!important}
  .pop,.suggestion,.suggestions,.assistant-suggestions{max-height:42dvh!important;overflow:auto!important;top:auto!important;bottom:calc(12px + var(--cpg-safe-bottom))!important;width:min(94vw,560px)!important}
}

/* Special named rows from your app */
.role-buttons,.stats,.friend-stats,.church-connect-center,.connect-cards,.dashboard-stats,.user-stats{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.role-buttons>*,.stats>*,.friend-stats>*,.church-connect-center>*,.connect-cards>*,.dashboard-stats>*,.user-stats>*{flex:0 0 auto!important}

/* Short global toast */
.cpg-fresh-toast,#cpgFreshToast,#cpgToast,#cpgToastLight,.toast:not(.modal):not(.sheet){
  position:fixed!important;left:50%!important;right:auto!important;bottom:calc(14px + var(--cpg-safe-bottom))!important;top:auto!important;transform:translateX(-50%)!important;z-index:2147483000!important;max-width:min(92vw,430px)!important;min-width:0!important;max-height:80px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:10px 14px!important;border-radius:999px!important;background:rgba(5,8,18,.94)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 28px rgba(0,0,0,.25)!important;font:800 13px system-ui,-apple-system,Segoe UI,Arial,sans-serif!important;text-align:center!important;
}