diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b44b71..8b84b59 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,37 @@ not from the output of `docker push`.
 
 ---
 
+## Unreleased
+
+**Changed**
+- **A cover is now a colour and a pattern, chosen in turn**, rather than a list
+  with the combinations someone happened to write out. Every combination is
+  available, and each pattern is previewed over the colour in hand. Covers saved
+  during the day the patterns were one list are read back as the pair they were
+  drawn as, so nothing repaints itself.
+
+**Fixed**
+- **The install button never appeared, even over HTTPS.** Two causes, both in
+  this app rather than in anyone's configuration:
+  - `beforeinstallprompt` fires once, early — usually before React has mounted —
+    and is never fired again, so a listener added from inside a component simply
+    missed it. It is caught at the top of `index.html` now.
+  - The manifest is fetched **without credentials** unless the link says
+    otherwise. Behind a reverse proxy that authenticates in front of the app,
+    that request comes back as the proxy's login page and the browser reads it
+    as an invalid manifest — while the app itself works perfectly, because its
+    own requests carry the cookie. The link now says
+    `crossorigin="use-credentials"`.
+- **The service worker could cache a proxy's login page as the application.**
+  Nothing checked that a response was the thing that had been asked for, so a
+  lapsed session could be stored as the app shell: it then "worked offline" by
+  showing a login screen it could never get past, curable only by clearing the
+  site's data by hand. Redirected and unsuccessful responses are no longer
+  cached, and the cache name is bumped so anything already stored under the old
+  rules is dropped.
+
+---
+
 ## 2026-08-12 — Making the phone work
 
 **Images** — web `sha256:5ea846f3…`, server unchanged at `sha256:06f94f43…`
diff --git a/CLAUDE.md b/CLAUDE.md
index 8542396..349ea97 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -70,6 +70,19 @@ ist, was auf dem Server läuft. Der `readme.md` beschreibt den *jetzigen* Stand
 und wird mitgeändert, wenn sich Verhalten ändert; das Changelog beschreibt den
 Weg dahin.
 
+## Betrieb bei Marc
+
+InkNote läuft hinter **Pangolin** (Reverse Proxy mit eigener Anmeldung), über
+HTTPS, und wird am Handy als PWA auf **Android** genutzt. Daraus folgen drei
+Dinge, die bei PWA- oder Sync-Fehlern zuerst zu prüfen sind:
+
+- `/manifest.json` und `/sw.js` müssen die Datei liefern, nicht die Login-Seite
+  des Proxys. Eine **Weiterleitung** auf `sw.js` lässt die Registrierung
+  scheitern — dann gibt es weder Install noch Offline.
+- `/api/*` unverändert durchreichen, `/ws` mit WebSocket-Upgrade.
+- Jede UI-Änderung auch am Handy denken: Touch löst kein HTML5-Drag aus, und
+  `onMouseEnter` gibt es dort nicht.
+
 ## Stil
 
 Der Code erklärt in Kommentaren das *Warum*, nicht das *Was* – oft mit dem
diff --git a/backend/server.js b/backend/server.js
index cec4e79..b8cbe21 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -422,6 +422,14 @@ if (!tableColumns("users").includes("preferences")) {
  *
  * On `attachments` rather than in a table of its own: it is a property of the
  * file, it is deduplicated with the file, and it is freed with the file. */
+/* The pattern laid over a notebook's cover, chosen apart from its colour.
+ * Its own column rather than more values in `cover_index`: they are two
+ * decisions, and folding them into one number would mean renumbering every
+ * cover the day a pattern is added. */
+if (!tableColumns("notebooks").includes("cover_pattern")) {
+  db.exec("ALTER TABLE notebooks ADD COLUMN cover_pattern INTEGER NOT NULL DEFAULT 0");
+}
+
 if (!tableColumns("attachments").includes("text_index")) {
   db.exec("ALTER TABLE attachments ADD COLUMN text_index BLOB");
 }
@@ -850,10 +858,10 @@ app.get("/api/notebooks", authMiddleware, (req, res) => {
 });
 
 app.post("/api/notebooks", authMiddleware, (req, res) => {
-  const { name, coverIndex } = req.body;
+  const { name, coverIndex, coverPattern } = req.body;
   const id = uuid();
-  db.prepare("INSERT INTO notebooks (id, user_id, name, cover_index, device_id) VALUES (?, ?, ?, ?, ?)")
-    .run(id, req.userId, name, coverIndex || 0, req.deviceId);
+  db.prepare("INSERT INTO notebooks (id, user_id, name, cover_index, cover_pattern, device_id) VALUES (?, ?, ?, ?, ?, ?)")
+    .run(id, req.userId, name, coverIndex || 0, coverPattern || 0, req.deviceId);
 
   db.prepare("INSERT INTO sync_log (user_id, entity_type, entity_id, action, device_id) VALUES (?, 'notebook', ?, 'create', ?)")
     .run(req.userId, id, req.deviceId);
@@ -884,7 +892,7 @@ function cleanSeparators(input) {
 }
 
 app.put("/api/notebooks/:id", authMiddleware, (req, res) => {
-  const { name, coverIndex, sortOrder, maxVersions, sortMode, separators } = req.body;
+  const { name, coverIndex, coverPattern, sortOrder, maxVersions, sortMode, separators } = req.body;
   const nb = db.prepare("SELECT * FROM notebooks WHERE id = ? AND user_id = ?").get(req.params.id, req.userId);
   if (!nb) return res.status(404).json({ error: "Not found" });
 
@@ -902,8 +910,8 @@ app.put("/api/notebooks/:id", authMiddleware, (req, res) => {
     return res.status(400).json({ error: `sortMode must be one of ${SORT_MODES.join(", ")}` });
   }
 
-  db.prepare("UPDATE notebooks SET name = COALESCE(?, name), cover_index = COALESCE(?, cover_index), sort_order = COALESCE(?, sort_order), updated_at = datetime('now'), version = version + 1 WHERE id = ?")
-    .run(name, coverIndex, sortOrder, req.params.id);
+  db.prepare("UPDATE notebooks SET name = COALESCE(?, name), cover_index = COALESCE(?, cover_index), cover_pattern = COALESCE(?, cover_pattern), sort_order = COALESCE(?, sort_order), updated_at = datetime('now'), version = version + 1 WHERE id = ?")
+    .run(name, coverIndex, coverPattern, sortOrder, req.params.id);
   if (maxVersions !== undefined) {
     db.prepare("UPDATE notebooks SET max_versions = ? WHERE id = ?").run(versions, req.params.id);
   }
@@ -916,7 +924,11 @@ app.put("/api/notebooks/:id", authMiddleware, (req, res) => {
     db.prepare("UPDATE notebooks SET separators = ? WHERE id = ?").run(JSON.stringify(cleaned), req.params.id);
   }
 
-  broadcastToUser(req.userId, { type: "notebook_updated", data: { id: req.params.id, name, coverIndex } }, req.deviceId);
+  broadcastToUser(
+    req.userId,
+    { type: "notebook_updated", data: { id: req.params.id, name, coverIndex, coverPattern } },
+    req.deviceId
+  );
   res.json({ success: true, defaultMaxVersions: MAX_VERSIONS_PER_NOTE });
 });
 
diff --git a/e2e/organise.mjs b/e2e/organise.mjs
index 153ad9b..3de8a93 100644
--- a/e2e/organise.mjs
+++ b/e2e/organise.mjs
@@ -395,14 +395,28 @@ try {
   await p.waitForTimeout(600);
   await p.getByRole("button", { name: "Add Notebook" }).click();
   await p.waitForTimeout(700);
-  const covers = p.locator('[data-cover-option]');
-  check((await covers.count()) > 20, "there are patterned covers as well as plain ones", `${await covers.count()} covers`);
+  /* Colour and pattern are two choices, not one long list of combinations. */
+  check((await p.locator("[data-cover-option]").count()) >= 15, "a colour to choose", `${await p.locator("[data-cover-option]").count()}`);
+  check((await p.locator("[data-pattern-option]").count()) > 5, "and a pattern to lay over it", `${await p.locator("[data-pattern-option]").count()}`);
   check(
     await p.getByRole("button", { name: "Create", exact: true }).isVisible(),
     "and the dialog still fits a laptop screen, Create and all"
   );
-  await p.getByRole("button", { name: "Cancel" }).click();
-  await p.waitForTimeout(400);
+
+  // The two together make the cover, and both reach the server.
+  await p.getByPlaceholder("Notebook name...").fill("Kariert");
+  await p.locator('[data-cover-option="6"]').click();
+  await p.locator('[data-pattern-option="2"]').click();
+  await p.waitForTimeout(300);
+  await p.getByRole("button", { name: "Create", exact: true }).click();
+  await p.waitForTimeout(2000);
+  const books = (await api(p, "GET", "/notebooks")).body;
+  const made = books.find((b) => b.name === "Kariert");
+  check(
+    made?.cover_index === 6 && made?.cover_pattern === 2,
+    "the colour and the pattern are both stored",
+    `cover ${made?.cover_index}, pattern ${made?.cover_pattern}`
+  );
   /* ── moving a row with a finger ──
    * Last in the suite, because moving rows about would pull the ground from
    * under every check above that names an order.
diff --git a/frontend/index.html b/frontend/index.html
index 393c4fa..e7d8d1e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -10,11 +10,32 @@
     <meta name="apple-mobile-web-app-title" content="InkNote" />
     <meta name="description" content="Write & draw — notes that sync everywhere" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <link rel="manifest" href="./manifest.json" />
+    <!-- `use-credentials` because the manifest is otherwise fetched with
+         credentials omitted, cookies and all. Behind an authenticating reverse
+         proxy that request comes back as the proxy's login page, the browser
+         reads it as an invalid manifest, and no install is ever offered — while
+         the app itself works perfectly, because its own requests do carry the
+         cookie. Harmless without a proxy. -->
+    <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="192x192" href="./icon-192.png" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✏️</text></svg>" />
     <title>InkNote</title>
+    <script>
+      /* Catch the browser's install offer before anything else runs.
+       *
+       * `beforeinstallprompt` is fired once, early — usually before React has
+       * mounted — and is never fired again. Listening for it from inside a
+       * component meant it was simply missed, and the install button never
+       * appeared however correctly the site was served. It is stashed here, at
+       * the top of the document, and the app picks it up when it is ready. */
+      window.__inknoteInstallPrompt = null;
+      window.addEventListener("beforeinstallprompt", function (e) {
+        e.preventDefault();
+        window.__inknoteInstallPrompt = e;
+        window.dispatchEvent(new Event("inknote:installable"));
+      });
+    </script>
     <style>
       body { margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
       #root { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); height: 100vh; }
diff --git a/frontend/public/sw.js b/frontend/public/sw.js
index aa1e20a..1cc5d48 100644
--- a/frontend/public/sw.js
+++ b/frontend/public/sw.js
@@ -1,4 +1,21 @@
-const CACHE_NAME = 'inknote-v7';
+/* Bumped to v8 to throw away anything cached under the old rules — including,
+   behind an authenticating reverse proxy, a login page that had been stored as
+   the application itself. */
+const CACHE_NAME = 'inknote-v8';
+
+/**
+ * Whether a response is the thing that was asked for, and worth keeping.
+ *
+ * Behind a proxy that authenticates in front of the app, a request whose session
+ * has lapsed comes back as that proxy's login page — sometimes as a redirect,
+ * sometimes as a plain 200. Storing either one poisons the cache: the app then
+ * "works offline" by showing a login screen it can never get past, and the only
+ * cure is clearing the site's data by hand.
+ *
+ * A redirected response cannot be cached at all — `Cache.put` rejects on one —
+ * so this also stops an unhandled rejection on every navigation.
+ */
+const worthCaching = (r) => r && r.ok && !r.redirected && r.type !== 'opaqueredirect';
 
 // Install — don't precache, just activate immediately
 self.addEventListener('install', () => {
@@ -28,8 +45,10 @@ self.addEventListener('fetch', (e) => {
   if (e.request.mode === 'navigate') {
     e.respondWith(
       fetch(e.request).then(r => {
-        const clone = r.clone();
-        caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
+        if (worthCaching(r)) {
+          const clone = r.clone();
+          caches.open(CACHE_NAME).then(c => c.put(e.request, clone)).catch(() => {});
+        }
         return r;
       }).catch(() => caches.match(e.request).then(r => r || caches.match('/')))
     );
@@ -41,7 +60,7 @@ self.addEventListener('fetch', (e) => {
     caches.open(CACHE_NAME).then(cache =>
       cache.match(e.request).then(cached => {
         const fetchP = fetch(e.request).then(r => {
-          if (r.ok) cache.put(e.request, r.clone());
+          if (worthCaching(r)) cache.put(e.request, r.clone()).catch(() => {});
           return r;
         }).catch(() => cached);
         return cached || fetchP;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c4752b6..362b8eb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -8,7 +8,7 @@ import { usePwaInstall } from "./hooks/usePwaInstall";
 import { useNotebookDnd } from "./hooks/useNotebookDnd";
 import { useNavigationHistory } from "./hooks/useNavigationHistory";
 
-import { COVERS, DEFAULT_FOLDERS } from "./ui/constants.jsx";
+import { DEFAULT_FOLDERS, coverBackground } from "./ui/constants.jsx";
 import { I } from "./ui/icons.jsx";
 import { makeTheme, FONT_UI } from "./ui/theme";
 import { ConfirmDialog } from "./ui/ConfirmDialog.jsx";
@@ -509,7 +509,7 @@ export default function App() {
       .filter((nb) => nb.id !== note.folderId)
       .map((nb) => ({
         label: nb.name,
-        colorDot: COVERS[nb.cover % COVERS.length].bg,
+        colorDot: coverBackground(nb.cover, nb.coverPattern),
         action: () => data.moveNote(note.id, nb.id),
       }));
     return targets.length > 0 ? [{ label: "Move to...", icon: I.move, submenu: targets }] : [];
diff --git a/frontend/src/features/notebooks/Dashboard.jsx b/frontend/src/features/notebooks/Dashboard.jsx
index 0d3e240..8d7be47 100644
--- a/frontend/src/features/notebooks/Dashboard.jsx
+++ b/frontend/src/features/notebooks/Dashboard.jsx
@@ -1,4 +1,4 @@
-import { COVERS } from "../../ui/constants.jsx";
+import { coverBackground } from "../../ui/constants.jsx";
 import { I } from "../../ui/icons.jsx";
 import { NotebookCover } from "../../ui/NotebookCover.jsx";
 import { fmtDate } from "../../ui/format";
@@ -188,7 +188,7 @@ export function Dashboard({
                         width: 14,
                         height: 10,
                         borderRadius: 2,
-                        background: COVERS[nb.cover % COVERS.length].bg,
+                        background: coverBackground(nb.cover, nb.coverPattern),
                         flexShrink: 0,
                       }}
                     />
diff --git a/frontend/src/hooks/usePwaInstall.ts b/frontend/src/hooks/usePwaInstall.ts
index ca1241d..df337d1 100644
--- a/frontend/src/hooks/usePwaInstall.ts
+++ b/frontend/src/hooks/usePwaInstall.ts
@@ -28,8 +28,19 @@ const isStandalone = () =>
   // iOS keeps its own flag rather than reporting the display mode.
   (navigator as unknown as { standalone?: boolean }).standalone === true;
 
+/**
+ * The offer, if the browser made one before the app was running.
+ *
+ * `beforeinstallprompt` fires once, early, and is never fired again. A listener
+ * added from a component is routinely too late — which is why the install button
+ * never appeared even on a correctly served site. `index.html` catches it at the
+ * top of the document and leaves it here.
+ */
+const stashed = (): BeforeInstallPromptEvent | null =>
+  (window as unknown as { __inknoteInstallPrompt?: BeforeInstallPromptEvent }).__inknoteInstallPrompt ?? null;
+
 export function usePwaInstall(): PwaInstall {
-  const [event, setEvent] = useState<BeforeInstallPromptEvent | null>(null);
+  const [event, setEvent] = useState<BeforeInstallPromptEvent | null>(stashed);
   const [installed, setInstalled] = useState(isStandalone);
 
   useEffect(() => {
@@ -37,14 +48,20 @@ export function usePwaInstall(): PwaInstall {
       e.preventDefault();
       setEvent(e as BeforeInstallPromptEvent);
     };
+    // Fired by the catcher in index.html when the offer arrives after mount.
+    const onStashed = () => setEvent(stashed());
     const onInstalled = () => {
       setInstalled(true);
       setEvent(null);
     };
     window.addEventListener("beforeinstallprompt", onPrompt);
+    window.addEventListener("inknote:installable", onStashed);
     window.addEventListener("appinstalled", onInstalled);
+    // One more look, in case it landed between the first render and this effect.
+    setEvent((current) => current ?? stashed());
     return () => {
       window.removeEventListener("beforeinstallprompt", onPrompt);
+      window.removeEventListener("inknote:installable", onStashed);
       window.removeEventListener("appinstalled", onInstalled);
     };
   }, []);
@@ -55,7 +72,10 @@ export function usePwaInstall(): PwaInstall {
     const { outcome } = await event.userChoice;
     // The captured event is single-use; drop it either way so the button does
     // not linger after a decision.
-    if (outcome === "accepted") setEvent(null);
+    if (outcome === "accepted") {
+      setEvent(null);
+      (window as unknown as { __inknoteInstallPrompt?: unknown }).__inknoteInstallPrompt = null;
+    }
   };
 
   /* An app can only be installed from a secure origin. Served over plain HTTP
diff --git a/frontend/src/syncEngine.ts b/frontend/src/syncEngine.ts
index 225981c..a8f941c 100644
--- a/frontend/src/syncEngine.ts
+++ b/frontend/src/syncEngine.ts
@@ -71,6 +71,7 @@ interface ServerNotebook {
   id: string;
   name: string;
   cover_index?: number;
+  cover_pattern?: number;
   sort_order?: number;
   max_versions?: number | null;
   sort_mode?: string | null;
@@ -409,6 +410,7 @@ export async function fullSync(): Promise<void> {
       id: nb.id,
       name: nb.name,
       cover: nb.cover_index || 0,
+      coverPattern: nb.cover_pattern || 0,
       sortOrder: nb.sort_order || 0,
       maxVersions: nb.max_versions ?? null,
       sortMode: (nb.sort_mode as Notebook["sortMode"]) ?? null,
@@ -484,13 +486,17 @@ function toNoteMeta(n: ServerNote, trashed: boolean): NoteMeta {
 
 /** Every kind of change that can wait offline. */
 type QueuedAction =
-  | { action: "createNotebook"; data: { localId: string; name: string; cover: number; sortOrder: number } }
+  | {
+      action: "createNotebook";
+      data: { localId: string; name: string; cover: number; coverPattern?: number; sortOrder: number };
+    }
   | {
       action: "updateNotebook";
       data: {
         id: string;
         name?: string;
         cover?: number;
+        coverPattern?: number;
         sortOrder?: number;
         maxVersions?: number | null;
         sortMode?: Notebook["sortMode"];
@@ -562,12 +568,22 @@ async function processEntry(entry: QueueEntry): Promise<void> {
   switch (a.action) {
     case "createNotebook": {
       const d = a.data;
-      const r = await api.post<{ id: string }>("/notebooks", { name: d.name, coverIndex: d.cover });
+      const r = await api.post<{ id: string }>("/notebooks", {
+        name: d.name,
+        coverIndex: d.cover,
+        coverPattern: d.coverPattern || 0,
+      });
       if (r.id !== d.localId) {
         // The server assigned a different id — repoint everything that referenced
         // the temporary local one.
         await db.deleteNotebook(d.localId);
-        await db.putNotebook({ id: r.id, name: d.name, cover: d.cover, sortOrder: d.sortOrder || 0 });
+        await db.putNotebook({
+          id: r.id,
+          name: d.name,
+          cover: d.cover,
+          coverPattern: d.coverPattern || 0,
+          sortOrder: d.sortOrder || 0,
+        });
         for (const n of await db.getAllNotes()) {
           if (n.folderId === d.localId) await db.putNote({ ...n, folderId: r.id });
         }
@@ -581,6 +597,7 @@ async function processEntry(entry: QueueEntry): Promise<void> {
       await api.put(`/notebooks/${a.data.id}`, {
         name: a.data.name,
         coverIndex: a.data.cover,
+        coverPattern: a.data.coverPattern,
         sortOrder: a.data.sortOrder,
         ...(a.data.maxVersions !== undefined ? { maxVersions: a.data.maxVersions } : {}),
         ...(a.data.sortMode !== undefined ? { sortMode: a.data.sortMode } : {}),
@@ -698,11 +715,25 @@ export async function getNotebooks(): Promise<Notebook[]> {
   return db.getAllNotebooks();
 }
 
-export async function createNotebook({ name, cover }: { name: string; cover: number }): Promise<Notebook> {
+export async function createNotebook({
+  name,
+  cover,
+  coverPattern = 0,
+}: {
+  name: string;
+  cover: number;
+  coverPattern?: number;
+}): Promise<Notebook> {
   if (_online && api.token) {
     try {
-      const r = await api.post<{ id: string }>("/notebooks", { name, coverIndex: cover });
-      const nb: Notebook = { id: r.id, name, cover, sortOrder: (await db.getAllNotebooks()).length };
+      const r = await api.post<{ id: string }>("/notebooks", { name, coverIndex: cover, coverPattern });
+      const nb: Notebook = {
+        id: r.id,
+        name,
+        cover,
+        coverPattern,
+        sortOrder: (await db.getAllNotebooks()).length,
+      };
       await db.putNotebook(nb);
       notifyData("notebook", nb);
       return nb;
@@ -716,13 +747,14 @@ export async function createNotebook({ name, cover }: { name: string; cover: num
     id: lid,
     name,
     cover,
+    coverPattern,
     sortOrder: (await db.getAllNotebooks()).length,
     _pendingCreate: true,
   };
   await db.putNotebook(nb);
   await enqueue({
     action: "createNotebook",
-    data: { localId: lid, name, cover, sortOrder: nb.sortOrder },
+    data: { localId: lid, name, cover, coverPattern, sortOrder: nb.sortOrder },
   });
   notifyData("notebook", nb);
   notifyStatus("pending");
@@ -742,6 +774,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
       await api.put(`/notebooks/${id}`, {
         name: updates.name,
         coverIndex: updates.cover,
+        coverPattern: updates.coverPattern,
         sortOrder: updates.sortOrder,
         // null is meaningful here — it clears the notebook's own setting — so it
         // has to travel, while undefined must stay away and change nothing.
@@ -760,6 +793,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
       id,
       name: updates.name,
       cover: updates.cover,
+      coverPattern: updates.coverPattern,
       sortOrder: updates.sortOrder,
       maxVersions: updates.maxVersions,
       sortMode: updates.sortMode,
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index b457939..765dca6 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -90,6 +90,8 @@ export interface Notebook {
   id: string;
   name: string;
   cover: number;
+  /** Pattern laid over the colour, chosen separately from it. */
+  coverPattern?: number;
   sortOrder: number;
   /** Versions kept per note here; null means the server's default. */
   maxVersions?: number | null;
diff --git a/frontend/src/ui/NotebookCover.jsx b/frontend/src/ui/NotebookCover.jsx
index 5d14080..567e37a 100644
--- a/frontend/src/ui/NotebookCover.jsx
+++ b/frontend/src/ui/NotebookCover.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { COVERS } from "./constants.jsx";
+import { coverBackground, coverStyle } from "./constants.jsx";
 
 /* ═══════ NOTEBOOK COVER ═══════ */
 export function NotebookCover({
@@ -15,7 +15,10 @@ export function NotebookCover({
   onDragOver,
   onDrop,
 }) {
-  const cover = COVERS[notebook.cover % COVERS.length];
+  // Colour and pattern are two choices; the spine and accent come from the
+  // colour, the face from both.
+  const cover = coverStyle(notebook.cover, notebook.coverPattern);
+  const face = coverBackground(notebook.cover, notebook.coverPattern);
   const [hovered, setHovered] = useState(false);
   return (
     <button
@@ -114,7 +117,7 @@ export function NotebookCover({
             top: 0,
             right: 0,
             bottom: 0,
-            background: cover.bg,
+            background: face,
             borderRadius: "2px 8px 8px 2px",
             boxShadow: isActive
               ? `0 4px 20px rgba(0,0,0,0.3),0 0 0 3px ${cover.accent}88`
diff --git a/frontend/src/ui/NotebookModals.jsx b/frontend/src/ui/NotebookModals.jsx
index 0305874..e6688cb 100644
--- a/frontend/src/ui/NotebookModals.jsx
+++ b/frontend/src/ui/NotebookModals.jsx
@@ -1,9 +1,87 @@
 import { useMemo, useState } from "react";
-import { COVERS } from "./constants.jsx";
+import { COVERS, PATTERNS, coverBackground, coverParts } from "./constants.jsx";
+
+/**
+ * Choosing a cover: its colour, then the pattern over it.
+ *
+ * Two decisions rather than one list. Offering every combination as its own
+ * entry meant fifteen colours times a dozen patterns in a grid nobody could take
+ * in — and only the handful someone had thought to write out. Each pattern is
+ * previewed over the colour that is currently chosen, so what is on screen is
+ * the cover as it will be, not a sample of the pattern on its own.
+ */
+function CoverChooser({ T, cover, pattern, onCover, onPattern }) {
+  const swatch = (selected) => ({
+    width: "100%",
+    aspectRatio: "3/4",
+    borderRadius: 8,
+    border: selected ? `3px solid ${T.active}` : "2px solid transparent",
+    cursor: "pointer",
+    position: "relative",
+    overflow: "hidden",
+  });
+
+  return (
+    <div style={{ marginBottom: 22 }}>
+      <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Cover colour</div>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(5,1fr)",
+          gap: 8,
+          maxHeight: 200,
+          overflowY: "auto",
+          paddingRight: 4,
+        }}
+      >
+        {COVERS.map((c, i) => (
+          <button
+            key={i}
+            data-cover-option={i}
+            onClick={() => onCover(i)}
+            style={{ ...swatch(coverParts(cover, pattern).cover === i), background: c.bg }}
+          >
+            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }} />
+          </button>
+        ))}
+      </div>
+
+      <div style={{ fontSize: 12, color: T.muted, margin: "14px 0 8px" }}>Pattern</div>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(5,1fr)",
+          gap: 8,
+          maxHeight: 200,
+          overflowY: "auto",
+          paddingRight: 4,
+        }}
+      >
+        {PATTERNS.map((p, i) => (
+          <button
+            key={p.id}
+            data-pattern-option={i}
+            title={p.label}
+            onClick={() => onPattern(i)}
+            style={{
+              ...swatch(coverParts(cover, pattern).pattern === i),
+              // Previewed over the colour in hand, because that is the cover.
+              background: coverBackground(cover, i),
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxVersions }) {
   const [name, setName] = useState(notebook.name);
-  const [sel, setSel] = useState(notebook.cover);
+  /* Colour and pattern are separate choices now. A notebook saved when they
+     were one list holds an index into that list, so it is read back as the pair
+     it was drawn as rather than repainting itself. */
+  const [sel, setSel] = useState(() => coverParts(notebook.cover, notebook.coverPattern).cover);
+  const [pat, setPat] = useState(() => coverParts(notebook.cover, notebook.coverPattern).pattern);
   // Empty means "use the server's default", which is why it is a string here and
   // not a number with a stand-in value.
   const [versions, setVersions] = useState(notebook.maxVersions == null ? "" : String(notebook.maxVersions));
@@ -11,7 +89,7 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
   const save = () => {
     if (!name.trim()) return;
     const n = versions.trim() === "" ? null : Math.max(1, Math.round(Number(versions)));
-    onSave({ name: name.trim(), cover: sel, maxVersions: Number.isFinite(n) ? n : null });
+    onSave({ name: name.trim(), cover: sel, coverPattern: pat, maxVersions: Number.isFinite(n) ? n : null });
   };
   const T = useMemo(
     () => ({
@@ -112,44 +190,13 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
             for the server's default{defaultMaxVersions ? `, which is ${defaultMaxVersions}` : ""}.
           </div>
         </div>
-        <div style={{ marginBottom: 22 }}>
-          <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Cover style</div>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(5,1fr)",
-              gap: 8,
-              /* Scrolls rather than growing. With patterns the list is long
-                 enough that the dialog would run past the bottom of a laptop
-                 screen and take the Create button with it. */
-              maxHeight: 268,
-              overflowY: "auto",
-              paddingRight: 4,
-            }}
-          >
-            {COVERS.map((c, i) => (
-              <button
-                key={i}
-                data-cover-option={i}
-                onClick={() => setSel(i)}
-                style={{
-                  width: "100%",
-                  aspectRatio: "3/4",
-                  borderRadius: 8,
-                  background: c.bg,
-                  border: sel === i ? `3px solid ${T.active}` : "2px solid transparent",
-                  cursor: "pointer",
-                  position: "relative",
-                  overflow: "hidden",
-                }}
-              >
-                <div
-                  style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
+        <CoverChooser
+          T={T}
+          cover={sel}
+          pattern={pat}
+          onCover={setSel}
+          onPattern={setPat}
+        />
         <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
           <button
             onClick={onClose}
@@ -192,6 +239,7 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
 export function CreateNotebookModal({ onClose, onCreate, dark }) {
   const [name, setName] = useState("");
   const [sel, setSel] = useState(0);
+  const [pat, setPat] = useState(0);
   const T = useMemo(
     () => ({
       bg: dark ? "#161b22" : "#fff",
@@ -258,47 +306,16 @@ export function CreateNotebookModal({ onClose, onCreate, dark }) {
             boxSizing: "border-box",
           }}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && name.trim()) onCreate({ name: name.trim(), cover: sel });
+            if (e.key === "Enter" && name.trim()) onCreate({ name: name.trim(), cover: sel, coverPattern: pat });
           }}
         />
-        <div style={{ marginBottom: 22 }}>
-          <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Choose cover style</div>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(5,1fr)",
-              gap: 8,
-              /* Scrolls rather than growing. With patterns the list is long
-                 enough that the dialog would run past the bottom of a laptop
-                 screen and take the Create button with it. */
-              maxHeight: 268,
-              overflowY: "auto",
-              paddingRight: 4,
-            }}
-          >
-            {COVERS.map((c, i) => (
-              <button
-                key={i}
-                data-cover-option={i}
-                onClick={() => setSel(i)}
-                style={{
-                  width: "100%",
-                  aspectRatio: "3/4",
-                  borderRadius: 8,
-                  background: c.bg,
-                  border: sel === i ? `3px solid ${T.active}` : "2px solid transparent",
-                  cursor: "pointer",
-                  position: "relative",
-                  overflow: "hidden",
-                }}
-              >
-                <div
-                  style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
+        <CoverChooser
+          T={T}
+          cover={sel}
+          pattern={pat}
+          onCover={setSel}
+          onPattern={setPat}
+        />
         <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
           <button
             onClick={onClose}
@@ -317,7 +334,7 @@ export function CreateNotebookModal({ onClose, onCreate, dark }) {
           </button>
           <button
             onClick={() => {
-              if (name.trim()) onCreate({ name: name.trim(), cover: sel });
+              if (name.trim()) onCreate({ name: name.trim(), cover: sel, coverPattern: pat });
             }}
             style={{
               padding: "8px 20px",
diff --git a/frontend/src/ui/NotebookPicker.jsx b/frontend/src/ui/NotebookPicker.jsx
index b49498d..e57bd1a 100644
--- a/frontend/src/ui/NotebookPicker.jsx
+++ b/frontend/src/ui/NotebookPicker.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { COVERS } from "./constants.jsx";
+import { coverBackground } from "./constants.jsx";
 
 /**
  * Asks which notebook something should go into.
@@ -141,7 +141,7 @@ export function NotebookPicker({ notebooks, title, confirmLabel = "Continue", on
                     height: 10,
                     borderRadius: 3,
                     flexShrink: 0,
-                    background: COVERS[nb.cover % COVERS.length].bg,
+                    background: coverBackground(nb.cover, nb.coverPattern),
                   }}
                 />
                 <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
diff --git a/frontend/src/ui/Sidebar.jsx b/frontend/src/ui/Sidebar.jsx
index 0b4cca7..c19a208 100644
--- a/frontend/src/ui/Sidebar.jsx
+++ b/frontend/src/ui/Sidebar.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { COVERS, DEFAULT_FOLDERS } from "./constants.jsx";
+import { DEFAULT_FOLDERS, coverBackground } from "./constants.jsx";
 import { I } from "./icons.jsx";
 import { FONT_UI } from "./theme";
 
@@ -352,7 +352,7 @@ export function Sidebar({
                     width: 20,
                     height: 14,
                     borderRadius: 3,
-                    background: COVERS[nb.cover % COVERS.length].bg,
+                    background: coverBackground(nb.cover, nb.coverPattern),
                     flexShrink: 0,
                     boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                   }}
diff --git a/frontend/src/ui/constants.jsx b/frontend/src/ui/constants.jsx
index ded81f2..09ec547 100644
--- a/frontend/src/ui/constants.jsx
+++ b/frontend/src/ui/constants.jsx
@@ -40,94 +40,6 @@ export const COVERS = [
   { bg: "linear-gradient(135deg,#1f1c2c,#928dab)", spine: "#15131f", accent: "#b39ddb" },
   { bg: "linear-gradient(135deg,#654ea3,#eaafc8)", spine: "#4e3c7e", accent: "#f8bbd0" },
 
-  /* ── Patterned ──
-   *
-   * A cover is stored as an *index* into this list, so these are appended and
-   * never reordered: renumbering them would silently repaint every notebook
-   * anyone already has.
-   *
-   * Drawn entirely with CSS gradient layers — no image files, nothing to
-   * upload, nothing to fetch, and they stay crisp at any size and work offline
-   * like everything else here. `background` takes a stack of layers, topmost
-   * first, so each of these is a pattern laid over the colour beneath it.
-   *
-   * The patterns are deliberately faint. A cover is read at the size of a thumb
-   * with a title across it, and anything louder fights the title. */
-
-  // Ruled paper — the one that actually looks like a notebook.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 17px), linear-gradient(135deg,#1b2735,#2c5364)",
-    spine: "#101a24",
-    accent: "#80cbc4",
-  },
-  // Graph paper.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 20px), repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 20px), linear-gradient(135deg,#243b2f,#3e7a5e)",
-    spine: "#16281f",
-    accent: "#a5d6a7",
-  },
-  // Diagonal pinstripe.
-  {
-    bg: "repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 6px,transparent 6px 14px), linear-gradient(135deg,#3a1c71,#5c2a8f)",
-    spine: "#2a1352",
-    accent: "#ce93d8",
-  },
-  // Wide diagonal bands.
-  {
-    bg: "repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 18px,transparent 18px 36px), linear-gradient(135deg,#f7971e,#ffd200)",
-    spine: "#c2740f",
-    accent: "#fff59d",
-  },
-  // Dots.
-  {
-    bg: "radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.5px) 0 0/13px 13px, linear-gradient(135deg,#8b1e3f,#3c1053)",
-    spine: "#5e1029",
-    accent: "#f48fb1",
-  },
-  // Cross-hatch, both diagonals.
-  {
-    bg: "repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px), repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px), linear-gradient(135deg,#232526,#414345)",
-    spine: "#141516",
-    accent: "#b0bec5",
-  },
-  // Linen weave — very fine, reads as texture rather than as lines.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px), linear-gradient(135deg,#6b705c,#a5a58d)",
-    spine: "#4a4e40",
-    accent: "#ddbea9",
-  },
-  // Broad horizontal bands. Two crossed diagonals were meant to be a chevron
-  // and came out as noisy plaid — at thumbnail size a pattern has to be one
-  // idea, not two.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 13px,transparent 13px 26px), linear-gradient(135deg,#0b486b,#f56217)",
-    spine: "#073349",
-    accent: "#ffcc80",
-  },
-  // Light from the top corner, over deep blue — nothing repeating at all.
-  {
-    bg: "radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.22),transparent 62%), linear-gradient(135deg,#0f2027,#16324f)",
-    spine: "#08161d",
-    accent: "#90caf9",
-  },
-  // Two washes crossing, like ink bleeding into paper.
-  {
-    bg: "radial-gradient(80% 60% at 85% 15%,rgba(255,145,180,.35),transparent 60%), radial-gradient(90% 70% at 10% 90%,rgba(120,200,255,.30),transparent 60%), linear-gradient(135deg,#20143a,#3a2757)",
-    spine: "#150d28",
-    accent: "#f8bbd0",
-  },
-  // A band across the foot, the way a label sits on a ledger.
-  {
-    bg: "linear-gradient(0deg,rgba(0,0,0,.35) 0 22%,transparent 22%), linear-gradient(135deg,#134e5e,#71b280)",
-    spine: "#0b3a46",
-    accent: "#b9f6ca",
-  },
-  // Fine vertical rules on near-black — a ledger.
-  {
-    bg: "repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 26px), linear-gradient(135deg,#111318,#242a33)",
-    spine: "#0a0c10",
-    accent: "#cfd8dc",
-  },
 ];
 /* The icon is a key rather than an emoji: the sidebar draws it from the app's
  * own set, so it matches the stroke weight of everything around it and looks
@@ -137,3 +49,105 @@ export const DEFAULT_FOLDERS = [
   { id: "starred", name: "Starred", icon: "star" },
   { id: "trash", name: "Trash", icon: "trash" },
 ];
+
+/**
+ * A pattern laid over a cover, chosen separately from its colour.
+ *
+ * Two decisions rather than one list: a cover is a colour *and* a texture, and
+ * offering every combination as its own entry would mean fifteen gradients times
+ * a dozen patterns in a grid nobody could take in. Picking each in turn is both
+ * shorter and gives every combination, not the handful someone wrote out.
+ *
+ * `layers` are CSS background layers laid **over** the gradient — no image
+ * files, nothing to upload, crisp at any size and offline like the rest of the
+ * app. They are deliberately faint: a cover is read at the size of a thumb with
+ * a title across it, and anything louder fights the title. One idea each, too —
+ * two crossed diagonals meant as a chevron came out as noisy plaid at that size.
+ */
+export const PATTERNS = [
+  { id: "plain", label: "Plain", layers: "" },
+  {
+    id: "ruled",
+    label: "Ruled",
+    layers: "repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 17px)",
+  },
+  {
+    id: "grid",
+    label: "Grid",
+    layers:
+      "repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px), repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px)",
+  },
+  {
+    id: "pinstripe",
+    label: "Pinstripe",
+    layers: "repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 6px,transparent 6px 14px)",
+  },
+  {
+    id: "bands",
+    label: "Bands",
+    layers: "repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 13px,transparent 13px 26px)",
+  },
+  {
+    id: "dots",
+    label: "Dots",
+    layers: "radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.5px) 0 0/13px 13px",
+  },
+  {
+    id: "hatch",
+    label: "Cross-hatch",
+    layers:
+      "repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px), repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px)",
+  },
+  {
+    id: "linen",
+    label: "Linen",
+    layers:
+      "repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px)",
+  },
+  {
+    id: "ledger",
+    label: "Ledger",
+    layers: "repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 26px)",
+  },
+  {
+    id: "glow",
+    label: "Corner light",
+    layers: "radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.20),transparent 62%)",
+  },
+  {
+    id: "foot",
+    label: "Foot band",
+    layers: "linear-gradient(0deg,rgba(0,0,0,.34) 0 22%,transparent 22%)",
+  },
+];
+
+/**
+ * Covers written before patterns were their own choice.
+ *
+ * Twelve patterned entries were appended to `COVERS` for a day, so a notebook
+ * may still hold an index into them. Rather than let those repaint themselves,
+ * each is read back as the colour-and-pattern pair it was drawn as.
+ */
+const LEGACY_COVER = {
+  15: [11, 1], 16: [2, 2], 17: [3, 3], 18: [9, 4], 19: [5, 5],
+  20: [8, 6], 21: [12, 7], 22: [4, 4], 23: [8, 9], 24: [0, 9],
+  25: [2, 10], 26: [8, 8],
+};
+
+/** The colour and pattern a notebook is actually drawn with. */
+export function coverParts(cover, pattern) {
+  const legacy = LEGACY_COVER[cover];
+  if (legacy) return { cover: legacy[0], pattern: legacy[1] };
+  return { cover: ((cover % COVERS.length) + COVERS.length) % COVERS.length, pattern: pattern || 0 };
+}
+
+/** The CSS `background` for a cover: its pattern laid over its colour. */
+export function coverBackground(cover, pattern) {
+  const parts = coverParts(cover, pattern);
+  const base = COVERS[parts.cover];
+  const layers = PATTERNS[parts.pattern]?.layers;
+  return layers ? `${layers}, ${base.bg}` : base.bg;
+}
+
+/** The rest of a cover's colours — the spine, and the accent used beside it. */
+export const coverStyle = (cover, pattern) => COVERS[coverParts(cover, pattern).cover];
diff --git a/readme.md b/readme.md
index 22cf90b..bbd9ccc 100644
--- a/readme.md
+++ b/readme.md
@@ -347,31 +347,65 @@ The install entry used to appear only when the browser had offered a prompt
 screen at all — no button, no reason, and no way to find out short of knowing how
 PWAs work.
 
-It is always there now, and when there is no prompt it says which of the fixable
-causes applies. The common one is worth naming: **a browser will only install a
+**The prompt itself was being missed.** `beforeinstallprompt` fires once, early
+— usually before React has mounted — and is never fired again. The listener lived
+in a component, so on a correctly served site the event arrived, found nobody
+listening, and was gone for the session. It is caught at the top of `index.html`
+now and handed over when the app is ready.
+
+**And the manifest was being fetched without credentials.** A
+`<link rel="manifest">` is fetched with credentials omitted unless it says
+otherwise, so behind a reverse proxy that authenticates in front of the app that
+one request comes back as the proxy's login page. The browser reads it as an
+invalid manifest and offers no install — while the app itself works perfectly,
+because its own requests carry the cookie. The link now carries
+`crossorigin="use-credentials"`, which is harmless without a proxy.
+
+The service worker had the matching problem: it cached whatever came back. A
+lapsed session could be stored as the application itself, and the app would then
+"work offline" by showing a login screen it could never get past — curable only
+by clearing the site's data. It now caches only responses that are successful and
+not redirected, and `Cache.put` is guarded, since it rejects on a redirect and
+that rejection was going unhandled on every navigation.
+
+Behind such a proxy, three paths have to reach InkNote intact: `/manifest.json`
+and `/sw.js` must return the file rather than a login page — a **redirect** on
+`sw.js` fails registration outright, taking offline with it — and `/ws` needs its
+WebSocket upgrade passed through, or changes from another device only arrive with
+the 30-second reconciliation.
+
+The entry is always there, and when there is no prompt it says which of the
+fixable causes applies. The common one is worth naming: **a browser will only install a
 site served over HTTPS**, and on plain HTTP the service worker never registers
 either — so one cause takes the install *and* offline with it, which otherwise
 looks like two unrelated mysteries.
 
 ### Notebook covers
 
-A cover is stored as an **index** into `COVERS` in
-[`ui/constants.jsx`](frontend/src/ui/constants.jsx). Entries are therefore only
-ever appended, never reordered: renumbering them would silently repaint every
-notebook anyone already has.
+**A cover is a colour and a pattern, chosen in turn** — `COVERS` and `PATTERNS`
+in [`ui/constants.jsx`](frontend/src/ui/constants.jsx), stored as
+`notebooks.cover_index` and `notebooks.cover_pattern`.
 
-The patterned ones are drawn entirely with CSS gradient layers — no image files,
-nothing to upload, nothing to fetch. They stay crisp at any size and work offline
-like the rest of the app. `background` takes a stack of layers, topmost first, so
-each is a pattern laid over the colour beneath it.
+Two decisions rather than one list. Offering every combination as its own entry
+would mean fifteen colours times a dozen patterns in a grid nobody could take in
+— and in practice only the handful someone had thought to write out. Picking each
+in turn is shorter *and* gives every combination. Each pattern is previewed over
+the colour currently chosen, so what is on screen is the cover as it will be.
 
-They are deliberately faint: a cover is read at the size of a thumb with a title
-across it, and anything louder fights the title. One idea per cover, too — two
-crossed diagonals meant as a chevron came out as noisy plaid at that size and
-were replaced with plain bands.
+The patterns are CSS gradient layers laid over the colour — no image files,
+nothing to upload, nothing to fetch, crisp at any size, offline like the rest of
+the app. They are deliberately faint: a cover is read at the size of a thumb with
+a title across it, and anything louder fights the title. One idea each, too — two
+crossed diagonals meant as a chevron came out as noisy plaid at that size.
 
-The grid scrolls. Without that the dialog runs past the bottom of a laptop screen
-and takes the *Create* button with it, which a test now checks at 1440×800.
+`COVERS` is an index, so entries are only ever appended: renumbering them would
+silently repaint every notebook anyone already has. For one day the patterns
+*were* twelve appended entries, before they became their own axis; `coverParts()`
+reads those indices back as the colour-and-pattern pair they were drawn as, so
+nothing that was chosen then looks different now.
+
+Both grids scroll. Without that the dialog runs past the bottom of a laptop
+screen and takes the *Create* button with it, which a test checks at 1440×800.
 
 ### Browser suites