Pin reader and tab bars to their own compositing layer

iOS Safari/PWA can strand fixed and sticky bars mid-screen after the
toolbar collapses or the page rubber-bands. Add a .fixed-bar class
(translateZ(0), will-change: transform) to the reader top/bottom bars
and the phone tab bar.

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

src/components/study/PageShell.jsx

@@ -132,7 +132,7 @@ export default function PageShell({ title, onBack, actions, active = null, maxWi
       {phone && (
         <>
           <div aria-hidden="true" className="h-[calc(5rem+env(safe-area-inset-bottom,0px))]" />
-          <nav aria-label="Main" className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)]">
+          <nav aria-label="Main" className="fixed-bar fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)]">
             {NAV.map((n) => (
               <button key={n.id} type="button" onClick={go[n.id]} aria-current={active === n.id ? 'page' : undefined} aria-label={n.label}
                 className={`flex min-h-[52px] flex-col items-center justify-center gap-0.5 text-[11px] ${active === n.id ? 'text-[var(--r-text)]' : 'text-[var(--r-sub)]'}`}>