/* ============================================================
   PRIMETESTLAB V2 - RTL EXTRAS (hand-authored, Arabic pages)
   Loaded AFTER home-v2.rtl.css on dir="rtl" pages ONLY.
   home-v2.rtl.css is MACHINE-GENERATED from home-v2.css by
   rtlcss (see RTL_RULES.md; never edit it by hand). This file
   holds the handful of things a mechanical flip cannot do:

   1. The Arabic webfont (the V2 fonts Bricolage Grotesque and
      Inter have no Arabic glyphs). IBM Plex Sans Arabic is the
      v1 pick, loaded by the ar shells; swap the family in ONE
      place below if the owner chooses another.
   2. Letter-spacing removal: Arabic is a connected script and
      tracking breaks the letter joins. The V2 system tracks
      headings, eyebrows and mono labels, so RTL zeroes it
      globally (Latin islands lose their tracking, accepted).
   3. Directional arrow mirroring: inline SVG markup is not CSS,
      so rtlcss cannot flip it. Every directional arrow icon in
      the system is an svg.v2-ic with fill="none" (brand glyphs
      like WhatsApp/YouTube use fill="currentColor"), so the
      attribute selector below mirrors exactly the arrows.
   4. LTR islands: tokens that must render left-to-right inside
      Arabic text (package names, version strings).
   5. Arabic heading metrics (size / leading / weight only).
      Latin display ramps use weight 800 and line-height ~1.03,
      tuned for Latin capitals. Arabic needs real-weight 700
      (IBM Plex Sans Arabic has no 800 face; Chrome synthesizes
      it), looser leading for tashkeel, and a slightly smaller
      optical size so the hero wraps cleanly.
   ============================================================ */

/* 1. Arabic type. --v2-ar-font is the single swap point. */
:root {
    --v2-ar-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

[dir="rtl"] body.v2 {
    font-family: var(--v2-ar-font);
}

[dir="rtl"] .v2 h1,
[dir="rtl"] .v2 h2,
[dir="rtl"] .v2 h3,
[dir="rtl"] .v2-mono,
[dir="rtl"] .v2-eyebrow,
[dir="rtl"] .v2-btn {
    font-family: var(--v2-ar-font);
}

/* Android QA landing (2026-10-11): these labels set var(--font-mono)
   directly instead of using .v2-mono, and carry Arabic text on /ar. */
[dir="rtl"] .v2 .v2qs-sample__chip,
[dir="rtl"] .v2 .v2qs-sample__meta,
[dir="rtl"] .v2qs-ex__meta li,
[dir="rtl"] .v2qs-hero__price span,
[dir="rtl"] .v2qs-plan__specs small,
[dir="rtl"] .v2qs-cmp__group th,
[dir="rtl"] .v2qs-cmp__table thead th small,
[dir="rtl"] .v2qs-cmp__table tbody td::before {
    font-family: var(--v2-ar-font);
}

/* 2. No tracking on a connected script. */
[dir="rtl"] .v2 *,
[dir="rtl"] .v2 *::before,
[dir="rtl"] .v2 *::after {
    letter-spacing: 0 !important;
}

/* 3. Forward-pointing arrows point LEFT in RTL. The fill="none"
   attribute discriminates arrows/chevrons from brand glyphs. */
[dir="rtl"] svg.v2-ic[fill="none"] {
    transform: scaleX(-1);
}

/* The reader "next" arrows are injected by JS with the same markup. */
[dir="rtl"] .v2-reader__next svg,
[dir="rtl"] .v2-guide__go svg {
    transform: scaleX(-1);
}

/* The API 36 post ships three directional icons as BARE inline svgs
   with no .v2-ic class, so the attribute selector above misses them:
   the Play Console breadcrumb chevrons (.v2api-path, in _s_extension
   and the Unity pane of _s_upgrade) and the verdict card's "go" arrows,
   which the checker injects from JS. Both point forward and must point
   LEFT on an Arabic page. The .v2api-tri__chev chevrons are vertical
   and deliberately NOT listed here. */
[dir="rtl"] .v2api-path > svg,
[dir="rtl"] .v2api-vd__go a svg {
    transform: scaleX(-1);
}

/* The Test on Screen post has the same shape of gap: two directional
   icons ship as BARE inline svgs with no .v2-ic class, so the attribute
   selector above misses both. The "scroll for the table" hint sits on
   eight wide tables and points the way the overflow scrolls, which is
   the other way round in RTL; the verdict card's "go" arrows are
   injected from JS by the feature identifier and the qualification
   checker. Both point forward and must point LEFT on an Arabic page. */
[dir="rtl"] .v2tos-tw__hint > svg,
[dir="rtl"] .v2tos-vd__go a svg {
    transform: scaleX(-1);
}

/* The sideload-APK post has the same shape of gap: two directional
   icons ship as BARE inline svgs with no .v2-ic class. The chain
   arrows between the verification-chain nodes (_s_checks) point the
   way the chain flows, which rtlcss reverses; the route checker's
   verdict "go" arrows are injected from JS (_s_picker). Both point
   forward and must point LEFT on an Arabic page. */
[dir="rtl"] .v2apk-chain__arw svg,
[dir="rtl"] .v2apk-vd__go a svg {
    transform: scaleX(-1);
}

/* The developer-verification post has the same shape of gap: the
   scope explorer's verdict "go" arrows are injected from JS
   (_s_scope) as BARE inline svgs with no .v2-ic class. They point
   forward and must point LEFT on an Arabic page. */
[dir="rtl"] .v2adv-vd__go a svg {
    transform: scaleX(-1);
}

/* Stale-flip gap: home-v2.rtl.css was generated before the
   .v2gpr-cover--fit utility landed in home-v2.css (cover image
   fitted at --v2coverw, used by the verification-wave heroes).
   Direction-neutral rule; delete when home-v2.rtl.css is next
   regenerated by rtlcss. */
[dir="rtl"] .v2gpr-cover--fit {
    max-width: var(--v2coverw, 900px);
}

/* 4. LTR islands: technical tokens inside Arabic sentences. */
[dir="rtl"] .v2-track__pkg,
[dir="rtl"] .v2-track__ver,
[dir="rtl"] .v2-how__art--file {
    direction: ltr;
    unicode-bidi: isolate;
}

/* 5. Arabic heading metrics (size / leading / weight).
   Scoped to [dir="rtl"] only; EN/other locales are untouched.
   Classes covered (from home-v2.css clamp scan of display headings):
     h1-level: .v2-hero__title, .v2-phero__title, bare .v2 h1
     h2-level: .v2-h2 (section titles), .v2-cta__title, bare .v2 h2
   h3 and below left alone (already ~1.6 leading). */

/* 5a. Leading: Latin hero is ~1.03; Arabic tashkeel needs room
   above the line and deeper descenders below. Unitless ratios
   so they track the responsive clamp ramp. */
[dir="rtl"] .v2-hero__title,
[dir="rtl"] .v2-phero__title,
[dir="rtl"] .v2 h1 {
    line-height: 1.28;
}

[dir="rtl"] .v2-h2,
[dir="rtl"] .v2-cta__title,
[dir="rtl"] .v2 h2 {
    line-height: 1.3;
}

/* 5b. Weight: kill synthetic bold. home-v2 asks for 800 on
   display h1s, but IBM Plex Sans Arabic tops out at a real 700
   (Google Fonts errors on wght@800; shells load 400;500;600;700).
   Chrome dilates the 700 outlines to fake 800, which fattens
   joins and closes counters on a connected script. 700 is the
   heaviest real face, so this is crisper, not lighter. */
[dir="rtl"] .v2-hero__title,
[dir="rtl"] .v2-phero__title,
[dir="rtl"] .v2 h1 {
    font-weight: 700;
}

/* 5c. Optical size: at the same px, Arabic fills more of the em
   box than Latin, so the home hero wraps to 3 cramped lines.
   ~12% reduction at every clamp stop (RTL only). */
[dir="rtl"] .v2-hero__title {
    font-size: clamp(2.25rem, 1.2rem + 3.1vw, 3.45rem);
}

/* Package-page hero (.v2-phero__title) has its own ramp:
   clamp(2.15rem, 1.2rem + 3.1vw, 3.45rem). Scale ~0.88. */
[dir="rtl"] .v2-phero__title {
    font-size: clamp(1.89rem, 1.06rem + 2.7vw, 3.04rem);
}

/* The testing-tracks post has the same shape of gap as API 36 and the
   sideload-APK post: four directional icons ship as BARE inline svgs
   with no .v2-ic class, so the svg.v2-ic[fill="none"] selector above
   misses all four. They are the funnel arrows between the three track
   nodes (_s_tracks, .v2tt-funnel__arrow) and the recommended-path
   arrows between the three steps (_s_which, .v2tt-flow__arrow). Both
   annotate a left-to-right sequence and must point LEFT on an Arabic
   page, where the nodes they sit between are laid out right-to-left.

   DESKTOP ONLY, deliberately. Under 768px both flows stack vertically
   and home-v2.rtl.css already rotates these same svgs to rotate(-90deg)
   (rtlcss mirrored it correctly from the +90deg in home-v2.css), which
   points them DOWN - the right answer for a stacked flow. An unscoped
   scaleX(-1) here would out-specify that rule and turn the mobile
   arrows sideways again. */
@media (min-width: 769px) {
    [dir="rtl"] .v2tt-funnel__arrow svg,
    [dir="rtl"] .v2tt-flow__arrow svg {
        transform: scaleX(-1);
    }
}

/* The apply-for-production post has the same shape of gap as API 36 and the
   sideload-APK post: two directional glyphs ship as BARE inline svgs with no
   .v2-ic class, so the svg.v2-ic[fill="none"] selector above misses both.

   1. The walker's Back control (#v2apnWalkBack) carries a left-pointing arrow.
      "Back" is leftward in LTR and must be rightward on an Arabic page.
   2. The source lists in the close section render each link through the $doc()
      helper in resources/content/blog_apn_v2/en.php, whose external-link glyph
      points up and to the RIGHT (19 links across apn.close.b4 and b6).

   Scoped to .v2apn-docs rather than the shared .v2gpr-docs__list: the same bare
   -svg gap exists on every v2gpr post that renders a source list on /ar, but
   widening this selector would change pages outside this wave. Recorded as a
   site-wide follow-up instead. */
[dir="rtl"] #v2apnWalkBack > svg,
[dir="rtl"] .v2apn-docs .v2gpr-docs__list a > svg {
    transform: scaleX(-1);
}