/* Shared base layout rules used by BOTH the pre-hydration static
   fallback (#static-fallback in index.html) and the post-hydration
   React tree. Loaded via a synchronous <link> in index.html so it
   applies before LCP paint, independent of the JS bundle.

   Why this file exists separately from Tailwind's bundled Preflight:
   the e2e swap-parity test (e2e/header-mobile-responsive.spec.ts)
   blocks the React entry to measure the static fallback in isolation.
   In that mode, Tailwind's CSS bundle never loads, so any layout
   reset Tailwind would normally provide (notably `body { margin: 0 }`)
   is missing. Firefox then applies its UA default `body { margin: 8px }`,
   producing an 8px x-drift between the isolated fallback and the
   hydrated React header. Anything both paths must agree on at the
   pixel level belongs here, not in Tailwind.

   Tailwind Preflight also sets `box-sizing: border-box` on `*` (see
   tailwindcss preflight). Without that, the static subtree uses the UA
   default `content-box` while the hydrated header is border-box, which
   changes inner content widths, line wrapping, and measured height —
   failing header-swap-visual / header-mobile-responsive and inflating
   CLS when the banner is swapped for a different-height box. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reserve scrollbar gutter so the header width doesn't change between
   "static fallback only" and "hydrated app" states. WebKit in CI uses
   non-overlay scrollbars, which can shrink the viewport by ~30–80px and
   break swap-parity bounding boxes on narrow viewports. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body { margin: 0; }