From 04d1a0d70df511472878f2391b09f56816dc58f1 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 12 Apr 2026 21:12:05 -0600
Subject: [PATCH] style: visual spacing polish on tokens dashboard

Improve density and scannability of the tokens page CSS: widen dashboard padding, flex-center loading state, add breathing room to summary card and table cells, separate breakdown sections with more margin and heading underlines, bump sort-indicator opacity, and normalize row borders to #e5e7eb. Responsive breakpoints updated for coherent padding degradation.
---
 apps/tokens/workspace.html | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/tokens/workspace.html b/apps/tokens/workspace.html
index f504df9aa..442882ddf 100644
--- a/apps/tokens/workspace.html
+++ b/apps/tokens/workspace.html
@@ -163,12 +163,14 @@
 .tokens-dashboard {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 1em 0;
+  padding: 1em 1.5em;
 }
 
 .loading-state {
-  text-align: center;
-  padding: 4em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
   color: #666;
 }
 
@@ -182,7 +184,8 @@
   color: #333;
   border: 1px solid var(--facet-border, #e5e0db);
   border-radius: 8px;
-  padding: 1.2em 2em;
+  padding: 1.5em 2em;
+  margin-top: 0.5em;
   margin-bottom: 2em;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
@@ -195,7 +198,7 @@
 .summary-table th,
 .summary-table td {
   text-align: center;
-  padding: 0.4em 1em;
+  padding: 0.6em 1em;
 }
 
 .summary-table th {
@@ -229,13 +232,20 @@
 }
 
 .breakdown-section {
+  margin-top: 2.5em;
   margin-bottom: 2em;
 }
 
+.breakdown-section:first-of-type {
+  margin-top: 1em;
+}
+
 .breakdown-section h2 {
   font-size: 1.1em;
   font-weight: 600;
-  margin-bottom: 1em;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.5em;
+  margin-bottom: 0.75em;
   color: #374151;
 }
 
@@ -315,7 +325,7 @@
 
 .breakdown-table th.sortable[aria-sort="ascending"]::after { content: " ▲"; }
 .breakdown-table th.sortable[aria-sort="descending"]::after { content: " ▼"; }
-.breakdown-table th.sortable[aria-sort="none"]::after { content: " ⇅"; opacity: 0.3; }
+.breakdown-table th.sortable[aria-sort="none"]::after { content: " ⇅"; opacity: 0.45; }
 
 .breakdown-table th.num,
 .breakdown-table td.num {
@@ -323,7 +333,7 @@
 }
 
 .breakdown-table tbody tr {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #e5e7eb;
   transition: background 0.1s ease;
 }
 
@@ -451,7 +461,7 @@
 
 @media (max-width: 768px) {
   .tokens-dashboard {
-    padding: 0.5em 0;
+    padding: 0.5em 1em;
   }
   .summary-card {
     padding: 1em 1.2em;
@@ -496,6 +506,7 @@
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     margin: 0 -0.5em;
+    margin-top: 1.5em;
     padding: 0 0.5em;
   }
 }
-- 
2.51.2