/* SafeToOpen — Arabic (RTL) layer. Loaded AFTER styles.v28.rtl.css on /ar/ pages.
   Keep this file tiny and generic so every translated page can reuse it unchanged. */

/* Arabic-capable typeface; its Latin glyphs keep brand tokens (SafeToOpen, URLs) consistent. */
[dir="rtl"]{
  --sans:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
[dir="rtl"] body{line-height:1.75;}

/* Latin tracking (negative letter-spacing) clips Arabic joins — reset it. */
[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .headline{letter-spacing:normal;}

/* Kickers/labels use the Latin mono var, which has no Arabic glyphs — front it with the Arabic face. */
[dir="rtl"] .kicker{font-family:'IBM Plex Sans Arabic',var(--mono);letter-spacing:.04em;}

/* The "what SafeToOpen sees" code illustration must stay left-to-right & monospaced. */
[dir="rtl"] .xreveal__code,
[dir="rtl"] .xreveal__codebody{direction:ltr;text-align:left;}
[dir="rtl"] .xreveal__codebody{font-family:var(--mono);}

/* Isolate any inline code / bare URLs so bidi doesn't reorder them inside Arabic sentences. */
[dir="rtl"] code,[dir="rtl"] pre,[dir="rtl"] .mono{direction:ltr;unicode-bidi:isolate;}

/* ── RTL fixes for JS-driven interactive demos ─────────────────────────────
   These widgets are choreographed left-to-right (slider math, node order,
   cursor paths). Keep them LTR on Arabic pages so behaviour matches the
   design; the Arabic text inside still renders correctly. */
[dir="rtl"] .xreveal{direction:ltr}
[dir="rtl"] .pjourney{direction:ltr}
[dir="rtl"] .ot-viewport,
[dir="rtl"] .ot-browser{direction:ltr}
[dir="rtl"] .ea__stage,
[dir="rtl"] .ea-stage,
[dir="rtl"] #eaStage{direction:ltr}
/* the simulated browser chrome / code panes stay LTR regardless */
[dir="rtl"] .bwin,[dir="rtl"] .esec-chrome,[dir="rtl"] .esec-link,[dir="rtl"] .ot-omni{direction:ltr}

/* xreveal slider — rtlcss flipped the handle to right:var(--x) while the code
   clip-path still clips from the LEFT, so the handle and the reveal boundary
   moved in opposite directions. Restore the LTR physical values so they track
   together and the JS drag math (clientX-based, left-anchored) lines up. */
[dir="rtl"] .xreveal__handle{left:var(--x);right:auto;transform:translateX(-1px)}
[dir="rtl"] .xreveal__grip{left:50%;right:auto;transform:translate(-50%,-50%)}
[dir="rtl"] .xreveal__codebody{margin-left:auto;margin-right:0}
[dir="rtl"] .xreveal__code .tr-line.ind{padding-left:14px;padding-right:0}
[dir="rtl"] .xreveal__code .tr-line.ind2{padding-left:28px;padding-right:0}
[dir="rtl"] .xreveal__code .tr-line.ind3{padding-left:42px;padding-right:0}
/* these are positioned by JS via inline `left`; rtlcss had flipped CSS to right:0 */
[dir="rtl"] .pj-mail{left:0;right:auto}
[dir="rtl"] .ea__cursor{left:0;right:auto}