fix gauge gradient: multi-segment arcs (no defs), hero height + signal wrap sizing

app.py

@@ -368,11 +368,11 @@ TOTEM_CSS = """
 
 .totem-hero {
   position: relative;
-  padding: 40px 52px;
+  padding: 44px 52px 52px 52px;
   overflow: hidden;
   border: 1px solid rgba(242, 193, 78, 0.35);
   background: #06091e;
-  min-height: 200px;
+  min-height: 240px;
 }
 
 .totem-hero::after {
@@ -413,8 +413,9 @@ TOTEM_CSS = """
 }
 
 .totem-hero-right {
-  flex: 0 0 180px;
+  flex: 0 0 200px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
@@ -424,8 +425,8 @@ TOTEM_CSS = """
   right: auto;
   top: auto;
   transform: none;
-  width: 160px;
-  height: 160px;
+  width: 170px;
+  height: 170px;
 }
 
 .totem-signal {
@@ -1323,41 +1324,44 @@ def render_topbar(state: dict) -> str:
 
 def render_signal_gauge(value: int) -> str:
     clamped = max(0, min(100, int(value or 0)))
-    circumference = 427.26
-    progress = clamped / 100.0
-    dash_offset = circumference * (1 - progress)
-    # Color state based on signal strength per manual spec
-    if clamped < 25:
-        state_class = "gauge-state-low"
-    elif clamped < 50:
-        state_class = "gauge-state-weak"
-    elif clamped < 70:
-        state_class = "gauge-state-developing"
-    elif clamped < 85:
-        state_class = "gauge-state-strong"
-    else:
-        state_class = "gauge-state-excellent"
+    circ = 427.26
+    filled = circ * (clamped / 100.0)
+    # Segment colours: violet, cyan, emerald, gold - each covers 25% of circumference
+    # We layer 4 coloured arcs masked by dasharray to fake a gradient
+    seg = circ / 4  # 106.815 per segment
+    segs = [
+        ("#8A4DFF", 0),
+        ("#39C9FF", 1),
+        ("#22B573", 2),
+        ("#F2C14E", 3),
+    ]
+    arc_elements = []
+    for color, idx in segs:
+        seg_start = idx * seg
+        seg_end = (idx + 1) * seg
+        if filled <= seg_start:
+            break  # nothing to draw for this segment
+        seg_filled = min(filled - seg_start, seg)
+        # offset = circ - seg_filled, rotated so this segment starts at the right angle
+        rotate_deg = -90 + (seg_start / circ) * 360
+        arc_elements.append(
+            f'<circle cx="80" cy="80" r="68" fill="none" stroke="{color}" '
+            f'stroke-width="7" stroke-linecap="round" '
+            f'stroke-dasharray="{seg_filled:.2f} {circ:.2f}" '
+            f'stroke-dashoffset="0" '
+            f'style="transform:rotate({rotate_deg:.1f}deg);transform-origin:80px 80px;'
+            f'filter:drop-shadow(0 0 4px {color}88);" />'
+        )
+    arcs_html = "\n        ".join(arc_elements)
     return f"""
-    <div class="totem-signal-wrap {state_class}">
+    <div class="totem-signal-wrap">
       <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
-        <defs>
-          <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" stop-color="#8A4DFF"/>
-            <stop offset="40%" stop-color="#39C9FF"/>
-            <stop offset="75%" stop-color="#22B573"/>
-            <stop offset="100%" stop-color="#F2C14E"/>
-          </linearGradient>
-        </defs>
         <!-- Outer decorative ring -->
         <circle class="signal-outer-ring" cx="80" cy="80" r="76"></circle>
         <!-- Track -->
         <circle class="signal-track" cx="80" cy="80" r="68"></circle>
-        <!-- Progress arc -->
-        <circle
-          class="signal-progress"
-          cx="80" cy="80" r="68"
-          style="stroke-dasharray:{circumference:.2f};stroke-dashoffset:{dash_offset:.2f};"
-        ></circle>
+        <!-- Gradient arc segments -->
+        {arcs_html}
         <!-- Inner radar rings -->
         <circle class="signal-inner-ring" cx="80" cy="80" r="52"></circle>
         <circle class="signal-inner-ring" cx="80" cy="80" r="40"></circle>