Polish mobile layouts, extract ExpandableText, fix image sizing

- Stack title-hero poster/metadata vertically on mobile (flex-col md:flex-row),
  switch backdrop tall breakpoint from sm to md
- Extract bio expand/collapse logic into reusable ExpandableText component;
  use it in PersonHero and TitleHero
- Fix ContinueWatchingCard image to use fill + sizes instead of fixed
  width/height to avoid layout shift
- Add fade-out gradient on genre chip scrollbar edge on mobile
- Show scaled-down ambient glow on mobile instead of hiding it entirely
- Humanize knownForDepartment labels (Acting→Actor, Directing→Director, etc.)
- Change cast member name from truncate to line-clamp-2 for wrapping
- Hide tooltip arrow via [&>:last-child]:hidden instead of color-matching it
- Apply safe-area-inset padding to HeroBanner content on notched devices

app/(auth)/setup/_components/setup-form.tsx

@@ -50,7 +50,7 @@ const steps = [
         </a>{" "}
         and request an API key. Choose &ldquo;Developer&rdquo; when asked. You
         need the{" "}
-        <span className="font-mono text-xs text-primary">
+        <span className="font-mono text-primary text-xs">
           API Read Access Token
         </span>{" "}
         (the long one).
@@ -123,11 +123,11 @@ export function SetupForm() {
     >
       {/* Header */}
       <motion.div variants={sectionVariants} className="space-y-3">
-        <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-medium text-primary">
+        <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 font-medium text-primary text-xs">
           <IconKey aria-hidden={true} className="size-3.5" />
           Setup required
         </div>
-        <h1 className="font-display text-3xl tracking-tight text-balance sm:text-4xl">
+        <h1 className="text-balance font-display text-3xl tracking-tight sm:text-4xl">
           Connect to TMDB
         </h1>
         <p className="max-w-lg text-muted-foreground leading-relaxed">
@@ -150,13 +150,13 @@ export function SetupForm() {
         {steps.map((step, i) => (
           <div key={step.number} className="flex gap-4">
             <div className="flex shrink-0 items-start pt-0.5">
-              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 font-mono text-sm font-semibold text-primary">
+              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 font-mono font-semibold text-primary text-sm">
                 {step.number}
               </span>
             </div>
             <div className="space-y-1">
               <h2 className="font-medium">{step.title}</h2>
-              <p className="text-sm leading-relaxed text-muted-foreground">
+              <p className="text-muted-foreground text-sm leading-relaxed">
                 {step.description}
               </p>
 
@@ -168,8 +168,8 @@ export function SetupForm() {
                       key={snippet.label}
                       className="group relative overflow-hidden rounded-lg border border-border/50 bg-card/60"
                     >
-                      <div className="flex items-center justify-between border-b border-border/30 px-3 py-1.5">
-                        <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+                      <div className="flex items-center justify-between border-border/30 border-b px-3 py-1.5">
+                        <span className="font-medium text-[11px] text-muted-foreground uppercase tracking-wider">
                           {snippet.label}
                         </span>
                         <Button
@@ -194,7 +194,7 @@ export function SetupForm() {
                           )}
                         </Button>
                       </div>
-                      <pre className="overflow-x-auto p-3 font-mono text-sm text-foreground/80">
+                      <pre className="overflow-x-auto p-3 font-mono text-foreground/80 text-sm">
                         {snippet.code}
                       </pre>
                     </div>
@@ -221,7 +221,7 @@ export function SetupForm() {
                 <p className="font-medium text-green-400">
                   TMDB API key detected
                 </p>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   Redirecting you to Sofa…
                 </p>
               </div>
@@ -229,10 +229,10 @@ export function SetupForm() {
           ) : (
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="space-y-0.5">
-                <p className="text-sm font-medium">
+                <p className="font-medium text-sm">
                   After setting the key and restarting:
                 </p>
-                <p className="text-xs text-muted-foreground">
+                <p className="text-muted-foreground text-xs">
                   Click the button to verify your configuration
                 </p>
               </div>