/* COMPOSE consolidated stylesheet: 3-writing-editor.css.
   Product-area bundle keeps runtime visual ownership traceable.
   Source sections below are retained as named ownership markers for CSS contracts. */


/* ==== Source section: css/4-editor-ui.css ==== */

@layer editor {
/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR UI
   Consolidated chrome/layout/notes styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Editor
   The writing surface. Premium, quiet, focused.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll container ────────────────────────────────────────────────── */
#editor-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Canvas is always the brightest surface — content is the light */
  background: var(--bg-canvas);
}

/* ── Paper — full-surface, no card, clean ────────────────────────────── */
#editor-paper {
  position: relative;
  width: 100%;
  max-width: calc(var(--ed-line-width) + 80px);
  padding: 56px 40px 80px;
  flex: 1;
  min-height: calc(100vh - var(--app-header-h));
  min-height: calc(100svh - var(--app-header-h));
  background: var(--bg-canvas);
}

#editor-column {
  width: 100%;
  max-width: var(--ed-line-width);
  margin: 0 auto;
}

/* ── Desktop and tablet share the same writing-surface spacing ────────── */
@media (min-width: 768px) {
  #editor-scroll { padding: 0 var(--s-generous); }
  #editor-paper  { min-height: auto; }
}

/* ── Mobile: compact padding, no artificial min-height ───────────────── */
@media (max-width: 767px) {
  #editor-scroll {
    padding: 0;
    /* Allow scroll area to fill canvas (canvas has bottom padding for toolbar) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #editor-paper {
    padding: 24px 20px 48px;
    max-width: 100%;
    /* Remove desktop min-height — flex layout fills the space correctly */
    min-height: unset;
  }
}

/* ── ProseMirror root ────────────────────────────────────────────────── */
.ProseMirror {
  font-family: var(--ed-body-font);
  font-size: var(--ed-font-size);
  line-height: var(--ed-line-height);
  color: var(--ed-text);
  width: 100%;
  max-width: none;
  margin: 0;
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  hanging-punctuation: first allow-end last;
}

/* Hyphenation toggled via appearance panel; off is the default. */
[data-hyphenation="on"] .ProseMirror {
  hyphens: auto;
}




/* ── Notes section ───────────────────────────────────────────────────── */
#notes-section {
  width: 100%;
  margin: 3em 0 0;
  padding-top: 0;
  box-sizing: border-box;
}

/* 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-bottom: 1.2em; }

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

/* Separator between Footnotes and Endnotes blocks */
.notes-separator {
  height: 1px;
  background: var(--border);
  margin: 1.2em 0;
}

.note-item {
  font-family: var(--ed-body-font);
  font-size: 0.82em;
  color: var(--text-sec);
  line-height: 1.65;
  margin-bottom: 0.7em;
  display: flex;
  gap: 0.5em;
}

.note-item .note-number {
  color: var(--accent);
  font-size: 0.9em;
  flex-shrink: 0;
  min-width: 1.75em;
}

.note-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85em;
  padding: 0 .45em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.note-edit-btn:hover,
.note-edit-btn:focus-visible {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .14) 82%, transparent);
  text-decoration: underline;
  outline: none;
}

@media (pointer: coarse) {
  .note-edit-btn {
    min-height: 2.2em;
    min-width: 2.2em;
    padding-inline: 0.55em;
  }
}

/* ── Selection ───────────────────────────────────────────────────────── */
.ProseMirror ::selection {
  background: rgba(var(--accent-rgb), 0.2);
}

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

.ProseMirror:focus, .ProseMirror:focus-visible, .ProseMirror.ProseMirror-focused { outline: none !important; box-shadow: none !important; }

/* ── 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 — CSS Custom Highlight API ─────────────────────── */
/* These ::highlight() pseudo-elements are painted by the browser as a
   separate layer. Zero DOM mutations inside ProseMirror. */
::highlight(search-results) {
  background-color: rgba(var(--accent-rgb), 0.22);
  color: inherit;
}

::highlight(search-current) {
  background-color: rgba(var(--accent-rgb), 0.55);
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE LAYOUT MODE
   The scroll container becomes the "desk" (darker surround).
   The paper card sits centered in it and grows with content.
   ══════════════════════════════════════════════════════════════════════ */

/* Desk — scrolls naturally; items stack from the top */
[data-layout="page"] {
  --page-shell-gutter-inline: 20px;
  --page-shell-gutter-top: 28px;
  --page-shell-gutter-bottom: 84px;
  --page-paper-pad-inline: 75px;
  --page-paper-pad-top: 100px;
  --page-paper-pad-bottom: 120px;
  --page-paper-min-height-offset: 68px;
  --page-content-measure: var(--ed-line-width);
}

[data-layout="page"] #editor-scroll {
  background-color: var(--sidebar-bg);
  padding: var(--page-shell-gutter-top) var(--page-shell-gutter-inline) var(--page-shell-gutter-bottom);
  align-items: center;
  justify-content: flex-start;
}

/* Paper card — one shared tablet/desktop model */
[data-layout="page"] #editor-paper {
  background: var(--page-paper, var(--bg-canvas));
  border-radius: 6px;
  border: 0;
  box-shadow: var(--paper-shadow-light);
  flex: 0 0 auto;
  min-height: calc(100vh - var(--app-header-h) - var(--page-paper-min-height-offset));
  min-height: calc(100svh - var(--app-header-h) - var(--page-paper-min-height-offset));
  width: 100%;
  max-width: calc(var(--page-content-measure) + (var(--page-paper-pad-inline) * 2));
  padding: var(--page-paper-pad-top) var(--page-paper-pad-inline) var(--page-paper-pad-bottom);
}

[data-layout="page"] #editor-column {
  max-width: var(--page-content-measure);
}

/* Mobile */
@media (max-width: 767px) {
  [data-layout="page"] {
    --page-shell-gutter-inline: 12px;
    --page-shell-gutter-top: 18px;
    --page-shell-gutter-bottom: 72px;
    --page-paper-pad-inline: 28px;
    --page-paper-pad-top: 52px;
    --page-paper-pad-bottom: 76px;
    --page-paper-min-height-offset: 52px;
  }
  [data-layout="page"] #editor-paper {
    border-radius: 6px;
  }
}

/* Dark page mode — graphite surround with page darker than dark chrome */
[data-theme="dark"][data-layout="page"] #editor-scroll {
  background-color: var(--sidebar-bg);
}
[data-theme="dark"][data-layout="page"] #editor-paper {
  background: var(--page-paper-dark, var(--bg-canvas));
  border-color: transparent;
  box-shadow: var(--paper-shadow-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TOUCH INTEGRATION
   Editor-specific mobile rules formerly lived in 11-mobile-polish.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  :root {
    --header-row-h: 52px;
    --header-action-size: 40px;
  }

  #editor-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
  }

  #editor-paper {
    padding-bottom: 80px;
  }

  .ProseMirror {
    font-size: max(var(--ed-font-size), 17px);
    line-height: max(var(--ed-line-height), 1.75);
  }
}

@media (pointer: coarse) {
  #editor-scroll {
    overscroll-behavior-y: contain;
  }
}

:root:is([dir="rtl"]) #main {
  margin-right: 0;
}

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

/* Dark editor refinement.
   Page is intentionally darker than the dark topbar and toolbar.
   The page boundary is intentionally quieter than light mode. */
[data-theme="dark"][data-layout="page"] #editor-scroll {
  background:
    radial-gradient(circle at 50% 0%, rgba(238,241,246,.045), transparent 34%),
    var(--bg-canvas);
}

[data-theme="dark"][data-layout="page"] #editor-paper {
  background: var(--page-paper-dark);
  border: 1px solid rgba(238,241,246,.03);
  box-shadow:
    0 1px 0 rgba(238,241,246,.018),
    0 4px 14px rgba(0,0,0,.10);
}

[data-theme="dark"] .ProseMirror {
  color: var(--ed-text);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

[data-theme="dark"] .ProseMirror-focused {
  caret-color: var(--accent-quiet);
}
}


/* ==== Source section: css/4-editor-content.css ==== */

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

.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-text);
}

.ProseMirror h1,
.ProseMirror h2 {
  text-wrap: var(--ed-heading-balance-wrap);
}

.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  text-wrap: pretty;
}

.ProseMirror h1 {
  font-size: var(--ed-h1-size);
  font-weight: var(--ed-h1-weight);
  line-height: var(--ed-h1-line-height);
  letter-spacing: var(--ed-h1-letter-spacing);
  margin-top: var(--ed-h1-margin-top);
  margin-bottom: var(--ed-h1-margin-bottom);
}
.ProseMirror h1.is-editor-empty::before {
  font-style: normal;
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

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

.ProseMirror > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.52em;
}
.ProseMirror h2 {
  font-size: var(--ed-h2-size);
  font-weight: var(--ed-h2-weight);
  line-height: var(--ed-h2-line-height);
  letter-spacing: var(--ed-h2-letter-spacing);
  margin-top: var(--ed-h2-margin-top);
  margin-bottom: var(--ed-h2-margin-bottom);
}
.ProseMirror h3 {
  font-size: var(--ed-h3-size);
  font-weight: var(--ed-h3-weight);
  line-height: var(--ed-h3-line-height);
  letter-spacing: var(--ed-h3-letter-spacing);
  margin-top: var(--ed-h3-margin-top);
  margin-bottom: var(--ed-h3-margin-bottom);
}
.ProseMirror h4 {
  font-size: var(--ed-h4-size);
  font-weight: var(--ed-h4-weight);
  line-height: var(--ed-h4-line-height);
  letter-spacing: var(--ed-h4-letter-spacing);
  margin-top: var(--ed-h4-margin-top);
  margin-bottom: var(--ed-h4-margin-bottom);
}
.ProseMirror h5 {
  font-size: var(--ed-h5-size);
  font-weight: var(--ed-h5-weight);
  line-height: var(--ed-h5-line-height);
  letter-spacing: var(--ed-h5-letter-spacing);
  margin-top: var(--ed-h5-margin-top);
  margin-bottom: var(--ed-h5-margin-bottom);
}
.ProseMirror h6 {
  font-size: var(--ed-h6-size);
  font-weight: var(--ed-h6-weight);
  line-height: var(--ed-h6-line-height);
  letter-spacing: var(--ed-h6-letter-spacing);
  margin-top: var(--ed-h6-margin-top);
  margin-bottom: var(--ed-h6-margin-bottom);
  color: var(--ed-h6-color);
}


/* ── Paragraphs ──────────────────────────────────────────────────────── */
.ProseMirror p {
  margin-bottom: var(--ed-paragraph-gap);
  font-weight: 400;
  text-wrap: pretty;
}
.ProseMirror p:last-child { margin-bottom: 0; }

.ProseMirror > :where(p, ul, ol, blockquote, pre, hr) {
  margin-top: 0;
  margin-bottom: var(--ed-block-gap);
}

.ProseMirror > :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol) {
  margin-top: 0;
}

.ProseMirror > :where(h1, h2, h3, h4, h5, h6) + :where(ul, ol) {
  margin-top: 0.18rem;
}

.ProseMirror :is(p[data-style-variant="caption"], .prose-image-caption, .table-data-block__caption, .table-data-block__footer) {
  width: min(100%, var(--ed-caption-max-width));
  margin-left: auto;
  margin-right: auto;
  font-size: var(--ed-caption-size);
  line-height: var(--ed-caption-line-height);
  letter-spacing: var(--ed-caption-letter-spacing);
  color: var(--ed-caption-color);
  font-style: normal;
}

.ProseMirror p[data-style-variant="caption"] {
  margin-top: var(--ed-caption-margin-top);
  margin-bottom: var(--ed-caption-margin-bottom);
  text-align: var(--ed-caption-align);
}

.ProseMirror > :is(p:has(.prose-image), p[data-style-variant="caption"]) + p[data-style-variant="caption"] {
  margin-top: calc(var(--ed-caption-margin-top) * 0.5);
}

.ProseMirror p[data-style-variant="caption"] + :where(p, ul, ol) {
  margin-top: 0.14rem;
}

.ProseMirror p[data-style-variant="note"] {
  margin-top: var(--ed-note-margin-top);
  margin-bottom: var(--ed-note-margin-bottom);
  padding: var(--ed-note-pad-y) var(--ed-note-pad-x);
  font-size: var(--ed-note-size);
  line-height: var(--ed-note-line-height);
  letter-spacing: var(--ed-note-letter-spacing);
  color: var(--ed-note-color);
  background: var(--ed-note-bg);
  border: 0;
  border-radius: var(--ed-note-radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ed-note-border) 26%, transparent);
  text-wrap: pretty;
}

.ProseMirror p[data-style-variant="note"] + p[data-style-variant="note"] {
  margin-top: calc(var(--ed-note-margin-top) * 0.5);
}

.ProseMirror p[data-style-variant="note"] + :where(p, ul, ol) {
  margin-top: 0.24rem;
}

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

.ProseMirror li { margin-bottom: 0.3em; }
.ProseMirror li p { margin-bottom: 0.2em; }
.ProseMirror li > p.is-editor-empty { min-height: 1.35em; }

/* ── Blockquote ──────────────────────────────────────────────────────── */
.ProseMirror blockquote {
  margin-top: var(--ed-quote-margin-top);
  margin-bottom: var(--ed-quote-margin-bottom);
  padding: var(--ed-quote-pad-y) var(--ed-quote-pad-right) var(--ed-quote-pad-y) var(--ed-quote-pad-left);
  font-size: var(--ed-quote-size);
  line-height: var(--ed-quote-line-height);
  letter-spacing: var(--ed-quote-letter-spacing);
  color: var(--ed-quote-color);
  background: var(--ed-quote-bg);
  border-left: var(--ed-quote-border-width) solid var(--ed-quote-accent);
  border-radius: 0 var(--ed-quote-radius) var(--ed-quote-radius) 0;
  font-style: normal;
  text-wrap: pretty;
}

.ProseMirror blockquote > :first-child {
  margin-top: 0;
}

.ProseMirror blockquote > :last-child {
  margin-bottom: 0;
}

.ProseMirror blockquote p {
  margin-bottom: 0.72em;
}

.ProseMirror blockquote + blockquote {
  margin-top: calc(var(--ed-quote-margin-top) * 0.5);
}

.ProseMirror blockquote + :where(p, ul, ol) {
  margin-top: 0.28rem;
}

/* ── Code ────────────────────────────────────────────────────────────── */
.ProseMirror code {
  font-family: var(--font-mono);
  font-size: var(--ed-code-inline-size);
  line-height: var(--ed-code-inline-line-height);
  background: var(--ed-code-inline-bg);
  border: 1px solid var(--ed-code-inline-border);
  border-radius: var(--ed-code-inline-radius);
  padding: var(--ed-code-inline-pad-y) var(--ed-code-inline-pad-x);
}

.ProseMirror pre {
  margin-top: var(--ed-code-block-margin-top);
  margin-bottom: var(--ed-code-block-margin-bottom);
  font-family: var(--font-mono);
  font-size: var(--ed-code-block-size);
  line-height: var(--ed-code-block-line-height);
  color: var(--ed-code-block-color);
  background: var(--ed-code-block-bg);
  border: 1px solid var(--ed-code-block-border);
  border-radius: var(--ed-code-block-radius);
  padding: var(--ed-code-block-pad-y) var(--ed-code-block-pad-x);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: var(--ed-code-block-tab-size);
}

.ProseMirror pre + pre {
  margin-top: calc(var(--ed-code-block-margin-top) * 0.6);
}

.ProseMirror pre + :where(p, ul, ol) {
  margin-top: 0.32rem;
}

.ProseMirror pre code {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: pre;
}

/* ── Horizontal rule ─────────────────────────────────────────────────── */
.ProseMirror hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border-strong) 88%, transparent);
  margin: calc(var(--ed-block-gap) * 1.35) 0;
}

/* ── Styled block integration ───────────────────────────────────────── */
.ProseMirror > :is(p[data-style-variant="note"], blockquote, pre) + :is(p[data-style-variant="note"], blockquote, pre) {
  margin-top: 0.52rem;
}

.ProseMirror > p[data-style-variant="caption"] + :is(p[data-style-variant="note"], blockquote, pre) {
  margin-top: 0.38rem;
}

.ProseMirror > :is(p[data-style-variant="note"], blockquote, pre) + p[data-style-variant="caption"] {
  margin-top: 0.42rem;
}

.ProseMirror > :is(h1, h2, h3, h4, h5, h6) + :is(p[data-style-variant="note"], blockquote, pre) {
  margin-top: 0.24rem;
}

.ProseMirror > :is(h1, h2, h3, h4, h5, h6) + p[data-style-variant="caption"] {
  margin-top: 0.08rem;
}

/* ── Links ───────────────────────────────────────────────────────────── */
.ProseMirror a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ProseMirror a:hover,
.ProseMirror a:focus-visible,
.ProseMirror a.is-context-target {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .12) 78%, transparent);
  text-decoration-thickness: 2px;
  outline: none;
}

/* ── 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 {
  /* Fallback for marks without an explicit colour */
  background: var(--mark-yellow);
  color: var(--mark-yellow-text-light);
  border-radius: 2px;
  padding: 0.05em 0.1em;
  /* TipTap writes style="background-color:…" which overrides the background above */
}

/* In dark mode the highlight backgrounds are dark, so text must be light */
[data-theme="dark"] .ProseMirror mark {
  color: var(--mark-yellow-text-dark);
}
/* ── Images ──────────────────────────────────────────────────────────── */
.ProseMirror .prose-image {
  max-width: 100%;
  border-radius: var(--r-md);
  margin: 1.2em auto;
  cursor: pointer;
}

.ProseMirror img.prose-image {
  display: block;
  height: auto !important;
}

.ProseMirror .prose-image[data-show-caption="true"] {
  display: inline-flex;
  flex-direction: column;
  gap: var(--ed-caption-image-gap);
}

.ProseMirror .prose-image-media {
  display: block;
  width: 100%;
  height: auto !important;
  border-radius: var(--r-md);
}

.ProseMirror .prose-image-caption {
  display: block;
  text-align: var(--ed-caption-image-align);
}

.ProseMirror .prose-image.align-left[data-width] {
  float: left;
  display: inline-block;
  margin: 0.4em 1.4em 0.8em 0;
}

.ProseMirror .prose-image.align-right[data-width] {
  float: right;
  display: inline-block;
  margin: 0.4em 0 0.8em 1.4em;
}

.ProseMirror .prose-image.align-center {
  display: block;
  float: none;
  margin: 1.2em auto;
}

.ProseMirror .prose-image.align-left:not([data-width]) {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: 0;
}

.ProseMirror .prose-image.align-right:not([data-width]) {
  display: block;
  float: none;
  margin-right: 0;
  margin-left: auto;
}

.ProseMirror::after { content: ''; display: table; clear: both; }

.ProseMirror .ProseMirror-selectednode .prose-image,
.ProseMirror .prose-image.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.citation-ref.is-context-target::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--accent-rgb), 0.12);
  pointer-events: none;
}

.ProseMirror .prose-image.is-context-target,
.ProseMirror img.is-context-target {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 3px;
}

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

.ProseMirror .column-resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: color-mix(in srgb, var(--accent) 72%, transparent);
  cursor: col-resize;
  z-index: 10;
}

@media (pointer: coarse) {
  .ProseMirror th,
  .ProseMirror td {
    padding: 0.68em 0.82em;
  }

  .ProseMirror .column-resize-handle {
    right: -8px;
    width: 16px;
    background-color: color-mix(in srgb, var(--accent) 40%, transparent);
  }

  .citation-ref,
  .ProseMirror a {
    min-height: 1.8em;
  }
}

/* ── Citation nodes ──────────────────────────────────────────────────── */
.citation-ref {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45em;
  padding: 0 .22em;
  margin-inline: .04em;
  color: var(--accent);
  font-size: 0.75em;
  vertical-align: super;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-ui);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.citation-ref:hover,
.citation-ref:focus-visible,
.citation-ref.is-context-target {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .14) 82%, transparent);
  text-decoration: underline;
  outline: none;
}
.ProseMirror h1 + p,
.ProseMirror h1 + h2,
.ProseMirror h2 + h3,
.ProseMirror h3 + h4 {
  margin-top: 0;
}

.ProseMirror ::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

}


/* ==== Source section: css/4-editor-print.css ==== */

@layer editor {
/* ════════════════════════════════════════════════════════════════════════
   PRINT / PDF EXPORT — strips all app chrome, formats document only
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide everything except the document content */
  #sidebar,
  #topbar,
  #toolbar-row,
  #stats-popover,
  #link-popover,
  #overlay,
  .tb-tooltip,
  [role="toolbar"] {
    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: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

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

  #editor-paper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: white !important;
  }

  #editor-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

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

  /* Typography — clean for print */
  .ProseMirror {
    font-size: 11pt !important;
    line-height: 1.6 !important;
    color: #000 !important;
    max-width: 100% !important;
  }

  .ProseMirror h1 { font-size: 19pt !important; line-height: 1.05 !important; margin: 0 0 11pt !important; }
  .ProseMirror h2 { font-size: 15.8pt !important; line-height: 1.09 !important; margin: 15pt 0 8pt !important; }
  .ProseMirror h3 { font-size: 13.2pt !important; line-height: 1.15 !important; margin: 12pt 0 6pt !important; }
  .ProseMirror h4 { font-size: 11.8pt !important; line-height: 1.2 !important; margin: 11pt 0 5pt !important; }
  .ProseMirror h5 { font-size: 11.2pt !important; line-height: 1.2 !important; margin: 11pt 0 5pt !important; font-weight: 635 !important; }
  .ProseMirror h6 { font-size: 11pt !important; line-height: 1.2 !important; margin: 10pt 0 5pt !important; color: #383838 !important; letter-spacing: 0.002em !important; font-weight: 620 !important; }
  .ProseMirror p  { margin: 0 0 8pt !important; orphans: 3; widows: 3; }
  .ProseMirror :is(p[data-style-variant="caption"], .prose-image-caption, .table-data-block__caption, .table-data-block__footer) { width: min(100%, 34rem) !important; margin-left: auto !important; margin-right: auto !important; font-size: 9.1pt !important; line-height: 1.46 !important; letter-spacing: 0.022em !important; color: #6c6c6c !important; font-style: normal !important; }
  .ProseMirror p[data-style-variant="caption"] { margin: 1pt auto 9pt !important; text-align: center !important; }
  .ProseMirror p[data-style-variant="note"] { margin: 1pt 0 10pt !important; padding: 7pt 10pt !important; font-size: 10pt !important; line-height: 1.58 !important; color: #333 !important; background: #fafafa !important; border: 0 !important; box-shadow: inset 0 0 0 0.6pt rgba(0, 0, 0, 0.08) !important; border-radius: 2pt !important; }
  .ProseMirror blockquote { margin: 2pt 0 12pt !important; padding: 8pt 12pt 8pt 11pt !important; font-size: 11pt !important; line-height: 1.62 !important; color: #262626 !important; background: #f7f7f5 !important; border-left: 2.5pt solid #8e98b8 !important; border-radius: 0 4pt 4pt 0 !important; font-style: normal !important; }
  .ProseMirror blockquote p { margin: 0 0 6pt !important; }
  .ProseMirror blockquote > :last-child { margin-bottom: 0 !important; }
  .ProseMirror code { font-family: 'JetBrains Mono', 'Courier New', monospace !important; font-size: 9.4pt !important; line-height: 1.42 !important; background: #f3f3f1 !important; border: 0.75pt solid #d7d2ca !important; border-radius: 3pt !important; padding: 0.08em 0.34em !important; }
  .ProseMirror pre { margin: 0 0 12pt !important; padding: 9pt 11pt !important; font-family: 'JetBrains Mono', 'Courier New', monospace !important; font-size: 9.5pt !important; line-height: 1.58 !important; color: #111 !important; background: #f5f5f3 !important; border: 0.8pt solid #d2cdc5 !important; border-radius: 5pt !important; overflow: visible !important; white-space: pre-wrap !important; word-break: break-word !important; }
  .ProseMirror pre code { display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; white-space: inherit !important; }

  .ProseMirror a { color: #000 !important; text-decoration: underline !important; text-underline-offset: 4px !important; }
  .ProseMirror u { text-underline-offset: 4px !important; }

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

  /* Preserve image float layout at print time.
     Use descendant selectors (not >) so the rules apply even when the
     image is wrapped in an <a> tag (e.g. pasted from Wikipedia). */
  .ProseMirror p:has(.prose-image.align-left[data-width]),
  .ProseMirror p:has(.prose-image.align-right[data-width]) {
    margin: 0 !important;
    padding: 0 !important;
  }
  .ProseMirror .prose-image.align-left[data-width] {
    float: left !important;
    margin: 0.4em 1.4em 0.8em 0 !important;
    display: inline-block !important;
  }
  .ProseMirror .prose-image.align-right[data-width] {
    float: right !important;
    margin: 0.4em 0 0.8em 1.4em !important;
    display: inline-block !important;
  }
  .ProseMirror .prose-image.align-center {
    float: none !important;
    display: block !important;
    margin: 1.2em auto !important;
  }
  .ProseMirror .prose-image.align-left:not([data-width]) {
    float: none !important;
    display: block !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  .ProseMirror .prose-image.align-right:not([data-width]) {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }


  .ProseMirror .prose-image-media { display:block; width:100%; height:auto !important; }
  .ProseMirror .prose-image-caption { display:block; text-align:center !important; }

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

  /* Hide search highlights (CSS Custom Highlight API) */
  ::highlight(search-results),
  ::highlight(search-current) {
    background-color: transparent !important;
    color: inherit !important;
  }

  /* Notes section */
  #notes-section {
    border-top: 1px solid #ccc !important;
    margin-top: 24pt !important;
    padding-top: 12pt !important;
    font-size: 9pt !important;
    color: #333 !important;
  }
}
}