Improve business name search results UI

Results now show as proper clickable cards with:
- Entity name (bold), DBA (if different from legal name)
- FRN (monospace) and Filer ID on the right
- Clear "click to check compliance" hint
- Bordered list with dividers and hover state
- Hides results after selection

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

site/src/pages/tools/fcc-compliance-check.astro

@@ -222,20 +222,24 @@ import Base from "../../layouts/Base.astro";
           return;
         }
 
-        let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""}</p>`;
+        let html = `<p class="text-xs text-gray-400 mb-2">${items.length} result${items.length !== 1 ? "s" : ""} — click to check compliance</p>`;
-        html += '<div class="space-y-1 max-h-60 overflow-y-auto">';
+        html += '<div class="space-y-2 max-h-72 overflow-y-auto border border-gray-200 rounded-lg divide-y divide-gray-100">';
         for (const item of items) {
-          const label = [
+          const dba = (item.dba && item.dba !== "None" && item.dba !== item.legal_name) ? item.dba : "";
-            item.legal_name || "",
-            item.dba ? `DBA: ${item.dba}` : "",
-            item.frn ? `FRN: ${item.frn}` : "",
-            item.filer_id ? `Filer ID: ${item.filer_id}` : "",
-          ].filter(Boolean).join(" — ");
-
           html += `<button
             data-frn="${item.frn || ""}"
-            class="name-result-btn block w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-pw-50 border border-transparent hover:border-pw-200 transition"
+            class="name-result-btn w-full text-left px-4 py-3 flex items-center justify-between gap-3 hover:bg-pw-50 transition cursor-pointer"
-          >${label}</button>`;
+            style="display:flex;"
+          >
+            <div style="min-width:0;flex:1;">
+              <p style="font-weight:600;font-size:14px;color:#111827;margin:0;">${item.legal_name || "Unknown"}</p>
+              ${dba ? `<p style="font-size:12px;color:#6b7280;margin:2px 0 0;">d/b/a ${dba}</p>` : ""}
+            </div>
+            <div style="text-align:right;flex-shrink:0;">
+              <p style="font-family:monospace;font-size:12px;color:#1a2744;font-weight:600;margin:0;">${item.frn || "—"}</p>
+              <p style="font-size:11px;color:#9ca3af;margin:2px 0 0;">ID: ${item.filer_id || "—"}</p>
+            </div>
+          </button>`;
         }
         html += "</div>";
         nameResults.innerHTML = html;
@@ -244,10 +248,11 @@ import Base from "../../layouts/Base.astro";
           btn.addEventListener("click", () => {
             const frn = btn.getAttribute("data-frn");
             if (!frn) {
-              showError("No FRN available for this entity.");
+              showError("No FRN available for this entity. Try entering the FRN manually.");
               return;
             }
             frnInput.value = frn;
+            nameResults.classList.add("hidden");
             runCheck();
           });
         });