/**
 * OT PDF Viewer styles.
 *
 * Layout:
 *   - The viewer is a centered card, max 720px wide so it doesn't
 *     dominate full-bleed content areas. On mobile it goes edge-to-edge.
 *   - Fixed height (75vh on desktop) with the toolbar pinned at top.
 *   - The scroll area contains one .ot-pdf-viewer__page slot per page,
 *     each pre-sized to the page aspect ratio so the scrollbar reflects
 *     the full document length immediately.
 *   - Fullscreen mode: container fills the screen, scroller expands.
 */

.ot-pdf-viewer {
    position: relative;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    overflow: hidden;
    margin: 1.5em auto;
    max-width: 720px;          /* don't dominate the page */
    box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.05 );
    display: flex;
    flex-direction: column;
    height: 75vh;
    max-height: 900px;
    min-height: 480px;
}

/* PHP placeholder shown until JS mounts. */
.ot-pdf-viewer__loading,
.ot-pdf-viewer__error,
.ot-pdf-viewer__inline-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #646970;
    font-style: italic;
    padding: 2em;
    text-align: center;
}
.ot-pdf-viewer__error { color: #a30000; font-style: normal; }

/* Scroller — the area the user actually scrolls within. position:relative
   anchors page slots' offsetTop calculations (used by JS to scrollTo a
   specific page without scrolling the whole window). */
.ot-pdf-viewer__scroller {
    flex: 1;
    position: relative;
    overflow: auto;
    padding: 0.75em;
    background: #e5e5e7;       /* slightly grey so the white pages stand out */
    /* Stop drag-to-save and selection. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* Smooth scroll for prev/next + page-jumper jumps. */
    scroll-behavior: smooth;
}

/* One slot per PDF page. Aspect-ratio is set inline by JS from page 1's
   dimensions so the slot's height is correct before render — no layout
   shift when the canvas paints. position:relative so the absolutely-
   positioned link layer overlays the canvas correctly.

   max-width caps page width below the scroller's inner width to give a
   book-like reading experience instead of edge-to-edge fill. */
.ot-pdf-viewer__page {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.12 );
    margin: 0 auto 0.75em;
    width: 100%;
    max-width: 600px;
}
.ot-pdf-viewer__page:last-child { margin-bottom: 0; }

.ot-pdf-viewer__canvas {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Link layer overlay — absolutely positioned over the canvas, contains
   <a> tags at exact link rectangles. pointer-events: none on the layer
   itself so it doesn't block page selection; pointer-events: auto on
   the individual <a>s so clicks still register. */
.ot-pdf-viewer__annotations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ot-pdf-viewer__link {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    /* Subtle highlight on hover so users can tell something's clickable. */
    background: transparent;
    transition: background 100ms;
}
.ot-pdf-viewer__link:hover {
    background: rgba( 204, 0, 0, 0.12 );
}

/* Toolbar — always visible at the top of the card. */
.ot-pdf-viewer__toolbar {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.75em;
    background: #fff;
    border-bottom: 1px solid #dcdcde;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
}
.ot-pdf-viewer__toolbar:last-child:not(:first-child) {
    border-bottom: 0;
    border-top: 1px solid #dcdcde;
}

.ot-pdf-viewer__btn {
    appearance: none;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    color: #1d2327;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1;
    padding: 0.4em 0.75em;
    cursor: pointer;
    transition: background 100ms, color 100ms, border-color 100ms;
    min-width: 2.4em;
    text-align: center;
}
.ot-pdf-viewer__btn:hover:not(:disabled) {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}
.ot-pdf-viewer__btn:active:not(:disabled) { transform: translateY( 1px ); }
.ot-pdf-viewer__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Page jumper — input + " / 138 " label. */
.ot-pdf-viewer__pageinfo {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    color: #1d2327;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0 0.4em;
}
.ot-pdf-viewer__pageinput {
    appearance: none;
    width: 3ch;
    text-align: center;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.35em 0.3em;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
    -moz-appearance: textfield;
}
.ot-pdf-viewer__pageinput::-webkit-outer-spin-button,
.ot-pdf-viewer__pageinput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ot-pdf-viewer__pageinput:focus {
    outline: 2px solid #cc0000;
    outline-offset: -1px;
    border-color: #cc0000;
}
.ot-pdf-viewer__pagesep,
.ot-pdf-viewer__pagetotal { color: #646970; font-weight: 500; }
.ot-pdf-viewer__pagetotal { color: #1d2327; font-weight: 600; }
.ot-pdf-viewer__sep {
    width: 1px;
    height: 1.5em;
    background: #dcdcde;
    margin: 0 0.3em;
}

/* ---- Fullscreen state -------------------------------------------------
   Browser-dispatched :fullscreen on the viewer element. We expand to fill
   the screen; the scroller takes all remaining height; pages get a wider
   max-width so reading at full size feels good. */
.ot-pdf-viewer:fullscreen,
.ot-pdf-viewer:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
    margin: 0;
}
.ot-pdf-viewer:fullscreen .ot-pdf-viewer__page,
.ot-pdf-viewer:-webkit-full-screen .ot-pdf-viewer__page {
    max-width: 1000px;       /* roomier reading area when fullscreen */
}
.ot-pdf-viewer:fullscreen .ot-pdf-viewer__scroller,
.ot-pdf-viewer:-webkit-full-screen .ot-pdf-viewer__scroller {
    padding: 1.5em;
}

/* Mobile — edge-to-edge, smaller toolbar height. */
@media ( max-width: 600px ) {
    .ot-pdf-viewer {
        height: 70vh;
        min-height: 360px;
        margin: 1em 0;
        border-radius: 4px;
        max-width: 100%;
    }
    .ot-pdf-viewer__scroller { padding: 0.5em; }
    .ot-pdf-viewer__btn { padding: 0.5em 0.7em; min-width: 2.6em; }
    .ot-pdf-viewer__pageinput { width: 3.5ch; padding: 0.4em 0.3em; }
}