/* EngineerHub shared responsive/layout hardening — loaded after page-local styles. */
@media(max-width:680px){
  .panel-title,.panel-head{flex-wrap:wrap!important}
  .panel-title .unit-toggle,.panel-head .unit-toggle{width:100%!important;max-width:100%!important;min-width:0!important;flex:1 1 100%!important}
  .unit-toggle .unit-btn{min-width:0!important;flex:1 1 0!important}
  nav.breadcrumb,p.breadcrumb{white-space:normal!important;flex-wrap:wrap!important;max-width:100%!important;overflow-wrap:anywhere!important}
  nav.breadcrumb [aria-current="page"],p.breadcrumb .here{min-width:0!important;overflow-wrap:anywhere!important}
  .calc-grid>*,.learning-grid>*,.textgrid>*,.dashboard>*,.article-grid>*{min-width:0!important;max-width:100%!important}
  .chart-legend{flex-wrap:wrap!important}
  .chart-card,.timeline-card{min-width:0!important;max-width:100%!important}
  .chart-card svg,.timeline-card svg{max-width:100%!important;height:auto!important}
  .textgrid table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
  .textgrid th,.textgrid td{overflow-wrap:anywhere!important}
}

@media(max-width:680px){
  /* Cover the remaining header-row variants used by simulators and case studies. */
  .panel-title-row,.section-head,.unit-row,.panel h2{flex-wrap:wrap!important;min-width:0!important;max-width:100%!important}
  .panel-title-row .unit-toggle,.section-head .unit-toggle,.unit-row .unit-toggle,.panel h2 .unit-toggle{
    width:100%!important;max-width:100%!important;min-width:0!important;flex:1 1 100%!important;margin-left:0!important;margin-right:0!important
  }
  /* Checkbox/radio controls must not inherit full-width numeric-input styling. */
  .field label input[type="checkbox"],.field label input[type="radio"]{
    width:auto!important;height:auto!important;min-width:24px!important;min-height:24px!important;flex:0 0 auto!important;padding:0!important
  }
  /* Wide educational timelines remain usable via local horizontal scrolling, never page scrolling. */
  .timeline-card,.milestone-figure{overflow-x:auto!important;overscroll-behavior-inline:contain}
}

@media(max-width:680px){
  /* WCAG 2.2 target size (minimum): interactive controls are at least 24x24 CSS px. */
  .unit-btn,.ub,.mode-tab{min-height:32px!important}
  .tech-info,.scenario-info,.scenario-info-btn,.u-info,.info-btn{
    min-width:24px!important;min-height:24px!important
  }
}

/* Four pages style the shared footer link row as a non-wrapping flex line.
   As a grid item its min-content width (~412px) then forces the whole footer
   wider than the viewport, so the page scrolls sideways on phones. */
.eh-site-footer>*{min-width:0}
.footer-links,.eh-footer-links{flex-wrap:wrap}

@media(max-width:680px){
  /* Checkbox/radio controls appear inside several different label wrappers
     (.field label, .check, .check-row, .check-wrap, .choice-card, ...), so this
     is matched on the control itself rather than on any one wrapper class. */
  input[type="checkbox"],input[type="radio"]{
    min-width:24px!important;min-height:24px!important;
    width:auto!important;height:auto!important;flex:0 0 auto!important;padding:0!important
  }
}

/* A .table-wrap is meant to scroll its own overflow, but as a flex/grid child it
   inherits min-width:auto and cannot shrink below the table's min-width — so a
   920px table pushed the whole page sideways instead of scrolling in place. */
.table-wrap{min-width:0;max-width:100%}
.stack{min-width:0}
.stack>*{min-width:0;max-width:100%}