The balance grows a card carousel: Spending and Savings become side-by-side faces with the neighbor peeking at the card's edge, dragged and snapped by native scroll-snap — settling on a face IS the account switch, programmatic switches glide the carousel to match, and the old swipe-to-flip gesture yields to the carousel's own drag (it still serves single-face wallets)

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr

1 files changed, 10 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index 1ed2195..933fa69 100644
--- a/src/style.css
+++ b/src/style.css
@@ -441,6 +441,16 @@ hr.divider { margin: 16px 0; }
 
 /* Inline move-money panel on the balance card. */
 .balance-move { gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
+/* balance carousel: the other face peeks at the card's edge and drags into
+   place — native scroll-snap does the physics. Full-bleed inside the card
+   so the peeking neighbor touches the card wall. */
+.bal-carousel {
+  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
+  margin: -20px; padding: 20px; scrollbar-width: none; -ms-overflow-style: none;
+  touch-action: pan-x pan-y;
+}
+.bal-carousel::-webkit-scrollbar { display: none; }
+.bal-slide { flex: 0 0 calc(100% - 34px); scroll-snap-align: center; min-width: 0; }
 .balance-move .seg { display: flex; width: 100%; }
 .balance-move .seg button { flex: 1; }
 .send-suggest { max-height: 260px; overflow-y: auto; }