The rendered rules measure what rendered: the line instead of the box that holds it, the space around the text instead of the declared padding, gray by chroma at its own lightness, the AI palette by two tell hues rather than one accent, and the eyebrow named as the element its own design document declares

Five browser rules were reporting something other than what the reader sees,
and a review that charges those numbers is charging noise.

- `line-length` measured `rect.width / (fontSize * 0.5)`, the box's capacity.
  A paragraph in a 1022px column whose text stops at 571px was charged 142
  characters a line it never rendered. The probe now hands back the client
  rects of the direct text one per line box (`direct_text_line_rects`), the
  characters divide between the lines in proportion to the ink each carries,
  and the charge needs more than one long line: the harm named is the eye
  tracking back to the start of the next line, which takes a column to do.
- `cramped-padding` read the declared padding. A 44px control with
  `padding: 0 16px` and a flex-centred label has 12px of air above the label
  and was charged "0px vertical padding"; the measurement is now the inset
  between the rendered text and the inside of the border box. Its wrapper half
  read a text-bearing child's border box the same way, so a `<td>` that fills
  its table and insets its own text counted as flush; it reads the text now.
- `gray-on-color` called anything under 0.85 relative luminance gray, which
  takes in every off-white: `#e8edf2` measures 0.84 there and 0.93 as
  lightness. Gray is now low chroma at the lightness the ink actually sits at
  (saturation, which is chroma normalized for lightness) and neither of the
  two neutral inks a coloured surface carries. The contrast check beside it is
  untouched, and the recorded vectors still pass.
- `ai-color-palette` charged every hue between 160° and 200° on a dark ground
  as neon, which lit one ordinary teal accent 18 places on a page with nothing
  wrong with it. A gradient in a tell hue is still the pattern on its own;
  flat neon ink on near-black waits for a second tell hue to turn up somewhere
  on the page, because one saturated accent on a dark system is an accent.
- `kicker-above-heading` reported against `body`, so a charged row had nothing
  to point at, and it fired on eyebrows a design document documents. It names
  the eyebrow element now, and stands down where the repository's DESIGN.md
  declares the class by name — the prose's backticked class selectors travel
  on the design-system config the colour and radius rules already read.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LQBUunp8QttxZqihybNmtL

browser-bundle/10-probe.js

@@ -46,6 +46,24 @@ function __rectArray(r) {
   return [r.x, r.y, r.width, r.height, r.top, r.right, r.bottom, r.left];
 }
 
+// The client rects of an element's non-blank direct text nodes, one per line
+// box, in document order. Both text-rect probes read the page through this:
+// the union one merges them, the line one hands them over as they are.
+function __textLineRects(el) {
+  const node = __el(el);
+  const rects = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType !== 3 || !(child.textContent || '').trim()) continue;
+    const range = document.createRange();
+    range.selectNodeContents(child);
+    for (const rect of range.getClientRects()) {
+      if (rect.width >= 1 && rect.height >= 1) rects.push(rect);
+    }
+    range.detach?.();
+  }
+  return rects;
+}
+
 const __impeccableDom = {
   document_element() { return __intern(document.documentElement); },
   body() { return __intern(document.body); },
@@ -181,17 +199,7 @@ const __impeccableDom = {
   // getDirectTextRect(el) from the JS driver: union of the client rects of
   // the element's non-blank direct text nodes.
   direct_text_rect(el) {
-    const node = __el(el);
-    const rects = [];
-    for (const child of node.childNodes) {
-      if (child.nodeType !== 3 || !(child.textContent || '').trim()) continue;
-      const range = document.createRange();
-      range.selectNodeContents(child);
-      for (const rect of range.getClientRects()) {
-        if (rect.width >= 1 && rect.height >= 1) rects.push(rect);
-      }
-      range.detach?.();
-    }
+    const rects = __textLineRects(el);
     if (rects.length === 0) return [];
     const left = Math.min(...rects.map(r => r.left));
     const top = Math.min(...rects.map(r => r.top));
@@ -199,4 +207,13 @@ const __impeccableDom = {
     const bottom = Math.max(...rects.map(r => r.bottom));
     return [left, top, right - left, bottom - top, top, right, bottom, left];
   },
+  // The same rects, unmerged: getClientRects() returns one per line box, so
+  // this is the element's text line by line, flattened into eights.
+  direct_text_line_rects(el) {
+    const out = [];
+    for (const r of __textLineRects(el)) {
+      out.push(r.left, r.top, r.width, r.height, r.top, r.right, r.bottom, r.left);
+    }
+    return out;
+  },
 };