/* ==========================================================================
   rtl.css — loaded only by ar/index.html.
   Everything that logical properties already handle is absent here on purpose.
   What's left is the genuinely direction- and script-specific work.
   ========================================================================== */

/* --- Arabic type ---------------------------------------------------------
   Aref Ruqaa for display. It is a Ruqaa face — the cursive hand used for
   signage and headings rather than for books — so it carries a lot of
   character and looks like nobody's default. That is exactly why it belongs on
   headings and nowhere near a paragraph: Ruqaa runs its letters along a steep
   descending baseline, which is handsome at 40px and exhausting at 17px.

   Amiri carries the running text. It is a proper Naskh book face by the same
   designer as Aref Ruqaa (Khaled Hosny), so the two share a lineage and sit
   together naturally, and it is far less worn out than Noto Naskh.

   The mono stack keeps IBM Plex Mono FIRST and adds Arabic after it. Font
   fallback is per glyph, so any Latin left in a label (a URL, 0x0C) stays
   monospaced while Arabic in the same label renders in Amiri rather than a
   random system face. */
html[dir="rtl"] {
  --font-display: "Aref Ruqaa", "Segoe UI", serif;
  --font-body: "Amiri", "Traditional Arabic", serif;
  --font-mono: "IBM Plex Mono", "Amiri", ui-monospace, monospace;
}

/* Arabic needs more leading than Latin: the script sits on a lower baseline and
   carries dots and diacritics above and below it. Amiri runs small for its
   point size, so it is nudged up. */
html[dir="rtl"] body {
  font-size: 1.15rem;
  line-height: 1.95;
}

/* Never letter-space Arabic. The script is cursive, so tracking pulls joined
   letterforms apart and reads as broken rather than as emphasis. Negative
   tracking on headings is worse still. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .gutter__label,
html[dir="rtl"] .gutter__meta,
html[dir="rtl"] .tier__label,
html[dir="rtl"] .layers thead th,
html[dir="rtl"] .spec__meta dt,
html[dir="rtl"] .contact-list dt,
html[dir="rtl"] .masthead__nav a {
  letter-spacing: normal;
}

/* Arabic has no capital letters, so uppercasing is a no-op on Arabic text but
   still fires on any Latin inside the same label. Turning it off keeps mixed
   labels from looking half-shouted. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .gutter__label,
html[dir="rtl"] .tier__label,
html[dir="rtl"] .layers thead th,
html[dir="rtl"] .spec__meta dt,
html[dir="rtl"] .contact-list dt,
html[dir="rtl"] .masthead__nav a,
html[dir="rtl"] .tag {
  text-transform: none;
}

/* Headings are lighter in Arabic: Naskh and Kufi faces read heavy at the weight
   a Latin grotesque needs. */
html[dir="rtl"] h1 {
  font-weight: 600;
  line-height: 1.35;
}

html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  line-height: 1.5;
}

/* --- direction-specific geometry -----------------------------------------
   box-shadow has no logical form, so the accent bar has to be mirrored by hand.
   These are the only two places in the stylesheet that need it. */
html[dir="rtl"] .layers tbody tr:hover,
html[dir="rtl"] .layers tbody tr:focus-within {
  box-shadow: inset -2px 0 0 var(--signal);
}

html[dir="rtl"] .ui__side i[data-on] {
  box-shadow: inset -2px 0 0 var(--signal);
}

/* Code stays exactly as written: Latin, left-to-right, and sealed off from the
   surrounding Arabic. `dir="ltr"` in the markup does the isolating; this makes
   it explicit and adds the monospace face, so an identifier like
   `returned_at__isnull` cannot be reordered or have its underscores dragged to
   the wrong end by the bidi algorithm. */
html[dir="rtl"] code,
html[dir="rtl"] kbd {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}

/* Numbers stay Western-Arabic (0-9) and read left-to-right inside RTL text.
   Isolating them stops the bidi algorithm reordering a figure like "684" when
   it sits next to punctuation. */
html[dir="rtl"] .spec__meta dd,
html[dir="rtl"] .contact-list dd {
  unicode-bidi: isolate;
}

/* The ER diagram and the interface sketch are technical drawings. Conventionally
   these stay left-to-right even in Arabic documents, so their internal layout is
   not mirrored. */
html[dir="rtl"] .diagram,
html[dir="rtl"] .ui {
  direction: ltr;
  text-align: start;
}