Badges: fix print centering — dissolve .main_content; hide footer/scroll buttons from print; document print layout architecture

documentation/MODULE__AE_Events_Badge_Templates.md

@@ -256,6 +256,43 @@ in DB and may be needed:
 
 ---
 
+## Print Layout Architecture
+
+### How the print CSS works
+
+The print page (`print/+page.svelte`) injects `<style>` blocks into `<svelte:head>` that
+take effect only in `@media print`. The strategy uses `display: contents` to dissolve
+intermediate layout wrappers so `body` becomes the sole centering flex container.
+
+**Wrappers dissolved via `display: contents`:**
+| Selector | Source | Why dissolved |
+|---|---|---|
+| `#ae_main_content` | `events/+layout.svelte` | `overflow-auto`, `flex-col`, `max-w-7xl`, `bg-gray-50` |
+| `.main_content` | `events/+layout.svelte` | `pb-48`, `pt-20+`, `grow`, `items-center`, `justify-start` |
+| `#badge_render_area` | `print/+page.svelte` | Screen-only right-padding offset for controls panel |
+
+**App chrome hidden via `print:hidden`:**
+- `nav.submenu` (events layout nav bar)
+- `footer.footer` (events layout footer)
+- Scroll-to-top / scroll-to-bottom button div
+- Kiosk header (`<header>` in print page)
+- Controls panel (`<div>` fixed right in print page)
+- Debug info section (edit mode only)
+- Root layout: offline banner, session expired banner, hydration overlay, sys/debug menus
+
+**Result:** `body { display: flex; align-items: center; justify-content: center }` directly
+centers `section.event_badge_wrapper` with no intermediate wrappers in the way.
+
+**`@page` size:** Matched to badge stock per layout code. `margin: 0` fills the page.
+For the PVC layout the page size equals the card exactly, so centering is redundant
+but harmless. For layouts where stock ≠ page, centering positions the badge correctly.
+
+**Future per-template margins:** `print_margin_cfg` is already parsed from `cfg_json`
+in `print/+page.svelte`. A dynamic `@page { margin: ... }` injection can be built from
+that value when a UI for it exists.
+
+---
+
 ## Related Files
 
 | File | Role |

src/routes/events/+layout.svelte

@@ -282,6 +282,7 @@
     <div
         class:hidden={yTop < 500}
         class="
+        print:hidden
         z-20
         hover:opacity-100
         fixed bottom-40 right-1
@@ -356,8 +357,7 @@
             class:opacity-80={yTop < 250}
             class:opacity-0={yTop > 250}
             class="
-        footer
-        z-20
+        footer        print:hidden        z-20
         hover:opacity-100
         absolute bottom-0 left-0 right-0
         w-full max-w-7xl

src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte

@@ -183,8 +183,14 @@
             /* Dissolve layout wrappers — removes their boxes from the layout while
                keeping children renderable. The badge section floats up to body
                as a direct flex child, so body's centering applies to it directly.
-               This avoids all height-chain and overflow-clip issues. */
+               This avoids all height-chain and overflow-clip issues.
+
+               Layers dissolved:
+                 #ae_main_content  — events layout scroll container (flex-col, max-w-7xl, overflow-auto, bg-gray)
+                 .main_content     — events layout inner section (grow, pb-48, pt-20+, items-center)
+                 #badge_render_area — print page badge wrapper (screen-only right padding) */
             #ae_main_content,
+            .main_content,
             #badge_render_area {
                 display: contents !important;
             }