/* ==========================================================================
   rtl.css — Arabic edition only. Loaded after styles.css on /ar.

   Everything here is scoped to [dir="rtl"], so this file cannot reach the
   English page even if it is ever linked there by accident.

   The rule for what belongs in this file: LAYOUT mirrors, ARTWORK does not.
   Flexbox, grid and logical properties already flip themselves off the
   document's dir — the overrides below are the physical properties that do
   not, plus the two places where flipping would be wrong.
   ========================================================================== */

/* --- the Arabic typeface -------------------------------------------------
   The page loads IBM Plex Sans Arabic and then never asks for it: --font-display
   and --font-body are both Inter, which carries no Arabic at all, so 279 of the
   300 Arabic elements were falling through to whatever ui-sans-serif resolves to
   on the reader's machine — Segoe UI on Windows, Noto on Android, something else
   again on a Mac. The whole edition was set in an unspecified font while the
   right one sat downloaded and unused.

   Redefining the tokens rather than setting font-family on body, because most
   rules name the token explicitly and would win over a body rule. Inter stays
   FIRST: per-character fallback means Latin runs (Acumen, EGX, PDF, the platform
   names) keep the brand face and only the Arabic falls through to Plex. */
[dir="rtl"] {
  --font-display: 'Inter', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'IBM Plex Sans Arabic', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- tracking ------------------------------------------------------------
   Arabic is cursive: its letters join. Tracking prises those joins apart, so
   the brand's tracked uppercase labels (.18em on eyebrows, .16em on CTAs) read
   as broken words rather than as a device, and the display faces' negative
   tracking crowds the joins instead. 175 elements carried it.

   The device does not survive translation, so it is dropped here rather than
   approximated; weight, size and gold still carry those labels. text-transform
   stays where it is — it is simply inert on a script with no case.

   !important because half of them are set inline by the canvas export, and an
   inline declaration outranks any selector this file could write. */
[dir="rtl"] body,
[dir="rtl"] body * { letter-spacing: normal !important; }
/* except the switch, which is the one deliberately Latin word on the page */
[dir="rtl"] .lang-switch { letter-spacing: .06em !important; }

/* --- heading leading -----------------------------------------------------
   The display sizes are set at 1.05 — right for tight Latin caps, too tight for
   Arabic, which runs taller both ways at once: alif and lam reach up, jim and
   ain hang well below the baseline, and vowel marks sit above that again
   (تُروى, تُعلِّم each stack a damma or a shadda). Seven headings wrap to two
   lines, where 1.05 puts one line's marks into the other's descenders.

   1.22 is the smallest value that clears them here while still reading as
   display type. It also lifts single-line headings, which is the cost of
   setting leading per script rather than per string — the rhythm stays even.
   !important because the drawer's headings carry line-height inline. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .h1, [dir="rtl"] .h2 { line-height: 1.22 !important; }

/* --- the two contact doors -----------------------------------------------
   text-align:left is inline on the container, so it needs the weight. */
[dir="rtl"] .contact-doors { text-align: right !important; }

/* --- the Acumen gold flag ------------------------------------------------
   clip-path is physical geometry, so the slant survives the flip pointing
   the wrong way. Mirror of polygon(0 0,100% 0,82% 100%,0 100%). */
[dir="rtl"] .eyebrow::before,
[dir="rtl"] .ticks li::before {
  clip-path: polygon(100% 0, 0 0, 18% 100%, 100% 100%);
}

/* --- tick lists ---------------------------------------------------------- */
[dir="rtl"] .ticks li {
  padding-left: 0;
  padding-right: var(--s6);
}
[dir="rtl"] .ticks li::before {
  left: auto;
  right: 0;
}

/* --- single-edge rules ---------------------------------------------------
   Each of these marks one side of a box, so each has to move to the other. */
[dir="rtl"] .lens-grid {
  border-left: 0;
  border-right: 1px solid var(--gold-300);
}
[dir="rtl"] .lens {
  border-right: 0;
  border-left: 1px solid var(--gold-300);
}
[dir="rtl"] .rate-ask {
  border-left: 0;
  border-right: 3px solid var(--gold);
}
[dir="rtl"] .tape-item {
  border-right: 0;
  border-left: 1px solid rgba(216, 176, 97, .2);
}

/* --- arrows --------------------------------------------------------------
   .arw is a literal → glyph. Mirroring the box beats swapping the character,
   because the hover nudge has to reverse with it. */
[dir="rtl"] .arw {
  display: inline-block;
  transform: scaleX(-1);
}
[dir="rtl"] .cta:hover .arw {
  transform: scaleX(-1) translateX(3px);
}

/* --- the ticker ----------------------------------------------------------
   ARTWORK, not layout. The marquee is a fixed-width track translated to
   -33.3333% across three repeats; reversing the flex axis would break that
   arithmetic and reorder the figures against their labels. The track keeps
   its LTR geometry and each item is handed back its own direction, which is
   all the Arabic inside it needs to shape and order correctly.

   The reset has to sit on .tape, not on .tape-track: the track is wider than
   the viewport, so under an RTL parent it is laid out from the right and
   starts at left:-2128px — already showing its tail, with the -33.3333%
   animation carrying it further out of view instead of through it. */
[dir="rtl"] .tape      { direction: ltr; }
[dir="rtl"] .tape-item { direction: rtl; }

/* Four passes here, not three (build/arabic.py appends the fourth), so the
   end travel is -25% rather than -33.3333%. Duration drops with it to hold
   the English speed: one Arabic pass is 1129px, and 1129/26s = 43px/s. */
@keyframes slide-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
[dir="rtl"] .tape-track {
  animation-name: slide-rtl;
  animation-duration: 26s;
}

/* --- audience funnel ----------------------------------------------------- */
[dir="rtl"] #audience .funnel > div > div:last-child {
  text-align: right !important;
}

/* --- partner drawer ------------------------------------------------------
   justify-content:flex-end is logical, so the panel already moves to the left
   edge on its own. The slide-in does not follow: it comes from +40px, i.e.
   from the right, which is now the wrong side.

   Only the keyframes live here. The dialog names its animation in an inline
   style attribute, which no rule in this file can outrank, so build/arabic.py
   rewrites that attribute to point at these — same reason it flips the panel's
   box-shadow. */
@keyframes partner-in-rtl {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}