/* Read Chinese from a Photo (/tools/photo-reader) and Chinese OCR (/tools/chinese-ocr), growth plan D125.
   Colours come from Bootstrap variables so dark mode needs no second set of rules. */

.pr-photo-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The file inputs are real inputs (so a keyboard and a screen reader reach them) with their own
   chrome hidden; the label beside each is the visible button. */
.pr-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pr-file:focus-visible + label { outline: 3px solid var(--bs-primary); outline-offset: 2px; }

.pr-stage canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: left center;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.pr-photo-scroll { overflow-x: auto; border-radius: 0.5rem; }
.pr-photo-scroll:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.pr-photo-view { position: relative; box-sizing: border-box; }
/* Reserve two readable label columns. Only this view scrolls on narrow screens. */
.pr-photo-scroll.pr-labelled .pr-photo-view { min-width: 760px; }
.pr-photo-scroll.pr-labelled canvas { width: calc(100% - 440px); max-height: none; margin-inline: 220px; }
.pr-photo-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pr-photo-connectors path { fill: none; stroke: var(--bs-primary, #0d6efd); stroke-width: 1; opacity: 0.35; }
.pr-photo-connectors path.active { stroke: #fd7e14; stroke-width: 2.5; opacity: 1; }
.pr-photo-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pr-photo-label {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--bs-primary, #0d6efd);
    border-radius: 0.45rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font: 500 0.8125rem/1.35 system-ui, sans-serif;
    text-align: left;
    pointer-events: auto;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
}
.pr-photo-labels .pr-photo-label { position: absolute; }
.pr-photo-label-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pr-photo-label .pr-line-num { min-width: 1.25rem; font-size: 0.75rem; }
.pr-photo-label .fa-cloud { color: var(--bs-info-text-emphasis, #055160); }
.pr-photo-label.active { border-color: #fd7e14; box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.35); z-index: 1; }
.pr-photo-label.active .pr-line-num { background: #b94c00; }
.pr-photo-label:hover, .pr-photo-label:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; z-index: 2; }
#photoReader [hidden] { display: none !important; }

.pr-view-options { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; border: 0; }
.pr-view-options label { flex: 1 1 160px; }
.pr-photo-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pr-photo-zoom select { width: auto; }
.pr-image-views { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pr-image-panel { margin: 0; min-width: 0; }
.pr-image-pan { overflow: auto; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; }
.pr-image-pan:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.pr-image-surface { position: relative; width: 100%; }
.pr-image-surface canvas { width: 100%; height: auto; max-height: none; border-radius: 0; }
.pr-image-labels { position: absolute; inset: 0; pointer-events: none; }
.pr-image-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    border: 1px solid #b94c00;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.94);
    color: #212529;
    font: 600 14px/1.15 system-ui, sans-serif;
    text-align: center;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
}
.pr-image-label-text { min-width: 0; max-width: 100%; max-height: 100%; overflow-wrap: anywhere; }
.pr-image-label .fa-cloud { font-size: 0.75em; }
.pr-image-label.active, .pr-image-label:focus-visible { outline: 3px solid #fd7e14; outline-offset: 1px; z-index: 2; }
.pr-image-label.pr-text-clipped::after { content: '…'; position: absolute; bottom: 0; right: 0; background: #fff; color: #212529; padding: 0 1px; font-size: 12px; }
.pr-image-views[data-view="replace"] .pr-image-label { border-color: transparent; background: transparent; }
.pr-image-label.pr-image-unavailable { border: 1px dashed #b94c00; background: transparent; align-items: flex-start; justify-content: flex-end; }
.pr-image-unavailable .pr-image-label-text { background: #fff; color: #212529; padding: 0 2px; }

.pr-lines { counter-reset: none; padding-left: 0; list-style: none; margin: 0; }
.pr-line {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-body-bg);
}
.pr-show { display: inline-block; margin-bottom: 0.4rem; font-size: 0.9rem; }
/* The tapped line, in the same orange as its box on the photo (photo-reader.js). */
.pr-line.active { border-color: #fd7e14; box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.3); background: rgba(253, 126, 20, 0.06); }
.pr-line.active .pr-line-num { background: #fd7e14; }
.pr-line:focus { outline: none; }
.pr-line-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.pr-line-num {
    flex: 0 0 auto;
    min-width: 1.6rem;
    text-align: center;
    border-radius: 0.3rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.pr-line-text { font-size: 1.5rem; line-height: 1.35; word-break: break-all; }
.pr-listen { margin-left: auto; align-self: center; flex-shrink: 0; }

/* A character the reader would not vouch for. Visibly a gap, never a lookalike. */
.pr-unsure {
    display: inline-block;
    color: var(--bs-secondary-color);
    border-bottom: 2px dotted var(--bs-secondary-color);
    margin: 0 0.05em;
}

/* A line's words after "Pinyin & meaning" (photo-reader.js fillLine). */
.pr-words { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.4rem; border-top: 1px solid var(--bs-border-color); }
.pr-word { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; max-width: 100%; font-size: 0.9rem; }
.pr-word-hanzi { font-size: 1.1rem; font-weight: 600; color: var(--bs-body-color); }
a.pr-word-hanzi { text-decoration: underline dotted; text-underline-offset: 3px; }
a.pr-word-hanzi:hover { color: var(--bs-primary); }
.pr-word-pinyin { color: var(--bs-primary); }
.pr-word-meaning { color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.pr-word-unknown .pr-word-hanzi { font-weight: 400; color: var(--bs-secondary-color); }

/* Microsoft Translator's part (the switch beside the buttons): a word's in-context English after a
   slash, or the whole line where the words could not be matched. Always carries the cloud. */
.pr-word-azure { color: var(--bs-body-color); overflow-wrap: anywhere; }
.pr-word-azure .fa-cloud, .pr-whole .fa-cloud { color: var(--bs-info); font-size: 0.85em; }
.pr-whole { display: block; margin-top: 0.4rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.pr-azure-off .pr-word-azure, .pr-azure-off .pr-whole { display: none; }

.pr-progress { height: 0.6rem; }

/* The "first time" download size inside a photo button. A class, not .d-block: Bootstrap's
   utility would beat the hidden attribute that removes the line once the reader is in. */
.pr-size { display: block; font-size: 0.8em; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
    .pr-progress .progress-bar { transition: none; }
}

/* Chinese OCR (/tools/chinese-ocr): the drop zone and the editable text. */
.oc-drop {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    background: var(--bs-tertiary-bg);
}
.oc-drop.active, .pr-drop.active { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), 0.08); }
.pr-drop {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.oc-text { font-size: 1.15rem; line-height: 1.6; }