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 {
+/* Track = the outer gray rail */
-    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; }
 .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 {
+/* Avg (orange) fills from the left — always the wider/background layer */
-    height: 100%;
+.aw-cmp-bar-fill-avg {
-    border-radius: 7px;
+    position: absolute;
-    width: 0;               /* starts at 0 — animated via JS */
+    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 */
+/* Your bar (green) sits on top, same height */
-.aw-cmp-bar-fill::after {
+.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); }
+/* Labels row below the bar */
-.aw-cmp-bar-fill-avg { background: linear-gradient(90deg, #fdba74, #f97316); }
+.aw-cmp-legend {
-.aw-cmp-bar-pct {
+    display: flex;
-    font-size: 0.8rem;
+    justify-content: space-between;
-    font-weight: 800;
+    font-size: 0.68rem;
-    width: 30px;
+    font-weight: 600;
-    text-align: right;
+    margin-bottom: 3px;
-    flex-shrink: 0;
 }
-.aw-cmp-bar-pct-you { color: #16a34a; }
+.aw-cmp-legend-you { color: #16a34a; }
-.aw-cmp-bar-pct-avg { color: #f97316; }
+.aw-cmp-legend-avg { color: #f97316; }
 /* Inline status below bars */
 .aw-status-inline {
     font-size: 0.75rem;

assets/js/app.js

@@ -2310,10 +2310,10 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
         statusCls = 'aw-status-ok';
     }
 
-    // Dual animated comparison bars — scaled so the larger value fills ~88% of its track
+    // Single stacked bar: avg always fills 88% of track width; you fills proportionally inside
     const scale   = Math.max(myRate, avgRate, 1);
-    const youPct  = +((myRate  / scale) * 88).toFixed(1);
+    const avgPct  = 88; // avg always = reference width
-    const avgPct  = +((avgRate / scale) * 88).toFixed(1);
+    const youPct  = +((myRate / scale) * 88).toFixed(1); // your bar, same scale
     const youLabel = t('antiwaste.you').split(' ')[0]; // "Tu" / "You" / "Du"
 
     // Trend cards
@@ -2379,19 +2379,13 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
         </div>
 
         <div class="aw-cmp-wrap">
-            <div class="aw-cmp-bar-row">
+            <div class="aw-cmp-bar-track">
-                <span class="aw-cmp-bar-label aw-cmp-bar-label-you">${youLabel}</span>
+                <div id="aw-bar-avg" class="aw-cmp-bar-fill-avg"></div>
-                <div class="aw-cmp-bar-track">
+                <div id="aw-bar-you" class="aw-cmp-bar-fill-you"></div>
-                    <div id="aw-bar-you" class="aw-cmp-bar-fill aw-cmp-bar-fill-you"></div>
-                </div>
-                <span class="aw-cmp-bar-pct aw-cmp-bar-pct-you">${myRate}%</span>
             </div>
-            <div class="aw-cmp-bar-row">
+            <div class="aw-cmp-legend">
-                <span class="aw-cmp-bar-label aw-cmp-bar-label-avg">${country}</span>
+                <span class="aw-cmp-legend-you">▮ ${youLabel} <strong>${myRate}%</strong></span>
-                <div class="aw-cmp-bar-track">
+                <span class="aw-cmp-legend-avg">${country} <strong>${avgRate}%</strong> ▮</span>
-                    <div id="aw-bar-avg" class="aw-cmp-bar-fill aw-cmp-bar-fill-avg"></div>
-                </div>
-                <span class="aw-cmp-bar-pct aw-cmp-bar-pct-avg">${avgRate}%</span>
             </div>
             <p class="aw-status-inline ${statusCls}">${statusMsg}</p>
         </div>