/* The document viewer and editor (public/js/doc-viewer.js). Over the whole window, under the dialogs (#modal-overlay, --z-modal)
   so a confirm or a save warning shows over it. */
.dv-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  background: var(--grey-100, #F3F4F6);
}
body.dv-open { overflow: hidden; }

/* Beside the page (a click on a document; user 2026-10-27): the panel takes the right of the window under the topbar, the page
   narrows to make room for it (nothing is covered), and its left edge drags to resize. Dialogs and toasts stay above it. */
.dv-overlay.dv-side-mode {
  top: var(--topbar-h, 56px); left: auto; right: 0; bottom: 0; width: var(--dv-w, 46vw); z-index: 96;
  border-left: 1px solid var(--border); box-shadow: -6px 0 18px rgba(16, 24, 40, .06);
}
body.dv-docked #main { margin-right: var(--dv-w, 46vw); }
/* Expanded (the « button; user 2026-10-27: "expand to the area on the page keeping the main header bar and sidebar"): over the page's
   own area, right of the sidebar and under the topbar; » puts it back beside the page. */
.dv-overlay.dv-wide-mode { top: var(--topbar-h, 56px); left: var(--sidebar-width, 224px); right: 0; bottom: 0; z-index: 96; border-left: 1px solid var(--border); }
body:has(#sidebar.collapsed) .dv-overlay.dv-wide-mode { left: var(--sidebar-width-collapsed, 56px); }
@media (max-width: 768px) { .dv-overlay.dv-wide-mode { left: 0; border-left: 0; } }
body.dv-resizing, body.dv-resizing * { cursor: col-resize !important; user-select: none !important; }
body.dv-resizing .dv-body { pointer-events: none; }
.dv-resizer { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; z-index: 4; }
.dv-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--t, .15s); }
.dv-resizer:hover::after, body.dv-resizing .dv-resizer::after { background: var(--brand, #0067D1); }
.dv-overlay:not(.dv-side-mode) .dv-resizer { display: none; }
/* Two lines in the narrower panel: the document's name across the top, the arrows and the actions under it. */
.dv-side-mode .dv-bar { height: auto; flex-wrap: wrap; row-gap: 6px; column-gap: var(--space-2); padding: 8px var(--space-2) 8px var(--space-3); }
.dv-side-mode .dv-title { flex: 1 1 100%; }
.dv-side-mode .dv-nav { margin-right: auto; }
.dv-side-mode .dv-actions { margin-left: auto; }
.dv-side-mode .dv-name { font-size: var(--fs-base); }
.dv-side-mode .dv-count { min-width: 44px; }
.dv-side-mode .dv-zoom-label { min-width: 44px; }
.dv-side-mode .dv-app-btn .icon { display: none; }
.dv-side-mode .dv-pages { padding: var(--space-4) var(--space-3); gap: var(--space-3); }
/* The version history covers the preview's right part instead of squeezing it. */
.dv-side-mode .dv-main { position: relative; }
.dv-side-mode .dv-side { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 92%); z-index: 3; box-shadow: -6px 0 18px rgba(16, 24, 40, .08); }

.dv-bar {
  flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-4);
  background: var(--surface, #fff); border-bottom: 1px solid var(--border);
}
.dv-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.dv-ficon { flex: 0 0 auto; display: flex; color: var(--text-slate); }
.dv-ficon .docs-file-ico--pdf { color: #d30933; } .dv-ficon .docs-file-ico--word { color: #2b579a; } .dv-ficon .docs-file-ico--excel { color: #217346; }
.dv-ficon .docs-file-ico--powerpoint { color: #c43e1c; } .dv-ficon .docs-file-ico--image { color: #7c4dcc; } .dv-ficon .docs-file-ico--email { color: #0e7c86; }
.dv-ficon .docs-file-ico--video { color: #c2255c; } .dv-ficon .docs-file-ico--audio { color: #3b5bdb; } .dv-ficon .docs-file-ico--text { color: #5f6b7a; }
.dv-ficon .docs-file-ico--archive { color: #b7791f; } .dv-ficon .docs-file-ico--html { color: #e8590c; }
.dv-ficon .docs-file-ico { margin-right: 0; }
.dv-ficon .icon { width: 24px; height: 24px; }
.dv-names { min-width: 0; display: flex; flex-direction: column; }
.dv-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-meta { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-meta:empty { display: none; }
.dv-nav { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); }
.dv-count { font-size: var(--fs-md); color: var(--text-secondary); min-width: 56px; text-align: center; }
.dv-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); }
.dv-actions .btn-primary, .dv-actions .btn-secondary { margin-left: var(--space-1); }
.dv-ib .icon { width: 18px; height: 18px; }
/* The bar's icons in the portal's standard colour, like the pages' own icon buttons (.btn-plus), not the link blue (user 2026-10-27). */
.dv-bar .dv-ib, .dv-bar .dv-zoom-label, .dv-side-head .dv-ib { color: var(--text-primary); }
.dv-bar .dv-ib:hover:not(:disabled), .dv-bar .dv-zoom-label:hover, .dv-side-head .dv-ib:hover { background: var(--grey-150); }
.dv-bar .dv-ib:disabled { color: var(--text-tertiary, #9aa4b2); }
.dv-ib.is-on { background: var(--grey-150); color: var(--text-primary); }
.dv-expand { margin-right: var(--space-1); }
/* The real Office logos keep their own colours in a white button and in the menu. */
.dv-ms-ico { width: 18px; height: 18px; }
.dv-zoom { display: flex; align-items: center; margin-right: var(--space-1); }
.dv-zoom-label { min-width: 52px; padding: 0 var(--space-1); font-size: var(--fs-md); color: var(--text-secondary); }
.dv-status { font-size: var(--fs-md); color: var(--text-secondary); margin-right: var(--space-2); }
.dv-status.is-dirty { color: var(--warning-fg); }
.dv-locked { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--text-slate, #5b6b82); margin-right: var(--space-2); white-space: nowrap; }
.dv-locked .icon { width: 15px; height: 15px; }
.dv-split { position: relative; display: flex; margin-left: var(--space-1); }
.dv-split .dv-app-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dv-split .dv-app-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; width: 32px; }
.dv-split .dv-app-caret .icon { width: 12px; height: 12px; }
.dv-split .dv-menu { top: calc(100% + 4px); right: 0; left: auto; min-width: 230px; z-index: 5; }
.dv-split .dv-menu .icon { width: 16px; height: 16px; color: var(--text-slate); }
.dv-split .dv-menu .ui-pop-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; }

.dv-banner {
  flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); font-size: var(--fs-md);
  border-bottom: 1px solid var(--border); background: var(--info-bg); color: var(--text-primary);
}
.dv-banner[hidden] { display: none; }
.dv-banner.is-warn { background: var(--warning-bg); }
.dv-banner .icon { width: 16px; height: 16px; flex: 0 0 auto; }

.dv-main { flex: 1 1 auto; min-height: 0; display: flex; }
.dv-body { flex: 1 1 auto; min-width: 0; overflow: auto; position: relative; outline: none; }
.dv-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 100%; min-height: 200px; color: var(--text-secondary); }

/* PDF and Office previews: pages down the middle, drawn as they come into view. */
.dv-pages { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-4); }
.dv-page { position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.06); }
.dv-page > canvas { display: block; }
/* pdf.js's text layer, the few rules it needs: the text sits exactly over the drawn page, invisible but selectable. */
.dv-textlayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; opacity: 1; transform-origin: 0 0;
  -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; caret-color: CanvasText; z-index: 0; }
.dv-textlayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.dv-textlayer > :not(.markedContent), .dv-textlayer .markedContent span:not(.markedContent) { z-index: 1; }
.dv-textlayer span.markedContent { top: 0; height: 0; }
.dv-textlayer ::selection { background: rgba(0, 103, 209, .25); }
.dv-textlayer br::selection { background: transparent; }
.dv-textlayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }

/* Pictures: fitted to the window; a click shows them at their own size. */
.dv-body--image { display: flex; }
.dv-body--image .dv-img { margin: auto; display: block; cursor: zoom-in; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dv-body--image.is-fit { padding: var(--space-6); }
.dv-body--image.is-fit .dv-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.dv-body--image:not(.is-fit) .dv-img { max-width: none; cursor: zoom-out; }

/* Text files. */
.dv-body--text { padding: var(--space-6) var(--space-4); }
/* A call recording (call-recordings.js): the player and the call it is of. */
.dv-body--audio { padding: var(--space-6) var(--space-4); }
.dv-audio { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); background: #fff;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: var(--space-4); }
.dv-audio-head { display: flex; align-items: center; gap: var(--space-3); }
.dv-audio-ic { width: 24px; height: 24px; color: var(--co-phone, #1a8a3a); flex: none; }
.dv-audio-title { font-weight: 600; font-size: 15px; }
.dv-audio-meta { color: var(--text-secondary, #4b5563); font-size: 13px; margin-top: 2px; }
.dv-audio-player { width: 100%; }
.dv-audio-label { font-weight: 600; font-size: 13px; color: var(--text-secondary, #4b5563); margin-bottom: 4px; cursor: default; }
details.dv-audio-sec > summary.dv-audio-label { cursor: pointer; }
.dv-audio-text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.dv-audio-tx { white-space: pre-wrap; font: 13px/1.5 inherit; font-family: inherit; margin: 6px 0 0; max-height: 50vh; overflow: auto; }
.dv-pre, .dv-textarea {
  display: block; box-sizing: border-box; width: min(100%, 980px); margin: 0 auto; padding: var(--space-6);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  font: 13px/1.55 Consolas, "SFMono-Regular", Menlo, monospace; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; tab-size: 4;
}
.dv-pre { min-height: 100%; }
.dv-textarea { height: 100%; min-height: 400px; resize: none; outline: none; }
.dv-textarea:focus { border-color: var(--brand, #0067D1); box-shadow: 0 0 0 3px var(--blue-halo, rgba(0,103,209,.18)); }

/* Word: the editor fills the body (its own toolbar while editing). */
.dv-body--word { overflow: hidden; display: flex; flex-direction: column; }
/* The editor's status bar (Clio's): page and word count. */
.dv-statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5, 20px); height: 28px; padding: 0 var(--space-4);
  border-top: 1px solid var(--border); background: var(--surface, #fff); font-size: var(--fs-sm); color: var(--text-secondary); }
/* Breadcrumbs under the name: client > matter (Clio's editor). */
.dv-meta .dv-crumb { color: var(--text-link); text-decoration: none; }
.dv-meta .dv-crumb:hover { text-decoration: underline; }
.dv-crumb-sep { display: inline-flex; vertical-align: middle; margin: 0 3px; color: var(--text-tertiary, #9aa4b2); }
.dv-crumb-sep .icon { width: 10px; height: 10px; }
.dv-word { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dv-word > * { flex: 1 1 auto; min-height: 0; }

.dv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 60%; padding: var(--space-6); text-align: center; }
.dv-empty-ic { width: 40px; height: 40px; color: var(--text-tertiary, #9aa5b1); }
.dv-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); max-width: 560px; }
.dv-empty-sub { color: var(--text-secondary); }
.dv-empty-acts { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* The panel beside the document (user 2026-10-27, Clio's preview): Details | Versions | Comments | History. */
.dv-side { flex: 0 0 340px; display: flex; flex-direction: column; min-height: 0; background: var(--surface, #fff); border-left: 1px solid var(--border); }
.dv-side[hidden] { display: none; }
.dv-side-head { flex: 0 0 auto; height: 48px; display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-1);
  padding: 0 var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
.dv-side-head > .dv-ib { align-self: center; }
.dv-tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dv-tab { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; }
.dv-tab:hover { color: var(--text-primary); }
.dv-tab.is-on { color: var(--text-primary); border-bottom-color: var(--text-link); }
.dv-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--grey-150, #eef0f3); color: var(--text-primary);
  font-size: 11px; line-height: 18px; text-align: center; }
.dv-tab-n[hidden] { display: none; }
.dv-side-body { flex: 1 1 auto; overflow: auto; padding: var(--space-2) 0; }
.dv-muted { color: var(--text-secondary); }
p.dv-muted { margin: 0; font-size: var(--fs-md); padding: var(--space-2) var(--space-4); line-height: 1.5; }
.dv-link { padding: 0; border: 0; background: none; color: var(--text-link); font: inherit; cursor: pointer; }
.dv-link:hover { text-decoration: underline; }
.dv-star.is-on { background: none; }
/* A starred document's star: the Documents list's own amber (.docs-star.is-on), its hover too. */
.dv-star.is-on .icon { color: #f59e0b; }
.dv-star.is-on:hover .icon { color: #d97706; }

/* Details: label over value, like Clio's. */
.dv-details { margin: 0; padding: var(--space-1) var(--space-4) var(--space-3); }
.dv-details dt { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.dv-details dd { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text-primary); overflow-wrap: anywhere; }
.dv-details dd .dv-cat-sel { width: 100%; max-width: 280px; height: var(--control-h-sm); }
.dv-details dd .ui-pill { margin: 0 4px 4px 0; }

/* Comments. */
.dv-cmt-new { padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--grey-150, #eef0f3); }
.dv-cmt-text { width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: var(--fs-md); }
.dv-cmt-acts { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-sm); }
.dv-cmt { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--grey-150, #eef0f3); }
.dv-cmt-top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); }
.dv-cmt-top .dv-muted { font-size: var(--fs-sm); }
.dv-cmt-x { margin-left: auto; width: 24px; height: 24px; opacity: 0; }
.dv-cmt:hover .dv-cmt-x, .dv-cmt-x:focus-visible { opacity: 1; }
.dv-cmt-x .icon { width: 12px; height: 12px; }
.dv-cmt-body { margin-top: 4px; font-size: var(--fs-md); white-space: pre-wrap; overflow-wrap: anywhere; }

/* History: newest first, under a heading per day. */
.dv-hist-day { padding: var(--space-3) var(--space-4) var(--space-1); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.dv-hist { display: flex; gap: var(--space-3); padding: 6px var(--space-4); }
.dv-hist-ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--grey-100, #f3f4f6); display: inline-flex;
  align-items: center; justify-content: center; color: var(--text-secondary); }
.dv-hist-ico .icon { width: 14px; height: 14px; }
.dv-hist-main { min-width: 0; }
.dv-hist-text { font-size: var(--fs-md); color: var(--text-primary); overflow-wrap: anywhere; }
.dv-hist-when { font-size: var(--fs-sm); }
.dv-ver-head { padding: var(--space-1) var(--space-4) var(--space-2); }
.dv-ver-head .icon { width: 14px; height: 14px; }
.dv-ver { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--grey-150, #eef0f3); }
.dv-ver.is-viewing { background: var(--info-bg); }
.dv-ver-top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); }
.dv-ver-how { margin-top: 2px; font-size: var(--fs-md); color: var(--text-primary); }
.dv-ver-when { font-size: var(--fs-sm); color: var(--text-secondary); }
.dv-ver-acts { display: flex; gap: var(--space-3); margin-top: var(--space-1); }
.dv-ver-acts .ec-add { font-size: var(--fs-md); }
.dv-ver-acts .icon { width: 13px; height: 13px; }

.dv-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

@media (max-width: 768px) {
  .dv-bar { height: auto; min-height: 56px; flex-wrap: wrap; padding: var(--space-2); gap: var(--space-2); }
  .dv-title { flex-basis: 100%; }
  .dv-actions { flex-wrap: wrap; }
  .dv-zoom, .dv-split .dv-app-btn { display: none; }
  .dv-side { position: absolute; inset: 0; z-index: 2; flex-basis: auto; }
  .dv-pages { padding: var(--space-3) var(--space-2); }
}

/* The editor clips a line with highlighted text to its measured width (overflow: hidden, inline). Where the browser draws text a
   little wider than the editor measured it, that cut letters off the line's end; never hide text. */
.dv-word .layout-line { overflow: visible !important; }

/* The editor's stylesheet expects a page-wide reset (Tailwind's) the portal does not have: without it the toolbar's buttons took the
   browser's own 2px outset borders and backgrounds, and the paragraph alignment button sat out of line. The same reset, for the
   editor's own controls only (never the document's pages, which draw their own borders), and for the layer at the end of <body>
   (body > .ep-root, the editor's own) its menus open in: paragraph style, font, zoom. */
:is(.dv-word, body > .ep-root) :is(*, ::before, ::after):not(.paged-editor, .paged-editor *) { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); }
:is(.dv-word, body > .ep-root) :is(button, input, select, textarea):not(.paged-editor *) {
  font: inherit; font-feature-settings: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; background-color: transparent; line-height: inherit;
}
:is(.dv-word, body > .ep-root) :is(button, [role="button"]):not(.paged-editor *) { cursor: pointer; }
:is(.dv-word, body > .ep-root) :is(svg, img):not(.paged-editor *) { display: block; vertical-align: middle; }
:is(.dv-word, body > .ep-root) :is(ul, ol):not(.paged-editor *) { list-style: none; margin: 0; padding: 0; }
/* That layer above the viewer (its menus are fixed at z-index 50, under the viewer's 150). */
body > .ep-root { position: relative; z-index: 400; }

/* The Word editor's ribbon (user 2026-10-27, after Clio's editor: "Let's do the ribbon"; scripts/docx-ribbon.jsx, bundled in
   vendor/docx-editor-1.9.0-r4): the tab row File | Home | Insert | Layout | References | Review | View (Table and Picture while the
   cursor is in one) with the Editing / Suggesting / Viewing switch at its right end, the groups of the tab under it, each with its
   name at the bottom, like Word's. It replaced the editor's own title bar and toolbar. It sits inside the editor's root (.ep-root),
   which redefines --border, --primary, --muted ... as HSL parts for its own stylesheet: the ribbon uses the portal's tokens that do
   not collide (--divider, --grey-150, --blue ...). Every rule starts .dv-word .dvr to win over the editor reset above. */
.dv-word .dvr { flex: 0 0 auto; position: relative; background: var(--surface, #fff); border-bottom: 1px solid var(--grey-250, #d1d6e0);
  color: var(--text-primary); font-size: var(--fs-md); line-height: 1.3; user-select: none; }
.dv-word .dvr .dvr-tabs { display: flex; align-items: stretch; height: 34px; padding: 0 var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--divider, #eaecef); }
.dv-word .dvr .dvr-tab { display: inline-flex; align-items: center; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; }
.dv-word .dvr .dvr-tab:hover { color: var(--text-primary); background: var(--grey-100, #f3f4f6); }
.dv-word .dvr .dvr-tab.is-on { color: var(--text-primary); border-bottom-color: var(--blue, #0067D1); background: none; }
.dv-word .dvr .dvr-tab:focus-visible { outline: 2px solid var(--blue, #0067D1); outline-offset: -2px; }
/* Table and Picture: Word's contextual tabs, in the accent colour. */
.dv-word .dvr .dvr-tab.is-context { color: var(--blue, #0067D1); }
.dv-word .dvr .dvr-tabs-gap { flex: 1 1 auto; }
.dv-word .dvr .dvr-tabs .dvr-mode { align-self: center; height: 28px; padding: 0 6px 0 8px; box-shadow: inset 0 0 0 1px var(--grey-250, #d1d6e0); }
.dv-word .dvr .dvr-tabs .dvr-mode.is-on { background: var(--grey-150, #e9e9f0); color: var(--text-primary); }
.dv-word .dvr .dvr-tabs .dvr-mode .dvr-lbl { font-weight: var(--fw-medium); }

/* The body: the groups side by side. A narrow window first drops the Styles tiles that do not fit, then the small labels; only past
   that does it scroll sideways (its menus are fixed to the window, never clipped). */
.dv-word .dvr .dvr-body { display: flex; align-items: stretch; height: 90px; padding: 4px var(--space-2) 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; }
.dv-word .dvr .dvr-group { flex: 0 0 auto; display: flex; flex-direction: column; padding: 0 6px; }
.dv-word .dvr .dvr-group + .dvr-group { border-left: 1px solid var(--divider, #eaecef); }
.dv-word .dvr .dvr-group-body { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 2px; min-height: 0; }
.dv-word .dvr .dvr-group-label { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
  color: var(--text-secondary); white-space: nowrap; }
.dv-word .dvr .dvr-col { display: flex; flex-direction: column; gap: 2px; }
.dv-word .dvr .dvr-col--top { align-self: flex-start; padding-top: 18px; }
.dv-word .dvr .dvr-row { display: flex; align-items: center; gap: 1px; height: 28px; }
.dv-word .dvr .dvr-sep { flex: 0 0 1px; align-self: stretch; margin: 5px 4px; background: var(--divider, #eaecef); }
.dv-word .dvr .dvr-g-para .dvr-col + .dvr-col { margin-left: 14px; }
.dv-word .dvr .dvr-col--3 { gap: 1px; }
.dv-word .dvr .dvr-col--3 .dvr-btn { height: 20px; padding: 0 4px; justify-content: flex-start; }
.dv-word .dvr .dvr-col--3 .dvr-ic { width: 16px; height: 16px; }
/* Word's dialog launcher: the small arrow at the corner of a group's name (Page Setup). */
.dv-word .dvr .dvr-group-label { position: relative; }
.dv-word .dvr .dvr-launch { position: absolute; right: -4px; top: 50%; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: -9px; border-radius: 3px; color: var(--text-secondary); }
.dv-word .dvr .dvr-launch:hover:not(:disabled) { background: var(--grey-150, #e9e9f0); color: var(--text-primary); }
.dv-word .dvr .dvr-launch:disabled { opacity: .45; cursor: default; }
.dv-word .dvr .dvr-launch .dvr-ic { width: 13px; height: 13px; }

/* Buttons: small (an icon, a label beside it) and large (the icon over its label). */
.dv-word .dvr .dvr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; min-width: 28px; padding: 0 5px;
  border-radius: var(--r-sm, 4px); color: var(--text-primary); font-size: var(--fs-md); white-space: nowrap; }
.dv-word .dvr .dvr-btn:hover:not(:disabled) { background: var(--grey-150, #e9e9f0); }
.dv-word .dvr .dvr-btn:active:not(:disabled) { background: var(--grey-250, #d1d6e0); }
.dv-word .dvr .dvr-btn:focus-visible { outline: 2px solid var(--blue, #0067D1); outline-offset: -2px; }
.dv-word .dvr .dvr-btn.is-on { background: var(--blue-light, #e5f0fa); color: var(--blue, #0067D1); box-shadow: inset 0 0 0 1px #b3d3f2; }
.dv-word .dvr .dvr-btn:disabled { color: var(--text-tertiary); cursor: default; }
.dv-word .dvr .dvr-btn:disabled .dvr-ic { opacity: .55; }
.dv-word .dvr .dvr-btn--lg { flex-direction: column; justify-content: flex-start; gap: 2px; height: 60px; min-width: 52px; padding: 5px 6px 2px; }
.dv-word .dvr .dvr-btn--lg .dvr-lbl { font-size: var(--fs-sm); line-height: 1.15; }
.dv-word .dvr .dvr-btn--lg.has-caret { gap: 1px; }
.dv-word .dvr .dvr-btn--lg .dvr-caret { line-height: 0; }
.dv-word .dvr .dvr-btn--sm.has-caret { gap: 2px; padding-right: 3px; }
.dv-word .dvr .dvr-ic { display: block; flex: 0 0 auto; }
.dv-word .dvr .dvr-caret { display: inline-flex; color: var(--text-secondary); }
.dv-word .dvr .dvr-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-weight: 500;
  line-height: 1; font-family: "Segoe UI", Inter, Arial, sans-serif; }
/* A narrow ribbon (is-narrow: set by the ribbon from its own width, under 1100px) keeps the icons of Cut, Copy, Find, Replace without
   their words and its groups closer together. */
.dv-word .dvr.is-narrow .dvr-opt-lbl .dvr-lbl { display: none; }
.dv-word .dvr.is-narrow .dvr-group { padding: 0 3px; }

/* Word's split button (Accept, Reject): the icon does it, the label with the caret opens the menu. */
.dv-word .dvr .dvr-split { display: inline-flex; flex-direction: column; height: 60px; border-radius: var(--r-sm, 4px); }
.dv-word .dvr .dvr-split > .dvr-btn { min-width: 56px; border-radius: 0; }
.dv-word .dvr .dvr-split .dvr-split-main { height: 32px; padding: 5px 6px 0; border-radius: var(--r-sm, 4px) var(--r-sm, 4px) 0 0; }
.dv-word .dvr .dvr-split .dvr-split-more { height: 28px; flex-direction: column; justify-content: flex-start; gap: 0; padding: 1px 6px 0;
  border-radius: 0 0 var(--r-sm, 4px) var(--r-sm, 4px); }
.dv-word .dvr .dvr-split .dvr-split-more .dvr-lbl { font-size: var(--fs-sm); }
.dv-word .dvr .dvr-split:hover:not(:has(:disabled)) { box-shadow: inset 0 0 0 1px var(--grey-250, #d1d6e0); }
.dv-word .dvr .dvr-split.is-open .dvr-split-more { background: var(--grey-150, #e9e9f0); }

/* The font name and size boxes (Word's combo boxes: typed, or picked from the list under them). */
.dv-word .dvr .dvr-combo { position: relative; display: inline-flex; align-items: center; height: 26px; margin-right: 3px;
  border: 1px solid var(--border-control, #a7b3c2); border-radius: var(--r-sm, 4px); background: #fff; }
.dv-word .dvr .dvr-combo:hover:not(.is-off), .dv-word .dvr .dvr-combo:focus-within { border-color: var(--blue, #0067D1); }
.dv-word .dvr .dvr-combo.is-off { opacity: .55; }
.dv-word .dvr .dvr-combo input { height: 24px; padding: 0 2px 0 7px; font-size: var(--fs-md); background: none; outline: none; user-select: text; }
.dv-word .dvr .dvr-font input { width: 128px; }
.dv-word .dvr .dvr-size input { width: 34px; }
.dv-word .dvr .dvr-menu--fonts .dvr-menu-row { min-height: 28px; padding: 3px 12px; font-size: var(--fs-base); }
.dv-word .dvr .dvr-combo-caret { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 24px; color: var(--text-secondary); }
.dv-word .dvr .dvr-combo-caret:hover:not(:disabled) { background: var(--grey-150, #e9e9f0); }
/* The editor's colour pickers (Word-style split buttons) and table pickers, sized like the ribbon's small buttons. */
.dv-word .dvr .dvr-color { display: inline-flex; align-items: center; height: 28px; }

/* The Styles gallery: tiles of the document's quick styles, the rest in its menu. A tile that does not fit goes to a second row,
   which is hidden: never half a tile. */
.dv-word .dvr .dvr-g-styles { flex: 1 1 auto; min-width: 118px; max-width: 760px; }
.dv-word .dvr .dvr-g-styles .dvr-group-body { min-width: 0; }
.dv-word .dvr .dvr-gallery { flex: 1 1 auto; min-width: 0; display: flex; height: 60px; border: 1px solid var(--divider, #eaecef); border-radius: var(--r-sm, 4px); }
.dv-word .dvr .dvr-gallery.is-off { opacity: .55; }
.dv-word .dvr .dvr-gallery-tiles { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; height: 58px; overflow: hidden;
  padding: 1px; gap: 1px; }
.dv-word .dvr .dvr-style { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 82px; height: 56px;
  padding: 4px 7px; border-radius: 3px; text-align: left; overflow: hidden; }
.dv-word .dvr .dvr-style:hover:not(:disabled) { background: var(--grey-100, #f3f4f6); box-shadow: inset 0 0 0 1px var(--grey-250, #d1d6e0); }
.dv-word .dvr .dvr-style.is-on { background: var(--blue-light, #e5f0fa); box-shadow: inset 0 0 0 1px #9cc5ee; }
.dv-word .dvr .dvr-style-sample { display: block; max-width: 100%; height: 24px; overflow: hidden; white-space: nowrap; color: var(--text-primary); }
.dv-word .dvr .dvr-style-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs);
  color: var(--text-secondary); }
.dv-word .dvr .dvr-gallery-more { flex: 0 0 20px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  border-left: 1px solid var(--divider, #eaecef); color: var(--text-secondary); }
.dv-word .dvr .dvr-gallery-more:hover:not(:disabled) { background: var(--grey-150, #e9e9f0); color: var(--text-primary); }

/* Layout: Word's spinners (Indent Left / Right, Spacing Before / After). */
.dv-word .dvr .dvr-g-para .dvr-col { gap: 1px; }
.dv-word .dvr .dvr-spin-head { height: 17px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.dv-word .dvr .dvr-spin { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 21px; }
.dv-word .dvr .dvr-spin.is-off { opacity: .55; }
.dv-word .dvr .dvr-spin-lbl { display: inline-flex; align-items: center; gap: 4px; min-width: 58px; font-size: var(--fs-sm); color: var(--text-primary); }
.dv-word .dvr .dvr-spin-lbl .dvr-ic { color: var(--text-secondary); }
.dv-word .dvr .dvr-spin-box { display: inline-flex; align-items: stretch; height: 21px; border: 1px solid var(--border-control, #a7b3c2); border-radius: 3px; background: #fff; }
.dv-word .dvr .dvr-spin-box:focus-within { border-color: var(--blue, #0067D1); }
.dv-word .dvr .dvr-spin-box input { width: 58px; padding: 0 4px; font-size: var(--fs-sm); background: none; outline: none; }
.dv-word .dvr .dvr-spin-arrows { display: flex; flex-direction: column; width: 14px; border-left: 1px solid var(--divider, #eaecef); }
.dv-word .dvr .dvr-spin-arrows button { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.dv-word .dvr .dvr-spin-arrows button:hover:not(:disabled) { background: var(--grey-150, #e9e9f0); color: var(--text-primary); }

/* The ribbon's menus: fixed to the window, above the document. */
.dv-word .dvr .dvr-menu { position: fixed; z-index: 450; padding: 4px 0; max-height: min(70vh, 520px); overflow-y: auto; background: #fff;
  border: 1px solid var(--grey-250, #d1d6e0); border-radius: var(--r, 6px); box-shadow: var(--shadow-popup, 0 4px 16px rgba(0,0,0,.08)); }
.dv-word .dvr .dvr-menu-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 5px 12px; text-align: left;
  font-size: var(--fs-md); color: var(--text-primary); white-space: nowrap; }
.dv-word .dvr .dvr-menu-row:hover:not(:disabled), .dv-word .dvr .dvr-menu-row:focus-visible { background: var(--grey-150, #e9e9f0); outline: none; }
.dv-word .dvr .dvr-menu-row.is-checked { background: var(--row-selected, #ebf7ff); }
.dv-word .dvr .dvr-menu-ic { display: inline-flex; width: 18px; color: var(--text-secondary); }
.dv-word .dvr .dvr-menu-ic:empty { display: none; }
.dv-word .dvr .dvr-menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dv-word .dvr .dvr-menu-hint { font-size: var(--fs-xs); color: var(--text-secondary); }
.dv-word .dvr .dvr-menu-check { display: inline-flex; color: var(--blue, #0067D1); }
.dv-word .dvr .dvr-menu-sep { height: 1px; margin: 4px 0; background: var(--divider, #eaecef); }
.dv-word .dvr .dvr-menu-head { padding: 6px 12px 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.dv-word .dvr .dvr-menu--sizes .dvr-menu-row { min-height: 26px; padding: 2px 12px; }
.dv-word .dvr .dvr-menu--styles .dvr-menu-row { min-height: 36px; }
/* The table grid (Insert > Table). */
.dv-word .dvr .dvr-menu--grid { padding: 6px 0 4px; }
.dv-word .dvr .dvr-grid { display: grid; gap: 2px; padding: 2px 12px 6px; }
.dv-word .dvr .dvr-grid-cell { width: 18px; height: 18px; border: 1px solid var(--grey-250, #d1d6e0); border-radius: 2px; background: #fff; }
.dv-word .dvr .dvr-grid-cell.is-on { background: var(--blue-light, #e5f0fa); border-color: var(--blue, #0067D1); }

/* Margins, Orientation, Size: each choice with its page drawn to scale. */
.dv-word .dvr .dvr-menu--thumbs .dvr-menu-ic { width: 32px; }
.dv-word .dvr .dvr-menu--thumbs .dvr-menu-row { min-height: 42px; }
.dv-word .dvr .dvr-menu--thumbs .dvr-thumb { width: 32px; height: 32px; }
/* The Format Painter on: the paint brush beside the text cursor over the pages (the class is on the editor while it paints). */
.dv-word .dvr-painting .paged-editor__pages, .dv-word .dvr-painting .paged-editor__pages * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M20 5h6M23 5v22M20 27h6' stroke='white' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M20 5h6M23 5v22M20 27h6' stroke='black' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cg transform='translate%281 3%29 scale%28.07%29'%3E%3Cpath d='M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM124.42,113.55q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z' fill='black' stroke='white' stroke-width='30' stroke-linejoin='round' paint-order='stroke'/%3E%3C/g%3E%3C/svg%3E") 23 16, text !important; }

/* Viewing: the editing commands are greyed (File, View and the mode switch still work), the switch says so in amber. */
.dv-word .dvr.is-viewing .dvr-tabs .dvr-mode { background: var(--warning-bg, #fff3cd); box-shadow: inset 0 0 0 1px #f0d58a; }

/* Touch screens: a comment's X shows from the start (a hover that reveals it costs an iPhone tap; app.css "Touch screens"). */
@media (hover: none) { .dv-cmt-x { opacity: 1; } }