plan/work/WORK-481-container-query-collapse-contract-responsive-preview-simulation.md. Only one definition per ID is supported;
edits may target the wrong file. Remove the duplicate to resolve.The shared data-collapse responsive contract (WORK-469, WORK-473) is @media-based: beside→stack collapse (split.css), grid→1-column reflow (feature.css), and collapse-to-carousel (carousel.css) all key off the global viewport. Two consequences:
Tracking started Jun 26 — check back for trends.
data-collapse collapse rules from @media (max-width: …) to @container (max-width: …) in the three contract files: split.css (beside→stack), feature.css (grid→1-col), carousel.css (collapse-to-carousel + the existing --constrained blocks). Same sm/md/lg breakpoints and data-collapse hook; never still opts out..rf-preview__viewport-frame a container (container-type: inline-size) so a previewed rune queries the frame width — the viewport selector then accurately drives the collapse breakpoints. Confirm the preview's own existing @container chrome rules (toolbar/canvas, which live outside the frame) are unaffected (they continue to query .rf-page-content).feature carousel doc example to grid + collapse-to="carousel" with responsive="mobile,tablet,desktop" once the flip is simulable, and update the prose.matchMedia mount/unmount in the behavior layer (SPEC-100 ruled this out; the responsive path stays CSS/touch-only — no JS nav on collapse).data-collapse author API.data-collapse collapse rules in split.css, feature.css, and carousel.css are container-query driven (@container), keyed off the nearest container (.rf-page-content on real pages), with the sm/md/lg breakpoints and never opt-out unchanged.feature in the docs layout beside the sidebar)..rf-preview__viewport-frame is a container, so a previewed rune's collapse flips track the viewport selector (mobile flips collapse-to="carousel" to a swipe row; tablet/desktop keep the grid).@container chrome rules (toolbar/canvas bleed) are unaffected by the new frame container.feature carousel doc example is restored to grid + collapse-to="carousel" with a responsive preview, and the prose explains the flip.Mechanical @media→@container swap in the three files, relying on the existing .rf-page-content container. Key risk is semantic shift: @container measures the content column, which is narrower than the viewport (especially docs pages with a sidebar), so flips will fire at a wider viewport than today — arguably more correct, but a site-wide visual change that needs the cross-layout pass above. Note a full-bleed data-width="full" rune still queries .rf-page-content (its container ancestor), not its own bled width — confirm that collapse point is acceptable or scope an explicit container on bled hosts. Land behind the v0.26.0 carousel epic so it can be reverted independently if the breakpoint shift proves undesirable.
data-collapse hook being converted.feature carousel adoption (the doc example restored here).collapse semantics).@container usage in default.css, split.css, bento.css, hero.css, mockup.css, docs.css.feature carousel doc example — the preview viewport selector could not demonstrate collapse-to="carousel" because the flip is @media-gated and the frame is width-only.