Work the design critique down: chapter format, colour law, search, strip, a11y (#11)

Two rounds of design-critique fixes on the web UI. Every visual change was verified at 390x844 and 1280x900 in both dark and light with screenshots; `go test ./...` is green throughout; no new dependencies.

## Earlier commits on this branch

The two oldest commits predate this session and were never opened as their own PR, so they are under review here too:

- Confirm-gate the lifecycle actions, cluster the action strip by consequence.
- Fix the accessibility findings from the audit: contrast, focus, reduced motion.

## The rest

**Chapter format.** The userscript and the poller both write `"Chapter N"`, and the templates prefixed `Ch ` again, so every real Asura row read `Ch Chapter 250` — while a manual edit stored a bare `250`, leaving two formats in one list. `DisplayChapter`/`DisplayLatest` on `Bookmark` now strip the lead-in and re-add exactly one `Ch `.

**Zero-result search.** The client filter only toggled `card.hidden`, so a query matching nothing left a blank list under a fully populated, unfiltered "Continue reading" strip. There is now a no-match state with a Clear-search button, and the strip goes down while a filter is active.

**The colour law.** `--ember` is documented as meaning "new chapter" and was spent on eight things, including setting "Nothing new." in the colour reserved for new chapters. Destruction moves to a new `--danger` token; text-input focus follows the searchbar idiom and turns `--paper`. Contrast, both themes: `--danger` on the page 4.82 / 6.65, the solid Remove button 4.94 / 7.30, the confirm question 9.00 / 7.98.

**The remove confirm.** Buttons 40px 8px apart became 46px 12px apart, and the question names the series and the loss instead of asking "Remove this?". It opens with **Cancel** focused, not Remove — the two reversible rows still open on their affirmative.

**The recent strip.** It was the head of the same `updated_at DESC` list rendered directly below it, on every tab, costing ~240px of the first phone screen. It is now scoped to series with a chapter waiting, and only on All. With nothing new anywhere it does not render — deliberate.

**Stale chrome.** The strip and the Updated badge describe the whole library but live outside the swapped `#list`, so archiving a series left it under "Continue reading" with the badge still counting it, and `/?tab=all` reached by htmx differed from the same URL reloaded. Both regions move into `chrome.html` and refresh out of band on every mutation and every tab switch.

**Accessibility and touch.** Esc closes any open panel and returns focus to the cell that owns it; opening a confirm moves focus into it; the inline error scrolls into view and no longer self-destructs after 5s; every tab and desktop action cell clears 44px; `role="alert"` on the login error; the card monogram is no longer announced; the busy bar is clipped by its own travel rather than by `overflow: hidden` on the card.

**Chapter form label.** The panel's only visible text named the published chapter while the field held your progress. The field gets a real label; "Latest known" moves below it.

**gzip.** Nothing was compressed. A stdlib middleware handles the four text types and leaves woff2 alone: style.css 21.8 -> 6.5 KB, htmx 50.9 -> 16.4, filter.js 7.6 -> 2.9.

## Not addressed

The `role="status"` error slot is still mutated while hidden and then revealed, which is the non-announcing pattern the confirm rows were fixed for. Delete is still a silent vanish. Both are flagged in the critique snapshot under `.impeccable/critique/`.

Design health went 24/36 (66.7%) to 29/40 (72.5%) between snapshots; the two P1s that survived were found and fixed after that run.

Reviewed-on: #11
Co-authored-by: Sulthan Zaki <sultankiki05@gmail.com>
Co-committed-by: Sulthan Zaki <sultankiki05@gmail.com>

backend/static/filter.js

@@ -4,82 +4,182 @@
   function applyFilter() {
     var box = document.getElementById("search");
     if (!box) return;
-    var needle = box.value.trim().toLowerCase();
-    document.querySelectorAll(".card").forEach(function (card) {
+    var query = box.value.trim();
+    var needle = query.toLowerCase();
+    var cards = document.querySelectorAll(".card");
+    var visible = 0;
+    cards.forEach(function (card) {
       var title = (card.dataset.title || "").toLowerCase();
       card.hidden = needle !== "" && title.indexOf(needle) === -1;
+      if (!card.hidden) visible++;
     });
+
+    // The server decides what the strip holds — it ships empty for every tab
+    // but All, and out of band after every mutation. All this has to do is keep
+    // it down while a filter is active, since the strip is never filtered and
+    // would otherwise put non-matching covers above an empty list.
+    var recent = document.querySelector(".recent");
+    if (recent) {
+      recent.hidden = needle !== "" || !recent.querySelector(".recent-card");
+    }
+
+    // An empty bucket already explains itself server-side; this only speaks
+    // when the filter is what emptied the screen.
+    var none = document.getElementById("no-match");
+    if (none) {
+      none.hidden = !(needle !== "" && cards.length > 0 && visible === 0);
+      if (!none.hidden) none.querySelector(".no-match-q").textContent = query;
+    }
   }
 
   document.addEventListener("input", function (e) {
     if (e.target && e.target.id === "search") applyFilter();
   });
 
+  document.addEventListener("click", function (e) {
+    if (!e.target || !e.target.classList.contains("clear-search")) return;
+    var box = document.getElementById("search");
+    box.value = "";
+    applyFilter();
+    box.focus();
+  });
+
   // htmx replaces the list on a tab switch, so re-apply to the new cards.
   document.body.addEventListener("htmx:afterSwap", applyFilter);
+  document.addEventListener("mangabm:refilter", applyFilter);
 })();
 
 function setActiveTab(el) {
-  el.parentElement.querySelectorAll("[role=tab]").forEach(function (t) {
-    t.classList.toggle("active", t === el);
+  el.parentElement.querySelectorAll("a").forEach(function (t) {
+    var on = t === el;
+    t.classList.toggle("active", on);
+    if (on) t.setAttribute("aria-current", "page");
+    else t.removeAttribute("aria-current");
+  });
+  // The strip is outside the swapped region, so its visibility is re-decided
+  // here rather than by the server that just answered.
+  document.dispatchEvent(new Event("mangabm:refilter"));
+}
+
+// The chapter-edit form and the archive/finish/remove confirm rows are the
+// per-card disclosure panels; only one makes sense open at a time. The button
+// that owns an open panel carries .open, which is how the strip shows which
+// cell the panel belongs to.
+function closeCardPanels(key) {
+  var card = document.getElementById("card-" + key);
+  if (!card) return;
+  card.querySelectorAll(".chapter-form, .confirm-row").forEach(function (p) {
+    p.hidden = true;
+  });
+  card.querySelectorAll(".actions .open").forEach(function (b) {
+    b.classList.remove("open");
+    b.setAttribute("aria-expanded", "false");
   });
 }
 
-// The chapter-edit form and the delete confirm row are the two per-card
-// disclosure panels; only one makes sense open at a time. The button that
-// owns an open panel carries .open, which is how the strip shows which cell
-// the panel belongs to.
-function closeCardPanels(key) {
-  var form = document.getElementById("chapter-form-" + key);
-  var confirm = document.getElementById("confirm-row-" + key);
-  if (form) form.hidden = true;
-  if (confirm) confirm.hidden = true;
-  var card = document.getElementById("card-" + key);
-  if (card) {
-    card.querySelectorAll(".actions .open").forEach(function (b) {
-      b.classList.remove("open");
-    });
-  }
-}
-
 function togglePanel(key, panelId, buttonSelector) {
-  var panel = document.getElementById(panelId + key);
+  var panel = document.getElementById(panelId);
   if (!panel) return null;
   var opening = panel.hidden;
   closeCardPanels(key);
   panel.hidden = !opening;
   var card = document.getElementById("card-" + key);
   var button = card && card.querySelector(buttonSelector);
-  if (button) button.classList.toggle("open", opening);
+  if (button) {
+    button.classList.toggle("open", opening);
+    button.setAttribute("aria-expanded", opening ? "true" : "false");
+  }
   return panel;
 }
 
 function toggleChapterForm(key) {
-  var form = togglePanel(key, "chapter-form-", ".actions .pencil");
+  var form = togglePanel(key, "chapter-form-" + key, ".actions .pencil");
   if (form && !form.hidden) form.querySelector("input").focus();
 }
 
-function toggleConfirmRow(key) {
-  togglePanel(key, "confirm-row-", ".actions .remove");
+// kind is "archive" | "finish" | "remove" — the panel id and the owning action
+// cell share it.
+function toggleConfirmRow(key, kind) {
+  var cls = { archive: ".box", finish: ".finish", remove: ".remove" }[kind];
+  var row = togglePanel(key, "confirm-" + kind + "-" + key, ".actions " + cls);
+  // Focus the answer rather than trusting aria-live on a container that merely
+  // unhides: it makes the announcement deterministic, keeps tab order inside
+  // the confirm instead of running on into the next card, and means the row
+  // cannot be opened and scrolled past unnoticed.
+  // The reversible rows open on their affirmative; remove opens on Cancel.
+  // Focusing the first button in DOM order would hand the irreversible action
+  // a pre-armed Enter, which is the opposite of what a confirm gate is for.
+  if (row && !row.hidden) {
+    row.querySelector(row.classList.contains("calm") ? "button" : "button + button").focus();
+  }
 }
 
+// Esc closes whichever panel this card has open and hands focus back to the
+// cell that owns it — otherwise the only way out is finding that exact cell
+// again.
+document.addEventListener("keydown", function (e) {
+  if (e.key !== "Escape" || !e.target.closest) return;
+  var card = e.target.closest(".card");
+  var owner = card && card.querySelector(".actions .open");
+  if (!owner) return;
+  closeCardPanels(card.id.replace(/^card-/, ""));
+  owner.focus();
+});
+
 // A failed favourite/chapter/delete request leaves the card in place (htmx
 // does not swap on a non-2xx response) but otherwise gives no sign anything
 // went wrong. Surface it inline instead of leaving the tap looking ignored.
 (function () {
-  function showError(elt, message) {
+  function showError(elt, message, linkHref, linkText) {
     var card = elt.closest(".card");
     var slot = card && card.querySelector(".error-inline");
     if (!slot) return;
     slot.textContent = message;
+    if (linkHref) {
+      var a = document.createElement("a");
+      a.href = linkHref;
+      a.textContent = linkText;
+      a.className = "error-link";
+      slot.append(" ", a);
+    }
     slot.hidden = false;
-    clearTimeout(slot._hideTimer);
-    slot._hideTimer = setTimeout(function () {
-      slot.hidden = true;
-    }, 5000);
+    // No self-destruct timer: this reader gets interrupted mid-tap, and a
+    // notice that expires after 5s leaves a failed write with no trace at all
+    // — the star is back off and nothing says why. The notice stays until the
+    // next request from this card clears it (or a successful one swaps the
+    // whole card away).
+    slot.scrollIntoView({
+      block: "nearest",
+      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+    });
+  }
+
+  document.body.addEventListener("htmx:beforeRequest", function (e) {
+    var card = e.detail.elt.closest(".card");
+    var slot = card && card.querySelector(".error-inline");
+    if (slot) slot.hidden = true;
+  });
+
+  // The handlers answer a bad value with http.Error, i.e. a short plain-text
+  // line — worth showing verbatim. Anything long or HTML-ish is an error page,
+  // not a reason, so fall back to the generic copy.
+  function reasonFrom(xhr) {
+    var body = (xhr.responseText || "").trim();
+    if (!body || body.length > 120 || body.indexOf("<") === 0) return "";
+    return body.charAt(0).toUpperCase() + body.slice(1);
   }
 
   document.body.addEventListener("htmx:responseError", function (e) {
+    var xhr = e.detail.xhr;
+    if (xhr.status === 401) {
+      showError(e.detail.elt, "Session expired — nothing was saved.", "/login", "Log in again");
+      return;
+    }
+    if (xhr.status === 400) {
+      var reason = reasonFrom(xhr);
+      showError(e.detail.elt, reason ? reason + "." : "That value wasn't accepted — check it and try again.");
+      return;
+    }
     showError(e.detail.elt, "Couldn't save — try again.");
   });
   document.body.addEventListener("htmx:sendError", function (e) {

backend/static/style.css

@@ -64,7 +64,9 @@
   --paper-hot: #f0d3cb;    /* title of a series with a new chapter */
   --paper-dim: #ddd5cb;    /* resting title */
   --mute: #8d857c;         /* secondary text, idle icons */
-  --mute-2: #5a5450;       /* labels, hints */
+  /* Every mute-2 use is 10px mono, so it has to clear 4.5:1 on --ink even
+     though it reads as the quietest step. */
+  --mute-2: #877f76;       /* labels, hints */
   --faint: #3a3733;        /* meta separators */
   --faint-2: #57504b;      /* cover monogram */
 
@@ -72,8 +74,18 @@
   --ember-wash: #1a1211;   /* ember-tinted surface */
   --ember-ink: #150907;    /* text on solid ember */
   --ember-soft: #eda798;   /* text on ember wash */
+  /* Destruction is hot but not ember: a duller oxblood, so a remove confirm is
+     never mistaken across the room for an unread chapter. */
+  --danger: #cf5c4d;
+  --danger-wash: #211311;
+  --danger-ink: #150808;
+  --danger-soft: #e2aaa1;
   --brass: #b8912f;        /* favourite — a second, cooler metal */
-  --trash: #6b5450;        /* remove, resting */
+  --trash: #977671;        /* remove, resting — icons need 3:1, not 4.5:1 */
+
+  /* Desktop cell borders for the two coloured action states. */
+  --play-hot-line: #3a1d18;
+  --fav-line: #332b14;
 
   --asura: #7d93a5;
   --demonic: #a98a78;
@@ -84,6 +96,10 @@
   --hatch-dim: repeating-linear-gradient(135deg, #1b1918 0 5px, #151313 5px 10px);
 
   --measure: 760px;
+  /* Cover width + row gap: the disclosure panels indent past the cover on
+     desktop, so both live here rather than as magic numbers. */
+  --cover-w: 86px;
+  --row-gap: 14px;
 }
 
 /* Light mode: same rules, cooler paper. Hues are re-tuned, not reused — the
@@ -102,7 +118,7 @@
     --paper-hot: #a33018;
     --paper-dim: #191715;
     --mute: #6b645d;
-    --mute-2: #857d75;
+    --mute-2: #6c655e;   /* clears 4.5:1 on --ash too, not just --ink */
     --faint: #c9c2ba;
     --faint-2: #a8a098;
 
@@ -110,8 +126,15 @@
     --ember-wash: #fbeee9;
     --ember-ink: #fff;
     --ember-soft: #8d2c17;
+    --danger: #97362a;
+    --danger-wash: #fbe9e5;
+    --danger-ink: #fff;
+    --danger-soft: #7c2c22;
     --brass: #8a681c;
-    --trash: #a98276;
+    --trash: #8c6558;
+
+    --play-hot-line: #f0cfc6;
+    --fav-line: #e3d3a4;
 
     --asura: #4f6b80;
     --demonic: #8a6a55;
@@ -140,9 +163,16 @@ 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 } }
-@keyframes emberPulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
+/* 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
+   misreads a system state as unread heat. The one exception is the brand
+   itself (the wordmark, and the login screen, which shows no series at all).
+   Destruction has its own token, --danger. */
+@keyframes mutePulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
 
 /* One measured column, edges drawn rather than boxed. */
 .sheet {
@@ -174,6 +204,7 @@ button { cursor: pointer; }
 .topbar form { margin: 0; }
 
 .ghost {
+  position: relative;
   padding: 0;
   border: none;
   border-bottom: 1px solid var(--field-line);
@@ -184,6 +215,8 @@ button { cursor: pointer; }
   text-transform: uppercase;
 }
 .ghost:hover { color: var(--paper); border-bottom-color: var(--paper); }
+/* The label is 15px tall by design; the thumb gets 44 without moving it. */
+.ghost::after { content: ""; position: absolute; inset: -15px -12px; }
 
 .chrome { display: flex; flex-direction: column; }
 
@@ -196,6 +229,9 @@ button { cursor: pointer; }
   border-bottom: 1px solid var(--rule);
   color: var(--mute-2);
 }
+/* The input drops its own outline, so the bar it sits in carries the focus
+   ring — same move the two other inputs make with their border. */
+.searchbar:focus-within { border-bottom-color: var(--paper); color: var(--paper); }
 .searchbar svg { width: 15px; height: 15px; flex: none; }
 .search {
   flex: 1;
@@ -220,18 +256,21 @@ button { cursor: pointer; }
   border-bottom: 1px solid var(--rule);
 }
 .tabs::-webkit-scrollbar { display: none; }
-.tabs [role="tab"] {
+.tabs a {
   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);
   white-space: nowrap;
 }
-.tabs [role="tab"]:hover { color: var(--paper-dim); }
-.tabs [role="tab"].active {
+.tabs a:hover { color: var(--paper-dim); }
+.tabs a.active {
   color: var(--paper);
   border-bottom: 2px solid var(--paper);
   margin-bottom: -1px;
@@ -335,12 +374,12 @@ button { cursor: pointer; }
 }
 .card.is-dim { background: var(--dim); }
 
-.row { display: flex; flex-wrap: wrap; gap: 14px; }
+.row { display: flex; flex-wrap: wrap; gap: var(--row-gap); }
 
 .cover {
   position: relative;
-  width: 66px;
-  height: 88px;
+  width: var(--cover-w);
+  height: calc(var(--cover-w) * 4 / 3);
   flex: none;
   background: var(--hatch);
   display: grid;
@@ -348,7 +387,7 @@ button { cursor: pointer; }
   overflow: hidden;
 }
 .cover img { width: 100%; height: 100%; object-fit: cover; }
-.cover .monogram { font-size: 24px; }
+.cover .monogram { font-size: 30px; }
 .is-dim .cover { background: var(--hatch-dim); filter: grayscale(1); opacity: .85; }
 
 .body {
@@ -426,11 +465,22 @@ button { cursor: pointer; }
 .actions .on { color: var(--brass); }
 .actions .restore { color: var(--paper); }
 .actions .remove { color: var(--trash); }
-.actions .remove:hover { color: var(--ember); }
+.actions .remove:hover { color: var(--danger); }
 .actions .open { background: var(--hover); color: var(--paper); }
-.actions .remove.open { background: var(--ember-wash); color: var(--ember); }
+/* Lifecycle cells already sit on --ash, which is what --hover resolves to, so
+   an open one needs the next step up to stay legible as the panel's owner. */
+.actions .lifecycle.open { background: var(--rule); }
+.actions .remove.open { background: var(--danger-wash); color: var(--danger); }
 .is-dim .actions > * { color: var(--mute-2); }
 
+/* Three clusters by consequence: navigate (play) | organize (favourite,
+   chapter) | lifecycle (archive/restore, finish, remove). The lifecycle cells
+   sit on a recessed ground so the thumb reads "this one moves the series"
+   before it reads which icon it landed on. */
+.actions > .lifecycle { background: var(--ash); }
+.actions > .play + *,
+.actions > *:not(.lifecycle) + .lifecycle { box-shadow: inset 1px 0 0 var(--field-line); }
+
 /* ---- disclosure panels ---- */
 .chapter-form, .confirm-row, .error-inline { animation: sheetIn .18s ease-out; }
 
@@ -461,7 +511,9 @@ button { cursor: pointer; }
   font: 500 17px var(--font-mono);
   outline: none;
 }
-.chapter-form input:focus { border-color: var(--ember); }
+/* Focus follows the .searchbar idiom — paper, not heat: a red border on a
+   valid number field reads as "invalid". */
+.chapter-form input:focus { border-color: var(--paper); }
 .chapter-form input::-webkit-outer-spin-button,
 .chapter-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .chapter-form button {
@@ -477,14 +529,17 @@ button { cursor: pointer; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 12px;
   padding: 14px;
-  background: var(--ember-wash);
+  background: var(--danger-wash);
 }
-.confirm-row span { font: 400 17px var(--font-display); color: var(--ember-soft); }
-.confirm-row div { display: flex; gap: 8px; }
+/* The remove question names the series, so it has to be able to take the row
+   to itself and push the buttons onto their own line. */
+.confirm-row span { flex: 1 1 16ch; font: 400 17px/1.3 var(--font-display); color: var(--danger-soft); }
+.confirm-row div { display: flex; flex: none; gap: 12px; margin-left: auto; }
 .confirm-row button {
-  height: 40px;
+  height: 46px;
   padding: 0 14px;
   border: 1px solid var(--field-line);
   background: transparent;
@@ -494,10 +549,21 @@ button { cursor: pointer; }
 .confirm-row button:hover { color: var(--paper); }
 .confirm-row .danger-solid {
   border: none;
-  background: var(--ember);
-  color: var(--ember-ink);
+  background: var(--danger);
+  color: var(--danger-ink);
   font-weight: 600;
 }
+/* Archive and finish are reversible, so their confirm asks in grey — only the
+   irreversible remove gets the danger wash. */
+.confirm-row.calm { background: var(--ash); }
+.confirm-row.calm span { color: var(--paper-dim); }
+.confirm-row .go {
+  border: none;
+  background: var(--paper);
+  color: var(--ink);
+  font-weight: 600;
+}
+.confirm-row .go:hover { color: var(--ink); }
 
 .error-inline {
   display: flex;
@@ -505,10 +571,10 @@ button { cursor: pointer; }
   gap: 9px;
   margin: 0;
   padding: 11px 13px;
-  background: var(--ember-wash);
-  border-left: 2px solid var(--ember);
+  background: var(--ash);
+  border-left: 2px solid var(--mute);
   font: 400 16px var(--font-display);
-  color: var(--ember-soft);
+  color: var(--paper-dim);
 }
 .error-inline::before {
   content: "";
@@ -516,12 +582,16 @@ button { cursor: pointer; }
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: var(--ember);
-  animation: emberPulse 1.4s ease-in-out infinite;
+  background: var(--mute);
+  animation: mutePulse 1.4s ease-in-out infinite;
+}
+.error-inline .error-link {
+  border-bottom: 1px solid var(--field-line);
+  color: var(--paper);
 }
 
-/* Busy: the hairline at the top of the sheet burns across it. */
-.card.htmx-request { overflow: hidden; }
+/* 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 .actions { pointer-events: none; opacity: .5; }
 .card.htmx-request::before {
   content: "";
@@ -530,7 +600,7 @@ button { cursor: pointer; }
   left: 0;
   width: 30%;
   height: 1px;
-  background: var(--ember);
+  background: var(--mute);
   animation: barSlide 1.15s linear infinite;
 }
 
@@ -542,7 +612,17 @@ button { cursor: pointer; }
   padding: 40px 20px 48px;
 }
 .empty strong { font: 400 20px var(--font-display); color: var(--paper); }
-.empty.hot strong { color: var(--ember); }
+.empty .clear-search {
+  align-self: flex-start;
+  margin-top: 4px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid var(--field-line);
+  background: transparent;
+  color: var(--paper-dim);
+  font: 400 16px var(--font-display);
+}
+.empty .clear-search:hover { color: var(--paper); border-color: var(--paper); }
 .empty p {
   margin: 0;
   max-width: 44ch;
@@ -594,12 +674,12 @@ button { cursor: pointer; }
   letter-spacing: .16em;
   outline: none;
 }
-.login-card input:focus { border-bottom-color: var(--ember); }
+.login-card input:focus { border-bottom-color: var(--paper); }
 .login-card .error {
   margin: 0;
   min-height: 20px;
   font: 400 13px/1.4 var(--font-body);
-  color: var(--ember);
+  color: var(--danger);
 }
 .login-card button {
   height: 54px;
@@ -616,6 +696,7 @@ button { cursor: pointer; }
 
 /* ---- desktop: same measure, actions fold up beside the row ---- */
 @media (min-width: 720px) {
+  :root { --cover-w: 74px; --row-gap: 20px; }
   .topbar { padding: 26px 32px 18px; }
   .brand { font-size: 30px; }
 
@@ -627,31 +708,40 @@ button { cursor: pointer; }
     border-bottom: 1px solid var(--rule);
   }
   .tabs { order: 1; flex: none; gap: 20px; padding: 0; border-bottom: none; }
-  .tabs [role="tab"] { padding: 10px 0 14px; font-size: 18px; }
+  .tabs a { padding: 10px 0 14px; font-size: 18px; }
   .searchbar { order: 2; flex: 1; margin: 0; border-bottom: none; }
   .recent h2, .recent-strip { padding-left: 32px; padding-right: 32px; }
   .recent-card, .recent-cover { width: 100px; }
   .recent-cover { height: 133px; }
 
   .card { padding: 18px 32px; }
-  .row { flex-wrap: nowrap; align-items: center; gap: 20px; }
-  .cover { width: 74px; height: 100px; }
+  .row { flex-wrap: nowrap; align-items: center; }
   .cover .monogram { font-size: 26px; }
   .title { font-size: 21px; }
 
   .actions { flex: none; gap: 4px; border-top: none; }
   .actions > * {
     flex: none;
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border: 1px solid var(--rule);
   }
-  .is-new .actions .play { border-color: #3a1d18; }
-  .actions .on { border-color: #332b14; }
+  /* Cells are already gapped here, so the clusters separate by space rather
+     than by the hairline the phone layout uses. */
+  .actions > .play + *,
+  .actions > *:not(.lifecycle) + .lifecycle { margin-left: 10px; box-shadow: none; }
+  .is-new .actions .play { border-color: var(--play-hot-line); }
+  .actions .on { border-color: var(--fav-line); }
 
-  .chapter-form, .confirm-row, .error-inline { margin-left: 94px; }
+  /* Panels line up with the body text, i.e. past the cover and its gap. */
+  .chapter-form, .confirm-row, .error-inline {
+    margin-left: calc(var(--cover-w) + var(--row-gap));
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  * { animation: none !important; transition: none !important; }
+  /* Pseudo-elements need naming explicitly — `*` does not match them, and the
+     busy bar and error dot are both ::before. Their static form still reads:
+     the bar stays drawn and .actions stays dimmed. */
+  *, *::before, *::after { animation: none !important; transition: none !important; }
 }