/* =============================================================
   Moduli — sistema "Gruppi" (v4, 21/9/2026, scelto dal titolare fra tre
   direzioni costruite e fotografate: gruppi / notte / frase).

   I campi non sono scatole separate: sono FUSI in pochi gruppi bianchi su
   carta grigia (#f5f5f7), come le liste di iOS. Quattro regole:
   1. separatori RIENTRATI: ogni filetto parte dove parte il testo, mai da
      bordo a bordo, mai incroci a T; il divisorio verticale e' accorciato;
   2. il fuoco e' un anello DENTRO la cella (4px dal bordo), con raggio
      concentrico agli angoli del gruppo;
   3. errori: campo vuoto = solo l'etichetta rossa (il messaggio resta per
      il lettore di schermo); si legge solo cio' che serve (email,
      telefono, link), sotto il valore;
   4. telefono: righe con etichetta in linea, come Contatti di iOS.
   Niente sottotitoli, niente testo di aiuto intorno ai campi.

   v5 (21/9 notte): il modulo ha un CONTENITORE. I gruppi da soli sulla
   carta grigia sembravano "lasciati li' a caso", con privacy e bottone
   appoggiati sul fondo. Ora .mod-form e' una scheda bianca (filo di bordo
   + ombra morbida: regge sia sulle sezioni grigie sia su quelle bianche)
   e i gruppi dentro sono grigi #f5f5f7: la stessa lista fusa, invertita.
   Gli allegati non sono piu' una riga di testo: sono una ZONA tratteggiata
   con icona e "Trascina qui i file o sfoglia", staccata dal gruppo del
   messaggio. Si accende appena un file entra nella finestra
   (html.is-file-drag, da main.js) e il rilascio vale su tutta la scheda.
   Su schermi a tocco, dove non si trascina, dice solo "Allega file".

   Gruppi (la disposizione decide angoli e filetti):
     .mod-group--2-1    [a b] [c]         nome cognome / azienda
     .mod-group--2-2    [a b] [c d]       email telefono / paese localita'
     .mod-group--2-2-1  [a b] [c d] [e]
     .mod-group--stack  righe a tutta larghezza (testo + allegati, scelte)
   Celle: .form__field.mod-cell (+ --wide, --text, --file, --choice, --top,
   --hint = il placeholder si vede)

   Contratto con main.js (NON rinominare): .form__field, .form__error
   [data-error-for], .form__file, .form__file-list (li con -preview/-name/
   -meta/-remove), .form__checkbox-input/-box, [data-mod-done]. Ogni
   input text/email/tel vuole un placeholder (" " se non c'e' un
   suggerimento vero): :placeholder-shown dice se il campo e' vuoto.
   ============================================================= */

.mod-page,
.mod-form,
.mod-done {
  --mod-surface: #f5f5f7;
  --mod-card: #ffffff;
  --mod-cell: #f5f5f7;
  --mod-hover: #eef0f4;
  --mod-hair: #dde0e6;
  --mod-edge: rgba(11, 18, 32, 0.045);
  --mod-dash: #c2c8d2;
  --mod-ink: #0b1220;
  --mod-copy: #475569;
  --mod-gray: #7b889c;
  --mod-label: #5b6576;
  --mod-hint: #6b7587;
  --mod-quiet: #8d97a6;
  --mod-accent: #2563eb;
  --mod-accent-ink: #1d4ed8;
  --mod-cta: #1e3a8a;
  --mod-cta-hover: #1d4ed8;
  --mod-danger: #d70015;
  --mod-danger-soft: #fff5f5;
  --mod-r: 18px;
  --mod-pad: 18px;
  --mod-card-r: 30px;
  --mod-card-pad: 28px;
  --mod-card-shadow:
    0 0 0 1px rgba(11, 18, 32, 0.05),
    0 1px 2px rgba(11, 18, 32, 0.04),
    0 22px 44px -22px rgba(11, 18, 32, 0.16);
  --mod-label-top: 12px;
  --mod-input-h: 36px;
  --mod-ring: 2px;
  --mod-ring-in: 4px;
  --mod-done-pad: 28px;
  --mod-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mod-font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --mod-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --mod-line: linear-gradient(var(--mod-hair), var(--mod-hair));
}
/* sugli schermi densi l'anello e' piu' sottile: a 1x 1,5px si sfoca */
@media (min-resolution: 2dppx) {
  .mod-page,
  .mod-form,
  .mod-done { --mod-ring: 1.5px; }
}

/* =============================================================
   IL MODULO
   ============================================================= */
.mod-form {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: var(--mod-card-pad);
  border-radius: var(--mod-card-r);
  background: var(--mod-card);
  box-shadow: var(--mod-card-shadow);
  color: var(--mod-ink);
  font-family: var(--mod-font);
  font-size: 1rem;
}
.mod-form[hidden] { display: none; }

/* il titolo della scheda (22/9, chiesto dall'utente): una riga sola,
   nella voce dei titoli del sito; nessun sottotitolo */
.mod-form .mod-form__title {
  margin: 4px 0 6px;
  padding: 0 4px;
  color: var(--mod-ink);
  font-size: clamp(1.45rem, 1.9vw, 1.7rem);
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* ---------- i gruppi: grigio pieno dentro la scheda bianca ---------- */
.mod-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--mod-r);
  background: var(--mod-cell);
  box-shadow: 0 0 0 1px var(--mod-edge);
}

.mod-cell--wide,
.mod-group--stack > .mod-cell,
.mod-group--2-1 > :nth-child(3),
.mod-group--2-2-1 > :nth-child(5) { grid-column: 1 / -1; }

/* ---------- angoli e filetti, cella per cella ----------
   --tl/--tr/--br/--bl: gli angoli che la cella condivide col gruppo
   (servono al velo e all'anello). --rule-top / --rule-left: i filetti,
   disegnati come sfondo della cella, cosi' il velo non li copre. */
.mod-cell {
  --tl: 0px;
  --tr: 0px;
  --br: 0px;
  --bl: 0px;
  --rule-top: none;
  --rule-left: none;
}
.mod-group--2-1 > :nth-child(1),
.mod-group--2-2 > :nth-child(1),
.mod-group--2-2-1 > :nth-child(1) { --tl: var(--mod-r); }
.mod-group--2-1 > :nth-child(2),
.mod-group--2-2 > :nth-child(2),
.mod-group--2-2-1 > :nth-child(2) { --tr: var(--mod-r); --rule-left: var(--mod-line); }
.mod-group--2-1 > :nth-child(3) { --bl: var(--mod-r); --br: var(--mod-r); --rule-top: var(--mod-line); }
.mod-group--2-2 > :nth-child(3) { --bl: var(--mod-r); --rule-top: var(--mod-line); }
.mod-group--2-2 > :nth-child(4) { --br: var(--mod-r); --rule-top: var(--mod-line); --rule-left: var(--mod-line); }
.mod-group--2-2-1 > :nth-child(3) { --rule-top: var(--mod-line); }
.mod-group--2-2-1 > :nth-child(4) { --rule-top: var(--mod-line); --rule-left: var(--mod-line); }
.mod-group--2-2-1 > :nth-child(5) { --bl: var(--mod-r); --br: var(--mod-r); --rule-top: var(--mod-line); }
.mod-group--stack > .mod-cell + .mod-cell { --rule-top: var(--mod-line); }
.mod-group--stack > .mod-cell:first-child { --tl: var(--mod-r); --tr: var(--mod-r); }
.mod-group--stack > .mod-cell:last-child { --bl: var(--mod-r); --br: var(--mod-r); }

/* ---------- la cella ----------
   riga 1: etichetta; riga 2: il campo; riga 3: cosa correggere (raro). */
.mod-form .mod-cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tl) var(--tr) var(--br) var(--bl);
  background-color: var(--mod-cell);
  /* filetto orizzontale: parte dal testo; verticale: accorciato di 14px */
  background-image: var(--rule-top), var(--rule-left);
  background-repeat: no-repeat;
  background-position: var(--mod-pad) 0, 0 14px;
  background-size: calc(100% - var(--mod-pad)) 1px, 1px calc(100% - 28px);
  transition: background-color 0.2s var(--mod-ease);
}

/* l'anello: dentro la cella, raggio concentrico agli angoli del gruppo;
   entra stringendosi, come il fuoco di macOS */
.mod-form .mod-cell::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 3;
  border-radius:
    max(calc(var(--tl) - var(--mod-ring-in)), 10px)
    max(calc(var(--tr) - var(--mod-ring-in)), 10px)
    max(calc(var(--br) - var(--mod-ring-in)), 10px)
    max(calc(var(--bl) - var(--mod-ring-in)), 10px);
  box-shadow: inset 0 0 0 var(--mod-ring) var(--mod-accent);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s var(--mod-ease),
    inset 0.24s var(--mod-ease);
}
.mod-form .mod-cell:has(> input:focus, > textarea:focus)::after {
  inset: var(--mod-ring-in);
  opacity: 1;
}

.mod-form .mod-cell > label,
.mod-form .mod-cell > legend {
  grid-row: 1;
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: var(--mod-label-top) var(--mod-pad) 0;
  color: var(--mod-label);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.003em;
  line-height: 16px;
  white-space: nowrap;
  text-transform: none;
  cursor: text;
  transition: color 0.16s var(--mod-ease);
}
/* tutta la fascia dell'etichetta e' cliccabile, non solo la parola */
.mod-form .mod-cell > label::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--mod-label-top) + 16px);
}

.mod-form .mod-cell > input,
.mod-form .mod-cell > textarea {
  grid-row: 2;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--mod-ink);
  caret-color: var(--mod-accent);
  font: inherit;
  font-family: var(--mod-font);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.014em;
  -webkit-appearance: none;
  appearance: none;
}
.mod-form .mod-cell > input {
  height: var(--mod-input-h);
  padding: 0 var(--mod-pad) 2px;
  line-height: 24px;
}
.mod-form .mod-cell > textarea {
  min-height: 124px;
  padding: 6px var(--mod-pad) 16px;
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}

.mod-form .mod-cell > input::placeholder { color: transparent; }
/* un suggerimento vero (commessa, campi facoltativi) resta visibile */
.mod-form .mod-cell--hint > input::placeholder { color: var(--mod-quiet); opacity: 1; }
.mod-form .mod-cell > textarea::placeholder {
  color: var(--mod-hint);
  opacity: 1;
}

/* completamento automatico del browser: niente fondo giallo o azzurro */
.mod-form .mod-cell > input:-webkit-autofill {
  -webkit-text-fill-color: var(--mod-ink);
  -webkit-box-shadow: 0 0 0 60px var(--mod-cell) inset;
  transition: background-color 600000s 0s;
}

/* passaggio del mouse: un solo velo, per celle e allegati */
@media (hover: hover) {
  .mod-form .mod-cell:not(.mod-cell--file):not(.mod-cell--choice):hover:not(:focus-within) { background-color: var(--mod-hover); }
  .mod-form .mod-cell > input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 60px var(--mod-hover) inset; }
}

/* fuoco: la sola etichetta di quella cella diventa blu */
.mod-form .mod-cell:focus-within > label { color: var(--mod-accent-ink); }

/* ---------- errori ---------- */
.mod-form .form__error:empty { display: none; }

/* il messaggio sta sotto il valore: etichetta, valore, cosa correggere */
.mod-form .mod-cell > .form__error {
  grid-row: 3;
  min-width: 0;
  margin: -4px 0 0;
  padding: 0 var(--mod-pad) 12px;
  color: var(--mod-danger);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: -0.003em;
  line-height: 18px;
  text-align: left;
  pointer-events: none;
}
/* campo vuoto: basta l'etichetta rossa. Il messaggio resta nel DOM (e in
   aria-describedby) per il lettore di schermo, ma non si vede. */
.mod-form .mod-cell:has(> input:placeholder-shown, > textarea:placeholder-shown) > .form__error,
.mod-form .mod-cell--choice > .form__error {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mod-form .mod-cell:has(> [aria-invalid="true"]) > label,
.mod-form .mod-cell--choice:has([aria-invalid="true"]) > legend { color: var(--mod-danger); }
.mod-form .mod-cell:has(> [aria-invalid="true"])::after { box-shadow: inset 0 0 0 var(--mod-ring) var(--mod-danger); }
.mod-form .mod-cell > [aria-invalid="true"] { caret-color: var(--mod-danger); }

/* le righe di aiuto sotto i campi non esistono piu' */
.mod-form .form__assist { display: none; }

/* ---------- scelte a pastiglia (candidatura) ----------
   Una cella con l'etichetta in alto e le pastiglie sotto; niente <select>. */
.mod-form .mod-cell--choice { display: block; padding-bottom: 16px; }
.mod-form .mod-cell--choice > legend { padding-bottom: 12px; cursor: default; }
.mod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--mod-pad);
}
.mod-chip {
  position: relative;
  display: inline-flex;
}
.mod-chip input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mod-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d5d9e0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--mod-copy);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 0.18s var(--mod-ease),
    background-color 0.18s var(--mod-ease),
    color 0.18s var(--mod-ease);
}
@media (hover: hover) {
  .mod-chip:hover span { border-color: var(--mod-label); color: var(--mod-ink); }
}
.mod-chip input:checked + span {
  border-color: var(--mod-cta);
  background: var(--mod-cta);
  color: #ffffff;
}
.mod-chip input:focus-visible + span { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--mod-accent); }
.mod-chip input[aria-invalid="true"] + span { border-color: rgba(215, 0, 21, 0.5); }

/* ---------- valore gia' noto (il numero di commessa che arriva da /risorse/) ---------- */
.mod-form .mod-cell > .mod-known {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--mod-input-h);
  padding: 0 var(--mod-pad) 6px;
}
.mod-known__v {
  flex: 1 1 auto;
  color: var(--mod-ink);
  font-family: var(--mod-mono);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.mod-known__edit {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mod-accent-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.mod-known__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.form__field.is-known > input { display: none; }
.form__field:not(.is-known) > .mod-known { display: none; }

/* ---------- allegati: una zona di trascinamento vera ----------
   Nel DOM la cella resta l'ultima del gruppo del messaggio (e' la stessa
   domanda: "cosa ti serve" + i file). A vista il gruppo si scioglie: il
   testo resta un gruppo grigio, sotto c'e' la zona tratteggiata. */
.mod-group--stack:has(> .mod-cell--file) {
  row-gap: 14px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.mod-group--stack:has(> .mod-cell--file) > .mod-cell:not(.mod-cell--file) {
  box-shadow: 0 0 0 1px var(--mod-edge);
}
/* l'ultima cella PRIMA della zona chiude il gruppo: angoli sotto */
.mod-group--stack > .mod-cell:has(+ .mod-cell--file) { --bl: var(--mod-r); --br: var(--mod-r); }

.mod-form .mod-cell--file,
.mod-form .mod-group--stack > .mod-cell--file {
  --rule-top: none;
  display: block;
  overflow: visible;
  border-radius: 0;
  background: none;
}

.mod-form .form__file {
  position: relative;
  display: flex;
  place-items: normal;
  align-items: center;
  gap: 0;
  min-height: 88px;
  margin: 0;
  padding: 16px 20px 16px 16px;
  border: 1.5px dashed var(--mod-dash);
  border-radius: var(--mod-r);
  background: var(--mod-card);
  box-shadow: none;
  cursor: pointer;
  transition:
    border-color 0.2s var(--mod-ease),
    background-color 0.2s var(--mod-ease),
    box-shadow 0.2s var(--mod-ease);
}

@media (hover: hover) {
  .mod-form .form__file:hover {
    border-color: var(--mod-accent);
    background-color: rgba(37, 99, 235, 0.03);
    box-shadow: none;
  }
}
.mod-form .form__file:focus-within { box-shadow: none; }
.mod-form .form__file:has(input:focus-visible) {
  border-color: var(--mod-accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

/* un file e' entrato nella finestra (html.is-file-drag, da main.js): la
   zona si fa vedere prima ancora che ci arrivi sopra */
.is-file-drag .mod-form .form__file {
  border-color: var(--mod-accent);
  background-color: rgba(37, 99, 235, 0.04);
  animation: mod-drop-call 1.1s var(--mod-ease) infinite;
}
/* il file e' sopra la scheda: qui si puo' lasciare */
.mod-form .form__file.is-dragging,
.is-file-drag .mod-form .form__file.is-dragging {
  border-color: var(--mod-accent);
  border-style: solid;
  background-color: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  animation: none;
}
@keyframes mod-drop-call {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.22); }
  60% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
}

.mod-form .form__file input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mod-form .form__file input[type="file"]::-webkit-file-upload-button { cursor: pointer; }

.mod-form .form__file-control {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-items: normal;
  gap: 14px;
  min-width: 0;
  text-align: left;
  pointer-events: none;
}
/* style.css veste a pastiglia ogni span qui dentro: si azzera tutto */
.mod-form .form__file-control span {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: normal;
}

/* l'icona: un dischetto grigio che col file in arrivo diventa blu pieno */
.mod-form .form__file-control .mod-file__ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mod-cell);
  color: var(--mod-label);
  transition:
    background-color 0.2s var(--mod-ease),
    color 0.2s var(--mod-ease),
    transform 0.3s var(--mod-ease);
}
.mod-file__ico svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .mod-form .form__file:hover .mod-file__ico { background: rgba(37, 99, 235, 0.1); color: var(--mod-accent-ink); }
}
.is-file-drag .mod-form .form__file .mod-file__ico { background: rgba(37, 99, 235, 0.12); color: var(--mod-accent-ink); }
.mod-form .form__file.is-dragging .mod-file__ico {
  background: var(--mod-accent);
  color: #ffffff;
  transform: translateY(-2px);
}

.mod-form .form__file-control .mod-file__txt {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}
.mod-form .form__file-control :is(.mod-file__do, .mod-file__drop) {
  color: var(--mod-ink);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.mod-form .form__file-control .mod-file__do b,
.mod-form .form__file-control .mod-file__tap {
  color: var(--mod-accent-ink);
  font-weight: 500;
}
.mod-form .form__file-control .mod-file__do b {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mod-form .form__file-control .mod-file__drop { display: none; color: var(--mod-accent-ink); }
.mod-form .form__file.is-dragging .form__file-control .mod-file__do { display: none; }
.mod-form .form__file.is-dragging .form__file-control .mod-file__drop { display: inline; }
/* dove non si trascina (tocco) la frase e' solo "Allega file" */
.mod-form .form__file-control .mod-file__tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .mod-form .form__file-control .mod-file__drag { display: none; }
  .mod-form .form__file-control .mod-file__tap { display: inline; }
}

/* la riga "formati · max MB" non c'e' piu' (22/9): formati e limiti li
   dice il messaggio d'errore solo quando un file viene rifiutato */

.mod-form .form__file-control .mod-file__opt,
.mod-form [data-file-summary] {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--mod-quiet);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mod-form [data-file-summary] {
  margin: 0 0 0 auto;
  color: var(--mod-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mod-form [data-file-summary]:empty { display: none; }
.mod-form .form__file-control:has([data-file-summary]:not(:empty)) .mod-file__opt { display: none; }

/* allegato obbligatorio mancante (il curriculum): la zona diventa rossa */
.mod-form .form__file:has(input[aria-invalid="true"]) {
  border-color: var(--mod-danger);
  background-color: var(--mod-danger-soft);
}
.mod-form .form__file:has(input[aria-invalid="true"]) :is(.mod-file__do, .mod-file__do b, .mod-file__tap) { color: var(--mod-danger); }
.mod-form .form__file:has(input[aria-invalid="true"]) .mod-file__ico { background: rgba(215, 0, 21, 0.08); color: var(--mod-danger); }

/* i file scelti: righe grigie sotto la zona, una per file */
.mod-form .form__file-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.mod-form .form__file-list:empty { display: none; }
.mod-form .form__file-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  margin: 0;
  padding: 10px 10px 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--mod-cell);
  box-shadow: none;
  color: var(--mod-ink);
  font-size: 0.9375rem;
  line-height: 1.3;
  animation: mod-row-in 0.32s var(--mod-ease) both;
}
.mod-form .form__file-preview {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--mod-edge);
  color: var(--mod-label);
  font-family: var(--mod-font);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mod-form .form__file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* il nome intero: la fine distingue le revisioni (rev-C_definitivo) */
.mod-form .form__file-name {
  min-width: 0;
  overflow: visible;
  color: var(--mod-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mod-form .form__file-meta {
  display: block;
  margin-top: 2px;
  color: var(--mod-label);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mod-form .form__file-remove {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.18s var(--mod-ease);
}
/* la X al centro esatto */
.mod-form .form__file-remove::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235b6576' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.mod-form .form__file-remove:hover,
.mod-form .form__file-remove:focus-visible {
  border: 0;
  background: #e4e7ec;
  color: transparent;
  outline: none;
}
.mod-form .form__file-remove:focus-visible { box-shadow: inset 0 0 0 var(--mod-ring) var(--mod-accent); }

.mod-form .mod-cell--file > .form__error {
  margin: 8px 0 0;
  padding: 0 2px;
  color: var(--mod-danger);
  text-align: left;
  font-size: 0.8125rem;
  line-height: 18px;
}

@keyframes mod-row-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* ---------- in fondo: privacy a sinistra, invio a destra ---------- */
.mod-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: start;
  margin-top: 6px;
}
/* piu' caselle (candidatura): una sotto l'altra, il bottone a destra sotto */
.mod-end--stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mod-end--stack .mod-go { grid-column: 1; grid-row: auto; justify-self: end; margin-top: 10px; }

.mod-form .mod-check {
  display: block;
  margin: 0;
  padding: 15px 0 0 2px;
}
.mod-end--stack .mod-check { padding-top: 6px; }
.mod-form .mod-check .form__checkbox-label {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
  color: var(--mod-copy);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
}
/* la casella si tocca su 44x44, anche se se ne vedono 22 */
.mod-form .mod-check .form__checkbox-input {
  position: absolute;
  inset: -11px auto auto -11px;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
.mod-form .mod-check .form__checkbox-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  border: 1.5px solid var(--mod-quiet);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  transition:
    border-color 0.18s var(--mod-ease),
    background-color 0.18s var(--mod-ease),
    box-shadow 0.18s var(--mod-ease);
}
/* la spunta: un tracciato SVG che si disegna (sostituisce quella a bordi
   ruotati di style.css) */
.mod-form .mod-check .form__checkbox-box::after,
.mod-form .mod-check .form__checkbox-input:checked + .form__checkbox-box::after { content: none; }
.mod-form .mod-check .form__checkbox-box svg {
  width: 22px;
  height: 22px;
  margin: -1.5px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset 0.26s var(--mod-ease) 0.04s;
}
@media (hover: hover) {
  .mod-form .mod-check .form__checkbox-label:hover .form__checkbox-box { border-color: var(--mod-label); }
}
.mod-form .mod-check .form__checkbox-input:checked + .form__checkbox-box {
  border-color: var(--mod-cta);
  background: var(--mod-cta);
}
.mod-form .mod-check .form__checkbox-input:checked + .form__checkbox-box svg { stroke-dashoffset: 0; }
.mod-form .mod-check .form__checkbox-input:focus-visible + .form__checkbox-box {
  outline: none;
  box-shadow: 0 0 0 3px var(--mod-card), 0 0 0 5px var(--mod-accent);
}
.mod-form .mod-check a {
  position: relative;
  z-index: 2;
  color: var(--mod-accent-ink);
  font-weight: 500;
  text-decoration: none;
}
.mod-form .mod-check a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* privacy non spuntata: la frase diventa rossa, niente seconda riga */
.mod-form .mod-check:has([aria-invalid="true"]) .mod-check__text,
.mod-form .mod-check:has([aria-invalid="true"]) .mod-check__text a { color: var(--mod-danger); }
.mod-form .mod-check:has([aria-invalid="true"]) .mod-check__text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mod-form .mod-check .form__checkbox-input[aria-invalid="true"] + .form__checkbox-box {
  border-color: var(--mod-danger);
  background: var(--mod-danger-soft);
}
.mod-form .mod-check > .form__error {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* il bottone: la pillola blu notte dei CTA del sito. .mod-send si scioglie
   nella griglia: bottone a destra, messaggi sotto */
.mod-send { display: contents; }
.mod-go { grid-column: 2; grid-row: 1; justify-self: end; }
.mod-go {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 196px;
  min-height: 52px;
  margin: 0;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--mod-cta);
  box-shadow: none;
  color: #ffffff;
  font: inherit;
  font-family: var(--mod-font);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s var(--mod-ease),
    transform 0.2s var(--mod-ease);
}
@media (hover: hover) {
  .mod-go:hover { background: var(--mod-cta-hover); }
}
.mod-go:active { transform: scale(0.98); }
.mod-go:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mod-card), 0 0 0 5px var(--mod-accent);
}
/* durante l'invio main.js lo disattiva e scrive "Invio…": resta pieno */
.mod-go:disabled,
.mod-go.is-loading {
  opacity: 1;
  filter: none;
  background: var(--mod-cta);
  color: #ffffff;
  cursor: progress;
  transform: none;
}
.mod-go.is-loading::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mod-spin 0.8s linear infinite;
}
@keyframes mod-spin { to { transform: rotate(360deg); } }

/* "Completa i campi in rosso.": corto, sotto il bottone */
.mod-form .form__hint {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 0;
  margin: -2px 0 0;
  color: var(--mod-danger);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 20px;
  text-align: right;
}
.mod-form .form__hint:empty { display: none; }

/* invio fallito: frase lunga, a sinistra, sulla colonna del testo */
.mod-send > [data-form-notice] {
  grid-column: 1 / -1;
  justify-self: stretch;
  max-width: none;
  min-height: 0;
  margin: 4px 0 0;
  padding-left: 2px;
  color: var(--mod-danger);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 20px;
  text-align: left;
  text-wrap: pretty;
}
.mod-send > [data-form-notice]:empty { display: none; }
.mod-send > [data-form-notice].notice { color: var(--mod-copy); }

.mod-form .form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* =============================================================
   CONFERMA — prende il posto del modulo: la stessa scheda, due righe
   ============================================================= */
.mod-done {
  --mod-done-pad: calc(var(--mod-card-pad) + 8px);
  display: grid;
  overflow: hidden;
  border-radius: var(--mod-card-r);
  background: var(--mod-card);
  box-shadow: var(--mod-card-shadow);
  font-family: var(--mod-font);
  animation: mod-done-in 0.6s var(--mod-ease) both;
}
.mod-done[hidden] { display: none; }
.mod-done:focus { outline: none; }

.mod-done__cell { padding: 40px var(--mod-done-pad) 32px; }
.mod-done__mark {
  display: block;
  width: 44px;
  height: 44px;
}
.mod-done__mark svg { display: block; width: 44px; height: 44px; overflow: visible; }
.mod-done__mark circle {
  fill: var(--mod-cta);
  transform-origin: 24px 24px;
  animation: mod-pop 0.5s var(--mod-ease) 0.15s both;
}
.mod-done__mark path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 0;
  animation: mod-draw 0.42s var(--mod-ease) 0.42s both;
}
.mod-done :is(h2, h3) {
  margin: 24px 0 0;
  color: var(--mod-ink);
  font-size: 2rem;
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
/* :not() alza la specificita' sopra regole di sezione tipo
   ".sector-rebuild-contact p:not(.corp-eyebrow)" */
.mod-done p:not(.mod-done__x) {
  max-width: 38ch;
  margin: 10px 0 0;
  color: var(--mod-copy);
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  line-height: 1.5;
  text-wrap: balance;
}

.mod-done__call {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 var(--mod-done-pad);
  background-color: var(--mod-card);
  background-image: var(--mod-line);
  background-repeat: no-repeat;
  background-position: var(--mod-done-pad) 0;
  background-size: calc(100% - var(--mod-done-pad)) 1px;
  color: var(--mod-copy);
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  transition: background-color 0.2s var(--mod-ease);
}
.mod-done__call strong {
  margin-left: auto;
  color: var(--mod-accent-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (hover: hover) {
  .mod-done__call:hover { color: var(--mod-copy); background-color: var(--mod-cell); }
}
.mod-done__call:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--mod-ring) var(--mod-accent); border-radius: 0 0 var(--mod-card-r) var(--mod-card-r); }

@keyframes mod-done-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes mod-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes mod-draw {
  from { stroke-dashoffset: 32; }
  to { stroke-dashoffset: 0; }
}

[data-done] .mod-form { display: none; }

/* =============================================================
   PAGINA A MODULO (/richiesta-tecnica/, /risorse/richiesta-documentazione/)
   Carta grigia fra header e footer; a sinistra titolo e UNA riga.
   ============================================================= */
body.page-mod main {
  padding-top: 0;
  background: #f5f5f7;
  overflow: visible;
  overflow-x: clip;
}

.mod-page {
  padding-block: clamp(56px, 7vw, 104px) clamp(72px, 8.5vw, 128px);
  background: var(--mod-surface);
  font-family: var(--mod-font);
}

.mod-page__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 648px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  width: min(100% - 48px, var(--max-width, 1200px));
  margin-inline: auto;
}

.mod-page__rail {
  position: sticky;
  top: calc(var(--nav-offset, var(--nav-height, 72px)) + 48px);
}

/* stessa voce dei titoli del sito: --fs-h1, 790, -0.05em */
.mod-page__h {
  margin: -0.15em 0 0;
  color: var(--mod-ink);
  font-size: var(--fs-h1, clamp(3rem, 5.6vw, 5.4rem));
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.mod-page__h span {
  display: block;
  color: var(--mod-gray);
}
/* titoli piu' lunghi ("Dicci il numero, / cerchiamo noi."): stessa voce, un
   gradino sotto, cosi' ogni riga resta intera nella colonna */
.mod-page__h--long { font-size: clamp(2.5rem, 4.3vw, 4.15rem); }

.mod-page__lede {
  max-width: 30em;
  margin: clamp(22px, 2.2vw, 30px) 0 0;
  color: var(--mod-copy);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.55;
  text-wrap: pretty;
}
.mod-page__lede span { display: block; }
.mod-page__lede a,
.mod-page__alt a {
  color: var(--mod-accent-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.mod-page__lede a:hover,
.mod-page__alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mod-page__alt {
  margin: 14px 0 0;
  color: var(--mod-copy);
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

/* dopo l'invio la riga a sinistra la dice gia' la conferma */
.mod-page:has([data-mod-done]:not([hidden])) :is(.mod-page__lede, .mod-page__alt) { display: none; }

.mod-page__panel {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* contenitori del modulo dentro sezioni di altre pagine */
.corp-custom-request__form,
.sector-request-panel { min-width: 0; }
/* la sezione della home col modulo: la stessa carta grigia */
.corp-custom-request { background: #f5f5f7; }
/* il telefono nella riga accanto al modulo: si vede che si tocca */
:is(.corp-custom-request__copy, .sector-rebuild-contact__copy) a[href^="tel:"] {
  color: #1d4ed8;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
:is(.corp-custom-request__copy, .sector-rebuild-contact__copy) a[href^="tel:"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.spx-cta__copy a[href^="tel:"] { color: #93b4f6; font-weight: 500; white-space: nowrap; }
/* settore EN su fondo blu notte: la scheda del modulo basta a se stessa */
.spx-cta .sector-request-panel { padding: 0; border-radius: 0; background: none; }
.spx-cta :is(.mod-form, .mod-done) { --mod-card-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1180px) {
  .mod-page,
  .mod-form,
  .mod-done { --mod-card-pad: 22px; --mod-card-r: 28px; }
  .mod-page__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 36px; }
  .mod-page__lede { font-size: 1.0625rem; }
}

/* tablet: una colonna, sugli stessi 20px di header e footer */
@media (max-width: 980px) {
  .mod-page__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    width: calc(100% - 40px);
    max-width: none;
    margin-inline: 20px;
  }
  .mod-page__rail { position: static; }
}

/* telefono: righe con etichetta in linea, come Contatti di iOS */
@media (max-width: 600px) {
  .mod-page,
  .mod-form,
  .mod-done {
    --mod-r: 14px;
    --mod-pad: 14px;
    --mod-row: 52px;
    --mod-label-w: 96px;
    --mod-card-r: 24px;
    --mod-card-pad: 12px;
  }
  .mod-done { --mod-done-pad: 24px; }
  .mod-page { padding-block: 36px 64px; }
  .mod-page__wrap { gap: 28px; }
  .mod-page__lede { margin-top: 18px; font-size: 1.0625rem; }
  .mod-form { gap: 10px; padding-bottom: 16px; }
  .mod-group--stack:has(> .mod-cell--file) { row-gap: 10px; }

  .mod-group { grid-template-columns: minmax(0, 1fr); }
  .mod-group > .mod-cell { grid-column: 1 / -1; }
  /* una colonna: niente verticali, filetto sopra ogni riga tranne la prima */
  .mod-group > .mod-cell { --tl: 0px; --tr: 0px; --br: 0px; --bl: 0px; --rule-left: none; --rule-top: var(--mod-line); }
  .mod-group > .mod-cell:first-child { --tl: var(--mod-r); --tr: var(--mod-r); --rule-top: none; }
  .mod-group > .mod-cell:last-child { --bl: var(--mod-r); --br: var(--mod-r); }

  /* la riga: etichetta a sinistra (colonna fissa), valore a destra */
  .mod-form .mod-cell:not(.mod-cell--text):not(.mod-cell--file):not(.mod-cell--choice):not(.mod-cell--top) {
    grid-template-columns: var(--mod-label-w) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }
  .mod-form .mod-cell:not(.mod-cell--text):not(.mod-cell--file):not(.mod-cell--choice):not(.mod-cell--top) > label {
    grid-area: 1 / 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 8px 0 var(--mod-pad);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    line-height: 20px;
  }
  .mod-form .mod-cell:not(.mod-cell--text):not(.mod-cell--file):not(.mod-cell--choice):not(.mod-cell--top) > label::before { content: none; }
  .mod-form .mod-cell:not(.mod-cell--text):not(.mod-cell--file):not(.mod-cell--choice):not(.mod-cell--top) > :is(input, .mod-known) {
    grid-area: 1 / 2;
    height: var(--mod-row);
    min-height: var(--mod-row);
    padding: 0 var(--mod-pad) 0 0;
  }
  .mod-form .mod-cell:not(.mod-cell--text):not(.mod-cell--file):not(.mod-cell--choice):not(.mod-cell--top) > .form__error {
    grid-area: 2 / 2;
    margin-top: -8px;
    padding: 0 var(--mod-pad) 12px 0;
  }

  /* area di testo, scelte e campi lunghi: l'etichetta resta sopra */
  .mod-form :is(.mod-cell--text, .mod-cell--choice, .mod-cell--top) > :is(label, legend) {
    padding-top: 14px;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    line-height: 20px;
  }
  .mod-form .mod-cell--text > label::before { height: 34px; }
  .mod-form .mod-cell > textarea { min-height: 116px; padding-top: 4px; }
  .mod-chips { gap: 8px 6px; }

  .mod-form .form__file { min-height: 72px; padding: 12px 14px 12px 12px; }
  .mod-form .form__file-control { gap: 12px; }
  .mod-form .form__file-control .mod-file__ico { width: 40px; height: 40px; }
  .mod-form .form__file-control .mod-file__opt { display: none; }

  .mod-end {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 6px;
  }
  .mod-form .mod-check { padding: 6px 0 0 6px; }
  .mod-go,
  .mod-end--stack .mod-go { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; min-height: 54px; margin-top: 0; }
  .mod-form .form__hint {
    justify-self: start;
    margin-top: -4px;
    padding-left: 6px;
    text-align: left;
  }
  .mod-send > [data-form-notice] { margin-top: -4px; }

  .mod-done__cell { padding: 32px var(--mod-done-pad) 28px; }
  .mod-done :is(h2, h3) { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-form *,
  .mod-form *::before,
  .mod-form *::after,
  .mod-done,
  .mod-done * {
    transition: none !important;
    animation: none !important;
  }
  .mod-go.is-loading::after { animation: mod-spin 1.6s linear infinite !important; }
}