/* Right-to-left languages (Arabic). dir="rtl" on <html> already mirrors text, flex rows and grids; these rules flip
   what the other style sheets place with left/right: side bar, alignment, auto margins, Strippi and its dialogs. */

/* Side bar on the right, the page next to it */
html[dir=rtl] body>aside{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--line)}
html[dir=rtl].night body>aside{border-right:0;border-left:1px solid var(--n-line)}
html[dir=rtl] .shell{margin-left:0;margin-right:232px}
html[dir=rtl] body>aside nav button{text-align:right;transform-origin:right center}
html[dir=rtl] .brand>small{margin-left:0;margin-right:auto}
@media(hover:hover) and (pointer:fine){
 html[dir=rtl] body.motion-enabled:not(.simple-mode)>aside nav button:hover{transform:translateX(-7px) translateY(-2px) rotateY(7deg) scale(1.045);box-shadow:3px 4px 0 #e2e0ef,0 12px 22px #30255222}
 html[dir=rtl] body.motion-enabled:not(.simple-mode)>aside nav button:has(+button:hover),html[dir=rtl] body.motion-enabled:not(.simple-mode)>aside nav button:hover+button{transform:translateX(-2px) scale(1.012)}
}
@media(max-width:760px){
 html[dir=rtl] body>aside{inset:0 0 0 auto;transform:translateX(105%)}
 html[dir=rtl] body.mercury-menu-open>aside{transform:none}
 html[dir=rtl] .shell{margin-right:0}
}

/* Amounts and the brand name read left to right as one block, as on bank statements */
html[dir=rtl] :is(td.amount,.amount,.number,.balance-total,.forecast-total,.coach-allocation-total,.row strong,.brand-wordmark,.mercury-wordmark){direction:ltr;unicode-bidi:isolate}
html[dir=rtl] :is(.number,.balance-total,.forecast-total,.coach-allocation-total){text-align:right}

/* Header and page heading */
html[dir=rtl] #mercury-search{margin-right:0;margin-left:auto;text-align:right}
html[dir=rtl] .shell>header .pill,html[dir=rtl] header .pill{margin-left:0;margin-right:auto}
html[dir=rtl] .shell>header .theme-toggle{margin-left:0;margin-right:auto}
html[dir=rtl] .shell>header .theme-toggle+.pill{margin-left:0;margin-right:8px}
html[dir=rtl] #cloud-header .strippi-orb-wrap,html[dir=rtl] [data-auto-bank-status] .strippi-orb-wrap{margin-right:0;margin-left:6px}
@media(max-width:1200px){html[dir=rtl] .heading .month-label,html[dir=rtl] .heading .month-nav{margin-right:0;margin-left:auto}}
@media(max-width:900px){html[dir=rtl] .shell>header .pill{margin-right:0}}
@media(max-width:760px){html[dir=rtl] header .pill{margin-right:0}html[dir=rtl] header #cloud-header{text-align:right}}

/* Menus, settings and lists: text starts on the right */
html[dir=rtl] .mercury-tools>button,html[dir=rtl] .mercury-account>button,html[dir=rtl] .more-actions>div>button,
html[dir=rtl] .bank-assignment,html[dir=rtl] button.bank-assignment,html[dir=rtl] .category-link,html[dir=rtl] .companion-suggestions button,
html[dir=rtl] .focus-import-options button,html[dir=rtl] .focus-category,html[dir=rtl] nav button,html[dir=rtl] th,html[dir=rtl] button.switch-row{text-align:right}
html[dir=rtl] td.amount,html[dir=rtl] .focus-freshness,html[dir=rtl] .coach-help .row strong{text-align:left}
html[dir=rtl] .mercury-palette>span,html[dir=rtl] .theme-switch>span{margin-right:0;margin-left:auto}
html[dir=rtl] .lang-row .lang-switch{margin-left:0;margin-right:auto}
html[dir=rtl] .mercury-tools #motion-toggle[aria-pressed=true]{padding-left:0;padding-right:8px}
html[dir=rtl] .more-actions>div{right:auto;left:0}
@media(max-width:760px){html[dir=rtl] .more-actions>div{left:auto;right:0}}
html[dir=rtl] .kpi.focus-free .quiet{right:auto;left:16px}

/* Small gaps next to dots, icons and buttons */
html[dir=rtl] .category-dot,html[dir=rtl] .mark,html[dir=rtl] .legend i{margin-right:0;margin-left:7px}
html[dir=rtl] .note button,html[dir=rtl] .focus-review h2 small,html[dir=rtl] .focus-balances .row .copy-btn{margin-left:0;margin-right:8px}
html[dir=rtl] .category-link strong{margin-left:0;margin-right:13px}
html[dir=rtl] .studio-coach-intro button span{margin-left:0;margin-right:18px}
@media(max-width:760px){html[dir=rtl] .studio-coach-intro button span{margin-right:5px}}
html[dir=rtl] .note{border-left:0;border-right:4px solid #c1121f}
html[dir=rtl] .coach-notice{border-left:0;border-right:3px solid #b18b45}

/* Strippi, its greeting and its chat on the left */
html[dir=rtl] #strippi-companion{right:auto;left:22px}
html[dir=rtl] #strippi-greet{right:auto;left:96px;transform-origin:left bottom}
html[dir=rtl] .coach-dialog.companion-panel{inset:auto auto calc(18px + var(--companion-bottom,0px) + env(safe-area-inset-bottom,0px)) 20px}
html[dir=rtl] .companion-close{margin-left:0;margin-right:auto}
html[dir=rtl] .coach-dialog .coach-close{right:auto;left:12px}
html[dir=rtl] .coach-dialog .coach-intro{padding-right:0;padding-left:20px}
@media(max-width:760px){
 html[dir=rtl] #strippi-companion{right:auto;left:14px}
 html[dir=rtl] #strippi-greet{right:auto;left:72px}
 html[dir=rtl] .coach-dialog.companion-panel{right:auto;left:12px}
}

/* Switches move from right (off) to left (on) */
html[dir=rtl] .sw{transform:scaleX(-1)}

/* Light theme page transition starts next to the side bar */
html[dir=rtl] .blossom-transition{inset:76px 230px 0 0}
@media(max-width:1150px){html[dir=rtl] .blossom-transition{left:0;right:190px}}
@media(max-width:760px){html[dir=rtl] .blossom-transition{inset:155px 0 0}}