/* ==========================================================================
   FormReady — OCR page styles (tools/ocr-pdf.html only)
   Owner: Kai (Frontend) · Load order: styles.css → components.css →
   THIS FILE → motion.css. Uses design tokens only — no new colours,
   no redefined components (docs/design-system.md §6 contract).
   ========================================================================== */

/* Recognised-text output: tall, readable, keeps the page layout it came
   from. Base look comes from .input (components.css); this only adds the
   OCR-specific sizing. */
.ocr-text-output {
  min-height: 280px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal, 1.6);
  white-space: pre-wrap;
}

/* Per-page status list shown under the progress bar while reading.
   Status is never colour-only (design-system §2 rule 3): every row
   carries the page number plus a text label; the dot is decoration. */
.ocr-page-status {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.ocr-page-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-muted);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
}
.ocr-page-status-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-card);
}
.ocr-page-status-item--reading .ocr-page-status-dot {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.ocr-page-status-item--done .ocr-page-status-dot {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
}
.ocr-page-status-item--copied .ocr-page-status-dot {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}
.ocr-page-status-label {
  color: var(--color-muted-foreground);
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ocr-page-status-item--reading .ocr-page-status-label {
  color: var(--color-primary-hover);
}
.ocr-page-status-item--done .ocr-page-status-label,
.ocr-page-status-item--copied .ocr-page-status-label {
  color: var(--color-accent-strong);
}

/* Cancel row under the progress bar. */
.ocr-progress-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Result textarea block sits inside .result-panel; keep its label row
   aligned with the panel head rhythm. */
.ocr-result-text {
  margin-top: var(--space-4);
}