@layer components {
  /* A document read in place: body text at 14px, headings shifted under the document's own title. */
  .document-body {
    --reading-measure: 680px;
    display: flex; flex-direction: column; gap: 12px;
    font-size: 14px; line-height: 1.6; color: var(--foreground); overflow-wrap: anywhere; text-wrap: pretty;
  }
  .document-body > * { margin: 0; }
  /* Text reads in a column; tables, blocks and rules (the other children) take the container's width. */
  .document-body > :is(p, h2, h3, h4, ul, ol, blockquote, pre) { max-width: var(--reading-measure); }
  .document-body h2, .document-body h3, .document-body h4 {
    margin: 12px 0 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.3; scroll-margin-top: 16px;
  }
  .document-body h2 { font-size: 20px; }
  .document-body h3 { font-size: 16px; }
  .document-body h4 { font-size: 14px; }
  .document-body > :first-child { margin-top: 0; }
  .document-body p { margin: 0; }
  .document-body ul, .document-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
  .document-body li > ul, .document-body li > ol { margin-top: 4px; }
  /* A task line hangs its box in the padding (where a bullet would be), so wrapped text and nested lists line up under the first line. */
  .document-body li:has(> input[type=checkbox]) { list-style: none; margin-left: -22px; padding-left: 22px; }
  .document-body li > input[type=checkbox] { float: left; font: inherit; width: 13px; height: 13px; margin: calc((1lh - 13px) / 2) 0 0 -22px; accent-color: var(--muted-foreground); }
  /* A box a reader may tick (enabled by script); a ticked line is struck and dimmed, not only colored. A line with
     nested items keeps its text: a strike would run through them. */
  .document-body input[type=checkbox]:enabled { accent-color: var(--primary); cursor: pointer; }
  .document-body li:has(> input[type=checkbox]:checked):not(:has(> ul, > ol)) {
    color: var(--muted-foreground); text-decoration: line-through;
  }
  /* On a touch screen the whole line of a box a reader may tick is the target, 44 px high at least. */
  @media (pointer: coarse) {
    .document-body li:has(> input[data-task-index]:enabled) { padding-block: calc((var(--tap) - 1lh) / 2) 0; padding-left: 28px; }
    .document-body li:has(> input[data-task-index]:enabled):not(:has(> ul, > ol)) { padding-bottom: calc((var(--tap) - 1lh) / 2); }
    .document-body input[data-task-index]:enabled { width: 20px; height: 20px; margin: calc((1lh - 20px) / 2) 0 0 -28px; }
  }
  .document-body blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted-foreground); }
  .document-body code { font-family: var(--font-mono); font-size: 13px; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--muted); }
  .document-body pre { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--muted); overflow-x: auto; }
  .document-body pre code { padding: 0; background: none; }
  .document-body hr { width: 100%; border: 0; border-top: 1px solid var(--border); }
  .document-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  /* Images: sizes and alignment from a closed list of classes, never a style; width and height avoid any shift.
     An image inside a link has no line class: the base rule still bounds it. */
  .document-body .doc-image { max-width: 100%; height: auto; border-radius: var(--radius-sm); vertical-align: middle; }
  .document-body .doc-image--w25 { width: 25%; }
  .document-body .doc-image--w50 { width: 50%; }
  .document-body .doc-image--w100 { width: 100%; }
  /* The button that enlarges an image takes the image's line width, so the percentage classes still hold. */
  .document-body .doc-image-zoom { display: inline-block; max-width: 100%; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; line-height: 0; vertical-align: middle; cursor: zoom-in;
    border-radius: var(--radius-sm); }
  .document-body .doc-image-zoom:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .document-body .doc-image-zoom:has(> .doc-image--w25) { width: 25%; }
  .document-body .doc-image-zoom:has(> .doc-image--w50) { width: 50%; }
  .document-body .doc-image-zoom:has(> .doc-image--w100) { width: 100%; }
  .document-body .doc-image-zoom > .doc-image { width: 100%; }
  .document-body .doc-image-zoom > .doc-image:not([class*="doc-image--w"]) { width: auto; }
  .document-body .doc-image-line { margin-block: 12px; }
  .document-body .doc-image-line--center { text-align: center; }
  .document-body .doc-image-line--right { text-align: end; }
  .document-body .doc-image-missing { display: none; }
  [data-editable="true"] .doc-image-missing { display: inline-flex; margin-inline-start: 8px;
    font-size: var(--text-meta); color: var(--muted-foreground); }
  @media (max-width: 767px) {
    .document-body .doc-image--w25 { width: 50%; }
    .document-body .doc-image--w50 { width: 100%; }
    .document-body .doc-image-zoom:has(> .doc-image--w25) { width: 50%; }
    .document-body .doc-image-zoom:has(> .doc-image--w50) { width: 100%; }
  }

  /* Tables written in Markdown, typed tables and the editor's share one look: a framed box that scrolls sideways,
     a header on the surface color, a line under each row and none between columns. */
  .document-body :is(.table-wrap, .tableWrapper, .typed-table-wrap) {
    overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .document-body table { width: 100%; border-collapse: collapse; font-size: 13px; overflow-wrap: normal; }
  .document-body th, .document-body td {
    min-width: 6rem; padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top;
  }
  .document-body th { padding-block: 8px; font-weight: 600; color: var(--muted-foreground); background: var(--surface); }
  .document-body :is(tbody, thead):last-child > tr:last-child > * { border-bottom: 0; }
  /* The chart's fallback table has no frame: its row headers keep the plain background. */
  .document-body .chart-fallback th { background: none; }
  .document-body [align=right] { text-align: right; }
  .document-body [align=center] { text-align: center; }
  .document-body caption { caption-side: top; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; font-weight: 600; color: var(--foreground); }

  /* A touch screen wide enough for the in-place editor reads at the size the editor writes in: nothing jumps. */
  @media (pointer: coarse) and (min-width: 1100px) {
    .document-view-text .document-body { font-size: 1rem; line-height: 1.6; }
    .document-view-text .document-body h2 { font-size: 1.125rem; }
    .document-view-text .document-body h3 { font-size: 1rem; }
  }

  /* Phones: 16 px at 1.6 for a long read, headings in proportion. */
  @media (max-width: 767px) {
    .document-view--page .document-body { font-size: 1rem; line-height: 1.6; }
    .document-view--page .document-body h2 { font-size: 1.125rem; }
    .document-view--page .document-body h3 { font-size: 1rem; }
  }

  /* Named colors of a document's spans: the theme picks the shade, the words keep the meaning. */
  .doc-color-gray { color: var(--doc-color-gray); }
  .doc-color-brown { color: var(--doc-color-brown); }
  .doc-color-orange { color: var(--doc-color-orange); }
  .doc-color-yellow { color: var(--doc-color-yellow); }
  .doc-color-green { color: var(--doc-color-green); }
  .doc-color-blue { color: var(--doc-color-blue); }
  .doc-color-purple { color: var(--doc-color-purple); }
  .doc-color-pink { color: var(--doc-color-pink); }
  .doc-color-red { color: var(--doc-color-red); }
  .doc-bg-gray { background: var(--doc-bg-gray); }
  .doc-bg-brown { background: var(--doc-bg-brown); }
  .doc-bg-orange { background: var(--doc-bg-orange); }
  .doc-bg-yellow { background: var(--doc-bg-yellow); }
  .doc-bg-green { background: var(--doc-bg-green); }
  .doc-bg-blue { background: var(--doc-bg-blue); }
  .doc-bg-purple { background: var(--doc-bg-purple); }
  .doc-bg-pink { background: var(--doc-bg-pink); }
  .doc-bg-red { background: var(--doc-bg-red); }
  [class*="doc-bg-"] { padding: 0 2px; border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}