html[dir="rtl"] .site-header nav {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] {
  font-family: "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] .site-header,
html[dir="rtl"] .layout,
html[dir="rtl"] .hero,
html[dir="rtl"] .pathway-controls,
html[dir="rtl"] .search-row,
html[dir="rtl"] .course-grid,
html[dir="rtl"] .course-feature,
html[dir="rtl"] .feedback-panel,
html[dir="rtl"] footer {
  direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] label,
html[dir="rtl"] summary,
html[dir="rtl"] .button,
html[dir="rtl"] .text-button {
  text-align: start;
}

/* Preserve identifiers, revisions, dates, currencies and correlation values. */
html[dir="rtl"] code,
html[dir="rtl"] .pill,
html[dir="rtl"] progress,
html[dir="rtl"] [data-bidi="isolate"],
html[dir="rtl"] [data-correlation-reference] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

html[dir="rtl"] .pathway-controls,
html[dir="rtl"] .pathway-controls label,
html[dir="rtl"] .practice-fields,
html[dir="rtl"] .practice-field,
html[dir="rtl"] .scenario-choice {
  text-align: start;
}

html[dir="rtl"] .course-meta span:not(:last-child)::after {
  border-left: 0;
  border-right: 1px solid var(--line);
  margin-left: 0;
  margin-right: .7rem;
}

html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  font-family: inherit;
}

html[dir="rtl"] .status-dot {
  right: auto;
  left: 1.3rem;
}

html[dir="rtl"] .text-button {
  text-align: right;
}

html[dir="rtl"] .practice-journey,
html[dir="rtl"] .course-feature,
html[dir="rtl"] .callout,
html[dir="rtl"] .live-summary {
  border-left-width: 1px;
  border-right: 4px solid var(--green);
}

html[dir="rtl"] .course-feature,
html[dir="rtl"] .callout {
  border-right-color: var(--gold);
}

html[dir="rtl"] .dialog-close {
  right: auto;
  left: 1rem;
}

html[dir="rtl"] .steps,
html[dir="rtl"] .evidence-card ul,
html[dir="rtl"] .practice-journey ol {
  padding-left: 0;
  padding-right: 1.35rem;
}

@media (max-width: 850px) {
  html[dir="rtl"] .profile {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 620px) {
  html[dir="rtl"] .site-header {
    gap: .5rem;
    align-items: flex-start;
  }

  html[dir="rtl"] .brand {
    min-width: 0;
    flex: 1 1 10rem;
  }

  html[dir="rtl"] .brand span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html[dir="rtl"] .profile {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  html[dir="rtl"] .locale-picker,
  html[dir="rtl"] .locale-picker select {
    min-width: 0;
    max-width: 100%;
  }
}