UI enhancemnts

2026-06-09 19:34:31 -04:00
parent fbadd7fb6e
commit 5655cde6bf
55 changed files with 6226 additions and 465 deletions
@@ -0,0 +1,49 @@
+# ── Stage 1: Build the SvelteKit UI ──────────────────────────────────────────
+FROM node:22-alpine AS ui-builder
+WORKDIR /app
+
+COPY ui/package*.json ./ui/
+RUN cd ui && npm ci --legacy-peer-deps
+
+# UI source + shared server types (needed for $types alias)
+COPY ui/ ./ui/
+COPY server/ ./server/
+
+WORKDIR /app/ui
+ENV NODE_ENV=production
+RUN npm run build
+
+# ── Stage 2: Runtime (API + compiled UI) ─────────────────────────────────────
+FROM node:22-alpine
+WORKDIR /app
+
+# API dependencies (tsx needed at runtime for ESM TypeScript)
+COPY package*.json ./
+RUN npm ci
+
+# API source
+COPY bin/ ./bin/
+COPY server/ ./server/
+COPY tsconfig*.json ./
+
+# Pre-built UI from stage 1
+COPY --from=ui-builder /app/ui/build ./ui/build
+COPY --from=ui-builder /app/ui/package*.json ./ui/
+RUN cd ui && npm ci --omit=dev --legacy-peer-deps
+
+# SQLite volume mount point
+RUN mkdir -p /app/data
+
+ENV NODE_ENV=production
+ENV DB_PATH=/app/data/market-screener.db
+ENV PORT=3000
+ENV UI_PORT=3001
+
+EXPOSE 3000 3001
+
+# Run both processes; if either dies the container exits
+CMD ["npx", "concurrently", \
+     "--kill-others", \
+     "--names", "api,ui", \
+     "tsx bin/server.ts", \
+     "node ui/build/index.js"]
@@ -0,0 +1,19 @@
+FROM node:22-alpine
+WORKDIR /app
+
+# Install all deps (tsx is needed at runtime for ESM + TypeScript)
+COPY package*.json ./
+RUN npm ci
+
+# Copy source
+COPY bin/ ./bin/
+COPY server/ ./server/
+COPY tsconfig*.json ./
+
+# SQLite database lives here — mount a volume at /app/data in compose
+RUN mkdir -p /app/data
+ENV DB_PATH=/app/data/market-screener.db
+ENV NODE_ENV=production
+EXPOSE 3000
+
+CMD ["npx", "tsx", "bin/server.ts"]
@@ -0,0 +1,31 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+
+# Copy UI package files and install
+COPY ui/package*.json ./ui/
+RUN cd ui && npm ci --legacy-peer-deps
+
+# Copy UI source + shared server types (needed for $types alias resolution)
+COPY ui/ ./ui/
+COPY server/ ./server/
+
+WORKDIR /app/ui
+
+# adapter-auto picks adapter-node when NODE_ENV=production in a container
+ENV NODE_ENV=production
+
+RUN npm run build
+
+# --- Runtime stage ---
+FROM node:22-alpine
+WORKDIR /app
+
+COPY --from=builder /app/ui/build ./build
+COPY --from=builder /app/ui/package*.json ./
+RUN npm ci --omit=dev --legacy-peer-deps
+
+EXPOSE 3001
+ENV PORT=3001
+ENV HOST=0.0.0.0
+
+CMD ["node", "build"]
@@ -0,0 +1,25 @@
+services:
+  app:
+    build: .
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:3000:3000"
+      - "127.0.0.1:3001:3001"
+    environment:
+      NODE_ENV: production
+      DB_PATH: /app/data/market-screener.db
+      API_KEY: ${API_KEY:-}
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
+      SIMPLEFIN_ACCESS_URL: ${SIMPLEFIN_ACCESS_URL:-}
+      SIMPLEFIN_SETUP_TOKEN: ${SIMPLEFIN_SETUP_TOKEN:-}
+      CLIENT_ORIGIN: ${CLIENT_ORIGIN:-http://localhost}
+    volumes:
+      - db_data:/app/data
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3000/health"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+volumes:
+  db_data:
@@ -0,0 +1,631 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>LLM Analysis — Redesign Prototype</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+button{font-family:inherit;cursor:pointer;}
+
+:root{
+  --bg-base:     #0a0e14;
+  --bg-surface:  #111820;
+  --bg-elevated: #1a2332;
+  --bg-card:     #141e2b;
+  --border:      #1e2d3d;
+  --border-lt:   #263447;
+
+  --text-1: #e2eaf4;
+  --text-2: #7a93ad;
+  --text-3: #3d5166;
+
+  --green:      #34d17a;
+  --green-dim:  #0d2e1a;
+  --green-mid:  #1a4a2a;
+  --red:        #f05a5a;
+  --red-dim:    #2e0d0d;
+  --red-mid:    #4a1a1a;
+  --amber:      #f0b429;
+  --amber-dim:  #2e2000;
+  --blue:       #4da6ff;
+  --blue-dim:   #0d2240;
+  --purple:     #a78bfa;
+  --purple-dim: #1e1535;
+  --teal:       #2dd4bf;
+  --teal-dim:   #0d2e2a;
+
+  --font-ui:   'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --t: 0.18s ease;
+}
+
+body{
+  font-family: var(--font-ui);
+  background: #060a10;
+  color: var(--text-1);
+  font-size: 13px;
+  line-height: 1.5;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 24px 16px;
+  gap: 24px;
+}
+
+/* side-by-side comparison */
+.compare-label{
+  font-size: 11px; font-weight: 600; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--text-3);
+  text-align: center; margin-bottom: 10px;
+}
+
+/* ── PANEL SHELL ── */
+.panel{
+  width: 380px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 92vh;
+}
+
+/* ── HEADER ── */
+.panel-header{
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg-surface);
+}
+.panel-icon{ font-size: 18px; }
+.panel-title{ font-size: 14px; font-weight: 700; flex: 1; }
+.scope-chip{
+  padding: 3px 10px; border-radius: 20px;
+  font-size: 11px; font-weight: 600; letter-spacing: .04em;
+  background: var(--blue-dim); color: var(--blue);
+  border: 1px solid #1a3a5c;
+}
+.close-btn{
+  width: 26px; height: 26px; border-radius: 6px;
+  border: 1px solid var(--border);
+  background: none; color: var(--text-2);
+  font-size: 16px; display: flex; align-items: center; justify-content: center;
+  transition: all var(--t);
+}
+.close-btn:hover{ background: var(--bg-elevated); color: var(--text-1); }
+
+/* ── SCROLLABLE BODY ── */
+.panel-body{
+  flex: 1; overflow-y: auto;
+  padding: 0;
+}
+.panel-body::-webkit-scrollbar{ width: 3px; }
+.panel-body::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 2px; }
+
+/* ── SENTIMENT HERO ── */
+.sentiment-hero{
+  padding: 20px 16px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.sent-top{
+  display: flex; align-items: center;
+  justify-content: space-between; margin-bottom: 14px;
+}
+.sent-badge{
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 16px; border-radius: 24px;
+  font-size: 13px; font-weight: 700; letter-spacing: .04em;
+}
+.sent-bullish { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-mid); }
+.sent-neutral { background: var(--blue-dim);  color: var(--blue);  border: 1px solid #1a3a5c; }
+.sent-bearish { background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red-mid); }
+.sent-mixed   { background: var(--amber-dim); color: var(--amber); border: 1px solid #4a3000; }
+
+.sent-meta{
+  display: flex; align-items: center; gap: 8px;
+}
+.sent-time{
+  font-size: 10px; font-family: var(--font-mono);
+  color: var(--text-3);
+}
+.sent-model{
+  font-size: 10px; padding: 2px 7px; border-radius: 4px;
+  background: var(--bg-elevated); color: var(--text-3);
+  font-family: var(--font-mono);
+}
+
+/* confidence bar */
+.conf-row{
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 14px;
+}
+.conf-label{
+  font-size: 10px; font-weight: 600; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--text-3); width: 72px; flex-shrink: 0;
+}
+.conf-track{
+  flex: 1; height: 5px; background: var(--border);
+  border-radius: 3px; overflow: hidden;
+}
+.conf-fill{
+  height: 100%; border-radius: 3px;
+  background: linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%);
+  transition: width .6s ease;
+}
+.conf-pct{
+  font-size: 11px; font-weight: 600;
+  font-family: var(--font-mono); color: var(--blue); width: 36px; text-align: right;
+}
+
+/* summary */
+.summary-text{
+  font-size: 13px; line-height: 1.7;
+  color: var(--text-2);
+}
+.summary-text strong{ color: var(--text-1); font-weight: 600; }
+
+/* ── SECTION ── */
+.section{ padding: 16px 16px 0; }
+.section:last-child{ padding-bottom: 16px; }
+
+.section-header{
+  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+.section-title{
+  font-size: 10px; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--text-3);
+}
+.section-count{
+  font-size: 10px; font-family: var(--font-mono);
+  padding: 1px 6px; border-radius: 3px;
+  background: var(--bg-elevated); color: var(--text-3);
+}
+.section-divider{
+  flex: 1; height: 1px; background: var(--border);
+}
+
+/* ── INDUSTRY CARDS ── */
+.industry-list{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
+
+.ind-card{
+  border-radius: 8px; padding: 11px 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  transition: border-color var(--t);
+  cursor: default;
+}
+.ind-card:hover{ border-color: var(--border-lt); }
+
+.ind-card-top{
+  display: flex; align-items: flex-start;
+  justify-content: space-between; gap: 8px; margin-bottom: 6px;
+}
+.ind-name{
+  font-size: 12px; font-weight: 600; color: var(--text-1);
+  line-height: 1.4;
+}
+.impact-chip{
+  flex-shrink: 0;
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: 4px;
+  font-size: 10px; font-weight: 700; letter-spacing: .05em;
+  font-family: var(--font-mono);
+}
+.imp-bear{ background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red-mid); }
+.imp-bull{ background: var(--green-dim); color: var(--green); border: 1px solid var(--green-mid); }
+.imp-neut{ background: var(--bg-elevated); color: var(--text-2); border: 1px solid var(--border); }
+
+.ind-body{
+  font-size: 12px; line-height: 1.6; color: var(--text-2);
+}
+.ind-body strong{ color: var(--text-1); font-weight: 600; }
+
+/* accent left border by impact */
+.ind-card.bear{ border-left: 2px solid var(--red); }
+.ind-card.bull{ border-left: 2px solid var(--green); }
+.ind-card.neut{ border-left: 2px solid var(--border-lt); }
+
+/* ── TICKER CARDS ── */
+.ticker-list{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
+
+.tick-card{
+  border-radius: 8px; padding: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  transition: border-color var(--t), background var(--t);
+  cursor: pointer;
+}
+.tick-card:hover{ border-color: var(--border-lt); background: var(--bg-elevated); }
+
+.tick-top{
+  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
+}
+.tick-sym{
+  font-size: 15px; font-weight: 700;
+  font-family: var(--font-mono); letter-spacing: .03em;
+  color: var(--text-1);
+}
+.tick-name{
+  font-size: 11px; color: var(--text-2); flex: 1;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.signal-chip{
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 9px; border-radius: 20px;
+  font-size: 10px; font-weight: 700; letter-spacing: .05em;
+}
+.sig-bear{ background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red-mid); }
+.sig-bull{ background: var(--green-dim); color: var(--green); border: 1px solid var(--green-mid); }
+.sig-neut{ background: var(--bg-elevated); color: var(--text-2); border: 1px solid var(--border); }
+
+.tick-meta{
+  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
+}
+.conf-chip{
+  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
+  padding: 2px 8px; border-radius: 4px;
+}
+.conf-high  { background: var(--green-dim); color: var(--green); }
+.conf-med   { background: var(--amber-dim); color: var(--amber); }
+.conf-low   { background: var(--bg-elevated); color: var(--text-3); }
+
+.score-tier{
+  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
+  color: var(--text-3); padding: 2px 7px; border-radius: 4px;
+  background: var(--bg-elevated); border: 1px solid var(--border);
+}
+.score-tip{
+  font-size: 10px; color: var(--text-3); cursor: help;
+  text-decoration: underline; text-decoration-style: dotted;
+}
+
+.tick-thesis{
+  font-size: 12px; line-height: 1.6; color: var(--text-2);
+  padding-top: 8px; border-top: 1px solid var(--border);
+}
+.tick-thesis strong{ color: var(--text-1); font-weight: 600; }
+
+/* catalyst tag */
+.catalyst-tag{
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10px; font-weight: 500;
+  color: var(--purple); background: var(--purple-dim);
+  padding: 2px 8px; border-radius: 4px;
+  border: 1px solid #2d2050; margin-top: 7px;
+}
+
+/* ── SCREENER PROMPT ── */
+.screener-prompt{
+  margin: 0 16px 16px;
+  padding: 12px 14px;
+  background: var(--blue-dim);
+  border: 1px solid #1a3a5c;
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+}
+.sp-text{
+  font-size: 12px; color: var(--blue); line-height: 1.5;
+}
+.sp-text strong{ font-weight: 600; }
+.sp-btn{
+  flex-shrink: 0;
+  padding: 6px 14px; border-radius: 6px;
+  background: var(--blue); color: #000;
+  border: none; font-size: 11px; font-weight: 700;
+  letter-spacing: .04em; cursor: pointer;
+  transition: background var(--t);
+  white-space: nowrap;
+}
+.sp-btn:hover{ background: #7ec0ff; }
+
+/* ── OLD PANEL STYLES (for comparison) ── */
+.old-panel{
+  width: 380px;
+  background: #1a2030;
+  border: 1px solid #2a3a50;
+  border-radius: 12px;
+  overflow: hidden;
+  max-height: 92vh;
+  display: flex; flex-direction: column;
+}
+.old-header{
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #2a3a50;
+  font-size: 14px; font-weight: 700;
+}
+.old-body{ flex: 1; overflow-y: auto; padding: 16px; }
+.old-sentiment{
+  font-size: 11px; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: #5a7a9a; margin-bottom: 12px;
+}
+.old-quote{
+  border-left: 3px solid #3a5a7a;
+  padding: 4px 0 4px 14px; margin-bottom: 20px;
+  font-size: 14px; color: #8aaac0; line-height: 1.7;
+}
+.old-section{
+  font-size: 11px; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: #c8d8e8; margin-bottom: 12px;
+}
+.old-ind-card{
+  background: #1e2a3a; border: 1px solid #2a3a50;
+  border-radius: 8px; padding: 12px; margin-bottom: 8px;
+}
+.old-ind-title{ font-size: 13px; font-weight: 600; color: #6a9ac0; margin-bottom: 6px; }
+.old-ind-body { font-size: 13px; color: #9ab0c0; line-height: 1.6; }
+.old-ticker-card{
+  background: #1e2a3a; border: 1px solid #2a3a50;
+  border-radius: 8px; padding: 12px; margin-bottom: 8px;
+}
+.old-tick-top{
+  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
+}
+.old-tick-sym{ font-size: 16px; font-weight: 700; color: #e8f0f8; }
+.old-bear{ background: #c0392b; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
+.old-med { background: #1a3a5c; color: #4da6ff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
+.old-s   { background: #2a3a4a; color: #9ab0c0; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
+.old-tick-body{ font-size: 13px; color: #9ab0c0; line-height: 1.6; }
+</style>
+</head>
+<body>
+
+<!-- ── BEFORE (current) ── -->
+<div>
+  <div class="compare-label">❌ Before — Current Design</div>
+  <div class="old-panel">
+    <div class="old-header">
+      🤖 LLM Analysis
+      <span style="background:#1a3a5c;color:#4da6ff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600">STOCKS</span>
+      <span style="margin-left:auto;color:#5a7a9a;font-size:18px;cursor:pointer">×</span>
+    </div>
+    <div class="old-body">
+      <div class="old-sentiment">NEUTRAL</div>
+      <div class="old-quote">
+        Tech sector faces a consolidation phase as Apple's underwhelming AI announcements weigh on mega-cap sentiment, while financial stocks and fintech platforms show relative strength; the market braces for inflation data and Fed decisions with elevated volatility across semiconductors and growth equities.
+      </div>
+      <div class="old-section">AFFECTED INDUSTRIES</div>
+      <div class="old-ind-card">
+        <div class="old-ind-title">Semiconductor Equipment &amp; Materials</div>
+        <div class="old-ind-body">AI disappointment from AAPL reduces near-term demand signals for chip manufacturers; capex guidance revisions possible as OEMs delay purchasing cycles.</div>
+      </div>
+      <div class="old-ind-card">
+        <div class="old-ind-title">Enterprise Software &amp; Cloud Infrastructure</div>
+        <div class="old-ind-body">Inflation data and Fed rate expectations influence SaaS margin profiles and customer IT budget allocation; higher rates pressure growth-at-all-costs valuations.</div>
+      </div>
+      <div class="old-ind-card">
+        <div class="old-ind-title">Consumer Discretionary &amp; Travel/Hospitality</div>
+        <div class="old-ind-body">Earnings misses at MTN signal consumer spending weakness; tariff concerns (Trump pivot) threaten cost structures for imported goods and leisure operators.</div>
+      </div>
+      <br/>
+      <div class="old-section">RELATED TICKERS TO WATCH</div>
+      <div class="old-ticker-card">
+        <div class="old-tick-top">
+          <span class="old-tick-sym">LRCX</span>
+          <span class="old-bear">BEAR</span>
+          <span class="old-med">MEDIUM</span>
+          <span class="old-s">S4</span>
+        </div>
+        <div class="old-tick-body">Semiconductor equipment supplier directly exposed to AI capex cycles; Apple AI letdown signals delayed fab tool orders and potential guidance misses.</div>
+      </div>
+      <div class="old-ticker-card">
+        <div class="old-tick-top">
+          <span class="old-tick-sym">ASML</span>
+          <span class="old-bear">BEAR</span>
+          <span class="old-med">MEDIUM</span>
+          <span class="old-s">S3</span>
+        </div>
+        <div class="old-tick-body">Upstream equipment vendor to chip makers; weakening AI demand narrative pressures customer capex visibility and order book confidence.</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── AFTER (redesigned) ── -->
+<div>
+  <div class="compare-label">✅ After — Redesigned</div>
+  <div class="panel">
+
+    <!-- header -->
+    <div class="panel-header">
+      <span class="panel-icon">🤖</span>
+      <span class="panel-title">LLM Analysis</span>
+      <span class="scope-chip">STOCKS</span>
+      <button class="close-btn">×</button>
+    </div>
+
+    <div class="panel-body">
+
+      <!-- ── SENTIMENT HERO ── -->
+      <div class="sentiment-hero">
+        <div class="sent-top">
+          <span class="sent-badge sent-neutral">
+            ⊙ Neutral
+          </span>
+          <div class="sent-meta">
+            <span class="sent-time">2 min ago</span>
+            <span class="sent-model">claude-sonnet</span>
+          </div>
+        </div>
+
+        <!-- confidence bar -->
+        <div class="conf-row">
+          <span class="conf-label">Confidence</span>
+          <div class="conf-track">
+            <div class="conf-fill" style="width:72%"></div>
+          </div>
+          <span class="conf-pct">72%</span>
+        </div>
+
+        <div class="summary-text">
+          Tech sector faces a <strong>consolidation phase</strong> as Apple's underwhelming AI announcements weigh on mega-cap sentiment, while <strong>financial stocks and fintech</strong> show relative strength. Market braces for inflation data and Fed decisions — elevated volatility expected across semiconductors and growth equities.
+        </div>
+      </div>
+
+      <!-- ── AFFECTED INDUSTRIES ── -->
+      <div class="section">
+        <div class="section-header">
+          <span class="section-title">Affected Industries</span>
+          <span class="section-count">4</span>
+          <div class="section-divider"></div>
+        </div>
+
+        <div class="industry-list">
+
+          <div class="ind-card bear">
+            <div class="ind-card-top">
+              <span class="ind-name">Semiconductor Equipment &amp; Materials</span>
+              <span class="impact-chip imp-bear">▼ BEAR</span>
+            </div>
+            <div class="ind-body">
+              <strong>AAPL AI letdown</strong> reduces near-term demand signals for chip manufacturers. Capex guidance revisions possible as OEMs delay purchasing cycles.
+            </div>
+          </div>
+
+          <div class="ind-card bear">
+            <div class="ind-card-top">
+              <span class="ind-name">Enterprise Software &amp; Cloud Infrastructure</span>
+              <span class="impact-chip imp-bear">▼ BEAR</span>
+            </div>
+            <div class="ind-body">
+              <strong>Higher rates</strong> pressure SaaS margin profiles and customer IT budget allocation. Growth-at-all-costs valuations face multiple compression.
+            </div>
+          </div>
+
+          <div class="ind-card bear">
+            <div class="ind-card-top">
+              <span class="ind-name">Consumer Discretionary &amp; Travel</span>
+              <span class="impact-chip imp-bear">▼ BEAR</span>
+            </div>
+            <div class="ind-body">
+              <strong>MTN earnings miss</strong> signals consumer spending weakness. Tariff concerns threaten cost structures for imported goods and leisure operators.
+            </div>
+          </div>
+
+          <div class="ind-card bull">
+            <div class="ind-card-top">
+              <span class="ind-name">Private Credit &amp; Non-Bank Lending</span>
+              <span class="impact-chip imp-bull">▲ BULL</span>
+            </div>
+            <div class="ind-body">
+              Rising yields reflect well on BDC net interest margins. <strong>Fintech lenders like SOFI</strong> benefit from institutional inflows, though spread compression is a risk.
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- ── RELATED TICKERS ── -->
+      <div class="section">
+        <div class="section-header">
+          <span class="section-title">Tickers to Watch</span>
+          <span class="section-count">5</span>
+          <div class="section-divider"></div>
+        </div>
+
+        <div class="ticker-list">
+
+          <div class="tick-card">
+            <div class="tick-top">
+              <span class="tick-sym">LRCX</span>
+              <span class="tick-name">Lam Research Corp</span>
+              <span class="signal-chip sig-bear">▼ BEARISH</span>
+            </div>
+            <div class="tick-meta">
+              <span class="conf-chip conf-med">MED confidence</span>
+              <span class="score-tier" title="Screener score tier: S4 = score 4/20">Screener S4</span>
+            </div>
+            <div class="tick-thesis">
+              Semiconductor equipment supplier <strong>directly exposed to AI capex cycles</strong>. Apple AI letdown signals delayed fab tool orders and potential guidance misses.
+            </div>
+            <div class="catalyst-tag">⚡ Catalyst: AAPL AI capex cut</div>
+          </div>
+
+          <div class="tick-card">
+            <div class="tick-top">
+              <span class="tick-sym">ASML</span>
+              <span class="tick-name">ASML Holding NV</span>
+              <span class="signal-chip sig-bear">▼ BEARISH</span>
+            </div>
+            <div class="tick-meta">
+              <span class="conf-chip conf-med">MED confidence</span>
+              <span class="score-tier" title="Screener score tier: S3 = score 3/20">Screener S3</span>
+            </div>
+            <div class="tick-thesis">
+              Upstream equipment vendor. <strong>Weakening AI demand narrative</strong> pressures customer capex visibility and order book confidence near-term.
+            </div>
+            <div class="catalyst-tag">⚡ Catalyst: AI capex slowdown</div>
+          </div>
+
+          <div class="tick-card">
+            <div class="tick-top">
+              <span class="tick-sym">SOFI</span>
+              <span class="tick-name">SoFi Technologies</span>
+              <span class="signal-chip sig-bull">▲ BULLISH</span>
+            </div>
+            <div class="tick-meta">
+              <span class="conf-chip conf-med">MED confidence</span>
+              <span class="score-tier" title="Screener score tier: S6 = score 6/20">Screener S6</span>
+            </div>
+            <div class="tick-thesis">
+              Fintech lender benefiting from <strong>institutional inflows</strong> as yields rise. Watch for spread compression risk if credit conditions tighten further.
+            </div>
+            <div class="catalyst-tag">⚡ Catalyst: Rate environment tailwind</div>
+          </div>
+
+          <div class="tick-card">
+            <div class="tick-top">
+              <span class="tick-sym">MTN</span>
+              <span class="tick-name">Vail Resorts Inc</span>
+              <span class="signal-chip sig-bear">▼ BEARISH</span>
+            </div>
+            <div class="tick-meta">
+              <span class="conf-chip conf-high">HIGH confidence</span>
+              <span class="score-tier">Screener S2</span>
+            </div>
+            <div class="tick-thesis">
+              Recent <strong>earnings miss</strong> directly signals consumer discretionary softness. Tariff pressure compounds cost-side risks. Monitor forward guidance closely.
+            </div>
+            <div class="catalyst-tag">⚡ Catalyst: Earnings miss + tariff risk</div>
+          </div>
+
+          <div class="tick-card">
+            <div class="tick-top">
+              <span class="tick-sym">NVDA</span>
+              <span class="tick-name">NVIDIA Corp</span>
+              <span class="signal-chip sig-neut">⊙ WATCH</span>
+            </div>
+            <div class="tick-meta">
+              <span class="conf-chip conf-low">LOW confidence</span>
+              <span class="score-tier">Screener S13</span>
+            </div>
+            <div class="tick-thesis">
+              <strong>Dual exposure</strong>: benefits from AI capex but indirectly exposed if Apple's AI pullback signals broader industry caution. Monitor hyperscaler guidance.
+            </div>
+            <div class="catalyst-tag">⚡ Catalyst: Hyperscaler capex announcements</div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- ── SCREENER BRIDGE ── -->
+      <div class="screener-prompt">
+        <div class="sp-text">
+          <strong>Screen these tickers</strong> to see current signals, scores, and gate results.
+        </div>
+        <button class="sp-btn">Screen All →</button>
+      </div>
+
+    </div><!-- /panel-body -->
+  </div><!-- /panel -->
+</div>
+
+</body>
+</html>
@@ -16,9 +16,12 @@
    "prepare": "husky"
  },
  "lint-staged": {
-    "*.{ts,js}": [
+    "{server,bin,tests}/**/*.{ts,js}": [
      "eslint --fix",
      "prettier --write"
+    ],
+    "ui/src/**/*.ts": [
+      "prettier --write"
    ]
  },
  "dependencies": {
@@ -10,6 +10,7 @@ import { PortfolioAdvisor } from './domains/portfolio';
 import { CallsController, CalendarService } from './domains/calls';
 import { AuthController, AuthService, UserStore, verifyJwt } from './domains/auth';
 import type { TokenPayload } from './domains/auth';
+import { WatchlistController, WatchlistRepository } from './domains/watchlist';

 // Shared infrastructure
 import {
@@ -19,6 +20,7 @@ import {
  LLMAnalyst,
  MarketCallRepository,
  PortfolioRepository,
+  SignalSnapshotRepository,
  createDb,
  DatabaseConnection,
  QueryAudit,
@@ -124,12 +126,14 @@ export async function buildApp({ logger = true, db: injectedDb }: BuildAppOption
  const innerWidth = Math.max(line1.length, line2.length) + 2;
  const hr = '─'.repeat(innerWidth);
  const pad = (s: string) => `│ ${s}${' '.repeat(innerWidth - 1 - s.length)}│`;
+  /* eslint-disable no-console -- boot-time invite code must reach the operator's terminal */
  console.log(`\n┌${hr}┐`);
  console.log(pad(''));
  console.log(pad(line1));
  console.log(pad(line2));
  console.log(pad(''));
  console.log(`└${hr}┘\n`);
+  /* eslint-enable no-console */

  const userStore = new UserStore(db);
  const authService = new AuthService(userStore, JWT_SECRET);
@@ -137,7 +141,7 @@ export async function buildApp({ logger = true, db: injectedDb }: BuildAppOption

  // Register controllers
  // Public routes (GET) remain open; write routes require JWT + trader role
-  new ScreenerController(engine, catalystCache).register(app);
+  new ScreenerController(engine, catalystCache, new SignalSnapshotRepository(db)).register(app);
  new FinanceController(engine, new PortfolioRepository(db), advisor, {
    authGuard,
    traderGuard,
@@ -148,6 +152,8 @@ export async function buildApp({ logger = true, db: injectedDb }: BuildAppOption
  }).register(app);
  new AnalyzeController(catalystCache, llm).register(app);

+  new WatchlistController(new WatchlistRepository(db), { authGuard }).register(app);
+
  app.get('/health', async () => ({ status: 'ok' }));

  return app;
@@ -119,9 +119,11 @@ export class AuthService {
    this.#store.createResetToken(user.id, token, expiresAt);

    const link = `${appOrigin}/auth/reset-password?token=${token}`;
+    /* eslint-disable no-console -- no mailer yet: reset link must reach the operator's terminal */
    console.log('\n🔐 Password reset requested for:', email);
    console.log('   Link (expires in 1 hour):');
    console.log(`   ${link}\n`);
+    /* eslint-enable no-console */
  }

  /**
@@ -143,7 +143,7 @@ export class ScreenerEngine {
        asset,
        fundamental,
        inflated,
-        signal: this.signal(fundamental.label, inflated.label),
+        signal: this.signal(fundamental, inflated),
      });
    } catch (err) {
      results.ERROR.push({
@@ -184,13 +184,13 @@ export class ScreenerEngine {
    }
  }

-  private signal(fundamentalLabel: string, inflatedLabel: string): Signal {
-    const green = (l: string) => l.startsWith('🟢');
-    const yellow = (l: string) => l.startsWith('🟡');
-    if (green(fundamentalLabel)) return SIGNAL.STRONG_BUY;
-    if (green(inflatedLabel) && yellow(fundamentalLabel)) return SIGNAL.MOMENTUM;
-    if (green(inflatedLabel) && !green(fundamentalLabel)) return SIGNAL.SPECULATION;
-    if (yellow(fundamentalLabel) || yellow(inflatedLabel)) return SIGNAL.NEUTRAL;
+  // Signal derives from the structured verdict tier — never from label strings.
+  // Rewording a display label can no longer silently corrupt signals.
+  private signal(fundamental: ScoreResult, inflated: ScoreResult): Signal {
+    if (fundamental.tier === 'PASS') return SIGNAL.STRONG_BUY;
+    if (inflated.tier === 'PASS' && fundamental.tier === 'HOLD') return SIGNAL.MOMENTUM;
+    if (inflated.tier === 'PASS') return SIGNAL.SPECULATION;
+    if (fundamental.tier === 'HOLD' || inflated.tier === 'HOLD') return SIGNAL.NEUTRAL;
    return SIGNAL.AVOID;
  }

@@ -22,6 +22,8 @@ export class BondScorer {
    if (metrics.creditRatingNumeric < gates.minCreditRating) {
      return {
        label: '🔴 REJECT',
+        tier: 'REJECT',
+        score: null,
        scoreSummary: `Credit rating gate failed: ${metrics.creditRating} (${metrics.creditRatingNumeric}) < ${gates.minCreditRating}`,
        audit: {
          passedGates: false,
@@ -42,6 +44,8 @@ export class BondScorer {

    return {
      label: score >= 4 ? '🟢 Attractive' : score >= 1 ? '🟡 Neutral' : '🔴 Avoid',
+      tier: score >= 4 ? 'PASS' : score >= 1 ? 'HOLD' : 'REJECT',
+      score,
      scoreSummary: `Score: ${score}`,
      audit: { passedGates: true, breakdown },
    };
@@ -1,6 +1,13 @@
 import type { EtfMetrics, ScoreResult } from '../../../domains/shared';

 export class EtfScorer {
+  /** Parse to a finite number, preserving null for missing data. */
+  private static n(v: unknown): number | null {
+    if (v == null) return null;
+    const f = parseFloat(String(v));
+    return Number.isFinite(f) ? f : null;
+  }
+
  static score(
    m: EtfMetrics,
    rules: {
@@ -11,51 +18,77 @@ export class EtfScorer {
  ): ScoreResult {
    const { gates, weights, thresholds } = rules;
    const metrics = {
-      expenseRatio: parseFloat(String(m.expenseRatio)) || 0,
-      yield: parseFloat(String(m.yield)) || 0,
-      volume: parseFloat(String(m.volume)) || 0,
-      fiveYearReturn: parseFloat(String(m.fiveYearReturn)) || 0,
+      expenseRatio: EtfScorer.n(m.expenseRatio),
+      yield: EtfScorer.n(m.yield),
+      volume: EtfScorer.n(m.volume),
+      fiveYearReturn: EtfScorer.n(m.fiveYearReturn),
    };

+    // Gates are only checked when the underlying data exists — missing data
+    // skips the gate (same convention as StockScorer) instead of auto-failing.
    const failures: string[] = [];
-    if (metrics.expenseRatio > gates.maxExpenseRatio) {
+    if (metrics.expenseRatio != null && metrics.expenseRatio > gates.maxExpenseRatio) {
      failures.push(`Expense ratio: ${metrics.expenseRatio} > ${gates.maxExpenseRatio}`);
    }
    if (
+      metrics.fiveYearReturn != null &&
      thresholds.minFiveYearReturn != null &&
      metrics.fiveYearReturn < thresholds.minFiveYearReturn
    ) {
      failures.push(`5-year return: ${metrics.fiveYearReturn}% < ${thresholds.minFiveYearReturn}%`);
    }
-    if (thresholds.minVolume != null && metrics.volume < thresholds.minVolume) {
+    if (
+      metrics.volume != null &&
+      thresholds.minVolume != null &&
+      metrics.volume < thresholds.minVolume
+    ) {
      failures.push(`Volume: ${metrics.volume} < ${thresholds.minVolume}`);
    }
    if (failures.length > 0) {
      return {
        label: '🔴 REJECT',
+        tier: 'REJECT',
+        score: null,
        scoreSummary: `Gate failed: ${failures.map((f) => f.split(':')[0]).join(', ')}`,
        audit: { passedGates: false, failures },
      };
    }

-    const breakdown: Record<string, number> = {
-      cost: metrics.expenseRatio <= thresholds.maxExpense ? weights.lowCost : -3,
-      yield: metrics.yield >= thresholds.minYield ? weights.yield : -1,
-      vol: metrics.volume >= (thresholds.minVolume ?? 1_000_000) ? 0 : -2,
-      fiveYearReturn:
-        thresholds.minFiveYearReturn != null
-          ? metrics.fiveYearReturn >= thresholds.minFiveYearReturn
-            ? (weights.fiveYearReturn ?? 1)
-            : -1
-          : 0,
-    };
+    // Factors only fire when the underlying data exists.
+    const breakdown: Record<string, number> = {};
+    if (metrics.expenseRatio != null) {
+      breakdown.cost = metrics.expenseRatio <= thresholds.maxExpense ? weights.lowCost : -3;
+    }
+    if (metrics.yield != null) {
+      breakdown.yield = metrics.yield >= thresholds.minYield ? weights.yield : -1;
+    }
+    if (metrics.volume != null) {
+      breakdown.vol = metrics.volume >= (thresholds.minVolume ?? 1_000_000) ? 0 : -2;
+    }
+    if (metrics.fiveYearReturn != null && thresholds.minFiveYearReturn != null) {
+      breakdown.fiveYearReturn =
+        metrics.fiveYearReturn >= thresholds.minFiveYearReturn ? (weights.fiveYearReturn ?? 1) : -1;
+    }

+    const activeFactors = Object.keys(breakdown).length;
    const score = Object.values(breakdown).reduce((a, b) => a + b, 0);

+    if (activeFactors === 0) {
+      return {
+        label: '🟡 Neutral (No Data)',
+        tier: 'HOLD',
+        score: 0,
+        scoreSummary: 'Score: 0 (no metrics available)',
+        audit: { passedGates: true, breakdown, coverage: { active: 0, total: 4 } },
+      };
+    }
+
    return {
      label: score >= 3 ? '🟢 Efficient' : score >= 0 ? '🟡 Neutral' : '🔴 Expensive/Low Yield',
+      tier: score >= 3 ? 'PASS' : score >= 0 ? 'HOLD' : 'REJECT',
+      score,
      scoreSummary: `Score: ${score}`,
-      audit: { passedGates: true, breakdown },
+      audit: { passedGates: true, breakdown, coverage: { active: activeFactors, total: 4 } },
    };
  }
 }
@@ -1,9 +1,24 @@
 import type { NumVal, SanitizedMetrics, ScoreResult, StockMetrics } from '../../../domains/shared';

 export class StockScorer {
+  /**
+   * Parse to a finite number, preserving 0 — zero is a real value for metrics
+   * like revenueGrowth (stagnant), debtToEquity (debt-free), or
+   * dcfMarginOfSafety (exactly fair value).
+   */
  private static n(v: unknown): NumVal {
+    if (v == null) return null;
    const f = parseFloat(String(v));
-    return !isNaN(f) && f !== 0 ? f : null;
+    return Number.isFinite(f) ? f : null;
+  }
+
+  /**
+   * Parse to a strictly positive number. Used for ratios where 0 is
+   * impossible and indicates junk/missing data (P/E, PEG, P/B, P/FFO).
+   */
+  private static pos(v: unknown): NumVal {
+    const f = StockScorer.n(v);
+    return f != null && f > 0 ? f : null;
  }

  private static scoreValue(val: number, high: number, med: number, weight: number): number {
@@ -46,6 +61,8 @@ export class StockScorer {
    if (failures.length > 0) {
      return {
        label: '🔴 REJECT',
+        tier: 'REJECT',
+        score: null,
        scoreSummary: `Gate failed: ${failures.join(' | ')}`,
        audit: { passedGates: false, failures },
      };
@@ -172,6 +189,8 @@ export class StockScorer {
      breakdown[f.key] = f.fn() as number;
      return sum + breakdown[f.key];
    }, 0);
+    const activeFactors = Object.keys(breakdown).length;
+    const coverage = { active: activeFactors, total: factors.length };

    const riskFlags = [
      m.beta != null && m.beta > 1.5 && `High volatility (β ${m.beta.toFixed(2)})`,
@@ -207,10 +226,34 @@ export class StockScorer {
        `DCF: stock trading ${Math.abs(m.dcfMarginOfSafety).toFixed(0)}% above intrinsic value`,
    ].filter(Boolean) as string[];

+    // No factor had data — distinguish "insufficient data" from a genuine
+    // neutral score so the UI doesn't present an unknown as a Hold verdict.
+    if (activeFactors === 0) {
+      return {
+        label: '🟡 HOLD (No Data)',
+        tier: 'HOLD',
+        score: 0,
+        scoreSummary: 'Score: 0 (no scoring factors had data)',
+        audit: {
+          passedGates: true,
+          breakdown,
+          riskFlags: riskFlags.length ? riskFlags : null,
+          coverage,
+        },
+      };
+    }
+
    return {
      label: StockScorer.label(totalScore),
+      tier: StockScorer.tier(totalScore),
+      score: totalScore,
      scoreSummary: `Score: ${totalScore}`,
-      audit: { passedGates: true, breakdown, riskFlags: riskFlags.length ? riskFlags : null },
+      audit: {
+        passedGates: true,
+        breakdown,
+        riskFlags: riskFlags.length ? riskFlags : null,
+        coverage,
+      },
    };
  }

@@ -221,6 +264,12 @@ export class StockScorer {
    return '🔴 REJECT';
  }

+  private static tier(score: number): 'PASS' | 'HOLD' | 'REJECT' {
+    if (score >= 4) return 'PASS';
+    if (score >= 0) return 'HOLD';
+    return 'REJECT';
+  }
+
  private static sanitize(m: StockMetrics): SanitizedMetrics {
    const w52 =
      m.week52High != null && m.week52High > 0 && m.week52Low != null && m.currentPrice > 0
@@ -229,16 +278,16 @@ export class StockScorer {
    return {
      debtToEquity: StockScorer.n(m.debtToEquity),
      quickRatio: StockScorer.n(m.quickRatio),
-      peRatio: StockScorer.n(m.peRatio),
-      pegRatio: StockScorer.n(m.pegRatio),
-      priceToBook: StockScorer.n(m.priceToBook),
+      peRatio: StockScorer.pos(m.peRatio),
+      pegRatio: StockScorer.pos(m.pegRatio),
+      priceToBook: StockScorer.pos(m.priceToBook),
      netProfitMargin: StockScorer.n(m.netProfitMargin),
      operatingMargin: StockScorer.n(m.operatingMargin),
      returnOnEquity: StockScorer.n(m.returnOnEquity),
      revenueGrowth: StockScorer.n(m.revenueGrowth),
      fcfYield: StockScorer.n(m.fcfYield),
      dividendYield: StockScorer.n(m.dividendYield),
-      pFFO: StockScorer.n(m.pFFO),
+      pFFO: StockScorer.pos(m.pFFO),
      beta: StockScorer.n(m.beta),
      week52Position: w52,
      week52Change: StockScorer.n(m.week52Change),
@@ -1,13 +1,15 @@
 import type { FastifyInstance, FastifyRequest } from 'fastify';
 import { ScreenerEngine } from './ScreenerEngine';
-import { CatalystCache } from '../../domains/shared';
-import type { LiveAssetResult } from '../../domains/shared';
+import { CatalystCache, SignalSnapshotRepository } from '../../domains/shared';
+import type { LiveAssetResult, ScreenerResult } from '../../domains/shared';
 import { screenSchema } from '../../domains/shared/types/schemas';

 export class ScreenerController {
  constructor(
    private readonly engine: ScreenerEngine,
    private readonly catalystCache: CatalystCache,
+    // Optional so tests and minimal setups work without a database.
+    private readonly snapshots?: SignalSnapshotRepository,
  ) {}

  register(app: FastifyInstance): void {
@@ -21,6 +23,29 @@ export class ScreenerController {
      { config: { rateLimit: { max: 10, timeWindow: '1 minute' } } },
      this.catalysts.bind(this),
    );
+    app.get('/api/screen/history/:ticker', this.history.bind(this));
+  }
+
+  /** Signal snapshot history for one ticker (P0.1 ledger read side). */
+  private async history(req: FastifyRequest) {
+    if (!this.snapshots) return { ticker: null, snapshots: [] };
+    const { ticker } = req.params as { ticker: string };
+    return {
+      ticker: ticker.toUpperCase(),
+      snapshots: this.snapshots.history(ticker).map((row) => ({
+        date: row.snapshot_date,
+        signal: row.signal,
+        price: row.price,
+        fundamental: { tier: row.fundamental_tier, score: row.fundamental_score },
+        inflated: { tier: row.inflated_tier, score: row.inflated_score },
+        coverage:
+          row.coverage_active != null
+            ? { active: row.coverage_active, total: row.coverage_total }
+            : null,
+        riskFlags: row.risk_flags ? JSON.parse(row.risk_flags) : [],
+        rateRegime: row.rate_regime,
+      })),
+    };
  }

  private static serializeAssets(arr: LiveAssetResult[]) {
@@ -39,6 +64,7 @@ export class ScreenerController {
  private async screen(req: FastifyRequest) {
    const tickers = (req.body as { tickers: string[] }).tickers.map((t) => t.toUpperCase());
    const results = await this.engine.screenTickers(tickers);
+    this.recordSnapshots(results, req);
    return {
      ...results,
      STOCK: ScreenerController.serializeAssets(results.STOCK as LiveAssetResult[]),
@@ -47,6 +73,29 @@ export class ScreenerController {
    };
  }

+  /**
+   * P0.1 signal track record — persist one snapshot per asset per day.
+   * Best-effort: a snapshot failure must never fail the screen response.
+   */
+  private recordSnapshots(results: ScreenerResult, req: FastifyRequest): void {
+    if (!this.snapshots) return;
+    try {
+      const rateRegime = results.marketContext?.rateRegime ?? null;
+      const inputs = [...results.STOCK, ...results.ETF, ...results.BOND].map((r) => ({
+        ticker: r.asset.ticker,
+        assetType: r.asset.type,
+        price: r.asset.currentPrice ?? null,
+        signal: r.signal,
+        fundamental: r.fundamental,
+        inflated: r.inflated,
+        rateRegime,
+      }));
+      this.snapshots.recordBatch(inputs);
+    } catch (err) {
+      req.log?.warn?.({ err }, 'signal snapshot recording failed');
+    }
+  }
+
  private async catalysts() {
    const { tickers, stories } = await this.catalystCache.get();
    return { tickers, stories };
@@ -7,14 +7,20 @@ export class DataMapper {
  // ── Public entry point ────────────────────────────────────────────────────
  static mapToStandardFormat(ticker: string, summary: YahooSummary): MappedData {
    const quoteType = summary.price?.quoteType as string | undefined;
-    const category = ((summary.assetProfile?.category as string) || '').toLowerCase();
-    const yieldVal = (summary.summaryDetail?.trailingAnnualDividendYield as number) ?? 0;
+    // Prefer fundProfile.categoryName (Morningstar category, e.g. "Intermediate
+    // Core Bond") — assetProfile.category is rarely populated for ETFs. A
+    // dividend-yield heuristic is deliberately NOT used: high-yield equity ETFs
+    // (SCHD, VYM) are not bonds.
+    const category = (
+      (summary.fundProfile?.categoryName as string) ||
+      (summary.assetProfile?.category as string) ||
+      ''
+    ).toLowerCase();

    const isBond =
      category.includes('bond') ||
      category.includes('fixed income') ||
-      category.includes('treasury') ||
-      (quoteType === 'ETF' && yieldVal > 0.02 && category === '');
+      category.includes('treasury');

    if (quoteType === 'ETF') {
      return isBond
@@ -143,17 +149,23 @@ export class DataMapper {
  }

  // ── ETF ───────────────────────────────────────────────────────────────────
+  // Missing fields are preserved as null (not coerced to 0) so EtfScorer can
+  // skip the corresponding gate instead of auto-failing on absent Yahoo data.
  private static mapEtfData(summary: YahooSummary) {
+    const num = (v: unknown): number | null =>
+      typeof v === 'number' && Number.isFinite(v) ? v : null;
+
+    const expenseRatio = num(summary.summaryDetail?.expenseRatio);
+    const dividendYield = num(summary.summaryDetail?.trailingAnnualDividendYield);
+    const fiveYearReturn = num(summary.defaultKeyStatistics?.fiveYearAverageReturn);
+
    return {
-      expenseRatio: ((summary.summaryDetail?.expenseRatio as number) ?? 0) * 100,
-      totalAssets: (summary.summaryDetail?.totalAssets as number) ?? 0,
-      yield: ((summary.summaryDetail?.trailingAnnualDividendYield as number) ?? 0) * 100,
-      fiveYearReturn: ((summary.defaultKeyStatistics?.fiveYearAverageReturn as number) ?? 0) * 100,
-      volume:
-        (summary.summaryDetail?.averageVolume as number) ??
-        (summary.price?.averageVolume as number) ??
-        0,
-      currentPrice: (summary.price?.regularMarketPrice as number) ?? 0,
+      expenseRatio: expenseRatio != null ? expenseRatio * 100 : null,
+      totalAssets: num(summary.summaryDetail?.totalAssets),
+      yield: dividendYield != null ? dividendYield * 100 : null,
+      fiveYearReturn: fiveYearReturn != null ? fiveYearReturn * 100 : null,
+      volume: num(summary.summaryDetail?.averageVolume) ?? num(summary.price?.averageVolume),
+      currentPrice: num(summary.price?.regularMarketPrice) ?? 0,
    };
  }

@@ -60,6 +60,7 @@ export const YAHOO_MODULES: string[] = [
  'defaultKeyStatistics',
  'price',
  'summaryDetail',
+  'fundProfile', // categoryName drives ETF vs bond-fund classification in DataMapper
 ];

 export const SIGNAL_ORDER: Record<string, number> = {
@@ -139,6 +139,15 @@ export class DatabaseConnection {
    return txn();
  }

+  /**
+   * Execute a raw SQL SELECT and return all rows.
+   * Use only when QueryBuilder is not practical (e.g. static named queries).
+   */
+  rawAll<T = Record<string, unknown>>(sql: string, params: unknown[] = []): T[] {
+    const stmt = this.getOrCacheStatement(sql);
+    return stmt.all(...params) as T[];
+  }
+
  /**
   * Execute a raw SQL SELECT and return the first row.
   * Use only when QueryBuilder is not practical (e.g. auth domain with static queries).
@@ -130,6 +130,82 @@ export const RESET_TOKEN_QUERIES = {

 // ── Schema Definition (DDL) ──────────────────────────────────────────────────

+// ── Watchlist Queries ────────────────────────────────────────────────────────
+
+export const WATCHLIST_QUERIES = {
+  SELECT_ALL: `
+    SELECT ticker, pinned_at
+    FROM watchlist
+    WHERE user_id = ?
+    ORDER BY pinned_at DESC
+  `,
+  INSERT: `
+    INSERT OR IGNORE INTO watchlist (ticker, user_id, pinned_at)
+    VALUES (?, ?, ?)
+  `,
+  DELETE: `
+    DELETE FROM watchlist WHERE ticker = ? AND user_id = ?
+  `,
+  EXISTS: `
+    SELECT 1 FROM watchlist WHERE ticker = ? AND user_id = ?
+  `,
+};
+
+// ── Signal Snapshot Queries (P0.1 — signal track record) ────────────────────
+
+export const SIGNAL_SNAPSHOT_QUERIES = {
+  // One row per ticker per day — repeated screens the same day keep the latest
+  UPSERT: `
+    INSERT INTO signal_snapshots (
+      ticker, snapshot_date, asset_type, price, signal,
+      fundamental_tier, fundamental_score, fundamental_label,
+      inflated_tier, inflated_score, inflated_label,
+      coverage_active, coverage_total, risk_flags, rate_regime, created_at
+    )
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ON CONFLICT(ticker, snapshot_date) DO UPDATE SET
+      asset_type        = excluded.asset_type,
+      price             = excluded.price,
+      signal            = excluded.signal,
+      fundamental_tier  = excluded.fundamental_tier,
+      fundamental_score = excluded.fundamental_score,
+      fundamental_label = excluded.fundamental_label,
+      inflated_tier     = excluded.inflated_tier,
+      inflated_score    = excluded.inflated_score,
+      inflated_label    = excluded.inflated_label,
+      coverage_active   = excluded.coverage_active,
+      coverage_total    = excluded.coverage_total,
+      risk_flags        = excluded.risk_flags,
+      rate_regime       = excluded.rate_regime,
+      created_at        = excluded.created_at
+  `,
+
+  // Full history for one ticker, oldest first (for trend/backtest views)
+  SELECT_BY_TICKER: `
+    SELECT * FROM signal_snapshots
+    WHERE ticker = ?
+    ORDER BY snapshot_date ASC
+  `,
+
+  // All snapshots for one day (for daily diff jobs)
+  SELECT_BY_DATE: `
+    SELECT * FROM signal_snapshots
+    WHERE snapshot_date = ?
+    ORDER BY ticker ASC
+  `,
+
+  // Latest snapshot per ticker on or before a given date (for change detection)
+  SELECT_LATEST_BEFORE: `
+    SELECT s.* FROM signal_snapshots s
+    JOIN (
+      SELECT ticker, MAX(snapshot_date) AS d
+      FROM signal_snapshots
+      WHERE snapshot_date < ?
+      GROUP BY ticker
+    ) latest ON latest.ticker = s.ticker AND latest.d = s.snapshot_date
+  `,
+};
+
 export const DDL = `
  CREATE TABLE IF NOT EXISTS users (
    id            TEXT PRIMARY KEY,
@@ -167,6 +243,36 @@ export const DDL = `
    snapshot   TEXT NOT NULL,   -- JSON object
    created_at TEXT NOT NULL
  );
+
+  CREATE TABLE IF NOT EXISTS watchlist (
+    ticker    TEXT NOT NULL,
+    user_id   TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    pinned_at TEXT NOT NULL,
+    PRIMARY KEY (ticker, user_id)
+  );
+
+  CREATE TABLE IF NOT EXISTS signal_snapshots (
+    ticker            TEXT NOT NULL,
+    snapshot_date     TEXT NOT NULL,            -- YYYY-MM-DD
+    asset_type        TEXT NOT NULL,            -- STOCK / ETF / BOND
+    price             REAL,
+    signal            TEXT NOT NULL,            -- ✅ Strong Buy etc.
+    fundamental_tier  TEXT NOT NULL,            -- PASS / HOLD / REJECT
+    fundamental_score REAL,
+    fundamental_label TEXT,
+    inflated_tier     TEXT NOT NULL,
+    inflated_score    REAL,
+    inflated_label    TEXT,
+    coverage_active   INTEGER,
+    coverage_total    INTEGER,
+    risk_flags        TEXT,                     -- JSON array
+    rate_regime       TEXT,
+    created_at        TEXT NOT NULL,
+    PRIMARY KEY (ticker, snapshot_date)
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_snapshots_date   ON signal_snapshots(snapshot_date);
+  CREATE INDEX IF NOT EXISTS idx_snapshots_signal ON signal_snapshots(signal, snapshot_date);
 `;

 // ── Runtime migrations (ALTER TABLE for existing DBs) ────────────────────────
@@ -6,24 +6,34 @@ export class Etf extends Asset {

  constructor(data: EtfData) {
    super(data);
+    // Preserve null for missing fields — coercing to 0 would auto-fail gates
+    // in EtfScorer for data Yahoo simply didn't return.
+    const num = (v: unknown): number | null => {
+      if (v == null) return null;
+      const f = parseFloat(String(v));
+      return Number.isFinite(f) ? f : null;
+    };
    this.metrics = {
-      expenseRatio: parseFloat(String(data.expenseRatio)) || 0,
-      totalAssets: parseFloat(String(data.totalAssets)) || 0,
-      yield: parseFloat(String(data.yield)) || 0,
-      volume: parseFloat(String(data.volume)) || 0,
-      fiveYearReturn: parseFloat(String(data.fiveYearReturn)) || 0,
+      expenseRatio: num(data.expenseRatio),
+      totalAssets: num(data.totalAssets),
+      yield: num(data.yield),
+      volume: num(data.volume),
+      fiveYearReturn: num(data.fiveYearReturn),
    };
  }

  getDisplayMetrics(): Record<string, string> {
+    const m = this.metrics;
+    const fmt = (v: number | null, dec: number, suffix = '') =>
+      v != null ? `${v.toFixed(dec)}${suffix}` : '—';
    return {
      Ticker: this.ticker,
      Type: 'ETF',
      Price: this.formatCurrency(this.currentPrice),
-      'Exp Ratio%': `${this.metrics.expenseRatio.toFixed(2)}%`,
-      'Yield%': `${this.metrics.yield.toFixed(2)}%`,
-      AUM: this.formatLargeNumber(this.metrics.totalAssets),
-      '5Y Return%': `${this.metrics.fiveYearReturn.toFixed(1)}%`,
+      'Exp Ratio%': fmt(m.expenseRatio, 2, '%'),
+      'Yield%': fmt(m.yield, 2, '%'),
+      AUM: m.totalAssets != null ? this.formatLargeNumber(m.totalAssets) : '—',
+      '5Y Return%': fmt(m.fiveYearReturn, 1, '%'),
    };
  }
 }
@@ -25,6 +25,8 @@ export { MarketRegime } from './scoring/MarketRegime';
 // Persistence (repositories)
 export { MarketCallRepository } from './persistence/MarketCallRepository';
 export { PortfolioRepository } from './persistence/PortfolioRepository';
+export { SignalSnapshotRepository } from './persistence/SignalSnapshotRepository';
+export type { SnapshotInput } from './persistence/SignalSnapshotRepository';
 export { DatabaseConnection, QueryAudit, createDb } from './db/index';

 // Config & Constants
@@ -0,0 +1,90 @@
+import { DatabaseConnection } from '../db/index';
+import { QueryBuilder } from '../utils/QueryBuilder';
+import type { ScoreResult, SignalSnapshotRow } from '../types';
+
+/**
+ * Signal snapshot ledger (PRODUCT.md P0.1).
+ *
+ * Persists one row per ticker per day on every /api/screen call so the
+ * product builds a verifiable signal track record. This data cannot be
+ * backfilled — the backtest dashboard (Phase 10.5e), thesis review (10.6d),
+ * and calibration features all depend on it accumulating from day one.
+ *
+ * Recording is best-effort: failures are logged by the caller and must never
+ * fail the screen request itself.
+ */
+
+export interface SnapshotInput {
+  ticker: string;
+  assetType: string;
+  price: number | null;
+  signal: string;
+  fundamental: ScoreResult;
+  inflated: ScoreResult;
+  rateRegime?: string | null;
+}
+
+export class SignalSnapshotRepository {
+  constructor(private readonly db: DatabaseConnection) {}
+
+  /**
+   * Upsert today's snapshot for a batch of screened assets.
+   * Repeated screens on the same day keep the latest result.
+   */
+  recordBatch(inputs: SnapshotInput[], date = SignalSnapshotRepository.today()): number {
+    let written = 0;
+    for (const input of inputs) {
+      this.record(input, date);
+      written++;
+    }
+    return written;
+  }
+
+  record(input: SnapshotInput, date = SignalSnapshotRepository.today()): void {
+    const { ticker, assetType, price, signal, fundamental, inflated, rateRegime } = input;
+    const coverage = fundamental.audit?.coverage ?? inflated.audit?.coverage ?? null;
+    const riskFlags = fundamental.audit?.riskFlags ?? inflated.audit?.riskFlags ?? null;
+
+    const qb = new QueryBuilder('SIGNAL_SNAPSHOT_QUERIES.UPSERT', [
+      ticker.toUpperCase(),
+      date,
+      assetType,
+      price,
+      signal,
+      fundamental.tier,
+      fundamental.score,
+      fundamental.label,
+      inflated.tier,
+      inflated.score,
+      inflated.label,
+      coverage?.active ?? null,
+      coverage?.total ?? null,
+      riskFlags ? JSON.stringify(riskFlags) : null,
+      rateRegime ?? null,
+      new Date().toISOString(),
+    ]);
+    this.db.run(qb);
+  }
+
+  /** Full history for one ticker, oldest first. */
+  history(ticker: string): SignalSnapshotRow[] {
+    const qb = new QueryBuilder('SIGNAL_SNAPSHOT_QUERIES.SELECT_BY_TICKER', [ticker.toUpperCase()]);
+    return this.db.all<SignalSnapshotRow>(qb);
+  }
+
+  /** All snapshots for a given day (YYYY-MM-DD). */
+  byDate(date: string): SignalSnapshotRow[] {
+    const qb = new QueryBuilder('SIGNAL_SNAPSHOT_QUERIES.SELECT_BY_DATE', [date]);
+    return this.db.all<SignalSnapshotRow>(qb);
+  }
+
+  /** Latest snapshot per ticker strictly before a date — for daily diffing. */
+  latestBefore(date: string): SignalSnapshotRow[] {
+    const qb = new QueryBuilder('SIGNAL_SNAPSHOT_QUERIES.SELECT_LATEST_BEFORE', [date]);
+    return this.db.all<SignalSnapshotRow>(qb);
+  }
+
+  private static today(): string {
+    return new Date().toISOString().slice(0, 10);
+  }
+}
@@ -12,19 +12,52 @@ export class BenchmarkProvider {
  private static readonly TTL_MS = 60 * 60 * 1000;
  private static readonly CACHE_PATH = '.benchmark-cache.json';

+  // NOTE: regimes must stay consistent with rateRegime()/volRegime() below —
+  // 4.5% ⇒ NORMAL (2–5%), VIX 20 ⇒ NORMAL (15–25).
  private static readonly DEFAULTS: MarketContext = {
    sp500Price: 5000,
    riskFreeRate: 4.5,
    vixLevel: 20,
-    rateRegime: 'HIGH',
+    rateRegime: 'NORMAL',
    volatilityRegime: 'NORMAL',
    benchmarks: { marketPE: 22, techPE: 30, reitYield: 3.5, igSpread: 1.0 },
  };

+  /** Hysteresis band: the 10Y must cross a regime boundary by this much to flip. */
+  private static readonly REGIME_HYSTERESIS = 0.25;
+
  private static rateRegime(rate: number): MarketContext['rateRegime'] {
    return rate < 2 ? REGIME.LOW : rate <= 5 ? REGIME.NORMAL : REGIME.HIGH;
  }

+  /**
+   * Rate regime with hysteresis (PRODUCT.md P0.5).
+   *
+   * The raw thresholds (2% / 5%) flip the INFLATED scoring gates between
+   * back-to-back requests when the 10Y hovers near a boundary. With a known
+   * previous regime, the rate must cross the boundary by ±0.25% before the
+   * regime switches. A two-step jump (LOW→HIGH) applies immediately.
+   * Public static for direct unit testing.
+   */
+  static resolveRateRegime(
+    rate: number,
+    previous: MarketContext['rateRegime'] | null,
+  ): MarketContext['rateRegime'] {
+    const raw = BenchmarkProvider.rateRegime(rate);
+    if (!previous || raw === previous) return raw;
+
+    const h = BenchmarkProvider.REGIME_HYSTERESIS;
+    if (previous === REGIME.NORMAL && raw === REGIME.HIGH)
+      return rate > 5 + h ? REGIME.HIGH : REGIME.NORMAL;
+    if (previous === REGIME.HIGH && raw === REGIME.NORMAL)
+      return rate < 5 - h ? REGIME.NORMAL : REGIME.HIGH;
+    if (previous === REGIME.NORMAL && raw === REGIME.LOW)
+      return rate < 2 - h ? REGIME.LOW : REGIME.NORMAL;
+    if (previous === REGIME.LOW && raw === REGIME.NORMAL)
+      return rate > 2 + h ? REGIME.NORMAL : REGIME.LOW;
+    return raw; // LOW↔HIGH double jump — no damping
+  }
+
  private static volRegime(vix: number): MarketContext['volatilityRegime'] {
    return vix < 15 ? REGIME.LOW : vix <= 25 ? REGIME.NORMAL : REGIME.HIGH;
  }
@@ -34,6 +67,8 @@ export class BenchmarkProvider {
  }
  private cache: { data: MarketContext | null; expiresAt: number };
  private logger: Logger;
+  /** Last known rate regime — survives cache expiry so hysteresis has memory. */
+  private lastRegime: MarketContext['rateRegime'] | null = null;

  constructor(
    private readonly client: YahooFinanceClient,
@@ -47,6 +82,8 @@ export class BenchmarkProvider {
    try {
      if (!existsSync(BenchmarkProvider.CACHE_PATH)) return { data: null, expiresAt: 0 };
      const file = JSON.parse(readFileSync(BenchmarkProvider.CACHE_PATH, 'utf8')) as CacheFile;
+      // Even an expired cache remembers the previous regime for hysteresis
+      this.lastRegime = file.data?.rateRegime ?? null;
      if (Date.now() < file.expiresAt) return { data: file.data, expiresAt: file.expiresAt };
    } catch {
      // corrupt or missing — ignore
@@ -95,7 +132,7 @@ export class BenchmarkProvider {
        sp500Price,
        riskFreeRate,
        vixLevel,
-        rateRegime: BenchmarkProvider.rateRegime(riskFreeRate),
+        rateRegime: BenchmarkProvider.resolveRateRegime(riskFreeRate, this.lastRegime),
        volatilityRegime: BenchmarkProvider.volRegime(vixLevel),
        benchmarks: {
          marketPE: BenchmarkProvider.pe(spy) ?? 22,
@@ -107,6 +144,7 @@ export class BenchmarkProvider {

      const expiresAt = Date.now() + BenchmarkProvider.TTL_MS;
      this.cache = { data: context, expiresAt };
+      this.lastRegime = context.rateRegime;
      this.saveDiskCache(context, expiresAt);
      return context;
    } catch (err) {
@@ -45,12 +45,25 @@ export interface ScoreAudit {
  breakdown?: Record<string, number>;
  riskFlags?: string[] | null;
  failures?: string[];
+  /** Data coverage: how many scoring factors had data vs. were defined. */
+  coverage?: { active: number; total: number };
 }

+/**
+ * Structured verdict tier — the machine-readable counterpart of `label`.
+ * Signal derivation and persistence MUST use this, never the label string.
+ * PASS = green (buy-quality), HOLD = yellow (neutral), REJECT = red (gate fail / negative).
+ */
+export type VerdictTier = 'PASS' | 'HOLD' | 'REJECT';
+
 export interface ScoreResult {
  label: string;
  scoreSummary: string;
  audit: ScoreAudit;
+  /** Machine-readable verdict tier. Use this for signal logic, not the label. */
+  tier: VerdictTier;
+  /** Numeric factor score. Null when gates failed (no score computed). */
+  score: number | null;
 }

 // AssetResult with runtime methods still attached — used at the HTTP boundary
@@ -46,7 +46,13 @@ export type {
  BondData,
  BondMetrics,
 } from './models.model';
-export type { StoreData, PortfolioData, MarketCallRow, HoldingRow } from './repositories.model';
+export type {
+  StoreData,
+  PortfolioData,
+  MarketCallRow,
+  HoldingRow,
+  SignalSnapshotRow,
+} from './repositories.model';
 export type { NumVal, SanitizedMetrics, SanitizedBondMetrics } from './scorers.model';
 export type {
  BenchmarkProviderOptions,
@@ -86,20 +86,22 @@ export interface StockMetrics {
 export interface EtfData {
  ticker?: string;
  currentPrice?: number;
-  expenseRatio?: string | number;
-  totalAssets?: string | number;
-  yield?: string | number;
-  volume?: string | number;
-  fiveYearReturn?: string | number;
+  expenseRatio?: string | number | null;
+  totalAssets?: string | number | null;
+  yield?: string | number | null;
+  volume?: string | number | null;
+  fiveYearReturn?: string | number | null;
  [key: string]: unknown;
 }

+// Missing Yahoo data is preserved as null so EtfScorer skips the
+// corresponding gate instead of auto-failing on a coerced 0.
 export interface EtfMetrics {
-  expenseRatio: number;
-  totalAssets: number;
-  yield: number;
-  volume: number;
-  fiveYearReturn: number;
+  expenseRatio: number | null;
+  totalAssets: number | null;
+  yield: number | null;
+  volume: number | null;
+  fiveYearReturn: number | null;
 }

 // ── Bond ───────────────────────────────────────────────────────────────────
@@ -37,6 +37,28 @@ export interface HoldingRow {
  source: string;
 }

+/**
+ * Raw database row from signal_snapshots table (P0.1 signal track record).
+ */
+export interface SignalSnapshotRow {
+  ticker: string;
+  snapshot_date: string;
+  asset_type: string;
+  price: number | null;
+  signal: string;
+  fundamental_tier: string;
+  fundamental_score: number | null;
+  fundamental_label: string | null;
+  inflated_tier: string;
+  inflated_score: number | null;
+  inflated_label: string | null;
+  coverage_active: number | null;
+  coverage_total: number | null;
+  risk_flags: string | null; // JSON array stringified
+  rate_regime: string | null;
+  created_at: string;
+}
+
 // ── Persistence Shapes (returned by repositories) ───────────────────────────

 export interface StoreData {
@@ -0,0 +1,35 @@
+import type { DatabaseConnection } from '../shared/db/index.js';
+import { WATCHLIST_QUERIES } from '../shared/db/queries.constant.js';
+
+export interface WatchlistEntry {
+  ticker: string;
+  pinnedAt: string;
+}
+
+export class WatchlistRepository {
+  constructor(private readonly db: DatabaseConnection) {}
+
+  list(userId: string): WatchlistEntry[] {
+    const rows = this.db.rawAll<{ ticker: string; pinned_at: string }>(
+      WATCHLIST_QUERIES.SELECT_ALL,
+      [userId],
+    );
+    return rows.map((r) => ({ ticker: r.ticker, pinnedAt: r.pinned_at }));
+  }
+
+  add(ticker: string, userId: string): void {
+    this.db.rawRun(WATCHLIST_QUERIES.INSERT, [
+      ticker.toUpperCase(),
+      userId,
+      new Date().toISOString(),
+    ]);
+  }
+
+  remove(ticker: string, userId: string): void {
+    this.db.rawRun(WATCHLIST_QUERIES.DELETE, [ticker.toUpperCase(), userId]);
+  }
+
+  has(ticker: string, userId: string): boolean {
+    return !!this.db.rawGet(WATCHLIST_QUERIES.EXISTS, [ticker.toUpperCase(), userId]);
+  }
+}
@@ -0,0 +1,2 @@
+export { WatchlistController } from './watchlist.controller.js';
+export { WatchlistRepository } from './WatchlistRepository.js';
@@ -0,0 +1,53 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest, preHandlerHookHandler } from 'fastify';
+import type { TokenPayload } from '../auth/index.js';
+import { WatchlistRepository } from './WatchlistRepository.js';
+
+type AuthedRequest = FastifyRequest & { user: TokenPayload };
+
+interface WatchlistControllerOptions {
+  authGuard: preHandlerHookHandler;
+}
+
+export class WatchlistController {
+  readonly #guards: preHandlerHookHandler[];
+
+  constructor(
+    private readonly repo: WatchlistRepository,
+    options: WatchlistControllerOptions,
+  ) {
+    this.#guards = [options.authGuard];
+  }
+
+  register(app: FastifyInstance): void {
+    const g = { preHandler: this.#guards };
+    app.get('/api/watchlist', g, this.list.bind(this));
+    app.post('/api/watchlist/:ticker', g, this.add.bind(this));
+    app.delete('/api/watchlist/:ticker', g, this.remove.bind(this));
+  }
+
+  private list(req: FastifyRequest): {
+    tickers: string[];
+    entries: { ticker: string; pinnedAt: string }[];
+  } {
+    const userId = (req as AuthedRequest).user.sub;
+    const entries = this.repo.list(userId);
+    return { tickers: entries.map((e) => e.ticker), entries };
+  }
+
+  private add(req: FastifyRequest, reply: FastifyReply): { ok: boolean } | FastifyReply {
+    const userId = (req as AuthedRequest).user.sub;
+    const ticker = (req.params as { ticker: string }).ticker?.toUpperCase();
+    if (!ticker || !/^[A-Z0-9.-]{1,12}$/.test(ticker)) {
+      return reply.code(400).send({ error: 'Invalid ticker' });
+    }
+    this.repo.add(ticker, userId);
+    return { ok: true };
+  }
+
+  private remove(req: FastifyRequest): { ok: boolean } {
+    const userId = (req as AuthedRequest).user.sub;
+    const ticker = (req.params as { ticker: string }).ticker?.toUpperCase();
+    this.repo.remove(ticker, userId);
+    return { ok: true };
+  }
+}
@@ -0,0 +1,43 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { BenchmarkProvider } from '../server/domains/shared/services/BenchmarkProvider.js';
+
+// P0.5 — rate-regime hysteresis: the 10Y must cross a boundary by ±0.25%
+// before the regime flips, so a rate hovering at the threshold can't toggle
+// INFLATED gates between back-to-back requests.
+test('BenchmarkProvider.resolveRateRegime', async (t) => {
+  await t.test('no previous regime → raw thresholds apply', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(1.5, null), 'LOW');
+    assert.equal(BenchmarkProvider.resolveRateRegime(4.5, null), 'NORMAL');
+    assert.equal(BenchmarkProvider.resolveRateRegime(5.1, null), 'HIGH');
+  });
+
+  await t.test('NORMAL holds until 10Y clears 5.25%', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(5.1, 'NORMAL'), 'NORMAL'); // damped
+    assert.equal(BenchmarkProvider.resolveRateRegime(5.25, 'NORMAL'), 'NORMAL'); // boundary
+    assert.equal(BenchmarkProvider.resolveRateRegime(5.3, 'NORMAL'), 'HIGH'); // crossed
+  });
+
+  await t.test('HIGH holds until 10Y drops below 4.75%', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(4.9, 'HIGH'), 'HIGH'); // damped
+    assert.equal(BenchmarkProvider.resolveRateRegime(4.75, 'HIGH'), 'HIGH'); // boundary
+    assert.equal(BenchmarkProvider.resolveRateRegime(4.7, 'HIGH'), 'NORMAL'); // crossed
+  });
+
+  await t.test('LOW/NORMAL boundary at 2% gets the same damping', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(1.9, 'NORMAL'), 'NORMAL'); // damped
+    assert.equal(BenchmarkProvider.resolveRateRegime(1.7, 'NORMAL'), 'LOW'); // crossed
+    assert.equal(BenchmarkProvider.resolveRateRegime(2.1, 'LOW'), 'LOW'); // damped
+    assert.equal(BenchmarkProvider.resolveRateRegime(2.3, 'LOW'), 'NORMAL'); // crossed
+  });
+
+  await t.test('no change when raw regime equals previous', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(4.5, 'NORMAL'), 'NORMAL');
+    assert.equal(BenchmarkProvider.resolveRateRegime(6.0, 'HIGH'), 'HIGH');
+  });
+
+  await t.test('double jump (LOW→HIGH) is not damped', () => {
+    assert.equal(BenchmarkProvider.resolveRateRegime(5.4, 'LOW'), 'HIGH');
+    assert.equal(BenchmarkProvider.resolveRateRegime(1.2, 'HIGH'), 'LOW');
+  });
+});
@@ -255,6 +255,49 @@ test('EtfScorer', async (t) => {
    assert.equal(result.label, '🔴 REJECT');
  });

+  await t.test('does not reject ETF when Yahoo data is missing (null)', () => {
+    const metrics: EtfMetrics = {
+      expenseRatio: 0.05,
+      yield: 1.8,
+      volume: null, // Yahoo did not return averageVolume
+      fiveYearReturn: null, // Yahoo did not return fiveYearAverageReturn
+      totalAssets: null,
+    };
+
+    const result = EtfScorer.score(metrics, DEFAULT_RULES);
+    // Missing data skips gates — must NOT auto-fail as 0 < gate
+    assert.notEqual(result.label, '🔴 REJECT');
+    assert.ok(result.audit?.passedGates);
+  });
+
+  await t.test('still enforces expense gate when other data is missing', () => {
+    const metrics: EtfMetrics = {
+      expenseRatio: 0.8, // above 0.2 gate
+      yield: null,
+      volume: null,
+      fiveYearReturn: null,
+      totalAssets: null,
+    };
+
+    const result = EtfScorer.score(metrics, DEFAULT_RULES);
+    assert.equal(result.label, '🔴 REJECT');
+    assert.ok(result.scoreSummary.includes('Expense ratio'));
+  });
+
+  await t.test('labels all-null metrics as No Data instead of Neutral', () => {
+    const metrics: EtfMetrics = {
+      expenseRatio: null,
+      yield: null,
+      volume: null,
+      fiveYearReturn: null,
+      totalAssets: null,
+    };
+
+    const result = EtfScorer.score(metrics, DEFAULT_RULES);
+    assert.equal(result.label, '🟡 Neutral (No Data)');
+    assert.equal(result.audit?.coverage?.active, 0);
+  });
+
  await t.test('handles negative 5-year return', () => {
    const metrics: EtfMetrics = {
      expenseRatio: 0.1,
@@ -0,0 +1,87 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { SignalSnapshotRepository } from '../server/domains/shared/persistence/SignalSnapshotRepository.js';
+import { MockDatabaseConnection } from './helpers/mockDb.js';
+import type { DatabaseConnection } from '../server/domains/shared/db/index.js';
+import type { ScoreResult } from '../server/domains/shared/types/index.js';
+
+const passResult: ScoreResult = {
+  label: '🟢 BUY (High Conviction)',
+  tier: 'PASS',
+  score: 9,
+  scoreSummary: 'Score: 9',
+  audit: { passedGates: true, breakdown: { roe: 3 }, coverage: { active: 6, total: 11 } },
+};
+
+const rejectResult: ScoreResult = {
+  label: '🔴 REJECT',
+  tier: 'REJECT',
+  score: null,
+  scoreSummary: 'Gate failed: P/E 40 > 15',
+  audit: { passedGates: false, failures: ['P/E 40 > 15'] },
+};
+
+function repo(): SignalSnapshotRepository {
+  return new SignalSnapshotRepository(
+    new MockDatabaseConnection() as unknown as DatabaseConnection,
+  );
+}
+
+test('SignalSnapshotRepository', async (t) => {
+  await t.test('record() builds a valid UPSERT (16 params, no throw)', () => {
+    // QueryBuilder validates placeholder count — a param mismatch throws here.
+    assert.doesNotThrow(() =>
+      repo().record({
+        ticker: 'aapl',
+        assetType: 'STOCK',
+        price: 189.5,
+        signal: '✅ Strong Buy',
+        fundamental: passResult,
+        inflated: passResult,
+        rateRegime: 'NORMAL',
+      }),
+    );
+  });
+
+  await t.test('record() tolerates gate-failed results (null score)', () => {
+    assert.doesNotThrow(() =>
+      repo().record({
+        ticker: 'XYZ',
+        assetType: 'STOCK',
+        price: null,
+        signal: '❌ Avoid',
+        fundamental: rejectResult,
+        inflated: rejectResult,
+      }),
+    );
+  });
+
+  await t.test('recordBatch() returns count written', () => {
+    const n = repo().recordBatch([
+      {
+        ticker: 'AAPL',
+        assetType: 'STOCK',
+        price: 189.5,
+        signal: '✅ Strong Buy',
+        fundamental: passResult,
+        inflated: passResult,
+      },
+      {
+        ticker: 'MSFT',
+        assetType: 'STOCK',
+        price: 425.3,
+        signal: '🔄 Neutral',
+        fundamental: passResult,
+        inflated: passResult,
+      },
+    ]);
+    assert.equal(n, 2);
+  });
+
+  await t.test('read methods build valid queries', () => {
+    const r = repo();
+    assert.deepEqual(r.history('aapl'), []);
+    assert.deepEqual(r.byDate('2026-06-09'), []);
+    assert.deepEqual(r.latestBefore('2026-06-09'), []);
+  });
+});
@@ -238,8 +238,97 @@ test('StockScorer', async (t) => {
    } as any;

    const result = StockScorer.score(metrics, DEFAULT_RULES);
-    // Should handle gracefully (zero is falsy, treated as null)
+    // Zero quick ratio is a real value and fails the liquidity gate;
+    // zero P/E, PEG, P/B are impossible values and are treated as missing.
    assert.ok(result);
+    assert.equal(result.label, '🔴 REJECT');
+    assert.ok(result.scoreSummary.includes('Quick'));
+  });
+
+  await t.test('treats zero revenue growth as a real (stagnant) value', () => {
+    const metrics: StockMetrics = {
+      peRatio: 12,
+      pegRatio: 0.8,
+      debtToEquity: 0.5,
+      quickRatio: 1.2,
+      returnOnEquity: 20,
+      operatingMargin: 15,
+      netProfitMargin: 10,
+      revenueGrowth: 0, // stagnant — must be scored, not skipped
+      fcfYield: 5,
+    } as any;
+
+    const result = StockScorer.score(metrics, DEFAULT_RULES);
+    assert.ok(result.audit?.passedGates);
+    // 0% growth is below revMed (5) → scores -1, same as slightly negative growth
+    assert.equal(result.audit?.breakdown?.revenue, -1);
+  });
+
+  await t.test('treats zero debt-to-equity as debt-free, not missing', () => {
+    const metrics: StockMetrics = {
+      peRatio: 12,
+      pegRatio: 0.8,
+      debtToEquity: 0, // debt-free — should pass the gate, not be skipped
+      quickRatio: 1.2,
+      returnOnEquity: 20,
+      operatingMargin: 15,
+      netProfitMargin: 10,
+      revenueGrowth: 8,
+      fcfYield: 5,
+    } as any;
+
+    const result = StockScorer.score(metrics, DEFAULT_RULES);
+    assert.ok(result.audit?.passedGates);
+    assert.notEqual(result.label, '🔴 REJECT');
+  });
+
+  await t.test('flags insufficient data instead of plain HOLD', () => {
+    const metrics: StockMetrics = { currentPrice: 50 } as any;
+
+    const result = StockScorer.score(metrics, DEFAULT_RULES);
+    assert.equal(result.label, '🟡 HOLD (No Data)');
+    assert.equal(result.audit?.coverage?.active, 0);
+  });
+
+  await t.test('returns structured tier and numeric score (P0.3)', () => {
+    const strong: StockMetrics = {
+      peRatio: 12,
+      pegRatio: 0.7,
+      debtToEquity: 0.3,
+      quickRatio: 1.5,
+      returnOnEquity: 30,
+      operatingMargin: 25,
+      netProfitMargin: 18,
+      revenueGrowth: 12,
+      fcfYield: 6,
+    } as any;
+    const pass = StockScorer.score(strong, DEFAULT_RULES);
+    assert.equal(pass.tier, 'PASS');
+    assert.ok(typeof pass.score === 'number' && pass.score >= 4);
+
+    const gated: StockMetrics = { ...strong, peRatio: 40 } as any;
+    const reject = StockScorer.score(gated, DEFAULT_RULES);
+    assert.equal(reject.tier, 'REJECT');
+    assert.equal(reject.score, null);
+
+    const noData = StockScorer.score({ currentPrice: 50 } as any, DEFAULT_RULES);
+    assert.equal(noData.tier, 'HOLD');
+    assert.equal(noData.score, 0);
+  });
+
+  await t.test('reports factor coverage in audit', () => {
+    const metrics: StockMetrics = {
+      peRatio: 12,
+      pegRatio: 0.8,
+      quickRatio: 1.2,
+      returnOnEquity: 20,
+      currentPrice: 50,
+    } as any;
+
+    const result = StockScorer.score(metrics, DEFAULT_RULES);
+    assert.ok(result.audit?.coverage);
+    assert.ok(result.audit.coverage.active >= 1);
+    assert.ok(result.audit.coverage.active <= result.audit.coverage.total);
  });

  await t.test('scores based on configured thresholds', () => {
@@ -4,6 +4,9 @@
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
@@ -6,3 +6,4 @@ export { screenTickers, fetchCatalysts, analyzeTickers } from './screener.js';
 export { fetchPortfolio, addHolding, removeHolding, fetchMarketContext } from './finance.js';
 export { fetchCalls, fetchCall, createCall, deleteCall, fetchCallsCalendar } from './calls.js';
 export { login, register, authFetch } from './auth.js';
+export { fetchWatchlist, pinTicker, unpinTicker } from './watchlist.js';
@@ -0,0 +1,25 @@
+import { authFetch } from './auth.js';
+
+const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export async function fetchWatchlist(): Promise<{ tickers: string[] }> {
+  const res = await authFetch(`${BASE}/api/watchlist`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function pinTicker(ticker: string): Promise<void> {
+  const res = await authFetch(`${BASE}/api/watchlist/${encodeURIComponent(ticker)}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'text/plain' },
+  });
+  if (!res.ok) throw new Error(await res.text());
+}
+
+export async function unpinTicker(ticker: string): Promise<void> {
+  const res = await authFetch(`${BASE}/api/watchlist/${encodeURIComponent(ticker)}`, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'text/plain' },
+  });
+  if (!res.ok) throw new Error(await res.text());
+}
@@ -2,7 +2,100 @@
  import Spinner from '$lib/components/shared/Spinner.svelte';
  import type { SidebarState } from '$lib/types.js';

-  let { sidebar, onClose }: { sidebar: SidebarState; onClose: () => void } = $props();
+  let { sidebar, onClose, onScreenTickers }: {
+    sidebar: SidebarState;
+    onClose: () => void;
+    onScreenTickers?: (tickers: string[]) => void;
+  } = $props();
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+
+  function sentimentClass(s: string) {
+    if (s === 'BULLISH') return 'sent-bullish';
+    if (s === 'BEARISH') return 'sent-bearish';
+    return 'sent-neutral';
+  }
+
+  function sentimentEmoji(s: string) {
+    if (s === 'BULLISH') return '▲';
+    if (s === 'BEARISH') return '▼';
+    return '⊙';
+  }
+
+  function sentimentLabel(s: string) {
+    if (s === 'BULLISH') return 'Bullish';
+    if (s === 'BEARISH') return 'Bearish';
+    return 'Neutral';
+  }
+
+  // Derive industry impact from reason text heuristically
+  function industryImpact(reason: string): 'bear' | 'bull' | 'neut' {
+    const r = reason.toLowerCase();
+    const bearWords = ['weigh', 'pressure', 'risk', 'decline', 'weaken', 'concern', 'miss', 'delay', 'slowdown', 'threat', 'compress', 'reduce', 'cut', 'loss'];
+    const bullWords = ['benefit', 'strength', 'tailwind', 'inflow', 'growth', 'gain', 'boost', 'rise', 'improve', 'outperform'];
+    const bearScore = bearWords.filter(w => r.includes(w)).length;
+    const bullScore = bullWords.filter(w => r.includes(w)).length;
+    if (bearScore > bullScore) return 'bear';
+    if (bullScore > bearScore) return 'bull';
+    return 'neut';
+  }
+
+  function biasClass(bias: string) {
+    if (bias === 'BULL') return 'sig-bull';
+    if (bias === 'BEAR') return 'sig-bear';
+    return 'sig-neut';
+  }
+
+  function biasLabel(bias: string) {
+    if (bias === 'BULL') return '▲ BULLISH';
+    if (bias === 'BEAR') return '▼ BEARISH';
+    return '⊙ WATCH';
+  }
+
+  // sensitivity 1–5 → confidence label + class
+  function confLabel(s: number): string {
+    if (s >= 4) return 'HIGH confidence';
+    if (s >= 2) return 'MED confidence';
+    return 'LOW confidence';
+  }
+
+  function confClass(s: number): string {
+    if (s >= 4) return 'conf-high';
+    if (s >= 2) return 'conf-med';
+    return 'conf-low';
+  }
+
+  // sensitivity → confidence bar %
+  function confPct(s: number): number {
+    return Math.round((s / 5) * 100);
+  }
+
+  // horizon → human label for catalyst tag
+  function horizonLabel(h: string): string {
+    if (h === 'SHORT') return 'Near-term';
+    if (h === 'LONG')  return 'Long-term';
+    return 'Medium-term';
+  }
+
+  function screenAll() {
+    if (!sidebar.analysis) return;
+    const tickers = sidebar.analysis.relatedTickers.map(rt => rt.ticker);
+    onScreenTickers?.(tickers);
+    onClose();
+  }
+
+  // Bold key phrases — wrap words > 6 chars that are all-caps or capitalised nouns
+  // (simple heuristic: bold ticker-like tokens and numbers with %)
+  function boldKeyTerms(text: string): string {
+    // Bold anything that looks like a ticker (2–5 uppercase letters)
+    return text.replace(/\b([A-Z]{2,5})\b/g, '<strong>$1</strong>');
+  }
+
+  // Overall confidence from analysis: average sensitivity
+  function overallConf(tickers: { sensitivity: number }[]): number {
+    if (!tickers.length) return 50;
+    return Math.round(tickers.reduce((s, t) => s + t.sensitivity, 0) / tickers.length / 5 * 100);
+  }
 </script>

 {#if sidebar.open}
@@ -17,16 +110,19 @@
  ></div>

  <!-- Panel -->
-  <aside class="sidebar">
-    <div class="sidebar-header">
-      <div class="sidebar-title">
-        <span>🤖 LLM Analysis</span>
-        {#if sidebar.type}<span class="sidebar-type">{sidebar.type}S</span>{/if}
-      </div>
+  <aside class="sidebar as-panel">
+    <!-- Header -->
+    <div class="sidebar-header as-header">
+      <span class="as-icon">🤖</span>
+      <span class="sidebar-title as-title">LLM Analysis</span>
+      {#if sidebar.type}
+        <span class="sidebar-type as-scope">{sidebar.type}S</span>
+      {/if}
      <button class="sidebar-close" onclick={onClose}>✕</button>
    </div>

-    <div class="sidebar-body">
+    <div class="sidebar-body as-body">
+
      {#if sidebar.loading}
        <div class="sidebar-loading">
          <Spinner size="lg" label="Analyzing tickers…" />
@@ -37,46 +133,464 @@

      {:else if sidebar.analysis}
        {@const a = sidebar.analysis}
-        <div class="sb-sentiment-row">
-          <span class="sentiment-pill" data-sentiment={a.sentiment}>{a.sentiment}</span>
-        </div>
+        {@const conf = overallConf(a.relatedTickers ?? [])}

-        <p class="sb-summary">{a.summary}</p>
-
-        <h3 class="sb-sub">Affected Industries</h3>
-        <div class="sb-list">
-          {#each a.affectedIndustries ?? [] as ind}
-            <div class="sb-item">
-              <span class="sb-name">{ind.name}</span>
-              <span class="sb-reason">{ind.reason}</span>
+        <!-- ── SENTIMENT HERO ── -->
+        <div class="as-sentiment-hero">
+          <div class="as-sent-top">
+            <span class="as-sent-badge {sentimentClass(a.sentiment)}">
+              {sentimentEmoji(a.sentiment)} {sentimentLabel(a.sentiment)}
+            </span>
+            <div class="as-sent-meta">
+              <span class="as-sent-model">claude-sonnet</span>
            </div>
-          {/each}
+          </div>
+
+          <!-- confidence bar -->
+          <div class="as-conf-row">
+            <span class="as-conf-label">Confidence</span>
+            <div class="as-conf-track">
+              <div class="as-conf-fill" style="width:{conf}%"></div>
+            </div>
+            <span class="as-conf-pct">{conf}%</span>
+          </div>
+
+          <p class="as-summary">{a.summary}</p>
        </div>

-        <h3 class="sb-sub">Related Tickers to Watch</h3>
-        <div class="sb-list">
-          {#each a.relatedTickers ?? [] as rt}
-            <div class="sb-item">
-              <div class="sb-ticker-row">
-                <span class="sb-name ticker">{rt.ticker}</span>
-                <div class="sb-chips">
-                  {#if rt.bias}
-                    <span class="sb-chip sb-bias" data-bias={rt.bias}>{rt.bias}</span>
-                  {/if}
-                  {#if rt.horizon}
-                    <span class="sb-chip sb-horizon">{rt.horizon}</span>
-                  {/if}
-                  {#if rt.sensitivity}
-                    <span class="sb-chip sb-sensitivity" title="Sensitivity {rt.sensitivity}/5">S{rt.sensitivity}</span>
-                  {/if}
+        <!-- ── AFFECTED INDUSTRIES ── -->
+        {#if (a.affectedIndustries ?? []).length > 0}
+          <div class="as-section">
+            <div class="as-section-header">
+              <span class="as-section-title">Affected Industries</span>
+              <span class="as-section-count">{a.affectedIndustries.length}</span>
+              <div class="as-section-divider"></div>
+            </div>
+
+            <div class="as-industry-list">
+              {#each a.affectedIndustries as ind}
+                {@const impact = industryImpact(ind.reason)}
+                <div class="as-ind-card {impact}">
+                  <div class="as-ind-top">
+                    <span class="as-ind-name">{ind.name}</span>
+                    {#if impact === 'bear'}
+                      <span class="as-impact-chip imp-bear">▼ BEAR</span>
+                    {:else if impact === 'bull'}
+                      <span class="as-impact-chip imp-bull">▲ BULL</span>
+                    {:else}
+                      <span class="as-impact-chip imp-neut">⊙ MIXED</span>
+                    {/if}
+                  </div>
+                  <p class="as-ind-body">{@html boldKeyTerms(ind.reason)}</p>
                </div>
-              </div>
-              <span class="sb-reason">{rt.reason}</span>
+              {/each}
            </div>
-          {/each}
-        </div>
+          </div>
+        {/if}
+
+        <!-- ── RELATED TICKERS ── -->
+        {#if (a.relatedTickers ?? []).length > 0}
+          <div class="as-section">
+            <div class="as-section-header">
+              <span class="as-section-title">Tickers to Watch</span>
+              <span class="as-section-count">{a.relatedTickers.length}</span>
+              <div class="as-section-divider"></div>
+            </div>
+
+            <div class="as-ticker-list">
+              {#each a.relatedTickers as rt}
+                <div class="as-tick-card">
+                  <div class="as-tick-top">
+                    <span class="as-tick-sym">{rt.ticker}</span>
+                    <span class="as-signal-chip {biasClass(rt.bias)}">{biasLabel(rt.bias)}</span>
+                  </div>
+                  <div class="as-tick-meta">
+                    <span class="as-conf-chip {confClass(rt.sensitivity)}">{confLabel(rt.sensitivity)}</span>
+                    <span
+                      class="as-score-tier"
+                      title="Sensitivity score: S{rt.sensitivity} = {rt.sensitivity}/5 — how directly this ticker is affected by the news catalyst"
+                    >S{rt.sensitivity}/5</span>
+                    <span class="as-horizon-chip">{horizonLabel(rt.horizon)}</span>
+                  </div>
+                  <p class="as-tick-thesis">{@html boldKeyTerms(rt.reason)}</p>
+                  <div class="as-catalyst-tag">⚡ {rt.horizon} horizon catalyst</div>
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <!-- ── SCREENER BRIDGE ── -->
+        {#if onScreenTickers && (a.relatedTickers ?? []).length > 0}
+          <div class="as-screener-prompt">
+            <div class="as-sp-text">
+              <strong>Screen these tickers</strong> to see current signals, scores, and gate results.
+            </div>
+            <button class="as-sp-btn" onclick={screenAll}>Screen All →</button>
+          </div>
+        {/if}
+
      {/if}
    </div>
  </aside>
 {/if}

+<style>
+  /* ── Sentiment hero ──────────────────────────────────────────────────── */
+  .as-sentiment-hero {
+    padding: 18px 16px 16px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .as-sent-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .as-sent-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 6px 16px;
+    border-radius: 24px;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+  }
+
+  .sent-bullish { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
+  .sent-neutral { background: var(--blue-badge); color: var(--blue-muted); border: 1px solid #1a3a5c; }
+  .sent-bearish { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
+
+  .as-sent-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .as-sent-model {
+    font-size: 10px;
+    padding: 2px 7px;
+    border-radius: 4px;
+    background: var(--bg-card);
+    color: var(--text-dimmer);
+    font-family: var(--font-mono);
+    border: 1px solid var(--border);
+  }
+
+  /* confidence bar */
+  .as-conf-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+  }
+
+  .as-conf-label {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-dimmer);
+    width: 68px;
+    flex-shrink: 0;
+  }
+
+  .as-conf-track {
+    flex: 1;
+    height: 4px;
+    background: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .as-conf-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(90deg, var(--blue) 0%, #2dd4bf 100%);
+    transition: width 0.5s ease;
+  }
+
+  .as-conf-pct {
+    font-size: 11px;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    color: var(--blue-muted);
+    width: 34px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .as-summary {
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .as-summary :global(strong) { color: var(--text-secondary); font-weight: 600; }
+
+  /* ── Section ─────────────────────────────────────────────────────────── */
+  .as-section {
+    padding: 14px 16px 0;
+  }
+
+  .as-section:last-of-type {
+    padding-bottom: 14px;
+  }
+
+  .as-section-header {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 10px;
+  }
+
+  .as-section-title {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-dimmer);
+    white-space: nowrap;
+  }
+
+  .as-section-count {
+    font-size: 10px;
+    font-family: var(--font-mono);
+    padding: 1px 6px;
+    border-radius: 3px;
+    background: var(--bg-card);
+    color: var(--text-dimmer);
+    border: 1px solid var(--border);
+  }
+
+  .as-section-divider {
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+
+  /* ── Industry cards ──────────────────────────────────────────────────── */
+  .as-industry-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  .as-ind-card {
+    border-radius: 8px;
+    padding: 11px 12px;
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    border-left-width: 3px;
+  }
+
+  .as-ind-card.bear { border-left-color: #f05a5a; }
+  .as-ind-card.bull { border-left-color: #34d17a; }
+  .as-ind-card.neut { border-left-color: var(--border); }
+
+  .as-ind-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 6px;
+  }
+
+  .as-ind-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    line-height: 1.4;
+  }
+
+  .as-impact-chip {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    font-family: var(--font-mono);
+  }
+
+  .imp-bear { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
+  .imp-bull { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
+  .imp-neut { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
+
+  .as-ind-body {
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .as-ind-body :global(strong) { color: var(--text-secondary); font-weight: 600; }
+
+  /* ── Ticker cards ────────────────────────────────────────────────────── */
+  .as-ticker-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  .as-tick-card {
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+
+  .as-tick-card:hover {
+    border-color: var(--border-input);
+    background: var(--bg-elevated);
+  }
+
+  .as-tick-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 7px;
+  }
+
+  .as-tick-sym {
+    font-size: 15px;
+    font-weight: 700;
+    font-family: var(--font-mono);
+    letter-spacing: 0.03em;
+    color: var(--text-primary);
+  }
+
+  .as-signal-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 9px;
+    border-radius: 20px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    margin-left: auto;
+  }
+
+  .sig-bear { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
+  .sig-bull { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
+  .sig-neut { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
+
+  .as-tick-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+    flex-wrap: wrap;
+  }
+
+  .as-conf-chip {
+    font-size: 10px;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+
+  .conf-high { background: #0d2e1a; color: #34d17a; }
+  .conf-med  { background: #2e2000; color: #f0b429; }
+  .conf-low  { background: var(--bg-elevated); color: var(--text-dimmer); border: 1px solid var(--border); }
+
+  .as-score-tier {
+    font-size: 10px;
+    font-weight: 600;
+    font-family: var(--font-mono);
+    color: var(--text-dimmer);
+    padding: 2px 7px;
+    border-radius: 4px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    cursor: help;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 2px;
+  }
+
+  .as-horizon-chip {
+    font-size: 10px;
+    color: var(--text-dimmer);
+    padding: 2px 7px;
+    border-radius: 4px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+  }
+
+  .as-tick-thesis {
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--text-muted);
+    padding-top: 8px;
+    border-top: 1px solid var(--border);
+    margin: 0;
+  }
+
+  .as-tick-thesis :global(strong) { color: var(--text-secondary); font-weight: 600; }
+
+  .as-catalyst-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    color: #a78bfa;
+    background: #1e1535;
+    padding: 2px 8px;
+    border-radius: 4px;
+    border: 1px solid #2d2050;
+    margin-top: 7px;
+  }
+
+  /* ── Screener bridge ─────────────────────────────────────────────────── */
+  .as-screener-prompt {
+    margin: 4px 16px 16px;
+    padding: 12px 14px;
+    background: var(--blue-badge);
+    border: 1px solid #1a3a5c;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .as-sp-text {
+    font-size: 12px;
+    color: var(--blue-muted);
+    line-height: 1.5;
+  }
+
+  .as-sp-text :global(strong) { font-weight: 600; color: var(--blue-muted); }
+
+  .as-sp-btn {
+    flex-shrink: 0;
+    padding: 6px 14px;
+    border-radius: 6px;
+    background: var(--blue);
+    color: #000;
+    border: none;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s ease;
+  }
+
+  .as-sp-btn:hover { background: #7ec0ff; }
+</style>
@@ -1,7 +1,10 @@
 <script lang="ts">
  import { sigOrd, sorted } from '$lib/utils.js';
  import Spinner from '$lib/components/shared/Spinner.svelte';
+  import GlossaryPanel from '$lib/components/screener/GlossaryPanel.svelte';
+  import SignalModal from '$lib/components/screener/SignalModal.svelte';
  import type { AssetType, AssetResult } from '$lib/types.js';
+  import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';

  let {
    type,
@@ -15,9 +18,12 @@
    onAnalyze:       () => void;
  } = $props();

-  let mode      = $state('inflated');
-  let expanded  = $state<string | null>(null);
-  let sortCol   = $state<string | null>(null);
+  let mode         = $state('inflated');
+  let expanded     = $state<string | null>(null);
+  let glossaryOpen    = $state(false);
+  let specModalRow    = $state<AssetResult | null>(null);
+  let glossaryFocusKey = $state<string | null>(null);
+  let sortCol      = $state<string | null>(null);
  let sortAsc   = $state(true);
  let filterTicker  = $state('');
  let filterSignal   = $state('');
@@ -162,6 +168,21 @@
    return n > 0 ? 'pos' : n < 0 ? 'neg' : '';
  }

+  // Derive the set of metric keys present in the currently-expanded row
+  // so the glossary can highlight them contextually.
+  const METRIC_KEYS_STOCK = ['P/E','PEG','ROE%','OpMgn%','GrossM%','FCF Yld%','D/E','52W Chg','From High','Analyst','Upside','DCF Safety'];
+  const METRIC_KEYS_ETF   = ['Exp Ratio%','5Y Return%','Yield%'];
+  const METRIC_KEYS_BOND  = ['YTM%','Duration','Rating'];
+
+  function activeGlossaryMetrics(): string[] {
+    if (!expanded) return [];
+    const row = rows.find((r) => r.asset.ticker === expanded);
+    if (!row) return [];
+    const m = row.asset.displayMetrics ?? {};
+    const keys = type === 'STOCK' ? METRIC_KEYS_STOCK : type === 'ETF' ? METRIC_KEYS_ETF : METRIC_KEYS_BOND;
+    return keys.filter((k) => m[k] != null && m[k] !== '—');
+  }
+
  function breakdownEntries(bd: Record<string, number> | undefined) {
    if (!bd) return [];
    return Object.entries(bd).sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]));
@@ -172,6 +193,93 @@
    const max = Math.max(...Object.values(bd).map(Math.abs));
    return max === 0 ? 1 : max;
  }
+
+  // Factor card helpers
+  interface FactorCard {
+    key: string;       // glossary key
+    name: string;      // display name
+    score: number;
+    reason: string;    // plain-English with embedded <b> tags
+    pct: number;       // bar width %
+  }
+
+  const FACTOR_META: Record<string, { name: string; key: string; reason: (val: string | undefined, score: number, threshold?: string) => string }> = {
+    'ROE':      { name: 'Return on Equity',       key: 'ROE%',       reason: (v, s)  => s > 0 ? `ROE <b>${v}</b> — above 15% threshold. Strong capital efficiency.` : `ROE <b>${v}</b> — below the 15% preferred threshold. Partial or no score.` },
+    'opMargin': { name: 'Operating Margin',        key: 'OpMgn%',     reason: (v, s)  => s > 0 ? `Op margin <b>${v}</b> — positive and above threshold. Efficient operations.` : `Op margin <b>${v}</b> — below preferred threshold (Gate: > 10%).` },
+    'margin':   { name: 'Gross Margin',            key: 'GrossM%',    reason: (v, s)  => s > 0 ? `Gross margin <b>${v}</b> — strong pricing power.` : `Gross margin <b>${v}</b> — limited pricing power or high COGS.` },
+    'peg':      { name: 'PEG Ratio',               key: 'PEG',        reason: (v, s)  => s > 0 ? `PEG <b>${v}</b> — below 1.0 threshold. Paying less than growth justifies. (Gate: < 1.0)` : `PEG <b>${v}</b> — above 1.0 threshold. Paying a growth premium. (Gate: < 1.0)` },
+    'revenue':  { name: 'Revenue Growth',          key: 'Revenue',    reason: (_v, s) => s > 0 ? `Revenue growing. Positive contribution to score.` : `Revenue growth below threshold or negative. Partial or no score.` },
+    'fcf':      { name: 'FCF Yield',               key: 'FCF Yld%',   reason: (v, s)  => s > 0 ? `FCF yield <b>${v}</b> — strongly positive free cash flow. High weight metric. (Gate: > 0%)` : `FCF yield <b>${v}</b> — negative or zero free cash flow. Hard gate failure.` },
+    'analyst':  { name: 'Analyst Consensus',       key: 'Analyst',    reason: (v, s)  => s > 0 ? `Rated <b>Buy</b> by Wall St. (Yahoo mean ≤ 2.5). Requires ≥ 3 analysts. Rating: ${v}.` : s < 0 ? `Analyst consensus <b>${v}</b> — bearish consensus or insufficient coverage.` : `Analyst consensus <b>${v}</b> — neutral range or fewer than 3 analysts.` },
+    'dcf':      { name: 'DCF Margin of Safety',    key: 'DCF Safety', reason: (v, s)  => s > 0 ? `Intrinsic value <b>${v} above</b> current price. Stock appears undervalued vs DCF model. (Gate: ≥ 20%)` : s < 0 ? `Stock priced <b>above</b> DCF intrinsic value. May be overvalued by the model.` : `DCF margin of safety near zero. No significant under/overvaluation signal.` },
+    'cost':     { name: 'Expense Ratio',           key: 'Exp Ratio%', reason: (v, s)  => s > 0 ? `Expense ratio <b>${v}</b> — low cost. Costs compound in your favour. (Gate: ≤ 0.20%)` : `Expense ratio <b>${v}</b> — above the 0.20% gate. Higher fees reduce long-run returns.` },
+    'yield':    { name: 'Distribution Yield',      key: 'Yield%',     reason: (v, s)  => s > 0 ? `Yield <b>${v}</b> — strong income distribution.` : `Yield <b>${v}</b> — below preferred level.` },
+    'volume':   { name: 'Avg Daily Volume',        key: 'Volume',     reason: (_v, s) => s > 0 ? `Sufficient trading volume. Liquid, tradeable fund.` : `Low trading volume. Liquidity risk — spreads may be wide.` },
+    'fiveYearReturn': { name: '5-Year Return',     key: '5Y Return%', reason: (v, s)  => s > 0 ? `5Y annualised return <b>${v}</b> — above the 8% S&P floor.` : `5Y return <b>${v}</b> — below the 8% gate. Underperforms long-run S&P average.` },
+    'spread':   { name: 'Credit Spread',           key: 'YTM%',       reason: (_v, s) => s > 0 ? `Yield spread above risk-free rate exceeds 1.5% gate. Adequate risk compensation.` : `Spread too narrow. Bond doesn't compensate enough for credit risk. (Gate: ≥ 1.5%)` },
+    'duration': { name: 'Duration',                key: 'Duration',   reason: (v, s)  => s > 0 ? `Duration <b>${v}y</b> — moderate interest rate risk. (Gate: ≤ 7y)` : `Duration <b>${v}y</b> — high interest rate sensitivity. (Gate: ≤ 7y)` },
+  };
+
+  function verdictLabel(score: number): string {
+    const s = Math.abs(score);
+    const label = s >= 3 ? 'STRONG' : s >= 2 ? 'GOOD' : s >= 1 ? 'MODERATE' : 'NEUTRAL';
+    if (score > 0) return `+${score} ${label}`;
+    if (score < 0) return `${score} WEAK`;
+    return '0 NEUTRAL';
+  }
+
+  function verdictClass(score: number): string {
+    if (score > 0) return 'fv-pos';
+    if (score < 0) return 'fv-neg';
+    return 'fv-neu';
+  }
+
+  function factorCards(bd: Record<string, number> | undefined, displayMetrics: Record<string, unknown>): FactorCard[] {
+    if (!bd) return [];
+    const scale = maxAbs(bd);
+    return Object.entries(bd)
+      .sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))
+      .map(([factor, score]) => {
+        const meta = FACTOR_META[factor];
+        const displayKey = meta?.key;
+        const val = displayKey ? String(displayMetrics[displayKey] ?? '—') : '—';
+        const reason = meta ? meta.reason(val, score) : `${factor}: score ${score}`;
+        return {
+          key:  displayKey ?? factor,
+          name: meta?.name ?? factor,
+          score,
+          reason,
+          pct: Math.round((Math.abs(score) / scale) * 100),
+        };
+      });
+  }
+
+  function openSpecModal(row: AssetResult, e: MouseEvent) {
+    e.stopPropagation();
+    specModalRow = row;
+  }
+
+  function openGlossaryTo(key: string) {
+    glossaryFocusKey = key;
+    glossaryOpen = true;
+  }
+
+  function sigKey(signal: string | undefined): string {
+    const s = signal ?? '';
+    if (s.includes('Strong'))      return 'strong';
+    if (s.includes('Momentum'))    return 'momentum';
+    if (s.includes('Speculation')) return 'spec';
+    if (s.includes('Neutral'))     return 'neutral';
+    return 'avoid';
+  }
+
+  function googleNewsUrl(ticker: string): string {
+    return `https://news.google.com/search?q=${encodeURIComponent(ticker + ' stock')}`;
+  }
+
+  function yahooNewsUrl(ticker: string): string {
+    return `https://finance.yahoo.com/quote/${encodeURIComponent(ticker)}/news/`;
+  }
 </script>

 <section class="section">
@@ -187,6 +295,15 @@
      <button class:active={mode === 'fundamental'} onclick={() => mode = 'fundamental'}>Graham</button>
    </div>

+    <button
+      class="btn-glossary"
+      class:btn-glossary-active={glossaryOpen}
+      onclick={() => (glossaryOpen = !glossaryOpen)}
+      title="Open metrics glossary"
+    >
+      ? Glossary
+    </button>
+
    <button
      class="btn-analyze"
      onclick={onAnalyze}
@@ -208,36 +325,49 @@
        <tr>
          <th class="col-expand"></th>
          <th class="col-ticker sort-th" onclick={() => setSort('ticker')}>
-            Ticker <span class="sort-icon">{sortIcon('ticker')}</span>
+            <span class="col-tip" data-tip="Stock, ETF, or bond ticker symbol">Ticker</span>
+            <span class="sort-icon">{sortIcon('ticker')}</span>
          </th>
          <th class="sort-th" onclick={() => setSort('price')}>
-            Price <span class="sort-icon">{sortIcon('price')}</span>
+            <span class="col-tip" data-tip="Current market price">Price</span>
+            <span class="sort-icon">{sortIcon('price')}</span>
          </th>
          <th class="sort-th" onclick={() => setSort('signal')}>
-            Signal <span class="sort-icon">{sortIcon('signal')}</span>
+            <span class="col-tip" data-tip="Overall verdict: Strong Buy passes both fundamental and market-adjusted gates; Avoid fails both">Signal</span>
+            <span class="sort-icon">{sortIcon('signal')}</span>
          </th>
          <th class="sort-th" onclick={() => setSort('score')}>
-            Score <span class="sort-icon">{sortIcon('score')}</span>
+            <span class="col-tip" data-tip="Weighted factor score (ROE, FCF, margins, PEG, analyst, DCF). Shown as dots out of 5 + raw number. ✗ means gate failed before scoring.">Score</span>
+            <span class="sort-icon">{sortIcon('score')}</span>
          </th>
          {#if type === 'STOCK'}
-            <th class="sort-th" title="Market cap tier" onclick={() => setSort('cap')}>
-              Cap <span class="sort-icon">{sortIcon('cap')}</span>
+            <th class="sort-th" onclick={() => setSort('cap')}>
+              <span class="col-tip" data-tip="Market cap tier: Mega (>$200B), Large ($10–200B), Mid ($2–10B), Small ($300M–$2B), Micro (<$300M)">Cap</span>
+              <span class="sort-icon">{sortIcon('cap')}</span>
+            </th>
+            <th>
+              <span class="col-tip" data-tip="Growth/style: High Growth (rev ≥15%), Growth (5–15%), Value (low growth + yield ≥3%), Stable, Turnaround, Declining">Style</span>
+            </th>
+            <th>
+              <span class="col-tip" data-tip="Risk flags: momentum extremes, valuation outliers, analyst divergence, DCF divergence. Hover the badge to see individual flags.">Flags</span>
            </th>
-            <th title="Growth / style">Style</th>
-            <th>Flags</th>
          {:else if type === 'ETF'}
            <th class="sort-th" onclick={() => setSort('expense')}>
-              Expense <span class="sort-icon">{sortIcon('expense')}</span>
+              <span class="col-tip" data-tip="Annual management fee as % of AUM. Gate: ≤ 0.20%. Lower is always better — costs compound against returns.">Expense</span>
+              <span class="sort-icon">{sortIcon('expense')}</span>
            </th>
            <th class="sort-th" onclick={() => setSort('ret5y')}>
-              5Y Ret <span class="sort-icon">{sortIcon('ret5y')}</span>
+              <span class="col-tip" data-tip="5-year annualised return. Gate: ≥ 8% (S&P long-run floor). Benchmark: S&P 500 ≈ 10% historically.">5Y Ret</span>
+              <span class="sort-icon">{sortIcon('ret5y')}</span>
            </th>
          {:else}
            <th class="sort-th" onclick={() => setSort('rating')}>
-              Rating <span class="sort-icon">{sortIcon('rating')}</span>
+              <span class="col-tip" data-tip="Credit rating: AAA → BBB = investment grade. Gate: ≥ BBB. BB and below = junk / high yield.">Rating</span>
+              <span class="sort-icon">{sortIcon('rating')}</span>
            </th>
            <th class="sort-th" onclick={() => setSort('ytm')}>
-              YTM <span class="sort-icon">{sortIcon('ytm')}</span>
+              <span class="col-tip" data-tip="Yield to Maturity — total return if held to maturity. Must exceed risk-free rate by ≥ 1.5% (spread gate).">YTM</span>
+              <span class="sort-icon">{sortIcon('ytm')}</span>
            </th>
          {/if}
        </tr>
@@ -299,7 +429,9 @@
          {@const isOpen = expanded === r.asset.ticker}
          {@const colCount = type === 'STOCK' ? 8 : 7}
          {@const flags = v.audit?.riskFlags ?? []}
-          {@const rawScore = parseInt(v.scoreSummary?.replace(/\D/g, '') ?? '0', 10)}
+          {@const rawScore = v.score ?? parseInt(v.scoreSummary?.match(/-?\d+/)?.[0] ?? '0', 10)}
+          {@const cov = v.audit?.coverage}
+          {@const noData = cov != null && cov.active === 0}

          <!-- ── Summary row ── -->
          <tr
@@ -308,35 +440,62 @@
            data-signal={sigOrd(r.signal)}
            onclick={() => toggleExpand(r.asset.ticker)}
          >
-            <td class="col-expand">{isOpen ? '▾' : '▸'}</td>
+            <td class="col-expand">
+              <span class="row-toggle">{isOpen ? '▾' : '▸'}</span>
+              <button
+                class="pin-btn"
+                class:pinned={watchlistStore.isPinned(r.asset.ticker)}
+                onclick={(e) => { e.stopPropagation(); watchlistStore.toggle(r.asset.ticker); }}
+                title={watchlistStore.isPinned(r.asset.ticker) ? 'Remove from watchlist' : 'Add to watchlist'}
+              >{watchlistStore.isPinned(r.asset.ticker) ? '📌' : '🔖'}</button>
+            </td>
            <td class="ticker">{r.asset.ticker}</td>
            <td class="num">{m.Price ?? '—'}</td>
            <!-- Signal pill -->
-            <td class="signal-verdict-cell">
-              <span class="sv-pill sv-{(r.signal ?? '').includes('Strong') ? 'strong' : (r.signal ?? '').includes('Momentum') ? 'momentum' : (r.signal ?? '').includes('Speculation') ? 'spec' : (r.signal ?? '').includes('Neutral') ? 'neutral' : 'avoid'}">{(r.signal ?? '').replace(/^[^\w\s]+\s*/, '').trim() || '—'}</span>
+            <td>
+              <div class="signal-verdict-cell">
+                <button
+                  class="sv-pill sv-{sigKey(r.signal)} sv-pill-link"
+                  onclick={(e) => { if (r.signal) openSpecModal(r, e); }}
+                  title="Click to explain this signal"
+                >
+                  {(r.signal ?? '').replace(/^[^\w\s]+\s*/, '').trim() || '—'}
+                </button>
+              </div>
            </td>
            <!-- Score as dot scale -->
-            <td class="score-cell" title={v.scoreSummary}>
+            <td class="score-cell" title={cov ? `${v.scoreSummary} — ${cov.active}/${cov.total} factors had data` : v.scoreSummary}>
              {#if v.scoreSummary?.startsWith('Gate failed')}
                <span class="score-fail">✗</span>
+              {:else if noData}
+                <span class="score-nodata">No data</span>
              {:else}
                <span class="score-dots">
                  {#each Array(5) as _, i}
-                    <span class="score-dot" class:on={i < Math.round(rawScore / 4)}></span>
+                    <span class="score-dot" class:on={rawScore > 0 && i < Math.round(rawScore / 4)}></span>
                  {/each}
                </span>
                <span class="score-num">{rawScore}</span>
+                {#if cov && cov.active / cov.total < 0.5}
+                  <span class="score-cov" title="Only {cov.active} of {cov.total} scoring factors had data — treat this score with caution">{cov.active}/{cov.total}</span>
+                {/if}
              {/if}
            </td>
            {#if type === 'STOCK'}
              <td><span class="tag sm cap-tag">{m['Cap Tier'] ?? '—'}</span></td>
              <td><span class="tag sm style-tag">{m['Style'] ?? '—'}</span></td>
-              <!-- Flags: count badge with hover expand -->
+              <!-- Flags: count badge with hover expand tooltip -->
              <td class="flags-cell">
                {#if flags.length > 0}
-                  <span class="flags-badge">
+                  <div class="flags-badge">
                    <span class="flags-count">⚠ {flags.length}</span>
-                  </span>
+                    <div class="flags-tooltip">
+                      <div class="flags-tt-title">Risk Flags</div>
+                      {#each flags as flag}
+                        <div class="flags-tt-item">⚠ {flag}</div>
+                      {/each}
+                    </div>
+                  </div>
                {/if}
              </td>
            {:else if type === 'ETF'}
@@ -358,97 +517,99 @@

                  <!-- ══ LEFT — metric grid ══════════════════════════════════ -->
                  <div class="dp-left">
-                    <div class="dp-title">Metrics</div>
+                    <div class="dp-title">Metrics <span class="dp-mode-note">— click any card for full definition</span></div>
                    <div class="dp-metric-grid">
                      {#if type === 'STOCK'}
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">P/E</span>
+                        {@const failures = [...(r.inflated.audit?.failures ?? []), ...(r.fundamental.audit?.failures ?? [])]}
+                        {@const failedKeys = failures.map(f => f.toLowerCase())}
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('P/E')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('P/E')} class:dp-mc-fail={failedKeys.some(f => f.includes('p/e'))} class:dp-mc-pass={!failedKeys.some(f => f.includes('p/e')) && m['P/E'] && m['P/E'] !== '—'}>
+                          <span class="dp-mc-label">P/E <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['P/E'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">PEG</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('PEG')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('PEG')} class:dp-mc-fail={failedKeys.some(f => f.includes('peg'))} class:dp-mc-pass={m['PEG'] !== '—' && m['PEG'] != null && parseFloat(String(m['PEG'])) < 1.0}>
+                          <span class="dp-mc-label">PEG <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['PEG'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">ROE%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('ROE%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('ROE%')} class:dp-mc-fail={failedKeys.some(f => f.includes('roe'))} class:dp-mc-pass={parseFloat(String(m['ROE%'])) >= 15}>
+                          <span class="dp-mc-label">ROE% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['ROE%'])}">{m['ROE%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Op Mgn%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('OpMgn%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('OpMgn%')} class:dp-mc-fail={failedKeys.some(f => f.includes('margin') || f.includes('op'))} class:dp-mc-pass={parseFloat(String(m['OpMgn%'])) >= 10}>
+                          <span class="dp-mc-label">Op Mgn% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['OpMgn%'])}">{m['OpMgn%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Gross M%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('GrossM%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('GrossM%')}>
+                          <span class="dp-mc-label">Gross M% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['GrossM%'])}">{m['GrossM%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">FCF Yld%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('FCF Yld%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('FCF Yld%')} class:dp-mc-fail={failedKeys.some(f => f.includes('fcf') || f.includes('cash'))} class:dp-mc-pass={parseFloat(String(m['FCF Yld%'])) > 0}>
+                          <span class="dp-mc-label">FCF Yld% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['FCF Yld%'])}">{m['FCF Yld%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">D/E</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('D/E')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('D/E')} class:dp-mc-fail={failedKeys.some(f => f.includes('debt') || f.includes('d/e'))} class:dp-mc-pass={parseFloat(String(m['D/E'])) <= 1.5}>
+                          <span class="dp-mc-label">D/E <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['D/E'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">52W Chg</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('52W Chg')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('52W Chg')}>
+                          <span class="dp-mc-label">52W Chg <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['52W Chg'])}">{m['52W Chg'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">From High</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('From High')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('From High')}>
+                          <span class="dp-mc-label">From High <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['From High'])}">{m['From High'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Analyst</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Analyst')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Analyst')}>
+                          <span class="dp-mc-label">Analyst <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['Analyst'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Upside</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Analyst')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Analyst')}>
+                          <span class="dp-mc-label">Upside <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['Upside'])}">{m['Upside'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">DCF Safety</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('DCF Safety')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('DCF Safety')} class:dp-mc-pass={parseFloat(String(m['DCF Safety'])) >= 20}>
+                          <span class="dp-mc-label">DCF Safety <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['DCF Safety'])}">{m['DCF Safety'] ?? '—'}</span>
                        </div>
                      {:else if type === 'ETF'}
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Yield%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Yield%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Yield%')}>
+                          <span class="dp-mc-label">Yield% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['Yield%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">AUM</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Exp Ratio%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Exp Ratio%')}>
+                          <span class="dp-mc-label">AUM <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['AUM'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">5Y Ret%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('5Y Return%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('5Y Return%')}>
+                          <span class="dp-mc-label">5Y Ret% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value {signClass(m['5Y Return%'])}">{m['5Y Return%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Exp Ratio%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Exp Ratio%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Exp Ratio%')} class:dp-mc-pass={parseFloat(String(m['Exp Ratio%'])) <= 0.2} class:dp-mc-fail={parseFloat(String(m['Exp Ratio%'])) > 0.2}>
+                          <span class="dp-mc-label">Exp Ratio% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['Exp Ratio%'] ?? '—'}</span>
                        </div>
                      {:else}
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">YTM%</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('YTM%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('YTM%')}>
+                          <span class="dp-mc-label">YTM% <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['YTM%'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Duration</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Duration')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Duration')} class:dp-mc-fail={parseFloat(String(m['Duration'])) > 7} class:dp-mc-pass={parseFloat(String(m['Duration'])) <= 7}>
+                          <span class="dp-mc-label">Duration <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['Duration'] ?? '—'}</span>
                        </div>
-                        <div class="dp-metric-card">
-                          <span class="dp-mc-label">Rating</span>
+                        <div class="dp-metric-card" onclick={() => openGlossaryTo('Rating')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Rating')}>
+                          <span class="dp-mc-label">Rating <span class="dp-mc-help">?</span></span>
                          <span class="dp-mc-value">{m['Rating'] ?? '—'}</span>
                        </div>
                      {/if}
                    </div>

-                    <!-- ── Gate badge chips ── -->
+                    <!-- ── Gate badge chips — show which mode passed/failed + the failing rule ── -->
                    <div class="dp-gates-row">
                      <span class="dp-gate-chip" class:dp-gate-chip-pass={mktPass} class:dp-gate-chip-fail={!mktPass}>
-                        MKT {mktPass ? '✓' : '✗'}
+                        MKT {mktPass ? '✓' : '✗'}{#if !mktPass && r.inflated.audit?.failures?.[0]} — {r.inflated.audit.failures[0]}{/if}
                      </span>
                      <span class="dp-gate-chip" class:dp-gate-chip-pass={grahamPass} class:dp-gate-chip-fail={!grahamPass}>
-                        GRAHAM {grahamPass ? '✓' : '✗'}
+                        GRAHAM {grahamPass ? '✓' : '✗'}{#if !grahamPass && r.fundamental.audit?.failures?.[0]} — {r.fundamental.audit.failures[0]}{/if}
                      </span>
                    </div>

@@ -460,13 +621,24 @@
                        {/each}
                      </div>
                    {/if}
+
+                    <!-- ── News links ── -->
+                    <div class="dp-news-row">
+                      <span class="dp-news-label">News:</span>
+                      <a href={googleNewsUrl(r.asset.ticker)} target="_blank" rel="noopener noreferrer" class="dp-news-link">
+                        Google News ↗
+                      </a>
+                      <a href={yahooNewsUrl(r.asset.ticker)} target="_blank" rel="noopener noreferrer" class="dp-news-link">
+                        Yahoo Finance ↗
+                      </a>
+                    </div>
                  </div>

-                  <!-- ══ RIGHT — verdict card (factor bar chart) ═════════════ -->
+                  <!-- ══ RIGHT — factor score cards ════════════════════════ -->
                  <div class="dp-right">
                    <div class="dp-title">
                      Factor Scores
-                      <span class="dp-mode-note">({mode === 'inflated' ? 'Mkt-Adj' : 'Graham'})</span>
+                      <span class="dp-mode-note">({mode === 'inflated' ? 'Mkt-Adj' : 'Graham'}) — click to learn more</span>
                    </div>

                    {#if !v.audit?.passedGates && v.audit?.failures?.length}
@@ -476,23 +648,20 @@
                          <div class="dp-failure-item">✗ {f}</div>
                        {/each}
                      </div>
-                    {:else if breakdownEntries(v.audit?.breakdown).length}
-                      {@const entries = breakdownEntries(v.audit?.breakdown)}
-                      {@const scale = maxAbs(v.audit?.breakdown)}
-                      <div class="dp-bar-chart">
-                        {#each entries as [factor, score]}
-                          {@const pct = Math.round((Math.abs(score) / scale) * 100)}
-                          <div class="dp-bar-row">
-                            <span class="dp-bar-label">{factor}</span>
-                            <div class="dp-bar-track">
-                              <div
-                                class="dp-bar-fill {score > 0 ? 'dp-bar-pos' : 'dp-bar-neg'}"
-                                style="width: {pct}%"
-                              ></div>
+                    {:else if factorCards(v.audit?.breakdown, m).length}
+                      {@const cards = factorCards(v.audit?.breakdown, m)}
+                      <div class="dp-factor-list">
+                        {#each cards as card}
+                          <!-- svelte-ignore a11y_no_static_element_interactions -->
+                          <div class="dp-factor-item" role="button" tabindex="0" onclick={() => openGlossaryTo(card.key)} onkeypress={(e) => e.key === 'Enter' && openGlossaryTo(card.key)}>
+                            <div class="dp-factor-top">
+                              <span class="dp-factor-name">{card.name}</span>
+                              <span class="dp-factor-verdict {verdictClass(card.score)}">{verdictLabel(card.score)}</span>
+                            </div>
+                            <div class="dp-factor-reason">{@html card.reason}</div>
+                            <div class="dp-bar-track">
+                              <div class="dp-bar-fill {card.score > 0 ? 'dp-bar-pos' : 'dp-bar-neg'}" style="width:{card.pct}%"></div>
                            </div>
-                            <span class="dp-bar-val {score > 0 ? 'pos' : score < 0 ? 'neg' : ''}">
-                              {score > 0 ? '+' : ''}{score}
-                            </span>
                          </div>
                        {/each}
                      </div>
@@ -511,3 +680,18 @@
    </table>
  </div>
 </section>
+
+<!-- Glossary panel — z-index 99, below tearsheet/analysis sidebar (z 101) -->
+<GlossaryPanel
+  open={glossaryOpen}
+  activeMetrics={activeGlossaryMetrics()}
+  focusKey={glossaryFocusKey}
+  onClose={() => { glossaryOpen = false; glossaryFocusKey = null; }}
+/>
+
+<!-- Signal modal — explains why? for any signal -->
+<SignalModal
+  open={specModalRow !== null}
+  row={specModalRow}
+  onClose={() => (specModalRow = null)}
+/>
@@ -0,0 +1,503 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  let {
+    open = false,
+    activeMetrics = [] as string[],
+    focusKey = null as string | null,
+    onClose,
+  }: {
+    open?: boolean;
+    activeMetrics?: string[];
+    focusKey?: string | null;
+    onClose: () => void;
+  } = $props();
+
+  let searchQuery = $state('');
+  let expandedItem = $state<string | null>(null);
+  let bodyEl = $state<HTMLElement | null>(null);
+
+  // When focusKey changes, expand and scroll to that item
+  $effect(() => {
+    if (focusKey && open) {
+      expandedItem = focusKey;
+      searchQuery = '';
+      tick().then(() => {
+        if (!bodyEl) return;
+        const el = bodyEl.querySelector(`[data-gkey="${focusKey}"]`);
+        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    }
+  });
+
+  // ── Glossary data ─────────────────────────────────────────────────────
+  type RangeBand = { val: string; label: string };
+  type GlossaryItem = {
+    key: string;
+    label: string;
+    category: 'Market Context' | 'Valuation' | 'Quality' | 'Risk' | 'Signals' | 'ETF' | 'Bond';
+    definition: string;
+    gate?: string;
+    goodRange?: RangeBand;
+    neutralRange?: RangeBand;
+    badRange?: RangeBand;
+    assetTypes?: ('STOCK' | 'ETF' | 'BOND')[];
+  };
+
+  const GLOSSARY: GlossaryItem[] = [
+    // ── Market Context ─────────────────────────────────────────────────
+    {
+      key: '10Y',
+      label: '10Y Treasury Yield',
+      category: 'Market Context',
+      definition: 'The yield on 10-year US government bonds — the global risk-free rate benchmark. Drives discount rates for all assets: higher yield = lower present value of future earnings.',
+      gate: 'Rate regime: < 2% LOW | 2–5% NORMAL | > 5% HIGH. HIGH rates compress growth stock P/E multipliers.',
+      goodRange:    { val: '2–4%',  label: 'Normal, accommodative' },
+      neutralRange: { val: '4–5%',  label: 'Elevated, watch growth' },
+      badRange:     { val: '> 5%',  label: 'HIGH regime, P/E compression' },
+    },
+    {
+      key: 'VIX',
+      label: 'VIX — Volatility Index',
+      category: 'Market Context',
+      definition: 'The CBOE Volatility Index — measures expected 30-day S&P 500 volatility derived from options prices. Known as the "fear gauge."',
+      gate: 'Volatility regime: < 15 CALM | 15–25 NORMAL | > 25 ELEVATED | > 35 EXTREME',
+      goodRange:    { val: '< 15',   label: 'Calm market, low fear' },
+      neutralRange: { val: '15–25',  label: 'Normal uncertainty' },
+      badRange:     { val: '> 25',   label: 'Elevated fear' },
+    },
+    {
+      key: 'Rate Regime',
+      label: 'Rate Regime',
+      category: 'Market Context',
+      definition: 'Derived from the 10Y Treasury yield. Controls how aggressively the INFLATED scoring mode adjusts P/E gates — HIGH rates tighten the multiplier from 1.5× to 1.2× of S&P P/E.',
+      gate: 'LOW < 2% | NORMAL 2–5% | HIGH > 5%',
+      goodRange: { val: 'LOW',    label: 'Growth-friendly' },
+      neutralRange: { val: 'NORMAL', label: 'Balanced' },
+      badRange:  { val: 'HIGH',   label: 'Value favoured, growth penalised' },
+    },
+    // ── Valuation ──────────────────────────────────────────────────────
+    {
+      key: 'P/E',
+      label: 'P/E Ratio',
+      category: 'Valuation',
+      definition: 'Price-to-Earnings: how many dollars investors pay per $1 of annual profit. Lower = cheaper relative to earnings.',
+      gate: 'Graham gate: ≤ 15× | Inflated gate: ≤ S&P P/E × 1.5 (live)',
+      goodRange:    { val: '< 15×',   label: 'Value / below sector avg' },
+      neutralRange: { val: '15–35×',  label: 'Elevated but common' },
+      badRange:     { val: '> 35×',   label: 'Expensive without high growth' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'PEG',
+      label: 'PEG Ratio',
+      category: 'Valuation',
+      definition: 'P/E divided by earnings growth rate. Adjusts for growth — a 30× P/E stock growing 30% has PEG 1.0, same as a 15× stock growing 15%.',
+      gate: 'Gate: < 1.0 (Lynch standard) · Weight: 2',
+      goodRange:    { val: '< 1.0',   label: 'Bargain' },
+      neutralRange: { val: '1.0–2.0', label: 'Fair' },
+      badRange:     { val: '> 2.0',   label: 'Costly' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'DCF Safety',
+      label: 'DCF Margin of Safety',
+      category: 'Valuation',
+      definition: 'How much below the discounted cash flow intrinsic value the stock trades. Positive = undervalued vs. DCF model; negative = overvalued. Requires positive FCF to compute.',
+      gate: '≥ +20% → full score | 0–20% → +1 | -20–0% → -1 | < -20% → negative score',
+      goodRange:    { val: '> +20%',   label: 'Significant discount' },
+      neutralRange: { val: '0–20%',    label: 'Modest discount' },
+      badRange:     { val: '< -20%',   label: 'Premium to fair value' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'Upside',
+      label: 'Analyst Price Target Upside',
+      category: 'Valuation',
+      definition: 'Percentage gap between current price and Wall Street consensus target price. Positive = analysts expect the stock to rise.',
+      gate: 'Risk flag if ≥ +25% upside or ≤ -15% downside',
+      goodRange:    { val: '+5–20%',  label: 'Moderate consensus upside' },
+      neutralRange: { val: '0–5%',   label: 'Fairly priced' },
+      badRange:     { val: '< -10%', label: 'Analysts bearish' },
+      assetTypes: ['STOCK'],
+    },
+    // ── Quality ────────────────────────────────────────────────────────
+    {
+      key: 'ROE%',
+      label: 'Return on Equity',
+      category: 'Quality',
+      definition: 'Net income as a % of shareholders\' equity. Measures how efficiently management generates profit from invested capital.',
+      gate: 'Gate: ROE ≥ 15%',
+      goodRange:    { val: '> 20%',  label: 'Excellent capital efficiency' },
+      neutralRange: { val: '10–20%', label: 'Adequate' },
+      badRange:     { val: '< 10%',  label: 'Poor capital use' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'OpMgn%',
+      label: 'Operating Margin',
+      category: 'Quality',
+      definition: 'Operating profit as a % of revenue — what\'s left after COGS and operating expenses, before interest and taxes.',
+      gate: 'Gate: Op Margin ≥ 10%',
+      goodRange:    { val: '> 20%', label: 'High quality business' },
+      neutralRange: { val: '5–20%', label: 'Modest margins' },
+      badRange:     { val: '< 5%',  label: 'Thin, fragile' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'GrossM%',
+      label: 'Gross Margin',
+      category: 'Quality',
+      definition: 'Revenue minus cost of goods sold, as a %. Shows pricing power and production efficiency before overhead.',
+      gate: 'Informational — not a hard gate, used contextually',
+      goodRange:    { val: '> 50%',  label: 'Software / services quality' },
+      neutralRange: { val: '15–50%', label: 'Moderate' },
+      badRange:     { val: '< 15%',  label: 'Commodity-like, price-taker' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'FCF Yld%',
+      label: 'Free Cash Flow Yield',
+      category: 'Quality',
+      definition: 'Free cash flow per share divided by price — cash the business actually generates, expressed as a yield. Unlike earnings, FCF is hard to fake.',
+      gate: 'Gate: FCF > 0 (negative FCF = gate fail) | Weight: 3× in scoring',
+      goodRange:    { val: '> 5%', label: 'Strong cash generation' },
+      neutralRange: { val: '0–5%', label: 'Weak positive' },
+      badRange:     { val: '< 0%', label: 'Cash-burning' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'Analyst',
+      label: 'Analyst Consensus Rating',
+      category: 'Quality',
+      definition: 'Wall Street average recommendation on a 1–5 scale (Yahoo). 1 = Strong Buy, 5 = Strong Sell. Requires ≥ 3 analysts for signal to fire.',
+      gate: '≤ 2.0 → full score | ≤ 3.0 → +1 | ≤ 4.0 → -1 | > 4.0 → negative score',
+      goodRange:    { val: '1.0–2.5', label: 'Buy consensus' },
+      neutralRange: { val: '2.5–4.0', label: 'Neutral / Hold' },
+      badRange:     { val: '> 4.0',   label: 'Sell consensus' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'Revenue',
+      label: 'Revenue Growth',
+      category: 'Quality',
+      definition: 'Year-over-year percentage change in total revenue. Measures whether the business is expanding its top line. A secondary scoring factor — positive growth adds to score, declining revenue subtracts.',
+      gate: 'Gate: Revenue growth > 0% for positive contribution | Weight: 2× in scoring',
+      goodRange:    { val: '> 10%', label: 'Strong expansion' },
+      neutralRange: { val: '0–10%', label: 'Slow growth' },
+      badRange:     { val: '< 0%',  label: 'Shrinking top line' },
+      assetTypes: ['STOCK'],
+    },
+    // ── Risk ───────────────────────────────────────────────────────────
+    {
+      key: 'D/E',
+      label: 'Debt-to-Equity Ratio',
+      category: 'Risk',
+      definition: 'Total debt divided by shareholders\' equity. Measures financial leverage — how much borrowed money vs. owned capital the company uses.',
+      gate: 'Gate: D/E ≤ 1.5× | Tech: ≤ 2.0× | Financials: gate disabled (scored on P/B instead)',
+      goodRange:    { val: '< 0.5×',  label: 'Conservative' },
+      neutralRange: { val: '0.5–1.5×', label: 'Moderate' },
+      badRange:     { val: '> 2.0×',  label: 'High leverage risk' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: '52W Chg',
+      label: '52-Week Price Change',
+      category: 'Risk',
+      definition: 'Total % price return over the past year. Captures trend strength and momentum.',
+      gate: 'Risk flag: ≥ +50% (at peak, reversal risk) | ≤ -30% (significant drawdown)',
+      goodRange:    { val: '+5–30%',  label: 'Steady uptrend' },
+      neutralRange: { val: '-5–+5%',  label: 'Flat / sideways' },
+      badRange:     { val: '< -30%',  label: 'Significant drawdown' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'From High',
+      label: 'Distance from 52-Week High',
+      category: 'Risk',
+      definition: 'How far (%) the current price sits below the 52-week peak. Negative = below peak. A -15% reading means the stock is 15% off its high.',
+      gate: 'Risk flag if > -20% from high (at or near peak)',
+      goodRange:    { val: '-5–25%',  label: 'Healthy pullback' },
+      neutralRange: { val: '-25–40%', label: 'Larger drawdown' },
+      badRange:     { val: '0–3%',    label: 'At peak, limited buffer' },
+      assetTypes: ['STOCK'],
+    },
+    // ── Signals ────────────────────────────────────────────────────────
+    {
+      key: 'Graham',
+      label: 'Graham (Fundamental) Score',
+      category: 'Signals',
+      definition: 'Strict value-investing score using fixed Graham gates: P/E ≤ 15×, PEG ≤ 1.0, D/E ≤ 1.5×, ROE ≥ 15%, FCF > 0. Does not adjust for market conditions — these thresholds never move.',
+      gate: 'All gates fixed regardless of S&P P/E or rate regime',
+      goodRange:    { val: 'PASS',      label: 'Passes all Graham gates' },
+      neutralRange: { val: 'PARTIAL',   label: 'Passes some, fails others' },
+      badRange:     { val: 'FAIL',      label: 'Fails one or more hard gates' },
+    },
+    {
+      key: 'Mkt-Adj',
+      label: 'Market-Adjusted Score',
+      category: 'Signals',
+      definition: 'Relaxed scoring mode that calibrates gates to live market benchmarks. P/E gate = S&P P/E × 1.5 (or × 1.2 in HIGH rate regime). Reflects what is "acceptable" in today\'s market, not absolute value.',
+      gate: 'P/E gate: S&P P/E × 1.5 (NORMAL) or × 1.2 (HIGH) | Tech P/E: XLK P/E × 1.3',
+      goodRange:    { val: 'PASS',      label: 'Passes mkt-adjusted gates' },
+      neutralRange: { val: 'PARTIAL',   label: 'Borderline vs live benchmarks' },
+      badRange:     { val: 'FAIL',      label: 'Fails even relaxed gates' },
+    },
+    {
+      key: 'signal',
+      label: 'Signal',
+      category: 'Signals',
+      definition: 'Overall recommendation derived by comparing Market-Adjusted and Graham (fundamental) scores.',
+      gate: 'Strong Buy = passes both | Momentum = passes Mkt-Adj only | Speculation = passes Mkt-Adj, fails Graham | Neutral = borderline | Avoid = fails both',
+      goodRange:    { val: '✅ ⚡',  label: 'Strong Buy / Momentum' },
+      neutralRange: { val: '🔄',    label: 'Neutral — hold' },
+      badRange:     { val: '⚠️ ❌', label: 'Speculation / Avoid' },
+    },
+    {
+      key: 'score',
+      label: 'Score (dot scale)',
+      category: 'Signals',
+      definition: 'Weighted sum of factor scores (ROE, FCF, margin, PEG, revenue growth, analyst, DCF). Displayed as ●●●●○ dots out of 5 + raw number.',
+      gate: 'Positive factors add to score; negative riskFlags subtract. Gate failures bypass scoring entirely (shown as ✗).',
+      goodRange:    { val: '> 12',  label: 'High conviction' },
+      neutralRange: { val: '6–12',  label: 'Borderline' },
+      badRange:     { val: '< 6',   label: 'Weak factors' },
+    },
+    {
+      key: 'Cap Tier',
+      label: 'Market Cap Tier',
+      category: 'Signals',
+      definition: 'Size classification based on market capitalisation. Mega Cap (> $200B), Large ($10–200B), Mid ($2–10B), Small ($300M–$2B), Micro (< $300M).',
+      gate: 'Informational — not a gate. Useful for position sizing and risk calibration.',
+      goodRange:    { val: 'Mega / Large', label: 'Most liquid' },
+      neutralRange: { val: 'Mid',          label: 'Balanced' },
+      badRange:     { val: 'Micro',        label: 'High vol, thin liquidity' },
+      assetTypes: ['STOCK'],
+    },
+    {
+      key: 'Style',
+      label: 'Growth / Style Category',
+      category: 'Signals',
+      definition: 'Derived from revenue growth and earnings growth. High Growth (rev ≥ 15% or earnings ≥ 20%), Growth (5–15%), Value (< 5% + yield ≥ 3%), Stable, Turnaround, Declining.',
+      gate: 'Informational — not a gate. Helps match the stock to your strategy.',
+      goodRange:    { val: 'High Growth / Growth', label: 'Matches momentum strategy' },
+      neutralRange: { val: 'Stable / Value',       label: 'Income / defensive' },
+      badRange:     { val: 'Declining',            label: 'Revenue shrinking > -5%' },
+      assetTypes: ['STOCK'],
+    },
+    // ── ETF ────────────────────────────────────────────────────────────
+    {
+      key: 'Exp Ratio%',
+      label: 'Expense Ratio',
+      category: 'ETF',
+      definition: 'Annual management fee as a % of AUM. Deducted from returns automatically. Lower is always better — costs compound against you.',
+      gate: 'Hard gate: Expense Ratio ≤ 0.20%',
+      goodRange:    { val: '< 0.10%',     label: 'Index-like, minimal drag' },
+      neutralRange: { val: '0.10–0.50%',  label: 'Acceptable' },
+      badRange:     { val: '> 0.50%',     label: 'High cost drag' },
+      assetTypes: ['ETF'],
+    },
+    {
+      key: '5Y Return%',
+      label: '5-Year Annualised Return',
+      category: 'ETF',
+      definition: 'Compound annual growth rate over 5 years. The S&P 500 long-run average is ~10%; use that as a baseline.',
+      gate: 'Gate: 5Y Return ≥ 8% (S&P long-run floor)',
+      goodRange:    { val: '> 12%', label: 'Outperforming market' },
+      neutralRange: { val: '8–12%', label: 'Market-rate returns' },
+      badRange:     { val: '< 6%',  label: 'Underperforming bonds + inflation' },
+      assetTypes: ['ETF'],
+    },
+    {
+      key: 'Yield%',
+      label: 'Distribution Yield',
+      category: 'ETF',
+      definition: 'Annual income distributions (dividends, interest) as a % of NAV. Important for income-focused or REIT ETFs.',
+      gate: 'REIT ETF: Yield floor based on XLRE yield × regime factor',
+      goodRange:    { val: '> 3%', label: 'Strong income' },
+      neutralRange: { val: '1–3%', label: 'Low but positive' },
+      badRange:     { val: '< 1%', label: 'Insufficient for income' },
+      assetTypes: ['ETF'],
+    },
+    // ── Bond ───────────────────────────────────────────────────────────
+    {
+      key: 'YTM%',
+      label: 'Yield to Maturity',
+      category: 'Bond',
+      definition: 'Total return if you hold the bond to maturity — includes coupon payments plus any price gain/loss vs. par. The true all-in yield.',
+      gate: 'Spread gate: YTM must exceed risk-free rate by ≥ 1.5% (NORMAL) or ≥ 1.8% (HIGH rates)',
+      goodRange:    { val: 'Sprd > 2%', label: 'Good compensation for risk' },
+      neutralRange: { val: '1–2%',      label: 'Adequate spread' },
+      badRange:     { val: '< 1%',      label: 'Not compensating for credit risk' },
+      assetTypes: ['BOND'],
+    },
+    {
+      key: 'Duration',
+      label: 'Duration (years)',
+      category: 'Bond',
+      definition: 'Sensitivity to interest rate changes. A duration of 5 means a 1% rate rise → ~5% price drop. Shorter = less rate risk.',
+      gate: 'Gate: Duration ≤ 7 years',
+      goodRange:    { val: '< 4 yrs',  label: 'Low rate sensitivity' },
+      neutralRange: { val: '4–7 yrs',  label: 'Moderate' },
+      badRange:     { val: '> 10 yrs', label: 'High rate risk' },
+      assetTypes: ['BOND'],
+    },
+    {
+      key: 'Rating',
+      label: 'Credit Rating',
+      category: 'Bond',
+      definition: 'Agency rating of default probability: AAA (safest) → AA → A → BBB (investment grade floor) → BB → B → CCC (junk).',
+      gate: 'Hard gate: Rating ≥ BBB (investment-grade, numeric ≥ 7)',
+      goodRange:    { val: 'AAA–A',  label: 'Very low default risk' },
+      neutralRange: { val: 'BBB',    label: 'Investment-grade floor' },
+      badRange:     { val: '≤ BB',   label: 'High yield / junk' },
+      assetTypes: ['BOND'],
+    },
+  ];
+
+  const CATEGORIES = ['Market Context', 'Valuation', 'Quality', 'Risk', 'Signals', 'ETF', 'Bond'] as const;
+
+  function filteredItems(): GlossaryItem[] {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return GLOSSARY;
+    return GLOSSARY.filter(
+      (item) =>
+        item.label.toLowerCase().includes(q) ||
+        item.definition.toLowerCase().includes(q) ||
+        item.category.toLowerCase().includes(q),
+    );
+  }
+
+  function itemsForCategory(cat: string): GlossaryItem[] {
+    return filteredItems().filter((i) => i.category === cat);
+  }
+
+  function isActive(item: GlossaryItem): boolean {
+    return activeMetrics.some(
+      (k) => k === item.key || k === item.label,
+    );
+  }
+
+  function toggleItem(key: string) {
+    expandedItem = expandedItem === key ? null : key;
+  }
+
+  // Close on Escape
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- Click-outside backdrop — thin, no visual overlay, just captures clicks -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="glossary-backdrop" onclick={onClose}></div>
+
+  <aside class="glossary-panel" aria-label="Metrics Glossary">
+    <!-- Header -->
+    <div class="glossary-header">
+      <span class="glossary-title"><span class="glossary-title-q">?</span> Metric Glossary</span>
+      <button class="glossary-close" onclick={onClose} aria-label="Close glossary">×</button>
+    </div>
+
+    <!-- Search -->
+    <div class="glossary-search-wrap">
+      <input
+        class="glossary-search"
+        type="text"
+        placeholder="Search metrics…"
+        bind:value={searchQuery}
+        aria-label="Search glossary"
+      />
+      {#if searchQuery}
+        <button class="glossary-search-clear" onclick={() => (searchQuery = '')} aria-label="Clear search">✕</button>
+      {/if}
+    </div>
+
+    <!-- Context banner — fixed between search and body, only when row is selected -->
+    {#if activeMetrics.length > 0}
+      <div class="glossary-ctx-banner">
+        ✦ Highlighted metrics are relevant to the selected row
+      </div>
+    {/if}
+
+    <!-- Body -->
+    <div class="glossary-body" bind:this={bodyEl}>
+
+      {#each CATEGORIES as cat}
+        {@const items = itemsForCategory(cat)}
+        {#if items.length > 0}
+          <div class="glossary-category">
+            <div class="glossary-cat-header">{cat}</div>
+            {#each items as item}
+              {@const active = isActive(item)}
+              {@const isExpanded = expandedItem === item.key}
+              <div
+                class="glossary-item"
+                class:glossary-item-active={active}
+                class:glossary-item-open={isExpanded}
+                data-gkey={item.key}
+              >
+                <button
+                  class="glossary-item-trigger"
+                  onclick={() => toggleItem(item.key)}
+                  aria-expanded={isExpanded}
+                >
+                  <span class="glossary-item-label">
+                    {#if active}<span class="glossary-active-dot"></span>{/if}
+                    {item.label}
+                  </span>
+                  <span class="glossary-cat-tag gcat-{cat.toLowerCase().replace(/\s/g,'-')}">{cat}</span>
+                </button>
+
+                {#if isExpanded}
+                  <div class="glossary-item-body">
+                    <p class="glossary-definition">{item.definition}</p>
+
+                    {#if item.gate}
+                      <div class="glossary-gate-box">
+                        <code>{item.gate}</code>
+                      </div>
+                    {/if}
+
+                    {#if item.goodRange || item.neutralRange || item.badRange}
+                      <div class="glossary-range-pills">
+                        {#if item.goodRange}
+                          <span class="glossary-range-pill grange-good">{item.goodRange.val}</span>
+                        {/if}
+                        {#if item.neutralRange}
+                          <span class="glossary-range-pill grange-neutral">{item.neutralRange.val}</span>
+                        {/if}
+                        {#if item.badRange}
+                          <span class="glossary-range-pill grange-bad">{item.badRange.val}</span>
+                        {/if}
+                      </div>
+                      <div class="glossary-range-labels">
+                        {#if item.goodRange}
+                          <span class="grlabel-good">{item.goodRange.label}</span>
+                        {/if}
+                        {#if item.neutralRange}
+                          <span class="grlabel-neutral">{item.neutralRange.label}</span>
+                        {/if}
+                        {#if item.badRange}
+                          <span class="grlabel-bad">{item.badRange.label}</span>
+                        {/if}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      {/each}
+
+      {#if filteredItems().length === 0}
+        <div class="glossary-empty">No metrics match "{searchQuery}"</div>
+      {/if}
+    </div>
+  </aside>
+{/if}
@@ -0,0 +1,396 @@
+<script lang="ts">
+  import type { AssetResult } from '$lib/types.js';
+
+  let {
+    open = false,
+    row,
+    onClose,
+  }: {
+    open:    boolean;
+    row:     AssetResult | null;
+    onClose: () => void;
+  } = $props();
+
+  function handleBackdrop(e: MouseEvent) {
+    if (e.target === e.currentTarget) onClose();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+
+  type SignalKey = 'strong' | 'momentum' | 'spec' | 'neutral' | 'avoid';
+
+  function sigKey(signal: string | undefined): SignalKey {
+    const s = signal ?? '';
+    if (s.includes('Strong'))      return 'strong';
+    if (s.includes('Momentum'))    return 'momentum';
+    if (s.includes('Speculation')) return 'spec';
+    if (s.includes('Neutral'))     return 'neutral';
+    return 'avoid';
+  }
+
+  const SIGNAL_META: Record<SignalKey, {
+    emoji: string;
+    title: string;
+    summary: string;
+    tip: string;
+    color: 'green' | 'blue' | 'amber' | 'gray' | 'red';
+  }> = {
+    strong: {
+      emoji: '✅',
+      title: 'Strong Buy',
+      summary: 'Passes both market-adjusted AND Graham\'s fundamental gates. The stock meets strict value criteria regardless of current market conditions. This is the highest confidence signal.',
+      tip: 'Strong Buy signals have the widest margin of safety. Size position accordingly — typically 3–5% of portfolio.',
+      color: 'green',
+    },
+    momentum: {
+      emoji: '⚡',
+      title: 'Momentum',
+      summary: 'Passes market-adjusted gates but only partially satisfies Graham criteria. The stock is attractively priced relative to today\'s market, though it wouldn\'t clear value investors\' stricter standards. Suitable for trend-following strategies.',
+      tip: 'Momentum signals ride the current market environment. They work until they don\'t — set a stop-loss or monitor quarterly.',
+      color: 'blue',
+    },
+    spec: {
+      emoji: '⚠️',
+      title: 'Speculation',
+      summary: 'Passes market-adjusted gates but fails Graham\'s fundamental rules. The stock is acceptable at today\'s elevated valuations, but would not meet a strict value investor\'s criteria. Treat as a growth or momentum play — not a deep value position.',
+      tip: 'Speculation signals are valid positions in a bull market. Size smaller than a Strong Buy and monitor P/E compression risk.',
+      color: 'amber',
+    },
+    neutral: {
+      emoji: '🔄',
+      title: 'Neutral',
+      summary: 'Borderline — passes some gates, fails others, or falls in hold territory in one or both scoring lenses. Not a strong buy or a clear sell. Suitable for existing positions you\'re monitoring, but not a new entry signal.',
+      tip: 'Neutral means "hold, don\'t add." If you own it, keep watching the metrics that are borderline.',
+      color: 'gray',
+    },
+    avoid: {
+      emoji: '❌',
+      title: 'Avoid',
+      summary: 'Fails both market-adjusted AND fundamental scoring lenses. The stock does not meet quality gates or the risk-adjusted return does not justify the price. This is a high-risk entry.',
+      tip: 'Avoid signals are not necessarily bad businesses — they may be great companies at bad prices. Revisit when the verdict changes.',
+      color: 'red',
+    },
+  };
+
+  function gateRows(row: AssetResult | null) {
+    if (!row) return [];
+    const m = row.asset.displayMetrics ?? {};
+    const graham = row.fundamental.audit;
+
+    const items: { pass: boolean; label: string; detail: string; value: string }[] = [];
+
+    const pe = m['P/E'];
+    if (pe && pe !== '—') {
+      const peNum = parseFloat(String(pe).replace('×',''));
+      const grahamFail = graham.failures?.some((f: string) => f.toLowerCase().includes('p/e'));
+      const mktPass = row.inflated.audit?.passedGates;
+      if (!isNaN(peNum)) {
+        items.push({
+          pass: !grahamFail,
+          label: 'P/E Ratio',
+          detail: grahamFail ? `Graham gate (15×) failed${mktPass ? ' — mkt-adjusted passed' : ''}` : 'Passes both P/E gates',
+          value: `${pe}`,
+        });
+      }
+    }
+
+    const peg = m['PEG'];
+    if (peg && peg !== '—') {
+      const pegNum = parseFloat(String(peg));
+      if (!isNaN(pegNum)) {
+        items.push({
+          pass: pegNum < 1.0,
+          label: 'PEG Ratio',
+          detail: pegNum < 1.0 ? 'Below 1.0 — growth is reasonably priced' : 'Above 1.0 — paying a premium for growth',
+          value: `${peg}`,
+        });
+      }
+    }
+
+    const de = m['D/E'];
+    if (de && de !== '—') {
+      const deNum = parseFloat(String(de));
+      if (!isNaN(deNum)) {
+        items.push({
+          pass: deNum < 1.5,
+          label: 'Debt / Equity',
+          detail: deNum < 1.5 ? 'Conservative leverage' : 'Elevated leverage — adds risk',
+          value: `${de}×`,
+        });
+      }
+    }
+
+    const fcf = m['FCF Yld%'];
+    if (fcf && fcf !== '—') {
+      const fcfNum = parseFloat(String(fcf));
+      if (!isNaN(fcfNum)) {
+        items.push({
+          pass: fcfNum > 0,
+          label: 'FCF Yield',
+          detail: fcfNum > 0 ? 'Positive free cash flow' : 'Negative FCF — company is burning cash',
+          value: `${fcf}`,
+        });
+      }
+    }
+
+    const roe = m['ROE%'];
+    if (roe && roe !== '—') {
+      const roeNum = parseFloat(String(roe));
+      if (!isNaN(roeNum)) {
+        items.push({
+          pass: roeNum > 15,
+          label: 'Return on Equity',
+          detail: roeNum > 15 ? 'Above 15% — good capital efficiency' : 'Below 15% preferred threshold',
+          value: `${roe}`,
+        });
+      }
+    }
+
+    return items;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open && row}
+  {@const sk      = sigKey(row.signal)}
+  {@const meta    = SIGNAL_META[sk]}
+  {@const m       = row.asset.displayMetrics ?? {}}
+  {@const mktPass = row.inflated.audit?.passedGates}
+  {@const graOk   = row.fundamental.audit?.passedGates}
+  {@const gates   = gateRows(row)}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="sm-backdrop" onclick={handleBackdrop}>
+    <div class="sm-modal sm-modal-{meta.color}">
+
+      <!-- Header -->
+      <div class="sm-header">
+        <div>
+          <div class="sm-title">{meta.emoji} Why "{meta.title}"?</div>
+          <div class="sm-sub">{row.asset.ticker} · {m['Price'] ?? ''}</div>
+        </div>
+        <button class="sm-close" onclick={onClose}>×</button>
+      </div>
+
+      <!-- Summary box -->
+      <div class="sm-summary sm-summary-{meta.color}">
+        <p>{meta.summary}</p>
+      </div>
+
+      <!-- Side-by-side verdict comparison (stocks only) -->
+      {#if row.inflated && row.fundamental}
+        <div class="sm-verdict-compare">
+          <div class="sm-vb" class:sm-vb-pass={mktPass} class:sm-vb-fail={!mktPass}>
+            <div class="sm-vb-label" class:pass={mktPass} class:fail={!mktPass}>Mkt-Adjusted Mode</div>
+            <div class="sm-vb-verdict" class:pass={mktPass} class:fail={!mktPass}>{mktPass ? '✅ PASSES' : '✗ FAILS'}</div>
+            <div class="sm-vb-detail">
+              {mktPass ? 'Gates calibrated to live S&P P/E. Passes the relaxed market-adjusted threshold.' : 'Fails even the relaxed market-adjusted gates.'}
+            </div>
+          </div>
+          <div class="sm-vb" class:sm-vb-pass={graOk} class:sm-vb-fail={!graOk}>
+            <div class="sm-vb-label" class:pass={graOk} class:fail={!graOk}>Graham (Fundamental) Mode</div>
+            <div class="sm-vb-verdict" class:pass={graOk} class:fail={!graOk}>{graOk ? '✅ PASSES' : '✗ FAILS'}</div>
+            <div class="sm-vb-detail">
+              {graOk ? 'Passes Graham\'s strict 15× P/E and quality gates.' : 'Graham\'s strict 15× P/E gate is a hard rule. Fails at elevated valuations.'}
+            </div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Gate breakdown (if we have data) -->
+      {#if gates.length > 0}
+        <div class="sm-gates">
+          <div class="sm-gates-title">Gate Breakdown</div>
+          {#each gates as g}
+            <div class="sm-gate-row" class:g-pass={g.pass} class:g-fail={!g.pass}>
+              <span class="sm-gate-icon">{g.pass ? '✓' : '✗'}</span>
+              <span class="sm-gate-text"><b>{g.label}</b> — {g.detail}</span>
+              <span class="sm-gate-value">{g.value}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      <!-- Footer tip -->
+      <div class="sm-footer">
+        💡 <strong>What to do:</strong> {meta.tip}
+      </div>
+
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sm-backdrop {
+    position: fixed;
+    inset: 0;
+    background: #00000088;
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  .sm-modal {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-input);
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 520px;
+    width: 100%;
+    box-shadow: 0 24px 64px #00000088;
+    animation: modal-in 0.18s ease;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  @keyframes modal-in {
+    from { opacity: 0; transform: scale(0.96) translateY(8px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  .sm-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    gap: 12px;
+  }
+
+  .sm-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .sm-sub {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 3px;
+    font-family: var(--font-mono);
+  }
+
+  .sm-close {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: none;
+    color: var(--text-secondary);
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+  .sm-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
+
+  .sm-summary {
+    border-radius: 8px;
+    padding: 12px 14px;
+    margin-bottom: 16px;
+  }
+  .sm-summary p { font-size: 13px; line-height: 1.6; margin: 0; }
+  .sm-summary-green { background: #0a2e1a; border: 1px solid #1a4a2a; }
+  .sm-summary-green p { color: #86efac; }
+  .sm-summary-blue  { background: #0a1e3a; border: 1px solid #1a3a6a; }
+  .sm-summary-blue p  { color: #93c5fd; }
+  .sm-summary-amber { background: #2a1a00; border: 1px solid #4a3000; }
+  .sm-summary-amber p { color: #fbbf24; }
+  .sm-summary-gray  { background: var(--bg-elevated); border: 1px solid var(--border); }
+  .sm-summary-gray p  { color: var(--text-muted); }
+  .sm-summary-red   { background: #2a0d0d; border: 1px solid #4a1a1a; }
+  .sm-summary-red p   { color: #fca5a5; }
+
+  .sm-verdict-compare {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  .sm-vb {
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid var(--border);
+  }
+  .sm-vb.sm-vb-pass { background: #0a2e1a; border-color: #1a4a2a; }
+  .sm-vb.sm-vb-fail { background: #2a0d0d; border-color: #4a1a1a; }
+
+  .sm-vb-label {
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 4px;
+  }
+  .sm-vb-label.pass { color: #4ade80; }
+  .sm-vb-label.fail { color: #f87171; }
+
+  .sm-vb-verdict {
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 6px;
+  }
+  .sm-vb-verdict.pass { color: #4ade80; }
+  .sm-vb-verdict.fail { color: #f87171; }
+
+  .sm-vb-detail {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  .sm-gates { margin-bottom: 16px; }
+
+  .sm-gates-title {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .sm-gate-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 10px;
+    border-radius: 6px;
+    margin-bottom: 4px;
+    font-size: 12px;
+  }
+  .sm-gate-row.g-pass { background: #0a2e1a; border: 1px solid #1a4a2a; }
+  .sm-gate-row.g-fail { background: #2a0d0d; border: 1px solid #4a1a1a; }
+
+  .sm-gate-icon { font-size: 13px; flex-shrink: 0; }
+  .g-pass .sm-gate-icon { color: #4ade80; }
+  .g-fail .sm-gate-icon { color: #f87171; }
+
+  .sm-gate-text { flex: 1; color: var(--text-secondary); }
+  .sm-gate-text :global(b) { color: var(--text-primary); }
+
+  .sm-gate-value {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .sm-footer {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    padding-top: 14px;
+    border-top: 1px solid var(--border);
+  }
+</style>
@@ -0,0 +1,317 @@
+<script lang="ts">
+  import type { AssetResult } from '$lib/types.js';
+
+  let {
+    open = false,
+    row,
+    onClose,
+  }: {
+    open:    boolean;
+    row:     AssetResult | null;
+    onClose: () => void;
+  } = $props();
+
+  function handleBackdrop(e: MouseEvent) {
+    if (e.target === e.currentTarget) onClose();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+
+  // Build gate breakdown from audit data
+  function gateRows(row: AssetResult | null) {
+    if (!row) return [];
+    const mkt     = row.inflated.audit;
+    const graham  = row.fundamental.audit;
+    const m       = row.asset.displayMetrics ?? {};
+
+    const items: { pass: boolean; label: string; detail: string; value: string }[] = [];
+
+    // P/E — the key differentiator for Speculation
+    const pe = m['P/E'];
+    if (pe && pe !== '—') {
+      if (graham.failures?.some((f: string) => f.toLowerCase().includes('p/e'))) {
+        items.push({ pass: false, label: 'P/E Ratio', detail: 'Graham gate (15×) failed', value: `${pe} > 15×` });
+      }
+      if (mkt.passedGates) {
+        items.push({ pass: true, label: 'P/E Ratio', detail: 'Mkt-adjusted gate passed', value: `${pe} < mkt threshold` });
+      }
+    }
+
+    // PEG
+    const peg = m['PEG'];
+    if (peg && peg !== '—') {
+      const pegNum = parseFloat(String(peg));
+      items.push({ pass: !isNaN(pegNum) && pegNum < 1.0, label: 'PEG Ratio', detail: pegNum < 1.0 ? 'Paying less than growth justifies' : 'PEG above 1.0 — paying a growth premium', value: `${peg} ${pegNum < 1.0 ? '<' : '>'} 1.0` });
+    }
+
+    // D/E
+    const de = m['D/E'];
+    if (de && de !== '—') {
+      const deNum = parseFloat(String(de));
+      items.push({ pass: !isNaN(deNum) && deNum < 1.5, label: 'Debt / Equity', detail: deNum < 1.5 ? 'Conservative leverage' : 'Elevated leverage', value: `${de}` });
+    }
+
+    // FCF
+    const fcf = m['FCF Yld%'];
+    if (fcf && fcf !== '—') {
+      const fcfNum = parseFloat(String(fcf));
+      items.push({ pass: !isNaN(fcfNum) && fcfNum > 0, label: 'FCF Yield', detail: fcfNum > 0 ? 'Positive free cash flow' : 'Negative free cash flow — cash burn', value: `${fcf}` });
+    }
+
+    // ROE
+    const roe = m['ROE%'];
+    if (roe && roe !== '—') {
+      const roeNum = parseFloat(String(roe));
+      items.push({ pass: !isNaN(roeNum) && roeNum > 15, label: 'Return on Equity', detail: roeNum > 15 ? 'Above 15% threshold — quality signal' : 'Below 15% preferred threshold', value: `${roe}` });
+    }
+
+    return items;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open && row}
+  {@const m        = row.asset.displayMetrics ?? {}}
+  {@const mktPass  = row.inflated.audit?.passedGates}
+  {@const grahamOk = row.fundamental.audit?.passedGates}
+  {@const gates    = gateRows(row)}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="spec-backdrop" onclick={handleBackdrop}>
+    <div class="spec-modal">
+      <!-- Header -->
+      <div class="spec-modal-header">
+        <div>
+          <div class="spec-modal-title">⚡ Why "Speculation"?</div>
+          <div class="spec-modal-sub">{row.asset.ticker} · {m['Price'] ?? ''}</div>
+        </div>
+        <button class="spec-modal-close" onclick={onClose}>×</button>
+      </div>
+
+      <!-- Plain-English summary -->
+      <div class="spec-summary">
+        <p><strong>Passes market-adjusted gates but fails Graham's strict fundamental rules.</strong> This stock is attractive at today's market valuations, but would not meet a value investor's stricter criteria. Treat as a momentum or growth play — not a deep value position.</p>
+      </div>
+
+      <!-- Side-by-side verdict comparison -->
+      <div class="spec-verdict-compare">
+        <div class="spec-vb" class:spec-vb-pass={mktPass} class:spec-vb-fail={!mktPass}>
+          <div class="spec-vb-label" class:pass={mktPass} class:fail={!mktPass}>Mkt-Adjusted Mode</div>
+          <div class="spec-vb-verdict" class:pass={mktPass} class:fail={!mktPass}>{mktPass ? '✅ PASSES' : '✗ FAILS'}</div>
+          <div class="spec-vb-detail">
+            {#if mktPass}
+              Gates calibrated to live S&P P/E. P/E passes the market-adjusted threshold at today's valuations.
+            {:else}
+              Failed even relaxed market-adjusted gates — rare for Speculation signal.
+            {/if}
+          </div>
+        </div>
+        <div class="spec-vb" class:spec-vb-pass={grahamOk} class:spec-vb-fail={!grahamOk}>
+          <div class="spec-vb-label" class:pass={grahamOk} class:fail={!grahamOk}>Graham (Fundamental) Mode</div>
+          <div class="spec-vb-verdict" class:pass={grahamOk} class:fail={!grahamOk}>{grahamOk ? '✅ PASSES' : '✗ FAILS'}</div>
+          <div class="spec-vb-detail">
+            {#if !grahamOk}
+              Graham's strict 15× P/E gate is a hard rule. Fails immediately at elevated valuations.
+            {:else}
+              Passes Graham's fundamental gates — unusual for a Speculation signal.
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <!-- Gate-by-gate breakdown -->
+      <div class="spec-gate-breakdown">
+        <div class="spec-gb-title">Gate Breakdown — which rule failed</div>
+        {#each gates as g}
+          <div class="spec-gate-row" class:g-pass={g.pass} class:g-fail={!g.pass}>
+            <span class="spec-gate-icon">{g.pass ? '✓' : '✗'}</span>
+            <span class="spec-gate-text"><b>{g.label}</b> — {g.detail}</span>
+            <span class="spec-gate-value">{g.value}</span>
+          </div>
+        {/each}
+      </div>
+
+      <!-- Footer tip -->
+      <div class="spec-modal-footer">
+        💡 <strong>What to do:</strong> Speculation signals are valid positions — they pass today's market standards. Consider sizing smaller than a Strong Buy and monitoring P/E compression risk if the market re-rates growth stocks downward.
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .spec-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--bg-overlay);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spec-modal {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-input);
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 520px;
+    width: 90%;
+    box-shadow: 0 24px 64px #00000088;
+    animation: modal-in 0.2s ease;
+  }
+
+  @keyframes modal-in {
+    from { opacity: 0; transform: scale(0.96) translateY(8px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  .spec-modal-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .spec-modal-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .spec-modal-sub {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 2px;
+    font-family: var(--font-mono);
+  }
+
+  .spec-modal-close {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: none;
+    color: var(--text-secondary);
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition);
+
+    &:hover { background: var(--bg-elevated); color: var(--text-primary); }
+  }
+
+  .spec-summary {
+    background: var(--amber-dim);
+    border: 1px solid #4a3000;
+    border-radius: 8px;
+    padding: 12px 14px;
+    margin-bottom: 16px;
+
+    p { font-size: 12px; color: var(--amber); line-height: 1.6; }
+  }
+
+  .spec-verdict-compare {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  .spec-vb {
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid var(--border);
+
+    &.spec-vb-pass { background: var(--green-dim); border-color: var(--green-mid); }
+    &.spec-vb-fail { background: var(--red-dim);   border-color: #4a1a1a; }
+  }
+
+  .spec-vb-label {
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 4px;
+
+    &.pass { color: var(--green); }
+    &.fail { color: var(--red); }
+  }
+
+  .spec-vb-verdict {
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 6px;
+
+    &.pass { color: var(--green); }
+    &.fail { color: var(--red); }
+  }
+
+  .spec-vb-detail {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  .spec-gate-breakdown {
+    margin-bottom: 16px;
+  }
+
+  .spec-gb-title {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .spec-gate-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 10px;
+    border-radius: 6px;
+    margin-bottom: 4px;
+    font-size: 12px;
+
+    &.g-pass { background: var(--green-dim); }
+    &.g-fail { background: var(--red-dim); }
+  }
+
+  .spec-gate-icon {
+    font-size: 13px;
+    flex-shrink: 0;
+
+    .g-pass & { color: var(--green); }
+    .g-fail & { color: var(--red); }
+  }
+
+  .spec-gate-text {
+    flex: 1;
+    color: var(--text-secondary);
+
+    b { color: var(--text-primary); }
+  }
+
+  .spec-gate-value {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .spec-modal-footer {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    padding-top: 14px;
+    border-top: 1px solid var(--border);
+  }
+</style>
@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';
+  import { screenerStore } from '$lib/stores/screener.store.svelte.js';
+  import { screenTickers, analyzeTickers } from '$lib/api.js';
+  import Spinner from '$lib/components/shared/Spinner.svelte';
+  import AssetTable from '$lib/components/screener/AssetTable.svelte';
+  import type { AssetType, ScreenerResult } from '$lib/types.js';
+
+  let results    = $state<ScreenerResult | null>(null);
+  let loading    = $state(false);
+  let error      = $state<string | null>(null);
+  let screenedAt = $state('');
+  let collapsed  = $state(false);
+
+  // Re-screen whenever the pin set changes (debounced 300ms to batch quick adds)
+  let debounceTimer: ReturnType<typeof setTimeout>;
+  $effect(() => {
+    const tickers = watchlistStore.tickers; // reactive dependency
+    clearTimeout(debounceTimer);
+    if (tickers.length === 0) { results = null; return; }
+    debounceTimer = setTimeout(() => screen(tickers), 300);
+    return () => clearTimeout(debounceTimer);
+  });
+
+  async function screen(tickers: string[]) {
+    loading = true;
+    error = null;
+    try {
+      results = await screenTickers(tickers);
+      screenedAt = new Date().toLocaleTimeString();
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  // Run LLM analysis for the given asset type using watchlist tickers,
+  // then open the shared AnalysisSidebar via screenerStore.
+  async function runAnalysis(type: AssetType): Promise<void> {
+    const tickers = (results?.[type] ?? []).map((r) => r.asset.ticker);
+    if (!tickers.length) return;
+    screenerStore.sidebar = { open: true, loading: true, analysis: null, type, error: null };
+    try {
+      const res = await analyzeTickers(tickers);
+      const reason = res.reason === 'no_stories' ? 'No recent news found for these tickers.' : null;
+      screenerStore.sidebar = {
+        open: true,
+        loading: false,
+        analysis: res.analysis,
+        type,
+        error: res.analysis ? null : (reason ?? 'Analysis failed — check server logs for details.'),
+      };
+    } catch (e) {
+      screenerStore.sidebar = {
+        open: true, loading: false, analysis: null, type,
+        error: (e as Error).message,
+      };
+    }
+  }
+</script>
+
+{#if watchlistStore.count > 0 || loading}
+<div class="wl-wrapper">
+  <div class="wl-header">
+    <button
+      class="wl-collapse-btn"
+      onclick={() => collapsed = !collapsed}
+      title={collapsed ? 'Expand watchlist' : 'Collapse watchlist'}
+    >{collapsed ? '▸' : '▾'}</button>
+    <span class="wl-title">📌 Watchlist</span>
+    <span class="wl-count">{watchlistStore.count}</span>
+    {#if screenedAt && !collapsed}
+      <span class="wl-screened-at">screened {screenedAt}</span>
+    {/if}
+    {#if loading}<Spinner size="sm" />{/if}
+  </div>
+
+  {#if !collapsed}
+    {#if error}
+      <div class="error-banner">⚠ {error}</div>
+    {:else if loading && !results}
+      <div class="wl-loading"><Spinner size="lg" label="Screening watchlist…" /></div>
+    {:else if results}
+      <!-- Reuse AssetTable for each type — full feature parity with the screener -->
+      {#each (['STOCK', 'ETF', 'BOND'] as const) as assetType}
+        {#if results[assetType]?.length}
+          <AssetTable
+            type={assetType}
+            rows={results[assetType]}
+            analyzeLoading={screenerStore.sidebar.loading && screenerStore.sidebar.type === assetType}
+            onAnalyze={() => runAnalysis(assetType)}
+          />
+        {/if}
+      {/each}
+
+      {#if results.ERROR?.length}
+        <div class="wl-errors">
+          {#each results.ERROR as e}
+            <span class="wl-error-item">
+              ⚠ {e.ticker}: {e.message}
+              <button
+                class="wl-unpin-btn"
+                onclick={() => watchlistStore.remove(e.ticker)}
+                title="Remove"
+              >✕</button>
+            </span>
+          {/each}
+        </div>
+      {/if}
+    {/if}
+  {/if}
+</div>
+{/if}
+
+<style>
+  .wl-wrapper {
+    margin-top: 16px;
+    border-top: 1px solid var(--border);
+    padding-top: 4px;
+  }
+
+  .wl-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0 4px;
+  }
+
+  .wl-collapse-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-muted);
+    font-size: 12px;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .wl-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .wl-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    font-size: 11px;
+    font-weight: 700;
+    background: var(--blue);
+    color: #fff;
+  }
+
+  .wl-screened-at {
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .wl-loading {
+    padding: 32px 0;
+  }
+
+  .wl-errors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+  }
+
+  .wl-error-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+    background: var(--bg-hover);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 4px 8px;
+  }
+
+  .wl-unpin-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-faint);
+    font-size: 11px;
+    padding: 1px 3px;
+    border-radius: 3px;
+    transition: color 0.15s;
+  }
+
+  .wl-unpin-btn:hover { color: #f87171; }
+</style>
@@ -13,7 +13,7 @@
    { label: 'REIT Yld', value: ctx.benchmarks?.reitYield != null ? ctx.benchmarks.reitYield.toFixed(1) + '%' : '—', color: 'amber'   },
    { label: 'IG Sprd',  value: ctx.benchmarks?.igSpread  != null ? ctx.benchmarks.igSpread.toFixed(2)  + '%' : '—', color: 'teal'    },
    { label: 'Rates',    value: ctx.rateRegime,       regime: ctx.rateRegime,       color: ctx.rateRegime === 'HIGH' ? 'red' : ctx.rateRegime === 'LOW' ? 'blue' : 'slate' },
-    { label: 'Vol',      value: ctx.volatilityRegime, regime: ctx.volatilityRegime, color: ctx.volatilityRegime === 'ELEVATED' ? 'orange' : 'slate' },
+    { label: 'Vol',      value: ctx.volatilityRegime, regime: ctx.volatilityRegime, color: ctx.volatilityRegime === 'HIGH' ? 'orange' : ctx.volatilityRegime === 'LOW' ? 'blue' : 'slate' },
  ]);
 </script>

@@ -0,0 +1,75 @@
+import { fetchWatchlist, pinTicker, unpinTicker } from '$lib/api/watchlist.js';
+
+class WatchlistStore {
+  // ── State ──────────────────────────────────────────────────────────────────
+  pins = $state<Set<string>>(new Set());
+  loading = $state(false);
+  ready = $state(false); // true once initial load completes
+
+  // ── Derived ────────────────────────────────────────────────────────────────
+  get tickers(): string[] {
+    return [...this.pins];
+  }
+  get count(): number {
+    return this.pins.size;
+  }
+
+  isPinned(ticker: string): boolean {
+    return this.pins.has(ticker);
+  }
+
+  // ── Load from server ───────────────────────────────────────────────────────
+  async load(): Promise<void> {
+    if (this.loading) return;
+    this.loading = true;
+    try {
+      const { tickers } = await fetchWatchlist();
+      this.pins = new Set(tickers);
+    } catch {
+      // Silently fail — user sees empty watchlist, can retry by visiting page
+    } finally {
+      this.loading = false;
+      this.ready = true;
+    }
+  }
+
+  // ── Toggle (optimistic) ────────────────────────────────────────────────────
+  async toggle(ticker: string): Promise<void> {
+    const wasPin = this.pins.has(ticker);
+
+    // Optimistic update — update UI immediately
+    const next = new Set(this.pins);
+    wasPin ? next.delete(ticker) : next.add(ticker);
+    this.pins = next;
+
+    try {
+      if (wasPin) {
+        await unpinTicker(ticker);
+      } else {
+        await pinTicker(ticker);
+      }
+    } catch {
+      // Rollback on failure
+      const rollback = new Set(this.pins);
+      wasPin ? rollback.add(ticker) : rollback.delete(ticker);
+      this.pins = rollback;
+    }
+  }
+
+  // ── Remove ─────────────────────────────────────────────────────────────────
+  async remove(ticker: string): Promise<void> {
+    const next = new Set(this.pins);
+    next.delete(ticker);
+    this.pins = next;
+    try {
+      await unpinTicker(ticker);
+    } catch {
+      // Rollback
+      const rollback = new Set(this.pins);
+      rollback.add(ticker);
+      this.pins = rollback;
+    }
+  }
+}
+
+export const watchlistStore = new WatchlistStore();
@@ -9,6 +9,7 @@
 */
 export function verdictShort(label: string | null | undefined): string {
  if (!label) return '—';
+  if (label.includes('No Data')) return 'No Data';
  if (label.includes('High Conviction')) return 'Strong Buy';
  if (label.includes('Speculative')) return 'Speculative';
  if (label.includes('Momentum')) return 'Momentum';
@@ -34,6 +35,8 @@ export function vClass(
  label: string | null | undefined,
 ): 'green' | 'yellow' | 'red' | 'blue' | 'gray' {
  if (!label) return 'gray';
+  // Insufficient data is unknown, not a neutral opinion — render gray
+  if (label.includes('No Data')) return 'gray';
  if (
    label.startsWith('🟢') ||
    label.includes('High Conviction') ||
@@ -4,6 +4,7 @@
  import '../styles/app.scss';
  import Spinner from '$lib/components/shared/Spinner.svelte';
  import { authStore } from '$lib/stores/auth.store.svelte.js';
+  import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';
  import type { Snippet } from 'svelte';
  let { children }: { children: Snippet } = $props();

@@ -19,6 +20,13 @@
    }
  });

+  // Load watchlist once when user is authenticated
+  $effect(() => {
+    if (authStore.isLoggedIn && !watchlistStore.ready && !watchlistStore.loading) {
+      watchlistStore.load();
+    }
+  });
+
  const navLabel = $derived(
    activePath === '/portfolio'         ? 'Loading portfolio…' :
    activePath?.startsWith('/calls')    ? 'Loading market calls…' :
@@ -4,6 +4,7 @@
  import MarketContextStrip from '$lib/components/shared/MarketContextStrip.svelte';
  import AssetTable         from '$lib/components/screener/AssetTable.svelte';
  import AnalysisSidebar    from '$lib/components/screener/AnalysisSidebar.svelte';
+  import WatchlistPanel     from '$lib/components/screener/WatchlistPanel.svelte';

  const s = screenerStore;

@@ -92,6 +93,12 @@
      </section>
    {/if}
  {/if}
+
+  <WatchlistPanel />
 </div>

-<AnalysisSidebar sidebar={s.sidebar} onClose={() => s.closeSidebar()} />
+<AnalysisSidebar
+  sidebar={s.sidebar}
+  onClose={() => s.closeSidebar()}
+  onScreenTickers={(tickers) => { s.input = tickers.join(', '); s.screen(); }}
+/>
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  onMount(() => goto('/'));
+</script>
@@ -0,0 +1 @@
+export const ssr = false;
@@ -75,6 +75,34 @@ button {
  &:hover:not(:disabled) { background: #163356; }
 }

+// ── btn-glossary  (ghost — "? Glossary" in section header) ──────────────
+
+.btn-glossary {
+  @extend %btn-inline-flex;
+  background: transparent;
+  color: var(--text-faint);
+  border: 1px solid var(--border);
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  padding: 4px 11px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-muted);
+    background: var(--bg-card);
+    border-color: var(--border-input);
+  }
+
+  &.btn-glossary-active {
+    color: #60a5fa;
+    background: #1e3a5f22;
+    border-color: #1e3a5f88;
+  }
+}
+
 // ── btn-analyze  (ghost blue — "✦ Analyze" in section header) ────────────

 .btn-analyze {
@@ -113,3 +113,20 @@ main { flex: 1; padding: 28px 32px; }
  align-items: center;
  padding: 80px 0;
 }
+
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin-left: 5px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  background: var(--blue);
+  color: #fff;
+  line-height: 1;
+  vertical-align: middle;
+}
@@ -3,8 +3,12 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-ui);
  background: var(--bg-base);
-  color: var(--text-secondary);
+  color: var(--text-primary);
  font-size: var(--fs-md);
+  line-height: 1.5;
 }
+
+button { font-family: inherit; cursor: pointer; }
+input, select { font-family: inherit; }
@@ -106,32 +106,23 @@

 .asset-section { margin-bottom: 24px; }

-.analyze-btn {
-  margin-left: auto;
-  font-size: var(--fs-sm);
-  padding: 5px 14px;
-}
-
-// ── Inline filter row (inside thead) ─────────────────────────────────────
+// ── Inline filter row ────────────────────────────────────────────────────

 .filter-row td {
-  padding: 4px var(--space-lg) !important;
-  background: #0a1628;
+  padding: 5px 8px !important;
+  background: var(--bg-base);
  border-bottom: 1px solid var(--border) !important;

-  // sticky first cell matches the header sticky column
  &:first-child {
    position: sticky;
    left: 0;
-    background: #0a1628;
+    background: var(--bg-base);
    z-index: 1;
  }
 }

-// Pair of inputs side-by-side (e.g. price min/max)
 .th-filter-pair {
  display: flex;
-  flex-direction: row;
  gap: 4px;
  max-width: 160px;

@@ -145,7 +136,6 @@
  &::-webkit-inner-spin-button { -webkit-appearance: none; }
 }

-// Checkbox + label for flag filter
 .th-filter-check {
  display: flex;
  align-items: center;
@@ -155,44 +145,31 @@
  color: var(--text-secondary);
  white-space: nowrap;

-  input[type='checkbox'] {
-    accent-color: var(--blue);
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-  }
+  input[type='checkbox'] { accent-color: var(--blue); width: 12px; height: 12px; cursor: pointer; }
 }

-// Input / select sitting inside a th filter cell
 .th-filter {
  width: 100%;
  min-width: 80px;
-  background: #0f1e33;
-  border: 1px solid #1e3050;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
-  padding: 3px 7px;
+  padding: 4px 8px;
  font-size: 11px;
-  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
-  -webkit-appearance: none;

-  &:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f620; }
-  &::placeholder { color: var(--text-faint); }
+  &:focus { border-color: var(--blue); }
+  &::placeholder { color: var(--text-muted); }

-  // Style active (non-empty) filter
-  &:not([value='']):not(:placeholder-shown) {
-    border-color: var(--blue);
-    color: #93c5fd;
-  }
+  option { background: var(--bg-surface); }
 }

-// "Clear filters" link in section header
 .filter-clear-btn {
  font-size: 11px;
-  color: var(--text-faint);
+  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
@@ -203,211 +180,257 @@
  &:hover { color: var(--red); }
 }

-// Sortable column header
+// ── Column headers ────────────────────────────────────────────────────────
+
 .sort-th {
  cursor: pointer;
  user-select: none;
-
-  &:hover { color: var(--text-muted); }
+  &:hover { color: var(--text-primary); }
 }

 .sort-icon {
  display: inline-block;
  margin-left: 4px;
-  font-size: 10px;
-  color: var(--text-faint);
+  font-size: 9px;
+  color: var(--text-muted);
+  opacity: 0.4;
  vertical-align: middle;
-  line-height: 1;
+
+  .sort-th:hover & { opacity: 0.8; }
 }

-// Expand toggle column
 .col-expand {
  width: 24px;
  min-width: 24px;
-  color: var(--text-faint);
+  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  user-select: none;
 }

-// Prevent Verdict column from collapsing — pill needs room
-.asset-table th:nth-child(5),
-.asset-table td:nth-child(5) {
-  min-width: 100px;
-}
-
-// Prevent Signal column from collapsing
 .asset-table th:nth-child(4),
-.asset-table td:nth-child(4) {
-  min-width: 110px;
-}
+.asset-table td:nth-child(4) { min-width: 160px; } // signal cell — pill + why? link

-// ── Merged Signal/Verdict pill ────────────────────────────────────────────
+// ── Signal pill ───────────────────────────────────────────────────────────

 .signal-verdict-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 120px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
 }

-// Main verdict pill — colored by signal class
 .sv-pill {
-  display: inline-block;
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 12px;
  border-radius: var(--radius-pill);
-  letter-spacing: 0.03em;
+  font-size: 11px;
+  font-weight: 600;
  white-space: nowrap;
-  width: fit-content;
+  transition: filter var(--transition);

-  &.sv-strong   { background: #14532d33; color: #4ade80; border: 1px solid #14532d66; }
-  &.sv-momentum { background: #1e3a5f33; color: #60a5fa; border: 1px solid #1e3a5f66; }
-  &.sv-spec     { background: #7c2d1233; color: #fb923c; border: 1px solid #7c2d1266; }
-  &.sv-neutral  { background: #1e293b;   color: #94a3b8; border: 1px solid #334155;   }
-  &.sv-avoid    { background: #450a0a33; color: #f87171; border: 1px solid #450a0a66; }
+  &.sv-strong   { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-mid); }
+  &.sv-momentum { background: var(--blue-dim);  color: var(--blue);  border: 1px solid var(--blue-mid);  }
+  &.sv-spec     { background: var(--amber-dim); color: var(--amber); border: 1px solid #4a3000; }
+  &.sv-neutral  { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-input); }
+  &.sv-avoid    { background: var(--red-dim);   color: var(--red);   border: 1px solid #4a1a1a; }
 }

-// Sub-label showing the full signal text
-.sv-signal-label {
-  font-size: 10px;
-  color: var(--text-faint);
-  letter-spacing: 0.02em;
-  white-space: nowrap;
+// Pill as a clickable button — dotted underline signals interactivity
+button.sv-pill-link {
+  cursor: pointer;
+  background: none; // reset button default, color set by sv-* variant above
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+
+  &:hover { filter: brightness(1.2); }
 }

 // ── Score dot scale ───────────────────────────────────────────────────────

-.score-cell {
-  white-space: nowrap;
-  min-width: 80px;
-}
+.score-cell { white-space: nowrap; min-width: 80px; }

 .score-dots {
  display: inline-flex;
-  gap: 3px;
+  gap: 2px;
  vertical-align: middle;
  margin-right: 5px;
 }

 .score-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
  border-radius: 50%;
-  background: #1e3050;
-  border: 1px solid #2a4060;
+  background: var(--border-input);
  transition: background 0.15s;

-  &.on { background: var(--blue); border-color: #60a5fa; box-shadow: 0 0 4px #3b82f644; }
+  &.on { background: var(--blue); }
 }

 .score-num {
+  font-family: var(--font-mono);
  font-size: 11px;
-  color: var(--text-dim);
-  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
 }

-.score-fail {
-  color: var(--red);
-  font-size: 12px;
-  font-weight: 700;
+.score-fail { color: var(--red); font-size: 12px; font-weight: 700; }
+
+.score-nodata {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
 }

-// ── Flags badge with hover-expand tooltip ────────────────────────────────
-
-.flags-cell {
-  position: relative;
-  min-width: 48px;
+// Low-coverage chip — shown when fewer than half the scoring factors had data
+.score-cov {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--amber, #d97706);
+  border: 1px solid currentColor;
+  border-radius: 8px;
+  padding: 0 4px;
+  margin-left: 5px;
+  vertical-align: middle;
+  cursor: help;
 }

+// ── Cap / Style chips ─────────────────────────────────────────────────────
+
+.tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-xs);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.cap-tag   { color: var(--text-secondary); }
+.style-tag { color: var(--text-secondary); }
+
+// ── Flags badge with hover tooltip ───────────────────────────────────────
+
+.flags-cell { position: relative; min-width: 48px; }
+
 .flags-badge {
  position: relative;
  display: inline-block;
  cursor: default;

-  &:hover .flags-tooltip { opacity: 1; pointer-events: auto; }
+  &:hover .flags-tooltip { display: block; }
 }

 .flags-count {
-  display: inline-block;
-  background: #431a0033;
-  border: 1px solid #431a0066;
-  color: #fb923c;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--amber-dim);
+  color: var(--amber);
  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: var(--radius-pill);
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: var(--radius-xs);
+  border: 1px solid #3a2800;
  white-space: nowrap;
-  cursor: default;
 }

 .flags-tooltip {
+  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
-  left: 0;
+  right: 0;
  z-index: 50;
-  background: #0c1829;
-  border: 1px solid #1e3a5f;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
-  padding: 8px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 180px;
-  max-width: 280px;
+  padding: 10px 12px;
+  min-width: 240px;
+  max-width: 300px;
  box-shadow: 0 8px 24px #00000066;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease;
 }

-// Summary row — clickable; open state gets left accent bar + lifted bg
-// NOTE: background is set on the <tr> so that position:sticky td:first-child
-// inherits it (sticky cells create their own stacking context).
+.flags-tt-title {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 7px;
+}
+
+.flags-tt-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--amber);
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+// ── Summary row (data row) ────────────────────────────────────────────────
+
 .summary-row {
  cursor: pointer;
+  transition: background var(--transition);

-  &:hover { background: #1e2f48; }
+  &:hover { background: var(--bg-surface); }

  &.row-open {
-    background: #1a2f4a;
+    background: var(--bg-row-sel);
+    border-left: 2px solid var(--blue);

    td { border-bottom: none !important; }
-
-    // Brighter left accent on the expand cell
-    .col-expand {
-      box-shadow: inset 3px 0 0 #60a5fa;
-    }
+    .col-expand { color: var(--blue); }
  }
 }

+// Ticker — monospace, bold
+.ticker {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 0.02em;
+}
+
+.num {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
 // ── Inline detail row ────────────────────────────────────────────────────

 .detail-row td {
  padding: 0 !important;
  border-bottom: none !important;
-  box-shadow: inset 0 -3px 0 #1e3a5f;
+  box-shadow: inset 0 -2px 0 var(--blue);
 }
 .detail-cell { padding: 0 !important; }

-// Two-column layout: left = metrics (55%), right = bar chart (45%)
-// min-width: 0 on each child prevents grid blowout
 .detail-panel {
  display: grid;
-  grid-template-columns: 55% 45%;
-  gap: 0;
-  background: #0c1829;
-  border-top: 2px solid var(--blue);
-  border-left: 3px solid var(--blue);
+  grid-template-columns: 1fr 360px;
+  border-top: 1px solid var(--blue);
+  background: #0c1520;
  overflow: hidden;
 }

 // ── Left zone ────────────────────────────────────────────────────────────
 .dp-left {
  min-width: 0;
-  padding: 16px 18px 16px 16px;
-  border-right: 1px solid #1e3a5f;
+  padding: 16px 18px;
+  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
@@ -418,176 +441,234 @@
 .dp-right {
  min-width: 0;
  padding: 16px 18px;
+  background: #0a1018;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }

-// ── Section title ─────────────────────────────────────────────────────────
+// ── Section label ─────────────────────────────────────────────────────────
 .dp-title {
-  font-size: 10px;
+  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
-  color: #4a7aaa;
+  color: var(--text-muted);
  margin-bottom: 2px;
 }

 .dp-mode-note {
-  font-size: 10px;
+  font-size: 9px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
-  color: #3a5a7a;
+  color: var(--text-muted);
  margin-left: 4px;
 }

 // ── Metric grid cards ─────────────────────────────────────────────────────
-// Fixed 4-col grid on left panel — no min-width auto-fill to prevent overflow
+
 .dp-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
-  gap: 5px;
+  gap: 7px;
 }

 .dp-metric-card {
  min-width: 0;
-  background: #0f2040;
-  border: 1px solid #1a3050;
-  border-radius: 6px;
-  padding: 5px 7px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
  display: flex;
  flex-direction: column;
-  gap: 2px;
+  gap: 3px;
  overflow: hidden;
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
+
+  &:hover { border-color: var(--purple); background: var(--bg-elevated); }
 }

 .dp-mc-label {
  font-size: 9px;
-  font-weight: 700;
+  font-weight: 600;
  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #3d5a7a;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+// ? icon inside metric card label — appears on card hover
+.dp-mc-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  font-size: 8px;
+  font-weight: 700;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  opacity: 0;
+  transition: opacity var(--transition);
+  flex-shrink: 0;
+
+  .dp-metric-card:hover & { opacity: 1; color: var(--purple); border-color: var(--purple); }
+}
+
+// Pass / fail color states on metric cards
+.dp-metric-card.dp-mc-pass {
+  border-color: var(--green-mid);
+  background: linear-gradient(180deg, #0d2e1a 0%, var(--bg-surface) 100%);
+
+  .dp-mc-label { color: var(--green); }
+}
+
+.dp-metric-card.dp-mc-fail {
+  border-color: #4a1a1a;
+  background: linear-gradient(180deg, #2e0d0d 0%, var(--bg-surface) 100%);
+
+  .dp-mc-label { color: var(--red); }
 }

 .dp-mc-value {
-  font-size: 13px;
-  font-weight: 700;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 // ── Gate badge chips ──────────────────────────────────────────────────────
-.dp-gates-row {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
+
+.dp-gates-row { display: flex; gap: 6px; flex-wrap: wrap; }

 .dp-gate-chip {
  display: inline-flex;
  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  padding: 3px 10px;
+  gap: 5px;
+  padding: 4px 12px;
  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 600;
  border: 1px solid transparent;
 }

 .dp-gate-chip-pass {
-  background: #14532d33;
+  background: var(--green-dim);
  color: var(--green);
-  border-color: #14532d66;
+  border-color: var(--green-mid);
 }

 .dp-gate-chip-fail {
-  background: #450a0a33;
+  background: var(--red-dim);
  color: var(--red);
-  border-color: #450a0a66;
+  border-color: #4a1a1a;
 }

 // ── Risk flag pills ───────────────────────────────────────────────────────
-.dp-risk-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
+
+.dp-risk-row { display: flex; flex-wrap: wrap; gap: 6px; }

 .dp-risk-pill {
  display: inline-flex;
  align-items: center;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 9px;
+  gap: 4px;
+  padding: 3px 10px;
  border-radius: var(--radius-pill);
-  background: #431a0033;
-  color: #fb923c;
-  border: 1px solid #431a0066;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--amber-dim);
+  color: var(--amber);
+  border: 1px solid #3a2800;
+  cursor: pointer;
  white-space: nowrap;
+  transition: background var(--transition);
+
+  &:hover { background: #3a2800; }
 }

-// ── Horizontal bar chart (factor scores) ─────────────────────────────────
-.dp-bar-chart {
+// ── Factor score cards (redesigned) ──────────────────────────────────────
+
+.dp-factor-list {
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }

-.dp-bar-row {
-  display: grid;
-  grid-template-columns: 88px 1fr 36px;
+.dp-factor-item {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  cursor: pointer;
+  transition: border-color var(--transition);
+
+  &:hover { border-color: var(--purple); }
+}
+
+.dp-factor-top {
+  display: flex;
  align-items: center;
-  gap: 10px;
+  justify-content: space-between;
+  margin-bottom: 4px;
 }

-.dp-bar-label {
-  font-size: 12px;
-  color: #6b8aad;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.dp-factor-name {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dp-factor-verdict {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: var(--radius-xs);
+
+  &.fv-pos { background: var(--green-dim); color: var(--green); }
+  &.fv-neg { background: var(--red-dim);   color: var(--red);   }
+  &.fv-neu { background: var(--bg-elevated); color: var(--text-secondary); }
+}
+
+.dp-factor-reason {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 5px;
+  line-height: 1.4;
+
+  b { color: var(--text-secondary); }
 }

 .dp-bar-track {
-  height: 10px;
-  background: #0f2040;
+  height: 5px;
+  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
-  border: 1px solid #1a3050;
 }

 .dp-bar-fill {
  height: 100%;
  border-radius: 3px;
-  transition: width 0.3s ease;
+  transition: width 0.5s ease;

-  &.dp-bar-pos {
-    background: linear-gradient(90deg, #16a34a, #4ade80);
-    box-shadow: 0 0 6px #4ade8044;
-  }
-
-  &.dp-bar-neg {
-    background: linear-gradient(90deg, #991b1b, #f87171);
-    box-shadow: 0 0 6px #f8717144;
-  }
+  &.dp-bar-pos { background: var(--green); }
+  &.dp-bar-neg { background: var(--red); }
 }

-.dp-bar-val {
-  font-size: 12px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-// ── Gate failures (shown instead of bars when gates fail) ─────────────────
+// Gate failures list (no factor cards)
 .dp-failures {
  display: flex;
  flex-direction: column;
@@ -595,37 +676,28 @@
 }

 .dp-failure-item {
-  font-size: 13px;
-  color: #f87171;
+  font-size: 12px;
+  color: var(--red);
  line-height: 1.5;
 }

 .dp-no-factors {
  font-size: 12px;
-  color: #3a5a7a;
+  color: var(--text-muted);
  font-style: italic;
 }

-
-/* score-cell base — layout only; visual rules are in the dot-scale block above */
-
-/* Classification tags */
-.cap-tag   { color: var(--blue-light, #93c5fd); border-color: var(--blue-dim, #1e3a5f); }
-.style-tag { color: var(--text-muted); }
-
 /* Signed % colouring */
 .pos { color: var(--green); }
 .neg { color: var(--red);   }

-/* Analyst label — not a number */
+/* Analyst label */
 .analyst-cell {
  font-size: var(--fs-sm);
-  color: var(--text-muted);
+  color: var(--text-secondary);
  white-space: nowrap;
 }

-/* .flag / .flag-more removed — replaced by .flags-badge hover-expand system */
-
 // ── MarketContext (collapsible card) ──────────────────────────────────────

 .ctx-grid {
@@ -820,3 +892,69 @@
 .tip-wrap:hover .tip-box { display: block; }

 .ctx-value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
+
+// ── Pin button + expand toggle ────────────────────────────────────────────
+
+.col-expand {
+  width: 52px;
+  min-width: 52px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.row-toggle {
+  color: var(--text-muted);
+  font-size: var(--fs-xs);
+  user-select: none;
+}
+
+.pin-btn {
+  background: none;
+  border: none;
+  padding: 1px 2px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  opacity: 0.35;
+  transition: opacity var(--transition), transform var(--transition);
+
+  &:hover { opacity: 0.85; transform: scale(1.15); }
+  &.pinned { opacity: 1; }
+}
+
+// ── News links in detail panel ────────────────────────────────────────────
+
+.dp-news-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+.dp-news-label {
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dp-news-link {
+  font-size: var(--fs-xs);
+  color: var(--blue);
+  text-decoration: none;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-hover);
+  transition: background var(--transition), border-color var(--transition);
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--bg-card);
+    border-color: var(--blue);
+    text-decoration: none;
+  }
+}
@@ -153,3 +153,387 @@
  color: var(--text-dim);
  line-height: 1.4;
 }
+
+// ── GlossaryPanel ─────────────────────────────────────────────────────────
+
+.glossary-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 98; // below panel (99) — transparent click catcher
+  background: transparent;
+  cursor: default;
+}
+
+.glossary-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 340px;
+  background: #0d1117;
+  border-left: 1px solid #1e2a3a;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: -6px 0 32px #00000088;
+}
+
+.glossary-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+
+.glossary-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  letter-spacing: 0.01em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.glossary-title-q {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid var(--text-dimmer);
+  font-size: 10px;
+  color: var(--text-dimmer);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.glossary-close {
+  margin-left: auto;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dimmer);
+  font-size: 16px;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+
+  &:hover { color: var(--text-muted); background: var(--bg-card); border-color: var(--border-input); }
+}
+
+.glossary-search-wrap {
+  position: relative;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  background: var(--bg-surface);
+}
+
+.glossary-search {
+  width: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  padding: 7px 28px 7px 10px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+  box-sizing: border-box;
+
+  &::placeholder { color: var(--text-faint); }
+  &:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f618; }
+}
+
+.glossary-search-clear {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 11px;
+  padding: 2px 4px;
+  cursor: pointer;
+
+  &:hover { color: var(--text-muted); }
+}
+
+.glossary-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 0 20px;
+
+  scrollbar-width: thin;
+  scrollbar-color: #1e3a5f transparent;
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 2px; }
+}
+
+// ── Context banner — fixed between search and body ────────────────────────
+
+.glossary-ctx-banner {
+  background: #0a2e1a;
+  border-top: 1px solid #1a4a2a;
+  border-bottom: 1px solid #1a4a2a;
+  padding: 9px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #4ade80;
+  letter-spacing: 0.02em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  border-radius: 0; // flush with panel edges
+}
+
+.glossary-category { margin-bottom: 2px; }
+
+.glossary-cat-header {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-faint);
+  padding: 12px 14px 4px;
+}
+
+// ── Individual item ───────────────────────────────────────────────────────
+
+.glossary-item {
+  border-left: 3px solid transparent;
+  transition: border-color 0.15s ease, background 0.1s ease;
+  margin: 0 8px 2px;
+  border-radius: 6px;
+
+  // Highlighted = relevant to selected row → green left border, no bg change
+  &.glossary-item-active {
+    border-left-color: #22c55e;
+  }
+
+  // Open/expanded → purple tint + purple left border
+  &.glossary-item-open {
+    border-left-color: #7c3aed;
+    background: #1a1035;
+    border-radius: 6px;
+  }
+}
+
+.glossary-item-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 9px 10px 9px 11px;
+  cursor: pointer;
+  text-align: left;
+  gap: 8px;
+  border-radius: 6px;
+  transition: background 0.1s ease;
+
+  &:hover { background: #151f2e; }
+}
+
+.glossary-item-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  flex: 1;
+  min-width: 0;
+}
+
+.glossary-active-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  box-shadow: 0 0 4px #22c55e66;
+  flex-shrink: 0;
+}
+
+// ── Category tags — all same gray pill, label text only ───────────────────
+
+.glossary-cat-tag {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: capitalize;
+  padding: 2px 9px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  flex-shrink: 0;
+  // All same gray — no per-category color variation
+  background: #1e2736;
+  color: #64748b;
+  border: 1px solid #2a3544;
+}
+
+// ── Expanded body — card style matching mockup ────────────────────────────
+
+.glossary-item-body {
+  margin: 0 8px 10px 8px;
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: #131c2a;
+  border: 1px solid #1e2d40;
+  border-radius: 8px;
+  overflow: hidden; // prevent pill overflow clipping
+}
+
+.glossary-definition {
+  font-size: 13px;
+  color: #94a3b8;
+  line-height: 1.6;
+  margin: 0;
+}
+
+// ── Gate box (code-styled monospace block) ────────────────────────────────
+
+.glossary-gate-box {
+  background: #0d1520;
+  border: 1px solid #1e2d40;
+  border-radius: 6px;
+  padding: 10px 12px;
+
+  code {
+    font-family: 'JetBrains Mono', var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+    font-size: 12px;
+    color: #93c5fd;
+    line-height: 1.6;
+    display: block;
+    white-space: pre-wrap;
+  }
+}
+
+// ── Range pills ───────────────────────────────────────────────────────────
+
+.glossary-range-pills {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.glossary-range-pill {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 5px 8px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  line-height: 1.3;
+  flex: 1 1 0;
+  min-width: 0;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.grange-good {
+    background: #0d2e1a;
+    color: #4ade80;
+    border: 1px solid #1a4a2a;
+  }
+
+  &.grange-bad {
+    background: #2e0d0d;
+    color: #f87171;
+    border: 1px solid #4a1a1a;
+  }
+
+  &.grange-neutral {
+    background: #1e2736;
+    color: #94a3b8;
+    border: 1px solid #2a3544;
+  }
+}
+
+// ── Range labels (below pills) ────────────────────────────────────────────
+
+.glossary-range-labels {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+
+  span {
+    flex: 1 1 0;
+    font-size: 10px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.3;
+  }
+}
+
+.grlabel-good    { color: #4ade80; }
+.grlabel-neutral { color: #64748b; }
+.grlabel-bad     { color: #f87171; }
+
+// ── Empty state ───────────────────────────────────────────────────────────
+
+.glossary-empty {
+  padding: 28px 16px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-dimmer);
+  font-style: italic;
+}
+
+// ── Column-header tooltip (300ms CSS delay) ───────────────────────────────
+// Only active inside <thead> — metric cards in detail panel use dp-mc-help instead
+
+thead .col-tip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: help;
+
+  &::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 220px;
+    white-space: normal;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-input);
+    border-radius: var(--radius-sm);
+    padding: 6px 10px;
+    font-size: 11px;
+    font-weight: 400;
+    text-transform: none;
+    letter-spacing: 0;
+    color: var(--text-secondary);
+    line-height: 1.4;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease 300ms;
+    z-index: 200;
+    box-shadow: 0 4px 16px #00000055;
+  }
+
+  &:hover::after { opacity: 1; }
+}
@@ -1,56 +1,68 @@
 // ── Design Tokens ────────────────────────────────────────────────────────
-// SCSS maps generate CSS custom properties. Organised by category so new
-// tokens are easy to locate and add. All runtime theming uses var(--name).
+// Single strict surface hierarchy. No decorative colors — semantic only.

 // Background layers — darkest to lightest
 $bg: (
-  base:       #0f1117,   // body, nav background
-  surface:    #0d1117,   // section cards, sidebar
-  elevated:   #111827,   // section headers, table headers
-  card:       #1e293b,   // input bg, tags, summary cards, ctx cards
-  card-hover: #131c2b,   // table row hover
-  row-alt:    #1a2233,   // portfolio table row border
+  base:       #0a0e14,   // body, nav
+  surface:    #111820,   // section cards, sidebar, table headers
+  elevated:   #1a2332,   // input bg, metric cards, chips
+  input:      #0d1319,   // filter inputs, search fields
+  overlay:    #000000a6, // modal backdrop
+  row-sel:    #0f1f35,   // selected/expanded row background
 );

 // Borders
 $borders: (
-  border:        #1e293b,  // primary — cards, sections, inputs
-  border-subtle: #161f2e,  // table row separators
-  border-input:  #2d3f55,  // form input borders
+  border:        #1e2d3d,  // primary — cards, sections
+  border-subtle: #10182a,  // table row separators
+  border-input:  #263447,  // form input borders, chips
 );

 // Text — brightest to most muted
 $text: (
-  text-primary:   #f1f5f9,  // headings, tickers, card values
-  text-secondary: #e2e8f0,  // body text, input values
-  text-muted:     #94a3b8,  // secondary text, reasons
-  text-dim:       #64748b,  // labels, table headers, muted values
-  text-dimmer:    #475569,  // very muted — timestamps, hints
-  text-faint:     #334155,  // count badge text, column headers
+  text-primary:   #e2eaf4,  // headings, tickers, values
+  text-secondary: #7a93ad,  // body text, labels, column headers
+  text-muted:     #3d5166,  // very muted — timestamps, category labels
 );

-// Blue accent  ('blue' is a CSS color name — must be quoted)
+// Blue accent
 $blues: (
-  'blue':         #3b82f6,  // focus ring, progress bar, bar-fill
-  'blue-dark':    #2563eb,  // primary button bg
-  'blue-darker':  #1d4ed8,  // primary button hover
-  'blue-muted':   #60a5fa,  // active tab text, edit icon hover
-  'blue-surface': #1e3a5f,  // active tab bg, mode tab bg
-  'blue-deep':    #0f2240,  // analyze button hover bg
-  'blue-badge':   #0d1e30,  // sidebar header background
+  'blue':         #4da6ff,  // selection border, active states
+  'blue-dim':     #0d2240,  // active tab bg
+  'blue-mid':     #1a3a5c,  // hover states
+  'blue-dark':    #1a4a8a,  // primary button bg
+  'blue-darker':  #2060aa,  // primary button hover
+  // legacy aliases — kept so other partials don't break
+  'blue-muted':   #4da6ff,
+  'blue-surface': #1a3a5c,
+  'blue-deep':    #0d2240,
+  'blue-badge':   #0d1319,
 );

-// Signal / semantic colors  (green/yellow/red/orange are CSS color names — must be quoted)
+// Semantic colors
 $signals: (
-  'green':      #4ade80,
-  'green-bg':   #14532d33,
-  'yellow':     #facc15,
-  'yellow-bg':  #71350033,
-  'red':        #f87171,
-  'red-bg':     #450a0a33,
-  'red-deep':   #450a0a55,  // error banner bg
-  'red-border': #7f1d1d,    // error banner border
-  'orange':     #fb923c,
+  // green
+  'green':        #34d17a,
+  'green-dim':    #0d2e1a,
+  'green-mid':    #1a4a2a,
+  'green-bg':     #0d2e1a,  // alias for old name
+  // red
+  'red':          #f05a5a,
+  'red-dim':      #2e0d0d,
+  'red-bg':       #2e0d0d,
+  'red-deep':     #2e0d0d,
+  'red-border':   #4a1a1a,
+  // amber / warning
+  'amber':        #f0b429,
+  'amber-dim':    #2e2000,
+  // orange — alias kept
+  'orange':       #f0b429,
+  // purple — glossary accent
+  'purple':       #a78bfa,
+  'purple-dim':   #1e1535,
+  // yellow alias
+  'yellow':       #f0b429,
+  'yellow-bg':    #2e2000,
 );

 // ── Emit all maps as CSS custom properties ───────────────────────────────
@@ -62,6 +74,9 @@ $signals: (
  @each $name, $val in $signals { --#{$name}: #{$val};    }

  // Typography
+  --font-ui:   'Inter', -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
@@ -87,5 +102,6 @@ $signals: (
  --space-3xl: 32px;

  // Transitions
-  --transition: 0.15s;
+  --transition:      0.18s ease;
+  --transition-slow: 0.28s cubic-bezier(.4,0,.2,1);
 }