feat(badges): layout CSS system — data-layout attribute, @page injection, style_href

Two compiled layout CSS files in src/lib/ae_events/badges/css/:
  - badge_layout_epson_4x5_fanfold.css — 4"×5" per side, Epson ColorWorks C3500
    fanfold duplex; preferred for general conference use (ISHLT, demos)
  - badge_layout_zebra_zc10l_pvc.css — 3.5"×5.5" PVC card, Zebra ZC10L,
    single-sided (pair with duplex=0 on template)

Rules scoped under [data-layout="..."] on the wrapper — beats Tailwind utility
class specificity without !important. Vite hot-reloads these in dev.

Badge component: add data-layout attribute from template.layout field; import
both layout CSS files (falls back to Tailwind 4"×6" defaults if layout unset).

Print page svelte:head: inject @page paper-size rule per layout code
(@page cannot use attribute selectors so it must be dynamic). Also wire
style_href as a <link> for per-event external client branding CSS.

db_events.ts Badge_template interface: add style_href and duplex fields.
MODULE doc: update layout codes table with badge_4x5_fanfold entry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte

@@ -33,6 +33,12 @@
         log_lvl = 0
     }: Props = $props();
 
+    // Badge layout CSS — compiled in, hot-reloads in dev.
+    // Each file scopes rules under [data-layout="..."] on the wrapper section.
+    // @page rules (paper size) are injected per-template in print/+page.svelte.
+    import '$lib/ae_events/badges/css/badge_layout_epson_4x5_fanfold.css';
+    import '$lib/ae_events/badges/css/badge_layout_zebra_zc10l_pvc.css';
+
     // *** Import Svelte specific
     import { browser } from '$app/environment';
     import { goto } from '$app/navigation';
@@ -561,6 +567,7 @@ onkeypress={() => {
 
 <section
     id="event_badge_{$lq__event_badge_obj?.event_badge_id}"
+    data-layout={$lq__event_badge_template_obj?.layout ?? 'badge_4x6_fanfold'}
     class="event_badge_wrapper event_badge print_area
         flex flex-row flex-wrap gap-4
         items-stretch justify-center

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

@@ -122,6 +122,43 @@
         {$lq__event_badge_obj?.full_name_override ?? $lq__event_badge_obj?.full_name ?? '—'}
         {$events_loc?.title ? ` — ${$events_loc.title}` : ''}
     </title>
+
+    <!--
+        @page rule sets paper size for the browser print dialog.
+        Scoped per layout code from the badge template.
+
+        Epson 4×5 fanfold:  front (5") + back (5") = 10" strip, 4" wide.
+        Zebra ZC10L PVC:    single card, 3.5" × 5.5", single-sided (duplex=0).
+        Default (4×6):      front (6") + back (6") = 12" strip, 4" wide.
+
+        @page cannot use selector scoping — it must be top-level CSS — so we inject
+        it dynamically here based on the template's layout field rather than putting
+        it in the compiled layout CSS files.
+    -->
+    {#if $lq__event_badge_template_obj?.layout === 'badge_3.5x5.5_pvc'}
+        <style>
+            @page { size: 3.5in 5.5in; margin: 0; }
+            @media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
+        </style>
+    {:else if $lq__event_badge_template_obj?.layout === 'badge_4x5_fanfold'}
+        <style>
+            @page { size: 4in 10in; margin: 0; }
+            @media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
+        </style>
+    {:else}
+        <!-- Default: badge_4x6_fanfold or layout not yet set -->
+        <style>
+            @page { size: 4in 12in; margin: 0; }
+            @media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
+        </style>
+    {/if}
+
+    <!-- External client CSS: brand colors, logo sizing, footer stripe colors per event.
+         Set style_href on the badge template. Edit the file on the static server and
+         refresh to update mid-event without any deployment. -->
+    {#if $lq__event_badge_template_obj?.style_href}
+        <link rel="stylesheet" href={$lq__event_badge_template_obj.style_href} />
+    {/if}
 </svelte:head>
 
 {#if $lq__event_badge_obj && $lq__event_badge_obj.event_id && event_badge_id}