/* -------------------------------------------------------------------------
 * editor_svg.css — le parti d'interfaccia comuni agli editor che producono un
 * SVG da un modello JSON (js/local/editor_svg.js): barra di ripescaggio del
 * lavoro non salvato e tavolozza delle combinazioni di colore.
 *
 * Il resto dell'impaginazione resta a ciascuna pagina, che ha la sua.
 * ------------------------------------------------------------------------- */

/* CAMPI DEI MODULI — alti come nel resto del portale. Le pagine di gestione usano
   form-control-sm / form-select-sm di Bootstrap: 31 px, testo a 14 px, margine
   interno 4/8 px. Qui le stesse misure (la formula dell'altezza e' quella di
   Bootstrap, con le sue variabili), senza le classi: quelle portano anche
   width: 100% e display: block, che nelle righe a flex del pannello mandano a
   capo ogni menu. La classe .eds-campi sta sul contenitore delle schede di ogni
   editor (dir_lang/<lingua>.<pagina>.php), e vale per barra, pannello, tabella
   delle frecce e filtro. L'altezza esplicita vince anche sull'1rem che
   css/common/form.css da' a tutti i campi numerici del sito. */
.eds-campi input:not([type=checkbox]):not([type=radio]):not([type=color]),
.eds-campi select,
.eds-campi textarea {
  font-size: .875rem; line-height: 1.5; padding: .25rem .5rem;
  color: var(--bs-body-color, #212529); background-color: var(--bs-body-bg, #fff);
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius-sm, .25rem);
}
.eds-campi input:not([type=checkbox]):not([type=radio]):not([type=color]),
.eds-campi select { height: calc(1.5em + .5rem + calc(var(--bs-border-width, 1px) * 2)); }
.eds-campi textarea { min-height: calc(1.5em + .5rem + calc(var(--bs-border-width, 1px) * 2)); }
/* il selettore del colore: alto come gli altri, con il campione quasi a filo */
.eds-campi input[type=color] {
  height: calc(.875rem * 1.5 + .5rem + calc(var(--bs-border-width, 1px) * 2)); padding: .15rem;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius-sm, .25rem);
}
.eds-campi input:not([type=checkbox]):not([type=radio]):focus,
.eds-campi select:focus,
.eds-campi textarea:focus {
  border-color: #86b7fe; outline: 0;
  box-shadow: 0 0 0 var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(13, 110, 253, .25));
}

/* Compare solo se nel browser c'è un lavoro non salvato. */
.eds-ripesca {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .4rem .6rem; margin-bottom: .6rem; font-size: .84rem;
  border: 1px solid #ffe69c; border-radius: 6px; background: #fff8e1; color: #664d03;
}

/* Quadretti con lo sfondo dentro e il bordo attorno: quello che si otterrà
   davvero applicandoli. */
.eds-tav-riga { display: flex; flex-wrap: wrap; gap: .25rem; margin: .1rem 0 .2rem; }
.eds-tav {
  width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer;
  border: 2px solid #333; border-radius: 4px;
}
.eds-tav:hover { outline: 2px solid #0d6efd; outline-offset: 1px; }

/* -------------------------------------------------------------------------
 * MOVIMENTO — e soprattutto dove NON metterlo.
 *
 * In questi editor il disegno si rifà e i moduli si ricostruiscono a ogni
 * tasto, cento volte al minuto: animarli li farebbe sembrare lenti e
 * scollegati da chi scrive. Restano quindi immediati, di proposito.
 * Si anima solo ciò che si vede di rado (la barra di ripescaggio, gli avvisi)
 * e la pressione dei pulsanti, che è un riscontro e non un effetto: 160 ms
 * bastano perché lo strumento sembri reattivo e nessuno se ne accorga.
 *
 * Le curve pronte del CSS sono deboli; qui si usa una ease-out marcata. Mai
 * ease-in in entrata: parte piano proprio nell'istante in cui si guarda.
 * ------------------------------------------------------------------------- */
:root {
  --eds-uscita: cubic-bezier(0.23, 1, 0.32, 1);
}

/* La barra compare al caricamento, dopo un ricaricamento involontario: senza
   transizione sembra un difetto di rendering invece di un'offerta. */
.eds-ripesca {
  transition: opacity 200ms var(--eds-uscita), transform 200ms var(--eds-uscita);
}
@starting-style {
  .eds-ripesca { opacity: 0; transform: translateY(-6px); }
}

/* Gli avvisi: comparsa e sparizione senza salto. Restano nel flusso solo
   quando servono (visibility), così non lasciano un vuoto. */
.eds-avviso {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 180ms var(--eds-uscita), transform 180ms var(--eds-uscita),
              visibility 0s linear 180ms;
}
.eds-avviso.eds-visibile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--eds-uscita), transform 180ms var(--eds-uscita),
              visibility 0s linear 0s;
}

/* Riscontro alla pressione: la scala è volutamente minima. */
.eds-preme .btn,
.eds-preme .eds-tav {
  transition: transform 160ms var(--eds-uscita);
}
.eds-preme .btn:active,
.eds-preme .eds-tav:active { transform: scale(0.97); }

/* Il disegno come bersaglio di un file trascinato. */
.eds-sopra { outline: 2px dashed #0d6efd; outline-offset: -4px; background-color: #f2f7ff; }

/* Conferma di copia: compare in basso, sparisce da sola. */
.eds-nota {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 1080;
  padding: .4rem .9rem; font-size: .84rem;
  color: #fff; background: #212529; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms var(--eds-uscita), transform 180ms var(--eds-uscita);
}
.eds-nota.eds-nota-su { opacity: 1; transform: translate(-50%, 0); }

/* Chi ha chiesto meno movimento lo ottiene: restano i cambi di opacità, che
   aiutano a capire, e sparisce ogni spostamento. */
@media (prefers-reduced-motion: reduce) {
  .eds-ripesca, .eds-avviso, .eds-nota,
  .eds-preme .btn, .eds-preme .eds-tav {
    transition-duration: 120ms;
    transition-property: opacity;
  }
  .eds-ripesca, .eds-avviso.eds-visibile { transform: none; }
  .eds-nota { transform: translate(-50%, 0); }
  .eds-preme .btn:active, .eds-preme .eds-tav:active { transform: none; }
}