M1: phone app shell, settings, profile, dev login

Everything now renders inside a phone illustration on the entry screen,
with a five-tab bar. The frame lives in the root layout rather than one
page, so sign-in, onboarding and the job form are inside it too.

- Entry screen is the product running, not a marketing page: a live
  swipeable deck of real verified pros with a trade-filter strip above
  the card. deck.showcase is the only public procedure in that router
  and writes nothing, so an anonymous right swipe reaches no one.

- Settings: notification preferences (new table, defaults returned when
  no row exists), signed-in devices, GDPR export, deletion request.

  Closes the setEmail finding: an unverified address is no longer
  written to users.email, which is UNIQUE -- claiming a stranger's
  address used to block them from ever signing up with Google, and the
  uniqueness error leaked whether an address was registered. Now parked
  in email_change_requests until a token proves ownership.

- Profile: for a pro it leads with their REAL deck card, rendered by the
  same exported <Card> clients swipe, so the two cannot drift. Adds
  pro.previewCard (works at draft/pending, where publicProfile 404s) and
  pro.reorderMedia (photo position 0 is the deck card). Warns before an
  edit that would send a verified pro back for review, rather than after
  it silently drops them off the deck. Clients get a thin profile plus a
  route into pro onboarding -- supply is the launch blocker.

- Dev login: +34600000000 / 000000, behind THREE guards (NODE_ENV,
  an explicit ALLOW_DEV_LOGIN flag, and an exact number match). It
  overwrites the stored code rather than skipping verification, so the
  real expiry, attempt cap and single-use consumption still apply.

- Seed uses portrait photos. The cards previously showed picsum stock
  scenery -- a locksmith standing on a railway track.

Fixes found along the way: the card's name rendered ink-950 navy on a
dark photo because globals.css sets h1..h6 colour in @layer base, which
beat the inherited text-white; and the card referenced --color-go-500,
--border and --card, none of which exist, so the SEND JOB stamp had no
colour.

Also adds public/sw.js as a kill-switch: a service worker left
registered on localhost:3000 by a different project was intercepting
this app's chunks.

typecheck, lint clean; 186 tests pass.

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

apps/web/src/components/ui/settings-row.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/** A titled group of rows. Settings is a list of lists. */
+export function SettingsGroup({
+  title,
+  note,
+  children,
+}: {
+  title: string;
+  note?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-6">
+      <h2 className="mb-2 px-1 text-overline uppercase text-faint">{title}</h2>
+      <div className="divide-y divide-hairline overflow-hidden rounded-card border border-hairline bg-raised">
+        {children}
+      </div>
+      {note && <p className="mt-2 px-1 text-meta text-muted">{note}</p>}
+    </section>
+  );
+}
+
+/** A read-only or navigational row. */
+export function SettingsRow({
+  label,
+  value,
+  hint,
+  onClick,
+  danger,
+  disabled,
+}: {
+  label: string;
+  value?: React.ReactNode;
+  hint?: string;
+  onClick?: () => void;
+  danger?: boolean;
+  disabled?: boolean;
+}) {
+  const interactive = Boolean(onClick) && !disabled;
+  const Tag = interactive ? 'button' : 'div';
+
+  return (
+    <Tag
+      {...(interactive ? { type: 'button' as const, onClick } : {})}
+      className={cn(
+        'flex w-full items-center gap-3 px-4 py-3.5 text-left',
+        interactive && 'transition-colors duration-[120ms] ease-standard hover:bg-sunken',
+        disabled && 'opacity-45',
+      )}
+    >
+      <span className="min-w-0 flex-1">
+        <span className={cn('block text-body-sm', danger ? 'text-stop-500' : 'text-strong')}>
+          {label}
+        </span>
+        {hint && <span className="mt-0.5 block text-meta text-muted">{hint}</span>}
+      </span>
+      {value !== undefined && (
+        <span className="shrink-0 text-body-sm text-muted">{value}</span>
+      )}
+      {interactive && <ChevronRight className="h-4 w-4 shrink-0 text-faint" aria-hidden />}
+    </Tag>
+  );
+}
+
+/**
+ * A row carrying a switch. The label is the control's accessible name, so the
+ * whole row is one tap target rather than a label and a separate 20px switch.
+ */
+export function SettingsToggle({
+  label,
+  hint,
+  checked,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  hint?: string;
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'flex w-full items-center gap-3 px-4 py-3.5 text-left',
+        'transition-colors duration-[120ms] ease-standard hover:bg-sunken',
+        disabled && 'pointer-events-none opacity-45',
+      )}
+    >
+      <span className="min-w-0 flex-1">
+        <span className="block text-body-sm text-strong">{label}</span>
+        {hint && <span className="mt-0.5 block text-meta text-muted">{hint}</span>}
+      </span>
+      <span
+        aria-hidden
+        className={cn(
+          'relative h-[1.6rem] w-[2.75rem] shrink-0 rounded-pill',
+          'transition-colors duration-[120ms] ease-standard',
+          checked ? 'bg-brand-500' : 'bg-ink-300',
+        )}
+      >
+        <span
+          className={cn(
+            'absolute top-[0.2rem] h-[1.2rem] w-[1.2rem] rounded-pill bg-white shadow-sm',
+            'transition-[left] duration-[120ms] ease-standard',
+            checked ? 'left-[1.35rem]' : 'left-[0.2rem]',
+          )}
+        />
+      </span>
+    </button>
+  );
+}