@layer components {
  

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

  .task-detail__notes {
    
    --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: var(--line-w) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    transition: background var(--transition), border-color var(--transition), var(--responds);
  }

  
  lexxy-editor :is(p, h1, h2, h3, ul, ol, blockquote, pre),
  .lexxy-content > * { max-width: none; }

  
  lexxy-editor [data-dropdown-panel] {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-card);
  }

  
  .attachment__size { font-size: var(--text-sm); color: var(--ink-faint); }

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

  
  .notes__conflict[hidden] { display: none; }

  

  
  .task-detail__notes lexxy-toolbar button[name="image"],
  .task-detail__notes lexxy-toolbar button[name="file"],
  .task-detail__notes lexxy-toolbar button[name="strikethrough"],
  .task-detail__notes lexxy-toolbar button[name="underline"] {
    display: none;
  }

  
  .task-detail__notes lexxy-toolbar > .lexxy-editor__toolbar-overflow {
    margin-inline-start: 0;
  }

  
  .task-detail__notes lexxy-toolbar {
    --lexxy-toolbar-button-size: var(--control-h-sm);
    --lexxy-toolbar-icon-size: 1.25rem;
  }

  
  .task-detail__notes lexxy-toolbar {
    position: sticky;
    top: calc(var(--masthead-h) + var(--safe-top));
    z-index: 1;
    
    border-block-end-color: transparent;
    background:
      linear-gradient(var(--line), var(--line)) center bottom / calc(100% - var(--space-2) * 2) var(--line-w) no-repeat,
      var(--canvas);
  }

  .task-detail__notes lexxy-toolbar > .lexxy-editor__toolbar-button,
  .task-detail__notes lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button {
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  .task-detail__notes lexxy-toolbar > .lexxy-editor__toolbar-button:hover,
  .task-detail__notes lexxy-toolbar > .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
    color: var(--ink);
  }

  
  .notes-copy-button svg { fill: none; }

  .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:not(.lexxy-prompt-menu), .lexxy-content ol,
  lexxy-editor ul:not(.lexxy-prompt-menu), lexxy-editor ol {
    padding-left: var(--space-3);
    margin: var(--space) 0;
  }

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