/* The Arabic page (ar.html: lang="ar", dir="rtl"): Arabic type, and everything placed left or right mirrored. Both
   pages load this file; every rule here only applies to the Arabic page. The 3D view is framed on the other side of
   the cards in js/main-loop.js and js/explore.js (isRTL()). Flex rows, grids and the alfuix al-ts / al-te corners
   follow the direction by themselves; Bootstrap's tooltips flip their side by themselves too. */

/* ---- type: the Latin fonts stay first (numbers and Latin words keep the design's look); Arabic letters, which they
   do not have, fall back to Cairo. Arabic must not be letter-spaced (it breaks the joins between letters), and it
   needs more line height than the tight Latin headings */
html[lang="ar"] { --sans: "Jura", "Cairo", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", "Cairo", ui-monospace, monospace; }
html[lang="ar"] body.ab-cyber { --sans: "Share Tech Mono", "Cairo", monospace; --display: "Orbitron", "Cairo", sans-serif; }
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] .ab-wordmark .ab-en { letter-spacing: 0.3em !important; }
html[lang="ar"] footer .ab-brandmark span[lang="en"] { letter-spacing: 0.24em !important; }
html[lang="ar"] .ab-big, html[lang="ar"] .ab-moment-card h3, html[lang="ar"] dialog h3 { line-height: 1.35; }
html[lang="ar"] .ab-the:empty { display: none; }   /* "THE" over a heading has no Arabic equivalent */
html[lang="ar"] .ab-hero-title .ab-pre { font-size: clamp(18px, 2.1vw, 28px); }
html[lang="ar"] .ab-intro p, html[lang="ar"] .ab-copy p { line-height: 1.75; }

/* ---- the page */
html[dir="rtl"] .ab-chapter.ab-layout-left .ab-copy { margin-left: 0; margin-right: clamp(0px, 9vw, 200px); }
html[dir="rtl"] .ab-hero-credit span + span { padding-left: 0; border-left: 0; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, 0.7); }
html[dir="rtl"] details.ab-refs { text-align: right; }
html[dir="rtl"] details.ab-refs ol { padding: 0 46px 22px 26px; }
html[dir="rtl"] details.ab-refs li[dir="ltr"] { text-align: right; }
html[dir="rtl"] footer .ab-brandmark .ab-ar { padding-left: 0; border-left: 0; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.6); }
html[dir="rtl"] .ab-species .ab-fact b i { transform: scaleX(-1); }   /* the fish swatches swim the other way, head first */
/* the Helipad Moments carousel scrolls by its left edge, so its track stays left to right; the cards read right to left */
html[dir="rtl"] .ab-track { direction: ltr; }
html[dir="rtl"] .ab-moment-card { direction: rtl; }
/* globe labels and the hand-drawn notes are placed by their left edge (and the point marker sits left of its label) */
html[dir="rtl"] #labels, html[dir="rtl"] #annot { direction: ltr; }

/* ---- fixed controls: mode switch and Telemetry top right, language links and Controls top left, the rail left */
html[dir="rtl"] .ab-switches { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); }
html[dir="rtl"] .ab-langswitch { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
html[dir="rtl"] #hudTele { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); }
html[dir="rtl"] #hudCtrl { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
html[dir="rtl"] .ab-hud-panel h4 + div { transform: scaleX(-1); }   /* the stepped line under each HUD heading, mirrored */
/* Arabic falls back to Cairo, wider than the HUD's monospace: a little smaller, so every row (the longest is
   "الدوران (وضع ثلاثي الأبعاد)", 187px at 11px in a 196px panel) stays on one line */
html[lang="ar"] .ab-hud-panel .ab-hud-row { font-size: 11px; }
html[lang="ar"] .ab-hud-panel .ab-hud-row > * { white-space: nowrap; }
html[dir="rtl"] #hudBar .ab-on::before { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .ab-rail { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
html[dir="rtl"] .ab-back { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); }
html[dir="rtl"] .ab-explore-ui { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); }
html[dir="rtl"] #tourbar { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); padding: 8px 8px 8px 14px; }
/* close buttons and the space kept for them, in the top left corner */
html[dir="rtl"] .ab-x { right: auto; left: 8px; }
html[dir="rtl"] #pincard h3, html[dir="rtl"] dialog h3 { padding-right: 0; padding-left: 26px; }
html[dir="rtl"] .ab-photo-box button { right: auto; left: 14px; }

/* ---- phones */
@media (max-width: 760px) {
  html[dir="rtl"] .ab-chapter.ab-layout-left .ab-copy { margin-right: 0; }
  html[dir="rtl"] .ab-rail { left: max(5px, env(safe-area-inset-left, 0px)); }
  html[dir="rtl"] .ab-explore-ui { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html[dir="rtl"] .ab-copy.ab-has-hint:not(.ab-open) { padding: 12px 18px 12px 12px !important; }
  html[dir="rtl"] #hudTele { left: 0; right: 0; }   /* Telemetry is the full-width bottom row here (css/modes.css) */
}