/* The PDF reading pane (js/pdf_view.js).
 *
 * Its own file because three screens use it and none of them should own it.
 * Colours come from the variables site.css defines, so a palette change reaches
 * here without a second edit.
 */
.pv { display: flex; flex-direction: column; height: 100%; background: #f0f2f2; }

.pv-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
          background: #fff; border-bottom: 1px solid var(--line); flex: 0 0 auto;
          flex-wrap: wrap; }
.pv-btn { font: inherit; font-size: 13px; line-height: 1; padding: 6px 10px;
          border: 1px solid var(--line); background: #fff; border-radius: 6px;
          cursor: pointer; color: var(--navy); text-decoration: none; }
.pv-btn:hover { border-color: var(--teal); }
.pv-num { width: 44px; padding: 5px 6px; font-size: 13px; text-align: center;
          border: 1px solid var(--line); border-radius: 6px; }
.pv-of { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.pv-gap { flex: 1; }
.pv-open { margin-left: 2px; }

.pv-pages { flex: 1 1 auto; overflow: auto; padding: 12px 0; text-align: center; }
.pv-pages:focus { outline: none; }

/* The box exists at full size before the page is drawn, so the scrollbar does
 * not jump as pages render. The tint is what "not drawn yet" looks like. */
.pv-page { position: relative; margin: 0 auto 12px; background: #fff;
           border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.pv-page canvas { display: block; width: 100%; height: 100%; }
.pv-page:not(.pv-ready) { background: #fafbfb; }

.pv-fallback { padding: 18px 20px; font-size: 14px; line-height: 1.6; }
.pv-fallback p { margin: 0 0 10px; }


/* ---- the selectable text layer ---------------------------------------- */
/* Transparent spans positioned over the canvas: the page is a picture, and
 * this is what makes it readable text you can select, copy and highlight.
 *
 * Written out flat rather than taken from pdfjs's own stylesheet, which is
 * nested CSS and carries viewer chrome this app does not use. Every rule here
 * earns its place:
 *   - the spans must be absolutely positioned and transparent, or they cover
 *     the drawing instead of overlaying it;
 *   - font-size derives from --total-scale-factor, which pdf_view.js sets per
 *     page, so the boxes track the zoom;
 *   - .endOfContent is pdfjs's mechanism for dragging a selection past the
 *     last line without it jumping to the top of the page.
 */
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1;
             text-align: initial; transform-origin: 0 0; z-index: 1;
             forced-color-adjust: none; caret-color: CanvasText;
             -webkit-text-size-adjust: none; text-size-adjust: none; }

.textLayer span, .textLayer br {
  color: transparent; position: absolute; white-space: pre; cursor: text;
  transform-origin: 0% 0%; -webkit-user-select: text; user-select: text;
}

.textLayer .markedContent { display: contents; }

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--total-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x));
}

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

/* The selection has to be visible over white paper without hiding the words.
 * Scoped to the viewer so it does not restyle selection anywhere else. */
.pv ::selection { background: rgba(31, 138, 138, .32); }

/* ---- highlights ------------------------------------------------------- */
/* The marks sit UNDER the text layer and take no pointer events. On top they
 * would swallow the selection, which would break the feature they depend on. */
.pv-marks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.pv-mark { position: absolute; border-radius: 2px; mix-blend-mode: multiply; }
.pv-mark-yellow { background: rgba(255, 214, 64, .45); }
.pv-mark-green  { background: rgba(120, 214, 130, .42); }
.pv-mark-blue   { background: rgba(120, 180, 255, .42); }
.pv-mark-pink   { background: rgba(255, 150, 190, .42); }
.pv-mark-flash  { outline: 2px solid var(--teal); outline-offset: 1px; }

/* The popover that appears when text is selected. Positioned against the pane
 * rather than the page, so it never scrolls away from the pointer. */
.pv-pop { position: absolute; z-index: 5; width: 248px; background: #fff;
          border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
          box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: 13px; }
.pv-pop-quote { color: var(--muted); font-size: 12px; line-height: 1.45;
                margin-bottom: 8px; max-height: 54px; overflow: hidden; }
.pv-pop-target { width: 100%; padding: 5px 6px; font-size: 12.5px; margin-bottom: 8px;
                 border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pv-pop-row { display: flex; gap: 6px; }
.pv-pop-err { color: #9b2226; width: auto; max-width: 280px; }

/* ---- the list of marks, shown beside the extraction form --------------- */
.hl-list { margin: 0; padding: 0; list-style: none; }
.hl-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
           margin-bottom: 6px; background: #fff; font-size: 13px; }
.hl-quote { cursor: pointer; line-height: 1.5; }
.hl-quote:hover { color: var(--teal-dark); }
.hl-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px;
           display: flex; gap: 8px; align-items: center; }
.hl-drop { background: none; border: 0; color: #9b2226; cursor: pointer;
           font-size: 11.5px; padding: 0; }
.hl-none { color: var(--muted); font-size: 13px; }