# Agent brief — CFS page INSPECTION (overnight 2026-06-17)

You inspect ONE page against its Figma design, **section by section, desktop FIRST (fully,
including hover for each section), THEN mobile**. This is slow on purpose. Do NOT skim. Fix
clear defects you find; flag ambiguous ones in the accuracy doc.

Read FIRST and obey:
- /home/mrwick/coding/fs/cfs/docs/_agent-reconcile-brief.md  (browser-queue protocol + per-engine
  cheat sheet — ACQUIRE a slot before any rendering, RELEASE at end)
- /home/mrwick/coding/fs/cfs/.claude/skills/reconcile-section/SKILL.md  (coordinate-measurement law)

## The order (NON-NEGOTIABLE)
1. **Desktop, section by section, top to bottom.** `get_node_outline(<desktop frame>)`, sort
   children by bbox.y → that is your section list. For EACH section, before moving to the next:
   - pull the section IR (per-element bbox, fill hex, stroke, radius; per-RUN text fontFamily,
     size, weight, case, decoration, letterSpacing, color);
   - measure OUR render at 1440 (getBoundingClientRect + getComputedStyle), normalize to Figma px;
   - compare the NUMBERS; record matches and deltas;
   - **hover/interaction for THAT section now** — for every interactive element (button, card,
     link, tab, accordion) find its hover variant IR (reactions → get_variant_set → diff), TRIGGER
     the hover/click in the browser, read computed style/rect, confirm each delta fires;
   - fix clear defects; re-measure to confirm the fix.
   Only then move to the next section. Do not batch sections.
2. **THEN mobile.** Switch viewport to 393px and `get_node_outline(<mobile frame>)`. Repeat the
   same per-section discipline against the MOBILE frame (it is often a different structure — pills
   vs grid, stacked, colour/size flips — measure against the mobile IR, not the desktop values).
   Confirm zero horizontal overflow (`document.documentElement.scrollWidth <= 393`).

## What each round emphasizes (still do all four lenses every round; emphasis differs)
- **Round 1 — static & layout:** geometry — bbox x/y/w/h, section order, spacing/gaps, padding,
  radius, alignment, dimensions, overflow. Per section desktop then mobile.
- **Round 2 — fonts & images:** every text node's fontFamily/size/weight/case/letterSpacing/
  line-height/color per RUN vs IR (catch Lato-vs-Poppins, TITLE-case, weight splits). Every image:
  correct SUBJECT vs Figma (not a stale/placeholder where the design specifies a real photo),
  object-fit, dimensions; pull the real fill with get_image_to_disk if wrong.
- **Round 3 — hover & interactions:** exhaustively trigger every hover/active/click state and tab/
  accordion; confirm each IR delta fires via computed style. Round 3 should find little if R1/R2
  did their job — that's the point.

## Output
- Fix clear defects in `html/<page>.html` (+ css/custom.css if needed). Keep `<p>` bare.
- Append a per-section findings table to `docs/2026-06-17-reconcile-accuracy.md` under the page's
  heading: `### Inspection round N (<page>) — <emphasis>` with section | checked | result | fixed.
- Commit fixes. Return a concise summary: sections inspected, defects fixed, residuals/questions.
- NEVER eyeball a screenshot to derive a measurement. IR + DOM rects only. State facts as facts.