/* ============================================================ RTL — Arabic mirror layer. EVERY rule in this file is scoped to [dir="rtl"], so the LTR build is untouched: remove the and nothing changes. Reference: Figma "Story — 1 New Investigation — Arabic RTL" 5740:26597 — nav on the RIGHT, history panel on the LEFT, header action cluster on the LEFT, breadcrumb on the RIGHT. Font: Noto Sans Arabic (DS var "Font Family/Arabic"). ============================================================ */ /* ---------- 1. TYPOGRAPHY ---------------------------------- base.css already switches , but every control that hard-codes var(--font-sans) has to follow, or Arabic falls back to Inter's (missing) Arabic coverage. */ [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] .input, [dir="rtl"] .composer textarea, [dir="rtl"] .menu-item, [dir="rtl"] .proj-item, [dir="rtl"] .proj-search input, [dir="rtl"] .search-bar input, [dir="rtl"] .nx-rename, [dir="rtl"] .mi, [dir="rtl"] .dlg-btn{font-family:var(--font-ar)} /* Fields resolve direction from what is actually in them: an English placeholder (or English typing) reads L-to-R, Arabic reads R-to-L. */ [dir="rtl"] input,[dir="rtl"] textarea, [dir="rtl"] input::placeholder,[dir="rtl"] textarea::placeholder{unicode-bidi:plaintext} /* Numerals, IDs, table/model names and monospace data stay Latin and read left-to-right, isolated so they can't reorder the Arabic around them (Figma keeps "12,450" / "8,466" LTR). */ [dir="rtl"] .mono, [dir="rtl"] .num, [dir="rtl"] .doc-badge, [dir="rtl"] .drank__sc, [dir="rtl"] .p-table .mono{direction:ltr;unicode-bidi:isolate} /* Mixed Arabic/English screens. Bidi handling is done at render time in i18n.js (applyI18n), because only the runtime knows whether a given string ended up Arabic or still English: · Arabic text -> untouched, flows RTL with everything else. · short English labels -> unicode-bidi:isolate, so they read L-to-R internally but still sit at the RTL start edge, keeping the grid rhythm intact. · long English prose -> unicode-bidi:plaintext, so a paragraph gets its natural left-aligned ragged-right setting instead of an unreadable ragged-left block. Doing it in CSS would need a class list that can't tell those apart, and would silently scramble any string added later. */ /* Arabic needs a little more leading than Inter at display sizes (DS ar/text-4xl = 36/46 vs text-4xl 36/40). Only the tight headings are touched — body sizes already clear the descenders. */ [dir="rtl"] .ans__h{line-height:48px} [dir="rtl"] .hero-text h1{line-height:50px} [dir="rtl"] .search-hd h1,[dir="rtl"] .page-hd h1{line-height:42px} [dir="rtl"] .kpi-card .kpi-v,[dir="rtl"] .cwd-stat__v, [dir="rtl"] .dkpi__v,[dir="rtl"] .dstat__v{line-height:1.3} /* Charts (Recharts + the hand-built inline SVGs) compute their own pixel coordinates and lean on text-anchor; inheriting direction:rtl flips the anchor and throws the axis labels across the plot. The chart stays LTR — the widget card chrome around it still mirrors. */ [dir="rtl"] svg{direction:ltr} [dir="rtl"] .recharts-wrapper, [dir="rtl"] .recharts-responsive-container{direction:ltr} /* the HTML x-axis label rows sit UNDER an LTR svg plot — they must not mirror away from the series they label (Jan…Jun stays left-to-right under the line) */ [dir="rtl"] .darea__x,[dir="rtl"] .tchart__x{direction:ltr} /* zoe-widgets ships its verify+menu cluster with a 7px optical nudge as an inline style; it has to mirror with the rest of the card header. */ [dir="rtl"] [style*="translateX(7px)"]{transform:translateX(-7px)!important} /* Icons with no mirror twin in the lucide set (see ICON_FLIP in icons.js) */ [dir="rtl"] svg.rtl-flip{transform:scaleX(-1)} /* CSS-generated copy the DOM translation pass can't reach */ [dir="rtl"] .rec-transcript:empty::before{content:"جارٍ الاستماع…"} /* ---------- 2. SHELL: NAV MOVES TO THE RIGHT ---------------- */ [dir="rtl"] .nav{left:auto;right:24px} /* collapsed-rail tooltip slides in from the LEFT of the rail */ [dir="rtl"] .tip{left:auto;right:calc(100% + 16px);transform:translate(8px,-50%)} [dir="rtl"] .nav:not(.expanded) .rail-item:hover .tip, [dir="rtl"] .nav:not(.expanded) .rail-avatar:hover .tip{transform:translate(0,-50%)} /* the caret is a rotated square; show the two edges that face the rail */ [dir="rtl"] .tip::before{left:auto;right:-4px; border-left:0;border-bottom:0; border-right:1px solid var(--panel-stroke);border-top:1px solid var(--panel-stroke)} /* flyout submenu opens to the LEFT (the hover bridge flips with it) */ [dir="rtl"] .flyout{left:auto;right:100%;padding-left:0;padding-right:14px;transform:translateX(6px)} [dir="rtl"] .nav:not(.expanded) .rail-item.has-flyout:hover .flyout, [dir="rtl"] .nav:not(.expanded) .rail-item.has-flyout:has(.pop.is-open) .flyout{transform:translateX(0)} /* accordion chevron folds toward the other side */ [dir="rtl"] .nx-group.collapsed>.nx-item .chev{transform:rotate(90deg)} /* ---------- 3. STAGE + HEADER ------------------------------ render() writes the inline column offsets swapped in RTL; these are the resting values it starts from. */ [dir="rtl"] .stage{left:24px;right:120px} [dir="rtl"] .topbar{padding:0 8px 0 4px} [dir="rtl"] .hactions{right:auto;left:24px} /* the docked composer's 16px optical nudge mirrors with it */ [dir="rtl"] .dock .composer{transform:translateX(calc(-50% - 16px))} /* ---------- 4. HISTORY PANEL MOVES TO THE LEFT -------------- */ [dir="rtl"] .history{right:auto;left:24px} [dir="rtl"] .history.collapsed{right:auto;left:0; border-radius:0 16px 16px 0; border-right:1px solid var(--panel-stroke);border-left:0; box-shadow:4px 0 8px rgba(0,0,0,.35)} [dir="rtl"][data-theme="light"] .history.collapsed{box-shadow:4px 0 8px rgba(0,0,0,.10)} /* ---------- 5. MENUS / POPOVERS ---------------------------- */ [dir="rtl"] .submenu{transform:translateX(6px)} [dir="rtl"] .menu-item.has-sub:hover .submenu, [dir="rtl"] .menu-item.has-sub.sub-open .submenu{transform:none} /* ---------- 6. BUILD DASHBOARD ----------------------------- The workbox columns mirror for free (flex row + dir), so only the absolutely-positioned affordances need flipping. The drag maths is mirrored in app.js (see rtlSign). */ [dir="rtl"] .gripknob{left:auto;right:10px} [dir="rtl"] .rh-nw,[dir="rtl"] .rh-sw,[dir="rtl"] .rh-w{left:auto;right:-5px} [dir="rtl"] .rh-ne,[dir="rtl"] .rh-se,[dir="rtl"] .rh-e{right:auto;left:-5px} [dir="rtl"] .splitter{cursor:col-resize} /* ---------- 7. TABLET DRAWERS ------------------------------ Same band as RESPONSIVE.md — nav slides in from the right, history from the left, mirroring the desktop sides. */ @media (max-width:1024px){ html[dir="rtl"]:not([data-module="dashboard"]) .stage{left:16px;right:16px} html[dir="rtl"]:not([data-module="dashboard"]) .nav{ transform:translateX(calc(100% + 40px))} html[dir="rtl"]:not([data-module="dashboard"]) .screen.nav-open .nav{transform:none} html[dir="rtl"]:not([data-module="dashboard"]) .history{ right:auto;left:16px; transform:translateX(calc(-100% - 48px))} html[dir="rtl"]:not([data-module="dashboard"]) .screen.hist-open .history{transform:none} }