Home: align header, sticky side columns, tidy verse header, move backup line

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

src/pages/HomePage.jsx

@@ -138,6 +138,7 @@ export default function HomePage() {
     <PageShell
       title="My Studies"
       active="studies"
+      maxWidth="max-w-6xl xl:max-w-[88rem]"
       actions={(
         <>
           <button type="button" onClick={() => setCurrentPage('insights')} className={linkBtn} title="This week, themes, words, what slipped, follow-ups">Insights</button>
@@ -148,21 +149,12 @@ export default function HomePage() {
     >
       <main className="mx-auto grid max-w-6xl gap-y-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem] xl:max-w-[88rem] xl:grid-cols-[auto_minmax(0,1fr)_21rem]">
         {/* Left column: the recall and daily-verse cards (collapses when neither has anything to show) */}
-        <aside className="empty:hidden lg:col-span-2 xl:col-span-1 xl:w-80 xl:pr-6">
+        <aside className="empty:hidden lg:col-span-2 xl:sticky xl:top-16 xl:col-span-1 xl:max-h-[calc(100vh-5rem)] xl:w-80 xl:self-start xl:overflow-y-auto xl:pr-6">
           <WeeklyRecall />
           <IqDailyCard />
         </aside>
 
         <section className="min-w-0 lg:pr-6">
-          {projectIndex.length > 0 && (() => {
-            const age = backupAge(lastBackupAt());
-            return (
-              <p className={`mb-3 flex flex-wrap items-center gap-2 px-1 text-xs ${age.stale ? 'text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>
-                {age.text}.
-                <button type="button" onClick={openBackup} className="text-[var(--r-accent)] hover:underline">Back up now</button>
-              </p>
-            );
-          })()}
           <DailyFive />
           {autoRestoredCount !== null && (
             <div className={notice}>Synced {autoRestoredCount} project{autoRestoredCount > 1 ? 's' : ''} from another device.</div>
@@ -346,7 +338,7 @@ export default function HomePage() {
           )}
         </section>
 
-        <aside className="space-y-4">
+        <aside className="space-y-4 lg:sticky lg:top-16 lg:max-h-[calc(100vh-5rem)] lg:self-start lg:overflow-y-auto">
           <TodayCard planProgress={planProgress} readingActivity={readingActivity} openReadingPlans={openReadingPlans}
             openPlanReading={openPlanReading} studyReadingPlanDay={studyReadingPlanDay} studyBuildBusy={studyBuildBusy} />
 
@@ -385,6 +377,16 @@ export default function HomePage() {
               </>
             )}
           />
+
+          {projectIndex.length > 0 && (() => {
+            const age = backupAge(lastBackupAt());
+            return (
+              <p className={`flex flex-wrap items-center gap-2 px-1 text-xs ${age.stale ? 'text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>
+                {age.text}.
+                <button type="button" onClick={openBackup} className="text-[var(--r-accent)] hover:underline">Back up now</button>
+              </p>
+            );
+          })()}
         </aside>
       </main>
     </PageShell>