Reading plans: integrated into the Reader, redesigned, with per-plan translation

Reader: plan strip with a dot per chapter, plan sheet (day picker, chapter
ticks, translation, streak, other plans), end-of-day card that steps through
the day and rolls into the next, and chapter-level auto-marking.
Each plan remembers its own translation (BSB, ESV, NLT, CSB, NASB, NET) and the
Reader follows it while a plan is open. Plans home redesigned in the reader's
themes with a Continue card, in-progress plans, a filterable catalog, and
sheets for details and the custom-plan builder.

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

src/components/reader/NavigatorSheet.jsx

@@ -7,7 +7,7 @@ import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
 const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
 const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';
 
-export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, onGo }) {
+export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, translationNote, onGo }) {
   const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
   const close = () => { setPickedBook(null); onClose(); };
   const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;
@@ -33,6 +33,7 @@ export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, tra
               </button>
             ))}
           </div>
+          {translationNote && <p className="-mt-1 mb-3 text-[11px] text-[var(--r-sub)]">{translationNote}</p>}
           <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
           <div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
           <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>