responsive-layoutlisted

# Responsive Layout Responsive layout is intrinsic reflow plus content-led breakpoints and container queries, not named-device CSS. ## The decision order 1. Start mobile-first and use Grid/Flex intrinsic sizing (`minmax`, `auto-fit`, `clamp`, `%`/`fr`). 2. Add breakpoints only where observed content breaks; reusable components use container queries. 3. Verify the product's minimum supported viewport, 200–400% zoom, long/translated content, narrow embeds, and wide views without accidental overflow or collapse. ## Preserve hierarchy under pressure Start with non-disappearing content, reading order, and narrowest real container; decide stack/reorder/progressive reveal/rail from observed pressure and test long content, locale, zoom, and embedded cases before calling it responsive. ## Non-negotiables - Start from the narrowest supported content state; avoid device-name breakpoints. - Prevent overflow with `min-width: 0`, bounded media, and wrapping; reflow rather than shrink to unusable. - Prefer container queries for reusable components when their behavior depends on their container, not the viewport. - At narrow widths and zoom, ordinary reading and interaction should not require two-dimensional scrolling. Isolate essential exceptions such as wide data tables, maps, timelines, or canvases in a labelled, keyboard-operable scroll region. ## Quick-start patterns Use `references/patterns.md` for the intrinsic grid, sidebar, stack, cluster, and container-query patte