/* ============================================================================
   VRYNO SIGN -- DOCUMENT PREVIEW THUMBNAIL
   ============================================================================
   The surface for the thumbnail that assets/js/vryno-doc-thumb.js puts in the
   DOCUMENT cell of the Sign lists, in place of the round tile that held a
   file glyph.

   The glyph told you the file was a PDF. It could not tell you which PDF --
   every contract in the list looked identical, so the filename was doing all
   the work. The thumbnail shows the document's first page, so a row is
   recognisable before it is read.

   Two rules shape everything below:

     * the footprint does not move. The old tile was 36x36; so is this, to the
       pixel, so column widths, row heights and the gap to the filename are
       exactly what they were;
     * the type indicator is not lost. The same glyph, in the same tint the
       row already used, sits as a small chip on the corner of the page.

   Sizes come from tokens so the thumbnail and the larger hover preview are
   one component drawn at two scales, rather than two things to keep in sync.
============================================================================ */

:root {
    --vr-thumb-size: 36px;
    --vr-thumb-radius: 8px;
    --vr-peek-w: 148px;
    --vr-peek-h: 190px;
}

/* ------------------------------------------------------------ the thumbnail */

.vr-doc-thumb {
    position: relative;
    display: inline-block;
    width: var(--vr-thumb-size);
    height: var(--vr-thumb-size);
    flex-shrink: 0;
    border-radius: var(--vr-thumb-radius);
    border: 1px solid var(--border-color);
    background: var(--white);
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    /* Sits on the theme's own card shadow so it reads as a small card rather
       than a floating image. */
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.vr-doc-thumb:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.vr-doc-thumb:hover,
.vr-doc-thumb.is-open {
    transform: scale(1.06);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(17, 24, 39, .14);
}

/* ------------------------------------------------------------- the page face

   Either a real image -- a thumbnail the row supplied, or page one of a PDF
   rendered to a canvas -- or, when there is none, a drawn page. A drawn page
   rather than a fallback glyph: the ask was for a document placeholder, and a
   glyph is what this replaced. */

.vr-doc-page {
    position: absolute;
    inset: 0;
    display: block;
    padding: 5px 5px 0;
    background: var(--white);
}

.vr-doc-page > img,
.vr-doc-page > canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* An image fills the tile edge to edge; a drawn page keeps its margin. */
.vr-doc-page.is-image {
    padding: 0;
}

/* The accent strip at the head of the page, in the document's own type
   colour -- what a letterhead reads as at this size. */
.vr-doc-page-bar {
    display: block;
    height: 3px;
    width: 58%;
    margin-bottom: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: .75;
}

.vr-doc-page-l {
    display: block;
    height: 2px;
    margin-bottom: 3px;
    border-radius: 2px;
    background: var(--gray-300, #d7d9e0);
    opacity: .85;
}

/* At 36px only the first few lines fit; the rest exist for the larger
   preview, which is the same markup at a bigger scale. */
.vr-doc-thumb .vr-doc-page-l:nth-of-type(n + 5) {
    display: none;
}

.vr-doc-thumb .vr-doc-page-sig {
    display: none;
}

/* ---------------------------------------------------------- the type chip

   The document type indicator, kept. Same glyph and same tint as the round
   tile it came from -- the JS copies both off the element it replaces, so
   this file never has to know which types exist. */

.vr-doc-thumb-type {
    position: absolute;
    left: 2px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
}

.vr-doc-thumb-type i {
    font-size: 10px;
    line-height: 1;
}

/* ------------------------------------------------------------- the overlay

   Subtle: a wash over the page, not a block. It says the thumbnail is the way
   in to the preview without hiding the thing it is previewing. */

.vr-doc-thumb-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .34);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity .16s ease;
}

.vr-doc-thumb:hover .vr-doc-thumb-veil,
.vr-doc-thumb:focus-visible .vr-doc-thumb-veil,
.vr-doc-thumb.is-open .vr-doc-thumb-veil {
    opacity: 1;
}

/* ------------------------------------------------- the larger hover preview

   One panel, moved and refilled, rather than one per row: 164 rows would
   otherwise each carry a hidden preview. Fixed position so a table with its
   own overflow cannot clip it. */

.vr-doc-peek {
    position: fixed;
    z-index: 1090;
    width: var(--vr-peek-w);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--white);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
}

.vr-doc-peek.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.vr-doc-peek-sheet {
    position: relative;
    height: var(--vr-peek-h);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--white);
    overflow: hidden;
}

.vr-doc-peek .vr-doc-page {
    padding: 14px 14px 0;
}

.vr-doc-peek .vr-doc-page-bar {
    height: 7px;
    margin-bottom: 12px;
}

.vr-doc-peek .vr-doc-page-l {
    height: 4px;
    margin-bottom: 7px;
}

.vr-doc-peek .vr-doc-page-sig {
    display: block;
    width: 52%;
    height: 14px;
    margin-top: 18px;
    border-radius: 3px;
    background: currentColor;
    opacity: .28;
}

/* The same wash as on the thumbnail, so the two read as one interaction. */
.vr-doc-peek-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0) 55%, rgba(17, 24, 39, .32) 100%);
}

.vr-doc-peek-name {
    margin: 7px 2px 1px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--heading-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vr-doc-peek-meta {
    margin: 0 2px;
    font-size: 11px;
    color: var(--gray-500);
}

/* ------------------------------------------------------------------- dark */

html[data-bs-theme="dark"] .vr-doc-page,
html[data-bs-theme="dark"] .vr-doc-thumb,
html[data-bs-theme="dark"] .vr-doc-peek,
html[data-bs-theme="dark"] .vr-doc-peek-sheet {
    background: var(--dtf-card, #1b1c31);
}

html[data-bs-theme="dark"] .vr-doc-page-l {
    background: var(--dtf-border, #33344a);
    opacity: 1;
}

/* --------------------------------------------------------------- restraint */

@media (prefers-reduced-motion: reduce) {

    .vr-doc-thumb,
    .vr-doc-peek,
    .vr-doc-thumb-veil {
        transition: none;
    }

    .vr-doc-thumb:hover,
    .vr-doc-thumb.is-open {
        transform: none;
    }
}

/* On a touch screen there is no hover, so the enlarged panel never appears
   and the thumbnail is simply a target that opens the preview. */
@media (hover: none) {
    .vr-doc-peek {
        display: none;
    }
}


/* ============================================================================
   TEMPLATE PREVIEWS  --  sign/templates.html
   ==========================================================================*/

/* The card header. The tint behind the sheet is the category's own, set
   inline by the script, so the four cards are told apart at a glance even
   before the drawing is read. */
.vr-tpl-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, currentColor 9%, transparent) 0%,
            color-mix(in srgb, currentColor 3%, transparent) 100%);
}

.vr-tpl-page {
    display: block;
    height: 118px;
    filter: drop-shadow(0 4px 10px rgb(30 20 90 / 14%));
}

.vr-tpl-thumb .vr-tpl-svg {
    height: 100%;
    width: auto;
    display: block;
    border-radius: 4px;
}

/* The list view's 36px tile, the same size the document lists' thumbnails
   use so the two lists line up. */
.vr-tpl-mini {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 10%, var(--white));
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}

.vr-tpl-mini .vr-tpl-svg {
    height: 30px;
    width: auto;
    display: block;
}