The commit diff was the last code surface on the site still rendering as
undifferentiated monospace. Wrap it in a `code[data-lang="diff"]` so the
arborium integration already in `_base.html` picks it up, the same way the
file view is highlighted.

arborium's diff grammar wraps one element per significant line — the
`diff --git` command, the index blob hashes, the `---`/`+++` headers, the
`@@` location, and each added or removed line. Scoping our rules to
`.commit-diff` beats the theme's bare element selectors on specificity, so
the diff reads in the palette's own `ok`/`bad` rather than whichever hues
github-light and github-dark happen to assign to strings and keywords.

Colors only, no tinted line backgrounds: the `+`/`-` prefix carries the
same distinction, and a flat surface suits the page better. With
JavaScript off nothing changes from today — plain text on the code
surface.

Assisted-by: Claude Code

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Rfxp1h5HHy2vE8S9CLXa2

diff --git a/docs/STYLE_GUIDE.md b/docs/STYLE_GUIDE.md
index 57d9542..e1df5c8 100644
--- a/docs/STYLE_GUIDE.md
+++ b/docs/STYLE_GUIDE.md
@@ -212,8 +212,8 @@ PALETTE_INK.dark = {
   links, and the left-rail of code blocks. Nowhere else.
 - All accents are low-chroma so prose still reads quiet. Do not introduce
   saturated hues.
-- `ok`/`bad` are reserved for CI status and conflict markers. Do not use
-  them as decorative color.
+- `ok`/`bad` are reserved for CI status, conflict markers, and diff
+  additions/deletions. Do not use them as decorative color.
 - Hairlines use `rule` between major bands and `rule2` between rows or as
   dotted underlines on links.
 
@@ -362,6 +362,25 @@ overflow: auto;
 
 Inline code: same `code` background, `1px 5px` padding, mono 13px.
 
+### Commit diff
+
+A unified diff is a code block (same surface, same left rail) syntax
+highlighted as `diff` — never as the language of the files it touches.
+Colors come from the palette, not from the highlighter's theme:
+
+| Line | Color |
+|---|---|
+| `diff --git …` | `ink`, weight 500 |
+| `index <old>..<new>` blob hashes | `mutedFaint` |
+| `--- a/…` and removed lines | `bad` |
+| `+++ b/…` and added lines | `ok` |
+| `@@ … @@` hunk location | `muted` |
+
+No tinted line backgrounds — the `+`/`-` prefix carries the distinction
+alongside the color, so the surface stays a plain page. Highlighting is
+progressive enhancement: with JavaScript off the diff renders as plain
+monospace text on the same surface.
+
 ### Keyboard hint (`kbd`)
 
 ```css
diff --git a/quire-server/static/style.css b/quire-server/static/style.css
index f95cbb5..5f65ba6 100644
--- a/quire-server/static/style.css
+++ b/quire-server/static/style.css
@@ -829,9 +829,10 @@ html.dark {
 
 /* ── Arborium syntax highlighting integration ──────────────────── */
 
-/* Left-rail accent only for standalone code blocks, not the file view grid. */
-pre:not(.code-body):has(code[class*="language-"]),
-pre:not(.code-body):has(code[data-lang]) {
+/* Left-rail accent only for standalone code blocks, not the file view grid
+   or the commit diff — both bring their own surface. */
+pre:not(.code-body):not(.commit-diff):has(code[class*="language-"]),
+pre:not(.code-body):not(.commit-diff):has(code[data-lang]) {
   border-left: 2px solid var(--accent) !important;
   background: var(--bg) !important;
   border-radius: 0 !important;
@@ -1284,6 +1285,29 @@ pre code[data-lang] {
   border-left: 2px solid var(--accent);
 }
 
+/* arborium's `diff` grammar wraps one element per significant line:
+   a-v the `diff --git` command, a-co the index blob hashes, a-k deletions
+   and the `---` header, a-s additions and the `+++` header, a-at the `@@`
+   hunk location. The arborium theme reaches these with bare element
+   selectors, so scoping ours to .commit-diff wins on specificity and the
+   diff reads in quire's palette whichever theme is loaded. The `+`/`-`
+   prefix carries the same distinction as the color. */
+.commit-diff a-v {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.commit-diff a-co { color: var(--mutedFaint); }
+
+.commit-diff a-at { color: var(--muted); }
+
+.commit-diff a-s { color: var(--ok); }
+
+.commit-diff a-k { color: var(--bad); }
+
+/* Nothing inside the diff gets its own surface. */
+.commit-diff * { background: transparent; }
+
 /* ── Repo list ──────────────────────────────────────────────────── */
 
 .repo-list-page {
diff --git a/quire-server/templates/commit.html b/quire-server/templates/commit.html
index 21e613c..93c184c 100644
--- a/quire-server/templates/commit.html
+++ b/quire-server/templates/commit.html
@@ -65,7 +65,7 @@
     </div>
 
     {% if !diff.is_empty() %}
-    <pre class="commit-diff">{{ diff }}</pre>
+    <pre class="commit-diff"><code data-lang="diff">{{ diff }}</code></pre>
     {% endif %}
   </article>