feat(#416): responsive layout + accessibility for login page

- Mobile-first responsive classes (p-4 sm:p-8, text-2xl sm:text-4xl)
- WCAG 2.1 AA: role=status on loading spinner, aria-labels, focus management
- Loading spinner has role=status and aria-label
- All interactive elements keyboard-accessible
- Added 10 new tests for responsive layout and accessibility

Refs #416

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/app/(auth)/login/page.tsx

@@ -128,19 +128,24 @@ export default function LoginPage(): ReactElement {
   );
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-8 bg-gray-50">
+    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
-          <h1 className="text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
-          <p className="text-lg text-gray-600">
+          <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
+          <p className="text-base sm:text-lg text-gray-600">
             Your personal assistant platform. Organize tasks, events, and projects with a
             PDA-friendly approach.
           </p>
         </div>
 
-        <div className="bg-white p-8 rounded-lg shadow-md">
+        <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md">
           {loadingConfig ? (
-            <div className="flex items-center justify-center py-8" data-testid="loading-spinner">
+            <div
+              className="flex items-center justify-center py-8"
+              data-testid="loading-spinner"
+              role="status"
+              aria-label="Loading authentication options"
+            >
               <Loader2 className="h-8 w-8 animate-spin text-blue-500" aria-hidden="true" />
               <span className="sr-only">Loading authentication options</span>
             </div>