Waste section: single stacked comparison bar instead of two rows

assets/css/style.css

@@ -440,42 +440,41 @@ body {
 .aw-grade-c  { background: #fb923c; }
 .aw-grade-d  { background: #dc2626; }
 
-/* ── Dual animated comparison bars ──────────────────────── */
+/* ── Stacked single comparison bar ──────────────────────── */
 .aw-cmp-wrap { margin-bottom: 10px; }
-.aw-cmp-bar-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 6px;
-}
-.aw-cmp-bar-label {
-    font-size: 0.68rem;
-    font-weight: 700;
-    width: 42px;
-    flex-shrink: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-.aw-cmp-bar-label-you { color: #16a34a; }
-.aw-cmp-bar-label-avg { color: #f97316; }
+/* Track = the outer gray rail */
 .aw-cmp-bar-track {
-    flex: 1;
-    height: 14px;
-    background: rgba(0,0,0,.06);
-    border-radius: 7px;
-    overflow: hidden;
     position: relative;
+    height: 18px;
+    background: rgba(0,0,0,.07);
+    border-radius: 9px;
+    overflow: hidden;   /* clip both fills */
+    margin-bottom: 5px;
 }
-.aw-cmp-bar-fill {
-    height: 100%;
-    border-radius: 7px;
-    width: 0;               /* starts at 0 — animated via JS */
+/* Avg (orange) fills from the left — always the wider/background layer */
+.aw-cmp-bar-fill-avg {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    border-radius: 9px;
+    width: 0;
+    background: linear-gradient(90deg, #fdba74, #f97316);
     transition: width 1.1s cubic-bezier(.4,0,.2,1);
-    position: relative;
     overflow: hidden;
 }
-/* Shimmer overlay */
-.aw-cmp-bar-fill::after {
+/* Your bar (green) sits on top, same height */
+.aw-cmp-bar-fill-you {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    border-radius: 9px;
+    width: 0;
+    background: linear-gradient(90deg, #4ade80, #16a34a);
+    transition: width 1.1s cubic-bezier(.4,0,.2,1) 0.15s;
+    z-index: 1;
+    overflow: hidden;
+}
+/* Shimmer on both fills */
+.aw-cmp-bar-fill-avg::after,
+.aw-cmp-bar-fill-you::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -484,22 +483,22 @@ body {
     opacity: 0;
     transition: opacity 0.5s 1s;
 }
-.aw-cmp-bar-fill.loaded::after { opacity: 1; }
+.aw-cmp-bar-fill-avg.loaded::after,
+.aw-cmp-bar-fill-you.loaded::after { opacity: 1; }
 @keyframes aw-shimmer {
     0%   { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    100% { transform: translateX(200%); }
 }
-.aw-cmp-bar-fill-you { background: linear-gradient(90deg, #4ade80, #16a34a); }
-.aw-cmp-bar-fill-avg { background: linear-gradient(90deg, #fdba74, #f97316); }
-.aw-cmp-bar-pct {
-    font-size: 0.8rem;
-    font-weight: 800;
-    width: 30px;
-    text-align: right;
-    flex-shrink: 0;
+/* Labels row below the bar */
+.aw-cmp-legend {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.68rem;
+    font-weight: 600;
+    margin-bottom: 3px;
 }
-.aw-cmp-bar-pct-you { color: #16a34a; }
-.aw-cmp-bar-pct-avg { color: #f97316; }
+.aw-cmp-legend-you { color: #16a34a; }
+.aw-cmp-legend-avg { color: #f97316; }
 /* Inline status below bars */
 .aw-status-inline {
     font-size: 0.75rem;