fix(ui): granular sleep sources, viewport-safe tour, one aligned settings language

A night with coarse apple-health samples next to granular watch data
showed only awake and asleep — the per-session source pick now prefers
the source that knows its stages. Tour popovers clamp into the
viewport, wrap their footer and fall back to a bottom sheet on narrow
screens. Settings and admin sections share one alignment rule — icon
column left, everything else flush on the content column — with neutral
header icons, no duplicated section titles under the shell heading, and
every select on the account-style idiom with a visible chevron. The
dashboard's customize icon matches insights, the target-settings link
leaves the home charts, and the mood heatmap adopts the damped fills
the other mood charts already use.

src/components/settings/api-section.tsx

@@ -43,7 +43,7 @@ export function ApiSection() {
       <header className="space-y-1">
         <h1
           id="settings-section-api-title"
-          className="text-2xl font-semibold tracking-tight"
+          className="sr-only"
         >
           {t("settings.sections.api.title")}
         </h1>
@@ -262,7 +262,7 @@ function ApiTokensCard() {
         }
       />
 
-      <div className="mt-4 space-y-4">
+      <div className="mt-4 space-y-4 pl-7">
         {/* The button mirrors the Input's responsive height (h-11 / sm:h-10)
             so the row reads as one aligned control group instead of a tall
             input next to a shorter `sm` button. */}