/* Anchors — RTL overrides, loaded ONLY on /ar/ pages, after site.css. site.css itself is untouched: every non-Arabic page ships byte-identical CSS to before this file existed. Two things are handled here: 1. An Arabic-capable font. Unbounded/Manrope/JetBrains Mono (site.css's --display/--body/--mono) have no Arabic glyph coverage, so Arabic text set in them falls through to the browser's default fallback font, breaking the visual system. Cairo is added ahead of them as the Arabic-region equivalent of the display face, and covers body/mono contexts too — this site's mono usage (labels, stat callouts) is short uppercase strings, not code, so one font family covers all three roles. 2. A handful of structural mirrors. Most of the layout does NOT need touching: flexbox `row` (nav, .cta-row, .toggle-row, .check-list, .result-row, .jump-nav) is direction-aware per spec and mirrors itself automatically once is set. `.act.right`'s flush-right block is a deliberate design accent tied to a physical side, not to reading direction, so it's correctly left alone too. What's listed below is only what direction-flips wrong on its own: a border/padding accent that should sit on the reading-start side, a toggle-switch knob that slides the wrong way, and form text alignment. Deliberately NOT mirrored: #gauge and #depth (decorative scroll-progress chrome, not reading-order content) and the marquee scroll direction (a looping ticker, direction carries no meaning) — flagged here so a future pass doesn't "fix" them by accident. */ :root{ --display:"Cairo","Unbounded","Arial Black",sans-serif; --body:"Cairo","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"Cairo","JetBrains Mono","Courier New",monospace; } /* .detail's accent border reads as a "spine" — it belongs on the side the eye hits first, which is the right edge in RTL. */ .detail{ border-left:none; border-right:3px solid var(--accent); padding-left:0; padding-right:1.4rem; } /* Package Configurator toggle knob: starts on the reading-start side (right in RTL) and slides toward reading-end (left) when switched on — the mirror image of the LTR version, not a copy of its physical offsets. */ .toggle::after{ left:auto; right:2px; } .toggle-row[aria-pressed="true"] .toggle::after{ transform:translateX(-1.25rem); } /* Form inputs: right-align typed text instead of inheriting the browser's default (which can stay left-aligned for a `type=text`/`email`/`number` input even under dir=rtl in some engines). */ .field input, .field textarea, .field select{ text-align:right; }