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/settings/user-settings.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { WarningCallout } from '@/components/ui/warning-callout';
 import { PageHeader } from '@/components/shared/page-header';
 import { CountryCombobox } from '@/components/shared/country-combobox';
 import { PhoneInput, type PhoneInputValue } from '@/components/shared/phone-input';
@@ -91,11 +92,12 @@ export function UserSettings() {
   }, [detectedTz]);
 
   // When the user picks a country and no timezone is set, suggest the
-  // primary zone for that country. Doesn't fight an explicit timezone
-  // selection — only fires while the timezone slot is empty.
+  // primary zone for that country. setState in effect is intentional —
+  // we're reacting to a discrete user choice (country picker).
   useEffect(() => {
     if (!country || timezone) return;
     const primary = primaryTimezoneFor(country as CountryCode);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (primary) setTimezone(primary);
   }, [country, timezone]);
 
@@ -319,20 +321,22 @@ export function UserSettings() {
                 countryHint={(country as CountryCode | null) ?? undefined}
               />
               {tzMismatch && (
-                <div className="flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900">
-                  <Globe className="h-3.5 w-3.5 shrink-0 mt-0.5" />
-                  <div className="flex-1">
-                    Looks like you&apos;re in <strong>{detectedTz}</strong> right now (saved:{' '}
-                    {timezone}).
-                    <button
-                      type="button"
-                      onClick={adoptDetectedTz}
-                      className="ml-1 underline underline-offset-2 hover:no-underline"
-                    >
-                      Update?
-                    </button>
-                  </div>
-                </div>
+                <WarningCallout icon={false}>
+                  <span className="flex items-start gap-2 text-xs">
+                    <Globe aria-hidden className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+                    <span className="flex-1">
+                      Looks like you&apos;re in <strong>{detectedTz}</strong> right now (saved:{' '}
+                      {timezone}).
+                      <button
+                        type="button"
+                        onClick={adoptDetectedTz}
+                        className="ml-1 underline underline-offset-2 hover:no-underline"
+                      >
+                        Update?
+                      </button>
+                    </span>
+                  </span>
+                </WarningCallout>
               )}
             </div>
             <div className="flex items-center gap-3">