/**
 * @file file-preview.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The preview of a stored file in a dialog: the file on a grey ground in a thin frame, an image,
 *   a PDF in a frame, a video or a sound, or text in the typewriter face, and a line that says it is
 *   loading or cannot be shown. Drawn by components/FilePreview.js. The corners of the ground, an
 *   image, a frame and a video read --shape-corner, a box's corner.
 *   NOTE: this file must be linked in spa.html, after dialog.css (the dialog's width).
 * @version-history
 *   v2.0.0 -- 2026-09-26 -- The sheet of components/FilePreview.js: the rules take the component's own
 *     names (.file-preview, -img, -frame, -media, -text, -status and the dialog's .file-preview-dialog);
 *     the page's .pf-file-preview-* names and the .pf scope go, the values stay (the dialog's width is
 *     its --dlg-width, 920px as before; the fallback colours go, the tokens stay). Page group G3.
 *   v1.1.0 -- 2026-09-26 -- The ground's 8px corner and the 6px corners of an image, a frame and a video read --shape-corner (Jouni's note on the round's shape check: "tee samankaltaiseksi tyyli kuin muuallakin").
 *   v1.0.0 -- 2026-09-25 -- Moved out of views/profile.css (UI consolidation phase 5, a move).
 */

/* The dialog: 920px wide at most (it was .pf-file-preview-modal, 92vw up to 920px). */
dialog.dlg.file-preview-dialog { --dlg-width: 920px; }
/* The ground the file stands on. */
.file-preview { display: flex; justify-content: center; align-items: center; min-height: 200px; max-height: 72vh; overflow: auto; background: var(--bg-dim); border: 1px solid var(--border); border-radius: var(--shape-corner); padding: .5rem; }
.file-preview-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--shape-corner); }
.file-preview-frame { width: 100%; height: 70vh; border: none; border-radius: var(--shape-corner); }
video.file-preview-media { max-width: 100%; max-height: 70vh; border-radius: var(--shape-corner); }
audio.file-preview-media { width: 100%; }
.file-preview-text { width: 100%; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; margin: 0; padding: .75rem; text-align: left; color: var(--text); }
.file-preview-status { color: var(--text-dim); font-size: .9rem; padding: 2rem; text-align: center; }