/* Right-to-left overrides. * * **Every rule here is scoped to `[dir="rtl"]`, and must stay that way.** * * This file is linked unconditionally from the root layout, for every page in * every language. Until 2026-08-04 its rules were unscoped, so `body { * direction: rtl }` applied to French and English pages too — and kept applying * until LanguageInitializer removed the after hydration, which on the * feed pages took five to eight seconds. Visitors got seconds of a * right-to-left French site, and setting dir="ltr" on could not override * it, because this rule targeted `body` directly. * * Scoped, the sheet is inert wherever `dir` is not `rtl`, so it can stay loaded * and nothing has to add or remove it at runtime. */ [dir="rtl"] body { direction: rtl; text-align: right; } [dir="rtl"] pre { text-align: start !important; } [dir="rtl"] code { direction: ltr; } /* Flip Lucide React icons horizontally in RTL mode except those with .rtl-no-flip class */ [dir="rtl"] [data-lucide], [dir="rtl"] .svg-icon { transform: scaleX(-1); } /* Flip SVG elements that don't already have RTL-specific classes */ [dir="rtl"] svg.rtl-flip { transform: scaleX(-1); } /* Exception for SVGs that explicitly should not be flipped */ [dir="rtl"] svg.rtl-no-flip, [dir="rtl"] [data-lucide].rtl-no-flip { transform: none !important; } /* Make sure SVGs that already have RTL classes (like rtl:rotate-180) aren't affected */ [dir="rtl"] [class*="rtl\\:"] svg { transform: none; }