/* =============================================================================
   Text from a picture - the preview with its marked words, the switcher
   between pictures, the progress line and the text box.
   ============================================================================= */

/* The input lives outside the drop zone (see the partial): its focus ring
   is drawn on the zone. */
.ocr-file:focus-visible + .drop{outline:2px solid var(--olive);outline-offset:3px}

/* ---- preview ---- */
.ocr-view{display:flex;flex-direction:column;align-items:center;gap:14px}
.ocr-shot{
  position:relative;display:inline-block;max-width:100%;margin:0;line-height:0;
  border-radius:var(--r-xs);overflow:hidden;
  background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/16px 16px;
}
.ocr-shot img{display:block;max-width:100%;max-height:min(62vh,640px);width:auto;height:auto}
.ocr-shot img:not([src]){min-width:240px;min-height:160px;visibility:hidden}
/* Words read with less certainty: a soft olive box over each. */
.ocr-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ocr-marks rect{fill:rgba(204,211,118,.3);stroke:var(--olive);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.ocr-legend{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.ocr-legend__mark{width:20px;height:11px;border-radius:3px;border:1px solid var(--olive);background:rgba(204,211,118,.3)}

/* ---- more than one picture: small buttons to switch the preview ---- */
.ocr-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ocr-page{
  position:relative;width:52px;height:52px;padding:0;border-radius:var(--r-xs);overflow:hidden;cursor:pointer;
  border:1px solid var(--rule-d);opacity:.55;
  background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/12px 12px;
  transition:opacity .2s var(--ease),border-color .2s var(--ease),transform 160ms var(--ease-out);
}
.ocr-page img{display:block;width:100%;height:100%;object-fit:cover}
.ocr-page:active{transform:scale(.95)}
.ocr-page[aria-pressed="true"]{opacity:1;border-color:var(--olive);box-shadow:0 0 0 1px var(--olive)}
.ocr-page[data-state="pending"],.ocr-page[data-state="working"]{border-style:dashed}
.ocr-page[data-state="error"]{border-color:rgba(255,138,122,.6)}
@media (hover:hover){.ocr-page:hover{opacity:1}}

/* ---- progress: a hairline that fills ---- */
.ocr-bar{align-self:center;width:min(320px,80%);height:2px;border-radius:2px;background:rgba(250,250,247,.14);overflow:hidden}
.ocr-bar span{display:block;width:100%;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease-out)}

/* ---- settings ---- */
.ocr-hint{margin-top:-6px;font-size:13px;line-height:1.55;color:var(--fg-2)}

/* ---- the text ---- */
.ocr-field textarea{
  min-height:clamp(220px,34vh,440px);font-size:15px;line-height:1.6;white-space:pre-wrap;
  font-family:'Inter Tight',sans-serif;
}
@media (max-width:560px){
  .ocr-field textarea{font-size:16px;padding:12px 14px}   /* below 16px iOS zooms in */
  .ocr-shot img{max-height:52vh}
}
@media (prefers-reduced-motion:reduce){.ocr-bar span,.ocr-page{transition:none}}
/* On one column the text box comes after the settings: once a picture is
   in, the notes step aside so the text is a short scroll away. */
@media (max-width:980px){.ocr.has-files .ocr-hint{display:none}}