/*
 * Mixed-direction typography hardening.
 *
 * Persian pages frequently contain Latin handles, email addresses, URLs,
 * telephone numbers, file names and code. These tokens must keep their own
 * visual order without forcing the surrounding Persian sentence to LTR.
 */

:where(html[dir="rtl"], html[lang="fa"]) :where(
    [data-tna-ltr],
    [dir="ltr"],
    .tna-profile-v3-handle,
    .tna-profile-v3-handle-value,
    a[href^="mailto:"],
    a[href^="tel:"],
    .tna-technical-token,
    code,
    kbd,
    samp
) {
    direction: ltr;
    unicode-bidi: isolate;
}

:where(html[dir="rtl"], html[lang="fa"]) :where(
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[name="username"],
    input[autocomplete="username"],
    textarea[data-tna-ltr]
) {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}

:where(html[dir="rtl"], html[lang="fa"]) :where(
    pre,
    .tna-code-block,
    .tna-log-output
) {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/*
 * These containers may hold either Persian prose or an @handle fallback.
 * plaintext lets the first strong character choose the correct direction for
 * each value without breaking Persian job titles and organization names.
 */
:where(html[dir="rtl"], html[lang="fa"]) :where(
    .tna-feed-author-main .tna-muted,
    .tna-mini-user small,
    .tna-profile-v3-contact-list,
    .tna-account-home__stats strong
) {
    unicode-bidi: plaintext;
}

.tna-profile-v3-handle {
    display: block;
    max-width: 100%;
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

html[dir="rtl"] .tna-profile-v3-handle,
html[lang="fa"] .tna-profile-v3-handle {
    text-align: right;
}

html[dir="ltr"] .tna-profile-v3-handle,
html[lang="en"] .tna-profile-v3-handle {
    text-align: left;
}

.tna-profile-v3-handle-value {
    display: inline-block;
    max-width: 100%;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Prevent long technical values from widening mobile layouts. */
:where(
    .tna-profile-v3-handle,
    .tna-profile-v3-handle-value,
    a[href^="mailto:"],
    a[href^="tel:"],
    [data-tna-ltr],
    .tna-technical-token
) {
    max-width: 100%;
    overflow-wrap: anywhere;
}