/* Make Lexxy (the rich-text editor + rendered ActionText) follow our theme.
   Lexxy ships a hardcoded light palette in :root; we remap its variables onto
   our semantic tokens, which already flip with dark mode — so the editor and
   rendered content theme themselves for free.

   :root:root has specificity (0,2,0), outranking Lexxy's own :root (0,1,0),
   so this wins regardless of stylesheet load order. */
:root:root {
  --lexxy-color-canvas: var(--color-bg);
  --lexxy-color-ink: var(--color-ink);
  --lexxy-color-ink-medium: var(--color-subtle-dark);
  --lexxy-color-ink-light: var(--color-subtle-dark);
  --lexxy-color-ink-lighter: var(--color-subtle);
  --lexxy-color-ink-lightest: var(--color-subtle-light);
  --lexxy-color-ink-inverted: var(--color-bg);

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

  --lexxy-color-selected: var(--color-selected);
  --lexxy-color-selected-dark: var(--color-selected-dark);

  --lexxy-focus-ring-color: var(--color-selected-dark);
  --lexxy-radius: 0.5em;
}

/* Match the editor frame to our .input fields (border color + focus). */
lexxy-editor {
  border-color: var(--color-subtle-dark);

  &:focus-within {
    border-color: var(--color-selected-dark);
  }
}

.lexxy-content {
  line-height: 1.6;
  overflow-wrap: break-word;
}

.lexxy-content img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 0.5em;
}

/* A quote inside the editor reads as a callout shell — so an author building a
   `[!ВАЖНО]` block sees a real, bounded block, not just indented text. The
   reader-side colour and label come from the marker on the first line
   (ApplicationHelper#render_callouts turns the quote into a `.callout`). */
lexxy-editor blockquote {
  background-color: var(--color-subtle-light);
  border-inline-start: 3px solid oklch(var(--lch-yellow));
  border-radius: 0 0.4em 0.4em 0;
  padding: 0.4lh var(--inline-space-double);
  font-style: normal;
}

/* The @-mention picker for internal lesson links. Lexxy's prompt menu is built
   for "avatar + short name"; our lesson TITLES are long, so widen it a touch and
   stack each row as title-over-profession instead of a squished flex pair. */
.lexxy-prompt-menu {
  min-inline-size: 26ch;
  max-inline-size: min(40ch, calc(100% - var(--lexxy-prompt-offset-x, 0)));
}

.lesson-link-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-inline-size: 0;
}

.lesson-link-item__title {
  line-height: 1.3;
}

.lesson-link-item__path {
  color: var(--lexxy-color-ink-medium);
  font-size: 0.85em;
}