Refine overview ratios and shell

1 files changed, 126 insertions, 44 deletions

diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
index 9b0e1b5..b6372c2 100644
--- a/frontend/app/prism-shell.css
+++ b/frontend/app/prism-shell.css
@@ -1,6 +1,6 @@
 .prism-app {
   display: grid;
-  grid-template-columns: 256px minmax(0, 1fr);
+  grid-template-columns: 284px minmax(0, 1fr);
   min-height: 100vh;
 }
 
@@ -192,22 +192,22 @@
 
 .psm-watch-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--sp-2);
+  grid-template-columns: minmax(0, 1fr) 34px;
+  gap: var(--sp-3);
   align-items: center;
   border-bottom: 1px solid var(--line-1);
 }
 
 .psm-watch-select {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  gap: var(--sp-2);
+  grid-template-columns: minmax(0, 1fr) minmax(82px, auto) minmax(52px, auto);
+  column-gap: var(--sp-5);
   align-items: center;
   width: 100%;
   border: 0;
   background: transparent;
   color: var(--fg-2);
-  padding: 10px 0;
+  padding: 12px 0;
 }
 
 .psm-watch-select:hover,
@@ -221,13 +221,22 @@
 
 .psm-watch-main {
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
   text-align: left;
 }
 
+.psm-watch-cell {
+  min-width: 0;
+}
+
 .psm-watch-symbol {
   color: var(--fg-1);
+  font-family: var(--font-mono);
   font-size: var(--fs-14);
   font-weight: 500;
+  letter-spacing: 0.04em;
 }
 
 .psm-watch-date,
@@ -240,6 +249,11 @@
   font-size: var(--fs-13);
 }
 
+.psm-watch-date {
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
 .psm-watch-price,
 .psm-watch-change,
 .psm-quote-line,
@@ -261,13 +275,13 @@
 }
 
 .psm-watch-remove {
-  width: 26px;
-  height: 26px;
+  width: 30px;
+  height: 30px;
   border: 1px solid var(--line-2);
-  border-radius: var(--r-full);
+  border-radius: var(--r-2);
   background: transparent;
   color: var(--fg-4);
-  margin-right: 2px;
+  justify-self: end;
 }
 
 .psm-watch-remove:hover {
@@ -484,9 +498,9 @@
 
 .psm-ticker-head {
   display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) auto;
+  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.75fr) minmax(220px, auto);
   gap: var(--sp-5);
-  align-items: end;
+  align-items: start;
   padding-bottom: var(--sp-4);
   border-bottom: 1px solid var(--line-1);
 }
@@ -495,32 +509,32 @@
   min-width: 0;
 }
 
+.psm-head-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: var(--sp-3);
+}
+
 .psm-identity-line {
   color: var(--brass);
-  display: block;
-  margin-bottom: var(--sp-2);
+  display: inline-flex;
 }
 
 .psm-heading-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--sp-4);
-}
-
-.psm-symbol {
-  color: var(--fg-1);
-  font-family: var(--font-display);
-  font-size: clamp(3rem, 6vw, var(--fs-64));
-  line-height: 0.95;
-  letter-spacing: -0.03em;
+  align-items: flex-start;
+  gap: var(--sp-3);
 }
 
 .psm-company-name {
-  color: var(--fg-2);
+  color: var(--fg-1);
   font-family: var(--font-display);
-  font-size: var(--fs-24);
+  font-size: clamp(2.8rem, 5vw, var(--fs-56));
   font-style: italic;
+  line-height: 0.95;
 }
 
 .psm-partial-chip,
@@ -559,22 +573,30 @@
   color: var(--negative);
 }
 
+.psm-tag {
+  border: 1px solid var(--line-2);
+  background: var(--ink-2);
+  color: var(--fg-2);
+}
+
 .psm-subline {
   margin-top: var(--sp-2);
   color: var(--fg-3);
   font-size: var(--fs-14);
+  max-width: 52ch;
 }
 
 .psm-price-stack {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 4px;
+  gap: 5px;
+  padding-top: 2px;
 }
 
 .psm-price {
   color: var(--fg-1);
-  font-size: clamp(2.4rem, 4vw, var(--fs-48));
+  font-size: clamp(2.6rem, 4vw, var(--fs-48));
   line-height: 1;
 }
 
@@ -585,6 +607,8 @@
 .psm-quote-line {
   color: var(--fg-3);
   font-size: var(--fs-12);
+  text-transform: uppercase;
+  letter-spacing: var(--tr-wider);
 }
 
 .psm-primary-action,
@@ -601,6 +625,7 @@
   border: 1px solid var(--brass);
   background: var(--brass);
   color: var(--brass-ink);
+  margin-top: var(--sp-2);
 }
 
 .psm-primary-action.subtle {
@@ -618,6 +643,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
+  padding-top: 8px;
 }
 
 .psm-range-values {
@@ -629,6 +655,10 @@
   font-size: var(--fs-12);
 }
 
+.psm-range-spot {
+  color: var(--fg-1);
+}
+
 .psm-range-rail {
   position: relative;
   height: 4px;
@@ -644,6 +674,11 @@
   background: var(--brass);
 }
 
+.psm-range-caption {
+  color: var(--fg-4);
+  font-size: var(--fs-12);
+}
+
 .psm-kpis {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -769,14 +804,12 @@
   line-height: 1.5;
 }
 
-.psm-signal-grid,
 .psm-detail-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--sp-3);
 }
 
-.psm-signal,
 .psm-detail-item {
   border: 1px solid var(--line-1);
   border-radius: var(--r-2);
@@ -792,7 +825,6 @@
   text-transform: uppercase;
 }
 
-.psm-signal-value,
 .psm-detail-value,
 .psm-stat-value {
   display: block;
@@ -801,7 +833,6 @@
   font-size: var(--fs-18);
 }
 
-.psm-signal-copy,
 .psm-detail-copy {
   display: block;
   margin-top: 6px;
@@ -810,20 +841,50 @@
   line-height: 1.45;
 }
 
-.psm-signal.pos {
-  border-color: rgba(79, 140, 94, 0.35);
+.psm-signal-list {
+  display: flex;
+  flex-direction: column;
 }
 
-.psm-signal.warn {
-  border-color: rgba(196, 149, 69, 0.35);
+.psm-signal-row {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr) auto;
+  gap: var(--sp-3);
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line-1);
+}
+
+.psm-signal-row:last-child {
+  border-bottom: 0;
+}
+
+.psm-signal-row.pos .psm-signal-value {
+  color: var(--positive);
+}
+
+.psm-signal-row.warn .psm-signal-value {
+  color: var(--warning);
+}
+
+.psm-signal-row.neg .psm-signal-value {
+  color: var(--negative);
 }
 
-.psm-signal.neg {
-  border-color: rgba(181, 73, 75, 0.35);
+.psm-signal-row.neu .psm-signal-value {
+  color: var(--fg-3);
+}
+
+.psm-signal-value {
+  color: var(--fg-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-14);
+  font-variant-numeric: tabular-nums;
 }
 
-.psm-signal.neu {
-  border-color: var(--line-2);
+.psm-signal-copy {
+  color: var(--fg-2);
+  font-size: var(--fs-14);
 }
 
 .psm-profile-list,
@@ -841,7 +902,7 @@
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--sp-3);
   align-items: start;
-  padding-bottom: var(--sp-3);
+  padding-bottom: var(--sp-2);
   border-bottom: 1px solid var(--line-1);
 }
 
@@ -868,6 +929,11 @@
   word-break: break-word;
 }
 
+.psm-stat-value {
+  text-align: right;
+  white-space: nowrap;
+}
+
 .psm-source-value {
   font-family: var(--font-mono);
   font-size: var(--fs-12);
@@ -884,6 +950,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-2);
+  margin-bottom: var(--sp-2);
 }
 
 .psm-field-tag {
@@ -988,18 +1055,33 @@
   .psm-kpis,
   .psm-main-grid,
   .psm-detail-grid,
-  .psm-signal-grid,
   .psm-ticker-head {
     grid-template-columns: 1fr;
   }
 
   .psm-heading-row {
     align-items: start;
-    flex-direction: column;
-    gap: var(--sp-2);
   }
 
   .psm-price-stack {
     align-items: start;
   }
+
+  .psm-signal-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .psm-watch-select {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    row-gap: 4px;
+  }
+
+  .psm-watch-price {
+    grid-column: 2;
+  }
+
+  .psm-watch-change {
+    grid-column: 3;
+  }
 }