Fix header overlap in invoice PDF and Bongbetic wordmark on light theme

react-pdf wraps text once at the first flex measure; when yoga then shrank
the vendor column the cached lines ran under the INVOICE meta column. The
header now pins column widths (299 + 24 + 192 pt), sizes the logo from its
own aspect (stacked above the text when it would leave under 160 pt), uses
absolute per-Text line heights, and turns hyphenation off.

Also: repeating table header with an orphan-header guard, wrap=false rows,
Page n of N footer, GSTIN printed only when present, one Text per address
line, HTML twin header grid. The light-theme header showed the white-text
wordmark; the ternary was inverted.

Adds vitest + pdfjs-dist harness that fails on the old document (address
overlaps Invoice No.) and passes on the new one.

src/components/AppShell.tsx

@@ -29,8 +29,10 @@ interface AppShellProps {
 }
 
 export function AppShell({ view, onNavigate, theme, onToggleTheme, children }: AppShellProps) {
+  // The Carbon header background follows the theme: light on g10, dark on g100.
+  // The "dark" wordmark has dark text for light surfaces; "light" has white text for dark ones.
   const wordmark =
-    theme === "g100" ? "/brand/bongbetic-wordmark-light.png" : "/brand/bongbetic-wordmark-dark.png";
+    theme === "g100" ? "/brand/bongbetic-wordmark-dark.png" : "/brand/bongbetic-wordmark-light.png";
 
   return (
     <>

src/components/InvoicePreview.tsx

@@ -34,7 +34,6 @@ export function InvoicePreview(props: InvoicePdfProps) {
   } = props;
 
   const isTaxInvoice = taxType !== "none";
-  const contact = [vendor.vendorEmail, vendor.vendorPhone].filter(Boolean).join("  ·  ");
 
   return (
     <div className="inv-preview-wrap">
@@ -45,9 +44,10 @@ export function InvoicePreview(props: InvoicePdfProps) {
             <div>
               <h2 className="inv-vendor__name">{vendor.vendorName || "Vendor"}</h2>
               <p className="inv-vendor__line">{vendor.vendorAddress}</p>
-              {contact ? <p className="inv-vendor__line">{contact}</p> : null}
+              {vendor.vendorEmail ? <p className="inv-vendor__line">{vendor.vendorEmail}</p> : null}
+              {vendor.vendorPhone ? <p className="inv-vendor__line">{vendor.vendorPhone}</p> : null}
               {vendor.vendorPan ? <p className="inv-vendor__line">PAN: {vendor.vendorPan}</p> : null}
-              <p className="inv-vendor__line">GSTIN: {vendor.vendorGstin || "NA"}</p>
+              {vendor.vendorGstin ? <p className="inv-vendor__line">GSTIN: {vendor.vendorGstin}</p> : null}
             </div>
           </div>
           <div className="inv-meta">