/*
 * Arabic interface (js/i18n/core.js sets <html lang="ar" dir="rtl">).
 *
 * Layout flips through dir="rtl" and logical properties (margin-inline-*, inset-inline-*, …)
 * in the section stylesheets; this file holds what is Arabic-only:
 * - type: IBM Plex Sans Arabic for the UI (BRAND.md), never letter-spaced or uppercased;
 * - LTR islands: time, numbers, file names, code, and surfaces where time runs left → right
 *   (timelines, waveforms, the certificate stage) keep their direction;
 * - directional icons mirror; logos, play/record controls, checkmarks and clocks don't.
 */

:root[lang="ar"] {
  --font-ui: var(--font-arabic);
}

:root[lang="ar"] body {
  font-family: var(--font-arabic);
}

/* Arabic is never letter-spaced or case-transformed (BRAND.md). */
:root[lang="ar"] *,
:root[lang="ar"] *::before,
:root[lang="ar"] *::after {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Monospace text (status, file and folder names) has no Arabic glyphs of its own: Plex Arabic
   carries the Arabic, Plex Mono the digits and Latin. */
:root[lang="ar"] {
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Switches (components.css .toggle): the knob travels toward the inline end. */
:root[lang="ar"] .toggle input:checked::after {
  transform: translateX(-16px);
}

/* LTR islands: codes, file names, times, keyboard keys, values with units ("-24 dB"). */
:root[lang="ar"] .mono,
:root[lang="ar"] .val,
:root[lang="ar"] .scorm-tile-value,
:root[lang="ar"] code,
:root[lang="ar"] kbd,
:root[lang="ar"] .rec-timer {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Recorder: the webcam-corner picker is a map of the video frame (top left is top left). */
:root[lang="ar"] .corner-picker {
  direction: ltr;
}

/* Video Editor: time runs left → right — the timeline (track names, ruler, clips, playhead) keeps
   LTR; so does the transport's time readout. */
:root[lang="ar"] .editor-timeline,
:root[lang="ar"] .editor-time,
:root[lang="ar"] .aed-timeline {
  direction: ltr;
}

/* A value island inside a right-aligned tile keeps the tile's alignment. */
:root[lang="ar"] .scorm-tile-value {
  text-align: right;
}

/* SCORM Builder: the branching map is a left → right flow chart. */
:root[lang="ar"] .scorm-br-map {
  direction: ltr;
}

/* Directional icons point the other way: "next" and "back" arrows. */
:root[lang="ar"] .i18n-flip,
:root[lang="ar"] .scorm-next svg,
:root[lang="ar"] .scorm-lesson-bar-back svg,
:root[lang="ar"] .conv-mode-arrow svg,
:root[lang="ar"] .conv-arrow svg {
  transform: scaleX(-1);
}