Badges: panel widens to w-80 while editing, font scaling on active card

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

@@ -785,7 +785,7 @@
     .field-card--active {
         border-color: rgb(99 102 241 / 0.45);  /* indigo-500, muted */
         box-shadow:
-            0 0 0 3px rgb(99 102 241 / 0.18),  /* soft outer glow — the "zoom ring" */
+            0 0 0 3px rgb(99 102 241 / 0.18),  /* soft outer glow */
             0 4px 14px rgb(0 0 0 / 0.11);      /* elevation shadow */
     }
     :global(.dark) .field-card--active {
@@ -821,6 +821,25 @@
         overflow: hidden;
     }
 
+    /* ---- Active card: scale up value text and form inputs for accessibility ----
+       Physical font-size increase (not transform: scale) so touch targets and text
+       genuinely get larger — benefits all users, not just visual appearance.
+       Transition on font-size animates the magnification smoothly.
+       ~150% of text-sm (0.875rem) = 1.3rem for the value display line.
+       Form inputs go to 1.05rem — larger but still contained in the 240px form width. */
+    .flex-1 > p:not(.field-label) {
+        transition: font-size 180ms ease-out, line-height 180ms ease-out;
+    }
+    .field-card--active .flex-1 > p:not(.field-label) {
+        font-size: 1.3rem;
+        line-height: 1.3;
+    }
+    .field-card--active .ctrl-accordion-inner input,
+    .field-card--active .ctrl-accordion-inner textarea,
+    .field-card--active .ctrl-accordion-inner select {
+        font-size: 1.05rem;
+    }
+
     /* ---- Entrance animation for form content ----
        Triggered each time .open is applied to the parent accordion.
        Pairs with the height animation: content fades + zooms in from

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

@@ -107,6 +107,12 @@
     // value on every keystroke. The badge render merges it over the saved badge
     // object so the user can see changes as they type, before saving.
     let preview_overrides: Record<string, any> | null = $state(null);
+
+    // When any field is being edited, widen the controls panel (w-64 → w-80)
+    // and adjust the badge area margin to match. The panel is fixed right-0 so
+    // growing its width expands it leftward into the badge area automatically.
+    // transition-all on both elements makes the layout shift smooth.
+    let is_editing = $derived(preview_overrides !== null);
 </script>
 
 <svelte:head>
@@ -244,9 +250,10 @@
     </header>
 
     <!-- Badge render area.
-         pr-64 prevents the badge from hiding under the fixed right controls panel.
+         pr-64/pr-80 prevents the badge from hiding under the fixed right controls panel.
+         Widens to pr-80 while a field is being edited (panel also widens to match).
          On print: pr-0 restores full width, controls panel is hidden. -->
-    <div class="print:pr-0 pr-64">
+    <div class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
         <!-- null → Element_fit_text auto-scales; a number → manual size override from controls. -->
         <!-- preview_overrides: non-null while a field card is open in controls — gives live preview. -->
         <Comp_badge_obj_view_v2
@@ -264,11 +271,16 @@
     </div>
 
     <!-- Controls panel: fixed to the right edge of the viewport — screen-only.
-         w-64 (256px) matches pr-64 above. top-20 clears the page header (~80px).
+         Normally w-64 (256px); expands to w-80 (320px) while a field is being edited
-         Independently scrollable. Always visible regardless of viewport width. -->
+         so the scaled value text and form inputs have room without clipping.
-    <div class="print:hidden fixed right-0 top-20 bottom-0 w-64 overflow-y-auto z-30
+         Fixed right-0 means width growth expands leftward into the badge area.
+         top-20 clears the page header (~80px). Independently scrollable. -->
+    <div class="print:hidden fixed right-0 top-20 bottom-0 overflow-y-auto z-30
                 border-l border-gray-200 dark:border-gray-700
-                bg-white dark:bg-zinc-900 p-2">
+                bg-white dark:bg-zinc-900 p-2
+                transition-all duration-200"
+         class:w-80={is_editing}
+         class:w-64={!is_editing}>
         <Comp_badge_print_controls
             event_id={$lq__event_badge_obj.event_id as string}
             event_badge_id={event_badge_id as string}