/* Image to text. The panel is a dropzone, one choice, one button and a box
   of text -- there is nothing to preview and nothing to adjust, so the layout
   stays a single column rather than borrowing the two-column shell. */

.ocr-row{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  margin-top:18px;
}
.ocr-lang{display:flex;flex-direction:column;gap:6px;min-width:190px;}
.ocr-lang select{
  font-family:inherit;font-size:.95rem;padding:9px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);
}
.ocr-lang .opt-label{font-size:.85rem;color:var(--ink-2);font-weight:500;}
.ocr-hint{
  margin:8px 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.55;
  flex-basis:100%;
}

/* The result. A textarea rather than a block of markup on purpose: OCR is
   never perfect, and the fix belongs where the text is rather than in a
   separate editor somewhere else. */
.ocr-result{margin-top:20px;}
.ocr-result-head{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;margin-bottom:10px;
}
.ocr-quality{font-size:.86rem;color:var(--ink-3);line-height:1.5;}
.ocr-out{
  width:100%;min-height:280px;resize:vertical;
  font-family:var(--f-mono);font-size:.88rem;line-height:1.65;
  padding:14px 16px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);
}
.ocr-out:focus{outline:2px solid var(--accent);outline-offset:1px;}
.ocr-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}

@media (max-width:560px){
  .ocr-row{flex-direction:column;align-items:stretch;}
  .ocr-lang{min-width:0;}
}