/* ══ RIGHT-TO-LEFT ═════════════════════════════════════════════════════════
 *
 * Loaded by both pages and inert until <html dir="rtl"> is set.
 *
 * Most of the mirror comes free: this stylesheet uses logical properties —
 * margin-inline-start, inset-inline-end, padding-inline-start, text-align:end
 * — which flip on their own. What is collected here is the handful that
 * cannot: physical directions baked into transforms, gradients, SVG marks and
 * a few hard-coded left/right values.
 * ───────────────────────────────────────────────────────────────────────────*/

:root[dir="rtl"] {
  /* Arabic needs a touch more line height: the script has taller ascenders and
     deeper descenders than Latin at the same size. */
  line-height: 1.7;

  /* A SYSTEM Arabic face, deliberately. Archivo — the app's typeface — carries
     no Arabic glyphs, and pulling one from Google Fonts would put an Arabic
     interface behind a network request that fails in a quarry with no signal.
     The service worker precaches same-origin files only; it does not touch
     gstatic. Every platform here ships a good Arabic face already. */
  --ui: "Noto Kufi Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", sans-serif;
}
/* The monospace stack stays: figures, codes and dates are Latin in both
   languages, and an Arabic face would render them unevenly in a table. */

/* Numbers, codes and dates stay left-to-right inside Arabic text. "ISO VG 46"
   and "‎57,400 EGP" must not be reordered by the bidi algorithm. */
:root[dir="rtl"] .kpi__v,
:root[dir="rtl"] .stat__v,
:root[dir="rtl"] .feed__m,
:root[dir="rtl"] .rc__bar b,
:root[dir="rtl"] .pipe__top b,
:root[dir="rtl"] .spot__stats dd,
:root[dir="rtl"] .kv dd,
:root[dir="rtl"] .tag,
:root[dir="rtl"] .row__s {
  direction: ltr;
  unicode-bidi: isolate;
}
/* …and when they sit at the end of a flex row, they stay at the end. */

:root[dir="rtl"] .pipe__top b { text-align: end; }

/* Progress bars fill from the reading edge. */

:root[dir="rtl"] .pipe__bar i,
:root[dir="rtl"] .rc__bar--l i {
  background: linear-gradient(270deg, var(--grad-bot), var(--grad-top));
}

/* The donut is drawn from -90°, i.e. anticlockwise from twelve o'clock. In a
   mirrored layout it should read the same way round as the list beside it. */

/* Chevrons, arrows and the back control point the other way. */
:root[dir="rtl"] .cal__arrow svg,
:root[dir="rtl"] .lo-back svg,
:root[dir="rtl"] .rp-more svg,
:root[dir="rtl"] .act__go svg { transform: scaleX(-1); }

/* The rep's sheet slides up, not sideways, so it is unaffected — but its grip
   and close button are positioned, and those follow the reading edge. */
:root[dir="rtl"] .sheet__grip { margin-inline: auto; }

/* The sparkline reads left to right as a timeline in both languages: a line
   that falls to the right means decline everywhere. Deliberately NOT flipped. */

/* ── The language control ───────────────────────────────────────────────
   This file is loaded AFTER app.css, so anything declared here beats it at
   equal specificity. It used to carry the FULL .lang component — geometry,
   colours, the selected state — none of which is direction-specific. The
   effect was that app.css could not restyle the control at all: the amber
   selected pill kept coming back from here, in both languages.

   Only the genuinely RTL-specific rule stays. The component itself lives in
   app.css, where it belongs. */
.lang__b[lang="ar"] { font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; }
.lang__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-subtle); }