From 336ae74d9786d0361e2759bd8897902ab7911d6b Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sun, 17 May 2026 13:51:02 -0700
Subject: Align Overview UI with kit mockup: adaptive Reference card,
 TickerHeader hierarchy, chart width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatsCard filters null ratio rows; shows '· Statement data incomplete' note instead of wall of Unavailable
- TickerHeader restructured to match kit: symbol (64px display) dominant beside company name (24px italic), sector label above, chips below
- Fix broken --fs-56 token in company name clamp → --fs-64
- Chart fills full panel width via .psm-chart-frame .chart { width: 100% }

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/prism-shell.css | 50 +++++++++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 15 deletions(-)

(limited to 'frontend/app/prism-shell.css')

diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
index b6372c2..6ccf9ca 100644
--- a/frontend/app/prism-shell.css
+++ b/frontend/app/prism-shell.css
@@ -509,32 +509,48 @@
   min-width: 0;
 }
 
-.psm-head-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: var(--sp-3);
-}
-
-.psm-identity-line {
+.psm-sector-label {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--tr-wider);
   color: var(--brass);
-  display: inline-flex;
+  margin-bottom: var(--sp-2);
 }
 
 .psm-heading-row {
   display: flex;
+  align-items: baseline;
+  gap: var(--sp-4);
   flex-wrap: wrap;
-  align-items: flex-start;
-  gap: var(--sp-3);
 }
 
-.psm-company-name {
+.psm-company-sym {
+  font-family: var(--font-display);
+  font-size: var(--fs-64);
+  font-weight: 500;
   color: var(--fg-1);
+  line-height: 0.95;
+  letter-spacing: -0.025em;
+}
+
+.psm-company-name {
   font-family: var(--font-display);
-  font-size: clamp(2.8rem, 5vw, var(--fs-56));
+  font-size: var(--fs-24);
   font-style: italic;
-  line-height: 0.95;
+  color: var(--fg-2);
+  font-weight: 400;
+  line-height: 1;
+}
+
+.psm-head-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: var(--sp-2);
 }
 
 .psm-partial-chip,
@@ -777,6 +793,10 @@
   background: linear-gradient(180deg, rgba(194, 170, 122, 0.03), rgba(194, 170, 122, 0));
 }
 
+.psm-chart-frame .chart {
+  width: 100%;
+}
+
 .psm-chart-meta {
   color: var(--fg-3);
   font-size: var(--fs-13);
-- 
cgit v1.3-2-g0d8e