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 <noreply@anthropic.com>

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,
+  );
+});