sections take vertical padding, not a gap

Space between became Vertical padding: space-y hangs its margin below the box,
and the box's bottom border is the separator, so the room never landed above a
rule. The canvas now rewrites both axes on a band.

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

web/canvas.ts

@@ -596,8 +596,8 @@ export function paintMeasure(document: Document): () => void {
  * ── Only the matching utility is touched ──
  *
  * Each target has a pattern naming exactly what this may remove: `px-*` from a gutter, `mb-*` from the
- * header, `space-y-*` from the bands. Everything else on the element survives, which is what makes it
+ * header, `py-*` from a band. Everything else on the element survives, which is what makes it safe to
- * safe to do this to a `<header>` carrying a border and a background as well.
+ * do this to a `<header>` carrying a border and a background as well.
  *
  * The one exception is a SECTION, whose own padding is also a `px-*` on the marked element — so while
  * the panel is open its padding reads as the site gutter. Harmless on the layout page, whose bands have
@@ -605,7 +605,7 @@ export function paintMeasure(document: Document): () => void {
  */
 export type SpacingDraft = {
   header?: { paddingX?: Steps; marginBottom?: Steps };
-  sections?: { paddingX?: Steps; gap?: Steps };
+  sections?: { paddingX?: Steps; paddingY?: Steps };
   footer?: { paddingX?: Steps; marginTop?: Steps };
 };
 
@@ -626,9 +626,9 @@ export const scaleClasses = (utility: string, steps: Steps | undefined): string
 const TARGETS = [
   { selector: '[data-gutter="header"]', utility: 'px', read: (s: SpacingDraft) => s.header?.paddingX },
   { selector: '[data-gutter="sections"]', utility: 'px', read: (s: SpacingDraft) => s.sections?.paddingX },
+  { selector: '[data-gutter="sections"]', utility: 'py', read: (s: SpacingDraft) => s.sections?.paddingY },
   { selector: '[data-gutter="footer"]', utility: 'px', read: (s: SpacingDraft) => s.footer?.paddingX },
   { selector: '[data-space="header"]', utility: 'mb', read: (s: SpacingDraft) => s.header?.marginBottom },
-  { selector: '[data-space="sections"]', utility: 'space-y', read: (s: SpacingDraft) => s.sections?.gap },
   { selector: '[data-space="footer"]', utility: 'mt', read: (s: SpacingDraft) => s.footer?.marginTop },
 ] as const;
 
@@ -647,6 +647,11 @@ export function applySpacing(document: Document, spacing: SpacingDraft): () => v
   }
 
   return () => {
-    for (const [element, before] of touched) element.className = before;
+    // Backwards: a section is touched twice, once per axis, so the FIRST record is the original and
+    // the second is the state after the x pass. Restoring in order would leave the intermediate one.
+    for (let index = touched.length - 1; index >= 0; index -= 1) {
+      const [element, before] = touched[index]!;
+      element.className = before;
+    }
   };
 }

web/sections/SpacingTab.tsx

@@ -45,7 +45,7 @@ const BANDS = [
     label: 'Sections',
     fields: [
       { key: 'paddingX' as const, label: 'Horizontal padding' },
-      { key: 'gap' as const, label: 'Space between' },
+      { key: 'paddingY' as const, label: 'Vertical padding' },
     ],
   },
   {