/* img-text.css — Resimden metne: the recognised text under the result (js/img-text.js). Linked only on that page. */
/* the done pane is a row (result + share card): the text wraps to its own full-width line under them */
.pane--done:has(> .itx) { flex-wrap: wrap; }
.itx { flex: 1 0 100%; min-width: 0; margin-top: 6px; border-top: 1px solid var(--ink); padding-top: 14px; display: grid; gap: 10px; }
.itx[hidden] { display: none; }
.itx__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.itx__k, .itx__n { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.itx__n { text-transform: none; color: var(--ink-3); }
.itx__t { width: 100%; min-height: 220px; max-height: 50vh; resize: vertical; padding: 14px; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.itx__t:focus { outline: none; box-shadow: 4px 4px 0 var(--ink); }
[dir="rtl"] .itx__t:focus { box-shadow: -4px 4px 0 var(--ink); }
.itx__t[hidden] { display: none; }
.itx__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.itx__row .btn[hidden] { display: none; }
.itx__s { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
@media (max-width: 719.98px) { .itx__t { min-height: 180px; font-size: 15px; } .itx__row .btn { width: 100%; justify-content: space-between; } }