@beyondwork/docx-react-component 1.0.36 → 1.0.38

package/src/ui-tailwind/theme/editor-theme.css

@@ -76,26 +76,90 @@
   --color-page-shadow: rgba(16, 24, 40, 0.06);
   --color-page-border: rgba(0, 0, 0, 0.04);
   --color-page-bg: #ffffff;
+  --color-page-ruler: color-mix(in srgb, var(--color-border) 65%, transparent);
+
+  /*
+   * ─── Radius tokens (balanced 10 / 8 / 4 / 2) ───
+   *
+   * Keeps the editor warm but drops the puffy rounded-xl aesthetic.  DESIGN.md
+   * §13 calls for one coherent shape language; these five named tokens define
+   * it, and the rounded-* Tailwind scale is swept into them so existing
+   * component markup inherits the new language without a file-by-file rewrite:
+   *   - rounded-xs  → 2px  (page / canvas)
+   *   - rounded-sm  → 4px  (pills, tags, small controls)
+   *   - rounded-md  → 4px  (icon buttons, tooltip content, menu items)
+   *   - rounded-lg  → 8px  (cards)
+   *   - rounded-xl  → 10px (panels, rails)
+   *   - rounded-2xl → 12px (dialogs, overlays)
+   */
+  --radius-panel: 10px;
+  --radius-card: 8px;
+  --radius-control: 4px;
+  --radius-page: 2px;
+  --radius-pill: 999px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
+
+  /*
+   * ─── Shadow tokens ───
+   *
+   * Three tiers used across the product chrome.  Dark-mode variants land in
+   * the .dark block below so the transform lives in one place.
+   */
+  --shadow-hairline: 0 0 0 1px var(--color-border);
+  --shadow-soft: 0 4px 14px -10px rgba(16, 24, 40, 0.14);
+  --shadow-float: 0 12px 28px -20px rgba(16, 24, 40, 0.18);
+
+  /*
+   * Tailwind shadow-sm / shadow-md / shadow-lg / shadow-xl follow the runtime
+   * three-tier scale.  Keeping them consistent with --shadow-soft / --shadow-
+   * float lets existing `shadow-lg` usages (dropdowns, popovers) match the
+   * calmer DESIGN.md §13.3 target without per-file edits.
+   */
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-md: 0 4px 14px -10px rgba(16, 24, 40, 0.14);
+  --shadow-lg: 0 8px 22px -16px rgba(16, 24, 40, 0.18);
+  --shadow-xl: 0 16px 32px -24px rgba(16, 24, 40, 0.22);
+
+  /*
+   * ─── Motion scale ───
+   *
+   * Consumed by harness-fade-in / harness-slide-in-right, the review rail
+   * tabs, and the scope rail layer.  Stays under DESIGN.md §13.4 ceiling.
+   */
+  --motion-fast: 120ms;
+  --motion-default: 160ms;
+  --motion-slow: 220ms;
 }
 
-/* ─── Dark mode overrides ─── */
+/*
+ * ─── Dark mode overrides ───
+ *
+ * Retuned against DESIGN.md §11.4 so the shell reads as graphite + forest-ink
+ * instead of near-black.  Accents drop from neon to the documented forest
+ * green so they do not glow against the deep slate canvas.
+ */
 .dark {
-  --color-surface: #1e1e1e;
-  --color-surface-hover: #2a2a2a;
-  --color-surface-active: #333333;
-  --color-subtle: #252525;
-  --color-canvas: #191919;
-  --color-shell-bg: #171514;
-  --color-card: #23211f;
-  --color-editor-frame: #1d1b19;
-  --color-sidebar-tint: rgba(29, 27, 25, 0.94);
-
-  --color-primary: #e4e4e4;
-  --color-secondary: #a0a0a0;
-  --color-tertiary: #6e6e6e;
-
-  --color-accent: #5edec1;
-  --color-accent-soft: rgba(94, 222, 193, 0.14);
+  --color-surface: #182420;
+  --color-surface-hover: #20302a;
+  --color-surface-active: #2a3d34;
+  --color-subtle: #1a2721;
+  --color-canvas: #1B2620;
+  --color-shell-bg: #0E1411;
+  --color-card: #20302a;
+  --color-editor-frame: #131B17;
+  --color-sidebar-tint: rgba(22, 33, 27, 0.94);
+
+  --color-primary: #EFF7F2;
+  --color-secondary: #A5B7AC;
+  --color-tertiary: #7F9187;
+
+  --color-accent: #53B487;
+  --color-accent-soft: rgba(83, 180, 135, 0.16);
   --color-workflow: #c7b6ff;
   --color-workflow-soft: rgba(199, 182, 255, 0.16);
 
@@ -114,15 +178,19 @@
   --color-success: #8fd2a9;
   --color-success-soft: rgba(143, 210, 169, 0.18);
 
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-border-strong: rgba(255, 255, 255, 0.14);
+  --color-border: rgba(255, 255, 255, 0.09);
+  --color-border-strong: rgba(255, 255, 255, 0.16);
 
   --color-shadow: rgba(0, 0, 0, 0.32);
   --color-shadow-strong: rgba(0, 0, 0, 0.48);
 
-  --color-page-shadow: rgba(0, 0, 0, 0.18);
+  --color-page-shadow: rgba(0, 0, 0, 0.22);
   --color-page-border: rgba(255, 255, 255, 0.06);
-  --color-page-bg: #1e1e1e;
+  --color-page-bg: #1B2620;
+  --color-page-ruler: color-mix(in srgb, var(--color-border) 70%, transparent);
+
+  --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
+  --shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
 }
 
 /*
@@ -189,7 +257,7 @@
 .wre-page-chrome {
   background: var(--color-page-bg);
   border: 1px solid var(--color-page-border);
-  border-radius: 2px;
+  border-radius: var(--radius-page);
   box-shadow: 0 8px 24px -20px var(--color-page-shadow);
 }
 
@@ -203,7 +271,7 @@
   min-height: 100%;
   background: var(--color-page-bg);
   border: 1px solid var(--color-page-border);
-  border-radius: 2px;
+  border-radius: var(--radius-page);
   box-shadow: 0 6px 18px -14px var(--color-page-shadow);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -222,6 +290,38 @@
   box-sizing: border-box;
 }
 
+/*
+ * ─── Global selection + scrollbar rules ───
+ *
+ * Every host that imports this theme inherits the same scrollbar + selection
+ * treatment.  Keep these rules here so harness and consumer apps do not have
+ * to redeclare them.
+ */
+::selection {
+  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-secondary) 18%, transparent);
+  border: 2px solid transparent;
+  border-radius: var(--radius-pill);
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-secondary) 28%, transparent);
+  background-clip: padding-box;
+}
+
 /* ─── Reduced motion ─── */
 [data-reduced-motion="true"] {
   scroll-behavior: auto;
@@ -248,9 +348,7 @@
 /* ─── Focus ring utility ─── */
 .wre-focus-ring:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--color-canvas),
-    0 0 0 4px var(--color-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 60%, transparent);
 }
 
 /* ─── ProseMirror surface ─── */
@@ -271,171 +369,198 @@
   outline: none;
 }
 
+/*
+ * ─── Workflow inline text emphasis ───
+ *
+ * Since R3a the workflow scope rail + flat block tint are painted on the
+ * ChromeOverlay plane (see src/ui-tailwind/chrome-overlay/).  PM
+ * decorations retain ONLY inline text emphasis for postures that carry
+ * unique per-text signals (candidate = dashed underline, blocked-import =
+ * wavy underline, active = thin outline).  The rounded in-text background
+ * boxes that previously wrapped every run are gone — the overlay's flat
+ * tint handles that signal.
+ */
 .prosemirror-surface .ProseMirror .wre-workflow-inline {
-  border-radius: 0.25rem;
-  box-shadow: inset 0 0 0 1px transparent;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
-}
-
-.prosemirror-surface .ProseMirror .wre-workflow-inline-suggest {
-  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 20%, transparent);
-}
-
-.prosemirror-surface .ProseMirror .wre-workflow-inline-comment {
-  background: color-mix(in srgb, var(--color-insert) 10%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-insert) 18%, transparent);
-}
-
-.prosemirror-surface .ProseMirror .wre-workflow-inline-view {
-  background: color-mix(in srgb, var(--color-secondary) 7%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-secondary) 14%, transparent);
-}
-
 .prosemirror-surface .ProseMirror .wre-workflow-inline-candidate {
-  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 18%, transparent);
   text-decoration: underline;
   text-decoration-style: dashed;
   text-decoration-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
   text-underline-offset: 0.18em;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-inline-metadata {
-  background: color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 12%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 22%, transparent);
-}
-
-.prosemirror-surface .ProseMirror .wre-workflow-inline-preserve-only {
-  background: color-mix(in srgb, var(--color-danger) 7%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 18%, transparent);
-}
-
 .prosemirror-surface .ProseMirror .wre-workflow-inline-blocked-import {
-  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 24%, transparent);
   text-decoration: underline;
   text-decoration-style: wavy;
   text-decoration-color: color-mix(in srgb, var(--color-danger) 70%, transparent);
   text-underline-offset: 0.18em;
 }
 
+/*
+ * Locked zone marker for inline runs: a subtle dotted right edge so the
+ * reader can tell where the locked range ends when the gutter label scrolls
+ * out of view.  The overlay's flat tint carries the primary signal.
+ */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-locked-zone {
-  border-radius: 0.35rem;
+  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-danger) 35%, transparent);
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail {
-  position: relative;
-  padding-left: 0.875rem;
-  border-radius: 0.25rem;
+.prosemirror-surface .ProseMirror .wre-workflow-inline-active {
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 30%, transparent);
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0.2rem;
-  bottom: 0.2rem;
-  width: 0.3rem;
-  border-radius: 999px;
-  background: var(--wre-workflow-rail-color, var(--color-border-strong));
+/*
+ * ─── ChromeOverlay: scope rail layer ───
+ *
+ * The overlay sits above PM and paints the flat block-tint + gutter labels
+ * that used to be inline PM decorations.  Positions come from the render
+ * kernel's anchor index, not DOM rects.
+ */
+.wre-scope-rail-layer {
+  pointer-events: none;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-active::before {
-  width: 0.3125rem;
-  opacity: 1;
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 30%, transparent);
+.wre-scope-rail-tint {
+  position: absolute;
+  border-radius: 0.35rem;
+  pointer-events: none;
+  z-index: 0;
+  transition: background 140ms ease-out;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-inline-active {
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 28%, transparent);
+.wre-scope-rail-tint-accent {
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-inline-zone {
-  border-radius: 0.35rem;
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 18%, transparent),
-    inset 0 0 0 999px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 8%, transparent);
+.wre-scope-rail-tint-warning {
+  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
-  --wre-workflow-rail-color: var(--color-accent);
-  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
+.wre-scope-rail-tint-insert {
+  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-suggest {
-  --wre-workflow-rail-color: var(--color-warning);
-  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
+.wre-scope-rail-tint-secondary {
+  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-comment {
-  --wre-workflow-rail-color: var(--color-insert);
-  background: color-mix(in srgb, var(--color-insert) 7%, transparent);
+.wre-scope-rail-tint-danger {
+  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-view {
-  --wre-workflow-rail-color: var(--color-secondary);
-  background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
+.wre-scope-rail-tint-active {
+  outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+  outline-offset: -1px;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-candidate {
-  --wre-workflow-rail-color: var(--color-warning);
-  background: color-mix(in srgb, var(--color-warning) 4%, transparent);
+.wre-scope-rail-label {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid transparent;
+  background: var(--color-canvas, #fff);
+  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.18);
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: 1;
+  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+}
+
+.wre-scope-rail-label:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.22);
+}
+
+.wre-scope-rail-label-accent {
+  color: var(--color-accent);
+  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-warning {
+  color: var(--color-warning);
+  border-color: color-mix(in srgb, var(--color-warning) 42%, transparent);
+  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-insert {
+  color: var(--color-insert);
+  border-color: color-mix(in srgb, var(--color-insert) 40%, transparent);
+  background: color-mix(in srgb, var(--color-insert) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-secondary {
+  color: var(--color-secondary);
+  border-color: color-mix(in srgb, var(--color-secondary) 38%, transparent);
+  background: color-mix(in srgb, var(--color-secondary) 6%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-danger {
+  color: var(--color-danger);
+  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
+  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-canvas, #fff));
+}
+
+.wre-scope-rail-label-active {
+  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
+}
+
+.wre-scope-rail-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-candidate::before {
-  background:
-    repeating-linear-gradient(
-      to bottom,
-      var(--wre-workflow-rail-color, var(--color-warning)) 0,
-      var(--wre-workflow-rail-color, var(--color-warning)) 6px,
-      transparent 6px,
-      transparent 10px
-    );
+/* Simple inline-SVG-as-mask icons so consumers don't need an icon font. */
+.wre-scope-rail-icon-lock {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>');
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-preserve-only {
-  --wre-workflow-rail-color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
+.wre-scope-rail-icon-eye {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8-10-8-10-8z"/><circle cx="12" cy="12" r="3"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8-10-8-10-8z"/><circle cx="12" cy="12" r="3"/></svg>');
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-preserve-only::before {
-  opacity: 0.85;
+.wre-scope-rail-icon-pencil {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3l4 4L8 20H4v-4z"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3l4 4L8 20H4v-4z"/></svg>');
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-blocked-import {
-  --wre-workflow-rail-color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+.wre-scope-rail-icon-sparkles {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg>');
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-blocked-import::before {
-  background:
-    repeating-linear-gradient(
-      to bottom,
-      var(--wre-workflow-rail-color, var(--color-danger)) 0,
-      var(--wre-workflow-rail-color, var(--color-danger)) 4px,
-      transparent 4px,
-      transparent 8px
-    );
+.wre-scope-rail-icon-message {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18v11H7l-4 4z"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18v11H7l-4 4z"/></svg>');
 }
-
-.prosemirror-surface .ProseMirror .wre-workflow-rail-locked-zone {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-danger)) 10%, transparent);
+.wre-scope-rail-icon-flag {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21V4h12l-2 4 2 4H5"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21V4h12l-2 4 2 4H5"/></svg>');
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone {
-  background: transparent;
+/*
+ * ─── ChromeOverlay: workspace view-switcher dock ───
+ */
+.wre-workspace-dock {
+  user-select: none;
 }
 
-.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone::before {
-  width: 0.25rem;
-  opacity: 0.95;
+.wre-workspace-dock-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-color: currentColor;
 }
 
 .prosemirror-surface:focus-visible {
@@ -495,3 +620,239 @@
 .wre-page-chrome[style*="scale"] {
   will-change: transform;
 }
+
+/*
+ * ─── Review rail — TwRailCard primitive (harness-pass §4.5.3) ───
+ *
+ * Shared editorial status-eyebrow card used by the Workflow / Comments /
+ * Changes tabs.  Tone is driven by `data-tone` and a single custom property
+ * on the card root so the primitive stays tone-agnostic.  The card lives
+ * alongside the shipped `.wre-workflow-card` (used by `tw-workflow-tab.tsx`)
+ * — consumers pick whichever matches their payload shape.
+ */
+.wre-rail-card {
+  position: relative;
+  border-radius: var(--radius-card);
+  background: var(--color-surface);
+  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
+  padding: 14px 16px 16px;
+  overflow: hidden;
+  transition: background-color var(--motion-fast) ease-out,
+    border-color var(--motion-fast) ease-out,
+    box-shadow var(--motion-fast) ease-out;
+}
+
+.wre-rail-card::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--wre-rail-card-edge, transparent);
+}
+
+.wre-rail-card[data-active="true"] {
+  box-shadow: var(--shadow-soft);
+  border-color: color-mix(in srgb, var(--wre-rail-card-edge, var(--color-border)) 40%, var(--color-border));
+}
+
+.wre-rail-card[data-tone="inReview"] {
+  --wre-rail-card-edge: var(--color-accent);
+  --wre-rail-card-eyebrow: var(--color-accent);
+  --wre-rail-card-progress-fill: var(--color-accent);
+}
+
+.wre-rail-card[data-tone="blocked"] {
+  --wre-rail-card-edge: var(--color-danger);
+  --wre-rail-card-eyebrow: var(--color-danger);
+  --wre-rail-card-progress-fill: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger-soft) 75%, var(--color-surface));
+}
+
+.wre-rail-card[data-tone="scheduled"] {
+  --wre-rail-card-edge: var(--color-tertiary);
+  --wre-rail-card-eyebrow: var(--color-tertiary);
+  --wre-rail-card-progress-fill: var(--color-tertiary);
+}
+
+.wre-rail-card[data-tone="resolved"] {
+  --wre-rail-card-edge: var(--color-success);
+  --wre-rail-card-eyebrow: var(--color-success);
+  --wre-rail-card-progress-fill: var(--color-success);
+}
+
+.wre-rail-card[data-tone="neutral"] {
+  --wre-rail-card-edge: var(--color-border-strong);
+  --wre-rail-card-eyebrow: var(--color-tertiary);
+  --wre-rail-card-progress-fill: var(--color-secondary);
+}
+
+.wre-rail-card__eyebrow {
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--wre-rail-card-eyebrow, var(--color-tertiary));
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wre-rail-card__title {
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-primary);
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wre-rail-card__detail {
+  margin-top: 6px;
+  font-size: 12.5px;
+  line-height: 18px;
+  color: var(--color-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wre-rail-card__avatars {
+  margin-top: 10px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.wre-rail-card__avatar,
+.wre-rail-card__avatar-counter {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--color-primary);
+  background: var(--color-subtle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 1.5px var(--color-sidebar-tint);
+}
+
+.wre-rail-card__avatar + .wre-rail-card__avatar,
+.wre-rail-card__avatar + .wre-rail-card__avatar-counter {
+  margin-left: -4px;
+}
+
+.wre-rail-card__avatar-counter {
+  color: var(--color-secondary);
+  font-size: 10px;
+}
+
+.wre-rail-card__counter {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-subtle);
+  color: var(--color-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wre-rail-card__progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: var(--color-subtle);
+}
+
+.wre-rail-card__progress-fill {
+  display: block;
+  height: 100%;
+  background: var(--wre-rail-card-progress-fill, var(--color-accent));
+  transition: width var(--motion-default) ease-out;
+}
+
+.wre-rail-card__footer {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/*
+ * ─── Review rail tab chip (harness-pass §4.5.2) ───
+ *
+ * Underline-active triggers used by TwReviewRail when the host opts into
+ * the editorial header.  Plays nicely with the shipped Tabs.List pill style
+ * — consumers pick which chip they want via a class toggle.
+ */
+.wre-rail-tab {
+  position: relative;
+  padding: 8px 14px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-tertiary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color var(--motion-fast) ease-out;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wre-rail-tab:hover {
+  color: var(--color-secondary);
+}
+
+.wre-rail-tab[data-state="active"] {
+  color: var(--color-primary);
+}
+
+.wre-rail-tab[data-state="active"]::after {
+  content: "";
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: 0;
+  height: 2px;
+  background: var(--color-accent);
+  border-radius: var(--radius-pill);
+}
+
+.wre-rail-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-subtle);
+  color: var(--color-secondary);
+}
+
+.wre-rail-tab[data-state="active"] .wre-rail-tab__count {
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-accent-soft) 80%, var(--color-subtle));
+}