Hero Phase 3: element select / drag / edit (text_block + buttons)

Third phase of the hero canvas editor (see HERO_EDITOR.md).

- HeroElement: editor mode — inner content made non-interactive so the wrapper
  handles select/drag; selection outline; box width now canvas-relative
  (calc(100% - 36px)) so text blocks fit the smaller editor canvas
- HeroEditor: element tray (+ Text / + Buttons), click-to-select, native
  Pointer Events drag (position as % of the canvas, clamped), Delete key + panel
  delete, z-order (send back / bring forward), and per-type property panels:
  - text_block: per-line text / tag / font size (px) / color / bold, add+remove
    lines, alignment
  - buttons: per-item label / path / variant, add+remove, alignment
  empty-canvas click deselects (back to the background panel)
- theme.css: .hero-el-editable outline/hover/selected + grid helper

Verified in-browser: selecting shows the line editor, editing updates the canvas
live, drag repositions, add/delete and z-order work, deselect returns to the
background panel; no console errors. Moon/badge/image + resize + snap are Phase 4.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/styles/theme.css

@@ -527,6 +527,25 @@ button[disabled] {
   text-decoration: line-through;
 }
 
+/* ===== Hero canvas editor ===== */
+.hero-el-editable {
+  outline: 1px dashed rgba(127, 153, 189, 0.45);
+  outline-offset: 2px;
+  user-select: none;
+  touch-action: none; /* let Pointer Events drive drag on touch */
+}
+.hero-el-editable:hover {
+  outline-color: var(--accent);
+}
+.hero-el-editable.is-selected {
+  outline: 2px solid var(--accent);
+}
+.hero-canvas-grid {
+  background-image:
+    linear-gradient(to right, rgba(127, 153, 189, 0.18) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(127, 153, 189, 0.18) 1px, transparent 1px);
+}
+
 /* ===== Admin tables ===== */
 .adm-table {
   width: 100%;