feat: add eyebrow_label/importance_marker/meta_row/sort_by_impact helpers; neutralize card surfaces (Task 2)

- Add FS_BODY, FS_META, FS_EYEBROW to imports from dashboard.theme
- New eyebrow_label(): centralises uppercase micro-label pattern using FS_EYEBROW
- New importance_marker(): monochrome HIGH/MEDIUM/LOW dot+word, no green/red
- New meta_row(): single attribution line replacing 3-badge stacks (reliability/source/impact)
- New sort_by_impact(): stable HIGH→MEDIUM→LOW→unknown sort on lists of dicts
- interpretation_card: background AI_BG→BG (white), keep violet left edge + ai_badge
- fact_card: replace 3-badge div with meta_row(); apply FS_BODY; add max-width:680px
- tension_card: outer BG white + amber left edge; inner panels BG_MUTED + BORDER;
move ai_badge to outer header (one, not two); replace badge rows with meta_row()
- earnings_quality_card: background always BG (white); drop ai_badge("AI assessment");
replace 3-badge row with meta_row()
- delta_card: background BG (white), keep kind-colored left edge + existing pill row
- numbered_list: apply FS_BODY to item text; add max-width:680px to container

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboard/components.py

@@ -9,6 +9,7 @@ from dashboard.theme import (
     PURPLE, AI_BG, AI_BORDER, AI_COLOR, AI_BADGE_BG,
     IMPACT_HIGH_BG, IMPACT_MED_BG, IMPACT_LOW_TEXT,
     RADIUS_CHIP,
+    FS_BODY, FS_META, FS_EYEBROW,
 )
 
 # ── Reliability badge ─────────────────────────────────────────────────────────
@@ -65,11 +66,11 @@ def interpretation_card(
     badge_label: str = "AI Synthesis",
 ) -> str:
     return (
-        f'<div class="primer-card" style="background:{AI_BG};border:1px solid {AI_BORDER};'
+        f'<div class="primer-card" style="background:{BG};border:1px solid {AI_BORDER};'
         f'border-left:4px solid {PURPLE};border-radius:0 12px 12px 0;'
         f'padding:20px 24px;margin-bottom:4px;">'
         f'<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">'
-        f'<span style="font-size:0.62rem;font-weight:700;letter-spacing:0.1em;'
+        f'<span style="font-size:{FS_EYEBROW};font-weight:700;letter-spacing:0.1em;'
         f'text-transform:uppercase;color:{TEXT_MUTED};">{header_label}</span>'
         f'{ai_badge(badge_label)}'
         f'</div>'
@@ -104,6 +105,99 @@ def source_badge(s: str) -> str:
     )
 
 
+# ── Eyebrow label ─────────────────────────────────────────────────────────────
+
+def eyebrow_label(text: str, color: str = TEXT_MUTED) -> str:
+    """Uppercase micro-label used as a section/card eyebrow."""
+    return (
+        f'<span style="font-size:{FS_EYEBROW};font-weight:700;text-transform:uppercase;'
+        f'letter-spacing:0.1em;color:{color};">{text}</span>'
+    )
+
+
+# ── Importance marker ─────────────────────────────────────────────────────────
+
+_IMPORTANCE_MAP: dict[str, tuple[str, str, str, str, str]] = {
+    # impact → (dot_char, dot_color, text_label, text_color, font_weight)
+    "HIGH":   ("●", "#0f172a", "Critical",  "#0f172a", "600"),
+    "MEDIUM": ("●", "#64748b", "Important", "#64748b", "500"),
+    "LOW":    ("○", "#94a3b8", "Context",   "#94a3b8", "500"),
+}
+
+def importance_marker(impact: str) -> str:
+    """Monochrome dot + word marker for impact level. No green/red — never competes with bull/bear."""
+    spec = _IMPORTANCE_MAP.get((impact or "").upper())
+    if not spec:
+        return ""
+    dot_char, dot_color, text_label, text_color, fw = spec
+    return (
+        f'<span style="font-size:{FS_META};font-weight:{fw};color:{text_color};'
+        f'display:inline-flex;align-items:center;gap:3px;">'
+        f'<span style="color:{dot_color};">{dot_char}</span>'
+        f'{text_label}'
+        f'</span>'
+    )
+
+
+# ── Meta row ─────────────────────────────────────────────────────────────────
+
+_RELIABILITY_LABELS: dict[str, str] = {
+    "HIGH":   "High confidence",
+    "MEDIUM": "Confidence med.",
+    "LOW":    "Low confidence",
+}
+
+def meta_row(reliability: str, source: str, impact: str) -> str:
+    """Single subtle attribution line replacing the 3-badge stack.
+
+    Example output: ● Critical · 10-Q · High confidence
+    Returns "" if all args are empty/None.
+    """
+    if not reliability and not source and not impact:
+        return ""
+
+    parts: list[str] = []
+
+    impact_str = (impact or "").upper()
+    marker_html = importance_marker(impact_str)
+    if marker_html:
+        parts.append(marker_html)
+
+    if source:
+        parts.append(
+            f'<span style="font-size:{FS_META};color:{TEXT_MUTED};">{source}</span>'
+        )
+
+    if reliability:
+        rel_label = _RELIABILITY_LABELS.get(reliability.upper(), reliability.title())
+        parts.append(
+            f'<span style="font-size:{FS_META};color:{TEXT_MUTED};">{rel_label}</span>'
+        )
+
+    if not parts:
+        return ""
+
+    sep = f'<span style="font-size:{FS_META};color:{TEXT_MUTED};margin:0 2px;">·</span>'
+    inner = sep.join(parts)
+    return (
+        f'<div style="font-size:{FS_META};color:{TEXT_MUTED};margin-top:8px;'
+        f'display:flex;align-items:center;gap:4px;flex-wrap:wrap;">'
+        f'{inner}'
+        f'</div>'
+    )
+
+
+# ── Sort by impact ────────────────────────────────────────────────────────────
+
+_IMPACT_ORDER: dict[str, int] = {"HIGH": 0, "MEDIUM": 1, "LOW": 2}
+
+def sort_by_impact(items: list[dict]) -> list[dict]:
+    """Stable sort: HIGH → MEDIUM → LOW → None/unknown. Returns a new list."""
+    def _key(item: dict) -> int:
+        return _IMPACT_ORDER.get((item.get("impact") or "").upper(), 3)
+    return sorted(items, key=_key)
+
+
 # ── Section page header ───────────────────────────────────────────────────────
 
 def section_header(title: str, subtitle: str = "") -> str:
@@ -144,21 +238,17 @@ def evidence_quote(snippet: str, bg: str = "#fafaf9", border_color: str = "#e5e7
 # ── Sourced-fact card ─────────────────────────────────────────────────────────
 
 def fact_card(fact: dict, accent: str = GREEN) -> None:
-    """Render a sourced-fact card with left accent border, evidence quote, and badges."""
+    """Render a sourced-fact card with left accent border, evidence quote, and meta row."""
     st.markdown(
         f"""
-        <div class="primer-card" style="padding:18px 20px;margin-bottom:8px;
+        <div class="primer-card primer-prose" style="padding:18px 20px;margin-bottom:8px;
                     background:{BG};border:1px solid {BORDER};
-                    border-left:3px solid {accent};border-radius:0 8px 8px 0;">
-            <div style="font-size:0.9rem;line-height:1.5;margin-bottom:8px;color:{TEXT};">
+                    border-left:3px solid {accent};border-radius:0 8px 8px 0;max-width:680px;">
+            <div style="font-size:{FS_BODY};line-height:1.5;margin-bottom:8px;color:{TEXT};">
                 {fact.get("text","")}
             </div>
             {evidence_quote(fact.get("evidence_snippet",""), bg=BG_MUTED, border_color=BORDER)}
-            <div style="margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;">
-                {reliability_badge(fact.get("reliability",""))}
-                {source_badge(fact.get("source",""))}
-                {impact_badge(fact.get("impact","") or "")}
-            </div>
+            {meta_row(fact.get("reliability",""), fact.get("source",""), fact.get("impact","") or "")}
         </div>
         """,
         unsafe_allow_html=True,
@@ -190,49 +280,42 @@ def tension_card(tension: dict) -> None:
     )
 
     bull_side = (
-        f'<div style="flex:1;padding:12px 14px;background:{BULL_BG};border:1px solid {BULL_BORDER};'
+        f'<div style="flex:1;padding:12px 14px;background:{BG_MUTED};border:1px solid {BORDER};'
         f'border-radius:8px;min-width:0;">'
         f'<div style="display:flex;align-items:center;gap:5px;margin-bottom:6px;">'
-        f'<span style="font-size:0.58rem;font-weight:700;text-transform:uppercase;'
+        f'<span style="font-size:{FS_EYEBROW};font-weight:700;text-transform:uppercase;'
         f'letter-spacing:0.09em;color:#059669;">Surface reading</span>'
-        f'{ai_badge("AI")}'
         f'</div>'
         f'<div style="font-size:0.82rem;line-height:1.5;color:{TEXT};margin-bottom:8px;">'
         f'{bullish_reading}</div>'
-        f'{evidence_quote(bull_ev.get("evidence_snippet","") if isinstance(bull_ev, dict) else "", bg=BG, border_color=BULL_BORDER)}'
-        f'<div style="margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;">'
-        f'{reliability_badge(bull_ev.get("reliability","") if isinstance(bull_ev, dict) else "")}'
-        f'{source_badge(bull_ev.get("source","") if isinstance(bull_ev, dict) else "")}'
-        f'{impact_badge((bull_ev.get("impact","") or "") if isinstance(bull_ev, dict) else "")}'
-        f'</div>'
+        f'{evidence_quote(bull_ev.get("evidence_snippet","") if isinstance(bull_ev, dict) else "", bg=BG, border_color=BORDER)}'
+        f'{meta_row(bull_ev.get("reliability","") if isinstance(bull_ev, dict) else "", bull_ev.get("source","") if isinstance(bull_ev, dict) else "", (bull_ev.get("impact","") or "") if isinstance(bull_ev, dict) else "")}'
         f'</div>'
     )
     bear_side = (
-        f'<div style="flex:1;padding:12px 14px;background:{BEAR_BG};border:1px solid {BEAR_BORDER};'
+        f'<div style="flex:1;padding:12px 14px;background:{BG_MUTED};border:1px solid {BORDER};'
         f'border-radius:8px;min-width:0;">'
         f'<div style="display:flex;align-items:center;gap:5px;margin-bottom:6px;">'
-        f'<span style="font-size:0.58rem;font-weight:700;text-transform:uppercase;'
+        f'<span style="font-size:{FS_EYEBROW};font-weight:700;text-transform:uppercase;'
         f'letter-spacing:0.09em;color:#dc2626;">Deeper reading</span>'
-        f'{ai_badge("AI")}'
         f'</div>'
         f'<div style="font-size:0.82rem;line-height:1.5;color:{TEXT};margin-bottom:8px;">'
         f'{bearish_reading}</div>'
-        f'{evidence_quote(bear_ev.get("evidence_snippet","") if isinstance(bear_ev, dict) else "", bg=BG, border_color=BEAR_BORDER)}'
-        f'<div style="margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;">'
-        f'{reliability_badge(bear_ev.get("reliability","") if isinstance(bear_ev, dict) else "")}'
-        f'{source_badge(bear_ev.get("source","") if isinstance(bear_ev, dict) else "")}'
-        f'{impact_badge((bear_ev.get("impact","") or "") if isinstance(bear_ev, dict) else "")}'
-        f'</div>'
+        f'{evidence_quote(bear_ev.get("evidence_snippet","") if isinstance(bear_ev, dict) else "", bg=BG, border_color=BORDER)}'
+        f'{meta_row(bear_ev.get("reliability","") if isinstance(bear_ev, dict) else "", bear_ev.get("source","") if isinstance(bear_ev, dict) else "", (bear_ev.get("impact","") or "") if isinstance(bear_ev, dict) else "")}'
         f'</div>'
     )
 
     st.markdown(
-        f'<div class="primer-card" style="background:{WARN_BG};border:1px solid {WARN_BORDER};'
-        f'border-radius:10px;padding:14px 16px;margin-bottom:10px;">'
+        f'<div class="primer-card" style="background:{BG};border:1px solid {WARN_BORDER};'
+        f'border-left:4px solid {AMBER};border-radius:10px;padding:14px 16px;margin-bottom:10px;">'
         f'<div style="display:flex;align-items:flex-start;justify-content:space-between;'
         f'gap:8px;margin-bottom:10px;">'
         f'<div style="font-size:0.88rem;font-weight:600;color:{TEXT};line-height:1.4;">{headline}</div>'
+        f'<div style="display:flex;align-items:center;gap:6px;flex-shrink:0;">'
         f'{weight_chip}'
+        f'{ai_badge("AI")}'
+        f'</div>'
         f'</div>'
         f'<div style="display:flex;gap:10px;">{bull_side}{bear_side}</div>'
         f'</div>',
@@ -366,15 +449,11 @@ def earnings_quality_card(signal: dict) -> str:
             f'border-left:2px solid {border};padding-left:8px;line-height:1.4;">'
             f'&ldquo;{snippet}&rdquo;</div>'
         )
-    badges_html = ""
-    if ev_rel or ev_source or ev_impact:
-        badges_html = (
-            f'<div style="margin-top:8px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;">'
-            f'{reliability_badge(ev_rel)}{source_badge(ev_source)}{impact_badge(ev_impact)}</div>'
-        )
+
+    meta_html = meta_row(ev_rel, ev_source, ev_impact)
 
     return (
-        f'<div class="primer-card" style="background:{bg};border:1px solid {border};'
+        f'<div class="primer-card" style="background:{BG};border:1px solid {border};'
         f'border-top:3px solid {color};border-radius:10px;padding:14px 16px;margin-bottom:8px;">'
         f'<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">'
         f'<span style="font-size:0.65rem;font-weight:700;text-transform:uppercase;'
@@ -384,10 +463,9 @@ def earnings_quality_card(signal: dict) -> str:
         f'border-radius:4px;padding:2px 8px;font-size:0.65rem;font-weight:700;">'
         f'{assessment_icon}&nbsp;{assessment_text}</span>'
         f'</div>'
-        f'<div style="margin-bottom:6px;">{ai_badge("AI assessment")}</div>'
         f'<div style="font-size:0.82rem;line-height:1.5;color:{TEXT};">{rationale}</div>'
         f'{ev_html}'
-        f'{badges_html}'
+        f'{meta_html}'
         f'</div>'
     )
 
@@ -430,7 +508,7 @@ def numbered_list(
             f'<span style="display:inline-flex;align-items:center;justify-content:center;'
             f'width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;'
             f'background:{GRAY};color:#fff;font-size:0.7rem;font-weight:700;">{i}</span>'
-            f'<span style="font-size:0.9rem;line-height:1.55;color:{TEXT};">{item}</span>'
+            f'<span style="font-size:{FS_BODY};line-height:1.55;color:{TEXT};">{item}</span>'
             f'</div>'
         )
     footer_html = ""
@@ -441,7 +519,7 @@ def numbered_list(
         )
     return (
         f'<div style="border:1px solid {BORDER};border-radius:12px;'
-        f'padding:4px 16px;background:{BG};">'
+        f'padding:4px 16px;background:{BG};max-width:680px;">'
         f'{rows_html}{footer_html}'
         f'</div>'
     )
@@ -472,7 +550,7 @@ def delta_card(delta: dict) -> None:
     ) if metric else ""
 
     st.markdown(
-        f'<div class="primer-card" style="background:{bg};border:1px solid {fg}44;'
+        f'<div class="primer-card" style="background:{BG};border:1px solid {fg}44;'
         f'border-left:4px solid {fg};border-radius:0 10px 10px 0;'
         f'padding:14px 16px;margin-bottom:8px;">'
         f'<div style="display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;">'