/* ===== src/css/pdf-text-layer.css =====
   Styles for the invisible <div class="textLayer"> that pdf.js renders
   on top of the canvas so users can select / copy / search the rendered
   text. The text spans are absolutely positioned, color: transparent;
   their geometry is computed against `--total-scale-factor` (set per-
   page by JS). Lifted verbatim from pdfjs-dist/web/pdf_viewer.css (only
   the .textLayer block) so we don't ship the rest of the upstream pdf
   viewer chrome.

   `.pdf-search-highlight` is ours — added to text-layer spans that
   contain a search hit. Themed so it reads on both light and dark
   surfaces. `.pdf-search-highlight.current` marks the active result. */

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 1;
}

.textLayer.highlighting { touch-action: none; }

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) { z-index: 1; }

.textLayer span.markedContent { top: 0; height: 0; }

.textLayer span[role="img"] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}

/* Selection. Chrome (and some Firefox configurations) override the
   `color: transparent` we set on text-layer spans with the system's
   "highlight text" color when text is selected — that's how you end up
   seeing ghostly white words floating over the canvas glyphs. Pinning
   `color: transparent` inside `::selection` keeps the text invisible
   even while the selection background paints behind it. */
.textLayer ::-moz-selection {
  background: rgba(var(--accent-rgb), 0.35);
  color: transparent;
}
.textLayer ::selection {
  background: rgba(var(--accent-rgb), 0.35);
  color: transparent;
}

.textLayer br::-moz-selection { background: transparent; }
.textLayer br::selection      { background: transparent; }

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }

/* Our search overlay — tinted accent rectangle painted behind the
   transparent text. `box-decoration-break: clone` so a hit that wraps
   across glyph spans renders as separate pills, not one long bar. */
.pdf-search-highlight {
  background-color: rgba(255, 213, 0, 0.45);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  mix-blend-mode: multiply;
}
[data-theme="light"] .pdf-search-highlight {
  background-color: rgba(255, 213, 0, 0.55);
  mix-blend-mode: multiply;
}
.pdf-search-highlight.current {
  background-color: rgba(255, 140, 0, 0.65);
  outline: 1.2px solid rgba(255, 140, 0, 0.85);
}