/* =============================================================
   LANGUAGE SWITCHER
   ============================================================= */
.langswitch {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-inline-start: 4px;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
}

.langswitch__item {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-35);
  padding: 6px 7px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.langswitch__item:hover { color: var(--navy); }
.langswitch__item.is-active { color: var(--navy); border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .langswitch {
    margin: 8px 0 14px;
    padding: 10px 2px 0;
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }
  .langswitch__item { padding-inline: 0; margin-inline-end: 14px; font-size: 10px; }
}

/* =============================================================
   ARABIC / RTL
   The 3-D review copy is a physical object and keeps its own
   geometry; the text inside it is switched by .is-ar in app.js.
   ============================================================= */
html[dir="rtl"] body {
  font-family: var(--arabic);
  font-size: 16.5px;
  line-height: 1.9;
}

/* Arabic is a joined script: tracking breaks the joins, so drop it. */
html[dir="rtl"] body * { letter-spacing: 0 !important; }
html[dir="rtl"] .langswitch__item { letter-spacing: 0.12em !important; }

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero__title,
html[dir="rtl"] .plate__title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .doc-hero h1,
html[dir="rtl"] .inst__name,
html[dir="rtl"] .step__title,
html[dir="rtl"] .modal__title,
html[dir="rtl"] .unlocked__title,
html[dir="rtl"] .wordmark__name,
html[dir="rtl"] .credbar__name {
  font-family: var(--arabic);
  font-weight: 700;
  line-height: 1.35;
}

html[dir="rtl"] .hero__title {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 22px;
}
html[dir="rtl"] .hero__title em { font-style: normal; }
html[dir="rtl"] .hero__lede { font-size: 16px; line-height: 1.95; }
html[dir="rtl"] .wordmark__name { font-size: 24px; }
html[dir="rtl"] .section-title { font-size: clamp(26px, 3.2vw, 42px); }
html[dir="rtl"] .plate__title { font-size: clamp(24px, 2.8vw, 34px); }

html[dir="rtl"] .eyebrow { font-size: 11px; }
html[dir="rtl"] .mono { font-family: var(--mono); }

/* Latin words inside Arabic copy keep their own face and direction. */
html[dir="rtl"] .langswitch__item { font-family: var(--mono); }

html[dir="rtl"] .topline { font-size: 11px; }
html[dir="rtl"] .masthead__nav a { font-size: 13px; }
html[dir="rtl"] .btn { font-size: 13px; }
html[dir="rtl"] .field__label { font-size: 13px; }
html[dir="rtl"] .input,
html[dir="rtl"] select.input { font-family: var(--arabic); font-size: 15px; }

html[dir="rtl"] select.input {
  background-position: 18px 50%, 13px 50%;
  padding-inline: 13px 36px;
}

html[dir="rtl"] .toast { inset-inline-start: 20px; }

/* The review-copy tabs read in the order the editions were published. */
html[dir="rtl"] .stage__tab { font-family: var(--mono); }

/* Arabic numerals stay Latin on purpose: they match the printed manuals. */
html[dir="rtl"] .p1__contents li,
html[dir="rtl"] .index-band__list li { direction: rtl; }

/* The review copy is a physical object, so in Arabic it is mirrored rather
   than re-styled: the two boards swap sides, the cover hinges on the spine
   from the right, and the closed copy sits in the middle of its own column
   (in LTR it is the right-hand board; here it is the left-hand one). */
html[dir="rtl"] .bookstage { perspective-origin: 56% 46%; }
@media (min-width: 721px) {
  html[dir="rtl"] .book3d {
    transform: translateX(25%) rotateY(7deg) rotateX(2deg) scale(1.06);
  }
  html[dir="rtl"] .book3d.is-open,
  html[dir="rtl"] .book3d:hover {
    transform: translateX(0) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

/* page one moves to the left-hand board; its spine edge and shadow follow */
html[dir="rtl"] .book3d__page {
  left: 0;
  right: auto;
  border-right: 0;
  border-left: 1px solid rgba(15, 35, 56, 0.14);
  box-shadow: inset -14px 0 26px -20px rgba(15, 35, 56, 0.55);
  background: linear-gradient(to right, #ffffff 0%, #fdfbf5 54%, #efeade 100%);
}
html[dir="rtl"] .book3d__page::after {
  background: linear-gradient(to left, rgba(15, 35, 56, 0.2), rgba(15, 35, 56, 0) 26%);
}

/* the cover hinges on the spine, which is now its right-hand edge */
html[dir="rtl"] .book3d__cover { left: 0; right: auto; transform-origin: right center; }
html[dir="rtl"] .book3d.is-open .book3d__cover { transform: rotateY(168deg); }
@media (hover: hover) and (pointer: fine) {
  html[dir="rtl"] .book3d:hover .book3d__cover { transform: rotateY(168deg); }
}

/* cloth shading swaps edges with the binding */
html[dir="rtl"] .cover3d__front::before {
  left: auto;
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}
html[dir="rtl"] .cover3d__front::after {
  right: auto;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32));
}
html[dir="rtl"] .book3d[data-edition="fr"] .cover3d__front::before {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
}

/* Phone: one portrait page, so only the hinge side changes. */
@media (max-width: 720px) {
  html[dir="rtl"] .book3d,
  html[dir="rtl"] .book3d.is-open,
  html[dir="rtl"] .book3d:hover { transform: none; }
  html[dir="rtl"] .book3d__cover { left: 0; right: 0; transform-origin: right center; }
  html[dir="rtl"] .book3d.is-open .book3d__cover,
  html[dir="rtl"] .book3d:hover .book3d__cover { transform: rotateY(158deg); }
  html[dir="rtl"] .book3d__page {
    left: 0;
    right: 0;
    box-shadow: none;
    background: linear-gradient(to left, #ffffff 0%, #fdfbf5 62%, #f0ebde 100%);
  }
}

html[dir="rtl"] .stage__hint { text-align: end; }

/* Keep the credit bar and footer from pushing a scrollbar once the Arabic
   labels wrap onto two lines. */
html[dir="rtl"] .credbar__label { white-space: normal; }

/* Latin runs inside Arabic copy keep their own direction and never break at
   hyphens across the line. */
html[dir="rtl"] .lat {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-family: var(--sans);
}
html[dir="rtl"] .lat a { font-family: inherit; }