refactor(ext/vault): event delegation for error-cta + CSS variable consistency

extension/src/vault/vault.css

@@ -150,6 +150,7 @@ body {
   align-items: center;
   gap: 6px;
   padding: 12px 16px;
+  /* rgba channels derived from --danger (#ab2b20 = rgb(171, 43, 32)) */
   border: 1px solid rgba(171, 43, 32, 0.4);
   border-radius: 6px;
   background: rgba(171, 43, 32, 0.08);

extension/src/vault/vault.ts

@@ -220,24 +220,6 @@ function renderLockScreen(app: HTMLElement): void {
     </div>
   `;
 
-  app.querySelector<HTMLButtonElement>('.error-cta')?.addEventListener('click', (e) => {
-    const cta = (e.currentTarget as HTMLElement).dataset.cta as ErrorCta['action'];
-    switch (cta) {
-      case 'unlock': {
-        document.getElementById('vault-passphrase')?.focus();
-        break;
-      }
-      case 'open_setup': {
-        void chrome.tabs.create({ url: chrome.runtime.getURL('setup.html') });
-        break;
-      }
-      case 'reload_extension': {
-        chrome.runtime.reload();
-        break;
-      }
-    }
-  });
-
   const input = document.getElementById('vault-passphrase') as HTMLInputElement;
   const btn = document.getElementById('vault-unlock-btn')!;
 
@@ -626,6 +608,28 @@ async function loadManifest(): Promise<void> {
 // ---------------------------------------------------------------------------
 
 document.addEventListener('DOMContentLoaded', async () => {
+  // Delegated handler for .error-cta buttons — set up once on the stable root.
+  const app = document.getElementById('vault-app')!;
+  app.addEventListener('click', (e) => {
+    const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('.error-cta');
+    if (!btn) return;
+    const cta = btn.dataset.cta as ErrorCta['action'];
+    switch (cta) {
+      case 'unlock': {
+        document.getElementById('vault-passphrase')?.focus();
+        break;
+      }
+      case 'open_setup': {
+        void chrome.tabs.create({ url: chrome.runtime.getURL('setup.html') });
+        break;
+      }
+      case 'reload_extension': {
+        chrome.runtime.reload();
+        break;
+      }
+    }
+  });
+
   // Check if already unlocked
   const resp = await sendMessage({ type: 'is_unlocked' });
   if (resp.ok) {