/* Signal Architect Adaptive Monitor Fit v1.0
   Site-wide responsive safety layer. Loaded last on production pages.
   Purpose: fit available monitor/browser width without changing research behavior. */

html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

/* All primary page shells must be fluid, never wider than the viewport. */
:is(.container,.shell,.page-shell,.site-shell,.app-shell,.cad-shell,.workspace-shell,.research-shell,.content-shell,
    .lh-shell,.ar-shell,.ipe-shell,.il-shell,.ll-shell,.ta-shell){
  width:min(100%,1600px)!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Flex/grid children are allowed to shrink instead of forcing horizontal overflow. */
:is(main,section,article,aside,header,footer,nav,div){min-width:0}
:is(.grid,.dashboard-grid,.workspace-grid,.cards,.card-grid,.metric-grid,.stats-grid,.research-grid,.content-grid){max-width:100%}

/* Tables keep all data available; only the table region scrolls when inherently wide. */
:is(.table-wrap,.table-wrapper,.table-container,.data-table-wrap,.results-table,.watch-table,.ta-table-wrap){
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
table{max-width:100%}

/* Navigation remains usable on narrower monitors instead of increasing page width. */
:is(.sa-global-header,.top-bar,.topbar,.ta-global,.lh-header,.ar-header,.ipe-header){max-width:100vw}
:is(.sa-global-nav,.tab-bar,.tabs,.subtabs,.lh-tabs,.ta-global nav){
  max-width:100%!important;
  overflow-x:auto!important;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

/* Desktop monitors below wide-screen size. */
@media (max-width:1366px){
  :is(.container,.shell,.page-shell,.site-shell,.app-shell,.cad-shell,.workspace-shell,.research-shell,.content-shell,
      .lh-shell,.ar-shell,.ipe-shell,.il-shell,.ll-shell,.ta-shell){padding-left:18px!important;padding-right:18px!important}

  .ta-shell{padding-top:24px!important}
  .ta-hero{grid-template-columns:76px minmax(0,1fr) 220px!important;gap:18px!important;padding:24px!important}
  .ta-search{grid-template-columns:minmax(0,1fr) minmax(320px,42%)!important;gap:20px!important}
  .ta-period-panel{grid-template-columns:minmax(220px,30%) minmax(0,1fr)!important}

  .il-control-deck{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .il-control-deck button{grid-column:auto!important}
  .il-engine-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .il-mtf-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Laptop / small monitor mode. */
@media (max-width:1100px){
  :is(.sa-global-header,.top-bar,.topbar,.ta-global,.lh-header,.ar-header,.ipe-header){
    padding-left:16px!important;padding-right:16px!important;gap:14px!important;
  }

  .ta-global{flex-wrap:wrap!important}
  .ta-brand{min-width:0!important}
  .ta-global nav{width:100%!important}
  .ta-hero{grid-template-columns:70px minmax(0,1fr)!important}
  .ta-status{grid-column:1/-1!important;justify-self:stretch!important;border-left:0!important;border-top:1px solid var(--ta-line)!important;padding:14px 0 0!important;min-width:0!important}
  .ta-search{grid-template-columns:1fr!important}
  .ta-period-panel{grid-template-columns:1fr!important}
  .ta-watch-groups{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .il-app-grid{grid-template-columns:160px minmax(0,1fr)!important}
  .il-master-grid,.il-gauge-layout{grid-template-columns:1fr!important}
  .il-engine-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .il-detail-grid,.il-dimension-grid,.il-saeo-triad,.il-combo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Common high-density layouts collapse progressively. */
  :is(.four-col,.grid-4,.cards-4,.metric-grid-4){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  :is(.three-col,.grid-3,.cards-3){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Tablet / narrow browser window. */
@media (max-width:820px){
  :is(.container,.shell,.page-shell,.site-shell,.app-shell,.cad-shell,.workspace-shell,.research-shell,.content-shell,
      .lh-shell,.ar-shell,.ipe-shell,.il-shell,.ll-shell,.ta-shell){padding-left:12px!important;padding-right:12px!important}

  :is(.hero,.lh-hero,.ar-hero,.ta-hero){padding:18px!important}
  .ta-hero{grid-template-columns:1fr!important;text-align:left}
  .ta-crest{display:none!important}
  .ta-control-grid,.ta-watch-groups,.ta-watch-grid{grid-template-columns:1fr!important}
  .ta-timeframes,.ta-horizons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ta-boundary{align-items:flex-start!important;flex-direction:column!important;gap:7px!important}

  .il-app-grid{grid-template-columns:1fr!important}
  .il-sidebar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .il-sidebar-title,.il-sidebar-note{grid-column:1/-1!important}
  .il-control-deck{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .il-control-deck button{grid-column:1/-1!important}
  .il-master-grid,.il-report-grid,.il-gauge-layout{grid-template-columns:1fr!important}

  :is(.two-col,.three-col,.four-col,.grid-2,.grid-3,.grid-4,.cards-2,.cards-3,.cards-4,.split,.columns){grid-template-columns:1fr!important}

  /* Fixed overlays must fit the current viewport. */
  :is(.modal,.dialog,.popover,.drawer,.overlay-card,.premium-card,.il-premium-card){
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
    overflow:auto!important;
  }
}

/* Phone / very narrow windows. */
@media (max-width:560px){
  body{font-size:14px}
  :is(.sa-global-header,.top-bar,.topbar,.ta-global,.lh-header,.ar-header,.ipe-header){padding:10px!important}
  .ta-shell{padding:16px 10px 36px!important}
  .ta-controls,.ta-ack,.ta-search,.ta-watchlist,.ta-dossier{padding:16px!important}
  .ta-timeframes,.ta-horizons{grid-template-columns:1fr!important}
  .ta-search form>div{flex-direction:column!important}
  .ta-search input{border-right:1px solid var(--ta-line)!important}
  .ta-search button{min-height:44px!important}

  .il-control-deck,.il-sidebar,.il-engine-cards,.il-detail-grid,.il-dimension-grid,.il-saeo-triad,.il-combo-grid,.il-mtf-grid{grid-template-columns:1fr!important}

  button,input,select,textarea{max-width:100%}
  h1{font-size:clamp(28px,9vw,42px)!important}
  h2{font-size:clamp(21px,7vw,30px)!important}
}