mossmd 0.8.1

package/dist/styles/inline-preview.css

@@ -0,0 +1,2116 @@
+/*
+ * @mossmd — inline live-preview styles.
+ *
+ * Every rule below sets font-size / weight / decoration purely by CSS
+ * class, and does NOT depend on cursor state. Line heights therefore
+ * stay constant whether the line is "active" (syntax tokens visible)
+ * or "inactive" (tokens hidden by the inline-preview extension's
+ * replace-decorations) — that's what eliminates the layout-shift
+ * problem from widget-replacement approaches.
+ *
+ * Vertical-rhythm rules use `padding` on .cm-line, not `margin`. CM6
+ * measures each line's bounding-box height for virtualization;
+ * padding is inside the box (measured), margin is outside (not
+ * measured), so only padding yields the reader's spacing without
+ * confusing CM6.
+ *
+ * Theming contract: every color / font / size token below reads from
+ * a `--moss-*` custom property with an inline fallback. The
+ * defaults target a dark background; override the prefixed vars on
+ * any ancestor of the editor to theme it for your app.
+ */
+
+@import './tokens.css';
+
+.cm-moss-icon {
+  display: block;
+  flex: 0 0 auto;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: visible;
+  color: inherit;
+  stroke: currentColor;
+  pointer-events: none;
+}
+
+/* Root container — fills its parent so the CM6 scroller can take over
+ * scrolling behavior. Previously relied on Tailwind `h-full w-full`
+ * applied in the React layer, which only worked for consumers who had
+ * Tailwind configured. Baking the sizing into the package means
+ * dropping the editor into any height-bounded parent just works. */
+.moss-cm-editor {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+/* Content container — constrain to a comfortable reading width. This
+ * is where the prose feel mostly comes from: line length in the
+ * 60–75ch range is what lets the eye sweep naturally. The full editor
+ * frame can still be wide (for search UI, sidebars, etc.) — only the
+ * text column is narrowed. */
+.moss-cm-editor .cm-content {
+  max-width: var(--moss-measure, 70ch);
+  margin-inline: auto;
+  padding-inline: 0.5rem;
+  font-family: var(--moss-font, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
+  font-size: var(--moss-body-size, 1.0625rem);
+  line-height: var(--moss-body-leading, 1.7);
+  color: var(--moss-fg, #dcddde);
+  text-wrap: pretty;
+}
+
+.cm-line.cm-moss-empty-line {
+  font-size: var(--moss-body-size, 1.0625rem);
+  line-height: 1.25;
+  min-height: calc(var(--moss-body-size, 1.0625rem) * var(--moss-body-leading, 1.7));
+  padding-top: max(0px, calc(var(--moss-body-size, 1.0625rem) * (var(--moss-body-leading, 1.7) - 1.25) / 2));
+  padding-bottom: max(0px, calc(var(--moss-body-size, 1.0625rem) * (var(--moss-body-leading, 1.7) - 1.25) / 2));
+}
+
+/* Heading lines. Padding-top (not margin-top) creates the rhythm so
+ * CM6's line-height measurement stays correct.
+ *
+ * These values are intentionally small (≤ 0.2em). Prior values
+ * (0.4em–0.7em) produced a tall visual strip above the heading's
+ * text that belongs to the heading's hit-box but looks identical to
+ * the empty separator line above it. Users would click the visual
+ * "blank space above the heading" and land on the heading by
+ * surprise. The empty markdown line before a heading (which almost
+ * every real doc has) supplies the rest of the rhythm naturally. */
+.cm-line.cm-moss-h1 {
+  font-size: 1.35em;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  padding-top: 0.15em;
+  padding-bottom: 0.1em;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-h2 {
+  font-size: 1.2em;
+  font-weight: 700;
+  line-height: 1.35;
+  padding-top: 0.15em;
+  padding-bottom: 0.1em;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-h3 {
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.4;
+  padding-top: 0.12em;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-h4 {
+  font-size: 1em;
+  font-weight: 600;
+  padding-top: 0.1em;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-h5 {
+  font-size: 0.95em;
+  font-weight: 600;
+  padding-top: 0.08em;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-h6 {
+  font-size: 0.9em;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  padding-top: 0.08em;
+  color: var(--moss-fg-muted, #888);
+}
+
+/* Blockquote lines — each line in the quote gets a left rail. Putting
+ * the rail on every line means the visual continues for multi-line
+ * quotes even though each line is an independent DOM element. */
+.cm-line.cm-moss-blockquote {
+  padding-left: 1rem;
+  border-left: 3px solid var(--moss-accent-soft, color-mix(in srgb, #7c3aed 72%, white 28%));
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-line.cm-moss-callout {
+  --moss-callout-accent: var(--moss-accent-bright, #a78bfa);
+  --moss-callout-bg: color-mix(in srgb, var(--moss-callout-accent) 10%, transparent 90%);
+  --moss-callout-border: color-mix(in srgb, var(--moss-callout-accent) 72%, var(--moss-border, #3d3d3d) 28%);
+  background: var(--moss-callout-bg);
+  border-left-color: var(--moss-callout-border);
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-line.cm-moss-callout-first {
+  border-top-right-radius: var(--moss-radius, 6px);
+}
+
+.cm-line.cm-moss-callout-last {
+  border-bottom-right-radius: var(--moss-radius, 6px);
+}
+
+.cm-line.cm-moss-callout-note,
+.cm-moss-callout-label-note {
+  --moss-callout-accent: #82aaff;
+}
+
+.cm-line.cm-moss-callout-info,
+.cm-line.cm-moss-callout-todo,
+.cm-moss-callout-label-info,
+.cm-moss-callout-label-todo {
+  --moss-callout-accent: #89ddff;
+}
+
+.cm-line.cm-moss-callout-tip,
+.cm-line.cm-moss-callout-success,
+.cm-moss-callout-label-tip,
+.cm-moss-callout-label-success {
+  --moss-callout-accent: #c3e88d;
+}
+
+.cm-line.cm-moss-callout-warning,
+.cm-moss-callout-label-warning {
+  --moss-callout-accent: #ffcb6b;
+}
+
+.cm-line.cm-moss-callout-important,
+.cm-moss-callout-label-important {
+  --moss-callout-accent: #c792ea;
+}
+
+.cm-line.cm-moss-callout-danger,
+.cm-line.cm-moss-callout-failure,
+.cm-line.cm-moss-callout-bug,
+.cm-line.cm-moss-callout-caution,
+.cm-moss-callout-label-danger,
+.cm-moss-callout-label-failure,
+.cm-moss-callout-label-bug,
+.cm-moss-callout-label-caution {
+  --moss-callout-accent: #f07178;
+}
+
+.cm-line.cm-moss-callout-question,
+.cm-line.cm-moss-callout-example,
+.cm-line.cm-moss-callout-abstract,
+.cm-moss-callout-label-question,
+.cm-moss-callout-label-example,
+.cm-moss-callout-label-abstract {
+  --moss-callout-accent: #c792ea;
+}
+
+.cm-line.cm-moss-callout-quote,
+.cm-moss-callout-label-quote {
+  --moss-callout-accent: var(--moss-fg-muted, #888);
+}
+
+.cm-moss-callout-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35em;
+  margin-right: 0.45em;
+  color: var(--moss-callout-accent, var(--moss-accent-bright, #a78bfa));
+  font-size: 0.78em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.cm-moss-callout-title {
+  font-weight: 650;
+  color: var(--moss-fg, #dcddde);
+}
+
+/* Fenced-code lines — subtle backdrop plus a left rail so the block
+ * reads as a contained unit. The rail is an *inset box-shadow*, not a
+ * border, so it adds no width and never perturbs the line-box geometry
+ * CM6 measures for virtualization (a real border would shift the
+ * padding math between active/inactive states). */
+.cm-line.cm-moss-fenced-code {
+  font-family: var(--moss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.92em;
+  position: relative;
+  background-color: color-mix(in srgb, var(--moss-code-bg, #2d2d2d) 86%, transparent 14%);
+  background-image:
+    radial-gradient(
+      circle at 1px 1px,
+      color-mix(in srgb, var(--moss-fg-faint, #666) 22%, transparent 78%) 1px,
+      transparent 1.1px
+    );
+  background-size: 14px 14px;
+  border-left: 1px solid color-mix(in srgb, var(--moss-border, #3d3d3d) 76%, transparent 24%);
+  border-right: 1px solid color-mix(in srgb, var(--moss-border, #3d3d3d) 76%, transparent 24%);
+  padding-left: 0.7rem;
+  padding-right: 2.4rem;
+}
+
+.cm-line.cm-moss-fenced-code-start {
+  border-top: 1px solid color-mix(in srgb, var(--moss-border, #3d3d3d) 76%, transparent 24%);
+  border-top-left-radius: var(--moss-radius, 6px);
+  border-top-right-radius: var(--moss-radius, 6px);
+  padding-top: 0.28rem;
+}
+
+.cm-line.cm-moss-fenced-code-end {
+  border-bottom: 1px solid color-mix(in srgb, var(--moss-border, #3d3d3d) 76%, transparent 24%);
+  border-bottom-left-radius: var(--moss-radius, 6px);
+  border-bottom-right-radius: var(--moss-radius, 6px);
+  padding-bottom: 0.28rem;
+}
+
+/* `drawSelection()` paints behind content, where the opaque code backdrop
+ * would cover it. A selection-only inline decoration mirrors the same token
+ * above the block background while leaving syntax-highlighted text on top. */
+.cm-moss-fenced-selection {
+  background-color: var(
+    --moss-selection-bg,
+    color-mix(in srgb, #7c3aed 28%, #1e1e1e 72%)
+  );
+}
+
+.cm-moss-code-copy {
+  position: absolute;
+  top: 0.15rem;
+  inset-inline-end: 0.15rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--moss-radius, 6px);
+  color: var(--moss-fg-muted, #888);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
+}
+
+.cm-line.cm-moss-fenced-code:hover .cm-moss-code-copy,
+.cm-moss-code-copy:focus-visible {
+  opacity: 1;
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+  border-color: var(--moss-border, #3d3d3d);
+}
+
+.cm-moss-code-copy.is-copied {
+  opacity: 1;
+  background: var(--moss-accent, #7c3aed);
+  color: #fff;
+  border-color: var(--moss-accent, #7c3aed);
+}
+
+.cm-moss-code-copy svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Inline content marks — applied on the text inside **…**, *…*, `…`,
+ * ~~…~~, [text](url). Styling only; no height changes. */
+.cm-moss-strong {
+  font-weight: 700;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-moss-em {
+  font-style: italic;
+}
+
+.cm-moss-inline-code {
+  font-family: var(--moss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.88em;
+  color: var(--moss-fg, #dcddde);
+  background: var(--moss-code-bg, color-mix(in srgb, #2d2d2d 88%, black 12%));
+  border-radius: 0.35rem;
+  padding: 0.08em 0.35em;
+  word-break: break-word;
+}
+
+.cm-moss-strike {
+  text-decoration: line-through;
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-moss-highlight {
+  background: color-mix(in srgb, var(--moss-accent-bright, #a78bfa) 20%, transparent 80%);
+  border-radius: 0.2em;
+  color: var(--moss-fg, #dcddde);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+/* Delimiter characters for emphasis marks we supplemented manually
+ * (see `supplementMidTypingEmphasis` in inline-preview.ts). Each
+ * class mirrors what an `EmphasisMark` token would pick up through
+ * syntax highlighting when lezer does parse the pattern: faint
+ * color from `processingInstruction`, plus the parent scope's
+ * weight / style / decoration so the delimiter glyph keeps the
+ * same metrics whether lezer recognized the emphasis or not.
+ * Without the matching weight / style, `**` would visibly change
+ * width as the user types through a trailing space. */
+.cm-moss-strong-mark {
+  color: var(--moss-fg-faint, #666);
+  font-weight: 700;
+}
+
+.cm-moss-em-mark {
+  color: var(--moss-fg-faint, #666);
+  font-style: italic;
+}
+
+.cm-moss-strike-mark {
+  color: var(--moss-fg-faint, #666);
+  text-decoration: line-through;
+}
+
+.cm-moss-highlight-mark {
+  color: var(--moss-fg-faint, #666);
+  background: transparent;
+}
+
+.cm-moss-link {
+  color: var(--moss-link, #818cf8);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+  /* No pointer cursor on the link text — the text is editable like
+   * any other content. The pointer cursor is scoped to the trailing
+   * icon below, which is the actual open-in-new-tab affordance. */
+}
+
+.cm-moss-link:hover {
+  color: var(--moss-link-hover, #a5b4fc);
+}
+
+/* External-link icon. In prose it's a `::after` pseudo-element; inside
+ * table cells it's a real `.cm-moss-link-icon` element (a pseudo can't
+ * receive a click, so the in-cell icon wouldn't open the link). Both
+ * share the masked-SVG visual so the color tracks the link color via
+ * `background-color`. */
+.cm-moss-link::after,
+.cm-moss-link-icon {
+  display: inline-block;
+  width: 0.78em;
+  height: 0.78em;
+  margin-left: 0.32em;
+  vertical-align: -0.02em;
+  cursor: pointer;
+  background-color: color-mix(in srgb, var(--moss-link, #818cf8) 82%, white 18%);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  opacity: 0.9;
+}
+
+.cm-moss-link::after {
+  content: "";
+}
+
+/* The real in-cell icon must be clickable but never selectable / part
+ * of caret navigation. */
+.cm-moss-link-icon {
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* In cells the icon is a real element — suppress the pseudo so the icon
+ * doesn't render twice. */
+.cm-moss-table-cell-source .cm-moss-link::after {
+  content: none;
+}
+
+.cm-moss-link:hover::after,
+.cm-moss-link-icon:hover {
+  background-color: color-mix(in srgb, var(--moss-link-hover, #a5b4fc) 84%, white 16%);
+  opacity: 1;
+}
+
+.cm-moss-wiki-link {
+  color: var(--moss-link, #818cf8);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+  cursor: pointer;
+}
+
+.cm-moss-wiki-link:hover {
+  color: var(--moss-link-hover, #a5b4fc);
+}
+
+.cm-moss-wiki-link-missing,
+.cm-moss-wiki-link-unresolved {
+  color: var(--moss-fg-muted, #888);
+  text-decoration-style: dotted;
+}
+
+.cm-moss-wiki-link-loading {
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-line .cm-moss-hr-source,
+.cm-line .cm-moss-hr-source * {
+  font-weight: 400;
+  font-style: normal;
+  text-decoration: none;
+  color: inherit;
+}
+
+.cm-moss-hr-widget {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 1.7em;
+  gap: 0.6em;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+.cm-moss-hr-segment {
+  flex: 1 1 auto;
+  min-width: 0;
+  border-top: 1px solid var(--moss-border, #3d3d3d);
+}
+
+.cm-moss-hr-widget-wavy .cm-moss-hr-segment {
+  border-top: none;
+  height: 8px;
+  background-color: var(--moss-border, #3d3d3d);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C4 0.5 12 0.5 16 4 S28 7.5 32 4' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C4 0.5 12 0.5 16 4 S28 7.5 32 4' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 32px 8px;
+  -webkit-mask-size: 32px 8px;
+}
+
+.cm-moss-hr-symbol {
+  flex: 0 1 auto;
+  min-width: 1.45em;
+  max-width: min(12em, calc(100% - 2em));
+  color: var(--moss-fg-muted, #888);
+  font-size: 0.95em;
+  line-height: 1.35;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The source of a standalone image is replaced visually by its block
+ * widget. Keep the source line for CM6 position mapping, but remove its
+ * line box so it does not read as an empty row above the image. */
+.cm-line.cm-moss-image-source-line {
+  height: 0;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 0;
+}
+
+/* Image block widget — rendered below the source line containing
+ * the `![alt](url)` markdown. Natural image size up to the editor's
+ * content width (`max-width: 100%` of .cm-content, which is the
+ * reading-width column). Smaller images render at their own size,
+ * left-aligned. Aspect ratio preserved by `height: auto`. */
+.cm-moss-image {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  padding: 0.35em 0;
+}
+
+.cm-moss-image-frame {
+  position: relative;
+  flex: 0 0 auto;
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+  line-height: 0;
+}
+
+/* Remote images have no intrinsic height until they finish loading. Keep
+ * their widget measurable so inserting an image never creates a blank,
+ * zero-height block that shifts the document when the request completes. */
+.cm-moss-image-frame-placeholder {
+  width: min(28rem, 100%);
+  min-height: 10rem;
+  aspect-ratio: 16 / 9;
+  border-radius: 0.4em;
+  background: var(--moss-bg-surface, rgba(127, 127, 127, 0.08));
+  overflow: hidden;
+}
+
+.cm-moss-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-moss-image-placeholder svg {
+  opacity: 0.72;
+}
+
+.cm-moss-image-frame-placeholder > img {
+  opacity: 0;
+}
+
+/* Once a width has been chosen explicitly, keep the image usable while
+ * preserving the responsive percentage in the source. The `min()` keeps
+ * the frame from overflowing a narrow phone viewport. */
+.cm-moss-image-frame-sized {
+  min-width: min(160px, 100%);
+}
+
+.cm-moss-image img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.4em;
+}
+
+/* The source line is kept at zero height for position mapping. When its
+ * entire range is selected through the rendered widget, suppress CM6's
+ * caret layer so the caret cannot appear at the line's top-left corner. */
+.moss-cm-editor.moss-cm-image-selection-active .cm-cursorLayer {
+  visibility: hidden;
+}
+
+.cm-moss-image.cm-moss-image-selected .cm-moss-image-frame {
+  outline: 1px solid color-mix(
+    in srgb,
+    var(--moss-accent, #7c3aed) 52%,
+    var(--moss-border, #3d3d3d) 48%
+  );
+  outline-offset: 2px;
+  border-radius: 0.45em;
+}
+
+/* The edit affordance is overlaid on the image so it never adds a row to
+ * the document or changes the block widget's measured height. It appears
+ * on hover and keyboard focus, while the image itself remains a quiet
+ * reading surface. */
+.cm-moss-image-edit {
+  position: absolute;
+  top: 0.7em;
+  right: 0.7em;
+  z-index: 1;
+  width: 2em;
+  height: 2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.45));
+  border-radius: 0.35em;
+  background: var(--moss-bg-panel, #252525);
+  color: var(--moss-fg, #dcddde);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease, background-color 0.12s ease;
+}
+
+.cm-moss-image-frame:hover .cm-moss-image-edit,
+.cm-moss-image-frame:focus-within .cm-moss-image-edit,
+.cm-moss-image-frame:hover .cm-moss-image-preview,
+.cm-moss-image-frame:focus-within .cm-moss-image-preview,
+.cm-moss-image-frame:hover .cm-moss-image-resize,
+.cm-moss-image-frame:focus-within .cm-moss-image-resize {
+  opacity: 1;
+}
+
+.cm-moss-image-edit:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+}
+
+.cm-moss-image-preview {
+  position: absolute;
+  top: 0.7em;
+  left: 0.7em;
+  z-index: 1;
+  width: 2em;
+  height: 2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.45));
+  border-radius: 0.35em;
+  background: var(--moss-bg-panel, #252525);
+  color: var(--moss-fg, #dcddde);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease, background-color 0.12s ease;
+}
+
+.cm-moss-image-preview:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+}
+
+.cm-moss-image-resize {
+  position: absolute;
+  right: 0.55em;
+  bottom: 0.55em;
+  z-index: 1;
+  width: 2em;
+  height: 2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.45));
+  border-radius: 0.35em;
+  background: var(--moss-bg-panel, #252525);
+  color: var(--moss-fg, #dcddde);
+  cursor: nwse-resize;
+  opacity: 0;
+  touch-action: none;
+  transition: opacity 0.12s ease, background-color 0.12s ease;
+}
+
+.cm-moss-image-resize:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+}
+
+/* Maximize2 is rotated so its diagonal reads from the image's top-left
+ * toward the bottom-right resize handle. */
+.cm-moss-image-resize svg {
+  transform: rotate(90deg);
+}
+
+@media (hover: none), (pointer: coarse) {
+  .cm-moss-image-edit,
+  .cm-moss-image-preview,
+  .cm-moss-image-resize {
+    width: 2.75rem;
+    height: 2.75rem;
+    opacity: 1;
+  }
+}
+
+.cm-moss-image-edit:focus-visible,
+.cm-moss-image-preview:focus-visible,
+.cm-moss-image-editor-button:focus-visible,
+.cm-moss-image-editor input:focus-visible {
+  outline: 2px solid var(--moss-accent, #7c3aed);
+  outline-offset: 2px;
+}
+
+/* This editor floats over the rendered image. Absolute positioning keeps
+ * opening it out of the CodeMirror heightmap and document flow. */
+.cm-moss-image-editor {
+  position: absolute;
+  top: 0.7em;
+  right: 0.7em;
+  z-index: 2;
+  box-sizing: border-box;
+  width: min(22rem, calc(100% - 1rem));
+  display: grid;
+  gap: 0.55em;
+  padding: 0.8em;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.38));
+  border-radius: 0.5em;
+  background: var(--moss-bg-panel, #252525);
+  box-shadow: 0 0.7em 2em rgba(0, 0, 0, 0.28);
+}
+
+.cm-moss-image-editor-title {
+  color: var(--moss-fg, #dcddde);
+  font-size: 0.9em;
+  font-weight: 650;
+}
+
+.cm-moss-image-editor-field {
+  display: grid;
+  gap: 0.25em;
+  color: var(--moss-fg-muted, #9a9da4);
+  font-size: 0.72em;
+}
+
+.cm-moss-image-editor input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 0.45em 0.55em;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.34));
+  border-radius: 0.3em;
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+  font: inherit;
+  font-size: 1.05em;
+}
+
+.cm-moss-image-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.4em;
+  padding-top: 0.15em;
+}
+
+.cm-moss-image-editor-button {
+  width: 1.9em;
+  height: 1.9em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.34));
+  border-radius: 0.35em;
+  background: transparent;
+  color: var(--moss-fg-muted, #9a9da4);
+  cursor: pointer;
+}
+
+.cm-moss-image-editor-button:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-moss-image-editor-button.is-primary {
+  border-color: var(--moss-accent, #7c3aed);
+  background: var(--moss-accent, #7c3aed);
+  color: #ffffff;
+}
+
+.cm-moss-image-editor-error {
+  min-height: 1.1em;
+  color: var(--moss-hl-invalid, #ff5370);
+  font-size: 0.72em;
+}
+
+/* The preview is mounted on document.body, outside CodeMirror's scroller,
+ * so a large image is never clipped by the editor viewport. */
+.cm-moss-image-preview-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5vh 5vw;
+  background: rgba(0, 0, 0, 0.68);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  cursor: zoom-out;
+}
+
+.cm-moss-image-preview-dialog {
+  position: relative;
+  display: flex;
+  max-width: 96vw;
+  max-height: 90vh;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.65rem;
+  cursor: default;
+}
+
+.cm-moss-image-preview-dialog > img {
+  display: block;
+  max-width: 90vw;
+  max-height: 82vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.35rem;
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
+}
+
+.cm-moss-image-preview-close {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+  z-index: 1;
+  width: 1.9rem;
+  height: 1.9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, white 32%, transparent);
+  border-radius: var(--moss-radius, 6px);
+  background: color-mix(in srgb, var(--moss-bg-panel, #252525) 82%, transparent);
+  color: var(--moss-fg, #dcddde);
+  cursor: pointer;
+  opacity: 0.9;
+  transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
+}
+
+.cm-moss-image-preview-close:hover {
+  border-color: color-mix(in srgb, white 52%, transparent);
+  background: color-mix(in srgb, var(--moss-bg-surface, #2d2d2d) 92%, transparent);
+  opacity: 1;
+}
+
+.cm-moss-image-preview-caption {
+  max-width: min(90vw, 70ch);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.cm-moss-image-preview-close:focus-visible {
+  outline: 2px solid var(--moss-accent, #a78bfa);
+  outline-offset: 2px;
+}
+
+/* When a caption is present, switch the wrap to a column so the
+ * figcaption stacks below the image instead of beside it. */
+.cm-moss-image.cm-moss-image-has-caption {
+  flex-direction: column;
+  align-items: center;
+}
+
+.cm-moss-image-caption {
+  margin: 0.4em 0 0;
+  text-align: center;
+  font-size: 0.85em;
+  color: var(--moss-fg-muted, #888);
+  max-width: 100%;
+}
+
+/* ------------------------------------------------------------------ */
+/* File link block.
+ *
+ * Same treatment as image blocks — rendered below a source line that
+ * contains a standalone file link `[label](url)`. Layout mirrors the
+ * upload-progress widget so the flow "upload widget → file-block
+ * widget" looks like a single continuous transition rather than a
+ * pop-and-replace. Left: preview (thumb for image URLs, glyph+ext
+ * badge for generic files). Right: name + info row. */
+.cm-moss-file-block {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.85em;
+  padding: 0.6em 3.5em 0.6em 0.9em;
+  margin: 0.25em 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.22));
+  border-radius: 0.55em;
+  background: var(--moss-file-block-bg, rgba(127, 127, 127, 0.06));
+  transition: background-color 0.12s ease, border-color 0.12s ease;
+}
+
+.cm-moss-file-block:hover {
+  background: var(--moss-file-block-hover-bg, rgba(127, 127, 127, 0.1));
+  border-color: var(--moss-border, rgba(127, 127, 127, 0.35));
+}
+
+.cm-moss-file-block-preview {
+  flex: 0 0 auto;
+  width: 4.2em;
+  height: 4.2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.5em;
+  background: var(--moss-file-block-preview-bg, rgba(127, 127, 127, 0.12));
+}
+
+.cm-moss-file-block-preview.cm-moss-file-block-preview-image {
+  background: transparent;
+}
+
+.cm-moss-file-block-preview-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.cm-moss-file-block-preview.cm-moss-file-block-preview-file {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.18em;
+  color: var(--moss-fg-muted, #9a9da4);
+}
+
+.cm-moss-file-block-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.cm-moss-file-block-glyph svg {
+  width: 2.6em;
+  height: 2.6em;
+}
+
+.cm-moss-file-block-ext {
+  font-size: 0.6em;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  padding: 0.2em 0.45em;
+  border-radius: 0.3em;
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+  text-transform: uppercase;
+}
+
+.cm-moss-file-block-meta {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+}
+
+.cm-moss-file-block-name {
+  font-size: 0.95em;
+  font-weight: 600;
+  color: var(--moss-fg, #dcddde);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cm-moss-file-block-info {
+  font-size: 0.8em;
+  color: var(--moss-fg-muted, #888);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Keep file actions attached to the card itself. They are absolutely
+ * positioned so they never add width or height to the block widget. */
+.cm-moss-file-block-actions {
+  position: absolute;
+  top: 50%;
+  right: 0.7em;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.cm-moss-file-block-download,
+.cm-moss-file-block-delete {
+  width: 2em;
+  height: 2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.45));
+  border-radius: 0.35em;
+  background: var(--moss-bg-panel, #252525);
+  color: var(--moss-fg, #dcddde);
+  cursor: pointer;
+}
+
+.cm-moss-file-block:hover .cm-moss-file-block-actions,
+.cm-moss-file-block:focus-within .cm-moss-file-block-actions {
+  opacity: 1;
+}
+
+.cm-moss-file-block-download:hover,
+.cm-moss-file-block-delete:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+}
+
+@media (hover: none), (pointer: coarse) {
+  .cm-moss-file-block-actions {
+    opacity: 1;
+  }
+
+  .cm-moss-file-block-download,
+  .cm-moss-file-block-delete {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+.cm-moss-file-block-download:focus-visible,
+.cm-moss-file-block-delete:focus-visible {
+  outline: 2px solid var(--moss-accent, #7c3aed);
+  outline-offset: 2px;
+}
+
+/* The source line remains in the document for position mapping, but its
+ * line box is removed so the rendered file card is the only visible block. */
+.cm-line.cm-moss-file-block-source-line {
+  height: 0;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Upload progress block.
+ *
+ * Rendered by mossUploadBlocks while an upload is in flight. Layout:
+ * preview on the left (image thumb or file icon), body on the right
+ * with filename + size, a progress bar, status text, and (on error)
+ * retry / cancel buttons. Matches the image block's padding so the
+ * transition from "uploading" → final markdown + image widget is
+ * visually smooth.
+ * ------------------------------------------------------------------ */
+.cm-moss-upload {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+  padding: 0.5em 0.75em;
+  margin: 0.2em 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.18));
+  border-radius: 0.5em;
+  background: var(--moss-upload-bg, rgba(127, 127, 127, 0.06));
+}
+
+.cm-moss-upload-preview {
+  flex: 0 0 auto;
+  width: 3.5em;
+  height: 3.5em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.4em;
+  background: var(--moss-bg-surface, #2d2d2d);
+}
+
+.cm-moss-upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.cm-moss-upload-preview.cm-moss-upload-preview-file {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.18em;
+  color: var(--moss-fg-muted, #9a9da4);
+}
+
+.cm-moss-upload-file-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.cm-moss-upload-file-glyph svg {
+  width: 2.2em;
+  height: 2.2em;
+}
+
+.cm-moss-upload-ext {
+  font-size: 0.62em;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  padding: 0.18em 0.4em;
+  border-radius: 0.25em;
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+  text-transform: uppercase;
+}
+
+.cm-moss-upload-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+}
+
+.cm-moss-upload-meta {
+  font-size: 0.85em;
+  color: var(--moss-fg, #dcddde);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cm-moss-upload-progress {
+  width: 100%;
+  height: 0.35em;
+  border-radius: 999px;
+  background: var(--moss-bg-surface, #2d2d2d);
+  overflow: hidden;
+}
+
+.cm-moss-upload-bar {
+  height: 100%;
+  width: 0%;
+  border-radius: 999px;
+  background: var(--moss-accent, #4facfe);
+  transition: width 0.15s ease;
+}
+
+.cm-moss-upload-status {
+  font-size: 0.8em;
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-moss-upload-status.is-error {
+  color: var(--moss-hl-invalid, #ff5370);
+}
+
+.cm-moss-upload-actions {
+  display: inline-flex;
+  gap: 0.4em;
+}
+
+.cm-moss-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75em;
+  height: 1.75em;
+  padding: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.2));
+  border-radius: 0.35em;
+  background: transparent;
+  color: var(--moss-fg-muted, #888);
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.cm-moss-upload-btn:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-moss-upload-btn svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* ------------------------------------------------------------------ */
+/* Slash-commands side `+` button + popup tweaks.
+ *
+ * The `+` button is rendered by mossSlashCommands (sideButton: true)
+ * as a non-block widget at line.from when the cursor sits on an empty
+ * line. It is visually pulled into the left gutter without adding a row.
+ *
+ * The autocomplete popup keeps the editor's panel tokens but gets its own
+ * compact menu geometry: content-sized width, comfortable hit rows, and a
+ * little more separation from the document below it.
+ * ------------------------------------------------------------------- */
+.moss-cm-editor .cm-line {
+  position: relative;
+}
+
+.cm-moss-side-plus {
+  position: absolute;
+  left: -2.8em;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.7em;
+  height: 1.7em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--moss-border, rgba(127, 127, 127, 0.45));
+  border-radius: 6px;
+  background: var(--moss-side-plus-bg, rgba(127, 127, 127, 0.22));
+  color: var(--moss-fg-muted, #b4b8bf);
+  font: inherit;
+  font-size: 1em;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  opacity: 1;
+  transition: opacity 0.12s ease, background-color 0.12s ease,
+    color 0.12s ease, border-color 0.12s ease;
+}
+
+.cm-moss-side-plus svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+
+/* Subtle hover: a muted neutral wash + slightly stronger border.
+ * No accent color — keeps the affordance quiet but discoverable. */
+.cm-moss-side-plus:hover,
+.cm-moss-side-plus:focus-visible {
+  background: var(--moss-bg-surface, #2d2d2d);
+  border-color: var(--moss-border, rgba(127, 127, 127, 0.7));
+  color: var(--moss-fg, #dcddde);
+  outline: none;
+}
+
+.moss-cm-editor .cm-tooltip.cm-tooltip-autocomplete {
+  box-sizing: border-box;
+  width: min(11rem, calc(100vw - 1rem));
+  min-width: 0;
+  max-width: min(16rem, calc(100vw - 1rem));
+  font-family: var(--moss-font, system-ui, sans-serif);
+  font-size: 0.875rem;
+  padding: 0.28rem;
+  border-radius: var(--moss-radius, 6px);
+  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.26);
+}
+
+.moss-cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
+  min-width: 0;
+  width: 100%;
+  max-height: min(17rem, 40vh);
+  margin: 0;
+  padding: 0;
+}
+
+.moss-cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  min-width: 0;
+  min-height: 1.95rem;
+  padding: 0.34rem 0.5rem;
+  border-radius: 0.35rem;
+  line-height: 1.25;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.moss-cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li:hover {
+  background: color-mix(
+    in srgb,
+    var(--moss-accent, #7c3aed) 10%,
+    var(--moss-bg-surface, #2d2d2d) 90%
+  );
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-tooltip-autocomplete li[aria-selected] {
+  background: var(
+    --moss-accent-bg,
+    color-mix(in srgb, var(--moss-accent, #7c3aed) 16%, transparent)
+  );
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-tooltip-autocomplete .cm-completionLabel {
+  display: block;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* "icon + title" layout: drop the secondary detail text and render a
+ * leading icon per command kind. Slash command renderers insert the
+ * actual SVG node; CSS only owns sizing and layout. */
+.cm-tooltip-autocomplete .cm-completionDetail {
+  display: none;
+}
+
+/* Override CM6's defaults: it sets `opacity: .6` (too faint for our
+ * stroke icons), `box-sizing: content-box` + `padding-right: .6em`
+ * (width/height then exclude padding, so the SVG gets clipped to a
+ * sub-em box and reads as nearly invisible).
+ * Switch to border-box, drop the right padding (we use margin
+ * instead), and pin opacity to 1 so the icon is the visual anchor. */
+.cm-tooltip-autocomplete .cm-completionIcon {
+  width: 1.15em;
+  min-width: 1.15em;
+  height: 1.15em;
+  flex: 0 0 1.15em;
+  margin-right: 0;
+  padding: 0;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  opacity: 1;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.cm-tooltip-autocomplete .cm-completionIcon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+}
+
+.cm-tooltip-autocomplete .cm-completionIcon::after {
+  content: none;
+}
+
+/* Hide the popup's scrollbar without disabling scroll. CM6's list
+ * is a <ul> with its own max-height + overflow:auto. */
+.cm-tooltip-autocomplete ul,
+.cm-tooltip-autocomplete .cm-completionList {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.cm-tooltip-autocomplete ul::-webkit-scrollbar,
+.cm-tooltip-autocomplete .cm-completionList::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Bullet widget — replaces the raw `-` / `*` marker on bullet-list
+ * items. Matches the visual weight of a real list marker while
+ * staying in the muted-secondary color so the item text dominates. */
+/* Shared marker alcove — forces bullet, task checkbox, and
+ * ordered-list number into the same fixed horizontal width so the
+ * inline-preview line padding / text-indent math is stable across
+ * list kinds. Width here must match LIST_ALCOVE_EM in
+ * inline-preview.ts. Without the fixed width, wrapped-line
+ * indent lands in different places for each kind because the raw
+ * marker widths differ per font. */
+.cm-moss-list-marker {
+  display: inline-block;
+  width: 0.9em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+
+/* Active lines keep the source separator space so the caret can map to the
+ * real Markdown position. Let that space provide the separation instead of
+ * adding the alcove margin a second time. */
+.cm-moss-list-marker-active {
+  margin-right: 0;
+}
+
+/* Ordered markers keep their real source separator in the DOM on every
+ * line, so their alcove must not add a second separator via margin. */
+.cm-moss-ordered-marker {
+  margin-right: 0;
+}
+
+/* List heads stay visually distinct from ordinary prose while the raw
+ * Markdown remains the source of truth. Consumers can tune these tokens
+ * independently without changing the list layout. */
+.cm-line .cm-moss-ordered-marker,
+.cm-line .cm-moss-ordered-marker * {
+  color: var(--moss-list-marker, var(--moss-list-ordered, var(--moss-accent-bright, #a78bfa)));
+  font-weight: 600;
+}
+
+.cm-moss-unordered-marker {
+  color: var(--moss-list-marker, var(--moss-list-unordered, var(--moss-fg-muted, #888)));
+}
+
+/* Bullet-only visual styling on top of the shared alcove. */
+.cm-moss-bullet {
+  color: var(--moss-fg-muted, #888);
+  font-weight: 700;
+}
+
+/* GFM task-list checkbox widget — replaces `[ ]` / `[x]` in a task
+ * item. Styled as a small custom circle rather than the platform's
+ * native checkbox so it reads consistently across browsers.
+ * Width+margin still total 1.2em to match ALCOVE_EM in
+ * inline-preview.ts. The trailing space after `[ ]` in the source is
+ * swallowed by the replace decoration. */
+input.cm-moss-task-checkbox {
+  width: 1.05em;
+  height: 1.05em;
+  margin: 0 0.31em 0 -0.16em;
+  font-size: inherit;
+  vertical-align: 0.1em;
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  border: 1px solid var(--moss-fg-muted, #888);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  display: inline-grid;
+  place-content: center;
+  transform: translateY(-0.04em);
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+input.cm-moss-task-checkbox::after {
+  content: "";
+  width: 0.26em;
+  height: 0.5em;
+  border-right: 0.12em solid #ffffff;
+  border-bottom: 0.12em solid #ffffff;
+  transform: rotate(45deg) translate(-0.03em, -0.04em);
+  opacity: 0;
+}
+
+input.cm-moss-task-checkbox:checked {
+  background: var(--moss-accent, #7c3aed);
+  border-color: var(--moss-accent, #7c3aed);
+}
+
+input.cm-moss-task-checkbox:checked::after {
+  opacity: 1;
+}
+
+input.cm-moss-task-checkbox:hover,
+.cm-moss-task-status:hover {
+  border-color: var(--moss-accent-bright, var(--moss-accent, #7c3aed));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss-accent, #7c3aed) 16%, transparent 84%);
+}
+
+input.cm-moss-task-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--moss-accent, #7c3aed) 28%, transparent 72%);
+}
+
+/* Forced-colors mode removes box shadows, so retain a visible keyboard
+ * focus indicator using system colors instead. */
+@media (forced-colors: active) {
+  input.cm-moss-task-checkbox:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+}
+
+/* Custom task statuses use their assigned Lucide icon in the same marker
+ * alcove. A button keeps the status keyboard and pointer accessible without
+ * pretending that every state is a binary checkbox. */
+.cm-moss-task-status {
+  width: 1.05em;
+  height: 1.05em;
+  margin: 0 0.31em 0 -0.16em;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-sizing: border-box;
+  color: var(--moss-fg-muted, #888);
+  cursor: pointer;
+  font: inherit;
+  font-size: 1em;
+  line-height: 1;
+  vertical-align: -0.08em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  place-content: center;
+  border-radius: 50%;
+  transition: color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.cm-moss-task-status-empty {
+  border: 1px solid var(--moss-fg-muted, #888);
+}
+
+.cm-moss-task-status svg {
+  width: 1em;
+  height: 1em;
+  stroke-width: 2.5;
+}
+
+.cm-moss-task-status:hover {
+  color: var(--moss-accent-bright, var(--moss-accent, #7c3aed));
+}
+
+.cm-moss-task-status:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--moss-accent, #7c3aed) 42%, transparent 58%);
+  outline-offset: 2px;
+}
+
+/* Whole-line strike for completed task items. */
+.cm-line.cm-moss-task-done {
+  color: var(--moss-fg-faint, #666);
+  text-decoration: line-through;
+}
+
+/* WYSIWYG table block widget — emitted by `mossTables()` in
+ * table-widget.ts. The Table node's source range is fully replaced
+ * by this rendered `<table>`; users interact with cells directly
+ * via `contenteditable`, with Tab / Shift-Tab moving focus between
+ * cells and Tab past the last cell appending a new row.
+ *
+ * Horizontal scroll on the wrapper so wide tables (common in
+ * RSS-ingested content) don't squish their cells to unreadable
+ * widths on narrow viewports. The inner `<table>` uses
+ * `width: max-content` + `min-width: 100%` so it fills the reading
+ * column when narrow and grows past it (triggering the scrollbar)
+ * when content needs more room. `overscroll-behavior-x: contain`
+ * keeps a horizontal flick from bubbling up and scrolling the
+ * whole editor sideways. */
+/* Table wrapper — horizontal scroll contained here so wide
+ * tables don't push the editor's content box wider than the
+ * viewport. Paired with `.cm-content { min-width: 0 }` in the
+ * theme, which is what actually keeps the content box pinned to
+ * parent width (CM6's base theme sets `min-width: max-content`,
+ * which otherwise lets a wide child expand the whole scroller).
+ * Without that pairing no amount of table-level overflow
+ * constraints would hold — the symptom was the editor briefly
+ * going wider than the viewport on mobile when a wide table
+ * entered the rendered viewport. */
+.cm-moss-table {
+  /* Use padding, not margin, for vertical rhythm around the table.
+   * CM6's heightmap measures block-widget heights via
+   * `getBoundingClientRect`, which EXCLUDES margin but INCLUDES
+   * padding. A `margin: 0.5em 0` here meant the heightmap allocated
+   * less height than the DOM layout flow actually consumed — 1em
+   * (~17px) less on typical font sizes. That drift shifted every
+   * line below the table in CM6's heightmap vs the DOM, so clicks
+   * at a visual Y were routed to the doc line BELOW the one
+   * visually targeted. User-visible symptom: clicking an empty
+   * line above a heading placed the caret on the heading; clicking
+   * text in a task item with the caret on the empty line below
+   * left the caret in place (because the "wrong" line was the same
+   * as the current caret). Padding keeps the bbox honest so CM6's
+   * heightmap matches the DOM. */
+  padding: 0.5em 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cm-moss-table table {
+  border-collapse: collapse;
+  width: max-content;
+  min-width: 100%;
+  font-family: var(--moss-font, system-ui, sans-serif);
+}
+
+.cm-moss-table th,
+.cm-moss-table td {
+  position: relative;
+  border: 1px solid var(--moss-border, #3d3d3d);
+  padding: 0.35em 0.6em;
+  text-align: left;
+  vertical-align: top;
+  min-width: 2em;
+  min-height: 1.5em;
+}
+
+.cm-moss-table th {
+  font-weight: 700;
+  background: var(--moss-code-bg, color-mix(in srgb, #2d2d2d 88%, black 12%));
+}
+
+/* Cells aren't contenteditable themselves; the inner source element
+ * is. Outline the whole cell when focus lands inside so the edit
+ * target reads as "the cell" even though the DOM is split. */
+.cm-moss-table th:focus-within,
+.cm-moss-table td:focus-within {
+  outline: 2px solid var(--moss-accent, #7c3aed);
+  outline-offset: -2px;
+}
+
+/* The action button sits on the upper-right border intersection of the
+ * focused cell. It is absolute so it never changes table sizing or row
+ * height. */
+.cm-moss-table-menu-trigger {
+  position: absolute;
+  top: -0.7em;
+  right: -0.7em;
+  z-index: 2;
+  width: 1.6em;
+  height: 1.6em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--moss-border, #3d3d3d);
+  border-radius: 0.35em;
+  background: var(--moss-bg-panel, #252525);
+  color: var(--moss-fg-muted, #888);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease, background-color 0.12s ease,
+    color 0.12s ease, transform 0.12s ease;
+}
+
+.cm-moss-table th:focus-within .cm-moss-table-menu-trigger,
+.cm-moss-table td:focus-within .cm-moss-table-menu-trigger {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.cm-moss-table-menu-trigger:hover,
+.cm-moss-table-menu-trigger:focus-visible {
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+  transform: scale(1.05);
+}
+
+.cm-moss-table-menu-trigger:focus-visible {
+  outline: 2px solid var(--moss-accent, #7c3aed);
+  outline-offset: 2px;
+}
+
+.cm-moss-table-menu-trigger svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* The editable source inside a cell — always shows the raw markdown
+ * the user types, whether or not the cell also has a rendered image
+ * preview below. Blank outline because the cell's :focus-within
+ * ring is what signals the active edit target. */
+.cm-moss-table-cell-source {
+  outline: none;
+  min-height: 1.2em;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Inline-mark delimiters (`**`, `__`, `*`, `_`, `~~`, `[`, `]`, `(`, `)`,
+ * URLs) inside table cells. Hidden by default so the reader sees only
+ * the rendered content — bold text without `**`, link text without
+ * brackets or URL. The delimiters remain in the DOM (so textContent
+ * round-trips to the raw markdown on input) but take zero space and
+ * the caret can't navigate into them.
+ *
+ * When the caret enters a mark wrap, JS adds `active` and the
+ * descendant delimiters reveal — so the user can actually edit them.
+ * Nested marks (bold-containing-italic) all reveal together when any
+ * of them contains the caret, because the JS walks ancestors. */
+.cm-moss-table-cell-source .cm-moss-mark {
+  display: none;
+}
+
+.cm-moss-table-cell-source .cm-moss-strong-wrap.active > .cm-moss-mark,
+.cm-moss-table-cell-source .cm-moss-em-wrap.active > .cm-moss-mark,
+.cm-moss-table-cell-source .cm-moss-strike-wrap.active > .cm-moss-mark,
+.cm-moss-table-cell-source .cm-moss-highlight-wrap.active > .cm-moss-mark,
+.cm-moss-table-cell-source .cm-moss-link-wrap.active > .cm-moss-mark {
+  display: inline;
+  color: var(--moss-fg-faint, #666);
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: none;
+}
+
+/* Link URL: monospace hint + size cut so a long URL doesn't dominate
+ * the cell's width once its wrap becomes active. */
+.cm-moss-table-cell-source .cm-moss-link-wrap.active > .cm-moss-link-url {
+  font-family: var(--moss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.88em;
+}
+
+.cm-moss-table-cell-source .cm-moss-highlight {
+  background: color-mix(in srgb, var(--moss-accent-bright, #a78bfa) 20%, transparent 80%);
+  border-radius: 0.18em;
+  color: var(--moss-fg, #dcddde);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+/* Rendered image preview strip below the source text. Mirrors how
+ * block-level images render outside a table: the `![alt](url)`
+ * markdown is the source of truth, but the user sees the image in
+ * the resting state — the raw markdown only appears when the cell
+ * is focused for editing (see :focus-within rule below). */
+.cm-moss-table-cell-preview {
+  margin-top: 0.35em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3em;
+  user-select: none;
+}
+
+/* Mirror the block-image invariant from outside tables: on an
+ * inactive cell, the raw `![alt](url)` markdown hides and only the
+ * rendered image shows. Focus the cell (click or Tab) to bring the
+ * source back so it can be edited.
+ *
+ * We visually hide the source without `display: none` so it stays in
+ * the DOM and remains focusable — Tab nav calls `source.focus()`
+ * explicitly and would silently fail on a display:none element. The
+ * position:absolute + zero-size pattern keeps the element interactive
+ * while taking no visible space. */
+.cm-moss-table th[data-has-image]:not(:focus-within) .cm-moss-table-cell-source,
+.cm-moss-table td[data-has-image]:not(:focus-within) .cm-moss-table-cell-source {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Inline images inside table cells. Capped so a tall image doesn't
+ * balloon a single row into half the viewport. Users who want larger
+ * in-cell images can do without for now — we'd need Obsidian's
+ * `[[file|width]]` alias syntax to make it controllable. */
+.cm-moss-table-cell-image {
+  display: block;
+  max-width: 14em;
+  max-height: 5em;
+  border-radius: 0.2em;
+  cursor: pointer;
+}
+
+/* Table actions menu — opened from the focused cell's upper-right trigger.
+ * Mounted on document.body so positioning isn't affected by CM6's overflow
+ * scroll. */
+.cm-moss-table-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 170px;
+  padding: 0.25rem 0;
+  background: var(--moss-bg-panel, #252525);
+  border: 1px solid var(--moss-border, #3d3d3d);
+  border-radius: var(--moss-radius, 6px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  font-family: var(--moss-font, system-ui, sans-serif);
+  font-size: 0.82rem;
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-moss-table-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+  min-height: 2rem;
+  padding: 0.38rem 0.7rem;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.cm-moss-table-menu-item:hover,
+.cm-moss-table-menu-item:focus-visible {
+  background: var(--moss-bg-surface, #2d2d2d);
+  outline: none;
+}
+
+.cm-moss-table-menu-item.is-destructive {
+  color: var(--moss-hl-invalid, #ff5370);
+}
+
+.cm-moss-table-menu-item.is-destructive:hover,
+.cm-moss-table-menu-item.is-destructive:focus-visible {
+  background: color-mix(
+    in srgb,
+    var(--moss-hl-invalid, #ff5370) 12%,
+    var(--moss-bg-surface, #2d2d2d) 88%
+  );
+}
+
+.cm-moss-table-menu-item-icon {
+  display: inline-flex;
+  flex: 0 0 1rem;
+  align-items: center;
+  justify-content: center;
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-moss-table-menu-item.is-destructive .cm-moss-table-menu-item-icon {
+  color: currentColor;
+}
+
+.cm-moss-table-menu-item-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.cm-moss-table-menu-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-moss-table-menu-sep {
+  height: 1px;
+  margin: 0.25rem 0;
+  background: var(--moss-border, #3d3d3d);
+}
+
+/* Find-in-document panel — a floating control strip owned by the
+ * search feature. The CM panel only reserves the top/bottom slot;
+ * the visible chrome is split into input and actions pills. */
+.moss-cm-editor .cm-editor {
+  position: relative;
+}
+
+.moss-cm-editor .cm-panels:has(.moss-search-panel) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: transparent;
+  border: 0;
+  color: var(--moss-fg, #dcddde);
+  pointer-events: none;
+}
+
+.moss-cm-editor .cm-panels-top:has(.moss-search-panel) {
+  top: 0.5rem;
+}
+
+.moss-cm-editor .cm-panels-top:has(.moss-search-panel-center) {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.moss-cm-editor .cm-panels-bottom:has(.moss-search-panel) {
+  bottom: 0.5rem;
+}
+
+.cm-panel.moss-search-panel {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  font-family: var(--moss-font, system-ui, sans-serif);
+  color: var(--moss-fg, #dcddde);
+  pointer-events: none;
+}
+
+.cm-panel.moss-search-panel-top {
+  border-bottom: 0;
+}
+
+.cm-panel.moss-search-panel-bottom {
+  border-top: 0;
+}
+
+.cm-panel.moss-search-panel-center {
+  border: 0;
+}
+
+.cm-panel.moss-search-panel form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: min(var(--moss-measure, 70ch), calc(100% - 1rem));
+  margin-inline: auto;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+  pointer-events: auto;
+}
+
+.cm-panel.moss-search-panel .cm-moss-search-input-pill,
+.cm-panel.moss-search-panel .cm-moss-search-actions-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.85rem;
+  background: color-mix(in srgb, var(--moss-bg-surface, #2d2d2d) 92%, transparent);
+  border: 1px solid color-mix(in srgb, var(--moss-fg, #dcddde) 10%, transparent);
+  border-radius: 999px;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 1px 2px rgba(0, 0, 0, 0.3),
+    0 8px 20px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(14px);
+}
+
+.cm-panel.moss-search-panel .cm-moss-search-input-pill {
+  gap: 0.35rem;
+  max-width: min(24rem, calc(100vw - 5rem));
+  padding: 0.16rem 0.55rem;
+}
+
+.cm-panel.moss-search-panel .cm-moss-search-input-pill:focus-within {
+  border-color: color-mix(in srgb, var(--moss-accent, #7c3aed) 42%, transparent);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 0 0 2px color-mix(in srgb, var(--moss-accent, #7c3aed) 20%, transparent),
+    0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.cm-panel.moss-search-panel .cm-moss-search-actions-pill {
+  gap: 0.1rem;
+  padding: 0.18rem 0.25rem;
+}
+
+[data-theme="light"] .cm-panel.moss-search-panel .cm-moss-search-input-pill,
+[data-theme="light"] .cm-panel.moss-search-panel .cm-moss-search-actions-pill {
+  border-color: color-mix(in srgb, var(--moss-fg, #1a1a1a) 10%, transparent);
+  box-shadow:
+    0 1px 0 rgba(0, 0, 0, 0.03) inset,
+    0 1px 3px rgba(0, 0, 0, 0.06),
+    0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.cm-panel.cm-search.moss-search-panel input.cm-moss-search-input[type="text"] {
+  appearance: none;
+  flex: 1 1 auto;
+  width: clamp(9rem, 28vw, 17rem);
+  min-width: 6rem;
+  height: 1.35rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  font-size: 0.75rem;
+  outline: none;
+}
+
+.cm-panel.cm-search.moss-search-panel input.cm-moss-search-input[type="text"]:focus {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  outline: none;
+}
+
+.cm-panel.cm-search.moss-search-panel input.cm-moss-search-input[type="text"]::placeholder {
+  color: var(--moss-fg-muted, #888);
+}
+
+.cm-panel.moss-search-panel .cm-moss-search-count {
+  flex: 0 0 auto;
+  color: var(--moss-fg-muted, #888);
+  font-size: 0.625rem;
+  white-space: nowrap;
+  min-width: 0;
+  padding-inline: 0.1rem;
+  user-select: none;
+}
+
+.cm-panel.cm-search.moss-search-panel button.cm-moss-search-btn {
+  appearance: none;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.45rem;
+  height: 1.45rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  color: var(--moss-fg-muted, #888);
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.cm-panel.cm-search.moss-search-panel button.cm-moss-search-btn:hover {
+  background: var(--moss-bg-surface, #2d2d2d);
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-panel.cm-search.moss-search-panel button.cm-moss-search-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--moss-accent, #7c3aed) 30%, transparent);
+  color: var(--moss-fg, #dcddde);
+}
+
+.cm-panel.cm-search.moss-search-panel button.cm-moss-search-btn svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  color: inherit;
+  stroke: currentColor;
+  fill: none;
+  pointer-events: none;
+}
+
+.cm-panel.cm-search.moss-search-panel button.cm-moss-search-btn svg * {
+  stroke: currentColor;
+}
+
+/* Highlight matches in the document. Active match gets a stronger
+ * fill; other matches share the same tone in a lighter shade. The
+ * background-color custom properties are pre-mixed in src/index.css
+ * to alpha-blend cleanly over whatever theme backdrop is active. */
+.cm-searchMatch {
+  background: var(--moss-search-bg, rgba(124, 58, 237, 0.28));
+  border-radius: 2px;
+}
+
+.cm-searchMatch-selected {
+  background: var(--moss-search-bg-active, rgba(124, 58, 237, 0.6));
+}
+
+/* Initial reveal highlight — paired with the `initialRevealText` prop
+ * and the `revealText()` imperative method on the editor handle.
+ * Starts at a stronger accent-tinted background, settles to a softer
+ * one, then fades to transparent over ~3.2s so the reader's eye
+ * catches the match on arrival without the highlight lingering.
+ *
+ * Two tokens so consumers can theme either the peak or the settled
+ * state independently of the main search-match colors. */
+.cm-initialRevealMatch {
+  background: var(
+    --moss-initial-reveal-bg,
+    color-mix(in srgb, var(--moss-accent-soft, #a78bfa) 28%, transparent 72%)
+  );
+  border-radius: 0.2rem;
+  animation: moss-initial-reveal-fade 3.2s ease-out forwards;
+}
+
+@keyframes moss-initial-reveal-fade {
+  0% {
+    background: var(
+      --moss-initial-reveal-bg-strong,
+      color-mix(in srgb, var(--moss-accent-soft, #a78bfa) 42%, transparent 58%)
+    );
+  }
+  65% {
+    background: var(
+      --moss-initial-reveal-bg,
+      color-mix(in srgb, var(--moss-accent-soft, #a78bfa) 28%, transparent 72%)
+    );
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+/* Read-only ("reading") mode. The `cm-moss-readonly` class is set on
+ * the editor wrapper by `readOnlyExtension` (src/read-only.ts). In this
+ * mode nothing reveals its source and the whole document is a reading
+ * surface, so interactive affordances change accordingly. */
+
+/* The entire link is the open target now (not just the trailing icon),
+ * so the text gets the pointer cursor too — for both inline links and
+ * links rendered inside table cells. */
+.cm-moss-readonly .cm-moss-link,
+.cm-moss-readonly .cm-moss-wiki-link,
+.cm-moss-readonly .cm-moss-link-wrap {
+  cursor: pointer;
+}
+
+/* Table cells are inert: no caret, no text cursor. */
+.cm-moss-readonly .cm-moss-table-cell-source {
+  cursor: default;
+}