/* ChartDeck i18n (cd-i18n.js): right-to-left support and the Settings > Language page.
   Tokens only (theme.css / atlas-tokens.css); no hard-coded colours. */

/* ---- Right to left (Arabic). The shell mirrors; the charts and everything that is a number,
   a ticker or a time stay left to right. ---- */
html[dir="rtl"] #at-charts,
html[dir="rtl"] .at-charts,
html[dir="rtl"] .cd-drawbar,
html[dir="rtl"] canvas { direction: ltr; }
html[dir="rtl"] .cd-tb-sym,
html[dir="rtl"] .cd-tf-favs,
html[dir="rtl"] .cd-tf-cur,
html[dir="rtl"] .cd-ranges,
html[dir="rtl"] .at-sb-clock,
html[dir="rtl"] .at-sb-ver,
html[dir="rtl"] .at-sb-lat,
html[dir="rtl"] .at-num,
html[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .cd-caret { transform: none; }
/* The full views (Sectors, Trend, Strata, Screener, Order flow, calendar week): the widget rail is on the left in RTL,
   so the view leaves its room there (chartdeck.css reserves the right). */
html[dir="rtl"] .at-sec { right: 0 !important; left: calc(var(--a-wbar-w) + 1px); }
html[dir="rtl"] body.cd-zen .at-sec { left: 0; }
@media (max-width: 820px) { html[dir="rtl"] .at-sec { left: 0; } }
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[inputmode="decimal"] { direction: ltr; text-align: right; }

/* Scripts Sora does not cover fall back per glyph to the system face; give them the room they need. */
html[lang="ar"] body, html[lang="hi"] body { line-height: var(--a-lh-body); }
html[lang="ja"] .cd-tb-t, html[lang="zh-CN"] .cd-tb-t, html[lang="zh-TW"] .cd-tb-t, html[lang="ko"] .cd-tb-t { letter-spacing: 0; }

/* Long labels (German, Russian, ...) must never push the top bar out of shape. */
.cd-top .cd-tb-t { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Settings > Language ---- */
.cdl { display: flex; flex-direction: column; gap: var(--a-sp-5); min-height: 0; }
.cdl-h { margin: 0; font: var(--a-fw-semibold) var(--a-fs-xl)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); letter-spacing: -.01em; }
.cdl-sub { margin: var(--a-sp-2) 0 0; font: var(--a-fw-regular) var(--a-fs-md)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }
.cdl-search {
    display: flex; align-items: center; gap: var(--a-sp-4); height: 36px; padding: 0 var(--a-sp-5);
    border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); background: var(--a-bg);
}
.cdl-search:focus-within { border-color: var(--a-accent); }
.cdl-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--a-fg-3); stroke-width: 1.5; stroke-linecap: round; }
.cdl-search input {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: var(--a-fg-1); font: inherit; font-size: var(--a-fs-md);
}
.cdl-list {
    list-style: none; margin: 0; padding: var(--a-sp-2); display: flex; flex-direction: column; gap: var(--a-sp-1);
    /* up to 54 % of the window: the box showed 7 of 17 languages above 180 px of empty dialog (screenshot review 2026-10-13) */
    border: 1px solid var(--a-line-1); border-radius: var(--a-r-lg); max-height: min(560px, 54vh); overflow-y: auto;
}
.cdl-opt {
    display: flex; align-items: center; gap: var(--a-sp-5); width: 100%; min-height: 44px; padding: var(--a-sp-2) var(--a-sp-5);
    border: 0; border-radius: var(--a-r-md); background: transparent; color: var(--a-fg-2);
    font: inherit; text-align: start; cursor: pointer;
}
.cdl-opt:hover, .cdl-opt:focus-visible { background: var(--a-hover); color: var(--a-fg-1); outline: 0; }
.cdl-opt[aria-checked="true"] { background: var(--a-accent-t1); color: var(--a-fg-1); }
.cdl-opt-t { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.cdl-native { font-size: var(--a-fs-md); font-weight: var(--a-fw-medium); color: inherit; unicode-bidi: isolate; }
.cdl-en { font-size: var(--a-fs-sm); color: var(--a-fg-3); }
.cdl-check { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--a-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.cdl-opt[aria-checked="true"] .cdl-check { visibility: visible; }
.cdl-sep { height: 1px; margin: var(--a-sp-2) var(--a-sp-4); background: var(--a-line-1); list-style: none; }
.cdl-empty { padding: var(--a-sp-5) var(--a-sp-5); font-size: var(--a-fs-md); color: var(--a-fg-3); list-style: none; }
.cdl-status { min-height: 18px; font-size: var(--a-fs-sm); color: var(--a-fg-3); }
.cdl-status.err { color: var(--a-loss, #FF6B81); }
.cdl-note { margin: 0; font-size: var(--a-fs-sm); line-height: var(--a-lh-body); color: var(--a-fg-3); }
.cdl-note a { color: var(--a-accent); text-decoration: none; }
.cdl-note a:hover { text-decoration: underline; }

/* 1.0.2 (review 0.9.74 L / B2: the Arabic legend read "2 100" for the regression's "100 2", and the volume row's bold title sat
   in the middle of its own note): the chart area stays left to right (operator 2026-10-21, review T#46: .at-charts above), so
   each piece of a legend row is its own bidi run, as a <bdi> would make it. The title, its parameters / note, each value's label
   and number, and an info item keep their order in the row and read correctly inside; a run with no Arabic letter (the
   parameters "100 2", a price) stays left to right. The Big trades row (cd-flow.js) isolates its own values already. */
html[dir="rtl"] .cd-slg-t,
html[dir="rtl"] .cd-slg-p,
html[dir="rtl"] .cd-slg-vt,
html[dir="rtl"] .cd-slg-vv,
html[dir="rtl"] .cd-slg-it { unicode-bidi: plaintext; }

/* 1.0.2 (review 0.9.74 T1, Arabic): the status dots of the session chips and of the event pill sat against the code / name
   ("●NY", the gap was a margin-right on the wrong side); the gap goes after the dot in reading order */
html[dir="rtl"] .at-sb-sess.open::before,
html[dir="rtl"] .at-sb-sess.lane::before,
html[dir="rtl"] .at-sb-cal::before { margin-right: 0; margin-left: var(--a-sp-2); }
html[dir="rtl"] .at-sb-cal::before { margin-left: var(--a-sp-4); }