mobile: wrap tabs, trim portfolio + markets bar columns

Three pieces of phone-side feedback:

1. Indicator group tabs wrap onto multiple rows instead of
   horizontal-scrolling — every group is visible at a glance. Each
   button keeps its own bottom border so wrapped rows stay
   visually delimited; the container's bottom border is removed.

2. Portfolio holdings table hides Qty and Avg columns on mobile via
   the mobile-hide class (same mechanism as the indicator table).
   Remaining columns are the actionable ones: Ticker, Name, Last,
   P/L, %.

3. Markets bar at the bottom compacts to one row per chip —
   dot + code + change% only. The state word ("open" / "closed")
   is implied by the dot colour; the index label, price, and
   until-time are dropped on mobile. Grid columns drop their 220px
   floor so the full set fits the viewport without horizontal
   scroll (previously the bar scrolled within itself).

app/templates/partials/portfolio.html

@@ -51,8 +51,8 @@
       <tr>
         <th>Ticker</th>
         <th>Name</th>
-        <th class="num">Qty</th>
-        <th class="num">Avg</th>
+        <th class="num mobile-hide">Qty</th>
+        <th class="num mobile-hide">Avg</th>
         <th class="num">Last</th>
         <th class="num">P/L</th>
         <th class="num">%</th>
@@ -63,8 +63,8 @@
       <tr>
         <td class="label">{{ pos.ticker }}</td>
         <td>{{ pos.name or "" }}</td>
-        <td class="num">{{ pos.quantity | price }}</td>
-        <td class="num neu">{{ pos.average_price | price }}</td>
+        <td class="num mobile-hide">{{ pos.quantity | price }}</td>
+        <td class="num neu mobile-hide">{{ pos.average_price | price }}</td>
         <td class="num">{{ pos.current_price | price }}</td>
         <td class="num {% if pos.ppl is none %}neu{% elif pos.ppl >= 0 %}pos{% else %}neg{% endif %}">
           {{ pos.ppl | signed }}