/* Bulle « Calcul » (js/variable-calc.js, nœud js/editor-nodes.js:createCalcBadgeNode) : la bulle de l'éditeur et la fenêtre où l'on écrit sa
   formule. Chargé après css/variable-actions.css, dont il reprend les boutons de fenêtre (.var-modal-actions) ; les notes sous un champ viennent
   de css/link-dialog.css (.pp-link-note). */

/* La bulle : même palette verte que les chips et le numéro de page (css/editor-v2.css : « valeur calculée, pas une colonne Grist »), pour rester
   distincte d'une bulle #Variable bleue, les deux cohabitant dans un même tableau de facture. Le texte commence par « = »
   (js/editor-nodes.js:calcLabel). En Lecture et à l'export elle est remplacée par son résultat. */
.tiptap .calc-badge { display: inline-block; position: relative; background: #e7f7ee; color: #146c43; border: 1px solid #b8e6cc; padding: 0 4px; border-radius: 3px; font-size: .92em; line-height: 1.4; }
/* Même repère que la bulle d'une variable (css/editor-v2.css) : un point en haut à droite quand un format nombre a été choisi à la barre
   flottante. */
.tiptap .calc-badge[data-format]::after { content: ''; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #2f6fed); border: 1px solid #fff; }
/* Bulle dont la formule ne se lit plus ou cite une colonne disparue (Editor.refreshVariableBadgeValidity) : même rouge et même triangle que
   .var-badge-broken (css/style.css) ; le message est dans l'info-bulle. */
.tiptap .calc-badge.calc-badge-broken { background: #fbe9e9; color: #a4231c; border-color: #f0b3b3; padding-right: 16px; cursor: help; }
.tiptap .calc-badge.calc-badge-broken::after {
  content: ""; position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 10px; height: 10px; border: 0; border-radius: 0; background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
}
/* Bulle choisie par un clic : même retour que la bulle d'une variable (css/variable-actions.css), un fond vert plus soutenu avec un texte plus
   sombre pour garder 4,5:1. */
.tiptap .calc-badge.ProseMirror-selectednode { background-color: #b9e3cb; color: #0f5a37; }
.tiptap .calc-badge.calc-badge-broken.ProseMirror-selectednode { background-color: #f3cccc; color: #a4231c; }
/* Dans une case de tableau ou une colonne de zone 2 colonnes : la formule est coupée au milieu par « … », comme le nom d'une variable
   (css/variable-actions.css, mêmes règles) : la bulle ne déborde pas sur la case voisine et ne passe pas sur plusieurs lignes. */
.tiptap :where(td, th, .two-columns-column) .calc-badge { display: inline-flex; max-width: 100%; box-sizing: border-box; }
.tiptap :where(td, th, .two-columns-column) .calc-badge-head { flex: 0 1000000 auto; min-width: min(1.3em, 40%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiptap :where(td, th, .two-columns-column) .calc-badge-tail { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-end; overflow: hidden; white-space: nowrap; }

/* Fenêtre « Insérer / Modifier le calcul » : le cadre, le libellé et le champ viennent de css/modal-base.css, les boutons de
   css/variable-actions.css. */
/* La liste « # » ouverte depuis le champ de la formule garde le niveau des menus (--z-menu, css/editor-v2.css) : js/variables.js la passe devant
   la fenêtre à chaque placement (Layers.raise(boîte, fenêtre), js/layers.js), sans niveau ni z-index de plus ici. */
.pp-calc-functions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.pp-calc-functions-label { margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--text); }
.pp-calc-function { font-family: var(--font-ui); font-size: 12px; font-weight: 600; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.pp-calc-function:hover { background: var(--surface-sunken); }
.pp-calc-function:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Le résultat pour la ligne courante, sous les fonctions : discret tant que le calcul se construit, le texte plein quand il aboutit ; après une
   validation refusée, le filet rouge (comme .pp-link-error : --danger ne fait que 4,4:1 sur blanc, le filet et le contour du champ portent
   l'erreur, le texte garde sa couleur). */
.pp-calc-status { min-height: 1.45em; margin: 14px 0 0; padding-left: 8px; border-left: 3px solid var(--border-strong); font-size: 12.5px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.pp-calc-status[data-state="ok"] { color: var(--text); font-weight: 600; border-left-color: var(--accent-solid); }
.pp-calc-status[data-state="error"] { color: var(--text); font-weight: 600; border-left-color: var(--danger); }
.pp-calc-box .pp-dialog-input[aria-invalid="true"] { border-color: var(--danger); }

/* Barre flottante d'une bulle (js/floating-toolbars.js) : « Modifier le calcul » n'existe que pour un calcul. `.v2-floating-toolbar button`
   (css/editor-v2.css) pose un `display` qui l'emporterait sur l'attribut `hidden`. */
.v2-floating-toolbar button[hidden] { display: none; }