/* Right-to-left layout (Arabic). Loaded only when the page is dir="rtl". Flex and grid flip by themselves; this moves what was pinned to the left. */
html[dir="rtl"] body { font-family: system-ui, "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir="rtl"] .side { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .main { margin-left: 0; margin-right: var(--side-w); }
html[dir="rtl"] .area-auth .main { margin-right: 0; }
html[dir="rtl"] .top__right { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .menu a .badge { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .note { border-left-width: 1px; border-right: 4px solid var(--accent); }
html[dir="rtl"] .note--ok { border-right-color: var(--pos); }
html[dir="rtl"] .note--error { border-right-color: var(--neg); }
html[dir="rtl"] .note--warn { border-right-color: var(--warn); }
html[dir="rtl"] .stat--accent { border-left-width: 1px; border-right: 3px solid var(--accent); }
html[dir="rtl"] .stat--pos { border-left-width: 1px; border-right: 3px solid var(--pos); }
html[dir="rtl"] .stat--warn { border-left-width: 1px; border-right: 3px solid var(--warn); }
html[dir="rtl"] .stat--neg { border-left-width: 1px; border-right: 3px solid var(--neg); }
html[dir="rtl"] .tree ul { padding-left: 0; padding-right: 22px; border-left: 0; border-right: 1px dashed var(--line); margin-left: 0; margin-right: 10px; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] th.num, html[dir="rtl"] td.num { text-align: left; }
html[dir="rtl"] .mono, html[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 1000px) {
  html[dir="rtl"] .side { transform: translateX(102%); }
  html[dir="rtl"] #navtoggle:checked ~ .app .side { transform: none; }
  html[dir="rtl"] .main { margin-right: 0; }
}
html[dir="rtl"] .skip { left: auto; right: -999px; }
html[dir="rtl"] .skip:focus { right: 8px; }