Fix WeatherCard ASCII art right-border alignment

Space padding was inconsistent across rows (31-34 chars inner
width). Corrected all rows to exactly 31 chars matching the
top/bottom border dash count.

Author: jpr5

docs/index.html

@@ -1098,12 +1098,12 @@ <h3>Hook Explorer (Generative UI)</h3>
                 <pre><span class="syn-comment">// Rendered without running the agent loop</span>
 
 <span class="t-dim">&#9484;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9488;</span>
-<span class="t-dim">&#9474;</span> <span class="syn-type">WeatherCard</span>                      <span class="t-dim">&#9474;</span>
-<span class="t-dim">&#9474;</span>                                <span class="t-dim">&#9474;</span>
-<span class="t-dim">&#9474;</span>  <span class="t-yellow">&#9737;</span>  <span class="t-dim">Loading weather data...</span>     <span class="t-dim">&#9474;</span>
+<span class="t-dim">&#9474;</span> <span class="syn-type">WeatherCard</span>                   <span class="t-dim">&#9474;</span>
+<span class="t-dim">&#9474;</span>                               <span class="t-dim">&#9474;</span>
+<span class="t-dim">&#9474;</span>  <span class="t-yellow">&#9737;</span>  <span class="t-dim">Loading weather data...</span>   <span class="t-dim">&#9474;</span>
 <span class="t-dim">&#9474;</span>     <span class="t-dim">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>          <span class="t-dim">&#9474;</span>
 <span class="t-dim">&#9474;</span>     <span class="t-dim">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>                  <span class="t-dim">&#9474;</span>
-<span class="t-dim">&#9474;</span>                                <span class="t-dim">&#9474;</span>
+<span class="t-dim">&#9474;</span>                               <span class="t-dim">&#9474;</span>
 <span class="t-dim">&#9492;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9496;</span>
 
 <span class="t-dim">State:</span> <span class="t-yellow">in-progress</span>