/* CommentEditor: the Wordgard editor inside a framed panel. Wordgard renders custom elements
   (wordgard-editor, wg-panels, wg-content) and injects its own rules for them; these only
   place the editor in the page and hand it our tokens, so it follows the theme. */
/* `isolation: isolate`: **the editor's own layers stay inside it** (Reed, 9 Oct 2026: "the text
   editor's toolbar sits above the Send tray in z-order and covers it"). Wordgard makes its toolbar
   sticky at `z-index: 300`, its cursors 150 and its tooltips 500, numbers written for a page that
   is nothing but the editor; on ours they climbed over the tray, which is sticky at the foot at 10.
   A stacking context of its own keeps them in order among themselves and puts the whole editor
   where its box is in the page, so the tray wins on both sites without anyone counting higher. */
.comment-editor {
  isolation: isolate;
  background: var(--color-surface);
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
}

/* The editor's own frame, toolbar and focus ring are drawn from four custom properties, which it
   sets to fixed greys under a class of its own, a white toolbar in the dark theme among them. Set
   here from the tokens, on the element that defines them and one step more specific than its own
   rule, so HQ's composer and the customer's box both follow the theme and neither page repeats
   it. */
.comment-editor wordgard-editor {
  --wg-panel-color: var(--color-surface);
  --wg-border-color: var(--color-line);
  --wg-menu-color: var(--color-ink);
  --wg-highlight-color: var(--color-ink);
}

.comment-editor wg-content {
  min-height: 8em;
  padding: var(--space-3) var(--space-4);
}

.comment-editor wg-content p { max-width: none; }

.comment-editor wg-content img { max-width: 100%; height: auto; }

.comment-editor wg-content a { color: var(--color-accent); }