fix(settings): give Settings pills room and the outlined buttons' size

Theme and Timeline design pills sat 1px under their help text and, in
Relaxed, in a dark well at 12px/32px beside 13px/37px outlined buttons,
which read as off-centre. Under a help line they now sit 16px below it,
like the scheme choices, and in Settings take the buttons' type, height
and a hairline tray.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

docs/DESIGN.md

@@ -638,7 +638,11 @@ legend on the same baseline as "Next: …".
   (interface, theme, scheme, urgency colours, default view, game order, timeline design, focus bar,
   checklist group), Your own events and games, Backup (tiers plus a manual "Your backups" list), and
   per-game Setup / Codes / About. Switching to another game keeps the open tab (2026-10-20, owner):
-  Codes in one game opens Codes in the next.
+  Codes in one game opens Codes in the next. Segmented pills under a help line sit 16px below it,
+  as the scheme choices do; flush against the text they read as part of the sentence. In Settings
+  the pills take the neighbouring outlined buttons' 13px type and 37px height, and in Relaxed a
+  hairline tray instead of the Checklist's dark well (2026-10-20, owner): a well among outlines
+  read as text floating off-centre in a hole.
 - **Redeem codes (2026-10-18, owner).** A game's Codes tab lists the codes still to use first. A
   code redeemed on every server the reader plays, or past its stated expiry, is greyed and struck
   through in a "Redeemed or expired" section below, with its Redeemed box still there to undo. A

src/client/redesign.css

@@ -1896,6 +1896,31 @@ textarea {
   flex-wrap: wrap;
   margin-top: 16px;
 }
+/* Pills under an explanation get the scheme choices' breathing room; flush
+   against the text they read as part of the sentence. */
+.settings-group .help + .segmented {
+  margin-top: 16px;
+}
+/* In Settings the pills sit beside outlined buttons and selects, so they take
+   those controls' type and height, and in Relaxed a hairline tray rather than
+   the dark well the Checklist's sort pills use: a well among outlines reads as
+   text floating in a hole. */
+.settings-group .segmented button {
+  font-size: 13px;
+  line-height: 1.6;
+  padding: 7px 12px;
+  min-height: 0;
+}
+:root[data-interface="relaxed"] .settings-group .segmented {
+  background: transparent;
+  border: 1px solid var(--color-hairline);
+  border-radius: 8px;
+}
+:root[data-interface="relaxed"] .settings-group .segmented button {
+  padding: 4px 12px;
+  min-height: 0;
+  border-radius: 5px;
+}
 .scheme-option {
   border: 1px solid var(--color-hairline);
   padding: 10px 14px;

test/appearance-ui.test.tsx

@@ -24,3 +24,25 @@ test("both interface choices, Custom schemes and routine disclosure are availabl
   ])
     expect(html).toContain(label);
 });
+
+test("pills under a settings explanation sit as far below it as the scheme choices do", async () => {
+  const css = await Bun.file(
+    new URL("../src/client/redesign.css", import.meta.url),
+  ).text();
+  const scheme = /\.scheme-choices\s*\{[^}]*margin-top:\s*(\d+px)/s.exec(
+    css,
+  )?.[1];
+  const pills =
+    /\.settings-group \.help \+ \.segmented\s*\{[^}]*margin-top:\s*(\d+px)/s.exec(
+      css,
+    )?.[1];
+  expect(scheme).toBe("16px");
+  expect(pills).toBe(scheme);
+  // And they take the outlined buttons' type and, in Relaxed, a hairline tray.
+  expect(css).toMatch(
+    /\.settings-group \.segmented button\s*\{[^}]*font-size: 13px/s,
+  );
+  expect(css).toMatch(
+    /:root\[data-interface="relaxed"\] \.settings-group \.segmented\s*\{[^}]*border: 1px solid var\(--color-hairline\)/s,
+  );
+});