/* Languages, scripts, right-to-left and the display currency (public/i18n.js). Loaded after ui.css and app.css.
   Fonts: system fonts only (nothing from another site, #112), with a native face for each
   script so Arabic, Hindi, Japanese and Chinese read as well as English does. */

/* While a translation loads (at most 1.5s), the page waits instead of flashing English. */
html.i18n-wait body { visibility: hidden; }

/* ---------- scripts ---------- */
html:lang(ar) { --sans: system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html:lang(hi) { --sans: system-ui, -apple-system, "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; }
html:lang(ja) { --sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; }
html:lang(zh) { --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
/* Connected and tall scripts need a little more air; tracking is for Latin only. */
html:lang(ar) body, html:lang(hi) body { line-height: 1.75; }
html:lang(ar) *, html:lang(hi) *, html:lang(ja) *, html:lang(zh) * { letter-spacing: 0 !important; }
html:lang(ja) body, html:lang(zh) body { line-height: 1.75; word-break: normal; line-break: strict; }
html:lang(ja) .hero-title, html:lang(zh) .hero-title { line-height: 1.3; }
html:lang(ar) .hero-title, html:lang(hi) .hero-title { line-height: 1.35; }
/* Uppercase labels: meaningless in these scripts, so they keep their weight instead. */
html:lang(ar) .t-eyebrow, html:lang(hi) .t-eyebrow, html:lang(ja) .t-eyebrow, html:lang(zh) .t-eyebrow { text-transform: none; }
/* Long German and other compounds wrap rather than overflow. */
html:lang(de) h1, html:lang(de) h2, html:lang(de) h3, html:lang(de) .link, html:lang(de) button { hyphens: auto; -webkit-hyphens: auto; }
/* Quoted English (filings, records) inside a translated page keeps the Latin face. */
[lang="en"] { font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; }

/* ---------- right to left (Arabic) ---------- */
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .how::before { margin-right: 0; margin-left: 3px; }
[dir="rtl"] .banner { border-left: 0; border-right: 3px solid var(--blue); border-radius: var(--r-sm) 0 0 var(--r-sm); }
[dir="rtl"] .menu-dot { right: auto; left: 8px; }
[dir="rtl"] .brand .word { object-position: right; }
[dir="rtl"] .badge { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .wp-checks, [dir="rtl"] .consent, [dir="rtl"] .today, [dir="rtl"] .starters, [dir="rtl"] .starter,
[dir="rtl"] .fcard, [dir="rtl"] .replay-card, [dir="rtl"] .deeper > button, [dir="rtl"] .menu button, [dir="rtl"] .list .q,
[dir="rtl"] .t-end .banner, [dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] .picker-results button { text-align: right; }
[dir="rtl"] td.num, [dir="rtl"] th.num { text-align: left; }
[dir="rtl"] .wp-checks li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .wp-checks li::before { left: auto; right: 4px; }
[dir="rtl"] .t-list li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .t-list li::before { left: auto; right: 2px; }
[dir="rtl"] .soon { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .fc-key span + span, [dir="rtl"] .fc-key .k-range, [dir="rtl"] .fc-key .k-floor { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .fc-key .k-item > span { margin-right: 0 !important; margin-left: 6px; }
[dir="rtl"] .t-alert { border-left: 0; border-right: 4px solid var(--bad); }
[dir="rtl"] .t-sources ol, [dir="rtl"] .t-outcome, [dir="rtl"] #legal-dialog ul, [dir="rtl"] #q-searches, [dir="rtl"] .pitch ul { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] .elapsed, [dir="rtl"] .ev-cost, [dir="rtl"] .right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .find { border-left: 1px solid var(--line); border-right: 3px solid var(--blue); border-radius: var(--r) 0 0 var(--r); }
[dir="rtl"] .md li { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .md ol > li::before { left: auto; right: 0; }
[dir="rtl"] .md ul > li::before { left: auto; right: 9px; }
[dir="rtl"] .caret { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .md ul.tl { border-left: 0; border-right: 2px solid var(--blue-soft); margin-left: 0; margin-right: var(--s2); }
[dir="rtl"] .md ul.tl > li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .md ul.tl > li::before { left: auto; right: -7px; }
[dir="rtl"] .md .against, [dir="rtl"] .md .change, [dir="rtl"] .md .seat, [dir="rtl"] .md .vote { border-left-width: 1px; }
[dir="rtl"] .deeper > button:hover { transform: translateX(-3px); }
[dir="rtl"] .menu { left: auto; right: 0; }
[dir="rtl"] .fab { right: auto; left: max(20px, calc(50% - 410px)); }
@media (min-width: 1240px) { [dir="rtl"] .fab { right: auto; left: calc(50% - 410px - 200px); } }
[dir="rtl"] .toggle span::after { left: auto; right: 3px; }
[dir="rtl"] .toggle input:checked + span::after { transform: translateX(-18px); }
[dir="rtl"] .alert.unread { border-left: 1px solid var(--line); border-right: 4px solid var(--bad); }
[dir="rtl"] .alert.unread.medium, [dir="rtl"] .alert.unread.info { border-right-color: var(--blue); }
[dir="rtl"] input[type="file"]::file-selector-button { margin-right: 0; margin-left: 12px; }
[dir="rtl"] #biz-body .sev { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .progress .elapsed, [dir="rtl"] .trail .elapsed, [dir="rtl"] .trail .jump { text-align: left; justify-content: flex-start; }
[dir="rtl"] details > summary::before { margin-right: 0; margin-left: 4px; transform: scaleX(-1); }
[dir="rtl"] details[open] > summary::before { transform: rotate(90deg); }
@media (min-width: 901px) { [dir="rtl"] #wallet-chip { margin-right: 0; margin-left: 6px; } [dir="rtl"] .me-btn { margin-left: 0; margin-right: 6px; } }
@media (max-width: 900px) { [dir="rtl"] .nav-links .link { text-align: right; } }
@media (max-width: 360px) { [dir="rtl"] .inline-ask { padding-left: 0; padding-right: 12px; } }
/* Messages from the server are English for now: each paragraph takes its own direction, so the full stop stays at the end. */
.err, .error, #reauth-why, .toast, #hold-notice { unicode-bidi: plaintext; }
/* Arrows that mean "forward" point the reading way. */
[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
/* Send buttons and the forecast keep their meaning: the send arrow points the reading way; charts stay left to right. */
[dir="rtl"] .send svg, [dir="rtl"] .fab svg { transform: scaleX(-1); }
[dir="rtl"] .fc-svg { direction: ltr; }
/* Codes, IDs, keys and amounts stay left to right inside Arabic text. */
[dir="rtl"] code, [dir="rtl"] .code-in, [dir="rtl"] .code-show, [dir="rtl"] input[type="number"], [dir="rtl"] .usd, [dir="rtl"] .fx, [dir="rtl"] .fx-pair .billed { unicode-bidi: isolate; }
[dir="rtl"] input[type="number"], [dir="rtl"] .code-in { direction: ltr; text-align: right; }

/* ---------- display currency: "≈ €12.90 · billed $14.00" ----------
   The estimate leads in the text's own weight; the charge follows, quieter but always there and always labeled. */
.fx-pair { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-pair .billed { margin-inline-start: .45em; font-weight: 450; color: var(--muted); font-size: .88em; }
.fx-pair .billed::before { content: "·"; margin-inline-end: .45em; color: var(--faint); }
.fx-pair.stale .fx { text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
.usd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.replay-card .fx-pair .billed, .t-replay-card .fx-pair .billed { color: var(--on-ink-muted); }
/* Tight places stack the pair: the estimate, then the charge on a small line beneath. */
.m-price .fx-pair, #wallet-chip .fx-pair, .deeper .go .fx-pair, td.num .fx-pair { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.m-price .fx-pair .billed, #wallet-chip .fx-pair .billed, .deeper .go .fx-pair .billed, td.num .fx-pair .billed { margin: 1px 0 0; font-size: .74rem; }
.m-price .fx-pair .billed::before, #wallet-chip .fx-pair .billed::before, .deeper .go .fx-pair .billed::before, td.num .fx-pair .billed::before { content: none; }
/* The follow-up box has room for one amount: it shows the charge itself (honest, and the same in every currency). */
.inline-ask .price .fx-pair .fx { display: none; }
.inline-ask .price .fx-pair .billed { margin: 0; font-size: inherit; }
.inline-ask .price .fx-pair .billed::before { content: none; }
.balance .w-fx { display: block; font-size: .42em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fx-note { margin-top: 4px; }
.amounts button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.amounts .amt-fx { font-size: .72rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.qfx { margin: -4px 0 var(--s2); color: var(--muted); font-size: .86rem; }

/* ---------- the language and currency picker ---------- */
.prefs-row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--s3); }
.prefs-row label { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 0; }
.prefs-row select { max-width: 100%; }
#acct-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
#acct-prefs .prefs-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { #acct-prefs { grid-template-columns: 1fr; } }
.foot-prefs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); margin: var(--s3) auto 0; max-width: 720px; }
.foot-prefs .prefs-row { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.foot-prefs select { min-height: 40px; width: 210px; padding: 4px 30px 4px 10px; font-size: .84rem; border-radius: var(--r-sm); }
/* on a phone the two pickers stack, on one shared edge and at the full tap height */
@media (max-width: 640px) {
  .foot-prefs { flex-direction: column; align-items: center; }
  .foot-prefs .prefs-row { display: grid; grid-template-columns: 6em 210px; justify-content: center; }
  .foot-prefs .prefs-row label { text-align: end; }
  .foot-prefs select { min-height: 44px; }
}
[dir="rtl"] .foot-prefs select { padding: 4px 10px 4px 30px; }

/* The same picker in the header, on every screen. Signed in, the row is crowded, so it narrows to make room for the links. */
.hdr-prefs { margin-inline-start: auto; flex-shrink: 0; }
.hdr-prefs-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; min-height: 40px; padding: 0 12px; background: var(--surface);
  color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: none; }
.hdr-prefs-btn:hover, .hdr-prefs-btn[aria-expanded="true"] { border-color: var(--blue); background: var(--surface); color: var(--fg); }
.hdr-prefs-cur { color: var(--muted); font-weight: 500; padding-inline-start: 7px; border-inline-start: 1px solid var(--line-strong); }
.hdr-prefs-pop { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; width: min(340px, 100%); padding: var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 6; }
.hdr-prefs-pop select { width: 100%; }
.hdr-prefs-pop .prefs-note { margin: 0; }
/* Wide screens: last in the row, so the panel opens directly under it. */
@media (min-width: 901px) { .hdr-prefs { order: 2; margin-inline-start: 0; } nav.top { margin-inline-start: auto; } header.bar:has(#nav[hidden]) .hdr-prefs { margin-inline-start: auto; } }
@media (max-width: 1280px) { .wrap:has(#nav:not([hidden])) .hdr-prefs-cur { display: none; } }
@media (max-width: 1100px) { .wrap:has(#nav:not([hidden])) .hdr-prefs-name { display: none; } .wrap:has(#nav:not([hidden])) .hdr-prefs-btn { padding: 0 9px; } }

/* ---------- right to left: the brand lockup and the wide sign-in layout ---------- */
/* The lockup (wordmark / …corporate owl. / by Enemo Consulting Group, #191) is an English brand unit: it never mirrors. */
[dir="rtl"] .lockup { direction: ltr; }

/* ---------- desktop header in longer languages ---------- */
/* The logo never shrinks; the links tighten instead (French, German, Spanish and Portuguese run long). */
@media (min-width: 901px) {
  html:not(:lang(en)) header.bar .brand { flex-shrink: 0; }
  html:not(:lang(en)) nav.top .link { padding: 6px 6px; font-size: .93rem; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  html:not(:lang(en)) nav.top .link { font-size: .88rem; padding: 6px 5px; }
}
/* Where the links still need more room than the reading column, the header takes the wide layout's width (as the
   signed-out page does), so it stays balanced instead of running past the column on one side. */
@media (min-width: 1024px) {
  html:not(:lang(en)) .wrap:has(#nav:not([hidden])) > header.bar { width: min(1120px, calc(100vw - 48px)); margin-left: calc((100% - min(1120px, calc(100vw - 48px))) / 2); }
  html[dir="rtl"] .wrap:has(#nav:not([hidden])) > header.bar { margin-left: 0; margin-right: calc((100% - min(1120px, calc(100vw - 48px))) / 2); }
}