/*
 * Debug overlay for PDF text layer alignment.
 *
 * The text layer is normally invisible (`opacity: 0`) and selectable.
 * When `.ce-debug-textlayer` is on a parent, every text node becomes a
 * light grey box so it's obvious where text is selectable and where it
 * isn't — useful for diagnosing OCR misalignment, scan-only PDFs, and
 * text-layer shift caused by font fallbacks.
 *
 * Light grey was chosen so the debug overlay does not clash with the
 * citation-yellow used for evidence highlights (see highlight-styles.css).
 *
 * Toggle via the "Debug text layer" entry in SessionMenu.
 */

.ce-debug-textlayer .textLayer {
  outline: 2px dashed rgba(120, 120, 120, 0.55);
  background: rgba(120, 120, 120, 0.06);
}

/* PDF.js 4.x wraps marked content in nested spans/divs — cover every
   descendant so the entire selectable area is visible regardless of how
   the renderer nested things. */
.ce-debug-textlayer .textLayer * {
  background: rgba(170, 170, 170, 0.4) !important;
  color: rgba(40, 40, 40, 0.85) !important;
  opacity: 1 !important;
  outline: 1px solid rgba(100, 100, 100, 0.35);
}

/* Dim the canvas-rendered layer slightly so the debug overlay stands
   out by contrast. */
.ce-debug-textlayer canvas {
  opacity: 0.4;
}

/*
 * Layer-visibility toggles. Each `.ce-hide-<layer>` class is applied
 * to the same viewer-wrapper element so a single parent can hide any
 * combination of layers. Useful for diagnosing layer stacking issues
 * (e.g. "is the textLayer covering the canvas?") by elimination.
 */

.ce-hide-canvas canvas {
  display: none !important;
}

.ce-hide-text-layer .textLayer {
  display: none !important;
}

.ce-hide-annotation-layer .annotationLayer,
.ce-hide-annotation-layer .annotationEditorLayer {
  display: none !important;
}

.ce-hide-xfa-layer .xfaLayer {
  display: none !important;
}