Design: the looks page is built from the design system, and its look-* classes leave §5d #3221

The Look card is now built from one design-system component, and all 15 .look-* classes and their rules are gone from src/style/ and from the §5d register in docs/DESIGN.md.

The component. docs/DESIGN.md §5 gets a new look row:

• .look is the framed picture. Its size comes from data-slot: phone, desktop, thumb or now.
• .looks is a strip of pictures. data-compare puts the "before · main" and "after · #pull" sides next to each other.
• The rules moved from style/content.ts to style/components.ts (sizes are unchanged):

- phone 200px; desktop flexible up to 1280px; thumb 30×40, showing the top of the picture; "now" 168px. - Pictures stack under 640px. - Every picture still carries its own width and height, so nothing shifts when it loads.

Markup (src/web/pages/looks.ts):

• Each page's group is a <section class="stack stack-tight"> and the card body is a .stack. That adds a small gap between groups, which used to sit flush.
• The "at sha · time" line is a plain <p class="muted small"> instead of an inline-flex span.
• An attached picture is a <figure data-slot=…> in the strip.
• The thumbnail used on asks (lookThumb) and the studio's "how it looks now" (lookNow) use .look with thumb and now.
• The unstyled hook classes look-page, look-group, look-before, look-after and look-nobefore are dropped. So is look-card, so the card head's gap goes from 10px to the card's usual 8px.

Small differences against main:

• Every strip now wraps when it runs out of room. Before, only the before/after sides and the attachments wrapped.
• An attached desktop picture starts at 320px wide instead of 200px.

No information is lost. I haven't made the before/after screenshots in light and dark; this pull's preview should show them.

Tests changed — only test/looks.test.ts, because it matched the old class names:

• class="look-now" → class="look" data-slot="now"
• class="look look-phone" → class="look" data-slot="phone"
• the page labels no longer carry look-page
• the per-page split now splits on <section instead of look-group

Test results:

• The type check is clean.
• test/design-lint.test.ts, test/design-audit.test.ts and test/design-map.test.ts pass with the smaller register.
• The web-ui, studio, studio-changes, asks-rank, pulls, attach-look, variants and asks-expiry suites pass.
• In test/looks.test.ts, "a real capture through the grant door" and "a dark capture is truly dark" fail in this sandbox. They fail the same way on unchanged main, because they need a real Chromium; the check on this push will show whether they pass there.

To try it, open a pull that has a preview and look at its Look card in light and dark, at desktop width and under 640px.

🤖 Generated with Claude Code

Closes #3198

The Look card is now built from one design-system component, and all 15 .look-* classes and their rules are gone from src/style/ and from the §5d register in docs/DESIGN.md.

The component. docs/DESIGN.md §5 gets a new look row:

• .look is the framed picture. Its size comes from data-slot: phone, desktop, thumb or now.
• .looks is a strip of pictures. data-compare puts the "before · main" and "after · #pull" sides next to each other.
• The rules moved from style/content.ts to style/components.ts (sizes are unchanged):

- phone 200px; desktop flexible up to 1280px; thumb 30×40, showing the top of the picture; "now" 168px. - Pictures stack under 640px. - Every picture still carries its own width and height, so nothing shifts when it loads.

Markup (src/web/pages/looks.ts):

• Each page's group is a <section class="stack stack-tight"> and the card body is a .stack. That adds a small gap between groups, which used to sit flush.
• The "at sha · time" line is a plain <p class="muted small"> instead of an inline-flex span.
• An attached picture is a <figure data-slot=…> in the strip.
• The thumbnail used on asks (lookThumb) and the studio's "how it looks now" (lookNow) use .look with thumb and now.
• The unstyled hook classes look-page, look-group, look-before, look-after and look-nobefore are dropped. So is look-card, so the card head's gap goes from 10px to the card's usual 8px.

Small differences against main:

• Every strip now wraps when it runs out of room. Before, only the before/after sides and the attachments wrapped.
• An attached desktop picture starts at 320px wide instead of 200px.

No information is lost. I haven't made the before/after screenshots in light and dark; this pull's preview should show them.

Tests changed — only test/looks.test.ts, because it matched the old class names:

• class="look-now" → class="look" data-slot="now"
• class="look look-phone" → class="look" data-slot="phone"
• the page labels no longer carry look-page
• the per-page split now splits on <section instead of look-group

Test results:

• The type check is clean.
• test/design-lint.test.ts, test/design-audit.test.ts and test/design-map.test.ts pass with the smaller register.
• The web-ui, studio, studio-changes, asks-rank, pulls, attach-look, variants and asks-expiry suites pass.
• In test/looks.test.ts, "a real capture through the grant door" and "a dark capture is truly dark" fail in this sandbox. They fail the same way on unchanged main, because they need a real Chromium; the check on this push will show whether they pass there.

To try it, open a pull that has a preview and look at its Look card in light and dark, at desktop width and under 640px.

🤖 Generated with Claude Code