From d838c94df46b115eb1ec23fd8fe2f4d16f7f9e60 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Fri, 29 May 2026 21:31:53 +0300
Subject: [PATCH] fix(bg): visible button-groups and tracks on dark backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pill containers (.p-tabs, .shop-filters) used a 6% black fill that
disappeared on the dark veil, so the rounded button group lost its
outline and the inactive tabs looked like floating text. Same for the
xp / progress tracks (.ach-xp-progress, .ep-bar, .po-bar) that used
7% black.

Dark-tone overrides:
  • Containers get a 6% white wash + 10% white border so the pill
    shape stays readable
  • Inactive p-tab gets the same color/hover treatment that .shop-filter
    already had (was an oversight in the previous fix)
  • Active pills gain a darker shadow halo so they don't look detached
  • Progress tracks switch to a 10% white track instead of 7% black

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/css/ls.css | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/css/ls.css b/frontend/css/ls.css
index 377da8e..d27cb0b 100644
--- a/frontend/css/ls.css
+++ b/frontend/css/ls.css
@@ -1263,13 +1263,37 @@ body[data-bg-tone="dark"] .p-section > h2,
 body[data-bg-tone="dark"] .p-section > h3 {
   color: #f3f4f6;
 }
-body[data-bg-tone="dark"] .shop-filter:not(.active) {
+body[data-bg-tone="dark"] .shop-filter:not(.active),
+body[data-bg-tone="dark"] .p-tab:not(.active) {
   color: rgba(243, 244, 246, 0.78);
 }
-body[data-bg-tone="dark"] .shop-filter:not(.active):hover {
+body[data-bg-tone="dark"] .shop-filter:not(.active):hover,
+body[data-bg-tone="dark"] .p-tab:not(.active):hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.08);
 }
+/* Container pills (`.p-tabs`, `.shop-filters`) used a 6% dark fill that
+   vanishes on the dark veil — restore the rounded outline with a
+   white-tinted wash + subtle border so the button group still reads
+   as a contained pill. */
+body[data-bg-tone="dark"] .p-tabs,
+body[data-bg-tone="dark"] .shop-filters {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+}
+/* Active tab/filter — keep the white pill but add a contrast halo so
+   it doesn't look like a separate floating chip. */
+body[data-bg-tone="dark"] .p-tab.active,
+body[data-bg-tone="dark"] .shop-filter.active {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
+}
+/* Thin progress bars (xp, daily-goal) used a 7% dark fill that's
+   invisible on dark — switch to a faint light track. */
+body[data-bg-tone="dark"] .ach-xp-progress,
+body[data-bg-tone="dark"] .ep-bar,
+body[data-bg-tone="dark"] .po-bar {
+  background: rgba(255, 255, 255, 0.10);
+}
 body[data-bg-tone="dark"] .ach-group-head {
   border-bottom-color: rgba(255, 255, 255, 0.15);
 }