docs: screenshots that regenerate themselves, and eleven of them

They were many rounds behind — no settings, no task detail, no themes, no groups,
no colours, no calendar, no admin pages. The reason is in how they were made:
`tools/shots` needs a running instance and a session cookie pasted in by hand, so
it ran about as often as somebody felt like doing that.

`node scripts/generate-screenshots.js` starts the real binary, creates its own
account, fills it with Danish demo data and photographs eleven surfaces into both
`site/screenshots` and `docs/screenshots`. Nothing to set up and nothing to
remember.

A script rather than a test, for the same reason `generate-icons.js` is one: CI
must never rewrite a tracked binary file.

`tools/shots` stays. It is still the way to photograph an instance that is
already running rather than a fresh one.

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

site/index.html

@@ -466,6 +466,46 @@
 						/>
 						<figcaption>The light theme.</figcaption>
 					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/week.png"
+							alt="Upcoming as a single week: seven columns of days, each holding the tasks due that day."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>A week at a time — so a task can be dragged across a month boundary.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/detail.png"
+							alt="A task open in the detail drawer, with its description, due date, labels, sub-tasks and comments."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>A task, opened.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/themes.png"
+							alt="The settings page showing the five themes as swatches."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>Five themes, all of them measured for contrast.</figcaption>
+					</figure>
+					<figure class="shot">
+						<img
+							src="screenshots/history.png"
+							alt="The instance-wide history page: who did what, in which project, filtered by person and event."
+							width="1400"
+							height="900"
+							loading="lazy"
+						/>
+						<figcaption>What has been done on the server, across every project.</figcaption>
+					</figure>
 				</div>
 			</section>