fix(ui): close consistency-audit contrast and duplication findings

Today hero's top-signal delta used opacity-on-muted text, landing below
AA on the app's most prominent card; five mood charts and the sleep-
stage IN_BED fill painted raw --dracula-*/hardcoded-hex hues with no
(or an unused) light-theme counterpart. Route all of them through
existing semantic/chart tokens instead (destructive/warning/success,
chart-1..5, and a newly minted --chart-inbed with its own Alucard
override) so every hue is AA-tuned per theme.

Also collapses three duplicated primitives the audit flagged: the
click-Popover VitalsInfoTip and hover-Tooltip InfoHint merge into one
touch-first ui/info-popover; MedicationViewToggle and ModuleViewToggle
were verbatim copy-paste and now wrap one shared ui/view-toggle; the
triplicated sport-icon map (already drifted — mixedCardio rendered a
different glyph in the list vs the detail/dashboard views) moves to
lib/workouts/sport-icons.ts with HeartPulse as the settled icon.

Adds a no-restricted-imports lint rule banning direct recharts imports
outside the chart-runtime barrel, catching the bundle-duplication
mistake at local lint instead of PR-CI.

src/components/module-list/module-view-toggle.tsx

@@ -3,15 +3,15 @@
 import { LayoutGrid, List as ListIcon } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
-import { cn } from "@/lib/utils";
+import { ViewToggle } from "@/components/ui/view-toggle";
 import type { ModuleListView } from "@/lib/module-list-prefs";
 
 /**
  * v1.18.6 (W8 / MOD-03) — icon-only card/list view toggle shared by the
- * Vorsorge / Illness / Labs settings pages. Mirrors the medication module's
- * `MedicationViewToggle` grammar (two ghost segments, the active one filled,
- * `aria-pressed` per segment) but switches between a card grid and a compact
- * list rather than cards-vs-table, so the label set is `moduleList.view*`.
+ * Vorsorge / Illness / Labs settings pages. Thin wrapper over the shared
+ * `ViewToggle` primitive (mirrors the medication module's
+ * `MedicationViewToggle`, which is the same wrapper switching between a
+ * card grid and a compact list rather than cards-vs-table).
  */
 interface ModuleViewToggleProps {
   view: ModuleListView;
@@ -21,49 +21,24 @@ interface ModuleViewToggleProps {
 export function ModuleViewToggle({ view, onChange }: ModuleViewToggleProps) {
   const { t } = useTranslations();
 
-  const segments = [
-    {
-      value: "cards" as const,
-      label: t("moduleList.viewCards"),
-      icon: LayoutGrid,
-    },
-    {
-      value: "list" as const,
-      label: t("moduleList.viewList"),
-      icon: ListIcon,
-    },
-  ];
-
   return (
-    <div
-      role="group"
-      aria-label={t("moduleList.viewToggleLabel")}
-      className="border-border bg-background/30 inline-flex shrink-0 items-center rounded-md border p-0.5"
-    >
-      {segments.map(({ value, label, icon: Icon }) => {
-        const active = view === value;
-        return (
-          <button
-            key={value}
-            type="button"
-            onClick={() => {
-              if (!active) onChange(value);
-            }}
-            aria-pressed={active}
-            aria-label={label}
-            title={label}
-            data-slot={`module-view-${value}`}
-            className={cn(
-              "focus-visible:ring-ring inline-flex size-10 items-center justify-center rounded-[5px] transition-colors focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none sm:size-8",
-              active
-                ? "bg-secondary text-secondary-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            <Icon className="size-4" aria-hidden="true" />
-          </button>
-        );
-      })}
-    </div>
+    <ViewToggle
+      view={view}
+      onChange={onChange}
+      groupLabel={t("moduleList.viewToggleLabel")}
+      dataSlotPrefix="module-view"
+      segments={[
+        {
+          value: "cards",
+          label: t("moduleList.viewCards"),
+          icon: LayoutGrid,
+        },
+        {
+          value: "list",
+          label: t("moduleList.viewList"),
+          icon: ListIcon,
+        },
+      ]}
+    />
   );
 }