/*
 * Post-build fixes layered on top of the generated stylesheet.
 * Selectors key off the data-loc attributes the build emits on every element,
 * which is the only stable hook available without the original sources.
 */

/*
 * The hero's decorative glow layers and the spinning cell art deliberately
 * bleed past their container. With nothing clipping them they widened the
 * document itself, so the whole page rocked sideways on a 320px screen.
 * `clip` (not `hidden`) avoids turning the root into a scroll container, which
 * would break the sticky header.
 */
html,
body {
  overflow-x: clip;
}

/*
 * PageHero lays its copy out in a grid. Grid and flex children default to
 * min-width:auto, so the heading refused to shrink below its longest word and
 * pushed the column ~10px past a 320px viewport. Allowing it to shrink lets the
 * text wrap instead.
 */
[data-loc^='client/src/components/PageHero.tsx'] {
  min-width: 0;
}