/* INFOTECH 3.10AH — Global UX polish
   Goal: reduce mobile travel, standardize page rhythm and keep overflow inside components. */
:root{
  --it-mobile-edge:14px;
  --it-card-radius:22px;
  --it-card-pad:20px;
  --it-safe-max:1160px;
}
html,body{max-width:100%;overflow-x:hidden!important;}
body{touch-action:manipulation;}
img,svg,canvas,video{max-width:100%;height:auto;}
main,section,article,aside,footer,header{box-sizing:border-box;}
pre,code,textarea,input,select,button{max-width:100%;}
table{width:100%;border-collapse:collapse;}
.table-wrap,.table-wrapper,.result-table,.result-table-wrap,.channels-table-wrap,.preview-table-wrap,.output-table-wrap,.fb-table-wrap,.fb-output-table,.report-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
section[id],article[id],div[id]{scroll-margin-top:18px;}
.it-global-header{max-width:var(--it-safe-max)!important;}
.hero,.panel,.card,.product,.module,.quick,.status-card,.builder-card,.output-card,.review-card{overflow-wrap:anywhere;}
.actions,.cta,.hero-actions,.tool-nav,.cards{align-items:center;}
.actions .btn,.cta .btn,.hero-actions .btn,.tool-nav .btn,.tool-nav a{min-height:36px;display:inline-flex;align-items:center;justify-content:center;}
.field input,.field select,.field textarea,.control input,.control select,.control textarea,input,select,textarea{min-height:42px;}

/* Desktop: keep the pages consistent without changing the approved visual identity. */
@media(min-width:821px){
  .it-global-header{margin-top:14px!important;margin-bottom:18px!important;}
  main:not(.app-shell):not(.builder-app-shell){width:min(var(--it-safe-max),92vw)!important;margin-left:auto!important;margin-right:auto!important;}
  .hero{padding-top:34px!important;padding-bottom:26px!important;}
  .product-grid,.grid,.hub-grid,.quick-grid,.tools,.flow,.lab{gap:16px!important;}
  .card,.product,.module,.panel,.quick{padding:22px!important;}
  .app-shell,.builder-app-shell{width:min(1440px,calc(100vw - 34px))!important;margin-left:auto!important;margin-right:auto!important;}
}

/* Mobile: one-row navigation, tighter hero, shorter cards, no page-level horizontal drag. */
@media(max-width:820px){
  :root{--it-mobile-edge:10px;--it-card-pad:15px;--it-card-radius:18px;}
  body{font-size:14px;}
  .space-bg,.bg{background-attachment:scroll!important;background-position:center top!important;}
  .infotech-particles span:nth-child(n+70){display:none!important;}
  .it-global-header{
    width:calc(100vw - 18px)!important;
    margin:8px auto 12px!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav" "lang"!important;
    gap:7px!important;
    align-items:start!important;
  }
  .it-global-brand{gap:8px!important;min-height:34px!important;}
  .it-global-brand img{width:31px!important;height:31px!important;}
  .it-global-brand strong{font-size:11px!important;letter-spacing:.12em!important;line-height:1!important;}
  .it-global-brand em{font-size:10px!important;line-height:1.15!important;max-width:calc(100vw - 74px)!important;white-space:nowrap!important;}
  .it-global-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:34px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 2px 5px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .it-global-nav::-webkit-scrollbar,.it-global-lang::-webkit-scrollbar,.tool-nav::-webkit-scrollbar{display:none!important;}
  .it-global-nav a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:auto!important;
    max-width:none!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 10px!important;
    font-size:10.5px!important;
    letter-spacing:0!important;
  }
  .it-global-lang{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:5px!important;
    overflow-x:auto!important;
    padding:0 2px 3px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .it-global-lang a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:42px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }
  main:not(.app-shell):not(.builder-app-shell),footer{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero,main>.hero,main>section.hero{
    width:100%!important;
    max-width:100%!important;
    padding:14px 0 12px!important;
    margin:0 auto 10px!important;
    gap:12px!important;
  }
  .hero h1,main>.hero h1,h1{
    font-size:clamp(28px,9vw,40px)!important;
    line-height:.98!important;
    margin:9px 0!important;
    letter-spacing:-.035em!important;
    word-break:normal!important;
  }
  .hero h1 span,main>.hero h1 span,h1 span{line-height:1!important;}
  .hero p,main>.hero p,p,.subtitle{font-size:13.5px!important;line-height:1.52!important;}
  .kicker{font-size:10.5px!important;letter-spacing:.13em!important;}
  .hero .visual,.visual[aria-hidden="true"]{display:none!important;}
  .actions,.cta,.hero-actions,.cards{
    gap:7px!important;
    margin-top:12px!important;
  }
  .actions .btn,.cta .btn,.hero-actions .btn,.btn,.tool-nav a,.tool-nav .btn,button{
    min-height:34px!important;
    padding:8px 11px!important;
    font-size:12px!important;
    line-height:1.1!important;
  }
  .tool-nav{
    position:relative!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:100%!important;
    padding:0 0 7px!important;
    margin:8px 0 12px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .tool-nav a,.tool-nav .btn{flex:0 0 auto!important;white-space:nowrap!important;}
  .product-grid,.grid,.hub-grid,.quick-grid,.cards,.formats,.tools,.flow,.lab,.form-grid,.check-grid,.grid2,.builder-grid,.output-grid,.review-grid{
    grid-template-columns:1fr!important;
    gap:11px!important;
    margin-top:10px!important;
    margin-bottom:16px!important;
  }
  .card,.product,.module,.panel,.quick,.status-card,.summary,.donate-card,.builder-card,.output-card,.review-card{
    border-radius:var(--it-card-radius)!important;
    padding:var(--it-card-pad)!important;
    min-height:0!important;
  }
  .card h2,.product h2,.module h3,.panel h2,h2,h3{margin-top:0!important;margin-bottom:8px!important;line-height:1.15!important;}
  .field,.control{gap:5px!important;margin:9px 0!important;}
  .field input,.field select,.field textarea,.control input,.control select,.control textarea,input,select,textarea{
    min-height:38px!important;
    padding:9px 10px!important;
    font-size:13px!important;
  }
  textarea{min-height:92px!important;}
  .app-shell,.builder-app-shell{
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    margin:0 auto!important;
    display:block!important;
    gap:0!important;
  }
  .app-shell>.sidebar,.builder-app-shell>.sidebar,.app-shell>aside.sidebar,.builder-app-shell>aside.sidebar{
    display:none!important;
  }
  .main-content,.builder-main-content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .fixture-builder-promo{width:100%!important;max-width:100%!important;margin:12px 0!important;}
  .route-detail-grid{grid-template-columns:1fr!important;}
  .route-search-input-row{grid-template-columns:1fr!important;}
  .route-search-results{max-height:220px!important;}
  .led-map,.editable-map,.panel-map,.mapper-grid,.cabinet-map,.output-grid-map{max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
  .foot,footer{padding-top:16px!important;padding-bottom:28px!important;gap:8px!important;}
}

@media(max-width:420px){
  main:not(.app-shell):not(.builder-app-shell),footer,.it-global-header{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;}
  .it-global-nav a{font-size:10px!important;padding:0 8px!important;height:30px!important;}
  .it-global-lang a{font-size:9.5px!important;height:27px!important;padding:0 7px!important;}
  .actions .btn,.cta .btn,.btn,button{font-size:11.5px!important;padding:8px 10px!important;}
  .hero h1,main>.hero h1,h1{font-size:clamp(26px,8.8vw,36px)!important;}
  .card,.product,.module,.panel,.quick,.status-card{padding:13px!important;border-radius:17px!important;}
}