/* ════════════════════════════════════════════════════════════════════
   Finval Manuals — REVIEW VIEWER CHROME (focus-first)
   Primary mode: ONE page fit-to-screen, centered, distraction-free —
   you comment it, the code updates it. Navigation = left thumbnail rail.
   Spread is an optional toggle. All chrome is SCREEN-ONLY (@media print
   strips it and shows every page for the PDF).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --vw-bar:       #1e2a35;
  --vw-bar-2:     #0f1820;
  --vw-pasteboard:#2b3640;
  --vw-ink:       #e8eef2;
  --vw-mute:      #9fb1bd;
  --vw-accent:    #4B6CFF;
  --vw-line:      rgba(255,255,255,.12);
  --vw-thumbs-w:  124px;
  --vw-rail-w:    300px;
  --vw-bar-h:     56px;
}

html.viewer, html.viewer body { height: 100%; margin: 0; }
html.viewer body {
  background: var(--vw-pasteboard);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* loading splash */
.vw-loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--vw-pasteboard); color: var(--vw-mute); z-index: 50;
  font-size: 14px; letter-spacing: .04em;
}
.vw-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--vw-accent);
  animation: vw-spin .8s linear infinite; margin: 0 auto 8px;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* ─── toolbar ─────────────────────────────────────────────────────── */
.vw-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--vw-bar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(180deg, var(--vw-bar) 0%, var(--vw-bar-2) 100%);
  border-bottom: 1px solid var(--vw-line); color: var(--vw-ink); z-index: 40;
}
.vw-bar__title { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.vw-bar__model { font-size: 23px; font-weight: 800; letter-spacing: -.015em; color: var(--vw-ink); line-height: 1; }
.vw-bar__sub { font-size: 12px; font-weight: 400; color: var(--vw-mute); letter-spacing: .02em; }
.vw-bar__spacer { flex: 1; }

/* controls hold their natural width — never shrink/wrap a label into slivers;
   the title (above) is the only element that clips on a narrow window */
.vw-group { display: flex; align-items: center; gap: 6px; flex: none; }
.vw-btn { white-space: nowrap; flex: none; }
.vw-btn {
  appearance: none; border: 1px solid var(--vw-line); background: rgba(255,255,255,.05);
  color: var(--vw-ink); height: 32px; min-width: 32px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; transition: background .15s, border-color .15s;
}
.vw-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.vw-btn[aria-pressed="true"] { background: var(--vw-accent); border-color: var(--vw-accent); color: #fff; }
.vw-btn--primary { background: var(--vw-accent); border-color: var(--vw-accent); color: #fff; }
.vw-btn--primary:hover { filter: brightness(1.08); }
.vw-btn:disabled { opacity: .35; cursor: default; }
/* square icon-only button (zoom ±, issues-panel toggle) — keeps the 32px row height */
.vw-btn--sq { padding: 0; width: 32px; min-width: 32px; justify-content: center; }

/* ── Carbon icon glyphs (inline SVG) — single style for the whole chrome ──── */
.vw-ic { width: 16px; height: 16px; flex: none; fill: currentColor; display: block; }
.vw-ic--nav { width: 22px; height: 22px; }          /* big prev/next circles */
.vw-btn--icon .vw-ic { width: 15px; height: 15px; } /* compact panel-header seg */

.vw-zoom { display: flex; align-items: center; gap: 8px; }
.vw-zoom input[type="range"] { width: 110px; accent-color: var(--vw-accent); }
.vw-zoom__val { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--vw-mute); width: 42px; text-align: right; }
.vw-seg { display: inline-flex; border: 1px solid var(--vw-line); border-radius: 8px; overflow: hidden; }
.vw-seg .vw-btn { border: none; border-radius: 0; }
.vw-seg .vw-btn + .vw-btn { border-left: 1px solid var(--vw-line); }
.vw-pageind { font-size: 12.5px; color: var(--vw-mute); font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }

/* ─── left navigator — SPREAD thumbnails (InDesign Pages style) ─────── */
.vw-thumbs-panel {
  position: fixed; top: var(--vw-bar-h); left: 0; bottom: 0; width: var(--vw-thumbs-w);
  background: var(--vw-bar-2); border-right: 1px solid var(--vw-line);
  display: flex; flex-direction: column; z-index: 30;
}
/* size slider sits BELOW the mode icons, full width (both nav modes) */
.vw-thumbs__head { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--vw-line); }
.vw-thumbs__head .vw-nav-seg { align-self: center; }
.vw-thumbs__head input[type="range"] { width: 100%; accent-color: var(--vw-accent); }

/* hide the shared chip's WEB 12-col grid toggle/overlay — not used here
   (we have our own page grid in the toolbar). Keep the version pill. */
.grid-toggle, .grid-overlay { display: none !important; }
.vw-thumbs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 0; }

.vw-thumb { display: flex; flex-direction: column; align-items: center; margin: 0 auto 14px; cursor: pointer; }
.vw-thumb-row { display: flex; gap: 0; position: relative; }
.vw-thumb-page {
  position: relative; width: var(--tw, 130px); height: calc(var(--tw, 130px) * var(--tr, 1.43));
  overflow: hidden; background: #fff; box-shadow: 0 2px 8px -2px rgba(0,0,0,.5);
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .12s;
}
.vw-thumb:hover .vw-thumb-page { outline-color: rgba(255,255,255,.3); }
.vw-thumb.is-active .vw-thumb-page { outline-color: var(--vw-accent); }
.vw-thumb-blank { background: transparent; box-shadow: none; }
.vw-thumb-clone { position: absolute; top: 0; left: 0; transform-origin: top left; transform: scale(var(--ts, .22)); pointer-events: none; }
.vw-thumb-clone .pagedjs_page { box-shadow: none !important; display: block; }
.vw-thumb-clone .vw-underlay, .vw-thumb-clone .vw-pagegrid { display: none !important; }
.vw-thumb__no { margin-top: 4px; text-align: center; font-size: 10px; color: var(--vw-mute); font-variant-numeric: tabular-nums; }
.vw-thumb__flag { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; border: 1.5px solid #fff; z-index: 3; }

/* toolbar % readout */
.vw-op-val { font-size: 11.5px; color: var(--vw-mute); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* nav-mode toggle (thumbnails ↔ outline) + outline list */
.vw-nav-seg { display: flex; border: 1px solid var(--vw-line); border-radius: 7px; overflow: hidden; }
.vw-btn--icon { height: 26px; min-width: 30px; padding: 0 8px; border: none; border-radius: 0;
  background: rgba(255,255,255,.05); color: var(--vw-ink); cursor: pointer; font-size: 13px; }
.vw-btn--icon:hover { background: rgba(255,255,255,.12); }
.vw-btn--icon[aria-pressed="true"] { background: var(--vw-accent); color: #fff; }
.vw-nav-seg .vw-btn--icon + .vw-btn--icon { border-left: 1px solid var(--vw-line); }
.vw-outline { flex: 1; overflow-y: auto; padding: 6px 0; }
.vw-ol { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; color: var(--vw-ink);
  text-decoration: none; font-size: 12px; cursor: pointer; border-left: 2px solid transparent; }
.vw-ol:hover { background: rgba(255,255,255,.06); }
.vw-ol.is-active { border-left-color: var(--vw-accent); background: rgba(75,108,255,.14); }
.vw-ol--h1 { font-weight: 600; }
.vw-ol--h2 { padding-left: 26px; font-size: 11px; color: var(--vw-mute); }
.vw-ol__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-ol__p { font-variant-numeric: tabular-nums; color: var(--vw-mute); flex-shrink: 0; }

/* ─── center focus stage ──────────────────────────────────────────── */
.vw-stage {
  position: fixed; top: var(--vw-bar-h); left: var(--vw-thumbs-w); right: var(--vw-rail-w); bottom: 0;
  overflow: auto; display: grid; place-items: safe center; padding: 36px;
  scroll-snap-type: y proximity;   /* spreads gently snap to centre when scrolling */
}
.vw-stage.rail-collapsed { right: 0; }

#pages { transform-origin: top left; }
/* size #pages to its CONTENT, not the (already-scaled) canvas it sits in —
   otherwise the block stretches to the canvas width and the transform scales
   it again, so .pagedjs_pages ends up auto-margin-centred inside an oversized
   #pages and drifts ~half-a-page to the right. */
#pages.mode-spread, #pages.mode-focus { width: max-content; }
.pagedjs_page {
  flex: 0 0 auto;                 /* never shrink in the spread flex row */
  background: #fff; box-shadow: 0 14px 40px -10px rgba(0,0,0,.6);
  position: relative;
}
/* The mode-* class is added by viewer.js AFTER pagination (pages stay
   measurable during render).
   SPREAD = all spreads stacked, scroll vertically (like the left preview);
   a leading spacer keeps the cover alone on the recto, then pages pair up.
   FOCUS = one page centered. */
#pages.mode-spread .pagedjs_pages {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  width: var(--spread-w, 1142px); margin: 0 auto; row-gap: 30px; column-gap: 0;
}
#pages.mode-spread .pagedjs_page { display: block; flex: 0 0 auto; cursor: zoom-in; scroll-snap-align: center; }
/* full-width, zero-height row break after the cover (negative margin cancels
   the extra row-gap the empty line would otherwise add). */
#pages.mode-spread .vw-spacer { display: block; flex: 0 0 100%; width: 100%; height: 0; margin-top: -30px; }

#pages.mode-focus .pagedjs_pages { display: flex; justify-content: center; }
#pages.mode-focus .pagedjs_page { display: none; flex: 0 0 auto; cursor: zoom-out; }
#pages.mode-focus .pagedjs_page.is-active { display: block; }

.vw-spacer { display: none; }

/* hide our design layer — leave only the InDesign underlay reference */
#pages.hide-content .pagedjs_pagebox > :not(.vw-underlay) { opacity: 0; }

/* pixel-perfect image mode: each page = the exact InDesign page PNG */
.vw-imgpage { width: 148mm; height: 210mm; }
.vw-imgpage .pagedjs_pagebox { position: relative; width: 100%; height: 100%; }
.vw-pageimg { display: block; width: 100%; height: 100%; }

/* onion-skin underlay: InDesign reference PNG behind our content, for tracing */
.vw-underlay { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; opacity: 0; pointer-events: none; z-index: 0; }
#pages.show-underlay .vw-underlay { opacity: var(--underlay-op, .45); }
#pages.show-underlay .pagedjs_page_content,
#pages.show-underlay .pagedjs_margin-group { position: relative; z-index: 1; }
.vw-underlay-toolctl { }
.vw-bar input#vw-underlay-op { width: 84px; accent-color: var(--vw-accent); }
@media print { .vw-underlay { display: none !important; } }

/* prev / next floating arrows */
.vw-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; z-index: 35;
  background: rgba(15,24,32,.72); color: #fff; border: 1px solid var(--vw-line);
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s; backdrop-filter: blur(6px);
}
.vw-nav:hover { background: var(--vw-accent); }
.vw-nav:disabled { opacity: 0; pointer-events: none; }
.vw-nav--prev { left: calc(var(--vw-thumbs-w) + 16px); }
.vw-nav--next { right: calc(var(--vw-rail-w) + 16px); transition: right .2s, background .15s; }
.vw-stage.rail-collapsed ~ .vw-nav--next { right: 16px; }

/* ─── right rail: issues + (Phase 2) comments ─────────────────────── */
.vw-rail {
  position: fixed; top: var(--vw-bar-h); right: 0; bottom: 0; width: var(--vw-rail-w);
  background: #f6f8f9; border-left: 1px solid #d8e1e8;
  display: flex; flex-direction: column; z-index: 30;
}
.vw-rail.collapsed { transform: translateX(100%); }
.vw-rail__head {
  padding: 14px 16px; border-bottom: 1px solid #e4ebf0;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5b6b78;
  display: flex; align-items: center; justify-content: space-between;
}
.vw-rail__count { background: #EF4444; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.vw-rail__count[data-n="0"] { background: #4ADE80; }
.vw-rail__body { flex: 1; overflow: auto; padding: 12px; }

.vw-item {
  background: #fff; border: 1px solid #e4ebf0; border-left: 3px solid #c9d6df;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.vw-item:hover { box-shadow: 0 4px 14px -6px rgba(24,30,58,.25); }
.vw-item.is-active-page { border-color: var(--vw-accent); }
.vw-item--warn { border-left-color: #f0b878; }
.vw-item--missing { border-left-color: #EF4444; }
.vw-item--note { border-left-color: #0d6c98; }
.vw-item__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vw-item__kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vw-item--warn .vw-item__kind { color: #9a4a05; }
.vw-item--missing .vw-item__kind { color: #c2261d; }
.vw-item--note .vw-item__kind { color: #0a4d6e; }
.vw-item__page { font-size: 11px; color: #8190a0; font-variant-numeric: tabular-nums; }
.vw-item__text { font-size: 12.5px; line-height: 1.45; color: #2a3742; }
.vw-rail__empty { color: #8190a0; font-size: 13px; text-align: center; padding: 30px 16px; line-height: 1.5; }
.vw-rail__comments {
  border-top: 1px dashed #cdd9e1; margin-top: 6px; padding: 14px 4px 4px;
  font-size: 11.5px; color: #8190a0; line-height: 1.5;
}
.vw-rail__comments b { color: #5b6b78; display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

/* ─── grid overlay (margins · columns · baseline), toggled by #vw-grid ─
   Injected by viewer.js into each .pagedjs_pagebox (which print.css makes
   position:relative). Geometry from the .idml: margins 13 mm, gutter 12 pt,
   baseline 12 pt. */
.vw-pagegrid {
  position: absolute; top: 13mm; left: 13mm; right: 13mm; bottom: 13mm;
  pointer-events: none; z-index: 6; display: none;
}
#pages.show-grid .vw-pagegrid { display: block; }
.vw-pagegrid__cols { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
.vw-pagegrid__cols > i { background: rgba(75,108,255,.10); outline: 1px solid rgba(75,108,255,.45); }
.vw-pagegrid__base { position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(239,68,68,.45) 0 1px, transparent 1px 12pt); }
.vw-pagegrid__margin { position: absolute; inset: 0; outline: 1.5px dashed rgba(239,68,68,.8); }

/* ─── client comment pins ─────────────────────────────────────────── */
.vw-pinlayer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#pages.comment-mode .pagedjs_page { cursor: crosshair; }
.vw-pin {
  position: absolute; width: 24px; height: 24px; padding: 0;
  transform: translate(-50%, -50%) scale(var(--pin-inv, 1)); transform-origin: center;
  border-radius: 50%; border: 2px solid #fff; background: var(--vw-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.5); cursor: pointer; pointer-events: auto;
  font-variant-numeric: tabular-nums; transition: outline-color .12s, background .12s;
  outline: 0 solid rgba(75,108,255,.4);
}
.vw-pin:hover { filter: brightness(1.08); }
.vw-pin.is-active { outline-width: 4px; }
.vw-pin.is-resolved { background: #22c55e; }
.vw-pin--ghost { background: #fff; border: 2px dashed var(--vw-accent); pointer-events: none; }
@media print { .vw-pinlayer { display: none !important; } }

/* comment composer (drop-a-pin form) */
.vw-composer {
  position: fixed; width: 248px; z-index: 60; padding: 12px;
  background: #fff; border: 1px solid #d8e1e8; border-radius: 12px;
  box-shadow: 0 20px 52px -16px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px;
}
.vw-composer__hd { font-size: 12px; font-weight: 700; color: #1e2a35; }
.vw-composer__name, .vw-composer__text {
  width: 100%; box-sizing: border-box; border: 1px solid #d8e1e8; border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; color: #1e2a35; background: #fbfcfd; resize: vertical;
}
.vw-composer__name:focus, .vw-composer__text:focus { outline: none; border-color: var(--vw-accent); }
.vw-composer__row { display: flex; justify-content: flex-end; gap: 8px; }
.vw-composer .vw-btn { color: #2a3742; background: #eef2f5; border: 1px solid #dde5ea; height: 30px; }
.vw-composer .vw-btn--primary { color: #fff; background: var(--vw-accent); border-color: var(--vw-accent); }

/* comment items in the contextual panel */
.vw-cmt { border: 1px solid #e4ebf0; border-left: 3px solid var(--vw-accent); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; cursor: pointer; transition: box-shadow .15s, border-color .15s; background: #fff; }
.vw-cmt:hover { box-shadow: 0 4px 14px -6px rgba(24,30,58,.25); }
.vw-cmt.is-active { border-color: var(--vw-accent); box-shadow: 0 0 0 2px rgba(75,108,255,.18); }
.vw-cmt.is-resolved { border-left-color: #22c55e; opacity: .72; }
.vw-cmt.is-resolved .vw-cmt__text { text-decoration: line-through; color: #8190a0; }
.vw-cmt__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.vw-cmt__author { font-size: 12px; font-weight: 700; color: #1e2a35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-cmt__pg { font-size: 10.5px; color: #8190a0; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.vw-cmt__text { font-size: 12.5px; line-height: 1.45; color: #2a3742; white-space: pre-wrap; word-break: break-word; }
.vw-cmt__act { display: flex; gap: 6px; margin-top: 7px; }
.vw-cmt__btn { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid #dde5ea; background: #f4f7f9; color: #2a3742; }
.vw-cmt__btn:hover { background: #e8eef2; }
.vw-cmt__btn--del { color: #b3261d; border-color: #ecc9c6; background: #fdf4f3; }
.vw-cmt__btn--del:hover { background: #fbe7e5; }

/* ─── PRINT: strip chrome, show EVERY page for the PDF ─────────────── */
@media print {
  .vw-bar, .vw-ctx, .vw-rightstack, .vw-thumbs-panel, .vw-nav, .vw-loading, .vw-pagegrid { display: none !important; }

}

/* right-side floating stack: review SUMMARY tile (cover only) + per-spread
   CONTEXTUAL tile. Pinned top-right, fills the reserved rail column. */
.vw-rightstack {
  position: fixed; top: calc(var(--vw-bar-h) + 16px); right: 4px; bottom: 74px;
  width: 296px; padding: 4px 14px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; z-index: 30;
  pointer-events: none; overflow-y: auto; overflow-x: hidden;
  transition: transform .2s ease, opacity .2s ease;
}
.vw-rightstack > * { pointer-events: auto; }
.vw-rightstack.collapsed { transform: translateX(130%); opacity: 0; pointer-events: none; }

/* SUMMARY tile (home / cover) — overview of the whole review + contents */
.vw-summary {
  flex: 0 0 auto; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d8e1e8; border-radius: 14px;
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.45); overflow: hidden;
}
.vw-summary__head { padding: 14px 16px 8px; font-size: 14px; font-weight: 700; color: #1e2a35;
  display: flex; flex-direction: column; gap: 2px; }
.vw-summary__sub { font-size: 11px; font-weight: 400; color: #8190a0; letter-spacing: .02em; }
.vw-summary__stats { display: flex; gap: 8px; padding: 4px 16px 10px; }
.vw-summary__stat { flex: 1; background: #f4f7f9; border: 1px solid #e6edf1; border-radius: 10px;
  padding: 8px 4px; text-align: center; }
.vw-summary__stat b { display: block; font-size: 18px; color: #1e2a35; font-variant-numeric: tabular-nums; line-height: 1.1; }
.vw-summary__stat span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #8190a0; }
.vw-summary__bar { height: 6px; margin: 0 16px 12px; background: #e9eef2; border-radius: 999px; overflow: hidden; }
.vw-summary__bar i { display: block; height: 100%; width: 0; background: #22c55e; transition: width .3s ease; }
.vw-summary__clabel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5b6b78; padding: 0 16px 4px; }
.vw-summary__contents { min-height: 0; max-height: 152px; overflow-y: auto; padding: 0 8px 6px; }
.vw-sum-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 7px;
  text-decoration: none; cursor: pointer; color: #2a3742; font-size: 12.5px; }
.vw-sum-row:hover { background: #eef3f6; }
.vw-sum-row__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-sum-row__p { font-variant-numeric: tabular-nums; color: #8190a0; flex-shrink: 0; }
.vw-sum-row--cmt { border-left: 2px solid var(--vw-accent); }
.vw-sum-row--cmt.is-resolved { opacity: .7; border-left-color: #22c55e; }
.vw-sum-row--cmt.is-resolved .vw-sum-row__t { text-decoration: line-through; color: #8190a0; }
.vw-summary__todo { margin: 6px 16px 14px; justify-content: center;
  background: #eef2f5; border: 1px solid #dde5ea; color: #2a3742; }
.vw-summary__todo:hover { background: #e3eaef; border-color: #cdd9e1; }

/* CONTEXTUAL tile — now a static card inside the stack */
.vw-ctx {
  position: relative; width: 100%; flex: 1 1 auto; min-height: 150px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d8e1e8; border-radius: 14px;
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.45); overflow: hidden;
}
.vw-ctx__head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 8px; }
.vw-ctx__title { font-size: 14px; font-weight: 700; color: #1e2a35; }
.vw-ctx__pos { font-size: 11px; color: #8190a0; font-variant-numeric: tabular-nums; }
.vw-ctx__status {
  margin: 0 16px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; border-radius: 9px; border: 1px solid #e6b9b5; background: #fff4f3;
  color: #b3261d; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s;
}
.vw-ctx__status .vw-ctx__check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #d8a7a3;
  display: grid; place-items: center; font-size: 12px; color: transparent; background: #fff; }
.vw-ctx__status.is-ready { border-color: #9fdcbe; background: #e9f9f1; color: #15803d; }
.vw-ctx__status.is-ready .vw-ctx__check { border-color: #22c55e; background: #22c55e; color: #fff; }
.vw-ctx__body { flex: 1; overflow-y: auto; padding: 0 16px 12px; }
.vw-ctx__sec { font-size: 12.5px; font-weight: 600; color: #2a3742; padding: 6px 0; border-bottom: 1px solid #eef2f5; }
.vw-ctx__muted { font-size: 12.5px; color: #8190a0; padding: 8px 0; }
.vw-ctx__comments { margin-top: 10px; border-top: 1px dashed #cdd9e1; padding-top: 10px; }
.vw-ctx__clabel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5b6b78; margin-bottom: 4px; }
.vw-ctx__hint { font-size: 11px; color: #9aa7b3; line-height: 1.45; margin-top: 6px; }
.vw-ctx__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef2f5; background: #f7f9fa; }
.vw-ctx__foot .vw-btn { background: #eef2f5; border: 1px solid #dde5ea; color: #2a3742; height: 30px; }
.vw-ctx__foot .vw-btn:hover { background: #e3eaef; border-color: #cdd9e1; }
.vw-ctx__progress { font-size: 11px; color: #8190a0; font-variant-numeric: tabular-nums; }

/* per-spread status badge on the left-nav thumbnails */
.vw-thumb__status { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%;
  display: grid; place-items: center; font-size: 7px; font-weight: 700; line-height: 1;
  border: 1px solid var(--vw-bar-2); z-index: 4; box-sizing: border-box; }
.vw-thumb__status.is-todo { background: #EF4444; }
.vw-thumb__status.is-ready { background: #22c55e; color: #fff; }
@media print { .vw-ctx, .vw-rightstack { display: none !important; }
  .vw-stage { position: static; inset: auto; overflow: visible; padding: 0; display: block; }
  #pages { transform: none !important; }
  #pages.mode-focus .pagedjs_page { display: block !important; }
  .pagedjs_page { box-shadow: none; }
}