fix: 4 bugs — Detail key, ReflectionChecklist data loss, AutoSaveTextarea double-save, scripture-card min-height

- Add key={activeSectionId} to <Detail>: without it React reused the same
  component instance across sections, causing ReflectionChecklist/Journal save
  effects to fire with stale state + new storageKey, briefly writing the wrong
  step's data to another step's localStorage slot
- ReflectionChecklist: replace load useEffect + useState({}) with a lazy
  useState initializer that reads localStorage directly. Eliminates the bug
  where the save effect fired on initial mount with checked={}, overwriting
  real user data before the load effect could restore it
- AutoSaveTextarea: add dedicated handleManualSave for the Save button.
  Previously onClick={handleBlur} caused a double-save on every click: textarea
  blur fires handleBlur, then the click event fires it again
- styles.css: add min-height: var(--min-tap) to .scripture-card to restore
  accessible tap-target size (was on .scripture-card__toggle, now removed)

Author: systemslibrarian

src/App.jsx

@@ -169,18 +169,13 @@ function ScriptureCard({ scripture }) {
 
 function ReflectionChecklist({ items, sectionId }) {
   const storageKey = `hiswillguide-checklist-${sectionId}`;
-  const [checked, setChecked] = useState({});
-
-  useEffect(() => {
-    const raw = window.localStorage.getItem(storageKey);
+  const [checked, setChecked] = useState(() => {
+    const raw = window.localStorage.getItem(`hiswillguide-checklist-${sectionId}`);
     if (raw) {
-      try {
-        setChecked(JSON.parse(raw));
-      } catch {
-        setChecked({});
-      }
+      try { return JSON.parse(raw); } catch { /* ignore */ }
     }
-  }, [storageKey]);
+    return {};
+  });
 
   useEffect(() => {
     window.localStorage.setItem(storageKey, JSON.stringify(checked));
@@ -327,6 +322,14 @@ function AutoSaveTextarea({ storageKey, placeholder }) {
     doSave(valueRef.current);
   };
 
+  const handleManualSave = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    doSave(valueRef.current);
+  };
+
   useEffect(() => {
     return () => {
       if (timerRef.current) {
@@ -349,7 +352,7 @@ function AutoSaveTextarea({ storageKey, placeholder }) {
         placeholder={placeholder}
       />
       <div className="journal-actions">
-        <button className="primary-button" onClick={handleBlur} type="button">
+        <button className="primary-button" onClick={handleManualSave} type="button">
           {label}
         </button>
       </div>
@@ -972,6 +975,7 @@ export default function App() {
     if (activeSectionId && VALID_SECTION_IDS.has(activeSectionId)) {
       return (
         <Detail
+          key={activeSectionId}
           activeId={activeSectionId}
           onBack={navigateHome}
           onNavigate={navigateTo}

src/styles.css

@@ -746,6 +746,7 @@ button, a, [role="checkbox"] {
 .scripture-card {
   padding: 16px;
   cursor: pointer;
+  min-height: var(--min-tap);
 }
 
 .scripture-card:focus-visible {