the gutter shows all three widths at once

One control, three values, horizontal only — Mobile, Tablet, Desktop on one row, smallest first because
that is the direction they cascade.

Not tied to the device toggle, and the difference from the per-band control is the reason. That one has
two axes and three bands, where showing every width would be eighteen inputs, so it writes to whichever
width the preview is showing. Here there is one axis and one value, so all three fit — and seeing them
together is the point. A gutter is a progression, 4 then 8 then 12, judged as a whole; reading it off
three separate visits to the same control is how a site ends up tighter on a tablet than on a phone.

Inherit still says what it is inheriting, and Mobile still says "None", because there is nothing below
it to inherit from.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/LayoutPanel.tsx

@@ -364,11 +364,14 @@ export const LayoutPanel = () => {
 
                 PaddingTab is the per-band control and it stays — for the pages, where a band really
                 does want its own spacing. Here the three wrappers share one measure and should share
-                one number, so this is one select rather than three sections' worth.
+                one number.
+
+                All three widths at once, and deliberately NOT tied to the device toggle: a gutter is a
+                progression, 4 then 8 then 12, and it is judged as one. Reading it off three separate
+                visits to the same control is how a site ends up tighter on a tablet than on a phone.
               */}
               <GutterTab
                 gutter={draft.padding_x}
-                device={device}
                 steps={draft.padding_steps}
                 onChange={(padding_x) => patch({ padding_x })}
               />