ui: redesign brand icon and fix clipped wordmark

- new mark: measurement-span glyph on rounded brand-gradient badge
  (favicon, inline logo, standalone tmflow-logo.svg)
- wordmark moved from SVG <text> with hardcoded x offsets (clipped
  "Flow" past the 260px viewBox, font-dependent overlap) to plain HTML
  spans — never clips, natural kerning, theme-adaptive
- _app_logo.html params: logo_class, wordmark_class, logo_id (unique
  gradient id when logo appears twice per page)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/frontend/flask_app/static/img/tmflow-icon.svg

@@ -1,27 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <!-- Stylized Caliper Icon for Favicon -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- TieMeasureFlow brand mark: measurement span glyph on brand-blue badge -->
+  <defs>
+    <linearGradient id="tmfBadge" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3B82F6"/>
+      <stop offset="1" stop-color="#1D4ED8"/>
+    </linearGradient>
+  </defs>
 
-  <!-- Caliper outer frame -->
-  <rect x="2" y="3" width="5" height="26" rx="1.5" fill="#2563EB"/>
-  <rect x="2" y="3" width="19" height="5" rx="1.5" fill="#2563EB"/>
-  <rect x="2" y="24" width="19" height="5" rx="1.5" fill="#2563EB"/>
+  <!-- Badge -->
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge)"/>
 
-  <!-- Sliding jaw -->
-  <rect x="12" y="8" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
-  <rect x="12" y="17.5" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
+  <!-- Measurement end bars -->
+  <rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
+  <rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
 
-  <!-- Depth rod -->
-  <rect x="4" y="14" width="12" height="3.5" rx="1" fill="#3B82F6" opacity="0.55"/>
-
-  <!-- Scale markings -->
-  <rect x="8" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="11" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="14" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-  <rect x="17" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
-
-  <!-- Flow arrow -->
-  <path d="M22 16 C25 16, 26.5 11, 29 11"
-        stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round" fill="none"/>
-  <path d="M27 8.5 L29.5 11 L27 13.5"
-        stroke="#3B82F6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <!-- Double-headed arrow (measured span) -->
+  <path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+  <path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>