fix(hibp): put the progress pill in the toast stack, bottom right

Free-floating it either covered the cards or the sidebar navigation. Inside .toast-container it shares the corner with the toasts, and column-reverse keeps it above them.

css/style.css

@@ -2343,14 +2343,12 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
     animation: busy-spin 0.7s linear infinite;
 }
 @keyframes busy-spin { to { transform: rotate(360deg); } }
-/* Breach-scan progress. Bottom-left so it never sits under the toasts, which
+/* Breach-scan progress. Non-blocking: no backdrop, no pointer capture.
-   stack bottom-right. Non-blocking: no backdrop, no pointer capture. */
+   Lives INSIDE .toast-container, so it stacks with the toasts in the same
+   corner instead of floating over the cards (pinned to the left edge it also
+   covered the sidebar navigation). column-reverse puts it above them. */
 .hibp-progress {
-    position: fixed;
+    align-self: flex-end;
-    /* Clear of the 240px sidebar — pinned to the left edge it sat on top of the
-       navigation and hid Trash. Left of the toasts, which stack bottom-right. */
-    left: 256px; bottom: 16px;
-    z-index: 150;
     display: flex; align-items: center; gap: 8px;
     padding: 8px 12px;
     border-radius: 8px;
@@ -2668,7 +2666,6 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
 
 @media (max-width: 900px) {
     .app-shell { grid-template-columns: 60px 1fr; }
-    .hibp-progress { left: 76px; }   /* the sidebar collapses to 60px here */
     .sidebar { padding: 12px 6px; }
     .sidebar-brand span,
     .nav-item > span:first-of-type,

js/app.js

@@ -969,7 +969,10 @@ function hibpProgress(done, total) {
         pill = el('div', { class: 'hibp-progress', id: 'hibpProgress' });
         pill.appendChild(el('div', { class: 'hibp-progress-spinner' }));
         pill.appendChild(el('span', { class: 'hibp-progress-text' }));
-        document.body.appendChild(pill);
+        // Inside the toast stack rather than free-floating: it then sits in the
+        // same corner as the toasts and can never overlap them or the cards.
+        const host = document.querySelector('.toast-container');
+        (host || document.body).appendChild(pill);
     }
     const t = pill.querySelector('.hibp-progress-text');
     if (t) t.textContent = 'Checking breaches… ' + done + '/' + total;