/* Language switch, right-to-left layout and Arabic typography. Loaded last. */

.lang-btn { flex: none; height: 36px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 700 13px/1 var(--font-body); cursor: pointer; }
.lang-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ld-foot .lang-btn { height: 32px; }

/* ---------- Mirrored positions (the layout itself flips through logical properties) ---------- */
[dir="rtl"] .fl-reel-big { left: auto; right: 10px; }
[dir="rtl"] .fl-reel-rail, [dir="rtl"] .fl-feed-nav { right: auto; left: 12px; }
[dir="rtl"] .scn-head .big { right: auto; left: -6px; }
[dir="rtl"] .grade-hero .big { right: auto; left: 8px; }
[dir="rtl"] .seg .dot { right: auto; left: -5px; }
[dir="rtl"] .s1 { left: auto; right: max(0px, calc(50% - 230px)); }
[dir="rtl"] .s2 { right: auto; left: max(0px, calc(50% - 232px)); }
[dir="rtl"] .s3 { left: auto; right: max(0px, calc(50% - 226px)); }
@media (max-width: 420px) { [dir="rtl"] .s1, [dir="rtl"] .s3 { right: 0; } [dir="rtl"] .s2 { left: 0; } }
[dir="rtl"] .fl-meter-bar, [dir="rtl"] .q-timer i { transform-origin: right; }
[dir="rtl"] .marq-track { animation-name: marq-rtl; }
@keyframes marq-rtl { to { transform: translateX(50%); } }
/* Icons that point along the reading direction. */
[dir="rtl"] .fl-ico-send, [dir="rtl"] .fl-ico-reply, [dir="rtl"] .fl-ico-back { transform: scaleX(-1); }

/* ---------- Arabic type ---------- */
/* Letter spacing breaks the joins between Arabic letters, and Arabic has no capitals. */
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) .label, :lang(ar) .ld-eyebrow, :lang(ar) .fl-reel-eyebrow, :lang(ar) .scn-head .eyebrow, :lang(ar) .trk-card .tag,
:lang(ar) .fl-lines-head, :lang(ar) .fl-ing b, :lang(ar) .vs-tag, :lang(ar) .ai-status, :lang(ar) .field label, :lang(ar) .fl-opt-tag { font-size: 12px; line-height: 1.5; }
/* The mono face has no Arabic, and its wide Latin space gaps Arabic words, so Arabic labels and prompts use the body face. */
:lang(ar) .label, :lang(ar) .ld-eyebrow, :lang(ar) .fl-reel-eyebrow, :lang(ar) .scn-head .eyebrow, :lang(ar) .trk-card .tag,
:lang(ar) .fl-lines-head, :lang(ar) .fl-ing b, :lang(ar) .vs-tag, :lang(ar) .ai-status, :lang(ar) .field label, :lang(ar) .fl-opt-tag,
:lang(ar) .fl-opt-text, :lang(ar) .vs p, :lang(ar) .expert, :lang(ar) .doc, :lang(ar) .micro, :lang(ar) .scn-meta, :lang(ar) .fl-mail-meta, :lang(ar) .fl-rail-btn, :lang(ar) .urgent, :lang(ar) .opt.mono { font-family: var(--font-body); }
:lang(ar) .fl-rail-btn, :lang(ar) .fl-tab { font-size: 12px; }
/* Arabic letters rise and descend further than Latin ones, so tight display leading clips them. */
:lang(ar) .hero h1 { font-size: clamp(36px, 9vw, 72px); line-height: 1.3; }
:lang(ar) .ld-h2 { font-size: clamp(28px, 5.6vw, 48px); line-height: 1.35; }
:lang(ar) .final h2 { font-size: clamp(34px, 7.5vw, 80px); line-height: 1.3; }
:lang(ar) .fl-reel-title { font-size: 27px; line-height: 1.4; }
:lang(ar) .h-display, :lang(ar) .ob-q { line-height: 1.4; }
:lang(ar) .how-card h3, :lang(ar) .hab-top b, :lang(ar) .trk-card h3, :lang(ar) .h-title, :lang(ar) .lvl-name, :lang(ar) .role { line-height: 1.45; }
:lang(ar) .marq-track span, :lang(ar) .sticker, :lang(ar) .hab-btn, :lang(ar) .combo { line-height: 1.4; }
:lang(ar) .fl-reel-body, :lang(ar) .hero-sub, :lang(ar) .ld-lead, :lang(ar) .prose, :lang(ar) .bubble { line-height: 1.7; }
:lang(ar) .fl-opt-text, :lang(ar) .vs p, :lang(ar) .expert, :lang(ar) .doc { font-size: 14px; line-height: 1.7; }
/* Typed things that are always Latin keep their left-to-right shape. */
[dir="rtl"] input[type="email"], [dir="rtl"] #m-to { text-align: right; }