@oix1987/yjd 1.0.3 → 2.1.0

package/{dist → lib}/styles.css

@@ -70,19 +70,25 @@
   position: relative;
 }
 
-/* Placeholder styles for contentEditable */
+/* Placeholder styles for contentEditable.
+   Inherit the editor's padding + font so the placeholder lands exactly on the
+   content origin (where the caret/first character sits) at ANY padding/size —
+   instead of hardcoded offsets that drifted out of alignment. */
 .yjd-rich-editor .rich-editor-area[data-placeholder]:before {
   content: attr(data-placeholder);
   color: #9ca3af;
   pointer-events: none;
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: inherit;
+  box-sizing: border-box;
+  font: inherit;
   font-style: italic;
+  line-height: inherit;
   display: none;
   z-index: 1;
-  font-size: 16px;
-  line-height: 1.7;
 }
 
 .yjd-rich-editor .rich-editor-area[data-placeholder].placeholder-visible:before {
@@ -333,34 +339,9 @@
   background: #EEEEEE !important;
   cursor: pointer;
 }
-.yjd-rich-editor .rich-editor-toolbar-btn.active{
-  background: #EEEEEE !important;
-  color: #136FDF !important;
-}
-
-.yjd-rich-editor .rich-editor-toolbar-btn.active svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg {
-  fill: #136FDF !important;
-}
-
-.yjd-rich-editor .rich-editor-toolbar-btn.active svg path,
-.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path {
-  fill: #136FDF !important;
-}
-
-
-
-/* Specific icon styles for better visibility */
-.yjd-rich-editor .rich-editor-toolbar-btn.list-btn .icon svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.emoji-btn .icon svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.image-btn .icon svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.video-btn .icon svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.tag-btn .icon svg,
-.yjd-rich-editor .rich-editor-toolbar-btn.import-btn .icon svg {
-  width: 16px;
-  height: 16px;
-  fill: #454545;
-}
+/* Active toolbar-button + icon colours are owned by the design-system layer
+   (accent), and icon sizing/stroke by the outline-icon layer — the old blue
+   (#136FDF) / grey (#454545) overrides have been removed. */
 
 /*block toolbar*/
 .yjd-rich-editor .block-toolbar-btn{
@@ -579,6 +560,18 @@
   display: inline-flex !important;
   align-items: center ;
   justify-content: center ;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+/* The chevron SVG keeps the `dropdown-icon` class (not `.icon`), so size it
+   explicitly here — otherwise it has no dimensions and the arrow disappears. */
+.yjd-rich-editor .dropdown-icon svg{
+  width: 16px;
+  height: 16px;
+  display: block;
+  stroke: currentColor;
+  fill: none;
 }
 
 
@@ -891,20 +884,27 @@
 .yjd-rich-editor .rich-editor-table {
   border-collapse: collapse;
   width: 100%;
+  /* Never exceed the editor's content width, even mid-resize. */
+  max-width: 100%;
+  box-sizing: border-box;
   margin: 16px 0;
   font-size: 14px;
   line-height: 1.5;
   position: relative;
   display: table;
-  table-layout: auto;
+  table-layout: fixed;
 }
 
 .yjd-rich-editor .rich-editor-table td {
+  /* border-box so a cell's min-width includes its padding+border — otherwise
+     padding/borders push the table past the width set during resize. */
+  box-sizing: border-box;
   border: 1px solid #d1d5db;
   padding: 8px 12px;
   min-height: 28px;
   vertical-align: top;
   background: #fff;
+  overflow-wrap: break-word;
 }
 
 .yjd-rich-editor .rich-editor-table td:focus {
@@ -2120,4 +2120,1361 @@
 .yjd-rich-editor .rich-editor-popup-container .custom-select-popup {
   position: absolute !important;
   z-index: 1001 !important;
-}
+}
+/* =====================================================================
+   DESIGN SYSTEM v2 — "Calm writing studio"
+   A friendly, cohesive theme. Everything below is driven by tokens so
+   every surface (toolbar, popups, find/replace, tables, floating tools)
+   shares the same palette, radius, shadow and motion.
+   This block is appended last so it themes the components above.
+   ===================================================================== */
+
+.yjd-rich-editor {
+  /* Palette */
+  --rte-bg: #ffffff;
+  --rte-chrome: #fbfbfd;
+  --rte-chrome-2: #f2f2f7;
+  --rte-border: #e9e9f1;
+  --rte-border-strong: #dadae6;
+  --rte-ink: #20242f;
+  --rte-muted: #767c8e;
+  --rte-accent: #6d5efc;
+  --rte-accent-ink: #5a48ee;
+  --rte-accent-weak: #efedff;
+  --rte-accent-ring: rgba(109, 94, 252, 0.28);
+  --rte-danger: #e5484d;
+  /* Shape & depth */
+  --rte-radius: 14px;
+  --rte-radius-md: 11px;
+  --rte-radius-sm: 8px;
+  --rte-shadow-sm: 0 1px 2px rgba(20, 24, 46, 0.06);
+  --rte-shadow: 0 12px 32px -8px rgba(20, 24, 46, 0.20), 0 4px 10px -4px rgba(20, 24, 46, 0.10);
+  --rte-t: 140ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  border: 1px solid var(--rte-border) !important;
+  border-radius: var(--rte-radius) !important;
+  background: var(--rte-bg);
+  color: var(--rte-ink);
+  box-shadow: var(--rte-shadow-sm);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* Use a friendly system stack everywhere (overrides the forced "Inter") */
+.yjd-rich-editor .toolbar-container button,
+.yjd-rich-editor .toolbar-container input,
+.yjd-rich-editor .toolbar-container select,
+.yjd-rich-editor .toolbar-container textarea,
+.yjd-rich-editor .rich-editor-popup-container button,
+.yjd-rich-editor .rich-editor-popup-container input,
+.yjd-rich-editor .rich-editor-popup-container select,
+.yjd-rich-editor .rich-editor-popup-container textarea {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+}
+
+/* ---------- Toolbar ---------- */
+.yjd-rich-editor .rich-editor-toolbar-container {
+  background: var(--rte-chrome);
+  border-bottom: 1px solid var(--rte-border);
+}
+.yjd-rich-editor .rich-editor-toolbar-1,
+.yjd-rich-editor .rich-editor-toolbar-2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start; /* pack left; override legacy space-between */
+  column-gap: 0;
+  row-gap: 4px;
+  padding: 8px 12px;
+}
+.yjd-rich-editor .rich-editor-toolbar-2.visible {
+  border-top: 1px solid var(--rte-border);
+}
+/* Group by spacing, not dividers: tight within a group, airy between groups. */
+.yjd-rich-editor .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border-right: none;
+  margin: 0;
+  padding: 0;
+}
+.yjd-rich-editor .toolbar-group + .toolbar-group {
+  margin-left: 12px;
+}
+
+/* ---------- Buttons (toolbar + dropdown triggers) ---------- */
+.yjd-rich-editor .rich-editor-toolbar-btn,
+.yjd-rich-editor .custom-select-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: var(--rte-radius-sm);
+  background: transparent;
+  color: var(--rte-ink);
+  cursor: pointer;
+  box-shadow: none;
+  transition: background var(--rte-t), color var(--rte-t),
+    box-shadow var(--rte-t), border-color var(--rte-t);
+}
+.yjd-rich-editor .rich-editor-toolbar-btn:hover,
+.yjd-rich-editor .custom-select-button:hover {
+  background: var(--rte-chrome-2);
+  color: var(--rte-ink);
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.active {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+  border-color: transparent;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path {
+  fill: var(--rte-accent-ink);
+  color: var(--rte-accent-ink);
+}
+.yjd-rich-editor .rich-editor-toolbar-btn:disabled,
+.yjd-rich-editor .rich-editor-toolbar-btn[disabled] {
+  opacity: 0.38 !important;
+  cursor: not-allowed !important;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn:focus-visible,
+.yjd-rich-editor .custom-select-button:focus-visible {
+  outline: none;
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+
+/* ---------- Status bar ---------- */
+.yjd-rich-editor .rich-editor-statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 14px;
+  background: var(--rte-chrome);
+  border-top: 1px solid var(--rte-border);
+}
+.yjd-rich-editor .rich-editor-breadcrumb,
+.yjd-rich-editor .wordcount {
+  color: var(--rte-muted);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
+
+/* ---------- Editor surface ---------- */
+.yjd-rich-editor .rich-editor-area {
+  color: var(--rte-ink);
+  font-size: 16px;
+  line-height: 1.75;
+  padding: 22px 24px;
+}
+.yjd-rich-editor .rich-editor-area a {
+  color: var(--rte-accent-ink);
+  text-decoration-color: var(--rte-accent-ring);
+  text-underline-offset: 2px;
+}
+.yjd-rich-editor .rich-editor-area[data-placeholder].placeholder-visible:before {
+  color: var(--rte-muted);
+  opacity: 0.55;
+}
+.yjd-rich-editor .rich-editor-area blockquote {
+  border-left: 3px solid var(--rte-accent);
+  background: var(--rte-accent-weak);
+  border-radius: 0 var(--rte-radius-sm) var(--rte-radius-sm) 0;
+  padding: 8px 16px;
+  color: var(--rte-ink);
+  margin: 12px 0;
+}
+.yjd-rich-editor .rich-editor-area code {
+  background: var(--rte-chrome-2);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 0.9em;
+}
+.yjd-rich-editor .rich-editor-area pre {
+  background: #20242f;
+  color: #ececf5;
+  border-radius: var(--rte-radius-md);
+  padding: 14px 16px;
+  border: none;
+}
+.yjd-rich-editor .rich-editor-area pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+/* ---------- Popups (shared shell) ---------- */
+.yjd-rich-editor .color-picker-popup,
+.yjd-rich-editor .custom-select-popup,
+.yjd-rich-editor .heading-select-popup,
+.yjd-rich-editor .capitalization-select-popup,
+.yjd-rich-editor .font-family-select-popup,
+.yjd-rich-editor .line-height-select-popup,
+.yjd-rich-editor .text-size-select-popup,
+.yjd-rich-editor .link-popup,
+.yjd-rich-editor .image-popup,
+.yjd-rich-editor .video-popup,
+.yjd-rich-editor .tag-popup,
+.yjd-rich-editor .import-popup,
+.yjd-rich-editor .table-popup,
+.yjd-rich-editor .text-align-picker-popup,
+.yjd-rich-editor .emoji-picker-popup {
+  background: var(--rte-bg);
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-md);
+  box-shadow: var(--rte-shadow);
+}
+
+/* Dropdown list items */
+.yjd-rich-editor .custom-select-item-button {
+  border-radius: var(--rte-radius-sm);
+  color: var(--rte-ink);
+  transition: background var(--rte-t), color var(--rte-t);
+}
+.yjd-rich-editor .custom-select-item-button:hover {
+  background: var(--rte-chrome-2);
+}
+.yjd-rich-editor .custom-select-item-button.current {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+}
+.yjd-rich-editor .custom-select-item-button.current .item-checkmark {
+  color: var(--rte-accent-ink);
+}
+
+/* ---------- Forms inside popups ---------- */
+.yjd-rich-editor .yjd-input,
+.yjd-rich-editor .yjd-select-input {
+  border: 1px solid var(--rte-border-strong);
+  border-radius: var(--rte-radius-sm);
+  color: var(--rte-ink);
+  transition: border-color var(--rte-t), box-shadow var(--rte-t);
+}
+.yjd-rich-editor .yjd-input:focus,
+.yjd-rich-editor .yjd-select-input:focus {
+  outline: none;
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+.yjd-rich-editor .yjd-input-title {
+  color: var(--rte-ink);
+  font-weight: 600;
+}
+.yjd-rich-editor .yjd-input-label {
+  color: var(--rte-muted);
+}
+.yjd-rich-editor .yjd-button-confirm {
+  background: var(--rte-accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--rte-radius-sm);
+  transition: background var(--rte-t);
+}
+.yjd-rich-editor .yjd-button-confirm:hover {
+  background: var(--rte-accent-ink);
+}
+.yjd-rich-editor .yjd-button-cancel {
+  background: var(--rte-chrome-2);
+  color: var(--rte-ink);
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-sm);
+  transition: background var(--rte-t);
+}
+.yjd-rich-editor .yjd-button-cancel:hover {
+  background: #e9e9f2;
+}
+.yjd-rich-editor .yjd-custom-upload-button {
+  border-radius: var(--rte-radius-sm);
+  border: 1px dashed var(--rte-border-strong);
+  color: var(--rte-accent-ink);
+  background: var(--rte-accent-weak);
+  transition: background var(--rte-t), border-color var(--rte-t);
+}
+.yjd-rich-editor .yjd-custom-upload-button:hover {
+  border-color: var(--rte-accent);
+}
+
+/* ---------- Floating toolbars (block + table) ---------- */
+.yjd-rich-editor .block-toolbar-container,
+.yjd-rich-editor .table-toolbar-container {
+  background: var(--rte-bg);
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-md);
+  box-shadow: var(--rte-shadow);
+  padding: 4px;
+  gap: 2px;
+}
+.yjd-rich-editor .block-toolbar-btn,
+.yjd-rich-editor .table-toolbar-btn {
+  border: 1px solid transparent;
+  border-radius: var(--rte-radius-sm);
+  background: transparent;
+  color: var(--rte-ink);
+  transition: background var(--rte-t), color var(--rte-t);
+}
+.yjd-rich-editor .block-toolbar-btn:hover,
+.yjd-rich-editor .table-toolbar-btn:hover {
+  background: var(--rte-chrome-2);
+}
+.yjd-rich-editor .block-toolbar-btn.active {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+}
+.yjd-rich-editor .block-toolbar-btn.active .icon svg,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
+  fill: var(--rte-accent-ink);
+}
+
+/* ---------- Tables ---------- */
+.yjd-rich-editor .rich-editor-table td {
+  border: 1px solid var(--rte-border-strong) !important;
+}
+.yjd-rich-editor .rich-editor-table td:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--rte-accent);
+  background: var(--rte-accent-weak);
+}
+.yjd-rich-editor .table-grid-cell.highlighted {
+  background: var(--rte-accent);
+  border-color: var(--rte-accent);
+}
+
+/* ---------- Resize handles ---------- */
+.yjd-rich-editor .resize-handle {
+  background: var(--rte-accent) !important;
+  border: 2px solid #fff !important;
+  border-radius: 50% !important;
+  box-shadow: var(--rte-shadow-sm) !important;
+}
+
+/* ---------- Find & Replace panel ---------- */
+.yjd-rich-editor .yjd-find-replace {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1100;
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  background: var(--rte-bg);
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-md);
+  box-shadow: var(--rte-shadow);
+  font: 13px/1.4 system-ui, -apple-system, sans-serif;
+  max-width: calc(100% - 20px);
+}
+.yjd-rich-editor .yjd-find-replace.open {
+  display: flex;
+}
+.yjd-rich-editor .yjd-find-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.yjd-rich-editor .yjd-find-input {
+  flex: 1 1 auto;
+  min-width: 150px;
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--rte-border-strong);
+  border-radius: var(--rte-radius-sm);
+  color: var(--rte-ink);
+  background: var(--rte-bg);
+  transition: border-color var(--rte-t), box-shadow var(--rte-t);
+}
+.yjd-rich-editor .yjd-find-input:focus {
+  outline: none;
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+.yjd-rich-editor .yjd-find-count {
+  min-width: 46px;
+  text-align: center;
+  color: var(--rte-muted);
+  font-variant-numeric: tabular-nums;
+}
+.yjd-rich-editor .yjd-find-btn {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-sm);
+  background: var(--rte-chrome);
+  color: var(--rte-ink);
+  cursor: pointer;
+  transition: background var(--rte-t), color var(--rte-t), border-color var(--rte-t),
+    box-shadow var(--rte-t);
+}
+.yjd-rich-editor .yjd-find-btn:hover {
+  background: var(--rte-chrome-2);
+}
+.yjd-rich-editor .yjd-find-btn:focus-visible {
+  outline: none;
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+.yjd-rich-editor .yjd-find-icon {
+  width: 30px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+}
+.yjd-rich-editor .yjd-find-toggle.active {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+  border-color: transparent;
+}
+.yjd-rich-editor .yjd-find-replace .yjd-find-btn.yjd-find-close:hover {
+  background: #fdecec;
+  color: var(--rte-danger);
+  border-color: #f6caca;
+}
+.yjd-rich-editor .yjd-find-replace-input {
+  flex: 1 1 auto;
+}
+.yjd-rich-editor .yjd-find-row .yjd-find-btn:not(.yjd-find-icon) {
+  flex: 0 0 auto;
+}
+
+/* Match highlights */
+.yjd-rich-editor mark.yjd-find-hit {
+  background: #fff1b8;
+  color: inherit;
+  border-radius: 3px;
+}
+.yjd-rich-editor mark.yjd-find-hit.active {
+  background: var(--rte-accent);
+  color: #fff;
+}
+
+/* ---------- Accessibility: respect reduced motion ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .yjd-rich-editor * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.1 — minimal & light refinements
+   Icon unification, friendlier popovers, lighter inputs & buttons.
+   ===================================================================== */
+
+/* ---------- Icons: one size, one color ---------- */
+/* Convert the hard-coded greys to currentColor so every icon follows the
+   button's text colour (and the accent on active). Outline icons (stroke)
+   and the deliberately-coloured "no colour" swatch are left untouched. */
+.yjd-rich-editor .icon svg [fill="#454545"],
+.yjd-rich-editor .icon svg [fill="#231F20"],
+.yjd-rich-editor .icon svg [fill="#010101"],
+.yjd-rich-editor .icon svg[fill="#454545"],
+.yjd-rich-editor .block-toolbar-btn svg [fill="#454545"],
+.yjd-rich-editor .table-toolbar-btn svg [fill="#454545"] {
+  fill: currentColor;
+}
+
+/* Consistent icon footprint — equal height, centered, never distorted. */
+.yjd-rich-editor .rich-editor-toolbar-btn .icon,
+.yjd-rich-editor .block-toolbar-btn .icon,
+.yjd-rich-editor .table-toolbar-btn .icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: inherit;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn .icon svg,
+.yjd-rich-editor .block-toolbar-btn .icon svg,
+.yjd-rich-editor .table-toolbar-btn .icon svg {
+  width: auto !important;
+  height: 16px !important;
+  max-width: 18px;
+  display: block;
+}
+
+/* Default icon colour = quiet ink; active = accent (overrides legacy blue). */
+.yjd-rich-editor .rich-editor-toolbar-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn .icon svg path {
+  fill: currentColor;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn { color: #4b5060; }
+.yjd-rich-editor .rich-editor-toolbar-btn:hover { color: var(--rte-ink); }
+.yjd-rich-editor .rich-editor-toolbar-btn.active,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill] {
+  color: var(--rte-accent-ink) !important;
+  fill: var(--rte-accent-ink) !important;
+}
+
+/* ---------- Toolbar: lighter weight ---------- */
+.yjd-rich-editor .rich-editor-toolbar-btn,
+.yjd-rich-editor .custom-select-button {
+  box-shadow: none;
+}
+.yjd-rich-editor .custom-select-button {
+  border-color: var(--rte-border);
+  background: var(--rte-bg);
+  color: var(--rte-ink);
+  font-weight: 500;
+}
+.yjd-rich-editor .custom-select-button:hover {
+  border-color: var(--rte-border-strong);
+  background: var(--rte-bg);
+}
+.yjd-rich-editor .dropdown-icon { color: var(--rte-muted); }
+
+/* ---------- Popovers: friendly & airy ---------- */
+.yjd-rich-editor .color-picker-popup,
+.yjd-rich-editor .custom-select-popup,
+.yjd-rich-editor .heading-select-popup,
+.yjd-rich-editor .capitalization-select-popup,
+.yjd-rich-editor .font-family-select-popup,
+.yjd-rich-editor .line-height-select-popup,
+.yjd-rich-editor .text-size-select-popup,
+.yjd-rich-editor .link-popup,
+.yjd-rich-editor .image-popup,
+.yjd-rich-editor .video-popup,
+.yjd-rich-editor .tag-popup,
+.yjd-rich-editor .import-popup,
+.yjd-rich-editor .table-popup,
+.yjd-rich-editor .text-align-picker-popup,
+.yjd-rich-editor .emoji-picker-popup {
+  border-color: var(--rte-border);
+  border-radius: var(--rte-radius-md);
+  box-shadow: 0 10px 30px -10px rgba(20, 24, 46, 0.18), 0 2px 6px -2px rgba(20, 24, 46, 0.08);
+}
+
+/* roomier dropdown lists */
+.yjd-rich-editor .custom-select-popup,
+.yjd-rich-editor .heading-select-popup,
+.yjd-rich-editor .capitalization-select-popup,
+.yjd-rich-editor .font-family-select-popup,
+.yjd-rich-editor .line-height-select-popup,
+.yjd-rich-editor .text-size-select-popup {
+  padding: 6px;
+}
+.yjd-rich-editor .custom-select-item-button {
+  padding: 8px 10px;
+}
+
+/* gentle entrance for popovers (respects reduced motion below) */
+.yjd-rich-editor .color-picker-popup.visible,
+.yjd-rich-editor .custom-select-popup.visible,
+.yjd-rich-editor .heading-select-popup.visible,
+.yjd-rich-editor .font-family-select-popup.visible,
+.yjd-rich-editor .line-height-select-popup.visible,
+.yjd-rich-editor .capitalization-select-popup.visible,
+.yjd-rich-editor .text-size-select-popup.visible,
+.yjd-rich-editor .link-popup.visible,
+.yjd-rich-editor .image-popup.visible,
+.yjd-rich-editor .video-popup.visible,
+.yjd-rich-editor .tag-popup.visible,
+.yjd-rich-editor .table-popup.visible,
+.yjd-rich-editor .text-align-picker-popup.visible,
+.yjd-rich-editor .yjd-find-replace.open {
+  animation: rte-pop-in 90ms ease-out;
+}
+@keyframes rte-pop-in {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* ---------- Inputs: minimal & light ---------- */
+.yjd-rich-editor .yjd-input,
+.yjd-rich-editor .yjd-select-input,
+.yjd-rich-editor .yjd-find-input {
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-sm);
+  background: var(--rte-bg);
+  color: var(--rte-ink);
+  font-size: 14px;
+}
+.yjd-rich-editor .yjd-input::placeholder,
+.yjd-rich-editor .yjd-select-input::placeholder,
+.yjd-rich-editor .yjd-find-input::placeholder {
+  color: var(--rte-muted);
+  opacity: 0.7;
+}
+.yjd-rich-editor .yjd-input:focus,
+.yjd-rich-editor .yjd-select-input:focus,
+.yjd-rich-editor .yjd-find-input:focus {
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+
+/* ---------- Buttons: minimal & light ---------- */
+.yjd-rich-editor .yjd-button-confirm,
+.yjd-rich-editor .yjd-button-cancel,
+.yjd-rich-editor .yjd-find-btn {
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: var(--rte-radius-sm);
+  box-shadow: none;
+  transition: background var(--rte-t), color var(--rte-t), border-color var(--rte-t);
+}
+.yjd-rich-editor .yjd-button-confirm {
+  background: var(--rte-accent);
+  border: 1px solid var(--rte-accent);
+  color: #fff;
+}
+.yjd-rich-editor .yjd-button-confirm:hover {
+  background: var(--rte-accent-ink);
+  border-color: var(--rte-accent-ink);
+}
+/* Cancel & secondary find buttons → quiet, text-like */
+.yjd-rich-editor .yjd-button-cancel {
+  background: transparent;
+  border: 1px solid var(--rte-border);
+  color: var(--rte-muted);
+}
+.yjd-rich-editor .yjd-button-cancel:hover {
+  background: var(--rte-chrome-2);
+  color: var(--rte-ink);
+}
+.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon) {
+  background: transparent;
+  border: 1px solid var(--rte-border);
+  color: var(--rte-ink);
+}
+.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon):hover {
+  background: var(--rte-chrome-2);
+}
+.yjd-rich-editor .yjd-find-btn.yjd-find-icon {
+  height: 32px;
+  width: 32px;
+  color: var(--rte-muted);
+  background: transparent;
+  border: 1px solid transparent;
+}
+.yjd-rich-editor .yjd-find-btn.yjd-find-icon:hover {
+  background: var(--rte-chrome-2);
+  color: var(--rte-ink);
+}
+
+/* ---------- Reduced motion ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .yjd-rich-editor .color-picker-popup.visible,
+  .yjd-rich-editor [class*="select-popup"].visible,
+  .yjd-rich-editor [class$="-popup"].visible,
+  .yjd-rich-editor .yjd-find-replace.open {
+    animation: none !important;
+  }
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.2 — outline icon set rendering
+   Icons are now stroke-based (Lucide-style). Render them as outlines and
+   neutralise the legacy fill-based rules above.
+   ===================================================================== */
+.yjd-rich-editor .icon svg {
+  width: auto !important;
+  height: 16px !important;
+  max-width: 20px;
+  display: block;
+  fill: none !important;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  overflow: visible;
+}
+/* outline paths never fill */
+.yjd-rich-editor .icon svg path,
+.yjd-rich-editor .icon svg line,
+.yjd-rich-editor .icon svg polyline,
+.yjd-rich-editor .icon svg rect {
+  fill: none !important;
+  stroke: currentColor;
+}
+/* solid accents (dots) keep their fill, no stroke */
+.yjd-rich-editor .icon svg [fill="currentColor"] {
+  fill: currentColor !important;
+  stroke: none !important;
+}
+
+/* quiet default colour, accent on active */
+.yjd-rich-editor .rich-editor-toolbar-btn .icon svg { color: #565b6b; }
+.yjd-rich-editor .rich-editor-toolbar-btn:hover .icon svg { color: var(--rte-ink); }
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg line,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg polyline,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg rect {
+  color: var(--rte-accent-ink) !important;
+  stroke: var(--rte-accent-ink) !important;
+  fill: none !important;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill="currentColor"] {
+  fill: var(--rte-accent-ink) !important;
+  stroke: none !important;
+}
+.yjd-rich-editor .block-toolbar-btn.active .icon svg,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
+  stroke: var(--rte-accent-ink) !important;
+  fill: none !important;
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.4 — sync the list-picker popover with the others
+   ===================================================================== */
+.yjd-rich-editor .list-picker-popup {
+  background: var(--rte-bg);
+  border: 1px solid var(--rte-border);
+  border-radius: var(--rte-radius-md);
+  box-shadow: var(--rte-shadow);
+  padding: 6px;
+}
+.yjd-rich-editor .list-picker-popup.visible {
+  animation: rte-pop-in 90ms ease-out;
+}
+.yjd-rich-editor .list-button-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.yjd-rich-editor .list-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--rte-radius-sm);
+  background: transparent;
+  color: #565b6b;
+  cursor: pointer;
+  transition: background var(--rte-t), color var(--rte-t);
+}
+.yjd-rich-editor .list-button:hover {
+  background: var(--rte-chrome-2);
+  color: var(--rte-ink);
+}
+.yjd-rich-editor .list-button.active {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+}
+.yjd-rich-editor .list-button svg {
+  width: auto !important;
+  height: 16px !important;
+  max-width: 20px;
+  fill: none !important;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.yjd-rich-editor .list-button svg [fill="currentColor"] {
+  fill: currentColor !important;
+  stroke: none !important;
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.5 — table-toolbar icons
+   These buttons inject the SVG directly (no .icon wrapper), so size/stroke
+   them here too. Outline icons only carry a viewBox, so without this the SVG
+   blows up to its default size and gets clipped (icons appeared "missing").
+   ===================================================================== */
+.yjd-rich-editor .table-toolbar-btn svg {
+  width: auto !important;
+  height: 16px !important;
+  max-width: 20px;
+  display: block;
+  fill: none !important;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.yjd-rich-editor .table-toolbar-btn svg [fill="currentColor"] {
+  fill: currentColor !important;
+  stroke: none !important;
+}
+.yjd-rich-editor .table-toolbar-btn { color: #565b6b; }
+.yjd-rich-editor .table-toolbar-btn:hover { color: var(--rte-ink); }
+
+/* =====================================================================
+   DESIGN SYSTEM v2.6 — final popover consistency pass
+   ===================================================================== */
+/* Text-align picker items: match the other dropdown lists */
+.yjd-rich-editor .align-button {
+  height: auto;
+  min-height: 32px;
+  padding: 6px 10px;
+  gap: 8px;
+  border-radius: var(--rte-radius-sm);
+  background: transparent;
+  color: var(--rte-ink);
+  transition: background var(--rte-t), color var(--rte-t);
+}
+.yjd-rich-editor .align-button:hover {
+  background: var(--rte-chrome-2);
+  border-color: transparent;
+}
+.yjd-rich-editor .align-button.active {
+  background: var(--rte-accent-weak);
+  color: var(--rte-accent-ink);
+  border-color: transparent;
+}
+.yjd-rich-editor .align-button svg {
+  width: auto !important;
+  height: 16px !important;
+  color: inherit;
+  fill: none !important;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.yjd-rich-editor .align-button.active svg { color: var(--rte-accent-ink); }
+
+/* Upload affordance icon (outline) → accent, matches the dashed accent button */
+.yjd-rich-editor .yjd-custom-upload-button svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: var(--rte-accent-ink);
+}
+
+/* keep align-picker labels on one line */
+.yjd-rich-editor .text-align-picker-popup { min-width: 168px; }
+.yjd-rich-editor .align-button { white-space: nowrap; }
+.yjd-rich-editor .align-button .label-text { white-space: nowrap; }
+
+/* =====================================================================
+   DESIGN SYSTEM v2.7 — responsive toolbar (no wrapping; overflow -> "more")
+   ===================================================================== */
+.yjd-rich-editor .rich-editor-toolbar-1 {
+  flex-wrap: nowrap !important;
+  overflow: hidden;
+}
+.yjd-rich-editor .rich-editor-toolbar-2 {
+  flex-wrap: wrap;
+  border-top: 1px solid var(--rte-border);
+}
+.yjd-rich-editor .toolbar-group,
+.yjd-rich-editor .rich-editor-toolbar-btn,
+.yjd-rich-editor .custom-select-button {
+  flex: 0 0 auto;
+}
+.yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
+  margin-left: 12px;
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.8 — remove the triangle pointer on floating toolbars
+   ===================================================================== */
+.yjd-rich-editor .block-toolbar-arrow,
+.yjd-rich-editor .table-toolbar-arrow {
+  display: none !important;
+}
+
+/* =====================================================================
+   DESIGN SYSTEM v2.9 — slash command menu (rendered on <body>, so unscoped)
+   ===================================================================== */
+.yjd-slash-menu {
+  position: absolute;
+  z-index: 2000;
+  min-width: 264px;
+  max-width: 320px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 6px;
+  background: #ffffff;
+  border: 1px solid #e9e9f1;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px -8px rgba(20, 24, 46, 0.20), 0 4px 10px -4px rgba(20, 24, 46, 0.10);
+  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  animation: yjd-slash-in 90ms ease-out;
+}
+@keyframes yjd-slash-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
+.yjd-slash-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  color: #20242f;
+}
+.yjd-slash-item:hover,
+.yjd-slash-item.active { background: #efedff; color: #5a48ee; }
+.yjd-slash-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 7px;
+  background: #f2f2f7;
+  color: inherit;
+}
+.yjd-slash-item.active .yjd-slash-icon { background: #ffffff; }
+.yjd-slash-icon svg {
+  width: auto;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.yjd-slash-icon svg [fill="currentColor"] { fill: currentColor; stroke: none; }
+.yjd-slash-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+.yjd-slash-label { font-weight: 500; }
+.yjd-slash-hint { font-size: 12px; color: #767c8e; }
+.yjd-slash-item.active .yjd-slash-hint { color: #8b7ff0; }
+@media (prefers-reduced-motion: reduce) { .yjd-slash-menu { animation: none; } }
+
+/* ── Colour button swatch (v2.10) ─────────────────────────────────────────
+   The text-colour and background-colour buttons carry a small bar that
+   reflects the colour currently applied at the caret. */
+.yjd-rich-editor .rich-editor-toolbar-btn.color-btn,
+.yjd-rich-editor .rich-editor-toolbar-btn.background-btn {
+  position: relative;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn .rte-swatch {
+  position: absolute;
+  left: 50%;
+  bottom: 5px;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--rte-ink, #20242f);
+  pointer-events: none;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+/* Background swatch defaults to a "no fill" look until a colour is chosen. */
+.yjd-rich-editor .rich-editor-toolbar-btn.background-btn .rte-swatch {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--rte-border, #e9e9f1);
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.background-btn.has-color .rte-swatch {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+/* Nudge the icon up slightly so the swatch bar has room. */
+.yjd-rich-editor .rich-editor-toolbar-btn.color-btn .icon,
+.yjd-rich-editor .rich-editor-toolbar-btn.background-btn .icon {
+  transform: translateY(-1px);
+}
+
+/* ── Inline link popup (v2.11) ────────────────────────────────────────────
+   Compact link input anchored right at the selected text. */
+.yjd-rich-editor .link-popup.link-popup--inline {
+  width: auto;
+  min-width: 320px;
+  max-width: min(92vw, 420px);
+  padding: 10px;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-row .yjd-input {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-apply {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 8px 16px;
+  margin: 0;
+}
+
+/* ── Inputs, selects & options — design polish (v2.12) ────────────────────── */
+
+/* Uniform, comfortable dropdown option rows (Heading / Font / Size / …). */
+.yjd-rich-editor .custom-select-item-button {
+  min-height: 34px;
+  padding: 6px 10px !important;
+  gap: 10px;
+  border-radius: var(--rte-radius-sm) !important;
+}
+.yjd-rich-editor .custom-select-item-button:hover {
+  background: var(--rte-accent-weak) !important;
+  color: var(--rte-accent-ink) !important;
+}
+.yjd-rich-editor .custom-select-item-button.current {
+  background: var(--rte-accent-weak) !important;
+  color: var(--rte-accent-ink) !important;
+  font-weight: 600;
+}
+/* Keep the size previews from breaking the row rhythm. */
+.yjd-rich-editor .heading-select-popup .custom-select-item-button,
+.yjd-rich-editor .font-family-select-popup .custom-select-item-button,
+.yjd-rich-editor .text-size-select-popup .custom-select-item-button {
+  line-height: 1.15;
+}
+
+/* Native <select> — make it look like the themed inputs, with a custom chevron
+   (the OS-default control was the loudest mismatch among the popups). */
+.yjd-rich-editor select,
+.yjd-rich-editor .yjd-select-input,
+.yjd-rich-editor .tag-type-select,
+.yjd-rich-editor .import-type-select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 36px 10px 12px;
+  font: 500 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--rte-ink);
+  background-color: var(--rte-bg);
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23767c8e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  border: 1px solid var(--rte-border-strong);
+  border-radius: var(--rte-radius-sm);
+  cursor: pointer;
+  transition: border-color var(--rte-t), box-shadow var(--rte-t);
+}
+.yjd-rich-editor select:hover,
+.yjd-rich-editor .yjd-select-input:hover,
+.yjd-rich-editor .tag-type-select:hover,
+.yjd-rich-editor .import-type-select:hover {
+  border-color: var(--rte-accent);
+}
+.yjd-rich-editor select:focus,
+.yjd-rich-editor .yjd-select-input:focus,
+.yjd-rich-editor .tag-type-select:focus,
+.yjd-rich-editor .import-type-select:focus {
+  outline: none;
+  border-color: var(--rte-accent);
+  box-shadow: 0 0 0 3px var(--rte-accent-ring);
+}
+
+/* Consistent text-input metrics across every popup. */
+.yjd-rich-editor .yjd-input,
+.yjd-rich-editor .yjd-find-input {
+  box-sizing: border-box;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* Table size picker — accent (not grey) on hover, matching the highlight. */
+.yjd-rich-editor .table-grid-cell:hover {
+  background: var(--rte-accent-weak) !important;
+  border-color: var(--rte-accent) !important;
+}
+
+/* ── Toolbar layout (v2.13) ───────────────────────────────────────────────
+   Keep icon groups packed tight on the left and push only "More" to the right
+   edge. This uses the full bar width (More is flush right) WITHOUT scattering
+   big gaps between every group — which looked empty on mobile / narrow bars. */
+.yjd-rich-editor .rich-editor-toolbar-1 {
+  justify-content: flex-start !important;
+}
+.yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
+  margin-left: auto !important;
+}
+
+/* ── Mobile toolbar: one horizontal-scroll row (v2.14) ────────────────────
+   Instead of wrapping every tool into a cramped multi-row "More" panel, mobile
+   shows a single row you swipe sideways — the pattern used by Google Docs,
+   Notion, etc. (The reflow JS keeps all groups in row 1 at this width.) */
+@media (max-width: 640px) {
+  .yjd-rich-editor .rich-editor-toolbar-1 {
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;            /* Firefox */
+    justify-content: flex-start !important;
+    padding: 6px 8px;
+    scroll-padding: 8px;
+  }
+  .yjd-rich-editor .rich-editor-toolbar-1::-webkit-scrollbar {
+    display: none;                    /* WebKit/Blink */
+  }
+  /* The overflow row + "More" button aren't used on mobile. */
+  .yjd-rich-editor .rich-editor-toolbar-2,
+  .yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
+    display: none !important;
+  }
+  /* Keep every group/button on one line and let the row scroll. */
+  .yjd-rich-editor .toolbar-group {
+    flex: 0 0 auto;
+  }
+  .yjd-rich-editor .toolbar-group + .toolbar-group {
+    margin-left: 8px;
+  }
+  .yjd-rich-editor .rich-editor-toolbar-btn,
+  .yjd-rich-editor .custom-select-button {
+    min-width: 32px;
+    height: 32px;
+    padding: 0 8px;
+    flex: 0 0 auto;
+  }
+  /* Selects keep their label readable (no truncation) — the row scrolls. */
+  .yjd-rich-editor .custom-select-button {
+    max-width: none;
+  }
+}
+
+/* Toolbar buttons hidden until usable (e.g. undo/redo before any history). */
+.yjd-rich-editor .rich-editor-toolbar-btn.rte-hidden { display: none !important; }
+
+/* ── First/last block margin reset (v2.15) ────────────────────────────────
+   The first block must sit exactly at the content origin (top padding) so the
+   caret/text aligns with the placeholder — on mobile, `p { margin: .8em 0 }`
+   was pushing the first line ~13px below the placeholder. */
+.yjd-rich-editor .rich-editor-area > :first-child { margin-top: 0 !important; }
+.yjd-rich-editor .rich-editor-area > :last-child { margin-bottom: 0 !important; }
+
+/* ── Align picker: icon-only, compact row (v2.16) ─────────────────────────
+   Labels removed (tooltip carries the name) → lay the 4 alignment icons out
+   as a tight horizontal row of square buttons instead of wide list rows. */
+.yjd-rich-editor .align-button-container {
+  flex-direction: row !important;
+  width: auto !important;
+  height: auto !important;
+  gap: 4px;
+}
+.yjd-rich-editor .align-button {
+  width: 34px !important;
+  min-height: 34px !important;
+  height: 34px !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  justify-content: center !important;
+}
+.yjd-rich-editor .text-align-picker-popup {
+  width: auto !important;
+}
+
+/* ── "More" overflow = one extra row, not a crammed wrap (v2.17) ───────────
+   The secondary toolbar stays hidden until "More" is pressed; when shown it's
+   a single tidy row (scrolls sideways if it ever exceeds the width) instead of
+   wrapping its groups into several stacked rows. */
+.yjd-rich-editor .rich-editor-toolbar-2 {
+  flex-wrap: nowrap !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.yjd-rich-editor .rich-editor-toolbar-2::-webkit-scrollbar { display: none; }
+.yjd-rich-editor .rich-editor-toolbar-2 .toolbar-group { flex: 0 0 auto; }
+
+/* ── Labelled selects (v2.18) ─────────────────────────────────────────────
+   A small header at the top of each dropdown + a leading icon on the trigger,
+   so it's clear what Paragraph / Font / Size / Line-height / Case control. */
+.yjd-rich-editor .custom-select-header {
+  padding: 8px 12px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--rte-muted);
+  border-bottom: 1px solid var(--rte-border);
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+.yjd-rich-editor .custom-select-button .select-lead-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rte-muted);
+  margin-right: 4px;
+}
+.yjd-rich-editor .custom-select-button .select-lead-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  stroke: currentColor;
+  fill: none;
+}
+
+
+/* ── Select trigger: keep value on one line (v2.20) ───────────────────────
+   Long values (e.g. "Times New Roman") must not wrap to a 2nd line and break
+   the button height — clamp to one line with an ellipsis; icon + chevron stay. */
+.yjd-rich-editor .custom-select-button {
+  white-space: nowrap;
+  overflow: hidden;
+}
+.yjd-rich-editor .custom-select-button .button-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.yjd-rich-editor .custom-select-button .select-lead-icon,
+.yjd-rich-editor .custom-select-button .dropdown-icon {
+  flex: 0 0 auto;
+}
+
+/* ── Align popover: match the other popovers (v2.21) ───────────────────────
+   It had asymmetric padding (bottom 0) + a one-off radius, so it looked out of
+   sync. Use the shared shell's symmetric padding + token radius. */
+.yjd-rich-editor .text-align-picker-popup {
+  padding: 6px !important;
+  border-radius: var(--rte-radius-md) !important;
+}
+.yjd-rich-editor .align-button-container {
+  padding: 0 !important;
+}
+
+/* ── A11y: statusbar text contrast (v2.22) ────────────────────────────────
+   --rte-muted (#767c8e) on the near-white statusbar was only 4.02:1; darken
+   the breadcrumb + word-count to meet WCAG AA (>=4.5:1). */
+.yjd-rich-editor .rich-editor-breadcrumb,
+.yjd-rich-editor .wordcount {
+  color: #5b6373;
+}
+
+/* ── Find & Replace: icon buttons (v2.23) ─────────────────────────────────
+   Center the SVG icons (prev/next/close) in the square nav buttons. */
+.yjd-rich-editor .yjd-find-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.yjd-rich-editor .yjd-find-icon .icon,
+.yjd-rich-editor .yjd-find-icon .icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+.yjd-rich-editor .yjd-find-icon .icon svg {
+  stroke: currentColor;
+  fill: none;
+}
+
+/* ── @mention token (v2.24) ───────────────────────────────────────────────
+   The atomic token inserted by the mention module. Styled the same in the
+   editor and in renderStatic() read-views so tagged names look identical. */
+.mention {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 4px;
+  background: #efedff;
+  color: #5a48ee;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.mention[data-trigger="#"] {
+  background: #e8f3ff;
+  color: #1f6feb;
+}
+
+/* ── @mention autocomplete menu (v2.24) ───────────────────────────────────
+   Mirrors the slash-menu shell. Appended to <body>, positioned at the caret. */
+.yjd-mention-menu {
+  position: absolute;
+  z-index: 2000;
+  min-width: 220px;
+  max-width: 320px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px;
+  background: #ffffff;
+  border: 1px solid #e9e9f1;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px -8px rgba(20, 24, 46, 0.20), 0 4px 10px -4px rgba(20, 24, 46, 0.10);
+  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  animation: yjd-slash-in 90ms ease-out;
+}
+.yjd-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  color: #20242f;
+}
+.yjd-mention-item:hover,
+.yjd-mention-item.active { background: #efedff; color: #5a48ee; }
+.yjd-mention-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex: 0 0 auto;
+  background: #f2f2f7;
+}
+.yjd-mention-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .yjd-mention-menu { animation: none; } }
+
+/* ── Static read-view (.yjd-content) (v2.24) ──────────────────────────────
+   renderStatic() tags its host with .yjd-content. These rules mirror the
+   editor's content typography so a saved post renders identically without an
+   editor instance. Kept self-contained (not scoped under .yjd-rich-editor). */
+.yjd-content {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #20242f;
+  word-wrap: break-word;
+}
+.yjd-content > :first-child { margin-top: 0; }
+.yjd-content > :last-child { margin-bottom: 0; }
+.yjd-content p { margin: 0 0 1em; }
+.yjd-content h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
+.yjd-content h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
+.yjd-content h3 { font-size: 1.25em; font-weight: bold; margin: 0.83em 0; }
+.yjd-content h4 { font-size: 1.1em; font-weight: bold; margin: 1em 0; }
+.yjd-content h5 { font-size: 1em; font-weight: bold; margin: 1.25em 0; }
+.yjd-content h6 { font-size: 0.875em; font-weight: bold; margin: 1.5em 0; color: #555; }
+.yjd-content ul, .yjd-content ol { margin: 0 0 1em 2em; padding: 0; }
+.yjd-content li { margin: 0.25em 0; }
+.yjd-content a { color: #2563eb; text-decoration: underline; }
+.yjd-content code {
+  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
+  background: #f1f2f3; padding: 2px 6px; border-radius: 4px;
+}
+.yjd-content pre {
+  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
+  background: #f1f2f3; padding: 12px 14px; border-radius: 6px;
+  margin: 1em 0; overflow-x: auto; white-space: pre;
+}
+.yjd-content pre code { background: none; padding: 0; }
+.yjd-content blockquote {
+  border-left: 4px solid #d1d5db; margin: 1em 0; padding: 4px 12px;
+  color: #555; font-style: italic; background: #f9fafb;
+}
+.yjd-content img { max-width: 100%; height: auto; border-radius: 4px; }
+.yjd-content hr { border: none; border-top: 1px solid #d1d5db; margin: 1.5em 0; }
+.yjd-content table {
+  border-collapse: collapse; width: 100%; margin: 1em 0;
+}
+.yjd-content table td, .yjd-content table th {
+  border: 1px solid #d1d5db; padding: 8px 10px; text-align: left;
+}