/* ==========================================================================
   Right-to-left corrections.

   base.css uses logical properties throughout, so almost nothing needs a
   mirror. This file holds only the cases logical properties cannot reach:
   glyphs that point somewhere, and SVG, which has no logical coordinates.

   Loaded only when dir="rtl".
   ========================================================================== */

/* Arrows point the way the reader is going, wherever they sit. */
[dir="rtl"] .arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Charts.

   SVG has no logical properties, so a chart drawn left-to-right stays that
   way under dir="rtl". Mirroring the whole figure and then un-mirroring the
   text is what keeps the reading order right without reversing the numerals.

   Bars therefore grow from the inline start in both directions, and value
   labels stay legible rather than appearing back to front.
   -------------------------------------------------------------------------- */

[dir="rtl"] .viz--mirror { transform: scaleX(-1); }
[dir="rtl"] .viz--mirror text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* Numerals stay Western Arabic in charts and tables: the source figures are
   quoted in Western digits everywhere else, and mixing the two invites a
   misreading of a metric. This is deliberate, not an oversight. */
[dir="rtl"] :is(.viz, table, .metric) { font-variant-numeric: tabular-nums; }
[dir="rtl"] :is(.viz, table, .metric) [lang="en"] { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   Latin runs inside Arabic prose.

   System names (SAP, Maximo, Primavera) and document names stay in Latin
   script. Without isolation, a trailing full stop or comma jumps to the
   wrong end of the run.
   -------------------------------------------------------------------------- */

[dir="rtl"] .latin { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* --------------------------------------------------------------------------
   The data layer is English, and it is marked as English.

   pages/data/*.json is imported from the case-study library, which exists in
   English only: study descriptors, problem narratives, metric labels,
   service-line descriptions and readiness prompts have no Arabic source to
   translate from. That is a content gap and it is recorded as one -- but it
   is made worse, not better, by laying English paragraphs out right-to-left.

   So every element carrying data-layer text declares lang="en", which is
   true markup in either language: it tells a screen reader which voice to
   use, and here it also restores the reading direction and alignment. An
   Arabic reader gets English that reads as English rather than English
   scrambled by the bidirectional algorithm.
   -------------------------------------------------------------------------- */

[dir="rtl"] [lang="en"] {
  direction: ltr;
  text-align: start;
}
[dir="rtl"] bdi { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   The logo is not mirrored.

   The mark reads as two interlocking forms with a diagonal plane; flipping
   it produces a different mark, not a translated one.
   -------------------------------------------------------------------------- */

/* The crop is a fixed offset into the raster, so it stays physically on the
   left. Under dir="rtl" the base rule's inset-inline-start resolves to the
   right edge, which would slide the wordmark out of its own box -- so both
   physical sides are set explicitly here. */
[dir="rtl"] .wordmark { transform: none; }
[dir="rtl"] .wordmark img { right: auto; left: -5.944%; }
[dir="rtl"] .wordmark--dark img { right: auto; left: -6.14%; }

/* --------------------------------------------------------------------------
   Chart geometry does not flip, so neither does chart text anchoring.

   Every chart in viz/ is authored with left-to-right coordinates: a label at
   x=0 is meant to start at the left edge, one at x=332 with text-anchor:end
   is meant to finish at the right. But text-anchor's `start` and `end`
   resolve against the inline base direction, which the Arabic page sets to
   rtl -- so every one of those labels anchored from the opposite side and ran
   out of its own figure. The chart's overflow guard then clipped it, so
   "Before" and "After" on the paired bars and both axis labels on the 2x2
   were cut off on the Arabic pages and nowhere else.

   direction: ltr sets the base direction for anchoring only. An Arabic label
   is still laid out right-to-left inside its own run by the bidirectional
   algorithm, so the words read correctly; what changes is which end of the
   string sits at the coordinate.
   -------------------------------------------------------------------------- */

[dir="rtl"] .chart text { direction: ltr; }

/* The delivery plot is geography, not layout: the United States is west of
   Qatar whichever way the page reads, so neither the figure nor its labels
   move. The labels used to swap to the left of their dot under Arabic, which
   ran them off the edge of the box -- both labelled points sit in the western
   third of the map. See the note on the partial. */