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.

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));