@charset "UTF-8";
/* ===================================================================
   Right-to-left corrections.

   The main stylesheet uses logical properties, so padding, margins,
   borders, text alignment and flex direction already mirror on their
   own. What remains here are the cases that cannot: physical
   gradients, transforms, and a few type adjustments for Arabic.
   =================================================================== */

/* Arabic renders larger at the same nominal size in most system faces;
   easing the size and opening the line height keeps the density even. */
body {
    font-size: 15.5px;
    line-height: 1.7;
}

/* Tighter letter-spacing is a Latin refinement and hurts Arabic. */
h1, h2, h3,
.badge,
.table th,
.detail-label,
.lang-option {
    letter-spacing: 0;
}

/* Arabic has no capital forms, so uppercasing does nothing but strip
   meaning from the label. */
.table th,
.detail-label {
    text-transform: none;
    font-size: .75rem;
}

/* The measured-rule signature is a physical gradient: flip it so the
   scale reads from the same edge as the text. Arabic sets on a taller
   line, so it needs a little more clearance underneath. */
.page-title::after,
.card-title::after {
    margin-block: .5rem .7rem;
    background: linear-gradient(270deg,
        var(--accent) 0 40%,
        transparent 40% 55%,
        var(--accent) 55% 70%,
        transparent 70% 85%,
        var(--accent) 85% 100%);
}

/* Physical corner radii on the combobox toggle. */
.combo-toggle {
    border-radius: var(--radius) 0 0 var(--radius);
}

/* Numeric and date cells stay left-to-right inside an RTL row, so
   figures and separators keep their conventional order. */
.table .num,
.detail-value time,
time {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Email addresses and URLs are always LTR runs. */
.ltr-text {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    text-align: start;
}

/* Keep the modal action row anchored to the inline end. */
.modal-actions { justify-content: flex-start; }