Redesign project header and study navigation

- Header: navigation buttons grouped; Study Guide, Podcast, and
  Pronunciation Guide move into a Tools menu (disabled until a chunk
  exists), set apart from Export and Share by a divider.
- Only one header dropdown is open at a time, and it closes on an
  outside click or Escape.
- Study page: drop the duplicate Prev/Next and counter at the top; the
  fixed bottom bar is the single chunk navigation and now shows a
  readable "Chunk N of M".
- Mobile empty-state hint points to Back to Chunks.
- Tests: Tools menu, one-dropdown-at-a-time, Escape/outside click.

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

src/pages/StudyPage.jsx

@@ -282,34 +282,6 @@ export default function StudyPage() {
                 </h2>
               </div>
               <div className="flex flex-wrap items-center gap-2">
-                {selectedChunk && (
-                  <>
-                    <button
-                      type="button"
-                      onClick={goToPreviousChunk}
-                      disabled={selectedChunkGlobalIndex <= 0}
-                      className="rounded-2xl border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      ‹ Prev
-                    </button>
-                    <div className="rounded-2xl bg-slate-100 px-3 py-2 text-sm text-slate-700">
-                      {`Chunk ${selectedChunkGlobalIndex + 1} of ${allChunks.length}`}
-                    </div>
-                    <button
-                      type="button"
-                      onClick={goToNextChunk}
-                      disabled={selectedChunkGlobalIndex >= allChunks.length - 1}
-                      className="rounded-2xl border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      Next ›
-                    </button>
-                  </>
-                )}
-                {!selectedChunk && (
-                  <div className="rounded-2xl bg-slate-100 px-3 py-2 text-sm text-slate-700">
-                    Choose a chunk to study.
-                  </div>
-                )}
                 <div className="max-sm:hidden flex divide-x divide-slate-200 overflow-hidden rounded-2xl border border-slate-300">
                   {[
                     { id: 'stacked', label: '☰ Stacked' },
@@ -997,7 +969,7 @@ export default function StudyPage() {
               </div>
             ) : (
               <div className="mt-6 rounded-3xl border border-slate-200 bg-slate-50 p-8 text-center text-slate-500">
-                <span className="sm:hidden">Use ‹ Prev / Next › above to pick a chunk.</span>
+                <span className="sm:hidden">Add a chunk from ← Back to Chunks to start studying.</span>
                 <span className="hidden sm:inline">Select a chunk from the left panel to edit its notes and Greek studies.</span>
               </div>
             )}
@@ -1005,7 +977,7 @@ export default function StudyPage() {
         </section>
       </main>
 
-      {/* Prev / Next — fixed bottom bar, visible while scrolling long chunks */}
+      {/* Prev / Next — fixed bottom bar, stays visible while scrolling long chunks */}
       {selectedChunk && (
         <div className="fixed bottom-0 inset-x-0 z-20 border-t border-slate-200 bg-white/95 backdrop-blur-sm">
           <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
@@ -1017,8 +989,8 @@ export default function StudyPage() {
             >
               ← Previous Chunk
             </button>
-            <span className="text-xs text-slate-400">
-              {selectedChunkGlobalIndex + 1} / {allChunks.length}
+            <span aria-live="polite" className="text-sm font-medium text-slate-600">
+              {`Chunk ${selectedChunkGlobalIndex + 1} of ${allChunks.length}`}
             </span>
             <button
               type="button"