/* Language switch (English | اردو), text size, and the few right-to-left rules that logical properties
   cannot express. Layout itself flips through logical properties in the other vault CSS. */

/* Language: no box. The open language is ink, the other teal, both 600, a 1px line between. */
.lang-switch { display: flex; align-items: center; gap: var(--ds-s2); margin: 0; padding: 0; }
.lang-switch-btn { position: relative; flex: none; min-height: var(--ds-tap); padding: var(--ds-s1) var(--ds-s3); background: none; border: 0; border-radius: var(--ds-radius); font: 600 var(--ds-fs-meta)/var(--ds-lh-body) var(--ds-font); color: var(--ds-primary); cursor: pointer; }
.lang-switch-btn[lang="ur"] { font-family: 'Gulzar', 'Segoe UI', Tahoma, sans-serif; font-size: var(--ds-fs-row); line-height: 2; padding-block: var(--ds-s2); }
.lang-switch-btn[aria-current="true"] { color: var(--ds-text); }
.lang-switch-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ds-focus); }
.login-top .lang-switch { margin-inline-end: calc(-1 * var(--ds-s3)); }

/* Arrows and chevrons point the other way when text runs right to left. */
[dir="rtl"] .ds-row__chev,
[dir="rtl"] .ds-row__chev-wrap .ic,
[dir="rtl"] .list-chev,
[dir="rtl"] .ic-arrow,
[dir="rtl"] .back-link .ic { transform: scaleX(-1); }

[dir="rtl"] .paper-fact[aria-expanded="true"] .list-chev { transform: rotate(90deg); }

/* Latin text typed into a field (name, dose) stays left-to-right but sits on the reading side. */
html[dir="rtl"] input[dir="ltr"] { text-align: right; }

/* Text size (Normal / Large / Extra large) in the menu: three buttons, each a sample "Aa".
   The samples are fixed on purpose: they show the three sizes, whatever size is set now. */
.text-size { margin: 0; padding: var(--ds-s1); }
.text-size-label { margin: var(--ds-s1) var(--ds-s1) var(--ds-s2); font: 600 var(--ds-fs-notice)/var(--ds-lh-notice) var(--ds-font); color: var(--ds-muted); }
.text-size-btns { display: flex; gap: var(--ds-s1); }
.text-size-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-s1); min-height: 4.5rem; padding: var(--ds-s2) var(--ds-s1); font-family: var(--ds-font); color: var(--ds-text); background: transparent; border: var(--ds-line) solid var(--ds-border-group); border-radius: var(--ds-radius); cursor: pointer; }
.text-size-btn:focus-visible { outline: 2px solid var(--ds-deep); outline-offset: 2px; }
.text-size-aa { font-weight: 600; line-height: 1.2; }
.text-size-btn--normal .text-size-aa { font-size: 18px; }
.text-size-btn--large .text-size-aa { font-size: 23px; }
.text-size-btn--xlarge .text-size-aa { font-size: 28px; }
.text-size-name { font-size: var(--ds-fs-notice); font-weight: 500; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.text-size-btn[aria-current="true"] { color: var(--ds-deep); background: var(--ds-soft); border-color: var(--ds-deep); border-width: 2px; }
.text-size-btn[aria-current="true"] .text-size-name { font-weight: 700; }