/* INFOTECH 3.10S — FixtureBuilder mobile final fix
   Scope: /fixture-builder/ only. Direct selectors, no :has dependency.
   Goal: remove duplicated desktop sidebar on phones/tablets and keep the form/output inside viewport.
*/
@media (max-width: 1180px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .builder-app-shell{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0 auto 18px!important;
    padding:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0 0 22px 22px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* The global header already provides navigation. The desktop side rail was duplicating navigation
     and causing the broken smartphone layout. */
  .builder-sidebar,
  .builder-sidebar *,
  .side-astronaut,
  .mobile-topbar{
    display:none!important;
  }

  .builder-main-content{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding:22px 16px 96px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .builder-hero,
  .brand-hero,
  .hero.builder-hero{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 18px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .builder-hero .brand-copy,
  .builder-hero .brand-copy *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .builder-hero .eyebrow{
    font-size:12px!important;
    letter-spacing:.18em!important;
    overflow-wrap:anywhere!important;
  }

  .builder-hero h1{
    font-size:clamp(34px, 11vw, 54px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    margin:14px 0 16px!important;
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-transform:none!important;
  }

  .builder-hero h1 span,
  .builder-hero h1 .accent{
    display:block!important;
    margin-left:0!important;
    white-space:normal!important;
  }

  .builder-hero .subtitle,
  .builder-hero p{
    font-size:17px!important;
    line-height:1.55!important;
    max-width:100%!important;
    margin-bottom:16px!important;
  }

  .builder-hero .badge,
  .engine-badge{
    display:inline-flex!important;
    margin:8px 0 14px!important;
  }

  .hero-trust,
  .trust-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    margin:10px 0 18px!important;
  }

  .trust-chip{
    width:100%!important;
    max-width:100%!important;
    min-height:42px!important;
    padding:11px 16px!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }

  .builder-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    margin:18px 0 42px!important;
    box-sizing:border-box!important;
  }

  .input-panel,
  .output-panel,
  .builder-export-panel,
  .panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:22px!important;
    padding:18px!important;
  }

  .input-panel .kicker,
  .output-panel .kicker,
  .panel .kicker{
    font-size:12px!important;
    letter-spacing:.20em!important;
    overflow-wrap:anywhere!important;
  }

  .input-grid,
  .form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:13px!important;
    width:100%!important;
  }

  .field,
  .field.full{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
  }

  label{
    font-size:15px!important;
    line-height:1.25!important;
  }

  input,
  select,
  textarea,
  button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  input,
  select{
    min-height:46px!important;
  }

  textarea{
    min-height:178px!important;
  }

  #builderOutput,
  .builder-output,
  .output-panel pre,
  .output-panel .output,
  .output{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:auto!important;
    white-space:pre-wrap!important;
    word-break:break-word!important;
    box-sizing:border-box!important;
  }

  .mode-grid,
  .mode-list,
  .modes-grid,
  .mode-choice-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
  }

  .mode-card,
  .mode-pill,
  .mode-option,
  .mode-choice{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .actions,
  .builder-export-actions,
  .output-panel .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
  }

  .actions .btn,
  .actions button,
  .actions a,
  .builder-export-actions button,
  .output-panel .actions button,
  .output-panel .actions a{
    width:100%!important;
    min-height:42px!important;
    justify-content:center!important;
  }

  .table-wrap,
  .channel-table-wrap,
  .review-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow:auto!important;
  }

  table,
  .channel-table,
  .review-table{
    min-width:620px!important;
  }

  .fixture-credit,
  #builder-credit,
  .credit-card{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Mobile AVA: support badge only. It must not sit inside an input or block form use. */
  .infotech-support-float{
    position:fixed!important;
    width:108px!important;
    right:8px!important;
    bottom:8px!important;
    z-index:9998!important;
    pointer-events:none!important;
  }

  .infotech-support-float > *{
    pointer-events:auto!important;
  }

  .infotech-support-float .support-bubble{
    display:none!important;
  }

  .infotech-support-float .support-card{
    width:min(280px, calc(100vw - 20px))!important;
    right:0!important;
    bottom:118px!important;
  }

  .infotech-support-float .support-mascot-btn{
    width:108px!important;
    height:100px!important;
    overflow:visible!important;
  }

  .infotech-support-float .support-mascot-btn img,
  .infotech-support-float .support-mascot-btn video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    transform:scale(1.08)!important;
    transform-origin:center center!important;
  }
}

@media (max-width:390px){
  .builder-main-content{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .input-panel,
  .output-panel,
  .builder-export-panel,
  .panel{
    padding:16px!important;
  }

  table,
  .channel-table,
  .review-table{
    min-width:560px!important;
  }
}