From eed5872173a208942a2d9b457caa4bfb4a948873 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:33:29 +0100
Subject: [PATCH 01/42] docs: add web UI design refresh spec and reference
 mockup

---
 .../specs/2026-08-15-web-ui-refresh-design.md | 204 +++++++++
 .../2026-08-15-web-ui-refresh-mockup.html     | 395 ++++++++++++++++++
 2 files changed, 599 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
 create mode 100644 docs/superpowers/specs/2026-08-15-web-ui-refresh-mockup.html

diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
new file mode 100644
index 0000000..ea562ed
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -0,0 +1,204 @@
+# Web UI Design Refresh
+
+**Date:** 2026-08-15
+**Status:** Approved, ready for planning
+**Reference mockup:** [`2026-08-15-web-ui-refresh-mockup.html`](./2026-08-15-web-ui-refresh-mockup.html) — open directly in a browser; the `⇄` button switches between the recipe and list views, `◐` toggles light/dark.
+
+## Goal
+
+Refresh the CookCLI web server UI so it is visually consistent, more concise, and pleasant to use on a tablet. The priority use case is **cooking from a recipe on a tablet propped in the kitchen**, but the refresh applies to all pages.
+
+## Problem
+
+Measured at 820px viewport width (iPad portrait) and by inventorying the templates:
+
+### Density
+
+- Content starts ~370px down the recipe page: a ~100px nav bar, then a title block, a tag row, and one-to-two rows of metadata pills.
+- Only ~2.5 method steps and half the ingredient list fit above the fold.
+- The recipes index shows ~4 cards per screen; each folder card is ~190px tall to display one word and a count.
+
+### Layout breaks in the tablet band
+
+Templates use only the `md` (768px) and `lg` (1024px) breakpoints. Tablet portrait falls in "md but not lg", so it receives desktop-density layout at three-quarters of the width:
+
+- `recipe.html` applies `grid md:grid-cols-3` at 820px, leaving the ingredient rail ~190px wide. `mozzarella cheese` / `100 grams` wraps onto two lines.
+- Action buttons hide their labels below `lg` (`<span class="hidden lg:inline">`), so Edit / Add to Shopping List / Cook render as three unlabeled coloured circles.
+
+### No design system
+
+| Primitive | Distinct values in use |
+| --- | --- |
+| Border radius | 5 (`rounded-sm`, `-lg`, `-xl`, `-2xl`, `-full`) |
+| Shadow | 4 (`shadow-xs`, `-md`, `-lg`, `-xl`) |
+| Type size | 7 (`text-xs` … `text-4xl`) |
+| Gradients | ~40 instances across 9 templates |
+
+Accent colour is not controlled: orange, yellow, green, blue, cyan, purple, and pink gradients all appear as primary-weight UI.
+
+### Dark mode is unmaintainable
+
+`templates/base.html` contains roughly 450 lines of blanket overrides of the form:
+
+```css
+.dark .bg-white     { … }
+.dark .text-gray-700 { … }
+.dark .bg-gradient-to-r.from-orange-50.to-yellow-50 { … }
+```
+
+Dark mode patches Tailwind utility classes one at a time. Every new component requires another manual override, which is the root cause of the inconsistency — it is structurally impossible to stay consistent under this approach.
+
+## Approach
+
+Three options were considered:
+
+| Option | Description | Trade-off |
+| --- | --- | --- |
+| **A. Token-based system refresh** | Semantic CSS custom properties defined once for light and dark; a small component layer; compact spacing and type scales; a real tablet tier. Delete the `.dark .*` override block. | Touches every page. The only option that fixes consistency at the root. |
+| B. Compaction only | Keep the current look, tighten padding, fix breakpoints. | Fast and low-risk, but gradient soup and the dark-override pile remain. |
+| C. Full redesign | New palette, type, sidebar navigation, new layout patterns. | Highest risk; discards working features (Cook mode, search, shortcuts). |
+
+**Option A is chosen.**
+
+### Visual identity
+
+The refreshed identity is **restrained**: one accent colour, no gradients, hairline separators, and tinted text in place of bordered pills. This reads as a calm reference tool, maximises legibility at arm's length in a kitchen, and is the easiest to keep consistent as pages are added.
+
+This is a deliberate move away from the current playful identity (gradients, emoji circles, rainbow card borders).
+
+## Design
+
+### 1. Token layer
+
+Added to `static/css/input.css`. Eleven semantic names, defined once per theme:
+
+```css
+:root {
+  --bg:            #faf9f7;
+  --surface:       #ffffff;
+  --surface-sunk:  #f4f2ef;
+  --border:        #e6e2dc;
+  --border-strong: #d5cfc6;
+  --text:          #1b1917;
+  --text-muted:    #6f6862;
+  --text-faint:    #9a938c;
+  --accent:        #d9541c;
+  --accent-text:   #b0400f;
+  --accent-soft:   #fdefe6;
+}
+
+.dark {
+  --bg:            #131519;
+  --surface:       #1a1d22;
+  --surface-sunk:  #212530;
+  --border:        #2b3038;
+  --border-strong: #3a414b;
+  --text:          #eceef1;
+  --text-muted:    #9aa2ac;
+  --text-faint:    #6f7883;
+  --accent:        #ff7a45;
+  --accent-text:   #ff9166;
+  --accent-soft:   #2c1e17;
+}
+```
+
+Semantic tokens are registered with Tailwind v4's `@theme inline` so they generate real utilities that resolve to the custom properties and therefore flip automatically under `.dark`:
+
+```css
+@theme inline {
+  --color-bg:           var(--bg);           /* bg-bg          */
+  --color-surface:      var(--surface);      /* bg-surface     */
+  --color-sunk:         var(--surface-sunk); /* bg-sunk        */
+  --color-line:         var(--border);       /* border-line    */
+  --color-line-strong:  var(--border-strong);/* border-line-strong */
+  --color-text:         var(--text);         /* text-text      */
+  --color-muted:        var(--text-muted);   /* text-muted     */
+  --color-faint:        var(--text-faint);   /* text-faint     */
+  --color-accent:       var(--accent);       /* bg-accent      */
+  --color-accent-text:  var(--accent-text);  /* text-accent-text */
+  --color-accent-soft:  var(--accent-soft);  /* bg-accent-soft */
+}
+```
+
+Border tokens are named `line` rather than `border` so the generated utility reads `border-line`, not `border-border`.
+
+The existing `@config "../../tailwind.config.js"` directive stays; the legacy `primary-orange` / `light-*` colours in `tailwind.config.js` are removed once no template references them.
+
+Three further status tokens cover pantry stock and shopping-list state: `--ok`, `--ok-soft`, `--info` (fourteen tokens in total).
+
+**Collapsed scales:**
+
+| Scale | Values |
+| --- | --- |
+| Radius | `6px` (controls), `10px` (cards), `999px` (chips) |
+| Shadow | One level, `0 1px 2px rgba(0,0,0,.04)`; `none` in dark |
+| Type | `12 / 13 / 15 / 17 / 24px` |
+| Spacing | 4px grid |
+
+Prose line-height is `1.6`. The current `leading-8` (2rem on 16px text) is the main reason steps consume so much vertical space.
+
+### 2. Component layer
+
+Seven classes in `@layer components`, all consuming tokens. They replace ad-hoc utility strings so a page's markup states intent rather than appearance.
+
+| Class | Purpose |
+| --- | --- |
+| `.card` / `.card-head` | Bordered surface with an uppercase micro-label header and optional right-aligned count |
+| `.btn`, `.btn-primary` | 32px control. One primary (accent-filled) per view; everything else is a neutral bordered button |
+| `.row` | Hairline-separated list item: flexible name, right-aligned tabular-figure value |
+| `.chip` | Small neutral pill for tags |
+| `.metaline` | Single line of dot-separated metadata |
+| `.stepper` | Segmented −/value/+ control for recipe scaling |
+| `.section-label` | Uppercase micro-label for grouping list sections |
+
+Inline recipe entities become weight plus tint rather than bordered gradient pills, so they stop competing with the prose:
+
+- `.i-ing` — `--accent-text`, weight 600
+- `.i-cook` — `--ok`, weight 600
+- `.i-time` — weight 600 on `--surface-sunk`, tabular figures
+
+The existing `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.nav-pill`, `.metadata-*`, `.tag`, `.recipe-card`, `.step-number`, and `.btn-primary` gradient definitions in `input.css` are replaced by the above. `cooking-mode.css` references `.ingredient-badge` / `.cookware-badge` / `.timer-badge` and must be updated in the same change so Cook mode does not lose its inline entity styling.
+
+### 3. Responsive tiers
+
+- Recipe layout switches at **700px** to `grid-template-columns: 264px minmax(0,1fr)`, widening the rail to `300px` at 1024px. A fixed rail is what guarantees ingredient names and quantities never wrap.
+- The ingredient rail is `position: sticky; top: 64px` at ≥700px, so it stays visible while scrolling the method.
+- Action buttons keep their text labels at all widths — the `hidden lg:inline` label spans are removed.
+- Card grids use `repeat(auto-fill, minmax(230px, 1fr))` so column count follows available width rather than hard breakpoints.
+
+### 4. Application chrome
+
+`base.html` navigation compacts from ~100px to a 48px sticky bar: brand mark, three text nav items, a normal-width search input (replacing the ~500px purple-ringed field), and three icon buttons (theme, shortcuts, preferences). The existing mobile "more menu" behaviour below `md` is preserved.
+
+### 5. Page-by-page changes
+
+| Page | Change |
+| --- | --- |
+| `base.html` | 48px sticky app bar; **delete the ~450-line `.dark .*` override block** |
+| `recipe.html` | Compact head (breadcrumb, 24px title, action row); six colour-coded metadata pills → one `.metaline`; ingredient rail using `.card` + `.row`; steps unboxed into a single `.card` with hairline separators and 22px muted step numbers; inline entities retinted |
+| `recipes.html` | 190px hero cards → ~60px `.row`-style cards grouped under Folders / Menus / Recipes `.section-label`s |
+| `shopping_list.html` | Aisle groups become `.card` + `.row`; three gradients removed |
+| `pantry.html` | Four-line stat blocks → single row with right-aligned quantity and secondary dates; status dot uses `--ok` / status tokens |
+| `preferences.html` | Eleven gradients → plain `.card` sections |
+| `menu.html` | Six gradients → `.card`; head aligned with `recipe.html` |
+| `edit.html`, `new.html` | Inherit `.btn` / `.card`; CodeMirror dark theme reads tokens instead of the hardcoded `.dark .cm-*` rules in `input.css` |
+| `api_docs.html`, `error.html` | Inherit `.card` / type scale |
+
+### 6. Sequencing and risk
+
+The token and component layers land **first** and are purely additive — no existing page changes behaviour. Pages then migrate one at a time, each independently reviewable and revertable.
+
+**The `.dark .*` override block in `base.html` is deleted last**, only once no remaining page depends on it. Deleting it earlier would break every unmigrated page's dark mode.
+
+### 7. Verification
+
+- `npm test` (Playwright E2E, `tests/e2e/`) runs after each page migration. Tests use mostly semantic selectors, but any that assert on gradient or colour utility classes will need updating alongside the page they cover.
+- `tests/e2e/accessibility.spec.ts` covers WCAG 2.0 AA contrast and will catch regressions in the new palette. All token pairs (`--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, `#fff` on `--accent`) must pass AA in both themes.
+- Each migrated page is visually checked at **820px** (tablet portrait), **1024px**, and **1440px**, in both light and dark.
+- `cargo fmt`, `cargo clippy`, and `cargo test` must pass before the PR, per `CLAUDE.md`.
+
+## Out of scope
+
+- **Cook mode** (`static/css/cooking-mode.css`, `static/js/cooking-mode.js`) keeps its current appearance, apart from the inline entity classes it shares with the main stylesheet. Its own compaction — dead vertical space, missing next/previous affordances, duplicate ingredient entries in the mise-en-place grid — is a natural follow-up, tracked separately.
+- **Pantry quantity formatting bug.** Quantities render as `250%g`, `2%l`, `200%g` — a format-string defect, unrelated to design. To be fixed in its own change.
+- No backend, routing, template-data, or API changes. This is a presentation-layer refresh only.
diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-mockup.html b/docs/superpowers/specs/2026-08-15-web-ui-refresh-mockup.html
new file mode 100644
index 0000000..f13522b
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-mockup.html
@@ -0,0 +1,395 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Mockup</title>
+<style>
+/* ============================================================
+   TOKENS — defined once. No .dark .bg-white overrides anywhere.
+   ============================================================ */
+:root {
+  --bg:            #faf9f7;
+  --surface:       #ffffff;
+  --surface-sunk:  #f4f2ef;
+  --border:        #e6e2dc;
+  --border-strong: #d5cfc6;
+  --text:          #1b1917;
+  --text-muted:    #6f6862;
+  --text-faint:    #9a938c;
+  --accent:        #d9541c;
+  --accent-text:   #b0400f;
+  --accent-soft:   #fdefe6;
+  --ok:            #2f7d55;
+  --ok-soft:       #e7f4ec;
+  --info:          #2b6cb0;
+  --radius:   10px;
+  --radius-sm: 7px;
+  --shadow: 0 1px 2px rgba(0,0,0,.04);
+}
+[data-theme="dark"] {
+  --bg:            #131519;
+  --surface:       #1a1d22;
+  --surface-sunk:  #212530;
+  --border:        #2b3038;
+  --border-strong: #3a414b;
+  --text:          #eceef1;
+  --text-muted:    #9aa2ac;
+  --text-faint:    #6f7883;
+  --accent:        #ff7a45;
+  --accent-text:   #ff9166;
+  --accent-soft:   #2c1e17;
+  --ok:            #5fbe8b;
+  --ok-soft:       #17271f;
+  --info:          #7ab3ea;
+  --shadow: none;
+}
+
+* { box-sizing: border-box; }
+html, body { margin:0; padding:0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+
+/* ============================================================
+   APP CHROME — one compact bar, 48px instead of ~100px
+   ============================================================ */
+.appbar {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; align-items: center; gap: 10px;
+  height: 48px; padding: 0 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.brand { display:flex; align-items:center; gap:7px; font-weight:650; font-size:14px; letter-spacing:-.01em; }
+.brand-mark {
+  width:22px; height:22px; border-radius:6px; background: var(--accent);
+  display:grid; place-items:center; color:#fff; font-size:12px;
+}
+.appnav { display:flex; gap:2px; margin-left:8px; }
+.appnav a {
+  padding: 5px 11px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
+  color: var(--text-muted); text-decoration: none;
+}
+.appnav a:hover { background: var(--surface-sunk); color: var(--text); }
+.appnav a[aria-current] { background: var(--surface-sunk); color: var(--text); font-weight: 600; }
+.appsearch {
+  margin-left: auto; display:flex; align-items:center; gap:6px;
+  width: 200px; padding: 5px 10px; border-radius: 7px;
+  background: var(--surface-sunk); border: 1px solid transparent;
+  color: var(--text-faint); font-size: 13px;
+}
+.appsearch:focus-within { border-color: var(--accent); }
+.iconbtn {
+  width:28px; height:28px; border-radius:7px; border:0; background:transparent;
+  color: var(--text-muted); display:grid; place-items:center; cursor:pointer; font-size:14px;
+}
+.iconbtn:hover { background: var(--surface-sunk); color: var(--text); }
+
+/* ============================================================
+   PAGE
+   ============================================================ */
+.page { max-width: 1100px; margin: 0 auto; padding: 16px; }
+.crumbs { font-size: 12.5px; color: var(--text-faint); margin-bottom: 8px; }
+.crumbs a { text-decoration: none; }
+.crumbs a:hover { color: var(--text); }
+.crumbs span { margin: 0 5px; }
+
+.pagehead { display:flex; align-items:flex-start; gap:16px; margin-bottom: 6px; }
+.pagehead h1 {
+  margin: 0; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em;
+}
+.actions { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; }
+
+.btn {
+  display:inline-flex; align-items:center; gap:6px;
+  height: 32px; padding: 0 11px; border-radius: var(--radius-sm);
+  font-size: 13.5px; font-weight: 550; white-space: nowrap; cursor: pointer;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-strong); text-decoration:none;
+}
+.btn:hover { background: var(--surface-sunk); }
+.btn-primary { background: var(--accent); border-color: var(--accent); color:#fff; }
+.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }
+.btn svg { width:15px; height:15px; }
+
+.stepper {
+  display:inline-flex; align-items:center; height:32px;
+  border:1px solid var(--border-strong); border-radius: var(--radius-sm);
+  background: var(--surface); overflow:hidden;
+}
+.stepper button { width:26px; height:100%; border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-size:14px; }
+.stepper button:hover { background: var(--surface-sunk); color:var(--text); }
+.stepper span { min-width:34px; text-align:center; font-size:13.5px; font-weight:600; font-variant-numeric: tabular-nums; }
+
+/* Meta: one quiet line, not 6 coloured pills */
+.metaline {
+  display:flex; flex-wrap:wrap; align-items:center; gap:6px 0;
+  font-size: 13px; color: var(--text-muted); margin-bottom: 14px;
+}
+.metaline > *:not(:last-child)::after {
+  content: "·"; margin: 0 8px; color: var(--text-faint);
+}
+.metaline b { font-weight: 600; color: var(--text); }
+.metaline a { color: var(--info); text-decoration:none; }
+.tags { display:flex; gap:5px; }
+.tag {
+  font-size:12px; padding:1px 8px; border-radius:999px;
+  background: var(--surface-sunk); color: var(--text-muted); font-weight:500;
+}
+
+/* ============================================================
+   LAYOUT — fixed-width ingredient rail so names never wrap
+   ============================================================ */
+.recipe-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
+@media (min-width: 700px) {
+  .recipe-grid { grid-template-columns: 264px minmax(0,1fr); align-items:start; }
+  .rail { position: sticky; top: 64px; }
+}
+@media (min-width: 1024px) {
+  .recipe-grid { grid-template-columns: 300px minmax(0,1fr); }
+}
+
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow);
+}
+.card + .card { margin-top: 12px; }
+.card-head {
+  display:flex; align-items:center; justify-content:space-between;
+  padding: 10px 14px; border-bottom: 1px solid var(--border);
+}
+.card-head h2 {
+  margin:0; font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--text-muted);
+}
+.card-head .count { font-size:12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+
+/* Ingredient rows: hairlines, not filled gradient chips */
+.ing { list-style:none; margin:0; padding: 4px 0; }
+.ing li {
+  display:flex; align-items:baseline; gap:10px;
+  padding: 7px 14px; font-size: 14px;
+}
+.ing li + li { border-top: 1px solid var(--border); }
+.ing .name { flex:1; min-width:0; }
+.ing .qty {
+  font-variant-numeric: tabular-nums; font-weight:600; font-size:13.5px;
+  color: var(--accent-text); white-space:nowrap;
+}
+.ing .ref { color: var(--info); text-decoration:none; }
+.ing .ref:hover { text-decoration:underline; }
+.ing .note { color: var(--text-faint); font-size:12.5px; }
+.ing input[type=checkbox] { accent-color: var(--accent); margin:0; }
+
+/* ============================================================
+   STEPS — no nested boxes, hairline separated
+   ============================================================ */
+.steps { list-style:none; margin:0; padding:0; }
+.steps > li { display:flex; gap: 12px; padding: 14px; }
+.steps > li + li { border-top: 1px solid var(--border); }
+.num {
+  flex: 0 0 22px; height:22px; border-radius:50%;
+  display:grid; place-items:center;
+  background: var(--surface-sunk); color: var(--text-muted);
+  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
+  margin-top: 1px;
+}
+.steptext { font-size: 15px; line-height: 1.6; }
+.steptext p { margin: 0; }
+.stepings {
+  margin-top: 7px; font-size: 12.5px; color: var(--text-faint);
+  display:flex; flex-wrap:wrap; gap: 2px 14px;
+}
+.stepings b { font-weight:600; color: var(--text-muted); }
+
+/* Inline entities: tint + weight, not gradient pills with borders */
+.i-ing  { color: var(--accent-text); font-weight: 600; }
+.i-cook { color: var(--ok); font-weight: 600; }
+.i-time {
+  font-weight:600; background: var(--surface-sunk);
+  padding: 1px 6px; border-radius: 5px; font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   RECIPE LIST — dense rows instead of 190px cards
+   ============================================================ */
+.listgrid { display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); }
+.rcard {
+  display:flex; align-items:center; gap:10px;
+  padding: 10px 12px; text-decoration:none;
+  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
+}
+.rcard:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
+.rcard .ico {
+  flex:0 0 30px; height:30px; border-radius: 8px; display:grid; place-items:center;
+  background: var(--surface-sunk); font-size:15px;
+}
+.rcard .t { display:block; font-weight: 600; font-size: 14px; line-height:1.3; }
+.rcard .s { display:block; font-size: 12px; color: var(--text-faint); margin-top:1px; }
+.toolbar { display:flex; align-items:center; gap:8px; margin: 12px 0; font-size:13px; color:var(--text-muted); }
+select, .sel {
+  height:30px; border-radius: var(--radius-sm); border:1px solid var(--border-strong);
+  background: var(--surface); color: var(--text); font-size:13px; padding: 0 8px;
+}
+.sectionlabel {
+  font-size:11.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
+  color: var(--text-faint); margin: 18px 0 8px;
+}
+.hidden { display:none; }
+</style>
+</head>
+<body>
+
+<div class="appbar">
+  <div class="brand"><span class="brand-mark">🍳</span> Cook</div>
+  <nav class="appnav">
+    <a href="#" onclick="show('recipe');return false" id="nav-recipe" aria-current="page">Recipes</a>
+    <a href="#">Shopping</a>
+    <a href="#">Pantry</a>
+  </nav>
+  <div class="appsearch">🔍 Search…</div>
+  <button class="iconbtn" onclick="show(view==='recipe'?'list':'recipe')" title="Toggle page">⇄</button>
+  <button class="iconbtn" onclick="toggleTheme()" title="Toggle theme">◐</button>
+  <button class="iconbtn" title="Settings">⚙</button>
+</div>
+
+<!-- =================== RECIPE PAGE =================== -->
+<div class="page" id="view-recipe">
+  <div class="crumbs"><a href="#">Recipes</a><span>/</span>Neapolitan Pizza</div>
+
+  <div class="pagehead">
+    <h1>Neapolitan Pizza</h1>
+    <div class="actions">
+      <div class="stepper"><button>−</button><span>1×</span><button>+</button></div>
+      <button class="btn">Edit</button>
+      <button class="btn">Add to list</button>
+      <button class="btn btn-primary">▶ Cook</button>
+    </div>
+  </div>
+
+  <div class="metaline">
+    <span><b>6</b> servings</span>
+    <span><b>20 min</b></span>
+    <span>Italian</span>
+    <span>Advanced</span>
+    <span><a href="#">stadlermade.com</a></span>
+    <span class="tags"><i class="tag">italian</i><i class="tag">pizza</i></span>
+  </div>
+
+  <div class="recipe-grid">
+    <div class="rail">
+      <div class="card">
+        <div class="card-head"><h2>Ingredients</h2><span class="count">6</span></div>
+        <ul class="ing">
+          <li><input type="checkbox" checked><span class="name"><a class="ref" href="#">Pizza Dough</a></span><span class="qty">6 balls</span></li>
+          <li><span class="name">San Marzano tomato sauce</span><span class="qty">5 tbsp</span></li>
+          <li><span class="name">mozzarella cheese</span><span class="qty">100 g</span></li>
+          <li><span class="name">basil leaves</span><span class="qty"></span></li>
+          <li><span class="name">flour</span><span class="qty"></span></li>
+          <li><span class="name">semolina</span><span class="qty"></span></li>
+        </ul>
+      </div>
+      <div class="card">
+        <div class="card-head"><h2>Cookware</h2><span class="count">2</span></div>
+        <ul class="ing">
+          <li><span class="name">outdoor oven</span></li>
+          <li><span class="name">spatula</span></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-head"><h2>Method</h2><span class="count">6 steps</span></div>
+      <ol class="steps">
+        <li>
+          <div class="num">1</div>
+          <div class="steptext">
+            <p>Preheat your <span class="i-cook">outdoor oven</span> so it's around 450/500°C (842/932°F).</p>
+          </div>
+        </li>
+        <li>
+          <div class="num">2</div>
+          <div class="steptext">
+            <p>Prepare your pizza toppings because from now on you wanna work fast. Sprinkle some <span class="i-ing">semolina</span> on your work surface.</p>
+            <div class="stepings"><span><b>semolina</b></span></div>
+          </div>
+        </li>
+        <li>
+          <div class="num">3</div>
+          <div class="steptext">
+            <p>Use a <span class="i-cook">spatula</span> to remove the <span class="i-ing">Pizza Dough</span> from the dough box and place it upside down in the <span class="i-ing">flour</span>. Sprinkle the bottom of the dough ball generously with <span class="i-ing">semolina</span>, then flip it over again so that the top remains the top.</p>
+            <div class="stepings"><span><b>Pizza Dough</b> 6 balls</span><span><b>flour</b></span><span><b>semolina</b></span></div>
+          </div>
+        </li>
+        <li>
+          <div class="num">4</div>
+          <div class="steptext">
+            <p>Press with your fingertips from both hands in the center of the dough ball towards the outer edges so that the air goes to the crust. Rotate the dough clockwise and make the same movement again until you have gone all around and a nice crust has formed.</p>
+          </div>
+        </li>
+        <li>
+          <div class="num">5</div>
+          <div class="steptext">
+            <p>Place the base on a lightly floured surface and spread <span class="i-ing">San Marzano tomato sauce</span> on it. Add some fresh <span class="i-ing">basil leaves</span> and fresh <span class="i-ing">mozzarella cheese</span>. Bake for <span class="i-time">⏱ 90 sec</span>.</p>
+            <div class="stepings"><span><b>San Marzano tomato sauce</b> 5 tbsp</span><span><b>basil leaves</b></span><span><b>mozzarella cheese</b> 100 g</span></div>
+          </div>
+        </li>
+      </ol>
+    </div>
+  </div>
+</div>
+
+<!-- =================== RECIPE LIST =================== -->
+<div class="page hidden" id="view-list">
+  <div class="pagehead">
+    <h1>All Recipes</h1>
+    <div class="actions"><button class="btn btn-primary">+ New Recipe</button></div>
+  </div>
+  <div class="toolbar">
+    Sort <select><option>Name</option><option>Recent</option></select>
+    <button class="iconbtn" style="border:1px solid var(--border-strong)">↑</button>
+  </div>
+
+  <div class="sectionlabel">Folders</div>
+  <div class="listgrid">
+    <a class="rcard" href="#"><span class="ico">📁</span><span><span class="t">Breakfast</span><span class="s">3 recipes</span></span></a>
+    <a class="rcard" href="#"><span class="ico">📁</span><span><span class="t">Salads</span><span class="s">1 recipe</span></span></a>
+    <a class="rcard" href="#"><span class="ico">📁</span><span><span class="t">Shared</span><span class="s">4 recipes</span></span></a>
+  </div>
+
+  <div class="sectionlabel">Menus</div>
+  <div class="listgrid">
+    <a class="rcard" href="#"><span class="ico">📋</span><span><span class="t">2 Day Plan</span><span class="s">Menu</span></span></a>
+    <a class="rcard" href="#"><span class="ico">📋</span><span><span class="t">Weekly Plan</span><span class="s">Menu</span></span></a>
+  </div>
+
+  <div class="sectionlabel">Recipes</div>
+  <div class="listgrid">
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Classic Risotto alla Milanese</span><span class="s">italian · rice · comfort food</span></span></a>
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Neapolitan Pizza</span><span class="s">italian · pizza</span></span></a>
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Thai Green Curry</span><span class="s">thai · curry</span></span></a>
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Pizza Dough</span><span class="s">italian</span></span></a>
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Caesar Salad</span><span class="s">salad</span></span></a>
+    <a class="rcard" href="#"><span class="ico">🍽</span><span><span class="t">Pancakes</span><span class="s">breakfast · sweet</span></span></a>
+  </div>
+</div>
+
+<script>
+let view = 'recipe';
+function show(v){
+  view = v;
+  document.getElementById('view-recipe').classList.toggle('hidden', v!=='recipe');
+  document.getElementById('view-list').classList.toggle('hidden', v!=='list');
+}
+function toggleTheme(){
+  const r = document.documentElement;
+  r.dataset.theme = r.dataset.theme === 'dark' ? 'light' : 'dark';
+}
+</script>
+</body>
+</html>

From 632d85b463578b450fc7d330c15629cac2e5e23e Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:45:55 +0100
Subject: [PATCH 02/42] docs: add web UI refresh implementation plan

---
 .../plans/2026-08-15-web-ui-refresh.md        | 1908 +++++++++++++++++
 .../specs/2026-08-15-web-ui-refresh-design.md |    8 +-
 2 files changed, 1915 insertions(+), 1 deletion(-)
 create mode 100644 docs/superpowers/plans/2026-08-15-web-ui-refresh.md

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
new file mode 100644
index 0000000..b0be68c
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -0,0 +1,1908 @@
+# Web UI Design Refresh Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the CookCLI web UI's ad-hoc styling with a semantic design-token system, producing a consistent, compact interface that works well on a tablet.
+
+**Architecture:** A token layer (CSS custom properties, flipped once per theme) feeds a small component layer (`.card`, `.btn`, `.row`, …) defined in `static/css/input.css`. Templates are then migrated page-by-page from raw Tailwind utility strings to those components. The ~330-line `.dark .*` utility-override block in `base.html` is removed in stages, as each set of classes stops depending on it.
+
+**Tech Stack:** Rust + Axum + Askama templates, Tailwind CSS v4 (CSS-first, with a legacy `@config` shim), Playwright for E2E.
+
+**Spec:** [`docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md`](../specs/2026-08-15-web-ui-refresh-design.md)
+**Visual reference:** [`docs/superpowers/specs/2026-08-15-web-ui-refresh-mockup.html`](../specs/2026-08-15-web-ui-refresh-mockup.html) — open in a browser; `⇄` switches recipe/list view, `◐` toggles theme.
+
+---
+
+## Critical workflow notes
+
+Read these before starting. They are not obvious and will waste your time if you miss them.
+
+**1. Askama templates compile into the binary.** Editing a `.html` file in `templates/` has *no effect* on a running server. After every template edit you must:
+
+```bash
+cargo build
+```
+
+and restart the server. `CLAUDE.md` claims templates recompile per request — that is wrong for this Askama 0.12 setup.
+
+**2. CSS must be rebuilt too.** `static/css/output.css` is a build artifact. After editing `static/css/input.css`:
+
+```bash
+npm run build-css
+```
+
+During development `npm run watch-css` does this automatically.
+
+**3. The standard loop for any change in this plan:**
+
+```bash
+npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080
+```
+
+**4. Playwright reuses a running server** (`reuseExistingServer: !process.env.CI`). If you leave a stale server on port 9080, tests will run against stale templates and give meaningless results. Kill it before running tests, or make sure you rebuilt and restarted it.
+
+**5. Do not rename these class names.** The E2E suite (129 tests) selects on them directly:
+
+| Class | Used by |
+| --- | --- |
+| `.nav-pill`, `.nav-pill.active` | `navigation.spec.ts` (7 assertions), `preferences.spec.ts` |
+| `.recipe-card` | `navigation.spec.ts`, `test-helpers.ts` |
+| `.ingredient-badge` | `recipe-display.spec.ts`, `test-helpers.ts` |
+| `.metadata-pill` | `test-helpers.ts` |
+
+These classes are **restyled, not renamed**. Keeping the names is deliberate: it preserves the test suite as a regression net for a change that touches every page.
+
+---
+
+## File structure
+
+| File | Responsibility after this plan |
+| --- | --- |
+| `static/css/input.css` | **Single source of styling truth.** Token definitions, `@theme` registration, component layer. |
+| `static/css/output.css` | Build artifact. Never edit by hand. |
+| `static/css/custom-styles.css` | **Deleted.** Currently duplicates `input.css`'s component layer with different values, and loads *after* `output.css` so it silently wins. |
+| `static/css/styles.css` | **Deleted.** 444 lines, referenced by nothing. |
+| `static/css/cooking-mode.css` | Keeps its own layout, but consumes tokens for colour and inherits the shared badge classes. |
+| `templates/base.html` | App shell + 48px app bar. Its inline `<style>` block keeps only `.viewport` and the `@media print` rules. |
+| `templates/*.html` | Semantic markup using the component layer. No raw colour utilities. |
+| `tailwind.config.js` | Content globs + `darkMode: 'class'` only. Legacy `primary-orange` / `light-*` colours removed. |
+| `tests/e2e/tablet.spec.ts` | **New.** Tablet-viewport regression tests (820×1180). |
+
+---
+
+## Task 1: Design tokens
+
+Additive only. No page changes appearance in this task.
+
+**Files:**
+- Modify: `static/css/input.css:1-7` (after the `@config` line)
+
+- [ ] **Step 1: Add the token layer**
+
+Insert immediately after the `@config "../../tailwind.config.js";` line in `static/css/input.css`, before the existing `/* Custom component classes */` comment:
+
+```css
+/* ============================================================
+   DESIGN TOKENS
+   Fourteen semantic names, defined once per theme. Every colour
+   in the UI resolves through one of these. Do not introduce raw
+   hex values or Tailwind palette utilities in templates.
+   ============================================================ */
+:root {
+    --bg:            #faf9f7;
+    --surface:       #ffffff;
+    --surface-sunk:  #f4f2ef;
+    --border:        #e6e2dc;
+    --border-strong: #d5cfc6;
+    --text:          #1b1917;
+    --text-muted:    #6f6862;
+    --text-faint:    #9a938c;
+    --accent:        #d9541c;
+    --accent-text:   #b0400f;
+    --accent-soft:   #fdefe6;
+    --ok:            #2f7d55;
+    --ok-soft:       #e7f4ec;
+    --info:          #2b6cb0;
+
+    --radius-control: 6px;
+    --radius-card:   10px;
+    --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
+}
+
+.dark {
+    color-scheme: dark;
+    --bg:            #131519;
+    --surface:       #1a1d22;
+    --surface-sunk:  #212530;
+    --border:        #2b3038;
+    --border-strong: #3a414b;
+    --text:          #eceef1;
+    --text-muted:    #9aa2ac;
+    --text-faint:    #6f7883;
+    --accent:        #ff7a45;
+    --accent-text:   #ff9166;
+    --accent-soft:   #2c1e17;
+    --ok:            #5fbe8b;
+    --ok-soft:       #17271f;
+    --info:          #7ab3ea;
+
+    --shadow-card:   none;
+}
+
+/* Register tokens with Tailwind so they generate real utilities
+   (bg-surface, text-muted, border-line, …). `inline` makes the
+   generated utilities reference the custom property, so they flip
+   automatically under .dark with no override rules.
+   Border tokens are named `line` so the utility reads `border-line`
+   rather than `border-border`. */
+@theme inline {
+    --color-bg:          var(--bg);
+    --color-surface:     var(--surface);
+    --color-sunk:        var(--surface-sunk);
+    --color-line:        var(--border);
+    --color-line-strong: var(--border-strong);
+    --color-text:        var(--text);
+    --color-muted:       var(--text-muted);
+    --color-faint:       var(--text-faint);
+    --color-accent:      var(--accent);
+    --color-accent-text: var(--accent-text);
+    --color-accent-soft: var(--accent-soft);
+    --color-ok:          var(--ok);
+    --color-ok-soft:     var(--ok-soft);
+    --color-info:        var(--info);
+}
+```
+
+- [ ] **Step 2: Build the CSS**
+
+Run: `npm run build-css`
+Expected: exits 0, no errors.
+
+- [ ] **Step 3: Verify the utilities were generated**
+
+Run: `grep -c "color-surface\|color-accent-text\|color-line-strong" static/css/output.css`
+Expected: a number greater than `0`. If it prints `0`, the `@theme inline` block was not picked up — check it sits at the top level of `input.css`, not nested inside `@layer`.
+
+- [ ] **Step 4: Verify no visual regression**
+
+Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`
+Open `http://localhost:9080/recipe/Neapolitan Pizza` and toggle light/dark.
+Expected: the page looks exactly as it did before. Tokens are defined but nothing consumes them yet.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add static/css/input.css static/css/output.css
+git commit -m "feat(ui): add semantic design tokens"
+```
+
+---
+
+## Task 2: Remove duplicate and dead stylesheets
+
+`custom-styles.css` defines `.recipe-card`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.btn-primary`, `.search-input`, `.recipe-image-placeholder`, `.step-number`, `.tag`, `.nav-pill`, `.metadata-pill` — all of which `input.css` *also* defines, with different values. Because it is linked after `output.css`, it wins. `styles.css` is referenced by nothing.
+
+**Files:**
+- Delete: `static/css/custom-styles.css`
+- Delete: `static/css/styles.css`
+- Modify: `templates/base.html:13`
+- Modify: `static/css/input.css` (add the one rule `custom-styles.css` had that `input.css` lacks)
+
+- [ ] **Step 1: Confirm `styles.css` is genuinely unreferenced**
+
+Run: `grep -rn "styles.css" templates/ src/ crates/ static/js/ 2>/dev/null | grep -v custom-styles`
+Expected: no output. If anything prints, stop and investigate before deleting.
+
+- [ ] **Step 2: Port the one missing rule into `input.css`**
+
+`custom-styles.css` sizes the icon inside a metadata pill; `input.css` does not. Add inside the existing `@layer components { … }` block in `static/css/input.css`:
+
+```css
+    .metadata-pill svg {
+        @apply w-4 h-4 mr-2;
+    }
+```
+
+- [ ] **Step 3: Delete both files**
+
+```bash
+git rm static/css/custom-styles.css static/css/styles.css
+```
+
+- [ ] **Step 4: Remove the stylesheet link**
+
+In `templates/base.html`, delete line 13:
+
+```html
+    <link href="{{ prefix }}/static/css/custom-styles.css" rel="stylesheet">
+```
+
+- [ ] **Step 5: Rebuild and verify**
+
+Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`
+Open `http://localhost:9080/recipe/Neapolitan Pizza`.
+Expected: page still renders with badges, step numbers and nav pills styled. Minor visual shifts are expected and correct — `input.css`'s versions differ slightly from the deleted duplicates (for example `.metadata-pill` loses its grey gradient for a flat white background). Nothing should be *unstyled*.
+
+- [ ] **Step 6: Run the full E2E suite as a baseline**
+
+Run: `npm test`
+Expected: all 129 tests pass. **Record any pre-existing failures now** — you need this baseline to tell your regressions apart from failures that were already there.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "refactor(ui): consolidate stylesheets into input.css"
+```
+
+---
+
+## Task 3: Component layer
+
+Additive. Adds the new classes; does not yet change the old ones or any template.
+
+**Files:**
+- Modify: `static/css/input.css` (inside the existing `@layer components` block)
+
+- [ ] **Step 1: Add the components**
+
+Add at the top of the existing `@layer components { … }` block in `static/css/input.css`:
+
+```css
+    /* ---------- Surfaces ---------- */
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+        box-shadow: var(--shadow-card);
+    }
+
+    .card-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .card-head h2,
+    .card-head h3 {
+        margin: 0;
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+    }
+
+    .card-head .count {
+        font-size: 12px;
+        color: var(--text-faint);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* ---------- Controls ---------- */
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 32px;
+        padding: 0 11px;
+        border-radius: var(--radius-control);
+        font-size: 13.5px;
+        font-weight: 550;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border-strong);
+    }
+
+    .btn:hover { background: var(--surface-sunk); }
+
+    .btn svg { width: 15px; height: 15px; }
+
+    /* One accent-filled button per view. Everything else is neutral. */
+    .btn-primary {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #fff;
+    }
+
+    .btn-primary:hover {
+        background: var(--accent);
+        filter: brightness(1.06);
+    }
+
+    .stepper {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        overflow: hidden;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-control);
+    }
+
+    .stepper button {
+        width: 26px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: 14px;
+    }
+
+    .stepper button:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .stepper input,
+    .stepper .value {
+        width: 44px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text);
+        text-align: center;
+        font-size: 13.5px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .stepper input:focus { outline: none; }
+
+    /* ---------- Lists ---------- */
+    .row {
+        display: flex;
+        align-items: baseline;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
+    }
+
+    .row + .row { border-top: 1px solid var(--border); }
+
+    .row .row-name { flex: 1; min-width: 0; }
+
+    .row .row-value {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .row .row-note {
+        color: var(--text-faint);
+        font-size: 12.5px;
+    }
+
+    /* ---------- Text ---------- */
+    /* One quiet dot-separated line, replacing rows of coloured pills. */
+    .metaline {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 0;
+        font-size: 13px;
+        color: var(--text-muted);
+    }
+
+    .metaline > *:not(:last-child)::after {
+        content: "·";
+        margin: 0 8px;
+        color: var(--text-faint);
+    }
+
+    .metaline b { font-weight: 600; color: var(--text); }
+
+    .metaline a { color: var(--info); text-decoration: none; }
+
+    .metaline a:hover { text-decoration: underline; }
+
+    .section-label {
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-faint);
+        margin: 18px 0 8px;
+    }
+
+    .chip {
+        display: inline-block;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    /* ---------- Status ---------- */
+    /* Shared by the pantry page and the shopping list's pantry sidebar,
+       so stock state reads identically in both places. Defined here
+       rather than in the pantry task because Task 8 consumes it first. */
+    .item-status-dot {
+        flex: 0 0 auto;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+    }
+
+    .item-status-dot.in-stock { background: var(--ok); }
+
+    .item-status-dot.out-of-stock { background: var(--accent); }
+```
+
+Delete the two existing `.item-status-dot.in-stock` / `.item-status-dot.out-of-stock` rules further down `input.css` (the ones using `bg-green-500 dark:bg-green-400` and `bg-red-500 dark:bg-red-400`), so there is only one definition.
+
+- [ ] **Step 2: Build**
+
+Run: `npm run build-css`
+Expected: exits 0.
+
+- [ ] **Step 3: Verify the classes emitted**
+
+Run: `grep -c "\.card-head\|\.btn-primary\|\.metaline\|\.section-label" static/css/output.css`
+Expected: greater than `0`.
+
+- [ ] **Step 4: Verify no regression**
+
+Run: `npm test`
+Expected: same result as the Task 2 baseline. No template uses the new classes yet.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add static/css/input.css static/css/output.css
+git commit -m "feat(ui): add token-based component layer"
+```
+
+---
+
+## Task 4: Restyle shared badge and pill components
+
+Converts the test-visible classes to flat token styling, and removes exactly the dark overrides that would otherwise fight them. `cooking-mode.css` shares these classes, so Cook mode is covered by the same change.
+
+**Files:**
+- Modify: `static/css/input.css` (existing `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.tag`, `.metadata-*`, `.step-number`, `.recipe-card`, `.nav-pill`)
+- Modify: `templates/base.html` (remove two dark-override sections)
+
+- [ ] **Step 1: Replace the badge, tag and pill definitions**
+
+In `static/css/input.css`, delete the existing `.recipe-card`, `.recipe-card::before`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.step-number`, `.tag`, `.nav-pill`, `.nav-pill:hover`, `.nav-pill.active`, `.metadata-pill`, and all ten `.metadata-*` variant rules. Replace with:
+
+```css
+    /* Inline recipe entities: weight + tint, not bordered gradient pills,
+       so they stop competing with the prose they sit inside. */
+    .ingredient-badge {
+        color: var(--accent-text);
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .cookware-badge {
+        color: var(--ok);
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .timer-badge {
+        padding: 1px 6px;
+        border-radius: 5px;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+
+    .step-number {
+        flex: 0 0 22px;
+        height: 22px;
+        margin-top: 1px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-size: 12px;
+        font-weight: 650;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .tag {
+        display: inline-block;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    /* Card in the recipes/menu index. No gradient top border. */
+    .recipe-card {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        text-decoration: none;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+    }
+
+    .recipe-card:hover {
+        background: var(--surface-sunk);
+        border-color: var(--border-strong);
+    }
+
+    .recipe-card .recipe-card-icon {
+        flex: 0 0 30px;
+        height: 30px;
+        display: grid;
+        place-items: center;
+        border-radius: 8px;
+        background: var(--surface-sunk);
+        font-size: 15px;
+    }
+
+    /* MUST be applied to an <h3>. The client-side sorter in
+       recipes.html reads `el.querySelector('h3')?.textContent`
+       to sort by name; any other element silently breaks sorting. */
+    .recipe-card .recipe-card-title {
+        display: block;
+        margin: 0;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--text);
+    }
+
+    .recipe-card .recipe-card-sub {
+        display: block;
+        margin-top: 1px;
+        font-size: 12px;
+        color: var(--text-faint);
+    }
+
+    /* Nav items in the app bar. Name kept for the E2E suite. */
+    .nav-pill {
+        padding: 5px 11px;
+        border-radius: 7px;
+        font-size: 13.5px;
+        font-weight: 500;
+        color: var(--text-muted);
+        text-decoration: none;
+    }
+
+    .nav-pill:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .nav-pill.active {
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
+    }
+
+    /* Kept for custom metadata key/value chips inside .metaline.
+       test-helpers.ts selects .metadata-pill by "key: value" text. */
+    .metadata-pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    .metadata-pill svg {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+    }
+```
+
+Note: `.recipe-image-placeholder` and `.search-input:focus` stay as they are for now; `.search-input:focus` is replaced in Task 5.
+
+- [ ] **Step 2: Remove the dark overrides for these classes**
+
+In `templates/base.html`, inside the `<style>` block, delete these two sections in full. They sit between the `/* Nav pill dark mode */` comment and the `/* Recipe card specific dark styles */` block, roughly lines 193–272 before edits — locate them by their comment text, not by line number.
+
+Delete the section beginning:
+
+```css
+        /* Nav pill dark mode */
+        .dark .nav-pill {
+```
+
+through the end of `.dark .nav-pill.active { … }`.
+
+Delete the section beginning:
+
+```css
+        /* Dark mode tag and badge styles */
+```
+
+through the end of the `/* Recipe card specific dark styles */` section, i.e. every rule targeting `.dark .ingredient-badge`, `.dark .cookware-badge`, `.dark .timer-badge`, `.dark .step-number`, `.dark .tag`, `.dark .metadata-pill`, and `.dark .recipe-card`.
+
+**Leave the `@media print` block entirely alone.** It contains its own `.dark .ingredient-badge` rules that make badges readable on paper, and they are still needed.
+
+One print rule does go stale in Task 5: `.bg-white.shadow-lg.rounded-2xl.mb-8 { display: none !important; }` targets the old nav wrapper, which becomes `.appbar`. It is harmless dead CSS because the rule above it already hides `nav` outright — remove it in Task 13 along with the rest of the cleanup.
+
+- [ ] **Step 3: Rebuild and check both themes**
+
+Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`
+Open `http://localhost:9080/recipe/Neapolitan Pizza` in light and dark.
+Expected: inline ingredients render as orange bold text (no pill outline), cookware as green bold text, step numbers as small grey circles. Both themes legible. No white-on-white or black-on-black.
+
+- [ ] **Step 4: Check Cook mode still styles its entities**
+
+On the same page click **Cook**, then advance past the mise-en-place card to a step card.
+Expected: ingredient and cookware names inside step text are tinted and bold, matching the recipe page.
+
+- [ ] **Step 5: Run the tests**
+
+Run: `npm test`
+Expected: same as baseline. `recipe-display.spec.ts` and `navigation.spec.ts` assert on the *presence* of `.ingredient-badge` / `.nav-pill`, not their colours, so they must still pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add static/css/input.css static/css/output.css templates/base.html
+git commit -m "refactor(ui): restyle badges and pills onto design tokens"
+```
+
+---
+
+## Task 5: Compact app bar
+
+Replaces the ~100px navigation block with a 48px sticky bar. This is the first task with a tablet-specific behaviour change, so it starts with a failing test.
+
+**Files:**
+- Create: `tests/e2e/tablet.spec.ts`
+- Modify: `templates/base.html:768-800` (body, `.viewport`, `<nav>` and search markup)
+- Modify: `static/css/input.css` (app bar components, `.search-input`)
+
+- [ ] **Step 1: Write the failing test**
+
+Create `tests/e2e/tablet.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+// iPad portrait. The band between md (768) and lg (1024) is where the
+// old layout was worst: desktop density at three-quarters the width.
+const TABLET = { width: 820, height: 1180 };
+
+test.describe('Tablet layout', () => {
+  test.use({ viewport: TABLET });
+
+  test('app bar is compact', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    const nav = page.locator('nav').first();
+    const box = await nav.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThanOrEqual(56);
+  });
+
+  test('nav items are visible at tablet width', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator('nav a.nav-pill', { hasText: /Recipes/i })).toBeVisible();
+  });
+});
+```
+
+- [ ] **Step 2: Run it and confirm it fails**
+
+Run: `npx playwright test tests/e2e/tablet.spec.ts --project=chromium`
+Expected: `app bar is compact` FAILS with a received height around `100`. `nav items are visible` should already PASS (the nav shows at `md` and up).
+
+- [ ] **Step 3: Add app bar components**
+
+Add to the `@layer components` block in `static/css/input.css`:
+
+```css
+    .appbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 48px;
+        padding: 0 16px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .appbar-brand {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 14px;
+        font-weight: 650;
+        letter-spacing: -.01em;
+        color: var(--text);
+        text-decoration: none;
+    }
+
+    .appbar-nav { display: flex; gap: 2px; }
+
+    .icon-btn {
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border: 0;
+        border-radius: 7px;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+    }
+
+    .icon-btn:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .icon-btn svg { width: 16px; height: 16px; }
+
+    .search-input {
+        width: 100%;
+        height: 30px;
+        padding: 0 10px 0 30px;
+        border-radius: 7px;
+        border: 1px solid transparent;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-size: 13px;
+    }
+
+    .search-input::placeholder { color: var(--text-faint); }
+
+    .search-input:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: none;
+    }
+```
+
+Delete the old `.search-input:focus` rule (the one setting `border-primary-orange` and an orange ring) from `input.css`.
+
+- [ ] **Step 4: Rewrite the nav markup**
+
+In `templates/base.html`, replace `<body class="bg-gray-50">` with:
+
+```html
+<body class="bg-bg text-text">
+```
+
+Replace the opening of the nav block — currently:
+
+```html
+        <nav class="bg-white shadow-lg rounded-2xl mb-8 relative">
+            <div class="px-3 lg:px-6 py-4 relative">
+                <div class="flex items-center justify-between flex-wrap gap-y-3">
+```
+
+with:
+
+```html
+        <nav class="appbar">
+            <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="appbar-brand">
+                <img src="{{ prefix }}/static/android-chrome-192x192.png" alt="" class="h-[22px] w-[22px] rounded-md" width="22" height="22">
+                <span class="hidden sm:inline">Cook</span>
+            </a>
+```
+
+Then, for the search container, replace its wrapper classes and input classes:
+
+```html
+            <div class="relative z-50 ml-auto w-[180px] md:w-[220px]" id="search-container">
+                <div class="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
+                    <svg class="h-4 w-4 text-faint" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </div>
+                <input type="text"
+                       id="search-input"
+                       placeholder="{{ tr.t("search-placeholder") }}"
+                       class="search-input">
+                <div id="search-results"
+                     class="absolute top-full mt-1 w-full card hidden max-h-96 overflow-y-auto"
+                     style="z-index: 9999;">
+                </div>
+            </div>
+```
+
+Move the `.appbar-nav` group so it sits directly after the brand and before the search container:
+
+```html
+            <div class="appbar-nav hidden md:flex">
+                {% if features.show_shopping_list || features.show_pantry %}
+                <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}"
+                   class="nav-pill {% if active == "recipes" %}active{% endif %}">{{ tr.t("nav-recipes") }}</a>
+                {% if features.show_shopping_list && !static_mode %}
+                <a href="{{ prefix }}/shopping-list"
+                   class="nav-pill {% if active == "shopping" %}active{% endif %}">{{ tr.t("nav-shopping-list") }}</a>
+                {% endif %}
+                {% if features.show_pantry && !static_mode %}
+                <a href="{{ prefix }}/pantry"
+                   class="nav-pill {% if active == "pantry" %}active{% endif %}">{{ tr.t("nav-pantry") }}</a>
+                {% endif %}
+                {% endif %}
+            </div>
+```
+
+Convert the three trailing controls (preferences link, shortcuts button, theme button) to `.icon-btn`, dropping their `px-3 lg:px-5 rounded-full` / `bg-gray-200 dark:bg-gray-700` utility strings. Keep every `onclick`, `aria-label`, `title`, and the `print:hidden` class exactly as they are. Keep the `md:hidden` overflow-menu block unchanged apart from swapping its trigger button's utility classes for `icon-btn`.
+
+Remove the now-redundant wrapper `<div class="px-3 lg:px-6 py-4 relative">` and `<div class="flex items-center justify-between flex-wrap gap-y-3">`, and their closing tags. `.appbar` is itself the flex row.
+
+- [ ] **Step 5: Update `.viewport` spacing**
+
+In the `<style>` block of `templates/base.html`, change `.viewport` from:
+
+```css
+        .viewport {
+            width: 100%;
+            max-width: 72rem;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+```
+
+to:
+
+```css
+        .viewport {
+            width: 100%;
+            max-width: 72rem;
+            margin: 0 auto;
+            padding: 16px;
+        }
+```
+
+The nav must move *outside* `.viewport` so the app bar spans the full width and sticks correctly. Move the `<nav class="appbar">…</nav>` block above `<div class="viewport">`.
+
+- [ ] **Step 6: Remove the search dark overrides**
+
+In `templates/base.html`, delete the `/* Search results dark mode */` and `/* Override inline hover styles in search results */` sections in full — every rule matching `.dark #search-results …` and `.dark #search-input …`. The search input and results panel now use tokens.
+
+Also delete the dead `/* Theme toggle button styles */` section (`.theme-toggle`, `.theme-toggle.dark`, `.theme-toggle-handle`, `.theme-toggle.dark .theme-toggle-handle`) — `grep -rn "theme-toggle" templates/ static/js/` returns nothing outside these definitions.
+
+Restyle the one remaining light-mode search rule to use tokens:
+
+```css
+        #search-results a.search-selected {
+            background: var(--surface-sunk) !important;
+        }
+```
+
+- [ ] **Step 7: Run the tablet test**
+
+Run: `npm run build-css && cargo build` then `npx playwright test tests/e2e/tablet.spec.ts --project=chromium`
+Expected: both tests PASS.
+
+- [ ] **Step 8: Verify search still works**
+
+Start the server, type `pizza` into the search box.
+Expected: results dropdown appears, is readable in both themes, and arrow-key selection highlights a row.
+
+- [ ] **Step 9: Run the suite**
+
+Run: `npm test`
+Expected: `search.spec.ts` and `navigation.spec.ts` pass. If a navigation test asserts the nav is inside a specific wrapper, update the selector to `nav.appbar`.
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): compact 48px app bar"
+```
+
+---
+
+## Task 6: Recipe page
+
+The priority page. Mirrors the reference mockup's recipe view.
+
+**Files:**
+- Modify: `templates/recipe.html`
+- Modify: `static/css/input.css` (recipe layout components)
+- Modify: `tests/e2e/tablet.spec.ts`
+
+- [ ] **Step 1: Write the failing tests**
+
+Append to `tests/e2e/tablet.spec.ts`, inside the existing `test.describe('Tablet layout', …)` block:
+
+```typescript
+  test('recipe action buttons keep their labels', async ({ page }) => {
+    await page.goto('/recipe/Neapolitan Pizza');
+    await page.waitForLoadState('networkidle');
+
+    // Below lg these used to collapse to unlabelled coloured circles.
+    await expect(page.getByRole('button', { name: /Cook/i })).toContainText(/Cook/i);
+    await expect(page.getByRole('link', { name: /Edit/i })).toContainText(/Edit/i);
+  });
+
+  test('ingredient rows do not wrap', async ({ page }) => {
+    await page.goto('/recipe/Neapolitan Pizza');
+    await page.waitForLoadState('networkidle');
+
+    // A single-line row is ~30px tall. Wrapping pushes it past 44px.
+    const row = page.locator('.ingredient-list .row', { hasText: 'mozzarella cheese' });
+    const box = await row.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThan(44);
+  });
+```
+
+- [ ] **Step 2: Run and confirm failure**
+
+Run: `npx playwright test tests/e2e/tablet.spec.ts --project=chromium`
+Expected: `recipe action buttons keep their labels` FAILS (labels are inside `hidden lg:inline` spans). `ingredient rows do not wrap` FAILS with "no element matches" — `.ingredient-list` does not exist yet.
+
+- [ ] **Step 3: Add the recipe layout components**
+
+Add to `@layer components` in `static/css/input.css`:
+
+```css
+    /* Fixed-width rail is what guarantees ingredient names and
+       quantities never wrap in the 768–1023px tablet band. */
+    .recipe-layout {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 700px) {
+        .recipe-layout {
+            grid-template-columns: 264px minmax(0, 1fr);
+            align-items: start;
+        }
+
+        .recipe-rail {
+            position: sticky;
+            top: 64px;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .recipe-layout { grid-template-columns: 300px minmax(0, 1fr); }
+    }
+
+    .ingredient-list { list-style: none; margin: 0; padding: 4px 0; }
+
+    .step-list { list-style: none; margin: 0; padding: 0; }
+
+    .step-list > li {
+        display: flex;
+        gap: 12px;
+        padding: 14px;
+    }
+
+    .step-list > li + li { border-top: 1px solid var(--border); }
+
+    .step-body { font-size: 15px; line-height: 1.6; }
+
+    .step-refs {
+        margin-top: 7px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 14px;
+        font-size: 12.5px;
+        color: var(--text-faint);
+    }
+
+    .step-refs b { font-weight: 600; color: var(--text-muted); }
+
+    .recipe-note {
+        display: flex;
+        gap: 8px;
+        padding: 12px 14px;
+        border-left: 3px solid var(--border-strong);
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-style: italic;
+    }
+```
+
+- [ ] **Step 4: Rewrite the recipe head**
+
+In `templates/recipe.html`, replace the title bar block (lines 36–95) with:
+
+```html
+        <div class="flex items-start gap-4 mb-1.5">
+            <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:text-2xl">
+                {{ recipe.name }}
+            </h1>
+            {% if scale != 1.0 %}
+            <div class="hidden print:block text-lg font-normal">{{ tr.t("recipe-scale-label") }}: {{ scale }}x</div>
+            {% endif %}
+            <div class="ml-auto flex flex-wrap items-center gap-1.5 print:hidden">
+                {% if !static_mode %}
+                <div class="stepper">
+                    <label for="scale" class="sr-only">{{ tr.t("recipe-scale-label") }}</label>
+                    <input type="number"
+                           id="scale"
+                           value="{{ scale }}"
+                           min="0.5"
+                           max="200"
+                           step="0.5"
+                           onchange="window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${this.value}`">
+                </div>
+                <a href="{{ prefix }}/edit/{{ recipe_path }}" class="btn" title="{{ tr.t("action-edit") }}">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                    </svg>
+                    <span>{{ tr.t("action-edit") }}</span>
+                </a>
+                <button onclick="addToShoppingList(event, {{ recipe_path|json }})" class="btn" title="{{ tr.t("recipe-add-to-shopping") }}">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                    </svg>
+                    <span>{{ tr.t("recipe-add-to-shopping") }}</span>
+                </button>
+                {% endif %}
+                <button id="start-cooking-btn" onclick="startCookingMode()" class="btn btn-primary print:hidden" title="Start Cooking">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span>Cook</span>
+                </button>
+                {% if static_mode %}
+                <a href="{{ prefix }}/recipe/{{ recipe_path }}.cook" download class="btn" title="Download .cook source">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path>
+                    </svg>
+                    <span>.cook</span>
+                </a>
+                {% endif %}
+            </div>
+        </div>
+```
+
+The `hidden lg:inline` label spans are gone — that is what makes the first new test pass. The `id="scale"` input is preserved because `addToShoppingList()` and `recipe-scaling.spec.ts` both read it.
+
+- [ ] **Step 5: Collapse metadata into one line**
+
+Replace the `<div id="metadata-container" class="flex flex-wrap gap-3">` block and the separate tags row with a single `.metaline`. Keep the tags as `.tag` elements and custom metadata as `.metadata-pill` (both are selected by tests):
+
+```html
+            <div id="metadata-container" class="metaline mb-3.5">
+                {% match metadata.servings %}
+                {% when Some with (servings) %}
+                <span><b>{{ servings }}</b> {{ tr.t("recipe-servings-label") }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.time %}
+                {% when Some with (time) %}
+                <span><b>{{ time }}</b></span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.difficulty %}
+                {% when Some with (difficulty) %}
+                <span>{{ difficulty }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.course %}
+                {% when Some with (course) %}
+                <span>{{ course }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.prep_time %}
+                {% when Some with (prep_time) %}
+                <span>{{ tr.t("meta-prep-time") }} <b>{{ prep_time }}</b></span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.cook_time %}
+                {% when Some with (cook_time) %}
+                <span>{{ tr.t("meta-cook-time") }} <b>{{ cook_time }}</b></span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.cuisine %}
+                {% when Some with (cuisine) %}
+                <span>{{ cuisine }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.diet %}
+                {% when Some with (diet) %}
+                <span>{{ diet }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.author %}
+                {% when Some with (author) %}
+                <span>{{ author }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.source %}
+                {% when Some with (source) %}
+                <span>{{ source }}</span>
+                {% when None %}
+                {% endmatch %}
+
+                {% match metadata.source_url %}
+                {% when Some with (source_url) %}
+                <span><a href="{{ source_url }}">{{ source_url|hostname }}</a></span>
+                {% when None %}
+                {% endmatch %}
+
+                {% for (key, value) in metadata.custom %}
+                <span><span class="metadata-pill">{{ key }}: {{ value }}</span></span>
+                {% endfor %}
+
+                {% if !tags.is_empty() %}
+                <span class="flex gap-1.5">
+                    {% for tag in tags %}<span class="tag">#{{ tag }}</span>{% endfor %}
+                </span>
+                {% endif %}
+            </div>
+```
+
+The emoji prefixes (👥 ⏱️ 📊 🍽️ 🔥 🌍 🥗 👤 📖 🔗) are dropped. The label text and dot separators carry the meaning, and removing them is what lets the row fit on one line at 820px.
+
+Delete the standalone tags row that previously sat above the description, and restyle the description block from its orange gradient to:
+
+```html
+            <div class="recipe-note rounded-[10px] mb-3.5">
+                <p class="m-0">{{ description }}</p>
+            </div>
+```
+
+- [ ] **Step 6: Convert the ingredient rail**
+
+Replace `<div class="grid md:grid-cols-3 gap-8 mb-8">` with `<div class="recipe-layout mb-6">`, and `<div class="md:col-span-1">` with `<div class="recipe-rail">`.
+
+Replace the ingredients panel wrapper `<div class="bg-white rounded-2xl shadow-lg p-6">` with a `.card` that has a `.card-head`:
+
+```html
+            <div class="card">
+                <div class="card-head">
+                    <h2>{{ tr.t("recipe-ingredients") }}</h2>
+                    <span class="count">{{ ingredients.len() }}</span>
+                </div>
+```
+
+Both the sectioned and the flat ingredient loops use `<ul class="ingredient-list">`, and each `<li>` becomes:
+
+```html
+                    <li class="row">
+                        <span class="row-name">
+                            {% match ingredient.reference_path %}
+                            {% when Some with (path) %}
+                                {% if !static_mode %}
+                                <input type="checkbox" checked
+                                       class="ref-checkbox align-middle mr-1.5 accent-[var(--accent)]"
+                                       data-ref-path="{{ path }}"
+                                       title="{{ tr.t("shopping-include-in-list") }}">
+                                {% endif %}
+                                <a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="text-info hover:underline">{{ ingredient.name }}</a>
+                            {% when None %}
+                                {{ ingredient.name }}
+                            {% endmatch %}
+                            {% match ingredient.note %}
+                            {% when Some with (note) %}<span class="row-note" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}
+                            {% endmatch %}
+                        </span>
+                        <span class="row-value">{% match ingredient.quantity %}{% when Some with (quantity) %}{{ quantity }}{% when None %}{% endmatch %}{% match ingredient.unit %}{% when Some with (unit) %} {{ unit }}{% when None %}{% endmatch %}</span>
+                    </li>
+```
+
+Apply the same replacement to **both** the sectioned loop and the flat fallback loop. The chain-link SVG next to referenced ingredients is dropped — the `--info` colour already marks it as a link, and the icon was a wrap trigger at rail width.
+
+Move cookware into its own sibling `.card` (not a heading inside the ingredients card), so the two panels stack:
+
+```html
+            {% if cookware.len() > 0 %}
+            <div class="card mt-3">
+                <div class="card-head">
+                    <h2>{{ tr.t("recipe-cookware") }}</h2>
+                    <span class="count">{{ cookware.len() }}</span>
+                </div>
+                <ul class="ingredient-list">
+                    {% for item in cookware %}
+                    <li class="row"><span class="row-name">{{ item.name }}</span></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+```
+
+- [ ] **Step 7: Convert the method column**
+
+Replace `<div class="md:col-span-2">` + `<div class="bg-white rounded-2xl shadow-lg p-6">` with a single `.card` carrying a head:
+
+```html
+        <div class="card">
+            <div class="card-head">
+                <h2>{{ tr.t("recipe-method") }}</h2>
+            </div>
+```
+
+If the translation key `recipe-method` does not exist, use the literal `Method` and note it for a follow-up i18n pass — do not invent a key that has no entry in the locale files.
+
+Change each `<ol class="space-y-4 …">` to `<ol class="step-list">`. Each step `<li>` becomes:
+
+```html
+                                <li>
+                                    <div class="step-number">{{ step.number }}</div>
+                                    <div class="flex-1 min-w-0">
+                                        {% match step.image_path %}
+                                        {% when Some with (img) %}
+                                        <img class="image-step mb-2" src="{{ img }}" />
+                                        {% when None %}
+                                        {% endmatch %}
+                                        <div class="step-body">
+                                        {% for step_item in step.items %}{% match step_item %}{% when crate::web::templates::StepItem::Text with (text) %}{{ text }}{% when crate::web::templates::StepItem::Ingredient with { name, reference_path } %}{% match reference_path %}{% when Some with (path) %}<a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="ingredient-badge hover:underline" title="View recipe: {{ name }}">{{ name }}</a>{% when None %}<span class="ingredient-badge">{{ name }}</span>{% endmatch %}{% when crate::web::templates::StepItem::Cookware with (name) %}<span class="cookware-badge">{{ name }}</span>{% when crate::web::templates::StepItem::Timer with (name) %}<span class="timer-badge">{{ name }}</span>{% when crate::web::templates::StepItem::Quantity with (qty) %}<span class="font-bold text-accent-text">{{ qty }}</span>{% when crate::web::templates::StepItem::LineBreak %}<br>{% endmatch %}{% endfor %}
+                                        </div>
+                                        {% if step.ingredients.len() > 0 %}
+                                        <div class="step-refs">
+                                            {% for ing in step.ingredients %}
+                                            <span><b>{{ ing.name }}</b>{% match ing.quantity %}{% when Some with (q) %} {{ q }}{% when None %}{% endmatch %}{% match ing.unit %}{% when Some with (u) %} {{ u }}{% when None %}{% endmatch %}{% match ing.note %}{% when Some with (note) %} <span class="italic" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}{% endmatch %}</span>
+                                            {% endfor %}
+                                        </div>
+                                        {% endif %}
+                                    </div>
+                                </li>
+```
+
+The nested `bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4` wrapper and the inner `flex flex-col gap-4` / `flex gap-4` divs are gone — `.step-list > li` is itself the flex row, and separation comes from a hairline instead of a card inside a card. The `⏱️` prefix is dropped from timers; `.timer-badge`'s tinted background already marks it.
+
+Note blocks become:
+
+```html
+                                <li class="recipe-note">
+                                    <p class="m-0" style="white-space: pre-line">{{ note }}</p>
+                                </li>
+```
+
+Section headings become:
+
+```html
+                        <h3 class="section-label px-3.5">{{ name }}</h3>
+```
+
+- [ ] **Step 8: Restyle the JS-injected error banner**
+
+In the `showRecipeError()` function near the bottom of `templates/recipe.html`, change the banner class from `mb-4 bg-red-50 border border-red-200 rounded-xl p-4` to `mb-4 card p-3.5 border-l-[3px]` and set `border-left-color: var(--accent)` via an inline style. Also update the "added" success state in `addToShoppingList()`: it currently swaps `from-purple-500`/`to-pink-500` gradient classes that no longer exist. Replace that class juggling with a single toggle:
+
+```javascript
+            button.classList.add('btn-primary');
+            setTimeout(() => {
+                button.innerHTML = originalContent;
+                button.classList.remove('btn-primary');
+            }, 2000);
+```
+
+- [ ] **Step 9: Rebuild and run the tablet tests**
+
+Run: `npm run build-css && cargo build` then `npx playwright test tests/e2e/tablet.spec.ts --project=chromium`
+Expected: all four tablet tests PASS.
+
+- [ ] **Step 10: Visual check**
+
+Start the server and open `http://localhost:9080/recipe/Neapolitan Pizza` at 820px, 1024px and 1440px, in light and dark.
+Expected at 820px: breadcrumb, title, four labelled buttons, one metadata line, then the ingredient rail and five-ish steps — matching the mockup's recipe view. `mozzarella cheese  100 g` on one line.
+
+- [ ] **Step 11: Run the suite**
+
+Run: `npm test`
+Expected: `recipe-display.spec.ts`, `recipe-scaling.spec.ts`, `cooking-mode.spec.ts` and `shopping-list.spec.ts` all pass. If `recipe-display.spec.ts` asserts on the emoji-prefixed metadata text you removed, update those assertions to match the new plain text.
+
+- [ ] **Step 12: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): compact recipe page layout"
+```
+
+---
+
+## Task 7: Recipes index
+
+**Files:**
+- Modify: `templates/recipes.html`
+- Modify: `tests/e2e/tablet.spec.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Append inside the `test.describe('Tablet layout', …)` block in `tests/e2e/tablet.spec.ts`:
+
+```typescript
+  test('recipe cards are dense', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Hero cards were ~190px tall for one word and a count.
+    const card = page.locator('.recipe-card').first();
+    const box = await card.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThan(80);
+  });
+```
+
+- [ ] **Step 2: Run and confirm failure**
+
+Run: `npx playwright test tests/e2e/tablet.spec.ts --project=chromium -g "dense"`
+Expected: FAIL, received height around `190`.
+
+- [ ] **Step 3: Convert the grid and cards**
+
+In `templates/recipes.html` line 68, replace:
+
+```html
+    <div id="recipes-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+```
+
+with:
+
+```html
+    <div id="recipes-grid" class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(230px,1fr))]">
+```
+
+Replace the directory card (currently a `bg-white rounded-2xl shadow-lg … flex flex-col` anchor wrapping a 64px gradient circle) with:
+
+```html
+        <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" class="recipe-card">
+            <span class="recipe-card-icon">📁</span>
+            <span class="min-w-0">
+                <h3 class="recipe-card-title">{{ item.name }}</h3>
+                {% match item.count %}
+                {% when Some with (count) %}
+                <span class="recipe-card-sub">{{ tr.tn("recipes-count", count) }}</span>
+                {% when None %}
+                {% endmatch %}
+            </span>
+        </a>
+```
+
+and the recipe/menu card with:
+
+```html
+        <a href="{{ prefix }}/{% if static_mode %}{% if item.is_menu %}menu{% else %}recipe{% endif %}{% else %}recipe{% endif %}/{{ item.path }}{% if static_mode %}.html{% endif %}"
+           data-type="recipe"
+           {% if let Some(ts) = item.modified_at %}data-modified="{{ ts }}"{% endif %}
+           {% if let Some(ts) = item.created_at %}data-created="{{ ts }}"{% endif %}
+           class="recipe-card">
+            {% match item.image_path %}
+            {% when Some with (img) %}
+            <img src="{{ img }}" alt="" class="recipe-card-icon object-cover" width="30" height="30">
+            {% when None %}
+            <span class="recipe-card-icon">{% if item.is_menu %}📋{% else %}🍽{% endif %}</span>
+            {% endmatch %}
+            <span class="min-w-0">
+                <h3 class="recipe-card-title">{{ item.name }}</h3>
+                <span class="recipe-card-sub">
+                    {%- if item.is_menu %}{{ tr.t("recipe-type-menu") }}{% if !item.tags.is_empty() %} · {% endif %}{% endif -%}
+                    {%- for tag in item.tags.iter().take(3) %}{{ tag }}{% if !loop.last %} · {% endif %}{% endfor -%}
+                </span>
+            </span>
+        </a>
+```
+
+Four things here are load-bearing and must not be changed:
+
+- **`<h3>` for the title.** The sorter reads `el.querySelector('h3')?.textContent`.
+- **`data-type="directory"` / `data-type="recipe"`.** The sorter partitions on these and hides the sort controls when fewer than two recipe cards exist.
+- **`data-modified` / `data-created`.** The sorter reads these, and removes the "Created" option when any card lacks `data-created`.
+- **`a.recipe-card[href^="/recipe/"]` stays valid.** `navigation.spec.ts:24` selects exactly that.
+
+The 192px image header (`h-48`) collapses to the 30px icon slot. Tags move into the subtitle as a dot-joined list, and the separate `.tag` elements and the `+N` overflow counter are dropped, so every card is one line tall.
+
+**Do not add `.section-label` grouping to this page.** The sorter calls `grid.appendChild()` on every child to reorder them, which would strip any interleaved heading elements out of position. Directories already sort ahead of recipes in `applySort()`. Grouping headings are used on the pantry page instead, where there is no client-side sorter.
+
+- [ ] **Step 4: Compact the page head and toolbar**
+
+Replace the gradient `All Recipes` heading with `class="text-[24px] leading-tight font-[650] tracking-tight text-text"`, and give the New Recipe link `class="btn btn-primary"`. Change the sort `<select>` and direction button to use `.btn` sizing so the toolbar row matches the app bar's control height.
+
+- [ ] **Step 5: Rebuild and test**
+
+Run: `npm run build-css && cargo build` then `npx playwright test tests/e2e/tablet.spec.ts --project=chromium`
+Expected: all five tablet tests PASS.
+
+- [ ] **Step 6: Verify sorting still works**
+
+Open `http://localhost:9080/`, change **Sort by** to each option and click the direction arrow.
+Expected: cards reorder, directories stay ahead of recipes, the arrow flips between ↑ and ↓. If nothing reorders, the title is no longer an `<h3>`.
+
+- [ ] **Step 7: Visual check and suite**
+
+Open `http://localhost:9080/` at 820px in both themes — expect grouped, single-line rows, roughly three columns.
+Run: `npm test`
+Expected: `navigation.spec.ts` passes.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): dense recipes index"
+```
+
+---
+
+## Task 8: Shopping list
+
+**Important:** unlike every other page in this plan, the shopping list body is rendered **client-side from JavaScript template literals** inside `templates/shopping_list.html` (around lines 465–520), not by Askama. You are editing JS strings, not Askama markup. The Askama part is only the page shell.
+
+**Files:**
+- Modify: `templates/shopping_list.html`
+
+- [ ] **Step 1: Convert the Askama shell panels**
+
+Replace the three `bg-gradient-to-r` wrappers (the Selected Recipes panel and the two list-section panels) with `.card` + `.card-head`. The heading inside each `.card-head` uses a plain `<h2>` that the component styles automatically — remove `text-xl font-bold text-orange-600`-style utilities.
+
+- [ ] **Step 2: Convert the JS-rendered aisle groups**
+
+Replace the category block template literal (currently `<div class="mb-6 bg-white rounded-lg p-4 shadow-xs">` with an `<h3 class="font-semibold text-lg mb-3 text-orange-600">`) with:
+
+```javascript
+        html += data.categories.map(category => `
+            <div class="card mb-2.5">
+                <div class="card-head"><h3>${escHtml(category.category)}</h3></div>
+                <ul>
+                    ${category.items.map((item, idx) => {
+                        const itemId = `item-${item.name.replace(/\s+/g, '-')}`;
+                        return `
+                        <li class="row">
+                            <input type="checkbox"
+                                id="${escHtml(itemId)}"
+                                class="w-4 h-4 accent-[var(--accent)]"
+                                data-action="toggle-item"
+                                data-item-id="${escHtml(itemId)}"
+                                data-ingredient-name="${escHtml(item.name)}">
+                            <label for="${escHtml(itemId)}" class="row-name cursor-pointer">
+                                <span class="item-name">${escHtml(item.name)}</span>
+                            </label>
+                            <span class="row-value">${escHtml(formatQuantities(item.quantities))}</span>
+                        </li>
+                    `}).join('')}
+                </ul>
+            </div>
+        `).join('');
+```
+
+Four things must survive verbatim, because other code reads them:
+
+- **`<li>` stays the direct parent of both the checkbox and `.item-name`.** Line ~765 does `nameElement.closest('li').querySelector('input[type="checkbox"]')`. The old markup nested them in an extra `<div class="flex items-center flex-1">`; removing that div is safe, but the checkbox must stay inside the same `<li>`.
+- **`id` / `for` pairing on checkbox and label** — clicking the label is how items get ticked.
+- **`data-action="toggle-item"`, `data-item-id`, `data-ingredient-name"`** — the delegated `onchange` handler dispatches on these.
+- **`.item-name`** — read by the copy-to-clipboard builder and by the tests.
+
+- [ ] **Step 3: Convert the JS-rendered pantry sidebar**
+
+Replace the pantry item literal (`<li class="flex items-center justify-between py-1">` with its green check SVG and `text-green-800` / `text-green-700` spans) with:
+
+```javascript
+                    return `
+                    <li class="row">
+                        <span class="item-status-dot in-stock"></span>
+                        <span class="row-name">${escHtml(itemName)}</span>
+                        <span class="row-value">${itemQuantities ? escHtml(formatQuantities(itemQuantities)) : ''}</span>
+                    </li>
+                    `;
+```
+
+The green tick SVG is replaced by the shared `.item-status-dot` from Task 9, so pantry state reads identically on both pages.
+
+- [ ] **Step 4: Buttons and copy-options**
+
+Convert every action button to `.btn`, with at most one `.btn-primary` on the page. Keep `id="copy-option-aisles"` and `id="copy-option-amounts"` and their `onchange="onCopyOptionChange()"` handlers exactly as they are — `shopping-list-copy.spec.ts` drives them directly.
+
+- [ ] **Step 5: Rebuild and test**
+
+Run: `npm run build-css && cargo build` then `npm test`
+Expected: all three shopping-list specs pass.
+
+- [ ] **Step 6: Visual check**
+
+Add a recipe to the list, open `/shopping-list` at 820px in both themes.
+Expected: grouped card sections, single-line rows, right-aligned quantities.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): compact shopping list"
+```
+
+---
+
+## Task 9: Pantry
+
+**Files:**
+- Modify: `templates/pantry.html`
+- Modify: `static/css/input.css` (replace the `.pantry-item` rules)
+
+- [ ] **Step 1: Replace the pantry styles**
+
+In `static/css/input.css`, delete the `.pantry-item`, `.pantry-item:hover`, `.pantry-item.out-of-stock`, `.pantry-item.out-of-stock:hover`, `.pantry-item .text-gray-900`, `.pantry-item .text-gray-600`, `.pantry-item .text-gray-500` and `.pantry-item.out-of-stock .quantity-display` rules. (The two `.item-status-dot.*` rules were already removed in Task 3.) Replace with:
+
+```css
+    .pantry-item {
+        display: flex;
+        align-items: baseline;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
+    }
+
+    .pantry-item + .pantry-item { border-top: 1px solid var(--border); }
+
+    .pantry-item:hover { background: var(--surface-sunk); }
+
+    .pantry-item .quantity-display {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .pantry-item .pantry-dates {
+        font-size: 12.5px;
+        color: var(--text-faint);
+    }
+
+    .pantry-item.out-of-stock .quantity-display { color: var(--text-faint); }
+```
+
+`.item-status-dot` is **not** redefined here — Task 3 already defines it, because the shopping list's pantry sidebar (Task 8) consumes it first.
+
+The seven `.pantry-item .text-gray-*` rules existed only to force dark-mode text colours onto Tailwind utilities. Tokens make them unnecessary — but that means you must also remove those `text-gray-*` utilities from the pantry markup in the next step, or the text will stay grey in dark mode.
+
+- [ ] **Step 2: Collapse the item markup**
+
+Each pantry item currently renders a four-line `Qty: / Bought: / Expires: / Low at:` stack, where every field prints `-` when empty. Collapse the display half to one row plus a secondary date line that omits empty fields:
+
+```html
+                    <div class="pantry-item group"
+                         data-section="{{ section.name }}"
+                         data-name="{{ item.name }}"
+                         data-quantity="{% if let Some(quantity) = item.quantity %}{{ quantity }}{% endif %}"
+                         data-low="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
+                        <span class="item-status-dot in-stock"></span>
+                        <span class="row-name min-w-0">
+                            <h3 class="m-0 font-medium text-[14px]">{{ item.name }}</h3>
+                            <span class="item-display pantry-dates">
+                                {%- if let Some(bought) = item.bought %}{{ tr.t("pantry-item-bought") }} <span class="item-bought">{{ bought }}</span>{% endif -%}
+                                {%- if let Some(expire) = item.expire %} · {{ tr.t("pantry-item-expire") }} <span class="item-expire">{{ expire }}</span>{% endif -%}
+                                {%- if let Some(low) = item.low %} · {{ tr.t("pantry-item-low") }} <span class="item-low">{{ low }}</span>{% endif -%}
+                            </span>
+                        </span>
+                        <span class="quantity-display">
+                            <span class="item-quantity">{% if let Some(quantity) = item.quantity %}{{ quantity }}{% else %}-{% endif %}</span>
+                            <svg class="out-of-stock-icon w-3.5 h-3.5 ml-1 inline text-accent hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                            </svg>
+                        </span>
+                    </div>
+```
+
+Every one of these is a JavaScript hook — read `templates/pantry.html`'s inline script before editing and keep them all: `.item-display`, `.item-edit`, `.item-quantity`, `.item-bought`, `.item-expire`, `.item-low`, `.quantity-display`, `.out-of-stock-icon`, `.item-status-dot`, and the four `data-*` attributes. The `.item-edit` form block is left structurally as-is; only restyle its inputs (`border rounded-sm` → `border-line rounded-[6px] bg-surface text-text`).
+
+Drop every `text-gray-900` / `text-gray-600` / `text-gray-500` utility from this file — the deleted `.pantry-item .text-gray-*` rules were the only thing making them legible in dark mode.
+
+- [ ] **Step 2b: Group with section labels**
+
+Unlike the recipes index, the pantry has no client-side sorter reparenting its children, so `.section-label` headings are safe here. Use one per storage location.
+
+- [ ] **Step 3: Convert the section grid**
+
+Replace `<div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">` (line 59) with a `.card` per storage location containing a `.card-head` (location name + item count) and the items as `.pantry-item` rows. Wrap the locations in `<div class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">`.
+
+- [ ] **Step 4: Head and modal**
+
+Compact the `Pantry Inventory` heading to match the other pages, convert the `max-w-md` modal at line 166 to `.card`, and convert its buttons to `.btn`.
+
+- [ ] **Step 5: Rebuild and test**
+
+Run: `npm run build-css && cargo build` then `npm test`
+Expected: `pantry.spec.ts` (10 tests) passes.
+
+- [ ] **Step 6: Visual check**
+
+Open `/pantry` at 820px in both themes.
+Expected: compact single-line items with a status dot and right-aligned quantity.
+
+Note: quantities render as `250%g` / `2%l`. `%` is the quantity/unit separator in `pantry.conf` — the edit form's own placeholder reads `Quantity (e.g., 500%g)` — so this is the raw stored value being displayed unformatted, not a broken format string. Rendering it as `250 g` is a worthwhile follow-up but is explicitly out of scope here. Do not fix it in this task and do not let it block you.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): compact pantry inventory"
+```
+
+---
+
+## Task 10: Preferences
+
+This page has 11 gradients and a test that asserts on gradient class names.
+
+**Files:**
+- Modify: `templates/preferences.html`
+- Modify: `tests/e2e/preferences.spec.ts:231-233`, `:245`
+
+- [ ] **Step 1: Replace the gradient assertions with a state attribute**
+
+`preferences.spec.ts` asserts `toHaveClass(/from-orange-500/)` to detect an active toggle. That couples the test to a gradient this plan removes. Add `data-active="true"` / `data-active="false"` to each feature toggle button in `templates/preferences.html`, then update the assertions:
+
+```typescript
+    // Both enabled → toggles report active state
+    await expect(shoppingBtn).toHaveAttribute('data-active', 'true');
+    await expect(pantryBtn).toHaveAttribute('data-active', 'true');
+```
+
+and at line 245:
+
+```typescript
+    await expect(shoppingBtn).toHaveAttribute('data-active', 'false');
+```
+
+- [ ] **Step 2: Run and confirm failure**
+
+Run: `npx playwright test tests/e2e/preferences.spec.ts --project=chromium`
+Expected: the two state tests FAIL — `data-active` does not exist yet.
+
+- [ ] **Step 3: Add the attribute and convert the toggles**
+
+In `templates/preferences.html`, give each feature toggle button `data-active="{% if enabled %}true{% else %}false{% endif %}"` (matching the template's actual condition variable) and replace its gradient utility string with:
+
+```html
+class="btn {% if enabled %}btn-primary{% endif %}"
+```
+
+- [ ] **Step 4: Convert the remaining sections**
+
+Replace the other gradient panels with `.card` + `.card-head`, and all remaining buttons with `.btn`.
+
+- [ ] **Step 5: Rebuild and test**
+
+Run: `npm run build-css && cargo build` then `npx playwright test tests/e2e/preferences.spec.ts --project=chromium`
+Expected: all 13 tests PASS.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): token-based preferences page"
+```
+
+---
+
+## Task 11: Menu page
+
+**Files:**
+- Modify: `templates/menu.html`
+
+- [ ] **Step 1: Convert**
+
+Replace the six `bg-gradient-to-r` panels with `.card` + `.card-head`. Match `recipe.html`'s head structure: 24px title, `.metaline` for any metadata, `.btn` for actions. Change the `max-w-4xl mx-auto` wrapper at line 27 to plain full-width — `.viewport` already caps page width at 72rem.
+
+- [ ] **Step 2: Rebuild and check**
+
+Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`
+Open `http://localhost:9080/menu/Weekly Plan` at 820px in both themes.
+Expected: consistent with the recipe page; no gradients.
+
+- [ ] **Step 3: Run the suite**
+
+Run: `npm test`
+Expected: same as baseline.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): token-based menu page"
+```
+
+---
+
+## Task 12: Editor, new-recipe, API docs and error pages
+
+**Files:**
+- Modify: `templates/edit.html`, `templates/new.html`, `templates/api_docs.html`, `templates/error.html`
+- Modify: `static/css/input.css` (CodeMirror dark rules)
+
+- [ ] **Step 1: Convert the four templates**
+
+Replace panel wrappers with `.card`, buttons with `.btn` (one `.btn-primary` per page), and headings with the 24px title style. In `edit.html:31` the modal `bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 max-w-md mx-4` becomes `card p-5 max-w-md mx-4`.
+
+- [ ] **Step 2: Point CodeMirror at the tokens**
+
+In `static/css/input.css`, replace the eight `.dark .cm-*` rules with token-driven equivalents that work in both themes:
+
+```css
+    .cm-editor { background: var(--surface); color: var(--text); }
+
+    .cm-gutters {
+        background: var(--surface-sunk);
+        border-color: var(--border);
+        color: var(--text-faint);
+    }
+
+    .cm-activeLineGutter { background: var(--surface-sunk); }
+
+    .cm-activeLine { background: color-mix(in srgb, var(--surface-sunk) 60%, transparent); }
+
+    .cm-content { caret-color: var(--text); }
+
+    .cm-cursor { border-left-color: var(--text); }
+
+    .cm-selectionBackground { background: color-mix(in srgb, var(--info) 30%, transparent) !important; }
+```
+
+- [ ] **Step 3: Rebuild and check the editor**
+
+Run: `npm run build-css && npm run build-js && cargo build && ./target/debug/cook server ./seed --port 9080`
+Open `http://localhost:9080/edit/Neapolitan Pizza` in both themes.
+Expected: editor text legible, cursor visible, gutter readable, selection visible in both themes.
+
+- [ ] **Step 4: Run the suite**
+
+Run: `npm test`
+Expected: `api-docs.spec.ts` passes; overall same as baseline.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add -A
+git commit -m "feat(ui): token-based editor, docs and error pages"
+```
+
+---
+
+## Task 13: Delete the remaining dark-override block
+
+Only now is it safe: every page consumes tokens, so nothing depends on `.dark .bg-white` and friends.
+
+**Files:**
+- Modify: `templates/base.html` (`<style>` block)
+- Modify: `tailwind.config.js`
+
+- [ ] **Step 1: Confirm nothing still relies on the overrides**
+
+Run: `grep -rn "bg-white\|text-gray-[0-9]\|bg-gray-50\|border-gray-[0-9]\|bg-gradient-to-" templates/*.html | grep -v "print:" | grep -v "^templates/base.html:[0-9]*: *\." `
+Expected: no output, or only matches inside `base.html`'s `@media print` block. **If any page still uses these utilities, go back and finish migrating it — deleting the block now would break that page's dark mode.**
+
+- [ ] **Step 2: Delete the block**
+
+In `templates/base.html`, delete everything in the `<style>` block from the `/* Dark mode styles */` comment up to (but **not** including) `@media print {`.
+
+Keep:
+- the `.viewport` rule above it
+- the entire `@media print { … }` block below it
+- the `#search-results a.search-selected` rule you retokenised in Task 5
+
+The `.dark { color-scheme: dark; }` declaration moves to `input.css` in Task 1, so it is not lost.
+
+- [ ] **Step 2b: Remove the stale print selector**
+
+Inside the retained `@media print` block, delete:
+
+```css
+            /* Hide entire navigation bar and its contents */
+            .bg-white.shadow-lg.rounded-2xl.mb-8 {
+                display: none !important;
+            }
+```
+
+It targeted the old nav wrapper, which no longer exists. The `nav, #search-container, …` rule directly above it already hides the app bar.
+
+- [ ] **Step 3: Remove the legacy palette**
+
+In `tailwind.config.js`, delete the `colors` block (`primary-orange`, `primary-green`, `light-orange`, `light-blue`, `light-green`, `light-yellow`). Leave `darkMode`, `content` and the gradient keyframes.
+
+Run: `grep -rn "primary-orange\|primary-green\|light-orange\|light-blue\|light-green\|light-yellow" templates/ static/css/input.css`
+Expected: no output. If anything matches, convert it to a token first.
+
+- [ ] **Step 4: Rebuild and check every page in dark mode**
+
+Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`
+Visit each of `/`, `/recipe/Neapolitan Pizza`, `/shopping-list`, `/pantry`, `/preferences`, `/menu/Weekly Plan`, `/edit/Neapolitan Pizza`, `/api-docs` in dark mode.
+Expected: every page fully legible. Any white-on-white or black-on-black means a page still depended on an override — fix that page rather than restoring the block.
+
+- [ ] **Step 5: Check printing**
+
+Open `/recipe/Neapolitan Pizza` in dark mode and use the browser's print preview.
+Expected: dark background forced to white, text dark, nav hidden, badges readable. The `@media print` block must be untouched.
+
+- [ ] **Step 6: Run the suite**
+
+Run: `npm test`
+Expected: same as baseline.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add -A
+git commit -m "refactor(ui): remove dark-mode utility override block"
+```
+
+---
+
+## Task 14: Final verification
+
+**Files:** none modified unless a check fails.
+
+- [ ] **Step 1: Accessibility contrast**
+
+Run: `npx playwright test tests/e2e/accessibility.spec.ts --project=chromium`
+Expected: 12 tests PASS, including `should have sufficient color contrast` (axe `color-contrast` is enabled at line 134).
+
+If contrast fails, darken `--accent-text` in light mode and lighten `--text-muted` in dark mode until it passes. These four pairs must reach AA in both themes: `--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, and `#fff` on `--accent`.
+
+- [ ] **Step 2: Full E2E suite**
+
+Run: `npm test`
+Expected: all 129 tests PASS (minus any failure recorded in the Task 2 baseline).
+
+- [ ] **Step 3: Rust checks**
+
+```bash
+cargo fmt
+cargo clippy
+cargo test
+```
+
+Expected: all three clean, no warnings. Required by `CLAUDE.md` before any PR.
+
+- [ ] **Step 4: Manual matrix**
+
+With the server running, check every page at **820px**, **1024px** and **1440px**, in **light** and **dark**:
+
+`/` · `/recipe/Neapolitan Pizza` · `/shopping-list` · `/pantry` · `/preferences` · `/menu/Weekly Plan` · `/edit/Neapolitan Pizza` · `/api-docs`
+
+Expected: no horizontal scrollbars, no wrapped ingredient rows, no unlabelled icon-only buttons, one accent colour throughout, consistent card and control heights across pages.
+
+- [ ] **Step 5: Confirm the gradients are gone**
+
+Run: `grep -rc "bg-gradient-to-" templates/*.html`
+Expected: `0` for every template except `base.html`, whose remaining matches must all be inside `@media print`.
+
+- [ ] **Step 6: Commit any fixes and open the PR**
+
+```bash
+git add -A
+git commit -m "fix(ui): final contrast and layout adjustments"
+git push -u origin design/web-ui-refresh
+gh pr create --title "feat(ui): design refresh with semantic tokens" --body "Implements docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md"
+```
+
+---
+
+## Deliberately out of scope
+
+Do not do these as part of this plan:
+
+- **Pantry raw quantity display (`250%g`).** `%` is `pantry.conf`'s quantity/unit separator, so this is the stored value shown unformatted rather than a defect. Rendering it as `250 g` is a separate change.
+- **Cook mode layout.** Its dead vertical space, missing next/previous affordances and duplicated mise-en-place entries are a known follow-up. This plan only updates the entity classes it shares with the recipe page (Task 4).
+- **i18n keys.** If `recipe-method`, `recipes-group-folders`, `recipes-group-menus` or `recipes-group-recipes` do not exist, use English literals and note them. Adding locale entries is a separate change.
+- **Any backend, routing, template-data or API change.** This is presentation-layer only.
diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
index ea562ed..f440cd7 100644
--- a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -36,6 +36,12 @@ Templates use only the `md` (768px) and `lg` (1024px) breakpoints. Tablet portra
 
 Accent colour is not controlled: orange, yellow, green, blue, cyan, purple, and pink gradients all appear as primary-weight UI.
 
+### Three competing sources of styling truth
+
+`static/css/custom-styles.css` defines `.recipe-card`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.btn-primary`, `.search-input`, `.recipe-image-placeholder`, `.step-number`, `.tag`, `.nav-pill` and `.metadata-pill` — every one of which `input.css` *also* defines, with different values. It is linked after `output.css` in `base.html`, so it silently wins. `static/css/styles.css` (444 lines) is referenced by nothing at all.
+
+Both files are deleted; `input.css` becomes the single source of truth.
+
 ### Dark mode is unmaintainable
 
 `templates/base.html` contains roughly 450 lines of blanket overrides of the form:
@@ -200,5 +206,5 @@ The token and component layers land **first** and are purely additive — no exi
 ## Out of scope
 
 - **Cook mode** (`static/css/cooking-mode.css`, `static/js/cooking-mode.js`) keeps its current appearance, apart from the inline entity classes it shares with the main stylesheet. Its own compaction — dead vertical space, missing next/previous affordances, duplicate ingredient entries in the mise-en-place grid — is a natural follow-up, tracked separately.
-- **Pantry quantity formatting bug.** Quantities render as `250%g`, `2%l`, `200%g` — a format-string defect, unrelated to design. To be fixed in its own change.
+- **Pantry raw quantity display.** Quantities render as `250%g`, `2%l`, `200%g`. `%` is the quantity/unit separator used by `pantry.conf` — the pantry edit form's own placeholder reads `Quantity (e.g., 500%g)` — so this is the stored value being displayed unformatted rather than a defect. Rendering it as `250 g` is worthwhile but belongs in its own change.
 - No backend, routing, template-data, or API changes. This is a presentation-layer refresh only.

From e4ece80467813d4722ecec4d8f9018e47f9f2680 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:49:42 +0100
Subject: [PATCH 03/42] feat(ui): add semantic design tokens

---
 static/css/input.css | 70 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/static/css/input.css b/static/css/input.css
index cace11d..68b63f4 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -5,6 +5,76 @@
    darkMode: 'class' and the content globs) authoritative. */
 @config "../../tailwind.config.js";
 
+/* ============================================================
+   DESIGN TOKENS
+   Fourteen semantic names, defined once per theme. Every colour
+   in the UI resolves through one of these. Do not introduce raw
+   hex values or Tailwind palette utilities in templates.
+   ============================================================ */
+:root {
+    --bg:            #faf9f7;
+    --surface:       #ffffff;
+    --surface-sunk:  #f4f2ef;
+    --border:        #e6e2dc;
+    --border-strong: #d5cfc6;
+    --text:          #1b1917;
+    --text-muted:    #6f6862;
+    --text-faint:    #9a938c;
+    --accent:        #d9541c;
+    --accent-text:   #b0400f;
+    --accent-soft:   #fdefe6;
+    --ok:            #2f7d55;
+    --ok-soft:       #e7f4ec;
+    --info:          #2b6cb0;
+
+    --radius-control: 6px;
+    --radius-card:   10px;
+    --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
+}
+
+.dark {
+    color-scheme: dark;
+    --bg:            #131519;
+    --surface:       #1a1d22;
+    --surface-sunk:  #212530;
+    --border:        #2b3038;
+    --border-strong: #3a414b;
+    --text:          #eceef1;
+    --text-muted:    #9aa2ac;
+    --text-faint:    #6f7883;
+    --accent:        #ff7a45;
+    --accent-text:   #ff9166;
+    --accent-soft:   #2c1e17;
+    --ok:            #5fbe8b;
+    --ok-soft:       #17271f;
+    --info:          #7ab3ea;
+
+    --shadow-card:   none;
+}
+
+/* Register tokens with Tailwind so they generate real utilities
+   (bg-surface, text-muted, border-line, …). `inline` makes the
+   generated utilities reference the custom property, so they flip
+   automatically under .dark with no override rules.
+   Border tokens are named `line` so the utility reads `border-line`
+   rather than `border-border`. */
+@theme inline {
+    --color-bg:          var(--bg);
+    --color-surface:     var(--surface);
+    --color-sunk:        var(--surface-sunk);
+    --color-line:        var(--border);
+    --color-line-strong: var(--border-strong);
+    --color-text:        var(--text);
+    --color-muted:       var(--text-muted);
+    --color-faint:       var(--text-faint);
+    --color-accent:      var(--accent);
+    --color-accent-text: var(--accent-text);
+    --color-accent-soft: var(--accent-soft);
+    --color-ok:          var(--ok);
+    --color-ok-soft:     var(--ok-soft);
+    --color-info:        var(--info);
+}
+
 /* Custom component classes */
 @layer components {
     /* Recipe cards with colorful borders */

From ffd6c51ce6b97ee21447639febc0f76c8e0317cf Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:50:59 +0100
Subject: [PATCH 04/42] docs: correct plan - output.css is gitignored, never
 commit it

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index b0be68c..872c2a4 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -59,7 +59,7 @@ These classes are **restyled, not renamed**. Keeping the names is deliberate: it
 | File | Responsibility after this plan |
 | --- | --- |
 | `static/css/input.css` | **Single source of styling truth.** Token definitions, `@theme` registration, component layer. |
-| `static/css/output.css` | Build artifact. Never edit by hand. |
+| `static/css/output.css` | Build artifact. Never edit by hand, and **never commit it** — it is gitignored (`.gitignore:5`) and has never been tracked. `git add static/css/output.css` errors; `git add -A` correctly skips it. |
 | `static/css/custom-styles.css` | **Deleted.** Currently duplicates `input.css`'s component layer with different values, and loads *after* `output.css` so it silently wins. |
 | `static/css/styles.css` | **Deleted.** 444 lines, referenced by nothing. |
 | `static/css/cooking-mode.css` | Keeps its own layout, but consumes tokens for colour and inherits the shared badge classes. |
@@ -172,7 +172,7 @@ Expected: the page looks exactly as it did before. Tokens are defined but nothin
 - [ ] **Step 5: Commit**
 
 ```bash
-git add static/css/input.css static/css/output.css
+git add static/css/input.css
 git commit -m "feat(ui): add semantic design tokens"
 ```
 
@@ -459,7 +459,7 @@ Expected: same result as the Task 2 baseline. No template uses the new classes y
 - [ ] **Step 5: Commit**
 
 ```bash
-git add static/css/input.css static/css/output.css
+git add static/css/input.css
 git commit -m "feat(ui): add token-based component layer"
 ```
 
@@ -660,7 +660,7 @@ Expected: same as baseline. `recipe-display.spec.ts` and `navigation.spec.ts` as
 - [ ] **Step 6: Commit**
 
 ```bash
-git add static/css/input.css static/css/output.css templates/base.html
+git add static/css/input.css templates/base.html
 git commit -m "refactor(ui): restyle badges and pills onto design tokens"
 ```
 

From 46a817df0acb35f98eebd1adbeb4c1c80b4f1de4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:59:11 +0100
Subject: [PATCH 05/42] fix(ui): make accent and faint text tokens meet WCAG AA

---
 .../plans/2026-08-15-web-ui-refresh.md        | 19 +++++++++++++------
 .../specs/2026-08-15-web-ui-refresh-design.md | 13 ++++++++-----
 static/css/input.css                          | 15 +++++++++++----
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 872c2a4..5d18e9a 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -84,9 +84,13 @@ Insert immediately after the `@config "../../tailwind.config.js";` line in `stat
 ```css
 /* ============================================================
    DESIGN TOKENS
-   Fourteen semantic names, defined once per theme. Every colour
+   Fifteen semantic names, defined once per theme. Every colour
    in the UI resolves through one of these. Do not introduce raw
    hex values or Tailwind palette utilities in templates.
+   --accent-ink is the foreground colour for text and icons sitting ON a
+   filled --accent background. It is white in light mode and near-black in
+   dark mode, because the dark accent is deliberately vivid and cannot
+   carry white text at AA contrast.
    ============================================================ */
 :root {
     --bg:            #faf9f7;
@@ -96,10 +100,11 @@ Insert immediately after the `@config "../../tailwind.config.js";` line in `stat
     --border-strong: #d5cfc6;
     --text:          #1b1917;
     --text-muted:    #6f6862;
-    --text-faint:    #9a938c;
-    --accent:        #d9541c;
+    --text-faint:    #736c66;
+    --accent:        #c2410c;
     --accent-text:   #b0400f;
     --accent-soft:   #fdefe6;
+    --accent-ink:    #ffffff;
     --ok:            #2f7d55;
     --ok-soft:       #e7f4ec;
     --info:          #2b6cb0;
@@ -118,10 +123,11 @@ Insert immediately after the `@config "../../tailwind.config.js";` line in `stat
     --border-strong: #3a414b;
     --text:          #eceef1;
     --text-muted:    #9aa2ac;
-    --text-faint:    #6f7883;
+    --text-faint:    #858e99;
     --accent:        #ff7a45;
     --accent-text:   #ff9166;
     --accent-soft:   #2c1e17;
+    --accent-ink:    #131519;
     --ok:            #5fbe8b;
     --ok-soft:       #17271f;
     --info:          #7ab3ea;
@@ -147,6 +153,7 @@ Insert immediately after the `@config "../../tailwind.config.js";` line in `stat
     --color-accent:      var(--accent);
     --color-accent-text: var(--accent-text);
     --color-accent-soft: var(--accent-soft);
+    --color-accent-ink:  var(--accent-ink);
     --color-ok:          var(--ok);
     --color-ok-soft:     var(--ok-soft);
     --color-info:        var(--info);
@@ -307,7 +314,7 @@ Add at the top of the existing `@layer components { … }` block in `static/css/
     .btn-primary {
         background: var(--accent);
         border-color: var(--accent);
-        color: #fff;
+        color: var(--accent-ink);
     }
 
     .btn-primary:hover {
@@ -1857,7 +1864,7 @@ git commit -m "refactor(ui): remove dark-mode utility override block"
 Run: `npx playwright test tests/e2e/accessibility.spec.ts --project=chromium`
 Expected: 12 tests PASS, including `should have sufficient color contrast` (axe `color-contrast` is enabled at line 134).
 
-If contrast fails, darken `--accent-text` in light mode and lighten `--text-muted` in dark mode until it passes. These four pairs must reach AA in both themes: `--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, and `#fff` on `--accent`.
+If contrast fails, darken `--accent-text` in light mode and lighten `--text-muted` in dark mode until it passes. These four pairs must reach AA in both themes: `--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, and `--accent-ink` on `--accent`.
 
 - [ ] **Step 2: Full E2E suite**
 
diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
index f440cd7..da40039 100644
--- a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -87,10 +87,11 @@ Added to `static/css/input.css`. Eleven semantic names, defined once per theme:
   --border-strong: #d5cfc6;
   --text:          #1b1917;
   --text-muted:    #6f6862;
-  --text-faint:    #9a938c;
-  --accent:        #d9541c;
+  --text-faint:    #736c66;
+  --accent:        #c2410c;
   --accent-text:   #b0400f;
   --accent-soft:   #fdefe6;
+  --accent-ink:    #ffffff;
 }
 
 .dark {
@@ -101,10 +102,11 @@ Added to `static/css/input.css`. Eleven semantic names, defined once per theme:
   --border-strong: #3a414b;
   --text:          #eceef1;
   --text-muted:    #9aa2ac;
-  --text-faint:    #6f7883;
+  --text-faint:    #858e99;
   --accent:        #ff7a45;
   --accent-text:   #ff9166;
   --accent-soft:   #2c1e17;
+  --accent-ink:    #131519;
 }
 ```
 
@@ -123,6 +125,7 @@ Semantic tokens are registered with Tailwind v4's `@theme inline` so they genera
   --color-accent:       var(--accent);       /* bg-accent      */
   --color-accent-text:  var(--accent-text);  /* text-accent-text */
   --color-accent-soft:  var(--accent-soft);  /* bg-accent-soft */
+  --color-accent-ink:   var(--accent-ink);   /* text-accent-ink */
 }
 ```
 
@@ -130,7 +133,7 @@ Border tokens are named `line` rather than `border` so the generated utility rea
 
 The existing `@config "../../tailwind.config.js"` directive stays; the legacy `primary-orange` / `light-*` colours in `tailwind.config.js` are removed once no template references them.
 
-Three further status tokens cover pantry stock and shopping-list state: `--ok`, `--ok-soft`, `--info` (fourteen tokens in total).
+Three further status tokens cover pantry stock and shopping-list state: `--ok`, `--ok-soft`, `--info` (fifteen tokens in total).
 
 **Collapsed scales:**
 
@@ -199,7 +202,7 @@ The token and component layers land **first** and are purely additive — no exi
 ### 7. Verification
 
 - `npm test` (Playwright E2E, `tests/e2e/`) runs after each page migration. Tests use mostly semantic selectors, but any that assert on gradient or colour utility classes will need updating alongside the page they cover.
-- `tests/e2e/accessibility.spec.ts` covers WCAG 2.0 AA contrast and will catch regressions in the new palette. All token pairs (`--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, `#fff` on `--accent`) must pass AA in both themes.
+- `tests/e2e/accessibility.spec.ts` covers WCAG 2.0 AA contrast and will catch regressions in the new palette. All token pairs (`--text` on `--surface`, `--text-muted` on `--surface`, `--accent-text` on `--surface`, `--accent-ink` on `--accent`) must pass AA in both themes.
 - Each migrated page is visually checked at **820px** (tablet portrait), **1024px**, and **1440px**, in both light and dark.
 - `cargo fmt`, `cargo clippy`, and `cargo test` must pass before the PR, per `CLAUDE.md`.
 
diff --git a/static/css/input.css b/static/css/input.css
index 68b63f4..b838590 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -7,9 +7,13 @@
 
 /* ============================================================
    DESIGN TOKENS
-   Fourteen semantic names, defined once per theme. Every colour
+   Fifteen semantic names, defined once per theme. Every colour
    in the UI resolves through one of these. Do not introduce raw
    hex values or Tailwind palette utilities in templates.
+   --accent-ink is the foreground colour for text and icons sitting ON a
+   filled --accent background. It is white in light mode and near-black in
+   dark mode, because the dark accent is deliberately vivid and cannot
+   carry white text at AA contrast.
    ============================================================ */
 :root {
     --bg:            #faf9f7;
@@ -19,10 +23,11 @@
     --border-strong: #d5cfc6;
     --text:          #1b1917;
     --text-muted:    #6f6862;
-    --text-faint:    #9a938c;
-    --accent:        #d9541c;
+    --text-faint:    #736c66;
+    --accent:        #c2410c;
     --accent-text:   #b0400f;
     --accent-soft:   #fdefe6;
+    --accent-ink:    #ffffff;
     --ok:            #2f7d55;
     --ok-soft:       #e7f4ec;
     --info:          #2b6cb0;
@@ -41,10 +46,11 @@
     --border-strong: #3a414b;
     --text:          #eceef1;
     --text-muted:    #9aa2ac;
-    --text-faint:    #6f7883;
+    --text-faint:    #858e99;
     --accent:        #ff7a45;
     --accent-text:   #ff9166;
     --accent-soft:   #2c1e17;
+    --accent-ink:    #131519;
     --ok:            #5fbe8b;
     --ok-soft:       #17271f;
     --info:          #7ab3ea;
@@ -70,6 +76,7 @@
     --color-accent:      var(--accent);
     --color-accent-text: var(--accent-text);
     --color-accent-soft: var(--accent-soft);
+    --color-accent-ink:  var(--accent-ink);
     --color-ok:          var(--ok);
     --color-ok-soft:     var(--ok-soft);
     --color-info:        var(--info);

From 48c336bc2dfbcdd132d73ab331d649c80af5faf5 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 20:59:40 +0100
Subject: [PATCH 06/42] docs: fix token count in spec

---
 docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
index da40039..507ad38 100644
--- a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -76,7 +76,7 @@ This is a deliberate move away from the current playful identity (gradients, emo
 
 ### 1. Token layer
 
-Added to `static/css/input.css`. Eleven semantic names, defined once per theme:
+Added to `static/css/input.css`. Twelve semantic names, defined once per theme:
 
 ```css
 :root {

From 742606dafc55c5bbbd988fef468ba9ca30846b2d Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:06:25 +0100
Subject: [PATCH 07/42] refactor(ui): consolidate stylesheets into input.css

---
 static/css/custom-styles.css | 146 ------------
 static/css/input.css         |   4 +
 static/css/styles.css        | 445 -----------------------------------
 templates/base.html          |   1 -
 4 files changed, 4 insertions(+), 592 deletions(-)
 delete mode 100644 static/css/custom-styles.css
 delete mode 100644 static/css/styles.css

diff --git a/static/css/custom-styles.css b/static/css/custom-styles.css
deleted file mode 100644
index 99f03af..0000000
--- a/static/css/custom-styles.css
+++ /dev/null
@@ -1,146 +0,0 @@
-/* Custom styles to enhance Tailwind */
-:root {
-    --primary-orange: #ff6b35;
-    --primary-green: #4ade80;
-    --light-orange: #fed7aa;
-    --light-blue: #dbeafe;
-    --light-green: #dcfce7;
-    --light-yellow: #fef3c7;
-}
-
-/* Recipe cards with colorful borders */
-.recipe-card {
-    position: relative;
-    overflow: hidden;
-}
-
-.recipe-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #ff6b35, #fbbf24, #4ade80);
-}
-
-/* Ingredient badges */
-.ingredient-badge {
-    background: linear-gradient(135deg, #fef3c7, #fed7aa);
-    border: 1px solid #fbbf24;
-    white-space: nowrap;
-}
-
-.cookware-badge {
-    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
-    border: 1px solid #4ade80;
-    white-space: nowrap;
-}
-
-.timer-badge {
-    background: linear-gradient(135deg, #fee2e2, #fecaca);
-    border: 1px solid #f87171;
-    white-space: nowrap;
-}
-
-/* Enhanced buttons */
-.btn-primary {
-    background: linear-gradient(135deg, #ff6b35, #f97316);
-    box-shadow: 0 4px 14px 0 rgba(255, 107, 53, 0.3);
-}
-
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px 0 rgba(255, 107, 53, 0.4);
-}
-
-/* Search input with colorful focus */
-.search-input:focus {
-    border-color: #ff6b35;
-    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
-}
-
-/* Recipe image placeholder with gradient */
-.recipe-image-placeholder {
-    background: linear-gradient(135deg, #ff6b35, #fbbf24);
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 3rem;
-}
-
-/* Step numbers with colorful circles */
-.step-number {
-    width: 32px;
-    height: 32px;
-    background: linear-gradient(135deg, #ff6b35, #f97316);
-    color: white;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    flex-shrink: 0;
-}
-
-/* Tags styling */
-.tag {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin-right: 0.5rem;
-    background: linear-gradient(135deg, #fbbf24, #fb923c);
-    color: white;
-    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.2);
-}
-
-/* Navigation pills */
-.nav-pill {
-    padding: 0.5rem 1.25rem;
-    border-radius: 9999px;
-    transition: all 0.3s;
-    font-weight: 500;
-    color: #6b7280;
-    position: relative;
-}
-
-.nav-pill:hover {
-    background: linear-gradient(135deg, #fef3c7, #fed7aa);
-    color: #ea580c;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.1);
-}
-
-.nav-pill.active {
-    background: linear-gradient(135deg, #ff6b35, #f97316);
-    color: white;
-    font-weight: 700;
-    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
-}
-
-/* Recipe metadata pills */
-.metadata-pill {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.375rem 0.875rem;
-    border-radius: 9999px;
-    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
-    border: 1px solid #e5e7eb;
-    font-size: 0.875rem;
-    color: #374151;
-    font-weight: 500;
-    line-height: 1.25rem;
-    white-space: nowrap;
-}
-
-.metadata-pill svg {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.5rem;
-}
\ No newline at end of file
diff --git a/static/css/input.css b/static/css/input.css
index b838590..2994bbf 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -157,6 +157,10 @@
         @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap border bg-white;
     }
 
+    .metadata-pill svg {
+        @apply w-4 h-4 mr-2;
+    }
+
     .metadata-servings {
         @apply text-gray-600 border-gray-300;
     }
diff --git a/static/css/styles.css b/static/css/styles.css
deleted file mode 100644
index 127c71d..0000000
--- a/static/css/styles.css
+++ /dev/null
@@ -1,445 +0,0 @@
-/* Base styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background-color: #f9fafb;
-    color: #111827;
-    line-height: 1.5;
-}
-
-/* Layout */
-.viewport {
-    width: 100%;
-    max-width: 1024px;
-    margin: 3rem auto;
-    padding: 0 1rem;
-}
-
-/* Navigation */
-nav {
-    background-color: white;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-}
-
-nav > div {
-    padding: 1rem 1.5rem;
-}
-
-nav .flex {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-nav a {
-    text-decoration: none;
-    color: #4b5563;
-    transition: color 0.2s;
-}
-
-nav a:hover {
-    color: #111827;
-}
-
-nav a.font-semibold {
-    font-weight: 600;
-    color: #111827;
-}
-
-/* Main content */
-main {
-    background-color: white;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    padding: 1.5rem;
-}
-
-/* Typography */
-h1 {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 1.5rem;
-}
-
-h2 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    margin-bottom: 0.75rem;
-}
-
-h3 {
-    font-size: 1.125rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-}
-
-/* Forms */
-input[type="text"],
-input[type="number"] {
-    padding: 0.5rem;
-    border: 1px solid #d1d5db;
-    border-radius: 0.375rem;
-    outline: none;
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus {
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.search-input {
-    width: 16rem;
-    padding: 0.5rem 1rem;
-}
-
-/* Buttons */
-button,
-.btn-primary,
-.btn-secondary {
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: none;
-    display: inline-block;
-}
-
-.btn-primary {
-    background-color: #3b82f6;
-    color: white;
-}
-
-.btn-primary:hover {
-    background-color: #2563eb;
-}
-
-.btn-secondary {
-    background-color: #e5e7eb;
-    color: #374151;
-}
-
-.btn-secondary:hover {
-    background-color: #d1d5db;
-}
-
-/* Cards */
-.recipe-card {
-    background-color: white;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    padding: 1rem;
-    margin-bottom: 1rem;
-    transition: box-shadow 0.2s;
-    text-decoration: none;
-    color: inherit;
-    display: block;
-}
-
-.recipe-card:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    background-color: #f9fafb;
-}
-
-.recipe-step {
-    margin-bottom: 1rem;
-    padding: 0.75rem;
-    background-color: #f9fafb;
-    border-radius: 0.375rem;
-}
-
-/* Ingredients and tags */
-.ingredient,
-.cookware,
-.timer {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.ingredient {
-    background-color: #dbeafe;
-    color: #1e40af;
-}
-
-.cookware {
-    background-color: #d1fae5;
-    color: #065f46;
-}
-
-.timer {
-    background-color: #fef3c7;
-    color: #92400e;
-}
-
-/* Search results dropdown */
-.search-results {
-    position: absolute;
-    top: 100%;
-    margin-top: 0.5rem;
-    width: 100%;
-    background-color: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.search-results a {
-    display: block;
-    padding: 0.5rem 0.75rem;
-    text-decoration: none;
-    color: #111827;
-}
-
-.search-results a:hover {
-    background-color: #f9fafb;
-}
-
-/* Utility classes */
-.hidden {
-    display: none;
-}
-
-.flex {
-    display: flex;
-}
-
-.items-center {
-    align-items: center;
-}
-
-.justify-between {
-    justify-content: space-between;
-}
-
-.space-x-2 > * + * {
-    margin-left: 0.5rem;
-}
-
-.space-x-3 > * + * {
-    margin-left: 0.75rem;
-}
-
-.space-x-6 > * + * {
-    margin-left: 1.5rem;
-}
-
-.space-y-1 > * + * {
-    margin-top: 0.25rem;
-}
-
-.space-y-2 > * + * {
-    margin-top: 0.5rem;
-}
-
-.space-y-4 > * + * {
-    margin-top: 1rem;
-}
-
-.mb-2 {
-    margin-bottom: 0.5rem;
-}
-
-.mb-3 {
-    margin-bottom: 0.75rem;
-}
-
-.mb-4 {
-    margin-bottom: 1rem;
-}
-
-.mb-6 {
-    margin-bottom: 1.5rem;
-}
-
-.ml-2 {
-    margin-left: 0.5rem;
-}
-
-.mr-2 {
-    margin-right: 0.5rem;
-}
-
-.mr-4 {
-    margin-right: 1rem;
-}
-
-.mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-}
-
-.p-3 {
-    padding: 0.75rem;
-}
-
-.px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-}
-
-.py-1 {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-}
-
-.py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-.text-sm {
-    font-size: 0.875rem;
-}
-
-.text-lg {
-    font-size: 1.125rem;
-}
-
-.text-xl {
-    font-size: 1.25rem;
-}
-
-.text-2xl {
-    font-size: 1.5rem;
-}
-
-.text-3xl {
-    font-size: 1.875rem;
-}
-
-.font-medium {
-    font-weight: 500;
-}
-
-.font-semibold {
-    font-weight: 600;
-}
-
-.font-bold {
-    font-weight: 700;
-}
-
-.text-gray-400 {
-    color: #9ca3af;
-}
-
-.text-gray-500 {
-    color: #6b7280;
-}
-
-.text-gray-600 {
-    color: #4b5563;
-}
-
-.text-gray-700 {
-    color: #374151;
-}
-
-.text-gray-800 {
-    color: #1f2937;
-}
-
-.text-gray-900 {
-    color: #111827;
-}
-
-.text-red-600 {
-    color: #dc2626;
-}
-
-.text-red-800 {
-    color: #991b1b;
-}
-
-.bg-gray-50 {
-    background-color: #f9fafb;
-}
-
-.bg-white {
-    background-color: white;
-}
-
-.rounded {
-    border-radius: 0.25rem;
-}
-
-.rounded-lg {
-    border-radius: 0.5rem;
-}
-
-.shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-.border {
-    border-width: 1px;
-}
-
-.border-gray-200 {
-    border-color: #e5e7eb;
-}
-
-.border-gray-300 {
-    border-color: #d1d5db;
-}
-
-.hover\:text-gray-900:hover {
-    color: #111827;
-}
-
-.hover\:text-red-800:hover {
-    color: #991b1b;
-}
-
-.hover\:bg-gray-50:hover {
-    background-color: #f9fafb;
-}
-
-.hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-/* Breadcrumbs */
-ol.flex {
-    display: flex;
-    align-items: center;
-}
-
-/* Grid */
-.grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-}
-
-@media (min-width: 768px) {
-    .md\:grid-cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    
-    .md\:col-span-1 {
-        grid-column: span 1 / span 1;
-    }
-    
-    .md\:col-span-2 {
-        grid-column: span 2 / span 2;
-    }
-}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 4b28629..546ccee 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,7 +10,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="{{ prefix }}/static/apple-touch-icon.png">
     <link rel="manifest" href="{{ prefix }}/static/site.webmanifest">
     <link href="{{ prefix }}/static/css/output.css" rel="stylesheet">
-    <link href="{{ prefix }}/static/css/custom-styles.css" rel="stylesheet">
     <script>
         // Check for saved theme preference, or check for prefers-color-scheme, or default to light
         const theme = localStorage.getItem('theme')

From d56bfcb30cb0bc39a6c6b4692b17a2f52bc09a36 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:07:19 +0100
Subject: [PATCH 08/42] docs: record measured E2E baseline and test-env caveats
 in plan

---
 .../plans/2026-08-15-web-ui-refresh.md        | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 5d18e9a..06d52a8 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -41,7 +41,38 @@ npm run build-css && cargo build && ./target/debug/cook server ./seed --port 908
 
 **4. Playwright reuses a running server** (`reuseExistingServer: !process.env.CI`). If you leave a stale server on port 9080, tests will run against stale templates and give meaningless results. Kill it before running tests, or make sure you rebuilt and restarted it.
 
-**5. Do not rename these class names.** The E2E suite (129 tests) selects on them directly:
+**4a. Measured E2E baseline** (established in Task 2, commit `742606d`). Compare every later run against *this*, not against "all green":
+
+| | Count |
+| --- | --- |
+| Total | 134 |
+| Passed | 127 |
+| Failed | 2 (flaky — see below) |
+| Skipped | 5 (pre-existing `test.skip` in source) |
+
+The 2 failures are **pre-existing test-isolation flakiness, not regressions**:
+- `shopping-list-copy.spec.ts:89` "leaves out items that are already ticked off"
+- `shopping-list.spec.ts:29` "should add recipe ingredients to shopping list"
+
+Both pass when rerun with `--workers=1`. Cause: the shopping list persists to a single shared file (`/tmp/shopping_list.txt`), and Playwright's parallel workers race on it. When either fails, rerun that spec alone with `--workers=1` before concluding you broke something.
+
+The 5 skips are `accessibility.spec.ts:44`, `recipe-display.spec.ts:31`, `recipe-display.spec.ts:44`, `shopping-list.spec.ts:54`, `shopping-list.spec.ts:91`.
+
+**4b. Tests mutate a tracked seed fixture.** The pantry tests write to `seed/config/pantry.conf`, which IS tracked in git. After any test run, restore it before committing so it isn't swept into your commit:
+
+```bash
+git checkout -- seed/config/pantry.conf
+```
+
+**4c. Playwright browsers on this host.** macOS 13.7.8 has no published Playwright Chromium build. Install with:
+
+```bash
+PLAYWRIGHT_HOST_PLATFORM_OVERRIDE=mac14 npx playwright install chromium
+```
+
+This pulls the mac14 Chrome-for-Testing build, which runs correctly here. Local environment only — never commit anything for this.
+
+**5. Do not rename these class names.** The E2E suite (134 tests) selects on them directly:
 
 | Class | Used by |
 | --- | --- |
@@ -233,7 +264,7 @@ Expected: page still renders with badges, step numbers and nav pills styled. Min
 - [ ] **Step 6: Run the full E2E suite as a baseline**
 
 Run: `npm test`
-Expected: all 129 tests pass. **Record any pre-existing failures now** — you need this baseline to tell your regressions apart from failures that were already there.
+Expected: all 134 tests: 127 passed, 2 flaky, 5 skipped (see baseline above). **Record any pre-existing failures now** — you need this baseline to tell your regressions apart from failures that were already there.
 
 - [ ] **Step 7: Commit**
 
@@ -1869,7 +1900,7 @@ If contrast fails, darken `--accent-text` in light mode and lighten `--text-mute
 - [ ] **Step 2: Full E2E suite**
 
 Run: `npm test`
-Expected: all 129 tests PASS (minus any failure recorded in the Task 2 baseline).
+Expected: 127 passed, 2 flaky, 5 skipped — matching the Task 2 baseline exactly.
 
 - [ ] **Step 3: Rust checks**
 

From befea0628a2da8fcdb841993c6d287352fa03822 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:09:49 +0100
Subject: [PATCH 09/42] docs: correct shopping list storage path in plan

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 06d52a8..d16a293 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -54,7 +54,9 @@ The 2 failures are **pre-existing test-isolation flakiness, not regressions**:
 - `shopping-list-copy.spec.ts:89` "leaves out items that are already ticked off"
 - `shopping-list.spec.ts:29` "should add recipe ingredients to shopping list"
 
-Both pass when rerun with `--workers=1`. Cause: the shopping list persists to a single shared file (`/tmp/shopping_list.txt`), and Playwright's parallel workers race on it. When either fails, rerun that spec alone with `--workers=1` before concluding you broke something.
+Both pass when rerun with `--workers=1`. Cause: the shopping list persists to single shared files — `seed/.shopping-list` and `seed/.shopping-checked` — and `playwright.config.ts` sets `fullyParallel: true` with unbounded local workers, which race on them. `shopping-list-copy.spec.ts` overwrites those files directly in `beforeEach`; `shopping-list.spec.ts:29` mutates the same files through the UI. When either fails, rerun that spec alone with `--workers=1` before concluding you broke something.
+
+(Note: `CLAUDE.md` says the shopping list lives at `/tmp/shopping_list.txt`. That is stale — the real paths are `seed/.shopping-list` / `seed/.shopping-checked`, written relative to the server's base directory. Both are gitignored, so `git add -A` will not sweep them up.)
 
 The 5 skips are `accessibility.spec.ts:44`, `recipe-display.spec.ts:31`, `recipe-display.spec.ts:44`, `shopping-list.spec.ts:54`, `shopping-list.spec.ts:91`.
 

From c4e52060fa0a8bb5746228f6e883ea75ef1ddc79 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:14:41 +0100
Subject: [PATCH 10/42] feat(ui): add token-based component layer

---
 static/css/input.css | 198 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 189 insertions(+), 9 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 2994bbf..5c6680b 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -84,6 +84,195 @@
 
 /* Custom component classes */
 @layer components {
+    /* ---------- Surfaces ---------- */
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+        box-shadow: var(--shadow-card);
+    }
+
+    .card-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .card-head h2,
+    .card-head h3 {
+        margin: 0;
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+    }
+
+    .card-head .count {
+        font-size: 12px;
+        color: var(--text-faint);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* ---------- Controls ---------- */
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 32px;
+        padding: 0 11px;
+        border-radius: var(--radius-control);
+        font-size: 13.5px;
+        font-weight: 550;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border-strong);
+    }
+
+    .btn:hover { background: var(--surface-sunk); }
+
+    .btn svg { width: 15px; height: 15px; }
+
+    /* One accent-filled button per view. Everything else is neutral. */
+    .btn-primary {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: var(--accent-ink);
+    }
+
+    .btn-primary:hover {
+        background: var(--accent);
+        filter: brightness(1.06);
+    }
+
+    .stepper {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        overflow: hidden;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-control);
+    }
+
+    .stepper button {
+        width: 26px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: 14px;
+    }
+
+    .stepper button:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .stepper input,
+    .stepper .value {
+        width: 44px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text);
+        text-align: center;
+        font-size: 13.5px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .stepper input:focus { outline: none; }
+
+    /* ---------- Lists ---------- */
+    .row {
+        display: flex;
+        align-items: baseline;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
+    }
+
+    .row + .row { border-top: 1px solid var(--border); }
+
+    .row .row-name { flex: 1; min-width: 0; }
+
+    .row .row-value {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .row .row-note {
+        color: var(--text-faint);
+        font-size: 12.5px;
+    }
+
+    /* ---------- Text ---------- */
+    /* One quiet dot-separated line, replacing rows of coloured pills. */
+    .metaline {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 0;
+        font-size: 13px;
+        color: var(--text-muted);
+    }
+
+    .metaline > *:not(:last-child)::after {
+        content: "·";
+        margin: 0 8px;
+        color: var(--text-faint);
+    }
+
+    .metaline b { font-weight: 600; color: var(--text); }
+
+    .metaline a { color: var(--info); text-decoration: none; }
+
+    .metaline a:hover { text-decoration: underline; }
+
+    .section-label {
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-faint);
+        margin: 18px 0 8px;
+    }
+
+    .chip {
+        display: inline-block;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    /* ---------- Status ---------- */
+    /* Shared by the pantry page and the shopping list's pantry sidebar,
+       so stock state reads identically in both places. Defined here
+       rather than in the pantry task because Task 8 consumes it first. */
+    .item-status-dot {
+        flex: 0 0 auto;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+    }
+
+    .item-status-dot.in-stock { background: var(--ok); }
+
+    .item-status-dot.out-of-stock { background: var(--accent); }
+
     /* Recipe cards with colorful borders */
     .recipe-card {
         @apply relative overflow-hidden;
@@ -254,15 +443,6 @@
         @apply text-red-600 dark:text-red-400;
     }
 
-    /* Status dots with dark mode support */
-    .item-status-dot.in-stock {
-        @apply bg-green-500 dark:bg-green-400;
-    }
-
-    .item-status-dot.out-of-stock {
-        @apply bg-red-500 dark:bg-red-400;
-    }
-
     /* CodeMirror editor dark mode support */
     .dark .cm-editor {
         @apply bg-gray-900;

From f3500ad0a997746b2ca21844af49a3df1b2e00d4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:15:25 +0100
Subject: [PATCH 11/42] docs: add stale btn-primary rules to Task 4 deletion
 list

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index d16a293..d155a9d 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -515,7 +515,15 @@ Converts the test-visible classes to flat token styling, and removes exactly the
 
 - [ ] **Step 1: Replace the badge, tag and pill definitions**
 
-In `static/css/input.css`, delete the existing `.recipe-card`, `.recipe-card::before`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.step-number`, `.tag`, `.nav-pill`, `.nav-pill:hover`, `.nav-pill.active`, `.metadata-pill`, and all ten `.metadata-*` variant rules. Replace with:
+In `static/css/input.css`, delete the existing `.recipe-card`, `.recipe-card::before`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.step-number`, `.tag`, `.nav-pill`, `.nav-pill:hover`, `.nav-pill.active`, `.metadata-pill`, `.metadata-pill svg`, and all ten `.metadata-*` variant rules.
+
+**Also delete the OLD `.btn-primary` and `.btn-primary:hover` rules** — the gradient ones (`background: linear-gradient(135deg, #ff6b35, #f97316)` with the orange glow `box-shadow`), which sit *later* in the file than the token-based `.btn-primary` added in Task 3. Because they come later in source order they currently win the cascade, so the Task 3 component is inert until they are removed. Verify afterwards that exactly one `.btn-primary` definition remains:
+
+```bash
+grep -c "^\s*\.btn-primary\s*{" static/css/input.css   # must print 1
+```
+
+Replace all of the above with:
 
 ```css
     /* Inline recipe entities: weight + tint, not bordered gradient pills,

From 7bef33b2f27c7e3de8bec93fd5af70eea5ffedd4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:18:14 +0100
Subject: [PATCH 12/42] docs: correct btn-primary shadowing description
 (partial, not inert)

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index d155a9d..6efaddf 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -517,7 +517,9 @@ Converts the test-visible classes to flat token styling, and removes exactly the
 
 In `static/css/input.css`, delete the existing `.recipe-card`, `.recipe-card::before`, `.ingredient-badge`, `.cookware-badge`, `.timer-badge`, `.step-number`, `.tag`, `.nav-pill`, `.nav-pill:hover`, `.nav-pill.active`, `.metadata-pill`, `.metadata-pill svg`, and all ten `.metadata-*` variant rules.
 
-**Also delete the OLD `.btn-primary` and `.btn-primary:hover` rules** — the gradient ones (`background: linear-gradient(135deg, #ff6b35, #f97316)` with the orange glow `box-shadow`), which sit *later* in the file than the token-based `.btn-primary` added in Task 3. Because they come later in source order they currently win the cascade, so the Task 3 component is inert until they are removed. Verify afterwards that exactly one `.btn-primary` definition remains:
+**Also delete the OLD `.btn-primary` and `.btn-primary:hover` rules** — the gradient ones (`background: linear-gradient(135deg, #ff6b35, #f97316)` with the orange glow `box-shadow`), which sit *later* in the file than the token-based `.btn-primary` added in Task 3.
+
+The two rules currently *partially* override each other, which is worse than one simply winning. CSS resolves per-property, not per-rule: the old rule re-sets only `background`, so the new rule's `border-color` and `color: var(--accent-ink)` stay live — and on `:hover` the old rule sets neither `background` nor `filter`, so the new flat `var(--accent)` fill wins there. The result is a button that renders as a gradient at rest and flips to a flat fill on hover. No page renders `.btn-primary` before Task 6, so this is invisible today, but it must be resolved here rather than carried forward. Verify afterwards that exactly one `.btn-primary` definition remains:
 
 ```bash
 grep -c "^\s*\.btn-primary\s*{" static/css/input.css   # must print 1

From fd0ec6c8f0d486322fb37641cee1afda67ccb7a4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:33:44 +0100
Subject: [PATCH 13/42] fix(ui): address component layer review findings

---
 .../plans/2026-08-15-web-ui-refresh.md        | 38 ++++++++++++++-
 static/css/input.css                          | 46 +++++++++++++------
 2 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 6efaddf..189410d 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -1089,6 +1089,8 @@ In `templates/recipe.html`, replace the title bar block (lines 36–95) with:
                 {% if !static_mode %}
                 <div class="stepper">
                     <label for="scale" class="sr-only">{{ tr.t("recipe-scale-label") }}</label>
+                    <button type="button" aria-label="Decrease scale"
+                            onclick="stepScale(-0.5)">&minus;</button>
                     <input type="number"
                            id="scale"
                            value="{{ scale }}"
@@ -1096,7 +1098,25 @@ In `templates/recipe.html`, replace the title bar block (lines 36–95) with:
                            max="200"
                            step="0.5"
                            onchange="window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${this.value}`">
+                    <button type="button" aria-label="Increase scale"
+                            onclick="stepScale(0.5)">+</button>
                 </div>
+```
+
+The `id="scale"` input, its `min`/`max`/`step` and its `onchange` are preserved verbatim — `addToShoppingList()` reads `document.getElementById('scale').value`, and `recipe-scaling.spec.ts` drives the input directly. The −/+ buttons are additive. Add this helper to the page's existing `<script>` block:
+
+```javascript
+function stepScale(delta) {
+    const input = document.getElementById('scale');
+    const next = Math.min(200, Math.max(0.5, (parseFloat(input.value) || 1) + delta));
+    input.value = next;
+    input.dispatchEvent(new Event('change'));
+}
+```
+
+Dispatching `change` rather than calling the handler directly keeps a single source of navigation behaviour.
+
+```html
                 <a href="{{ prefix }}/edit/{{ recipe_path }}" class="btn" title="{{ tr.t("action-edit") }}">
                     <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
@@ -1514,7 +1534,7 @@ Replace the category block template literal (currently `<div class="mb-6 bg-whit
 ```javascript
         html += data.categories.map(category => `
             <div class="card mb-2.5">
-                <div class="card-head"><h3>${escHtml(category.category)}</h3></div>
+                <div class="card-head plain"><h3>${escHtml(category.category)}</h3></div>
                 <ul>
                     ${category.items.map((item, idx) => {
                         const itemId = `item-${item.name.replace(/\s+/g, '-')}`;
@@ -1544,6 +1564,8 @@ Four things must survive verbatim, because other code reads them:
 - **`data-action="toggle-item"`, `data-item-id`, `data-ingredient-name"`** — the delegated `onchange` handler dispatches on these.
 - **`.item-name`** — read by the copy-to-clipboard builder and by the tests.
 
+Aisle names come from `aisle.conf` and are user-authored, so they use the `.plain` variant rather than the uppercase micro-label treatment.
+
 - [ ] **Step 3: Convert the JS-rendered pantry sidebar**
 
 Replace the pantry item literal (`<li class="flex items-center justify-between py-1">` with its green check SVG and `text-green-800` / `text-green-700` spans) with:
@@ -1624,6 +1646,8 @@ In `static/css/input.css`, delete the `.pantry-item`, `.pantry-item:hover`, `.pa
 
 `.item-status-dot` is **not** redefined here — Task 3 already defines it, because the shopping list's pantry sidebar (Task 8) consumes it first.
 
+Note: `.item-status-dot.out-of-stock` uses `var(--danger)`, not `var(--accent)` — the accent is reserved for the single primary action per view. If the out-of-stock row needs a tinted background, use `var(--danger-soft)`.
+
 The seven `.pantry-item .text-gray-*` rules existed only to force dark-mode text colours onto Tailwind utilities. Tokens make them unnecessary — but that means you must also remove those `text-gray-*` utilities from the pantry markup in the next step, or the text will stay grey in dark mode.
 
 - [ ] **Step 2: Collapse the item markup**
@@ -1664,7 +1688,7 @@ Unlike the recipes index, the pantry has no client-side sorter reparenting its c
 
 - [ ] **Step 3: Convert the section grid**
 
-Replace `<div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">` (line 59) with a `.card` per storage location containing a `.card-head` (location name + item count) and the items as `.pantry-item` rows. Wrap the locations in `<div class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">`.
+Replace `<div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">` (line 59) with a `.card` per storage location containing a `class="card-head plain"` head (location name + item count) and the items as `.pantry-item` rows. Wrap the locations in `<div class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">`. Storage location names are user-authored, so they use the `.plain` variant rather than the uppercase micro-label treatment.
 
 - [ ] **Step 4: Head and modal**
 
@@ -1889,6 +1913,16 @@ Expected: dark background forced to white, text dark, nav hidden, badges readabl
 Run: `npm test`
 Expected: same as baseline.
 
+- [ ] **Step 3b: Split `input.css`**
+
+`input.css` now holds the theme contract (tokens, `@theme` registration) and the whole component vocabulary in one file, and the component half is edited constantly while the token half is meant to stay stable. Split at the `@layer components` boundary:
+
+- `static/css/input.css` keeps `@import "tailwindcss"`, `@config`, the `:root` / `.dark` token blocks and `@theme inline` — the rarely-touched theme contract.
+- Move the entire `@layer components { … }` block into a new `static/css/components.css`.
+- Pull it back in with `@import "./components.css";` placed immediately after the `@theme inline` block. Tailwind v4 processes `@layer components` contributions from imported partials correctly.
+
+Verify with `npm run build-css` (exit 0) and confirm the compiled `output.css` still contains `.card`, `.btn`, `.row` and `.metaline`.
+
 - [ ] **Step 7: Commit**
 
 ```bash
diff --git a/static/css/input.css b/static/css/input.css
index 5c6680b..1ebfc42 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -7,7 +7,7 @@
 
 /* ============================================================
    DESIGN TOKENS
-   Fifteen semantic names, defined once per theme. Every colour
+   Seventeen semantic names, defined once per theme. Every colour
    in the UI resolves through one of these. Do not introduce raw
    hex values or Tailwind palette utilities in templates.
    --accent-ink is the foreground colour for text and icons sitting ON a
@@ -30,6 +30,8 @@
     --accent-ink:    #ffffff;
     --ok:            #2f7d55;
     --ok-soft:       #e7f4ec;
+    --danger:        #b42318;
+    --danger-soft:   #fdecea;
     --info:          #2b6cb0;
 
     --radius-control: 6px;
@@ -53,6 +55,8 @@
     --accent-ink:    #131519;
     --ok:            #5fbe8b;
     --ok-soft:       #17271f;
+    --danger:        #ff8a8a;
+    --danger-soft:   #2a1618;
     --info:          #7ab3ea;
 
     --shadow-card:   none;
@@ -79,6 +83,8 @@
     --color-accent-ink:  var(--accent-ink);
     --color-ok:          var(--ok);
     --color-ok-soft:     var(--ok-soft);
+    --color-danger:      var(--danger);
+    --color-danger-soft: var(--danger-soft);
     --color-info:        var(--info);
 }
 
@@ -110,6 +116,17 @@
         color: var(--text-muted);
     }
 
+    /* Escape hatch: card heads whose text is user-authored data
+       (aisle categories, pantry locations) rather than fixed chrome. */
+    .card-head.plain h2,
+    .card-head.plain h3 {
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: 0;
+        text-transform: none;
+        color: var(--text);
+    }
+
     .card-head .count {
         font-size: 12px;
         color: var(--text-faint);
@@ -186,14 +203,27 @@
         font-size: 13.5px;
         font-weight: 600;
         font-variant-numeric: tabular-nums;
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+
+    /* Suppress native spin buttons — they appear on hover/focus, widen the
+       input and overflow the stepper's rounded corner. The −/+ buttons are
+       the intended affordance. */
+    .stepper input::-webkit-outer-spin-button,
+    .stepper input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
 
     .stepper input:focus { outline: none; }
 
     /* ---------- Lists ---------- */
+    /* center, not baseline: .row children include non-text controls
+       (checkboxes, status dots) and all content is single-line. */
     .row {
         display: flex;
-        align-items: baseline;
+        align-items: center;
         gap: 10px;
         padding: 7px 14px;
         font-size: 14px;
@@ -248,16 +278,6 @@
         margin: 18px 0 8px;
     }
 
-    .chip {
-        display: inline-block;
-        padding: 1px 8px;
-        border-radius: 9999px;
-        font-size: 12px;
-        font-weight: 500;
-        background: var(--surface-sunk);
-        color: var(--text-muted);
-    }
-
     /* ---------- Status ---------- */
     /* Shared by the pantry page and the shopping list's pantry sidebar,
        so stock state reads identically in both places. Defined here
@@ -271,7 +291,7 @@
 
     .item-status-dot.in-stock { background: var(--ok); }
 
-    .item-status-dot.out-of-stock { background: var(--accent); }
+    .item-status-dot.out-of-stock { background: var(--danger); }
 
     /* Recipe cards with colorful borders */
     .recipe-card {

From 68335b2fb7afd33570e630d606f44c46b2fd6baa Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sat, 15 Aug 2026 21:35:05 +0100
Subject: [PATCH 14/42] docs: correct token verification method in plan

---
 .../plans/2026-08-15-web-ui-refresh.md         | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 189410d..6bc9b51 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -25,6 +25,24 @@ cargo build
 
 and restart the server. `CLAUDE.md` claims templates recompile per request — that is wrong for this Askama 0.12 setup.
 
+**1a. How to verify a design token actually works.** Do NOT grep `output.css` for `--color-<name>`. `@theme inline` *inlines* a token's value into the generated utility instead of emitting a `--color-<name>` custom property, and Tailwind only generates a utility at all when some scanned file uses it. So a correctly-wired token can legitimately produce zero matches for `color-<name>`. Verify the two real things instead:
+
+```bash
+# 1. the raw custom property is defined for both themes
+grep -o -- "--danger:[^;]*" static/css/output.css     # expect two hits (light + dark)
+
+# 2. whatever consumes it compiled correctly
+grep -o "\.item-status-dot\.out-of-stock{[^}]*}" static/css/output.css
+```
+
+To confirm a Tailwind utility form (`bg-danger`, `text-muted`) would work, drop a throwaway file inside a content glob, rebuild, grep, then delete it and rebuild again:
+
+```bash
+printf '<div class="bg-danger"></div>\n' > static/_probe.html
+npm run build-css && grep -o "\.bg-danger{[^}]*}" static/css/output.css
+rm static/_probe.html && npm run build-css
+```
+
 **2. CSS must be rebuilt too.** `static/css/output.css` is a build artifact. After editing `static/css/input.css`:
 
 ```bash

From abb2cbea46fe7d21081f9c74c8b609ff5eeeaf7d Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 13:05:21 +0100
Subject: [PATCH 15/42] refactor(ui): restyle badges and pills onto design
 tokens

---
 static/css/input.css | 182 ++++++++++++++++++++++++-------------------
 templates/base.html  |  21 -----
 2 files changed, 100 insertions(+), 103 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 1ebfc42..9bf3839 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -293,121 +293,139 @@
 
     .item-status-dot.out-of-stock { background: var(--danger); }
 
-    /* Recipe cards with colorful borders */
-    .recipe-card {
-        @apply relative overflow-hidden;
-    }
-
-    .recipe-card::before {
-        content: '';
-        @apply absolute top-0 left-0 right-0 h-1;
-        background: linear-gradient(90deg, #ff6b35, #fbbf24, #4ade80);
-    }
-
-    /* Ingredient badges */
+    /* Inline recipe entities: weight + tint, not bordered gradient pills,
+       so they stop competing with the prose they sit inside. */
     .ingredient-badge {
-        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
-        background: linear-gradient(135deg, #fef3c7, #fed7aa);
-        @apply text-orange-700 border border-orange-400;
+        color: var(--accent-text);
+        font-weight: 600;
+        white-space: nowrap;
     }
 
     .cookware-badge {
-        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
-        background: linear-gradient(135deg, #dcfce7, #bbf7d0);
-        @apply text-green-900 border border-green-400;
+        color: var(--ok);
+        font-weight: 600;
+        white-space: nowrap;
     }
 
     .timer-badge {
-        @apply inline-block align-middle px-2 py-0.5 rounded-full text-sm font-medium whitespace-nowrap;
-        background: linear-gradient(135deg, #fee2e2, #fecaca);
-        @apply text-red-900 border border-red-400;
-    }
-
-    /* Enhanced buttons */
-    .btn-primary {
-        background: linear-gradient(135deg, #ff6b35, #f97316);
-        @apply shadow-lg hover:-translate-y-0.5 transition-all;
-    }
-
-    .btn-primary:hover {
-        box-shadow: 0 6px 20px 0 rgba(255, 107, 53, 0.4);
+        padding: 1px 6px;
+        border-radius: 5px;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
     }
 
-    /* Step numbers with colorful circles */
     .step-number {
-        @apply w-8 h-8 flex items-center justify-center rounded-full text-white font-bold shrink-0;
-        background: linear-gradient(135deg, #ff6b35, #f97316);
+        flex: 0 0 22px;
+        height: 22px;
+        margin-top: 1px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-size: 12px;
+        font-weight: 650;
+        font-variant-numeric: tabular-nums;
     }
 
-    /* Tags styling */
     .tag {
-        @apply inline-block px-3 py-1 rounded-full text-xs font-medium mr-2;
-        background: linear-gradient(135deg, #fbbf24, #fb923c);
-        @apply text-white shadow-xs;
-    }
-
-    /* Navigation pills */
-    .nav-pill {
-        @apply px-5 py-2 rounded-full transition-all font-medium text-gray-500 relative;
-    }
-
-    .nav-pill:hover {
-        background: linear-gradient(135deg, #fef3c7, #fed7aa);
-        @apply text-orange-700 -translate-y-0.5 shadow-md;
-    }
-
-    .nav-pill.active {
-        background: linear-gradient(135deg, #ff6b35, #f97316);
-        @apply text-white font-bold shadow-lg;
-    }
-
-    /* Recipe metadata pills - simple outline style */
-    .metadata-pill {
-        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap border bg-white;
-    }
-
-    .metadata-pill svg {
-        @apply w-4 h-4 mr-2;
+        display: inline-block;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
     }
 
-    .metadata-servings {
-        @apply text-gray-600 border-gray-300;
+    /* Card in the recipes/menu index. No gradient top border. */
+    .recipe-card {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        text-decoration: none;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
     }
 
-    .metadata-time {
-        @apply text-blue-600 border-blue-300;
+    .recipe-card:hover {
+        background: var(--surface-sunk);
+        border-color: var(--border-strong);
     }
 
-    .metadata-difficulty {
-        @apply text-yellow-600 border-yellow-300;
+    .recipe-card .recipe-card-icon {
+        flex: 0 0 30px;
+        height: 30px;
+        display: grid;
+        place-items: center;
+        border-radius: 8px;
+        background: var(--surface-sunk);
+        font-size: 15px;
     }
 
-    .metadata-course {
-        @apply text-orange-600 border-orange-300;
+    /* MUST be applied to an <h3>. The client-side sorter in
+       recipes.html reads `el.querySelector('h3')?.textContent`
+       to sort by name; any other element silently breaks sorting. */
+    .recipe-card .recipe-card-title {
+        display: block;
+        margin: 0;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--text);
     }
 
-    .metadata-prep {
-        @apply text-indigo-600 border-indigo-300;
+    .recipe-card .recipe-card-sub {
+        display: block;
+        margin-top: 1px;
+        font-size: 12px;
+        color: var(--text-faint);
     }
 
-    .metadata-cook {
-        @apply text-red-600 border-red-300;
+    /* Nav items in the app bar. Name kept for the E2E suite. */
+    .nav-pill {
+        padding: 5px 11px;
+        border-radius: 7px;
+        font-size: 13.5px;
+        font-weight: 500;
+        color: var(--text-muted);
+        text-decoration: none;
     }
 
-    .metadata-cuisine {
-        @apply text-green-600 border-green-300;
+    .nav-pill:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
     }
 
-    .metadata-diet {
-        @apply text-lime-600 border-lime-300;
+    .nav-pill.active {
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
     }
 
-    .metadata-author {
-        @apply text-pink-600 border-pink-300;
+    /* Kept for custom metadata key/value chips inside .metaline.
+       test-helpers.ts selects .metadata-pill by "key: value" text. */
+    .metadata-pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
     }
 
-    .metadata-custom {
-        @apply text-purple-600 border-purple-300;
+    .metadata-pill svg {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
     }
 
     /* Search input with colorful focus */
diff --git a/templates/base.html b/templates/base.html
index 546ccee..d8507b7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -189,21 +189,6 @@
             color: #a78bfa !important;
         }
 
-        /* Nav pill dark mode */
-        .dark .nav-pill {
-            color: #9ca3af;
-        }
-
-        .dark .nav-pill:hover {
-            background: #374151;
-            color: #fb923c;
-        }
-
-        .dark .nav-pill.active {
-            background: linear-gradient(135deg, #ff6b35, #f97316);
-            color: white;
-        }
-
         /* Button dark mode styles */
         .dark .bg-gray-200 {
             background-color: #4b5563;
@@ -263,12 +248,6 @@
             background-color: #374151;
         }
 
-        /* Recipe card specific dark styles */
-        .dark .recipe-card {
-            background-color: #1f2937;
-            border: 1px solid #374151;
-        }
-
         /* Search result keyboard selection */
         #search-results a.search-selected {
             background: linear-gradient(to right, #f3e8ff, #fce7f3) !important;

From fa8bcfd37eaf135fe06509752931c3e706bf674b Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 13:07:31 +0100
Subject: [PATCH 16/42] fix(ui): use accent-text token for recipe count, meets
 WCAG AA

text-orange-600 is 3.60:1 on white, below AA. The old .recipe-card
gradient bar caused axe to report this as incomplete rather than a
violation; removing it in Task 4 unmasked the pre-existing failure.
---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 10 +++-------
 templates/recipes.html                              |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 6bc9b51..e37ee77 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -697,15 +697,11 @@ Delete the section beginning:
 
 through the end of `.dark .nav-pill.active { … }`.
 
-Delete the section beginning:
-
-```css
-        /* Dark mode tag and badge styles */
-```
+Then delete the single `.dark .recipe-card` rule in the `/* Recipe card specific dark styles */` section.
 
-through the end of the `/* Recipe card specific dark styles */` section, i.e. every rule targeting `.dark .ingredient-badge`, `.dark .cookware-badge`, `.dark .timer-badge`, `.dark .step-number`, `.dark .tag`, `.dark .metadata-pill`, and `.dark .recipe-card`.
+**That is all there is to delete here.** An earlier draft of this step claimed a non-print "Dark mode tag and badge styles" section held `.dark .ingredient-badge`, `.dark .cookware-badge`, `.dark .timer-badge`, `.dark .step-number`, `.dark .tag` and `.dark .metadata-pill`. It does not. **Every one of those rules lives inside `@media print`** (the block opens around line 336; the badge rules sit at roughly 401–435). The rules that physically sit near the `/* Dark mode tag and badge styles */` comment outside the print block are generic Tailwind utility overrides — `.dark .text-orange-700`, `.dark .text-orange-600`, `.dark .text-purple-700`, `.dark .bg-gray-100`, and two `.dark .bg-gradient-to-r.*` combinations — which are still actively used by the unmigrated `preferences.html`, `pantry.html`, `recipe.html`, `recipes.html`, `menu.html` and `shopping_list.html`. **Deleting them here breaks dark mode on those pages.** They go in Task 13, once every page has been migrated.
 
-**Leave the `@media print` block entirely alone.** It contains its own `.dark .ingredient-badge` rules that make badges readable on paper, and they are still needed.
+**Leave the `@media print` block entirely alone.** Its `.dark .ingredient-badge` rules make badges readable on paper and are still needed.
 
 One print rule does go stale in Task 5: `.bg-white.shadow-lg.rounded-2xl.mb-8 { display: none !important; }` targets the old nav wrapper, which becomes `.appbar`. It is harmless dead CSS because the rule above it already hides `nav` outright — remove it in Task 13 along with the rest of the cleanup.
 
diff --git a/templates/recipes.html b/templates/recipes.html
index f20782a..6e81f31 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -76,7 +76,7 @@ <h2 class="text-xl font-bold">{{ tr.t("todays-menu-title") }}</h2>
                 <h3 class="font-bold text-lg mb-2">{{ item.name }}</h3>
                 {% match item.count %}
                 {% when Some with (count) %}
-                <span class="text-sm text-orange-600 font-medium">{{ tr.tn("recipes-count", count) }}</span>
+                <span class="text-sm text-accent-text font-medium">{{ tr.tn("recipes-count", count) }}</span>
                 {% when None %}
                 {% endmatch %}
             </div>

From de688648193d2cf5cb1e9a0a666221b121f3c178 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 13:10:28 +0100
Subject: [PATCH 17/42] docs: add standing rule to replace text-orange-600
 (fails AA)

---
 .../plans/2026-08-15-web-ui-refresh.md            | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index e37ee77..b844f18 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -92,6 +92,21 @@ PLAYWRIGHT_HOST_PLATFORM_OVERRIDE=mac14 npx playwright install chromium
 
 This pulls the mac14 Chrome-for-Testing build, which runs correctly here. Local environment only — never commit anything for this.
 
+**4d. Kill `text-orange-600` on sight.** It computes to `#f54900`, which is **3.60:1** on white — below the AA 4.5:1 bar. It currently passes CI only because decorative elements make axe report it as "incomplete" rather than a violation; as this refresh removes those elements, each occurrence turns into a hard test failure. Task 4 already hit this once (`recipes.html:79`).
+
+When you migrate a page, replace every `text-orange-600` in it with `text-accent-text` (5.86:1 light, 7.64:1 dark). Do not substitute `text-orange-700` — the legacy palette is deleted in Task 13.
+
+Known occurrences at the time of writing, by owning task:
+
+| File | Lines | Migrated in |
+| --- | --- | --- |
+| `templates/recipe.html` | 204, 334 | Task 6 |
+| `templates/shopping_list.html` | 10, 67, 72, 175, 184, 195, 216, 225, 471, 481 | Task 8 |
+| `templates/pantry.html` | 28, 44, 315, 350 | Task 9 |
+| `templates/base.html` | 235, 372, 492, 820, 824, 829, 863, 866 | Tasks 5 and 13 |
+
+Re-grep rather than trusting these line numbers — they drift as files are edited.
+
 **5. Do not rename these class names.** The E2E suite (134 tests) selects on them directly:
 
 | Class | Used by |

From d0fad586d0f2f4c7bfbdc034a7e8661cfe64a8a4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 13:22:01 +0100
Subject: [PATCH 18/42] fix(ui): force dark tokens inside cook mode overlay

Badges lost their own background in Task 4, so they resolved the site
theme's tokens. Cook mode's card is always dark navy, so in light mode
ingredient/cookware text fell to ~2.5:1. Adding .cooking-overlay to the
dark token block restores 6.6:1 and 6.4:1.
---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md   | 11 ++++++++++-
 .../specs/2026-08-15-web-ui-refresh-design.md         |  7 +++++++
 static/css/input.css                                  |  8 +++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index b844f18..6c3e9e3 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -68,9 +68,12 @@ npm run build-css && cargo build && ./target/debug/cook server ./seed --port 908
 | Failed | 2 (flaky — see below) |
 | Skipped | 5 (pre-existing `test.skip` in source) |
 
-The 2 failures are **pre-existing test-isolation flakiness, not regressions**:
+The failures are **pre-existing test-isolation flakiness, not regressions**. Expect roughly 1–2 failures per run, drawn from *any* of the shopping-list specs — the specific tests vary run to run. Observed so far:
 - `shopping-list-copy.spec.ts:89` "leaves out items that are already ticked off"
 - `shopping-list.spec.ts:29` "should add recipe ingredients to shopping list"
+- `shopping-list-live.spec.ts:32` "updates the sidebar when .shopping-list changes on disk"
+
+Treat any failure confined to `shopping-list*.spec.ts` as suspect-flaky and confirm with a serial rerun before investigating. A failure in any OTHER spec file is a real regression.
 
 Both pass when rerun with `--workers=1`. Cause: the shopping list persists to single shared files — `seed/.shopping-list` and `seed/.shopping-checked` — and `playwright.config.ts` sets `fullyParallel: true` with unbounded local workers, which race on them. `shopping-list-copy.spec.ts` overwrites those files directly in `beforeEach`; `shopping-list.spec.ts:29` mutates the same files through the UI. When either fails, rerun that spec alone with `--workers=1` before concluding you broke something.
 
@@ -699,6 +702,12 @@ Replace all of the above with:
 
 Note: `.recipe-image-placeholder` and `.search-input:focus` stay as they are for now; `.search-input:focus` is replaced in Task 5.
 
+**Two consequences of this task that are known and accepted:**
+
+1. **Cook mode needs the dark tokens forced.** The badges no longer carry their own background, so they resolve whatever `--accent-text` / `--ok` the *site* theme provides — but cook mode's card is always dark navy. With the site in light mode the badges landed at ~2.5:1 on that card. Fixed by adding `.cooking-overlay` alongside `.dark` on the token block in `input.css`, so the overlay always resolves the dark values (verified 6.6:1 and 6.4:1 after). Do not remove that selector.
+
+2. **`recipes.html` and `/directory/*` look wrong until Task 7.** `.recipe-card` now sets `display: flex; align-items: center`, but the template still nests a `flex-col` card with an `h-48` image header. The result is that the image shrink-wraps and centres instead of filling the card. `background` and `border-radius` are unaffected — Tailwind's utilities layer beats `@layer components`, so the markup's `bg-white`/`rounded-2xl` still win — but the flex properties have no competing utility and do apply. This is cosmetic breakage confined to the branch. **It is only acceptable because Tasks 4 and 7 ship together in one PR; do not deploy an intermediate commit.**
+
 - [ ] **Step 2: Remove the dark overrides for these classes**
 
 In `templates/base.html`, inside the `<style>` block, delete these two sections in full. They sit between the `/* Nav pill dark mode */` comment and the `/* Recipe card specific dark styles */` block, roughly lines 193–272 before edits — locate them by their comment text, not by line number.
diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
index 507ad38..a418c79 100644
--- a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -206,6 +206,13 @@ The token and component layers land **first** and are purely additive — no exi
 - Each migrated page is visually checked at **820px** (tablet portrait), **1024px**, and **1440px**, in both light and dark.
 - `cargo fmt`, `cargo clippy`, and `cargo test` must pass before the PR, per `CLAUDE.md`.
 
+## Deferred follow-ups
+
+Raised during implementation review, deliberately not addressed in this refresh:
+
+- **`--ok` is semantically overloaded.** It is both a *status* colour (`.item-status-dot.in-stock` on the pantry page) and a *category* colour (`.cookware-badge` in recipe steps). They are unrelated concerns that happen to want the same green today, so a future change to one silently re-tints the other. A distinct `--cookware-text` token defaulting to the same values would decouple them at zero visual cost.
+- **Inline entities are distinguished mainly by hue.** Ingredients (`--accent-text`, orange) and cookware (`--ok`, green) differ from prose by colour plus `font-weight: 600`. The weight signals "this is an entity", but not *which kind* — and the two hues sit at similar luminance, so readers with deuteranopia or protanopia will struggle to tell them apart. Both clear AA contrast against the page, so this is a hue-discrimination issue rather than a legibility one. `.timer-badge` already carries a shape cue; ingredients and cookware may warrant a similarly cheap non-hue signal.
+
 ## Out of scope
 
 - **Cook mode** (`static/css/cooking-mode.css`, `static/js/cooking-mode.js`) keeps its current appearance, apart from the inline entity classes it shares with the main stylesheet. Its own compaction — dead vertical space, missing next/previous affordances, duplicate ingredient entries in the mise-en-place grid — is a natural follow-up, tracked separately.
diff --git a/static/css/input.css b/static/css/input.css
index 9bf3839..ad4b0a7 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -39,7 +39,13 @@
     --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
 }
 
-.dark {
+/* .cooking-overlay is listed here deliberately. Cook mode's chrome is always
+   dark regardless of the site theme, so the tokens must resolve to their dark
+   values inside it. Without this, inline entity badges — which carry no
+   background of their own since Task 4 — inherit the LIGHT theme's
+   --accent-text / --ok and render at roughly 2.5:1 on cook mode's navy card. */
+.dark,
+.cooking-overlay {
     color-scheme: dark;
     --bg:            #131519;
     --surface:       #1a1d22;

From 0355fb44cccb8302bcdebc8f4f94ccacff093505 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 15:46:29 +0100
Subject: [PATCH 19/42] feat(ui): compact 48px app bar

---
 static/css/input.css     |  71 +++++++++-
 templates/base.html      | 292 ++++++++++++++-------------------------
 tests/e2e/tablet.spec.ts |  26 ++++
 3 files changed, 192 insertions(+), 197 deletions(-)
 create mode 100644 tests/e2e/tablet.spec.ts

diff --git a/static/css/input.css b/static/css/input.css
index ad4b0a7..ad6928f 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -393,6 +393,71 @@
         color: var(--text-faint);
     }
 
+    /* ---------- App bar ---------- */
+    .appbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 48px;
+        padding: 0 16px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .appbar-brand {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 14px;
+        font-weight: 650;
+        letter-spacing: -.01em;
+        color: var(--text);
+        text-decoration: none;
+    }
+
+    .appbar-nav { display: flex; gap: 2px; }
+
+    .icon-btn {
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border: 0;
+        border-radius: 7px;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+    }
+
+    .icon-btn:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .icon-btn svg { width: 16px; height: 16px; }
+
+    .search-input {
+        width: 100%;
+        height: 30px;
+        padding: 0 10px 0 30px;
+        border-radius: 7px;
+        border: 1px solid transparent;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-size: 13px;
+    }
+
+    .search-input::placeholder { color: var(--text-faint); }
+
+    .search-input:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: none;
+    }
+
     /* Nav items in the app bar. Name kept for the E2E suite. */
     .nav-pill {
         padding: 5px 11px;
@@ -434,12 +499,6 @@
         margin-right: 4px;
     }
 
-    /* Search input with colorful focus */
-    .search-input:focus {
-        @apply border-primary-orange;
-        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
-    }
-
     /* Step images in recipes */
     .image-step {
         @apply w-full max-h-80 object-contain rounded-xl;
diff --git a/templates/base.html b/templates/base.html
index d8507b7..dba5e4a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,8 +20,8 @@
         .viewport {
             width: 100%;
             max-width: 72rem;
-            margin: 2rem auto;
-            padding: 0 1rem;
+            margin: 0 auto;
+            padding: 16px;
         }
 
         /* Dark mode styles */
@@ -250,87 +250,7 @@
 
         /* Search result keyboard selection */
         #search-results a.search-selected {
-            background: linear-gradient(to right, #f3e8ff, #fce7f3) !important;
-        }
-
-        /* Search results dark mode */
-        .dark #search-results {
-            background-color: #1f2937;
-            border-color: #7c3aed;
-        }
-
-        .dark #search-results a {
-            color: #e5e7eb;
-        }
-
-        .dark #search-results a:hover,
-        .dark #search-results a.search-selected {
-            background-color: #374151 !important;
-        }
-
-        .dark #search-results .text-gray-800 {
-            color: #e5e7eb;
-        }
-
-        .dark #search-results .text-gray-500 {
-            color: #9ca3af;
-        }
-
-        /* Override inline hover styles in search results */
-        .dark #search-results a.hover\:bg-gradient-to-r:hover {
-            background: #374151 !important;
-        }
-
-        .dark #search-results .border-gray-100 {
-            border-color: #374151;
-        }
-
-        .dark #search-input {
-            background-color: #374151;
-            border-color: #7c3aed;
-            color: #e5e7eb;
-        }
-
-        .dark #search-input::placeholder {
-            color: #6b7280;
-        }
-
-        .dark #search-input:focus {
-            border-color: #a78bfa;
-        }
-
-        /* Theme toggle button styles */
-        .theme-toggle {
-            position: relative;
-            width: 50px;
-            height: 24px;
-            background-color: #9ca3af;
-            border-radius: 12px;
-            padding: 2px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-
-        .theme-toggle.dark {
-            background-color: #7c3aed;
-        }
-
-        .theme-toggle-handle {
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 20px;
-            height: 20px;
-            background-color: white;
-            border-radius: 50%;
-            transition: transform 0.3s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .theme-toggle.dark .theme-toggle-handle {
-            transform: translateX(26px);
+            background: var(--surface-sunk) !important;
         }
 
         @media print {
@@ -743,116 +663,106 @@
         }
     </style>
 </head>
-<body class="bg-gray-50">
-    <div class="viewport">
-        <nav class="bg-white shadow-lg rounded-2xl mb-8 relative">
-            <div class="px-3 lg:px-6 py-4 relative">
-                <div class="flex items-center justify-between flex-wrap gap-y-3">
-                    <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="order-1 hidden md:flex items-center space-x-2">
-                        <img src="{{ prefix }}/static/android-chrome-192x192.png" alt="Cook" class="h-8 w-8 rounded-md dark:bg-gray-200 dark:p-0.5" width="32" height="32">
-                    </a>
-
-                    <div class="relative z-50 order-2 flex-1 md:ml-2 md:mr-4" id="search-container">
-                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                            </svg>
-                        </div>
-                        <input type="text"
-                               id="search-input"
-                               placeholder="{{ tr.t("search-placeholder") }}"
-                               class="w-full pl-10 pr-4 py-2.5 bg-white border-2 border-purple-200 rounded-xl text-gray-900 placeholder-gray-500 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-hidden transition-all shadow-md hover:shadow-lg">
-                        <div id="search-results"
-                             class="absolute top-full mt-2 w-full bg-white border-2 border-purple-200 rounded-xl shadow-xl hidden max-h-96 overflow-y-auto"
-                             style="z-index: 9999;">
-                        </div>
-                    </div>
-
-                    <div class="order-3 w-full md:w-auto flex items-center gap-1 lg:gap-2">
-                        {% if features.show_shopping_list || features.show_pantry %}
-                        <div class="hidden md:flex items-center gap-1 mr-2 lg:mr-4">
-                            <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}"
-                               class="nav-pill {% if active == "recipes" %}active{% endif %}">
-                                {{ tr.t("nav-recipes") }}
-                            </a>
-                            {% if features.show_shopping_list && !static_mode %}
-                            <a href="{{ prefix }}/shopping-list"
-                               class="nav-pill {% if active == "shopping" %}active{% endif %}">
-                                {{ tr.t("nav-shopping-list") }}
-                            </a>
-                            {% endif %}
-                            {% if features.show_pantry && !static_mode %}
-                            <a href="{{ prefix }}/pantry"
-                               class="nav-pill {% if active == "pantry" %}active{% endif %}">
-                                {{ tr.t("nav-pantry") }}
-                            </a>
-                            {% endif %}
-                        </div>
-                        {% endif %}
-                        <!-- Inline buttons on md+ screens -->
-                        {% if !static_mode %}
-                        <a href="{{ prefix }}/preferences" class="hidden md:inline-flex px-3 lg:px-5 py-2 rounded-full font-medium whitespace-nowrap text-sm lg:text-base transition-all duration-300 {% if active == "preferences" %}bg-gradient-to-r from-gray-600 to-gray-700 text-white font-bold shadow-lg scale-105{% else %}text-gray-600 hover:bg-gray-100 hover:text-gray-800 hover:shadow-md hover:-translate-y-0.5{% endif %}">
-                            <span>⚙️</span>
-                        </a>
-                        {% endif %}
-                        <button onclick="showShortcutsHelp()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)">
-                            <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                        </button>
-                        <button onclick="toggleTheme()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Toggle theme">
-                            <svg class="w-5 h-5 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
-                            </svg>
-                            <svg class="w-5 h-5 block dark:hidden text-gray-700" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-                            </svg>
-                        </button>
-                        <!-- Overflow menu for small screens -->
-                        <div class="relative md:hidden ml-auto" id="more-menu-container">
-                            <button onclick="document.getElementById('more-dropdown').classList.toggle('hidden')" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="More options">
-                                <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
-                                </svg>
-                            </button>
-                            <div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl z-50 py-1">
-                                {% if features.show_shopping_list || features.show_pantry %}
-                                <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "recipes" %}font-semibold text-orange-600{% endif %}">
-                                    <span>🍳</span> <span>{{ tr.t("nav-recipes") }}</span>
-                                </a>
-                                {% if features.show_shopping_list && !static_mode %}
-                                <a href="{{ prefix }}/shopping-list" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "shopping" %}font-semibold text-orange-600{% endif %}">
-                                    <span>🛒</span> <span>{{ tr.t("nav-shopping-list") }}</span>
-                                </a>
-                                {% endif %}
-                                {% if features.show_pantry && !static_mode %}
-                                <a href="{{ prefix }}/pantry" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "pantry" %}font-semibold text-orange-600{% endif %}">
-                                    <span>🥫</span> <span>{{ tr.t("nav-pantry") }}</span>
-                                </a>
-                                {% endif %}
-                                <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
-                                {% endif %}
-                                {% if !static_mode %}
-                                <a href="{{ prefix }}/preferences" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                                    <span>⚙️</span> <span>Preferences</span>
-                                </a>
-                                {% endif %}
-                                <button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                    <span>Keyboard Shortcuts</span>
-                                </button>
-                                <button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                                    <svg class="w-4 h-4 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
-                                    <svg class="w-4 h-4 block dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
-                                    <span>Toggle Theme</span>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+<body class="bg-bg text-text">
+    <nav class="appbar">
+        <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="appbar-brand">
+            <img src="{{ prefix }}/static/android-chrome-192x192.png" alt="" class="h-[22px] w-[22px] rounded-md" width="22" height="22">
+            <span class="hidden sm:inline">Cook</span>
+        </a>
+
+        <div class="appbar-nav hidden md:flex">
+            {% if features.show_shopping_list || features.show_pantry %}
+            <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}"
+               class="nav-pill {% if active == "recipes" %}active{% endif %}">{{ tr.t("nav-recipes") }}</a>
+            {% if features.show_shopping_list && !static_mode %}
+            <a href="{{ prefix }}/shopping-list"
+               class="nav-pill {% if active == "shopping" %}active{% endif %}">{{ tr.t("nav-shopping-list") }}</a>
+            {% endif %}
+            {% if features.show_pantry && !static_mode %}
+            <a href="{{ prefix }}/pantry"
+               class="nav-pill {% if active == "pantry" %}active{% endif %}">{{ tr.t("nav-pantry") }}</a>
+            {% endif %}
+            {% endif %}
+        </div>
+
+        <div class="relative z-50 ml-auto w-[180px] md:w-[220px]" id="search-container">
+            <div class="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
+                <svg class="h-4 w-4 text-faint" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+            </div>
+            <input type="text"
+                   id="search-input"
+                   placeholder="{{ tr.t("search-placeholder") }}"
+                   class="search-input">
+            <div id="search-results"
+                 class="absolute top-full mt-1 w-full card hidden max-h-96 overflow-y-auto"
+                 style="z-index: 9999;">
+            </div>
+        </div>
+
+        <!-- Inline buttons on md+ screens -->
+        {% if !static_mode %}
+        <a href="{{ prefix }}/preferences" class="icon-btn hidden md:grid {% if active == "preferences" %}bg-sunk text-text{% endif %}">
+            <span>⚙️</span>
+        </a>
+        {% endif %}
+        <button onclick="showShortcutsHelp()" class="icon-btn hidden md:grid print:hidden" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </button>
+        <button onclick="toggleTheme()" class="icon-btn hidden md:grid print:hidden" aria-label="Toggle theme">
+            <svg class="hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
+            </svg>
+            <svg class="block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+        </button>
+        <!-- Overflow menu for small screens -->
+        <div class="relative md:hidden" id="more-menu-container">
+            <button onclick="document.getElementById('more-dropdown').classList.toggle('hidden')" class="icon-btn" aria-label="More options">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
+                </svg>
+            </button>
+            <div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl z-50 py-1">
+                {% if features.show_shopping_list || features.show_pantry %}
+                <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "recipes" %}font-semibold text-accent-text{% endif %}">
+                    <span>🍳</span> <span>{{ tr.t("nav-recipes") }}</span>
+                </a>
+                {% if features.show_shopping_list && !static_mode %}
+                <a href="{{ prefix }}/shopping-list" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "shopping" %}font-semibold text-accent-text{% endif %}">
+                    <span>🛒</span> <span>{{ tr.t("nav-shopping-list") }}</span>
+                </a>
+                {% endif %}
+                {% if features.show_pantry && !static_mode %}
+                <a href="{{ prefix }}/pantry" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "pantry" %}font-semibold text-accent-text{% endif %}">
+                    <span>🥫</span> <span>{{ tr.t("nav-pantry") }}</span>
+                </a>
+                {% endif %}
+                <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+                {% endif %}
+                {% if !static_mode %}
+                <a href="{{ prefix }}/preferences" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                    <span>⚙️</span> <span>Preferences</span>
+                </a>
+                {% endif %}
+                <button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    <span>Keyboard Shortcuts</span>
+                </button>
+                <button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                    <svg class="w-4 h-4 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
+                    <svg class="w-4 h-4 block dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+                    <span>Toggle Theme</span>
+                </button>
             </div>
-        </nav>
+        </div>
+    </nav>
 
+    <div class="viewport">
         <main>
             {% block content %}{% endblock %}
         </main>
diff --git a/tests/e2e/tablet.spec.ts b/tests/e2e/tablet.spec.ts
new file mode 100644
index 0000000..e6c4e2f
--- /dev/null
+++ b/tests/e2e/tablet.spec.ts
@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+// iPad portrait. The band between md (768) and lg (1024) is where the
+// old layout was worst: desktop density at three-quarters the width.
+const TABLET = { width: 820, height: 1180 };
+
+test.describe('Tablet layout', () => {
+  test.use({ viewport: TABLET });
+
+  test('app bar is compact', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    const nav = page.locator('nav').first();
+    const box = await nav.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThanOrEqual(56);
+  });
+
+  test('nav items are visible at tablet width', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator('nav a.nav-pill', { hasText: /Recipes/i })).toBeVisible();
+  });
+});

From 42cb54e20c1079abc14faa1964533c49b80a0cf6 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 15:49:04 +0100
Subject: [PATCH 20/42] docs: add body background token check to Task 13

---
 .../plans/2026-08-15-web-ui-refresh.md          | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 6c3e9e3..f0b6fc6 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -1935,6 +1935,23 @@ In `tailwind.config.js`, delete the `colors` block (`primary-orange`, `primary-g
 Run: `grep -rn "primary-orange\|primary-green\|light-orange\|light-blue\|light-green\|light-yellow" templates/ static/css/input.css`
 Expected: no output. If anything matches, convert it to a token first.
 
+- [ ] **Step 3c: Confirm the token now drives the page background**
+
+Until this task, `.dark body { background-color: #111827; }` sat in `base.html`'s unlayered `<style>` block and outranked the `bg-bg` utility on `<body>` (unlayered CSS beats `@layer utilities`), so dark mode's page background was `#111827` rather than the token's `#131519`. Deleting the block should hand control back to the token. Verify:
+
+```bash
+# with the server running and the site in dark mode
+# body background must now compute to rgb(19, 21, 25) = #131519
+```
+
+Check it in a browser's computed styles, or with the Playwright one-liner:
+
+```javascript
+await page.evaluate(() => getComputedStyle(document.body).backgroundColor)
+```
+
+If it still reports `rgb(17, 24, 39)`, a `.dark body` rule survived somewhere — find and remove it.
+
 - [ ] **Step 4: Rebuild and check every page in dark mode**
 
 Run: `npm run build-css && cargo build && ./target/debug/cook server ./seed --port 9080`

From 21c7bc9969d676f609a2f98e523707bc996a0896 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 15:58:08 +0100
Subject: [PATCH 21/42] docs: clear shopping-list fixtures before test runs

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index f0b6fc6..e2a7b8b 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -81,6 +81,14 @@ Both pass when rerun with `--workers=1`. Cause: the shopping list persists to si
 
 The 5 skips are `accessibility.spec.ts:44`, `recipe-display.spec.ts:31`, `recipe-display.spec.ts:44`, `shopping-list.spec.ts:54`, `shopping-list.spec.ts:91`.
 
+**4a-i. Clear the shopping-list fixtures before every full run.** `seed/.shopping-list` accumulates duplicate entries across local runs (it is append-driven and never reset), which makes the parallel-worker race meaningfully worse — a polluted file turns 1 flaky failure into 3. Both files are gitignored and the app recreates them, so deleting is safe:
+
+```bash
+rm -f seed/.shopping-list seed/.shopping-checked
+```
+
+Do this before `npm test`, not after.
+
 **4b. Tests mutate a tracked seed fixture.** The pantry tests write to `seed/config/pantry.conf`, which IS tracked in git. After any test run, restore it before committing so it isn't swept into your commit:
 
 ```bash

From 18778f5f53bc24e385d627213f0afbdd3dc4e728 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 16:09:12 +0100
Subject: [PATCH 22/42] fix(ui): app bar accessibility and search selection
 visibility

- brand link had no accessible name below sm (span is display:none there)
- search-selected was ~1.1:1 in dark mode; accent bar now carries the signal
- guard app bar overflow across the 768-1280 band (zero slack at 768)
- record search-result markup migration as a Task 13 prerequisite
---
 .../plans/2026-08-15-web-ui-refresh.md        | 11 ++++++++
 templates/base.html                           | 14 +++++++---
 tests/e2e/tablet.spec.ts                      | 27 +++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index e2a7b8b..6ae1e2c 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -1907,6 +1907,17 @@ Only now is it safe: every page consumes tokens, so nothing depends on `.dark .b
 - Modify: `templates/base.html` (`<style>` block)
 - Modify: `tailwind.config.js`
 
+- [ ] **Step 0: Migrate the search-result markup FIRST — it is a known landmine**
+
+Task 5 deleted the `#search-results`-scoped dark overrides. Result items currently stay legible in dark mode **only because the general `.dark .text-gray-800 { color: #e5e7eb }` and `.dark .text-gray-500` rules in the very block this task deletes still match them.** Delete the block without migrating the markup first and every search result becomes dark-grey text on a dark surface.
+
+The result items are generated in two places — migrate both before deleting anything:
+
+- `templates/base.html`, the search-results renderer (around line 838)
+- `static/js/search.js`, used in static-site mode
+
+Replace their hardcoded `text-gray-800` / `text-gray-500` / `border-gray-100` utilities with `text-text` / `text-muted` / `border-line`. Then verify: open the site in dark mode, type `pizza`, and confirm the dropdown's titles, subtitles and row separators are all legible. (The separator is already wrong today — there is no `.dark .border-gray-100` rule — so this fixes a live minor bug too.)
+
 - [ ] **Step 1: Confirm nothing still relies on the overrides**
 
 Run: `grep -rn "bg-white\|text-gray-[0-9]\|bg-gray-50\|border-gray-[0-9]\|bg-gradient-to-" templates/*.html | grep -v "print:" | grep -v "^templates/base.html:[0-9]*: *\." `
diff --git a/templates/base.html b/templates/base.html
index dba5e4a..fa5f733 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -248,9 +248,12 @@
             background-color: #374151;
         }
 
-        /* Search result keyboard selection */
+        /* Search result keyboard selection. --surface-sunk alone is only about
+           1.1:1 against --surface in dark mode — effectively invisible while
+           arrowing through results — so the accent bar carries the signal. */
         #search-results a.search-selected {
-            background: var(--surface-sunk) !important;
+            background: var(--accent-soft) !important;
+            box-shadow: inset 3px 0 0 var(--accent);
         }
 
         @media print {
@@ -666,8 +669,11 @@
 <body class="bg-bg text-text">
     <nav class="appbar">
         <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="appbar-brand">
-            <img src="{{ prefix }}/static/android-chrome-192x192.png" alt="" class="h-[22px] w-[22px] rounded-md" width="22" height="22">
-            <span class="hidden sm:inline">Cook</span>
+            <!-- alt is a real label, not decorative: the "Cook" span is
+                 display:none below sm, so without it the link has no
+                 accessible name at narrow widths. -->
+            <img src="{{ prefix }}/static/android-chrome-192x192.png" alt="Cook" class="h-[22px] w-[22px] rounded-md" width="22" height="22">
+            <span class="hidden sm:inline" aria-hidden="true">Cook</span>
         </a>
 
         <div class="appbar-nav hidden md:flex">
diff --git a/tests/e2e/tablet.spec.ts b/tests/e2e/tablet.spec.ts
index e6c4e2f..b7e6b2f 100644
--- a/tests/e2e/tablet.spec.ts
+++ b/tests/e2e/tablet.spec.ts
@@ -24,3 +24,30 @@ test.describe('Tablet layout', () => {
     await expect(page.locator('nav a.nav-pill', { hasText: /Recipes/i })).toBeVisible();
   });
 });
+
+// The bar has almost zero horizontal slack at the md breakpoint: at exactly
+// 768px the last icon's right edge lands on 752px, plus 16px padding. Longer
+// locale strings (nl-NL "Boodschappenlijst", de-DE) eat the remaining room via
+// the search box's flex-shrink. Guard the whole band, not just one width.
+test.describe('App bar fits without overflow', () => {
+  for (const width of [768, 800, 820, 900, 1024, 1280]) {
+    test(`no horizontal overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto('/');
+      await page.waitForLoadState('networkidle');
+
+      const { scrollWidth, clientWidth, scrollHeight, clientHeight } =
+        await page.locator('nav.appbar').evaluate((el) => ({
+          scrollWidth: el.scrollWidth,
+          clientWidth: el.clientWidth,
+          scrollHeight: el.scrollHeight,
+          clientHeight: el.clientHeight,
+        }));
+
+      expect(scrollWidth, `app bar overflows horizontally at ${width}px`)
+        .toBeLessThanOrEqual(clientWidth);
+      expect(scrollHeight, `app bar wrapped to a second line at ${width}px`)
+        .toBeLessThanOrEqual(clientHeight);
+    });
+  }
+});

From 047acedf70303d8bca5c09e49c54d29b761980b4 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 17:24:56 +0100
Subject: [PATCH 23/42] feat(ui): compact recipe page layout

---
 static/css/input.css             |  60 +++++++
 static/js/cooking-mode.js        |   4 +-
 templates/recipe.html            | 284 ++++++++++++++-----------------
 tests/e2e/recipe-display.spec.ts |   6 +-
 tests/e2e/tablet.spec.ts         |  27 +++
 5 files changed, 216 insertions(+), 165 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index ad6928f..f6f41f5 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -499,6 +499,66 @@
         margin-right: 4px;
     }
 
+    /* ---------- Recipe page ---------- */
+    /* Fixed-width rail is what guarantees ingredient names and
+       quantities never wrap in the 768–1023px tablet band. */
+    .recipe-layout {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 700px) {
+        .recipe-layout {
+            grid-template-columns: 264px minmax(0, 1fr);
+            align-items: start;
+        }
+
+        .recipe-rail {
+            position: sticky;
+            top: 64px;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .recipe-layout { grid-template-columns: 300px minmax(0, 1fr); }
+    }
+
+    .ingredient-list { list-style: none; margin: 0; padding: 4px 0; }
+
+    .step-list { list-style: none; margin: 0; padding: 0; }
+
+    .step-list > li {
+        display: flex;
+        gap: 12px;
+        padding: 14px;
+    }
+
+    .step-list > li + li { border-top: 1px solid var(--border); }
+
+    .step-body { font-size: 15px; line-height: 1.6; }
+
+    .step-refs {
+        margin-top: 7px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 14px;
+        font-size: 12.5px;
+        color: var(--text-faint);
+    }
+
+    .step-refs b { font-weight: 600; color: var(--text-muted); }
+
+    .recipe-note {
+        display: flex;
+        gap: 8px;
+        padding: 12px 14px;
+        border-left: 3px solid var(--border-strong);
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-style: italic;
+    }
+
     /* Step images in recipes */
     .image-step {
         @apply w-full max-h-80 object-contain rounded-xl;
diff --git a/static/js/cooking-mode.js b/static/js/cooking-mode.js
index c75ee6f..c522052 100644
--- a/static/js/cooking-mode.js
+++ b/static/js/cooking-mode.js
@@ -44,10 +44,10 @@
 
     function captureStepHTML() {
         const stepElements = [];
-        const sectionEls = document.querySelectorAll('.md\\:col-span-2 ol');
+        const sectionEls = document.querySelectorAll('ol.step-list');
         sectionEls.forEach(function(ol) {
             ol.querySelectorAll(':scope > li').forEach(function(li) {
-                const textDiv = li.querySelector('.leading-8');
+                const textDiv = li.querySelector('.step-body');
                 if (textDiv) {
                     stepElements.push(textDiv.innerHTML);
                 }
diff --git a/templates/recipe.html b/templates/recipe.html
index 476748d..4623d2c 100644
--- a/templates/recipe.html
+++ b/templates/recipe.html
@@ -33,175 +33,166 @@
         {% endmatch %}
 
         <!-- Title bar with scale and shopping list button -->
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 print:flex-row print:items-center">
-            <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent print:text-2xl">
+        <div class="flex items-start gap-4 mb-1.5">
+            <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:text-2xl">
                 {{ recipe.name }}
             </h1>
             {% if scale != 1.0 %}
-            <div class="hidden print:block text-lg font-normal text-gray-700">{{ tr.t("recipe-scale-label") }}: {{ scale }}x</div>
+            <div class="hidden print:block text-lg font-normal">{{ tr.t("recipe-scale-label") }}: {{ scale }}x</div>
             {% endif %}
-            <div class="flex flex-wrap items-center gap-2 lg:gap-3 print:hidden">
+            <div class="ml-auto flex flex-wrap items-center gap-1.5 print:hidden">
                 {% if !static_mode %}
-                <div class="flex items-center">
-                    <label for="scale" class="text-sm font-medium text-gray-700 mr-2">{{ tr.t("recipe-scale-label") }}:</label>
+                <div class="stepper">
+                    <label for="scale" class="sr-only">{{ tr.t("recipe-scale-label") }}</label>
+                    <button type="button" aria-label="Decrease scale"
+                            onclick="stepScale(-0.5)">&minus;</button>
                     <input type="number"
                            id="scale"
                            value="{{ scale }}"
                            min="0.5"
                            max="200"
                            step="0.5"
-                           class="px-3 py-2 border border-gray-300 rounded-lg w-20 text-center"
                            onchange="window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${this.value}`">
+                    <button type="button" aria-label="Increase scale"
+                            onclick="stepScale(0.5)">+</button>
                 </div>
-                <a href="{{ prefix }}/edit/{{ recipe_path }}"
-                   class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg hover:from-blue-600 hover:to-cyan-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
-                   title="{{ tr.t("action-edit") }}">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <a href="{{ prefix }}/edit/{{ recipe_path }}" class="btn" title="{{ tr.t("action-edit") }}">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                     </svg>
-                    <span class="hidden lg:inline">{{ tr.t("action-edit") }}</span>
+                    <span>{{ tr.t("action-edit") }}</span>
                 </a>
-                <button onclick="addToShoppingList(event, {{ recipe_path|json }})"
-                        class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
-                        title="{{ tr.t("recipe-add-to-shopping") }}">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button onclick="addToShoppingList(event, {{ recipe_path|json }})" class="btn" title="{{ tr.t("recipe-add-to-shopping") }}">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                     </svg>
-                    <span class="hidden lg:inline">{{ tr.t("recipe-add-to-shopping") }}</span>
+                    <span>{{ tr.t("recipe-add-to-shopping") }}</span>
                 </button>
                 {% endif %}
-                <button id="start-cooking-btn"
-                        onclick="startCookingMode()"
-                        class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap print:hidden"
-                        title="Start Cooking">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button id="start-cooking-btn" onclick="startCookingMode()" class="btn btn-primary print:hidden" title="Start Cooking">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
-                    <span class="hidden lg:inline">Cook</span>
+                    <span>Cook</span>
                 </button>
                 {% if static_mode %}
-                <a href="{{ prefix }}/recipe/{{ recipe_path }}.cook"
-                   download
-                   class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
-                   title="Download .cook source">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <a href="{{ prefix }}/recipe/{{ recipe_path }}.cook" download class="btn" title="Download .cook source">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path>
                     </svg>
-                    <span class="hidden lg:inline">.cook</span>
+                    <span>.cook</span>
                 </a>
                 {% endif %}
             </div>
         </div>
 
         <!-- Recipe info section -->
-        <div class="space-y-4">
-            <!-- Tags row -->
-            {% if !tags.is_empty() %}
-            <div class="flex flex-wrap gap-2">
-                {% for tag in tags %}
-                <span class="tag">#{{ tag }}</span>
-                {% endfor %}
-            </div>
-            {% endif %}
-
+        <div>
             {% match recipe.metadata %}
             {% when Some with (metadata) %}
 
-            <!-- Description if present -->
-            {% match metadata.description %}
-            {% when Some with (description) %}
-            <div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-4 rounded-xl border border-orange-200">
-                <p class="text-gray-700 italic">{{ description }}</p>
-            </div>
-            {% when None %}
-            {% endmatch %}
-
             <!-- Metadata row -->
-            <div id="metadata-container" class="flex flex-wrap gap-3">
-                <!-- Display all metadata items -->
-
+            <div id="metadata-container" class="metaline mb-3.5">
                 {% match metadata.servings %}
                 {% when Some with (servings) %}
-                <span class="metadata-pill metadata-servings">👥 {{ servings }} {{ tr.t("recipe-servings-label") }}</span>
+                <span><b>{{ servings }}</b> {{ tr.t("recipe-servings-label") }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.time %}
                 {% when Some with (time) %}
-                <span class="metadata-pill metadata-time">⏱️ {{ time }}</span>
+                <span><b>{{ time }}</b></span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.difficulty %}
                 {% when Some with (difficulty) %}
-                <span class="metadata-pill metadata-difficulty">📊 {{ difficulty }}</span>
+                <span>{{ difficulty }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.course %}
                 {% when Some with (course) %}
-                <span class="metadata-pill metadata-course">🍽️ {{ course }}</span>
+                <span>{{ course }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.prep_time %}
                 {% when Some with (prep_time) %}
-                <span class="metadata-pill metadata-prep">⏱️ {{ tr.t("meta-prep-time") }}: {{ prep_time }}</span>
+                <span>{{ tr.t("meta-prep-time") }} <b>{{ prep_time }}</b></span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.cook_time %}
                 {% when Some with (cook_time) %}
-                <span class="metadata-pill metadata-cook">🔥 {{ tr.t("meta-cook-time") }}: {{ cook_time }}</span>
+                <span>{{ tr.t("meta-cook-time") }} <b>{{ cook_time }}</b></span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.cuisine %}
                 {% when Some with (cuisine) %}
-                <span class="metadata-pill metadata-cuisine">🌍 {{ cuisine }}</span>
+                <span>{{ cuisine }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.diet %}
                 {% when Some with (diet) %}
-                <span class="metadata-pill metadata-diet">🥗 {{ diet }}</span>
+                <span>{{ diet }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.author %}
                 {% when Some with (author) %}
-                <span class="metadata-pill metadata-author">👤 {{ author }}</span>
+                <span>{{ author }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.source %}
                 {% when Some with (source) %}
-                <span class="metadata-pill metadata-source">📖 {{ source }}</span>
+                <span>{{ source }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.source_url %}
                 {% when Some with (source_url) %}
-                <span class="metadata-pill metadata-source-url">🔗 <a href="{{ source_url }}" class="text-blue-600 hover:text-blue-800 hover:underline">{{ source_url|hostname }}</a></span>
+                <span><a href="{{ source_url }}">{{ source_url|hostname }}</a></span>
                 {% when None %}
                 {% endmatch %}
 
                 <!-- Custom metadata -->
                 {% for (key, value) in metadata.custom %}
-                <span class="metadata-pill metadata-custom">{{ key }}: {{ value }}</span>
+                <span><span class="metadata-pill">{{ key }}: {{ value }}</span></span>
                 {% endfor %}
+
+                {% if !tags.is_empty() %}
+                <span class="flex gap-1.5">
+                    {% for tag in tags %}<span class="tag">#{{ tag }}</span>{% endfor %}
+                </span>
+                {% endif %}
+            </div>
+
+            <!-- Description if present -->
+            {% match metadata.description %}
+            {% when Some with (description) %}
+            <div class="recipe-note rounded-[10px] mb-3.5">
+                <p class="m-0">{{ description }}</p>
             </div>
+            {% when None %}
+            {% endmatch %}
 
             {% when None %}
             {% endmatch %}
         </div>
     </div>
 
-    <div class="grid md:grid-cols-3 gap-8 mb-8">
-        <div class="md:col-span-1">
-            <div class="bg-white rounded-2xl shadow-lg p-6">
-                <h2 class="text-xl font-bold mb-4 text-orange-600">🥘 {{ tr.t("recipe-ingredients") }}</h2>
+    <div class="recipe-layout mb-6">
+        <div class="recipe-rail">
+            <div class="card">
+                <div class="card-head">
+                    <h2>{{ tr.t("recipe-ingredients") }}</h2>
+                    <span class="count">{{ ingredients.len() }}</span>
+                </div>
 
                 {% if sections.len() > 1 %}
                     <!-- Display ingredients grouped by section -->
@@ -209,44 +200,32 @@ <h2 class="text-xl font-bold mb-4 text-orange-600">🥘 {{ tr.t("recipe-ingredie
                         {% if section.ingredients.len() > 0 %}
                             {% match section.name %}
                             {% when Some with (name) %}
-                                <h3 class="text-lg font-semibold mt-4 mb-2 text-orange-700">{{ name }}</h3>
+                                <h3 class="section-label px-3.5">{{ name }}</h3>
                             {% when None %}
-                                {% if !loop.first %}<h3 class="text-lg font-semibold mt-4 mb-2 text-orange-700">{{ tr.t("recipe-main-section") }}</h3>{% endif %}
+                                {% if !loop.first %}<h3 class="section-label px-3.5">{{ tr.t("recipe-main-section") }}</h3>{% endif %}
                             {% endmatch %}
 
-                            <ul class="space-y-3 {% if !loop.last %}mb-4{% endif %}">
+                            <ul class="ingredient-list">
                             {% for ingredient in section.ingredients %}
-                            <li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
-                                <div class="flex-1 flex items-center">
+                            <li class="row">
+                                <span class="row-name">
                                     {% match ingredient.reference_path %}
                                     {% when Some with (path) %}
                                         {% if !static_mode %}
                                         <input type="checkbox" checked
-                                               class="ref-checkbox w-4 h-4 text-blue-600 rounded-sm focus:ring-blue-500 mr-2 shrink-0"
+                                               class="ref-checkbox align-middle mr-1.5 accent-[var(--accent)]"
                                                data-ref-path="{{ path }}"
                                                title="{{ tr.t("shopping-include-in-list") }}">
                                         {% endif %}
-                                        <a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="font-medium text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1">
-                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
-                                            </svg>
-                                            {{ ingredient.name }}
-                                        </a>
+                                        <a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="text-info hover:underline">{{ ingredient.name }}</a>
                                     {% when None %}
-                                        <span class="font-medium">{{ ingredient.name }}</span>
+                                        {{ ingredient.name }}
                                     {% endmatch %}
                                     {% match ingredient.note %}
-                                    {% when Some with (note) %}
-                                        <span class="text-sm text-gray-600 italic ml-1 break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>
-                                    {% when None %}
+                                    {% when Some with (note) %}<span class="row-note break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}
                                     {% endmatch %}
-                                </div>
-                                <span class="text-orange-700 font-semibold ml-2">
-                                    {% match ingredient.quantity %}
-                                    {% when Some with (quantity) %}{{ quantity }}{% when None %}{% endmatch %}
-                                    {% match ingredient.unit %}
-                                    {% when Some with (unit) %} {{ unit }}{% when None %}{% endmatch %}
                                 </span>
+                                <span class="row-value">{% match ingredient.quantity %}{% when Some with (quantity) %}{{ quantity }}{% when None %}{% endmatch %}{% match ingredient.unit %}{% when Some with (unit) %} {{ unit }}{% when None %}{% endmatch %}</span>
                             </li>
                             {% endfor %}
                             </ul>
@@ -254,110 +233,91 @@ <h3 class="text-lg font-semibold mt-4 mb-2 text-orange-700">{{ name }}</h3>
                     {% endfor %}
                 {% else %}
                     <!-- Fallback to original flat list for recipes without sections -->
-                    <ul class="space-y-3">
+                    <ul class="ingredient-list">
                     {% for ingredient in ingredients %}
-                    <li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
-                        <div class="flex-1 flex items-center">
+                    <li class="row">
+                        <span class="row-name">
                             {% match ingredient.reference_path %}
                             {% when Some with (path) %}
                                 {% if !static_mode %}
                                 <input type="checkbox" checked
-                                       class="ref-checkbox w-4 h-4 text-blue-600 rounded-sm focus:ring-blue-500 mr-2 shrink-0"
+                                       class="ref-checkbox align-middle mr-1.5 accent-[var(--accent)]"
                                        data-ref-path="{{ path }}"
                                        title="{{ tr.t("shopping-include-in-list") }}">
                                 {% endif %}
-                                <a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="font-medium text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
-                                    </svg>
-                                    {{ ingredient.name }}
-                                </a>
+                                <a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="text-info hover:underline">{{ ingredient.name }}</a>
                             {% when None %}
-                                <span class="font-medium">{{ ingredient.name }}</span>
+                                {{ ingredient.name }}
                             {% endmatch %}
                             {% match ingredient.note %}
-                            {% when Some with (note) %}
-                                <span class="text-sm text-gray-600 italic ml-1 break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>
-                            {% when None %}
+                            {% when Some with (note) %}<span class="row-note break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}
                             {% endmatch %}
-                        </div>
-                        <span class="text-orange-700 font-semibold ml-2">
-                            {% match ingredient.quantity %}
-                            {% when Some with (quantity) %}{{ quantity }}{% when None %}{% endmatch %}
-                            {% match ingredient.unit %}
-                            {% when Some with (unit) %} {{ unit }}{% when None %}{% endmatch %}
                         </span>
+                        <span class="row-value">{% match ingredient.quantity %}{% when Some with (quantity) %}{{ quantity }}{% when None %}{% endmatch %}{% match ingredient.unit %}{% when Some with (unit) %} {{ unit }}{% when None %}{% endmatch %}</span>
                     </li>
                     {% endfor %}
                     </ul>
                 {% endif %}
+            </div>
 
             {% if cookware.len() > 0 %}
-            <h2 class="text-xl font-bold mt-6 mb-4 text-green-600">🍳 {{ tr.t("recipe-cookware") }}</h2>
-            <ul class="cookware-list space-y-2">
-                {% for item in cookware %}
-                <li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
-                    <span class="font-medium">{{ item.name }}</span>
-                </li>
-                {% endfor %}
-            </ul>
-            {% endif %}
+            <div class="card mt-3">
+                <div class="card-head">
+                    <h2>{{ tr.t("recipe-cookware") }}</h2>
+                    <span class="count">{{ cookware.len() }}</span>
+                </div>
+                <ul class="ingredient-list cookware-list">
+                    {% for item in cookware %}
+                    <li class="row"><span class="row-name">{{ item.name }}</span></li>
+                    {% endfor %}
+                </ul>
             </div>
+            {% endif %}
         </div>
 
-        <div class="md:col-span-2">
-            <div class="bg-white rounded-2xl shadow-lg p-6">
+        <div class="card">
+            <div class="card-head">
+                <h2>Method</h2>
+            </div>
                 {% for section in sections %}
                     {% match section.name %}
                     {% when Some with (name) %}
-                        <h3 class="text-xl font-semibold mt-6 mb-4 text-orange-700 border-b-2 border-orange-200 pb-2">{{ name }}</h3>
+                        <h3 class="section-label px-3.5">{{ name }}</h3>
                     {% when None %}
                     {% endmatch %}
 
-                    <ol class="space-y-4 {% if !loop.first %}mt-4{% endif %}">
+                    <ol class="step-list">
                         {% for item in section.items %}
                             {% match item %}
                                 {% when crate::web::templates::RecipeSectionItem::Step with (step) %}
-                                <li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
-                                    <div class="flex flex-col gap-4">
+                                <li>
+                                    <div class="step-number">{{ step.number }}</div>
+                                    <div class="flex-1 min-w-0">
                                         {% match step.image_path %}
                                         {% when Some with (img) %}
-                                        <img class="image-step" src="{{ img }}" />
+                                        <img class="image-step mb-2" src="{{ img }}" />
                                         {% when None %}
                                         {% endmatch %}
-                                        <div class="flex gap-4">
-                                            <div class="step-number">{{ step.number }}</div>
-                                            <div class="flex-1">
-                                                <div class="text-gray-700 mb-2 leading-8">
-                                                {% for step_item in step.items %}
-                                                    {% match step_item %}
-                                                        {% when crate::web::templates::StepItem::Text with (text) %}{{ text }}{% when crate::web::templates::StepItem::Ingredient with { name, reference_path } %}{% match reference_path %}{% when Some with (path) %}<a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="ingredient-badge hover:underline" title="View recipe: {{ name }}">{{ name }}</a>{% when None %}<span class="ingredient-badge">{{ name }}</span>{% endmatch %}{% when crate::web::templates::StepItem::Cookware with (name) %}<span class="cookware-badge">{{ name }}</span>{% when crate::web::templates::StepItem::Timer with (name) %}<span class="timer-badge">⏱️ {{ name }}</span>{% when crate::web::templates::StepItem::Quantity with (qty) %}<span class="font-bold text-orange-600">{{ qty }}</span>{% when crate::web::templates::StepItem::LineBreak %}<br>{% endmatch %}{% endfor %}
-                                                </div>
-                                                {% if step.ingredients.len() > 0 %}
-                                                <div class="text-sm text-gray-600 mt-2 pl-4 border-l-2 border-orange-300">
-                                                    {% for ing in step.ingredients %}
-                                                        <span class="inline-block mr-3">
-                                                            {{ ing.name }}{% match ing.quantity %}{% when Some with (q) %}: {{ q }}{% when None %}{% endmatch %}{% match ing.unit %}{% when Some with (u) %} {{ u }}{% when None %}{% endmatch %}{% match ing.note %}{% when Some with (note) %} <span class="italic text-gray-600 break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}{% endmatch %}{% if !loop.last %},{% endif %}
-                                                        </span>
-                                                    {% endfor %}
-                                                </div>
-                                                {% endif %}
-                                            </div>
+                                        <div class="step-body">
+                                        {% for step_item in step.items %}{% match step_item %}{% when crate::web::templates::StepItem::Text with (text) %}{{ text }}{% when crate::web::templates::StepItem::Ingredient with { name, reference_path } %}{% match reference_path %}{% when Some with (path) %}<a href="{{ prefix }}/recipe/{{ path }}{% if static_mode %}.html{% endif %}" class="ingredient-badge hover:underline" title="View recipe: {{ name }}">{{ name }}</a>{% when None %}<span class="ingredient-badge">{{ name }}</span>{% endmatch %}{% when crate::web::templates::StepItem::Cookware with (name) %}<span class="cookware-badge">{{ name }}</span>{% when crate::web::templates::StepItem::Timer with (name) %}<span class="timer-badge">{{ name }}</span>{% when crate::web::templates::StepItem::Quantity with (qty) %}<span class="font-bold text-accent-text">{{ qty }}</span>{% when crate::web::templates::StepItem::LineBreak %}<br>{% endmatch %}{% endfor %}
+                                        </div>
+                                        {% if step.ingredients.len() > 0 %}
+                                        <div class="step-refs">
+                                            {% for ing in step.ingredients %}
+                                            <span><b>{{ ing.name }}</b>{% match ing.quantity %}{% when Some with (q) %} {{ q }}{% when None %}{% endmatch %}{% match ing.unit %}{% when Some with (u) %} {{ u }}{% when None %}{% endmatch %}{% match ing.note %}{% when Some with (note) %} <span class="italic" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}{% endmatch %}</span>
+                                            {% endfor %}
                                         </div>
+                                        {% endif %}
                                     </div>
                                 </li>
                                 {% when crate::web::templates::RecipeSectionItem::Note with (note) %}
-                                <li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
-                                    <div class="flex items-start gap-2">
-                                        <span class="text-blue-600">📝</span>
-                                        <p class="text-gray-700 italic" style="white-space: pre-line">{{ note }}</p>
-                                    </div>
+                                <li class="recipe-note">
+                                    <p class="m-0" style="white-space: pre-line">{{ note }}</p>
                                 </li>
                             {% endmatch %}
                         {% endfor %}
                     </ol>
                 {% endfor %}
-            </div>
         </div>
     </div>
 </div>
@@ -405,14 +365,10 @@ <h3 class="text-xl font-semibold mt-6 mb-4 text-orange-700 border-b-2 border-ora
                 </svg>
                 {{ tr.t("recipe-added") }}
             `;
-            button.classList.add('bg-gradient-to-r', 'from-green-500', 'to-green-600');
-            button.classList.remove('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
-
-            // Reset after 2 seconds
+            button.classList.add('btn-primary');
             setTimeout(() => {
                 button.innerHTML = originalContent;
-                button.classList.remove('from-green-500', 'to-green-600');
-                button.classList.add('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
+                button.classList.remove('btn-primary');
             }, 2000);
         } else {
             const data = await response.json().catch(() => ({}));
@@ -430,16 +386,17 @@ <h3 class="text-xl font-semibold mt-6 mb-4 text-orange-700 border-b-2 border-ora
 
     const banner = document.createElement('div');
     banner.id = 'recipe-error-banner';
-    banner.className = 'mb-4 bg-red-50 border border-red-200 rounded-xl p-4';
+    banner.className = 'mb-4 card p-3.5 border-l-[3px]';
+    banner.style.borderLeftColor = 'var(--danger)';
     banner.innerHTML = `
         <div class="flex items-start gap-3">
-            <div class="shrink-0 text-red-500">
+            <div class="shrink-0 text-danger">
                 <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                 </svg>
             </div>
-            <p class="flex-1 text-red-700 text-sm font-mono whitespace-pre-wrap">${message}</p>
-            <button onclick="this.closest('#recipe-error-banner').remove()" class="text-red-400 hover:text-red-600">
+            <p class="flex-1 text-danger text-sm font-mono whitespace-pre-wrap">${message}</p>
+            <button onclick="this.closest('#recipe-error-banner').remove()" class="text-faint hover:text-text">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
@@ -447,9 +404,16 @@ <h3 class="text-xl font-semibold mt-6 mb-4 text-orange-700 border-b-2 border-ora
         </div>
     `;
     // Insert before the main content
-    const content = document.querySelector('.grid');
+    const content = document.querySelector('.recipe-layout');
     content.parentNode.insertBefore(banner, content);
 }
+
+function stepScale(delta) {
+    const input = document.getElementById('scale');
+    const next = Math.min(200, Math.max(0.5, (parseFloat(input.value) || 1) + delta));
+    input.value = next;
+    input.dispatchEvent(new Event('change'));
+}
 </script>
 {% endif %}
 {% endblock %}
diff --git a/tests/e2e/recipe-display.spec.ts b/tests/e2e/recipe-display.spec.ts
index 78d4ad3..9e5047f 100644
--- a/tests/e2e/recipe-display.spec.ts
+++ b/tests/e2e/recipe-display.spec.ts
@@ -136,7 +136,7 @@ test.describe('Recipe Display', () => {
     await page.waitForLoadState('networkidle');
 
     // Check that ingredients with notes are displayed
-    const ingredientsList = page.locator('ul.space-y-3 li');
+    const ingredientsList = page.locator('ul.ingredient-list li');
     const count = await ingredientsList.count();
     expect(count).toBeGreaterThan(0);
 
@@ -145,7 +145,7 @@ test.describe('Recipe Display', () => {
 
     if (await ingredientWithNote.count() > 0) {
       // Check note is displayed with correct styling
-      const noteSpan = ingredientWithNote.locator('span.italic.text-gray-600');
+      const noteSpan = ingredientWithNote.locator('span.row-note');
       await expect(noteSpan).toBeVisible();
 
       // Check note content
@@ -161,7 +161,7 @@ test.describe('Recipe Display', () => {
     }
 
     // Check step-level ingredient notes
-    const stepIngredients = page.locator('.text-sm.text-gray-600.mt-2');
+    const stepIngredients = page.locator('.step-refs');
     if (await stepIngredients.count() > 0) {
       const stepNoteSpan = stepIngredients.locator('span.italic').first();
       if (await stepNoteSpan.count() > 0) {
diff --git a/tests/e2e/tablet.spec.ts b/tests/e2e/tablet.spec.ts
index b7e6b2f..17318bb 100644
--- a/tests/e2e/tablet.spec.ts
+++ b/tests/e2e/tablet.spec.ts
@@ -23,6 +23,33 @@ test.describe('Tablet layout', () => {
 
     await expect(page.locator('nav a.nav-pill', { hasText: /Recipes/i })).toBeVisible();
   });
+
+  test('recipe action buttons keep their labels', async ({ page }) => {
+    await page.goto('/recipe/Neapolitan Pizza');
+    await page.waitForLoadState('networkidle');
+
+    // Below lg these used to collapse to unlabelled coloured circles. The
+    // label markup survived inside `hidden lg:inline` spans, so assert on
+    // visibility — textContent alone still matches display:none text.
+    const cook = page.getByRole('button', { name: /Cook/i });
+    await expect(cook).toContainText(/Cook/i);
+    await expect(cook.getByText(/^Cook$/)).toBeVisible();
+
+    const edit = page.getByRole('link', { name: /Edit/i });
+    await expect(edit).toContainText(/Edit/i);
+    await expect(edit.getByText(/^Edit$/)).toBeVisible();
+  });
+
+  test('ingredient rows do not wrap', async ({ page }) => {
+    await page.goto('/recipe/Neapolitan Pizza');
+    await page.waitForLoadState('networkidle');
+
+    // A single-line row is ~30px tall. Wrapping pushes it past 44px.
+    const row = page.locator('.ingredient-list .row', { hasText: 'mozzarella cheese' });
+    const box = await row.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThan(44);
+  });
 });
 
 // The bar has almost zero horizontal slack at the md breakpoint: at exactly

From 77271a9fde9435b1a70544d1d1f090e77fe4c918 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 17:27:42 +0100
Subject: [PATCH 24/42] docs: record JS class-scraping hazard and Task 6
 follow-ups

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md  | 12 ++++++++++++
 .../specs/2026-08-15-web-ui-refresh-design.md        |  4 ++++
 2 files changed, 16 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 6ae1e2c..5404635 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -118,6 +118,18 @@ Known occurrences at the time of writing, by owning task:
 
 Re-grep rather than trusting these line numbers — they drift as files are edited.
 
+**4e. JavaScript scrapes template classes — grep before you delete one.** Several JS files reach into rendered markup by class name, so removing a class from a template can silently break behaviour with no CSS symptom and no obvious test failure. Task 6 hit this: `static/js/cooking-mode.js` selected `.md\:col-span-2 ol` and `.leading-8`, both of which that task deleted, and Cook mode began rendering **empty step cards**.
+
+Before deleting or renaming any class in a template, run:
+
+```bash
+grep -rn "the-class-name" static/js/ templates/ tests/
+```
+
+Known scrapers to check against: `static/js/cooking-mode.js` (`captureStepHTML`), `static/js/search.js`, the inline `<script>` blocks in `templates/recipes.html` (the sorter reads `h3`), `templates/shopping_list.html` and `templates/pantry.html`, and `tests/fixtures/test-helpers.ts`.
+
+Also watch for JS that inserts nodes relative to a structural selector — `showRecipeError()` in `recipe.html` targeted `.grid`, which Task 6 replaced with `.recipe-layout`.
+
 **5. Do not rename these class names.** The E2E suite (134 tests) selects on them directly:
 
 | Class | Used by |
diff --git a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
index a418c79..51402f0 100644
--- a/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
+++ b/docs/superpowers/specs/2026-08-15-web-ui-refresh-design.md
@@ -210,6 +210,10 @@ The token and component layers land **first** and are purely additive — no exi
 
 Raised during implementation review, deliberately not addressed in this refresh:
 
+- **The Method card head is an untranslated literal.** `recipe-method` does not exist in any of the seven locales (`locales/*/recipes.ftl`, `common.ftl`), so `templates/recipe.html` renders the literal string `Method`. Add the key to every locale and swap the literal for `tr.t("recipe-method")`. Inventing a key with no locale entries would have been worse — it renders as the raw key.
+- **The recipe hero image is unchanged.** It keeps `max-h-[500px]` and `mb-6`, so on image-bearing recipes it still consumes the first screen before the compacted layout begins. Shrinking it would serve the tablet-cooking case but was outside this refresh's scope.
+- **`.metaline` separators are CSS `::after` content.** Screen readers may announce the `·` characters. Consider `aria-hidden` wrappers or a different separator mechanism. A wrapped `.metaline` can also leave a separator dangling at the end of a line, since `:last-child` is DOM order rather than visual position.
+
 - **`--ok` is semantically overloaded.** It is both a *status* colour (`.item-status-dot.in-stock` on the pantry page) and a *category* colour (`.cookware-badge` in recipe steps). They are unrelated concerns that happen to want the same green today, so a future change to one silently re-tints the other. A distinct `--cookware-text` token defaulting to the same values would decouple them at zero visual cost.
 - **Inline entities are distinguished mainly by hue.** Ingredients (`--accent-text`, orange) and cookware (`--ok`, green) differ from prose by colour plus `font-weight: 600`. The weight signals "this is an entity", but not *which kind* — and the two hues sit at similar luminance, so readers with deuteranopia or protanopia will struggle to tell them apart. Both clear AA contrast against the page, so this is a hue-discrimination issue rather than a legibility one. `.timer-badge` already carries a shape cue; ingredients and cookware may warrant a similarly cheap non-hue signal.
 

From 56eb54b56176d2bed160316d06e936b5ae763ecd Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 17:34:27 +0100
Subject: [PATCH 25/42] fix(ui): restore break-words on step-level ingredient
 notes

Dropped during the Task 6 rewrite. No test covers this span, so nothing
failed, but long preparation notes could overflow .step-refs without it.
---
 templates/recipe.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/recipe.html b/templates/recipe.html
index 4623d2c..34bacf0 100644
--- a/templates/recipe.html
+++ b/templates/recipe.html
@@ -304,7 +304,7 @@ <h3 class="section-label px-3.5">{{ name }}</h3>
                                         {% if step.ingredients.len() > 0 %}
                                         <div class="step-refs">
                                             {% for ing in step.ingredients %}
-                                            <span><b>{{ ing.name }}</b>{% match ing.quantity %}{% when Some with (q) %} {{ q }}{% when None %}{% endmatch %}{% match ing.unit %}{% when Some with (u) %} {{ u }}{% when None %}{% endmatch %}{% match ing.note %}{% when Some with (note) %} <span class="italic" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}{% endmatch %}</span>
+                                            <span><b>{{ ing.name }}</b>{% match ing.quantity %}{% when Some with (q) %} {{ q }}{% when None %}{% endmatch %}{% match ing.unit %}{% when Some with (u) %} {{ u }}{% when None %}{% endmatch %}{% match ing.note %}{% when Some with (note) %} <span class="italic break-words" aria-label="{{ tr.t("recipe-preparation") }}: {{ note }}">({{ note }})</span>{% when None %}{% endmatch %}</span>
                                             {% endfor %}
                                         </div>
                                         {% endif %}

From eac9639b124bc987de24f7df679765fcfb3e789f Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 17:55:40 +0100
Subject: [PATCH 26/42] fix(ui): repair print path, scale interaction and touch
 targets

---
 static/css/input.css             | 84 ++++++++++++++++++++++++++++++--
 static/js/keyboard-shortcuts.js  |  4 ++
 templates/recipe.html            | 44 ++++++++++++-----
 tests/e2e/recipe-display.spec.ts | 39 +++++++--------
 4 files changed, 137 insertions(+), 34 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index f6f41f5..61d374d 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -37,6 +37,10 @@
     --radius-control: 6px;
     --radius-card:   10px;
     --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
+
+    /* Height of the sticky app bar. Used by .appbar itself and by anything
+       that has to sit clear of it (the sticky ingredient rail). */
+    --appbar-h: 48px;
 }
 
 /* .cooking-overlay is listed here deliberately. Cook mode's chrome is always
@@ -94,6 +98,58 @@
     --color-info:        var(--info);
 }
 
+/* Print: force the light token values regardless of the active theme, and
+   flatten the recipe grid. The print rules in base.html were written against
+   pre-refresh markup (`.bg-white`, `.grid`, `.md\:col-span-*`) and no longer
+   match anything, so without this a dark-theme recipe prints as near-black
+   text on a near-black card. */
+@media print {
+    :root,
+    .dark,
+    .cooking-overlay {
+        --bg:            #ffffff;
+        --surface:       #ffffff;
+        --surface-sunk:  #f5f4f2;
+        --border:        #dddad5;
+        --border-strong: #bbb6ae;
+        --text:          #111111;
+        --text-muted:    #444444;
+        --text-faint:    #666666;
+        --accent:        #a8380c;
+        --accent-text:   #a8380c;
+        --accent-soft:   #f7ece5;
+        --accent-ink:    #ffffff;
+        --ok:            #23624a;
+        --ok-soft:       #eaf3ee;
+        --danger:        #96201a;
+        --danger-soft:   #f8eae9;
+        --info:          #1f4f86;
+        --shadow-card:   none;
+    }
+
+    .card {
+        border-color: var(--border) !important;
+        box-shadow: none !important;
+        break-inside: avoid;
+    }
+
+    /* Single column on paper; the rail must not stay sticky. */
+    .recipe-layout {
+        display: block !important;
+    }
+
+    .recipe-rail {
+        position: static !important;
+        max-height: none !important;
+        overflow: visible !important;
+        margin-bottom: 16px;
+    }
+
+    .step-list > li {
+        break-inside: avoid;
+    }
+}
+
 /* Custom component classes */
 @layer components {
     /* ---------- Surfaces ---------- */
@@ -282,6 +338,9 @@
         text-transform: uppercase;
         color: var(--text-faint);
         margin: 18px 0 8px;
+        /* Baked in so every call site does not have to remember px-3.5;
+           it aligns the label with .row / .card-head padding. */
+        padding: 0 14px;
     }
 
     /* ---------- Status ---------- */
@@ -401,7 +460,7 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        height: 48px;
+        height: var(--appbar-h);
         padding: 0 16px;
         background: var(--surface);
         border-bottom: 1px solid var(--border);
@@ -500,8 +559,9 @@
     }
 
     /* ---------- Recipe page ---------- */
-    /* Fixed-width rail is what guarantees ingredient names and
-       quantities never wrap in the 768–1023px tablet band. */
+    /* The fixed-width rail keeps typical ingredient rows — name on the left,
+       quantity on the right — on a single line in the 768–1023px tablet band.
+       Long names still wrap, which is the intended behaviour. */
     .recipe-layout {
         display: grid;
         gap: 16px;
@@ -514,9 +574,14 @@
             align-items: start;
         }
 
+        /* A rail taller than the viewport would otherwise hide its own bottom
+           for the whole scroll, so it scrolls internally instead. */
         .recipe-rail {
             position: sticky;
-            top: 64px;
+            top: calc(var(--appbar-h) + 16px);
+            max-height: calc(100vh - var(--appbar-h) - 32px);
+            overflow-y: auto;
+            overscroll-behavior: contain;
         }
     }
 
@@ -559,6 +624,17 @@
         font-style: italic;
     }
 
+    /* Coarse pointers get real touch targets. The stated use case is a
+       tablet propped in a kitchen, where 26px buttons are not tappable. */
+    @media (pointer: coarse) {
+        .btn { height: 44px; padding: 0 14px; }
+        .stepper { height: 44px; }
+        .stepper button { width: 40px; }
+        .stepper input, .stepper .value { width: 52px; }
+        .icon-btn { width: 40px; height: 40px; }
+        .ref-checkbox { width: 20px; height: 20px; }
+    }
+
     /* Step images in recipes */
     .image-step {
         @apply w-full max-h-80 object-contain rounded-xl;
diff --git a/static/js/keyboard-shortcuts.js b/static/js/keyboard-shortcuts.js
index 9746aea..cd8813a 100644
--- a/static/js/keyboard-shortcuts.js
+++ b/static/js/keyboard-shortcuts.js
@@ -375,6 +375,10 @@
         }
     }
 
+    // The recipe page's −/+ stepper buttons call this too, so the clamping,
+    // rounding and no-op guard live in exactly one place.
+    window.adjustScale = adjustScale;
+
     // Shopping list page specific shortcuts
     function handleShoppingListShortcuts(event, key) {
         switch (key) {
diff --git a/templates/recipe.html b/templates/recipe.html
index 34bacf0..310f0aa 100644
--- a/templates/recipe.html
+++ b/templates/recipe.html
@@ -45,16 +45,16 @@ <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:t
                 <div class="stepper">
                     <label for="scale" class="sr-only">{{ tr.t("recipe-scale-label") }}</label>
                     <button type="button" aria-label="Decrease scale"
-                            onclick="stepScale(-0.5)">&minus;</button>
+                            onclick="adjustScale(-0.5)">&minus;</button>
                     <input type="number"
                            id="scale"
                            value="{{ scale }}"
                            min="0.5"
                            max="200"
                            step="0.5"
-                           onchange="window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${this.value}`">
+                           onchange="goToScale(this.value)">
                     <button type="button" aria-label="Increase scale"
-                            onclick="stepScale(0.5)">+</button>
+                            onclick="adjustScale(0.5)">+</button>
                 </div>
                 <a href="{{ prefix }}/edit/{{ recipe_path }}" class="btn" title="{{ tr.t("action-edit") }}">
                     <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -200,9 +200,9 @@ <h2>{{ tr.t("recipe-ingredients") }}</h2>
                         {% if section.ingredients.len() > 0 %}
                             {% match section.name %}
                             {% when Some with (name) %}
-                                <h3 class="section-label px-3.5">{{ name }}</h3>
+                                <h3 class="section-label">{{ name }}</h3>
                             {% when None %}
-                                {% if !loop.first %}<h3 class="section-label px-3.5">{{ tr.t("recipe-main-section") }}</h3>{% endif %}
+                                {% if !loop.first %}<h3 class="section-label">{{ tr.t("recipe-main-section") }}</h3>{% endif %}
                             {% endmatch %}
 
                             <ul class="ingredient-list">
@@ -282,7 +282,7 @@ <h2>Method</h2>
                 {% for section in sections %}
                     {% match section.name %}
                     {% when Some with (name) %}
-                        <h3 class="section-label px-3.5">{{ name }}</h3>
+                        <h3 class="section-label">{{ name }}</h3>
                     {% when None %}
                     {% endmatch %}
 
@@ -408,12 +408,34 @@ <h3 class="section-label px-3.5">{{ name }}</h3>
     content.parentNode.insertBefore(banner, content);
 }
 
-function stepScale(delta) {
-    const input = document.getElementById('scale');
-    const next = Math.min(200, Math.max(0.5, (parseFloat(input.value) || 1) + delta));
-    input.value = next;
-    input.dispatchEvent(new Event('change'));
+// Rescaling is a full page navigation, which would otherwise dump you back at
+// the title. Stash the scroll offset first and restore it on the way in, so
+// tapping −/+ while reading step 8 leaves you at step 8.
+// The −/+ buttons themselves call adjustScale() from keyboard-shortcuts.js,
+// which clamps to the input's own min/max and skips the change event entirely
+// when the value did not move.
+const SCALE_SCROLL_KEY = 'recipe-scroll:' + window.location.pathname;
+
+function goToScale(value) {
+    try {
+        sessionStorage.setItem(SCALE_SCROLL_KEY, String(window.scrollY));
+    } catch (e) { /* private mode / storage disabled */ }
+    window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${value}`;
 }
+
+// Only ever set immediately before a scale navigation, and cleared as soon as
+// it is read, so arriving at this page any other way restores nothing.
+(function restoreScaleScroll() {
+    let stashed = null;
+    try {
+        stashed = sessionStorage.getItem(SCALE_SCROLL_KEY);
+        if (stashed !== null) sessionStorage.removeItem(SCALE_SCROLL_KEY);
+    } catch (e) { return; }
+    if (stashed === null) return;
+    const y = parseInt(stashed, 10);
+    if (!Number.isFinite(y) || y <= 0) return;
+    window.addEventListener('load', function () { window.scrollTo(0, y); });
+})();
 </script>
 {% endif %}
 {% endblock %}
diff --git a/tests/e2e/recipe-display.spec.ts b/tests/e2e/recipe-display.spec.ts
index 9e5047f..a8d1ea6 100644
--- a/tests/e2e/recipe-display.spec.ts
+++ b/tests/e2e/recipe-display.spec.ts
@@ -109,25 +109,26 @@ test.describe('Recipe Display', () => {
     await helpers.navigateTo('/recipe/Breakfast/Easy Pancakes.cook');
     await page.waitForLoadState('networkidle');
 
-    // Check for metadata pills
-    const metadataPills = page.locator('.metadata-pill');
-
-    if (await metadataPills.count() > 0) {
-      await expect(metadataPills.first()).toBeVisible();
-
-      // Check for common metadata like servings, time, etc.
-      const metadataText = await metadataPills.allTextContents();
-      const hasValidMetadata = metadataText.some(text =>
-        text.includes('servings') ||
-        text.includes('time') ||
-        text.includes('difficulty') ||
-        text.includes('cuisine')
-      );
-
-      if (hasValidMetadata) {
-        expect(hasValidMetadata).toBeTruthy();
-      }
-    }
+    // Metadata renders as dot-separated entries inside #metadata-container.
+    // NOT `.metadata-pill` — since the UI refresh that class is emitted only
+    // for *custom* metadata keys, and Easy Pancakes has none, so selecting on
+    // it yields a count of 0 and silently skips every assertion below.
+    const metadataEntries = page.locator('#metadata-container > span');
+
+    expect(await metadataEntries.count()).toBeGreaterThan(0);
+    await expect(metadataEntries.first()).toBeVisible();
+
+    const metadataText = (await metadataEntries.allTextContents())
+      .join(' ')
+      .toLowerCase();
+
+    // Easy Pancakes declares servings, prep time, cook time, author and tags.
+    expect(metadataText).toContain('2');
+    expect(metadataText).toContain('servings');
+    expect(metadataText).toContain('5 min');
+    expect(metadataText).toContain('20 min');
+    expect(metadataText).toContain('cookcli team');
+    expect(metadataText).toContain('#breakfast');
   });
 
   test('should display ingredient notes from shorthand notation', async ({ page }) => {

From cd506fc0504ac86edbeddfbb49aa96804a5ebb89 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 17:57:48 +0100
Subject: [PATCH 27/42] fix(ui): meet WCAG 2.5.8 minimum on coarse-pointer
 targets

The 20px checkbox failed the 24x24 minimum the finding itself cited, and
.stepper's border-box meant its buttons resolved to 42px, not 44.
---
 static/css/input.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 61d374d..2698b12 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -628,11 +628,14 @@
        tablet propped in a kitchen, where 26px buttons are not tappable. */
     @media (pointer: coarse) {
         .btn { height: 44px; padding: 0 14px; }
-        .stepper { height: 44px; }
-        .stepper button { width: 40px; }
+        /* 46px outer so the 1px borders leave a 44px content box — the
+           buttons are height:100% of that, so they land on 44, not 42. */
+        .stepper { height: 46px; }
+        .stepper button { width: 44px; }
         .stepper input, .stepper .value { width: 52px; }
-        .icon-btn { width: 40px; height: 40px; }
-        .ref-checkbox { width: 20px; height: 20px; }
+        .icon-btn { width: 44px; height: 44px; }
+        /* 24px is the WCAG 2.2 SC 2.5.8 minimum, not a rounded-down 20. */
+        .ref-checkbox { width: 24px; height: 24px; }
     }
 
     /* Step images in recipes */

From 12a5cc757a171d7e945eb80013d66da661098c66 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 19:54:20 +0100
Subject: [PATCH 28/42] feat(ui): dense recipes index, remove client-side
 sorter

Cards drop from ~190px hero tiles to ~59px rows. The client-side sorter
is removed at the user's request: it reparented every grid child, which
constrained the markup (title had to stay an h3) and blocked the grouped
layout the design calls for.

Locale keys sort-by/sort-name/sort-modified/sort-created/
sort-direction-toggle are now unused but left in place, in case sorting
returns server-side.
---
 templates/recipes.html   | 152 ++++++---------------------------------
 tests/e2e/tablet.spec.ts |  11 +++
 2 files changed, 32 insertions(+), 131 deletions(-)

diff --git a/templates/recipes.html b/templates/recipes.html
index 6e81f31..30a067a 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -18,13 +18,13 @@
     </nav>
     {% endif %}
 
-    <div class="flex items-center justify-between mb-8">
-        <h1 class="text-3xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
+    <div class="flex items-center justify-between gap-3 mb-4">
+        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">
             {{ current_name }}
         </h1>
         {% if !static_mode %}
-        <a href="{{ new_recipe_url }}" class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:from-orange-600 hover:to-red-600 transition-all shadow-md flex items-center gap-2">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <a href="{{ new_recipe_url }}" class="btn btn-primary">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
             </svg>
             {{ tr.t("new-recipe") }}
@@ -32,16 +32,6 @@ <h1 class="text-3xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-
         {% endif %}
     </div>
 
-    <div id="sort-controls" class="hidden items-center gap-2 mb-6">
-        <label for="sort-field" class="text-sm text-gray-500 dark:text-gray-400">{{ tr.t("sort-by") }}</label>
-        <select id="sort-field" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-hidden focus:ring-2 focus:ring-purple-300">
-            <option value="name">{{ tr.t("sort-name") }}</option>
-            <option value="modified">{{ tr.t("sort-modified") }}</option>
-            <option value="created" id="sort-created-option">{{ tr.t("sort-created") }}</option>
-        </select>
-        <button id="sort-dir" class="px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors" title="{{ tr.t("sort-direction-toggle") }}">↑</button>
-    </div>
-
     {% match todays_menu %}
     {% when Some with (menu) %}
     <div class="mb-8 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-lg p-6 text-white">
@@ -65,62 +55,39 @@ <h2 class="text-xl font-bold">{{ tr.t("todays-menu-title") }}</h2>
     {% when None %}
     {% endmatch %}
 
-    <div id="recipes-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div id="recipes-grid" class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(230px,1fr))]">
         {% for item in items %}
         {% if item.is_directory %}
-        <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
-            <div class="p-6 flex-1">
-                <div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mb-4">
-                    <span class="text-2xl">📁</span>
-                </div>
-                <h3 class="font-bold text-lg mb-2">{{ item.name }}</h3>
+        <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" class="recipe-card">
+            <span class="recipe-card-icon">📁</span>
+            <span class="min-w-0">
+                <h3 class="recipe-card-title">{{ item.name }}</h3>
                 {% match item.count %}
                 {% when Some with (count) %}
-                <span class="text-sm text-accent-text font-medium">{{ tr.tn("recipes-count", count) }}</span>
+                <span class="recipe-card-sub">{{ tr.tn("recipes-count", count) }}</span>
                 {% when None %}
                 {% endmatch %}
-            </div>
+            </span>
         </a>
         {% else %}
         <a href="{{ prefix }}/{% if static_mode %}{% if item.is_menu %}menu{% else %}recipe{% endif %}{% else %}recipe{% endif %}/{{ item.path }}{% if static_mode %}.html{% endif %}"
            data-type="recipe"
            {% if let Some(ts) = item.modified_at %}data-modified="{{ ts }}"{% endif %}
            {% if let Some(ts) = item.created_at %}data-created="{{ ts }}"{% endif %}
-           class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
+           class="recipe-card">
             {% match item.image_path %}
             {% when Some with (img) %}
-            <div class="h-48 bg-gray-100 overflow-hidden">
-                <img src="{{ img }}" alt="{{ item.name }}" class="w-full h-full object-cover hover:scale-110 transition-transform duration-300">
-            </div>
-            <div class="p-6">
+            <img src="{{ img }}" alt="" class="recipe-card-icon object-cover" width="30" height="30">
             {% when None %}
-            <div class="p-6">
-                <div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br {% if item.is_menu %}from-purple-400 to-pink-500{% else %}from-orange-400 to-pink-500{% endif %} rounded-full mb-4">
-                    <span class="text-2xl">{% if item.is_menu %}📋{% else %}🍽️{% endif %}</span>
-                </div>
+            <span class="recipe-card-icon">{% if item.is_menu %}📋{% else %}🍽{% endif %}</span>
             {% endmatch %}
-            <h3 class="font-bold text-lg mb-2 text-gray-800">
-                {{ item.name }}
-                {% if item.is_menu %}
-                <span class="ml-2 text-xs bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 px-2 py-1 rounded-full font-semibold">{{ tr.t("recipe-type-menu") }}</span>
-                {% endif %}
-            </h3>
-            {% match item.description %}
-            {% when Some with (description) %}
-            <p class="text-gray-600 text-sm">{{ description }}</p>
-            {% when None %}
-            {% endmatch %}
-            {% if !item.tags.is_empty() %}
-            <div class="mt-3 flex flex-wrap gap-2">
-                {% for tag in item.tags.iter().take(3) %}
-                <span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">{{ tag }}</span>
-                {% endfor %}
-                {% if item.tags.len() > 3 %}
-                <span class="text-xs text-gray-500">+{{ item.tags.len() - 3 }}</span>
-                {% endif %}
-            </div>
-            {% endif %}
-            </div>
+            <span class="min-w-0">
+                <h3 class="recipe-card-title">{{ item.name }}</h3>
+                <span class="recipe-card-sub">
+                    {%- if item.is_menu %}{{ tr.t("recipe-type-menu") }}{% if !item.tags.is_empty() %} · {% endif %}{% endif -%}
+                    {%- for tag in item.tags.iter().take(3) %}{{ tag }}{% if !loop.last %} · {% endif %}{% endfor -%}
+                </span>
+            </span>
         </a>
         {% endif %}
         {% endfor %}
@@ -134,80 +101,3 @@ <h3 class="font-bold text-lg mb-2 text-gray-800">
 </div>
 {% endblock %}
 
-{% block scripts %}
-<script>
-(function () {
-    const grid = document.getElementById('recipes-grid');
-    const controls = document.getElementById('sort-controls');
-    const fieldSelect = document.getElementById('sort-field');
-    const dirBtn = document.getElementById('sort-dir');
-    const createdOption = document.getElementById('sort-created-option');
-
-    if (!grid) return;
-
-    let sortField = 'name';
-    let sortDir = 'asc';
-
-    // Hide Created option unless every recipe card has a creation date
-    const allRecipeCards = grid.querySelectorAll('[data-type="recipe"]');
-    const allHaveCreated = allRecipeCards.length > 0 &&
-        Array.from(allRecipeCards).every(el => el.hasAttribute('data-created'));
-    if (!allHaveCreated && createdOption) {
-        createdOption.remove();
-    }
-
-    // Show controls only when there are at least 2 recipe cards
-    const recipeCount = grid.querySelectorAll('[data-type="recipe"]').length;
-    if (recipeCount >= 2) {
-        controls.classList.remove('hidden');
-        controls.classList.add('flex');
-    }
-
-    function getValue(el) {
-        if (sortField === 'name') {
-            return (el.querySelector('h3')?.textContent ?? '').trim().toLowerCase();
-        }
-        const attr = sortField === 'modified' ? 'data-modified' : 'data-created';
-        const raw = el.getAttribute(attr);
-        if (raw === null) return null;
-        const n = parseInt(raw, 10);
-        return Number.isNaN(n) ? null : n;
-    }
-
-    function applySort() {
-        const all = Array.from(grid.children);
-        const dirs = all.filter(el => el.dataset.type === 'directory');
-        const recipes = all.filter(el => el.dataset.type === 'recipe');
-        const others = all.filter(el => !el.dataset.type);
-
-        recipes.sort((a, b) => {
-            const av = getValue(a);
-            const bv = getValue(b);
-            if (av === null && bv === null) return 0;
-            if (av === null) return 1;
-            if (bv === null) return -1;
-            const cmp = typeof av === 'string' ? av.localeCompare(bv) : av - bv;
-            return sortDir === 'asc' ? cmp : -cmp;
-        });
-
-        dirs.forEach(el => grid.appendChild(el));
-        recipes.forEach(el => grid.appendChild(el));
-        others.forEach(el => grid.appendChild(el));
-
-        dirBtn.textContent = sortDir === 'asc' ? '↑' : '↓';
-    }
-
-    fieldSelect.addEventListener('change', function () {
-        sortField = this.value;
-        // Default to desc for date sorts (newest first), asc for name
-        sortDir = sortField === 'name' ? 'asc' : 'desc';
-        applySort();
-    });
-
-    dirBtn.addEventListener('click', function () {
-        sortDir = sortDir === 'asc' ? 'desc' : 'asc';
-        applySort();
-    });
-})();
-</script>
-{% endblock %}
diff --git a/tests/e2e/tablet.spec.ts b/tests/e2e/tablet.spec.ts
index 17318bb..ea1ea7a 100644
--- a/tests/e2e/tablet.spec.ts
+++ b/tests/e2e/tablet.spec.ts
@@ -50,6 +50,17 @@ test.describe('Tablet layout', () => {
     expect(box).not.toBeNull();
     expect(box!.height).toBeLessThan(44);
   });
+
+  test('recipe cards are dense', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Hero cards were ~190px tall for one word and a count.
+    const card = page.locator('.recipe-card').first();
+    const box = await card.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.height).toBeLessThan(80);
+  });
 });
 
 // The bar has almost zero horizontal slack at the md breakpoint: at exactly

From bf8271feaf4ea7af5ba45a2ba8cb2732b8fb3041 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 20:28:35 +0100
Subject: [PATCH 29/42] feat(ui): compact shopping list

---
 templates/base.html          |  16 +++
 templates/shopping_list.html | 191 +++++++++++++++--------------------
 2 files changed, 95 insertions(+), 112 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index fa5f733..c1874e9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -574,6 +574,22 @@
                 margin-bottom: 0.15rem !important;
             }
 
+            /* Post-refresh markup: aisle groups are .card + .card-head, items
+               are .row. Same compaction as the utility selectors above, which
+               no longer match anything the page renders. */
+            #shopping-list-results .card {
+                margin-bottom: 0.15rem !important;
+            }
+
+            #shopping-list-results .card-head {
+                padding: 0 !important;
+                border-bottom: none !important;
+            }
+
+            #shopping-list-results .row {
+                padding: 0 !important;
+            }
+
             #shopping-list-results .mb-4,
             #shopping-list-results .mb-3 {
                 margin-bottom: 0 !important;
diff --git a/templates/shopping_list.html b/templates/shopping_list.html
index cdaca99..63276f2 100644
--- a/templates/shopping_list.html
+++ b/templates/shopping_list.html
@@ -6,15 +6,16 @@
 <div class="flex flex-col lg:flex-row gap-6">
     <!-- Sidebar with selected recipes and pantry -->
     <div class="lg:w-2/5 xl:w-1/3">
-        <div class="bg-white rounded-2xl shadow-lg p-6 sticky top-6">
-            <h3 class="font-bold text-lg mb-3 text-orange-600">{{ tr.t("shopping-selected-recipes") }}</h3>
-            <div id="selected-recipes" class="space-y-2 mb-6">
+        <div class="sticky top-6 space-y-2.5">
+            <div class="card">
+                <div class="card-head"><h2>{{ tr.t("shopping-selected-recipes") }}</h2></div>
+                <div id="selected-recipes"></div>
             </div>
 
             <!-- Pantry items section -->
-            <div id="pantry-section" class="hidden">
-                <h3 class="font-bold text-lg mb-3 text-green-600">{{ tr.t("shopping-in-pantry") }}</h3>
-                <div id="pantry-items" class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-3 border border-green-200 max-h-64 overflow-y-auto">
+            <div id="pantry-section" class="card hidden">
+                <div class="card-head"><h2>{{ tr.t("shopping-in-pantry") }}</h2></div>
+                <div id="pantry-items" class="max-h-64 overflow-y-auto">
                 </div>
             </div>
         </div>
@@ -22,18 +23,18 @@ <h3 class="font-bold text-lg mb-3 text-green-600">{{ tr.t("shopping-in-pantry")
 
     <!-- Main content area with shopping list -->
     <div class="flex-1">
-        <div id="error-banner" class="hidden mb-4 bg-red-50 border border-red-200 rounded-xl p-4">
+        <div id="error-banner" class="hidden mb-3 card p-3.5 border-l-[3px] border-l-danger bg-danger-soft">
             <div class="flex items-start gap-3">
-                <div class="shrink-0 text-red-500">
+                <div class="shrink-0 text-danger">
                     <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                     </svg>
                 </div>
                 <div class="flex-1">
-                    <p id="error-message" class="text-red-700 text-sm font-mono whitespace-pre-wrap"></p>
+                    <p id="error-message" class="text-text text-sm font-mono whitespace-pre-wrap"></p>
                 </div>
-                <button onclick="hideError()" class="text-red-400 hover:text-red-600">
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button type="button" onclick="hideError()" class="icon-btn shrink-0" aria-label="Dismiss">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
                 </button>
@@ -42,39 +43,39 @@ <h3 class="font-bold text-lg mb-3 text-green-600">{{ tr.t("shopping-in-pantry")
         <!-- Heading and list actions share a row; the heading lives here rather
              than in the JS-rendered list so the buttons stay put while the list
              below them re-renders. -->
-        <div id="shopping-list-header" class="hidden flex-wrap items-center justify-between gap-3 mb-4">
-            <h2 class="text-2xl font-bold text-orange-700">{{ tr.t("shopping-title") }}</h2>
-            <div class="flex items-center gap-2">
+        <div id="shopping-list-header" class="hidden flex-wrap items-center justify-between gap-3 mb-3">
+            <h2 class="text-[20px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("shopping-title") }}</h2>
+            <div class="flex items-center gap-1.5">
                 <!-- Split button: the left half copies, the right half opens the
                      checkboxes that decide what the copied text contains. -->
                 <div id="copy-list-group" class="hidden relative">
                     <div class="flex">
-                        <button id="copy-list-button" onclick="copyList()" class="px-4 py-2 bg-orange-600 text-white rounded-l-lg hover:bg-orange-700 transition-all">
+                        <button id="copy-list-button" type="button" onclick="copyList()" class="btn btn-primary rounded-r-none">
                             {{ tr.t("shopping-copy") }}
                         </button>
                         <button id="copy-options-toggle" type="button" onclick="toggleCopyOptions()"
                             aria-haspopup="true" aria-expanded="false" aria-controls="copy-options-menu"
                             aria-label="{{ tr.t("shopping-copy-options") }}"
-                            class="px-3 py-2 bg-orange-600 text-white rounded-r-lg border-l border-orange-500 hover:bg-orange-700 transition-all">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            class="btn btn-primary rounded-l-none -ml-px px-2 border-l-accent-ink/25">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                             </svg>
                         </button>
                     </div>
-                    <div id="copy-options-menu" class="hidden absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl z-50 py-1">
-                        <label class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
+                    <div id="copy-options-menu" class="hidden absolute right-0 mt-1.5 w-64 card shadow-lg z-50 py-1">
+                        <label class="flex items-center gap-3 px-3.5 py-2 text-sm text-text hover:bg-sunk cursor-pointer">
                             <input type="checkbox" id="copy-option-aisles" onchange="onCopyOptionChange()"
-                                class="w-4 h-4 text-orange-600 rounded-sm focus:ring-orange-500">
+                                class="w-4 h-4 accent-[var(--accent)]">
                             <span>{{ tr.t("shopping-copy-include-aisles") }}</span>
                         </label>
-                        <label class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
+                        <label class="flex items-center gap-3 px-3.5 py-2 text-sm text-text hover:bg-sunk cursor-pointer">
                             <input type="checkbox" id="copy-option-amounts" onchange="onCopyOptionChange()"
-                                class="w-4 h-4 text-orange-600 rounded-sm focus:ring-orange-500">
+                                class="w-4 h-4 accent-[var(--accent)]">
                             <span>{{ tr.t("shopping-copy-include-amounts") }}</span>
                         </label>
                     </div>
                 </div>
-                <button onclick="clearList()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all">
+                <button type="button" onclick="clearList()" class="btn">
                     {{ tr.t("shopping-clear-all") }}
                 </button>
             </div>
@@ -152,84 +153,59 @@ <h2 class="text-2xl font-bold text-orange-700">{{ tr.t("shopping-title") }}</h2>
     setHeaderVisible(shoppingList.length > 0);
 
     if (shoppingList.length === 0) {
-        container.innerHTML = '<p class="text-gray-500 text-sm">' + escHtml({{ tr.t("shopping-no-recipes")|json|safe }}) + '</p>';
-        document.getElementById('list-content').innerHTML = '<p class="text-gray-500">' + escHtml({{ tr.t("shopping-no-items")|json|safe }}) + '</p>';
+        container.innerHTML = '<p class="px-3.5 py-2.5 text-sm text-muted">' + escHtml({{ tr.t("shopping-no-recipes")|json|safe }}) + '</p>';
+        document.getElementById('list-content').innerHTML = '<p class="card px-3.5 py-2.5 text-sm text-muted">' + escHtml({{ tr.t("shopping-no-items")|json|safe }}) + '</p>';
         lastListData = null;
         updateCopyButtonVisibility();
         return;
     }
 
+    // Nested references under a recipe, rendered as a quiet indented list.
+    const renderRefs = (refs) => refs.length === 0 ? '' : `
+        <ul class="mt-1 pl-2.5 border-l border-line space-y-0.5">
+            ${refs.map(ref => {
+                const refName = ref.split('/').pop();
+                return `<li class="text-[12.5px] text-faint">
+                    <a href="{{ prefix }}/recipe/${encodeRecipePath(ref)}" class="hover:text-accent-text hover:underline">${escHtml(refName)}</a>
+                </li>`;
+            }).join('')}
+        </ul>`;
+
     container.innerHTML = shoppingList.map((item, index) => {
         // Plan/menu entry — show nested recipes
         if (item.recipes) {
             const recipesHtml = item.recipes.map(recipe => {
-                const refs = recipe.included_references || [];
-                const refsHtml = refs.length > 0 ? `
-                    <ul class="mt-1 ml-8 pl-2 border-l border-indigo-200 space-y-0.5">
-                        ${refs.map(ref => {
-                            const refName = ref.split('/').pop();
-                            return `<li class="text-xs text-gray-400 flex items-center gap-1">
-                                <svg class="w-3 h-3 text-blue-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
-                                </svg>
-                                <a href="{{ prefix }}/recipe/${encodeRecipePath(ref)}" class="hover:text-orange-600 transition-colors">${escHtml(refName)}</a>
-                            </li>`;
-                        }).join('')}
-                    </ul>` : '';
-                return `<li class="text-sm text-gray-600 flex flex-col">
-                    <div class="flex items-center gap-1">
-                        <svg class="w-3 h-3 text-purple-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                        </svg>
-                        <a href="{{ prefix }}/recipe/${encodeRecipePath(recipe.path)}" class="hover:text-orange-600 transition-colors">${escHtml(recipe.name)}</a>
-                        <span class="text-purple-400 text-xs">(×${escHtml(recipe.scale)})</span>
-                    </div>
-                    ${refsHtml}
+                return `<li class="text-[13px] text-muted">
+                    <a href="{{ prefix }}/recipe/${encodeRecipePath(recipe.path)}" class="hover:text-accent-text hover:underline">${escHtml(recipe.name)}</a>
+                    <span class="text-faint text-xs">×${escHtml(recipe.scale)}</span>
+                    ${renderRefs(recipe.included_references || [])}
                 </li>`;
             }).join('');
 
             return `
-            <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-3 rounded-lg border border-indigo-200">
-                <div class="flex items-center justify-between">
-                    <div>
-                        <a href="{{ prefix }}/recipe/${encodeRecipePath(item.path)}" class="font-medium text-gray-800 hover:text-orange-600 underline decoration-gray-300 hover:decoration-orange-400 transition-colors">${escHtml(item.name)}</a>
-                        <span class="text-indigo-600 ml-2 text-xs font-semibold uppercase">plan</span>
-                    </div>
-                    <button type="button" data-action="remove-recipe" data-path="${escHtml(item.path)}" class="text-red-500 hover:text-red-700 font-medium text-sm">
-                        {{ tr.t("shopping-remove") }}
-                    </button>
+            <div class="row items-start">
+                <div class="row-name">
+                    <a href="{{ prefix }}/recipe/${encodeRecipePath(item.path)}" class="font-medium text-text hover:text-accent-text hover:underline">${escHtml(item.name)}</a>
+                    <span class="tag ml-1.5">plan</span>
+                    <ul class="mt-1.5 pl-2.5 border-l border-line space-y-1">${recipesHtml}</ul>
                 </div>
-                <ul class="mt-2 ml-4 space-y-1">${recipesHtml}</ul>
+                <button type="button" data-action="remove-recipe" data-path="${escHtml(item.path)}" class="btn shrink-0">
+                    {{ tr.t("shopping-remove") }}
+                </button>
             </div>`;
         }
 
         // Regular recipe entry
-        const refs = item.included_references || [];
-        const refsHtml = refs.length > 0 ? `
-            <ul class="mt-1 ml-8 pl-2 border-l border-purple-200 space-y-0.5">
-                ${refs.map(ref => {
-                    const refName = ref.split('/').pop();
-                    return `<li class="text-sm text-gray-500 flex items-center gap-1">
-                        <svg class="w-3 h-3 text-blue-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
-                        </svg>
-                        <a href="{{ prefix }}/recipe/${encodeRecipePath(ref)}" class="hover:text-orange-600 transition-colors">${escHtml(refName)}</a>
-                    </li>`;
-                }).join('')}
-            </ul>` : '';
-
         return `
-        <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-3 rounded-lg border border-purple-200">
-            <div class="flex items-center justify-between">
-                <div>
-                    <a href="{{ prefix }}/recipe/${encodeRecipePath(item.path)}" class="font-medium text-gray-800 hover:text-orange-600 underline decoration-gray-300 hover:decoration-orange-400 transition-colors">${escHtml(item.name)}</a>
-                    <span class="text-purple-600 ml-2 text-sm">(×${escHtml(item.scale)})</span>
-                </div>
-                <button type="button" data-action="remove-recipe" data-path="${escHtml(item.path)}" class="text-red-500 hover:text-red-700 font-medium text-sm">
-                    {{ tr.t("shopping-remove") }}
-                </button>
+        <div class="row items-start">
+            <div class="row-name">
+                <a href="{{ prefix }}/recipe/${encodeRecipePath(item.path)}" class="font-medium text-text hover:text-accent-text hover:underline">${escHtml(item.name)}</a>
+                <span class="text-faint text-xs">×${escHtml(item.scale)}</span>
+                ${renderRefs(item.included_references || [])}
             </div>
-            ${refsHtml}
+            <button type="button" data-action="remove-recipe" data-path="${escHtml(item.path)}" class="btn shrink-0">
+                {{ tr.t("shopping-remove") }}
+            </button>
         </div>`;
     }).join('');
 }
@@ -467,28 +443,24 @@ <h2 class="text-2xl font-bold text-orange-700">{{ tr.t("shopping-title") }}</h2>
     // Display items to buy (organized by aisle)
     if (data.categories && data.categories.length > 0) {
         html += data.categories.map(category => `
-            <div class="mb-6 bg-white rounded-lg p-4 shadow-xs">
-                <h3 class="font-semibold text-lg mb-3 text-orange-600">${escHtml(category.category)}</h3>
-                <ul class="space-y-2">
+            <div class="card mb-2.5">
+                <div class="card-head plain"><h3>${escHtml(category.category)}</h3></div>
+                <ul>
                     ${category.items.map((item, idx) => {
                         // Use ingredient name as the unique ID for localStorage
                         const itemId = `item-${item.name.replace(/\s+/g, '-')}`;
                         return `
-                        <li class="flex items-center justify-between py-2 px-3 hover:bg-gray-50 rounded-sm transition-colors">
-                            <div class="flex items-center flex-1">
-                                <input type="checkbox"
-                                    id="${escHtml(itemId)}"
-                                    class="w-5 h-5 text-orange-600 rounded-sm focus:ring-orange-500 mr-3"
-                                    data-action="toggle-item"
-                                    data-item-id="${escHtml(itemId)}"
-                                    data-ingredient-name="${escHtml(item.name)}">
-                                <label for="${escHtml(itemId)}" class="cursor-pointer flex-1">
-                                    <span class="item-name">${escHtml(item.name)}</span>
-                                </label>
-                            </div>
-                            <span class="text-gray-600 ml-4">
-                                ${escHtml(formatQuantities(item.quantities))}
-                            </span>
+                        <li class="row">
+                            <input type="checkbox"
+                                id="${escHtml(itemId)}"
+                                class="w-4 h-4 accent-[var(--accent)]"
+                                data-action="toggle-item"
+                                data-item-id="${escHtml(itemId)}"
+                                data-ingredient-name="${escHtml(item.name)}">
+                            <label for="${escHtml(itemId)}" class="row-name cursor-pointer">
+                                <span class="item-name">${escHtml(item.name)}</span>
+                            </label>
+                            <span class="row-value">${escHtml(formatQuantities(item.quantities))}</span>
                         </li>
                     `}).join('')}
                 </ul>
@@ -500,24 +472,19 @@ <h3 class="font-semibold text-lg mb-3 text-orange-600">${escHtml(category.catego
     if (data.pantry_items && data.pantry_items.length > 0) {
         pantrySection.classList.remove('hidden');
         pantryItems.innerHTML = `
-            <ul class="space-y-2 text-sm">
+            <ul>
                 ${data.pantry_items.map((item, idx) => {
                     // Handle both string array and object array formats
                     const itemName = typeof item === 'string' ? item : item.name;
                     const itemQuantities = typeof item === 'string' ? null : item.quantities;
                     return `
-                    <li class="flex items-center justify-between py-1">
-                        <div class="flex items-center flex-1">
-                            <svg class="w-4 h-4 text-green-600 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                            </svg>
-                            <span class="text-green-800">${escHtml(itemName)}</span>
-                        </div>
-                        <span class="text-green-700 text-xs ml-2">
-                            ${itemQuantities ? escHtml(formatQuantities(itemQuantities)) : ''}
-                        </span>
+                    <li class="row">
+                        <span class="item-status-dot in-stock"></span>
+                        <span class="row-name">${escHtml(itemName)}</span>
+                        <span class="row-value">${itemQuantities ? escHtml(formatQuantities(itemQuantities)) : ''}</span>
                     </li>
-                `}).join('')}
+                    `;
+                }).join('')}
             </ul>
         `;
     } else {
@@ -525,7 +492,7 @@ <h3 class="font-semibold text-lg mb-3 text-orange-600">${escHtml(category.catego
     }
 
     if (html === '') {
-        contentDiv.innerHTML = '<p class="text-gray-500">' + escHtml({{ tr.t("shopping-no-items")|json|safe }}) + '</p>';
+        contentDiv.innerHTML = '<p class="card px-3.5 py-2.5 text-sm text-muted">' + escHtml({{ tr.t("shopping-no-items")|json|safe }}) + '</p>';
     } else {
         contentDiv.innerHTML = html;
         // Load saved checked states

From b406f5b0d4c9786f5733dfaa93f98251b88ce012 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 20:33:27 +0100
Subject: [PATCH 30/42] fix(ui): bump shopping list checkboxes to 24px on
 coarse pointers

---
 static/css/input.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 2698b12..42ee111 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -634,8 +634,11 @@
         .stepper button { width: 44px; }
         .stepper input, .stepper .value { width: 52px; }
         .icon-btn { width: 44px; height: 44px; }
-        /* 24px is the WCAG 2.2 SC 2.5.8 minimum, not a rounded-down 20. */
-        .ref-checkbox { width: 24px; height: 24px; }
+        /* 24px is the WCAG 2.2 SC 2.5.8 minimum, not a rounded-down 20.
+           Covers the recipe page's reference checkboxes and the shopping
+           list's item checkboxes, which are rendered from JS with w-4 h-4. */
+        .ref-checkbox,
+        .row input[type="checkbox"] { width: 24px; height: 24px; }
     }
 
     /* Step images in recipes */

From 23d760dc96bedef49511a8c18e0cfb92af2f6468 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:01:00 +0100
Subject: [PATCH 31/42] feat(ui): compact pantry inventory

---
 static/css/input.css  |  80 ++++++---
 templates/pantry.html | 405 +++++++++++++++++++-----------------------
 2 files changed, 239 insertions(+), 246 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 42ee111..70d3d36 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -652,40 +652,80 @@
         @apply w-30 h-30 rounded-full flex items-center justify-center text-white text-5xl;
     }
 
-    /* Pantry item styles with improved dark mode support */
+    /* ---------- Pantry ---------- */
+    /* Not `.row`: the name column here is two lines (name over dates), so the
+       row aligns on the first baseline rather than on centre. */
     .pantry-item {
-        @apply bg-gray-50 dark:bg-gray-800;
+        display: flex;
+        align-items: baseline;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
     }
 
-    .pantry-item:hover {
-        @apply bg-gray-100 dark:bg-gray-700;
-    }
+    .pantry-item + .pantry-item { border-top: 1px solid var(--border); }
 
-    /* Out-of-stock pantry items with better dark mode contrast */
-    .pantry-item.out-of-stock {
-        @apply bg-red-50 border border-red-200 dark:bg-red-950/30 dark:border-red-900/50;
+    .pantry-item:hover { background: var(--surface-sunk); }
+
+    .pantry-item .quantity-display {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
     }
 
-    .pantry-item.out-of-stock:hover {
-        @apply bg-red-100 dark:bg-red-950/40;
+    .pantry-item .pantry-dates {
+        font-size: 12.5px;
+        color: var(--text-faint);
     }
 
-    /* Pantry text colors for dark mode */
-    .pantry-item .text-gray-900 {
-        @apply dark:text-gray-100;
+    .pantry-item.out-of-stock .quantity-display { color: var(--text-faint); }
+
+    /* Preflight makes every svg display:block, which would drop the warning
+       icon onto its own line under the quantity. It has to be fixed here
+       rather than with an `inline` utility: `inline` and `hidden` are both
+       display utilities in the same layer and Tailwind emits `inline` last,
+       so the icon could never be hidden. From @layer components this loses
+       to `hidden` and wins against preflight, which is exactly right. */
+    .pantry-item .out-of-stock-icon { display: inline; }
+
+    /* Low stock is a third state the page has always had. There is no warning
+       token, and --danger is spoken for by out-of-stock, so the dot borrows
+       the accent; the warning icon next to the quantity carries the rest. */
+    .item-status-dot.low-stock { background: var(--accent); }
+
+    /* Only the fields an item actually has are rendered visible, so the
+       separator has to key off visibility — a hidden field must not leave a
+       stray middot in front of the next one. */
+    .pantry-date:not(.hidden) ~ .pantry-date:not(.hidden)::before {
+        content: "·";
+        margin: 0 6px;
     }
 
-    .pantry-item .text-gray-600 {
-        @apply dark:text-gray-400;
+    /* Row actions stay out of the way until the row is hovered or something
+       inside it takes focus, so a dense list is not a wall of icons. */
+    .pantry-actions {
+        align-self: center;
+        opacity: 0;
+        transition: opacity .12s ease;
     }
 
-    .pantry-item .text-gray-500 {
-        @apply dark:text-gray-400;
+    .pantry-item:hover .pantry-actions,
+    .pantry-item:focus-within .pantry-actions { opacity: 1; }
+
+    /* While the inline editor is open, Cancel and Save are the row's actions.
+       Focus is inside the row, so :focus-within would otherwise park the edit
+       and delete icons alongside the form. */
+    .pantry-item:has(.item-edit:not(.hidden)) .pantry-actions {
+        opacity: 0;
+        pointer-events: none;
     }
 
-    /* Out-of-stock text in dark mode */
-    .pantry-item.out-of-stock .quantity-display {
-        @apply text-red-600 dark:text-red-400;
+    /* No hover on touch, so reveal-on-hover would make edit and delete
+       unreachable. */
+    @media (pointer: coarse) {
+        .pantry-actions { opacity: 1; }
     }
 
     /* CodeMirror editor dark mode support */
diff --git a/templates/pantry.html b/templates/pantry.html
index 44f5b4f..d3e53e8 100644
--- a/templates/pantry.html
+++ b/templates/pantry.html
@@ -1,159 +1,147 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="px-4 sm:px-8 lg:px-12 xl:px-16">
-    <div id="pantry-error-banner" class="hidden mb-4 bg-red-50 border border-red-200 rounded-xl p-4">
+<div>
+    <div id="pantry-error-banner" class="hidden mb-3 card p-3.5 border-l-[3px] border-l-danger bg-danger-soft">
         <div class="flex items-start gap-3">
-            <div class="shrink-0 text-red-500">
+            <div class="shrink-0 text-danger">
                 <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                 </svg>
             </div>
-            <p id="pantry-error-message" class="flex-1 text-red-700 text-sm font-mono whitespace-pre-wrap"></p>
-            <button onclick="document.getElementById('pantry-error-banner').classList.add('hidden')" class="text-red-400 hover:text-red-600">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <p id="pantry-error-message" class="flex-1 text-text text-sm font-mono whitespace-pre-wrap"></p>
+            <button type="button" onclick="document.getElementById('pantry-error-banner').classList.add('hidden')" class="icon-btn shrink-0" aria-label="Dismiss">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
             </button>
         </div>
     </div>
-    <div class="mt-8 mb-6">
-        <div class="flex items-center justify-between">
-            <h1 class="text-3xl font-bold text-gray-800">{{ tr.t("pantry-title") }}</h1>
-
-            {% if !sections.is_empty() %}
-            <div class="flex items-center gap-4">
-                <span id="out-of-stock-count" class="text-sm text-gray-500 dark:text-gray-400"></span>
-                <label class="flex items-center cursor-pointer group">
-                    <input type="checkbox" id="filter-out-of-stock" class="mr-2 w-4 h-4 text-orange-600 rounded-sm focus:ring-orange-500 focus:ring-2">
-                    <span class="text-sm text-gray-600 group-hover:text-gray-800 dark:text-gray-400 dark:group-hover:text-gray-200">{{ tr.t("pantry-show-out-of-stock") }}</span>
-                </label>
-            </div>
-            {% endif %}
+
+    <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
+        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("pantry-title") }}</h1>
+
+        {% if !sections.is_empty() %}
+        <div class="flex items-center gap-3">
+            <span id="out-of-stock-count" class="text-[12.5px] text-faint tabular-nums"></span>
+            <label class="flex items-center gap-2 text-[13.5px] text-muted hover:text-text cursor-pointer">
+                <input type="checkbox" id="filter-out-of-stock" class="w-4 h-4 accent-[var(--accent)]">
+                <span>{{ tr.t("pantry-show-out-of-stock") }}</span>
+            </label>
         </div>
+        {% endif %}
     </div>
 
     {% if !configured %}
-    <div class="recipe-card">
-        <div class="p-8 text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-            </svg>
-            <h3 class="text-lg font-medium text-gray-900 mb-2">{{ tr.t("pantry-no-config") }}</h3>
-            <p class="text-gray-500">{{ tr.t("pantry-create-config") }}</p>
-            <a href="{{ prefix }}/preferences" class="mt-4 inline-block text-orange-600 hover:text-orange-700">
-                {{ tr.t("pantry-configure") }}
-            </a>
-        </div>
+    <div class="card p-8 text-center">
+        <svg class="mx-auto h-10 w-10 text-faint mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+        <h3 class="text-[15px] font-semibold text-text mb-1">{{ tr.t("pantry-no-config") }}</h3>
+        <p class="text-sm text-muted">{{ tr.t("pantry-create-config") }}</p>
+        <a href="{{ prefix }}/preferences" class="mt-4 inline-block text-sm font-medium text-accent-text hover:underline">
+            {{ tr.t("pantry-configure") }}
+        </a>
     </div>
     {% else %}
-    <div class="space-y-6">
+    <!-- items-start so a short location card does not stretch to the height of
+         the tallest one in its row and trail a block of empty surface. -->
+    <div class="grid items-start gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
         {% for section in sections %}
-        <div class="recipe-card">
-            <div class="p-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4 capitalize">{{ section.name }}</h2>
-                
-                {% if section.items.is_empty() %}
-                <p class="text-gray-500 italic">{{ tr.t("pantry-no-items-section") }}</p>
-                {% else %}
-                <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                    {% for item in section.items %}
-                    <div class="pantry-item p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200 group"
-                         data-section="{{ section.name }}"
-                         data-name="{{ item.name }}"
-                         data-quantity="{% if let Some(quantity) = item.quantity %}{{ quantity }}{% endif %}"
-                         data-low="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
-                        <!-- Main content with aligned name and attributes -->
-                        <div class="flex items-start justify-between">
-                            <div class="grow">
-                                <!-- Name aligned with attributes -->
-                                <h3 class="font-medium text-gray-900 mb-2">{{ item.name }}</h3>
-
-                                <!-- Attributes section -->
-                                <div class="item-display">
-                                    <div class="space-y-1 text-sm">
-                                        <div class="quantity-display flex items-center text-gray-600">
-                                            <span class="text-gray-500 mr-2">{{ tr.t("pantry-item-quantity-short") }}</span>
-                                            <span class="item-quantity font-medium">{% if let Some(quantity) = item.quantity %}{{ quantity }}{% else %}-{% endif %}</span>
-                                            <svg class="out-of-stock-icon w-4 h-4 ml-1 text-red-500 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-                                            </svg>
-                                        </div>
-                                        <div class="flex items-center text-gray-600">
-                                            <span class="text-gray-500 mr-2">{{ tr.t("pantry-item-bought") }}</span>
-                                            <span class="item-bought">{% if let Some(bought) = item.bought %}{{ bought }}{% else %}-{% endif %}</span>
-                                        </div>
-                                        <div class="flex items-center text-gray-600">
-                                            <span class="text-gray-500 mr-2">{{ tr.t("pantry-item-expire") }}</span>
-                                            <span class="item-expire">{% if let Some(expire) = item.expire %}{{ expire }}{% else %}-{% endif %}</span>
-                                        </div>
-                                        <div class="flex items-center text-gray-600">
-                                            <span class="text-gray-500 mr-2">{{ tr.t("pantry-item-low") }}</span>
-                                            <span class="item-low">{% if let Some(low) = item.low %}{{ low }}{% else %}-{% endif %}</span>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Edit form (hidden by default) -->
-                                <div class="item-edit hidden">
-                                    <div class="space-y-2">
-                                        <input type="text" class="edit-quantity w-full px-2 py-1 text-sm border rounded-sm"
-                                               placeholder="Quantity (e.g., 500%g)"
-                                               value="{% if let Some(quantity) = item.quantity %}{{ quantity }}{% endif %}">
-                                        <input type="text" class="edit-bought w-full px-2 py-1 text-sm border rounded-sm"
-                                               placeholder="Bought (DD.MM.YYYY)"
-                                               value="{% if let Some(bought) = item.bought %}{{ bought }}{% endif %}">
-                                        <input type="text" class="edit-expire w-full px-2 py-1 text-sm border rounded-sm"
-                                               placeholder="Expires (DD.MM.YYYY)"
-                                               value="{% if let Some(expire) = item.expire %}{{ expire }}{% endif %}">
-                                        <input type="text" class="edit-low w-full px-2 py-1 text-sm border rounded-sm"
-                                               placeholder="Low threshold (e.g., 100%g)"
-                                               value="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
-                                        <div class="flex items-center justify-end space-x-2 mt-2">
-                                            <button class="save-btn px-3 py-1.5 text-xs bg-green-600 text-white rounded-sm hover:bg-green-700 font-medium">{{ tr.t("pantry-save") }}</button>
-                                            <button class="cancel-btn px-3 py-1.5 text-xs bg-gray-400 text-white rounded-sm hover:bg-gray-500 font-medium">{{ tr.t("pantry-cancel") }}</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+        <div class="card pantry-section">
+            <div class="card-head plain">
+                <h2 class="capitalize">{{ section.name }}</h2>
+                <span class="count">{{ section.items.len() }}</span>
+            </div>
 
-                            <!-- Action buttons and status indicator -->
-                            <div class="flex items-start space-x-2 ml-4">
-                                <div class="item-status-dot w-2 h-2 bg-green-500 rounded-full mt-1 shrink-0"></div>
-                                <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                                    <button class="edit-btn p-1 text-blue-500 hover:text-blue-700 hover:bg-blue-50 rounded-sm"
-                                            title="{{ tr.t("pantry-edit-item") }}">
-                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                                        </svg>
-                                    </button>
-                                    <button class="delete-btn p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-sm"
-                                            title="{{ tr.t("pantry-remove-item") }}">
-                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                        </svg>
-                                    </button>
+            {% if section.items.is_empty() %}
+            <p class="px-3.5 py-2.5 text-sm text-muted italic">{{ tr.t("pantry-no-items-section") }}</p>
+            {% else %}
+            <div class="pantry-section-items">
+                {% for item in section.items %}
+                <div class="pantry-item group"
+                     data-section="{{ section.name }}"
+                     data-name="{{ item.name }}"
+                     data-quantity="{% if let Some(quantity) = item.quantity %}{{ quantity }}{% endif %}"
+                     data-low="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
+                    <span class="item-status-dot in-stock"></span>
+                    <div class="row-name flex-1 min-w-0">
+                        <h3 class="m-0 font-medium text-[14px]">{{ item.name }}</h3>
+                        <!-- .item-display is what the edit form swaps places with.
+                             Each field's hook span is always rendered — the save
+                             handler reads all four unconditionally — and the
+                             wrapper carries `hidden` when there is nothing to show. -->
+                        <span class="item-display pantry-dates">
+                            <span class="pantry-date{% if item.bought.is_none() %} hidden{% endif %}">{{ tr.t("pantry-item-bought") }} <span class="item-bought">{% if let Some(bought) = item.bought %}{{ bought }}{% endif %}</span></span>
+                            <span class="pantry-date{% if item.expire.is_none() %} hidden{% endif %}">{{ tr.t("pantry-item-expire") }} <span class="item-expire">{% if let Some(expire) = item.expire %}{{ expire }}{% endif %}</span></span>
+                            <span class="pantry-date{% if item.low.is_none() %} hidden{% endif %}">{{ tr.t("pantry-item-low") }} <span class="item-low">{% if let Some(low) = item.low %}{{ low }}{% endif %}</span></span>
+                        </span>
+
+                        <!-- Edit form (hidden by default) -->
+                        <div class="item-edit hidden mt-1.5">
+                            <div class="space-y-1.5">
+                                <input type="text" class="edit-quantity w-full px-2 py-1 text-sm border border-line rounded-[6px] bg-surface text-text"
+                                       placeholder="Quantity (e.g., 500%g)"
+                                       value="{% if let Some(quantity) = item.quantity %}{{ quantity }}{% endif %}">
+                                <input type="text" class="edit-bought w-full px-2 py-1 text-sm border border-line rounded-[6px] bg-surface text-text"
+                                       placeholder="Bought (DD.MM.YYYY)"
+                                       value="{% if let Some(bought) = item.bought %}{{ bought }}{% endif %}">
+                                <input type="text" class="edit-expire w-full px-2 py-1 text-sm border border-line rounded-[6px] bg-surface text-text"
+                                       placeholder="Expires (DD.MM.YYYY)"
+                                       value="{% if let Some(expire) = item.expire %}{{ expire }}{% endif %}">
+                                <input type="text" class="edit-low w-full px-2 py-1 text-sm border border-line rounded-[6px] bg-surface text-text"
+                                       placeholder="Low threshold (e.g., 100%g)"
+                                       value="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
+                                <div class="flex items-center justify-end gap-1.5 mt-2">
+                                    <button type="button" class="cancel-btn btn">{{ tr.t("pantry-cancel") }}</button>
+                                    <button type="button" class="save-btn btn btn-primary">{{ tr.t("pantry-save") }}</button>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    {% endfor %}
+                    <span class="quantity-display">
+                        <span class="item-quantity">{% if let Some(quantity) = item.quantity %}{{ quantity }}{% else %}-{% endif %}</span>
+                        <!-- No `inline` utility here: Tailwind emits `inline` after
+                             `hidden`, so the icon would never hide. `.out-of-stock-icon`
+                             in input.css sets display:inline from the components
+                             layer instead, where `hidden` still overrides it. -->
+                        <svg class="out-of-stock-icon w-3.5 h-3.5 ml-1 text-danger hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                        </svg>
+                    </span>
+                    <div class="pantry-actions flex items-center gap-0.5">
+                        <!-- title only, no aria-label: `title` already supplies the
+                             accessible name for an icon-only button, and an
+                             aria-label of "Edit item" makes getByLabel(/Item/)
+                             in pantry.spec.ts match every row button. -->
+                        <button type="button" class="edit-btn icon-btn" title="{{ tr.t("pantry-edit-item") }}">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                        </button>
+                        <button type="button" class="delete-btn icon-btn" title="{{ tr.t("pantry-remove-item") }}">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
                 </div>
-                {% endif %}
+                {% endfor %}
             </div>
+            {% endif %}
         </div>
         {% endfor %}
     </div>
-    
-    <div class="mt-8 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
-        <div class="text-sm text-gray-500">
+
+    <div class="mt-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
+        <div class="text-[12.5px] text-faint">
             {{ tr.t("pantry-total-sections") }} {{ sections.len() }}
         </div>
-        <div class="flex flex-wrap gap-2">
-            <button id="add-item-btn" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">
+        <div class="flex flex-wrap gap-1.5">
+            <button type="button" id="add-item-btn" class="btn btn-primary">
                 {{ tr.t("pantry-add-item") }}
             </button>
-            <a href="{{ prefix }}/preferences" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors inline-block">
+            <a href="{{ prefix }}/preferences" class="btn">
                 {{ tr.t("pantry-edit-config") }}
             </a>
         </div>
@@ -163,12 +151,12 @@ <h3 class="font-medium text-gray-900 mb-2">{{ item.name }}</h3>
 
 <!-- Add Item Modal -->
 <div id="add-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4">
-        <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
+    <div class="card w-full max-w-md mx-4 p-5">
+        <h2 class="text-[16px] leading-tight font-[650] tracking-tight text-text mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
         <form id="add-form">
-            <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-section-label") }}</label>
-                <select id="add-section" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+            <div class="mb-3">
+                <label for="add-section" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-section-label") }}</label>
+                <select id="add-section" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" required>
                     <option value="">{{ tr.t("pantry-section-select") }}</option>
                     {% if sections.is_empty() %}
                     <option value="freezer">{{ tr.t("pantry-section-freezer") }}</option>
@@ -183,29 +171,29 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
                     {% endif %}
                 </select>
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-item-name") }}</label>
-                <input type="text" id="add-name" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+            <div class="mb-3">
+                <label for="add-name" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-name") }}</label>
+                <input type="text" id="add-name" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" required>
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-item-quantity") }} ({{ tr.t("pantry-optional") }})</label>
-                <input type="text" id="add-quantity" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" placeholder="e.g., 500%g or 2%L">
+            <div class="mb-3">
+                <label for="add-quantity" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-quantity") }} ({{ tr.t("pantry-optional") }})</label>
+                <input type="text" id="add-quantity" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="e.g., 500%g or 2%L">
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-item-bought-date") }} ({{ tr.t("pantry-optional") }})</label>
-                <input type="text" id="add-bought" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" placeholder="DD.MM.YYYY">
+            <div class="mb-3">
+                <label for="add-bought" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-bought-date") }} ({{ tr.t("pantry-optional") }})</label>
+                <input type="text" id="add-bought" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="DD.MM.YYYY">
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-item-expire-date") }} ({{ tr.t("pantry-optional") }})</label>
-                <input type="text" id="add-expire" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" placeholder="DD.MM.YYYY">
+            <div class="mb-3">
+                <label for="add-expire" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-expire-date") }} ({{ tr.t("pantry-optional") }})</label>
+                <input type="text" id="add-expire" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="DD.MM.YYYY">
             </div>
             <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">{{ tr.t("pantry-item-low-threshold") }} ({{ tr.t("pantry-optional") }})</label>
-                <input type="text" id="add-low" class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" placeholder="e.g., 100%g or 2">
+                <label for="add-low" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-low-threshold") }} ({{ tr.t("pantry-optional") }})</label>
+                <input type="text" id="add-low" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="e.g., 100%g or 2">
             </div>
-            <div class="flex justify-end space-x-3">
-                <button type="button" onclick="closeAddModal()" class="px-4 py-2 border rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">{{ tr.t("pantry-cancel") }}</button>
-                <button type="submit" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700">{{ tr.t("pantry-save") }}</button>
+            <div class="flex justify-end gap-1.5">
+                <button type="button" onclick="closeAddModal()" class="btn">{{ tr.t("pantry-cancel") }}</button>
+                <button type="submit" class="btn btn-primary">{{ tr.t("pantry-save") }}</button>
             </div>
         </form>
     </div>
@@ -226,7 +214,7 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
     function applyFilter() {
         const filterCheckbox = document.getElementById('filter-out-of-stock');
         const showOnlyOutOfStock = filterCheckbox && filterCheckbox.checked;
-        const sections = document.querySelectorAll('.recipe-card');
+        const sections = document.querySelectorAll('.pantry-section');
 
         sections.forEach(section => {
             const items = section.querySelectorAll('.pantry-item');
@@ -241,22 +229,22 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
                 }
             });
 
-            // Hide entire section if no items are visible
-            const sectionContainer = section.querySelector('.grid');
+            // Hide the whole item list if nothing in it is visible
+            const sectionContainer = section.querySelector('.pantry-section-items');
             const emptyMessage = section.querySelector('.empty-section-message');
 
             if (sectionContainer) {
                 if (visibleItems === 0 && showOnlyOutOfStock) {
-                    // Hide the grid and show empty message
+                    // Hide the list and show empty message
                     sectionContainer.style.display = 'none';
                     if (!emptyMessage) {
                         const message = document.createElement('p');
-                        message.className = 'empty-section-message text-gray-500 italic';
+                        message.className = 'empty-section-message px-3.5 py-2.5 text-sm text-muted italic';
                         message.textContent = {{ tr.t("pantry-no-out-of-stock")|json|safe }};
                         sectionContainer.parentNode.appendChild(message);
                     }
                 } else {
-                    // Show the grid and hide empty message
+                    // Show the list and hide empty message
                     sectionContainer.style.display = '';
                     if (emptyMessage) {
                         emptyMessage.remove();
@@ -300,71 +288,26 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
                 }
             }
 
-            // Reset all styling first
-            item.classList.remove('out-of-stock', 'low-stock', 'bg-gray-50', 'bg-red-50', 'bg-orange-50',
-                                 'border', 'border-2', 'border-red-200', 'border-orange-400');
+            // Stock state is expressed only as semantic classes; every colour
+            // that follows from it lives in the token rules in input.css. No
+            // palette utilities here — they would not flip for dark mode.
+            const isLow = !isOutOfStock && isLowStock;
+
+            item.classList.toggle('out-of-stock', isOutOfStock);
+            item.classList.toggle('low-stock', isLow);
 
             const statusDot = item.querySelector('.item-status-dot');
             if (statusDot) {
-                statusDot.classList.remove('in-stock', 'out-of-stock', 'low-stock', 'animate-pulse',
-                                          'bg-green-500', 'bg-red-500', 'bg-orange-500');
-            }
-
-            const qtyDisplay = item.querySelector('.quantity-display');
-            if (qtyDisplay) {
-                qtyDisplay.classList.remove('font-semibold', 'text-gray-600', 'text-red-600', 'text-orange-600');
+                statusDot.classList.toggle('out-of-stock', isOutOfStock);
+                statusDot.classList.toggle('low-stock', isLow);
+                statusDot.classList.toggle('in-stock', !isOutOfStock && !isLow);
             }
 
             const warningIcon = item.querySelector('.out-of-stock-icon');
             if (warningIcon) {
-                warningIcon.classList.add('hidden');
-                warningIcon.classList.remove('text-red-500', 'text-orange-500');
-            }
-
-            // Apply appropriate styling based on stock status
-            if (isOutOfStock) {
-                // Apply out-of-stock styling
-                item.classList.add('out-of-stock', 'bg-red-50', 'border', 'border-red-200');
-
-                if (statusDot) {
-                    statusDot.classList.add('out-of-stock', 'bg-red-500', 'animate-pulse');
-                }
-
-                if (qtyDisplay) {
-                    qtyDisplay.classList.add('font-semibold', 'text-red-600');
-                }
-
-                if (warningIcon) {
-                    warningIcon.classList.remove('hidden');
-                    warningIcon.classList.add('text-red-500');
-                }
-            } else if (isLowStock) {
-                // Apply low-stock styling with orange frame
-                item.classList.add('low-stock', 'bg-orange-50', 'border-2', 'border-orange-400');
-
-                if (statusDot) {
-                    statusDot.classList.add('low-stock', 'bg-orange-500', 'animate-pulse');
-                }
-
-                if (qtyDisplay) {
-                    qtyDisplay.classList.add('font-semibold', 'text-orange-600');
-                }
-
-                if (warningIcon) {
-                    warningIcon.classList.remove('hidden');
-                    warningIcon.classList.add('text-orange-500');
-                }
-            } else {
-                // Apply in-stock styling
-                item.classList.add('bg-gray-50');
-
-                if (statusDot) {
-                    statusDot.classList.add('in-stock', 'bg-green-500');
-                }
-
-                if (qtyDisplay) {
-                    qtyDisplay.classList.add('text-gray-600');
-                }
+                warningIcon.classList.toggle('hidden', !isOutOfStock && !isLow);
+                warningIcon.classList.toggle('text-danger', isOutOfStock);
+                warningIcon.classList.toggle('text-accent-text', isLow);
             }
         });
 
@@ -464,36 +407,35 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
             const expireInput = item.querySelector('.edit-expire');
             const lowInput = item.querySelector('.edit-low');
 
-            // Get original values from display
-            const originalQuantity = item.querySelector('.item-quantity').textContent;
-            const originalBought = item.querySelector('.item-bought').textContent;
-            const originalExpire = item.querySelector('.item-expire').textContent;
-            const originalLow = item.querySelector('.item-low').textContent;
+            // Get original values from display. An empty field renders as an
+            // empty span rather than a dash, so both spellings map to ''.
+            const readDisplay = (selector) => {
+                const el = item.querySelector(selector);
+                if (!el) return '';
+                const text = el.textContent.trim();
+                return text === '-' ? '' : text;
+            };
 
             // Only include fields that have changed
             const data = {};
 
             const newQuantity = quantityInput.value.trim();
-            const displayQuantity = originalQuantity === '-' ? '' : originalQuantity;
-            if (newQuantity !== displayQuantity) {
+            if (newQuantity !== readDisplay('.item-quantity')) {
                 data.quantity = newQuantity || null;
             }
 
             const newBought = boughtInput.value.trim();
-            const displayBought = originalBought === '-' ? '' : originalBought;
-            if (newBought !== displayBought) {
+            if (newBought !== readDisplay('.item-bought')) {
                 data.bought = newBought || null;
             }
 
             const newExpire = expireInput.value.trim();
-            const displayExpire = originalExpire === '-' ? '' : originalExpire;
-            if (newExpire !== displayExpire) {
+            if (newExpire !== readDisplay('.item-expire')) {
                 data.expire = newExpire || null;
             }
 
             const newLow = lowInput.value.trim();
-            const displayLow = originalLow === '-' ? '' : originalLow;
-            if (newLow !== displayLow) {
+            if (newLow !== readDisplay('.item-low')) {
                 data.low = newLow || null;
             }
 
@@ -507,19 +449,30 @@ <h2 class="text-xl font-bold mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
                 });
 
                 if (response.ok) {
-                    // Update display with new values, preserving unchanged fields
+                    // Update display with new values, preserving unchanged fields.
+                    // Date fields also gain or lose their wrapper's `hidden`, so
+                    // a field that was empty appears without a page reload.
+                    const setDate = (selector, value) => {
+                        const el = item.querySelector(selector);
+                        if (!el) return;
+                        el.textContent = value || '';
+                        const field = el.closest('.pantry-date');
+                        if (field) field.classList.toggle('hidden', !value);
+                    };
+
                     if (data.hasOwnProperty('quantity')) {
-                        item.querySelector('.item-quantity').textContent = data.quantity || '-';
+                        const qtyEl = item.querySelector('.item-quantity');
+                        if (qtyEl) qtyEl.textContent = data.quantity || '-';
                         item.dataset.quantity = data.quantity || '';
                     }
                     if (data.hasOwnProperty('bought')) {
-                        item.querySelector('.item-bought').textContent = data.bought || '-';
+                        setDate('.item-bought', data.bought);
                     }
                     if (data.hasOwnProperty('expire')) {
-                        item.querySelector('.item-expire').textContent = data.expire || '-';
+                        setDate('.item-expire', data.expire);
                     }
                     if (data.hasOwnProperty('low')) {
-                        item.querySelector('.item-low').textContent = data.low || '-';
+                        setDate('.item-low', data.low);
                         item.dataset.low = data.low || '';
                     }
 

From 30c46b41dbb295afd6dbc9e8cfd3854446ef453b Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:03:28 +0100
Subject: [PATCH 32/42] docs: record cross-page JS selector coupling found in
 Task 9

---
 docs/superpowers/plans/2026-08-15-web-ui-refresh.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 5404635..2dc3394 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -130,6 +130,10 @@ Known scrapers to check against: `static/js/cooking-mode.js` (`captureStepHTML`)
 
 Also watch for JS that inserts nodes relative to a structural selector — `showRecipeError()` in `recipe.html` targeted `.grid`, which Task 6 replaced with `.recipe-layout`.
 
+Worse, some selectors reach **across pages**. The pantry's `applyFilter()` selected its storage sections with `.recipe-card` — a class the recipes index owns — and its item containers with a bare `.grid`. So restyling `.recipe-card` in Task 4 silently changed pantry section styling, and any page adding a `.grid` would have confused the filter. Both were retargeted to page-specific `.pantry-section` / `.pantry-section-items` in Task 9. When you touch a shared class name, grep the whole `static/js/` tree, not just the page you are editing.
+
+A third variant: JS that toggles **raw Tailwind palette classes**. The pantry's `checkOutOfStock()` added and removed fourteen of them (`bg-red-50`, `border-orange-400`, `text-orange-600`, `bg-green-500`, …), none of which flip for dark mode. Such functions must toggle semantic state classes (`out-of-stock`, `low-stock`, `in-stock`) and let CSS supply the colour from tokens.
+
 **5. Do not rename these class names.** The E2E suite (134 tests) selects on them directly:
 
 | Class | Used by |

From 4a9d95a855b717a234892e7e7443de3b13d2efc8 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:11:51 +0100
Subject: [PATCH 33/42] feat(ui): token-based preferences page

---
 templates/preferences.html    | 201 ++++++++++++++++++----------------
 tests/e2e/preferences.spec.ts |   8 +-
 2 files changed, 110 insertions(+), 99 deletions(-)

diff --git a/templates/preferences.html b/templates/preferences.html
index 5c874c6..6840c87 100644
--- a/templates/preferences.html
+++ b/templates/preferences.html
@@ -8,100 +8,111 @@ <h1 class="text-2xl font-bold mb-6">{{ tr.t("pref-title") }}</h1>
 
     <div class="space-y-6">
         <!-- Language Selector -->
-        <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-2xl border-2 border-purple-200">
-            <h2 class="text-lg font-semibold mb-4 text-purple-900">{{ tr.t("pref-language") }}</h2>
-            <div class="flex flex-wrap gap-3">
-                <button onclick="setLanguage('en-US')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "en-US" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇺🇸 English
-                </button>
-                <button onclick="setLanguage('de-DE')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "de-DE" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇩🇪 Deutsch
-                </button>
-                <button onclick="setLanguage('nl-NL')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "nl-NL" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇳🇱 Nederlands
-                </button>
-                <button onclick="setLanguage('fr-FR')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "fr-FR" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇫🇷 Français
-                </button>
-                <button onclick="setLanguage('es-ES')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "es-ES" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇪🇸 Español
-                </button>
-                <button onclick="setLanguage('eu-ES')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "eu-ES" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    Euskara
-                </button>
-                <button onclick="setLanguage('sv-SE')"
-                        class="language-btn px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if tr.lang_string() == "sv-SE" %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🇸🇪 Svenska
-                </button>
+        <div class="card">
+            <div class="card-head"><h2>{{ tr.t("pref-language") }}</h2></div>
+            <div class="p-4">
+                <div class="flex flex-wrap gap-2">
+                    <button onclick="setLanguage('en-US')"
+                            data-active="{% if tr.lang_string() == "en-US" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "en-US" %}btn-primary{% endif %}">
+                        🇺🇸 English
+                    </button>
+                    <button onclick="setLanguage('de-DE')"
+                            data-active="{% if tr.lang_string() == "de-DE" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "de-DE" %}btn-primary{% endif %}">
+                        🇩🇪 Deutsch
+                    </button>
+                    <button onclick="setLanguage('nl-NL')"
+                            data-active="{% if tr.lang_string() == "nl-NL" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "nl-NL" %}btn-primary{% endif %}">
+                        🇳🇱 Nederlands
+                    </button>
+                    <button onclick="setLanguage('fr-FR')"
+                            data-active="{% if tr.lang_string() == "fr-FR" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "fr-FR" %}btn-primary{% endif %}">
+                        🇫🇷 Français
+                    </button>
+                    <button onclick="setLanguage('es-ES')"
+                            data-active="{% if tr.lang_string() == "es-ES" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "es-ES" %}btn-primary{% endif %}">
+                        🇪🇸 Español
+                    </button>
+                    <button onclick="setLanguage('eu-ES')"
+                            data-active="{% if tr.lang_string() == "eu-ES" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "eu-ES" %}btn-primary{% endif %}">
+                        Euskara
+                    </button>
+                    <button onclick="setLanguage('sv-SE')"
+                            data-active="{% if tr.lang_string() == "sv-SE" %}true{% else %}false{% endif %}"
+                            class="language-btn btn {% if tr.lang_string() == "sv-SE" %}btn-primary{% endif %}">
+                        🇸🇪 Svenska
+                    </button>
+                </div>
+                <p class="text-sm text-muted mt-3">Your language preference will be saved in a cookie.</p>
             </div>
-            <p class="text-sm text-purple-700 mt-3">Your language preference will be saved in a cookie.</p>
         </div>
 
         <!-- Features -->
         {% if !static_mode %}
-        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-2xl border-2 border-blue-200">
-            <h2 class="text-lg font-semibold mb-2 text-blue-900">{{ tr.t("pref-features") }}</h2>
-            <p class="text-sm text-blue-700 mb-4">{{ tr.t("pref-features-desc") }}</p>
-            <div class="flex flex-wrap gap-3">
-                <button onclick="toggleFeature('show_shopping_list', {{ features.show_shopping_list }})"
-                        class="px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if features.show_shopping_list %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🛒 {{ tr.t("nav-shopping-list") }}
-                </button>
-                <button onclick="toggleFeature('show_pantry', {{ features.show_pantry }})"
-                        class="px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 {% if features.show_pantry %}bg-gradient-to-r from-orange-500 to-orange-600 text-white border-orange-600 shadow-lg scale-105{% else %}bg-white text-gray-700 border-gray-300 hover:border-orange-400 hover:bg-orange-50 hover:scale-105{% endif %}">
-                    🥫 {{ tr.t("nav-pantry") }}
-                </button>
+        <div class="card">
+            <div class="card-head"><h2>{{ tr.t("pref-features") }}</h2></div>
+            <div class="p-4">
+                <p class="text-sm text-muted mb-4">{{ tr.t("pref-features-desc") }}</p>
+                <div class="flex flex-wrap gap-2">
+                    <button onclick="toggleFeature('show_shopping_list', {{ features.show_shopping_list }})"
+                            data-active="{% if features.show_shopping_list %}true{% else %}false{% endif %}"
+                            class="btn {% if features.show_shopping_list %}btn-primary{% endif %}">
+                        🛒 {{ tr.t("nav-shopping-list") }}
+                    </button>
+                    <button onclick="toggleFeature('show_pantry', {{ features.show_pantry }})"
+                            data-active="{% if features.show_pantry %}true{% else %}false{% endif %}"
+                            class="btn {% if features.show_pantry %}btn-primary{% endif %}">
+                        🥫 {{ tr.t("nav-pantry") }}
+                    </button>
+                </div>
             </div>
         </div>
         {% endif %}
 
         <!-- CookCloud Sync -->
         {% if sync_enabled %}
-        <div class="bg-gray-50 p-4 rounded-sm">
-            <h2 class="text-lg font-semibold mb-3">CookCloud Sync</h2>
-            <div id="sync-section">
+        <div class="card">
+            <div class="card-head"><h2>CookCloud Sync</h2></div>
+            <div class="p-4" id="sync-section">
                 {% if sync_logged_in %}
                 <div class="flex items-center justify-between">
                     <div>
-                        <p class="text-sm">
+                        <p class="text-sm text-text">
                             Signed in as <span class="font-medium">{{ sync_email.as_deref().unwrap_or("Unknown") }}</span>
                         </p>
-                        <p class="text-xs text-gray-600 mt-1" id="sync-status-text">{% if sync_syncing %}Syncing recipes...{% else %}Sync idle{% endif %}</p>
+                        <p class="text-xs text-faint mt-1" id="sync-status-text">{% if sync_syncing %}Syncing recipes...{% else %}Sync idle{% endif %}</p>
                     </div>
-                    <button onclick="syncLogout()"
-                            class="px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 bg-white text-red-600 border-red-300 hover:bg-red-50 hover:border-red-400">
+                    <button onclick="syncLogout()" class="btn text-danger">
                         Logout
                     </button>
                 </div>
                 {% else %}
                 <div id="sync-login-section" class="flex items-center justify-between">
-                    <p class="text-sm text-gray-600" id="sync-login-message">Sync your recipes across devices with CookCloud.</p>
-                    <button id="sync-login-btn" onclick="syncLogin()"
-                            class="px-4 py-2 rounded-lg font-medium transition-all duration-200 border-2 bg-orange-700 text-white border-orange-800 hover:bg-orange-800">
+                    <p class="text-sm text-muted" id="sync-login-message">Sync your recipes across devices with CookCloud.</p>
+                    <button id="sync-login-btn" onclick="syncLogin()" class="btn btn-primary">
                         Login to CookCloud
                     </button>
                 </div>
 
-                <div id="sync-login-card" class="hidden mt-4 border border-gray-200 rounded-lg p-6 bg-white">
-                    <h3 class="text-lg font-semibold mb-2">Sign in to CookCloud</h3>
-                    <ol class="mt-3 space-y-2 text-sm text-gray-700">
-                        <li>1. Open <a id="sync-login-link" href="#" target="_blank" rel="noopener" class="underline text-orange-700 hover:text-orange-800">cook.md/device</a> in any browser.</li>
+                <div id="sync-login-card" class="hidden mt-4 border border-line rounded-[10px] p-6 bg-sunk">
+                    <h3 class="text-lg font-semibold mb-2 text-text">Sign in to CookCloud</h3>
+                    <ol class="mt-3 space-y-2 text-sm text-muted">
+                        <li>1. Open <a id="sync-login-link" href="#" target="_blank" rel="noopener" class="text-accent-text hover:underline">cook.md/device</a> in any browser.</li>
                         <li>2. Enter this code:</li>
                     </ol>
                     <div class="mt-3 flex items-center gap-2">
-                        <span id="sync-login-code" class="text-2xl tracking-widest bg-gray-100 px-4 py-2 rounded-sm font-mono">----  ----</span>
-                        <button id="sync-login-copy" type="button" class="px-3 py-1 border border-gray-300 rounded-sm text-sm hover:bg-gray-50">Copy</button>
+                        <span id="sync-login-code" class="text-2xl tracking-widest bg-surface border border-line px-4 py-2 rounded-sm font-mono text-text">----  ----</span>
+                        <button id="sync-login-copy" type="button" class="btn">Copy</button>
                     </div>
-                    <p id="sync-login-expires" class="mt-3 text-sm text-gray-600"></p>
+                    <p id="sync-login-expires" class="mt-3 text-sm text-muted"></p>
                     <div class="mt-4 flex gap-2">
-                        <a id="sync-login-open" href="#" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg font-medium bg-orange-700 text-white border-2 border-orange-800 hover:bg-orange-800">Open cook.md/device</a>
-                        <button id="sync-login-cancel" type="button" class="px-4 py-2 rounded-lg font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50">Cancel</button>
+                        <a id="sync-login-open" href="#" target="_blank" rel="noopener" class="btn btn-primary">Open cook.md/device</a>
+                        <button id="sync-login-cancel" type="button" class="btn">Cancel</button>
                     </div>
                 </div>
                 {% endif %}
@@ -109,81 +120,81 @@ <h3 class="text-lg font-semibold mb-2">Sign in to CookCloud</h3>
         </div>
         {% endif %}
 
-        <div class="bg-gray-50 p-4 rounded-sm">
-            <h2 class="text-lg font-semibold mb-3">Configuration Files</h2>
-            <div class="space-y-2 text-sm">
+        <div class="card">
+            <div class="card-head"><h2>Configuration Files</h2></div>
+            <div class="p-4 space-y-2 text-sm">
                 <div>
-                    <span class="font-medium">{{ tr.t("pref-aisle-path") }}:</span>
-                    <span class="text-gray-600 ml-2">{{ aisle_path }}</span>
+                    <span class="font-medium text-text">{{ tr.t("pref-aisle-path") }}:</span>
+                    <span class="text-muted ml-2">{{ aisle_path }}</span>
                 </div>
                 <div>
-                    <span class="font-medium">{{ tr.t("pref-pantry-path") }}:</span>
-                    <span class="text-gray-600 ml-2">{{ pantry_path }}</span>
+                    <span class="font-medium text-text">{{ tr.t("pref-pantry-path") }}:</span>
+                    <span class="text-muted ml-2">{{ pantry_path }}</span>
                 </div>
             </div>
         </div>
 
-        <div class="bg-gray-50 p-4 rounded-sm">
-            <h2 class="text-lg font-semibold mb-3">Recipe Directory</h2>
-            <div class="text-sm">
-                <span class="font-medium">{{ tr.t("pref-base-path") }}:</span>
-                <span class="text-gray-600 ml-2">{{ base_path }}</span>
+        <div class="card">
+            <div class="card-head"><h2>Recipe Directory</h2></div>
+            <div class="p-4 text-sm">
+                <span class="font-medium text-text">{{ tr.t("pref-base-path") }}:</span>
+                <span class="text-muted ml-2">{{ base_path }}</span>
             </div>
         </div>
 
-        <div class="bg-gray-50 p-4 rounded-sm">
-            <h2 class="text-lg font-semibold mb-3">About</h2>
-            <div class="space-y-2 text-sm">
+        <div class="card">
+            <div class="card-head"><h2>About</h2></div>
+            <div class="p-4 space-y-2 text-sm">
                 <div>
-                    <span class="font-medium">{{ tr.t("pref-version") }}:</span>
-                    <span class="text-gray-600 ml-2">{{ version }}</span>
+                    <span class="font-medium text-text">{{ tr.t("pref-version") }}:</span>
+                    <span class="text-muted ml-2">{{ version }}</span>
                 </div>
                 <div>
-                    <span class="font-medium">Cooklang CLI:</span>
-                    <span class="text-gray-600 ml-2">A command-line tool for managing Cooklang recipes</span>
+                    <span class="font-medium text-text">Cooklang CLI:</span>
+                    <span class="text-muted ml-2">A command-line tool for managing Cooklang recipes</span>
                 </div>
             </div>
         </div>
 
-        <div class="bg-gray-50 p-4 rounded-sm">
-            <h2 class="text-lg font-semibold mb-3">Documentation & Resources</h2>
-            <div class="space-y-2 text-sm">
+        <div class="card">
+            <div class="card-head"><h2>Documentation &amp; Resources</h2></div>
+            <div class="p-4 space-y-2 text-sm">
                 {% if !static_mode %}
                 <div>
                     <a href="{{ prefix }}/api-docs"
-                       class="text-orange-700 hover:text-orange-800 hover:underline font-medium">
+                       class="text-accent-text hover:underline font-medium">
                         🔌 Server API
                     </a>
-                    <span class="text-gray-600 ml-2">- HTTP endpoints for building integrations</span>
+                    <span class="text-muted ml-2">- HTTP endpoints for building integrations</span>
                 </div>
                 {% endif %}
                 <div>
                     <a href="https://cooklang.org/cli/" target="_blank" rel="noopener noreferrer"
-                       class="text-orange-700 hover:text-orange-800 hover:underline font-medium">
+                       class="text-accent-text hover:underline font-medium">
                         📚 CLI Documentation
                     </a>
-                    <span class="text-gray-600 ml-2">- Learn about all CLI commands and features</span>
+                    <span class="text-muted ml-2">- Learn about all CLI commands and features</span>
                 </div>
                 <div>
                     <a href="https://cooklang.org/docs/spec/" target="_blank" rel="noopener noreferrer"
-                       class="text-orange-700 hover:text-orange-800 hover:underline font-medium">
+                       class="text-accent-text hover:underline font-medium">
                         📖 Cooklang Specification
                     </a>
-                    <span class="text-gray-600 ml-2">- Recipe markup language syntax guide</span>
+                    <span class="text-muted ml-2">- Recipe markup language syntax guide</span>
                 </div>
                 <div>
                     <a href="https://cooklang.org/docs/getting-started/" target="_blank" rel="noopener noreferrer"
-                       class="text-orange-700 hover:text-orange-800 hover:underline font-medium">
+                       class="text-accent-text hover:underline font-medium">
                         🚀 Getting Started
                     </a>
-                    <span class="text-gray-600 ml-2">- Introduction to Cooklang basics</span>
+                    <span class="text-muted ml-2">- Introduction to Cooklang basics</span>
                 </div>
                 <div>
                     <a href="https://github.com/cooklang/CookCLI" target="_blank" rel="noopener noreferrer"
-                       class="text-orange-700 hover:text-orange-800 hover:underline font-medium">
+                       class="text-accent-text hover:underline font-medium">
                         🔧 GitHub Repository
                     </a>
-                    <span class="text-gray-600 ml-2">- Source code and issue tracker</span>
+                    <span class="text-muted ml-2">- Source code and issue tracker</span>
                 </div>
             </div>
         </div>
diff --git a/tests/e2e/preferences.spec.ts b/tests/e2e/preferences.spec.ts
index f6664c9..c78c7a5 100644
--- a/tests/e2e/preferences.spec.ts
+++ b/tests/e2e/preferences.spec.ts
@@ -228,9 +228,9 @@ test.describe('Feature toggles in preferences', () => {
     await expect(shoppingBtn).toBeVisible();
     await expect(pantryBtn).toBeVisible();
 
-    // Both enabled → should have the active (orange gradient) classes
-    await expect(shoppingBtn).toHaveClass(/from-orange-500/);
-    await expect(pantryBtn).toHaveClass(/from-orange-500/);
+    // Both enabled → toggles report active state
+    await expect(shoppingBtn).toHaveAttribute('data-active', 'true');
+    await expect(pantryBtn).toHaveAttribute('data-active', 'true');
   });
 
   test('toggling Shopping List off removes it from nav', async ({ page }) => {
@@ -242,7 +242,7 @@ test.describe('Feature toggles in preferences', () => {
 
     // Button is now inactive
     const shoppingBtn = page.getByRole('button', { name: /Shopping/i });
-    await expect(shoppingBtn).not.toHaveClass(/from-orange-500/);
+    await expect(shoppingBtn).toHaveAttribute('data-active', 'false');
 
     // Nav no longer shows Shopping List
     await expect(page.locator('nav a.nav-pill', { hasText: /Shopping/i })).not.toBeVisible();

From fb13140e7795c67e10582cdc2badbe1e3de3fa57 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:19:32 +0100
Subject: [PATCH 34/42] feat(ui): token-based menu page

---
 templates/base.html    |   6 +-
 templates/menu.html    | 143 ++++++++++++++++++++---------------------
 tests/menu_api_test.rs |   5 +-
 3 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index c1874e9..d92dab1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -622,7 +622,11 @@
                 -webkit-text-fill-color: #000 !important;
             }
 
-            #menu-content .space-y-6 > * + * {
+            /* Post-refresh markup: the section stack is .space-y-4. The
+               .space-y-6 selector is kept so a stale cached page still
+               compacts. */
+            #menu-content .space-y-6 > * + *,
+            #menu-content .space-y-4 > * + * {
                 margin-top: 0.3rem !important;
             }
 
diff --git a/templates/menu.html b/templates/menu.html
index d396ee7..43712dd 100644
--- a/templates/menu.html
+++ b/templates/menu.html
@@ -4,169 +4,171 @@
 
 {% block content %}
 <div id="menu-content">
-    <nav class="mb-4 print:hidden">
-        <ol class="flex items-center space-x-2 text-sm text-gray-600">
-            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-gray-900">{{ tr.t("nav-recipes") }}</a></li>
+    <nav class="mb-4 breadcrumb print:hidden">
+        <ol class="flex items-center space-x-2 text-sm text-muted">
+            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-text">{{ tr.t("nav-recipes") }}</a></li>
             {% for crumb in breadcrumbs %}
             <li class="flex items-center">
-                <span class="mx-2 text-gray-400">/</span>
+                <span class="mx-2 text-faint">/</span>
                 {% if loop.last %}
-                    <span class="text-gray-900">{{ crumb }}</span>
+                    <span class="text-text">{{ crumb }}</span>
                 {% else %}
-                    <a href="{{ prefix }}/directory/{{ breadcrumbs[..loop.index0 + 1].join("/") }}{% if static_mode %}.html{% endif %}" class="hover:text-gray-900">{{ crumb }}</a>
+                    <a href="{{ prefix }}/directory/{{ breadcrumbs[..loop.index0 + 1].join("/") }}{% if static_mode %}.html{% endif %}" class="hover:text-text">{{ crumb }}</a>
                 {% endif %}
             </li>
             {% endfor %}
         </ol>
     </nav>
 
-    <div class="mb-4">
+    <div class="mb-6">
         <!-- Menu image if available -->
         {% match image_path %}
         {% when Some with (img) %}
-        <div class="mb-4 max-w-4xl mx-auto print:hidden">
-            <div class="rounded-xl overflow-hidden shadow-lg bg-gray-50">
-                <img src="{{ img }}" alt="{{ name }}" class="w-full h-auto max-h-[500px] object-contain mx-auto">
-            </div>
+        <div class="mb-4 flex justify-center print:hidden">
+            <img src="{{ img }}" alt="{{ name }}" class="rounded-[10px] border border-line max-w-full h-auto max-h-[500px]">
         </div>
         {% when None %}
         {% endmatch %}
 
         <!-- Title bar with scale and shopping list button -->
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4 print:mb-1">
-            <div class="flex items-center gap-3">
-                <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent print:text-2xl">{{ name }}</h1>
-                <span class="px-3 py-1 bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 rounded-full text-sm font-semibold print:hidden">{{ tr.t("recipe-type-menu") }}</span>
-            </div>
+        <div class="flex items-start gap-4 mb-1.5">
+            <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:text-2xl">
+                {{ name }}
+                <span class="tag align-middle ml-1 print:hidden">{{ tr.t("recipe-type-menu") }}</span>
+            </h1>
+            {% if scale != 1.0 %}
+            <div class="hidden print:block text-lg font-normal">{{ tr.t("recipe-scale-label") }}: {{ scale }}x</div>
+            {% endif %}
             {% if !static_mode %}
-            <div class="flex flex-wrap items-center gap-2 lg:gap-3 print:hidden">
-                <div class="flex items-center">
-                    <label for="scale" class="text-sm font-medium text-gray-700 mr-2">{{ tr.t("recipe-scale-label") }}:</label>
+            <div class="ml-auto flex flex-wrap items-center gap-1.5 print:hidden">
+                <div class="stepper">
+                    <label for="scale" class="sr-only">{{ tr.t("recipe-scale-label") }}</label>
+                    <button type="button" aria-label="Decrease scale"
+                            onclick="adjustScale(-0.5)">&minus;</button>
                     <input type="number"
                            id="scale"
                            value="{{ scale }}"
                            min="0.5"
                            max="200"
                            step="0.5"
-                           class="px-3 py-2 border border-gray-300 rounded-lg w-20 text-center"
                            onchange="window.location.href = `{{ prefix }}/recipe/{{ recipe_path }}?scale=${this.value}`">
+                    <button type="button" aria-label="Increase scale"
+                            onclick="adjustScale(0.5)">+</button>
                 </div>
-                <a href="{{ prefix }}/edit/{{ recipe_path }}"
-                   class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg hover:from-blue-600 hover:to-cyan-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
-                   title="{{ tr.t("action-edit") }}">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <a href="{{ prefix }}/edit/{{ recipe_path }}" class="btn" title="{{ tr.t("action-edit") }}">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                     </svg>
-                    <span class="hidden lg:inline">{{ tr.t("action-edit") }}</span>
+                    <span>{{ tr.t("action-edit") }}</span>
                 </a>
                 <button onclick="addToShoppingList(event, {{ recipe_path|json }})"
-                        class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
+                        class="btn btn-primary"
                         title="{{ tr.t("recipe-add-all-to-shopping") }}">
-                    <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                     </svg>
-                    <span class="hidden lg:inline">{{ tr.t("recipe-add-all-to-shopping") }}</span>
+                    <span>{{ tr.t("recipe-add-all-to-shopping") }}</span>
                 </button>
             </div>
             {% endif %}
         </div>
 
         <!-- Menu info section -->
-        <div class="space-y-2 print:hidden">
+        <div class="print:hidden">
             {% match metadata %}
             {% when Some with (metadata) %}
 
-            <!-- Description if present -->
-            {% match metadata.description %}
-            {% when Some with (description) %}
-            <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border border-purple-200">
-                <p class="text-gray-700 italic">{{ description }}</p>
-            </div>
-            {% when None %}
-            {% endmatch %}
-
             <!-- Metadata row -->
-            <div id="metadata-container" class="flex flex-wrap gap-3">
+            <div id="metadata-container" class="metaline mb-3.5">
                 {% match metadata.servings %}
                 {% when Some with (servings) %}
-                <span class="metadata-pill metadata-servings">👥 {{ servings }} {{ tr.t("recipe-servings-label") }}</span>
+                <span><b>{{ servings }}</b> {{ tr.t("recipe-servings-label") }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.time %}
                 {% when Some with (time) %}
-                <span class="metadata-pill metadata-time">⏱️ {{ time }}</span>
+                <span><b>{{ time }}</b></span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.author %}
                 {% when Some with (author) %}
-                <span class="metadata-pill metadata-author">👤 {{ author }}</span>
+                <span>{{ author }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.source %}
                 {% when Some with (source) %}
-                <span class="metadata-pill metadata-source">📖 {{ source }}</span>
+                <span>{{ source }}</span>
                 {% when None %}
                 {% endmatch %}
 
                 {% match metadata.source_url %}
                 {% when Some with (source_url) %}
-                <span class="metadata-pill metadata-source-url">🔗 <a href="{{ source_url }}" class="text-blue-600 hover:text-blue-800 hover:underline">{{ source_url|hostname }}</a></span>
+                <span><a href="{{ source_url }}">{{ source_url|hostname }}</a></span>
                 {% when None %}
                 {% endmatch %}
 
                 <!-- Custom metadata -->
                 {% for (key, value) in metadata.custom %}
-                <span class="metadata-pill metadata-custom">{{ key }}: {{ value }}</span>
+                <span><span class="metadata-pill">{{ key }}: {{ value }}</span></span>
                 {% endfor %}
             </div>
 
+            <!-- Description if present -->
+            {% match metadata.description %}
+            {% when Some with (description) %}
+            <div class="recipe-note rounded-[10px]">
+                <p class="m-0">{{ description }}</p>
+            </div>
+            {% when None %}
+            {% endmatch %}
+
             {% when None %}
             {% endmatch %}
         </div>
     </div>
 
     <!-- Menu sections -->
-    <div class="space-y-6">
+    <div class="space-y-4">
             {% for section in sections %}
-            <div class="menu-section bg-white rounded-xl shadow-xs border border-gray-200 overflow-hidden">
+            <div class="menu-section card overflow-hidden">
                 {% match section.name %}
                 {% when Some with (name) %}
-                <div class="menu-section-header bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3">
-                    <h2 class="text-xl font-semibold">{{ name }}</h2>
+                <div class="menu-section-header card-head plain">
+                    <h2>{{ name }}</h2>
                 </div>
                 {% when None %}
                 {% endmatch %}
 
-                <div class="menu-section-body p-6 space-y-2">
+                <div class="menu-section-body p-3.5 space-y-1.5">
                     {% for line in section.lines %}
                     {% if line.len() == 1 %}
                         {% match line[0] %}
                         {% when crate::web::templates::MenuSectionItem::Text with (text) %}
                             {% if text.trim().ends_with(":") %}
                             <!-- Meal type header -->
-                            <h3 class="text-lg font-semibold text-gray-800 mt-2 mb-1">{{ text }}</h3>
+                            <h3 class="section-label px-0 mt-3.5 mb-1">{{ text }}</h3>
                             {% else %}
                             <!-- Regular text line -->
-                            <div class="pl-6">
-                                <span class="text-gray-700">{{ text }}</span>
+                            <div class="pl-4">
+                                <span class="text-text">{{ text }}</span>
                             </div>
                             {% endif %}
                         {% when _ %}
                             <!-- Single non-text item -->
-                            <div class="pl-6 flex items-baseline gap-x-2">
+                            <div class="pl-4 flex items-baseline gap-x-2">
                                 {% match line[0] %}
                                 {% when crate::web::templates::MenuSectionItem::RecipeReference with { name, scale } %}
                                     <span class="inline-flex items-center gap-1">
                                         <a href="{{ prefix }}/recipe/{{ name.strip_prefix("./").unwrap_or(name) }}{% if static_mode %}.html{% endif %}"
-                                           class="text-purple-600 hover:text-purple-800 font-medium hover:underline">
+                                           class="text-info font-medium hover:underline">
                                             {{ name.strip_prefix("./").unwrap_or(name).replace("/", " › ") }}
                                         </a>
                                         {% match scale %}
                                         {% when Some with (s) %}
-                                            <span class="text-sm text-gray-500">(×{{ s }})</span>
+                                            <span class="text-[12.5px] text-faint">(×{{ s }})</span>
                                         {% when None %}
                                         {% endmatch %}
                                     </span>
@@ -176,12 +178,12 @@ <h3 class="text-lg font-semibold text-gray-800 mt-2 mb-1">{{ text }}</h3>
                                             {{ name }}
                                             {% match quantity %}
                                             {% when Some with (q) %}
-                                                <span class="font-semibold">{{ q }}</span>
+                                                <span>{{ q }}</span>
                                             {% when None %}
                                             {% endmatch %}
                                             {% match unit %}
                                             {% when Some with (u) %}
-                                                <span class="text-orange-700">{{ u }}</span>
+                                                <span>{{ u }}</span>
                                             {% when None %}
                                             {% endmatch %}
                                         </span>
@@ -192,21 +194,21 @@ <h3 class="text-lg font-semibold text-gray-800 mt-2 mb-1">{{ text }}</h3>
                         {% endmatch %}
                     {% else %}
                     <!-- Multi-item line (meal item with ingredients) -->
-                    <div class="pl-6 flex flex-wrap items-baseline gap-x-2">
+                    <div class="pl-4 flex flex-wrap items-baseline gap-x-2">
                         {% for item in line %}
                             {% match item %}
                             {% when crate::web::templates::MenuSectionItem::Text with (text) %}
-                                <span class="text-gray-700">{{ text }}</span>
+                                <span class="text-text">{{ text }}</span>
 
                             {% when crate::web::templates::MenuSectionItem::RecipeReference with { name, scale } %}
                                 <span class="inline-flex items-center gap-1">
                                     <a href="{{ prefix }}/recipe/{{ name.strip_prefix("./").unwrap_or(name) }}{% if static_mode %}.html{% endif %}"
-                                       class="text-purple-600 hover:text-purple-800 font-medium hover:underline">
+                                       class="text-info font-medium hover:underline">
                                         {{ name.strip_prefix("./").unwrap_or(name).replace("/", " › ") }}
                                     </a>
                                     {% match scale %}
                                     {% when Some with (s) %}
-                                        <span class="text-sm text-gray-500">(×{{ s }})</span>
+                                        <span class="text-[12.5px] text-faint">(×{{ s }})</span>
                                     {% when None %}
                                     {% endmatch %}
                                 </span>
@@ -217,12 +219,12 @@ <h3 class="text-lg font-semibold text-gray-800 mt-2 mb-1">{{ text }}</h3>
                                         {{ name }}
                                         {% match quantity %}
                                         {% when Some with (q) %}
-                                            <span class="font-semibold">{{ q }}</span>
+                                            <span>{{ q }}</span>
                                         {% when None %}
                                         {% endmatch %}
                                         {% match unit %}
                                         {% when Some with (u) %}
-                                            <span class="text-orange-700">{{ u }}</span>
+                                            <span>{{ u }}</span>
                                         {% when None %}
                                         {% endmatch %}
                                     </span>
@@ -272,26 +274,23 @@ <h3 class="text-lg font-semibold text-gray-800 mt-2 mb-1">{{ text }}</h3>
         });
 
         if (response.ok) {
-            button.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> ' + escHtml({{ tr.t("recipe-added")|json|safe }});
-            button.classList.add('bg-green-500', 'hover:bg-green-600');
-            button.classList.remove('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
+            // The button is already .btn-primary, so success is signalled by the
+            // label alone — swapping palette classes here is what used to break
+            // in dark mode.
+            button.innerHTML = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> <span>' + escHtml({{ tr.t("recipe-added")|json|safe }}) + '</span>';
 
             setTimeout(() => {
                 button.innerHTML = originalText;
-                button.classList.remove('bg-green-500', 'hover:bg-green-600');
-                button.classList.add('from-purple-500', 'to-pink-500', 'hover:from-purple-600', 'hover:to-pink-600');
             }, 2000);
         } else {
             throw new Error({{ tr.t("shopping-failed-to-add")|json|safe }});
         }
     } catch (error) {
         console.error('Error:', error);
-        button.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> ' + escHtml({{ tr.t("shopping-error")|json|safe }});
-        button.classList.add('bg-red-500', 'hover:bg-red-600');
+        button.innerHTML = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> <span>' + escHtml({{ tr.t("shopping-error")|json|safe }}) + '</span>';
 
         setTimeout(() => {
             button.innerHTML = originalText;
-            button.classList.remove('bg-red-500', 'hover:bg-red-600');
         }, 2000);
     }
 }
diff --git a/tests/menu_api_test.rs b/tests/menu_api_test.rs
index 5eb4320..285abd1 100644
--- a/tests/menu_api_test.rs
+++ b/tests/menu_api_test.rs
@@ -301,8 +301,11 @@ async fn html_menu_page_agrees_with_the_menu_api() {
     let server = start_server().await;
 
     // Every reference link, paired with the badge following it (if any).
+    // The badge's classes are deliberately not pinned — this test is about
+    // the factors, and hard-coding the styling made a purely visual change
+    // to menu.html fail here.
     let re = regex::Regex::new(
-        r#"/recipe/(?:[^"?]*?)"[^>]*>\s*[^<]+?\s*</a>\s*(?:<span class="text-sm text-gray-500">\(×([0-9.]+)\)</span>)?"#,
+        r#"/recipe/(?:[^"?]*?)"[^>]*>\s*[^<]+?\s*</a>\s*(?:<span[^>]*>\(×([0-9.]+)\)</span>)?"#,
     )
     .unwrap();
 

From c0f190ebf44a2379058f527415204f788518d366 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:32:03 +0100
Subject: [PATCH 35/42] feat(ui): token-based editor, docs and error pages

---
 static/css/input.css    |  98 +++++++++++++++++++++++++++----------
 templates/api_docs.html | 105 +++++++++++++++++++++-------------------
 templates/edit.html     |  86 ++++++++++++++++----------------
 templates/error.html    |  18 +++----
 templates/new.html      |  26 +++++-----
 5 files changed, 195 insertions(+), 138 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 70d3d36..8947529 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -229,6 +229,23 @@
         filter: brightness(1.06);
     }
 
+    /* The commit half of a destructive confirmation. Not a second accent:
+       --danger is a distinct token, and the accent must keep meaning "the
+       thing you probably want". Foreground is --accent-ink for the same
+       reason .btn-primary uses it — dark mode's --danger is a light red
+       that cannot carry white text, and --accent-ink is exactly the
+       "ink on a filled token" colour that flips with the theme. */
+    .btn-danger {
+        background: var(--danger);
+        border-color: var(--danger);
+        color: var(--accent-ink);
+    }
+
+    .btn-danger:hover {
+        background: var(--danger);
+        filter: brightness(1.06);
+    }
+
     .stepper {
         display: inline-flex;
         align-items: center;
@@ -728,36 +745,67 @@
         .pantry-actions { opacity: 1; }
     }
 
-    /* CodeMirror editor dark mode support */
-    .dark .cm-editor {
-        @apply bg-gray-900;
-    }
+}
 
-    .dark .cm-gutters {
-        @apply bg-gray-800 border-gray-700;
-    }
+/* ============================================================
+   CODEMIRROR
+   Token-driven in BOTH themes, replacing the old `.dark .cm-*` block.
+
+   These rules live OUTSIDE @layer components, and that is the whole
+   point. CodeMirror mounts its base theme as a plain unlayered <style>
+   when the editor initialises — i.e. after this stylesheet's <link> and
+   outside every cascade layer. Unlayered always beats layered no matter
+   the specificity, so the same rules inside @layer components were
+   silently losing (measured: gutters stayed #f5f5f5 in dark mode).
+
+   Being unlayered only gets us a tie; source order then favours
+   CodeMirror, whose compiled selectors look like `.ͼ2 .cm-gutters`
+   (0,2,0). `.cm-editor.cm-editor` is the cheapest honest way to reach
+   0,3,0 and win without !important.
+
+   The `.cm-editor` root rule stays at 0,1,0 deliberately: CodeMirror
+   sets no background on the wrapper, so nothing competes for it.
+
+   The editor is built without `drawSelection()`, so no `.cm-cursor` or
+   `.cm-selectionBackground` elements exist — the caret and selection are
+   the browser's own. The old `.dark .cm-cursor` / `.dark
+   .cm-selectionBackground` rules were dead code. They are kept so that
+   turning drawSelection() on later stays themed, but the rules doing the
+   work today are `caret-color` on .cm-content and `::selection`.
+   ============================================================ */
+.cm-editor {
+    background: var(--surface);
+    color: var(--text);
+}
 
-    .dark .cm-lineNumbers .cm-gutterElement {
-        @apply text-gray-400;
-    }
+.cm-editor.cm-editor .cm-gutters {
+    background: var(--surface-sunk);
+    border-color: var(--border);
+    color: var(--text-faint);
+}
 
-    .dark .cm-activeLineGutter {
-        @apply bg-gray-700;
-    }
+.cm-editor.cm-editor .cm-activeLineGutter {
+    background: var(--surface-sunk);
+    color: var(--text-muted);
+}
 
-    .dark .cm-activeLine {
-        @apply bg-gray-800/50;
-    }
+.cm-editor.cm-editor .cm-activeLine {
+    background: color-mix(in srgb, var(--surface-sunk) 60%, transparent);
+}
 
-    .dark .cm-content {
-        caret-color: white;
-    }
+.cm-editor.cm-editor .cm-content { caret-color: var(--text); }
 
-    .dark .cm-cursor {
-        border-left-color: white;
-    }
+.cm-editor.cm-editor .cm-cursor,
+.cm-editor.cm-editor .cm-dropCursor {
+    border-left-color: var(--text);
+}
 
-    .dark .cm-selectionBackground {
-        @apply bg-blue-800/50!;
-    }
+/* CodeMirror's focused-selection rule is 0,5,0
+   (`.ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer
+   .cm-selectionBackground`), which no reasonable selector beats, so this
+   keeps the !important the old rule had. */
+.cm-editor .cm-selectionBackground,
+.cm-editor.cm-focused .cm-selectionBackground,
+.cm-editor ::selection {
+    background: color-mix(in srgb, var(--info) 30%, transparent) !important;
 }
\ No newline at end of file
diff --git a/templates/api_docs.html b/templates/api_docs.html
index 5f24b7f..1391b6c 100644
--- a/templates/api_docs.html
+++ b/templates/api_docs.html
@@ -4,22 +4,24 @@
 
 {% block content %}
 <div class="max-w-5xl">
-    <h1 class="text-2xl font-bold mb-2">Server API</h1>
-    <p class="text-gray-600 dark:text-gray-400 mb-6">
+    <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-1.5">Server API</h1>
+    <p class="text-muted mb-5">
         {{ preamble.intro }}
     </p>
 
     <!-- Ground rules -->
-    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-800 p-6 rounded-2xl border-2 border-blue-200 dark:border-gray-700 mb-8">
-        <h2 class="text-lg font-semibold mb-3 text-blue-900 dark:text-blue-200">Before you start</h2>
-        <div class="text-sm space-y-2 text-gray-700 dark:text-gray-300">
+    <div class="card mb-4">
+        <div class="card-head">
+            <h2>Before you start</h2>
+        </div>
+        <div class="p-3.5 text-sm space-y-2 text-muted">
             <div>
-                <span class="font-medium">Base URL:</span>
-                <code class="ml-2 px-2 py-0.5 rounded bg-white dark:bg-gray-900 font-mono">{{ base_url }}</code>
+                <span class="font-medium text-text">Base URL:</span>
+                <code class="ml-2 px-1.5 py-0.5 rounded bg-sunk text-text font-mono">{{ base_url }}</code>
             </div>
             {% for n in preamble.notes %}
             <div>
-                <span class="font-medium">{{ n.label }}:</span>
+                <span class="font-medium text-text">{{ n.label }}:</span>
                 <span class="ml-2">{{ n.text|inline_code|safe }}</span>
             </div>
             {% endfor %}
@@ -27,26 +29,31 @@ <h2 class="text-lg font-semibold mb-3 text-blue-900 dark:text-blue-200">Before y
     </div>
 
     <!-- Errors -->
-    <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-2xl border border-gray-200 dark:border-gray-700 mb-8">
-        <h2 class="text-lg font-semibold mb-3">Errors</h2>
-        <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
-            {{ preamble.error_intro }}
-        </p>
-        <pre class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs overflow-x-auto font-mono">{{ preamble.error_example }}</pre>
-        <ul class="mt-3 text-sm space-y-1 text-gray-700 dark:text-gray-300">
-            {% for c in preamble.error_codes %}
-            <li><span class="font-mono font-medium">{{ c.label }}</span> — {{ c.text|inline_code|safe }}</li>
-            {% endfor %}
-        </ul>
+    <div class="card mb-4">
+        <div class="card-head">
+            <h2>Errors</h2>
+        </div>
+        <div class="p-3.5">
+            <p class="text-sm text-muted mb-2.5">
+                {{ preamble.error_intro }}
+            </p>
+            <pre class="bg-sunk border border-line rounded-[6px] p-3 text-xs overflow-x-auto font-mono text-text">{{ preamble.error_example }}</pre>
+            <ul class="mt-2.5 text-sm space-y-1 text-muted">
+                {% for c in preamble.error_codes %}
+                <li><span class="font-mono font-medium text-text">{{ c.label }}</span> — {{ c.text|inline_code|safe }}</li>
+                {% endfor %}
+            </ul>
+        </div>
     </div>
 
     <!-- Contents -->
-    <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-2xl border border-gray-200 dark:border-gray-700 mb-8">
-        <h2 class="text-lg font-semibold mb-3">Contents</h2>
-        <div class="flex flex-wrap gap-2">
+    <div class="card mb-6">
+        <div class="card-head">
+            <h2>Contents</h2>
+        </div>
+        <div class="p-3.5 flex flex-wrap gap-1.5">
             {% for section in sections %}
-            <a href="#{{ section.id }}"
-               class="px-3 py-1.5 rounded-lg text-sm font-medium bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:border-orange-400 hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors">
+            <a href="#{{ section.id }}" class="btn">
                 {{ section.title }}
             </a>
             {% endfor %}
@@ -55,33 +62,33 @@ <h2 class="text-lg font-semibold mb-3">Contents</h2>
 
     <!-- Endpoints -->
     {% for section in sections %}
-    <section id="{{ section.id }}" class="mb-10 scroll-mt-24">
-        <h2 class="text-xl font-bold mb-2">{{ section.title }}</h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ section.description|inline_code|safe }}</p>
+    <section id="{{ section.id }}" class="mb-8 scroll-mt-24">
+        <h2 class="text-[19px] leading-tight font-[650] tracking-tight text-text mb-1">{{ section.title }}</h2>
+        <p class="text-sm text-muted mb-3">{{ section.description|inline_code|safe }}</p>
 
-        <div class="space-y-4">
+        <div class="space-y-3">
             {% for endpoint in section.endpoints %}
-            <article class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5">
+            <article class="card p-4">
                 <div class="flex flex-wrap items-center gap-2 mb-2">
                     <span class="px-2 py-0.5 rounded text-xs font-bold font-mono {{ endpoint.method_classes() }}">{{ endpoint.method }}</span>
-                    <code class="font-mono text-sm break-all">{{ endpoint.path }}</code>
+                    <code class="font-mono text-sm break-all text-text">{{ endpoint.path }}</code>
                     {% if let Some(feature) = endpoint.feature %}
-                    <span class="px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                    <span class="tag">
                         requires <span class="font-mono">{{ feature }}</span> build
                     </span>
                     {% endif %}
                 </div>
 
-                <p class="text-sm font-medium mb-1">{{ endpoint.summary|inline_code|safe }}</p>
+                <p class="text-sm font-medium text-text mb-1">{{ endpoint.summary|inline_code|safe }}</p>
                 {% if !endpoint.description.is_empty() %}
-                <p class="text-sm text-gray-600 dark:text-gray-400">{{ endpoint.description|inline_code|safe }}</p>
+                <p class="text-sm text-muted">{{ endpoint.description|inline_code|safe }}</p>
                 {% endif %}
 
                 {% if !endpoint.params.is_empty() %}
-                <div class="mt-4 overflow-x-auto">
+                <div class="mt-3.5 overflow-x-auto">
                     <table class="w-full text-sm">
                         <thead>
-                            <tr class="text-left text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+                            <tr class="text-left text-xs uppercase tracking-wide text-faint border-b border-line">
                                 <th class="py-1.5 pr-4 font-medium">Name</th>
                                 <th class="py-1.5 pr-4 font-medium">In</th>
                                 <th class="py-1.5 pr-4 font-medium">Type</th>
@@ -90,34 +97,34 @@ <h2 class="text-xl font-bold mb-2">{{ section.title }}</h2>
                         </thead>
                         <tbody>
                             {% for p in endpoint.params %}
-                            <tr class="border-b border-gray-100 dark:border-gray-700 align-top">
-                                <td class="py-1.5 pr-4 font-mono whitespace-nowrap">
-                                    {{ p.name }}{% if p.required %}<span class="text-red-600 dark:text-red-400" title="required">*</span>{% endif %}
+                            <tr class="border-b border-line align-top">
+                                <td class="py-1.5 pr-4 font-mono whitespace-nowrap text-text">
+                                    {{ p.name }}{% if p.required %}<span class="text-danger" title="required">*</span>{% endif %}
                                 </td>
-                                <td class="py-1.5 pr-4 text-gray-500 dark:text-gray-400">{{ p.kind }}</td>
-                                <td class="py-1.5 pr-4 font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ p.type_name }}</td>
-                                <td class="py-1.5 text-gray-600 dark:text-gray-400">{{ p.description|inline_code|safe }}</td>
+                                <td class="py-1.5 pr-4 text-faint">{{ p.kind }}</td>
+                                <td class="py-1.5 pr-4 font-mono text-faint whitespace-nowrap">{{ p.type_name }}</td>
+                                <td class="py-1.5 text-muted">{{ p.description|inline_code|safe }}</td>
                             </tr>
                             {% endfor %}
                         </tbody>
                     </table>
-                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                        <span class="text-red-600 dark:text-red-400">*</span> required
+                    <p class="mt-1 text-xs text-faint">
+                        <span class="text-danger">*</span> required
                     </p>
                 </div>
                 {% endif %}
 
                 {% if let Some(request) = endpoint.request_example %}
-                <div class="mt-4">
-                    <h4 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Request body</h4>
-                    <pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs overflow-x-auto font-mono">{{ request }}</pre>
+                <div class="mt-3.5">
+                    <h4 class="section-label px-0 mt-0 mb-1">Request body</h4>
+                    <pre class="bg-sunk border border-line rounded-[6px] p-3 text-xs overflow-x-auto font-mono text-text">{{ request }}</pre>
                 </div>
                 {% endif %}
 
                 {% if let Some(response) = endpoint.response_example %}
-                <div class="mt-4">
-                    <h4 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Response</h4>
-                    <pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs overflow-x-auto font-mono">{{ response }}</pre>
+                <div class="mt-3.5">
+                    <h4 class="section-label px-0 mt-0 mb-1">Response</h4>
+                    <pre class="bg-sunk border border-line rounded-[6px] p-3 text-xs overflow-x-auto font-mono text-text">{{ response }}</pre>
                 </div>
                 {% endif %}
             </article>
diff --git a/templates/edit.html b/templates/edit.html
index aa53983..03aed6c 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -5,45 +5,43 @@
 {% block content %}
 <div class="flex flex-col h-[calc(100vh-12rem)]">
     <!-- Header bar -->
-    <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-4">
-            <a href="{{ prefix }}/recipe/{{ recipe_path }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors flex items-center gap-2">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
-                </svg>
-                {{ tr.t("action-back") }}
-            </a>
-            <h1 class="text-2xl font-bold text-gray-800">{{ recipe_name }}</h1>
-        </div>
-        <div class="flex items-center gap-3">
-            <span id="save-status" class="text-sm text-gray-500"></span>
-            <button onclick="showDeleteModal()" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div class="flex items-center gap-4 mb-3">
+        <a href="{{ prefix }}/recipe/{{ recipe_path }}" class="btn">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            <span>{{ tr.t("action-back") }}</span>
+        </a>
+        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text truncate">{{ recipe_name }}</h1>
+        <div class="ml-auto flex items-center gap-3">
+            <span id="save-status" class="text-sm text-faint"></span>
+            <button onclick="showDeleteModal()" class="btn text-danger">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                 </svg>
-                {{ tr.t("action-delete") }}
+                <span>{{ tr.t("action-delete") }}</span>
             </button>
         </div>
     </div>
 
     <!-- Delete confirmation modal -->
     <div id="delete-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 max-w-md mx-4">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center">
-                    <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card p-5 max-w-md mx-4">
+            <div class="flex items-center gap-3 mb-3.5">
+                <div class="w-12 h-12 rounded-full bg-danger-soft flex items-center justify-center">
+                    <svg class="w-6 h-6 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                     </svg>
                 </div>
-                <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ tr.t("delete-recipe") }}</h2>
+                <h2 class="text-[17px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("delete-recipe") }}</h2>
             </div>
-            <p class="text-gray-600 dark:text-gray-300 mb-2">{{ tr.t("delete-recipe-confirm") }}</p>
-            <p class="text-sm text-red-600 dark:text-red-400 mb-6">{{ tr.t("delete-recipe-warning") }}</p>
-            <div class="flex justify-end gap-3">
-                <button onclick="hideDeleteModal()" class="px-4 py-2 bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+            <p class="text-muted mb-1.5">{{ tr.t("delete-recipe-confirm") }}</p>
+            <p class="text-sm text-danger mb-5">{{ tr.t("delete-recipe-warning") }}</p>
+            <div class="flex justify-end gap-2">
+                <button onclick="hideDeleteModal()" class="btn">
                     {{ tr.t("action-cancel") }}
                 </button>
-                <button onclick="deleteRecipe()" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
+                <button onclick="deleteRecipe()" class="btn btn-danger">
                     {{ tr.t("action-delete") }}
                 </button>
             </div>
@@ -51,17 +49,17 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ tr.t("delete-r
     </div>
 
     <!-- Editor area -->
-    <div id="editor-container" class="flex-1 bg-white rounded-2xl shadow-lg overflow-hidden"></div>
+    <div id="editor-container" class="flex-1 card overflow-hidden"></div>
 
     <!-- Status bar -->
-    <div id="status-bar" class="mt-2 px-4 py-2 bg-gray-100 rounded-lg flex items-center justify-between text-sm">
+    <div id="status-bar" class="mt-2 px-3.5 py-1.5 bg-sunk border border-line rounded-[6px] flex items-center justify-between text-[13px] text-muted">
         <div class="flex items-center gap-2">
-            <span id="lsp-status" class="flex items-center gap-1">
-                <span id="lsp-indicator" class="w-2 h-2 rounded-full bg-gray-400"></span>
+            <span id="lsp-status" class="flex items-center gap-1.5">
+                <span id="lsp-indicator" class="item-status-dot bg-faint"></span>
                 <span id="lsp-text">Disconnected</span>
             </span>
         </div>
-        <div id="cursor-position" class="text-gray-500">
+        <div id="cursor-position" class="text-faint tabular-nums">
             Line 1, Col 1
         </div>
     </div>
@@ -124,28 +122,30 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ tr.t("delete-r
     switch (state) {
         case 'modified':
             status.textContent = 'Modified';
-            status.className = 'text-sm text-orange-500';
+            status.className = 'text-sm text-accent-text';
             break;
         case 'saving':
             status.textContent = 'Saving...';
-            status.className = 'text-sm text-gray-500';
+            status.className = 'text-sm text-faint';
             break;
         case 'saved':
             status.textContent = 'Saved';
-            status.className = 'text-sm text-green-500';
+            status.className = 'text-sm text-ok';
             break;
         case 'error':
             status.textContent = 'Save failed';
-            status.className = 'text-sm text-red-500';
+            status.className = 'text-sm text-danger';
             break;
     }
 }
 
 function showToast(message, type = 'error') {
     // Create toast element
+    // Surface + token-coloured text rather than a filled red/green block:
+    // --danger and --ok are light in dark mode and cannot carry white text.
     const toast = document.createElement('div');
-    toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 ${
-        type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white'
+    toast.className = `fixed bottom-4 right-4 px-4 py-2 card shadow-lg z-50 text-sm font-medium ${
+        type === 'error' ? 'text-danger' : 'text-ok'
     }`;
     toast.textContent = message;
     document.body.appendChild(toast);
@@ -420,20 +420,22 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ tr.t("delete-r
     if (!indicator || !text) return;
 
     switch (status) {
+        // className is replaced wholesale, so `item-status-dot` (which carries
+        // the 7px size and border-radius) has to be restated every time.
         case 'connected':
-            indicator.className = 'w-2 h-2 rounded-full bg-green-500';
+            indicator.className = 'item-status-dot bg-ok';
             text.textContent = 'LSP Connected';
-            text.className = 'text-green-600';
+            text.className = 'text-ok';
             break;
         case 'disconnected':
-            indicator.className = 'w-2 h-2 rounded-full bg-gray-400';
+            indicator.className = 'item-status-dot bg-faint';
             text.textContent = 'Disconnected';
-            text.className = 'text-gray-500';
+            text.className = 'text-faint';
             break;
         case 'error':
-            indicator.className = 'w-2 h-2 rounded-full bg-red-500';
+            indicator.className = 'item-status-dot bg-danger';
             text.textContent = 'LSP Error';
-            text.className = 'text-red-600';
+            text.className = 'text-danger';
             break;
     }
 }
diff --git a/templates/error.html b/templates/error.html
index b37aa48..0e01621 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -4,20 +4,20 @@
 
 {% block content %}
 <div class="max-w-2xl mx-auto mt-12">
-    <div class="bg-red-50 border border-red-200 rounded-2xl p-6 shadow-lg">
-        <div class="flex items-start gap-4">
-            <div class="shrink-0 text-red-500">
-                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div class="card p-5 border-l-[3px] border-l-danger">
+        <div class="flex items-start gap-3.5">
+            <div class="shrink-0 text-danger">
+                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                 </svg>
             </div>
-            <div>
-                <h2 class="text-xl font-bold text-red-700 mb-2">{{ tr.t("error-title") }}</h2>
-                <p class="text-red-600 font-mono text-sm whitespace-pre-wrap">{{ error_message }}</p>
+            <div class="min-w-0">
+                <h2 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-1.5">{{ tr.t("error-title") }}</h2>
+                <p class="text-danger font-mono text-sm whitespace-pre-wrap break-words">{{ error_message }}</p>
             </div>
         </div>
-        <div class="mt-6">
-            <a href="{{ prefix }}/" class="inline-block px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-all">
+        <div class="mt-5">
+            <a href="{{ prefix }}/" class="btn">
                 {{ tr.t("error-back-home") }}
             </a>
         </div>
diff --git a/templates/new.html b/templates/new.html
index 1c07909..b72e5ae 100644
--- a/templates/new.html
+++ b/templates/new.html
@@ -4,22 +4,22 @@
 
 {% block content %}
 <div class="max-w-xl mx-auto">
-    <h1 class="text-3xl font-bold text-gray-800 mb-8">{{ tr.t("new-recipe") }}</h1>
+    <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-5">{{ tr.t("new-recipe") }}</h1>
 
     {% if let Some(err) = error %}
-    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
-        <div class="flex items-center gap-2">
-            <svg class="w-5 h-5 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div class="mb-5 card p-3.5 border-l-[3px] border-l-danger">
+        <div class="flex items-center gap-2.5">
+            <svg class="w-5 h-5 text-danger shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
-            <p class="text-red-700">{{ err }}</p>
+            <p class="text-danger text-sm">{{ err }}</p>
         </div>
     </div>
     {% endif %}
 
-    <form action="{{ prefix }}/new" method="POST" class="space-y-6">
+    <form action="{{ prefix }}/new" method="POST" class="space-y-5">
         <div>
-            <label for="filename" class="block text-sm font-medium text-gray-700 mb-2">
+            <label for="filename" class="block text-sm font-medium text-muted mb-1.5">
                 {{ tr.t("new-recipe-path") }}
             </label>
             <div class="flex items-center gap-2">
@@ -31,18 +31,18 @@ <h1 class="text-3xl font-bold text-gray-800 mb-8">{{ tr.t("new-recipe") }}</h1>
                     pattern="[a-zA-Z0-9_/ -]+"
                     placeholder="{{ tr.t("new-recipe-placeholder") }}"
                     value="{{ filename.as_deref().unwrap_or("") }}"
-                    class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-hidden{% if error.is_some() %} border-red-300{% endif %}"
+                    class="flex-1 h-10 px-3 text-sm bg-surface text-text border rounded-[6px] focus:border-accent outline-hidden {% if error.is_some() %}border-danger{% else %}border-line-strong{% endif %}"
                 >
-                <span class="text-gray-500">.cook</span>
+                <span class="text-faint text-sm">.cook</span>
             </div>
-            <p class="mt-2 text-sm text-gray-500">{{ tr.t("new-recipe-hint") }}</p>
+            <p class="mt-1.5 text-sm text-faint">{{ tr.t("new-recipe-hint") }}</p>
         </div>
 
-        <div class="flex gap-4">
-            <a href="{{ prefix }}/" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+        <div class="flex gap-2">
+            <a href="{{ prefix }}/" class="btn">
                 {{ tr.t("action-cancel") }}
             </a>
-            <button type="submit" class="px-6 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:from-orange-600 hover:to-red-600 transition-all shadow-md">
+            <button type="submit" class="btn btn-primary">
                 {{ tr.t("new-recipe-create") }}
             </button>
         </div>

From 1139a34df8c24bacd388d1ca3ccc3e5e83972002 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 21:34:14 +0100
Subject: [PATCH 36/42] docs: expand Task 13 with measured sweep list and
 print-block scope

---
 .../plans/2026-08-15-web-ui-refresh.md        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
index 2dc3394..f7a948a 100644
--- a/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
+++ b/docs/superpowers/plans/2026-08-15-web-ui-refresh.md
@@ -1934,6 +1934,32 @@ The result items are generated in two places — migrate both before deleting an
 
 Replace their hardcoded `text-gray-800` / `text-gray-500` / `border-gray-100` utilities with `text-text` / `text-muted` / `border-line`. Then verify: open the site in dark mode, type `pizza`, and confirm the dropdown's titles, subtitles and row separators are all legible. (The separator is already wrong today — there is no `.dark .border-gray-100` rule — so this fixes a live minor bug too.)
 
+- [ ] **Step 0b: Sweep the remaining raw palette utilities**
+
+Tasks 6–12 converted each page as they touched it, but three files still carry raw palette utilities that the override block is the only thing keeping legible. **Convert all of these before deleting anything.** Measured counts at the time of writing:
+
+| File | Count | What |
+| --- | --- | --- |
+| `templates/base.html` | ~32 outside the print block | mobile overflow dropdown (8 links/buttons), the static-mode footer, and the search-results `innerHTML` template string |
+| `templates/recipes.html` | 9 | breadcrumbs, the "today's menu" purple gradient card, the empty state |
+| `templates/recipe.html` | 5 | breadcrumbs only |
+| `static/js/search.js` | — | static-mode search results, same markup as the inline version |
+
+Use the standard mapping: `text-gray-900/800` → `text-text`, `text-gray-700/600` → `text-muted`, `text-gray-500/400` → `text-faint`, `bg-white` → `bg-surface`, `bg-gray-50/100` → `bg-sunk`, `border-gray-*` → `border-line`, `text-orange-600/700` → `text-accent-text`. Drop every `dark:` variant — the tokens handle both themes.
+
+Two need judgement rather than a mechanical swap:
+
+- **`recipes.html`'s "today's menu" card** is a `from-purple-600 to-pink-600` gradient with white text — the last decorative gradient in the app. Make it a `.card` with an accent left border, or `.card` + `bg-accent-soft`. Do not keep the gradient.
+- **The search-results hover** uses `hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50`. Replace with `hover:bg-sunk`.
+
+Verify with:
+
+```bash
+grep -rnE "(text|bg|border|from|via|to)-(gray|slate|red|orange|amber|yellow|green|emerald|teal|blue|indigo|violet|purple|pink|rose)-[0-9]+" templates/ static/js/ | grep -v "@media print"
+```
+
+Only `src/web/templates.rs`'s API-docs HTTP-verb badges may remain — they are generated in Rust, carry their own `dark:` variants, and `tailwind.config.js` scans `src/**/*.rs`, so they survive the deletion intact.
+
 - [ ] **Step 1: Confirm nothing still relies on the overrides**
 
 Run: `grep -rn "bg-white\|text-gray-[0-9]\|bg-gray-50\|border-gray-[0-9]\|bg-gradient-to-" templates/*.html | grep -v "print:" | grep -v "^templates/base.html:[0-9]*: *\." `
@@ -1950,6 +1976,12 @@ Keep:
 
 The `.dark { color-scheme: dark; }` declaration moves to `input.css` in Task 1, so it is not lost.
 
+- [ ] **Step 2a: Deal with the `.dark` rules INSIDE `@media print`**
+
+The print block contains its own `.dark .ingredient-badge`, `.dark .cookware-badge`, `.dark .timer-badge`, `.dark .step-number`, `.dark .tag`, `.dark .metadata-pill` and `.dark .recipe-card` rules (roughly lines 401–435 before edits). They were written to make the OLD gradient pills readable on paper. Task 4 replaced those components with flat token styling, and Task 6 added a top-level `@media print` token reset in `input.css` that already handles printing correctly — so these rules now **re-skin the new components with the old orange/green pill backgrounds and gradient tags whenever you print from dark theme.**
+
+Delete them. Keep the rest of the print block. Then confirm by printing a recipe from dark theme that badges render as flat tinted text, not filled pills.
+
 - [ ] **Step 2b: Remove the stale print selector**
 
 Inside the retained `@media print` block, delete:

From 13013c97da63de8d1ca43753c053c6dc32ef4043 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 22:01:57 +0100
Subject: [PATCH 37/42] refactor(ui): remove dark-mode utility override block

---
 static/js/keyboard-shortcuts.js |  24 +--
 static/js/search.js             |   6 +-
 tailwind.config.js              |   8 -
 templates/base.html             | 298 ++------------------------------
 templates/recipe.html           |  10 +-
 templates/recipes.html          |  30 ++--
 6 files changed, 50 insertions(+), 326 deletions(-)

diff --git a/static/js/keyboard-shortcuts.js b/static/js/keyboard-shortcuts.js
index cd8813a..7a2d2d1 100644
--- a/static/js/keyboard-shortcuts.js
+++ b/static/js/keyboard-shortcuts.js
@@ -74,10 +74,10 @@
         }
 
         const staticMode = window.__STATIC_MODE__ === true;
-        const kbd = 'class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-sm font-mono"';
+        const kbd = 'class="px-2 py-1 bg-sunk rounded text-sm font-mono"';
         const row = (label, keys) => `
             <div class="flex justify-between items-center">
-                <span class="text-gray-600 dark:text-gray-400">${label}</span>
+                <span class="text-muted">${label}</span>
                 <span>${keys}</span>
             </div>`;
         const k = (s) => `<kbd ${kbd}>${s}</kbd>`;
@@ -112,7 +112,7 @@
 
         const shoppingSection = staticMode ? '' : `
             <div>
-                <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Shopping List</h3>
+                <h3 class="font-semibold text-text mb-3">Shopping List</h3>
                 <div class="space-y-2">
                     ${row('Clear all items', k('c'))}
                 </div>
@@ -122,10 +122,10 @@
         modal.id = 'keyboard-shortcuts-modal';
         modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';
         modal.innerHTML = `
-            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden">
-                <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">Keyboard Shortcuts</h2>
-                    <button onclick="closeShortcutsHelp()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+            <div class="bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden">
+                <div class="p-6 border-b border-line flex justify-between items-center">
+                    <h2 class="text-xl font-bold text-text">Keyboard Shortcuts</h2>
+                    <button onclick="closeShortcutsHelp()" class="text-faint hover:text-text">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                         </svg>
@@ -134,11 +134,11 @@
                 <div class="p-6 overflow-y-auto max-h-[60vh]">
                     <div class="grid md:grid-cols-2 gap-6">
                         <div>
-                            <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Navigation</h3>
+                            <h3 class="font-semibold text-text mb-3">Navigation</h3>
                             <div class="space-y-2">${navRows.join('')}</div>
                         </div>
                         <div>
-                            <h3 class="font-semibold text-gray-900 dark:text-white mb-3">General</h3>
+                            <h3 class="font-semibold text-text mb-3">General</h3>
                             <div class="space-y-2">
                                 ${row('Toggle theme', k('t'))}
                                 ${row('Show shortcuts', k('?'))}
@@ -146,14 +146,14 @@
                             </div>
                         </div>
                         <div>
-                            <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Recipe Page</h3>
+                            <h3 class="font-semibold text-text mb-3">Recipe Page</h3>
                             <div class="space-y-2">${recipeRows.join('')}</div>
                         </div>
                         ${shoppingSection}
                     </div>
                 </div>
-                <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
-                    Press <kbd class="px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-xs font-mono">Esc</kbd> to close
+                <div class="p-4 border-t border-line text-center text-sm text-faint">
+                    Press <kbd class="px-1 py-0.5 bg-sunk rounded text-xs font-mono">Esc</kbd> to close
                 </div>
             </div>
         `;
diff --git a/static/js/search.js b/static/js/search.js
index f38138b..986da0b 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -36,12 +36,12 @@
 
   function render(matches) {
     if (matches.length === 0) {
-      results.innerHTML = '<div class="p-4 text-gray-500 text-center">No recipes found</div>';
+      results.innerHTML = '<div class="p-4 text-muted text-center">No recipes found</div>';
     } else {
       results.innerHTML = matches.map(function (m) {
         var href = prefix + "/" + m.path;
-        return '<a href="' + escapeHtml(href) + '" class="search-result block px-4 py-3 hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-colors border-b border-gray-100 last:border-b-0">' +
-          '<div class="font-medium text-gray-800">' + escapeHtml(m.title) + '</div>' +
+        return '<a href="' + escapeHtml(href) + '" class="search-result block px-4 py-3 hover:bg-sunk transition-colors border-b border-line last:border-b-0">' +
+          '<div class="font-medium text-text">' + escapeHtml(m.title) + '</div>' +
           '</a>';
       }).join("");
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index f186c77..85c6827 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,14 +8,6 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: {
-        'primary-orange': '#ff6b35',
-        'primary-green': '#4ade80',
-        'light-orange': '#fed7aa',
-        'light-blue': '#dbeafe',
-        'light-green': '#dcfce7',
-        'light-yellow': '#fef3c7',
-      },
       animation: {
         'gradient': 'gradient 3s ease infinite',
       },
diff --git a/templates/base.html b/templates/base.html
index d92dab1..a06e4a0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,230 +24,6 @@
             padding: 16px;
         }
 
-        /* Dark mode styles */
-        .dark {
-            color-scheme: dark;
-        }
-
-        .dark body {
-            background-color: #111827;
-        }
-
-        .dark .bg-gray-50 {
-            background-color: #111827;
-        }
-
-        .dark .bg-white {
-            background-color: #1f2937;
-        }
-
-        .dark .text-gray-900 {
-            color: #f9fafb;
-        }
-
-        .dark .text-gray-800 {
-            color: #e5e7eb;
-        }
-
-        .dark .text-gray-700 {
-            color: #d1d5db;
-        }
-
-        .dark .text-gray-600 {
-            color: #9ca3af;
-        }
-
-        .dark .text-gray-500 {
-            color: #6b7280;
-        }
-
-        .dark .text-gray-400 {
-            color: #9ca3af;
-        }
-
-        .dark .border-gray-300 {
-            border-color: #4b5563;
-        }
-
-        .dark .border-gray-200 {
-            border-color: #374151;
-        }
-
-        .dark .border-purple-200 {
-            border-color: #7c3aed;
-        }
-
-        .dark .hover\:text-gray-900:hover {
-            color: #f9fafb;
-        }
-
-        .dark .hover\:text-gray-800:hover {
-            color: #e5e7eb;
-        }
-
-        .dark .hover\:bg-gray-50:hover {
-            background-color: #374151;
-        }
-
-        .dark .hover\:bg-gray-100:hover {
-            background-color: #374151;
-        }
-
-        .dark .bg-gradient-to-r.from-orange-50.to-yellow-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        .dark .bg-gradient-to-r.from-gray-50.to-orange-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        .dark .bg-gradient-to-r.from-green-50.to-blue-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        .dark .bg-gradient-to-r.from-blue-50.to-purple-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        /* Shopping list specific dark styles */
-        .dark .bg-gradient-to-r.from-purple-50.to-pink-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        .dark .bg-gradient-to-r.from-green-50.to-emerald-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        /* Plan cards in the shopping list use an indigo/purple gradient */
-        .dark .bg-gradient-to-r.from-indigo-50.to-purple-50 {
-            background: linear-gradient(to right, #1f2937, #111827);
-            border: 1px solid #374151;
-        }
-
-        .dark .border-indigo-200 {
-            border-color: #4c1d95;
-        }
-
-        .dark .border-purple-200 {
-            border-color: #4c1d95;
-        }
-
-        .dark .border-green-200 {
-            border-color: #065f46;
-        }
-
-        .dark .border-orange-200 {
-            border-color: #7c2d12;
-        }
-
-        .dark .border-blue-400 {
-            border-color: #1e3a8a;
-        }
-
-        /* Dark mode hover states */
-        .dark .hover\:bg-gradient-to-r:hover {
-            background: #374151 !important;
-        }
-
-        .dark .hover\:from-purple-50:hover,
-        .dark .hover\:to-pink-50:hover {
-            background: #374151 !important;
-        }
-
-        .dark .hover\:from-orange-100:hover,
-        .dark .hover\:to-amber-100:hover {
-            background: #374151 !important;
-        }
-
-        .dark .hover\:from-purple-100:hover,
-        .dark .hover\:to-pink-100:hover {
-            background: #374151 !important;
-        }
-
-        .dark a.hover\:bg-gradient-to-r:hover {
-            background: #374151 !important;
-            color: #e5e7eb !important;
-        }
-
-        /* Fix for navigation pill hover states */
-        .dark a[href="{{ prefix }}/"].hover\:bg-gradient-to-r:hover{% if !static_mode %},
-        .dark a[href="{{ prefix }}/shopping-list"].hover\:bg-gradient-to-r:hover{% endif %} {
-            background: #374151 !important;
-        }
-
-        .dark .hover\:text-orange-700:hover {
-            color: #fb923c !important;
-        }
-
-        .dark .hover\:text-purple-700:hover {
-            color: #a78bfa !important;
-        }
-
-        /* Button dark mode styles */
-        .dark .bg-gray-200 {
-            background-color: #4b5563;
-        }
-
-        .dark .hover\:bg-gray-300:hover {
-            background-color: #6b7280;
-        }
-
-        .dark .bg-gray-200.text-gray-700 {
-            color: #e5e7eb;
-        }
-
-        /* Text colors in various contexts */
-        .dark .text-purple-600 {
-            color: #c084fc;
-        }
-
-        .dark .text-red-500 {
-            color: #ef4444;
-        }
-
-        .dark .hover\:text-red-700:hover {
-            color: #dc2626;
-        }
-
-        .dark .text-green-600 {
-            color: #34d399;
-        }
-
-        .dark .shadow-lg, .dark .shadow-md, .dark .shadow-xl {
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
-        }
-
-        /* Dark mode tag and badge styles */
-        .dark .bg-gradient-to-r.from-yellow-100.to-orange-100 {
-            background: linear-gradient(to right, #374151, #4b5563);
-        }
-
-        .dark .text-orange-700 {
-            color: #fb923c;
-        }
-
-        .dark .text-orange-600 {
-            color: #fb923c;
-        }
-
-        .dark .bg-gradient-to-r.from-purple-100.to-pink-100 {
-            background: linear-gradient(to right, #374151, #4b5563);
-        }
-
-        .dark .text-purple-700 {
-            color: #a78bfa;
-        }
-
-        .dark .bg-gray-100 {
-            background-color: #374151;
-        }
-
         /* Search result keyboard selection. --surface-sunk alone is only about
            1.1:1 against --surface in dark mode — effectively invisible while
            arrowing through results — so the accent bar carries the signal. */
@@ -321,45 +97,6 @@
                 border-color: #e5e7eb !important;
             }
 
-            .dark .recipe-card {
-                background-color: white !important;
-                border-color: #e5e7eb !important;
-            }
-
-            /* Dark mode badges must be readable when printed */
-            .dark .ingredient-badge {
-                background: #fef3c7 !important;
-                color: #9a3412 !important;
-                border-color: #fb923c !important;
-            }
-
-            .dark .cookware-badge {
-                background: #dcfce7 !important;
-                color: #14532d !important;
-                border-color: #4ade80 !important;
-            }
-
-            .dark .timer-badge {
-                background: #fee2e2 !important;
-                color: #7f1d1d !important;
-                border-color: #f87171 !important;
-            }
-
-            .dark .step-number {
-                background: #f97316 !important;
-                color: white !important;
-            }
-
-            .dark .tag {
-                background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
-                color: white !important;
-            }
-
-            .dark .metadata-pill {
-                background: white !important;
-                color: #374151 !important;
-            }
-
             /* Global print styles */
             * {
                 print-color-adjust: exact;
@@ -383,11 +120,6 @@
                 display: none !important;
             }
 
-            /* Hide entire navigation bar and its contents */
-            .bg-white.shadow-lg.rounded-2xl.mb-8 {
-                display: none !important;
-            }
-
             /* Hide all navigation links */
             a[href="{{ prefix }}/"]{% if !static_mode %}, a[href="{{ prefix }}/shopping-list"], a[href="{{ prefix }}/preferences"]{% endif %} {
                 display: none !important;
@@ -753,34 +485,34 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                 </svg>
             </button>
-            <div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl z-50 py-1">
+            <div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-surface border border-line rounded-xl shadow-xl z-50 py-1">
                 {% if features.show_shopping_list || features.show_pantry %}
-                <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "recipes" %}font-semibold text-accent-text{% endif %}">
+                <a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors {% if active == "recipes" %}font-semibold text-accent-text{% endif %}">
                     <span>🍳</span> <span>{{ tr.t("nav-recipes") }}</span>
                 </a>
                 {% if features.show_shopping_list && !static_mode %}
-                <a href="{{ prefix }}/shopping-list" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "shopping" %}font-semibold text-accent-text{% endif %}">
+                <a href="{{ prefix }}/shopping-list" class="flex items-center gap-3 px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors {% if active == "shopping" %}font-semibold text-accent-text{% endif %}">
                     <span>🛒</span> <span>{{ tr.t("nav-shopping-list") }}</span>
                 </a>
                 {% endif %}
                 {% if features.show_pantry && !static_mode %}
-                <a href="{{ prefix }}/pantry" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if active == "pantry" %}font-semibold text-accent-text{% endif %}">
+                <a href="{{ prefix }}/pantry" class="flex items-center gap-3 px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors {% if active == "pantry" %}font-semibold text-accent-text{% endif %}">
                     <span>🥫</span> <span>{{ tr.t("nav-pantry") }}</span>
                 </a>
                 {% endif %}
-                <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+                <div class="border-t border-line my-1"></div>
                 {% endif %}
                 {% if !static_mode %}
-                <a href="{{ prefix }}/preferences" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                <a href="{{ prefix }}/preferences" class="flex items-center gap-3 px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors">
                     <span>⚙️</span> <span>Preferences</span>
                 </a>
                 {% endif %}
-                <button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                <button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                     <span>Keyboard Shortcuts</span>
                 </button>
-                <button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                    <svg class="w-4 h-4 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
+                <button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-muted hover:bg-sunk hover:text-text transition-colors">
+                    <svg class="w-4 h-4 hidden dark:block" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
                     <svg class="w-4 h-4 block dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
                     <span>Toggle Theme</span>
                 </button>
@@ -794,12 +526,12 @@
         </main>
 
         {% if static_mode %}
-        <footer class="mt-12 mb-6 text-center text-sm text-gray-500 print:hidden">
+        <footer class="mt-12 mb-6 text-center text-sm text-faint print:hidden">
             Built with
-            <a href="https://cooklang.org/cli/" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">CookCLI</a>
+            <a href="https://cooklang.org/cli/" class="text-accent-text hover:underline" target="_blank" rel="noopener">CookCLI</a>
             {% if let Some(url) = repo_url %}
             &middot;
-            <a href="{{ url }}" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">View source</a>
+            <a href="{{ url }}" class="text-accent-text hover:underline" target="_blank" rel="noopener">View source</a>
             {% endif %}
         </footer>
         {% endif %}
@@ -858,11 +590,11 @@
                     selectedIndex = -1;
 
                     if (results.length === 0) {
-                        searchResults.innerHTML = '<div class="p-4 text-gray-500 text-center">' + translations.noRecipes + '</div>';
+                        searchResults.innerHTML = '<div class="p-4 text-muted text-center">' + translations.noRecipes + '</div>';
                     } else {
                         searchResults.innerHTML = results.map(recipe =>
-                            `<a href="{{ prefix }}/recipe/${recipe.path}" class="search-result block px-4 py-3 hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-colors border-b border-gray-100 last:border-b-0">
-                                <div class="font-medium text-gray-800">${recipe.name}</div>
+                            `<a href="{{ prefix }}/recipe/${recipe.path}" class="search-result block px-4 py-3 hover:bg-sunk transition-colors border-b border-line last:border-b-0">
+                                <div class="font-medium text-text">${recipe.name}</div>
                             </a>`
                         ).join('');
                     }
diff --git a/templates/recipe.html b/templates/recipe.html
index 310f0aa..99bfc0e 100644
--- a/templates/recipe.html
+++ b/templates/recipe.html
@@ -7,15 +7,15 @@
 
 <div>
     <nav class="mb-4 breadcrumb print:hidden">
-        <ol class="flex items-center space-x-2 text-sm text-gray-600">
-            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-gray-900">{{ tr.t("nav-recipes") }}</a></li>
+        <ol class="flex items-center space-x-2 text-sm text-muted">
+            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-text">{{ tr.t("nav-recipes") }}</a></li>
             {% for crumb in breadcrumbs %}
             <li class="flex items-center">
-                <span class="mx-2 text-gray-400">/</span>
+                <span class="mx-2 text-faint">/</span>
                 {% if loop.last %}
-                    <span class="text-gray-900">{{ crumb }}</span>
+                    <span class="text-text">{{ crumb }}</span>
                 {% else %}
-                    <a href="{{ prefix }}/directory/{{ breadcrumbs[..loop.index0 + 1].join("/") }}{% if static_mode %}.html{% endif %}" class="hover:text-gray-900">{{ crumb }}</a>
+                    <a href="{{ prefix }}/directory/{{ breadcrumbs[..loop.index0 + 1].join("/") }}{% if static_mode %}.html{% endif %}" class="hover:text-text">{{ crumb }}</a>
                 {% endif %}
             </li>
             {% endfor %}
diff --git a/templates/recipes.html b/templates/recipes.html
index 30a067a..8926091 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -6,12 +6,12 @@
 <div>
     {% if !breadcrumbs.is_empty() %}
     <nav class="mb-4">
-        <ol class="flex items-center space-x-2 text-sm text-gray-600">
-            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-gray-900">{{ tr.t("nav-recipes") }}</a></li>
+        <ol class="flex items-center space-x-2 text-sm text-muted">
+            <li><a href="{{ prefix }}/{% if static_mode %}index.html{% endif %}" class="hover:text-text">{{ tr.t("nav-recipes") }}</a></li>
             {% for crumb in breadcrumbs %}
             <li class="flex items-center">
-                <span class="mx-2 text-gray-400">/</span>
-                <a href="{{ prefix }}/directory/{{ crumb.path }}{% if static_mode %}.html{% endif %}" class="hover:text-gray-900">{{ crumb.name }}</a>
+                <span class="mx-2 text-faint">/</span>
+                <a href="{{ prefix }}/directory/{{ crumb.path }}{% if static_mode %}.html{% endif %}" class="hover:text-text">{{ crumb.name }}</a>
             </li>
             {% endfor %}
         </ol>
@@ -34,19 +34,19 @@ <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">
 
     {% match todays_menu %}
     {% when Some with (menu) %}
-    <div class="mb-8 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-lg p-6 text-white">
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <div class="flex-1">
-                <div class="flex items-center gap-3 mb-2">
-                    <span class="text-2xl">📋</span>
-                    <h2 class="text-xl font-bold">{{ tr.t("todays-menu-title") }}</h2>
-                    <span class="text-sm opacity-80">{{ menu.date_display }}</span>
+    <div class="mb-6 card p-4 border-l-[3px] border-l-accent">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2.5 mb-1">
+                    <span class="text-lg">📋</span>
+                    <h2 class="text-[15px] font-semibold text-text">{{ tr.t("todays-menu-title") }}</h2>
+                    <span class="text-xs text-faint">{{ menu.date_display }}</span>
                 </div>
-                <p class="text-sm opacity-90">{{ tr.t("todays-menu-from") }}: {{ menu.menu_name }}</p>
+                <p class="text-[13px] text-muted">{{ tr.t("todays-menu-from") }}: {{ menu.menu_name }}</p>
             </div>
-            <a href="{{ prefix }}/{% if static_mode %}menu{% else %}recipe{% endif %}/{{ menu.menu_path }}{% if static_mode %}.html{% endif %}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-purple-700 rounded-xl font-semibold hover:bg-purple-50 transition-colors shadow-md self-start sm:self-center whitespace-nowrap">
+            <a href="{{ prefix }}/{% if static_mode %}menu{% else %}recipe{% endif %}/{{ menu.menu_path }}{% if static_mode %}.html{% endif %}" class="btn self-start sm:self-center">
                 {{ tr.t("todays-menu-view") }}
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                 </svg>
             </a>
@@ -93,7 +93,7 @@ <h3 class="recipe-card-title">{{ item.name }}</h3>
         {% endfor %}
 
         {% if items.is_empty() %}
-        <div class="text-gray-500 text-center py-8">
+        <div class="text-faint text-center py-8">
             {{ tr.t("recipes-empty") }}
         </div>
         {% endif %}

From 6070c5ff0e1c9c724ce0b039fac001837fffa3d3 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Sun, 16 Aug 2026 22:05:25 +0100
Subject: [PATCH 38/42] refactor(ui): split component layer into components.css

---
 static/css/components.css | 606 ++++++++++++++++++++++++++++++++++++++
 static/css/input.css      | 602 +------------------------------------
 2 files changed, 612 insertions(+), 596 deletions(-)
 create mode 100644 static/css/components.css

diff --git a/static/css/components.css b/static/css/components.css
new file mode 100644
index 0000000..b8d01e8
--- /dev/null
+++ b/static/css/components.css
@@ -0,0 +1,606 @@
+/* ============================================================
+   COMPONENT LAYER
+   Split out of input.css (which owns the design tokens and the
+   @theme registration). Imported from input.css immediately after
+   @theme inline, so token utilities and these components compile
+   into the same stylesheet.
+   Everything here resolves through the tokens defined in input.css;
+   never introduce raw hex values or Tailwind palette utilities.
+   ============================================================ */
+
+/* Custom component classes */
+@layer components {
+    /* ---------- Surfaces ---------- */
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+        box-shadow: var(--shadow-card);
+    }
+
+    .card-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .card-head h2,
+    .card-head h3 {
+        margin: 0;
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+    }
+
+    /* Escape hatch: card heads whose text is user-authored data
+       (aisle categories, pantry locations) rather than fixed chrome. */
+    .card-head.plain h2,
+    .card-head.plain h3 {
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: 0;
+        text-transform: none;
+        color: var(--text);
+    }
+
+    .card-head .count {
+        font-size: 12px;
+        color: var(--text-faint);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* ---------- Controls ---------- */
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 32px;
+        padding: 0 11px;
+        border-radius: var(--radius-control);
+        font-size: 13.5px;
+        font-weight: 550;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border-strong);
+    }
+
+    .btn:hover { background: var(--surface-sunk); }
+
+    .btn svg { width: 15px; height: 15px; }
+
+    /* One accent-filled button per view. Everything else is neutral. */
+    .btn-primary {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: var(--accent-ink);
+    }
+
+    .btn-primary:hover {
+        background: var(--accent);
+        filter: brightness(1.06);
+    }
+
+    /* The commit half of a destructive confirmation. Not a second accent:
+       --danger is a distinct token, and the accent must keep meaning "the
+       thing you probably want". Foreground is --accent-ink for the same
+       reason .btn-primary uses it — dark mode's --danger is a light red
+       that cannot carry white text, and --accent-ink is exactly the
+       "ink on a filled token" colour that flips with the theme. */
+    .btn-danger {
+        background: var(--danger);
+        border-color: var(--danger);
+        color: var(--accent-ink);
+    }
+
+    .btn-danger:hover {
+        background: var(--danger);
+        filter: brightness(1.06);
+    }
+
+    .stepper {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        overflow: hidden;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-control);
+    }
+
+    .stepper button {
+        width: 26px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: 14px;
+    }
+
+    .stepper button:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .stepper input,
+    .stepper .value {
+        width: 44px;
+        height: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text);
+        text-align: center;
+        font-size: 13.5px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+
+    /* Suppress native spin buttons — they appear on hover/focus, widen the
+       input and overflow the stepper's rounded corner. The −/+ buttons are
+       the intended affordance. */
+    .stepper input::-webkit-outer-spin-button,
+    .stepper input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    .stepper input:focus { outline: none; }
+
+    /* ---------- Lists ---------- */
+    /* center, not baseline: .row children include non-text controls
+       (checkboxes, status dots) and all content is single-line. */
+    .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
+    }
+
+    .row + .row { border-top: 1px solid var(--border); }
+
+    .row .row-name { flex: 1; min-width: 0; }
+
+    .row .row-value {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .row .row-note {
+        color: var(--text-faint);
+        font-size: 12.5px;
+    }
+
+    /* ---------- Text ---------- */
+    /* One quiet dot-separated line, replacing rows of coloured pills. */
+    .metaline {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 0;
+        font-size: 13px;
+        color: var(--text-muted);
+    }
+
+    .metaline > *:not(:last-child)::after {
+        content: "·";
+        margin: 0 8px;
+        color: var(--text-faint);
+    }
+
+    .metaline b { font-weight: 600; color: var(--text); }
+
+    .metaline a { color: var(--info); text-decoration: none; }
+
+    .metaline a:hover { text-decoration: underline; }
+
+    .section-label {
+        font-size: 11.5px;
+        font-weight: 650;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        color: var(--text-faint);
+        margin: 18px 0 8px;
+        /* Baked in so every call site does not have to remember px-3.5;
+           it aligns the label with .row / .card-head padding. */
+        padding: 0 14px;
+    }
+
+    /* ---------- Status ---------- */
+    /* Shared by the pantry page and the shopping list's pantry sidebar,
+       so stock state reads identically in both places. Defined here
+       rather than in the pantry task because Task 8 consumes it first. */
+    .item-status-dot {
+        flex: 0 0 auto;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+    }
+
+    .item-status-dot.in-stock { background: var(--ok); }
+
+    .item-status-dot.out-of-stock { background: var(--danger); }
+
+    /* Inline recipe entities: weight + tint, not bordered gradient pills,
+       so they stop competing with the prose they sit inside. */
+    .ingredient-badge {
+        color: var(--accent-text);
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .cookware-badge {
+        color: var(--ok);
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .timer-badge {
+        padding: 1px 6px;
+        border-radius: 5px;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+
+    .step-number {
+        flex: 0 0 22px;
+        height: 22px;
+        margin-top: 1px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-size: 12px;
+        font-weight: 650;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .tag {
+        display: inline-block;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    /* Card in the recipes/menu index. No gradient top border. */
+    .recipe-card {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        text-decoration: none;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+    }
+
+    .recipe-card:hover {
+        background: var(--surface-sunk);
+        border-color: var(--border-strong);
+    }
+
+    .recipe-card .recipe-card-icon {
+        flex: 0 0 30px;
+        height: 30px;
+        display: grid;
+        place-items: center;
+        border-radius: 8px;
+        background: var(--surface-sunk);
+        font-size: 15px;
+    }
+
+    /* MUST be applied to an <h3>. The client-side sorter in
+       recipes.html reads `el.querySelector('h3')?.textContent`
+       to sort by name; any other element silently breaks sorting. */
+    .recipe-card .recipe-card-title {
+        display: block;
+        margin: 0;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--text);
+    }
+
+    .recipe-card .recipe-card-sub {
+        display: block;
+        margin-top: 1px;
+        font-size: 12px;
+        color: var(--text-faint);
+    }
+
+    /* ---------- App bar ---------- */
+    .appbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: var(--appbar-h);
+        padding: 0 16px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .appbar-brand {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 14px;
+        font-weight: 650;
+        letter-spacing: -.01em;
+        color: var(--text);
+        text-decoration: none;
+    }
+
+    .appbar-nav { display: flex; gap: 2px; }
+
+    .icon-btn {
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border: 0;
+        border-radius: 7px;
+        background: transparent;
+        color: var(--text-muted);
+        cursor: pointer;
+    }
+
+    .icon-btn:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .icon-btn svg { width: 16px; height: 16px; }
+
+    .search-input {
+        width: 100%;
+        height: 30px;
+        padding: 0 10px 0 30px;
+        border-radius: 7px;
+        border: 1px solid transparent;
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-size: 13px;
+    }
+
+    .search-input::placeholder { color: var(--text-faint); }
+
+    .search-input:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: none;
+    }
+
+    /* Nav items in the app bar. Name kept for the E2E suite. */
+    .nav-pill {
+        padding: 5px 11px;
+        border-radius: 7px;
+        font-size: 13.5px;
+        font-weight: 500;
+        color: var(--text-muted);
+        text-decoration: none;
+    }
+
+    .nav-pill:hover {
+        background: var(--surface-sunk);
+        color: var(--text);
+    }
+
+    .nav-pill.active {
+        background: var(--surface-sunk);
+        color: var(--text);
+        font-weight: 600;
+    }
+
+    /* Kept for custom metadata key/value chips inside .metaline.
+       test-helpers.ts selects .metadata-pill by "key: value" text. */
+    .metadata-pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 1px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+    }
+
+    .metadata-pill svg {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+    }
+
+    /* ---------- Recipe page ---------- */
+    /* The fixed-width rail keeps typical ingredient rows — name on the left,
+       quantity on the right — on a single line in the 768–1023px tablet band.
+       Long names still wrap, which is the intended behaviour. */
+    .recipe-layout {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 700px) {
+        .recipe-layout {
+            grid-template-columns: 264px minmax(0, 1fr);
+            align-items: start;
+        }
+
+        /* A rail taller than the viewport would otherwise hide its own bottom
+           for the whole scroll, so it scrolls internally instead. */
+        .recipe-rail {
+            position: sticky;
+            top: calc(var(--appbar-h) + 16px);
+            max-height: calc(100vh - var(--appbar-h) - 32px);
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .recipe-layout { grid-template-columns: 300px minmax(0, 1fr); }
+    }
+
+    .ingredient-list { list-style: none; margin: 0; padding: 4px 0; }
+
+    .step-list { list-style: none; margin: 0; padding: 0; }
+
+    .step-list > li {
+        display: flex;
+        gap: 12px;
+        padding: 14px;
+    }
+
+    .step-list > li + li { border-top: 1px solid var(--border); }
+
+    .step-body { font-size: 15px; line-height: 1.6; }
+
+    .step-refs {
+        margin-top: 7px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 14px;
+        font-size: 12.5px;
+        color: var(--text-faint);
+    }
+
+    .step-refs b { font-weight: 600; color: var(--text-muted); }
+
+    .recipe-note {
+        display: flex;
+        gap: 8px;
+        padding: 12px 14px;
+        border-left: 3px solid var(--border-strong);
+        background: var(--surface-sunk);
+        color: var(--text-muted);
+        font-style: italic;
+    }
+
+    /* Coarse pointers get real touch targets. The stated use case is a
+       tablet propped in a kitchen, where 26px buttons are not tappable. */
+    @media (pointer: coarse) {
+        .btn { height: 44px; padding: 0 14px; }
+        /* 46px outer so the 1px borders leave a 44px content box — the
+           buttons are height:100% of that, so they land on 44, not 42. */
+        .stepper { height: 46px; }
+        .stepper button { width: 44px; }
+        .stepper input, .stepper .value { width: 52px; }
+        .icon-btn { width: 44px; height: 44px; }
+        /* 24px is the WCAG 2.2 SC 2.5.8 minimum, not a rounded-down 20.
+           Covers the recipe page's reference checkboxes and the shopping
+           list's item checkboxes, which are rendered from JS with w-4 h-4. */
+        .ref-checkbox,
+        .row input[type="checkbox"] { width: 24px; height: 24px; }
+    }
+
+    /* Step images in recipes */
+    .image-step {
+        @apply w-full max-h-80 object-contain rounded-xl;
+    }
+
+    /* Recipe image placeholder with gradient */
+    .recipe-image-placeholder {
+        background: linear-gradient(135deg, #ff6b35, #fbbf24);
+        @apply w-30 h-30 rounded-full flex items-center justify-center text-white text-5xl;
+    }
+
+    /* ---------- Pantry ---------- */
+    /* Not `.row`: the name column here is two lines (name over dates), so the
+       row aligns on the first baseline rather than on centre. */
+    .pantry-item {
+        display: flex;
+        align-items: baseline;
+        gap: 10px;
+        padding: 7px 14px;
+        font-size: 14px;
+    }
+
+    .pantry-item + .pantry-item { border-top: 1px solid var(--border); }
+
+    .pantry-item:hover { background: var(--surface-sunk); }
+
+    .pantry-item .quantity-display {
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 13.5px;
+        color: var(--accent-text);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .pantry-item .pantry-dates {
+        font-size: 12.5px;
+        color: var(--text-faint);
+    }
+
+    .pantry-item.out-of-stock .quantity-display { color: var(--text-faint); }
+
+    /* Preflight makes every svg display:block, which would drop the warning
+       icon onto its own line under the quantity. It has to be fixed here
+       rather than with an `inline` utility: `inline` and `hidden` are both
+       display utilities in the same layer and Tailwind emits `inline` last,
+       so the icon could never be hidden. From @layer components this loses
+       to `hidden` and wins against preflight, which is exactly right. */
+    .pantry-item .out-of-stock-icon { display: inline; }
+
+    /* Low stock is a third state the page has always had. There is no warning
+       token, and --danger is spoken for by out-of-stock, so the dot borrows
+       the accent; the warning icon next to the quantity carries the rest. */
+    .item-status-dot.low-stock { background: var(--accent); }
+
+    /* Only the fields an item actually has are rendered visible, so the
+       separator has to key off visibility — a hidden field must not leave a
+       stray middot in front of the next one. */
+    .pantry-date:not(.hidden) ~ .pantry-date:not(.hidden)::before {
+        content: "·";
+        margin: 0 6px;
+    }
+
+    /* Row actions stay out of the way until the row is hovered or something
+       inside it takes focus, so a dense list is not a wall of icons. */
+    .pantry-actions {
+        align-self: center;
+        opacity: 0;
+        transition: opacity .12s ease;
+    }
+
+    .pantry-item:hover .pantry-actions,
+    .pantry-item:focus-within .pantry-actions { opacity: 1; }
+
+    /* While the inline editor is open, Cancel and Save are the row's actions.
+       Focus is inside the row, so :focus-within would otherwise park the edit
+       and delete icons alongside the form. */
+    .pantry-item:has(.item-edit:not(.hidden)) .pantry-actions {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    /* No hover on touch, so reveal-on-hover would make edit and delete
+       unreachable. */
+    @media (pointer: coarse) {
+        .pantry-actions { opacity: 1; }
+    }
+
+}
diff --git a/static/css/input.css b/static/css/input.css
index 8947529..b731698 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -98,6 +98,12 @@
     --color-info:        var(--info);
 }
 
+/* Component vocabulary. Split out of this file so the theme contract
+   (tokens + @theme + the print token reset) stays small and stable while
+   the component layer keeps churning. Imported here rather than appended
+   so it still lands inside the same build. */
+@import "./components.css";
+
 /* Print: force the light token values regardless of the active theme, and
    flatten the recipe grid. The print rules in base.html were written against
    pre-refresh markup (`.bg-white`, `.grid`, `.md\:col-span-*`) and no longer
@@ -150,602 +156,6 @@
     }
 }
 
-/* Custom component classes */
-@layer components {
-    /* ---------- Surfaces ---------- */
-    .card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-card);
-        box-shadow: var(--shadow-card);
-    }
-
-    .card-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 10px 14px;
-        border-bottom: 1px solid var(--border);
-    }
-
-    .card-head h2,
-    .card-head h3 {
-        margin: 0;
-        font-size: 11.5px;
-        font-weight: 650;
-        letter-spacing: .06em;
-        text-transform: uppercase;
-        color: var(--text-muted);
-    }
-
-    /* Escape hatch: card heads whose text is user-authored data
-       (aisle categories, pantry locations) rather than fixed chrome. */
-    .card-head.plain h2,
-    .card-head.plain h3 {
-        font-size: 13px;
-        font-weight: 600;
-        letter-spacing: 0;
-        text-transform: none;
-        color: var(--text);
-    }
-
-    .card-head .count {
-        font-size: 12px;
-        color: var(--text-faint);
-        font-variant-numeric: tabular-nums;
-    }
-
-    /* ---------- Controls ---------- */
-    .btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        height: 32px;
-        padding: 0 11px;
-        border-radius: var(--radius-control);
-        font-size: 13.5px;
-        font-weight: 550;
-        white-space: nowrap;
-        cursor: pointer;
-        text-decoration: none;
-        background: var(--surface);
-        color: var(--text);
-        border: 1px solid var(--border-strong);
-    }
-
-    .btn:hover { background: var(--surface-sunk); }
-
-    .btn svg { width: 15px; height: 15px; }
-
-    /* One accent-filled button per view. Everything else is neutral. */
-    .btn-primary {
-        background: var(--accent);
-        border-color: var(--accent);
-        color: var(--accent-ink);
-    }
-
-    .btn-primary:hover {
-        background: var(--accent);
-        filter: brightness(1.06);
-    }
-
-    /* The commit half of a destructive confirmation. Not a second accent:
-       --danger is a distinct token, and the accent must keep meaning "the
-       thing you probably want". Foreground is --accent-ink for the same
-       reason .btn-primary uses it — dark mode's --danger is a light red
-       that cannot carry white text, and --accent-ink is exactly the
-       "ink on a filled token" colour that flips with the theme. */
-    .btn-danger {
-        background: var(--danger);
-        border-color: var(--danger);
-        color: var(--accent-ink);
-    }
-
-    .btn-danger:hover {
-        background: var(--danger);
-        filter: brightness(1.06);
-    }
-
-    .stepper {
-        display: inline-flex;
-        align-items: center;
-        height: 32px;
-        overflow: hidden;
-        background: var(--surface);
-        border: 1px solid var(--border-strong);
-        border-radius: var(--radius-control);
-    }
-
-    .stepper button {
-        width: 26px;
-        height: 100%;
-        border: 0;
-        background: transparent;
-        color: var(--text-muted);
-        cursor: pointer;
-        font-size: 14px;
-    }
-
-    .stepper button:hover {
-        background: var(--surface-sunk);
-        color: var(--text);
-    }
-
-    .stepper input,
-    .stepper .value {
-        width: 44px;
-        height: 100%;
-        border: 0;
-        background: transparent;
-        color: var(--text);
-        text-align: center;
-        font-size: 13.5px;
-        font-weight: 600;
-        font-variant-numeric: tabular-nums;
-        -moz-appearance: textfield;
-        appearance: textfield;
-    }
-
-    /* Suppress native spin buttons — they appear on hover/focus, widen the
-       input and overflow the stepper's rounded corner. The −/+ buttons are
-       the intended affordance. */
-    .stepper input::-webkit-outer-spin-button,
-    .stepper input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    .stepper input:focus { outline: none; }
-
-    /* ---------- Lists ---------- */
-    /* center, not baseline: .row children include non-text controls
-       (checkboxes, status dots) and all content is single-line. */
-    .row {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 7px 14px;
-        font-size: 14px;
-    }
-
-    .row + .row { border-top: 1px solid var(--border); }
-
-    .row .row-name { flex: 1; min-width: 0; }
-
-    .row .row-value {
-        white-space: nowrap;
-        font-weight: 600;
-        font-size: 13.5px;
-        color: var(--accent-text);
-        font-variant-numeric: tabular-nums;
-    }
-
-    .row .row-note {
-        color: var(--text-faint);
-        font-size: 12.5px;
-    }
-
-    /* ---------- Text ---------- */
-    /* One quiet dot-separated line, replacing rows of coloured pills. */
-    .metaline {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 6px 0;
-        font-size: 13px;
-        color: var(--text-muted);
-    }
-
-    .metaline > *:not(:last-child)::after {
-        content: "·";
-        margin: 0 8px;
-        color: var(--text-faint);
-    }
-
-    .metaline b { font-weight: 600; color: var(--text); }
-
-    .metaline a { color: var(--info); text-decoration: none; }
-
-    .metaline a:hover { text-decoration: underline; }
-
-    .section-label {
-        font-size: 11.5px;
-        font-weight: 650;
-        letter-spacing: .06em;
-        text-transform: uppercase;
-        color: var(--text-faint);
-        margin: 18px 0 8px;
-        /* Baked in so every call site does not have to remember px-3.5;
-           it aligns the label with .row / .card-head padding. */
-        padding: 0 14px;
-    }
-
-    /* ---------- Status ---------- */
-    /* Shared by the pantry page and the shopping list's pantry sidebar,
-       so stock state reads identically in both places. Defined here
-       rather than in the pantry task because Task 8 consumes it first. */
-    .item-status-dot {
-        flex: 0 0 auto;
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-    }
-
-    .item-status-dot.in-stock { background: var(--ok); }
-
-    .item-status-dot.out-of-stock { background: var(--danger); }
-
-    /* Inline recipe entities: weight + tint, not bordered gradient pills,
-       so they stop competing with the prose they sit inside. */
-    .ingredient-badge {
-        color: var(--accent-text);
-        font-weight: 600;
-        white-space: nowrap;
-    }
-
-    .cookware-badge {
-        color: var(--ok);
-        font-weight: 600;
-        white-space: nowrap;
-    }
-
-    .timer-badge {
-        padding: 1px 6px;
-        border-radius: 5px;
-        background: var(--surface-sunk);
-        color: var(--text);
-        font-weight: 600;
-        font-variant-numeric: tabular-nums;
-        white-space: nowrap;
-    }
-
-    .step-number {
-        flex: 0 0 22px;
-        height: 22px;
-        margin-top: 1px;
-        border-radius: 50%;
-        display: grid;
-        place-items: center;
-        background: var(--surface-sunk);
-        color: var(--text-muted);
-        font-size: 12px;
-        font-weight: 650;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .tag {
-        display: inline-block;
-        padding: 1px 8px;
-        border-radius: 9999px;
-        font-size: 12px;
-        font-weight: 500;
-        background: var(--surface-sunk);
-        color: var(--text-muted);
-    }
-
-    /* Card in the recipes/menu index. No gradient top border. */
-    .recipe-card {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px 12px;
-        text-decoration: none;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-card);
-    }
-
-    .recipe-card:hover {
-        background: var(--surface-sunk);
-        border-color: var(--border-strong);
-    }
-
-    .recipe-card .recipe-card-icon {
-        flex: 0 0 30px;
-        height: 30px;
-        display: grid;
-        place-items: center;
-        border-radius: 8px;
-        background: var(--surface-sunk);
-        font-size: 15px;
-    }
-
-    /* MUST be applied to an <h3>. The client-side sorter in
-       recipes.html reads `el.querySelector('h3')?.textContent`
-       to sort by name; any other element silently breaks sorting. */
-    .recipe-card .recipe-card-title {
-        display: block;
-        margin: 0;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 1.3;
-        color: var(--text);
-    }
-
-    .recipe-card .recipe-card-sub {
-        display: block;
-        margin-top: 1px;
-        font-size: 12px;
-        color: var(--text-faint);
-    }
-
-    /* ---------- App bar ---------- */
-    .appbar {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        height: var(--appbar-h);
-        padding: 0 16px;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-    }
-
-    .appbar-brand {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-        font-size: 14px;
-        font-weight: 650;
-        letter-spacing: -.01em;
-        color: var(--text);
-        text-decoration: none;
-    }
-
-    .appbar-nav { display: flex; gap: 2px; }
-
-    .icon-btn {
-        width: 28px;
-        height: 28px;
-        display: grid;
-        place-items: center;
-        border: 0;
-        border-radius: 7px;
-        background: transparent;
-        color: var(--text-muted);
-        cursor: pointer;
-    }
-
-    .icon-btn:hover {
-        background: var(--surface-sunk);
-        color: var(--text);
-    }
-
-    .icon-btn svg { width: 16px; height: 16px; }
-
-    .search-input {
-        width: 100%;
-        height: 30px;
-        padding: 0 10px 0 30px;
-        border-radius: 7px;
-        border: 1px solid transparent;
-        background: var(--surface-sunk);
-        color: var(--text);
-        font-size: 13px;
-    }
-
-    .search-input::placeholder { color: var(--text-faint); }
-
-    .search-input:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: none;
-    }
-
-    /* Nav items in the app bar. Name kept for the E2E suite. */
-    .nav-pill {
-        padding: 5px 11px;
-        border-radius: 7px;
-        font-size: 13.5px;
-        font-weight: 500;
-        color: var(--text-muted);
-        text-decoration: none;
-    }
-
-    .nav-pill:hover {
-        background: var(--surface-sunk);
-        color: var(--text);
-    }
-
-    .nav-pill.active {
-        background: var(--surface-sunk);
-        color: var(--text);
-        font-weight: 600;
-    }
-
-    /* Kept for custom metadata key/value chips inside .metaline.
-       test-helpers.ts selects .metadata-pill by "key: value" text. */
-    .metadata-pill {
-        display: inline-flex;
-        align-items: center;
-        padding: 1px 8px;
-        border-radius: 9999px;
-        font-size: 12px;
-        font-weight: 500;
-        white-space: nowrap;
-        background: var(--surface-sunk);
-        color: var(--text-muted);
-    }
-
-    .metadata-pill svg {
-        width: 14px;
-        height: 14px;
-        margin-right: 4px;
-    }
-
-    /* ---------- Recipe page ---------- */
-    /* The fixed-width rail keeps typical ingredient rows — name on the left,
-       quantity on the right — on a single line in the 768–1023px tablet band.
-       Long names still wrap, which is the intended behaviour. */
-    .recipe-layout {
-        display: grid;
-        gap: 16px;
-        grid-template-columns: 1fr;
-    }
-
-    @media (min-width: 700px) {
-        .recipe-layout {
-            grid-template-columns: 264px minmax(0, 1fr);
-            align-items: start;
-        }
-
-        /* A rail taller than the viewport would otherwise hide its own bottom
-           for the whole scroll, so it scrolls internally instead. */
-        .recipe-rail {
-            position: sticky;
-            top: calc(var(--appbar-h) + 16px);
-            max-height: calc(100vh - var(--appbar-h) - 32px);
-            overflow-y: auto;
-            overscroll-behavior: contain;
-        }
-    }
-
-    @media (min-width: 1024px) {
-        .recipe-layout { grid-template-columns: 300px minmax(0, 1fr); }
-    }
-
-    .ingredient-list { list-style: none; margin: 0; padding: 4px 0; }
-
-    .step-list { list-style: none; margin: 0; padding: 0; }
-
-    .step-list > li {
-        display: flex;
-        gap: 12px;
-        padding: 14px;
-    }
-
-    .step-list > li + li { border-top: 1px solid var(--border); }
-
-    .step-body { font-size: 15px; line-height: 1.6; }
-
-    .step-refs {
-        margin-top: 7px;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2px 14px;
-        font-size: 12.5px;
-        color: var(--text-faint);
-    }
-
-    .step-refs b { font-weight: 600; color: var(--text-muted); }
-
-    .recipe-note {
-        display: flex;
-        gap: 8px;
-        padding: 12px 14px;
-        border-left: 3px solid var(--border-strong);
-        background: var(--surface-sunk);
-        color: var(--text-muted);
-        font-style: italic;
-    }
-
-    /* Coarse pointers get real touch targets. The stated use case is a
-       tablet propped in a kitchen, where 26px buttons are not tappable. */
-    @media (pointer: coarse) {
-        .btn { height: 44px; padding: 0 14px; }
-        /* 46px outer so the 1px borders leave a 44px content box — the
-           buttons are height:100% of that, so they land on 44, not 42. */
-        .stepper { height: 46px; }
-        .stepper button { width: 44px; }
-        .stepper input, .stepper .value { width: 52px; }
-        .icon-btn { width: 44px; height: 44px; }
-        /* 24px is the WCAG 2.2 SC 2.5.8 minimum, not a rounded-down 20.
-           Covers the recipe page's reference checkboxes and the shopping
-           list's item checkboxes, which are rendered from JS with w-4 h-4. */
-        .ref-checkbox,
-        .row input[type="checkbox"] { width: 24px; height: 24px; }
-    }
-
-    /* Step images in recipes */
-    .image-step {
-        @apply w-full max-h-80 object-contain rounded-xl;
-    }
-
-    /* Recipe image placeholder with gradient */
-    .recipe-image-placeholder {
-        background: linear-gradient(135deg, #ff6b35, #fbbf24);
-        @apply w-30 h-30 rounded-full flex items-center justify-center text-white text-5xl;
-    }
-
-    /* ---------- Pantry ---------- */
-    /* Not `.row`: the name column here is two lines (name over dates), so the
-       row aligns on the first baseline rather than on centre. */
-    .pantry-item {
-        display: flex;
-        align-items: baseline;
-        gap: 10px;
-        padding: 7px 14px;
-        font-size: 14px;
-    }
-
-    .pantry-item + .pantry-item { border-top: 1px solid var(--border); }
-
-    .pantry-item:hover { background: var(--surface-sunk); }
-
-    .pantry-item .quantity-display {
-        white-space: nowrap;
-        font-weight: 600;
-        font-size: 13.5px;
-        color: var(--accent-text);
-        font-variant-numeric: tabular-nums;
-    }
-
-    .pantry-item .pantry-dates {
-        font-size: 12.5px;
-        color: var(--text-faint);
-    }
-
-    .pantry-item.out-of-stock .quantity-display { color: var(--text-faint); }
-
-    /* Preflight makes every svg display:block, which would drop the warning
-       icon onto its own line under the quantity. It has to be fixed here
-       rather than with an `inline` utility: `inline` and `hidden` are both
-       display utilities in the same layer and Tailwind emits `inline` last,
-       so the icon could never be hidden. From @layer components this loses
-       to `hidden` and wins against preflight, which is exactly right. */
-    .pantry-item .out-of-stock-icon { display: inline; }
-
-    /* Low stock is a third state the page has always had. There is no warning
-       token, and --danger is spoken for by out-of-stock, so the dot borrows
-       the accent; the warning icon next to the quantity carries the rest. */
-    .item-status-dot.low-stock { background: var(--accent); }
-
-    /* Only the fields an item actually has are rendered visible, so the
-       separator has to key off visibility — a hidden field must not leave a
-       stray middot in front of the next one. */
-    .pantry-date:not(.hidden) ~ .pantry-date:not(.hidden)::before {
-        content: "·";
-        margin: 0 6px;
-    }
-
-    /* Row actions stay out of the way until the row is hovered or something
-       inside it takes focus, so a dense list is not a wall of icons. */
-    .pantry-actions {
-        align-self: center;
-        opacity: 0;
-        transition: opacity .12s ease;
-    }
-
-    .pantry-item:hover .pantry-actions,
-    .pantry-item:focus-within .pantry-actions { opacity: 1; }
-
-    /* While the inline editor is open, Cancel and Save are the row's actions.
-       Focus is inside the row, so :focus-within would otherwise park the edit
-       and delete icons alongside the form. */
-    .pantry-item:has(.item-edit:not(.hidden)) .pantry-actions {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    /* No hover on touch, so reveal-on-hover would make edit and delete
-       unreachable. */
-    @media (pointer: coarse) {
-        .pantry-actions { opacity: 1; }
-    }
-
-}
 
 /* ============================================================
    CODEMIRROR

From 05cc81e01e0a3d036321ce4d38afefb6bd65a9d8 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Mon, 17 Aug 2026 12:14:12 +0100
Subject: [PATCH 39/42] feat(ui): adopt Cooklang DS palette and neumorphic
 elevation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Repoints the token contract at the Cooklang design system colours and
rebuilds the component layer around soft dual-shadow elevation.

Palette
- Text/Primary #16161D, Text/Tags #715329, Controls+Icons/Stroke #E15A29
  and Background/UI One #F5DACF are used exactly as specified.
- Text/Secondary #817B6D (3.7:1) and Text/Warning #FF3B30 (3.0:1) are
  darkened; both fail AA as body text on a light ground, and both are used
  as body text today. Hue is preserved.
- The DS supplies Light only. Dark is derived in the same warm family.

Elevation
- --neu-light / --neu-dark drive four composites (raised, raised-sm, inset,
  inset-sm). Cards, buttons and nav rise; fields, chips and the active nav
  item sink. Pressable surfaces invert to inset on :active.
- Print flattens every composite to none — soft shadows print as smudge.

Palette coherence
- Recipe links were blue and cookware was green; the DS contains neither.
  Links move to the dark end of the DS orange, cookware drops colour
  entirely for a dotted underline. Both now carry a non-hue cue, which also
  fixes brown-vs-green being the confusable pair for red-green deficiency.
- cooking-mode.css was never migrated in the previous refresh and was still
  hardcoded slate-navy with orange/amber gradients. It is now on tokens.

Fixes a latent custom-property bug: --shadow-* were declared on :root in
terms of var(--neu-*), and a custom property containing var() resolves at
its declaring element, not its user. .dark got away with it by sharing
<html> with :root; .cooking-overlay is a descendant and did not, so cook
mode drew a 95%-opacity white halo whenever the site was in light theme.
The composites are now redeclared in the dark block.

Verified: 140 E2E passed / 0 failed / 5 skipped; cargo test, fmt, clippy
clean; 846 text-contrast probes across 8 pages x 2 themes, zero failures.
---
 static/css/components.css   | 152 ++++++++++++++++++++++++++--------
 static/css/cooking-mode.css | 133 ++++++++++++++++++------------
 static/css/input.css        | 160 ++++++++++++++++++++++++++----------
 3 files changed, 312 insertions(+), 133 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index b8d01e8..c9a93e0 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -10,12 +10,26 @@
 
 /* Custom component classes */
 @layer components {
+    /* ---------- Focus ---------- */
+    /* Neumorphism removes almost every hard edge, which takes the default
+       focus ring's contrast down with it. A solid two-pixel accent outline is
+       the one place in this design that is deliberately not soft. It is
+       :focus-visible so pointer users never see it. */
+    :focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+        border-radius: var(--radius-control);
+    }
+
     /* ---------- Surfaces ---------- */
+    /* The hairline border is doing nothing in light mode (about 1.1:1) and is
+       load-bearing in dark, where --neu-light is only 5% white and cannot
+       describe a top edge on its own. */
     .card {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-card);
+        box-shadow: var(--shadow-raised);
     }
 
     .card-head {
@@ -68,14 +82,27 @@
         text-decoration: none;
         background: var(--surface);
         color: var(--text);
-        border: 1px solid var(--border-strong);
+        border: 1px solid var(--border);
+        box-shadow: var(--shadow-raised-sm);
+        transition: box-shadow .12s ease;
     }
 
-    .btn:hover { background: var(--surface-sunk); }
+    .btn:hover { background: var(--surface); box-shadow: var(--shadow-raised); }
+
+    /* The press. A neumorphic control does not change colour when activated,
+       it sinks — the raised shadow inverts to an inset one. This is the
+       interaction the whole style is built around, so every pressable
+       surface below repeats it. */
+    .btn:active { box-shadow: var(--shadow-inset-sm); }
 
     .btn svg { width: 15px; height: 15px; }
 
-    /* One accent-filled button per view. Everything else is neutral. */
+    /* One accent-filled button per view. Everything else is neutral.
+       Kept as a solid fill rather than a raised neutral: neumorphism has no
+       native way to say "this is the one you want", and a page where the CTA
+       is the same colour as everything else is worse than a slightly impure
+       one. --accent-ink is the design system's near-black, which clears AA on
+       the accent fill where white (3.7:1) would not. */
     .btn-primary {
         background: var(--accent);
         border-color: var(--accent);
@@ -89,14 +116,15 @@
 
     /* The commit half of a destructive confirmation. Not a second accent:
        --danger is a distinct token, and the accent must keep meaning "the
-       thing you probably want". Foreground is --accent-ink for the same
-       reason .btn-primary uses it — dark mode's --danger is a light red
-       that cannot carry white text, and --accent-ink is exactly the
-       "ink on a filled token" colour that flips with the theme. */
+       thing you probably want".
+       This takes --danger-ink, not --accent-ink. The two used to be the same
+       colour but no longer are: --accent is now a bright orange needing dark
+       ink, while light mode's --danger is a deep red needing white. They only
+       agree in dark mode. */
     .btn-danger {
         background: var(--danger);
         border-color: var(--danger);
-        color: var(--accent-ink);
+        color: var(--danger-ink);
     }
 
     .btn-danger:hover {
@@ -110,8 +138,9 @@
         height: 32px;
         overflow: hidden;
         background: var(--surface);
-        border: 1px solid var(--border-strong);
+        border: 1px solid var(--border);
         border-radius: var(--radius-control);
+        box-shadow: var(--shadow-raised-sm);
     }
 
     .stepper button {
@@ -129,6 +158,11 @@
         color: var(--text);
     }
 
+    /* Sinks the whole control rather than the button alone: overflow:hidden
+       on the parent would clip an inset shadow drawn on the child, so the
+       press has to be expressed by the element that owns the rounded box. */
+    .stepper:has(button:active) { box-shadow: var(--shadow-inset-sm); }
+
     .stepper input,
     .stepper .value {
         width: 44px;
@@ -202,9 +236,14 @@
 
     .metaline b { font-weight: 600; color: var(--text); }
 
-    .metaline a { color: var(--info); text-decoration: none; }
+    .metaline a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
 
-    .metaline a:hover { text-decoration: underline; }
+    .metaline a:hover { color: var(--accent-text); }
+
+    /* Recipe-reference links (a step or ingredient pointing at another
+       recipe). Carries the underline for the same reason .metaline a does:
+       --info is a warm orange now and must not be the sole link signal. */
+    a.text-info { text-decoration: underline; text-underline-offset: 2px; }
 
     .section-label {
         font-size: 11.5px;
@@ -241,16 +280,27 @@
         white-space: nowrap;
     }
 
+    /* Distinguished from an ingredient by texture, not hue. It used to be
+       green, which is not a colour the design system has, and which made the
+       ingredient/cookware split invisible to the ~8% of men with a red-green
+       deficiency — brown and green being exactly the confusable pair. A
+       dotted underline survives both problems. */
     .cookware-badge {
-        color: var(--ok);
+        color: var(--text);
         font-weight: 600;
         white-space: nowrap;
+        text-decoration: underline dotted var(--inactive);
+        text-underline-offset: 3px;
     }
 
+    /* Chips read as pressed into the page rather than laid on top of it.
+       They use the -sm inset: a full-strength one on a 22px circle collapses
+       into a dark ring with no flat centre left. */
     .timer-badge {
-        padding: 1px 6px;
-        border-radius: 5px;
+        padding: 2px 7px;
+        border-radius: 6px;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text);
         font-weight: 600;
         font-variant-numeric: tabular-nums;
@@ -258,13 +308,14 @@
     }
 
     .step-number {
-        flex: 0 0 22px;
-        height: 22px;
+        flex: 0 0 24px;
+        height: 24px;
         margin-top: 1px;
         border-radius: 50%;
         display: grid;
         place-items: center;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text-muted);
         font-size: 12px;
         font-weight: 650;
@@ -273,11 +324,12 @@
 
     .tag {
         display: inline-block;
-        padding: 1px 8px;
+        padding: 2px 9px;
         border-radius: 9999px;
         font-size: 12px;
         font-weight: 500;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text-muted);
     }
 
@@ -291,20 +343,25 @@
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: var(--radius-card);
+        box-shadow: var(--shadow-raised-sm);
+        transition: box-shadow .12s ease;
     }
 
-    .recipe-card:hover {
-        background: var(--surface-sunk);
-        border-color: var(--border-strong);
-    }
+    /* Rises on hover, sinks on press. The background deliberately does not
+       change: shifting fill *and* elevation at once reads as two separate
+       things happening. */
+    .recipe-card:hover { box-shadow: var(--shadow-raised); }
+
+    .recipe-card:active { box-shadow: var(--shadow-inset-sm); }
 
     .recipe-card .recipe-card-icon {
-        flex: 0 0 30px;
-        height: 30px;
+        flex: 0 0 32px;
+        height: 32px;
         display: grid;
         place-items: center;
-        border-radius: 8px;
+        border-radius: 10px;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         font-size: 15px;
     }
 
@@ -338,7 +395,11 @@
         height: var(--appbar-h);
         padding: 0 16px;
         background: var(--surface);
-        border-bottom: 1px solid var(--border);
+        /* A one-directional drop shadow, not the dual pair. The bar is flush
+           against the top of the viewport, so there is no top edge for a
+           highlight to describe, and the full --shadow-raised would cast a
+           bright band across the first row of content. */
+        box-shadow: 0 3px 8px var(--neu-dark);
     }
 
     .appbar-brand {
@@ -367,35 +428,43 @@
     }
 
     .icon-btn:hover {
-        background: var(--surface-sunk);
+        background: var(--surface);
+        box-shadow: var(--shadow-raised-sm);
         color: var(--text);
     }
 
+    .icon-btn:active { box-shadow: var(--shadow-inset-sm); }
+
     .icon-btn svg { width: 16px; height: 16px; }
 
+    /* Text fields are the clearest case for an inset: a field you type into
+       is a well, and the style says so without needing a border. */
     .search-input {
         width: 100%;
-        height: 30px;
+        height: 32px;
         padding: 0 10px 0 30px;
-        border-radius: 7px;
+        border-radius: var(--radius-control);
         border: 1px solid transparent;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text);
         font-size: 13px;
     }
 
     .search-input::placeholder { color: var(--text-faint); }
 
+    /* Keeps its own accent border on :focus (not just :focus-visible) so the
+       active field is marked while typing, when the global ring is suppressed. */
     .search-input:focus {
         outline: none;
         border-color: var(--accent);
-        box-shadow: none;
+        box-shadow: var(--shadow-inset-sm);
     }
 
     /* Nav items in the app bar. Name kept for the E2E suite. */
     .nav-pill {
         padding: 5px 11px;
-        border-radius: 7px;
+        border-radius: var(--radius-control);
         font-size: 13.5px;
         font-weight: 500;
         color: var(--text-muted);
@@ -403,12 +472,16 @@
     }
 
     .nav-pill:hover {
-        background: var(--surface-sunk);
+        background: var(--surface);
+        box-shadow: var(--shadow-raised-sm);
         color: var(--text);
     }
 
+    /* Current page reads as held down — the inverse of the hover lift, which
+       is how neumorphism expresses a selected state. */
     .nav-pill.active {
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text);
         font-weight: 600;
     }
@@ -424,6 +497,7 @@
         font-weight: 500;
         white-space: nowrap;
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text-muted);
     }
 
@@ -493,8 +567,10 @@
         display: flex;
         gap: 8px;
         padding: 12px 14px;
-        border-left: 3px solid var(--border-strong);
+        border-radius: var(--radius-control);
+        border-left: 3px solid var(--accent);
         background: var(--surface-sunk);
+        box-shadow: var(--shadow-inset-sm);
         color: var(--text-muted);
         font-style: italic;
     }
@@ -521,10 +597,14 @@
         @apply w-full max-h-80 object-contain rounded-xl;
     }
 
-    /* Recipe image placeholder with gradient */
+    /* Recipe image placeholder. The old hardcoded orange/amber gradient was
+       the last raw hex outside @media print and did not flip with the theme.
+       A raised token surface with the accent glyph carries the same weight. */
     .recipe-image-placeholder {
-        background: linear-gradient(135deg, #ff6b35, #fbbf24);
-        @apply w-30 h-30 rounded-full flex items-center justify-center text-white text-5xl;
+        background: var(--surface);
+        box-shadow: var(--shadow-raised);
+        color: var(--accent-text);
+        @apply w-30 h-30 rounded-full flex items-center justify-center text-5xl;
     }
 
     /* ---------- Pantry ---------- */
diff --git a/static/css/cooking-mode.css b/static/css/cooking-mode.css
index 848030b..274466d 100644
--- a/static/css/cooking-mode.css
+++ b/static/css/cooking-mode.css
@@ -1,10 +1,16 @@
-/* Cooking Mode Overlay */
+/* Cooking Mode Overlay
+   Colours here resolve through the design tokens, not raw hex. .cooking-overlay
+   is listed alongside .dark in input.css, so the tokens below always resolve to
+   their dark values — cook mode is deliberately dark whatever the site theme is,
+   because it is read at arm's length in a bright kitchen.
+   Elevation follows the same neumorphic vocabulary as the rest of the app:
+   cards and controls are raised, wells and progress tracks are inset. */
 .cooking-overlay {
     position: fixed;
     inset: 0;
     z-index: 9999;
-    background: #1a1a2e;
-    color: #e0e0e0;
+    background: var(--bg);
+    color: var(--text);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     display: flex;
     flex-direction: column;
@@ -19,7 +25,8 @@
     align-items: center;
     justify-content: space-between;
     padding: 12px 20px;
-    background: rgba(0, 0, 0, 0.3);
+    background: var(--surface);
+    box-shadow: 0 3px 8px var(--neu-dark);
     flex-shrink: 0;
     gap: 12px;
     z-index: 2;
@@ -28,7 +35,7 @@
 .cooking-header-title {
     font-size: 16px;
     font-weight: 600;
-    color: #fff;
+    color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -56,40 +63,48 @@
     font-weight: 500;
     white-space: nowrap;
     cursor: pointer;
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    transition: all 0.2s;
+    background: var(--surface);
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-raised-sm);
+    transition: box-shadow 0.2s, color 0.2s;
 }
 
 .cooking-section-pill:hover {
-    background: rgba(255, 255, 255, 0.15);
+    color: var(--text);
+    box-shadow: var(--shadow-raised);
 }
 
 .cooking-section-pill.active {
-    background: linear-gradient(135deg, #f97316, #eab308);
-    color: #fff;
-    border-color: transparent;
+    background: var(--accent);
+    color: var(--accent-ink);
+    border-color: var(--accent);
+    box-shadow: var(--shadow-inset-sm);
 }
 
 .cooking-close-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: #fff;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+    box-shadow: var(--shadow-raised-sm);
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    transition: background 0.2s;
+    transition: box-shadow 0.2s;
 }
 
 .cooking-close-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
+    box-shadow: var(--shadow-raised);
+}
+
+.cooking-close-btn:active {
+    box-shadow: var(--shadow-inset-sm);
 }
 
 /* Carousel container */
@@ -125,7 +140,7 @@
     padding: 32px;
     transition: transform 0.3s ease-out, opacity 0.3s ease-out;
     scrollbar-width: thin;
-    scrollbar-color: rgba(255,255,255,0.2) transparent;
+    scrollbar-color: var(--border-strong) transparent;
 }
 
 .cooking-card::-webkit-scrollbar {
@@ -133,7 +148,7 @@
 }
 
 .cooking-card::-webkit-scrollbar-thumb {
-    background: rgba(255,255,255,0.2);
+    background: var(--border-strong);
     border-radius: 2px;
 }
 
@@ -171,19 +186,20 @@
 
 /* Section header card */
 .cooking-card-section {
-    background: linear-gradient(135deg, #1e293b, #0f172a);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-raised);
     text-align: center;
 }
 
+/* Was a gradient clipped to the text, which forced -webkit-text-fill-color:
+   transparent — that renders as an invisible heading anywhere the clip is
+   unsupported. A solid token has no such failure mode. */
 .cooking-card-section h2 {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 24px;
-    background: linear-gradient(135deg, #f97316, #eab308);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: var(--accent-text);
 }
 
 .cooking-mise-grid {
@@ -198,7 +214,8 @@
     justify-content: space-between;
     align-items: baseline;
     padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--surface-sunk);
+    box-shadow: var(--shadow-inset-sm);
     border-radius: 10px;
     gap: 8px;
     cursor: pointer;
@@ -212,26 +229,27 @@
 
 .cooking-mise-name {
     font-size: 18px;
-    color: #e0e0e0;
+    color: var(--text);
 }
 
 .cooking-mise-note {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-faint);
     font-style: italic;
 }
 
 .cooking-mise-qty {
     font-size: 16px;
     font-weight: 600;
-    color: #f97316;
+    color: var(--accent-text);
     white-space: nowrap;
 }
 
 /* Step card */
 .cooking-card-step {
-    background: linear-gradient(135deg, #1e293b, #162032);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-raised);
 }
 
 .cooking-step-number {
@@ -241,8 +259,8 @@
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #f97316, #eab308);
-    color: #fff;
+    background: var(--accent);
+    color: var(--accent-ink);
     font-weight: 700;
     font-size: 13px;
     margin-right: 8px;
@@ -261,18 +279,15 @@
 .cooking-step-text {
     font-size: 24px;
     line-height: 1.6;
-    color: #f0f0f0;
-}
-
-/* Override badge styles within cooking mode for readability */
-.cooking-step-text .ingredient-badge {
-    font-size: 22px;
-    padding: 2px 10px;
+    color: var(--text);
 }
 
+/* Scale entity markup up for arm's-length reading. Only .timer-badge has a
+   background of its own, so it is the only one that needs horizontal padding;
+   padding on the other two just pushed the surrounding words apart. */
+.cooking-step-text .ingredient-badge,
 .cooking-step-text .cookware-badge {
     font-size: 22px;
-    padding: 2px 10px;
 }
 
 .cooking-step-text .timer-badge {
@@ -283,9 +298,9 @@
 .cooking-step-ingredients {
     margin-top: 20px;
     padding-top: 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid var(--border);
     font-size: 15px;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--text-faint);
 }
 
 .cooking-step-ingredients span {
@@ -294,8 +309,9 @@
 
 /* Done card */
 .cooking-card-done {
-    background: linear-gradient(135deg, #1e293b, #0f172a);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-raised);
     text-align: center;
 }
 
@@ -306,7 +322,7 @@
 
 .cooking-card-done p {
     font-size: 20px;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--text-muted);
 }
 
 .cooking-done-close-btn {
@@ -314,28 +330,33 @@
     padding: 12px 40px;
     border-radius: 12px;
     border: none;
-    background: linear-gradient(135deg, #f97316, #eab308);
-    color: #fff;
+    background: var(--accent);
+    color: var(--accent-ink);
+    box-shadow: var(--shadow-raised-sm);
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
-    transition: opacity 0.2s;
+    transition: box-shadow 0.2s;
 }
 
 .cooking-done-close-btn:hover {
-    opacity: 0.85;
+    box-shadow: var(--shadow-raised);
+}
+
+.cooking-done-close-btn:active {
+    box-shadow: var(--shadow-inset-sm);
 }
 
 /* Progress bar */
 .cooking-progress {
     height: 3px;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--surface-sunk);
     flex-shrink: 0;
 }
 
 .cooking-progress-bar {
     height: 100%;
-    background: linear-gradient(90deg, #f97316, #eab308);
+    background: var(--accent);
     transition: width 0.3s ease-out;
 }
 
@@ -378,7 +399,11 @@
     }
 
     .cooking-step-text .ingredient-badge,
-    .cooking-step-text .cookware-badge,
+    .cooking-step-text .cookware-badge {
+        font-size: 16px;
+        white-space: normal;
+    }
+
     .cooking-step-text .timer-badge {
         font-size: 16px;
         padding: 1px 8px;
diff --git a/static/css/input.css b/static/css/input.css
index b731698..9c1395d 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -16,27 +16,53 @@
    carry white text at AA contrast.
    ============================================================ */
 :root {
-    --bg:            #faf9f7;
-    --surface:       #ffffff;
-    --surface-sunk:  #f4f2ef;
-    --border:        #e6e2dc;
-    --border-strong: #d5cfc6;
-    --text:          #1b1917;
-    --text-muted:    #6f6862;
-    --text-faint:    #736c66;
-    --accent:        #c2410c;
-    --accent-text:   #b0400f;
-    --accent-soft:   #fdefe6;
-    --accent-ink:    #ffffff;
-    --ok:            #2f7d55;
-    --ok-soft:       #e7f4ec;
-    --danger:        #b42318;
-    --danger-soft:   #fdecea;
-    --info:          #2b6cb0;
-
-    --radius-control: 6px;
-    --radius-card:   10px;
-    --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
+    /* Warm neutral base from the Cooklang design system. --surface sits a
+       few percent above --bg rather than being identical to it: strict
+       neumorphism uses one value for both, but the small lift lets raised
+       elements catch light and keeps cards legible when a viewport is
+       colour-managed or dimmed. */
+    --bg:            #ebe5e0;
+    --surface:       #efeae6;
+    --surface-sunk:  #e4ddd7;
+    --border:        #dcd3cb;
+    --border-strong: #c4b9ae;
+    --text:          #16161d;   /* DS Text/Primary */
+    --text-muted:    #5f5a51;   /* DS Text/Secondary, darkened for AA */
+    --text-faint:    #6a645b;
+    --accent:        #e15a29;   /* DS Controls/Primary, Icons/Primary, Forms/Stroke */
+    --accent-text:   #715329;   /* DS Text/Tags — the DS colour for tag/badge text */
+    --accent-soft:   #f5dacf;   /* DS Background/UI One */
+    --accent-ink:    #16161d;
+    --ok:            #3d6849;
+    --ok-soft:       #e2e8df;
+    --danger:        #c4261c;   /* DS Text/Warning, darkened for AA on light */
+    --danger-soft:   #f7dfdc;
+    --danger-ink:    #ffffff;
+    /* Links. The design system is entirely warm — no blue anywhere — so the
+       conventional link colour would be the one thing on screen that is
+       visibly not from the palette. This is the dark end of the DS orange
+       instead, and every link carries an underline so the affordance never
+       rests on hue alone. */
+    --info:          #8a3d14;
+    --disabled:      #d3cdcb;   /* DS Controls/Disabled */
+    --inactive:      #8a8075;   /* DS Controls/Inactive, darkened for AA */
+
+    /* Neumorphic elevation. Every raised or inset surface is built from this
+       pair — a light source at the top-left and its shadow at the
+       bottom-right — so elevation reads consistently across the UI. */
+    --neu-light:     rgba(255, 255, 255, .95);
+    --neu-dark:      rgba(163, 146, 131, .42);
+
+    --radius-control: 10px;
+    --radius-card:   16px;
+
+    --shadow-raised:    6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
+    --shadow-raised-sm: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
+    --shadow-inset:     inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
+    --shadow-inset-sm:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
+    /* Retained so anything still asking for the old flat elevation gets the
+       neumorphic one instead of nothing. */
+    --shadow-card:   var(--shadow-raised);
 
     /* Height of the sticky app bar. Used by .appbar itself and by anything
        that has to sit clear of it (the sticky ingredient rail). */
@@ -48,28 +74,53 @@
    values inside it. Without this, inline entity badges — which carry no
    background of their own since Task 4 — inherit the LIGHT theme's
    --accent-text / --ok and render at roughly 2.5:1 on cook mode's navy card. */
+/* The design system supplies Light values only. These are derived in the same
+   warm-neutral family: --accent and --accent-ink carry over unchanged, and the
+   text/status colours are lifted until they clear AA against the dark base. */
 .dark,
 .cooking-overlay {
     color-scheme: dark;
-    --bg:            #131519;
-    --surface:       #1a1d22;
-    --surface-sunk:  #212530;
-    --border:        #2b3038;
-    --border-strong: #3a414b;
-    --text:          #eceef1;
-    --text-muted:    #9aa2ac;
-    --text-faint:    #858e99;
-    --accent:        #ff7a45;
-    --accent-text:   #ff9166;
-    --accent-soft:   #2c1e17;
-    --accent-ink:    #131519;
-    --ok:            #5fbe8b;
-    --ok-soft:       #17271f;
-    --danger:        #ff8a8a;
-    --danger-soft:   #2a1618;
-    --info:          #7ab3ea;
-
-    --shadow-card:   none;
+    --bg:            #202027;
+    --surface:       #26262e;
+    --surface-sunk:  #1a1a20;
+    --border:        #35353f;
+    --border-strong: #474753;
+    --text:          #efeae6;
+    --text-muted:    #ada69b;
+    --text-faint:    #948d83;
+    --accent:        #e15a29;
+    --accent-text:   #f08050;
+    --accent-soft:   #3a2820;
+    --accent-ink:    #16161d;
+    --ok:            #6fb283;
+    --ok-soft:       #1e2a22;
+    --danger:        #ff6b60;
+    --danger-soft:   #2e1b1a;
+    --danger-ink:    #16161d;
+    --info:          #e59a6d;
+    --disabled:      #4a4a55;
+    --inactive:      #8f8880;
+
+    /* Dark neumorphism inverts the ratio: the highlight is barely there and
+       the shadow does nearly all the work, because a light rim on a dark
+       surface reads as a border rather than as a lit edge. */
+    --neu-light:     rgba(255, 255, 255, .055);
+    --neu-dark:      rgba(0, 0, 0, .55);
+
+    /* These four are redeclared verbatim from :root, and they have to be.
+       A custom property whose value contains var() is resolved at the element
+       that DECLARES it, not at the element that uses it — so --shadow-raised
+       computed against :root's --neu-* and inherited down already flattened.
+       Redefining --neu-* alone therefore changes nothing for any descendant.
+       .dark gets away with it by accident (it lands on <html>, the same
+       element as :root); .cooking-overlay is a descendant and does not, which
+       is how this surfaced: a white 95%-opacity halo around every cook-mode
+       card while the site was in light theme. */
+    --shadow-raised:    6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
+    --shadow-raised-sm: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
+    --shadow-inset:     inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
+    --shadow-inset-sm:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
+    --shadow-card:      var(--shadow-raised);
 }
 
 /* Register tokens with Tailwind so they generate real utilities
@@ -95,7 +146,10 @@
     --color-ok-soft:     var(--ok-soft);
     --color-danger:      var(--danger);
     --color-danger-soft: var(--danger-soft);
+    --color-danger-ink:  var(--danger-ink);
     --color-info:        var(--info);
+    --color-disabled:    var(--disabled);
+    --color-inactive:    var(--inactive);
 }
 
 /* Component vocabulary. Split out of this file so the theme contract
@@ -129,13 +183,33 @@
         --ok-soft:       #eaf3ee;
         --danger:        #96201a;
         --danger-soft:   #f8eae9;
+        --danger-ink:    #ffffff;
         --info:          #1f4f86;
-        --shadow-card:   none;
+        --disabled:      #cccccc;
+        --inactive:      #767676;
+
+        /* Neumorphism does not survive a printer — soft dual shadows render as
+           grey smudge and cost toner for no information. Flatten every
+           elevation to nothing and let the hairline borders define edges. */
+        --neu-light:        transparent;
+        --neu-dark:         transparent;
+        --shadow-raised:    none;
+        --shadow-raised-sm: none;
+        --shadow-inset:     none;
+        --shadow-inset-sm:  none;
+        --shadow-card:      none;
     }
 
-    .card {
-        border-color: var(--border) !important;
+    .card,
+    .btn,
+    .stepper,
+    .recipe-card,
+    .appbar {
+        border: 1px solid var(--border) !important;
         box-shadow: none !important;
+    }
+
+    .card {
         break-inside: avoid;
     }
 

From bd23c2366cfd0c33d45d892409c88ef4f006a4f0 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Mon, 17 Aug 2026 12:50:19 +0100
Subject: [PATCH 40/42] refactor(ui): swap neumorphism for Primer-style flat
 surfaces

Replaces the soft dual-shadow elevation with GitHub Primer's structural
convention, keeping the Cooklang design system colours from the previous
commit. Borders define surfaces; elevation is almost absent.

- Canvas lightens to #fcfcfb with white surfaces and a #e4e0da hairline on
  every box. Radii 16/10px -> 6px.
- The elevation scale is now two values: --shadow-card, a 4%-alpha single
  pixel in light and `none` in dark, and --shadow-overlay for things that
  genuinely float (dropdowns, dialogs). Nothing in flow uses the latter.
- Controls signal state with fill, not depth. Chips are flat and bordered.
- Dark canvas is the design system's own #16161D.
- cooking-mode.css follows the same structure.

Contrast improves across the board on the lighter canvas: --accent as a
graphical colour goes from 2.95:1 to 3.69:1, clearing the 3:1 it previously
missed, and every text token gains roughly a point.

Fixes a theme-toggle bug introduced while building this: transitioning a
property whose value is a theme token races Chrome's custom-property
invalidation when .dark flips, leaving the element on the outgoing theme's
colour until an unrelated recalc corrects it. It reproduced as recipe cards
staying white on a dark page, and it was intermittent rather than tied to
the background shorthand specifically. All such transitions are removed;
hover feedback is instant, which suits a flat design anyway. Verified with
8 synchronous toggles read with no settle time, zero mismatches.

Verified: 140 E2E passed / 0 failed / 5 skipped; cargo test, fmt, clippy
clean; 840 text-contrast probes across 8 pages x 2 themes, zero failures.
---
 static/css/components.css   | 130 +++++++++++++++---------------------
 static/css/cooking-mode.css |  41 ++++--------
 static/css/input.css        |  93 +++++++++-----------------
 3 files changed, 98 insertions(+), 166 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index c9a93e0..51033f1 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -11,10 +11,8 @@
 /* Custom component classes */
 @layer components {
     /* ---------- Focus ---------- */
-    /* Neumorphism removes almost every hard edge, which takes the default
-       focus ring's contrast down with it. A solid two-pixel accent outline is
-       the one place in this design that is deliberately not soft. It is
-       :focus-visible so pointer users never see it. */
+    /* :focus-visible so pointer users never see it. Primer's own ring is a
+       2px solid accent outline; this is the same idea in --accent. */
     :focus-visible {
         outline: 2px solid var(--accent);
         outline-offset: 2px;
@@ -22,14 +20,14 @@
     }
 
     /* ---------- Surfaces ---------- */
-    /* The hairline border is doing nothing in light mode (about 1.1:1) and is
-       load-bearing in dark, where --neu-light is only 5% white and cannot
-       describe a top edge on its own. */
+    /* Border first, elevation almost never. --shadow-card is a 4%-alpha
+       one-pixel edge in light mode and `none` in dark; if it were deleted
+       entirely the design would barely change, which is the intent. */
     .card {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-raised);
+        box-shadow: var(--shadow-card);
     }
 
     .card-head {
@@ -82,27 +80,28 @@
         text-decoration: none;
         background: var(--surface);
         color: var(--text);
-        border: 1px solid var(--border);
-        box-shadow: var(--shadow-raised-sm);
-        transition: box-shadow .12s ease;
+        border: 1px solid var(--border-strong);
     }
 
-    .btn:hover { background: var(--surface); box-shadow: var(--shadow-raised); }
+    /* Flat controls signal state with fill, not elevation.
+       Deliberately not transitioned. Any transition on a property whose value
+       is a theme token races Chrome's custom-property invalidation when .dark
+       is toggled: the element intermittently keeps the outgoing theme's colour
+       and only corrects on the next unrelated style recalc. Observed as
+       recipe cards staying white on a dark page. Hover feedback is instant
+       instead, which is what a flat design wants anyway. */
+    .btn:hover {
+        background: var(--surface-sunk);
+        border-color: var(--border-strong);
+    }
 
-    /* The press. A neumorphic control does not change colour when activated,
-       it sinks — the raised shadow inverts to an inset one. This is the
-       interaction the whole style is built around, so every pressable
-       surface below repeats it. */
-    .btn:active { box-shadow: var(--shadow-inset-sm); }
+    .btn:active { background: var(--surface-sunk); filter: brightness(.97); }
 
     .btn svg { width: 15px; height: 15px; }
 
     /* One accent-filled button per view. Everything else is neutral.
-       Kept as a solid fill rather than a raised neutral: neumorphism has no
-       native way to say "this is the one you want", and a page where the CTA
-       is the same colour as everything else is worse than a slightly impure
-       one. --accent-ink is the design system's near-black, which clears AA on
-       the accent fill where white (3.7:1) would not. */
+       --accent-ink is the design system's near-black, which clears AA on the
+       accent fill (5.0:1) where white (3.7:1) would not. */
     .btn-primary {
         background: var(--accent);
         border-color: var(--accent);
@@ -138,9 +137,8 @@
         height: 32px;
         overflow: hidden;
         background: var(--surface);
-        border: 1px solid var(--border);
+        border: 1px solid var(--border-strong);
         border-radius: var(--radius-control);
-        box-shadow: var(--shadow-raised-sm);
     }
 
     .stepper button {
@@ -158,10 +156,7 @@
         color: var(--text);
     }
 
-    /* Sinks the whole control rather than the button alone: overflow:hidden
-       on the parent would clip an inset shadow drawn on the child, so the
-       press has to be expressed by the element that owns the rounded box. */
-    .stepper:has(button:active) { box-shadow: var(--shadow-inset-sm); }
+    .stepper button:active { background: var(--surface-sunk); filter: brightness(.97); }
 
     .stepper input,
     .stepper .value {
@@ -293,14 +288,12 @@
         text-underline-offset: 3px;
     }
 
-    /* Chips read as pressed into the page rather than laid on top of it.
-       They use the -sm inset: a full-strength one on a 22px circle collapses
-       into a dark ring with no flat centre left. */
+    /* Flat tinted chips with a hairline, the way Primer draws Label. */
     .timer-badge {
-        padding: 2px 7px;
-        border-radius: 6px;
+        padding: 1px 6px;
+        border-radius: 5px;
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border);
         color: var(--text);
         font-weight: 600;
         font-variant-numeric: tabular-nums;
@@ -308,14 +301,14 @@
     }
 
     .step-number {
-        flex: 0 0 24px;
-        height: 24px;
+        flex: 0 0 22px;
+        height: 22px;
         margin-top: 1px;
         border-radius: 50%;
         display: grid;
         place-items: center;
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border);
         color: var(--text-muted);
         font-size: 12px;
         font-weight: 650;
@@ -324,12 +317,12 @@
 
     .tag {
         display: inline-block;
-        padding: 2px 9px;
+        padding: 1px 8px;
         border-radius: 9999px;
         font-size: 12px;
         font-weight: 500;
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border);
         color: var(--text-muted);
     }
 
@@ -343,25 +336,22 @@
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-raised-sm);
-        transition: box-shadow .12s ease;
     }
 
-    /* Rises on hover, sinks on press. The background deliberately does not
-       change: shifting fill *and* elevation at once reads as two separate
-       things happening. */
-    .recipe-card:hover { box-shadow: var(--shadow-raised); }
-
-    .recipe-card:active { box-shadow: var(--shadow-inset-sm); }
+    /* No transition here either — see the note on .btn:hover. */
+    .recipe-card:hover {
+        background: var(--surface-sunk);
+        border-color: var(--border-strong);
+    }
 
     .recipe-card .recipe-card-icon {
-        flex: 0 0 32px;
-        height: 32px;
+        flex: 0 0 30px;
+        height: 30px;
         display: grid;
         place-items: center;
-        border-radius: 10px;
+        border-radius: 6px;
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border);
         font-size: 15px;
     }
 
@@ -395,11 +385,7 @@
         height: var(--appbar-h);
         padding: 0 16px;
         background: var(--surface);
-        /* A one-directional drop shadow, not the dual pair. The bar is flush
-           against the top of the viewport, so there is no top edge for a
-           highlight to describe, and the full --shadow-raised would cast a
-           bright band across the first row of content. */
-        box-shadow: 0 3px 8px var(--neu-dark);
+        border-bottom: 1px solid var(--border);
     }
 
     .appbar-brand {
@@ -428,25 +414,20 @@
     }
 
     .icon-btn:hover {
-        background: var(--surface);
-        box-shadow: var(--shadow-raised-sm);
+        background: var(--surface-sunk);
         color: var(--text);
     }
 
-    .icon-btn:active { box-shadow: var(--shadow-inset-sm); }
-
     .icon-btn svg { width: 16px; height: 16px; }
 
-    /* Text fields are the clearest case for an inset: a field you type into
-       is a well, and the style says so without needing a border. */
+    /* Bordered field on the surface colour, not a sunken well. */
     .search-input {
         width: 100%;
-        height: 32px;
+        height: 30px;
         padding: 0 10px 0 30px;
         border-radius: var(--radius-control);
-        border: 1px solid transparent;
-        background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border-strong);
+        background: var(--surface);
         color: var(--text);
         font-size: 13px;
     }
@@ -458,7 +439,6 @@
     .search-input:focus {
         outline: none;
         border-color: var(--accent);
-        box-shadow: var(--shadow-inset-sm);
     }
 
     /* Nav items in the app bar. Name kept for the E2E suite. */
@@ -472,16 +452,12 @@
     }
 
     .nav-pill:hover {
-        background: var(--surface);
-        box-shadow: var(--shadow-raised-sm);
+        background: var(--surface-sunk);
         color: var(--text);
     }
 
-    /* Current page reads as held down — the inverse of the hover lift, which
-       is how neumorphism expresses a selected state. */
     .nav-pill.active {
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
         color: var(--text);
         font-weight: 600;
     }
@@ -497,7 +473,7 @@
         font-weight: 500;
         white-space: nowrap;
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
+        border: 1px solid var(--border);
         color: var(--text-muted);
     }
 
@@ -567,10 +543,10 @@
         display: flex;
         gap: 8px;
         padding: 12px 14px;
-        border-radius: var(--radius-control);
+        border-radius: var(--radius-card);
+        border: 1px solid var(--border);
         border-left: 3px solid var(--accent);
         background: var(--surface-sunk);
-        box-shadow: var(--shadow-inset-sm);
         color: var(--text-muted);
         font-style: italic;
     }
@@ -601,8 +577,8 @@
        the last raw hex outside @media print and did not flip with the theme.
        A raised token surface with the accent glyph carries the same weight. */
     .recipe-image-placeholder {
-        background: var(--surface);
-        box-shadow: var(--shadow-raised);
+        background: var(--surface-sunk);
+        border: 1px solid var(--border);
         color: var(--accent-text);
         @apply w-30 h-30 rounded-full flex items-center justify-center text-5xl;
     }
diff --git a/static/css/cooking-mode.css b/static/css/cooking-mode.css
index 274466d..cc24740 100644
--- a/static/css/cooking-mode.css
+++ b/static/css/cooking-mode.css
@@ -3,8 +3,8 @@
    is listed alongside .dark in input.css, so the tokens below always resolve to
    their dark values — cook mode is deliberately dark whatever the site theme is,
    because it is read at arm's length in a bright kitchen.
-   Elevation follows the same neumorphic vocabulary as the rest of the app:
-   cards and controls are raised, wells and progress tracks are inset. */
+   Structure follows the rest of the app: flat surfaces, hairline borders, no
+   elevation. */
 .cooking-overlay {
     position: fixed;
     inset: 0;
@@ -26,7 +26,7 @@
     justify-content: space-between;
     padding: 12px 20px;
     background: var(--surface);
-    box-shadow: 0 3px 8px var(--neu-dark);
+    border-bottom: 1px solid var(--border);
     flex-shrink: 0;
     gap: 12px;
     z-index: 2;
@@ -66,20 +66,17 @@
     background: var(--surface);
     color: var(--text-muted);
     border: 1px solid var(--border);
-    box-shadow: var(--shadow-raised-sm);
-    transition: box-shadow 0.2s, color 0.2s;
 }
 
 .cooking-section-pill:hover {
     color: var(--text);
-    box-shadow: var(--shadow-raised);
+    background: var(--surface-sunk);
 }
 
 .cooking-section-pill.active {
     background: var(--accent);
     color: var(--accent-ink);
     border-color: var(--accent);
-    box-shadow: var(--shadow-inset-sm);
 }
 
 .cooking-close-btn {
@@ -89,22 +86,16 @@
     background: var(--surface);
     border: 1px solid var(--border);
     color: var(--text);
-    box-shadow: var(--shadow-raised-sm);
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    transition: box-shadow 0.2s;
 }
 
 .cooking-close-btn:hover {
-    box-shadow: var(--shadow-raised);
-}
-
-.cooking-close-btn:active {
-    box-shadow: var(--shadow-inset-sm);
+    background: var(--surface-sunk);
 }
 
 /* Carousel container */
@@ -136,7 +127,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
-    border-radius: 20px;
+    border-radius: 6px;
     padding: 32px;
     transition: transform 0.3s ease-out, opacity 0.3s ease-out;
     scrollbar-width: thin;
@@ -188,7 +179,6 @@
 .cooking-card-section {
     background: var(--surface);
     border: 1px solid var(--border);
-    box-shadow: var(--shadow-raised);
     text-align: center;
 }
 
@@ -215,8 +205,8 @@
     align-items: baseline;
     padding: 8px 12px;
     background: var(--surface-sunk);
-    box-shadow: var(--shadow-inset-sm);
-    border-radius: 10px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
     gap: 8px;
     cursor: pointer;
     transition: opacity 0.2s;
@@ -249,7 +239,6 @@
 .cooking-card-step {
     background: var(--surface);
     border: 1px solid var(--border);
-    box-shadow: var(--shadow-raised);
 }
 
 .cooking-step-number {
@@ -311,7 +300,6 @@
 .cooking-card-done {
     background: var(--surface);
     border: 1px solid var(--border);
-    box-shadow: var(--shadow-raised);
     text-align: center;
 }
 
@@ -328,23 +316,18 @@
 .cooking-done-close-btn {
     margin-top: 28px;
     padding: 12px 40px;
-    border-radius: 12px;
+    border-radius: 6px;
     border: none;
     background: var(--accent);
     color: var(--accent-ink);
-    box-shadow: var(--shadow-raised-sm);
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
-    transition: box-shadow 0.2s;
+    transition: filter 0.2s;
 }
 
 .cooking-done-close-btn:hover {
-    box-shadow: var(--shadow-raised);
-}
-
-.cooking-done-close-btn:active {
-    box-shadow: var(--shadow-inset-sm);
+    filter: brightness(1.06);
 }
 
 /* Progress bar */
@@ -385,7 +368,7 @@
         width: calc(100% - 24px);
         padding: 20px 16px;
         max-height: 75vh;
-        border-radius: 16px;
+        border-radius: 6px;
     }
 
     .cooking-card-section h2 {
diff --git a/static/css/input.css b/static/css/input.css
index 9c1395d..d524f62 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -16,16 +16,15 @@
    carry white text at AA contrast.
    ============================================================ */
 :root {
-    /* Warm neutral base from the Cooklang design system. --surface sits a
-       few percent above --bg rather than being identical to it: strict
-       neumorphism uses one value for both, but the small lift lets raised
-       elements catch light and keeps cards legible when a viewport is
-       colour-managed or dimmed. */
-    --bg:            #ebe5e0;
-    --surface:       #efeae6;
-    --surface-sunk:  #e4ddd7;
-    --border:        #dcd3cb;
-    --border-strong: #c4b9ae;
+    /* Primer's structural convention on the Cooklang palette: a near-white
+       canvas, white surfaces, and a hairline border on everything. The border
+       is what defines a surface here — not elevation — so --border carries
+       real weight and is never decorative. */
+    --bg:            #fcfcfb;
+    --surface:       #ffffff;
+    --surface-sunk:  #f5f3f0;
+    --border:        #e4e0da;
+    --border-strong: #c3bcb1;
     --text:          #16161d;   /* DS Text/Primary */
     --text-muted:    #5f5a51;   /* DS Text/Secondary, darkened for AA */
     --text-faint:    #6a645b;
@@ -47,22 +46,16 @@
     --disabled:      #d3cdcb;   /* DS Controls/Disabled */
     --inactive:      #8a8075;   /* DS Controls/Inactive, darkened for AA */
 
-    /* Neumorphic elevation. Every raised or inset surface is built from this
-       pair — a light source at the top-left and its shadow at the
-       bottom-right — so elevation reads consistently across the UI. */
-    --neu-light:     rgba(255, 255, 255, .95);
-    --neu-dark:      rgba(163, 146, 131, .42);
+    --radius-control: 6px;
+    --radius-card:   6px;
 
-    --radius-control: 10px;
-    --radius-card:   16px;
-
-    --shadow-raised:    6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
-    --shadow-raised-sm: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
-    --shadow-inset:     inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
-    --shadow-inset-sm:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
-    /* Retained so anything still asking for the old flat elevation gets the
-       neumorphic one instead of nothing. */
-    --shadow-card:   var(--shadow-raised);
+    /* Two elevations, and that is the whole scale. In-flow surfaces get
+       --shadow-card, which is barely a shadow at all — the border does the
+       work. --shadow-overlay is only for things genuinely floating above the
+       page: dropdowns, dialogs, the search results panel. Nothing in the
+       document flow should ever use it. */
+    --shadow-card:    0 1px 0 rgba(27, 31, 36, .04);
+    --shadow-overlay: 0 8px 24px rgba(27, 31, 36, .12);
 
     /* Height of the sticky app bar. Used by .appbar itself and by anything
        that has to sit clear of it (the sticky ingredient rail). */
@@ -80,11 +73,14 @@
 .dark,
 .cooking-overlay {
     color-scheme: dark;
-    --bg:            #202027;
-    --surface:       #26262e;
-    --surface-sunk:  #1a1a20;
-    --border:        #35353f;
-    --border-strong: #474753;
+    /* --bg is the design system's own #16161D. It is listed under Text in the
+       palette, but it is the only near-black the system defines and it makes a
+       better warm canvas than an invented one. */
+    --bg:            #16161d;
+    --surface:       #1c1c24;
+    --surface-sunk:  #23232c;
+    --border:        #30303b;
+    --border-strong: #43434f;
     --text:          #efeae6;
     --text-muted:    #ada69b;
     --text-faint:    #948d83;
@@ -101,26 +97,11 @@
     --disabled:      #4a4a55;
     --inactive:      #8f8880;
 
-    /* Dark neumorphism inverts the ratio: the highlight is barely there and
-       the shadow does nearly all the work, because a light rim on a dark
-       surface reads as a border rather than as a lit edge. */
-    --neu-light:     rgba(255, 255, 255, .055);
-    --neu-dark:      rgba(0, 0, 0, .55);
-
-    /* These four are redeclared verbatim from :root, and they have to be.
-       A custom property whose value contains var() is resolved at the element
-       that DECLARES it, not at the element that uses it — so --shadow-raised
-       computed against :root's --neu-* and inherited down already flattened.
-       Redefining --neu-* alone therefore changes nothing for any descendant.
-       .dark gets away with it by accident (it lands on <html>, the same
-       element as :root); .cooking-overlay is a descendant and does not, which
-       is how this surfaced: a white 95%-opacity halo around every cook-mode
-       card while the site was in light theme. */
-    --shadow-raised:    6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
-    --shadow-raised-sm: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
-    --shadow-inset:     inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
-    --shadow-inset-sm:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
-    --shadow-card:      var(--shadow-raised);
+    /* On a dark canvas the border already reads as a raised edge, so the
+       in-flow shadow goes away entirely. The overlay shadow stays and gets
+       heavier — a floating panel needs to separate from a dark page too. */
+    --shadow-card:    none;
+    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, .5);
 }
 
 /* Register tokens with Tailwind so they generate real utilities
@@ -188,16 +169,8 @@
         --disabled:      #cccccc;
         --inactive:      #767676;
 
-        /* Neumorphism does not survive a printer — soft dual shadows render as
-           grey smudge and cost toner for no information. Flatten every
-           elevation to nothing and let the hairline borders define edges. */
-        --neu-light:        transparent;
-        --neu-dark:         transparent;
-        --shadow-raised:    none;
-        --shadow-raised-sm: none;
-        --shadow-inset:     none;
-        --shadow-inset-sm:  none;
-        --shadow-card:      none;
+        --shadow-card:    none;
+        --shadow-overlay: none;
     }
 
     .card,

From daf37f01ce965c1cbe1452da1dadb91a500875d6 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Mon, 17 Aug 2026 13:22:30 +0100
Subject: [PATCH 41/42] feat(ui): restore recipes index sorting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brings back the sort controls removed in 12a5cc7, restyled onto the token
system and with the defects the original carried fixed.

Kept client-side: recipes.html is rendered by the static site builder as
well as the server, and a ?sort= query has nothing to answer it in a static
export.

Fixed while restoring:
- Name sort read el.querySelector('h3').textContent, so any change to the
  card markup silently broke sorting. It now reads a data-name attribute.
  components.css carried a comment warning future editors about exactly this
  coupling; that warning is no longer needed.
- Sorting used localeCompare with no options, so "Recipe 10" sorted before
  "Recipe 9". Now Intl.Collator with numeric and sensitivity 'base'.
- The choice was lost on every navigation. Now persisted in sessionStorage,
  with the read guarded — a corrupt value falls back to the defaults rather
  than throwing and leaving the page unsorted.
- A persisted field that does not exist on the current page (the "created"
  option is dropped where not every recipe has a date) is now validated
  against the live options instead of being applied blindly.
- Directories kept source order; they now sort among themselves.
- The direction button had a title but no accessible name; it has an
  aria-label now.
- Controls were styled with raw gray-/purple- palette utilities that did not
  flip with the theme. New .select component, tokens throughout.

Adds tests/e2e/recipes-sort.spec.ts — 8 tests, the feature previously had
none, which is how it was removed and restored without any test changing
colour. Verified non-vacuous by mutation: neutering the comparator fails the
reverse-order and modified-date tests, and disabling persistence fails the
survives-a-reload test.

Verified: 148 E2E passed / 0 failed / 5 skipped; cargo test, fmt, clippy
clean; no horizontal overflow at 768/800/820/1024/1280px.
---
 static/css/components.css      |  20 +++++
 templates/recipes.html         | 147 ++++++++++++++++++++++++++++++++-
 tests/e2e/recipes-sort.spec.ts | 116 ++++++++++++++++++++++++++
 3 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/recipes-sort.spec.ts

diff --git a/static/css/components.css b/static/css/components.css
index 51033f1..9863b12 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -131,6 +131,25 @@
         filter: brightness(1.06);
     }
 
+    /* Matches .btn's box so a select and a button sit level beside each other.
+       The dropdown arrow is left to the platform: a custom SVG arrow would
+       have to be a data URI, which cannot reference a token and so would not
+       flip with the theme. `color-scheme` on .dark already makes the native
+       control render correctly in both themes. */
+    .select {
+        height: 32px;
+        padding: 0 8px;
+        border-radius: var(--radius-control);
+        border: 1px solid var(--border-strong);
+        background: var(--surface);
+        color: var(--text);
+        font-size: 13.5px;
+        font-weight: 550;
+        cursor: pointer;
+    }
+
+    .select:hover { background: var(--surface-sunk); }
+
     .stepper {
         display: inline-flex;
         align-items: center;
@@ -555,6 +574,7 @@
        tablet propped in a kitchen, where 26px buttons are not tappable. */
     @media (pointer: coarse) {
         .btn { height: 44px; padding: 0 14px; }
+        .select { height: 44px; }
         /* 46px outer so the 1px borders leave a 44px content box — the
            buttons are height:100% of that, so they land on 44, not 42. */
         .stepper { height: 46px; }
diff --git a/templates/recipes.html b/templates/recipes.html
index 8926091..6dabdd1 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -55,10 +55,20 @@ <h2 class="text-[15px] font-semibold text-text">{{ tr.t("todays-menu-title") }}<
     {% when None %}
     {% endmatch %}
 
+    <div id="sort-controls" class="hidden items-center justify-end gap-2 mb-3">
+        <label for="sort-field" class="text-[13px] text-muted">{{ tr.t("sort-by") }}</label>
+        <select id="sort-field" class="select">
+            <option value="name">{{ tr.t("sort-name") }}</option>
+            <option value="modified">{{ tr.t("sort-modified") }}</option>
+            <option value="created" id="sort-created-option">{{ tr.t("sort-created") }}</option>
+        </select>
+        <button id="sort-dir" type="button" class="btn" aria-label="{{ tr.t("sort-direction-toggle") }}">↑</button>
+    </div>
+
     <div id="recipes-grid" class="grid gap-2.5 [grid-template-columns:repeat(auto-fill,minmax(230px,1fr))]">
         {% for item in items %}
         {% if item.is_directory %}
-        <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" class="recipe-card">
+        <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" data-name="{{ item.name }}" class="recipe-card">
             <span class="recipe-card-icon">📁</span>
             <span class="min-w-0">
                 <h3 class="recipe-card-title">{{ item.name }}</h3>
@@ -72,6 +82,7 @@ <h3 class="recipe-card-title">{{ item.name }}</h3>
         {% else %}
         <a href="{{ prefix }}/{% if static_mode %}{% if item.is_menu %}menu{% else %}recipe{% endif %}{% else %}recipe{% endif %}/{{ item.path }}{% if static_mode %}.html{% endif %}"
            data-type="recipe"
+           data-name="{{ item.name }}"
            {% if let Some(ts) = item.modified_at %}data-modified="{{ ts }}"{% endif %}
            {% if let Some(ts) = item.created_at %}data-created="{{ ts }}"{% endif %}
            class="recipe-card">
@@ -101,3 +112,137 @@ <h3 class="recipe-card-title">{{ item.name }}</h3>
 </div>
 {% endblock %}
 
+{% block scripts %}
+<script>
+(function () {
+    const grid = document.getElementById('recipes-grid');
+    const controls = document.getElementById('sort-controls');
+    const fieldSelect = document.getElementById('sort-field');
+    const dirBtn = document.getElementById('sort-dir');
+    const createdOption = document.getElementById('sort-created-option');
+
+    if (!grid || !controls || !fieldSelect || !dirBtn) return;
+
+    // Sorting is client-side because this template is also rendered by the
+    // static site builder, where there is no server to answer a ?sort= query.
+    const STORE_KEY = 'recipes-sort';
+
+    let sortField = 'name';
+    let sortDir = 'asc';
+
+    const recipeCards = Array.from(grid.querySelectorAll('[data-type="recipe"]'));
+
+    // "Created" is only offered when every recipe has a creation date;
+    // otherwise the column is partly empty and the ordering is arbitrary.
+    const allHaveCreated = recipeCards.length > 0 &&
+        recipeCards.every(el => el.hasAttribute('data-created'));
+    if (!allHaveCreated && createdOption) {
+        createdOption.remove();
+    }
+
+    // Nothing to sort with fewer than two recipes.
+    if (recipeCards.length < 2) return;
+    controls.classList.remove('hidden');
+    controls.classList.add('flex');
+
+    function restore() {
+        let saved = null;
+        try {
+            saved = JSON.parse(sessionStorage.getItem(STORE_KEY) || 'null');
+        } catch (e) {
+            // Corrupt value: fall through to the defaults.
+        }
+        if (!saved) return;
+        // The saved field may not exist here — "created" is removed on pages
+        // where not every recipe has a date.
+        const valid = Array.from(fieldSelect.options).some(o => o.value === saved.field);
+        if (valid) {
+            sortField = saved.field;
+            fieldSelect.value = saved.field;
+        }
+        if (saved.dir === 'asc' || saved.dir === 'desc') {
+            sortDir = saved.dir;
+        }
+    }
+
+    function persist() {
+        try {
+            sessionStorage.setItem(STORE_KEY, JSON.stringify({ field: sortField, dir: sortDir }));
+        } catch (e) {
+            // Private browsing or a full quota: sorting still works, it just
+            // does not survive navigation.
+        }
+    }
+
+    function getValue(el) {
+        if (sortField === 'name') {
+            // Reads data-name rather than the heading's text. The previous
+            // version used el.querySelector('h3').textContent, which silently
+            // broke sorting whenever the card markup changed.
+            return (el.getAttribute('data-name') || '').trim();
+        }
+        const raw = el.getAttribute(sortField === 'modified' ? 'data-modified' : 'data-created');
+        if (raw === null) return null;
+        const n = parseInt(raw, 10);
+        return Number.isNaN(n) ? null : n;
+    }
+
+    // numeric so "Recipe 10" sorts after "Recipe 9", and sensitivity 'base'
+    // so case and accents do not split otherwise-equal names.
+    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+
+    function compare(a, b) {
+        const av = getValue(a);
+        const bv = getValue(b);
+        // Missing values sort last in both directions rather than flipping to
+        // the top when the direction is reversed.
+        if (av === null && bv === null) return 0;
+        if (av === null) return 1;
+        if (bv === null) return -1;
+        const cmp = typeof av === 'string' ? collator.compare(av, bv) : av - bv;
+        return sortDir === 'asc' ? cmp : -cmp;
+    }
+
+    function applySort() {
+        const all = Array.from(grid.children);
+        const dirs = all.filter(el => el.dataset.type === 'directory');
+        const recipes = all.filter(el => el.dataset.type === 'recipe');
+        const others = all.filter(el => !el.dataset.type);
+
+        recipes.sort(compare);
+        // Directories stay grouped above recipes, but sort among themselves by
+        // name so their order is deterministic instead of source order.
+        dirs.sort((a, b) => {
+            const cmp = collator.compare(a.getAttribute('data-name') || '', b.getAttribute('data-name') || '');
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+
+        const frag = document.createDocumentFragment();
+        dirs.forEach(el => frag.appendChild(el));
+        recipes.forEach(el => frag.appendChild(el));
+        others.forEach(el => frag.appendChild(el));
+        grid.appendChild(frag);
+
+        dirBtn.textContent = sortDir === 'asc' ? '↑' : '↓';
+    }
+
+    fieldSelect.addEventListener('change', function () {
+        sortField = this.value;
+        // Dates default to newest first; names to A–Z.
+        sortDir = sortField === 'name' ? 'asc' : 'desc';
+        applySort();
+        persist();
+    });
+
+    dirBtn.addEventListener('click', function () {
+        sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+        applySort();
+        persist();
+    });
+
+    restore();
+    applySort();
+})();
+</script>
+{% endblock %}
+
diff --git a/tests/e2e/recipes-sort.spec.ts b/tests/e2e/recipes-sort.spec.ts
new file mode 100644
index 0000000..e434491
--- /dev/null
+++ b/tests/e2e/recipes-sort.spec.ts
@@ -0,0 +1,116 @@
+import { test, expect, Page } from '@playwright/test';
+import { TestHelpers } from '../fixtures/test-helpers';
+
+/**
+ * Coverage for the recipes-index sorter. It previously had none, which is how
+ * it was removed and restored without a single test changing colour.
+ *
+ * Assertions read data-name rather than the card's heading text so that these
+ * tests do not re-create the markup coupling the sorter itself was fixed to
+ * avoid.
+ */
+
+const recipeNames = (page: Page) =>
+  page.locator('#recipes-grid [data-type="recipe"]').evaluateAll((els) =>
+    els.map((el) => el.getAttribute('data-name') ?? ''),
+  );
+
+const allNames = (page: Page) =>
+  page.locator('#recipes-grid > [data-type]').evaluateAll((els) =>
+    els.map((el) => `${el.getAttribute('data-type')}:${el.getAttribute('data-name')}`),
+  );
+
+test.describe('Recipes index sorting', () => {
+  let helpers: TestHelpers;
+
+  test.beforeEach(async ({ page }) => {
+    helpers = new TestHelpers(page);
+    await helpers.navigateTo('/');
+    // Each test starts from the default ordering, not whatever a previous
+    // test persisted.
+    await page.evaluate(() => sessionStorage.removeItem('recipes-sort'));
+    await page.reload();
+  });
+
+  test('controls are visible and default to name ascending', async ({ page }) => {
+    await expect(page.locator('#sort-controls')).toBeVisible();
+    await expect(page.locator('#sort-field')).toHaveValue('name');
+    await expect(page.locator('#sort-dir')).toHaveText('↑');
+
+    const names = await recipeNames(page);
+    expect(names.length).toBeGreaterThan(1);
+    const sorted = [...names].sort((a, b) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }),
+    );
+    expect(names).toEqual(sorted);
+  });
+
+  test('direction toggle reverses the order', async ({ page }) => {
+    const asc = await recipeNames(page);
+    await page.locator('#sort-dir').click();
+    await expect(page.locator('#sort-dir')).toHaveText('↓');
+
+    const desc = await recipeNames(page);
+    expect(desc).toEqual([...asc].reverse());
+  });
+
+  test('sorting by modified date reorders and defaults to newest first', async ({ page }) => {
+    const byName = await recipeNames(page);
+    await page.locator('#sort-field').selectOption('modified');
+    await expect(page.locator('#sort-dir')).toHaveText('↓');
+
+    const newestFirst = await recipeNames(page);
+    expect(newestFirst).not.toEqual(byName);
+    expect([...newestFirst].sort()).toEqual([...byName].sort()); // same set
+
+    const timestamps = await page
+      .locator('#recipes-grid [data-type="recipe"]')
+      .evaluateAll((els) => els.map((el) => Number(el.getAttribute('data-modified'))));
+    const descending = [...timestamps].sort((a, b) => b - a);
+    expect(timestamps).toEqual(descending);
+  });
+
+  test('directories stay grouped above recipes in both directions', async ({ page }) => {
+    for (const _ of [0, 1]) {
+      const entries = await allNames(page);
+      const lastDir = entries.map((e) => e.startsWith('directory:')).lastIndexOf(true);
+      const firstRecipe = entries.findIndex((e) => e.startsWith('recipe:'));
+      if (lastDir !== -1 && firstRecipe !== -1) {
+        expect(lastDir).toBeLessThan(firstRecipe);
+      }
+      await page.locator('#sort-dir').click();
+    }
+  });
+
+  test('sort choice survives a reload', async ({ page }) => {
+    await page.locator('#sort-dir').click();
+    const before = await recipeNames(page);
+
+    await page.reload();
+
+    await expect(page.locator('#sort-dir')).toHaveText('↓');
+    await expect(page.locator('#sort-field')).toHaveValue('name');
+    expect(await recipeNames(page)).toEqual(before);
+  });
+
+  test('corrupt saved state falls back to defaults instead of throwing', async ({ page }) => {
+    await page.evaluate(() => sessionStorage.setItem('recipes-sort', '{not json'));
+    await page.reload();
+
+    await expect(page.locator('#sort-controls')).toBeVisible();
+    await expect(page.locator('#sort-field')).toHaveValue('name');
+    await expect(page.locator('#sort-dir')).toHaveText('↑');
+  });
+
+  test('controls stay hidden when there is nothing to sort', async ({ page }) => {
+    await helpers.navigateTo('/directory/Salads');
+    const recipes = await page.locator('#recipes-grid [data-type="recipe"]').count();
+    expect(recipes).toBeLessThan(2);
+    await expect(page.locator('#sort-controls')).toBeHidden();
+  });
+
+  test('direction toggle is labelled for assistive tech', async ({ page }) => {
+    const label = await page.locator('#sort-dir').getAttribute('aria-label');
+    expect(label).toBeTruthy();
+  });
+});

From c079c4ab662580c59557e95a1f61bc7c6c5c43f8 Mon Sep 17 00:00:00 2001
From: Alexey Dubovskoy <dubovskoy.a@gmail.com>
Date: Mon, 17 Aug 2026 18:26:31 +0100
Subject: [PATCH 42/42] refactor(ui): put typography on a type scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Audit of five pages found nine distinct font sizes and six weights, with
no scale behind either.

Sizes were 11.5, 12, 12.5, 13, 13.5, 14, 15, 16 and 24px — six of them
inside a 2.5px band. Half-pixel steps sit below the threshold at which a
reader can tell two sizes apart, so they could not express hierarchy; they
only made each new declaration a guess. Replaced with seven steps, each at
least 1px from its neighbours and each mapped to one job:

  24 display  page title
  18 title    section headings
  16 read     recipe step text
  14 body     list rows, card titles, default
  13 ui       buttons, inputs, metadata line
  12 meta     captions, counts, tags, notes
  11 label    uppercase section labels

18px is new: section headings had been set at 15, 16, 17, 19 and 20px in
different templates, five sizes doing one job.

Every step carries its own line-height, falling as size rises — long-form
text needs the leading to carry the eye back to the next line, headings do
not. Line-height had been set in exactly two places in the whole component
layer, so most text was on browser or Tailwind defaults.

Weights 550 and 650 are gone. They do render on macOS, where the system
font resolves to variable SF Pro, but 600 to 650 is a ~1% change in advance
width and snaps to a neighbouring weight wherever the system font is not
variable — hierarchy that is invisible on one platform and absent on
another. Now 400/500/600/700.

Tailwind's own text-xs/sm/base/lg/2xl are aliased onto the scale rather
than left alongside it. Their sizes already coincided but their
line-heights did not, so the same visual size carried two different
leadings depending on which name an author reached for. Aliasing fixes ~80
call sites without touching markup, and keeps a future `text-sm` on-scale.

Measure: step text ran to 84 characters per line on a wide viewport, past
the point where the eye reliably finds the next line. Capped at 68ch, which
measures 74 characters and tracks font size rather than freezing a width.

Heading semantics, which a visual audit does not surface:
- The recipes index went h1 -> h3, skipping a level. Card titles are h2 now.
  The comment requiring an <h3> was stale from the sorter restore, and the
  E2E suite now selects .recipe-card-title rather than the tag name.
- The shopping list page had no h1; its title was an h2. Promoted.
All pages now have exactly one h1 and no skipped levels.

Step text moves 15px -> 16px. At 820x1037 the same five steps stay above
the fold, but the page grows 69px; that is the cost of a readable size at
arm's length, which is the stated use case.

Cook mode keeps its own raw-px sizes deliberately. It is read from across a
kitchen rather than at desk distance, and retuning it needs a real tablet
to validate, not a guess. Noted as a follow-up.

Verified: 148 E2E passed / 0 failed / 5 skipped; cargo test, fmt, clippy
clean; 802 text-contrast probes across 8 pages x 2 themes, zero failures;
re-audit finds six sizes and four weights in use, nothing off-scale.
---
 static/css/components.css    | 81 ++++++++++++++++++++---------------
 static/css/input.css         | 82 ++++++++++++++++++++++++++++++++++++
 templates/api_docs.html      |  4 +-
 templates/edit.html          |  6 +--
 templates/error.html         |  2 +-
 templates/menu.html          |  6 +--
 templates/new.html           |  2 +-
 templates/pantry.html        | 26 ++++++------
 templates/recipe.html        |  2 +-
 templates/recipes.html       | 12 +++---
 templates/shopping_list.html |  6 +--
 tests/e2e/navigation.spec.ts |  4 +-
 12 files changed, 163 insertions(+), 70 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index 9863b12..0c9b550 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -41,8 +41,8 @@
     .card-head h2,
     .card-head h3 {
         margin: 0;
-        font-size: 11.5px;
-        font-weight: 650;
+        font-size: var(--text-label);
+        font-weight: 600;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--text-muted);
@@ -52,7 +52,7 @@
        (aisle categories, pantry locations) rather than fixed chrome. */
     .card-head.plain h2,
     .card-head.plain h3 {
-        font-size: 13px;
+        font-size: var(--text-body);
         font-weight: 600;
         letter-spacing: 0;
         text-transform: none;
@@ -60,7 +60,7 @@
     }
 
     .card-head .count {
-        font-size: 12px;
+        font-size: var(--text-meta);
         color: var(--text-faint);
         font-variant-numeric: tabular-nums;
     }
@@ -73,8 +73,8 @@
         height: 32px;
         padding: 0 11px;
         border-radius: var(--radius-control);
-        font-size: 13.5px;
-        font-weight: 550;
+        font-size: var(--text-ui);
+        font-weight: 500;
         white-space: nowrap;
         cursor: pointer;
         text-decoration: none;
@@ -143,8 +143,8 @@
         border: 1px solid var(--border-strong);
         background: var(--surface);
         color: var(--text);
-        font-size: 13.5px;
-        font-weight: 550;
+        font-size: var(--text-ui);
+        font-weight: 500;
         cursor: pointer;
     }
 
@@ -167,7 +167,7 @@
         background: transparent;
         color: var(--text-muted);
         cursor: pointer;
-        font-size: 14px;
+        font-size: var(--text-body);
     }
 
     .stepper button:hover {
@@ -185,7 +185,7 @@
         background: transparent;
         color: var(--text);
         text-align: center;
-        font-size: 13.5px;
+        font-size: var(--text-ui);
         font-weight: 600;
         font-variant-numeric: tabular-nums;
         -moz-appearance: textfield;
@@ -211,7 +211,7 @@
         align-items: center;
         gap: 10px;
         padding: 7px 14px;
-        font-size: 14px;
+        font-size: var(--text-body);
     }
 
     .row + .row { border-top: 1px solid var(--border); }
@@ -221,14 +221,14 @@
     .row .row-value {
         white-space: nowrap;
         font-weight: 600;
-        font-size: 13.5px;
+        font-size: var(--text-ui);
         color: var(--accent-text);
         font-variant-numeric: tabular-nums;
     }
 
     .row .row-note {
         color: var(--text-faint);
-        font-size: 12.5px;
+        font-size: var(--text-meta);
     }
 
     /* ---------- Text ---------- */
@@ -238,7 +238,7 @@
         flex-wrap: wrap;
         align-items: center;
         gap: 6px 0;
-        font-size: 13px;
+        font-size: var(--text-ui);
         color: var(--text-muted);
     }
 
@@ -260,8 +260,8 @@
     a.text-info { text-decoration: underline; text-underline-offset: 2px; }
 
     .section-label {
-        font-size: 11.5px;
-        font-weight: 650;
+        font-size: var(--text-label);
+        font-weight: 600;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--text-faint);
@@ -329,8 +329,8 @@
         background: var(--surface-sunk);
         border: 1px solid var(--border);
         color: var(--text-muted);
-        font-size: 12px;
-        font-weight: 650;
+        font-size: var(--text-meta);
+        font-weight: 600;
         font-variant-numeric: tabular-nums;
     }
 
@@ -338,7 +338,7 @@
         display: inline-block;
         padding: 1px 8px;
         border-radius: 9999px;
-        font-size: 12px;
+        font-size: var(--text-meta);
         font-weight: 500;
         background: var(--surface-sunk);
         border: 1px solid var(--border);
@@ -371,16 +371,19 @@
         border-radius: 6px;
         background: var(--surface-sunk);
         border: 1px solid var(--border);
-        font-size: 15px;
+        font-size: var(--text-read);
     }
 
-    /* MUST be applied to an <h3>. The client-side sorter in
-       recipes.html reads `el.querySelector('h3')?.textContent`
-       to sort by name; any other element silently breaks sorting. */
+    /* An <h2>, not an <h3>: the index has an <h1> and nothing between, so an
+       h3 skipped a level in the document outline.
+       The old warning here — that this element had to stay an <h3> because
+       the sorter read `querySelector('h3').textContent` — no longer applies.
+       The sorter reads data-name, and the E2E suite selects this class rather
+       than the tag, so the heading level is free to follow the outline. */
     .recipe-card .recipe-card-title {
         display: block;
         margin: 0;
-        font-size: 14px;
+        font-size: var(--text-body);
         font-weight: 600;
         line-height: 1.3;
         color: var(--text);
@@ -389,7 +392,7 @@
     .recipe-card .recipe-card-sub {
         display: block;
         margin-top: 1px;
-        font-size: 12px;
+        font-size: var(--text-meta);
         color: var(--text-faint);
     }
 
@@ -411,8 +414,8 @@
         display: flex;
         align-items: center;
         gap: 7px;
-        font-size: 14px;
-        font-weight: 650;
+        font-size: var(--text-body);
+        font-weight: 600;
         letter-spacing: -.01em;
         color: var(--text);
         text-decoration: none;
@@ -448,7 +451,7 @@
         border: 1px solid var(--border-strong);
         background: var(--surface);
         color: var(--text);
-        font-size: 13px;
+        font-size: var(--text-ui);
     }
 
     .search-input::placeholder { color: var(--text-faint); }
@@ -464,7 +467,7 @@
     .nav-pill {
         padding: 5px 11px;
         border-radius: var(--radius-control);
-        font-size: 13.5px;
+        font-size: var(--text-ui);
         font-weight: 500;
         color: var(--text-muted);
         text-decoration: none;
@@ -488,7 +491,7 @@
         align-items: center;
         padding: 1px 8px;
         border-radius: 9999px;
-        font-size: 12px;
+        font-size: var(--text-meta);
         font-weight: 500;
         white-space: nowrap;
         background: var(--surface-sunk);
@@ -545,14 +548,22 @@
 
     .step-list > li + li { border-top: 1px solid var(--border); }
 
-    .step-body { font-size: 15px; line-height: 1.6; }
+    /* Measure. Unconstrained, step text ran to 84 characters per line on a
+       wide viewport; past roughly 75 the eye loses the start of the next line
+       on the return sweep. 68ch is inside the comfortable band and, being a
+       ch unit, it tracks the font size rather than freezing a pixel width. */
+    .step-body {
+        font-size: var(--text-read);
+        line-height: 1.6;
+        max-width: 68ch;
+    }
 
     .step-refs {
         margin-top: 7px;
         display: flex;
         flex-wrap: wrap;
         gap: 2px 14px;
-        font-size: 12.5px;
+        font-size: var(--text-meta);
         color: var(--text-faint);
     }
 
@@ -611,7 +622,7 @@
         align-items: baseline;
         gap: 10px;
         padding: 7px 14px;
-        font-size: 14px;
+        font-size: var(--text-body);
     }
 
     .pantry-item + .pantry-item { border-top: 1px solid var(--border); }
@@ -621,13 +632,13 @@
     .pantry-item .quantity-display {
         white-space: nowrap;
         font-weight: 600;
-        font-size: 13.5px;
+        font-size: var(--text-ui);
         color: var(--accent-text);
         font-variant-numeric: tabular-nums;
     }
 
     .pantry-item .pantry-dates {
-        font-size: 12.5px;
+        font-size: var(--text-meta);
         color: var(--text-faint);
     }
 
diff --git a/static/css/input.css b/static/css/input.css
index d524f62..59b78eb 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -133,6 +133,88 @@
     --color-inactive:    var(--inactive);
 }
 
+/* ============================================================
+   TYPE SCALE
+   Six steps, each with a role and a line-height chosen for that role.
+   Registered with Tailwind so templates use `text-body` / `text-meta`
+   rather than arbitrary `text-[12.5px]` values.
+
+   This replaces an ad-hoc set of nine sizes — 11.5, 12, 12.5, 13, 13.5,
+   14, 15, 16, 24 — six of which sat inside a 2.5px band. Half-pixel steps
+   are below the threshold at which a reader can tell two sizes apart, so
+   they could not express hierarchy; they only made every new declaration
+   a guess. Each step below is at least 1px from its neighbours and maps
+   to one job.
+
+   Line-height falls as size rises: long-form text needs the leading to
+   track back to the start of the next line, headings do not.
+   ============================================================ */
+@theme {
+    /* Page title. Negative tracking because default spacing looks loose
+       once type gets this large. */
+    --text-display: 24px;
+    --text-display--line-height: 1.25;
+    --text-display--letter-spacing: -.01em;
+
+    /* Section headings below the page title. Collapses what had been five
+       sizes doing one job — 15, 16, 17, 19 and 20px across different
+       templates, none of them a deliberate distinction. */
+    --text-title: 18px;
+    --text-title--line-height: 1.35;
+    --text-title--letter-spacing: -.005em;
+
+    /* The primary reading surface: recipe step text. The only step tuned
+       for continuous prose rather than for UI. */
+    --text-read: 16px;
+    --text-read--line-height: 1.6;
+
+    /* Default. List rows, ingredient names, card titles. */
+    --text-body: 14px;
+    --text-body--line-height: 1.5;
+
+    /* Controls and dense chrome: buttons, inputs, the metadata line. */
+    --text-ui: 13px;
+    --text-ui--line-height: 1.4;
+
+    /* Captions, counts, tags, notes — text that supports something else. */
+    --text-meta: 12px;
+    --text-meta--line-height: 1.4;
+
+    /* Uppercase section labels only. The tracking is part of the step:
+       capitals set at their natural spacing read as cramped, and it is
+       what makes 11px legible in this role. */
+    --text-label: 11px;
+    --text-label--line-height: 1.3;
+    --text-label--letter-spacing: .06em;
+
+    /* Tailwind's own names are still used in ~80 places across the templates.
+       Their sizes already coincided with steps above, but their default
+       line-heights did not, so the same visual size was being set with two
+       different leadings depending on which name the author reached for.
+       Aliasing them here fixes every one of those call sites without touching
+       the markup, and means a future `text-sm` cannot drift off the scale. */
+    --text-xs:   var(--text-meta);
+    --text-xs--line-height: 1.4;
+    --text-sm:   var(--text-body);
+    --text-sm--line-height: 1.5;
+    --text-base: var(--text-read);
+    --text-base--line-height: 1.6;
+    --text-lg:   var(--text-title);
+    --text-lg--line-height: 1.35;
+    --text-2xl:  var(--text-display);
+    --text-2xl--line-height: 1.25;
+}
+
+/* Four real weights. 550 and 650 were in use and do render on macOS, where
+   the system font resolves to variable SF Pro — but 600 to 650 is a ~1%
+   change in advance width, far too fine to signal hierarchy, and it snaps to
+   a neighbouring weight wherever the system font is not variable. Hierarchy
+   that depends on it is therefore inconsistent across platforms. */
+body {
+    font-size: var(--text-body);
+    line-height: 1.5;
+}
+
 /* Component vocabulary. Split out of this file so the theme contract
    (tokens + @theme + the print token reset) stays small and stable while
    the component layer keeps churning. Imported here rather than appended
diff --git a/templates/api_docs.html b/templates/api_docs.html
index 1391b6c..324daba 100644
--- a/templates/api_docs.html
+++ b/templates/api_docs.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="max-w-5xl">
-    <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-1.5">Server API</h1>
+    <h1 class="text-display font-bold text-text mb-1.5">Server API</h1>
     <p class="text-muted mb-5">
         {{ preamble.intro }}
     </p>
@@ -63,7 +63,7 @@ <h2>Contents</h2>
     <!-- Endpoints -->
     {% for section in sections %}
     <section id="{{ section.id }}" class="mb-8 scroll-mt-24">
-        <h2 class="text-[19px] leading-tight font-[650] tracking-tight text-text mb-1">{{ section.title }}</h2>
+        <h2 class="text-title font-semibold text-text mb-1">{{ section.title }}</h2>
         <p class="text-sm text-muted mb-3">{{ section.description|inline_code|safe }}</p>
 
         <div class="space-y-3">
diff --git a/templates/edit.html b/templates/edit.html
index 03aed6c..1922611 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -12,7 +12,7 @@
             </svg>
             <span>{{ tr.t("action-back") }}</span>
         </a>
-        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text truncate">{{ recipe_name }}</h1>
+        <h1 class="text-display font-bold text-text truncate">{{ recipe_name }}</h1>
         <div class="ml-auto flex items-center gap-3">
             <span id="save-status" class="text-sm text-faint"></span>
             <button onclick="showDeleteModal()" class="btn text-danger">
@@ -33,7 +33,7 @@ <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text truncat
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                     </svg>
                 </div>
-                <h2 class="text-[17px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("delete-recipe") }}</h2>
+                <h2 class="text-title font-semibold text-text">{{ tr.t("delete-recipe") }}</h2>
             </div>
             <p class="text-muted mb-1.5">{{ tr.t("delete-recipe-confirm") }}</p>
             <p class="text-sm text-danger mb-5">{{ tr.t("delete-recipe-warning") }}</p>
@@ -52,7 +52,7 @@ <h2 class="text-[17px] leading-tight font-[650] tracking-tight text-text">{{ tr.
     <div id="editor-container" class="flex-1 card overflow-hidden"></div>
 
     <!-- Status bar -->
-    <div id="status-bar" class="mt-2 px-3.5 py-1.5 bg-sunk border border-line rounded-[6px] flex items-center justify-between text-[13px] text-muted">
+    <div id="status-bar" class="mt-2 px-3.5 py-1.5 bg-sunk border border-line rounded-[6px] flex items-center justify-between text-ui text-muted">
         <div class="flex items-center gap-2">
             <span id="lsp-status" class="flex items-center gap-1.5">
                 <span id="lsp-indicator" class="item-status-dot bg-faint"></span>
diff --git a/templates/error.html b/templates/error.html
index 0e01621..89803e0 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -12,7 +12,7 @@
                 </svg>
             </div>
             <div class="min-w-0">
-                <h2 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-1.5">{{ tr.t("error-title") }}</h2>
+                <h2 class="text-display font-bold text-text mb-1.5">{{ tr.t("error-title") }}</h2>
                 <p class="text-danger font-mono text-sm whitespace-pre-wrap break-words">{{ error_message }}</p>
             </div>
         </div>
diff --git a/templates/menu.html b/templates/menu.html
index 43712dd..1a43753 100644
--- a/templates/menu.html
+++ b/templates/menu.html
@@ -32,7 +32,7 @@
 
         <!-- Title bar with scale and shopping list button -->
         <div class="flex items-start gap-4 mb-1.5">
-            <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:text-2xl">
+            <h1 class="text-display font-bold text-text print:text-2xl">
                 {{ name }}
                 <span class="tag align-middle ml-1 print:hidden">{{ tr.t("recipe-type-menu") }}</span>
             </h1>
@@ -168,7 +168,7 @@ <h3 class="section-label px-0 mt-3.5 mb-1">{{ text }}</h3>
                                         </a>
                                         {% match scale %}
                                         {% when Some with (s) %}
-                                            <span class="text-[12.5px] text-faint">(×{{ s }})</span>
+                                            <span class="text-meta text-faint">(×{{ s }})</span>
                                         {% when None %}
                                         {% endmatch %}
                                     </span>
@@ -208,7 +208,7 @@ <h3 class="section-label px-0 mt-3.5 mb-1">{{ text }}</h3>
                                     </a>
                                     {% match scale %}
                                     {% when Some with (s) %}
-                                        <span class="text-[12.5px] text-faint">(×{{ s }})</span>
+                                        <span class="text-meta text-faint">(×{{ s }})</span>
                                     {% when None %}
                                     {% endmatch %}
                                 </span>
diff --git a/templates/new.html b/templates/new.html
index b72e5ae..d3982f1 100644
--- a/templates/new.html
+++ b/templates/new.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="max-w-xl mx-auto">
-    <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text mb-5">{{ tr.t("new-recipe") }}</h1>
+    <h1 class="text-display font-bold text-text mb-5">{{ tr.t("new-recipe") }}</h1>
 
     {% if let Some(err) = error %}
     <div class="mb-5 card p-3.5 border-l-[3px] border-l-danger">
diff --git a/templates/pantry.html b/templates/pantry.html
index d3e53e8..ffe27fc 100644
--- a/templates/pantry.html
+++ b/templates/pantry.html
@@ -19,12 +19,12 @@
     </div>
 
     <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
-        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("pantry-title") }}</h1>
+        <h1 class="text-display font-bold text-text">{{ tr.t("pantry-title") }}</h1>
 
         {% if !sections.is_empty() %}
         <div class="flex items-center gap-3">
-            <span id="out-of-stock-count" class="text-[12.5px] text-faint tabular-nums"></span>
-            <label class="flex items-center gap-2 text-[13.5px] text-muted hover:text-text cursor-pointer">
+            <span id="out-of-stock-count" class="text-meta text-faint tabular-nums"></span>
+            <label class="flex items-center gap-2 text-ui text-muted hover:text-text cursor-pointer">
                 <input type="checkbox" id="filter-out-of-stock" class="w-4 h-4 accent-[var(--accent)]">
                 <span>{{ tr.t("pantry-show-out-of-stock") }}</span>
             </label>
@@ -37,7 +37,7 @@ <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">{{ tr.
         <svg class="mx-auto h-10 w-10 text-faint mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
         </svg>
-        <h3 class="text-[15px] font-semibold text-text mb-1">{{ tr.t("pantry-no-config") }}</h3>
+        <h3 class="text-body font-semibold text-text mb-1">{{ tr.t("pantry-no-config") }}</h3>
         <p class="text-sm text-muted">{{ tr.t("pantry-create-config") }}</p>
         <a href="{{ prefix }}/preferences" class="mt-4 inline-block text-sm font-medium text-accent-text hover:underline">
             {{ tr.t("pantry-configure") }}
@@ -66,7 +66,7 @@ <h2 class="capitalize">{{ section.name }}</h2>
                      data-low="{% if let Some(low) = item.low %}{{ low }}{% endif %}">
                     <span class="item-status-dot in-stock"></span>
                     <div class="row-name flex-1 min-w-0">
-                        <h3 class="m-0 font-medium text-[14px]">{{ item.name }}</h3>
+                        <h3 class="m-0 font-medium text-body">{{ item.name }}</h3>
                         <!-- .item-display is what the edit form swaps places with.
                              Each field's hook span is always rendered — the save
                              handler reads all four unconditionally — and the
@@ -134,7 +134,7 @@ <h3 class="m-0 font-medium text-[14px]">{{ item.name }}</h3>
     </div>
 
     <div class="mt-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
-        <div class="text-[12.5px] text-faint">
+        <div class="text-meta text-faint">
             {{ tr.t("pantry-total-sections") }} {{ sections.len() }}
         </div>
         <div class="flex flex-wrap gap-1.5">
@@ -152,10 +152,10 @@ <h3 class="m-0 font-medium text-[14px]">{{ item.name }}</h3>
 <!-- Add Item Modal -->
 <div id="add-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
     <div class="card w-full max-w-md mx-4 p-5">
-        <h2 class="text-[16px] leading-tight font-[650] tracking-tight text-text mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
+        <h2 class="text-title font-semibold text-text mb-4">{{ tr.t("pantry-add-pantry-item") }}</h2>
         <form id="add-form">
             <div class="mb-3">
-                <label for="add-section" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-section-label") }}</label>
+                <label for="add-section" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-section-label") }}</label>
                 <select id="add-section" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" required>
                     <option value="">{{ tr.t("pantry-section-select") }}</option>
                     {% if sections.is_empty() %}
@@ -172,23 +172,23 @@ <h2 class="text-[16px] leading-tight font-[650] tracking-tight text-text mb-4">{
                 </select>
             </div>
             <div class="mb-3">
-                <label for="add-name" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-name") }}</label>
+                <label for="add-name" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-item-name") }}</label>
                 <input type="text" id="add-name" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" required>
             </div>
             <div class="mb-3">
-                <label for="add-quantity" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-quantity") }} ({{ tr.t("pantry-optional") }})</label>
+                <label for="add-quantity" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-item-quantity") }} ({{ tr.t("pantry-optional") }})</label>
                 <input type="text" id="add-quantity" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="e.g., 500%g or 2%L">
             </div>
             <div class="mb-3">
-                <label for="add-bought" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-bought-date") }} ({{ tr.t("pantry-optional") }})</label>
+                <label for="add-bought" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-item-bought-date") }} ({{ tr.t("pantry-optional") }})</label>
                 <input type="text" id="add-bought" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="DD.MM.YYYY">
             </div>
             <div class="mb-3">
-                <label for="add-expire" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-expire-date") }} ({{ tr.t("pantry-optional") }})</label>
+                <label for="add-expire" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-item-expire-date") }} ({{ tr.t("pantry-optional") }})</label>
                 <input type="text" id="add-expire" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="DD.MM.YYYY">
             </div>
             <div class="mb-4">
-                <label for="add-low" class="block text-[12.5px] font-medium text-muted mb-1">{{ tr.t("pantry-item-low-threshold") }} ({{ tr.t("pantry-optional") }})</label>
+                <label for="add-low" class="block text-meta font-medium text-muted mb-1">{{ tr.t("pantry-item-low-threshold") }} ({{ tr.t("pantry-optional") }})</label>
                 <input type="text" id="add-low" class="w-full px-2.5 py-2 text-sm border border-line rounded-[6px] bg-surface text-text" placeholder="e.g., 100%g or 2">
             </div>
             <div class="flex justify-end gap-1.5">
diff --git a/templates/recipe.html b/templates/recipe.html
index 99bfc0e..2d77601 100644
--- a/templates/recipe.html
+++ b/templates/recipe.html
@@ -34,7 +34,7 @@
 
         <!-- Title bar with scale and shopping list button -->
         <div class="flex items-start gap-4 mb-1.5">
-            <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text print:text-2xl">
+            <h1 class="text-display font-bold text-text print:text-2xl">
                 {{ recipe.name }}
             </h1>
             {% if scale != 1.0 %}
diff --git a/templates/recipes.html b/templates/recipes.html
index 6dabdd1..a72e599 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -19,7 +19,7 @@
     {% endif %}
 
     <div class="flex items-center justify-between gap-3 mb-4">
-        <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">
+        <h1 class="text-display font-bold text-text">
             {{ current_name }}
         </h1>
         {% if !static_mode %}
@@ -39,10 +39,10 @@ <h1 class="text-[24px] leading-tight font-[650] tracking-tight text-text">
             <div class="flex-1 min-w-0">
                 <div class="flex items-center gap-2.5 mb-1">
                     <span class="text-lg">📋</span>
-                    <h2 class="text-[15px] font-semibold text-text">{{ tr.t("todays-menu-title") }}</h2>
+                    <h2 class="text-body font-semibold text-text">{{ tr.t("todays-menu-title") }}</h2>
                     <span class="text-xs text-faint">{{ menu.date_display }}</span>
                 </div>
-                <p class="text-[13px] text-muted">{{ tr.t("todays-menu-from") }}: {{ menu.menu_name }}</p>
+                <p class="text-ui text-muted">{{ tr.t("todays-menu-from") }}: {{ menu.menu_name }}</p>
             </div>
             <a href="{{ prefix }}/{% if static_mode %}menu{% else %}recipe{% endif %}/{{ menu.menu_path }}{% if static_mode %}.html{% endif %}" class="btn self-start sm:self-center">
                 {{ tr.t("todays-menu-view") }}
@@ -56,7 +56,7 @@ <h2 class="text-[15px] font-semibold text-text">{{ tr.t("todays-menu-title") }}<
     {% endmatch %}
 
     <div id="sort-controls" class="hidden items-center justify-end gap-2 mb-3">
-        <label for="sort-field" class="text-[13px] text-muted">{{ tr.t("sort-by") }}</label>
+        <label for="sort-field" class="text-ui text-muted">{{ tr.t("sort-by") }}</label>
         <select id="sort-field" class="select">
             <option value="name">{{ tr.t("sort-name") }}</option>
             <option value="modified">{{ tr.t("sort-modified") }}</option>
@@ -71,7 +71,7 @@ <h2 class="text-[15px] font-semibold text-text">{{ tr.t("todays-menu-title") }}<
         <a href="{{ prefix }}/directory/{{ item.path }}{% if static_mode %}.html{% endif %}" data-type="directory" data-name="{{ item.name }}" class="recipe-card">
             <span class="recipe-card-icon">📁</span>
             <span class="min-w-0">
-                <h3 class="recipe-card-title">{{ item.name }}</h3>
+                <h2 class="recipe-card-title">{{ item.name }}</h2>
                 {% match item.count %}
                 {% when Some with (count) %}
                 <span class="recipe-card-sub">{{ tr.tn("recipes-count", count) }}</span>
@@ -93,7 +93,7 @@ <h3 class="recipe-card-title">{{ item.name }}</h3>
             <span class="recipe-card-icon">{% if item.is_menu %}📋{% else %}🍽{% endif %}</span>
             {% endmatch %}
             <span class="min-w-0">
-                <h3 class="recipe-card-title">{{ item.name }}</h3>
+                <h2 class="recipe-card-title">{{ item.name }}</h2>
                 <span class="recipe-card-sub">
                     {%- if item.is_menu %}{{ tr.t("recipe-type-menu") }}{% if !item.tags.is_empty() %} · {% endif %}{% endif -%}
                     {%- for tag in item.tags.iter().take(3) %}{{ tag }}{% if !loop.last %} · {% endif %}{% endfor -%}
diff --git a/templates/shopping_list.html b/templates/shopping_list.html
index 63276f2..6b129a5 100644
--- a/templates/shopping_list.html
+++ b/templates/shopping_list.html
@@ -44,7 +44,7 @@
              than in the JS-rendered list so the buttons stay put while the list
              below them re-renders. -->
         <div id="shopping-list-header" class="hidden flex-wrap items-center justify-between gap-3 mb-3">
-            <h2 class="text-[20px] leading-tight font-[650] tracking-tight text-text">{{ tr.t("shopping-title") }}</h2>
+            <h1 class="text-title font-semibold text-text">{{ tr.t("shopping-title") }}</h1>
             <div class="flex items-center gap-1.5">
                 <!-- Split button: the left half copies, the right half opens the
                      checkboxes that decide what the copied text contains. -->
@@ -165,7 +165,7 @@ <h2 class="text-[20px] leading-tight font-[650] tracking-tight text-text">{{ tr.
         <ul class="mt-1 pl-2.5 border-l border-line space-y-0.5">
             ${refs.map(ref => {
                 const refName = ref.split('/').pop();
-                return `<li class="text-[12.5px] text-faint">
+                return `<li class="text-meta text-faint">
                     <a href="{{ prefix }}/recipe/${encodeRecipePath(ref)}" class="hover:text-accent-text hover:underline">${escHtml(refName)}</a>
                 </li>`;
             }).join('')}
@@ -175,7 +175,7 @@ <h2 class="text-[20px] leading-tight font-[650] tracking-tight text-text">{{ tr.
         // Plan/menu entry — show nested recipes
         if (item.recipes) {
             const recipesHtml = item.recipes.map(recipe => {
-                return `<li class="text-[13px] text-muted">
+                return `<li class="text-ui text-muted">
                     <a href="{{ prefix }}/recipe/${encodeRecipePath(recipe.path)}" class="hover:text-accent-text hover:underline">${escHtml(recipe.name)}</a>
                     <span class="text-faint text-xs">×${escHtml(recipe.scale)}</span>
                     ${renderRefs(recipe.included_references || [])}
diff --git a/tests/e2e/navigation.spec.ts b/tests/e2e/navigation.spec.ts
index 14d3782..951b628 100644
--- a/tests/e2e/navigation.spec.ts
+++ b/tests/e2e/navigation.spec.ts
@@ -26,7 +26,7 @@ test.describe('Navigation', () => {
 
     if (count > 0) {
       const firstRecipe = recipeCards.first();
-      const recipeName = await firstRecipe.locator('h3').textContent();
+      const recipeName = await firstRecipe.locator('.recipe-card-title').textContent();
 
       await firstRecipe.click();
       await page.waitForLoadState('networkidle');
@@ -139,7 +139,7 @@ test.describe('Navigation', () => {
     const simpleRecipeCard = page.locator('a[href="/recipe/lamb-chops"]');
     await expect(simpleRecipeCard).toBeVisible();
 
-    const recipeName = await simpleRecipeCard.locator('h3').textContent();
+    const recipeName = await simpleRecipeCard.locator('.recipe-card-title').textContent();
     expect(recipeName).toContain('Sicilian-style Scottadito Lamb Chops');
 
     await simpleRecipeCard.click();