/* Right-to-left corrections, and the bidi rules that keep numbers readable.
 *
 * Deliberately short. The layout itself mirrors because the stylesheets use
 * logical properties — margin-inline-start rather than margin-left — so this
 * file is only for the things a logical property cannot express: a transform
 * that moves in a fixed direction, an icon that points somewhere, and the
 * isolation that stops Arabic's bidi algorithm rearranging a price.
 *
 * Loaded on every page. Everything in it is scoped to [dir="rtl"], so it is
 * inert in the other four languages.
 */

/* ------------------------------------------------------------------ */
/* Financial and technical values                                      */
/*                                                                     */
/* This is the part that matters most, and it is not decoration.       */
/*                                                                     */
/* In a right-to-left paragraph the bidi algorithm reorders runs of    */
/* neutral and left-to-right characters against their neighbours. A    */
/* pair like BTC/USDT can surface as USDT/BTC, and a signed amount can */
/* have its minus pushed to the far end — so a loss reads as a gain.   */
/* Isolating each value stops it negotiating with the text around it.  */
/*                                                                     */
/* `unicode-bidi: isolate` alone would keep the run intact but still   */
/* let it be laid out right-to-left internally; `direction: ltr` fixes */
/* the internal order. Together they make a number a number again.     */
/* ------------------------------------------------------------------ */

.num,
.mono,
.ticker,
.stat-value,
.portfolio-value,
.trade-symbol,
.t-symbol,
.ah-ticker,
.wallet-address,
.tx-hash,
/* Figures that live in their own small element rather than in a sentence:
   a calendar day's P&L, a year cell's total, the footer of the dashboard's
   performance widget. Each of these is a signed amount, and a signed amount
   whose sign has moved is a different number. */
.cal-pnl,
.yc-pnl,
.pf-value,
/* A KPI box’s figure and the calendar’s monthly total. Both are a signed
   amount standing alone, and both were printing the sign at the far end. */
.k-value,
.sum-value,
/* The Portfolio value card: the headline total and the signed change beside
   it. Both are a bare amount standing on its own, and the signed one was
   printing "+$73,398.46" as "$73,398.46+" on the Arabic page. The figures in
   the rail and in the chart's hover card are wrapped in <bdi dir="ltr">
   instead, so they stay isolated without their block losing its alignment. */
.value-total,
[data-change-value],
[data-ltr],
bdi[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Every label inside a chart.
 *
 * An axis tick is "$1.2K" or "-$326"; a bar label is a month. Both are a
 * single run, never a sentence, so fixing the base direction is safe for the
 * Arabic ones and necessary for the numeric ones — an inherited RTL base was
 * rendering "-$326" with its minus at the far end, which turns a loss into a
 * gain on a chart axis. `text-anchor` is untouched, so nothing moves. */
[dir="rtl"] svg text {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Table cells holding figures. The app already marks these with .num for
   tabular figures, which makes it the honest hook for "this is a number".

   A results table marks its signed columns with the same pos/neg class the
   colour comes from rather than with .num. `.pos` on its own would be too
   wide — a success note carries it too, and that is a sentence — so this
   asks for a right-aligned cell as well, which in this codebase is only ever
   a column of figures. */
[dir="rtl"] td.num,
[dir="rtl"] th.num,
/* The Trades table and the dashboard's trade cards name their figure cells
   t-right / t-pnl / t-num rather than .right, so the rule below did not
   reach them: an Arabic Trades page rendered "+$287.90" as "$287.90+".
   Same isolation, same reason. */
[dir="rtl"] td.t-right.pos,
[dir="rtl"] td.t-right.neg,
[dir="rtl"] .t-pnl,
[dir="rtl"] .t-num.pos,
[dir="rtl"] .t-num.neg,
[dir="rtl"] td.right.pos,
[dir="rtl"] td.right.neg {
  direction: ltr;
  unicode-bidi: isolate;
  /* Still aligned to the reading edge of the cell, so a column of figures
     stays a column — only the digits inside are left-to-right. */
  text-align: end;
}

/* An input the user types a number, a key or an address into. Typing a
   wallet address into a right-to-left field is unusable otherwise. */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[data-ltr],
[dir="rtl"] textarea[data-ltr] {
  direction: ltr;
  text-align: start;
}

/* The landing page's demo screens are a picture of the product, not
   translated content: a rebuilt-in-markup screenshot of the English app. They
   read left-to-right in every language for the same reason a screenshot
   would, and that also keeps every figure inside them intact — an inherited
   RTL direction was rendering "+$38,412.65" as "$38,412.65+", which puts the
   sign of a number on the wrong end. */
[dir="rtl"] .lc-device,
[dir="rtl"] .lc-screen,
[dir="rtl"] .lc-panel,
[dir="rtl"] [class^="lc-ui"],
[dir="rtl"] [class*=" lc-ui"] {
  direction: ltr;
}

/* Figures in the landing's own copy, outside the device. */
[dir="rtl"] .lc-kpi-value,
[dir="rtl"] .lc-kpi-foot,
[dir="rtl"] .lc-stat-value,
[dir="rtl"] .lc-num {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ------------------------------------------------------------------ */
/* Transforms, which have no logical form                              */
/* ------------------------------------------------------------------ */

/* The settings toggle. Its knob sits at the inline start and slides by a
   fixed 17px; in a mirrored track that push has to go the other way or the
   knob leaves the switch. */
[dir="rtl"] .switch input:checked + .switch-track::after {
  transform: translateX(-17px);
}

/* Chevrons and arrows point along the reading direction, so the ones that
   mean "forward" and "back" swap. Icons that mean up, down, close, search or
   anything non-directional are untouched. */
[dir="rtl"] .chev-next svg,
[dir="rtl"] [data-page-next] svg,
[dir="rtl"] .view-link svg,
[dir="rtl"] .lc-btn svg.arrow,
[dir="rtl"] .chev-prev svg,
[dir="rtl"] [data-page-prev] svg {
  transform: scaleX(-1);
}

/* The Review Trade transactions disclosure. Closed, it points along the
   reading direction — left in Arabic. Open, it points down in both, so the
   flip is only applied to the closed state. The rotation itself lives in
   trades.css and is direction-independent. */
[dir="rtl"] .tx-toggle[aria-expanded="false"] .tx-chev {
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------ */
/* Small corrections                                                   */
/* ------------------------------------------------------------------ */

/* The fixed sidebar is pinned with `inset: 0 auto 0 0`, a physical shorthand
   that cannot be written logically. Repin it to the other edge.

   On a phone the same element is a drawer, and a drawer leaves by the edge
   it is pinned to. `translate` has no logical form either, so the distance
   it travels is a token this rule flips rather than a second transform —
   one line, and the whole drawer mirrors. Everything else about it is
   already written logically and needs nothing here. */
[dir="rtl"] .sidebar {
  inset: 0 0 0 auto;
  --drawer-out: 100%;
}

/* Progress and meter fills grow from the reading edge. */
[dir="rtl"] .bar-fill,
[dir="rtl"] .meter-fill,
[dir="rtl"] .progress-fill {
  transform-origin: right center;
}

/* Arabic script has taller ascenders and descenders than Latin; at the app's
   small sizes it sets tight. A little more line height, only for Arabic, and
   no change to any font size — the layout is measured in those. */
[lang="ar"] body {
  line-height: 1.65;
}
[lang="ar"] .stat-value,
[lang="ar"] .page-title,
[lang="ar"] .card-title {
  line-height: 1.35;
}