/* ============================================================ RTL LAYER — the Arabic institutional edition. WHY A LAYER AND NOT A MIRRORED STYLESHEET. Blind mirroring is wrong: a right-to-left document still runs numbers, dates, currency, URLs, ISO codes, evidence identifiers, code blocks and Latin product names LEFT to right. A stylesheet that flips everything produces an Arabic page that no Arabic reader can use. This file therefore does two things only — 1. flips the directional properties that are genuinely about reading order (text alignment, gutters, list markers, borders that mark a side); 2. explicitly PROTECTS the things that must never flip. HOW IT ATTACHES. i18n.js sets dir="rtl" and data-lang-dir="rtl" on , so no page carries its own direction logic and a page that never loads this file still gets correct native bidi from the dir attribute alone. Every rule below is scoped to [dir="rtl"], so the file is inert for the other four editions and cannot regress them. The long-term fix is logical properties (margin-inline-start rather than margin-left) in the source stylesheets. That is a sweep across 47 CSS files and is deliberately not in this sprint; this layer makes Arabic correct now without pretending that sweep has happened. ============================================================ */ /* ---- 1. READING ORDER ---- */ [dir="rtl"] body { text-align: right; } /* Text alignment follows reading order, except where a utility has explicitly asked for a side — an author who wrote .text-left meant left. */ [dir="rtl"] .lead, [dir="rtl"] .section-header, [dir="rtl"] .pub-hero, [dir="rtl"] .bundle-card, [dir="rtl"] .card, [dir="rtl"] .panel { text-align: right; } /* Lists: the marker belongs on the reading-start side. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; } /* Blockquote and any accent rail marks the reading-start edge. */ [dir="rtl"] blockquote { border-right: 3px solid var(--accent, currentColor); border-left: none; padding-right: 1rem; padding-left: 0; } /* Navigation and toolbars are flex rows; reversing the flow is the whole fix. */ [dir="rtl"] .pub-nav-row1, [dir="rtl"] .pub-nav-links, [dir="rtl"] .pub-nav-row1-right, [dir="rtl"] .hero-actions, [dir="rtl"] .toolbar, [dir="rtl"] .btn-group { flex-direction: row-reverse; } /* Tables read right-to-left: header and cell alignment follow. */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* Form controls and their labels. */ [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] input[type="checkbox"], [dir="rtl"] input[type="radio"] { margin-left: .5rem; margin-right: 0; } /* Off-canvas surfaces open from the reading-start edge. */ [dir="rtl"] .drawer, [dir="rtl"] .side-panel, [dir="rtl"] .sidebar { right: 0; left: auto; } /* A directional glyph in a button or link must point the way the reader is going. The arrow characters themselves are authored per edition in the catalogue (← in Arabic where → is used in English); this only handles icons positioned by CSS. */ [dir="rtl"] .icon-end { transform: scaleX(-1); } /* ---- 2. WHAT MUST NEVER FLIP ---- */ /* Numbers, dates, currency, percentages, phone numbers, ISO codes, evidence and report identifiers, URLs, emails and code all stay left-to-right inside an Arabic sentence. This is not a style preference — reversing a dataset version or an evidence id changes what it says. */ [dir="rtl"] .mono, [dir="rtl"] .tabular, [dir="rtl"] .metric-value, [dir="rtl"] .kpi-value, [dir="rtl"] .stat-number, [dir="rtl"] .evidence-id, [dir="rtl"] .report-id, [dir="rtl"] .dataset-version, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] samp, [dir="rtl"] kbd, [dir="rtl"] time, [dir="rtl"] [data-ltr], [dir="rtl"] a[href^="http"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; text-align: left; } /* A chart is a data surface, not prose. Its axes carry the semantics of the data — a bar chart whose value axis is mirrored reports the opposite of what it measured, which is a correctness failure and not a layout one. MEASURED DEFECT, found by the RTL viewport pass: scoping this to svg[data-chart] was too narrow. Every inline SVG in this site — the architecture diagrams, the trust and universe graphics — positions its by authored x/y coordinates, and inheriting dir="rtl" from moves the text anchor and pushes labels outside the viewBox. security.html clipped eleven SVG labels in Arabic and zero in English for exactly this reason. An SVG's coordinate system is authored, not reading-order, so ALL inline SVG keeps LTR. An SVG that genuinely needs RTL text opts in with dir="rtl" on the element itself. */ [dir="rtl"] .chart, [dir="rtl"] .chart-canvas, [dir="rtl"] .sparkline, [dir="rtl"] .visualization, [dir="rtl"] svg, [dir="rtl"] svg text, [dir="rtl"] svg tspan { direction: ltr; text-align: left; } [dir="rtl"] svg[dir="rtl"], [dir="rtl"] svg[dir="rtl"] text { direction: rtl; } /* Charts still need their captions and legends to read right-to-left, because those are prose about the data rather than the data itself. */ [dir="rtl"] .chart-caption, [dir="rtl"] .chart-legend, [dir="rtl"] figcaption { direction: rtl; text-align: right; } /* The product name is a Latin proper noun in every edition. */ [dir="rtl"] .pub-nav-logo, [dir="rtl"] .brand-name { direction: ltr; unicode-bidi: isolate; } /* Progress fills grow from the reading-start edge, which IS directional. */ [dir="rtl"] .progress-bar > .progress-fill { direction: rtl; } /* ---- 3. MIXED-DIRECTION TEXT ---- */ /* An Arabic sentence containing a Latin product name, an English acronym or a figure needs isolation, or the bidi algorithm reorders the surrounding punctuation. `isolate` is what stops "VoiceInsights (2026)" from rendering with its bracket on the wrong side. */ [dir="rtl"] bdi, [dir="rtl"] .bidi-isolate { unicode-bidi: isolate; } /* ---- 4. TYPOGRAPHY ---- */ /* Arabic script needs more line height than Latin at the same size: the letterforms carry marks above and below the baseline that collide at Latin leading. */ [dir="rtl"] body { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.4; letter-spacing: 0; } /* Letter-spacing breaks Arabic: the script is cursive and spacing the letters severs the joins, producing text that is technically present and unreadable. */ [dir="rtl"] * { letter-spacing: normal !important; } /* Arabic has no capital letters, so an uppercase transform is a no-op at best and, on a mixed string, shouts the Latin half. */ [dir="rtl"] .eyebrow, [dir="rtl"] .kicker, [dir="rtl"] .label { text-transform: none; }