/* ==========================================================================
   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: match .rich-text rendering exactly ── */
.ds-lexxy-editor h1 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; margin-top: var(--space-6); margin-bottom: var(--space-3); }
.ds-lexxy-editor h2 { font-size: var(--text-xl);  font-weight: 700; line-height: 1.25; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.ds-lexxy-editor h3 { font-size: var(--text-lg);  font-weight: 600; line-height: 1.3; margin-top: var(--space-4); margin-bottom: var(--space-2); }
/* 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. */
.ds-lexxy-editor > :first-child,
.ds-lexxy-editor .lexxy-editor__content > :first-child {
  margin-top: 0;
}
.ds-lexxy-editor p { margin-bottom: var(--space-3); }
.ds-lexxy-editor p:last-child { margin-bottom: 0; }
.ds-lexxy-editor ul,
.ds-lexxy-editor ol { margin-bottom: var(--space-3); padding-left: var(--space-6); }
.ds-lexxy-editor ul { list-style-type: disc; }
.ds-lexxy-editor ol { list-style-type: decimal; }
.ds-lexxy-editor li { margin-bottom: var(--space-1); }
.ds-lexxy-editor ul li::marker { color: var(--accent-primary); }
.ds-lexxy-editor ol li::marker { color: var(--text-secondary); font-weight: 600; }
.ds-lexxy-editor a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }
.ds-lexxy-editor a:hover { color: var(--accent-hover); }
.ds-lexxy-editor blockquote {
  border-left: 3px solid var(--border-strong);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-3) 0;
  background-color: var(--surface-neutral);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
  font-style: italic;
}
.ds-lexxy-editor pre {
  background-color: var(--surface-neutral);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-subtle);
}
.ds-lexxy-editor code {
  background-color: var(--surface-neutral);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.ds-lexxy-editor pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.ds-lexxy-editor del,
.ds-lexxy-editor s { text-decoration: line-through; color: var(--text-tertiary); }
.ds-lexxy-editor u { text-decoration: underline; text-underline-offset: 2px; }
.ds-lexxy-editor .horizontal-divider { padding-left: 0; padding-right: 0; }
.ds-lexxy-editor hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; width: 100%; }
.ds-lexxy-editor img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-3) 0; }
.ds-lexxy-editor table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: var(--space-3) 0; font-size: var(--text-sm);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-default);
}
.ds-lexxy-editor th,
.ds-lexxy-editor td { padding: var(--space-2) var(--space-3); text-align: left; border: none; }
.ds-lexxy-editor th { background-color: var(--surface-neutral); font-weight: 600; border-bottom: 1px solid var(--border-default); }
.ds-lexxy-editor td { border-bottom: 1px solid var(--border-default); }
.ds-lexxy-editor tr:last-child td,
.ds-lexxy-editor tr:last-child th { border-bottom: none; }
.ds-lexxy-editor th + th,
.ds-lexxy-editor td + td,
.ds-lexxy-editor th + td,
.ds-lexxy-editor td + th { border-left: 1px solid var(--border-default); }
.ds-lexxy-editor strong { font-weight: 700; }
.ds-lexxy-editor em { font-style: italic; }
/* ── 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; }