@@ -224,7 +224,7 @@ Every matrix uses `fail-fast: false`, so a Windows failure never hides the macOS
 - End-to-end selectors read the text and roles already on screen. No `data-testid` — the visible copy is the contract, and renaming a button is a change worth noticing.
 - Journeys run in the `en-US` locale, the source language, so no translation catalog loads and they read English text as written. The exception is `tests/e2e/journeys/i18n.spec.js`, which launches with `lang: 'en-XA'` (Chromium's pseudo-locale) and fails on any visible text that did not go through `__()`. See [Translatable strings](CONTRIBUTING.md#translatable-strings).
 - What is on screen is named once, in `tests/e2e/helpers/ui.cjs`, for the journeys, the other end-to-end specs and `scripts/screenshots/` alike, so renaming a button or rebuilding a card is one change. It holds every control that more than one of those files reaches, and the locators that find a part of the screen rather than something to press: the rendered app, an entry of the sites list, what a window with no site says, the open site's heading, a card, the work-item card with its heading and its ticket's number, a ticket's row, the question asked before a deletion, and the window's confirmations. A sentence one journey asserts, a button only one journey presses, and a selector only one file needs stay in that file: they are what it is about.
-- No test reads a component's source, the `.jsx` under `src/renderer/`, as text. A test that greps the component for a call, a literal or the order of two strings pins the file rather than the screen: it goes red when the code moves and stays green when the screen is wrong. What is on the page and where, a journey asserts, with order read as document order rather than from bounding boxes (the page scrolls as cards appear). How a component is allowed to be written, a lint rule asserts: `react-hooks/refs` is on for the renderer for that reason, and so are this repository's own two, `toolkit/no-hardcoded-colors` and `toolkit/no-inline-styles`, now that the window is painted from classes in `src/renderer/shell.css` with the design system's tokens. The first reports a hex colour or a colour function written in a string, and the second a `style` attribute on a JSX element. Neither sees a colour's name, or a style that reaches an element some other way; each rule's header says what it does not read. The repository's rules are in `eslint-rules/`, and `tests/unit/eslint-rules.test.cjs` runs each over code that must pass and code that must not, since a rule that stopped reporting would turn nothing else red.
+- No test reads a component's source, the `.jsx` under `src/renderer/`, as text. A test that greps the component for a call, a literal or the order of two strings pins the file rather than the screen: it goes red when the code moves and stays green when the screen is wrong. What is on the page and where, a journey asserts, with order read as document order rather than from bounding boxes (the page scrolls as cards appear). How a component is allowed to be written, a lint rule asserts: `react-hooks/refs` is on for the renderer for that reason, and so are this repository's own two, `toolkit/no-hardcoded-colors` and `toolkit/no-inline-styles`, now that the window is painted from classes in `src/renderer/shell.css` with the design system's tokens. The first reports a hex colour or a function that takes a colour's channels, `rgb()` and the like, written in a string, and the second a `style` attribute on a JSX element. Neither sees a colour's name, or a style that reaches an element some other way; each rule's header says what it does not read. The repository's rules are in `eslint-rules/`, and `tests/unit/eslint-rules.test.cjs` runs each over code that must pass and code that must not, since a rule that stopped reporting would turn nothing else red.
 - Journeys mark each assertion as an **invariant** (must hold under any model of how work is stored) or a **characterisation** (true because of how the app stores things today). A red invariant is a bug; a red characterisation is a prompt to read it and update it deliberately.
 - A journey that needs something only a running process would say, a mail caught or a server's address, says it itself: `webContents.send` from `app.evaluate`, on the channel and in the shape the real sender uses. Check the payload against both ends, the handler in `src/preload.js` and the place `src/main.js` sends it, and say in the test what the stand-in leaves out, such as the store write the real sender makes first. To assert that the page did *not* react, wait until it has heard: after the telling, ask the main process one more question from the page (`window.api.getSitesWithMeta()` is a plain read) and assert once that answer is back. An absence read before then passes whatever the app does.
 - A bugfix's test must fail on the old code. A test written after the fix pins whatever the current behaviour is, rather than the correction.
 
@@ -16,20 +16,21 @@
 //
 // A rule of its own and not a selector given to `no-restricted-syntax`, which
 // could find the same nodes: the message names what was found, and the two
-// patterns are tested where they are written.
+// patterns are tested by themselves, through `hardcodedColor`.
 
 // `#` and then 3, 4, 6 or 8 hex digits, and no more of a word on either side.
 // The lengths are CSS's own, so a Trac ticket's five digits are not a colour.
 // A reference of three or four digits written out in a string is one, as far
 // as this can tell: `#607` is a grey. Those are put together from the number
-// (`#%d`), which is how a translated string has to be built anyway.
+// (`#%d` in a translated string, `#${ n }` in a template), which is how the
+// renderer writes them already.
 // A `#` that follows a word, an `&` or a `/` is a fragment or an entity.
 const HEX_COLOR = /(?<![\w&/])#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})(?![\w-])/i;
 
 // The functions that take a colour's channels, as part of no longer word.
 // `color-mix()` is not among them: what it mixes is given to it, and can be
 // tokens.
-const COLOR_FUNCTION = /(?<![\w-])(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\(/i;
+const COLOR_FUNCTION = /(?<![\w-])(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|device-cmyk)\(/i;
 
 /**
  * The colour a string spells out, if it spells one.
@@ -59,14 +60,15 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
 	},
 	create( context ) {
 		const check = ( node, text ) => {
-			// A number, a pattern, and a template's text that cannot be read as
-			// a string are not strings.
+			// A number and a pattern are literals too, and are not strings.
 			if ( typeof text !== 'string' ) return;
 			const color = hardcodedColor( text );
 			if ( color ) context.report( { node, messageId: 'hardcoded', data: { color } } );
 		};
 		return {
 			Literal: ( node ) => check( node, node.value ),
+			// The text as the program gets it. Where an escape cannot be read
+			// there is none, and nothing to look in.
 			TemplateElement: ( node ) => check( node, node.value.cooked ),
 		};
 	},
 
@@ -13,10 +13,12 @@
 // It reads the attribute as written on a JSX element, and nothing else: not a
 // `style` handed over in a spread, and not one set on an element from an
 // effect. A selector given to `no-restricted-syntax` could find the same
-// attribute; this is a rule of its own so that it is tested beside the other
-// one, and says why in its own words. A value that can only
-// be known while the app runs, a width measured from something, has no class
-// to be; that one is disabled where it stands, with the reason beside it.
+// attribute and say the same thing; this is a rule of its own so that it is
+// tested beside the other one.
+//
+// A value that can only be known while the app runs, a width measured from
+// something, has no class to be; that one is disabled where it stands, with
+// the reason beside it.
 
 module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
 	meta: {
@@ -33,7 +35,9 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
 	create( context ) {
 		return {
 			JSXAttribute( node ) {
-				if ( node.name.type === 'JSXIdentifier' && node.name.name === 'style' ) {
+				// An attribute in a namespace has a name made of two; its `name`
+				// is not this string.
+				if ( node.name.name === 'style' ) {
 					context.report( { node, messageId: 'inline' } );
 				}
 			},
 
@@ -40,13 +40,17 @@ tester.run( 'no-hardcoded-colors', rules[ 'no-hardcoded-colors' ], {
 		// A fragment and an entity are not colours, whatever their letters.
 		"const link = 'https://example.org/page#fade';",
 		"const anchor = 'https://example.org/handbook/#add';",
+		"const section = '#bad-request';",
 		"const entity = '&#128;';",
-		// A word that only ends like a function.
+		// A word that only ends like a function, and a name that goes on.
 		"const label = 'Collab(tm)';",
+		"const own = 'my-rgb(1, 2, 3)';",
+		// A function's name is one only in front of its bracket.
 		"const mixed = 'color-mix(in oklab, var(--wpds-color-stroke-surface-warning), transparent)';",
-		// The text of a template that cannot be read as a string is not one.
+		// A template is read as the program gets it, and where an escape
+		// cannot be read the program gets nothing.
 		'const raw = String.raw`\\unicode #fff`;',
-		// A number is not a string, a comment is not code, and a pattern that
+		// A comment is not code, and only a string is read: a pattern that
 		// looks for a colour does not paint with one.
 		'const count = 0xfff; // #fff',
 		'const looksForOne = / #fff$/;',
@@ -64,6 +68,8 @@ tester.run( 'no-hardcoded-colors', rules[ 'no-hardcoded-colors' ], {
 		{ code: "const note = 'Fixed in #607';", errors: [ { messageId: 'hardcoded', data: { color: '#607' } } ] },
 		{ code: "const wash = 'rgba(46,160,67,0.18)';", errors: [ { messageId: 'hardcoded', data: { color: 'rgba(…)' } } ] },
 		{ code: "const tint = 'HSL(210 50% 40%)';", errors: [ { messageId: 'hardcoded', data: { color: 'HSL(…)' } } ] },
+		{ code: "const wide = 'color(display-p3 1 0.5 0)';", errors: [ { messageId: 'hardcoded', data: { color: 'color(…)' } } ] },
+		{ code: "const ink = 'device-cmyk(0 0 0 1)';", errors: [ { messageId: 'hardcoded', data: { color: 'device-cmyk(…)' } } ] },
 		{ code: 'const edge = `2px solid #3858e9`;', errors: [ { messageId: 'hardcoded' } ] },
 		{ code: 'const edge = `${ width }px solid oklch(60% 0.2 250)`;', errors: [ { messageId: 'hardcoded' } ] },
 		{ code: 'const node = <p className="x" title="#fff">text</p>;', errors: [ { messageId: 'hardcoded' } ] },