/* WIZARD D'INTERVENTO — il vestito, in un posto solo.  (WIZ-ELE, 19/9/2026)
 *
 * Questo foglio e' IL COMPONENTE. Lo caricano step 2 e step 4 e non esiste una
 * seconda copia: era il difetto DIF-4 del parere UX («due wizard divergono al
 * primo fix, e il primo fix arriva con S1.4»).
 *
 * R3.8 — IL COMPONENTE NON POSSIEDE COLORI. Qui dentro non c'e' un solo valore
 * cromatico: solo token semantici che l'OSPITE mappa sui suoi. Percio' lo stesso
 * wizard e' scuro in step 2 e chiaro dentro .capv3 in step 4 senza che una riga
 * di questo file lo sappia, e la decisione PO sul tema dell'app (audit U-14) non
 * lo tocca.
 *
 *   --wz-superficie     la carta su cui vive la scheda
 *   --wz-superficie-2   il fondo delle zone rientrate (tabella, consegna)
 *   --wz-linea          il filo sottile fra le righe
 *   --wz-bordo-campo    il bordo di un campo che si puo' scrivere (>= 3:1)
 *   --wz-testo          il testo pieno
 *   --wz-testo-dim      il testo secondario  (>= 4,5:1 SUL FONDO SU CUI VIVE:
 *                       e' un vincolo dell'ospite, non di questo file — R2.3)
 *   --wz-firma          il verde della firma dell'utente
 *   --wz-riserva        l'ambra della marca «proposta da validare»
 *   --wz-focus          l'anello di messa a fuoco (>= 3:1, K-01b)
 *   --wz-mono/--wz-sans i due caratteri
 *
 * VINCOLI DI ACCETTAZIONE CHE VIVONO QUI (banco `scripts/banco_wizele.py`):
 *   A17 — zero valori cromatici letterali in questo file (nessun cancelletto,
 *         nessuna funzione rgb). Il banco lo misura sul file servito.
 *   R2.3 — nessun testo sotto 11px.
 *   R2.2 — nessuna intestazione va a capo.
 *   R2.11 — a 390px la riga e' a DUE PIANI e non c'e' scorrimento orizzontale.
 *         La media query e' SCOPED al componente: non tocca il guscio, non
 *         tocca global.css, non tocca i breakpoint globali (il face lift ci
 *         sta lavorando in parallelo). La dipendenza dal breakpoint del
 *         cockpit (audit A3-22) resta DICHIARATA e non risolta qui.
 */

/* R-13 — LA SOGLIA E' DEL CONTENITORE, dove il browser sa farlo. In step 4 il
   wizard vive dentro un accordion stretto su una finestra larga: con la sola
   media query la riga restava a sei colonne in 400 px di spazio. La media query
   di finestra resta come ripiego (e non fa danno: i due casi non si
   contraddicono, una finestra stretta e' anche un contenitore stretto). */
.wz {
  container-type: inline-size;
  container-name: wz;
  font-family: var(--wz-sans, inherit);
  color: var(--wz-testo, currentColor);
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 0;
  max-width: 100%;
}
.wz * { box-sizing: border-box; }

/* ── SLOT 1 · TESTATA — tre elementi, nessuno in piu' (R1.6) ─────────────── */
.wz-testata {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 0 10px; border-bottom: 1px solid var(--wz-linea, currentColor);
}
.wz-testata .wz-t-nome { font-size: 15px; font-weight: 600; flex: 1 1 200px; }
.wz-testata .wz-t-stato {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wz-firma, currentColor);
}
.wz-testata .wz-t-cifra {
  font-family: var(--wz-mono, monospace); font-size: 15px; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ── LA ZONA PROPOSTA — il filetto e' GRAFICO, non testuale (R1.2) ────────
   Copre il 100% dell'altezza di cio' che marca, anche con la nota chiusa.
   Vietata l'icona di avvertimento: in .capv3 l'ambra ha gia' quel significato. */
.wz-zona {
  border-left: 3px solid var(--wz-riserva, currentColor);
  padding: 12px 0 12px 13px;
  margin: 0;
}

/* ── SLOT 2 · RISERVA — una riga sola, mai chiudibile (R1.1) ─────────────── */
.wz-riserva {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.45; color: var(--wz-testo, currentColor);
  margin: 0 0 8px;
}
.wz-riserva .wz-marca {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-riserva, currentColor); white-space: nowrap;
}
.wz-perche {
  margin: 0 0 10px; font-size: 12px; line-height: 1.55;
  color: var(--wz-testo-dim, currentColor);
}
.wz-perche > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wz-mono, monospace); font-size: 11px; letter-spacing: .04em;
  color: var(--wz-testo-dim, currentColor); min-height: 44px;
}
.wz-perche > summary::-webkit-details-marker { display: none; }
.wz-perche > summary::after { content: "\25BE"; transition: transform .15s ease; }
.wz-perche[open] > summary::after { transform: rotate(180deg); }
.wz-perche .wz-perche-corpo { padding: 8px 0 2px; max-width: 78ch; }
.wz-perche p { margin: 0 0 7px; }

/* ── SLOT 3 · FONTE — mai muta (R1.5) ────────────────────────────────────── */
.wz-fonte {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--wz-testo-dim, currentColor); margin: 0 0 12px;
}
.wz-fonte b { color: var(--wz-testo, currentColor); font-weight: 600; }

/* ── SLOT 4 · DOMANDE — solo cio' che l'utente SA ────────────────────────── */
.wz-dom { margin: 0 0 14px; }
.wz-dom-tit {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor); margin: 0 0 7px;
}
.wz-dom-riga { margin: 0 0 11px; }
.wz-dom-lab {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: var(--wz-testo, currentColor); margin: 0 0 5px;
}
.wz-dom-lab small {
  display: block; font-size: 11px; line-height: 1.4;
  color: var(--wz-testo-dim, currentColor); margin-top: 2px;
}
.wz-scelte { display: flex; flex-wrap: wrap; gap: 7px; }
.wz-chip {
  min-height: 44px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--wz-bordo-campo, currentColor); border-radius: 7px;
  background: transparent; color: var(--wz-testo, currentColor);
  font-family: var(--wz-sans, inherit); font-size: 12.5px; cursor: pointer;
}
.wz-chip[aria-pressed="true"] {
  border-color: var(--wz-firma, currentColor);
  color: var(--wz-firma, currentColor); font-weight: 700;
  background: color-mix(in srgb, var(--wz-firma) 12%, transparent);
}
.wz-chip .wz-eff {
  font-family: var(--wz-mono, monospace); font-size: 11px;
  color: var(--wz-testo-dim, currentColor);
}
.wz-chip[aria-pressed="true"] .wz-eff { color: inherit; }
.wz-anno {
  min-height: 44px; width: 9ch; padding: 0 10px; text-align: right;
  border: 1px solid var(--wz-bordo-campo, currentColor); border-radius: 7px;
  background: transparent; color: var(--wz-testo, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 14px;
  appearance: textfield; -moz-appearance: textfield;
}
.wz-anno::-webkit-outer-spin-button,
.wz-anno::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ── SLOT 5 · PROPOSTA + OVERRIDE-FIRMA — la tabella ─────────────────────── */
.wz-tab { margin: 0; }
.wz-intest {
  display: grid; grid-template-columns: 1fr repeat(3, 62px) 52px 44px;
  grid-template-rows: auto auto;  /* B12 */
  gap: 8px; align-items: end; padding: 0 0 6px;
  border-bottom: 1px solid var(--wz-linea, currentColor);
}
/* R2.2 — mai a capo, mai oltre i 9 caratteri: il termine di mestiere sta
   nell'abbreviazione e nella legenda della nota. */
.wz-intest > span {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor); white-space: nowrap;
}
.wz-intest > span.wz-n { text-align: right; }
.wz-intest .wz-istruz {
  grid-column: 2 / 5; grid-row: 1;  /* B12: sopra le sigle, non al loro posto */
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px;
  font-family: var(--wz-sans, inherit); text-align: center; white-space: normal;
}
.wz-intest > span:not(.wz-istruz) { grid-row: 2; }  /* B12: sigle, TOT, VIA */
.wz-intest abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }

.wz-riga {
  display: grid; grid-template-columns: 1fr repeat(3, 62px) 52px 44px;
  gap: 8px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--wz-linea, currentColor);
}
/* R2.1 — tre livelli: il nome, il totale di riga, gli addendi. */
.wz-riga .wz-nome { font-size: 14px; font-weight: 600; min-width: 0; }
.wz-riga .wz-nome .wz-mq {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 400;
  color: var(--wz-testo-dim, currentColor); margin-left: 6px;
}
.wz-riga .wz-rigatot {
  font-family: var(--wz-mono, monospace); font-size: 14px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums;
}
.wz-cella { position: relative; }
/* R2.4/R2.5 — il campo E' il linguaggio di firma di step 4, miniaturizzato:
   vuoto = proposta accettata (il nostro numero e' il placeholder), scritto =
   firma (bordo pieno + pallino). Nessuna classe nuova per stati che esistono. */
.wz-inp {
  width: 100%; min-height: 44px; padding: 0 9px; text-align: right;
  border: 1px dashed var(--wz-bordo-campo, currentColor); border-radius: 7px;
  background: transparent; color: var(--wz-testo, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 14px;
  appearance: textfield; -moz-appearance: textfield;
}
.wz-inp::-webkit-outer-spin-button,
.wz-inp::-webkit-inner-spin-button { appearance: none; margin: 0; }
.wz-inp::placeholder { color: var(--wz-testo-dim, currentColor); opacity: 1; }
.wz-inp.filled {
  border-style: solid; border-color: var(--wz-firma, currentColor);
  color: var(--wz-firma, currentColor); font-weight: 700;
}
.wz-cella .wz-pallino {
  position: absolute; left: 7px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%;
  background: var(--wz-firma, currentColor);
}
.wz-old {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-family: var(--wz-mono, monospace); font-size: 11px;
  color: var(--wz-testo-dim, currentColor); margin-top: 3px;
}
/* R-07 — «torna alla proposta» e «perche' questi numeri» sono i due gesti di
   fiducia del wizard, ed erano i due bersagli piu' piccoli della scheda. */
.wz-rip {
  min-height: 44px; min-width: 44px; padding: 0 4px; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--wz-firma, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 13px; cursor: pointer;
}
.wz-rip svg, .wz-info svg, .wz-via svg { width: 16px; height: 16px; }
.wz-via {
  min-height: 44px; min-width: 44px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: transparent;
  color: var(--wz-testo-dim, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 14px; cursor: pointer;
}
.wz-via:hover { border-color: var(--wz-bordo-campo, currentColor); color: var(--wz-testo, currentColor); }
.wz-info {
  min-height: 44px; min-width: 44px; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wz-testo-dim, currentColor); font-size: 13px; cursor: pointer;
  vertical-align: middle;
}
/* R2.6 — una nota per volta, e il testo viene dal descrittore. */
.wz-nota {
  grid-column: 1 / -1; margin: 2px 0 8px; padding: 9px 11px;
  border-left: 2px solid var(--wz-linea, currentColor);
  font-size: 12px; line-height: 1.55; color: var(--wz-testo-dim, currentColor);
  max-width: 76ch;
}
.wz-nota b { color: var(--wz-testo, currentColor); font-weight: 600; }
.wz-nota .wz-nota-pro {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px dotted var(--wz-linea, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 11px; line-height: 1.5;
}
/* R2.9 — togliere e' reversibile, e si dice che cosa NON si e' toccato. */
.wz-tolta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--wz-linea, currentColor);
  font-size: 12.5px; color: var(--wz-testo-dim, currentColor);
}
/* A4 — anche questo bersaglio va a 44: e' il ripensamento a 6 secondi. */
.wz-annulla {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--wz-firma, currentColor);
  border-radius: 7px; background: transparent; color: var(--wz-firma, currentColor);
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
/* R2.10 — il tratteggio che esiste gia' (.cv-addvoce .cv-add-btn di step 4). */
.wz-agg { margin: 11px 0 0; }
.wz-agg-btn {
  min-height: 44px; padding: 0 15px; width: 100%;
  border: 1px dashed var(--wz-bordo-campo, currentColor); border-radius: 8px;
  background: transparent; color: var(--wz-testo, currentColor);
  font-family: var(--wz-sans, inherit); font-size: 12.5px; cursor: pointer; text-align: left;
}
.wz-agg-btn:hover { border-style: solid; }
.wz-agg-chip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

/* R2.7 — la riga totale con la quadratura in chiaro. */
.wz-tot {
  display: grid; grid-template-columns: 1fr repeat(3, 62px) 52px 44px;
  gap: 8px; align-items: center; padding: 10px 0 4px;
  border-top: 2px solid var(--wz-linea, currentColor); margin-top: 2px;
}
.wz-tot .wz-nome {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.wz-tot .wz-n {
  font-family: var(--wz-mono, monospace); font-size: 13px; text-align: right;
  color: var(--wz-testo-dim, currentColor); font-variant-numeric: tabular-nums;
}
.wz-tot .wz-rigatot {
  font-family: var(--wz-mono, monospace); font-size: 16px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums;
}
.wz-quadra {
  font-family: var(--wz-mono, monospace); font-size: 11px;
  color: var(--wz-testo-dim, currentColor); text-align: right; margin: 0 0 10px;
}

/* R2.8 — il numero che si dice all'artigiano. Non ridistribuisce MAI. */
.wz-lotto {
  margin: 12px 0 0; padding: 11px 0 0;
  border-top: 1px solid var(--wz-linea, currentColor);
}
.wz-lotto-riga {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 9px;
}
.wz-lotto-lab { font-size: 12.5px; color: var(--wz-testo, currentColor); flex: 1 1 210px; }
.wz-lotto-lab small {
  display: block; font-size: 11px; line-height: 1.4;
  color: var(--wz-testo-dim, currentColor); margin-top: 2px; max-width: 70ch;
}
.wz-scarto {
  margin: 0 0 9px; padding: 8px 11px;
  border-left: 3px solid var(--wz-riserva, currentColor);
  font-size: 12px; line-height: 1.5; color: var(--wz-testo, currentColor); max-width: 74ch;
}
.wz-scarto b { color: var(--wz-riserva, currentColor); font-weight: 700; }

/* ── SLOT 6a · ESCLUSIONI — nascono dai «no», il testo viene dal motore ──── */
.wz-escl {
  margin: 13px 0 0; padding: 11px 13px;
  border: 1px solid var(--wz-linea, currentColor);
  border-left: 3px solid var(--wz-riserva, currentColor); border-radius: 8px;
  background: var(--wz-superficie-2, transparent);
}
.wz-escl h5 {
  margin: 0 0 7px; font-family: var(--wz-mono, monospace); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-riserva, currentColor);
}
.wz-escl ul { margin: 0; padding-left: 18px; }
.wz-escl li {
  font-size: 12.5px; line-height: 1.55; color: var(--wz-testo, currentColor); margin: 0 0 4px;
}

/* ── SLOT 6b · PRESUPPOSTI — la checklist di chi riceve il lead ──────────── */
.wz-pres { margin: 13px 0 0; }
.wz-pres h5 {
  margin: 0 0 7px; font-family: var(--wz-mono, monospace); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor);
}
.wz-pres ul { margin: 0; padding-left: 18px; }
.wz-pres li {
  font-size: 12.5px; line-height: 1.55; color: var(--wz-testo-dim, currentColor); margin: 0 0 4px;
}
.wz-pres li b { color: var(--wz-testo, currentColor); font-weight: 600; }

/* ── SLOT 6c · CONSEGNA — cifre, che cosa resta, dove si va (R4.1/R4.2) ──── */
.wz-consegna {
  margin: 14px 0 0; padding: 13px 0 0;
  border-top: 1px solid var(--wz-linea, currentColor);
}
.wz-cifre {
  font-family: var(--wz-mono, monospace); font-size: 13px; font-weight: 700;
  color: var(--wz-testo, currentColor); margin: 0 0 5px;
  font-variant-numeric: tabular-nums;
}
.wz-resta {
  font-size: 12.5px; line-height: 1.55; color: var(--wz-testo-dim, currentColor);
  margin: 0 0 11px; max-width: 76ch;
}
.wz-azioni { display: flex; gap: 9px; flex-wrap: wrap; }
.wz-btn {
  min-height: 44px; padding: 0 17px; border-radius: 8px;
  font-family: var(--wz-sans, inherit); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--wz-bordo-campo, currentColor);
  background: transparent; color: var(--wz-testo, currentColor);
}
.wz-btn.wz-primario {
  border-color: var(--wz-firma, currentColor); color: var(--wz-firma, currentColor); font-weight: 700;
}
.wz-btn[disabled] { opacity: .55; cursor: default; }
.wz-esito {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--wz-testo, currentColor); max-width: 78ch;
}
.wz-ymyl {
  margin: 11px 0 0; font-size: 12px; line-height: 1.55;
  color: var(--wz-testo-dim, currentColor); max-width: 82ch;
}


/* ══════════════════════════════════════════════════════════════════════════
   L'INNESCO (19/9/2026) — la biforcazione, dentro la scheda, mai un modale
   --------------------------------------------------------------------------
   Nessun colore proprio nemmeno qui: le due strade hanno lo STESSO bordo, la
   STESSA altezza minima e la STESSA tipografia (criterio B1), e nessuna delle
   due ha un fondo pieno. Non e' una gerarchia: e' una biforcazione.
   ══════════════════════════════════════════════════════════════════════════ */
.wz-inn { margin: 14px 0 0; }
.wz-inn-occ {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor); margin: 0 0 8px;
}
.wz-inn-disc {
  font-size: 13px; line-height: 1.6; color: var(--wz-testo, currentColor);
  margin: 0 0 10px; max-width: 72ch;
}
.wz-inn-strade { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.wz-inn-str {
  flex: 1 1 260px; min-height: 44px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px; text-align: left;
  padding: 13px 15px; border-radius: 9px;
  border: 2px solid var(--wz-bordo-campo, currentColor);
  background: transparent; color: var(--wz-testo, currentColor);
  font-family: var(--wz-sans, inherit); cursor: pointer;
}
.wz-inn-str:hover { border-color: var(--wz-testo, currentColor); }
.wz-inn-eti {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor);
}
.wz-inn-nome { font-size: 15px; font-weight: 700; line-height: 1.3; }
.wz-inn-riga {
  font-size: 12.5px; line-height: 1.5; color: var(--wz-testo-dim, currentColor);
}
.wz-inn-fatto {
  font-family: var(--wz-mono, monospace); font-size: 11px; letter-spacing: .04em;
  color: var(--wz-testo-dim, currentColor); margin-top: 2px;
}
.wz-inn-coda {
  font-size: 12px; line-height: 1.55; color: var(--wz-testo-dim, currentColor);
  margin: 11px 0 0; max-width: 76ch;
}

/* L'interruttore delle viste — una vista, non un modo (Q5) */
.wz-viste {
  display: flex; gap: 0; flex: 0 0 auto;
  border: 1px solid var(--wz-bordo-campo, currentColor); border-radius: 8px;
  overflow: hidden;
}
.wz-vista {
  min-height: 44px; padding: 0 13px; border: none; background: transparent;
  color: var(--wz-testo-dim, currentColor); cursor: pointer;
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.wz-vista[aria-pressed="true"] {
  color: var(--wz-firma, currentColor);
  background: color-mix(in srgb, var(--wz-firma) 12%, transparent);
}

/* Le strisce di stato — nessuno finisce nel silenzio (§8) */
.wz-strisc {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 13px; border-radius: 8px;
  border-left: 3px solid var(--wz-riserva, currentColor);
  background: var(--wz-superficie-2, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--wz-testo, currentColor);
}
.wz-strisc-az { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.wz-strisc-btn {
  min-height: 44px; padding: 0 13px; border-radius: 8px;
  border: 1px solid var(--wz-bordo-campo, currentColor); background: transparent;
  color: var(--wz-testo, currentColor); font-family: var(--wz-sans, inherit);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* D8 — una riga e una casella, mai un modale. Il bersaglio e' tutta la riga. */
.wz-sopp {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px;
  cursor: pointer; width: 100%;
}
.wz-sopp input { width: 20px; height: 20px; margin: 12px 0 0; flex: 0 0 auto; }
.wz-sopp > span { padding: 11px 0 0; }
.wz-sopp small {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45;
  color: var(--wz-testo-dim, currentColor);
}

/* Il guidato — una DECISIONE per schermata */
.wz-gd-barra { margin: 13px 0 10px; }
.wz-gd-conta {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-testo-dim, currentColor); margin: 0 0 6px;
}
.wz-gd-segmenti { display: flex; gap: 5px; }
.wz-gd-seg {
  flex: 1 1 0; height: 4px; border-radius: 2px;
  background: var(--wz-linea, currentColor);
}
.wz-gd-seg.fatto { background: var(--wz-firma, currentColor); }
.wz-gd-tit { font-size: 15px; font-weight: 700; margin: 0 0 5px; }
.wz-gd-aiuto {
  font-size: 12.5px; line-height: 1.55; color: var(--wz-testo-dim, currentColor);
  margin: 0 0 12px; max-width: 74ch;
}
.wz-gd-nav { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 0; }

/* Il pannello dell'inventario, in linea: il posto, non il contenuto */
.wz-inv { margin: 0 0 12px; }

/* K-01b — l'anello dipende dal tema, perche' uno monocromatico non funziona
   su entrambi. Lo porta l'ospite in --wz-focus. */
.wz :focus-visible {
  outline: 2px solid var(--wz-focus, currentColor); outline-offset: 2px; border-radius: 7px;
}

/* Sola lettura onesta (R3.6): i campi non si toccano, e la ragione e' accanto. */
.wz.wz-bloccato .wz-inp,
.wz.wz-bloccato .wz-anno { opacity: .75; cursor: not-allowed; border-style: dotted; }
.wz.wz-bloccato .wz-via,
.wz.wz-bloccato .wz-agg-btn,
.wz.wz-bloccato .wz-chip { display: none; }

/* ── R2.11 · MOBILE — riga a DUE PIANI, mai scorrimento orizzontale ───────
   Il pattern e' quello gia' in casa (tool_pavimenti.html:125-139), lodato
   dall'audit. Vietato overflow-x sulla tabella: e' un modulo di INPUT.
   ⚠ La soglia e' del COMPONENTE (container query dove c'e', larghezza di
   finestra come ripiego): non si tocca il guscio. */
@media (max-width: 820px) {
  .wz-intest { display: none; }
  .wz-riga {
    grid-template-columns: 1fr auto 44px;
    grid-template-areas: "nome tot via" "campi campi campi";
    row-gap: 7px; padding: 10px 0;
  }
  .wz-riga .wz-nome { grid-area: nome; }
  .wz-riga .wz-rigatot { grid-area: tot; }
  .wz-riga .wz-via { grid-area: via; }
  .wz-riga .wz-celle { grid-area: campi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wz-cella .wz-mini {
    display: block; font-family: var(--wz-mono, monospace); font-size: 11px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--wz-testo-dim, currentColor); margin: 0 0 3px; white-space: nowrap;
  }
  .wz-tot { grid-template-columns: 1fr auto; row-gap: 5px; }
  .wz-tot .wz-n { display: none; }
  .wz-tot .wz-spazio { display: none; }
  .wz-azioni .wz-btn { flex: 1 1 100%; }
}
/* Oltre gli 820 le micro-etichette del piano 2 non servono: le porta
   l'intestazione, che li' sta su una riga sola. */
@media (min-width: 821px) {
  .wz-cella .wz-mini { display: none; }
  .wz-riga .wz-celle { display: contents; }
}

/* R-13 — LO STESSO BLOCCO, misurato sul CONTENITORE. Dove le container query
   ci sono, la riga si impila anche in un accordion stretto dentro una finestra
   larga (il caso di step 4, audit A3-22).
   LA SOGLIA NON E' LA STESSA DELLA FINESTRA, ED E' UNA MISURA: 820 px era la
   soglia di FINESTRA, scelta per dire «schermo stretto». Il contenitore e' un
   altra cosa: in step 2, su una finestra da 1360, il wizard vive in 705 px —
   con 820 di soglia di contenitore la scheda desktop si sarebbe impilata tutta,
   cambiando l aspetto di una pagina che oggi funziona. La riga ha bisogno di
   ~430 px per le tre colonne numeriche piu il nome: sotto i 600 px si impila,
   sopra no. Misurato il 20/9/2026 su step 2 (705 px) e step 4 (accordion). */
@container wz (max-width: 600px) {
  .wz-intest { display: none; }
  .wz-riga {
    grid-template-columns: 1fr auto 44px;
    grid-template-areas: "nome tot via" "campi campi campi";
    row-gap: 7px; padding: 10px 0;
  }
  .wz-riga .wz-nome { grid-area: nome; }
  .wz-riga .wz-rigatot { grid-area: tot; }
  .wz-riga .wz-via { grid-area: via; }
  .wz-riga .wz-celle { grid-area: campi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wz-cella .wz-mini {
    display: block; font-family: var(--wz-mono, monospace); font-size: 11px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--wz-testo-dim, currentColor); margin: 0 0 3px; white-space: nowrap;
  }
  .wz-tot { grid-template-columns: 1fr auto; row-gap: 5px; }
  .wz-tot .wz-n { display: none; }
  .wz-tot .wz-spazio { display: none; }
  .wz-azioni .wz-btn { flex: 1 1 100%; }
  .wz-inn-str { flex: 1 1 100%; }
  .wz-strisc-az { margin-left: 0; }
  .wz-gd-nav .wz-btn { flex: 1 1 100%; }
}


/* ═══ LA FINESTRA — vista a tutto schermo (ordine PO, 20/9/2026) ════════════
   A1 emendato (parere §16): non e' un dialogo, e' una REGIONE a schermo pieno
   con l'uscita sempre in vista. Stessi 11 token, nessun colore scritto qui.

   IL CONTENITORE SI SPOSTA, ed e' la riga che tiene in piedi tutto il resto:
   `container-type` su `.wz` renderebbe `.wz` il blocco contenitore di un
   `position: fixed` discendente (containment di layout), e la finestra
   resterebbe larga quanto la scheda. Mentre la finestra e' aperta il
   contenitore e' `.wz-fin-corpo`, con lo stesso nome: le container query di
   R-13 continuano a valere, sulla larghezza giusta. */
.wz.wz-con-finestra { container-type: normal; container-name: none; }
/* Il contenitore sta sulla COLONNA, non sulla finestra: le container query di
   R-13 devono misurare la larghezza che il wizard ha davvero. */
.wz-fin-dentro { container-type: inline-size; container-name: wz; }

/* ── LA STRISCIA nella scheda: dove sei, quanto fa, e la porta per rientrare */
.wz-segna {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 0 0;
}
.wz-segna-testo {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
}
.wz-segna-nome {
  font-size: 13px; font-weight: 700; color: var(--wz-testo, currentColor);
}
.wz-segna-dove {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-firma, currentColor);
}
.wz-segna-conto {
  font-family: var(--wz-mono, monospace); font-size: 11px;
  color: var(--wz-testo-dim, currentColor);
}
.wz-segna-az { flex: 0 0 auto; }
.wz-segna-apri { min-height: 44px; }
.wz-segna-congedo, .wz-segna-pend, .wz-segna-esito {
  flex: 1 1 100%; margin: 6px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--wz-testo-dim, currentColor);
}
.wz-segna-pend { color: var(--wz-riserva, currentColor); font-weight: 600; }

/* ── IL LAYER. Fondo pieno: la pagina sotto non si vede. */
.wz-fin {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; flex-direction: column;
  background: var(--wz-superficie, Canvas);
  color: var(--wz-testo, currentColor);
  font-family: var(--wz-sans, inherit);
  font-size: 13px; line-height: 1.5;
  overscroll-behavior: contain;
}
.wz-fin:focus { outline: none; }
.wz-fin:focus-visible {
  outline: 2px solid var(--wz-focus, currentColor); outline-offset: -2px;
}
.wz-fin-testata {
  flex: 0 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--wz-linea, currentColor);
  background: var(--wz-superficie, Canvas);
}
.wz-fin-chi {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
}
.wz-fin-nome { font-size: 14px; font-weight: 700; }
.wz-fin-dove {
  font-family: var(--wz-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wz-firma, currentColor);
}
.wz-fin-cifra {
  font-family: var(--wz-mono, monospace); font-size: 13px; font-weight: 700;
  white-space: nowrap; color: var(--wz-testo, currentColor);
}
.wz-fin-x {
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wz-bordo-campo, currentColor); border-radius: 8px;
  background: transparent; color: var(--wz-testo, currentColor); cursor: pointer;
}
.wz-fin-x:focus-visible {
  outline: 2px solid var(--wz-focus, currentColor); outline-offset: 2px;
}
/* IL CORPO E' LO SCROLLPORT: scorre questo, non la pagina sotto. */
.wz-fin-corpo {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 12px 16px 20px;
}
/* dentro la finestra il wizard NON ha il margine che aveva in linea: li' serviva
   a staccarlo dal contenuto della scheda, qui sopra non c'e' niente. */
.wz-fin-corpo > .wz-strisc:first-child,
.wz-fin-corpo > .wz-dom:first-child,
.wz-fin-corpo > .wz-gd-barra:first-child { margin-top: 0; }
.wz-fin-piede {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--wz-linea, currentColor);
  background: var(--wz-superficie, Canvas);
}
.wz-fin-piede .wz-btn { min-height: 44px; }

/* A 390 la finestra e' TUTTA la viewport: i fianchi si stringono perche' la
   larghezza utile del wizard e' la cosa da difendere (misurata dal banco: la
   riga della tabella ha bisogno dello spazio, e in step 2 ne aveva 85 px). */
@media (max-width: 480px) {
  .wz-fin-testata, .wz-fin-piede, .wz-fin-corpo {
    padding-left: 14px; padding-right: 14px;
  }
  .wz-fin-piede .wz-btn { flex: 1 1 auto; }
  .wz-segna-az, .wz-segna-apri { flex: 1 1 100%; width: 100%; }
}

/* ── Le due rifiniture del 20/9, trovate guardando gli scatti ───────────
   1. il passo si dice UNA volta sola: la testata della finestra lo porta gia',
      e la barra del guidato tiene i segmenti (che sono il disegno, non la
      frase). Fuori dalla finestra la barra resta intera.
   2. la colonna del testo ha un tetto: a 1440 la prosa faceva righe da ~200
      caratteri. Il tetto non si vede sotto i 1120 px. */
.wz-fin .wz-gd-conta { display: none; }
.wz-fin-dentro { max-width: 1120px; margin: 0 auto; }

/* wz-nascosta — la regola che mancava (A5.b): quando la testata porta la
   istruzione di colonna, le sigle di famiglia si nascondono ALLA VISTA ma
   restano per le tecnologie assistive (visually-hidden, niente display:none).
   overflow:hidden e position:absolute: ammessi da M3.e e A1 emendati. */
/* .wz-nascosta SPENTA (panel UX 21/9, B12): le sigle restano VISIBILI —
   l istruzione e un aiuto, non un etichetta. La classe resta nel DOM, inerte. */

/* ── La terza voce dell'innesco (21/9): una riga sua, sotto le due strade.
   B1 vuole le DUE strade di peso identico; questa non e' una terza strada, e'
   un fatto che compare solo quando e' vero. Stesso vestito, altra riga. */
.wz-inn-riprendi { flex: 1 1 100%; }