/* RTL and Arabic typography layer.
   Applies only when the page is in Arabic (html[dir="rtl"]). The base design lives in style.css and is not edited;
   Arabic-specific adjustments belong in this file only. Starter rules below; extend as needed. */
html[dir="rtl"] body{font-family:var(--arabic)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .brand b,html[dir="rtl"] .kv b,html[dir="rtl"] .val b,html[dir="rtl"] .fact b{font-family:var(--arabic)}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .brand span,html[dir="rtl"] .picker label,html[dir="rtl"] .pins .lab,
html[dir="rtl"] table.list th,html[dir="rtl"] table.gl th,html[dir="rtl"] .fact span,html[dir="rtl"] .reading .tag{letter-spacing:0;text-transform:none}

/* Give Arabic glyphs room in the compact Latin heading/value line boxes. */
html[dir="rtl"] .brand{line-height:1.5}
html[dir="rtl"] .lead-main h1,
html[dir="rtl"] .card h3,
html[dir="rtl"] .kv b,
html[dir="rtl"] .val b{line-height:1.5}
html[dir="rtl"] .card .unit{font-family:var(--arabic)}

/* Navigation follows Arabic reading order. */
html[dir="rtl"] .linkrow .ico{transform:scaleX(-1)}
html[dir="rtl"] .pins .lab{flex:none;white-space:nowrap}
/* JavaScript places RTL chart points and strip endpoints; do not mirror them in CSS. */
html[dir="rtl"] .chart,
html[dir="rtl"] .strip{direction:ltr}
html[dir="rtl"] .strip .ends > span{direction:rtl;unicode-bidi:isolate}
html[dir="rtl"] #dd-list li small{direction:ltr;unicode-bidi:isolate}

/* The new picker, dirham equivalents and account forms use Arabic typography. */
html[dir="rtl"] .dd-head b,
html[dir="rtl"] .val .aed,
html[dir="rtl"] .kv .aed,
html[dir="rtl"] .fact .aed,
html[dir="rtl"] table.gl .aed{font-family:var(--arabic)}
html[dir="rtl"] .dd-label,
html[dir="rtl"] #dd-list li.grp,
html[dir="rtl"] .auth-card label,
html[dir="rtl"] .newgrid label,
html[dir="rtl"] .al-prefs .lbl{letter-spacing:0;text-transform:none}
html[dir="rtl"] .cchip{padding-inline-start:.6rem;padding-inline-end:.35rem}

/* Keep Latin usernames, credentials and date fields in their entry order. */
html[dir="rtl"] .auth-card input[autocomplete="username"],
html[dir="rtl"] body[data-page="setup"] #u,
html[dir="rtl"] .newgrid #nu,
html[dir="rtl"] .pwrow input,
html[dir="rtl"] .auth-card input[type="password"],
html[dir="rtl"] input[type="date"]{direction:ltr;text-align:left}