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/templates/components/_app_logo.html

@@ -1,35 +1,33 @@
 <!--
-Inline TieMeasureFlow logo. Text fills use `currentColor`, so wrap with a
-parent that sets `color` (e.g. `text-slate-900 dark:text-white`) to make the
-wordmark adapt to the active theme. The caliper/flow icon keeps its brand
-blue regardless of theme.
--->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" fill="none"
-     class="{{ logo_class|default('h-10 w-auto') }}"
-     aria-label="TieMeasureFlow">
-  <!-- Caliper + flow icon (always brand color) -->
-  <g transform="translate(2, 6)">
-    <rect x="0" y="4" width="6" height="32" rx="1.5" fill="#2563EB"/>
-    <rect x="0" y="4" width="24" height="6" rx="1.5" fill="#2563EB"/>
-    <rect x="0" y="30" width="24" height="6" rx="1.5" fill="#2563EB"/>
-    <rect x="14" y="10" width="5" height="8" rx="1" fill="#1E40AF"/>
-    <rect x="14" y="22" width="5" height="8" rx="1" fill="#1E40AF"/>
-    <rect x="2" y="18" width="16" height="4" rx="1" fill="#3B82F6" opacity="0.6"/>
-    <rect x="7" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="10" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="13" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="16" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <rect x="19" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
-    <path d="M26 20 C30 20, 32 14, 36 14 C40 14, 40 20, 36 20"
-          stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" fill="none"/>
-    <path d="M34 17 L37 20 L34 23"
-          stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-  </g>
+TieMeasureFlow logo: brand badge (SVG) + HTML wordmark.
+The wordmark inherits `color` from the parent (set e.g. `text-slate-900
+dark:text-white`); "Measure" keeps the brand blue.
 
-  <!-- Wordmark: themed via currentColor; "Measure" stays brand-tinted -->
-  <g transform="translate(52, 0)" font-family="Inter, system-ui, sans-serif" letter-spacing="-0.5">
-    <text x="0"   y="34" font-size="28" font-weight="700" fill="currentColor">Tie</text>
-    <text x="44"  y="34" font-size="28" font-weight="500" fill="#2563EB">Measure</text>
-    <text x="166" y="34" font-size="28" font-weight="700" fill="currentColor">Flow</text>
-  </g>
-</svg>
+Parameters (set before include):
+  logo_class     — badge size, default 'h-10 w-10'
+  wordmark_class — wordmark text size, default 'text-xl'; '' hides the text
+  logo_id        — unique suffix for the SVG gradient id when the logo
+                   appears more than once per page (default 'tmf')
+-->
+{% set _logo_id = logo_id|default('tmf') %}
+<span class="inline-flex items-center gap-2.5 select-none whitespace-nowrap">
+  <svg class="{{ logo_class|default('h-10 w-10') }} shrink-0" viewBox="0 0 64 64" fill="none"
+       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <defs>
+      <linearGradient id="tmfBadge-{{ _logo_id }}" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0" stop-color="#3B82F6"/>
+        <stop offset="1" stop-color="#1D4ED8"/>
+      </linearGradient>
+    </defs>
+    <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge-{{ _logo_id }})"/>
+    <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"/>
+    <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>
+  {% if wordmark_class is not defined or wordmark_class %}
+  <span class="{{ wordmark_class|default('text-xl') }} font-bold tracking-tight leading-none"
+        aria-label="TieMeasureFlow">Tie<span class="text-primary-600 dark:text-primary-400">Measure</span>Flow</span>
+  {% endif %}
+</span>