/* Interface layout follows the selected language. Story text keeps its own direction. */
html[dir="rtl"] .text-left,
html[dir="rtl"] [id$="-modal"],
html[dir="rtl"] .sys-tile {
    text-align: start;
}
html[dir="rtl"] .text-right { text-align: end; }
html[dir="rtl"] .acct { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .pcc-back { margin-left: 0; margin-right: -.5rem; }
html[dir="rtl"] .dropdown-icon.expanded { transform: rotate(-90deg); }
textarea, input[type="text"], input[type="search"] { unicode-bidi: plaintext; }
input[type="email"], input[type="url"], input[type="number"],
#mp-join-code, #joincode, #dice-input { direction: ltr; }
/* Allow longer translated navigation labels to remain reachable on a phone. */
html[data-ui-language] .nav { overflow-x: auto; }
html[data-ui-language] .nav a { flex-shrink: 0; }
/* Long labels wrap beside the switch; the track must retain room for its thumb. */
#settings-modal label.flex { gap: .75rem; }
#settings-modal input.peer + div { flex-shrink: 0; }
#settings-modal label.flex > span:first-child { min-width: 0; overflow-wrap: anywhere; }