/* Each word owns a fixed column; proportional Persian digits cannot move it. */
time.price-art-time[data-price-art-time] {
    display: inline-grid;
    grid-template-columns: 3ch 5ch 3ch;
    column-gap: .25ch;
    justify-content: start;
    align-items: baseline;
    inline-size: 14ch;
    min-inline-size: 14ch;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    direction: rtl;
    unicode-bidi: isolate;
    vertical-align: baseline;
    flex-shrink: 0;
}

time.price-art-time[data-price-art-time] > .price-art-time-number {
    grid-column: 1;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: end;
}

time.price-art-time[data-price-art-time] > .price-art-time-unit {
    grid-column: 2;
    text-align: center;
    unicode-bidi: isolate;
}

time.price-art-time[data-price-art-time] > .price-art-time-before {
    grid-column: 3;
    text-align: start;
    unicode-bidi: isolate;
}

time.price-art-time[data-price-art-time] > .price-art-time-unknown {
    grid-column: 1 / -1;
    text-align: center;
}

time.price-art-time.price-art-time-unknown[data-price-art-time] {
    display: inline-block;
    text-align: center;
}

/* The trend row also contains a changing percentage. Keep that sibling's
   width changes from moving the entire update-time column in the RTL flex row. */
.ng-trend__now > .ng-trend__time {
    flex-shrink: 0;
    margin-inline-start: auto;
}