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/hard-delete-dialog.tsx

@@ -16,6 +16,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { WarningCallout } from '@/components/ui/warning-callout';
 import { apiFetch } from '@/lib/api/client';
 
 interface Props {
@@ -108,22 +109,19 @@ function HardDeleteDialogBody({ onOpenChange, clientId, clientName, onDeleted }:
             Permanent deletion is reserved for archived clients only. We’ll email a 4-digit
             confirmation code to your account address. The code expires in 10 minutes.
           </p>
-          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
-            <p className="font-medium flex items-center gap-2">
-              <AlertTriangle className="h-4 w-4" /> What gets deleted
-            </p>
+          <WarningCallout title="What gets deleted">
             <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
               <li>Client record + addresses, contacts, notes, tags</li>
               <li>Portal user account + GDPR consent records</li>
               <li>All pipeline interests + reservations for this client</li>
             </ul>
-            <p className="font-medium mt-2 flex items-center gap-2">What is preserved</p>
+            <p className="font-medium mt-2">What is preserved</p>
             <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
               <li>Signed documents (detached from client, kept for legal history)</li>
               <li>Email threads, files, reminders (detached)</li>
               <li>Audit log entries</li>
             </ul>
-          </div>
+          </WarningCallout>
         </div>
       ) : (
         <div className="space-y-3">