Verse of the day with picture backgrounds, shareable image, and study covers

- Verse of the day: card over a picture (a different one each day, or chosen),
  12 drawn scenes plus photos from public/verse-backgrounds, and "Share as
  image" (also on the Reader's verse panel) that saves or shares a PNG with the
  same background, a theme look, or a photo from the device
- Study cards get a cover banner named for the book, coloured by kind of book
- Outline "Build from my notes": abbreviations like "A.D. 63." no longer end a
  sentence

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

src/components/BookCover.jsx

@@ -0,0 +1,27 @@
+// The picture on a study's card: a coloured cover for the kind of book, with the book's name.
+import { coverFor } from '../utils/bookCovers.js';
+
+export default function BookCover({ summary, className = '' }) {
+  const { group, name, extra } = coverFor(summary);
+  const [from, to] = group.colors;
+  const id = `cover-${group.id}`;
+  return (
+    <div className={`relative overflow-hidden rounded-xl ${className}`} role="img" aria-label={`${name}${extra ? ` and ${extra} more` : ''}, ${group.label}`}>
+      <svg viewBox="0 0 400 120" preserveAspectRatio="xMidYMid slice" className="block h-full w-full" aria-hidden="true">
+        <defs>
+          <linearGradient id={id} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={from} /><stop offset="1" stopColor={to} /></linearGradient>
+        </defs>
+        <rect width="400" height="120" fill={`url(#${id})`} />
+        <g fill="none" stroke="#fff" strokeOpacity="0.1" strokeWidth="1.5">
+          <circle cx="360" cy="20" r="70" /><circle cx="360" cy="20" r="50" /><circle cx="360" cy="20" r="30" />
+          <circle cx="30" cy="120" r="60" /><circle cx="30" cy="120" r="40" />
+        </g>
+        <rect x="20" y="22" width="28" height="3" rx="1.5" fill="#fff" fillOpacity="0.7" />
+        <text x="20" y="62" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 13 ? 26 : 32} fontWeight="600">{name}</text>
+        <text x="20" y="90" fill="#fff" fillOpacity="0.8" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="13" letterSpacing="1.5">
+          {group.label.toUpperCase()}{extra ? `  ·  +${extra} MORE` : ''}
+        </text>
+      </svg>
+    </div>
+  );
+}