feat(screenshots): cropped shots, sizes for the site, a site check

- shots.py crops to a region (clip) or to what one or more elements cover
  (element, pad), per-shot viewport; capture.py writes the published sizes to
  src/data/screenshots.json so the page reserves the right space.
- anonymize.py no longer empties secrets that netOrk compares with each other
  (Wi-Fi keys on an SSID against the key read from the access point). Emptying
  them invented passphrase "drift" that never existed; a keyed hash keeps equal
  equal, reverses nothing, and its key lives for one run.
- scripts/check/site.py checks the built site in both languages at four widths:
  sideways overflow, one h1, images with alt and size, console errors, requests
  to other origins, links to unknown routes, old-URL redirects, language
  detection, and word counts against the budgets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

scripts/screenshots/shots.py

@@ -21,9 +21,15 @@ class Shot:
     wait_for: str = "main"
     mask: list[str] = field(default_factory=list)
     full_page: bool = False
-    # Crop height in CSS pixels; None keeps the viewport height.
-    height: int | None = None
-    # Width of the published WebP in pixels (the capture is 3200 wide).
+    # Crop to a region (x, y, width, height in CSS px of the viewport) ...
+    clip: tuple[int, int, int, int] | None = None
+    # ... or to one element, plus `pad` px around it. Cropping shows less of a
+    # real screen; it never changes what is on it.
+    element: str | list[str] | None = None  # several: crop to what they cover together
+    pad: int = 16
+    # Viewport for this shot, (width, height) in CSS px; default in capture.py.
+    viewport: tuple[int, int] | None = None
+    # Width of the published WebP in pixels (captures are taken at 2x).
     width: int = 1600
     # Selectors clicked in order before the shot, first match each. Only for
     # controls that change the view (filters, tabs); the API guard in
@@ -31,18 +37,26 @@ class Shot:
     clicks: list[str] = field(default_factory=list)
 
 
+# The drift comparison on a device page: the summary line ("… (42 compared)") down to
+# the end of the table. The card around it stretches to the window height.
+DRIFT_CARD = ["xpath=//*[contains(text(), 'compared)')]", "xpath=//table[.//th[contains(., 'Expected')]]"]
+
 SHOTS: list[Shot] = [
-    Shot("devices", "/devices", width=2400),
-    Shot("device-detail", "/devices/{ap}#networking/interfaces"),
-    Shot("vlans", "/vlans"),
-    Shot("device-security", "/devices/{server}#security/assessment"),
-    Shot("vulnerabilities", "/vulnerabilities"),
-    Shot("dashboard", "/"),
+    # Home hero: an access point checked against its profile, wide and short.
+    Shot("drift", "/devices/{ap}#drift", wait_for="main table", element=DRIFT_CARD,
+         pad=28, viewport=(1440, 900), width=2400),
+    # Phones: the same finding from "Parameter" to the status badge, readable at 390px.
+    Shot("drift-narrow", "/devices/{ap}#drift", wait_for="main table",
+         element=["xpath=//th[contains(., 'Parameter')]", "xpath=//th[contains(., 'Actual')]",
+                  "xpath=//tbody//td[contains(., 'Remote Syslog')]",
+                  "xpath=//tbody//span[contains(., 'Incomplete')]",
+                  "xpath=//tbody//*[starts-with(normalize-space(text()), 'Set this field')]"],
+         pad=16, viewport=(1180, 900), width=1200),
+    Shot("vulnerabilities", "/vulnerabilities", clip=(256, 40, 1344, 620), width=2400),
     # Background polls drown out what people did: filter the scheduler out,
     # the way a reader would (click a source badge, then flip it to exclude).
-    Shot("audit-log", "/audit-log", clicks=[
+    Shot("audit-log", "/audit-log", clip=(256, 40, 1344, 560), width=2400, clicks=[
         "tbody td >> text=scheduler",
         "button[title='Click to toggle include/exclude']",
     ]),
-    Shot("service-checks", "/monitoring/checks"),
 ]