mobile: per-view ≤480px rules across the CSS bundle

Adds the @media (max-width: 480px) blocks specified in the design:

- dashboard.css: indicator table hides the 'mobile-hide'-tagged
  columns (Label, Ccy, 1y, anchor, as-of), keeping Symbol / Price /
  1d / 1m. Cell padding + font shrink. Group-tab buttons get a
  bigger touch target.
- panels.css: header padding tightens, scroll-body max-height drops
  to 60vh so log/news stay above the fold in the stacked layout.
- portfolio.css: overall grid keeps 2 cols (already at 640px) with
  tighter gap; action buttons wrap; composer input goes full-width.
- log-chat.css: chat bubbles edge-to-edge, input row stacks, font-
  size:14px on form fields to avoid iOS Safari zoom-on-focus.
- news.css: row collapses to age | (title / source) — source moves
  under the title. Tag filter strip wraps.
- settings.css: form rows stack (label above input). Import picker
  becomes single-column. Buttons full-width.
- auth.css: card padding tightens to free up vertical space when the
  iOS keyboard is up. font-size:14px on inputs.
- public.css: hero headline clamp() lower bound drops to 22px; CTAs
  stack full-width; pricing tier-grid stacks.

indicators.html: tagged the secondary cells with .mobile-hide rather
than relying on positional nth-child — the anchor column is
conditional and would have shifted positions.

336 tests still pass.

app/static/css/portfolio.css

@@ -374,3 +374,33 @@ details[open] .pf-analysis__head-left::before { content: "▾ "; }
   color: var(--muted);
   background: color-mix(in srgb, var(--accent) 4%, transparent);
 }
+
+
+/* --- Mobile (≤480px) -------------------------------------------------- */
+
+@media (max-width: 480px) {
+  /* The existing 640px breakpoint already moves the overall grid to
+     2 cols. At ≤480 we keep 2 cols but tighten gap so the stat
+     values don't crowd the labels next to them. */
+  .pf-overall__grid { gap: 4px 12px; }
+  .pf-stat-value { font-size: 14px; }
+
+  /* Action buttons wrap to multiple rows instead of squishing onto
+     one. flex-wrap was already set above; ensure each button has a
+     comfortable tap target. */
+  .pf-actions { flex-wrap: wrap; gap: 6px; }
+  .pf-actions button {
+    flex: 1 1 auto;
+    padding: 8px 12px;
+    font-size: 11.5px;
+  }
+
+  /* Pill row stays wrapped; just give pills a small min-width so
+     two-character tags (USD, EUR) don't hug each other awkwardly. */
+  .pf-pill { padding: 3px 7px; }
+
+  /* The inline composer's input gets the full width — the desktop's
+     intrinsic-width sizing leaves it tiny on a phone. */
+  .pf-add__line { flex-wrap: wrap; gap: 6px; }
+  .pf-add__line input, .pf-add__line textarea { width: 100%; }
+}