/* ═══════════════════════════════════════════════════════════════════
   ProCiv Partners — styles-rtl.css
   RTL / Arabic override sheet. Loaded by index-ar.html AFTER styles.css.
   Every rule is gated on [dir="rtl"], so this file is inert on a page that
   does not set it; styles.css itself is never rewritten.

   Contents
     1  Type system — Arabic faces, tracking, annotation compensations
     2  Layout mirroring — physical → logical, per section
     3  Directional devices — draw origins, icon flips, plate ticks
     4  Drawings — the two SVGs are NOT mirrored; text only
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1 · TYPE — AR-CONTENT.md §3
   ═══════════════════════════════════════════════════════════════════ */

/* 1.1 Faces. Archivo and IBM Plex Mono are served with unicode-range, so
   Arabic never matches them and falls through to IBM Plex Sans Arabic —
   which is exactly what we want: Latin (the trade name, SAR codes) keeps
   its original face, Arabic picks up the Plex Arabic.
   §3.3 — Plex Mono MUST stay first in the mono stack: the browser resolves
   per character, so digits keep true tabular alignment in Plex Mono and only
   Arabic words fall through. Reversing this breaks every ledger column. */
[dir="rtl"] {
  --font-sans: "Archivo", "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", "SFMono-Regular", Consolas, monospace;

  /* 1.2 §3.4 — the single most important RTL rule. Positive tracking severs
     Arabic cursive joins. Every token that carries tracking is zeroed here;
     the hard-coded values are zeroed individually in 1.3. */
  --ls-kicker: 0;
  --ls-label: 0;
  --ls-display: 0;
  --ls-h2: 0;
  --ls-h3: 0;
  --ls-h4: 0;
}

/* keep tabular figures wherever the mono role is doing alignment work */
[dir="rtl"] .kicker,
[dir="rtl"] .mono-label,
[dir="rtl"] .dim > span,
[dir="rtl"] .plate figcaption,
[dir="rtl"] .matrix thead th,
[dir="rtl"] .matrix tbody td.m-proven,
[dir="rtl"] .ledger thead th,
[dir="rtl"] .ledger .c-no,
[dir="rtl"] .ledger .c-val,
[dir="rtl"] .quant__src,
[dir="rtl"] .stat__lab,
[dir="rtl"] .sk-tx,
[dir="rtl"] .lo-t { font-feature-settings: "tnum" 1; }

/* 1.3 Every hard-coded positive letter-spacing in styles.css, zeroed. */
[dir="rtl"] .kicker-row .idx,
[dir="rtl"] .vlabel,
[dir="rtl"] .btn,
[dir="rtl"] .navlist a,
[dir="rtl"] .langsw,
[dir="rtl"] .geostrip,
[dir="rtl"] .mobnav .mono-i,
[dir="rtl"] .stat__num .u,
[dir="rtl"] .flagship__num .u,
[dir="rtl"] .rail__idx,
[dir="rtl"] .rail__name,
[dir="rtl"] .svc__rail,
[dir="rtl"] .scopelist li,
[dir="rtl"] .sk-tx,
[dir="rtl"] .ledger .c-foot,
[dir="rtl"] .cli__idx,
[dir="rtl"] .cli__sec,
[dir="rtl"] .box__t,
[dir="rtl"] .capline dt,
[dir="rtl"] .lo-t,
[dir="rtl"] .lo-t--list,
[dir="rtl"] .org__l2 .box__t,
[dir="rtl"] .ledger .c-client::before,
/* §18.12 — the materials schedule. `.mrow__t` hard-codes .04em; the rest
   resolve --ls-label, which is already 0 above, but `.legend__note` is a NEW
   class that §3.4's list never named, so it is stated explicitly here (as
   §18.12.3 requires) and its neighbours follow for the same reason. */
[dir="rtl"] .legend--mats .legend__note,
[dir="rtl"] .mrow__t,
[dir="rtl"] .mrow__proven,
[dir="rtl"] .lpanel__tx .ltags,
/* §19.9.3 — the hero sequence exhibit. `.seq__tag` hard-codes .06em and
   `.seq__note` hard-codes .06em; both are NEW classes that §3.4.1's list
   never named — the identical defect §18.12.3 caught on `.legend__note`.
   §3.4.1's list now reads: .mono-label, .dim, .kicker, figcaption, .vlabel,
   .sk-tx, .lo-t, .legend__note, .ltags, .seq__tag, .seq__note. */
[dir="rtl"] .seq__tag,
[dir="rtl"] .seq__note,
[dir="rtl"] .ltag { letter-spacing: 0; }
/* `.mrow__code` is exempt on purpose: it is pure Latin/digits (A-01 … B-06)
   and keeps IBM Plex Mono and its .06em tracking untouched — §18.12.4. */

/* 1.4 §3.4.2 — the annotation cues that replace uppercase + tracking:
   weight 600 against 400 body, and word-spacing (legal in Arabic) to give
   back the airiness the tracking used to provide. text-transform:uppercase
   is deliberately left in place upstream — it is a no-op on Arabic and still
   correctly uppercases the surviving Latin tokens (KAFD, SCADA, WAVE). */
[dir="rtl"] .kicker,
[dir="rtl"] .mono-label,
[dir="rtl"] .dim > span,
[dir="rtl"] .vlabel,
[dir="rtl"] .chip,
[dir="rtl"] .legend__i,
[dir="rtl"] .metarow,
[dir="rtl"] .plate figcaption,
[dir="rtl"] .matrix thead th,
[dir="rtl"] .matrix tbody td.m-proven,
[dir="rtl"] .ledger thead th,
[dir="rtl"] .ledger .c-foot,
[dir="rtl"] .stat__lab,
[dir="rtl"] .stat__num .u,
[dir="rtl"] .flagship__num .u,
[dir="rtl"] .quant__src,
[dir="rtl"] .capline dt,
[dir="rtl"] .sheet__row dt,
[dir="rtl"] .foot__nav a,
[dir="rtl"] .foot__meta p,
[dir="rtl"] .scopelist li,
[dir="rtl"] .box__subs li,
[dir="rtl"] .cli__idx,
[dir="rtl"] .cli__sec,
[dir="rtl"] .rail__idx,
[dir="rtl"] .mobnav .mono-i,
[dir="rtl"] .geostrip,
[dir="rtl"] .svc__rail,
[dir="rtl"] .legend--mats .legend__note,
[dir="rtl"] .mrow__proven,
[dir="rtl"] .lpanel__tx .ltags,
[dir="rtl"] .ledger .c-client::before {
  font-weight: 600;
  word-spacing: .06em;
}

/* 1.5 §18.12 — MATERIALS. Arabic loses uppercase AND tracking, and in this
   section that strips both of the devices that separate a schedule
   designation from the note directly beneath it. `.mrow__t` is the one
   place where the loss is a hierarchy failure rather than a texture one,
   so all four compensations of §18.12.1 are applied together: weight 700
   (not 600), a size step UP to 16px, word-spacing, and the --ink /
   --ink-soft split — which is inherited from styles.css and is now
   load-bearing rather than decorative. */
[dir="rtl"] .mrow__t {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  word-spacing: .06em;
}
/* the note stays at --ink-soft and weight 400 — the contrast against the
   designation above is the whole mechanism; do not embolden it. */
[dir="rtl"] .mrow__note { line-height: 1.6; }
/* mono annotations in the section: tabular figures for the Latin refs that
   survive inside them (KAFD 4.09, A-01 … B-06). */
[dir="rtl"] .mrow__code,
[dir="rtl"] .mrow__proven,
[dir="rtl"] .lpanel__tx .ltags { font-feature-settings: "tnum" 1; }
[dir="rtl"] .mrow__proven,
[dir="rtl"] .legend--mats .legend__note { line-height: 1.6; }

/* 1.6 §19.9 — HERO Rev 2, the Alhamra staged-record exhibit. Two brand-new
   annotation classes lose BOTH of their English cues at once: uppercase is
   a no-op on Arabic, and the tracking that partnered it is zeroed in 1.3.

   `.seq__tag` — here 10px is not a texture problem but a legibility
   failure. Arabic at 10px with no tracking loses its nuqta (the dots that
   separate ب/ت/ث and ج/ح/خ) to hinting at 1x; it does not degrade, it
   becomes wrong. Step to 11px / weight 600. --accent-300 and the 6px gap to
   the plate are now the ONLY annotation cues left, so both are load-bearing
   — do not touch either. §19.9.1. */
[dir="rtl"] .seq__tag {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  word-spacing: .06em;
  font-feature-settings: "tnum" 1;
}
/* `.seq__note` — the honesty note (HR-27). It carries the record's stated
   limit, so §19.9.2 forbids buying its subordination back with opacity, and
   the size is deliberately NOT stepped down either: styles.css already runs
   the English note at the same 11px as caption line 1 (parity), and a
   0.75–0.8em step would land it under the 11px nuqta floor this very block
   just established. What is left is the --steel-300 / --accent-300 colour
   split inherited from styles.css, plus ONE weight step below the figcaption
   (which 1.4 puts at 600). Weight 500 is the whole budget. */
[dir="rtl"] .seq__note {
  font-weight: 500;
  line-height: 1.6;
  word-spacing: .06em;
}

/* one size step down where Plex Sans Arabic runs optically larger than the
   Plex Mono it replaces, with a touch more leading to keep the marks airy */
[dir="rtl"] .kicker { font-size: .6875rem; line-height: 1.5; }
[dir="rtl"] .scopelist li { font-size: 11.5px; line-height: 1.45; }
[dir="rtl"] .box__t { font-size: 12.5px; }
[dir="rtl"] .plate figcaption { line-height: 1.55; }
[dir="rtl"] .mono-label,
[dir="rtl"] .stat__lab,
[dir="rtl"] .quant__src { line-height: 1.6; }

/* headings: Arabic has no descender-free cap line, so the tight display
   leading of the Latin build clips. One notch looser, tracking already 0. */
[dir="rtl"] .hero__h1 { line-height: 1.18; }
[dir="rtl"] .sechead h2 { line-height: 1.25; }
[dir="rtl"] .rail__name { line-height: 1.5; hyphens: none; }
[dir="rtl"] .pullquote p,
[dir="rtl"] .contact__pitch,
[dir="rtl"] .svc__lead h3,
[dir="rtl"] .flagship h3 { line-height: 1.4; }

/* numerals stay Latin and keep their optical tightening (§0.1) */
[dir="rtl"] .stat__num .n,
[dir="rtl"] .flagship__num .n,
[dir="rtl"] .quant__num .n { letter-spacing: -.02em; }


/* ═══════════════════════════════════════════════════════════════════
   2 · LAYOUT MIRRORING
   Grid placement, flex order, text-align:start, and every
   logical inset-inline, margin-inline and padding-inline value already
   mirrors natively. Only physical left/right values are restated here.
   ═══════════════════════════════════════════════════════════════════ */

/* 2.0 skip link — the LTR build parks it at left:-9999px, which is clipped
   because inline-start overflow is not scrollable. Under RTL that same trick
   would park it in the scrollable direction and add 9999px of page overflow,
   so it is parked above the block-start instead. */
[dir="rtl"] .skip-link { left: auto; right: 0; transform: translateY(-200%); }
[dir="rtl"] .skip-link:focus { left: auto; right: 0; transform: none; }

/* 2.1 header */
[dir="rtl"] .hdr__nav { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .burger { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .navlist a::after { transform-origin: right; }

/* 2.2 rotated section labels — on an RTL sheet the spine label sits on the
   right edge and reads top-to-bottom (the mirror of the LTR convention, and
   the same logic as the rotated SVG label in §3.5). */
[dir="rtl"] .vlabel { left: auto; right: 16px; transform: none; }

/* 2.2b section-head block mark — an asymmetric drafting device; it reads
   from the leading edge, so it mirrors with the sheet */
[dir="rtl"] .blockmark i:nth-child(1) { left: auto; right: 24px; }
[dir="rtl"] .blockmark i:nth-child(2) { left: auto; right: 0; }

/* 2.3 company */
[dir="rtl"] .mv { padding-left: 0; padding-right: var(--s-6); }
[dir="rtl"] .mv::before { left: auto; right: 0; }
[dir="rtl"] .pullquote { padding-left: 0; padding-right: var(--s-5); }
[dir="rtl"] .pullquote::before { left: auto; right: 0; }

/* 2.4 values rail — inline-start keeps the divider between cells and stops
   the outer edge doubling when the grid flows right-to-left */
[dir="rtl"] .rail__cell { border-left: 0; border-inline-start: var(--hair); }
[dir="rtl"] .rail__cell:first-child { border-inline-start: 0; }
[dir="rtl"] .rail__cell::before { transform-origin: right; }

/* 2.4b the PROCIV letter projection — the third asymmetric drafting device
   on the page (with the plate ticks and the block mark); its offset follows
   the same mirrored convention. The letterform itself is not mirrored. */
[dir="rtl"] .rail__letter::before { left: auto; right: 3px; }

/* 2.5 services */
[dir="rtl"] .svc__rail { transform: none; }
[dir="rtl"] .svc__body { border-left: 0; border-inline-start: var(--hair); }

/* 2.6 capability matrix */
[dir="rtl"] .matrix caption { text-align: right; }
[dir="rtl"] .matrix thead th.m-cap,
[dir="rtl"] .matrix thead th.m-proven { text-align: right; }
[dir="rtl"] .matrix tbody th[scope="row"] { text-align: right; }
[dir="rtl"] .matrix tbody td.m-proven { text-align: right; padding-right: 12px; padding-left: 16px; }

/* 2.7 ledger */
[dir="rtl"] .ledger thead th { text-align: right; }
[dir="rtl"] .ledger tbody .lrow > * { text-align: right; }
[dir="rtl"] .lexp { text-align: right; }
[dir="rtl"] .ledger .c-chart { background-position: right center; }
/* the terminal tick marks the end of the bar, which now grows leftward */
[dir="rtl"] .bar::after { right: auto; left: 0; }
[dir="rtl"] .plate--mini { margin: var(--s-5) var(--s-4) var(--s-5) 0; }
[dir="rtl"] .lpanel__tx { padding: var(--s-5) 0 var(--s-5) var(--s-4); }

/* 2.8 clients */
[dir="rtl"] .clients { border-left: 0; border-inline-start: var(--hair); }
[dir="rtl"] .cli { border-right: 0; border-inline-end: var(--hair); }

/* 2.9 schedule of quantities */
[dir="rtl"] .quant { border-left: 0; border-inline-start: 1px solid var(--line-dark); }
[dir="rtl"] .quant:nth-child(4n+1) { border-inline-start: 0; }

/* 2.10 org chart — the spine layout only. Scoped to <1200px on purpose: at
   ≥1200px styles.css swaps to the grid-with-bus layout, whose drop, stubs and
   bus are centre-anchored and must NOT pick up these physical values. */
@media (max-width: 1199.98px) {
  [dir="rtl"] .org__dropwrap { padding: var(--s-5) 44px var(--s-5) 0; }
  [dir="rtl"] .org__drop { left: auto; right: 12px; }
  [dir="rtl"] .org__stub { left: auto; right: -32px; }
  [dir="rtl"] .org__l2 {
    margin-left: 0; margin-right: 12px;
    padding-left: 0; padding-right: 44px;
    border-left: 0; border-right: 2px solid transparent;
  }
  [dir="rtl"] .org__l2::after { left: auto; right: -2px; }
  [dir="rtl"] .org__l2 > li::before { left: auto; right: -44px; }
  [dir="rtl"].js .org__stub { transform-origin: right; }
  [dir="rtl"].js .org__l2 > li::before { transform-origin: right; }
}

/* 2.11 footer */
[dir="rtl"] .foot__meta { text-align: left; }
[dir="rtl"].js .foot[data-reveal] .foot__bar,
[dir="rtl"].js .joint[data-reveal] { transform-origin: right; }

/* 2.11.1 IBES Group brand strip. The strip itself needs no mirroring —
   it is built on `border-inline-start` and a grid, so the sequence and
   the hairlines flip on their own, and no transform is applied to the
   marks (logos are objects, never mirrored — §3.5).
   `.grpbrand__name` is the one exception to §3.4: it is pure Latin
   (IBES Technologies · NexaSuite · Taqdir · ProCiv Partners — the trade
   names stay in Latin script per §0.5 [لا يُترجم]), so it keeps IBM Plex
   Mono and its tracking, exactly as `.mrow__code` does in §18.12.4.
   --ls-label is 0 under [dir="rtl"], so the value is restated literally. */
[dir="rtl"] .grpbrand__name { letter-spacing: .08em; }

/* 2.12 section-head rule draws from the leading (right) edge */
[dir="rtl"].js .sechead .rule { transform-origin: right; }

/* 2.13 client sector label (hover annotation) */
[dir="rtl"] .cli__sec { margin-left: 0; margin-inline-start: auto; }


/* ═══════════════════════════════════════════════════════════════════
   3 · DIRECTIONAL DEVICES
   ═══════════════════════════════════════════════════════════════════ */

/* 3.1 §3.5 — only the arrow mirrors. #ic-north (compass), #ic-mail,
   #ic-phone, #ic-pin, #ic-globe and #ic-doc are objects, not directions,
   and must NOT be flipped. */
[dir="rtl"] .btn__ic:has(use[href="#ic-arrow-right"]) { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__ic,
[dir="rtl"] .btn:focus-visible .btn__ic { transform: translateX(-4px); }
[dir="rtl"] .btn:hover .btn__ic:has(use[href="#ic-arrow-right"]),
[dir="rtl"] .btn:focus-visible .btn__ic:has(use[href="#ic-arrow-right"]) {
  transform: scaleX(-1) translateX(4px);
}

/* 3.2 plate corner ticks — the frame's physical asymmetry mirrors with the
   sheet (HERO.md §7, "flip them once globally"): top-right / bottom-left. */
[dir="rtl"] .plate::before {
  left: auto; right: -1px;
  border-left-width: 0; border-right-width: 1px;
}
[dir="rtl"] .plate::after {
  right: auto; left: -1px;
  border-right-width: 0; border-left-width: 1px;
}
@media (hover: hover) {
  [dir="rtl"] .plate:hover::before { transform-origin: top right; }
  [dir="rtl"] .plate:hover::after  { transform-origin: bottom left; }
  [dir="rtl"] .cli__sec { transform: translateX(-6px); }
  [dir="rtl"] .cli:hover .cli__sec { transform: none; }
  /* M6 — ledger current-row rule sits on the leading (right) edge */
  @media (min-width: 900px) {
    [dir="rtl"] .ledger .lrow .c-no::before { left: auto; right: 0; }
  }
}


/* ═══════════════════════════════════════════════════════════════════
   4 · THE DRAWINGS — deliberately NOT mirrored
   The KSA outline, the Taif–Baha corridor, the pipeline geometry and its
   flow direction are geographic and physical facts. Mirroring them would
   be a factual error (AR-CONTENT §3.5). Their coordinates, polylines and
   arrows are untouched in the markup; only the <text> nodes were
   translated and re-anchored there. Nothing in this file transforms
   .schematic or .locator.
   ═══════════════════════════════════════════════════════════════════ */

/* SVG annotations: tracking off, weight up — same substitution as §1.4 */
[dir="rtl"] .sk-tx,
[dir="rtl"] .lo-t { font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════
   4b · THE `[dir="rtl"] .js` COMBINATOR DEFECT — repair block
   ───────────────────────────────────────────────────────────────────
   styles.css's RTL block (HERO §4.6, MATERIALS §9) is written
   `[dir="rtl"] .js …` — a DESCENDANT combinator. But `index-ar.html`
   carries BOTH hooks on the same element:

       <html lang="ar" dir="rtl" class="no-js">
       …classList.remove('no-js'); classList.add('js');

   so `.js` is never a descendant of `[dir="rtl"]` and every one of those
   rules silently fails to match. The visible symptom in this build was
   the hero exhibit printing its wipes left→right (the LTR start state
   `inset(0 100% 0 0)` survived) while the layout mirrored — i.e. the
   Arabic sheet drew itself backwards against its own reading direction.

   Restated below as a COMPOUND selector `[dir="rtl"].js` (no space), which
   is what was meant. styles.css is deliberately not rewritten (this file's
   contract, header above); these override it purely on source order, and
   are inert on any page that is not RTL.

   The six occurrences that already lived inside this file (org chart ×3,
   footer bar, joint, section-head rule) were corrected in place. The only
   remaining descendant-combinator spellings anywhere in the sheet are the
   three inside this comment.
   ═══════════════════════════════════════════════════════════════════ */

/* HERO §7.3 — draw origins: the rules grow from the leading (right) edge */
[dir="rtl"].js .geostrip__rule,
[dir="rtl"].js .hero__band::before,
[dir="rtl"].js .hero .joint { transform-origin: right; }

/* HERO §7.3 / AR-CONTENT §19.8.6 — the print wipes reverse. The dim label
   and all three stage frames print right→left. The P0 stage ORDER is
   unchanged: S.1 still prints first at 620 ms, now on the right. */
[dir="rtl"].js .hero__figwrap .dim { clip-path: inset(0 0 0 100%); }
[dir="rtl"].js .hero.is-ready .hero__figwrap .dim { clip-path: inset(0); }
[dir="rtl"].js .plate--hero .seq__stage img { clip-path: inset(0 0 0 100%); }
[dir="rtl"].js .hero.is-ready .plate--hero .seq__stage img { clip-path: inset(0); }

/* the forward flow arrow's stem draws from the right. Its HEAD's
   rotate(225deg) lives in styles.css on a plain `[dir="rtl"]` selector and
   was never affected by this defect — do not restate it here, and never
   let a reduced-motion `transform: none` reach it (§4.5 forces opacity
   only on the ::after, or the chevron collapses into a square). */
[dir="rtl"].js .seq__link--h::before { transform-origin: right; }

/* MATERIALS §9 — the division rule draws and the hatch prints run right→
   left. The <pattern> geometry itself is NEVER mirrored. */
[dir="rtl"].js .mats__divhead .mats__divrule { transform-origin: right; }
[dir="rtl"].js .mrow .sw__f { clip-path: inset(0 0 0 100%); }
[dir="rtl"].js .mrow.in-view .sw__f { clip-path: inset(0); }


/* ═══════════════════════════════════════════════════════════════════
   5 · RESPONSIVE — the same flips inside each breakpoint that restates
   a physical value in styles.css
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  /* org chart, grid-with-bus layout. The GM drop, the horizontal bus and the
     per-manager drops are all centre-anchored and mirror on their own; only
     the staff branch hangs off one side, so only it is restated. */
  [dir="rtl"] .org__staff { left: auto; right: calc(50% + 72px); }
  [dir="rtl"] .org__stub { left: auto; right: -72px; }
  /* the bus draws from the leading (right) edge */
  [dir="rtl"].js .org__l2::before { transform-origin: right; }
}

@media (max-width: 1199.98px) {
  [dir="rtl"] .rail__cell { border-left: 0; border-inline-start: var(--hair); }
  [dir="rtl"] .rail__cell:nth-child(3n+1) { border-inline-start: 0; }
}

@media (max-width: 899.98px) {
  /* services */
  [dir="rtl"] .svc__body { border-inline-start: 0; }

  /* company */
  [dir="rtl"] .mv { padding-right: 0; }

  /* ledger cards — grid-template-areas mirror natively, so "no" lands on
     the right and "val" on the left; the value aligns to the outer edge. */
  /* must out-specify the desktop `.lrow > *` right-align in §2.7 */
  [dir="rtl"] .ledger tbody .lrow > .c-val { text-align: left; }
  [dir="rtl"] .lpanel__in { border-left: 0; border-inline-start: 2px solid var(--accent-500); }
  [dir="rtl"] .plate--mini { margin: var(--s-4) var(--s-4) 0 0; }

  /* org chart */
  [dir="rtl"] .org__dropwrap { padding-left: 0; padding-right: 36px; }
  [dir="rtl"] .org__stub { left: auto; right: -24px; }
  [dir="rtl"] .org__l2 { padding-left: 0; padding-right: 36px; }
  [dir="rtl"] .org__l2 > li::before { left: auto; right: -36px; }

  /* quants — 2-up */
  [dir="rtl"] .quant:nth-child(4n+1) { border-inline-start: 1px solid var(--line-dark); }
  [dir="rtl"] .quant:nth-child(2n+1) { border-inline-start: 0; }

  /* footer */
  [dir="rtl"] .foot__meta { text-align: right; }
}

@media (max-width: 639.98px) {
  [dir="rtl"] .rail__cell { border-left: 0; border-inline-start: var(--hair); }
  [dir="rtl"] .rail__cell:nth-child(3n+1) { border-inline-start: var(--hair); }
  [dir="rtl"] .rail__cell:nth-child(2n+1) { border-inline-start: 0; }
}