/* ============================================================
   The original document, as uploaded (preview.js) - on the app's Draft
   page (Original / Side by side) and the Docs page's contract "Original"
   tab. Its own tokens fall back through both pages' themes.
============================================================ */
.pv {
  --pv-ink: var(--text-primary, var(--ink, #111827));
  --pv-ink-2: var(--text-secondary, var(--ink-2, #4b5563));
  --pv-ink-3: var(--text-muted, var(--ink-3, #6b7280));
  --pv-line: var(--border-subtle, var(--line, #e5e7eb));
  --pv-sunken: var(--bg-sunken, var(--hover, #f1f2f4));
  --pv-panel: var(--bg-pane, var(--canvas, #ffffff));
  --pv-accent: var(--accent, var(--blue, #2563eb));
  --pv-zoom: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  container: pv / inline-size;       /* the bar fits the PANE it is in, which may be a third of the window */
  background: var(--pv-sunken);
  color: var(--pv-ink);
  border-radius: inherit;
}

/* the bar: the file, then the tools */
.pv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--pv-panel); border-bottom: 1px solid var(--pv-line);
  position: sticky; top: 0; z-index: 2; flex: none;
}
.pv-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--pv-ink-3); }
.pv-name svg { flex: none; }
.pv-name b { color: var(--pv-ink); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-facts { font-size: 12px; white-space: nowrap; }
.pv-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.pv-zoom { display: inline-flex; align-items: center; border: 1px solid var(--pv-line); border-radius: 8px; overflow: hidden; }
.pv-zoom .pv-btn { border: 0; border-radius: 0; height: 28px; }
.pv-zoom .pv-btn + .pv-btn { border-left: 1px solid var(--pv-line); }
.pv-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  font: inherit; font-size: 12.5px; color: var(--pv-ink-2); background: var(--pv-panel);
  border: 1px solid var(--pv-line); border-radius: 8px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pv-btn:hover { color: var(--pv-ink); background: var(--pv-sunken); }
.pv-btn:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 1px; }
.pv-ico { width: 30px; padding: 0; justify-content: center; }
.pv-zv { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }
.pv-pageno { font-size: 12px; color: var(--pv-ink-3); padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-note {
  margin: 0; padding: 8px 14px; font-size: 12px; line-height: 1.45; color: var(--pv-ink-2);
  background: color-mix(in srgb, var(--pv-accent) 6%, var(--pv-panel)); border-bottom: 1px solid var(--pv-line); flex: none;
}

/* the pages */
.pv-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.pv-pages { width: calc(100% * var(--pv-zoom)); max-width: none; margin: 0 auto; padding: 18px 18px 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.pv[data-kind="pdf"] .pv-pages { max-width: calc(980px * var(--pv-zoom)); }
.pv-page {
  position: relative; width: 100%; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 28px rgba(15, 23, 42, .10);
  overflow: hidden;
  container-type: inline-size;           /* the words over the image are sized in cqw of the page */
}
.pv-page::before {                       /* a quiet placeholder until the page is drawn */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .035) 50%, rgba(0, 0, 0, 0) 70%) #fbfbfc;
  background-size: 200% 100%; animation: pv-shimmer 1.4s linear infinite;
}
.pv-page.is-in::before, .pv-page.is-failed::before { display: none; }
/* v2: a page that is still coming looks like a page - a skeleton of lines - not a blank white sheet */
.pv-page::after {
  content: ""; position: absolute; inset: 9% 12% 14%; pointer-events: none;
  background:
    linear-gradient(rgba(15, 23, 42, .09), rgba(15, 23, 42, .09)) 0 0 / 46% 12px no-repeat,
    repeating-linear-gradient(to bottom, rgba(15, 23, 42, .06) 0 8px, transparent 8px 22px) 0 44px / 100% calc(100% - 44px) no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .55) 100%);
  mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .55) 100%);
}
.pv-page.is-in::after, .pv-page.is-failed::after { display: none; }
.pv-reflow[aria-pressed="true"] { color: var(--pv-ink, #111827); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
.pv-page img { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transform: scale(.995); transition: opacity .35s ease, transform .35s ease; user-select: none; }
.pv-page.is-in img { opacity: 1; transform: none; }
/* THE PAGE FORMS AS IT LOADS (v2/fx-page.js, the owner 2026-10-15): while a page on screen waits, a mosaic of paper cells over
   its skeleton of lines; when its picture arrives, chunky cells of the page, then the sharp page. The canvas draws the
   picture itself while it forms, so the <img> stays out of sight until the cells are gone, then is simply there. */
.pv-page > .sfx-page { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; image-rendering: pixelated; }
.pv-page.is-forming::before { animation: none; }
.pv-page.is-forming.is-in::after { display: block; animation: pv-lines-out .42s ease forwards; }   /* the skeleton gives way to the page's cells */
@keyframes pv-lines-out { to { opacity: 0; } }
.pv-page.is-forming img { opacity: 0; transition: none; }
.pv-page.is-formed img { transition: none; }
@media print { .pv-page > .sfx-page { display: none; } .pv-page.is-forming img { opacity: 1; } }
.pv-page.is-failed { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f3f3f5 8px, #f3f3f5 16px); }
.pv-page-no {
  position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #6b7280; background: rgba(255, 255, 255, .85);
  padding: 1px 7px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; user-select: none;
}
.pv-page-no::before { content: attr(data-n); }   /* drawn, not text: a selection across pages never copies the page's number */
/* the page's words over its image (preview.js buildWords): invisible, each line where it stands, there to be selected and copied */
.pv-tl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; font-family: sans-serif; line-height: 1; }
.pv-tl span, .pv-tl br { position: absolute; white-space: pre; color: transparent; transform-origin: 0 0; cursor: text; }
.pv-tl ::selection { background: rgba(37, 99, 235, .28); color: transparent; }
.pv-tl br::selection { background: transparent; }       /* a line break sits at its own place in the flow, not on the page */
/* THE WORDS STAY INVISIBLE WHEN SELECTED, IN EVERY THEME AND ON EVERY PAGE (the owner, 2026-10-13). The app's own selection rules
   give selected text a colour - `.app[data-theme="midnight"] ::selection` its light ink, `.dx.dx ::selection` (the Files viewer)
   its dark one - and both out-ranked the two rules above, so the hidden copy of each line was drawn over the page as soon as it
   was selected: a second font on top of the PDF's (Files), and white text on the white page in the dark theme (Side by side).
   These win over every theme's rule, whatever its weight (!important: a selection rule a theme adds later must not reach the
   page); the highlight is the only thing a selection adds. */
:root .pv-tl.pv-tl ::selection { background: rgba(37, 99, 235, .28) !important; color: transparent !important; }
:root .pv-tl.pv-tl br::selection { background: transparent !important; }
/* A plain-text original is paper in every theme: its selection is the paper's - dark ink on a light highlight. */
:root .pv-text.pv-text ::selection { background: rgba(37, 99, 235, .22) !important; color: #1f2937 !important; }
.pv-marks { position: absolute; inset: 0; pointer-events: none; }
.pv-mark {
  position: absolute; margin: -2px -3px; padding: 2px 3px; box-sizing: content-box; border-radius: 3px;
  background: rgba(250, 204, 21, .30); box-shadow: 0 0 0 2px rgba(234, 179, 8, .55);
  animation: pv-mark-in .5s cubic-bezier(.2, .8, .2, 1) both, pv-mark-glow 1.6s ease-out .5s 1 both;
}

/* Word: drawn inside a shadow root, scaled to the column */
.pv-docx { display: block; transform-origin: top center; }
.pv[data-kind="word"] .pv-scroll { background: var(--pv-sunken); }

/* text */
.pv-text {
  max-width: 760px; margin: 18px auto 40px; padding: 40px 48px; background: #fff; color: #1f2937; box-sizing: border-box;
  font: 14px/1.65 var(--font-serif, Georgia, "Times New Roman", serif); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 28px rgba(15, 23, 42, .10);
}
.pv-text p { margin: 0 0 .8em; white-space: pre-wrap; }
.pv-text .pv-hit { background: rgba(250, 204, 21, .38); border-radius: 2px; box-shadow: 0 0 0 3px rgba(250, 204, 21, .38); transition: background-color .8s ease, box-shadow .8s ease; }
.pv-text .pv-hit.pv-fade { background: rgba(250, 204, 21, .16); box-shadow: 0 0 0 3px rgba(250, 204, 21, .16); }

/* loading and nothing to show */
.pv-loading { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.pv-skel { display: block; border-radius: 6px; background: linear-gradient(100deg, rgba(0,0,0,.04) 30%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 70%); background-size: 200% 100%; animation: pv-shimmer 1.4s linear infinite; }
.pv-skel-line { width: 180px; height: 12px; }
.pv-skel-page { width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 210 / 297; border-radius: 2px; }
.pv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 48px 24px; min-height: 240px; height: 100%; box-sizing: border-box; color: var(--pv-ink-3);
  animation: pv-fade-in .3s ease both;
}
.pv-empty b { color: var(--pv-ink); font-size: 14px; }
.pv-empty span { font-size: 13px; max-width: 46ch; line-height: 1.5; }
.pv-empty .pv-btn { margin-top: 8px; }

@keyframes pv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pv-mark-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes pv-mark-glow { 0% { box-shadow: 0 0 0 2px rgba(234, 179, 8, .55), 0 0 0 0 rgba(250, 204, 21, .55); } 100% { box-shadow: 0 0 0 2px rgba(234, 179, 8, .55), 0 0 0 14px rgba(250, 204, 21, 0); } }
@keyframes pv-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@container pv (max-width: 620px) {
  .pv-facts, .pv-pageno { display: none; }
}
@container pv (max-width: 460px) {
  .pv-btn span, .pv-zv { display: none; }
  .pv-bar { padding: 8px 10px; }
}
@media (max-width: 640px) {
  .pv-bar { flex-wrap: wrap; }
  .pv-facts, .pv-btn span { display: none; }
  .pv-pages { padding: 10px 10px 28px; gap: 10px; }
  .pv-text { padding: 22px 18px; }
}