Redesign gradient control as ASCII diverging-fill scale

Replace the click-anywhere ASCII bar (whose hit-mapping was offset from
the displayed marker, so taps registered the wrong value) with a track of
nine discrete, exact tap targets that fill from the center outward to the
selection: [----==#--]. Direction and distance from center read at a glance.

- Exact per-position selection on touch and desktop; no more position math
- Keyboard support (arrows/Home/End), scoped so it doesn't trigger
  the app-level screen navigation
- Center the bar and slim mobile padding so the full track fits narrow
  viewports
- Apply the same control to the manual analysis gradient; render the
  automated ones as a matching read-only, dimmed display
- Add a subtle gray "Value: #" indicator below the buttons on the
  diagnostic gradients, matching the analysis screens
- Move the "auto-calculated" note under the ANALYSIS header instead of
  after the value

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

bicorder-app/src/App.svelte

@@ -569,6 +569,10 @@
         <div class="focused-screen gradient-screen">
           <div class="screen-category">ANALYSIS</div>
 
+          {#if screen.gradient.automated}
+            <div class="analysis-auto-note">auto-calculated</div>
+          {/if}
+
           {#if isFirstAnalysisScreen}
             <AnalysisTransitionBanner
               recommendation={formRecommendation}
@@ -820,6 +824,15 @@
     opacity: 0.6;
   }
 
+  .analysis-auto-note {
+    text-align: center;
+    color: #888888;
+    font-size: 0.85rem;
+    font-style: italic;
+    margin-top: -1.5rem;
+    margin-bottom: 2rem;
+  }
+
   .gradient-focused {
     padding: 0;
     display: flex;