fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/clients/bulk-archive-wizard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, ArrowLeft, ArrowRight, CheckCircle2, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -16,6 +16,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Textarea } from '@/components/ui/textarea';
+import { WarningCallout } from '@/components/ui/warning-callout';
 import { apiFetch } from '@/lib/api/client';
 
 interface PreflightItem {
@@ -36,7 +37,19 @@ interface Props {
 
 type Stage = 'preflight' | 'reasons' | 'confirm';
 
-export function BulkArchiveWizard({ open, onOpenChange, clientIds, onSuccess }: Props) {
+export function BulkArchiveWizard(props: Props) {
+  // Key-based remount: body keyed on open + clientIds so its useState
+  // initializers re-run each time the wizard opens fresh. Replaces the
+  // useEffect(setState, [open]) reset the Compiler flagged.
+  return (
+    <BulkArchiveWizardBody
+      key={props.open ? `open:${props.clientIds.join(',')}` : 'closed'}
+      {...props}
+    />
+  );
+}
+
+function BulkArchiveWizardBody({ open, onOpenChange, clientIds, onSuccess }: Props) {
   const qc = useQueryClient();
   const [stage, setStage] = useState<Stage>('preflight');
   const [reasons, setReasons] = useState<Record<string, string>>({});
@@ -52,14 +65,6 @@ export function BulkArchiveWizard({ open, onOpenChange, clientIds, onSuccess }:
     enabled: open && clientIds.length > 0,
   });
 
-  useEffect(() => {
-    if (open) {
-      setStage('preflight');
-      setReasons({});
-      setCarouselIndex(0);
-    }
-  }, [open]);
-
   const items = preflight.data ?? [];
   const blocked = useMemo(() => items.filter((i) => i.blockers.length > 0), [items]);
   const highStakes = useMemo(
@@ -192,15 +197,17 @@ export function BulkArchiveWizard({ open, onOpenChange, clientIds, onSuccess }:
                     ))}
                   </span>
                 </div>
-                <div className="rounded-md border border-amber-300 bg-amber-50 p-3">
-                  <div className="flex items-center gap-2 mb-1.5">
-                    <AlertTriangle className="h-4 w-4 text-amber-700" />
-                    <span className="font-medium text-amber-900">{currentHighStakes.fullName}</span>
-                    <Badge variant="secondary" className="text-xs">
-                      {currentHighStakes.highStakesStage}
-                    </Badge>
-                  </div>
-                  <div className="text-xs text-amber-900">
+                <WarningCallout
+                  title={
+                    <span className="flex items-center gap-2">
+                      <span>{currentHighStakes.fullName}</span>
+                      <Badge variant="secondary" className="text-xs">
+                        {currentHighStakes.highStakesStage}
+                      </Badge>
+                    </span>
+                  }
+                >
+                  <span className="text-xs">
                     {currentHighStakes.summary.berths > 0
                       ? `${currentHighStakes.summary.berths} berth(s), `
                       : ''}
@@ -210,8 +217,8 @@ export function BulkArchiveWizard({ open, onOpenChange, clientIds, onSuccess }:
                     {currentHighStakes.summary.reservations > 0
                       ? `${currentHighStakes.summary.reservations} reservation(s)`
                       : ''}
-                  </div>
-                </div>
+                  </span>
+                </WarningCallout>
                 <Textarea
                   value={reasons[currentHighStakes.clientId] ?? ''}
                   onChange={(e) =>