/* ----------------------------------------------------------------
   PDF Viewer container
---------------------------------------------------------------- */

/* Flex column that centers pages and provides scroll context */
.pdf-viewer {
    --scale-factor: 1;
    --page-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--page-gap);
    gap: var(--page-gap);
}

#pdf-loading {
    color: #ccc;
    font-family: sans-serif;
    padding: 2rem;
}

/*
 * Individual page wrapper.
 * Mirrors .pdfViewer .page from pdfjs/web/viewer.css so the
 * TextLayer + setLayerDimensions CSS-variable chain resolves:
 *
 *   --total-scale-factor = --scale-factor * --user-unit
 *
 * JS sets --scale-factor on each .pdf-page to the CSS scale used
 * when sizing the canvas (viewport.width / baseViewport.width).
 */
.pdf-page {
    scroll-margin-top: var(--page-gap);
    --user-unit: 1;
    --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
    --scale-round-x: 1px;
    --scale-round-y: 1px;

    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

/* Canvas is the base visual layer */
.pdf-page canvas {
    display: block;
}

/* ----------------------------------------------------------------
   Text Layer  —  ported from pdfjs/web/viewer.css
   Transparent <span> elements sit over the canvas so the text
   is selectable and copy-pasteable.
---------------------------------------------------------------- */
.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: 0;

    /*
     * CSS variable defaults.
     * TextLayer JS overrides --min-font-size via
     * container.style.setProperty() after construction.
     */
    --min-font-size: 1;
    --min-font-size-inv: calc(1 / var(--min-font-size));
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
}

/* Transparent but cursor:text so the browser treats them as text */
.textLayer :is(span, br) {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

/*
 * JS sets --font-height, --scale-x, and --rotate on each span.
 * The transform chain: rotate → scaleX → scale(min-font-size-inv)
 * lets PDF.js render arbitrarily-rotated / condensed text correctly.
 */
.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x))
        scale(var(--min-font-size-inv));
}

.textLayer .markedContent {
    display: contents;
}

/* Text selection highlight */
.textLayer ::selection {
    background: rgba(0, 0, 255, 0.25);
}
.textLayer br::selection {
    background: transparent;
}

/*
 * endOfContent is appended by TextLayer after render.
 * It lets drag-selection extend past the last text line.
 */
.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;
}

/* ----------------------------------------------------------------
   Annotation Layer  —  clickable links and other PDF annotations
   Positioned absolutely over the canvas (above the text layer).
   Ported from pdfjs-dist/web/viewer.css.
---------------------------------------------------------------- */

.annotationLayer {
    --link-outline: none;

    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 3;
}

/* Each annotation is a <section> sized and placed by PDF.js. */
.annotationLayer section {
    position: absolute;
    text-align: initial;
    pointer-events: auto;
    box-sizing: border-box;
    transform-origin: 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/*
 * While text is being selected the textLayer gains the "selecting" class.
 * Turn off pointer events on annotation sections so the selection drag
 * isn't interrupted by link hit areas.
 */
.textLayer.selecting ~ .annotationLayer section {
    pointer-events: none;
}

/* The <a> inside a linkAnnotation fills the entire section box. */
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
    position: absolute;
    font-size: 1em;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Subtle yellow hover highlight for links without an explicit border. */
.annotationLayer
    :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
    > a:hover {
    opacity: 0.2;
    background-color: rgb(255 255 0);
}

/* Links that already have a visible PDF border get a transparent fill on hover. */
.annotationLayer .linkAnnotation.hasBorder:hover {
    background-color: rgb(255 255 0 / 0.2);
}

/* Annotated borders use a background-image drawn by PDF.js. */
.annotationLayer .hasBorder {
    background-size: 100% 100%;
}

/* High-contrast mode: draw an outline so links are visible without colour. */
@media screen and (forced-colors: active) {
    .annotationLayer {
        --link-outline: 1.5px solid LinkText;
    }

    .annotationLayer .linkAnnotation {
        outline: var(--link-outline);
    }

    .annotationLayer .linkAnnotation:hover {
        -webkit-backdrop-filter: var(--hcm-highlight-filter);
        backdrop-filter: var(--hcm-highlight-filter);
    }

    .annotationLayer .linkAnnotation > a:hover {
        opacity: 0 !important;
        background: none !important;
        box-shadow: none;
    }
}

/* ----------------------------------------------------------------
   Print  —  hide the entire viewer UI; show only the pre-rendered
   print pages that printPDF() appends to #pdf-print-container.
---------------------------------------------------------------- */
#pdf-print-container {
    display: none;
}

@media print {
    body > *:not(#pdf-print-container) {
        display: none !important;
    }

    body {
        background: #fff;
    }

    #pdf-print-container {
        display: block;
    }

    .pdf-print-page {
        page-break-after: always;
        margin: 0;
    }

    .pdf-print-page:last-child {
        page-break-after: avoid;
    }

    .pdf-print-page img {
        display: block;
        width: 100%;
        height: auto;
    }
}