/* Field <-> box cross-highlight toggled by js/ocr-fields.js (the demo's selection link).
   Deliberately GLOBAL, not component-scoped: the highlight must reach BOTH the .ocr-box span
   (rendered directly by DocumentsPane) AND the .ocr-field <tr> (rendered by the Table child
   component, which carries its own scope id). Loaded AFTER Mohap.Console.styles.css so it wins
   on equal specificity. Mirrors the resting box's :hover/:focus-within accent promotion. */
.ocr-box.is-focus {
    outline: 2px solid var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 16%, transparent);
    z-index: 5;
}

.ocr-box.is-focus::before {
    background: var(--ui-accent);
    opacity: 1;
}

.ocr-field {
    transition: background-color .12s ease;
}

.ocr-field.is-focus > * {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

/* Artifact markers cross-highlight in the accent-2 family (distinct from the text fields'
   accent), so an artifact's marker + its thumbnail light up together on hover. Global for the
   same reason as above: it must reach both the overlay marker and the scoped thumbnail row. */
.ocr-box.ocr-artifact.is-focus {
    outline: 2px solid var(--art, #64748B);
    background: color-mix(in srgb, var(--art, #64748B) 22%, transparent);
    z-index: 6;
}

.ocr-box.ocr-artifact.is-focus::before {
    background: var(--art, #64748B);
    opacity: 1;
}