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/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; }
 }