fix(archive): keep the Moved to Archive toast off the next events

Centred at the bottom for eight seconds, the Undo toast sat over the
events moving up into the gap an ignored or completed row left. It now
sits in the bottom-right corner, lasts four seconds, and has an OK that
closes it without undoing. On a phone there is no side to clear and the
bottom is where an event's page ends, so it goes to the top, over the
header.

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

src/client/ReaderApp.tsx

@@ -69,6 +69,7 @@ import { ENTRIES, NOTES, newestId, unseen } from "../shared/changelog.ts";
 import {
   ARCHIVE_COLLAPSE_MS,
   ARCHIVE_HOLD_MS,
+  ARCHIVE_UNDO_MS,
   ChecklistEvent,
   leavingMarks,
   LedgerColumns,
@@ -498,7 +499,7 @@ function ReaderContent({
       () => setTransition((t) => (t ? { ...t, phase: "hidden" } : null)),
       ARCHIVE_COLLAPSE_MS,
     );
-    const undo = setTimeout(() => setTransition(null), 8000);
+    const undo = setTimeout(() => setTransition(null), ARCHIVE_UNDO_MS);
     return () => {
       clearTimeout(t);
       clearTimeout(collapse);
@@ -1137,21 +1138,29 @@ function ReaderContent({
                     transition.phase === "hold" && (
                       <Fireworks key={transition.key} />
                     )}
-                  {transition.label} “{transition.title}” · Moved to Archive{" "}
-                  <button
-                    type="button"
-                    onClick={() => {
-                      void dispatch({
-                        type: "restore",
-                        accountId: transition.accountId,
-                        eventId: transition.eventId,
-                        ...actionMeta(),
-                      });
-                      setTransition(null);
-                    }}
-                  >
-                    Undo
-                  </button>
+                  <span className="archive-toast-text">
+                    {transition.label} “{transition.title}” · Moved to Archive
+                  </span>
+                  <span className="archive-toast-actions">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        void dispatch({
+                          type: "restore",
+                          accountId: transition.accountId,
+                          eventId: transition.eventId,
+                          ...actionMeta(),
+                        });
+                        setTransition(null);
+                      }}
+                    >
+                      Undo
+                    </button>
+                    {/* Closes the notice only: the event stays archived. */}
+                    <button type="button" onClick={() => setTransition(null)}>
+                      OK
+                    </button>
+                  </span>
                 </aside>
               )}
               {archivedOpen && (

src/client/components/redesign/ChecklistEvent.tsx

@@ -56,7 +56,13 @@ export function UrgencyLegend() {
  * when it is gone once the 250 ms collapse has run.
  */
 export const ARCHIVE_HOLD_MS = 900,
-  ARCHIVE_COLLAPSE_MS = ARCHIVE_HOLD_MS + 250;
+  ARCHIVE_COLLAPSE_MS = ARCHIVE_HOLD_MS + 250,
+  /**
+   * How long the "Moved to Archive" toast offers Undo. Eight seconds until
+   * 2026-11-10, when the owner found it sitting over the next events; OK closes
+   * it sooner, and Archive Restore stays available after it is gone.
+   */
+  ARCHIVE_UNDO_MS = 4000;
 /**
  * The marks on a checklist row on its way to the Archive. While it holds, its
  * text greys; a completed one also gets the codes' shine, an ignored one does

src/client/redesign.css

@@ -1003,25 +1003,53 @@ textarea {
   text-decoration: underline;
   text-underline-offset: 3px;
 }
+/* Bottom right, out of the reading column, so it does not sit over the next
+   events (centred until 2026-11-10). On a phone there is no side to move to,
+   and the bottom is where the list continues and an event's page ends, so it
+   spans the width at the top, over the header, instead. */
 .archive-toast {
   position: fixed;
   bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
+  right: 24px;
   width: max-content;
-  max-width: calc(100vw - 32px);
+  max-width: min(420px, calc(100vw - 32px));
   z-index: 70;
-  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 6px 16px;
+  padding: 12px 16px;
+  border: 1px solid var(--color-hairline);
   border-radius: 12px;
   background: var(--color-raised);
   color: var(--color-ink);
   font-size: 13px;
   box-shadow: 0 8px 30px #0003;
 }
+.archive-toast-text {
+  min-width: 0;
+}
+.archive-toast-actions {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
 .archive-toast button {
+  min-height: 32px;
+  padding: 0 8px;
+  border-radius: 8px;
   color: var(--color-near);
-  margin-left: 14px;
   text-decoration: underline;
+  text-underline-offset: 3px;
+}
+@media (max-width: 700px) {
+  .archive-toast {
+    top: calc(16px + env(safe-area-inset-top, 0px));
+    bottom: auto;
+    left: 16px;
+    right: 16px;
+    width: auto;
+    max-width: none;
+  }
 }
 .archive-confirm {
   padding: 8px 20px;