/* Final responsive layer.
   This file loads after every template-specific stylesheet so a page cannot
   accidentally restore a wide desktop grid after the shared mobile rules. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}

main,
section,
header,
footer,
nav,
.shell,
.prose-shell,
.article-layout,
.article-body,
.calculator-card,
.calculator-form,
.mini-tool,
.standalone-tool,
.embed-preview,
.code-box{
  min-width:0;
  max-width:100%;
}

.hero-grid,
.page-hero-grid,
.component-fields,
.scenario-grid,
.result-grid,
.signal-layout,
.balance-grid,
.article-cards,
.library-grid,
.feature-grid,
.widget-page-grid,
.contact-grid,
.tool-grid,
.resolution-controls,
.scenario-links,
.component-library,
.pairing-card-grid,
.catalog-links,
.summary-grid,
.related-component-grid,
.hub-link-grid,
.next-step-grid,
.worksheet-list,
.magazine-path,
.recommended-resource-grid,
.resource-check-grid,
.result-path-grid,
.pair-comparison-grid,
.selection-guide-grid,
.faq-answer-map{
  min-width:0;
  max-width:100%;
}

.hero-grid>*,
.page-hero-grid>*,
.component-fields>*,
.scenario-grid>*,
.result-grid>*,
.signal-layout>*,
.balance-grid>*,
.article-cards>*,
.library-grid>*,
.feature-grid>*,
.widget-page-grid>*,
.contact-grid>*,
.tool-grid>*,
.resolution-controls>*,
.scenario-links>*,
.component-library>*,
.pairing-card-grid>*,
.catalog-links>*,
.summary-grid>*,
.related-component-grid>*,
.hub-link-grid>*,
.next-step-grid>*,
.worksheet-list>*,
.magazine-path>*,
.recommended-resource-grid>*,
.resource-check-grid>*,
.result-path-grid>*,
.pair-comparison-grid>*,
.selection-guide-grid>*,
.faq-answer-map>*{
  min-width:0;
  max-width:100%;
}

.tool-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.mini-tool h2,
.mini-tool p,
.mini-tool a,
.mini-tool output,
.mini-tool output strong,
.mini-tool output span{
  max-width:100%;
  overflow-wrap:anywhere;
}

.tool-control,
.tool-control input,
.resolution-controls select{
  min-width:0;
  max-width:100%;
}

.scenario-launcher .button{
  max-width:100%;
  white-space:normal;
  text-align:center;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

.article-table-wrap,
.info-table,
.code-box{
  max-width:100%;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:800px){
  body .tool-grid,
  body .article-cards,
  body .library-grid,
  body .cluster-grid,
  body .component-library,
  body .pairing-card-grid,
  body .catalog-links,
  body .related-component-grid,
  body .scenario-links,
  body .summary-grid,
  body .hub-link-grid,
  body .next-step-grid,
  body .worksheet-list,
  body .magazine-path,
  body .recommended-resource-grid,
  body .resource-check-grid,
  body .result-path-grid,
  body .pair-comparison-grid,
  body .selection-guide-grid,
  body .faq-answer-map{
    grid-template-columns:minmax(0,1fr);
  }

  .tools-hub .tool-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-launcher{
    grid-column:auto;
  }

  .mini-tool{
    width:100%;
    padding:clamp(22px,5vw,32px);
  }

  .article-table-wrap,
  .info-table,
  .result-evidence table{
    display:block;
    width:100%;
    overflow-x:auto;
  }
}

@media(max-width:600px){
  .resolution-controls{
    grid-template-columns:minmax(0,1fr);
  }

  .mini-tool h2{
    font-size:clamp(22px,7vw,27px);
    line-height:1.2;
  }

  .mini-tool output{
    display:flex;
    align-items:flex-start;
    flex-direction:column;
  }

  .mini-tool output strong{
    font-size:clamp(23px,8vw,30px);
    line-height:1.18;
  }

  .scenario-launcher .button{
    width:100%;
  }
}

@media(max-width:380px){
  .shell{width:calc(100% - 20px)}
  .prose-shell,
  .article-hero-inner,
  .article-layout{
    padding-inline:10px;
  }
  .mini-tool{padding:20px}
}