/* Left-to-right components */
.sm-connect__map{direction:ltr}
.ir-park__map{direction:ltr}
.hm-reality__visual{direction:ltr}
.hm-built__visual{direction:ltr}

/* Right-to-left pages (Arabic) only: scripts/rtl-css.mjs writes it out as
   written, and those pages link it after their mirrored stylesheets. No
   other page loads it, and no stylesheet imports it.

   It holds what the automatic mirroring cannot do. Text arrows are turned
   by the build (rules.mjs for dictionary values, numbers.js for an arrow
   alone in its node); these are the ones drawn in SVG or as images, and a
   few things that must keep their left-to-right order. */

/* Arrows and chevrons that point the way the text runs: forward is to the
   left now, and "back" to the right. The scale property, so a hover nudge
   set with translate (applied outside it) keeps working; a nudge set with
   transform is applied inside it and so turns round too (see below). */
.ft-outcome__arrow,
.mfg-kpis__arrows,
.ign-swap__arrow svg,
.sm-connect__more-box svg,
.hm-loop__arrow,
.tm-glide__arrow svg,
.sh-brands__arrow svg,
.rd-cat__go svg,
.rd-benefit__go svg,
.rd-mb-parent__chev svg,
.rd-mb-card__go svg,
.rd-mb-back svg {
  scale: -1 1;
}

/* The outcome arrow's hover nudge is a transform: the mirrored stylesheets
   send it left, and the scale above would send it right again. Restated
   as in English, the scale makes it go up and to the left, as the arrow
   points. */
.ft-outcome__links a:hover .ft-outcome__arrow {
  transform: translate(2px, -2px);
}

/* Why Volts, "other tools stop halfway": each card's drawing runs into the
   next card, which is to the left now, so the drawing turns round with the
   cards (the meter photo on it follows through the mirrored stylesheet). */
svg.wv-gap__visual,
.wv-gap__visual > svg,
picture.wv-gap__visual img {
  scale: -1 1;
}

/* The blue panels' shapes (geometry.js): the mirrored stylesheet moves each
   to the other edge, and its fade (a mask in degrees, which rtlcss leaves
   alone) would then fade out at that edge. Turned round whole, drawing and
   fade together, each comes in from its edge as in English. */
.vg {
  scale: -1 1;
}

/* Ignition, the licence chart: its axis labels and note follow the mirrored
   stylesheet, so the drawing (lines only, no text) turns round with them -
   cost climbs to the left, the way the axis arrow points. */
.ign-chart__svg {
  scale: -1 1;
}

/* ...but its tick stays a tick. */
.wv-gap__check-mark {
  transform-box: fill-box;
  transform-origin: center;
  scale: -1 1;
}

/* An arrow alone in a span: inline boxes don't transform, so make it a box
   first. The cutaway's "← Most buildings now" points back to the start,
   which is on the right now. */
.hm-reality__switch--back > [aria-hidden] {
  display: inline-block;
  scale: -1 1;
}

/* The left-to-right components keep their geometry, but their labels are
   Arabic text and read right to left: «أنظمة BMS و SCADA الحالية», not
   the Latin words first, and «412 kWh اليوم» with the number first. Set,
   not left to unicode-bidi: plaintext, which would take a label that opens
   with a Latin word or a number for left-to-right text. */
.hm-reality__pin-name,
.hm-reality__pin-read,
.sm-connect__device span,
.ir-park__tag {
  direction: rtl;
  unicode-bidi: isolate;
}

/* ...except a unit that starts with a sign: right to left, the bidi rules
   put the ° of "18.4 °C" on the far side of the C. Kept whole, it sits
   where the others do, «°C 18.4» like «kWh 412». */
.hm-reality__pin-unit {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Arabic has no italic, and the slant the browser draws in its place reads
   as a fault. What English sets in italic stands upright. */
em,
.hm-loop__callback,
.hm-case-attrib__note {
  font-style: normal;
}

/* Counters read left to right in Arabic too: "2/5", not "5/2". */
.hm-reality__count {
  direction: ltr;
  unicode-bidi: isolate;
}