/* =====================================================================
   SMART GUARDIAN — RIGHT-TO-LEFT
   Loaded only when dir="rtl". Mirrors layout and direction-bound
   decoration, and pins anything numeric to LTR so financial figures
   never reorder.
   ===================================================================== */

[dir="rtl"] {
    /* Arabic-capable stack first, Latin fallbacks after */
    --font: "Segoe UI", "Dubai", "Noto Sans Arabic", "Cairo", Tahoma,
            system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

[dir="rtl"] body { letter-spacing: 0; }

/*
   Headings set their own negative tracking, which overrides the reset above.
   Latin display type wants it — Arabic never does. The script is connected,
   so pulling the glyphs together crushes the joins between letters and thins
   the strokes exactly where they carry the word. Numerals are left alone:
   they are the same Latin glyphs in both directions.

   Arabic also sits taller than Latin — hamza and madda ride above the cap
   line — so display headings get their leading back rather than clipping.
*/
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] .hero h1,
[dir="rtl"] .section-head h2,
[dir="rtl"] .app-top h1,
[dir="rtl"] .pos-title h3,
[dir="rtl"] .brand-text b {
    letter-spacing: 0;
}

[dir="rtl"] .hero h1        { line-height: 1.14; }
[dir="rtl"] .section-head h2 { line-height: 1.28; }
[dir="rtl"] .hero-sub       { line-height: 1.85; }

/* ---------------------------------------------------------------------
   Numbers, prices, symbols and codes always read left-to-right.
   Without this "+18.40" renders as "18.40+" and stop prices invert.
   --------------------------------------------------------------------- */
[dir="rtl"] .mono,
[dir="rtl"] .num,
[dir="rtl"] .value,
[dir="rtl"] .risk-value,
[dir="rtl"] .code-chip,
[dir="rtl"] .pos-pnl .v,
[dir="rtl"] .pos-pnl .r,
[dir="rtl"] .pos-metrics .v,
[dir="rtl"] .tl-grid .v,
[dir="rtl"] .user-stats .v,
[dir="rtl"] .lev-tag,
[dir="rtl"] .side-tag,
[dir="rtl"] .slider-ticks,
[dir="rtl"] .hero-trust b,
[dir="rtl"] input.mono,
[dir="rtl"] time {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Keep numeric cells aligned to the reading edge of an RTL table */
[dir="rtl"] table.data td.mono { text-align: right; }

/* The liquidation axis is a number line — never mirror it */
[dir="rtl"] .liq-scale,
[dir="rtl"] .meter,
[dir="rtl"] .bars,
[dir="rtl"] .spark { direction: ltr; }

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
[dir="rtl"] .text-r { text-align: left; }
[dir="rtl"] .skip-link { left: auto; right: 16px; }

[dir="rtl"] .sec-title .line {
    background: linear-gradient(270deg, var(--line), transparent);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
[dir="rtl"] .field label { letter-spacing: .04em; }

[dir="rtl"] .field-icon { left: auto; right: 15px; }
[dir="rtl"] .input.has-icon { padding-left: 16px; padding-right: 44px; }

[dir="rtl"] .select {
    padding-right: 16px;
    padding-left: 42px;
    background-position: left 14px center;
}

/* Password-reveal buttons are positioned inline in the templates */
[dir="rtl"] .field > .btn-icon[data-reveal] { right: auto !important; left: 6px !important; }

[dir="rtl"] .check .box::after { transform: rotate(-45deg) scale(0); }
[dir="rtl"] .check input:checked + .box::after { transform: rotate(-45deg) scale(1); }

[dir="rtl"] .toggle .track::after { left: auto; right: 2px; }
[dir="rtl"] .toggle input:checked + .track::after { right: 23px; }

/* ---------------------------------------------------------------------
   Buttons & badges
   --------------------------------------------------------------------- */
[dir="rtl"] .badge,
[dir="rtl"] .eyebrow,
[dir="rtl"] .tile .label,
[dir="rtl"] .rail-label,
[dir="rtl"] .pos-metrics .k,
[dir="rtl"] .tl-grid .k,
[dir="rtl"] .user-stats .k,
[dir="rtl"] .risk-bar-head .lbl,
[dir="rtl"] table.data th {
    letter-spacing: .04em;
}

/* Latin-only chips keep their tracking */
[dir="rtl"] .side-tag,
[dir="rtl"] .lev-tag,
[dir="rtl"] .lvl { letter-spacing: .08em; }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
[dir="rtl"] .toast-stack { right: auto; left: 22px; }
[dir="rtl"] .toast::before { left: auto; right: 0; }

@keyframes toastInRtl {
    from { opacity: 0; transform: translateX(-50px) scale(.94); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOutRtl {
    to { opacity: 0; transform: translateX(-40px) scale(.95); }
}

[dir="rtl"] .toast     { animation-name: toastInRtl; }
[dir="rtl"] .toast.out { animation-name: toastOutRtl; }

@media (max-width: 720px) {
    [dir="rtl"] .toast-stack { left: 14px; right: 14px; }
}

/* ---------------------------------------------------------------------
   Landing
   --------------------------------------------------------------------- */
[dir="rtl"] .nav-links a::after { right: 0; left: 100%; transition: left var(--t) var(--ease); }
[dir="rtl"] .nav-links a:hover::after { left: 0; }

[dir="rtl"] .auth-back { left: auto; right: 26px; }
[dir="rtl"] .auth-back svg { transform: scaleX(-1); }

[dir="rtl"] .steps::before { left: auto; right: 27px; }
[dir="rtl"] .step { grid-template-columns: 56px 1fr; }

[dir="rtl"] .hero-badge { padding: 7px 9px 7px 16px; }

/* Directional arrow glyphs point the other way in RTL */
[dir="rtl"] .btn svg.flip,
[dir="rtl"] .rail-item svg.flip { transform: scaleX(-1); }

@media (max-width: 900px) {
    [dir="rtl"] .steps::before { right: 22px; }
}

/* ---------------------------------------------------------------------
   Application shell
   --------------------------------------------------------------------- */
[dir="rtl"] .app-rail {
    border-right: 0;
    border-left: 1px solid var(--line-soft);
}

[dir="rtl"] .app-rail::after { right: auto; left: -1px; }

[dir="rtl"] .rail-item:hover { transform: translateX(-3px); }

[dir="rtl"] .rail-item.active::before {
    left: auto;
    right: -16px;
    border-radius: 3px 0 0 3px;
}

[dir="rtl"] .rail-item .count { margin-left: 0; margin-right: auto; }

[dir="rtl"] .top-chips { margin-left: 0; margin-right: auto; }

@media (max-width: 1024px) {
    [dir="rtl"] .top-chips { margin-right: 0; }

    [dir="rtl"] .app-rail {
        left: auto;
        right: 0;
        transform: translateX(102%);
        box-shadow: -30px 0 80px rgba(0, 0, 0, .6);
    }
    [dir="rtl"] .app-rail.open { transform: none; }
}

/* ---------------------------------------------------------------------
   Notifications
   --------------------------------------------------------------------- */
[dir="rtl"] .bell .dot { right: auto; left: 3px; }
[dir="rtl"] .notif-panel { right: auto; left: 0; }

/* ---------------------------------------------------------------------
   Tiles & cards
   --------------------------------------------------------------------- */
[dir="rtl"] .tile::after { right: auto; left: -34px; }
[dir="rtl"] .feature .fx { right: auto; left: -30px; }

[dir="rtl"] .pos-card > .edge {
    background: linear-gradient(270deg, transparent, var(--risk, var(--neon)), transparent);
}

/* ---------------------------------------------------------------------
   Risk slider
   --------------------------------------------------------------------- */
[dir="rtl"] .slider-fill { left: auto; right: 4px; }
[dir="rtl"] input[type="range"].risk-slider { direction: ltr; }
[dir="rtl"] .slider-shell { direction: ltr; }
[dir="rtl"] .risk-readout { direction: rtl; }

/* Preview rows keep their label on the reading edge */
[dir="rtl"] .risk-preview-row { grid-template-columns: 1fr auto auto; }

/* ---------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------- */
[dir="rtl"] .timeline { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .timeline::before { left: auto; right: 9px; }
[dir="rtl"] .tl-item::before { left: auto; right: -25px; }
[dir="rtl"] .tl-item:hover { transform: translateX(-4px); }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
[dir="rtl"] table.data th,
[dir="rtl"] table.data td { text-align: right; }

/* ---------------------------------------------------------------------
   Tooltips & misc
   --------------------------------------------------------------------- */
[dir="rtl"] [data-tip]::after { direction: rtl; }

[dir="rtl"] .secret-note,
[dir="rtl"] .risk-hint,
[dir="rtl"] .chain-status { text-align: right; }

[dir="rtl"] .log-row { grid-template-columns: 92px 1fr auto; }

@media (max-width: 720px) {
    [dir="rtl"] .log-row { grid-template-columns: 78px 1fr; }
}

/* The .lang-switch control itself is styled in core.css — it has to exist
   in both directions, and rtl.css is only loaded for Arabic. */