/* ============================================================
   progress_veil.css — voile d'attente (création / suppression)

   Feuille AUTONOME, chargée par le partial partials/_progress_veil.html : le
   même voile s'affiche depuis la page d'un modèle (qui ne charge que
   design/styles.css) ET depuis les cartes de modèles de l'Explorer ou de
   « Mes modèles » (qui ne chargent que css/app.css). Deux mondes de styles
   séparés, un seul widget : le mettre ici évite d'en tenir deux copies qui
   finiraient par diverger.

   Les couleurs passent par les variables de thème communes aux deux feuilles,
   avec un repli explicite pour celles qui pourraient manquer : un voile sans
   fond ni contraste serait pire qu'un voile un peu moins joli.
   ============================================================ */
.pveil-overlay{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--bg, #eceef1) 72%, transparent);
  backdrop-filter:blur(3px);
}
.pveil{
  width:min(420px,calc(100vw - 40px));
  background:var(--surface, #fff);
  border:1px solid var(--tpl-line, #d9c6ef);
  border-radius:14px;padding:20px 22px 18px;
  box-shadow:var(--shadow-lg, 0 18px 48px -12px rgba(20,23,28,.3));
  font-family:var(--sans, "IBM Plex Sans", system-ui, sans-serif);
}
.pveil-head{display:flex;align-items:center;gap:9px;
  color:var(--tpl, #8644c1);font-size:13.5px;font-weight:600;letter-spacing:.1px}
.pveil-head svg{flex:0 0 auto}
.pveil-src{margin:6px 0 14px;font-size:12.5px;color:var(--text-muted, #5b636e);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Piste et remplissage : mêmes proportions que la barre d'avancement de
   l'éditeur, pour que ce soit lu comme une barre de l'outil, pas un gadget. */
.pveil-bar{height:8px;border-radius:99px;background:var(--tpl-bg, #f3ebfb);overflow:hidden}
/* Pas de transition CSS sur la largeur : elle est déjà calculée image par image
   (requestAnimationFrame). En ajouter une ferait traîner la barre derrière sa
   propre valeur, et le 100 % arriverait après le départ de la page. */
.pveil-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg, var(--tpl, #8644c1), var(--tpl-strong, #6d2fa8))}
.pveil-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-top:10px}
.pveil-lbl{font-size:12px;color:var(--text-muted, #5b636e)}
.pveil-pct{font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:12px;font-weight:600;color:var(--tpl, #8644c1)}

/* ---------- Variante « suppression » : bordeaux ----------
   Un voile qui DÉFAIT ne doit pas ressembler à un voile qui crée. Le bordeaux
   est assez sombre pour ne pas se lire comme une alerte criarde (le rouge vif
   est déjà celui des erreurs et du bouton « Supprimer » de la confirmation), et
   assez rouge pour qu'on sache, sans lire, que quelque chose s'efface.
   Les valeurs vivent ici et non dans les feuilles de thème : ce voile est le
   seul endroit de l'application qui porte cette couleur.

   Le TEXTE et le REMPLISSAGE ont leurs propres tons. En mode nuit, un bordeaux
   assez clair pour être lu comme texte devient un rouge saumon quand on en
   remplit une barre : le texte s'éclaircit donc, la barre reste sombre. */
:root{
  --pveil-del-text:oklch(0.43 0.15 18);
  --pveil-del-bar:oklch(0.43 0.15 18);
  --pveil-del-bar2:oklch(0.33 0.13 18);
  --pveil-del-bg:oklch(0.94 0.035 18);
  --pveil-del-line:oklch(0.86 0.06 18);
}
:root[data-theme="dark"]{
  --pveil-del-text:oklch(0.72 0.14 20);
  --pveil-del-bar:oklch(0.50 0.16 19);
  --pveil-del-bar2:oklch(0.40 0.14 18);
  --pveil-del-bg:oklch(0.28 0.06 18);
  --pveil-del-line:oklch(0.40 0.09 18);
}
.pveil-overlay.is-delete .pveil{border-color:var(--pveil-del-line)}
.pveil-overlay.is-delete .pveil-head{color:var(--pveil-del-text)}
.pveil-overlay.is-delete .pveil-bar{background:var(--pveil-del-bg)}
.pveil-overlay.is-delete .pveil-bar i{
  background:linear-gradient(90deg, var(--pveil-del-bar), var(--pveil-del-bar2))}
.pveil-overlay.is-delete .pveil-pct{color:var(--pveil-del-text)}

/* ---------- Variante « duplication » : couleur du thème ----------
   Dupliquer n'est ni une copie de modèle (violet) ni une suppression
   (bordeaux) : c'est l'action ordinaire de l'outil, elle prend donc l'accent
   du thème. Aucune valeur en dur ici — les variables d'accent sont déjà
   redéfinies en mode nuit par la feuille de thème, la variante suit sans rien
   savoir du mode courant. */
.pveil-overlay.is-dup .pveil{border-color:var(--accent-line, #c9d4ef)}
.pveil-overlay.is-dup .pveil-head{color:var(--accent, #3b5bdb)}
.pveil-overlay.is-dup .pveil-bar{background:var(--accent-soft, #e8edfd)}
.pveil-overlay.is-dup .pveil-bar i{
  background:linear-gradient(90deg, var(--accent, #3b5bdb), var(--accent-press, #2f49b0))}
.pveil-overlay.is-dup .pveil-pct{color:var(--accent, #3b5bdb)}