/* Edit-page-only overrides for Lexxy editors. Loaded AFTER lexxy.css so these
   unlayered rules win over Lexxy's own (which uses zero-specificity :where()).

   Goals:
   - Editors look like real, obviously-editable input fields.
   - The formatting toolbar appears only on focus, and floats (absolute) so
     focusing a field never shifts the page layout. */

lexxy-editor {
  display: block;
  position: relative;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  border-radius: 0.5rem;
  background-color: #fff;
  --lexxy-editor-padding: 0.5rem 0.75rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

@media (any-hover: hover) {
  lexxy-editor:hover:not(:focus-within) {
    border-color: rgb(203 213 225); /* slate-300 */
  }
}

lexxy-editor:focus-within {
  border-color: rgb(45 212 191); /* teal-400 */
  box-shadow: 0 0 0 3px rgb(20 184 166 / 0.15);
  outline: none;
}

/* Trim the leading/trailing block margins (from typography styles) so the field
   hugs its text instead of carrying tall empty space top and bottom. */
lexxy-editor .lexxy-editor__content > :first-child {
  margin-top: 0;
}
lexxy-editor .lexxy-editor__content > :last-child {
  margin-bottom: 0;
}

/* Formatting toolbar: hidden until focus, then floats above the field as a
   popover so it never pushes content around. */
lexxy-editor lexxy-toolbar {
  display: none;
}

lexxy-editor:focus-within lexxy-toolbar {
  display: flex;
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 30;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  background-color: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.12);
}