Where the responsive toggle lives — the inspector panel

How the operator finds the toggle:

• Click a section in the Structure tree → the inspector opens (or focuses) on the right with that section's settings
• Layout tab is open by default — the new Responsive group sits below Columns / Direction / Gap
• Three controls:
  • Mobile layout — 2-COL or STACK segmented control
  • Column ratio — 25/75, 33/66, 50/50, 66/33 buttons (only visible when 2-COL is selected)
  • Auto-collapse below — 320 / 480 / 768 / never — even 2-COL sections stack below this width
• Live preview at the bottom of the group — shows the actual layout at 390px. Updates as you change settings.
• Top-right badge on each section in the page (live) — shows 2-COL ✓ or STACK. The operator sees the state at a glance without opening the inspector.
• Apply button at the bottom commits the change. The page re-renders with the new responsive behavior.

For tablet: the same group has a Tablet tab, with the same 3 controls but defaults that make sense for 768px. The operator can also flip the Breakpoint to "stack at 1024+" if they want.

For desktop: the Layout tab doesn't show the Responsive group — desktop layout is controlled by the Columns / Direction / Gap controls above. Responsive overrides only kick in below the breakpoint.