/**
 * Hard-stops for frozen Next interactive tool pages (AssessmentShell).
 * Loaded only on shell-managed snapshot routes via apply-shell.
 *
 * Catches the SecShield-class failure mode: unconstrained SVG / min-content
 * fieldsets expanding past the viewport on mobile.
 *
 * Also restores content-column width: an earlier max-width:100% on
 * #security-checkup overrode Tailwind max-w-content-max and blew the
 * assessment out to full viewport width on large desktops.
 */

html {
  overflow-x: clip;
}

main#main-content {
  overflow-x: clip;
  max-width: 100%;
}

/* Match site content column (~1200) / legacy --content-max (78rem) */
#security-checkup {
  overflow-x: clip;
  width: 100%;
  max-width: min(100%, var(--content-max, var(--sc-width-full, 1200px))) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

/* AssessmentShell: fieldset default min-width:min-content blows out mobile */
#security-checkup fieldset,
main#main-content fieldset {
  min-width: 0 !important;
  max-width: 100%;
}

#security-checkup > div,
main#main-content [class*="space-y-5"].rounded-2xl,
main#main-content aside {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Horizontal step rails may scroll internally; must not expand the page */
main#main-content ol.overflow-x-auto,
main#main-content .overflow-x-auto,
#security-checkup .overflow-x-auto {
  max-width: 100%;
  min-width: 0;
}

/* Never let bare SVGs inherit a giant containing block */
main#main-content svg:not([width]):not([height]) {
  max-width: 3rem;
  max-height: 3rem;
}

main#main-content img {
  max-width: 100%;
  height: auto;
}

/* Lower editorial bands were locked to reading width (max-w-3xl / 2xl)
   inside an already-capped content column, leaving a large empty right gutter. */
main#main-content .mx-auto.max-w-3xl,
main#main-content section.mx-auto.max-w-3xl {
  max-width: 100% !important;
  width: 100%;
}

main#main-content .max-w-2xl:not(h1):not(p) {
  max-width: 100% !important;
  width: 100%;
}

/* Keep hero title/lede readable; do not stretch display type full-bleed */
main#main-content .hero-atmosphere h1.max-w-3xl,
main#main-content .hero-atmosphere p.max-w-2xl {
  max-width: min(100%, 40rem) !important;
}