Improve toggle switch behavior in right-to-left languages

Add custom RTL and LTR variants to Tailwind CSS configuration to correctly position toggle switch indicators in Arabic and other right-to-left languages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 84451adc-9c86-40d5-80ba-846e7ea2a813
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/97ZFaoX
Replit-Helium-Checkpoint-Created: true

artifacts/tx-os/src/index.css

@@ -4,6 +4,19 @@
 @plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
+/*
+ * Tailwind v4 doesn't ship `rtl:` / `ltr:` as built-in variants. The
+ * shared <Switch> (and a couple other components) rely on them to
+ * mirror the thumb translation in the Arabic UI — without these
+ * declarations, classes like `rtl:-translate-x-4` are silently
+ * dropped at build time and every toggle in the app shows the
+ * checked-state thumb on the LTR side regardless of document
+ * direction. The selectors match both the element that carries
+ * `dir="rtl"` itself and any descendant, which mirrors the
+ * tailwindcss-rtl plugin's behaviour.
+ */
+@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *));
+@custom-variant ltr (&:where([dir="ltr"], [dir="ltr"] *));
 
 @theme inline {
   --color-background: hsl(var(--background));