/**
 * Image to Text.
 */

.em-ocr__drop { margin-bottom: 1.2em; }
.em-ocr__drop strong { color: var(--em-ink, inherit); }

.em-ocr__setup { margin-bottom: 1.2em; }

.em-ocr__lang-label {
    display: block;
    margin-bottom: .4em;
    font-weight: 600;
    color: var(--em-ink, inherit);
}

.em-ocr__lang {
    width: 100%;
    max-width: 340px;
    padding: .6em .8em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font: inherit;
}

/* ── The chosen picture ────────────────────────────────────────────────── */

/*
 * Shown at a size somebody can actually judge. The first version used an
 * 84px thumbnail, which told you a file had been picked and nothing about
 * whether it was the right one or whether the writing in it was legible —
 * the two things worth knowing before waiting on the engine.
 */
.em-ocr__chosen {
    padding: 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
}

.em-ocr__figure { margin: 0; }

.em-ocr__zoom {
    display: block;
    border-radius: 8px;
    background: var(--em-tint, #f0f6ff);
    overflow: hidden;
    cursor: zoom-in;
}

.em-ocr__preview {
    display: block;
    width: 100%;
    /* Tall and narrow pictures are common — a receipt, a page of notes. The
       cap is on height so they do not run off the screen, and contain keeps
       the whole frame visible rather than cropping the text away.

       It is also a share of the window, not a fixed number: at 340px the
       preview pushed the button that actually does the work off a phone
       screen, so choosing a picture meant scrolling to find out what to do
       next. */
    max-height: min( 340px, 38vh );
    object-fit: contain;
    object-position: center;
}

.em-ocr__figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    align-items: baseline;
    margin-top: .7em;
    color: var(--em-ink, inherit);
    overflow-wrap: anywhere;
}

/*
 * The actions stay on screen while the picture is being looked at. Sticky
 * rather than merely close to the top, because a wide photograph still makes
 * the panel taller than a phone.
 */
.em-ocr__chosen-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    margin: 1em -1em -1em;
    padding: .8em 1em;
    border-top: 1px solid var(--em-line, #e5e7eb);
    border-radius: 0 0 9px 9px;
    background: var(--em-surface, #fff);
}

/* The panel's own background is translucent in dark mode; the sticky bar
   needs something solid behind it or the picture shows through. */
@media (prefers-color-scheme: dark) {
    .em-ocr__chosen-actions { background: #0f172a; }
}

.em-ocr__run,
.em-ocr__copy,
.em-ocr__save {
    padding: .7em 1.3em;
    border: 1px solid var(--em-brand, #2563eb);
    border-radius: 8px;
    background: var(--em-brand, #2563eb);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-ocr__change {
    padding: .7em 1.3em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: transparent;
    color: var(--em-ink, inherit);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-ocr__save { background: transparent; color: var(--em-brand, #2563eb); }

/* The zoom link sits inside post content, where links are styled as prose. */
.em-ocr__zoom,
.em-ocr__zoom:hover,
.em-ocr__zoom:focus-visible { text-decoration: none; }

.em-ocr__run[disabled] { opacity: .6; cursor: progress; }

/* ── Progress ──────────────────────────────────────────────────────────── */

.em-ocr__progress {
    margin-top: 1.2em;
    padding: 1em 1.1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-tint, #f0f6ff);
}

.em-ocr__progress-head {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-bottom: .7em;
}

.em-ocr__status {
    flex: 1 1 auto;
    margin: 0;
    font-size: .94rem;
    color: var(--em-ink, inherit);
}

/* Tabular figures, or the percentage jitters as it counts up. */
.em-ocr__percent {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--em-brand, #2563eb);
}

.em-ocr__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--em-brand, #2563eb);
    border-right-color: transparent;
    border-radius: 50%;
    animation: em-ocr-spin .7s linear infinite;
}

@keyframes em-ocr-spin { to { transform: rotate(360deg); } }

.em-ocr__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .22);
    overflow: hidden;
}

.em-ocr__bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--em-brand, #2563eb);
    transition: width .25s ease;
}

.em-ocr__first-run {
    margin: .8em 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--em-soft, #6b7280);
}

/*
 * A spinner that cannot be stopped is a problem for some people, and the
 * bar alone already says the same thing.
 */
@media (prefers-reduced-motion: reduce) {
    .em-ocr__spinner { animation: none; opacity: .5; }
    .em-ocr__bar span { transition: none; }
}

/* ── The text ──────────────────────────────────────────────────────────── */

.em-ocr__result { margin-top: 1.4em; }

.em-ocr__out-label {
    display: block;
    margin-bottom: .4em;
    font-weight: 600;
    color: var(--em-ink, inherit);
}

.em-ocr__out {
    display: block;
    width: 100%;
    padding: .8em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    /*
     * Not monospace. A fixed-width face has to squeeze Devanagari into cells
     * built for Latin letters, and the matras and conjuncts come apart —
     * which makes correct text look like bad recognition. The system stack
     * reaches a proper Devanagari face on every platform that has one.
     */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
        "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari",
        Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    resize: vertical;
}

.em-ocr__actions {
    display: flex;
    gap: .6em;
    flex-wrap: wrap;
    margin-top: .8em;
}

.em-ocr__confidence {
    margin: .9em 0 0;
    padding: .7em .9em;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    background: rgba(245, 158, 11, .10);
    font-size: .9rem;
    color: var(--em-ink, inherit);
}