/* Le bloc-notes « Mes notes » — le pad de la barre du bas (parité Basecamp).
 *
 * Même partition que l'éditeur du chat (chat_editor.css) : la feuille de Lexxy
 * porte la MÉCANIQUE (barre, panneaux, grille du surligneur, tableaux), 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.
 *
 * La palette du surligneur vit sur :root : les pastilles naissent dans la barre,
 * les encres s'appliquent dans l'éditeur — deux sous-arbres, une seule source.
 * Ce sont les 18 valeurs de leur pad (lexxy-variables.css), reprises telles
 * quelles : c'est une palette de SURLIGNAGE, pas la charte — neuf encres, neuf
 * fonds, et l'utilisateur choisit. */

:root {
  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3);
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3);
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3);
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);
}

/* ── Les tokens, sur les deux éléments ───────────────────────────────────────
 *
 * La barre est un FRÈRE de l'éditeur (promue avant lui — voir _pad.html.erb) et
 * n'hérite donc de rien : la liste est posée sur les deux, comme pour le chat. */
lexxy-editor.tn-pad-editor,
lexxy-toolbar.tn-pad-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: var(--color-white);
  --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;

  /* Leur pad : des boutons de 36 px espacés de 2, une barre au filet d'un pixel. */
  --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 ────────────────────────────────────────────────────────────────
 *
 * Blanche, un filet sous elle — c'est le panneau qui porte le cadre. */
lexxy-toolbar.tn-pad-toolbar {
  flex: none;
  flex-wrap: nowrap;
  border-block-end: 1px solid var(--color-loam-100);
  background-color: var(--color-white);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  color: var(--color-loam-500);
}

.tn-pad-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-pad-format-button:hover {
  background-color: var(--color-loam-100);
  color: var(--color-loam-700);
}

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

.tn-pad-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-pad-format-button svg {
  fill: none;
  stroke: currentColor;
  block-size: 1.125rem;
  inline-size: 1.125rem;
}

/* ── L'éditeur, qui REMPLIT le panneau ───────────────────────────────────────
 *
 * Le panneau est une colonne flex de hauteur fixe (shared/_my_bar_tray, `wide`) :
 * la barre garde sa hauteur, l'éditeur prend le reste, et c'est SON contenu qui
 * défile — la barre ne quitte jamais l'écran. */
lexxy-editor.tn-pad-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  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-pad-editor .lexxy-editor__content {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

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

/* ── Les listes de tâches ────────────────────────────────────────────────────
 *
 * Le nœud « check » de Lexical rend des li[role="checkbox"] aria-checked SANS
 * classe de thème (le thème du bundle n'en déclare pas) : on style l'attribut,
 * qui est aussi ce que le HTML enregistré porte. La case est dessinée en
 * ::before dans le retrait gauche du li — la bande sur laquelle
 * notes_checklist_controller.js fait porter le clic (28 px, à garder alignés). */
lexxy-editor.tn-pad-editor ul:has(> li[role="checkbox"]) {
  list-style: none;
  padding-inline-start: 0;
}

lexxy-editor.tn-pad-editor li[role="checkbox"] {
  position: relative;
  padding-inline-start: 1.75rem;
}

lexxy-editor.tn-pad-editor li[role="checkbox"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.125rem;
  inset-block-start: 0.25rem;
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid var(--color-loam-300);
  border-radius: 0.25rem;
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

lexxy-editor.tn-pad-editor li[role="checkbox"]:hover::before {
  border-color: var(--color-brand-600);
}

lexxy-editor.tn-pad-editor li[role="checkbox"][aria-checked="true"]::before {
  border-color: var(--color-brand-600);
  background-color: var(--color-brand-600);
}

/* La coche : deux bords d'un carré tourné — pas d'image, la couleur reste un
 * token. Posée en ::after pour laisser la case (::before) à sa transition. */
lexxy-editor.tn-pad-editor li[role="checkbox"][aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.4375rem;
  inset-block-start: 0.4375rem;
  inline-size: 0.375rem;
  block-size: 0.625rem;
  border-inline-end: 2px solid var(--color-white);
  border-block-end: 2px solid var(--color-white);
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events: none;
}

/* Une tâche cochée est FAITE : le texte se raye et s'éteint, comme leurs to-dos. */
lexxy-editor.tn-pad-editor li[role="checkbox"][aria-checked="true"] {
  color: var(--color-loam-400);
  text-decoration: line-through;
}

/* ── 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. */
.tn-pad-format-dropdown {
  position: relative;
  display: inline-flex;
}

.tn-pad-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-pad-format-panel[hidden] {
  display: none;
}

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

.tn-pad-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-pad-format-panel--highlight {
  min-inline-size: 0;
  gap: 0.5rem;
  padding: 0.5rem;
}

.tn-pad-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-pad-format-reset:hover {
  background-color: var(--color-loam-200);
}

.tn-pad-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-pad-format-menu-item:hover {
  background-color: var(--color-loam-100);
}

.tn-pad-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-pad-format-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: 0;
  flex-direction: row;
  flex-wrap: wrap;
  max-inline-size: 14rem;
}