front chips logic

static/css/style.css

@@ -322,6 +322,10 @@ h2 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.four-col {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .stack-gap {
     display: grid;
     gap: 18px;
@@ -944,6 +948,12 @@ td a:hover {
     border: 1px solid rgba(96, 165, 250, 0.22);
 }
 
+.pill-front {
+    color: #fb923c;
+    background: rgba(251, 146, 60, 0.12);
+    border: 1px solid rgba(251, 146, 60, 0.22);
+}
+
 .pill-note {
     color: #cbd5e1;
     background: rgba(203, 213, 225, 0.08);
@@ -963,6 +973,12 @@ td a:hover {
     text-transform: uppercase;
 }
 
+.status-owes {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.12);
+    border: 1px solid rgba(239, 68, 68, 0.24);
+}
+
 .inline-action-form {
     margin: 0;
 }
@@ -1032,6 +1048,24 @@ td a:hover {
     border-color: rgba(255, 166, 77, 0.28);
 }
 
+.payout-summary-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 1100px) {
+    .payout-summary-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 640px) {
+    .payout-summary-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 @media (max-width: 980px) {
     .site-shell {
         width: min(100% - 24px, 100%);