style: global Lucide SVG inline flow fix in app.css

Lucide renders <svg> elements which default to inline-block in browsers,
causing icons to break onto their own line when mixed with text — unlike
FA spans which were display:inline.

Added svg.lucide { display: inline; vertical-align: middle; } to app.css
so all Lucide icons flow inline with adjacent text globally, matching the
FA icon behavior without needing class="inline" on every icon instance.

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

src/app.css

@@ -168,6 +168,23 @@ html.light { color-scheme: light; }
     background-color: rgb(55 65 81);
 }
 
+/* ============================================================
+ * Lucide SVG icon inline flow fix.
+ *
+ * FA icon spans were display:inline and flowed naturally with adjacent text.
+ * Lucide renders <svg> elements which default to inline-block in most browsers,
+ * causing icons to break onto their own line when mixed with text.
+ *
+ * This global rule restores the FA-equivalent behavior: icons flow inline
+ * with text and are vertically centered on the text baseline.
+ * Components that already explicitly set display:flex on their parent are
+ * unaffected — flex children ignore display:inline.
+ * ============================================================ */
+svg.lucide {
+    display: inline;
+    vertical-align: middle;
+}
+
 /* There are no more Tailwind layers. */
 
 html,