@import url('./arabic-typography.css');
/*
  Additive RTL layout layer for future approved Arabic pages.
  This file is intentionally not loaded by the frozen English pages.
  Arabic documents must set <html lang="ar" dir="rtl"> and load this after
  their existing page and shared stylesheets.
*/

html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] :where(input,textarea,select){text-align:start}
html[dir="rtl"] :where(.site-header-inner,.topbar){direction:rtl}
html[dir="rtl"] .site-primary{margin-left:0;margin-right:auto}
html[dir="rtl"] .site-secondary{margin-left:0;margin-right:4px;padding-left:0;padding-right:12px;border-left:0;border-right:1px solid rgba(18,72,68,.18)}
html[dir="rtl"] .site-mobile{margin-left:0;margin-right:auto}
html[dir="rtl"] .site-mobile nav{right:auto;left:0}
html[dir="rtl"] :where(ul,ol){padding-left:0;padding-right:1.25em}
html[dir="rtl"] :where(blockquote,.lesson,.status,.safety,.ai-context){border-left-width:0;border-right-style:solid}
html[dir="rtl"] :where(.ask-launch,.ask-panel,.ask-sheet){right:auto;left:20px}
html[dir="rtl"] :where(.ask-close){margin-left:0;margin-right:auto}
html[dir="rtl"] :where(.ask-identity){text-align:right}
html[dir="rtl"] :where(.ask-bubble.me,.bubble.me,.chatmsg.visitor){margin-left:0;margin-right:10%}
html[dir="rtl"] :where(.metric){border-left:0;border-right:1px solid rgba(255,255,255,.18)}
html[dir="rtl"] :where(.metric:first-child){border-right:0}
html[dir="rtl"] :where(.record-index,.evidence-step b){font-variant-numeric:tabular-nums}
html[dir="rtl"] :where(.arrow){transform:scaleX(-1)}
html[dir="rtl"] :where(.context-head,.send-row,.recipient-mark){direction:rtl}

/* Mixed-direction technical content remains readable and selectable. */
html[dir="rtl"] :where([dir="ltr"],.technical-token,.formula,.code,.url,email,bdi){direction:ltr;unicode-bidi:isolate;text-align:left}
html[dir="rtl"] :where(.measurement-value,.date,.coordinate,.unit){unicode-bidi:isolate}

@media(max-width:520px){
  html[dir="rtl"] :where(.ask-launch,.ask-panel,.ask-sheet){right:auto;left:0}
  html[dir="rtl"] .ask-launch{left:12px}
  html[dir="rtl"] :where(.metric,.metric:nth-child(4)){border-left:0;border-right:1px solid rgba(255,255,255,.18)}
  html[dir="rtl"] :where(.metric:nth-child(odd)){border-right:0}
}

@media(prefers-reduced-motion:reduce){
  html[dir="rtl"] *{scroll-behavior:auto}
}