@docx-editor.dev/core 2.4.1 → 2.6.0

package/dist/editor.css

@@ -188,6 +188,10 @@
   display: contents;
 }
 
+.docx-editor .\!hidden {
+  display: none !important;
+}
+
 .docx-editor .hidden {
   display: none;
 }
@@ -858,6 +862,7 @@
 
   /* Surfaces */
   --doc-surface: #ffffff; /* panels, menus, dropdowns, cards */
+  --doc-popover-bg: var(--doc-surface); /* floating previews and contextual menus */
   --doc-card: #f8fbff; /* collapsed comment / suggestion cards (near-white) */
   --doc-bg: #f8f9fa; /* app background behind the page */
   --doc-bg-subtle: #f5f5f5; /* subtle section backgrounds */
@@ -884,13 +889,24 @@
 
   /* Inline comment/annotation marks. Resting highlights stay quiet on the
     * document canvas; focused sidebar items get the stronger active treatment. */
+  /* The open review card's wash. OPAQUE, and stated per theme rather than mixed from
+     `--doc-primary-light`: that token is translucent under `.dark`, so mixing it produced a
+     card the page showed through. A card is chrome and sits on its own ground. */
+  --doc-review-card-active-bg: color-mix(in srgb, #e8f0fe 45%, #fff);
+  /* The comment half of the highlight layer described beside the revision tokens below:
+     `-bg` and `-border` are the band every comment wears, and the `-active-` pair is the
+     one the reader has open. Comments carry no wash on the run itself, so unlike a tracked
+     change their pending state lives here. */
   --doc-comment-bg: rgba(255, 212, 0, 0.12);
   --doc-comment-border: rgba(245, 174, 0, 0.45);
   --doc-comment-active-bg: rgba(255, 212, 0, 0.35);
   --doc-comment-active-border: rgba(245, 174, 0, 0.9);
+  --doc-comment-resolved-active-bg: rgba(255, 212, 0, 0.18);
+  --doc-comment-resolved-active-border: rgba(245, 174, 0, 0.6);
 
   /* Text */
   --doc-text: #202124; /* primary text */
+  --doc-popover-fg: var(--doc-text); /* text inside floating previews and menus */
   --doc-text-muted: #5f6368; /* secondary text */
   --doc-text-subtle: #9aa0a6; /* tertiary/disabled text */
   --doc-text-placeholder: #999; /* placeholder text */
@@ -921,6 +937,29 @@
   --doc-revision-deletion: #c62828;
   --doc-revision-insertion-tint: rgba(46, 125, 50, 0.09);
   --doc-revision-deletion-tint: rgba(198, 40, 40, 0.09);
+  /* THE HIGHLIGHT LAYER, which reads the same for tracked changes and for comments:
+     `-bg` is the band's fill and `-border` the rule under it, and an `-active-` pair is
+     the same two for the one the reader has open. The comment family is below.
+
+     Only the OPEN state is a token here. A pending change already carries its colour on
+     the run itself (the `-wash` pair below), so its band is transparent by design —
+     painting both doubled the colour wherever the band happened to reach. A comment has
+     no run wash, so its pending state lives on the band and does take a token.
+
+     Deeper than the wash for the same reason the comment bands deepen: opening a card
+     does not select the text, so this band is the only thing on the page saying which
+     change the card is about. */
+  --doc-revision-insertion-active-bg: rgba(46, 125, 50, 0.24);
+  --doc-revision-insertion-active-border: var(--doc-revision-insertion);
+  --doc-revision-deletion-active-bg: rgba(198, 40, 40, 0.24);
+  --doc-revision-deletion-active-border: var(--doc-revision-deletion);
+  /* A format or structural change decorates no characters, so it takes a neutral fill
+     rather than one claiming text was added or removed. */
+  --doc-revision-other-active-bg: color-mix(
+    in srgb,
+    var(--doc-text-muted, #8a8f98) 14%,
+    transparent
+  );
   /* The wash a PENDING change wears. The painter puts this on the run itself, so it covers
      tracked text anywhere in the document rather than only where the band layer reaches; the
      band adds the full tint on top for the one the caret is in, and the two multiply into a
@@ -1110,19 +1149,19 @@
   --doc-on-primary: #1f1f1f; /* text/icon on a filled primary surface */
   --doc-toggle-active-bg: var(--doc-primary-light);
   --doc-toggle-active-fg: var(--doc-primary);
+  /* Mixed from the OPAQUE accent, not from the translucent `--doc-primary-light` above. */
+  --doc-review-card-active-bg: color-mix(in srgb, #4e9dff 12%, var(--doc-surface, #1b1d22));
   --doc-comment-bg: rgba(253, 214, 99, 0.16);
   --doc-comment-border: rgba(253, 214, 99, 0.5);
   --doc-comment-active-bg: rgba(253, 214, 99, 0.32);
   --doc-comment-active-border: rgba(253, 214, 99, 0.95);
-  /* Dark mode: the same ramp, lifted so it reads on a dark page. */
-  --doc-review-author-0: #ff8a80;
-  --doc-review-author-1: #82b1ff;
-  --doc-review-author-2: #d7a3ff;
-  --doc-review-author-3: #7fe3c5;
-  --doc-review-author-4: #ffd180;
-  --doc-review-author-5: #ff9e80;
-  --doc-review-author-6: #b0bec5;
-  --doc-review-author-7: #ce93d8;
+  /* NOT the author ramp. It used to be lifted here, back when only the review cards read
+     it — but the ramp now colours the painted DOCUMENT too, and the dark page is rendered
+     through `invert(1) hue-rotate(180deg)` (see `.docx-page-content` below). A colour
+     consumed inside that filter must be authored for the LIGHT page or it is corrected
+     twice: the lifted `#ff8a80` inverted to `#b54a41` on a `#333` page, 2.4:1 and below
+     AA. The same reason `--doc-revision-insertion` / `-deletion` are not overridden here.
+     The CARDS sit outside the filter and lift the accent themselves, further down. */
   --doc-revision-format: #9fb3bf;
   --doc-review-change-bar: #9e9e9e;
   --doc-text: #e8e8e8; /* primary text */
@@ -1703,6 +1742,22 @@ a.docx-hyperlink:focus-visible {
   opacity: 1;
 }
 
+/* A document nobody may write has nothing to fill in, so the pointer must not light a
+ * control as though it did. `data-active` and `data-boundary-visible` still show: those say
+ * WHERE a control is, which a reader may want. Only the hover invitation goes. The painter
+ * sets `data-read-only` from the same answer that disables the widget, so there is no second
+ * definition of what read-only means. */
+.docx-content-control-chrome[data-read-only]:hover .docx-content-control-boundary {
+  border-color: color-mix(in srgb, var(--doc-primary) 24%, var(--doc-page-bg-rendered));
+  background: color-mix(in srgb, var(--doc-primary) 3%, var(--doc-page-bg-rendered));
+  opacity: 0;
+}
+
+.docx-content-control-chrome[data-read-only][data-active] .docx-content-control-boundary,
+.docx-content-control-chrome[data-read-only][data-boundary-visible] .docx-content-control-boundary {
+  opacity: 1;
+}
+
 /*
  * Populated TOC: nothing at rest — no border, no background — and never sticky from the
  * caret or a click. The surface sets `data-hover` on the painted chrome while the pointer
@@ -1760,6 +1815,12 @@ a.docx-hyperlink:focus-visible {
   border-color: color-mix(in srgb, var(--doc-primary) 55%, transparent) !important;
 }
 
+/* Same rule for the widget: a disabled button that lights under the pointer reads as live. */
+.docx-content-control-chrome[data-read-only]:hover .docx-content-control-widget {
+  background: color-mix(in srgb, var(--doc-primary) 4%, var(--doc-page-bg-rendered));
+  border-color: color-mix(in srgb, var(--doc-primary) 28%, var(--doc-page-bg-rendered)) !important;
+}
+
 .docx-content-control-widget::after {
   position: absolute;
   inset: 0;
@@ -3132,6 +3193,36 @@ a.docx-hyperlink:focus-visible {
   pointer-events: auto;
 }
 
+.docx-image-selection-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--doc-z-chrome);
+  pointer-events: none;
+  outline: none;
+}
+
+.docx-image-selection-overlay__frame {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--doc-accent);
+  pointer-events: none;
+}
+
+.docx-image-selection-overlay__frame.docx-editor-one-surface__overlay-control {
+  pointer-events: auto;
+}
+
+.docx-image-selection-overlay__handle {
+  position: absolute;
+  box-sizing: border-box;
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border: 1px solid var(--doc-accent);
+  background: var(--doc-bg);
+  pointer-events: auto;
+}
+
 /* The hidden ProseMirror input host. Position, size, clipping, and opacity are
  * owned imperatively by engine-binding's input-host module, which keeps the
  * host attached, non-`display:none`, and tracking the engine caret so browser
@@ -3235,18 +3326,24 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Sticky horizontal ruler: scrolls horizontally with the document, stays put
- * vertically, and never covers the page content. */
+ * vertically, and never covers the page content. Centred by auto margins on the
+ * child, not justify-content, so an oversized ruler clamps to the start edge
+ * like the page instead of overflowing both sides on narrow hosts. */
 .docx-editor-shell__ruler-h {
   position: sticky;
   top: 0;
   z-index: 2;
   flex: none;
   display: flex;
-  justify-content: center;
   padding: 4px 20px;
   background: var(--doc-bg);
 }
 
+.docx-editor-shell__ruler-h > * {
+  flex-shrink: 0;
+  margin-inline: auto;
+}
+
 .docx-editor-shell__canvas {
   position: relative;
   flex: 1;
@@ -3434,16 +3531,21 @@ a.docx-hyperlink:focus-visible {
   height: 22px;
 }
 
-/* The review pane's gutter reaches the ruler as a right MARGIN and the page as the scroller's
-   right PADDING. Both move by the same distance, so both have to move on the same curve —
-   without this the sheet glided left and the ruler above it snapped, and for the length of the
-   animation the ruler measured a page that was no longer under it. */
-.docx-horizontal-ruler {
-  transition: margin 0.2s ease;
+/* The pane gutters reach the ruler as PADDING on its frame and the page as the scroller's
+   padding. Both move by the same distance, so both have to move on the same curve —
+   without this the sheet glided and the ruler above it snapped, and for the length of the
+   animation the ruler measured a page that was no longer under it.
+
+   The INLINE-START edge only, because that is the only edge the scroller animates: the
+   scroller's `padding-right` (the review column) deliberately snaps, so a ruler easing
+   its right padding for 0.2s measured a page that had already jumped. One edge per curve,
+   both elements on the same one. */
+.docx-ruler-frame {
+  transition: padding-inline-start 0.2s ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .docx-horizontal-ruler {
+  .docx-ruler-frame {
     transition: none;
   }
 }
@@ -4042,16 +4144,23 @@ a.docx-hyperlink:focus-visible {
   margin-bottom: 4px;
 }
 
-/* No affordance while another furniture scope is open, in view mode, or in print. */
+/* No affordance while another furniture scope is open, in view mode, or in print.
+ * Each selector MIRRORS the qualifiers of the rule it cancels: the existing-band tint
+ * carries two `:not()`s and the footer hint carries an attribute selector, so a plainer
+ * selector here LOST the specificity race and left the invitation on screen. */
 .docx-pages--hf-editing .docx-hf--placeholder:hover,
 .docx-paginated-surface--viewing .docx-hf--placeholder:hover,
-.docx-pages--hf-editing .docx-hf:not([data-docx-hf-active]):hover,
-.docx-paginated-surface--viewing .docx-hf:not([data-docx-hf-active]):hover {
+.docx-pages--hf-editing .docx-hf:not([data-docx-hf-active]):not(.docx-hf--placeholder):hover,
+.docx-paginated-surface--viewing
+  .docx-hf:not([data-docx-hf-active]):not(.docx-hf--placeholder):hover {
   background: none;
 }
 
-.docx-pages--hf-editing .docx-hf--placeholder:hover::after,
-.docx-paginated-surface--viewing .docx-hf--placeholder:hover::after {
+/* The extra class here is STRUCTURE, not ballast: `docx-pages` is `docx-paginated-surface`'s
+ * own child and carries `docx-pages--hf-editing` itself, so the weight that beats the
+ * footer variant comes from a fact the painter cannot drift away from. */
+.docx-pages.docx-pages--hf-editing .docx-hf--placeholder:hover::after,
+.docx-paginated-surface--viewing .docx-pages .docx-hf--placeholder:hover::after {
   content: none;
 }
 
@@ -4060,6 +4169,13 @@ a.docx-hyperlink:focus-visible {
   display: none;
 }
 
+/* The last half of the affordance: an I-beam over a band nobody can enter reads as "put a
+ * caret here", which viewing refuses. Furniture text never maps to a model position anyway
+ * — see `dom-selection` — so the arrow is the honest cursor here. */
+.docx-paginated-surface--viewing .docx-hf:not([data-docx-hf-active]) {
+  cursor: default;
+}
+
 @media print {
   .docx-hf--placeholder,
   .docx-hf-edit-hint {
@@ -5385,6 +5501,35 @@ a.docx-hyperlink:focus-visible {
   font-size: 14px;
 }
 
+/* The overlay variant (`<DocxEditor.Loading overlay />`): pinned over the nearest
+   positioned ancestor — the workspace row in the packaged frame — and opaque, so it
+   covers the previous document while the next one opens. The 150ms appearance delay
+   keeps an open that finishes inside a few frames from flashing a spinner.
+
+   The fade MUST be a real compositor animation. The engine paints exactly one frame
+   (overlay committed, still in its delay) and then blocks the main thread with the
+   mount — so only the compositor can bring the overlay in. A non-zero opacity
+   animation on a `will-change: opacity` layer runs compositor-side through the block;
+   a zero-duration delay trick would be a main-thread style jump and never show. */
+.docx-editor__loading--overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--doc-z-overlay);
+  background: var(--doc-bg);
+  will-change: opacity;
+  animation: docx-editor-loading-appear 0.2s linear 0.15s backwards;
+}
+
+@keyframes docx-editor-loading-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 /* The default screen when the host supplies no children.
    `display` and `box-sizing` are explicit rather than inherited from Tailwind's
    preflight: the part emits its own `docx-editor`, so it can be composed somewhere the
@@ -5398,6 +5543,9 @@ a.docx-hyperlink:focus-visible {
   border: 3px solid var(--doc-border);
   border-top-color: var(--doc-primary);
   border-radius: 50%;
+  /* Layer-promoted so the rotation runs on the compositor: while a big document
+     mounts, the main thread is blocked and only a composited animation still moves. */
+  will-change: transform;
   animation: docx-editor-loading-spin 0.8s linear infinite;
 }
 
@@ -5563,13 +5711,22 @@ a.docx-hyperlink:focus-visible {
 
 /* Room for the review pane. The page centres inside the scroller's padding box, so
  * reserving the rail's width here shifts the sheet left by half of it and the document and
- * its cards read as one centred pair. Closed, only the marker strip is reserved. */
+ * its cards read as one centred pair.
+ *
+ * The reservation is a MEASUREMENT, not a constant: `DocxEditor.Viewport` publishes
+ * `--docx-review-gutter` (this edge) and `--docx-review-gutter-start` (mirrored onto the
+ * inline start, composed into the navigation rule below) from the viewport's width and the
+ * page's entitled width. A viewport with room for both keeps the full column; one without
+ * gets the marker strip on BOTH edges, so the sheet sits centred instead of parked beside
+ * a mostly-empty band. The fallbacks — the full column while open, the strip while
+ * closed — are what stood before the measurement existed, so an unmeasured host paints as
+ * it always did. */
 .docx-editor__scroll-container[data-review-pane='open'] {
-  padding-right: 316px;
+  padding-right: var(--docx-review-gutter, 316px);
 }
 
 .docx-editor__scroll-container[data-review-pane='closed'] {
-  padding-right: 44px;
+  padding-right: var(--docx-review-gutter, 44px);
 }
 
 /* The review rail (`DocxEditor.Review` / the Vue equivalent): one card per pending decision,
@@ -5593,6 +5750,22 @@ a.docx-hyperlink:focus-visible {
   width: 32px;
 }
 
+/* Compact rail (`data-compact`: the pane is open but the viewport reserved only the
+ * mirrored marker strip). The strip shows the markers, and the ONE active card floats at
+ * column width, pinned inside the viewport's right edge — over the page, where a shadow
+ * has to separate it from the ink underneath. Its slot is positioned inline by the rail. */
+.docx-review__slot--compact .docx-review__card {
+  box-shadow: var(--doc-shadow-lg);
+}
+
+/* The column's cards print BESIDE the sheet, which is harmless; the compact card floats
+ * OVER it, which would print on top of the document's own ink. Screen chrome only. */
+@media print {
+  .docx-review__slot--compact {
+    display: none !important;
+  }
+}
+
 /* The "comment on this" button. Pulled OUT of the card column, onto the page's own edge:
    the column is where comments live, and a button standing in it lands on whichever card
    already annotates the text being re-selected. On the edge there is nothing to collide
@@ -5630,7 +5803,7 @@ a.docx-hyperlink:focus-visible {
 
 /* A card being composed reads as unfinished until it is committed. */
 .docx-review__card[data-draft] {
-  border-color: var(--doc-primary, #1a73e8);
+  border-color: var(--doc-review-author-ink, var(--doc-primary, #1a73e8));
 }
 
 /* The Word-style decision balloon: clicking a format or structural change in the page
@@ -5700,7 +5873,12 @@ a.docx-hyperlink:focus-visible {
  * as scrollbar-gutter above. */
 .docx-editor .docx-editor__scroll-container,
 .docx-editor.docx-editor__scroll-container {
-  padding-inline-start: var(--docx-nav-shift, 0px);
+  /* Two reservations compose on this edge: the navigation pane's displacement, and the
+   * review gutter's mirrored strip (`--docx-review-gutter-start`, 0 whenever the full
+   * column stands on the right). One declaration, because `padding-inline-start` and
+   * `padding-left` are the same slot in LTR and a second rule would just lose the
+   * specificity fight. */
+  padding-inline-start: calc(var(--docx-nav-shift, 0px) + var(--docx-review-gutter-start, 0px));
   transition: padding-inline-start 0.2s ease;
 }
 
@@ -6070,6 +6248,34 @@ a.docx-hyperlink:focus-visible {
   display: none;
 }
 
+/* THE CHROME'S READING OF AN AUTHOR'S COLOUR.
+   The review surface sets `--doc-review-author-current` inline on each card, balloon and marker,
+   from the same ramp the painted document draws that author in. These two derive from it,
+   and they are declared on the elements themselves because a custom property that
+   references `--doc-review-author-current` has to be computed where that property is actually set —
+   an ancestor rule would resolve the fallback and inherit it down.
+   Light: the page and the chrome agree on the value. Dark: the PAGE is rendered through an
+   inverting filter and the chrome is not, so only the chrome lifts. */
+.docx-review__card,
+.docx-review__marker {
+  --doc-review-author-ink: var(--doc-review-author-current, #c0392b);
+  --doc-review-author-disc: color-mix(
+    in srgb,
+    var(--doc-review-author-current, #c0392b) 82%,
+    white
+  );
+}
+
+.docx-editor.dark .docx-review__card,
+.docx-editor.dark .docx-review__marker {
+  --doc-review-author-ink: color-mix(in srgb, var(--doc-review-author-current, #c0392b) 55%, white);
+  --doc-review-author-disc: color-mix(
+    in srgb,
+    var(--doc-review-author-current, #c0392b) 62%,
+    white
+  );
+}
+
 .docx-review__card {
   display: flex;
   flex-direction: column;
@@ -6080,6 +6286,13 @@ a.docx-hyperlink:focus-visible {
   margin: 0 12px 0 0;
   padding: 12px 14px;
   border: 1px solid var(--doc-border, #e3e5e8);
+  /* WHOSE CARD THIS IS, at a glance. The document colours each author's changes, so the
+     card that annotates them carries the same colour on its leading edge — the eye pairs
+     the two without reading either. An edge rather than a wash: the card is chrome and its
+     text has to keep full contrast, and eight tinted slabs down a rail read as warnings.
+     `--doc-review-author-current` is set per card by the review surface; `--doc-review-author-ink`
+     is the chrome-side reading of it, lifted under `.dark` (see below). */
+  border-left: 3px solid var(--doc-review-author-ink, var(--doc-border, #e3e5e8));
   /* The card is CHROME, so it is themed; the document canvas beside it never is. */
   border-radius: 12px;
   background: var(--doc-surface, #fff);
@@ -6103,11 +6316,128 @@ a.docx-hyperlink:focus-visible {
    the rail read as eight competing highlights. */
 .docx-review__card[data-active] {
   box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
-  border-color: var(--doc-border-strong, #c8ccd2);
+  /* THREE SIDES, not `border-color`. The leading edge carries the author's colour, and the
+     shorthand overwrote it — the open card was the one place a reader could not tell whose
+     change they were deciding on. */
+  border-top-color: var(--doc-border-strong, #c8ccd2);
+  border-right-color: var(--doc-border-strong, #c8ccd2);
+  border-bottom-color: var(--doc-border-strong, #c8ccd2);
+  /* The faintest wash of the chrome's own accent, the same one the toolbar uses for a
+     pressed control, so "open" reads as selection rather than as a fourth author colour. */
+  background: var(--doc-review-card-active-bg);
+}
+
+.docx-review__card[data-resolved]:not([data-resolved-miniature]) {
+  opacity: 0.55;
 }
 
-.docx-review__card[data-resolved] {
-  opacity: 0.55;
+.docx-review__card[data-resolved-miniature]:not([open]) {
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  box-shadow: none;
+  color: var(--doc-text-muted);
+  font: inherit;
+  opacity: 1;
+}
+
+.docx-review__card[data-resolved-miniature]:not([open]):hover {
+  background: var(--doc-surface-hover, rgb(0 0 0 / 6%));
+  color: var(--doc-text);
+}
+
+.docx-review__resolved-toggle {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  margin: -6px;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-end;
+  border-radius: 50%;
+  color: var(--doc-success, #34a853);
+  cursor: pointer;
+  list-style: none;
+}
+
+.docx-review__resolved-toggle::-webkit-details-marker {
+  display: none;
+}
+
+.docx-review__resolved-status {
+  display: none;
+  color: var(--doc-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.docx-review__card[data-resolved-miniature][open] > .docx-review__resolved-toggle {
+  width: 100%;
+  height: 28px;
+  margin: -4px 0 4px;
+  justify-content: space-between;
+  align-self: stretch;
+  border-radius: 4px;
+}
+
+.docx-review__card[data-resolved-miniature][open]
+  > .docx-review__resolved-toggle
+  > .docx-review__resolved-status {
+  display: inline;
+}
+
+.docx-review__card[data-resolved-miniature]:not([open]) .docx-review__resolved-toggle {
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  align-self: center;
+  border-radius: 6px;
+}
+
+.docx-review__resolved-toggle:focus-visible {
+  outline: 2px solid var(--doc-focus-ring);
+  outline-offset: 1px;
+}
+
+.docx-review__resolved-icon {
+  position: relative;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.docx-review__resolved-comment {
+  display: inline-flex;
+  color: var(--doc-text-muted);
+}
+
+.docx-review__resolved-comment > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.docx-review__resolved-tick {
+  position: absolute;
+  inset: 2px 3px 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--doc-success);
+}
+
+.docx-review__resolved-tick > svg {
+  width: 10px;
+  height: 10px;
 }
 
 .docx-review__head {
@@ -6126,11 +6456,24 @@ a.docx-hyperlink:focus-visible {
   border-radius: 50%;
   /* Softened against white: the ramp is chosen to stay legible as TEXT on the page, and the
      same values as a 30px filled disc read as eight warning lights down the margin. */
-  background: color-mix(in srgb, var(--doc-review-author, #c0392b) 82%, white);
+  background: var(--doc-review-author-disc, #c0392b);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
+  /* An avatar image must not spill past the disc while it loads or if it fails. */
+  overflow: hidden;
+}
+
+/* A host-supplied avatar image (`RevisionAuthorStyle.avatarUrl`) fills the disc; the
+   author-coloured background above shows through until it loads. */
+.docx-review__avatar-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .docx-review__meta {
@@ -6298,7 +6641,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 .docx-review__input:focus-visible {
-  outline: 2px solid var(--doc-focus-ring, #3b82f6);
+  outline: 1px solid var(--doc-border-strong, #c8ccd2);
   outline-offset: -1px;
 }
 
@@ -6382,6 +6725,32 @@ a.docx-hyperlink:focus-visible {
   box-shadow: inset 0 -1px 0 var(--doc-comment-active-border);
 }
 
+.docx-comment-band--resolved-active {
+  background: var(--doc-comment-resolved-active-bg);
+  box-shadow: inset 0 -1px 0 var(--doc-comment-resolved-active-border);
+}
+
+/* WHOSE COMMENT THIS IS, for CSS only.
+ *
+ * Every band carries `data-review-author`, `data-review-author-slot` and `--doc-review-author-current` — the same
+ * three hooks the review card carries, so one selector restyles a reviewer's card and the text
+ * it annotates together. Nothing here paints them: Word keeps every comment the same yellow,
+ * and eight highlighter colours down a page reads as eight meanings rather than eight people.
+ * The author is a HANDLE, not a default.
+ *
+ * To tint by author, a host writes the one rule this deliberately does not:
+ *
+ *   .docx-editor .docx-comment-band {
+ *     background: color-mix(in srgb, var(--doc-review-author-current) 22%, transparent);
+ *   }
+ *
+ * The band is CHROME, not page content: this layer is a sibling of the pages, so the page's
+ * inverting filter never reaches it. It composites over the already-inverted sheet, and the
+ * blend mode flips from `multiply` to `screen` under `.dark` for that reason. A colour used
+ * here therefore needs its own dark value, the way `--doc-comment-bg` has one — nothing
+ * corrects it downstream. `--doc-review-author-current` carries the light ramp value in both themes,
+ * so a rule that tints by author should lift it under `.docx-editor.dark` itself. */
+
 /* Tracked changes carry a band always, in the change's OWN colour, so it never contradicts
  * the decoration it sits behind — green where text is arriving, red where it is leaving. A
  * replacement gets both, red over the struck half and green over what replaced it.
@@ -6398,13 +6767,13 @@ a.docx-hyperlink:focus-visible {
 }
 
 .docx-revision-band--insert.docx-revision-band--active {
-  background: var(--doc-revision-insertion-tint);
-  box-shadow: inset 0 -1px 0 var(--doc-revision-insertion);
+  background: var(--doc-revision-insertion-active-bg);
+  box-shadow: inset 0 -1px 0 var(--doc-revision-insertion-active-border);
 }
 
 .docx-revision-band--delete.docx-revision-band--active {
-  background: var(--doc-revision-deletion-tint);
-  box-shadow: inset 0 -1px 0 var(--doc-revision-deletion);
+  background: var(--doc-revision-deletion-active-bg);
+  box-shadow: inset 0 -1px 0 var(--doc-revision-deletion-active-border);
 }
 
 /* A formatting or structural change decorates no characters of its own, so it gets the
@@ -6415,7 +6784,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 .docx-revision-band--other.docx-revision-band--active {
-  background: color-mix(in srgb, var(--doc-text-muted, #8a8f98) 14%, transparent);
+  background: var(--doc-revision-other-active-bg);
 }
 
 /* Dark paper inverts the arithmetic: multiplying a tint into a dark sheet drives it to