/* Arabic pages (/ar/), written by tools/build/arabic.py: Almarai for Arabic (loaded by assets/rivet.css),
   no letter-spacing (it breaks Arabic joining), no caps. Linked last in <head>. */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] body { font-family: 'Almarai', 'IBM Plex Sans', system-ui, sans-serif; }
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6, p, li, a, button, label, span, small, strong, b, i, em, summary, dt, dd, td, th, blockquote, figcaption, input, select, textarea) {
  font-family: 'Almarai', 'IBM Plex Sans', system-ui, sans-serif !important; }
html[lang="ar"] :is(span, strong, b, em, small):has(> [data-cprice]), html[lang="ar"] :is([data-cprice], [data-ccur], .rf-price) { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] :is(table, th, td) { text-align: right; }
html[lang="ar"] input[type="tel"], html[lang="ar"] input[type="email"] { direction: ltr; text-align: right; }

/* ---- RTL layout fixes (review 31 Oct). Scoped to html[dir="rtl"], so the English pages never see them. ---- */

/* Course heroes (RGA, AIWS): the inline English rules force text-align:left and pin the hero ticks to the left. */
html[dir="rtl"] .chero--split, html[dir="rtl"] .chero--split .chero__copy { text-align: right !important; }
html[dir="rtl"] .herofeats li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .herofeats li::before { left: auto; right: 2px; }

/* Library cards: mirror the title padding and the arrow, so a long Latin word overflows into the free side
   (as in English) instead of being cut at the card edge; slightly smaller titles in the 2-column phone grid. */
html[dir="rtl"] .lib-card__title { padding-right: 0; padding-left: 40px; }
html[dir="rtl"] .lib-card__play { right: auto; left: 14px; }
html[dir="rtl"] .lib-card__play svg { transform: scaleX(-1); }
@media (max-width: 520px) { html[dir="rtl"] .lib-card__title { font-size: clamp(1rem, 4.6vw, 1.25rem); } }

/* Agents ceiling sliders: the native thumb runs right to left, so the fill must grow from the right too. */
html[dir="rtl"] .ceil input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--cyan) var(--p,50%), var(--line-strong) var(--p,50%)); }
html[dir="rtl"] .ceil input[type=range]::-moz-range-track { background: linear-gradient(270deg, var(--cyan) var(--p,50%), var(--line-strong) var(--p,50%)); }
html[dir="rtl"] .ceil__row.is-bind input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--amber) var(--p,50%), var(--line-strong) var(--p,50%)); }
html[dir="rtl"] .ceil__row.is-bind input[type=range]::-moz-range-track { background: linear-gradient(270deg, var(--amber) var(--p,50%), var(--line-strong) var(--p,50%)); }

/* Floating voice button: bottom-left in RTL, where lines end (the English button sits bottom-right). */
html[dir="rtl"] .rv-voice { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); }
@media (min-width: 721px) { html[dir="rtl"] .rv-voice { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); } }

/* Desert Camel Report tab row: "start" and "end" are logical, so the fade edges swap in RTL. */
html[dir="rtl"] .rp-tablist[data-fade~="end"] { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
html[dir="rtl"] .rp-tablist[data-fade~="start"] { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
html[dir="rtl"] .rp-tablist[data-fade~="start"][data-fade~="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }

/* Latin-only headlines ending in a period ("AI in GTM Maxxing 101.", "Desert Camel Growth Model.", the
   Field Notes titles): plaintext takes the direction from the first letter, so the period stays at the end.
   Only on headings that are Arabic-first or Latin-only; a Latin-first Arabic heading would be reordered.
   text-align:right keeps them on the RTL side (plaintext alone turns "start" into left for a Latin line). */
html[dir="rtl"] body.ev-voice h1,
html[dir="rtl"] [data-screen-label="resources: hero"] .lh-title,
html[dir="rtl"] #art-root :is(h1, h2, h3) { unicode-bidi: plaintext; text-align: right; }