@layer editor {
/* ═══════════════════════════════════════════════════════════════════════════
   Tolstoy Compose — Editor
   Current continuous writing surface and remaining-canvas geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --editor-writing-comfort-bottom: clamp(160px, 22vh, 240px);
  --editor-page-end-breathing-room: clamp(180px, 26vh, 300px);
  --editor-paper-end-breathing-room: clamp(160px, 20vh, 240px);
  --editor-paper-inline-padding: clamp(48px, 7vw, 76px);
  --editor-continuous-column-max: calc(var(--ed-line-width) + 160px);
  --editor-continuous-toolbar-max-inline: 1120px;
  --editor-continuous-workspace-bg: var(--surface-canvas);
  --editor-continuous-workspace-divider: var(--surface-workspace-divider);
  --editor-paper-boundary: var(--surface-document-boundary);
  --floating-toolbar-full-command-inline: var(--editor-continuous-toolbar-max-inline);
}

@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  :root {
    --editor-writing-comfort-bottom: clamp(120px, 18vh, 190px);
    --editor-page-end-breathing-room: clamp(160px, 24vh, 260px);
    --editor-paper-end-breathing-room: clamp(120px, 18vh, 190px);
    --editor-paper-inline-padding: 24px;
  }
}

#editor-viewport {
  background: var(--editor-continuous-workspace-bg);
  border-block-start: 1px solid var(--editor-continuous-workspace-divider);
  container-name: editor;
  container-type: inline-size;
  flex: 1 1 0;
  min-block-size: 0;
  overflow-x: hidden;
  overscroll-behavior-block: contain;
  position: relative;
  scroll-padding-block: calc(var(--topbar-h) + var(--surface-focus-scroll-padding)) calc(var(--floating-toolbar-reserve) + var(--editor-writing-comfort-bottom));
}

#editor-viewport[aria-busy="true"] { cursor: progress; }

.document-loading-shell {
  align-items: start;
  background: var(--editor-continuous-workspace-bg);
  display: grid;
  inset: 0;
  justify-items: center;
  overflow: hidden;
  padding: clamp(104px, 16vh, 176px) clamp(24px, 5vw, 72px) 40px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.document-loading-shell[hidden],
:root[data-document-load-state="idle"] .document-loading-shell,
:root[data-document-load-state="ready"] .document-loading-shell,
:root[data-document-load-state="failed"] .document-loading-shell {
  display: none;
}

.document-loading-shell-surface {
  display: grid;
  gap: 14px;
  inline-size: min(100%, 420px);
  text-align: center;
}

.document-loading-shell-title {
  color: var(--text);
  font-size: var(--ui-font-size);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.document-loading-shell-progress {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border-radius: 999px;
  block-size: 3px;
  inline-size: 100%;
  overflow: hidden;
  position: relative;
}

.document-loading-shell-progress-value {
  animation: document-loading-shell-progress 1250ms var(--motion-ease-emphasized) infinite;
  background: var(--accent-foreground);
  border-radius: inherit;
  block-size: 100%;
  display: block;
  inline-size: 38%;
  transform: translateX(-140%);
}

@keyframes document-loading-shell-progress {
  from { transform: translateX(-140%); }
  to { transform: translateX(365%); }
}

.document-loading-recovery-actions {
  display: flex;
  justify-content: center;
  margin-block-start: 2px;
  pointer-events: auto;
}

.document-loading-recovery-actions[hidden] { display: none; }

.document-loading-recovery-button {
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  min-block-size: var(--control-block-size);
  padding-inline: var(--space-cluster);
}

.document-loading-recovery-button:where(:hover, :focus-visible) {
  background: var(--control-surface-hover);
  border-color: var(--control-border-hover);
}

.document-loading-recovery-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

#editor-viewport[data-document-switching="true"],
#editor-viewport[data-selection-dragging="true"] {
  overflow-anchor: none;
  scroll-behavior: auto;
}

#editor-stage {
  align-content: stretch;
  box-sizing: border-box;
  display: grid;
  inline-size: 100%;
  justify-items: center;
  min-block-size: 100%;
  padding-block: 0;
  padding-inline: clamp(20px, 4vw, 56px);
  row-gap: 0;
  transition:
    padding-left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
    padding-right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
}

/* The document is a matte member of the same warm-neutral surface family as
   the toolbar and sidebar. Only quiet vertical boundaries distinguish it from
   the workspace, so it remains continuous rather than reading as a page. */
#editor-paper,
#editor-paper:focus-within {
  animation: editor-continuous-reveal var(--motion-duration-panel-sheet) var(--motion-ease-out) both;
  background-color: var(--surface-document-paper);
  background-image: none;
  border: 0;
  border-inline: 1px solid var(--editor-paper-boundary);
  border-radius: 0;
  box-shadow: none;
  max-width: var(--editor-continuous-column-max);
  min-height: 100%;
  padding: clamp(56px, 7vw, 80px) 0 var(--editor-paper-end-breathing-room);
  padding-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-paper-end-breathing-room));
  position: relative;
  transition:
    opacity var(--motion-duration-surface) var(--motion-ease-out),
    padding-left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
    padding-right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  width: 100%;
  cursor: text;
}

#editor-paper[data-surface-replacing="true"] { opacity: .74; }

@keyframes editor-continuous-reveal {
  from { opacity: .94; }
  to { opacity: 1; }
}

@media (min-width: 1080px) and (pointer: fine) {
  .topbar-action-rail {
    flex: 0 1 auto;
    inline-size: min(
      var(--ed-line-width),
      calc(100vw - var(--sidebar-occupied-left) - var(--sidebar-occupied-right) - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section)))
    );
    max-inline-size: var(--ed-line-width);
    transform: translateX(var(--sidebar-available-center-offset));
    transition:
      inline-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      transform var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  }
}

/* Desktop and tablet share one continuous vertical writing-plane geometry.
   The plane reaches the viewport edges while its content keeps a deliberate
   internal reading inset; topbar and toolbar use the remaining-canvas offset. */


@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  .document-loading-shell {
    background: var(--surface-document-paper);
    padding-block-start: max(104px, calc(var(--topbar-h) + 48px));
    padding-inline: 24px;
  }

  #editor-viewport {
    background: var(--surface-document-paper);
    border-block-start-color: transparent;
  }


  #editor-stage {
    padding-block-start: max(56px, calc(var(--topbar-h) + var(--space-cluster)));
    padding-inline: 0;
    row-gap: var(--space-section);
  }

  #editor-paper,
  #editor-paper:focus-within {
    background: var(--surface-document-paper);
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 0 0 var(--editor-paper-end-breathing-room);
    padding-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-paper-end-breathing-room));
  }

  #editor-paper::before,
  #editor-paper::after { content: none; }
}

@container editor (max-width: 560px) {
  #editor-viewport { --editor-paper-inline-padding: clamp(20px, 6cqi, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .document-loading-shell-progress-value {
    animation: none;
    transform: translateX(82%);
  }

  #editor-paper,
  #editor-paper:focus-within {
    animation: none;
    transition-duration: var(--motion-duration-reduced);
  }

  .topbar-action-rail,
  #editor-stage {
    transition-duration: var(--motion-duration-reduced);
  }
}

/* Keep editor scrolling native. The app shell is fixed, but the scrollable
   container itself owns browser-default panning; the paper/content should not
   constrain touch gestures. */
#editor-paper,
.ProseMirror {
  touch-action: auto;
}

/* ── ProseMirror root ────────────────────────────────────────────────── */
.ProseMirror {
  font-family: var(--ed-body-font);
  font-size: var(--ed-font-size);
  line-height: var(--ed-line-height);
  color: var(--ed-body-color);
  box-sizing: border-box;
  inline-size: 100%;
  max-width: none;
  margin: 0;
  outline: none;
  padding-inline: max(
    var(--editor-paper-inline-padding),
    calc(50% - var(--ed-line-half-width))
  );
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  min-block-size: max(12rem, calc(var(--app-editor-paper-min-block-size) - var(--editor-paper-end-breathing-room)));
  -webkit-user-select: text;
  user-select: text;
}

/* Hyphenation off — toggled via appearance panel */
[data-hyphenation="off"] .ProseMirror {
  hyphens: none;
}

.ProseMirror > :first-child {
  margin-block-start: 0;
}

#editor-paper {
  scroll-margin-block-start: var(--surface-focus-scroll-padding);
}

.ProseMirror :where(h1, h2, h3, h4, h5, h6, [data-node-id], [data-review-id], .review-anchor, .citation-ref, mark) {
  scroll-margin-block-start: calc(var(--topbar-h) + calc(var(--space-section) + var(--space-tight)));
  scroll-margin-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-writing-comfort-bottom));
}

/* ── Placeholder ─────────────────────────────────────────────────────── */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-muted);
  pointer-events: none;
  height: 0;
  font-style: italic;
}

/* ── Headings ────────────────────────────────────────────────────────── */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  font-family: var(--ed-heading-font);
  color: var(--ed-heading-color);
  letter-spacing: -0.02em;
  line-height: var(--ed-line-height);
  margin-block: 0 var(--ed-paragraph-spacing);
}

.ProseMirror h1 { font-size: var(--ed-h1-size); font-weight: 400; }
.ProseMirror h2 { font-size: var(--ed-h2-size); font-weight: 400; }
.ProseMirror h3 { font-size: var(--ed-h3-size); font-weight: 400; }
.ProseMirror h4 { font-size: var(--ed-h4-size); font-weight: 400; }
.ProseMirror h5 { font-size: var(--ed-h5-size); font-weight: 400; }
.ProseMirror h6 { font-size: var(--ed-h6-size); font-weight: 400; font-style: italic; letter-spacing: 0; }

.ProseMirror > :first-child:is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* ── Paragraphs ──────────────────────────────────────────────────────── */
.ProseMirror p { margin-block: 0 var(--ed-paragraph-spacing); }
.ProseMirror p:last-child { margin-block-end: 0; }

.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="1"] { margin-inline-start: 28px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="2"] { margin-inline-start: 56px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="3"] { margin-inline-start: 84px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="4"] { margin-inline-start: 112px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="5"] { margin-inline-start: 140px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="6"] { margin-inline-start: 168px; }

/* ── Lists ───────────────────────────────────────────────────────────── */
.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.6em;
  margin-block: 0 var(--ed-paragraph-spacing);
}

.ProseMirror li { margin-block-end: calc(var(--ed-paragraph-spacing) * 0.3125); }
.ProseMirror li p { margin-block-end: calc(var(--ed-paragraph-spacing) * 0.25); }

/* ── Blockquote ──────────────────────────────────────────────────────── */
.ProseMirror blockquote {
  border-left: 3px solid var(--accent);
  margin-block: calc(var(--ed-paragraph-spacing) * 1.5);
  margin-inline: 0;
  padding: 0.2em 0 0.2em 1.2em;
  color: var(--text-sec);
  font-style: italic;
}

/* ── Code ────────────────────────────────────────────────────────────── */
.ProseMirror code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--shape-technical);
  padding: 0.1em 0.4em;
}

.ProseMirror pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--document-content-radius);
  padding: 1em 1.2em;
  overflow-x: auto;
  margin-block-end: var(--ed-paragraph-spacing);
}

.ProseMirror pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── Horizontal rule ─────────────────────────────────────────────────── */
.ProseMirror hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin-block: calc(var(--ed-paragraph-spacing) * 2.5);
  margin-inline: 0;
}

/* ── Links ───────────────────────────────────────────────────────────── */
.ProseMirror a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ProseMirror a:hover { text-decoration-thickness: 2px; }

/* ── Local review anchors ───────────────────────────────────────────────
   Review marks remain durable document data, while ProseMirror decorations
   own current, attention, kind, and status presentation. */
.ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])) {
  -webkit-box-decoration-break: clone;
  background-color: color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  cursor: pointer;
  padding-inline: .04em;
  text-decoration-line: underline;
  text-decoration-color: var(--accent-border-strong);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .16em;
}

.ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])):hover {
  background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

.ProseMirror .compose-review-decoration[data-review-current="true"] {
  background-color: color-mix(in srgb, var(--accent) 18%, transparent);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.ProseMirror .compose-review-decoration[data-review-attention="true"] {
  background-color: color-mix(in srgb, var(--status-warning) 12%, transparent);
  text-decoration-color: var(--status-warning);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

/* ── Strong / em ─────────────────────────────────────────────────────── */
.ProseMirror strong { font-weight: 700; }
.ProseMirror em { font-style: italic; }
.ProseMirror s { text-decoration: line-through; color: var(--text-sec); }
.ProseMirror u { text-decoration: underline; text-underline-offset: 4px; }

/* ── Highlight ───────────────────────────────────────────────────────── */
.ProseMirror mark {
  /* Compose owns highlight treatment so the same document stays coherent in
     light and dark appearance, including imported multicolour marks. */
  background-color: var(--doc-highlight-bg) !important;
  color: var(--doc-highlight-text) !important;
  border-radius: 2px;
  padding: 0.05em 0.1em;
}

/* ── Images ──────────────────────────────────────────────────────────── */
.ProseMirror img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--document-content-radius);
  margin: calc(var(--ed-paragraph-spacing) * 1.5) auto;
  cursor: pointer;
}

/* Selected image ring */
.ProseMirror img.ProseMirror-selectednode,
.ProseMirror .ProseMirror-selectednode img {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}


/* ── Task lists (stock TipTap ListKit) ─────────────────────────────────
   TipTap serializes task items as li[data-type="taskItem"], but its live
   TaskItem node view renders the editable DOM as ul[data-type="taskList"] > li
   with data-checked and no guaranteed data-type attribute. Keep both selectors
   so editor, saved HTML, print/export shells, and future renderer paths align. */
.ProseMirror ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.ProseMirror ul[data-type="taskList"] > li,
.ProseMirror li[data-type="taskItem"] {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 0 0 calc(var(--ed-paragraph-spacing) * 0.4375);
  list-style: none;
}

.ProseMirror ul[data-type="taskList"] > li > label,
.ProseMirror li[data-type="taskItem"] > label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.6em;
  user-select: none;
}

.ProseMirror ul[data-type="taskList"] > li > label input[type="checkbox"],
.ProseMirror li[data-type="taskItem"] > label input[type="checkbox"] {
  inline-size: 1em;
  block-size: 1em;
  accent-color: var(--accent);
  margin: 0.2em 0 0;
}

.ProseMirror ul[data-type="taskList"] > li > div,
.ProseMirror li[data-type="taskItem"] > div {
  flex: 1 1 auto;
  min-width: 0;
}

.ProseMirror ul[data-type="taskList"] > li > div > p:first-child,
.ProseMirror li[data-type="taskItem"] > div > p:first-child { margin-top: 0; }
.ProseMirror ul[data-type="taskList"] > li > div > p:last-child,
.ProseMirror li[data-type="taskItem"] > div > p:last-child  { margin-bottom: 0; }

/* ── Governed image sizing ──────────────────────────────────────────
   Images use S/M/L document-relative presets. There are no resize handles
   or freeform drag interactions in the writing surface. */
.ProseMirror img[data-size="s"] { inline-size: 50%; }
.ProseMirror img[data-size="m"] { inline-size: 75%; }
.ProseMirror img[data-size="l"] { inline-size: 100%; }

.ProseMirror [data-image-container][data-node="image"] {
  align-items: center;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  justify-content: center;
  max-inline-size: 100%;
  margin-block: calc(var(--ed-paragraph-spacing) * 1.5);
  margin-inline: auto;
}

.ProseMirror [data-image-container][data-node="image"][data-image-size="s"] { inline-size: 50%; }
.ProseMirror [data-image-container][data-node="image"][data-image-size="m"] { inline-size: 75%; }
.ProseMirror [data-image-container][data-node="image"][data-image-size="l"] { inline-size: 100%; }

.ProseMirror [data-image-container][data-node="image"][data-align="left"] {
  align-items: flex-start;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.ProseMirror [data-image-container][data-node="image"][data-align="right"] {
  align-items: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.ProseMirror [data-image-container][data-node="image"] img {
  inline-size: 100%;
  margin: 0;
  max-inline-size: 100%;
  block-size: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.ProseMirror [data-image-container][data-node="image"] [data-image-caption] {
  color: var(--text-muted);
  font-size: 0.875em;
  line-height: 1.45;
  margin-block-start: 0.65em;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  padding-inline: 0.25em;
  text-align: center;
  user-select: text;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  /* Fixed layout prevents columns exploding as you type — each column
     shares the available width equally rather than growing to fit content */
  table-layout: fixed;
  margin-block-end: var(--ed-paragraph-spacing);
  font-size: 0.9em;
  /* Clip any overflow rather than letting the table break the layout */
  overflow: hidden;
}

.ProseMirror th,
.ProseMirror td {
  border: 1px solid var(--border-strong);
  padding: 0.5em 0.75em;
  vertical-align: top;
  text-align: left;
  /* Words wrap within the fixed-width cell rather than forcing it wider */
  word-break: break-word;
  overflow-wrap: break-word;
  /* Prevent any single cell from ever overflowing its column */
  overflow: hidden;
}

.ProseMirror th {
  background: var(--fill-subtle);
  font-weight: 700;
}

.ProseMirror .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent-vivid) 14%, transparent);
  pointer-events: none;
}

.ProseMirror td, .ProseMirror th { position: relative; }

/* ── Citation nodes ──────────────────────────────────────────────────── */
.citation-ref {
  color: var(--accent);
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  cursor: pointer;
  font-family: var(--font-ui);
}

.citation-ref:hover { text-decoration: underline; }

/* ── Notes section ───────────────────────────────────────────────────── */
#notes-section {
  max-width: var(--ed-line-width);
  margin: 3em auto 0;
  padding-top: 0;
  font-family: var(--ed-body-font);
  font-size: var(--ed-font-size);
}

/* The top rule only appears when there IS content */
#notes-section:not(:empty) {
  border-top: 1px solid var(--border);
  padding-top: 1.5em;
}

#notes-section:empty { display: none; }

.notes-block { margin-block-end: calc(var(--ed-paragraph-spacing) * 1.5); }

.notes-block-label {
  font-size: var(--ed-note-label-size);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--ed-paragraph-spacing);
  font-family: var(--font-ui);
}

/* Separator between Footnotes and Endnotes blocks */
.notes-separator {
  height: 1px;
  background: var(--border);
  margin-block: calc(var(--ed-paragraph-spacing) * 1.5);
  margin-inline: 0;
}

.note-item {
  font-family: var(--ed-body-font);
  font-size: var(--ed-note-font-size);
  color: var(--text-sec);
  line-height: var(--ed-note-line-height);
  margin-block-end: max(0.35em, calc(var(--ed-paragraph-spacing) * 0.875));
  display: flex;
  gap: 0.5em;
}

.note-item .note-number {
  color: var(--accent);
  font-size: 1em;
  flex-shrink: 0;
  min-width: 1.5em;
  cursor: pointer;
}
.note-item .note-number:hover { text-decoration: underline; }

/* Text selection uses the single application-level native selection rule.
   Avoid editor-specific foreground or paint overrides so browser drag,
   high-contrast, and marked-text behaviour remain predictable. */

/* ── Cursor ──────────────────────────────────────────────────────────── */
.ProseMirror-focused { caret-color: var(--accent); }


/* ── Drag and drop ───────────────────────────────────────────────────── */
.ProseMirror .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror .ProseMirror-gapcursor::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 2px solid var(--text);
}

.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

/* ── Search highlight — ProseMirror decorations ──────────────────────── */
/* Inline decorations are mapped by ProseMirror transactions and never become
   document content, clipboard payload, or undo history. */
.ProseMirror .compose-search-result {
  background-color: color-mix(in srgb, var(--accent-vivid) 22%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  color: inherit;
  -webkit-box-decoration-break: clone;
}

.ProseMirror .compose-search-current {
  background-color: color-mix(in srgb, var(--accent-vivid) 55%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT / PDF EXPORT — strips all app chrome, formats document only
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide everything except the document content */
  #sidebar,
  #topbar,
  #toolbar-row,
  #files-export-dropdown,
  #selection-inspector,
  #shortcuts-modal,
  #overlay,
  [role="toolbar"] {
    display: none !important;
  }

  .document-loading-shell { display: none !important; }

  /* Reset the layout */
  html, body, #app, #main, #body, #canvas {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: var(--doc-print-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #editor-viewport {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  #editor-paper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--doc-print-bg) !important;
  }

  #editor {
    padding: 0 !important;
    min-height: auto !important;
  }

  /* Typography — clean for print */
  .ProseMirror {
    font-size: 11pt !important;
    line-height: var(--ed-line-height) !important;
    color: var(--doc-print-text) !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  .ProseMirror h1 { font-size: 20pt !important; margin: 0 0 12pt !important; }
  .ProseMirror h2 { font-size: 16pt !important; margin: 16pt 0 8pt !important; }
  .ProseMirror h3 { font-size: 13pt !important; margin: 12pt 0 6pt !important; }
  .ProseMirror p  { margin: 0 0 8pt !important; orphans: 3; widows: 3; }

  .ProseMirror a { color: var(--doc-print-text) !important; text-decoration: underline !important; text-underline-offset: 4px !important; }
  .ProseMirror u { text-underline-offset: 4px !important; }
  .ProseMirror :where(.compose-comment-anchor, .compose-review-decoration) {
    background: transparent !important;
    padding-inline: 0 !important;
    text-decoration: none !important;
  }

  /* Avoid breaking inside these */
  .ProseMirror blockquote,
  .ProseMirror pre,
  .ProseMirror table { page-break-inside: avoid; }

  .ProseMirror img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: calc(var(--ed-paragraph-spacing) * 1.5) auto !important;
    float: none !important;
  }

  /* Page margins */
  @page {
    margin: 2cm 2.5cm;
    size: A4;
  }

  /* Hide editor-only search decorations in print. */
  .ProseMirror .compose-search-result,
  .ProseMirror .compose-search-current {
    background-color: transparent !important;
    color: inherit !important;
  }

  /* Notes section */
  #notes-section {
    border-top: 1px solid var(--doc-print-border) !important;
    margin-top: 24pt !important;
    padding-top: 12pt !important;
    font-size: 9pt !important;
    color: var(--doc-print-muted) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Touch / mobile ownership — editor
   Editor surface and reading adjustments live with the editor component.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  #editor-viewport {
    scroll-behavior: auto;
  }

  .ProseMirror {
    font-size: var(--ed-font-size);
    line-height: var(--ed-line-height);
  }
}

:root:is([dir="rtl"]) .ProseMirror {
  direction: rtl;
  text-align: right;
}
}

@layer components {
  .ProseMirror th,
  .ProseMirror td {
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard);
  }
}

/* Review marker theme and accessibility hardening. */
[data-theme="dark"] .ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])) {
  background-color: color-mix(in srgb, var(--accent) 16%, transparent);
  text-decoration-color: color-mix(in srgb, var(--accent) 82%, white 18%);
}

[data-theme="dark"] .ProseMirror .compose-review-decoration[data-review-current="true"] {
  background-color: color-mix(in srgb, var(--accent) 24%, transparent);
  text-decoration-color: color-mix(in srgb, var(--accent) 78%, white 22%);
}

@media (forced-colors: active) {
  #editor-paper,
  #editor-paper:focus-within { background-image: none; }

  #editor-paper::before,
  #editor-paper::after { content: none; }

  .ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])) {
    background: transparent;
    border-radius: 0;
    color: CanvasText;
    forced-color-adjust: auto;
    outline: 0;
    text-decoration-color: Highlight;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .ProseMirror .compose-review-decoration[data-review-current="true"] {
    outline: 1px solid Highlight;
    outline-offset: 1px;
    text-decoration-thickness: 3px;
  }

  .ProseMirror .compose-review-decoration[data-review-attention="true"] {
    text-decoration-color: CanvasText;
    text-decoration-style: dotted;
    text-decoration: underline dotted 2px CanvasText;
    text-underline-offset: 3px;
  }
}

/* Appearance aid: keep review anchors interactive while removing their visual
   fill and underline when the writer chooses a clean reading surface. This
   rule follows dark-mode and forced-colour review styling so the preference
   remains authoritative in every presentation mode. */
:root[data-review-highlights="off"] .ProseMirror :where(.compose-comment-anchor, .compose-review-decoration) {
  background: transparent !important;
  outline: 0 !important;
  text-decoration: none !important;
}