fix(insights): sleep-debt explainer on the resolved card; Skeleton primitive for the narrative loader

The sleep-debt computed-engine InfoHint only rendered in the still-learning
state — but the resolved full-debt card is the common case and where the
figure most needs the 'this is our own estimate, not a wearable's native
number' context. Show it there too. Separately, swap the period-narrative
loading shell's hand-rolled muted divs for the shared Skeleton primitive
so its shimmer matches every other loader.

src/components/insights/period-narrative-card.tsx

@@ -9,6 +9,7 @@ import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
 import { queryKeys } from "@/lib/query-keys";
 import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
 import { SectionHeading } from "@/components/insights/section-heading";
 import { AskCoachAction } from "@/components/insights/ask-coach-action";
 import { ProseBlocks } from "@/components/insights/prose-blocks";
@@ -108,9 +109,9 @@ export function PeriodNarrativeCard({
           aria-hidden="true"
           className={SKELETON_SHELL}
         >
-          <div className="bg-muted/40 h-4 w-full rounded" />
-          <div className="bg-muted/40 h-4 w-5/6 rounded" />
-          <div className="bg-muted/40 h-4 w-2/3 rounded" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+          <Skeleton className="h-4 w-2/3" />
         </div>
       </section>
     );

src/components/insights/sleep/sleep-debt-card.tsx

@@ -70,6 +70,13 @@ export function SleepDebtCard({ debt }: { debt: SleepDebtDto }) {
           <CardTitle className="text-base font-semibold">
             {t("insights.sleep.debt.title")}
           </CardTitle>
+          {/* v1.25.0 — the resolved full-debt card is the common case and the
+              place the figure most needs context: explain the COMPUTED engine
+              and that it differs from a wearable's native number here too, not
+              only in the still-learning `partial` state above. */}
+          {debt.source === "COMPUTED" ? (
+            <InfoHint label={t("insights.sleep.debt.computedInfo")} />
+          ) : null}
         </div>
       </CardHeader>
       <CardContent>