@layer components {
  /* What every editable surface needs (TipTap's own stylesheet, never injected: the page's policy refuses a <style>
     without its nonce). */
  .ProseMirror {
    position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces;
    font-variant-ligatures: none; font-feature-settings: "liga" 0;
  }
  .ProseMirror [contenteditable="false"] { white-space: normal; }
  .ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space: pre-wrap; }
  .ProseMirror pre { white-space: pre-wrap; }
  img.ProseMirror-separator {
    display: inline !important; border: none !important; margin: 0 !important; width: 0 !important; height: 0 !important;
  }
  .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
  .ProseMirror-gapcursor::after {
    content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--foreground);
    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
  }
  @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
  .ProseMirror-hideselection *::selection { background: transparent; }
  .ProseMirror-hideselection * { caret-color: transparent; }
  .ProseMirror-focused .ProseMirror-gapcursor { display: block; }

  /* The editor reads like the document: what TipTap draws differently from the server's HTML. */
  .visual-editor-text { min-height: 120px; outline: none; }
  .visual-editor-text li > p { margin: 0; }
  .visual-editor-text ul[data-type="taskList"] { padding-left: 22px; }
  .visual-editor-text li[data-checked] { display: flex; list-style: none; margin-left: -22px; }
  .visual-editor-text li[data-checked] > label { flex: none; width: 22px; }
  .visual-editor-text li[data-checked] > label input {
    width: 13px; height: 13px; margin: calc((1lh - 13px) / 2) 0 0; accent-color: var(--primary);
  }
  .visual-editor-text li[data-checked] > div { flex: 1; min-width: 0; }
  .visual-editor-text li[data-checked="true"]:not(:has(ul, ol)) > div {
    color: var(--muted-foreground); text-decoration: line-through;
  }
  /* iOS zooms into a field under 16 px, and the contenteditable is not covered by the rule for fields. Both classes,
     so the sizes outweigh the read text's whatever the order of the files. */
  @media (max-width: 1099px), (pointer: coarse) {
    .document-body.visual-editor-text { font-size: 1rem; line-height: 1.6; }
    .document-body.visual-editor-text h2 { font-size: 1.125rem; }
    .document-body.visual-editor-text h3 { font-size: 1rem; }
  }
  /* A task line takes the touch reading's measures (44 px row, 28 px indent, 20 px box at -28 px), so the text does not
     move when the editor replaces the reading. */
  @media (pointer: coarse) {
    .visual-editor-text li[data-checked] { margin-left: -22px; padding-left: 28px; padding-block: calc((var(--tap) - 1lh) / 2) 0; }
    .visual-editor-text li[data-checked]:not(:has(> div > :is(ul, ol))) { padding-bottom: calc((var(--tap) - 1lh) / 2); }
    .visual-editor-text li[data-checked] > label { width: 28px; margin-left: -28px; }
    .visual-editor-text li[data-checked] > label input { width: 20px; height: 20px; margin-top: calc((1lh - 20px) / 2); }
  }
  /* A selected cell hides the text selection: tint it. */
  .visual-editor-text .selectedCell { position: relative; }
  .visual-editor-text .selectedCell::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: color-mix(in oklch, var(--ring) 22%, transparent);
  }
}