/* ==========================================================================
   ARKENSTONE REGISTRY — PDF VIEWER  (Phase 1)
   Full-screen modal: toolbar + scrollable page canvases.
   ========================================================================== */

.pdfv-overlay {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    flex-direction: column;
    background: rgba(28, 24, 18, 0.82);
    backdrop-filter: blur(4px);
}
body.pdfv-open { overflow: hidden; }

.pdfv-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-surface-card, #fbf8f1);
    border-bottom: 1px solid var(--color-border-rule, rgba(0,0,0,.1));
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.pdfv-bar-left { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.pdfv-bar-left > i { color: #c0392b; font-size: 18px; flex-shrink: 0; }
.pdfv-name { font-size: 13px; font-weight: 600; color: var(--color-ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfv-bar-center { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pdfv-bar-right { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; }
.pdfv-pageind, .pdfv-zoom { font-size: 12px; color: var(--color-ink-muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

.pdfv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; background: none; border-radius: 7px;
    color: var(--color-ink-muted); cursor: pointer; font-size: 16px;
    text-decoration: none;
}
.pdfv-btn:hover { background: var(--color-surface-hover, rgba(0,0,0,.06)); color: var(--color-ink-primary); }
.pdfv-close:hover { background: rgba(192,57,43,.12); color: #c0392b; }

/* Holds the scroller and the markup index side by side. */
.pdfv-stage {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* ── page thumbnail rail ── */
.pdfv-rail {
    flex: 0 0 140px;
    overflow-y: auto;
    padding: 10px 8px;
    background: rgba(0,0,0,.16);
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: 8px;
}
.pdfv-rail[hidden] { display: none; }
.pdfv-rail-item {
    flex: 0 0 auto;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pdfv-rail-thumb {
    display: block; width: 112px; min-height: 40px;
    background: #fff; border-radius: 2px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
}
.pdfv-rail-thumb canvas { display: block; width: 112px; height: auto; }
.pdfv-rail-item.active .pdfv-rail-thumb { border-color: var(--gold, #C9A227); }
.pdfv-rail-n { font-size: 10.5px; color: rgba(244,236,221,.62); font-variant-numeric: tabular-nums; }
.pdfv-rail-item.active .pdfv-rail-n { color: var(--gold, #C9A227); font-weight: 700; }
@media (max-width: 760px) {
    .pdfv-rail { flex-basis: 96px; }
    .pdfv-rail-thumb, .pdfv-rail-thumb canvas { width: 76px; }
}

/* ── markup index panel ── */
.pdfv-panel {
    flex: 0 0 268px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-surface-card, #fffdf7);
    border-left: 1px solid var(--color-border-rule, rgba(0,0,0,.14));
}
.pdfv-panel[hidden] { display: none; }
.pdfv-panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-border-rule, rgba(0,0,0,.12));
    font-size: 12px; font-weight: 600;
    color: var(--color-ink-primary, #1c1812);
}
.pdfv-panel-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.pdfv-panel-filter {
    margin-left: auto; font-size: 10.5px; font-weight: 400;
    color: var(--color-ink-muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    white-space: nowrap;
}
.pdfv-panel-body { flex: 1; overflow-y: auto; padding: 6px; }
.pdfv-panel-empty { padding: 18px 12px; font-size: 12px; color: var(--color-ink-muted); text-align: center; }
.pdfv-panel-row {
    width: 100%; display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 8px; margin-bottom: 3px;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; cursor: pointer; text-align: left;
}
.pdfv-panel-row:hover { background: var(--color-surface-hover, rgba(0,0,0,.05)); border-color: var(--color-border-rule, rgba(0,0,0,.12)); }
.pdfv-panel-row.resolved { opacity: .55; }
.pdfv-panel-dot {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pin, #e8a33d); color: #fff; font-size: 12px;
}
.pdfv-panel-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pdfv-panel-note {
    font-size: 12px; color: var(--color-ink-primary, #1c1812);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pdfv-panel-meta { font-size: 10.5px; color: var(--color-ink-muted); }
.pdfv-anno-n {
    display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
    padding: 0 3px; margin-left: 3px; border-radius: 8px;
    background: var(--color-ink-muted); color: #fff;
    font-size: 9.5px; font-weight: 700; text-align: center;
}
.pdfv-anno-n:empty { display: none; }
.pdfv-anno-n.has-open { background: var(--gold, #C9A227); color: #1a1407; }
/* brief pulse when you jump to a markup from the list */
.pdfv-a-flash { animation: pdfv-flash 1.4s ease-out; }
@keyframes pdfv-flash {
    0%, 100% { filter: none; }
    18%, 55% { filter: drop-shadow(0 0 7px var(--gold, #C9A227)) brightness(1.25); }
}
.pdfv-load-sub { display: block; font-size: 11px; opacity: .65; margin-top: 3px; }

@media (max-width: 760px) {
    /* the panel would leave no room for the drawing — overlay it instead */
    .pdfv-panel {
        position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
        flex-basis: min(300px, 86vw);
        box-shadow: -8px 0 26px rgba(0,0,0,.28);
    }
    .pdfv-stage { position: relative; }
}

.pdfv-scroll {
    flex: 1;
    overflow: auto;
    padding: 18px 12px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}
.pdfv-page {
    position: relative;            /* host for the Phase-2 annotation overlay */
    /* Load-bearing: .pdfv-scroll is a column flexbox, so items shrink by
       default. A virtualised page shell is EMPTY until its canvas is rendered,
       giving it a min-content height of 0 — without this it collapses to a
       sliver, the scroller shrinks to viewport height and scrolling dies. */
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    border-radius: 2px;
}
.pdfv-canvas { display: block; border-radius: 2px; }

/* A page shell that has no raster yet (virtualised out, or still rendering).
   It keeps its exact final size so the scrollbar never jumps. */
.pdfv-page-blank {
    background: #fff repeating-linear-gradient(
        45deg, rgba(0,0,0,.012) 0 10px, transparent 10px 20px);
}

/* ── text layer ──
   Exists ONLY to paint search highlights now. It is never interactive: when it
   was, it sat over the markup overlay and swallowed every click, so none of the
   annotation tools could draw. Markup is the point of this viewer, so the text
   layer stays strictly decorative and the overlay stacks above it. */
.pdfv-text {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    text-align: initial;
    transform-origin: 0 0;
    forced-color-adjust: none;
    z-index: 1;
    pointer-events: none;      /* load-bearing — see above */
    user-select: none;
}
.pdfv-text span, .pdfv-text br {
    color: transparent;
    position: absolute;
    white-space: pre;
    transform-origin: 0% 0%;
    pointer-events: none;
}
.pdfv-text .pdfv-hl {
    position: static;                       /* inline mark inside a positioned span */
    background: rgba(233,163,61,.45);
    border-radius: 2px;
    color: transparent;
}

/* ── page number input + find box ── */
.pdfv-pagenum {
    width: 42px; padding: 3px 4px; text-align: center;
    font-size: 12px; font-variant-numeric: tabular-nums;
    border: 1px solid var(--color-border-rule, rgba(0,0,0,.15));
    border-radius: 6px;
    background: var(--color-surface-card, #fff);
    color: var(--color-ink-primary, #1c1812);
}
.pdfv-pagenum:focus { outline: none; border-color: var(--gold, #C9A227); }
.pdfv-find {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px; padding-left: 10px;
    border-left: 1px solid var(--color-border-rule, rgba(0,0,0,.12));
    color: var(--color-ink-muted);
}
.pdfv-find-in {
    width: 150px; padding: 4px 6px; font-size: 12px;
    border: 1px solid var(--color-border-rule, rgba(0,0,0,.15));
    border-radius: 6px;
    background: var(--color-surface-card, #fff);
    color: var(--color-ink-primary, #1c1812);
}
.pdfv-find-in:focus { outline: none; border-color: var(--gold, #C9A227); }
.pdfv-find-count {
    font-size: 11px; color: var(--color-ink-muted);
    min-width: 74px; text-align: center; white-space: nowrap;
}
.pdfv-find-nav { width: 26px; height: 26px; }

@media (max-width: 900px) {
    /* the toolbar can't hold search on a phone — the field would squeeze the
       page controls out; search stays reachable via Ctrl+F on desktop */
    .pdfv-find { display: none; }
}

.pdfv-loading {
    color: #f4ecdd; font-size: 14px; margin: auto;
    display: flex; align-items: center; gap: 8px;
}
.pdfv-loading > i { animation: spin 1s linear infinite; font-size: 18px; }
.pdfv-error { flex-direction: column; text-align: center; gap: 10px; }
.pdfv-error a { color: var(--gold, #c9a227); }

@media (max-width: 640px) {
    .pdfv-name { max-width: 38vw; }
    .pdfv-bar { gap: 6px; padding: 7px 8px; }
    .pdfv-btn { width: 30px; height: 30px; }
    .pdfv-pageind, .pdfv-zoom { min-width: 42px; font-size: 11px; }
}

/* ── annotation toolbar (Phase 2) ── */
.pdfv-annobar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    background: var(--color-canvas-secondary, #f3eee2);
    border-bottom: 1px solid var(--color-border-rule, rgba(0,0,0,.1));
}
.pdfv-tools, .pdfv-colors { display: flex; align-items: center; gap: 3px; }
.pdfv-tool {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 7px; cursor: pointer;
    color: var(--color-ink-muted); font-size: 16px;
}
.pdfv-tool:hover { background: var(--color-surface-hover, rgba(0,0,0,.06)); color: var(--color-ink-primary); }
.pdfv-tool.active { background: var(--gold, #c9a227); color: #fff; }
.pdfv-colors { gap: 5px; padding-left: 8px; border-left: 1px solid var(--color-border-rule, rgba(0,0,0,.12)); }
.pdfv-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pdfv-color.active { border-color: var(--color-ink-primary, #1c1812); box-shadow: 0 0 0 2px #fff inset; }
.pdfv-anno-hint { font-size: 11px; color: var(--color-ink-muted); margin-left: auto; }
/* Only meaningful with a finger, and only while a drawing tool is armed. */
.pdfv-touch-hint { display: none; }
@media (pointer: coarse) {
    /* Tap targets follow the INPUT, not the width. A phone held sideways is
       844px — above the 760px phone breakpoint — so it was being served desktop
       chrome with 32px buttons under a fingertip. Anything touch gets 44px. */
    .pdfv-bar .pdfv-btn { min-width: 44px; height: 44px; }
    .pdfv-bar .pdfv-btn.pdfv-find-nav { min-width: 38px; height: 38px; }

    .pdfv-anno-hint { display: none; }
    .pdfv-touch-hint {
        margin-left: auto; font-size: 10.5px; white-space: nowrap;
        color: var(--color-ink-muted);
    }
    body.pdfv-drawing .pdfv-touch-hint {
        color: var(--gold, #C9A227); font-weight: 600;
    }
}

/* ── per-page overlay ── */
/* z-index keeps the markup layer above the (decorative) text layer — without
   it the tools receive no clicks at all */
.pdfv-anno { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pdfv-anno.hidden { display: none; }
.pdfv-anno.pdfv-anno-active { pointer-events: auto; cursor: crosshair; }
.pdfv-anno-svg, .pdfv-tmp { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pdfv-anno .pdfv-a { pointer-events: auto; }
.pdfv-anno-active .pdfv-a { pointer-events: none; }   /* don't block drawing */
.pdfv-anno:not(.pdfv-anno-active) .pdfv-a { cursor: pointer; }
.pdfv-anno-erase .pdfv-a:hover, .pdfv-anno-erase .pdfv-pin:hover { opacity: .35; }
.pdfv-anno-erase .pdfv-pin { cursor: pointer; }

/* comment pins */
.pdfv-pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50% 50% 50% 2px;
    border: 2px solid #fff; background: var(--pin, #e8a33d); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.pdfv-pin.resolved { opacity: .5; }
.pdfv-textanno {
    position: absolute; transform: translate(-2px, -50%);
    font-size: 13px; font-weight: 600; pointer-events: auto;
    background: rgba(255,255,255,.7); padding: 0 3px; border-radius: 3px; white-space: nowrap;
}

/* pin / shape popover */
.pdfv-pinpop {
    z-index: 10090; width: 260px;
    background: var(--color-surface-card, #fff); border: 1px solid var(--color-border-rule, rgba(0,0,0,.12));
    border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden;
}
.pdfv-pinpop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--color-border-rule, rgba(0,0,0,.1)); }
.pdfv-pinpop-who { font-size: 12.5px; font-weight: 600; color: var(--color-ink-primary); }
.pdfv-pinpop-kind { font-size: 10.5px; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.pdfv-pinpop-note { width: 100%; box-sizing: border-box; border: none; resize: vertical; min-height: 56px; padding: 9px 11px; font: inherit; font-size: 12.5px; color: var(--color-ink-primary); outline: none; background: none; }
.pdfv-pinpop-notero { padding: 9px 11px; font-size: 12.5px; color: var(--color-ink-primary); white-space: pre-wrap; }
.pdfv-pinpop-actions { display: flex; gap: 6px; padding: 8px 11px; border-top: 1px solid var(--color-border-rule, rgba(0,0,0,.08)); }
.pdfv-pinpop-btn { flex: 1; font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px; border-radius: 7px; border: 1px solid var(--color-border-rule, rgba(0,0,0,.15)); background: none; color: var(--color-ink-primary); cursor: pointer; }
.pdfv-pinpop-btn:hover { background: var(--color-surface-hover, rgba(0,0,0,.05)); }
.pdfv-pinpop-btn.danger { color: #c0392b; border-color: rgba(192,57,43,.4); }
.pdfv-pinpop-btn.danger:hover { background: rgba(192,57,43,.08); }

@media (max-width: 640px) {
    .pdfv-annobar { gap: 8px; padding: 5px 8px; overflow-x: auto; }
    .pdfv-anno-hint { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE / SMALL TABLET  (≤760px)
   ══════════════════════════════════════════════════════════════════════════
   Measured at 390px before this block: the toolbar needed 490px, so Print,
   Download and CLOSE sat off-screen — the viewer could be opened and then not
   shut. Buttons were 30x30 against a 44px touch standard, colour swatches
   18x18, and the markup bar overflowed too.

   Layout here: close + name on a pinned first row, page/zoom controls on a
   second, everything else in a bottom sheet behind "⋯". */
.pdfv-more { display: none; }
.pdfv-mfind { display: none; }

@media (max-width: 760px) {
    /* Two rows via flex order + a zero-height 100% basis spacer as the row
       break. (A grid was tried first and put the page indicator and the zoom
       readout in the SAME cell, so they painted over each other.) */
    .pdfv-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        padding: max(6px, var(--safe-top, 0px)) 8px 6px;
    }
    /* flex:1 1 0 + min-width:0 on BOTH the group and the text, or a long
       filename claims the whole row and pushes the buttons onto another line */
    .pdfv-bar-left  { order: 1; flex: 1 1 0; min-width: 0; }
    .pdfv-name      { min-width: 0; }
    .pdfv-more      { order: 2; display: inline-flex; flex: 0 0 auto; }
    .pdfv-close     { order: 3; flex: 0 0 auto; }
    .pdfv-bar::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
    /* page controls take only what they need; the zoom group grows and
       right-aligns so both share row 2 instead of stacking */
    .pdfv-bar-center {
        order: 5;
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .pdfv-bar-center::-webkit-scrollbar { display: none; }
    .pdfv-bar-right { order: 6; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
    /* these live in the sheet on a phone */
    #pdfvRailBtn, #pdfvRotate, #pdfvPrint, #pdfvDownload, .pdfv-find { display: none !important; }

    /* real touch targets */
    .pdfv-btn { width: 44px; height: 44px; font-size: 18px; }
    .pdfv-find-nav { width: 40px; height: 40px; }
    /* row 2 must fit 374px of usable width (390 minus padding); a flex-wrap
       container wraps before it shrinks, so these are sized to fit, not hoped to */
    .pdfv-pagenum { width: 44px; height: 40px; font-size: 15px; }
    .pdfv-zoom { min-width: 42px; font-size: 11.5px; }
    .pdfv-pageind { min-width: 30px; font-size: 11.5px; }
    .pdfv-bar-center, .pdfv-bar-right { gap: 0; }
    .pdfv-name { font-size: 12.5px; }

    /* markup bar: scrolls instead of overflowing, tools and swatches tappable */
    .pdfv-annobar {
        overflow-x: auto; scrollbar-width: none;
        gap: 6px; padding: 5px 8px;
        flex-wrap: nowrap;
    }
    .pdfv-annobar::-webkit-scrollbar { display: none; }
    .pdfv-annobar > * { flex-shrink: 0; }
    .pdfv-tool { width: 42px; height: 42px; font-size: 18px; }
    /* keep the swatch visually small but give it a 44px hit area — a
       44px coloured dot would dominate the bar */
    .pdfv-color { width: 28px; height: 28px; position: relative; }
    .pdfv-color::after { content: ""; position: absolute; inset: -8px; }
    .pdfv-anno-hint { display: none; }

    /* slide-down find bar */
    .pdfv-mfind {
        display: none;
        align-items: center; gap: 6px;
        padding: 6px 8px;
        background: var(--color-surface-card, #fbf8f1);
        border-bottom: 1px solid var(--color-border-rule, rgba(0,0,0,.1));
        color: var(--color-ink-muted);
    }
    .pdfv-mfind:not([hidden]) { display: flex; }
    .pdfv-mfind input {
        flex: 1; min-width: 0; height: 40px;
        padding: 0 10px; font-size: 16px;      /* 16px = no iOS focus zoom */
        border: 1px solid var(--color-border-rule, rgba(0,0,0,.15));
        border-radius: 8px;
        background: var(--color-surface-page, #fff);
        color: var(--color-ink-primary);
    }
    .pdfv-mfind .pdfv-find-count { min-width: 60px; font-size: 11px; }

    /* bottom sheet — thumb-reachable, unlike a top dropdown */
    .pdfv-sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 10090; }
    .pdfv-sheet-scrim[hidden] { display: none; }
    .pdfv-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 10095;
        background: var(--color-surface-card, #fbf8f1);
        border-radius: 18px 18px 0 0;
        padding: 6px 10px max(14px, var(--safe-bottom, 0px));
        box-shadow: 0 -10px 34px rgba(0,0,0,.3);
        transform: translateY(100%);
        transition: transform .2s ease;
        max-height: 76dvh; overflow-y: auto;
    }
    .pdfv-sheet[hidden] { display: none; }
    .pdfv-sheet.open { transform: translateY(0); }
    .pdfv-sheet-grab {
        width: 38px; height: 4px; border-radius: 999px;
        background: var(--color-border-rule, rgba(0,0,0,.2));
        margin: 4px auto 10px;
    }
    .pdfv-sheet-row {
        display: flex; align-items: center; gap: 12px;
        width: 100%; min-height: 50px;
        padding: 0 8px; border: none; background: none;
        font-family: inherit; font-size: 14.5px; text-align: left;
        color: var(--color-ink-primary, #1c1812);
        border-radius: 10px; cursor: pointer;
    }
    .pdfv-sheet-row:active { background: var(--color-surface-hover, rgba(0,0,0,.06)); }
    .pdfv-sheet-row > i { font-size: 19px; color: var(--color-ink-muted); flex-shrink: 0; }

    /* the page area handles its own pinch/double-tap, so the browser must not */
    .pdfv-scroll { touch-action: pan-x pan-y; overscroll-behavior: contain; }
    .pdfv-page { box-shadow: 0 2px 10px rgba(0,0,0,.3); }
}