/* ═══════════════════════════════════════════════════════════════════════════════
   inline-edit.css — l'editor, visto da DENTRO l'anteprima.

   Il gemello di `res/js/inline-edit.js`, e come lui lo inietta `page-composer.php` solo
   quando la pagina e' chiamata con `?edit=1`. Il visitatore non lo scarica nemmeno.

   ⚠️ NON E' NEL CSS DEI TEMI, ed e' il punto: la pagina vive dentro un IFRAME, dove
   `application.css` non arriva, quindi ogni tema si portava la sua copia di queste
   regole — `domusplanner` e `sabrina` ce l'avevano, `chplus` no. Il risultato e' il modo
   peggiore di fallire: si clicca un nodo, la selezione nell'albero c'e' DAVVERO, e nella
   pagina non succede niente. Sembra rotto l'editor, ed e' un foglio di stile che manca.

   ⚠️ Un tema puo' comunque aggiungerne: cio' che dipende dal SUO markup ( scoprire un
   testo che il tema nasconde, per esempio ) resta nel tema, sotto `.editing`. Qui sta
   solo cio' che vale per qualunque tema, perche' parla di `xnode` e `editable-text` —
   che li emettono tutti.

   ⚠️ Tutto sotto `.editing`, la classe che `inline-edit.js` mette sulla radice.
   ═══════════════════════════════════════════════════════════════════════════════ */

.editing {
    /*
     * Due colori, perche' LE DUE SELEZIONI CONVIVONO: cliccando un testo si seleziona
     * anche il modulo che lo contiene, e si devono vedere tutti e due — uno dice su cosa
     * agiscono i comandi dell'albero, l'altro dove si sta scrivendo.
     *
     * ⚠️ L'arancione non e' un gusto: in XOS non e' MAI il colore della selezione, quindi
     * non si confonde con l'azzurro del nodo. Un tema puo' ridefinire le due variabili.
     */
    --edit-node: #3498db;
    --edit-text: #ffa600;
}

/* IL NODO: il modulo, ma anche ogni immagine e ogni testata, perche' portano tutti la
   classe `xnode` e il loro `data-node-id`. */
.editing .xnode.selected {
    outline: 2px dashed var( --edit-node );
    outline-offset: -2px;
    cursor: pointer;
    animation: xnode-blink 0.5s ease-in-out 1;
}

/* Un lampeggio solo, e serve: scegliendo dall'albero un nodo che sta fuori dalla parte di
   pagina che si guarda, senza un movimento non si capisce dove sia finita la selezione. */
@keyframes xnode-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}

/* IL TESTO. `editable-text` dice che quel pezzo e' un testo; `data-prop-name`, accanto,
   dice QUALE property: la classe serve allo stile, l'attributo al legame col dato. */
.editing .editable-text {
    outline: none;
    outline-offset: -2px;
    border-radius: 3px;
}
.editing .editable-text:hover {
    outline: 2px dashed color-mix( in srgb, var( --edit-text ) 55%, transparent );
    cursor: text;
}

/* ⚠️ Una CLASSE e non il solo `:focus`: dentro un iframe che non ha il fuoco della
   FINESTRA quello pseudo-stato non matcha, nemmeno quando l'elemento e' `activeElement`
   — e nell'anteprima si lavora spesso dall'albero, quindi il fuoco e' altrove. La classe
   la mette `inline-edit.js`. */
.editing .editable-text.writing,
.editing .editable-text:focus {
    outline: 2px dashed var( --edit-text );
}

/* Il rilascio sul rendering: stessi nomi di classe della treeview di XOS, e stessa idea —
   una riga sul bordo dove il nodo andra', un contorno se ci va DENTRO. */
.editing .xnode.drop-before { box-shadow: 0 -3px 0 var( --edit-node ); }
.editing .xnode.drop-after  { box-shadow: 0  3px 0 var( --edit-node ); }
.editing .xnode.drop-center { outline: 2px solid var( --edit-node ); outline-offset: -2px; }

/* Mentre lo si trascina, il nodo si smorza: dice qual e' il pezzo in viaggio */
.editing .xnode.dragging { opacity: 0.4; }

/* L'ALT DI UN'IMMAGINE, SCRITTO SOTTO DI LEI E SOLO NELL'EDITOR.

   ⚠️ Non e' una didascalia: `alt` non si vede mai in pagina, e infatti fuori dall'editing
   questo elemento non esiste a video. Ma per darne uno a centinaia di fotografie bisogna
   poterlo scrivere DOVE si guarda la fotografia — selezionarle una per una nell'albero e
   aggiungere la property a mano non e' un modo.

   ⚠️ Il segnaposto sta su `:empty`, perche' un elemento vuoto non ha area su cui cliccare:
   senza, la prima scrittura sarebbe impossibile proprio dove serve di piu'. */
figcaption.alt-text { display: none; }

.editing figcaption.alt-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.75;
    min-height: 1.4em;
}

.editing figcaption.alt-text:empty::before {
    content: 'alt\2026';
    opacity: 0.45;
}