style: fix missed Phase 1/2 items — FA→Lucide, a11y, variant-* cleanup

- +layout.svelte: replace fa-cog/fa-spinner spinners with LoaderCircle;
  variant-filled-primary → preset-filled-primary on reload button
- events/+page.svelte: fa-calendar-alt → CalendarDays, fa-exclamation-triangle
  → TriangleAlert (+ text-red-500 → text-error-500), fa-spinner → LoaderCircle
- sign_in_out.svelte: fa-times → X, fa-sign-in-alt → LogIn
- journals/+layout.svelte: fa-arrow-right → ArrowRight
- journal_entry_header.svelte: fix focus:ring-0 → focus:ring-2 focus:ring-primary-500
  (WCAG 2.1 AA — removes keyboard focus indicator violation)

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

src/routes/+layout.svelte

@@ -38,6 +38,7 @@
     // *** Import Aether specific variables and functions
     // import Analytics from '$lib/app_components/analytics.svelte';
     import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_auth_error } from '$lib/stores/ae_stores';
+    import { LoaderCircle } from 'lucide-svelte';
     // import { events_loc, events_slct } from '$lib/stores/ae_events_stores';
 
     // import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
@@ -313,7 +314,7 @@
     {#if is_hydrating}
         <div class="print:hidden fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
             <div class="preset-filled-surface-100-900 p-8 rounded-2xl shadow-2xl flex flex-col items-center gap-4">
-                <span class="fas fa-cog fa-spin text-5xl text-primary-500"></span>
+                <LoaderCircle size="3rem" class="animate-spin text-primary-500" />
                 <div class="text-center font-bold text-xl">Hydrating Aether...</div>
             </div>
         </div>
@@ -321,10 +322,10 @@
 {:else if browser && flag_denied}
     <div class="flex flex-col items-center justify-center h-screen gap-6 p-8">
         <h1 class="text-4xl font-black text-error-500">Access Denied</h1>
-        <button class="btn variant-filled-primary" onclick={() => window.location.reload()}>Reload</button>
+        <button class="btn preset-filled-primary" onclick={() => window.location.reload()}>Reload</button>
     </div>
 {:else if browser}
-    <div class="flex items-center justify-center h-screen"><span class="fas fa-spinner fa-spin text-4xl opacity-20"></span></div>
+    <div class="flex items-center justify-center h-screen"><LoaderCircle size="2.5rem" class="animate-spin opacity-20" /></div>
 {/if}
 
 {#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}

src/routes/events/+page.svelte

@@ -19,6 +19,7 @@
     //     events_trigger
     // } from '$lib/stores/ae_events_stores';
     import { ae_util } from '$lib/ae_utils/ae_utils';
+    import { CalendarDays, TriangleAlert, LoaderCircle } from 'lucide-svelte';
 
     import { page } from '$app/stores';
 
@@ -124,7 +125,7 @@
                         <!-- We do not want to show events more than 8 months old. -->
                         {#if new Date(event_obj.start_datetime ?? '').getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 8 || $ae_loc.trusted_access}
                             <span>
-                                <span class="fas fa-calendar-alt mx-1"></span>
+                                <CalendarDays size="1em" class="inline mx-1" />
                                 {ae_util.iso_datetime_formatter(
                                     event_obj.start_datetime,
                                     'date_long'
@@ -135,7 +136,7 @@
                             </strong>
                         {:else}
                             <span>
-                                <span class="fas fa-calendar-alt mx-1"></span>
+                                <CalendarDays size="1em" class="inline mx-1" />
                                 {ae_util.iso_datetime_formatter(
                                     event_obj.start_datetime,
                                     'date_long'
@@ -212,14 +213,14 @@
         </div>
     {:else}
         <div class="flex flex-row items-center justify-center">
-            <span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
+            <TriangleAlert size="1em" class="inline text-error-500 mx-1" />
             <span>No events available to display.</span>
-            <span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
+            <TriangleAlert size="1em" class="inline text-error-500 mx-1" />
         </div>
     {/if}
 {:else}
     <div class="flex flex-row items-center justify-center">
-        <span class="fas fa-spinner fa-spin mx-1"></span>
+        <LoaderCircle size="1em" class="inline animate-spin mx-1" />
         <span>Loading...</span>
     </div>
 {/if}

src/routes/events/[event_id]/sign_in_out.svelte

@@ -33,6 +33,7 @@
         events_trigger,
         events_trig_kv
     } from '$lib/stores/ae_events_stores';
+    import { X, LogIn } from 'lucide-svelte';
 
     onMount(() => {
         console.log('Browser environment detected.');
@@ -209,7 +210,7 @@
                 alert('You have been signed out.');
             }}
         >
-            <span class="fas fa-times mx-1"></span>
+            <X size="1em" class="inline mx-1" />
             Sign Out
             {$lq__auth__event_presenter_obj?.given_name
                 ? `- ${$lq__auth__event_presenter_obj?.given_name}`
@@ -269,7 +270,7 @@
                         // $events_slct.event_presenter_id = $events_sess.auth__person.presenter_id;
                     }}
                 >
-                    <span class="fas fa-sign-in-alt mx-1"></span>
+                    <LogIn size="1em" class="inline mx-1" />
                     Sign In
                 </button>
             </div>

src/routes/journals/+layout.svelte

@@ -8,7 +8,7 @@
     import { goto } from '$app/navigation';
 
     // *** Import other supporting libraries
-    import { ArrowDownUp, House, RefreshCw, Satellite } from '@lucide/svelte';
+    import { ArrowDownUp, ArrowRight, House, RefreshCw, Satellite } from '@lucide/svelte';
 
     // *** Import Aether specific variables and functions
     import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
@@ -323,7 +323,7 @@
                 }}
                 title="Scroll to right"
             >
-                <span class="fas fa-arrow-right"></span>
+                <ArrowRight size="1em" class="inline" />
                 <!-- Scroll to Right
         xLeft={xLeft} xScroll={xScroll} xWidth={xWidth} xScroll={xScroll} scrollLeft={scroll_container().scrollLeft}
         total={xLeft + xWidth} -->

src/routes/journals/ae_comp__journal_entry_header.svelte

@@ -105,7 +105,7 @@
                 <input
                     type="text"
                     bind:value={tmp_entry_obj.name}
-                    class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
+                    class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-2 focus:ring-primary-500"
                     placeholder="Entry Title..."
                     onchange={on_save}
                 />