/* Quill vestito coi token del sistema, sopra il suo snow: cornice e fuoco
   come ogni campo, inchiostri e superfici della pagina, così l'editor segue
   il tema scuro da solo. Solo var(): gli hex vivono nei token. */

/* La barra resta in vista mentre si scorre il testo. Un articolo lungo esce
   dalla finestra dopo tre capoversi, e da li' in giu' mettere in corsivo una
   parola voleva dire risalire in cima, scorrere, perdere il punto. Si ferma
   in alto nella colonna che scorre — `.ds-app-shell__main` — e ci resta
   finche' il suo editor e' in vista.

   Lo sfondo pieno non e' decorazione: senza, il testo le passerebbe sotto e
   si leggerebbe attraverso i bottoni. */
[data-cms-editor] .ql-toolbar.ql-snow {
  position: sticky;
  /* Zero non basta: la colonna che scorre ha il suo margine interno, e con
     `0` la barra si fermava un margine piu' in giu' lasciando sopra di se'
     una striscia in cui si vedeva scorrere il testo. Il margine e' un token
     del guscio, quindi lo si toglie da li' invece di scrivere un numero che
     resta indietro il giorno che il guscio cambia respiro. */
  inset-block-start: calc(var(--ds-app-shell-gutter, 0px) * -1);
  z-index: 2;
  border: 1px solid var(--ds-border);
  border-start-start-radius: var(--ds-radius-2);
  border-start-end-radius: var(--ds-radius-2);
  background-color: var(--ds-surface-1);
}

[data-cms-editor] .ql-container.ql-snow {
  border: 1px solid var(--ds-border);
  border-block-start: 0;
  border-end-start-radius: var(--ds-radius-2);
  border-end-end-radius: var(--ds-radius-2);
  background-color: var(--ds-surface-0);
  color: var(--ds-text-primary-neutral);
  font-family: var(--ds-font-body-face);
  font-size: var(--ds-font-body-size);
}

[data-cms-editor] .ql-editor {
  min-block-size: 22rem;
  line-height: var(--ds-font-body-prose-leading);
}

/* Il ritmo della prosa dentro l'editor: Quill scrive i paragrafi a margine
   zero, quindi un testo con le righe bianche dell'originale si vedeva come
   un muro unico, e chi scrive non poteva vedere quel che sta scrivendo.
   Stessi passi che il testo prendera' sulla pagina: element fra i blocchi,
   block sopra un titolo, e niente sopra il primo. */
[data-cms-editor] .ql-editor > * + * {
  margin-block-start: var(--ds-rhythm-element);
}

[data-cms-editor] .ql-editor > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--ds-space-3);
}

[data-cms-editor] .ql-editor > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--ds-rhythm-block);
}

[data-cms-editor] .ql-editor > :first-child {
  margin-block-start: 0;
}

/* Un'immagine dentro l'editor sta alta quanto serve a riconoscerla, non
   quanto e' il file. Il ritratto in cima a una biografia arrivava a piena
   larghezza della colonna e spingeva il testo — cioe' la cosa che si e'
   venuti a scrivere — sotto una schermata di fotografia. Qui e' un segnalibro
   di quel che sta in quel punto del testo; com'e' davvero si guarda sul
   sito. */
[data-cms-editor] .ql-editor img {
  max-block-size: 9rem;
  inline-size: auto;
  border-radius: var(--ds-radius-1);
}

[data-cms-editor] .ql-snow .ql-stroke {
  stroke: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-snow .ql-fill {
  fill: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-snow .ql-picker {
  color: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-snow .ql-picker-options {
  background-color: var(--ds-surface-1);
  border-color: var(--ds-border);
}

[data-cms-editor] .ql-snow button:hover .ql-stroke,
[data-cms-editor] .ql-snow button.ql-active .ql-stroke {
  stroke: var(--ds-text-primary-neutral);
}

[data-cms-editor] .ql-snow button:hover .ql-fill,
[data-cms-editor] .ql-snow button.ql-active .ql-fill {
  fill: var(--ds-text-primary-neutral);
}

[data-cms-editor] .ql-editor.ql-blank::before {
  color: var(--ds-text-tertiary-neutral);
  font-style: normal;
}

/* La cornice del campo Testo, sostituita dall'editor: l'attributo hidden non
   basta perche' la regola che le da' display:flex ha la specificita' di una
   classe e vince sulla regola del browser. L'etichetta sta fuori e resta. */
[data-cms-editor] .ds-field__frame[hidden] {
  display: none;
}

/* ── L'insegna del sito, in mezzo al pannello della porta ────────────────
   Il segno e il nome, insieme. Erano due cose in due posti: il nome nello
   slot d'angolo del guscio, il segno in mezzo, e mezza finestra vuota fra
   loro. Vicini leggono come un'insegna; separati, come un'etichetta e una
   decorazione.

   Sotto i 60rem di guscio il pannello non e' una colonna: OS lo fa diventare
   una fascia "alta quanto basta a portare il segno, e non di piu'". Li'
   l'insegna sta nel flusso, in riga, ed e' lei a dare l'altezza alla fascia.

   Fuori dal flusso non ci puo' stare: un blocco assoluto non misura niente,
   quindi la fascia restava alta quanto il suo solo padding e ci tagliava
   dentro il segno a meta' — misurato su un telefono, col nome che non si
   vedeva affatto. */
.cms-door__insegna {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  text-align: center;
  pointer-events: none;
}

/* Nel guscio diviso il pannello e' mezza finestra, ed e' una colonna con
   space-between: qualsiasi cosa gli si metta dentro finisce in cima o a
   piede pagina. E' gia' `position: relative`, e allora il modo di stare al
   centro del pannello INTERO e' uscire dal flusso e centrarsi sui suoi
   quattro lati.

   La soglia e' la stessa del guscio, e la query e' anonima come la sua:
   `.ds-auth` e' l'unico contenitore in vista, quindi le due rispondono
   insieme e non c'e' una larghezza in cui l'insegna e il pannello la pensino
   diversamente.

   `place-content` e non `place-items`: le due righe vanno centrate come
   blocco, non ciascuna dentro la propria traccia — altrimenti il gruppo si
   appoggia in cima e solo le singole righe restano in asse. */
@container (min-width: 60rem) {
  .cms-door__insegna {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--ds-space-4);
    padding: var(--ds-rhythm-block);
  }
}

/* La misura la porta gia' l'immagine (80x80, dichiarati sul tag perche' il
   posto sia riservato prima che arrivi). Qui si dice solo che nessun foglio
   la stiri, e che segue il raggio del sistema come ogni altra superficie. */
.cms-door__mark {
  inline-size: 80px;
  block-size: 80px;
  border-radius: var(--ds-radius-2);
}

/* Il nome sui token del titolo che il guscio dava al `brand`: cambia il
   posto, non la voce. */
.cms-door__nome {
  font-family: var(--ds-font-heading-5-face);
  font-size: var(--ds-font-heading-5-size);
  font-weight: var(--ds-font-heading-5-weight);
  line-height: var(--ds-font-heading-5-leading);
  letter-spacing: var(--ds-font-heading-5-tracking);
}

/* ── I due comandi delle fotografie nella barra ───────────────────────────
   Quill disegna i bottoni che non conosce come quadrati vuoti: il nome ce lo
   mette chi li aggiunge. Una parola e non un'icona inventata — «Foto» dice
   cosa fa, un rettangolino con dentro un monte dice che qualcuno ha disegnato
   un rettangolino. */
[data-cms-editor] .ql-toolbar button.ql-foto {
  inline-size: auto;
  padding-inline: var(--ds-space-2);
}

[data-cms-editor] .ql-toolbar button.ql-foto::before {
  content: "Foto";
  font-family: var(--ds-font-label-face);
  font-size: var(--ds-font-label-size);
  color: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-toolbar button.ql-foto:hover::before {
  color: var(--ds-text-primary-neutral);
}

/* The caption button, worded like the other two. */
[data-cms-editor] .ql-toolbar button.ql-didascalia {
  inline-size: auto;
  padding-inline: var(--ds-space-2);
}

[data-cms-editor] .ql-toolbar button.ql-didascalia::before {
  content: "Didascalia";
  font-family: var(--ds-font-label-face);
  font-size: var(--ds-font-label-size);
  color: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-toolbar button.ql-didascalia:hover::before {
  color: var(--ds-text-primary-neutral);
}

/* The Word button, worded like Foto and for the same reason. While the
   document is being read and its photographs go up it says so, since a
   large file takes a few seconds and a silent button gets pressed twice. */
[data-cms-editor] .ql-toolbar button.ql-word {
  inline-size: auto;
  padding-inline: var(--ds-space-2);
}

[data-cms-editor] .ql-toolbar button.ql-word::before {
  content: "Word";
  font-family: var(--ds-font-label-face);
  font-size: var(--ds-font-label-size);
  color: var(--ds-text-secondary-neutral);
}

[data-cms-editor] .ql-toolbar button.ql-word:hover::before {
  color: var(--ds-text-primary-neutral);
}

[data-cms-editor] .ql-toolbar button.ql-word[data-busy] {
  pointer-events: none;
}

[data-cms-editor] .ql-toolbar button.ql-word[data-busy]::before {
  content: "Importo…";
}

/* Il menu delle disposizioni: le stesse quattro del foglio del sito, dette
   come le direbbe una persona. */
[data-cms-editor] .ql-toolbar .ql-layout {
  inline-size: 9rem;
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label::before {
  content: "Disposizione";
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-item[data-value="piena"]::before,
[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label[data-value="piena"]::before {
  content: "Piena larghezza";
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-item[data-value="sx"]::before,
[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label[data-value="sx"]::before {
  content: "A sinistra del testo";
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-item[data-value="dx"]::before,
[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label[data-value="dx"]::before {
  content: "A destra del testo";
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-item[data-value="due"]::before,
[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label[data-value="due"]::before {
  content: "Due affiancate";
}

[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-item[data-value="tre"]::before,
[data-cms-editor] .ql-toolbar .ql-layout .ql-picker-label[data-value="tre"]::before {
  content: "Tre affiancate";
}

/* Il blocco dentro l'editor: si vede che e' un oggetto solo, e le fotografie
   stanno in riga quando la disposizione lo dice. Le misure sono quelle
   dell'editor, non quelle del sito: qui serve riconoscerlo, non simularlo. */
[data-cms-editor] .ql-editor figure.gl-foto {
  display: flex;
  gap: var(--ds-space-2);
  margin-block: var(--ds-space-4);
  padding: var(--ds-space-2);
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-1);
}

[data-cms-editor] .ql-editor figure.gl-foto img {
  max-block-size: 9rem;
  inline-size: auto;
}

/* Il blocco su cui agiscono la disposizione e la didascalia. Il cursore ci
   sta su un indice solo e non si vede da nessuna parte: senza questo segno
   il cliente premeva un bottone senza sapere su quale fotografia stava per
   scrivere, ed e' cosi' che una didascalia finiva sotto un'altra foto. La
   riga passa da tratteggiata a piena, perche' selezionato non e' un grado
   di enfasi: e' un altro stato. */
[data-cms-editor] .ql-editor figure.gl-foto[data-scelta] {
  border-style: solid;
  border-color: var(--ds-border-strong);
  background-color: var(--ds-surface-2);
}

[data-cms-editor] .ql-editor figure.gl-foto {
  cursor: pointer;
}

/* The caption inside the block: under the images, across the row, in the
   small secondary voice the site gives it. */
[data-cms-editor] .ql-editor figure.gl-foto {
  flex-wrap: wrap;
}

[data-cms-editor] .ql-editor figure.gl-foto figcaption {
  flex-basis: 100%;
  font-size: var(--ds-font-small-size);
  color: var(--ds-text-secondary-neutral);
}

/* Il grassetto dell'editor e' quello che il sito stampera'.
   Il nome e non il numero: qui c'era `--ds-weight-intense`, cioe' il peso che
   il grassetto AVEVA il giorno in cui questa riga e' stata scritta, e il
   giorno che un sito ha alzato il suo grassetto a 700 l'editor e' rimasto a
   600 — lo stesso disallineamento di prima, girato al contrario. Con
   `--ds-bold-weight` l'editor segue quel che il sito decide, qualunque cosa
   decida, perche' e' lo stesso nome che rende il `<strong>` sulla pagina. */
[data-cms-editor] .ql-editor strong,
[data-cms-editor] .ql-editor b {
  font-weight: var(--ds-bold-weight);
}

/* The block editor's room. OS's Studio takes the height its parent gives it,
   the way the builder's shell gives it the window; in the flow of the desk's
   page it had only the height of the list beside it, and the page's frame
   shrank to a strip. Most of the window, and never less than a page of
   fields and a frame beside them need. */
.cms-blocks {
  display: flex;
  flex-direction: column;
  block-size: 80dvh;
  min-block-size: 36rem;
}