/* v2.35 guide-only responsive QA fixes. Does not change product tokens. */
.component-grid > *, .release-grid > *, .section-head .head-content {
  min-width: 0;
}
img, video { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
.tab-strip-preview { max-width: 100%; overflow-x: auto; }
.tab-strip-preview > div { flex-shrink: 0; }
.surface-demo { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill-primary, .pill-inverse, .pill-secondary { max-width: 100%; box-sizing: border-box; }
.hero .meta-cell, .skill-callout-foot, .release-small { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .container > [style*="margin"], .surface-demo { margin-left: 0 !important; margin-right: 0 !important; }
  .container h3[style*="80px"] { margin-left: 0 !important; margin-right: 0 !important; }
  .container > [style*="grid-template-columns"], .sig-gen > [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .component-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-card { padding: 24px; overflow-wrap: anywhere; }
  .prose code { overflow-wrap: anywhere; }
  .surface-card { padding: 24px; min-width: 0; overflow-wrap: anywhere; }
  .cta-bar { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .stat-row { flex-wrap: wrap; }
  .stat { min-width: 0; }
  .stat-num { font-size: 23px; overflow-wrap: anywhere; }
  .row-list .row { gap: 16px; align-items: flex-start; }
  .row-list .row .r { white-space: normal; text-align: right; overflow-wrap: anywhere; }
  table.vocab { display: block; max-width: 100%; overflow-x: auto; }
  #documents table { display: block; max-width: 100%; overflow-x: auto; }
  .vocab td, .vocab th { min-width: 120px; overflow-wrap: anywhere; }
  .container [style*="grid-template-columns: 80px 110px 1fr"] {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .container [style*="grid-template-columns: 80px 110px 1fr"] > :last-child {
    grid-column: 1 / -1; overflow-wrap: anywhere;
  }
  .container > div[style*="padding: 32px"] { padding: 20px !important; }
  .sig-gen { min-width: 0; }
  .sig-gen label, .sig-gen input, .sig-gen select { min-width: 0; max-width: 100%; }
  .sig-gen input, .sig-gen select { width: 100%; box-sizing: border-box; }
  .pill-primary, .pill-inverse, .pill-secondary { white-space: normal; text-align: center; justify-content: center; }
  .hero .eyebrow-row { flex-wrap: wrap; row-gap: 12px; }
  .hero .eyebrow-r { text-align: left; }
}