/* Settings window (language, profile, account) and the Arabic right-to-left layout */
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.lang-btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-panel); border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); font: 600 var(--text-md) var(--font-body); cursor: pointer; }
/* the Arabic choice is written in an Arabic face (only on this button, so the page keeps its three faces) */
.lang-btn[lang="ar"] { --font-lang-ar: "Amiri", "Noto Naskh Arabic", serif; font-family: var(--font-lang-ar); font-size: var(--text-lg); }
.lang-btn.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.acct-form + .acct-form { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--line); }
.acct-who { margin-bottom: var(--space-sm); }
#hdr-name { color: var(--accent); }

/* ---------- Arabic ---------- */
:root[lang="ar"] { --font-display: "Amiri", "Noto Naskh Arabic", serif; --font-body: "Noto Naskh Arabic", "Amiri", "Lora", serif; --font-mono: "JetBrains Mono", "Noto Naskh Arabic", ui-monospace, monospace; /* letters fall back to the Arabic font */
}
/* Arabic letters join; spacing between them breaks the words */
:root[lang="ar"] body * { letter-spacing: 0 !important; }
:root[lang="ar"] body { line-height: 1.7; }
/* the brand name stays in its Latin blackletter */
:root[lang="ar"] .brand h1 { font-family: var(--font-brand); }
:root[lang="ar"] .eyebrow, :root[lang="ar"] .stat .k, :root[lang="ar"] th { font-size: var(--text-sm); }
/* numbers, money and charts read left to right */
:root[lang="ar"] .big, :root[lang="ar"] .cb-case, :root[lang="ar"] .day .dn, :root[lang="ar"] .day .pl { direction: ltr; unicode-bidi: isolate; }
:root[lang="ar"] td.n, :root[lang="ar"] th.n { text-align: left; }
:root[lang="ar"] .bar, :root[lang="ar"] .bar-labels, :root[lang="ar"] .curve svg { direction: ltr; }
:root[lang="ar"] input[type="number"], :root[lang="ar"] input[type="date"], :root[lang="ar"] input[type="email"], :root[lang="ar"] input[type="password"] { direction: ltr; text-align: right; }
/* the guides' notes: the character keeps his side, the text runs right to left */
:root[lang="ar"] .coach { direction: ltr; }
:root[lang="ar"] .coach-card { direction: rtl; text-align: right; }
:root[lang="ar"] .coach-text { font-style: normal; font-size: var(--text-md); line-height: 1.75; }
:root[lang="ar"] .notebook .quote, :root[lang="ar"] .bubble, :root[lang="ar"] .set-why { font-style: normal; }
:root[lang="ar"] .deduce-stamp { font-size: var(--text-3xl); }
/* progress bars fill from the right in Arabic: mirror the bar, keep its texts readable */
:root[lang="ar"] .bar, :root[lang="ar"] .bar-labels { transform: scaleX(-1); }
:root[lang="ar"] .bar .pin { transform: translateX(-50%) scaleX(-1); }
:root[lang="ar"] .bar-labels span { transform: translateX(-50%) scaleX(-1); }
:root[lang="ar"] .bar-labels span.first { transform: scaleX(-1); }
:root[lang="ar"] .bar-labels span.last { transform: translateX(-100%) scaleX(-1); }
/* previous / next month arrows point the reading way */
:root[lang="ar"] #cal-prev, :root[lang="ar"] #cal-next { transform: scaleX(-1); }
:root[lang="ar"] .signout-btn .ic { transform: scaleX(-1); } /* the arrow points out of the door, in the reading direction */