/* How a document looks when it is being looked at rather than downloaded.
 *
 * Its own file, and its own `pv-` prefix, because it is shared by two pages that agree on almost
 * nothing else: the chat, where a preview sits inside a message, and the standalone page a Teams
 * client is sent to. Both inherit the palette from app.css, so a preview is in whatever colours the
 * person chose without either page knowing which.
 *
 * The one rule worth stating: nothing here decorates. A preview exists to show what is in the file,
 * so where this differs from the file it is a bug, and styling that flatters the content would hide
 * exactly the faults it is here to reveal. */

.pv {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.pv-empty,
.pv-clipped {
    margin: 0;
    color: var(--faint);
    font-size: 13px;
    font-style: italic;
}

.pv-clipped {
    padding-top: 6px;
    border-top: 1px dashed var(--line);
}

/* ---- workbooks ------------------------------------------------------------------------- */

.pv-book {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pv-tab {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--rail);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pv-tab:hover { background: var(--hover); }

.pv-tab.is-on {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.pv-sheet { overflow-x: auto; }

/* ---- tables, in both a workbook and a document ------------------------------------------ */

.pv-grid {
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

.pv-grid th,
.pv-grid td {
    padding: 5px 10px;
    border: 1px solid var(--line);
    vertical-align: top;
    white-space: pre-wrap;
}

.pv-grid th {
    background: var(--rail);
    font-weight: 600;
    text-align: left;
}

/* The one piece of styling here that is load-bearing.
 *
 * A cell is aligned by what it holds, taken from the file: a number the spreadsheet will treat as a
 * number sits right, text sits left. So a figure that was written into the file as text - the fault
 * this is most often used to catch - appears on the wrong side of its column, without anybody
 * having to open the file to find out. */
.pv-grid .pv-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pv-grid .pv-text { text-align: left; }

.pv-grid .pv-bold { font-weight: 600; }

/* ---- documents --------------------------------------------------------------------------- */

.pv-paper {
    min-width: 0;
    font-size: 14px;
    line-height: 1.6;
}

.pv-paper > * { margin: 0 0 10px; }
.pv-paper > *:last-child { margin-bottom: 0; }

.pv-paper h1 { font-size: 22px; }
.pv-paper h2 { font-size: 19px; }
.pv-paper h3 { font-size: 16px; }
.pv-paper h4,
.pv-paper h5,
.pv-paper h6 { font-size: 14px; }

.pv-paper h1,
.pv-paper h2,
.pv-paper h3,
.pv-paper h4,
.pv-paper h5,
.pv-paper h6 {
    margin: 16px 0 8px;
    line-height: 1.3;
}

.pv-paper > *:first-child { margin-top: 0; }

.pv-list { padding-left: 24px; }
.pv-list li { margin-bottom: 4px; }

/* ---- decks ------------------------------------------------------------------------------- */

.pv-deck {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pv-slide {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pv-slide svg {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
}

.pv-slide-number {
    color: var(--faint);
    font-size: 12px;
}

/* Slides are drawn on white with dark ink regardless of the palette, because they are a picture of
 * a file that will be opened in PowerPoint on white. Recolouring them to match the page would be
 * showing something the deck is not. */
.pv-slide-face { fill: #ffffff; }

.pv-slide-text {
    fill: #201f1e;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.pv-slide-mark {
    fill: #605e5c;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.pv-slide-head {
    fill: #eef0f8;
    stroke: #c8c6c4;
    stroke-width: 6350;
}

.pv-slide-cell {
    fill: #ffffff;
    stroke: #c8c6c4;
    stroke-width: 6350;
}

/* ---- plain text -------------------------------------------------------------------------- */

.pv-plain pre {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--mine);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- inside a chat message ---------------------------------------------------------------- */

.pv-open {
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pv-open:hover { background: var(--hover); }

.pv-panel {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--rail);
    max-height: 70vh;
    overflow: auto;
}

/* ---- the standalone page ------------------------------------------------------------------ */

.pv-page {
    max-width: var(--column);
    margin: 0 auto;
    padding: 24px 20px 64px;
}

.pv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 4px;
}

.pv-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.pv-meta {
    margin: 0 0 20px;
    color: var(--faint);
    font-size: 13px;
}

.pv-page .pv-panel {
    margin-top: 0;
    max-height: none;
    overflow: visible;
}