Similar pages: the overlap drawn to scale, and a share bar on every pair

[xuelink]

Checked /tools/similar and all 55 pair pages.

What was missing: each pair page is about one number, how many of each language's 2,000 commonest words are the same, but the header showed only two flag discs and a "+". The index is sorted by that number and never showed it as anything but text.

Changes

• Pair pages: a new PairOverlap shows two circles, each one language's 2,000 commonest words. They overlap by exactly the shared share: overlapDistance solves the lens-area equation, so the drawing is to scale. Under it: "167 of the 2,000 commonest words in each are the same — 8% of either list." Bosnian–Serbian (94%) is nearly one circle; Albanian–Croatian (1%) barely touches. On phones the circles take the full row and the names sit under them. The drawing is hidden from screen readers because the caption carries the number.
• Index: every row now has a bar showing its share, all on the same scale, so the sorted list reads as a bar chart: three pairs that are nearly one language, then a long tail.
• Grey text: the table header, rank numbers and the language code before each IPA moved from text-tertiary to text-quiet, per DESIGN.md.

Checks

• All 55 pair pages at 320px: no page overflow, nothing sticking out of the diagram, and no word cut off in the table.
• All 55 at 768px, plus two at 1280px: the language names beside the circles don't wrap.
• Light and dark mode both checked.
• svelte-check shows 0 errors; eslint and prettier are clean.

🤖 Generated with Claude Code