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/deck.tsx

@@ -66,13 +66,20 @@ export function Deck({ cards, onDecide }: DeckProps) {
   );
 }
 
-function Card({
+/**
+ * One card.
+ *
+ * Exported so the profile screen can render a pro their OWN card, byte for byte
+ * what a client sees. A lookalike would drift the moment either side changed.
+ * Pass no `onDecide` to get a static, non-draggable card.
+ */
+export function Card({
   card,
-  depth,
+  depth = 0,
   onDecide,
 }: {
   card: DeckCard;
-  depth: number;
+  depth?: number;
   onDecide?: (proId: string, direction: 'left' | 'right') => void;
 }) {
   const x = useMotionValue(0);
@@ -86,7 +93,7 @@ function Card({
     <motion.article
       className={cn(
         'deck-card absolute inset-0 overflow-hidden rounded-3xl border shadow-xl',
-        'border-[var(--border)] bg-[var(--card)]',
+        'border-hairline bg-raised',
         interactive ? 'cursor-grab active:cursor-grabbing' : 'pointer-events-none',
       )}
       style={{ x, rotate, zIndex: 10 - depth }}
@@ -119,7 +126,7 @@ function Card({
         <>
           <motion.div
             style={{ opacity: hireOpacity }}
-            className="absolute left-6 top-6 rotate-[-12deg] rounded-lg border-4 border-[var(--color-go-500)] px-3 py-1 text-2xl font-black tracking-wide text-[var(--color-go-500)]"
+            className="absolute left-6 top-6 rotate-[-12deg] rounded-lg border-4 border-[var(--color-go-600)] px-3 py-1 text-2xl font-black tracking-wide text-[var(--color-go-600)]"
           >
             SEND JOB
           </motion.div>
@@ -134,7 +141,13 @@ function Card({
 
       <div className="absolute inset-x-0 bottom-0 p-6 text-white">
         <div className="mb-1 flex items-baseline gap-2">
-          <h2 className="text-2xl font-semibold">{card.name}</h2>
+          {/*
+            text-white must be on the h2 itself, not inherited from the wrapper:
+            globals.css sets `h1..h6 { color: var(--text-strong) }` in @layer
+            base, and that rule beats the parent's colour. Without this the name
+            renders ink-950 navy on a dark photo and is unreadable.
+          */}
+          <h2 className="text-2xl font-semibold text-white">{card.name}</h2>
           {card.ratingCount > 0 ? (
             <span className="flex items-center gap-1 text-sm">
               <Star className="h-4 w-4 fill-current" aria-hidden />
@@ -187,10 +200,10 @@ function ActionButton({
       aria-label={label}
       title={label}
       className={cn(
-        'flex h-16 w-16 items-center justify-center rounded-full border-2 bg-[var(--card)] shadow-lg',
+        'flex h-16 w-16 items-center justify-center rounded-full border-2 bg-raised shadow-lg',
         'transition hover:scale-105 active:scale-95',
         isHire
-          ? 'border-[var(--color-go-500)] text-[var(--color-go-500)]'
+          ? 'border-[var(--color-go-600)] text-[var(--color-go-600)]'
           : 'border-[var(--color-stop-500)] text-[var(--color-stop-500)]',
       )}
     >