/* File preview modal (pages/partials/file-modal.php, patOpenFile()). */

.pat-fv .modal-header {
    margin-bottom: 12px;
}

.pat-fv__body {
    background: var(--ink);
    border-radius: 10px;
    min-height: 220px;
    max-height: 68vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pat-fv__body img {
    max-width: 100%;
    max-height: 68vh;
    display: block;
    object-fit: contain;
}

.pat-fv__body iframe {
    width: 100%;
    height: 68vh;
    border: 0;
    background: #fff;
    border-radius: 10px;
    display: block;
}

.pat-fv__body video {
    max-width: 100%;
    max-height: 68vh;
    display: block;
}

.pat-fv__body audio {
    width: min(560px, 90%);
    margin: 40px 0;
}

.pat-fv__none {
    text-align: center;
    color: #B9C0CC;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pat-fv__none p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.pat-fv .modal-footer a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.modal.pat-fv {
    width: min(1040px, 94vw);
}

/* Lets a long file name shrink instead of pushing the close button out. */
.pat-fv .pat-fv__titles {
    min-width: 0;
}

/* The large file-type badge shown when a file has no preview. */
.pat-fv__none .ws-file__icon.ws-file__icon--lg {
    width: 56px;
    height: 56px;
    font-size: var(--fs-lg);
}

/* Text and CSV files the viewer reads itself. */
.pat-fv__body:has(.pat-fv__text),
.pat-fv__body:has(.pat-fv__csv) {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
}

.pat-fv__wait {
    color: #B9C0CC;
    font-size: var(--fs-sm);
    padding: 48px 20px;
}

.pat-fv__text {
    margin: 0;
    padding: 16px 18px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: start;
}

.pat-fv__csv {
    text-align: start;
}

.pat-fv__csv table {
    border-collapse: collapse;
    font-size: var(--fs-sm);
    min-width: 100%;
}

.pat-fv__csv th,
.pat-fv__csv td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    border-inline-end: 1px solid var(--line);
    vertical-align: top;
    min-width: 90px;          /* a narrow screen scrolls the table sideways instead of squeezing a cell to one letter */
    max-width: 360px;
    overflow-wrap: break-word;
}

.pat-fv__csv th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--ink-2);
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
}

.pat-fv__csv tbody tr:hover td {
    background: var(--surface-2);
}

.pat-fv__csvnote {
    margin: 0;
    padding: 10px 14px;
    font-size: var(--fs-xs);
    color: var(--muted-ink);
    position: sticky;
    left: 0;
}

/* ── every kind of file ─────────────────────────────────────── */
/* A document-like preview sits on white, scrolls, and is read left to right (or as its own text says). */
.pat-fv__body.is-doc {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}

.pat-fv__body .pat-fv__none {
    margin: 0 auto;
}

.pat-fv__note {
    margin: 0;
    padding: 10px 16px;
    font-size: var(--fs-xs);
    color: var(--muted-ink);
}

.pat-fv__doc,
.pat-fv__md {
    padding: 20px 26px;
    max-width: 82ch;
    margin: 0 auto;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    text-align: start;
    overflow-wrap: break-word;
}

.pat-fv__doc h1, .pat-fv__md h1 { font-size: var(--fs-2xl); margin: 18px 0 10px; }
.pat-fv__doc h2, .pat-fv__md h2 { font-size: var(--fs-xl); margin: 16px 0 8px; }
.pat-fv__doc h3, .pat-fv__md h3 { font-size: var(--fs-lg); margin: 14px 0 6px; }
.pat-fv__doc h4, .pat-fv__md h4,
.pat-fv__doc h5, .pat-fv__md h5,
.pat-fv__doc h6, .pat-fv__md h6 { font-size: var(--fs-md); margin: 12px 0 4px; }

.pat-fv__doc p,
.pat-fv__md p { margin: 0 0 10px; }

.pat-fv__li { padding-inline-start: 18px; margin-bottom: 4px; }

.pat-fv__md ul,
.pat-fv__md ol { margin: 0 0 10px; padding-inline-start: 22px; }

.pat-fv__md blockquote {
    margin: 0 0 10px;
    padding: 4px 14px;
    border-inline-start: 3px solid var(--line-strong);
    color: var(--ink-3);
}

.pat-fv__md code,
.pat-fv__md pre {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--surface-3);
    border-radius: var(--r-xs);
}

.pat-fv__md code { padding: 1px 5px; }
.pat-fv__md pre { padding: 12px 14px; overflow: auto; margin: 0 0 10px; }
.pat-fv__md pre code { padding: 0; background: none; }
.pat-fv__md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.pat-fv__md a { color: var(--primary); }

.pat-fv__doc table,
.pat-fv__md table {
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: var(--fs-sm);
}

.pat-fv__doc td, .pat-fv__doc th,
.pat-fv__md td, .pat-fv__md th {
    border: 1px solid var(--line-strong);
    padding: 6px 10px;
    vertical-align: top;
    text-align: start;
}

.pat-fv__md th { background: var(--surface-2); }

.pat-fv__slide {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--surface-2);
}

.pat-fv__slide h4 { margin-top: 0; color: var(--muted-ink); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-2xs); }

.pat-fv__tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 2;
}

.pat-fv__tabs button {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    padding: 6px 12px;
    color: var(--ink-3);
    cursor: pointer;
}

.pat-fv__tabs button.is-on {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-weight: 600;
    margin-bottom: -1px;
}

.pat-fv__body iframe.pat-fv__sandbox {
    border-radius: 0;
    height: calc(68vh - 44px);
}

.pat-fv__csv th.pat-fv__idx,
.pat-fv__csv td.pat-fv__idx {
    min-width: 0;
    text-align: end;
    color: var(--muted-ink);
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
}

.pat-fv__num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pat-fv__body img {
    background: repeating-conic-gradient(var(--surface-3) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px;
}