fix: bg reference purport update

app/(app)/books/chapter-viewer.tsx

@@ -219,9 +219,17 @@ function VerseCard({
               Purport
             </h3>
             <div className="text-base text-foreground leading-relaxed space-y-3">
-              {verse.purport.map((p, i) => (
-                <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
-              ))}
+              {verse.purport.map((p, i) =>
+                // Cited ślokas come wrapped in <blockquote class="shloka"> — a
+                // block element that can't live inside a <p>, so render those
+                // in a <div> (styled centered + accent via globals.css); plain
+                // prose paragraphs stay as <p>.
+                /^\s*<blockquote/i.test(p) ? (
+                  <div key={i} dangerouslySetInnerHTML={{ __html: p }} />
+                ) : (
+                  <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
+                ),
+              )}
             </div>
           </div>
         )}

app/globals.css

@@ -452,3 +452,16 @@
 .reading-justified main {
     text-align: justify;
 }
+
+/* Cited Sanskrit ślokas quoted inside a purport (wrapped by the extractor as
+   <blockquote class="shloka">). Set them apart from the running commentary —
+   centered, italic, in the primary (peacock) accent — so it reads at a glance
+   as a verse quoted from another reference rather than as prose. Placed last so
+   the centering wins over .reading-justified. */
+blockquote.shloka {
+    margin: 0.75rem 0;
+    text-align: center;
+    font-style: italic;
+    color: var(--primary);
+    line-height: 1.7;
+}