/* Automatic translation drafts: the bar under an Arabic field, the proposal box, and the Translations screen */
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-2); }
.tr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; max-inline-size: 100%; }
.tr-badge-draft { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.tr-badge-ok { background: var(--success-soft); color: var(--success); }
.tr-msg { font-size: var(--fs-sm); color: var(--muted); }
.tr-msg.tr-error { color: var(--danger); }
.tr-msg.tr-note { color: var(--success); }
.field textarea[data-tr-draft], .field input[data-tr-draft] { border-color: var(--warn); background: var(--warn-soft); }
.tr-proposal { margin-block-start: var(--s-2); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.tr-proposal p { margin: 0 0 var(--s-2); }
.tr-proposal-h { font-weight: 700; }
.tr-proposal-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-status { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.tr-budget { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.tr-meter { inline-size: 220px; max-inline-size: 100%; block-size: 12px; accent-color: var(--accent); }
.tr-counts td.num, .tr-counts th.num { text-align: end; }
.tr-queue { display: grid; gap: var(--s-3); }
.tr-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tr-cols { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); margin-block: var(--s-3); }
.tr-cols textarea { inline-size: 100%; }
.tr-en { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-selbar { margin-block-end: var(--s-3); }
.tr-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-end: var(--s-3); }
.tr-glossary input[type=text], .tr-glossary select { inline-size: 100%; min-inline-size: 110px; }
.tr-actions { white-space: nowrap; }
.tr-actions .btn + .btn { margin-inline-start: var(--s-2); }
@media (min-width: 900px) { .tr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .tr-actions { white-space: normal; } .tr-glossary thead { display: none; } .tr-glossary tr { display: grid; gap: var(--s-2); padding-block: var(--s-3); border-block-end: 1px solid var(--line); } .tr-glossary td { display: grid; gap: 2px; } .tr-glossary td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--muted); } }