@layer components {
  /* The writing surfaces: a task's notes, a project's, and the comment box.

     The editor draws its own chrome, so this is not a reimplementation of it —
     it is the product's tokens handed to it. Lexxy reads a set of custom
     properties for everything it paints, so telling it the answers once here
     is the whole of making it look like the rest of Pounce. */

  lexxy-editor,
  .lexxy-content {
    --lexxy-font-base: var(--font-sans);
    --lexxy-font-mono: var(--font-mono);

    --lexxy-color-canvas: transparent;
    --lexxy-color-text: var(--ink);
    --lexxy-color-text-subtle: var(--ink-muted);
    --lexxy-color-ink: var(--ink);
    --lexxy-color-ink-medium: var(--ink-muted);
    --lexxy-color-ink-light: var(--ink-faint);
    --lexxy-color-ink-lighter: var(--line-strong);
    --lexxy-color-ink-lightest: var(--line);
    --lexxy-color-ink-inverted: var(--canvas);

    --lexxy-color-link: var(--accent);
    --lexxy-color-accent-dark: var(--accent);
    --lexxy-color-accent-medium: var(--accent);
    --lexxy-color-accent-light: var(--accent-sunk);
    --lexxy-color-accent-lightest: var(--accent-sunk);

    --lexxy-color-selected: var(--accent-sunk);
    --lexxy-color-selected-hover: var(--surface-hover);
    --lexxy-color-code-bg: var(--surface-sunk);
    --lexxy-color-table-header-bg: var(--surface-sunk);
    --lexxy-color-table-cell-border: var(--line);
  }

  /* A writing surface, not a boxed field: full width, no border of its own, and
     the same measure-free run everything else on the page gets. A hard wrap two
     thirds across leaves a column of empty paper beside every line. */
  .task-detail__notes {
    /* Its own two, rather than a padding and a height of ours: the editor draws
       its box from these, so setting them is configuring it rather than
       overriding it. --lexxy-editor-rows is in `lh` units, so the field is a
       number of lines rather than a guess in rem. */
    --lexxy-editor-padding: var(--space-2);
    --lexxy-editor-rows: 8lh;

    font-size: var(--text-base);
    line-height: var(--leading-body);
    margin-inline: calc(var(--space-2) * -1);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    transition: background var(--transition), border-color var(--transition), var(--responds);
  }

  /* base.css caps every `p` at --measure, which is right for prose somebody only
     reads and wrong for a box they are writing in: it wrapped the line two
     thirds of the way across and left a column of empty paper to the right.
     Turned off rather than left unset, because --measure would otherwise win.

     The editor keeps its paragraphs inside `.lexxy-editor__content`, so a child
     selector on `lexxy-editor` never reaches them — which is how the cap came
     back unnoticed in the move off Trix. */
  lexxy-editor :is(p, h1, h2, h3, ul, ol, blockquote, pre),
  .lexxy-content > * { max-width: none; }

  .notes { display: flex; flex-direction: column; gap: var(--space); position: relative; }

  /* The notes keep their toolbar. The comment box is on a preset that has none
     — see application.js for why a reply box is not a document. */

  /* What was written, set on the same scale as everything else on the page. */
  .lexxy-content h1, lexxy-editor h1 {
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    margin: var(--space-3) 0 var(--space);
  }

  .lexxy-content blockquote, lexxy-editor blockquote {
    margin: var(--space-2) 0;
    padding-left: var(--space-2);
    border-left: 3px solid var(--line-strong);
    color: var(--ink-muted);
  }

  .lexxy-content pre, lexxy-editor pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    overflow-x: auto;
    white-space: pre-wrap;
  }

  .lexxy-content ul, .lexxy-content ol,
  lexxy-editor ul, lexxy-editor ol {
    padding-left: var(--space-3);
    margin: var(--space) 0;
  }

  .lexxy-content li, lexxy-editor li { margin-bottom: calc(var(--space) / 2); }
}