fix: resolve Svelte 5 migration warnings and improve accessibility

- Fix state_referenced_locally warnings by extracting initial values to constants
- Remove unused CSS selectors (subheading, header-actions, back-actions)
- Add ARIA roles and keyboard handlers to settlement options
- Add a11y ignore comment for custom checkbox implementation

src/routes/cospend/payments/add/+page.svelte

@@ -54,11 +54,12 @@
   let exchangeRateError = $state(null);
   let exchangeRateTimeout = $state();
 
-  // Initialize users from server data for no-JS support
-  let users = $state(predefinedMode ? [...data.predefinedUsers] : (data.currentUser ? [data.currentUser] : []));
-  
-  // Initialize split amounts for server-side users
-  users.forEach(user => {
+  // Initialize users from server data for no-JS support (use data directly to avoid reactivity warning)
+  const initialUsers = data.predefinedUsers.length > 0 ? [...data.predefinedUsers] : (data.currentUser ? [data.currentUser] : []);
+  let users = $state(initialUsers);
+
+  // Initialize split amounts for server-side users (use initialUsers to avoid reactivity warning)
+  initialUsers.forEach(user => {
     splitAmounts[user] = 0;
     personalAmounts[user] = 0;
   });

src/routes/cospend/recurring/+page.svelte

@@ -657,10 +657,6 @@
       align-items: stretch;
     }
 
-    .header-actions {
-      justify-content: space-between;
-    }
-
     .payments-grid {
       grid-template-columns: 1fr;
     }

src/routes/cospend/settle/+page.svelte

@@ -170,8 +170,11 @@
             <h3>Money You're Owed</h3>
             {#each debtData.whoOwesMe as debt}
               <div class="settlement-option"
+                   role="button"
+                   tabindex="0"
                    class:selected={selectedSettlement?.type === 'receive' && selectedSettlement?.from === debt.username}
-                   on:click={() => selectSettlement('receive', debt.username, debt.netAmount)}>
+                   onclick={() => selectSettlement('receive', debt.username, debt.netAmount)}
+                   onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('receive', debt.username, debt.netAmount); } }}>
                 <div class="settlement-user">
                   <ProfilePicture username={debt.username} size={40} />
                   <div class="user-details">
@@ -192,8 +195,11 @@
             <h3>Money You Owe</h3>
             {#each debtData.whoIOwe as debt}
               <div class="settlement-option"
+                   role="button"
+                   tabindex="0"
                    class:selected={selectedSettlement?.type === 'pay' && selectedSettlement?.to === debt.username}
-                   on:click={() => selectSettlement('pay', debt.username, debt.netAmount)}>
+                   onclick={() => selectSettlement('pay', debt.username, debt.netAmount)}
+                   onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('pay', debt.username, debt.netAmount); } }}>
                 <div class="settlement-user">
                   <ProfilePicture username={debt.username} size={40} />
                   <div class="user-details">
@@ -259,7 +265,7 @@
           <div class="settlement-actions">
             <button
               class="btn btn-settlement"
-              on:click={processSettlement}
+              onclick={processSettlement}
               disabled={submitting || !settlementAmount}>
               {#if submitting}
                 Recording Settlement...
@@ -267,7 +273,7 @@
                 Record Settlement
               {/if}
             </button>
-            <button class="btn btn-secondary" on:click={() => selectedSettlement = null}>
+            <button class="btn btn-secondary" onclick={() => selectedSettlement = null}>
               Cancel
             </button>
           </div>
@@ -668,11 +674,6 @@
     cursor: not-allowed;
   }
 
-  .back-actions {
-    text-align: center;
-    margin-top: 2rem;
-  }
-
   .actions {
     margin-top: 1.5rem;
   }