/* Shared safety layer for standalone tool UIs. Keeps each tool's own theme intact. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%;min-width:0}
pre,code{max-width:100%;overflow-wrap:anywhere}
.tableWrap,.table-wrap,.tableScroll,.table-scroll,.tableResponsive,.table-responsive,.resultsWrap,.resultWrap{max-width:100%;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  .topbar .inner,.topbar,.toolbar,.header,.headerRow,.headRow,.actions,.controls,.filters{flex-wrap:wrap!important}
  .wrap,.container,.shell,.app,.page,.content,.main,.inner{max-width:100%!important}
  .grid,.layout,.cols,.columns{min-width:0!important}
  .tableWrap,.table-wrap,.tableScroll,.table-scroll,.tableResponsive,.table-responsive{overflow-x:auto!important}
}

@media (max-width:680px){
  .row3,.three-col,.threeCol,.grid3,.form-grid-3{grid-template-columns:minmax(0,1fr)!important}
  .row2,.two-col,.twoCol,.grid2,.form-grid-2{grid-template-columns:minmax(0,1fr)!important}
  .topbar .inner{align-items:flex-start!important}
  .user{text-align:left!important}
  .tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:2px}
  .tabs>*{flex:0 0 auto}
}

@media (max-width:520px){
  .row{grid-template-columns:minmax(0,1fr)!important}
  .wrap,.container,.shell,.page,.content,.main{padding-left:10px!important;padding-right:10px!important}
  button,.btn,input,select,textarea{min-height:42px}
}
@media (max-width:680px){.controls{grid-template-columns:minmax(0,1fr)!important}}

/* Wide result tables remain usable on phones instead of being clipped. */
@media (max-width:900px){
  table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table thead,table tbody,table tfoot{width:max-content;min-width:100%}
  .card,.panel,.box,.section,.category{max-width:100%!important}
}

/* Landscape phones have little vertical space: compact chrome without changing each tool theme. */
@media (max-width:900px) and (orientation:landscape){
  .wrap,.container,.shell,.page,.content,.main{padding-top:8px!important;padding-bottom:12px!important}
  .hero,.header,.topbar{padding-top:8px!important;padding-bottom:8px!important}
  .card,.panel,.box{padding-top:10px!important;padding-bottom:10px!important}
  h1{font-size:clamp(22px,5vw,34px)!important}
}