/* RTL and Arabic typography layer.
   Applies only when the page is in Arabic (html[dir="rtl"]). The base design lives in style.css;
   Arabic-specific adjustments belong in this file only. */
/* programme PRD 13.5: Arabic has the same two voices as Latin. Headings and verdicts take the Center's Arabic publication
   face (Noto Naskh Arabic, the face of its Arabic deliverables): every rule that sets var(--display) follows. Reading,
   labels, tables, charts and figures take IBM Plex Sans Arabic; figures stay Western digits in both faces. */
html[dir="rtl"]{--display:var(--display-ar);--mono:'IBM Plex Sans Arabic','Source Sans 3',sans-serif}
html[dir="rtl"] body{font-family:var(--arabic)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .brand-main b{font-family:var(--display);letter-spacing:0;line-height:var(--lh-ar-head)}
html[dir="rtl"] .dd-btn,html[dir="rtl"] .dd-head b,
html[dir="rtl"] table.list td.n,html[dir="rtl"] .card .unit{font-family:var(--arabic);letter-spacing:0}
/* labels set in the mono face take the Arabic face, with no tracking or capitals */
html[dir="rtl"] .eyebrow,html[dir="rtl"] .brand-sub,html[dir="rtl"] .nav a,html[dir="rtl"] .chip,html[dir="rtl"] .tabs button,
html[dir="rtl"] table.list th,html[dir="rtl"] table.gl th,html[dir="rtl"] .dd-label,html[dir="rtl"] .pins .lab,html[dir="rtl"] .picker label,
html[dir="rtl"] .fact span,html[dir="rtl"] .reading .tag,html[dir="rtl"] #dd-list li.grp,html[dir="rtl"] .flag,html[dir="rtl"] .src,
html[dir="rtl"] .foot,html[dir="rtl"] .tape-h,html[dir="rtl"] .tape-l,html[dir="rtl"] .tape-y,html[dir="rtl"] .tape-s,html[dir="rtl"] .spine .sp-l,
html[dir="rtl"] .spine .sp-k,html[dir="rtl"] .spine .sp-v,html[dir="rtl"] .dd-count,html[dir="rtl"] .auth-card label,html[dir="rtl"] .newgrid label,
html[dir="rtl"] .al-prefs .lbl,html[dir="rtl"] .kv span,html[dir="rtl"] .val span,html[dir="rtl"] .strip .ends,html[dir="rtl"] .nav .nav-parent{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .chip,html[dir="rtl"] .nav a,html[dir="rtl"] .tabs button,html[dir="rtl"] .tabs a,html[dir="rtl"] table.list th,html[dir="rtl"] table.gl th,html[dir="rtl"] .nav .nav-parent{font-size:.9rem}
html[dir="rtl"] .brand-sub,html[dir="rtl"] .tape-h,html[dir="rtl"] .tape-l,html[dir="rtl"] .tape-y,html[dir="rtl"] .tape-s,html[dir="rtl"] .spine .sp-l,html[dir="rtl"] .spine .sp-k,html[dir="rtl"] .spine .sp-rel,html[dir="rtl"] .src,html[dir="rtl"] .card .src,html[dir="rtl"] .world-src{font-size:.86rem}
html[dir="rtl"] .foot,html[dir="rtl"] .world-foot{font-size:.95rem;line-height:1.8}
html[dir="rtl"] .lede,html[dir="rtl"] .world-lede,html[dir="rtl"] .panel p,html[dir="rtl"] .reading{line-height:1.85}
/* map chips, readout, tooltip and form labels take the Arabic face at a readable size */
html[dir="rtl"] .world-chips button,html[dir="rtl"] .world-tip .cta,html[dir="rtl"] .world-read .wr-name,html[dir="rtl"] .tape-clock,html[dir="rtl"] .editgrid label,html[dir="rtl"] .hint{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .world-chips button{font-size:.9rem;line-height:1.5}
html[dir="rtl"] .world-tip{font-size:.95rem;line-height:1.7}
html[dir="rtl"] .auth-card label,html[dir="rtl"] .newgrid label,html[dir="rtl"] .al-prefs .lbl{font-size:.95rem}
html[dir="rtl"] .auth-card input,html[dir="rtl"] .newgrid input,html[dir="rtl"] .editgrid input{font-family:var(--arabic)}
html[dir="rtl"] .brand-main b{font-size:1.25rem;line-height:1.5}
html[dir="rtl"] .brand-short{font-family:var(--display);letter-spacing:.14em}
html[dir="rtl"] .brand-alt[lang="en"]{text-align:start}

/* Give Arabic glyphs room in the compact Latin heading/value line boxes. */
html[dir="rtl"] .lead-main h1,html[dir="rtl"] .sp-panel h2,html[dir="rtl"] .card h3,html[dir="rtl"] .reader-head h1{line-height:1.45}
html[dir="rtl"] .kv b,html[dir="rtl"] .val b{line-height:1.3}
html[dir="rtl"] .spine .sp-v{line-height:1.6}

/* Numbers keep the mono face and read left to right inside Arabic text. */
html[dir="rtl"] .num,html[dir="rtl"] .tape-v,html[dir="rtl"] .kv b,html[dir="rtl"] .val b,html[dir="rtl"] .fact b,html[dir="rtl"] .spine .sp-n{font-family:var(--mono)}
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,html[dir="rtl"] .spark{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}
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"] .cchip{padding-inline-start:.6rem;padding-inline-end:.35rem}
html[dir="rtl"] .nav a::after,html[dir="rtl"] .nav .nav-parent::after{transform-origin:100% 50%}
html[dir="rtl"] .rule-brass::before{transform-origin:100% 50%}

/* 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}
/* a date field on an Arabic page: its digits run left to right, the field and its value sit at the start (right) like the
   other fields of the form (PRD decision tools 13.2, 1 November 2026) */
html[dir="rtl"] input[type="date"]:not(.asof-row input){text-align:right}
html[dir="rtl"] input[type="date"]::-webkit-date-and-time-value{text-align:right}
@media (max-width: 760px){ html[dir="rtl"] .brand-main b{font-size:1.05rem;line-height:1.45} }
/* section 17: the larger masthead name in Arabic */
html[dir="rtl"] .brand-main b{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.45}
@media (max-width: 760px){ html[dir="rtl"] .brand-main b{font-size:1.1rem;line-height:1.45} }
html[dir="rtl"] .hd-k{letter-spacing:0;text-transform:none;font-family:var(--arabic);font-size:.9rem}
html[dir="rtl"] .guide-steps b{font-family:var(--arabic)}
/* section 17.1: key figures drawn; time runs right to left, as in the charts */
html[dir="rtl"] .kz-step svg{transform:scaleX(-1)}
html[dir="rtl"] .kz-d,html[dir="rtl"] .kz-ends small{font-family:var(--arabic);font-size:.8rem;line-height:1.35}
html[dir="rtl"] .kz-v,html[dir="rtl"] .kz-ends em{font-family:var(--mono)}
html[dir="rtl"] .kz-chip{font-family:var(--arabic);font-size:.78rem}
html[dir="rtl"] .kz-note{font-family:var(--arabic);font-size:.8rem;line-height:1.6}
html[dir="rtl"] .tape-in.more{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 3.5rem),transparent)}
html[dir="rtl"] :is(h1,h2,h3)[dir="auto"]{text-align:right}
@media (max-width: 760px){ html[dir="rtl"] .nav a,html[dir="rtl"] .nav .nav-parent{font-size:.78rem;letter-spacing:0} html[dir="rtl"] .tabs button,html[dir="rtl"] .tabs a{font-size:.82rem} }
/* key figures: Arabic words in the Arabic face, figures in the figure face */
html[dir="rtl"] .kv b{font-family:var(--arabic);font-weight:700}
html[dir="rtl"] .kv b .kn{font-family:var(--mono);font-weight:600}
/* section 18.1: rankings view */
html[dir="rtl"] .rk-chip-n,html[dir="rtl"] .rk-pub,html[dir="rtl"] .rk-card h4,html[dir="rtl"] .rk-meta span,html[dir="rtl"] .rk-ye h3,html[dir="rtl"] .rk-out .rk-lbl,html[dir="rtl"] .rk-mv{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .rk-chip-n,html[dir="rtl"] .rk-card h4,html[dir="rtl"] .rk-meta span,html[dir="rtl"] .rk-ye h3{font-size:.84rem}
html[dir="rtl"] .rk-card h3,html[dir="rtl"] .rk-out .rk-range{font-family:var(--display);line-height:1.6}
html[dir="rtl"] .rk-chip b,html[dir="rtl"] .rk-big b{font-family:var(--mono)}
html[dir="rtl"] .rk-big b:not(.num),html[dir="rtl"] .rk-chip b:not(:has(bdi)){font-family:var(--arabic)}
html[dir="rtl"] .nm-t{font-family:var(--display);font-size:1.06rem}
html[dir="rtl"] .nm-p{font-size:.94rem}
html[dir="rtl"] .nm-m{font-family:var(--arabic);letter-spacing:0;font-size:.82rem}
html[dir="rtl"] .nm-m[dir="ltr"]{text-align:right}
/* CEPA */
html[dir="rtl"] .cp-st,html[dir="rtl"] .cp-kind,html[dir="rtl"] .cp-col h3,html[dir="rtl"] .cp-hs,html[dir="rtl"] .cp-fcsc span,html[dir="rtl"] .cp-ftot span,html[dir="rtl"] .cp-fgrid h4,html[dir="rtl"] .cp-card h4,html[dir="rtl"] .cp-srcl,html[dir="rtl"] .cp-filters button{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .cp-st,html[dir="rtl"] .cp-col h3,html[dir="rtl"] .cp-fcsc span,html[dir="rtl"] .cp-ftot span,html[dir="rtl"] .cp-fgrid h4,html[dir="rtl"] .cp-card h4{font-size:.84rem}
html[dir="rtl"] .cp-tile span,html[dir="rtl"] .cp-tbl td.yr,html[dir="rtl"] .cp-mentions .yr{font-family:var(--arabic)}
html[dir="rtl"] .cp-fhead h3,html[dir="rtl"] .cp-card h3{font-family:var(--display);line-height:1.6}
html[dir="rtl"] .cp-figs b{font-family:var(--arabic)}
html[dir="rtl"] .cp-figs b bdi,html[dir="rtl"] .cp-fcsc b bdi,html[dir="rtl"] .cp-ftot b bdi{font-family:var(--mono)}
html[dir="rtl"] .cp-bs h5,html[dir="rtl"] .cp-stab .cp-stab-sh{font-family:var(--arabic)}
html[dir="rtl"] .cp-pick-l span,html[dir="rtl"] .cp-col-n,html[dir="rtl"] .cp-tbl td::before{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .cp-pn .cp-of{font-family:var(--arabic)}
html[dir="rtl"] .cp-pick-l select{font-family:var(--arabic)}
html[dir="rtl"] .cp-nd{font-family:var(--arabic)}
html[dir="rtl"] .fl-ev-k,html[dir="rtl"] .fl-tag,html[dir="rtl"] .fl-ro{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[dir="rtl"] .fl-ev h4{font-family:var(--arabic)} html[dir="rtl"] .fl-h3{font-family:var(--display)}
html[dir="rtl"] .fl-tbl td.v .fl-d{font-family:var(--arabic)}
/* section 27.2: the compact menu on screens wider than a phone keeps the Arabic face */
@media (min-width: 761px){ html[dir="rtl"] .top.nav-compact .nav a,html[dir="rtl"] .top.nav-compact .nav .nav-parent{font-family:var(--arabic);font-size:.85rem;letter-spacing:0} }
/* docs/PRD.md Section 46 (the sweep): today's pulse on the home page, in Arabic at iPad widths, ran 98 px past the screen's
   start (its date and its link do not shrink and are longer in Arabic), so the page scrolled sideways; between the
   phone and the computer the bar takes the phone's two-row layout in Arabic */
@media (min-width: 761px) and (max-width: 1199px){
  html[dir="rtl"] .pulse{flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
  html[dir="rtl"] .pulse-say{flex-basis:100%;order:2}
  html[dir="rtl"] .pulse-line{order:1}
  html[dir="rtl"] .pulse a{order:4;padding-block:var(--sp-2)}
  html[dir="rtl"] .pulse-bar .pulse-asof{order:3}
}