/* ==========================================================================
   styles/responsive.css — cross-section responsive fixes, loaded LAST
   Owner: responsive-agent. Section-specific fixes are NOT made here: they are
   filed as requests in reports/responsive-requests.md for each section owner.
   Breakpoint literals (custom properties do not work in @media):
     tablet (max-width: 1199.98px) · nav-mobile (max-width: 839.98px)
     quote-sm (max-width: 809px)   · phone (max-width: 789.98px)
   ========================================================================== */

/* ---------- 1. Horizontal overflow guard (all widths) ----------
   base.css sets `body { overflow-x: clip }`. While <html> is `visible`, the
   body value is propagated to the viewport, where `clip` is used as `hidden`.
   The viewport then becomes a hidden-overflow scroll container: wider
   descendants still count toward scrollWidth and the page can be shifted
   sideways by scrollTo(), focus or anchor scrolling.
   Seen at <= 430px: the rotating .import__ring--3 (304px box, up to ~430px
   bounding box while it spins) pushed scrollWidth to 441 @430, 421 @390,
   405 @360, 386 @320; window.scrollTo(300, y) moved scrollX to 10 / 31 / 64
   and left a blank strip on the right
   (reports/shots/responsive-agent/360-import-ring-hscroll.png).
   Giving <html> its own `clip` stops that propagation, so body's clip
   applies to body itself: overflow is clipped at the viewport edge and no
   longer scrollable. `clip` is not a scroll container, so position: sticky
   (hero stage, tab bar) and the fixed nav/overlay are unaffected. Verified:
   scrollWidth == innerWidth at 1440/820/430/390/360/320 over 10 samples,
   hero stage still pins at 20vh, nav top 0. */
html {
  overflow-x: clip;
}