responsive-layoutlisted

# Responsive Layout Responsive layout is intrinsic reflow plus content-led breakpoints/container queries, not named-device CSS. ## The decision order 1. Start mobile-first with Grid/Flex intrinsic sizing (`minmax`, `auto-fit`, `clamp`, `%`/`fr`). 2. Add breakpoints only where content breaks; reusable components use container queries. 3. Verify minimum supported viewport, 200–400% zoom, long/translated content, narrow embeds, and wide views without overflow or collapse. ## Preserve hierarchy under pressure Start with non-disappearing content, reading order, and narrowest real container. Choose stack/reorder/progressive reveal/rail from observed pressure; test long content, locale, zoom, and embeds 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, reading/interaction should not require two-dimensional scrolling. Isolate essential exceptions (wide tables, maps, timelines, canvases) in a labelled, keyboard-operable scroll region. ## Quick-start patterns Use `references/patterns.md` for grid, sidebar, stack, cluster, and container-query patterns. Start with `minmax(min(16rem, 100%), 1fr)`, `min-width: 0`, logical sizing, and content-