/* Variables des étapes (assets/js/variables.js). */

/* Valeur d'une variable dans le texte d'une étape : surlignée, bien visible. */
.codex-var {
  padding: 0 .3em;
  border-radius: .25rem;
  background: rgba(var(--cx-violet-rgb, 98, 99, 252), .18);
  box-shadow: inset 0 -2px 0 rgba(var(--cx-violet-rgb, 98, 99, 252), .75);
  color: var(--cx-violet-800, #4046BA);
  font-weight: 600;
  overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .codex-var { color: var(--cx-violet-300, #898AFD); }

/* Sans valeur : le nom de la variable, à renseigner. */
.codex-var.is-vide {
  background: transparent;
  box-shadow: none;
  outline: 1px dashed rgba(var(--cx-violet-rgb, 98, 99, 252), .8);
  outline-offset: -1px;
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
  font-weight: 500;
}

/* Dans le code coloré par Prism (sans toucher au texte : ::highlight, cf. variables.js). */
::highlight(codex-var) { background-color: rgba(137, 138, 253, .38); }
::highlight(codex-var-vide) { text-decoration: underline dashed rgba(137, 138, 253, .95); }

/* Puce cliquable (volet de l'éditeur : insertion au curseur). */
.variables-puce {
  border: 0;
  line-height: 1.6;
  cursor: pointer;
}
.variables-puce:hover,
.variables-puce:focus-visible { background: rgba(var(--cx-violet-rgb, 98, 99, 252), .3); }

/* Suggestions « {{ » au curseur d'un champ texte (au-dessus des fenêtres de TinyMCE). */
.variables-suggestions {
  position: fixed;
  z-index: 20000;
  max-height: 14rem;
  overflow-y: auto;
  min-width: 12rem;
}

/* Champs de valeurs (consultation, création, fenêtre d'une exécution). */
.variables-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .5rem .75rem;
}

@media print {
  .codex-var { padding: 0; background: none; box-shadow: none; outline: none; color: inherit; font-weight: inherit; }
}