/* L'éditeur riche PARTAGÉ (shared/_rich_editor) — messages, documents,
 * commentaires, notes de tâches, check-ins (mandat 2026-08-17).
 *
 * Même partition que le chat (chat_editor.css) et le pad (notes_pad.css) : la
 * feuille de Lexxy porte la MÉCANIQUE (barre, panneaux, grille du surligneur,
 * tableaux, code coloré), ici on pose NOS tokens par-dessus. Hors de toute
 * `@layer`, à dessein : en Tailwind v4 une règle posée dans une couche est
 * écrasée par les utilitaires, et la feuille de Lexxy écrit tout en
 * `:where(...)`, à spécificité nulle — n'importe quelle règle d'auteur la bat.
 *
 * Les styles de barre RESSEMBLENT à ceux du pad, et c'est voulu : même barre,
 * autre habit. Ils ne sont pas mutualisés parce que le mandat interdit de
 * toucher au pad — et parce que les deux contextes divergent là où ça compte :
 * le pad est un PANNEAU (l'éditeur remplit une colonne de hauteur fixe, sans
 * cadre), ici c'est un CHAMP de formulaire (un cadre, une hauteur naturelle,
 * un focus visible). La palette du surligneur (`--highlight-*`) vit déjà sur
 * `:root` dans notes_pad.css et sert les deux.
 *
 * Servi APP-WIDE par `stylesheet_link_tag :app` ; la feuille de Lexxy est liée
 * par le layout. */

/* ── Le cadre — un champ de formulaire, pas un panneau ──────────────────────
 *
 * Le dessin du composeur de commentaires historique (`rounded-xl border
 * border-loam-200 bg-white`), avec l'état de focus que les utilitaires ne
 * savent pas porter d'ici : le cadre s'allume quand ON ÉCRIT DEDANS. */
.tn-editor {
  border: 1px solid var(--color-loam-200);
  border-radius: 0.75rem;
  background-color: var(--color-white);
  transition: border-color 0.12s ease;
}

.tn-editor:focus-within {
  border-color: var(--color-brand-300);
}

/* ── Les tokens, sur les deux éléments ──────────────────────────────────────
 *
 * La barre est un FRÈRE de l'éditeur (promue avant lui — voir le partiel) et
 * n'hérite donc de rien : la liste est posée sur les deux, comme pour le chat
 * et le pad. */
/* Le POPOVER du typeahead @mention (ISC-610) vit DANS le <lexxy-editor> et
 * héritait donc du `--lexxy-color-canvas: transparent` posé ci-dessous pour
 * fondre l'éditeur dans son cadre de champ : menu au fond TRANSPARENT posé sur
 * le contenu de la page, items étroits tronqués (bug Michael 2026-08-19, vu
 * sur un composeur de commentaire). La peau du gem est en `:where()` (zéro
 * spécificité) — on la re-déclare ici, à la charte, pour TOUS les éditeurs
 * porteurs (spine, chat, pad : leurs trois overrides posent le même canvas
 * transparent). */
.lexxy-prompt-menu {
  min-width: 16rem;
  background-color: white;
  border: 1px solid var(--color-loam-200);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

lexxy-editor.tn-editor-field,
lexxy-toolbar.tn-editor-toolbar {
  --lexxy-color-ink: var(--color-loam-800);
  --lexxy-color-ink-medium: var(--color-loam-500);
  --lexxy-color-ink-light: var(--color-loam-400);
  --lexxy-color-ink-lighter: var(--color-loam-200);
  --lexxy-color-ink-lightest: var(--color-loam-100);
  --lexxy-color-canvas: transparent;
  --lexxy-color-text: var(--color-loam-800);
  --lexxy-color-text-subtle: var(--color-loam-400);
  --lexxy-color-link: var(--color-brand-700);
  --lexxy-color-selected: var(--color-loam-100);
  --lexxy-color-selected-hover: var(--color-loam-200);
  --lexxy-color-selected-dark: var(--color-brand-600);
  --lexxy-color-code-bg: var(--color-loam-100);
  --lexxy-color-accent-dark: var(--color-brand-600);
  --lexxy-focus-ring-color: transparent;
  --lexxy-font-base: var(--font-sans);
  --lexxy-radius: 0.25rem;

  /* La géométrie de barre du pad : boutons de 36 px espacés de 2. */
  --lexxy-toolbar-button-size: 2.25rem;
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-padding: 0.375rem;
  --lexxy-toolbar-border-size: 1px;
  --lexxy-toolbar-spacing: 0.5rem;
}

/* ── La barre ───────────────────────────────────────────────────────────────
 *
 * En tête du cadre, un filet sous elle — le repli reste `nowrap` : c'est le
 * ··· (mécanique de débordement de Lexxy) qui range les derniers boutons quand
 * la colonne est étroite, pas un retour à la ligne. */
lexxy-toolbar.tn-editor-toolbar {
  flex: none;
  flex-wrap: nowrap;
  border-block-end: 1px solid var(--color-loam-100);
  background-color: transparent;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  color: var(--color-loam-500);
}

.tn-editor-format-button {
  background-color: transparent;
  border: 0;
  border-radius: 0.25rem;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tn-editor-format-button:hover {
  background-color: var(--color-loam-100);
  color: var(--color-loam-700);
}

.tn-editor-format-button[aria-pressed="true"] {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}

.tn-editor-format-button[disabled] {
  color: var(--color-loam-300);
  cursor: default;
  background-color: transparent;
}

/* Nos icônes sont au TRAIT ; la feuille de Lexxy pose `svg { fill: currentColor }`
 * pour les siennes, qui sont pleines — sans la remise à zéro, chaque icône
 * devient une tache. */
.tn-editor-format-button svg {
  fill: none;
  stroke: currentColor;
  block-size: 1.125rem;
  inline-size: 1.125rem;
}

/* ── L'éditeur — hauteur naturelle, celle d'un champ ────────────────────────
 *
 * `min-block-size` sur le CONTENU : c'est lui qui reçoit la frappe, et 5rem est
 * l'invite du Trix qu'il remplace (`min-height: 5em` d'actiontext.css) — assez
 * pour dire « écris ici », pas assez pour manger l'écran. */
lexxy-editor.tn-editor-field {
  display: block;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-loam-800);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
}

lexxy-editor.tn-editor-field .lexxy-editor__content {
  min-block-size: 5rem;
  padding: 0.625rem 0.875rem;
}

/* Le texte d'invite, au ton de nos `placeholder:text-loam-400`. */
lexxy-editor.tn-editor-field.lexxy-editor--empty .lexxy-editor__content::before {
  color: var(--color-loam-400);
  opacity: 1;
}

/* ── Parité typographique éditeur ↔ rendu (#730) ────────────────────────────
 *
 * L'éditeur porte la classe `trix-content` (posée par le partial) : l'échelle
 * des titres, les listes, les citations d'actiontext.css s'appliquent en
 * sélecteurs DESCENDANTS. Mais le rythme vertical y est écrit en enfants
 * DIRECTS (`.trix-content > * + *`), que la structure Lexxy intercale d'un
 * niveau (`.lexxy-editor__content`) — on le rejoue ici, mêmes valeurs. */
lexxy-editor.tn-editor-field .lexxy-editor__content { line-height: 1.7; }
lexxy-editor.tn-editor-field .lexxy-editor__content > * + * { margin-top: 0.9em; }
lexxy-editor.tn-editor-field .lexxy-editor__content > :first-child { margin-top: 0; }
lexxy-editor.tn-editor-field .lexxy-editor__content > :last-child { margin-bottom: 0; }
lexxy-editor.tn-editor-field .lexxy-editor__content h1 + *,
lexxy-editor.tn-editor-field .lexxy-editor__content h2 + *,
lexxy-editor.tn-editor-field .lexxy-editor__content h3 + * { margin-top: 0.45em; }

/* ── Les panneaux déroulants de la barre ────────────────────────────────────
 *
 * Objets FLOTTANTS : détachés de la page, ils ont droit au cumul fond +
 * bordure + ombre que la règle du trait unique interdit à un bloc dans le
 * flux. Même dessin que ceux du chat et du pad. */
.tn-editor-format-dropdown {
  position: relative;
  display: inline-flex;
}

.tn-editor-format-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 20;
  min-inline-size: 13rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem;
  border: 1px solid var(--color-loam-200);
  border-radius: 0.75rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-modal);
}

.tn-editor-format-panel[hidden] {
  display: none;
}

.tn-editor-format-panel--link {
  min-inline-size: 17rem;
  gap: 0.5rem;
  padding: 0.5rem;
}

.tn-editor-format-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* La grille du surligneur est composée par Lexxy (`.lexxy-highlight-colors`,
 * pastilles « Aa » sur neuf colonnes) — on ne redessine pas la grille, on borne
 * le panneau et on habille le bouton de remise à zéro. */
.tn-editor-format-panel--highlight {
  min-inline-size: 0;
  gap: 0.5rem;
  padding: 0.5rem;
}

.tn-editor-format-reset {
  inline-size: 100%;
  border: 0;
  border-radius: 0.5rem;
  background-color: var(--color-loam-100);
  color: var(--color-loam-700);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0.375rem 0.5rem;
}

.tn-editor-format-reset:hover {
  background-color: var(--color-loam-200);
}

.tn-editor-format-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color-loam-700);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: start;
}

.tn-editor-format-menu-item:hover {
  background-color: var(--color-loam-100);
}

.tn-editor-format-menu-item svg {
  fill: none;
  stroke: currentColor;
  flex: none;
}

/* Le panneau de débordement empile des boutons d'icône : Lexxy y DÉPLACE les
 * boutons qui ne tiennent plus dans la barre, il ne les recompose pas. */
.lexxy-editor__toolbar-overflow .tn-editor-format-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: 0;
  flex-direction: row;
  flex-wrap: wrap;
  max-inline-size: 14rem;
}