/* ==========================================================================
   Lexxy Editor — CoachOS Design System
   Single source of truth for the Lexxy custom-element shell across every
   surface that authors rich text or plain text with {{ variable }} prompts.
   Used by admin (Content editor, Question text, DM email subject, etc.)
   AND participation (RICH question Q-Web). Loaded after the Lexxy gem's
   base lexxy.css so DS overrides win.
   ========================================================================== */

/* ── .ds-lexxy-editor — full rich-text editor (toolbar + prose body) ── */
.ds-lexxy-editor {
  --lexxy-color-ink-lighter: var(--border-default);
  --lexxy-color-canvas: var(--input-bg);
  --lexxy-color-ink: var(--text-primary);
  --lexxy-color-ink-lightest: var(--surface-neutral);
  --lexxy-color-ink-medium: var(--text-tertiary);
  --lexxy-color-accent-dark: var(--accent-primary);
  --lexxy-color-selected: var(--accent-subtle);
  --lexxy-focus-ring-color: var(--border-focus);
  --lexxy-font-base: var(--font-body);
  --lexxy-radius: var(--radius-md);
  --lexxy-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
  --lexxy-editor-rows: auto;
  font-size: var(--text-sm);
}
/* Override global :focus-visible outline on contenteditable area —
   Lexxy's :where() has zero specificity and loses to the reset rule */
.ds-lexxy-editor .lexxy-editor__content {
  outline: none;
}
/* Hide image/file/upload buttons everywhere they render — main toolbar AND
   overflow menu — until direct-upload bugs are resolved. This is a single
   universal hide so every Lexxy surface (admin + participation) renders the
   same toolbar regardless of the `attachments` HTML attribute on the
   `<lexxy-editor>` element. The gem's own rules live inside `:where()` and
   have zero specificity, so a flat class-scoped selector wins.
   TODO: when direct-upload bugs are fixed, delete this block and decide per
   surface whether the buttons should be enabled (drop `attachments="false"`)
   or disabled (keep it). See docs/references/deferred_bugs.md. */
.ds-lexxy-editor lexxy-toolbar button[name="image"],
.ds-lexxy-editor lexxy-toolbar button[name="file"],
.ds-lexxy-editor lexxy-toolbar button[name="upload"],
.ds-lexxy-editor .lexxy-editor__toolbar-overflow-menu button[name="image"],
.ds-lexxy-editor .lexxy-editor__toolbar-overflow-menu button[name="file"],
.ds-lexxy-editor .lexxy-editor__toolbar-overflow-menu button[name="upload"] {
  display: none;
}

/* ── Lexxy prose body → components/prose.css (single source) ──
   The heading / paragraph / list / link / blockquote / code / image / hr /
   table / inline-mark rules for the editor body
   (.ds-lexxy-editor .lexxy-editor__content) now live ONCE in prose.css,
   shared with .rich-text (display) and .participation-text-answers__rich
   (member RICH answer) so the three surfaces can never diverge. Pre-soul
   sans/inherit typography — no soul routing. Study voice is element-gated
   (.rich-text--reading on participation Content only). Only the editor-shell-
   specific structural rules remain below. */

/* Suppress top margin on the first child of the editable region so an
   opening heading/blockquote/hr/img/table doesn't gap from the toolbar.
   Mid-document margins still apply (h2-after-p, etc.) — this only zeros
   the very first element. Both selectors are needed because Lexxy wraps
   content in .lexxy-editor__content; the second wins regardless of how
   deep the wrapper sits. (The .lexxy-editor__content > *:first-child case is
   also covered by prose.css; the .ds-lexxy-editor > :first-child — the
   toolbar — is editor-shell-only and kept here.) */
.ds-lexxy-editor > :first-child,
.ds-lexxy-editor .lexxy-editor__content > :first-child {
  margin-top: 0;
}
.ds-lexxy-editor .horizontal-divider { padding-left: 0; padding-right: 0; }
/* ── Variable prompt popup: escape nested overflow containers ──
   Lexxy sets `position: absolute` as an inline style (lexxy.js:11746)
   and calculates top/left relative to <lexxy-editor>. The popup is
   clipped by .experience-editor__editor's overflow-y:auto (which
   normalizes overflow-x to auto per CSS spec). !important overrides
   the inline style; the prompt-escape Stimulus controller converts
   editor-relative coords to viewport coords on each reposition. */
.ds-lexxy-editor .lexxy-prompt-menu {
  position: fixed !important;
  z-index: var(--z-dropdown, 1000);
  --lexxy-prompt-padding: var(--space-2);
  padding: var(--space-3) var(--space-2);
}

/* ── .ds-lexxy-input / .ds-lexxy-textarea — plain-text inputs styled like
   form-input/textarea, used for fields where {{ variable }} and
   [[ data_point ]] lookup prompts are needed but the field stores plain
   text (not rich HTML). ── */
.ds-lexxy-input,
.ds-lexxy-textarea {
  --lexxy-color-ink-lighter: var(--input-border);
  --lexxy-color-canvas: var(--input-bg);
  --lexxy-color-ink: var(--text-primary);
  --lexxy-color-ink-lightest: var(--surface-neutral);
  --lexxy-color-ink-medium: var(--text-tertiary);
  --lexxy-color-accent-dark: var(--accent-primary);
  --lexxy-color-selected: var(--accent-muted);
  --lexxy-focus-ring-color: var(--input-border-focus);
  --lexxy-font-base: var(--font-body);
  --lexxy-radius: var(--radius-lg);
  --lexxy-shadow: none;
  font-size: var(--text-sm);
  width: 100%;
}
.ds-lexxy-input {
  --lexxy-editor-rows: 1lh;
  --lexxy-content-margin: 0;
}
.ds-lexxy-textarea {
  --lexxy-editor-rows: 2lh;
  --lexxy-content-margin: 0;
}
/* Match form-input/textarea padding exactly.
   Override __content directly rather than --lexxy-editor-padding because
   Lexxy also uses that variable for placeholder inset positioning. */
.ds-lexxy-input .lexxy-editor__content,
.ds-lexxy-textarea .lexxy-editor__content {
  padding: var(--space-2) var(--space-3);
}
/* Remove paragraph bottom-margin inside plain-text editors */
.ds-lexxy-input p,
.ds-lexxy-textarea p { margin: 0; }
/* Prompt popup — same fixed positioning as .ds-lexxy-editor */
.ds-lexxy-input .lexxy-prompt-menu,
.ds-lexxy-textarea .lexxy-prompt-menu {
  position: fixed !important;
  z-index: var(--z-dropdown, 1000);
  --lexxy-prompt-padding: var(--space-2);
  padding: var(--space-3) var(--space-2);
}
/* Strip focus outline — Lexxy shell handles focus ring */
.ds-lexxy-input .lexxy-editor__content,
.ds-lexxy-textarea .lexxy-editor__content { outline: none; }