flatter html

server/static/components.css

@@ -214,13 +214,7 @@
   font-size: 0.875rem;
 }
 
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-sm);
-}
-
-.metrics-grid > div {
+.metric {
   background: var(--surface-white);
   border: 1px solid var(--outline-dim);
   border-radius: var(--radius-md);
@@ -230,7 +224,7 @@
   gap: var(--space-xs);
 }
 
-.metrics-grid .label {
+.metric .label {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--on-surface-dim);
@@ -240,17 +234,17 @@
   gap: var(--space-xs);
 }
 
-.metrics-grid .label .material-symbols-outlined {
+.metric .label .material-symbols-outlined {
   font-size: 1rem;
 }
 
-.metrics-grid .value {
+.metric .value {
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 1.2;
 }
 
-.metrics-grid .change {
+.metric .change {
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -657,10 +651,6 @@ textarea + label {
   flex-direction: column;
 }
 
-.col-span-2 {
-  grid-column: span 2;
-}
-
 .horizontal-group {
   display: flex;
   gap: var(--space-sm);
@@ -729,27 +719,6 @@ textarea + label {
   color: var(--success-text);
 }
 
-.breakdown-list {
-  list-style: none;
-}
-
-.breakdown-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.375rem var(--space-md);
-  margin: 0 calc(-1 * var(--space-md));
-  border-bottom: 1px solid var(--outline-dim);
-}
-
-.breakdown-amount {
-  font-weight: 600;
-}
-
-.breakdown-empty {
-  color: var(--on-surface-dim);
-  font-size: 0.875rem;
-}
-
 .icon {
   width: 2rem;
   height: 2rem;
@@ -770,7 +739,6 @@ textarea + label {
 .text-muted { color: var(--on-surface-dim); font-weight: 400; }
 .font-bold { font-weight: 700; }
 .font-medium { font-weight: 500; }
-.grow { flex: 1; }
 
 .empty-state {
   text-align: center;