/* NXG viewport containment — 390 / 768 / 1280 / 1440.
   Layout-shift only. Does not freeze live wires. Load AFTER page styles. */
html, body {
  overflow-x: clip !important;
  max-width: 100% !important;
  width: 100% !important;
}
html { height: 100%; }
body { min-height: 100%; overflow-wrap: anywhere; }

img, svg, video, canvas, iframe, embed, object, table, pre, code {
  max-width: 100%;
}
img, svg, video, iframe { height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-x: auto; }

header, nav {
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
header { display: flex; }
header .brand, header .tag, header .logo-text, .logo-text, nav .logo, nav .logo-text {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
header img, nav img, .logo img, .logo-mark { flex: 0 0 auto; max-width: 36px; height: auto; }
header a, nav a { min-width: 0; }

main, .banner, section, section.panel, .container, .capability-card,
.feeds, article.feed, .quotes, .analysis-bullets, .hero, .hero-grid, .hero-content {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pills, .strip, .capability-tags, .intel-actions, .nav-links, .links, .hero-badges {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}
.pills a, .badge, .capability-tags a, .capability-tags span, .intel-actions a {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  flex: 0 1 auto;
}

a, .quotes a, .panel a, .analysis-bullets a, .meta, .fetched, .fetched strong,
.ts, ul.items a, .when, .st, header .brand, header .tag {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.st, header .tag { white-space: normal; }

[id$="-box"], #iss-box, #military-feeds, #c-bullets, #m-bullets, #c-quotes, #m-quotes {
  max-width: 100%;
  overflow-x: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.capabilities-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.compliance-badge { min-width: 0; max-width: 100%; }

@media (max-width: 768px) {
  header, nav { gap: 8px 10px; padding-left: 12px; padding-right: 12px; height: auto; min-height: 56px; }
  header .brand { flex: 1 1 10rem; font-size: 12px; letter-spacing: 0.04em; }
  main { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 1024px) {
  .capabilities-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
}