Batch of accessibility and touch fixes from the audit

- Esc closes whichever panel a card has open and returns focus to the cell that
  owns it; opening a confirm row moves focus to its primary button, so the
  announcement is deterministic and tab order stays inside the confirm.
- The inline error scrolls itself into view and no longer self-destructs after
  5s: this reader gets interrupted mid-tap, and an expiring notice left a failed
  write with no trace at all. It clears on the next request from that card.
- Every tab clears 44px wide (All was 15.25); desktop action cells go 40 -> 44.
- login.html's error gets role="alert".
- The card monogram carries its own aria-hidden — Chromium exposes it through
  the cover link's, because that link is programmatically focusable.
- The busy bar ends its travel flush with the card edge, so .card.htmx-request
  no longer needs overflow: hidden and cannot clip a panel mid-request.

Verified at 390 and 1280 in both themes; detector over templates+static reports
only the two known Instrument Serif false positives.

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

backend/static/style.css

@@ -163,7 +163,9 @@ button { cursor: pointer; }
 /* Every hideable thing here is a flex container, and display beats hidden. */
 [hidden] { display: none !important; }
 
-@keyframes barSlide { from { transform: translateX(-100%) } to { transform: translateX(320%) } }
+/* Ends flush with the right edge of the card (30% wide × 233% travel), so the
+   card itself never needs overflow: hidden to contain it. */
+@keyframes barSlide { from { transform: translateX(-100%) } to { transform: translateX(233%) } }
 @keyframes sheetIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
 /* The law: ember means "new chapter", and nothing else on a list screen —
    busy, error and destruction all stay off it, so a tired glance never
@@ -258,7 +260,10 @@ button { cursor: pointer; }
   flex: none;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 7px;
+  /* "All" is two characters in a 17px serif — 15px of target without this. */
+  min-width: 44px;
   padding: 8px 0 12px;
   color: var(--mute);
   font: 400 17px var(--font-display);
@@ -587,7 +592,6 @@ button { cursor: pointer; }
 
 /* Busy: a grey hairline slides across the top of the sheet — deliberately not
    ember, which on a list screen only ever means "new chapter". */
-.card.htmx-request { overflow: hidden; }
 .card.htmx-request .actions { pointer-events: none; opacity: .5; }
 .card.htmx-request::before {
   content: "";
@@ -718,8 +722,8 @@ button { cursor: pointer; }
   .actions { flex: none; gap: 4px; border-top: none; }
   .actions > * {
     flex: none;
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border: 1px solid var(--rule);
   }
   /* Cells are already gapped here, so the clusters separate by space rather