/* Lexxy Editor overrides */
/* Loaded after lexxy.css. The gem writes its rules with :where(), which has
   zero specificity, so plain class selectors here win without !important. */

/* The mention menu ships 20ch wide, which truncates most recipe and post
   titles to about three words. Widen it and give the drop shadow enough
   contrast to read as a floating panel over the editor. */
.lexxy-prompt-menu {
  min-inline-size: 30ch;
  max-inline-size: min(44ch, calc(100% - var(--lexxy-prompt-offset-x)));
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.14), 0 1px 3px rgb(0 0 0 / 0.08);
}

.lexxy-prompt-menu[data-clipped-at-right] {
  max-inline-size: calc(100% - 1ch);
}

/* Content mentions ("&") carry a light-yellow highlight while you are editing,
   so they read as an inserted object rather than a link you typed. On the
   published page they render as an ordinary link, so this is scoped to the
   editor. */
lexxy-editor .content-mention {
  background-color: oklch(97% 0.06 100);
  border-radius: 0.25rem;
  padding-inline: 0.25rem;
}

:root[data-theme="dark"] lexxy-editor .content-mention {
  background-color: oklch(35% 0.05 100);
}

/* Keep the formatting toolbar in view while you scroll a long post. The
   toolbar is transparent by default, so it needs the editor's own background
   painted in or the text scrolls through it. It sticks to the top of the
   window and stops at the bottom edge of the editor. */
lexxy-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--lexxy-color-canvas);
  border-start-start-radius: var(--lexxy-radius);
  border-start-end-radius: var(--lexxy-radius);
}

/* Re-word a mention: click one in the editor and this opens under it, with the
   current words in the field. Positioned from the page, not the editor, so it
   is never clipped by the editor's own overflow. */
.lexxy-mention-text {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--lexxy-color-border, oklch(90% 0 0));
  border-radius: 0.5rem;
  background-color: var(--lexxy-color-canvas, white);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.15);
}

.lexxy-mention-text[hidden] {
  display: none;
}

.lexxy-mention-text input {
  min-width: 16rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--lexxy-color-border, oklch(90% 0 0));
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  font: inherit;
}

.lexxy-mention-text button {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--lexxy-color-accent, oklch(55% 0.15 250));
  color: white;
  font: inherit;
  cursor: pointer;
}

.lexxy-mention-text a {
  white-space: nowrap;
  font-size: 0.875rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
}

.lexxy-mention-text a[hidden] {
  display: none;
}