# Read the combined image and name every difference

The previous pass built the board. This is reading it. Before anyone claims the version being built
matches the version it is copying, someone — a person, or a model looking at the picture rather than the
markup — reads the combined image and names every difference an ordinary visitor would notice.

**Page height is a smoke alarm. It is never the finding.** A page can be exactly the right height and
wrong in every band, or a hundred pixels short for a reason nobody cares about.

Commands assume a folder named `beargrassai` on the machine running them.

---

## The two words

**REFERENCE** — the version being matched. **CANDIDATE** — the version being built. The work names which
is which; do not assume the reference is a live site.

---

## What you are while you run this

A cold visitor with two windows open, reference on the left, candidate on the right, on one picture. You
did not build either one. You do not stop at "shorter" or "close enough."

**You fail closed.** Any obvious visible difference means this page is not ready to show anyone.

---

## What you may read, and what does not count

You may read:

- `pair-shots/sidebyside__<page>.png` — the combined image, reference left
- `sidebyside-gallery.html` — for scrolling through them
- `sidebyside-manifest.json` — how many pairs, how many unpaired, which folders

**Not proof:** folders of single-side pictures, counts of elements in the markup, page height on its own.

---

## Do it

**1. Open the list first.** Confirm the number of pairs, that nothing is unpaired, and — this matters —
**that the two sides are not swapped.** The reference is the thing being matched. Getting this backwards
produces a confident review of the wrong direction.

**2. For each page, walk it top to bottom.** For every horizontal stripe of the page, ask: same on both
halves?

| part of the page | what to look at |
|---|---|
| Header | Logo, order of the navigation, colours, which item is marked as current |
| Opening block | How the image is cropped, any overlay, the small label above the heading, the weight of the heading, the buttons |
| Body | Alignment, line length, sections present or absent |
| Grids | Number of columns, images present, side by side or stacked |
| Forms | Fields, labels, the submit button |
| Footer | Columns, icons, credits |
| Leaks | Sign-in walls, an empty main area, "coming soon" notes, leftover operator text |

**3. Write concrete lines.** Every finding names an object and both sides:

- "Reference body text is centred; candidate is left-aligned."
- "Reference has an outlined button; candidate has a blue underlined link."
- "Candidate adds a small label above the heading; the reference has none."

**Not acceptable as a finding:** a pixel height, "close enough", "looks mostly fine", "density residual".

**4. Score each page** — HELD, FIX FIRST, or FAILED. **5. Score the set:** the worst page decides it.

---

## What good looks like

Every page in scope has a written list of differences, or an explicit line saying there are none that a
visitor would notice. Someone reading your report can find each difference in the image without you
there to point at it. And the set's score is the worst page's score, not an average.

## Definition of done

1. The list was opened; pairs counted; unpaired confirmed zero; sides confirmed not swapped.
2. Every page in scope has been read as an image.
3. Every page has a difference list, or an explicit "no difference a visitor would notice".
4. Every difference names an object and both sides.
5. Every page has a score, and the set has the worst page's score.
6. The report carries three things, or it is not a verdict:
   - the path to `sidebyside-manifest.json`
   - the paths to the combined images used
   - the path to this write-up, with the per-page difference lists

**Missing any of those three means this is not a pass.** "Forms have inputs", "the height is close", and a
look at single-side pictures do not clear this gate.

## Refuse these

- Reading single-side pictures instead of the combined image
- Declaring a match because the heights are close
- Stopping at an impression instead of naming the thing that changed
- Softening an obvious difference into "polish"
- Doing the fixing here. This pass finds and records. Fixing is the next pass, one stripe at a time