phase-10.5: market screener ui enhancements

ui/src/styles/_badges.scss

@@ -13,15 +13,20 @@
 // Unified: replaces both .verdict-pill (screener) and .vpill (safe-buys)
 
 $verdict-variants: (
-  'green':  (color: var(--green),  bg: var(--green-bg)),
-  'yellow': (color: var(--yellow), bg: var(--yellow-bg)),
-  'red':    (color: var(--red),    bg: var(--red-bg)),
+  'green':  (color: var(--green),      bg: var(--green-bg)),
+  'yellow': (color: var(--yellow),     bg: var(--yellow-bg)),
+  'red':    (color: var(--red),        bg: var(--red-bg)),
+  'blue':   (color: #60a5fa,           bg: #1e3a5f33),
+  'gray':   (color: var(--text-muted), bg: #1e293b),
 );
 
 .verdict-pill {
   @extend %pill-base;
   font-size: var(--fs-sm);
   letter-spacing: 0.02em;
+  // Ensure all pills have a consistent look — fallback to gray
+  background: #1e293b;
+  color: var(--text-muted);
 
   @each $name, $vals in $verdict-variants {
     &.#{$name} {

ui/src/styles/_layout.scss

@@ -23,7 +23,6 @@ nav {
 .links {
   display: flex;
   gap: var(--space-xs);
-  margin-left: auto;
 
   a {
     color: var(--text-dim);
@@ -42,6 +41,29 @@ nav {
   }
 }
 
+// ── Nav auth (sign in / user + sign out) ─────────────────────────────────
+
+.nav-auth {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-left: auto;
+}
+
+.nav-user {
+  font-size: var(--fs-sm);
+  color: var(--text-dim);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn-sm {
+  padding: 4px 10px;
+  font-size: var(--fs-sm);
+}
+
 main { flex: 1; padding: 28px 32px; }
 
 // ── Navigation progress bar ───────────────────────────────────────────────

ui/src/styles/_portfolio.scss

@@ -216,6 +216,18 @@
   }
 }
 
+// Reason column — wraps so it doesn't blow out the table width
+.col-reason {
+  white-space: normal !important;
+  max-width: 260px;
+  min-width: 160px;
+  line-height: 1.4;
+  font-size: var(--fs-sm);
+  color: var(--text-muted);
+}
+
+.advice-table .sortable { cursor: pointer; user-select: none; &:hover { color: var(--text-muted); } }
+
 .advice-row-actions { display: flex; gap: 4px; align-items: center; }
 
 .btn-row-edit {

ui/src/styles/_screener.scss

@@ -0,0 +1,822 @@
+// ── Screener route — +page.svelte, safe-buys/+page.svelte, AssetTable ────
+
+// ── +page.svelte (screener) ───────────────────────────────────────────────
+
+.screener-page { max-width: 1400px; padding-bottom: 60px; }
+
+.toolbar      { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
+.toolbar-top  { display: flex; align-items: center; gap: 8px; }
+.search-row   { display: flex; gap: 8px; align-items: center; }
+
+.search-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  padding: 10px var(--space-lg);
+  font-size: var(--fs-md);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  letter-spacing: 0.02em;
+  outline: none;
+  transition: border-color var(--transition);
+
+  &:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f620; }
+}
+
+.btn-search-toggle {
+  background: var(--bg-card);
+  color: var(--text-dim);
+  border: 1px solid var(--border-input);
+  font-size: 12px;
+  padding: 8px var(--space-lg);
+
+  &:hover { background: #263347; color: var(--text-muted); }
+}
+
+.screened-at {
+  margin-left: auto;
+  font-size: var(--fs-sm);
+  color: var(--text-dimmer);
+}
+
+.dim-cell { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }
+
+.error-list { padding: 12px var(--space-xl); display: flex; flex-direction: column; gap: 6px; }
+.error-item { color: var(--text-dim); font-size: 12px; }
+.error-item :global(.ticker) { color: var(--red); font-weight: 700; margin-right: 8px; }
+
+// ── safe-buys/+page.svelte ────────────────────────────────────────────────
+
+.safe-buys-page { max-width: 1100px; padding-bottom: 60px; }
+
+.page-header { margin-bottom: 20px; }
+
+.safe-buys-page {
+  h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
+  .subtitle { font-size: 12px; color: var(--text-dimmer); line-height: 1.5; }
+  .subtitle strong { color: var(--text-muted); }
+}
+
+.strong-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+
+.strong-badge {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--green);
+  background: var(--green-bg);
+  padding: 4px 14px;
+  border-radius: var(--radius-pill);
+}
+
+.strong-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
+
+.empty-strong {
+  padding: var(--space-3xl) 20px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  font-size: var(--fs-md);
+  color: var(--text-dim);
+  text-align: center;
+  margin-bottom: 24px;
+  line-height: 1.6;
+}
+
+.watch-header { display: flex; align-items: center; gap: 12px; margin-top: 28px; margin-bottom: 12px; }
+
+.watch-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  padding: 4px 14px;
+  border-radius: var(--radius-pill);
+}
+
+.watch-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
+
+.watch-section { opacity: 0.75; }
+.watch-section:hover { opacity: 1; transition: opacity 0.2s; }
+
+.score { color: var(--text-dimmer); font-size: var(--fs-sm); }
+
+// ── AssetTable ────────────────────────────────────────────────────────────
+
+.asset-section { margin-bottom: 24px; }
+
+.analyze-btn {
+  margin-left: auto;
+  font-size: var(--fs-sm);
+  padding: 5px 14px;
+}
+
+// ── Inline filter row (inside thead) ─────────────────────────────────────
+
+.filter-row td {
+  padding: 4px var(--space-lg) !important;
+  background: #0a1628;
+  border-bottom: 1px solid var(--border) !important;
+
+  // sticky first cell matches the header sticky column
+  &:first-child {
+    position: sticky;
+    left: 0;
+    background: #0a1628;
+    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;
+
+  .th-filter { min-width: 0; width: 50%; padding-left: 5px; padding-right: 5px; }
+}
+
+.th-filter-num {
+  min-width: 0;
+  -moz-appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button { -webkit-appearance: none; }
+}
+
+// Checkbox + label for flag filter
+.th-filter-check {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+
+  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;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  padding: 3px 7px;
+  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); }
+
+  // Style active (non-empty) filter
+  &:not([value='']):not(:placeholder-shown) {
+    border-color: var(--blue);
+    color: #93c5fd;
+  }
+}
+
+// "Clear filters" link in section header
+.filter-clear-btn {
+  font-size: 11px;
+  color: var(--text-faint);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  margin-left: 4px;
+
+  &:hover { color: var(--red); }
+}
+
+// Sortable column header
+.sort-th {
+  cursor: pointer;
+  user-select: none;
+
+  &:hover { color: var(--text-muted); }
+}
+
+.sort-icon {
+  display: inline-block;
+  margin-left: 4px;
+  font-size: 10px;
+  color: var(--text-faint);
+  vertical-align: middle;
+  line-height: 1;
+}
+
+// Expand toggle column
+.col-expand {
+  width: 24px;
+  min-width: 24px;
+  color: var(--text-faint);
+  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;
+}
+
+// ── Merged Signal/Verdict pill ────────────────────────────────────────────
+
+.signal-verdict-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 120px;
+}
+
+// Main verdict pill — colored by signal class
+.sv-pill {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 9px;
+  border-radius: var(--radius-pill);
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  width: fit-content;
+
+  &.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; }
+}
+
+// Sub-label showing the full signal text
+.sv-signal-label {
+  font-size: 10px;
+  color: var(--text-faint);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+// ── Score dot scale ───────────────────────────────────────────────────────
+
+.score-cell {
+  white-space: nowrap;
+  min-width: 80px;
+}
+
+.score-dots {
+  display: inline-flex;
+  gap: 3px;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.score-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #1e3050;
+  border: 1px solid #2a4060;
+  transition: background 0.15s;
+
+  &.on { background: var(--blue); border-color: #60a5fa; box-shadow: 0 0 4px #3b82f644; }
+}
+
+.score-num {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.score-fail {
+  color: var(--red);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+// ── Flags badge with hover-expand 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; }
+}
+
+.flags-count {
+  display: inline-block;
+  background: #431a0033;
+  border: 1px solid #431a0066;
+  color: #fb923c;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.flags-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  background: #0c1829;
+  border: 1px solid #1e3a5f;
+  border-radius: var(--radius-md);
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 180px;
+  max-width: 280px;
+  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).
+.summary-row {
+  cursor: pointer;
+
+  &:hover { background: #1e2f48; }
+
+  &.row-open {
+    background: #1a2f4a;
+
+    td { border-bottom: none !important; }
+
+    // Brighter left accent on the expand cell
+    .col-expand {
+      box-shadow: inset 3px 0 0 #60a5fa;
+    }
+  }
+}
+
+// ── Inline detail row ────────────────────────────────────────────────────
+
+.detail-row td {
+  padding: 0 !important;
+  border-bottom: none !important;
+  box-shadow: inset 0 -3px 0 #1e3a5f;
+}
+.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);
+  overflow: hidden;
+}
+
+// ── Left zone ────────────────────────────────────────────────────────────
+.dp-left {
+  min-width: 0;
+  padding: 16px 18px 16px 16px;
+  border-right: 1px solid #1e3a5f;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+}
+
+// ── Right zone ───────────────────────────────────────────────────────────
+.dp-right {
+  min-width: 0;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+// ── Section title ─────────────────────────────────────────────────────────
+.dp-title {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #4a7aaa;
+  margin-bottom: 2px;
+}
+
+.dp-mode-note {
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: #3a5a7a;
+  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;
+}
+
+.dp-metric-card {
+  min-width: 0;
+  background: #0f2040;
+  border: 1px solid #1a3050;
+  border-radius: 6px;
+  padding: 5px 7px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.dp-mc-label {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #3d5a7a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dp-mc-value {
+  font-size: 13px;
+  font-weight: 700;
+  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-gate-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  border: 1px solid transparent;
+}
+
+.dp-gate-chip-pass {
+  background: #14532d33;
+  color: var(--green);
+  border-color: #14532d66;
+}
+
+.dp-gate-chip-fail {
+  background: #450a0a33;
+  color: var(--red);
+  border-color: #450a0a66;
+}
+
+// ── Risk flag pills ───────────────────────────────────────────────────────
+.dp-risk-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.dp-risk-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 9px;
+  border-radius: var(--radius-pill);
+  background: #431a0033;
+  color: #fb923c;
+  border: 1px solid #431a0066;
+  white-space: nowrap;
+}
+
+// ── Horizontal bar chart (factor scores) ─────────────────────────────────
+.dp-bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dp-bar-row {
+  display: grid;
+  grid-template-columns: 88px 1fr 36px;
+  align-items: center;
+  gap: 10px;
+}
+
+.dp-bar-label {
+  font-size: 12px;
+  color: #6b8aad;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dp-bar-track {
+  height: 10px;
+  background: #0f2040;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid #1a3050;
+}
+
+.dp-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s 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-val {
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+// ── Gate failures (shown instead of bars when gates fail) ─────────────────
+.dp-failures {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.dp-failure-item {
+  font-size: 13px;
+  color: #f87171;
+  line-height: 1.5;
+}
+
+.dp-no-factors {
+  font-size: 12px;
+  color: #3a5a7a;
+  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-cell {
+  font-size: var(--fs-sm);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+/* .flag / .flag-more removed — replaced by .flags-badge hover-expand system */
+
+// ── MarketContext (collapsible card) ──────────────────────────────────────
+
+.ctx-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+  padding: var(--space-xl);
+}
+
+.ctx-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-md);
+  padding: 12px var(--space-lg);
+}
+
+.ctx-label {
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dimmer);
+  margin-bottom: 4px;
+}
+
+.ctx-value {
+  font-size: var(--fs-lg);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.ctx-sub {
+  font-size: var(--fs-xs);
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.ctx-toggle {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-dimmer);
+  font-size: var(--fs-sm);
+  cursor: pointer;
+  padding: 2px 8px;
+
+  &:hover { color: var(--text-muted); }
+}
+
+// ── MarketContextStrip — colorful bubbles ─────────────────────────────────
+
+.bubble-strip {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.bubble {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 10px 8px;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  gap: 2px;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 18px #0006;
+  }
+}
+
+.bubble-val {
+  font-size: 15px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+
+.bubble-label {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.72;
+  margin-top: 3px;
+}
+
+// Individual color themes
+.bubble-indigo  { background: #312e8133; border-color: #4f46e566; color: #a5b4fc; }
+.bubble-rose    { background: #4c0d1533; border-color: #e1184866; color: #fda4af; }
+.bubble-emerald { background: #05401a33; border-color: #10b98166; color: #6ee7b7; }
+.bubble-sky     { background: #082f4933; border-color: #0ea5e966; color: #7dd3fc; }
+.bubble-violet  { background: #2e1a6e33; border-color: #7c3aed66; color: #c4b5fd; }
+.bubble-amber   { background: #451a0333; border-color: #f59e0b66; color: #fcd34d; }
+.bubble-teal    { background: #042f2e33; border-color: #14b8a666; color: #5eead4; }
+.bubble-slate   { background: #1e293b;   border-color: #47556966; color: #94a3b8; }
+.bubble-red     { background: #450a0a33; border-color: #ef444466; color: #fca5a5; }
+.bubble-blue    { background: #1e3a5f33; border-color: #3b82f666; color: #93c5fd; }
+.bubble-orange  { background: #431a0333; border-color: #f9731666; color: #fdba74; }
+
+// ── MarketContext (collapsible card grid) ─────────────────────────────────
+
+.ctx-wrap { margin-bottom: 20px; }
+
+.ctx-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 12px;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.ctx-toggle-label {
+  font-size: var(--fs-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-dimmer);
+}
+
+.ctx-toggle-chevron { font-size: var(--fs-2xs); color: var(--text-faint); }
+
+.ctx-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.ctx-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 12px var(--space-lg); }
+
+.ctx-label-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+.ctx-card-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
+
+// Tooltip
+.tip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
+
+.tip-anchor {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--text-faint);
+  color: var(--text-dimmer);
+  font-size: var(--fs-2xs);
+  font-weight: 700;
+  cursor: help;
+}
+
+.tip-box {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 220px;
+  background: var(--bg-card);
+  border: 1px solid var(--text-faint);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  font-size: var(--fs-sm);
+  color: var(--text-muted);
+  line-height: 1.5;
+  z-index: 50;
+  pointer-events: none;
+  white-space: normal;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--text-faint);
+  }
+}
+
+.tip-wrap:hover .tip-box { display: block; }
+
+.ctx-value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }

ui/src/styles/_table.scss

@@ -17,7 +17,7 @@ table {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--text-faint);
+    color: var(--text-dim);
     border-bottom: 1px solid var(--border);
     white-space: nowrap;
     background: var(--bg-elevated);
@@ -27,11 +27,7 @@ table {
     tr {
       border-bottom: 1px solid var(--border-subtle);
 
-      &:hover {
-        background: var(--bg-card-hover);
-
-        td:first-child { background: var(--bg-card-hover); }
-      }
+      &:hover { background: var(--bg-card-hover); }
     }
 
     td {
@@ -40,11 +36,12 @@ table {
       white-space: nowrap;
       font-size: var(--fs-md);
 
-      // Sticky first column (body)
+      // Sticky first column — inherits row background so hover/select states
+      // paint through correctly across the full row width
       &:first-child {
         position: sticky;
         left: 0;
-        background: var(--bg-surface);
+        background: inherit;
         z-index: 1;
       }
     }

ui/src/styles/app.scss

@@ -13,3 +13,4 @@
 @use 'sidebar';
 @use 'calls';
 @use 'portfolio';
+@use 'screener';