move tooltip from hero to login form as superscript

- Removed tooltip from HeroSection (ATmosphere now plain text)
- Added superscript info icon next to 'ATmosphere' in login form text
- Tooltip content left-aligned for better readability
- Maintains platform-agnostic design

docs/git-history.json

···
 [
   {
+    "hash": "f79a669dd6528340d453cb28e9fed2bd5232d46c",
+    "short_hash": "f79a669",
+    "author": "Ariel M. Lighty",
+    "date": "2025-12-24T19:38:51-05:00",
+    "message": "move tooltip from hero to login form as superscript\n\n- Removed tooltip from HeroSection (ATmosphere now plain text)\n- Added superscript info icon next to 'ATmosphere' in login form text\n- Tooltip content left-aligned for better readability\n- Maintains platform-agnostic design",
+    "files_changed": 2
+  },
+  {
     "hash": "9bdca934948a284e1315961b4430bae0b6617cbe",
     "short_hash": "9bdca93",
     "author": "Ariel M. Lighty",
···
     "files_changed": 1
   },
   {
-    "hash": "0f47c41f1a383ff99387254e56d31210a133bee7",
-    "short_hash": "0f47c41",
+    "hash": "6f618f32c42d1e2cfa13c480b2d396c82496eb6c",
+    "short_hash": "6f618f3",
     "author": "Ariel M. Lighty",
-    "date": "2025-12-24T16:33:31-05:00",
-    "message": "extract login page components for DRY\n\nCreated reusable components:\n- ValuePropCard: icon + title + description card\n- StepCard: numbered step with color variant\n- HeroSection: logo, title, firefly animation\n- ValuePropsSection: 3 value prop cards\n- HowItWorksSection: 4 step cards",
-    "files_changed": 5
+    "date": "2025-12-24T16:38:37-05:00",
+    "message": "add @ symbol and profile pic to login input\n\nCreated HandleInput component:\n- Shows @ symbol by default\n- Replaces @ with profile pic when handle selected from typeahead\n- Extracts avatar from typeahead data-avatar or actor-select event\n- Clears avatar when input is cleared",
+    "files_changed": 2
   },
   {
     "hash": "6cd4d622930e2a43531f2df40d930ceb5d2b4dbc",

docs/graph-data.json

···
       "created_at": "2025-12-24T18:35:10.368162900-05:00",
       "updated_at": "2025-12-24T18:35:10.368162900-05:00",
       "metadata_json": "{\"branch\":\"master\",\"commit\":\"9bdca93\",\"confidence\":100}"
+    },
+    {
+      "id": 176,
+      "change_id": "85d33a42-5cbc-44b8-8e97-afd3edb1eeda",
+      "node_type": "goal",
+      "title": "Refactor ATmosphere tooltip: make HeroSection clickable instead of hover, add tooltip to login input, left-align text",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-24T18:50:43.883772100-05:00",
+      "updated_at": "2025-12-24T19:39:08.057232200-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 177,
+      "change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
+      "node_type": "action",
+      "title": "Reading HeroSection to understand current tooltip implementation",
+      "description": null,
+      "status": "pending",
+      "created_at": "2025-12-24T18:50:46.648351400-05:00",
+      "updated_at": "2025-12-24T18:50:46.648351400-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 178,
+      "change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
+      "node_type": "action",
+      "title": "Implementing clickable tooltip for HeroSection and adding tooltip to HandleInput",
+      "description": null,
+      "status": "pending",
+      "created_at": "2025-12-24T18:51:19.077525300-05:00",
+      "updated_at": "2025-12-24T18:51:19.077525300-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":85}"
+    },
+    {
+      "id": 179,
+      "change_id": "21ac5b6e-575e-46fb-8695-1a7b44fd0f68",
+      "node_type": "outcome",
+      "title": "Successfully refactored tooltips: HeroSection ATmosphere tooltip now clickable (trigger='click') with click-outside-to-close, added 'Your Bluesky Handle' label with left-aligned tooltip on login form, enhanced Tooltip component with trigger and align props. Build passes.",
+      "description": null,
+      "status": "pending",
+      "created_at": "2025-12-24T18:54:08.099877300-05:00",
+      "updated_at": "2025-12-24T18:54:08.099877300-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
+    },
+    {
+      "id": 180,
+      "change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
+      "node_type": "outcome",
+      "title": "Successfully moved tooltip from HeroSection to Login form. Removed tooltip from HeroSection 'ATmosphere' text. Added superscript info icon next to 'ATmosphere' in login form with left-aligned tooltip content. Platform-agnostic design maintained.",
+      "description": null,
+      "status": "pending",
+      "created_at": "2025-12-24T19:06:33.954975-05:00",
+      "updated_at": "2025-12-24T19:06:33.954975-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
+    },
+    {
+      "id": 181,
+      "change_id": "acba6854-0d74-4547-91ba-391149cc5e57",
+      "node_type": "action",
+      "title": "Committed tooltip refactor to git",
+      "description": null,
+      "status": "pending",
+      "created_at": "2025-12-24T19:39:04.481280600-05:00",
+      "updated_at": "2025-12-24T19:39:04.481280600-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"commit\":\"f79a669\",\"confidence\":100}"
     }
   ],
   "edges": [
···
       "weight": 1.0,
       "rationale": "Committed to repository",
       "created_at": "2025-12-24T18:35:12.609336500-05:00"
+    },
+    {
+      "id": 172,
+      "from_node_id": 176,
+      "to_node_id": 177,
+      "from_change_id": "85d33a42-5cbc-44b8-8e97-afd3edb1eeda",
+      "to_change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Investigation action",
+      "created_at": "2025-12-24T18:50:49.358413200-05:00"
+    },
+    {
+      "id": 173,
+      "from_node_id": 177,
+      "to_node_id": 178,
+      "from_change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
+      "to_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Implementation based on analysis",
+      "created_at": "2025-12-24T18:51:21.616689800-05:00"
+    },
+    {
+      "id": 174,
+      "from_node_id": 178,
+      "to_node_id": 179,
+      "from_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
+      "to_change_id": "21ac5b6e-575e-46fb-8695-1a7b44fd0f68",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Implementation complete",
+      "created_at": "2025-12-24T18:54:10.755729900-05:00"
+    },
+    {
+      "id": 175,
+      "from_node_id": 178,
+      "to_node_id": 180,
+      "from_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
+      "to_change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Implementation complete",
+      "created_at": "2025-12-24T19:06:36.936132900-05:00"
+    },
+    {
+      "id": 176,
+      "from_node_id": 180,
+      "to_node_id": 181,
+      "from_change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
+      "to_change_id": "acba6854-0d74-4547-91ba-391149cc5e57",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Committed to repository",
+      "created_at": "2025-12-24T19:39:06.240788400-05:00"
     }
   ]
 }

src/components/login/HeroSection.tsx

···
 import FireflyLogo from "../../assets/at-firefly-logo.svg?react";
-import Tooltip from "../common/Tooltip";
 
 interface HeroSectionProps {
   reducedMotion?: boolean;
 }
 
-export default function HeroSection({ reducedMotion = false }: HeroSectionProps) {
+export default function HeroSection({
+  reducedMotion = false,
+}: HeroSectionProps) {
   return (
     <div className="text-center md:text-left">
       <div className="justify-center md:justify-start mb-4">
···
       <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-purple-600 via-cyan-500 to-pink-500 dark:from-cyan-300 dark:via-purple-300 dark:to-pink-300 bg-clip-text text-transparent mb-3 md:mb-4">
         ATlast
       </h1>
-      <p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium inline-flex items-center gap-2 justify-center md:justify-start w-full">
-        <span>Find Your Light in the ATmosphere</span>
-        <Tooltip
-          content={
-            <div>
-              <p className="font-semibold mb-1">What's the ATmosphere?</p>
-              <p className="text-xs leading-relaxed">
-                The <strong>ATmosphere</strong> is an open network of social apps that use one login, including Bluesky, Blacksky, Tangled, Flashes, Leaflet, and more. Once you login, you can explore the social apps that let you follow different people!
-              </p>
-            </div>
-          }
-        />
+      <p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium">
+        Find Your Light in the ATmosphere
       </p>
       <p className="text-purple-750 dark:text-cyan-250 mb-2">
         Reconnect with your internet, one firefly at a time

src/pages/Login.tsx

···
 import ValuePropsSection from "../components/login/ValuePropsSection";
 import HowItWorksSection from "../components/login/HowItWorksSection";
 import HandleInput from "../components/login/HandleInput";
+import Tooltip from "../components/common/Tooltip";
 
 interface LoginPageProps {
   onSubmit: (handle: string) => void;
···
       try {
         const url = new URL(
           "xrpc/app.bsky.actor.searchActorsTypeahead",
-          "https://public.api.bsky.app"
+          "https://public.api.bsky.app",
         );
         url.searchParams.set("q", handle);
         url.searchParams.set("limit", "1");
···
                   Light Up Your Network
                 </h2>
                 <p className="text-purple-750 dark:text-cyan-250 text-center mb-6">
-                  Reconnect in the ATmosphere as:
+                  Reconnect in the ATmosphere
+                  <sup className="ml-0.5">
+                    <Tooltip
+                      content={
+                        <div className="text-left">
+                          <p className="font-semibold mb-1">
+                            What's the ATmosphere?
+                          </p>
+                          <p className="text-xs leading-relaxed">
+                            The <strong>ATmosphere</strong> is a shared home for
+                            social apps using one login. Your follows stay with
+                            you, even if you change apps.
+                          </p>
+                        </div>
+                      }
+                    />
+                  </sup>{" "}
                 </p>
 
                 <form
···
                   method="post"
                 >
                   <div>
+                    <label
+                      htmlFor="atproto-handle"
+                      className="block text-sm font-semibold text-purple-900 dark:text-cyan-100 mb-2"
+                    >
+                      Your ATmosphere Handle
+                    </label>
                     <actor-typeahead rows={5}>
                       <HandleInput
                         ref={inputRef}