/* ------------------------------------------------------------------------------------------------------
   LE TRE VOCI (G1, 6/11/2026). docs/ideas/2026-11-06-la-grafica-unica-di-zeta.md

   In ogni schermata parlano tre presenze, e si riconoscono senza leggere:
   - TU: ciò che aspetta una decisione. Il giallo del marchio (--tu), solo qui, e la LINGUETTA: il taglio a 45° in alto a
     destra, il tratto obliquo della Z. Se è giallo, tocca a te.
   - ZETA: il lavoro fatto da sola. Il blu del marchio (--zeta) e la piccola Z, sempre con «annulla».
   - IL MONDO: ciò che arriva da fuori (WhatsApp, telefono, email, portale, banca). L'inchiostro e la fonte scritta.
   Il rosso resta l'allarme, il verde il «più». Il foglio si carica per ultimo: a parità di selettore vince lui.
   ------------------------------------------------------------------------------------------------------ */

/* ---- LA LINGUETTA: il taglio della Z, in alto a destra ------------------------------------------------------------ */
.linguetta, .decisioni > .decisione, .carta-adesso {
  --taglio: 22px;
  clip-path: polygon(0 0, calc(100% - var(--taglio)) 0, 100% var(--taglio), 100% 100%, 0 100%);
}
.linguetta::after, .decisioni > .decisione::after, .carta-adesso::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--taglio); height: var(--taglio);
  background: var(--tu); clip-path: polygon(0 0, 100% 100%, 0 100%); pointer-events: none;
}

/* ---- LA CARTA DELLA DECISIONE (Da fare) ---------------------------------------------------------------------------- */
.decisioni { gap: .7rem; }
.decisioni > .decisione {
  position: relative;
  background: var(--scheda);
  border: 1px solid var(--bordo);
  border-left: 5px solid var(--tu);
  border-radius: var(--raggio);
  padding: .9rem calc(var(--taglio) + .6rem) .85rem 1rem;
}
.decisioni > .decisione > strong:first-of-type,
.decisioni > .decisione > .decisione-testo > strong:first-of-type { font-size: 1.05rem; line-height: 1.3; }
.decisioni > .decisione .tipo { color: var(--tenue); }
.decisioni > .decisione.urgente { border-left-color: var(--meno); border-top: 1px solid var(--bordo); }
.decisioni > .decisione.urgente::after { background: var(--meno); }
.decisioni > .decisione .etichetta-urgente { color: var(--meno); }
/* LA SEZIONE «DA DECIDERE» non ha più la sua riga blu: la voce è delle carte. */
.scheda.proposta { border-left: 1px solid var(--bordo); }

/* ---- LA CARTA «ADESSO» DELLA HOME: la stessa linguetta, più grande ------------------------------------------------ */
.carta-adesso { --taglio: 28px; padding-right: calc(var(--taglio) + .8rem); }
.carta-adesso.urgente::after { background: var(--meno); }
.carta-adesso.carta-vuota { clip-path: none; }
.carta-adesso.carta-vuota::after { display: none; }

/* ---- ZETA: IL SEGNO DEL MOTORE (9/11/2026; Giuseppe: «cambia quella Z che hai creato tu perché è brutta e irriconoscibile.
   Riproduci un'altra ZETA per identificare il motore Zeta»). Il segno piccolo del marchio
   (marchio/segno.svg: il rotolo in alto, i tre tratti della velocità, il rotolo in basso), lo stesso di SegnoDiZeta.razor nella
   testata e nella barra, del colore di Zeta. Dovunque Zeta parla (la voce blu, «Fatto da Zeta», le proposte) c'è lo stesso segno.
   Prima: due righe e tre tratti obliqui disegnati in CSS, poi il PNG del rotolo in un tondo, illeggibile a questa misura. */
.mini-z {
  display: inline-block; flex: none; width: 1.45rem; height: 1.05rem; vertical-align: -.15rem;
  background: var(--zeta);
  -webkit-mask: url("marchio/segno.svg") center / contain no-repeat;
  mask: url("marchio/segno.svg") center / contain no-repeat;
}
/* La riga del lavoro di Zeta: la piccola Z davanti, il fondo del blu velato. */
.voce-zeta {
  display: flex; gap: .6rem; align-items: center;
  padding: .55rem .75rem; border-radius: var(--raggio);
  background: var(--zeta-velo); border-left: 4px solid var(--zeta);
}
.voce-zeta::before { content: ""; }
.voce-zeta .annulla, a.annulla { color: var(--tenue); font-size: .88rem; text-decoration: underline; }
.fatto-da-solo-riga { display: flex; justify-content: center; align-items: baseline; gap: .5rem; }
.fatto-da-solo-riga::before {
  content: ""; display: inline-block; width: 1.3rem; height: .95rem; flex: none; vertical-align: -.12rem;
  background:
    linear-gradient(var(--zeta), var(--zeta)) 0 0.06rem / 100% 2px no-repeat,
    linear-gradient(var(--zeta), var(--zeta)) 0 calc(100% - .06rem) / 100% 2px no-repeat,
    repeating-linear-gradient(-34deg, transparent 0 .25rem, var(--zeta) .25rem .4rem, transparent .4rem .56rem);
}

/* ---- IL MONDO: il punto e la fonte -------------------------------------------------------------------------------- */
.voce-mondo { display: flex; gap: .6rem; align-items: baseline; }
.voce-mondo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mondo); flex: none; transform: translateY(-.05rem); }
.fonte {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue); border: 1px solid var(--bordo); border-radius: 999px; padding: .05rem .5rem; margin-right: .35rem;
}

/* ---- IL CONTEGGIO DI DA FARE: il giallo, perché tocca a te ------------------------------------------------------- */
.conto-adesso { font-variant-numeric: tabular-nums; }

/* ---- LA DIAGONALE: il separatore del percorso e la striscia di avanzamento ------------------------------------- */
.sep-z { display: inline-block; width: .55rem; height: 1rem; background: var(--bordo); clip-path: polygon(70% 0, 100% 0, 30% 100%, 0 100%); vertical-align: -.15rem; margin: 0 .35rem; }
.avanza { height: .7rem; border-radius: 999px; background: var(--bordo); overflow: hidden; }
.avanza > span {
  display: block; height: 100%;
  background: repeating-linear-gradient(-34deg, var(--zeta) 0 .45rem, color-mix(in srgb, var(--zeta) 70%, var(--scheda)) .45rem .7rem);
}

/* ---- I NUMERI ALLINEATI: le cifre tabulari dove si leggono importi ------------------------------------------- */
.quanto, .importo, td.numero, .cifra { font-variant-numeric: lining-nums tabular-nums; }

/* ---- I PULSANTI: almeno 44 px, il fuoco giallo ------------------------------------------------------------------ */
.azione-principale, .azione-seconda, .decisioni > .decisione button, .decisioni > .decisione .azione { min-height: 2.75rem; }
/* IL FUOCO È BLU (grafica B, onda 1): il giallo su bianco non si vedeva (1,6:1). Lo stile completo è in mattoni.css. */
:focus-visible { outline-color: var(--marchio); }

/* ---- I PULSANTI DEI MODULI: pieni e piatti, niente sfumatura né ombra (G1) ------------------------------------- */
.scheda form button, .barra button, .modulo button:not(.mezzaluna) {
  background: var(--marchio); box-shadow: none; border: 1px solid var(--marchio);
}
/* IL SECONDARIO È DAVVERO SECONDARIO: leggero, con il filo. Una carta ha un'azione principale sola. */
.scheda form button.secondario, .scheda form button.secondaria {
  background: var(--scheda); color: var(--testo); border: 1px solid var(--bordo);
}
.scheda form button.secondario:hover:not(:disabled), .scheda form button.secondaria:hover:not(:disabled) {
  filter: none; border-color: var(--marchio); color: var(--marchio);
}
/* «Scarta» nella carta della decisione: la parola in rosso, non un blocco rosso che pesa quanto il sì. DALLA GRAFICA B (onda 1,
   12/11/2026) è il «pericolo» di tutte le pagine (mattoni.css): testo rosso sottolineato, senza fondo e senza contorno. */
.decisioni > .decisione form.scarta button.pericolo {
  background: transparent; color: var(--meno); border-color: transparent; text-decoration: underline;
}
.decisioni > .decisione form.rimanda, .decisioni > .decisione form.scarta { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-right: .4rem; }
.decisioni > .decisione form.rimanda button, .decisioni > .decisione form.scarta button { margin-top: .4rem; }
/* LA SPIEGAZIONE DELLA CARTA È TESTO, non una pillola grigia. */
.decisioni > .decisione .tipo {
  display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: .15rem 0 0;
  font-size: .92rem; line-height: 1.4; color: var(--tenue);
}

/* LE AZIONI LEGGERE IN FILA (G1, visto dal vivo): «Rimanda a domani», «Fra una settimana» e «Scarta» stavano uno sotto
   l'altro e la carta diventava lunga il doppio. Il resto della carta resta a tutta larghezza. */
.decisioni > .decisione { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .4rem; row-gap: .3rem; }
.decisioni > .decisione > * { flex: 1 1 100%; min-width: 0; }
.decisioni > .decisione > form.rimanda, .decisioni > .decisione > form.scarta { flex: 0 0 auto; margin-right: 0; }
.decisioni > .decisione form button { margin-top: .35rem; }

/* ---- LA CARTA DELLA DECISIONE IN DUE PARTI (grafica B, onda 3, 12/11/2026) ------------------------------------------------
   «decisione-testo» (urgente, che cosa, perché) e «decisione-scelte» (il resto: il messaggio pronto, i moduli, Rimanda e
   Scarta). Dentro ognuna vale la fila di sopra: un pezzo per riga, Rimanda e Scarta affiancati. La carta è un contenitore:
   quando è larga almeno 44rem il testo sta a sinistra e le scelte in una colonna a destra (da 22 a 30rem), con i campi
   (prezzo, cliente) a tutta larghezza della colonna; più stretta, le scelte vanno sotto il testo come prima. */
.decisioni > .decisione { container-type: inline-size; container-name: decisione; }
.decisioni > .decisione > :is(.decisione-testo, .decisione-scelte) {
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .4rem; row-gap: .3rem; min-width: 0;
}
.decisioni > .decisione > :is(.decisione-testo, .decisione-scelte) > * { flex: 1 1 100%; min-width: 0; }
.decisioni > .decisione > .decisione-scelte > :is(form.rimanda, form.scarta) { flex: 0 1 auto; margin-right: 0; max-width: 100%; }
@container decisione (min-width: 44rem) {
  .decisioni > .decisione > .decisione-testo { flex: 1 1 0; padding-right: 1.5rem; }
  .decisioni > .decisione > .decisione-scelte {
    flex: 0 0 clamp(22rem, 40%, 30rem);
    padding-left: 1.25rem; border-left: 1px solid var(--bordo);
  }
  .decisioni > .decisione > .decisione-testo > strong:first-of-type { font-size: var(--fs-l); }
  /* Nella colonna delle scelte il pulsante del sì prende la larghezza della colonna: si trova a colpo d'occhio. */
  .decisioni > .decisione > .decisione-scelte > form:not(.rimanda, .scarta) > button:last-child { width: 100%; }
  .decisioni > .decisione > .decisione-scelte > form:not(.rimanda, .scarta) label { display: grid; gap: .2rem; }
  .decisioni > .decisione > .decisione-scelte > form:not(.rimanda, .scarta) :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }
}

/* ---- LA HOME DEL PC: LA Z AL CENTRO (8/11/2026, Giuseppe: «rendi la Z centrale, attualmente è a sinistra»; proposta C della
   barra di Zeta). Tre zone sulla pagina intera: a sinistra «Adesso» (ciò che tocca a te), al centro l'anello con la Z, a destra
   il resto di oggi, il «come va» e il fatto da Zeta. Prima (G1) la Z stava a sinistra e tutto il resto a destra. Sotto gli 88rem
   vale pc.css, con la stessa idea; sul telefono home.css.
   DA 100REM (grafica B, onda 3; prima 88rem): sotto, le tre zone minime (22 + 42 + 22rem più gli spazi) non stavano nella
   pagina e «Adesso» si stringeva; tra 64 e 100rem la home ha due colonne (pc.css). */
@media (min-width: 100rem) {
  main:has(.anello-della-z) { max-width: 124rem; }
  .home:has(> .anello-della-z) {
    display: grid; grid-template-columns: minmax(22rem, 1fr) minmax(42rem, 50rem) minmax(22rem, 1fr);
    column-gap: 1.75rem; row-gap: 1rem; align-items: start;
  }
  .home:has(> .anello-della-z) > * { grid-column: 1 / -1; }
  .home:has(> .anello-della-z) > .saluto { text-align: center; }
  .home:has(> .anello-della-z) > .anello-della-z { grid-column: 2; grid-row: 2 / span 3; margin: 0; max-width: none; }
  .home:has(> .anello-della-z) > .adesso { grid-column: 1; grid-row: 2 / span 3; max-width: none; margin: 0; }
  .home:has(> .anello-della-z) > .il-resto { grid-column: 3; grid-row: 2; max-width: none; margin: 0; }
  .home:has(> .anello-della-z) > .fatto-da-solo-riga { grid-column: 3; grid-row: 4; max-width: none; margin: 0; justify-content: flex-start; text-align: left; }
}

/* ---- LO SPICCHIO SPENTO È UN CONTORNO (G1, visto dal vivo): il grigio pieno pesava proprio dove non c'è niente. -------- */
.spicchio.spento { background: transparent; border: 1px dashed var(--bordo); }
.spicchio.spento:hover { background: transparent; }
/* LO SPICCHIO CON QUALCOSA DA DECIDERE prende la voce «Tu»: il bordo giallo. L'urgente resta rosso (home.css). */
.spicchio:not(.spento):not(.urgente) { border-color: var(--bordo); }

/* ---- LE RIGHE «POI» SONO DECISIONI: la piccola linguetta gialla davanti (l'urgente ha già il pallino rosso). ------- */
.poi-riga:not(.urgente) .poi-cosa::before {
  content: ""; display: inline-block; width: .85rem; height: .62rem; margin-right: .45rem; vertical-align: .02rem;
  background: var(--tu); clip-path: polygon(0 0, 70% 0, 100% 40%, 100% 100%, 0 100%);
}

/* ---- IL NUMERO CON LA SUA LINEA (G2) ------------------------------------------------------------------------------ */
.come-va > h2 { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); }
.numeri-linea { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.numero-linea {
  background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .8rem .95rem .7rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem;
}
.numero-nome { margin: 0; font-size: .82rem; font-weight: 600; color: var(--tenue); }
.numero-cifra { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.numero-diff {
  margin: 0; align-self: flex-start; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem;
  font-variant-numeric: tabular-nums;
}
.numero-diff.bene { color: var(--piu); background: color-mix(in srgb, var(--piu) 12%, transparent); }
.numero-diff.male { color: var(--meno); background: color-mix(in srgb, var(--meno) 12%, transparent); }
.numero-svg { display: block; width: 100%; height: 2.75rem; margin-top: .4rem; overflow: visible; }
.numero-da { margin-top: .3rem; font-size: .82rem; font-weight: 600; color: var(--marchio); text-decoration: none; }
.numero-da:hover { text-decoration: underline; }
/* NELLA HOME DEL PC il «come va» sta nella colonna di destra, sotto il resto di oggi; due per riga. Da 100rem come le tre
   zone (onda 3): sotto, nella home a due colonne, il «come va» prende la riga intera. */
@media (min-width: 100rem) {
  .home:has(> .anello-della-z) > .come-va { grid-column: 3; grid-row: 3; max-width: none; margin: 0; }
  .home:has(> .anello-della-z) > .fatto-da-solo-riga { grid-row: 4; }
  .home > .come-va .numeri-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- LA STORIA CON LE VOCI (G3): una colonna sola, il segno di chi parla sulla riga del tempo ------------------------ */
.storia-voci { list-style: none; margin: .25rem 0 0; padding: 0 0 0 1.6rem; position: relative; display: grid; gap: .5rem; }
.storia-voci::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--bordo); }
.storia-riga { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; padding: .5rem .7rem; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--scheda); }
.storia-corpo { flex: 1 1 14rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.storia-corpo a { font-weight: 600; text-decoration: none; color: var(--testo); }
.storia-corpo a:hover { color: var(--marchio); text-decoration: underline; }
.storia-corpo .nota { flex-basis: 100%; margin: 0; }
.storia-quando { color: var(--tenue); font-size: .82rem; font-variant-numeric: tabular-nums; }
.storia-tipo { font-size: .78rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.storia-segno { position: absolute; left: -1.55rem; top: .7rem; width: 1.3rem; height: .95rem; display: block; }
.voce-mondo > .storia-segno::before { content: ""; position: absolute; left: .35rem; top: .15rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mondo); }
.voce-lavoro > .storia-segno::before { content: ""; position: absolute; left: .35rem; top: .15rem; width: .6rem; height: .6rem; border-radius: 2px; background: var(--scheda); border: 2px solid var(--tenue); }
.voce-zeta { border-left: 4px solid var(--zeta); background: color-mix(in srgb, var(--zeta-velo) 60%, var(--scheda)); }
.voce-zeta > .storia-segno {
  background:
    linear-gradient(var(--zeta), var(--zeta)) 0 0.06rem / 100% 2px no-repeat,
    linear-gradient(var(--zeta), var(--zeta)) 0 calc(100% - .06rem) / 100% 2px no-repeat,
    repeating-linear-gradient(-34deg, transparent 0 .25rem, var(--zeta) .25rem .4rem, transparent .4rem .56rem);
}
.voce-tu { border-left: 4px solid var(--tu); background: color-mix(in srgb, var(--tu-velo) 70%, var(--scheda)); }
.voce-tu > .storia-segno { background: var(--tu); clip-path: polygon(0 0, 70% 0, 100% 40%, 100% 100%, 0 100%); }
.voce-tu .storia-tipo { color: var(--testo); }
.storia-annulla { margin: 0; }
.storia-annulla button { min-height: 0; padding: .2rem .6rem; font-size: .82rem; margin: 0; }

/* ---- LA GRIGLIA DEL TEMPO (G4): una pista per risorsa, le colonne disegnate dal fondo, i blocchi in percentuale ------- */
.griglia-tempo { overflow-x: auto; background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.gt-testa, .gt-riga { display: grid; grid-template-columns: 9rem minmax(calc(var(--colonne) * 4.2rem), 1fr); }
.gt-testa { border-bottom: 1px solid var(--bordo); font-size: .78rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.gt-angolo { padding: .45rem .6rem; font-weight: 600; }
.gt-ore { display: grid; grid-template-columns: repeat(var(--colonne), 1fr); }
.gt-ore > span { padding: .45rem .4rem; border-left: 1px solid var(--bordo); white-space: nowrap; }
.gt-riga { border-bottom: 1px solid var(--bordo); min-height: 3.4rem; }
.gt-riga:last-child { border-bottom: 0; }
.gt-risorsa { padding: .55rem .6rem; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.gt-risorsa small { display: block; font-weight: 400; color: var(--tenue); font-size: .78rem; }
.gt-pista {
  position: relative; display: block;
  background: repeating-linear-gradient(90deg, var(--bordo) 0 1px, transparent 1px calc(100% / var(--colonne)));
}
.gt-blocco {
  position: absolute; top: .35rem; bottom: .35rem; border-radius: 6px; padding: .2rem .45rem; overflow: hidden;
  font-size: .78rem; line-height: 1.25; text-decoration: none; color: var(--testo); white-space: nowrap; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--testo) 8%, var(--scheda)); border: 1px solid var(--bordo);
}
.gt-blocco b { display: block; overflow: hidden; text-overflow: ellipsis; }
.gt-blocco span { color: var(--tenue); }
.gt-blocco:hover, .gt-blocco:focus-visible { border-color: var(--marchio); }
.gt-da-decidere { background: var(--tu-velo); border-color: var(--tu); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.gt-zeta { background: var(--zeta-velo); border-color: var(--zeta); }
.gt-fatto { background: transparent; border-style: dashed; color: var(--tenue); }
.gt-portale { background: color-mix(in srgb, var(--accento3) 14%, var(--scheda)); border-color: color-mix(in srgb, var(--accento3) 55%, transparent); }

/* ---- COSA FARE QUI (H412, 9/11/2026): le proposte di Zeta nello spazio libero dell'agenda. Ogni proposta è un pulsante: un tocco e il
   lavoro è in agenda. La voce è quella di Zeta (il blu); il perché sotto, piccolo. ------------------------------------------------- */
.proposte-qui { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: .35rem 0 .8rem; }
.proposte-qui > form { margin: 0; }
.proposta-qui {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left;
  padding: .55rem .7rem; border-radius: var(--raggio); border: 1px solid color-mix(in srgb, var(--zeta) 35%, var(--bordo));
  background: var(--zeta-velo); color: var(--testo); font-weight: 500; cursor: pointer;
}
.proposta-qui:hover, .proposta-qui:focus-visible { border-color: var(--zeta); }
.proposta-qui small { color: var(--tenue); font-size: .78rem; font-weight: 400; }
.modulo-qui.scelta-cliente { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }

/* ---- IL MOTORE DI ZETA NEL PRIMO INCONTRO (9/11/2026): i sigilli affiancati, i pezzi da spuntare, «Entra in Zeta». ---- */
.motore-sigilli { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: .6rem; }
.motore-sigillo { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .7rem .8rem; background: var(--scheda); }
.motore-sigillo h3 { margin: 0 0 .25rem; font-size: .9rem; }
.motore-sigillo .elenco li { padding: .3rem 0; }
.scheda form label.pezzo-del-motore { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--testo); }
.pezzo-del-motore input { margin-top: .2rem; accent-color: var(--zeta); }
.pezzo-del-motore.sempre { display: flex; gap: .5rem; font-size: .9rem; }
.pezzo-del-motore.sempre > span[aria-hidden] { color: var(--zeta); font-size: .7rem; line-height: 1.6; }
.sigilli-di-zeta strong { color: var(--zeta); }
.saltati summary { cursor: pointer; color: var(--tenue); font-size: .9rem; margin-top: .4rem; }
/* «ENTRA IN ZETA»: il pulsante grande con il segno; al passaggio i tre tratti del segno corrono. */
.entra-in-alto { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .8rem 0 0; }
.entra-in-alto .entra-in-zeta { margin: 0; }
button.entra-in-zeta, .scheda form button.entra-in-zeta, a.entra-in-zeta {
  display: inline-flex; align-items: center; gap: .7rem; justify-self: center; margin: 1rem auto .2rem;
  padding: .9rem 2.2rem; font-size: 1.15rem; font-weight: 700; border-radius: 999px; text-decoration: none;
  color: #fff; background: linear-gradient(135deg, var(--zeta), var(--marchio-scuro, var(--zeta)));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--zeta) 35%, transparent); transition: transform .15s ease, box-shadow .15s ease;
}
.entra-in-zeta { border: 0; cursor: pointer; font: inherit; font-size: 1.15rem; font-weight: 700; }
.entra-in-zeta .segno-z { color: #fff; height: 1.3rem; transition: transform .25s ease; }
.entra-in-zeta:hover, .entra-in-zeta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--zeta) 45%, transparent); }
.entra-in-zeta:hover .segno-z, .entra-in-zeta:focus-visible .segno-z { transform: translateX(.3rem) skewX(-10deg); }
.entra-in-zeta:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .entra-in-zeta, .entra-in-zeta .segno-z { transition: none; } }

/* ---- IL RACCONTO A TAPPE DEL PRIMO INCONTRO (9/11/2026): una tappa alla volta, gli elementi che entrano uno dopo l'altro, il
   tempo di leggere che scorre, il «perché ti serve». Solo CSS; fermo per chi chiede meno movimento. ---- */
.racconto { grid-column: 1 / -1; display: grid; gap: 1rem; max-width: 60rem; width: 100%; margin: 0 auto; }
.racconto-testa { display: grid; gap: .8rem; }
.racconto-riga { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.racconto-riga .entra-in-zeta { margin: 0; padding: .65rem 1.5rem; font-size: 1rem; }
.racconto-tappe { display: flex; gap: .35rem; flex-wrap: wrap; }
.racconto-tappa { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .3rem; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--scheda); color: var(--tenue); text-decoration: none; font-size: .82rem; }
.racconto-numero { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--bordo); color: var(--testo); font-weight: 700; font-size: .75rem; }
.racconto-tappa.vista .racconto-numero { background: color-mix(in srgb, var(--zeta) 25%, transparent); color: var(--zeta); }
.racconto-tappa.attuale { border-color: var(--zeta); color: var(--testo); font-weight: 600; }
.racconto-tappa.attuale .racconto-numero { background: var(--zeta); color: #fff; }
@media (max-width: 47.99rem) { .racconto-tappa:not(.attuale) .racconto-breve { display: none; } }
.racconto-carta { padding: 1.6rem 1.8rem; border-top: 5px solid var(--zeta); }
.racconto-sigillo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; }
.racconto-carta h1 { margin: .6rem 0 .3rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; animation: racconto-entra .5s ease-out both; }
.racconto-voce { font-size: 1.08rem; margin: 0 0 1rem; color: var(--testo); animation: racconto-entra .5s ease-out .15s both; }
@keyframes racconto-entra { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.racconto-elementi li { animation: racconto-entra .45s ease-out both; animation-delay: calc(.6s + var(--i, 0) * .45s); }
.racconto-perche { margin: 1.2rem 0 .4rem; padding: .8rem 1rem; border-radius: var(--raggio); background: var(--zeta-velo); border-left: 4px solid var(--zeta);
  animation: racconto-entra .5s ease-out 1.2s both; }
.racconto-perche strong { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--zeta); margin-bottom: .25rem; }
.racconto-perche p { margin: 0; }
.racconto-avanti { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.racconto-prossima { display: inline-flex; padding: .55rem 1.3rem; border-radius: 999px; background: var(--zeta); color: #fff; text-decoration: none; font-weight: 600; }
.racconto-tempo { flex: 1 1 8rem; height: 4px; border-radius: 4px; background: var(--bordo); overflow: hidden; }
.racconto-tempo > span { display: block; height: 100%; width: 0; background: var(--zeta); animation: racconto-scorre var(--durata, 12s) linear forwards; }
@keyframes racconto-scorre { to { width: 100%; } }
.racconto-domanda { margin: .4rem 0; padding: 1rem; border-radius: var(--raggio); border-left: 5px solid var(--tu); background: var(--scheda); }
.racconto .motore-di-zeta { border: 0; padding: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .racconto-carta h1, .racconto-voce, .racconto-elementi li, .racconto-perche { animation: none; }
  .racconto-tempo > span { animation: none; width: 100%; opacity: .3; }
}

/* ---- LA Z CHE ACCENDE (9/11/2026): la Z grande della home, nel suo cerchio, al centro della fine del primo incontro. Respira piano
   finché non la si tocca; al passaggio i tre tratti corrono e il cerchio si accende. ---- */
.accendi-con-la-z { display: grid; justify-items: center; gap: .6rem; margin: 1.6rem 0 .6rem; text-align: center; }
.accendi-con-la-z p { margin: 0; color: var(--tenue); }
/* LA POSTA IN ATTESA (13/11/2026): sotto la Z, la richiesta all'assistenza che parte con l'accensione, o il «la leggo appena c'è». */
.posta-in-attesa { max-width: 36rem; margin: 0 auto .6rem; text-align: left; }
.scheda form button.z-accensione, a.z-accensione {
  display: grid; place-items: center; width: 10rem; height: 10rem; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--scheda); border: 3px solid var(--accento, #f5c400); color: var(--zeta);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--zeta) 25%, transparent);
  animation: z-respira 2.6s ease-in-out infinite; transition: transform .2s ease, box-shadow .2s ease;
}
.z-accensione .segno-z { width: 62%; height: auto; transition: transform .3s ease; }
.z-accensione .segno-z svg { width: 100%; height: auto; }
.z-accensione:hover, .z-accensione:focus-visible { transform: scale(1.05); box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--zeta) 15%, transparent), 0 14px 36px color-mix(in srgb, var(--zeta) 35%, transparent); }
.z-accensione:hover .segno-z, .z-accensione:focus-visible .segno-z { transform: translateX(.35rem) skewX(-8deg); }
.z-accensione:active { transform: scale(.96); }
@keyframes z-respira { 0%, 100% { box-shadow: 0 10px 30px color-mix(in srgb, var(--zeta) 22%, transparent); } 50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--zeta) 10%, transparent), 0 10px 30px color-mix(in srgb, var(--zeta) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .z-accensione, .z-accensione .segno-z { animation: none; transition: none; } }

/* I suoni sì o no, accanto alla voce di Zeta in cima al racconto. */
.racconto-testa .voce-zeta { justify-content: space-between; }
.racconto-suoni { margin-left: auto; font-size: .82rem; color: var(--tenue); text-decoration: underline; white-space: nowrap; }


/* ---- LA PORTA DI ZETA (9/11/2026, PortaDiZeta.razor): la Z centrale; toccata, la notte si apre dalla Z, i campi entrano, la Z
   scivola sotto i campi ed è il pulsante. Solo CSS su un <details>. --cz: il centro della Z sullo schermo; --giu: quanto scende. ---- */
:root { --porta-z: 13rem; --porta-zp: 7.5rem; --porta-cz: 46vh; --porta-giu: 13.5rem; --porta-notte: #001a3d; }
@media (max-height: 680px) { :root { --porta-z: 10rem; --porta-zp: 6rem; --porta-cz: 40vh; --porta-giu: 11rem; } }
.porta > summary { list-style: none; position: fixed; left: 50%; top: var(--porta-cz); z-index: 72;
  width: var(--porta-z); height: var(--porta-z); margin: calc(var(--porta-z) / -2) 0 0 calc(var(--porta-z) / -2);
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: #fff; color: var(--zeta);
  border: 3px solid color-mix(in srgb, var(--accento) 70%, var(--bordo));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--zeta) 18%, transparent);
  transition: top .9s cubic-bezier(.65, 0, .25, 1), width .9s cubic-bezier(.65, 0, .25, 1), height .9s cubic-bezier(.65, 0, .25, 1),
    margin .9s cubic-bezier(.65, 0, .25, 1), border-color .3s ease, opacity .2s ease 1.1s;
  animation: z-respira 3s ease-in-out infinite; }
.porta > summary::-webkit-details-marker { display: none; }
.porta > summary:hover { border-color: var(--accento); }
.porta > summary:focus-visible { outline: 3px solid var(--accento); outline-offset: 4px; }
.porta > summary .segno-z, .porta-entra .segno-z { width: 60%; height: auto; color: var(--zeta); transform: translateX(-6%); }
.porta > summary .segno-z svg, .porta-entra .segno-z svg, .porta-filigrana .segno-z svg { width: 100%; height: auto; }
.porta-invito { position: fixed; left: 0; right: 0; top: calc(var(--porta-cz) + var(--porta-z) / 2 + 1.3rem); margin: 0; text-align: center; color: var(--tenue); z-index: 71; }
.porta-invito strong { color: var(--testo); }
.porta[open] ~ .porta-invito { opacity: 0; }

.porta-notte { position: fixed; inset: 0; z-index: 70; color: #fff; overflow-y: auto;
  background: radial-gradient(circle at 50% var(--porta-cz), #0a3a78 0%, var(--porta-notte) 72%);
  clip-path: circle(0 at 50% var(--porta-cz)); }
.porta[open] .porta-notte { animation: porta-apri 1s cubic-bezier(.65, 0, .25, 1) forwards; }
@keyframes porta-apri { to { clip-path: circle(150% at 50% var(--porta-cz)); } }
.porta-filigrana { position: absolute; left: 50%; top: var(--porta-cz); width: min(84vw, 70rem); translate: -50% -50%; opacity: 0; scale: .7; color: #fff; pointer-events: none; }
.porta-filigrana .segno-z { width: 100%; height: auto; display: block; }
.porta[open] .porta-filigrana { animation: porta-filigrana 1.4s ease-out .2s forwards; }
@keyframes porta-filigrana { to { opacity: .09; scale: 1; } }
.porta[open] > summary { top: calc(var(--porta-cz) + var(--porta-giu)); width: var(--porta-zp); height: var(--porta-zp);
  margin: calc(var(--porta-zp) / -2) 0 0 calc(var(--porta-zp) / -2); border-color: var(--accento); opacity: 0; pointer-events: none; animation: none; }

/* IL MODULO: la sua ultima cosa è la Z, e il fondo del modulo cade dove la Z è scesa. */
.porta-modulo { position: fixed; left: 0; right: 0; margin: 0 auto; width: min(21rem, 86vw); display: grid; gap: .9rem; justify-items: center;
  bottom: calc(100vh - var(--porta-cz) - var(--porta-giu) - var(--porta-zp) / 2); }
.porta-saluto { margin: 0 0 .2rem; font-size: 1.15rem; text-align: center; opacity: 0; }
.porta-campo { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .35); color: #fff;
  font: inherit; font-size: 1.05rem; padding: .55rem .1rem; opacity: 0; transform: translateY(10px); border-radius: 0; }
.porta-campo::placeholder { color: rgba(255, 255, 255, .6); }
.porta-campo:focus { outline: none; border-bottom-color: var(--accento); }
.porta-azienda { margin: 0; width: 100%; padding: .5rem .2rem; border-bottom: 2px solid rgba(255, 255, 255, .2); opacity: 0; transform: translateY(10px); }
.porta-azienda a { margin-left: .4rem; color: rgba(255, 255, 255, .7); font-size: .85rem; }
.porta[open] .porta-saluto { animation: porta-entra .5s ease-out .55s forwards; }
.porta[open] .porta-modulo > :nth-child(3) { animation: porta-entra .5s ease-out .66s forwards; }
.porta[open] .porta-modulo > :nth-child(4) { animation: porta-entra .5s ease-out .72s forwards; }
.porta[open] .porta-modulo > :nth-child(5) { animation: porta-entra .5s ease-out .78s forwards; }
.porta[open] .porta-modulo > :nth-child(6) { animation: porta-entra .5s ease-out .84s forwards; }
.porta[open] .porta-modulo > :nth-child(7) { animation: porta-entra .5s ease-out .9s forwards; }
.porta[open] .porta-modulo > :nth-child(8) { animation: porta-entra .5s ease-out .96s forwards; }
.porta[open] .porta-modulo > :nth-child(9) { animation: porta-entra .5s ease-out 1.02s forwards; }
/* La registrazione ha quattro campi (9/11/2026): quelli dopo il nono entrano insieme all'ultimo, o la password restava invisibile. */
.porta[open] .porta-modulo > :nth-child(n+10) { animation: porta-entra .5s ease-out 1.06s forwards; }
@keyframes porta-entra { to { opacity: 1; transform: none; } }
.porta-entra { width: var(--porta-zp); height: var(--porta-zp); border-radius: 50%; border: 3px solid var(--accento); background: #fff; display: grid; place-items: center;
  cursor: pointer; margin-top: .6rem; padding: 0; opacity: 0; box-shadow: 0 0 0 .6rem rgba(253, 197, 0, .14); transition: transform .2s ease; }
.porta-entra:hover .segno-z, .porta-entra:focus-visible .segno-z { transform: translateX(2%) skewX(-8deg); }
.porta-entra:focus-visible { outline: 3px solid var(--accento); outline-offset: 4px; }
.porta-entra:active { transform: scale(.96); }
.porta[open] .porta-entra { animation: porta-compare .01s linear 1.1s forwards; }
@keyframes porta-compare { to { opacity: 1; } }
.porta-avviso { width: 100%; text-align: center; }
.porta-avviso p { margin: 0 0 .4rem; }
.porta-avviso .errore, .porta-avviso .avviso, .porta-avviso .fatto { padding: .5rem .8rem; border-radius: var(--raggio); background: rgba(255, 255, 255, .12); color: #fff; }
.porta-avviso .errore { border-left: 4px solid #ff8a80; }
.porta-piccolo { font-size: .85rem; color: rgba(255, 255, 255, .7); }
.porta-note { position: fixed; left: 0; right: 0; margin: 0 auto; width: min(26rem, 90vw); text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .7);
  top: calc(var(--porta-cz) + var(--porta-giu) + var(--porta-zp) / 2 + 1rem); opacity: 0; }
.porta-note p { margin: .25rem 0; }
.porta-note a { color: #fff; }
.porta[open] .porta-note { animation: porta-entra .4s ease-out 1.25s forwards; }

/* L'ARRIVO NELLA HOME: la notte si richiude dentro la Z centrale (un'ombra larga intorno al cerchio della Z, che si stringe). */
main:has(.notte-che-entra) { z-index: auto; }
.anello-centro:has(.notte-che-entra) { position: relative; }
.notte-che-entra { position: absolute; left: 50%; top: 50%; width: 13rem; height: 13rem; margin: -6.5rem 0 0 -6.5rem; border-radius: 50%; pointer-events: none; z-index: 80;
  box-shadow: 0 0 0 250vmax var(--porta-notte); animation: notte-si-chiude 1.1s cubic-bezier(.65, 0, .25, 1) .1s forwards; }
@keyframes notte-si-chiude { 88% { box-shadow: 0 0 0 0 var(--porta-notte); opacity: 1; } to { box-shadow: 0 0 0 0 var(--porta-notte); opacity: 0; visibility: hidden; } }
.entrata .anello-della-z > .spicchio { animation: spicchio-acceso .45s ease-out both; }
.entrata .anello-della-z > .spicchio-decidere { animation-delay: .95s; }
.entrata .anello-della-z > .spicchio-soldi { animation-delay: 1.05s; }
.entrata .anello-della-z > .spicchio-clienti { animation-delay: 1.15s; }
.entrata .anello-della-z > .spicchio-posta { animation-delay: 1.25s; }
.entrata .anello-della-z > .spicchio-magazzino { animation-delay: 1.35s; }
.entrata .anello-della-z > .spicchio-lavori { animation-delay: 1.45s; }
@media (prefers-reduced-motion: reduce) {
  .porta > summary, .porta-notte, .porta-filigrana, .porta-saluto, .porta-campo, .porta-azienda, .porta-entra, .porta-note, .notte-che-entra, .entrata .anello-della-z > .spicchio {
    animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}
/* Sulle porte il piede non serve: la pagina è la Z. */
body:has(.porta) .piede { display: none; }

/* ---- IL RACCONTO: IL GIALLO PER CIÒ CHE TOCCA A TE, E TESTI CHE SI LEGGONO (9/11/2026; Giuseppe: «sfruttare il giallo per
   rispecchiare informazioni rilevanti, tipo alcune scritte erano in grigio chiaro»). Il blu resta di Zeta; il giallo segna ciò che
   conviene guardare o che si cambia (una scelta di Zeta, una risposta, una parte accesa per il mestiere). ---- */
.racconto-voce { color: var(--testo); }
.racconto-elementi .racconto-valore { display: inline-block; margin-left: .45rem; padding: .05rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--zeta) 9%, var(--scheda)); color: var(--testo); font-weight: 600; font-size: .88rem; }
.racconto-elementi li.tuo { background: color-mix(in srgb, var(--accento) 12%, transparent); border-radius: var(--raggio); padding-inline: .5rem; }
.racconto-elementi li.tuo .racconto-valore { background: var(--accento); color: #0b1526; }
.racconto-elementi .fonte { color: var(--testo); opacity: .8; }
.racconto-elementi .fonte-tua { opacity: 1; border-color: var(--accento); background: color-mix(in srgb, var(--accento) 30%, transparent); }
.racconto-cambia { margin-left: .6rem; font-size: .85rem; font-weight: 600; color: var(--testo); text-decoration-color: var(--accento); text-decoration-thickness: 2px; }
.racconto .come-ti-muovi .tipo { color: var(--testo); opacity: .85; }
.racconto-tappa { color: var(--testo); }
.racconto-tappa.attuale { box-shadow: 0 0 0 2px var(--accento); }
.racconto-messaggio { margin: .5rem 0 0; padding: .45rem .8rem; border-radius: var(--raggio); background: color-mix(in srgb, var(--accento) 22%, transparent); color: var(--testo); font-weight: 600; width: max-content; max-width: 100%; }
.racconto-messaggio.negato { background: color-mix(in srgb, #d93025 14%, transparent); }
.racconto-perche p { color: var(--testo); }
.racconto .motore-sigillo .tipo { color: var(--testo); opacity: .85; }
/* La Z centrale sta al centro anche dentro un modulo (la regola dei pulsanti dei moduli li allinea a sinistra). */
.scheda form button.z-accensione, a.z-accensione { justify-self: center; }

/* «COME TI MUOVI»: le descrizioni in giallo, non in grigio (9/11/2026). «CAMBIA» dentro il racconto: la domanda sotto la riga. */
.racconto .come-ti-muovi .tipo { display: inline-block; margin-left: .45rem; padding: .1rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accento) 30%, transparent); color: var(--testo); opacity: 1; font-size: .88rem; }
.racconto-cambio { flex-basis: 100%; margin: .5rem 0 .3rem; padding: .7rem .9rem; border-radius: var(--raggio); background: var(--scheda);
  border-left: 5px solid var(--accento); box-shadow: 0 6px 18px color-mix(in srgb, var(--zeta) 12%, transparent); }
.racconto-cambio p { margin: 0 0 .3rem; }
.racconto-cambio-aiuto { color: var(--testo); font-size: .9rem; }
.racconto-elementi li:has(.racconto-cambio) { flex-wrap: wrap; }

/* Le descrizioni lunghe in testo normale sotto il nome, non in una pillola (9/11/2026). */
.racconto-descrizione { display: block; margin-top: .15rem; color: var(--testo); font-size: .9rem; font-weight: 400; }

/* ---- I RITOCCHI DOPO LA MAPPATURA (9/11/2026) ---- */
/* I mestieri (sedici) a griglia, non in colonna. */
.benvenuto .incontro-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .45rem; }
.benvenuto .incontro-scelte button { width: 100%; }
/* Un numero non vuole un campo largo quanto la carta. */
.racconto-domanda input[inputmode="numeric"], .racconto-cambio input[inputmode="numeric"] { max-width: 9rem; }
/* Gli obblighi in una domanda sola: le caselle una sotto l'altra. */
.racconto-obblighi { display: grid; gap: .55rem; }
.racconto-obblighi .pezzo-del-motore { align-items: flex-start; }
/* La posta: il modulo e la via dell'assistenza. */
.racconto-posta-modulo { display: grid; gap: .6rem; max-width: 28rem; }
.racconto-posta-modulo label { display: grid; gap: .2rem; font-size: .9rem; }
.racconto-posta-modulo input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.racconto-posta-modulo details summary { cursor: pointer; font-size: .88rem; }
.racconto-posta-assistenza p { margin: .8rem 0 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
/* La Z che aspetta la posta: più spenta, e non respira. */
a.z-accensione.z-in-attesa { animation: none; opacity: .6; border-color: var(--bordo); }

/* ---- GLI AVVISI A TUTTI (H413 G, 9/11/2026): una fascia sottile in cima, del colore del tipo. ---- */
.avviso-a-tutti { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 .8rem; padding: .55rem .9rem;
  border-radius: var(--raggio); background: var(--zeta-velo); border-left: 4px solid var(--zeta); color: var(--testo); }
.avviso-a-tutti.avviso-problema { background: color-mix(in srgb, #d93025 12%, var(--scheda)); border-left-color: #d93025; }
.avviso-a-tutti.avviso-manutenzione { background: color-mix(in srgb, var(--accento) 22%, var(--scheda)); border-left-color: var(--accento); }
.avviso-a-tutti a { margin-left: auto; font-weight: 600; color: var(--testo); }

/* ---- LA STRADA FINO ALLA Z (9/11/2026): l'edizione consigliata da Zeta, in giallo come ciò che conta. ---- */
.scheda.consigliata { outline: 2px solid var(--accento); }
.consigliata-da-zeta { margin: 0 0 .4rem; padding: .3rem .6rem; border-radius: var(--raggio); background: color-mix(in srgb, var(--accento) 25%, var(--scheda)); }

/* ---- LE MIE AZIENDE (9/11/2026): a che punto è ogni azienda con Zeta; in giallo ciò che aspetta te. ---- */
.stato-azienda { margin: 0 0 .5rem; color: var(--testo); }
.stato-azienda.da-fare { padding: .35rem .6rem; border-radius: var(--raggio); background: color-mix(in srgb, var(--accento) 25%, var(--scheda)); font-weight: 600; }

/* ---- L'ATTIVAZIONE (9/11/2026): il programma Windows in una tendina, sotto il gestionale nel browser. ---- */
.windows { margin-top: 1rem; }
.windows > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; color: var(--testo); }

/* Le carte delle aziende e il modulo per aggiungerne una non si toccano. */
.griglia-pc.a-carte + .scheda { margin-top: 1rem; }

/* Un ritocco non rifà il racconto (9/11/2026): la tappa riaperta da «cambia» o dalla conferma compare già ferma. */
.racconto.quieta .racconto-carta h1, .racconto.quieta .racconto-voce, .racconto.quieta .racconto-elementi li, .racconto.quieta .racconto-perche { animation: none; }

/* ---- LA CONSOLE COME IL GESTIONALE DI ZETA (9/11/2026): la casa con Adesso a carte, la Z che cerca con i sei spicchi, i numeri;
   ogni spicchio una pagina; la barra della Console in basso, con le forme della barra di Zeta (testata.css). ---- */
.console-zeta { display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 6rem; }
.console-testa h1 { margin: .2rem 0; }
.console-testa .nota { margin: 0; }
.adesso-console h2 .tipo { font-weight: 400; color: var(--testo-tenue, var(--testo)); }
.console-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.console-carta { background: var(--scheda); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 0 var(--bordo); display: flex; flex-direction: column; gap: .4rem; }
.console-carta h3 { margin: 0; font-size: 1.05rem; }
.console-carta .tipo { margin: 0; }
.console-carta .azione { align-self: flex-start; margin-top: auto; }
.console-carta.grande { grid-column: span 2; outline: 2px solid var(--accento); padding: 1.5rem; }
.console-carta.grande h3 { font-size: 1.35rem; }
@media (max-width: 47.99rem) { .console-carta.grande { grid-column: auto; } }
.console-anello { display: grid; grid-template-columns: 1fr minmax(16rem, 22rem) 1fr; gap: 1.4rem; align-items: center; background: var(--scheda);
  border-radius: 24px; padding: 2rem 1.6rem; box-shadow: 0 1px 0 var(--bordo); }
.console-spicchi { display: flex; flex-direction: column; gap: .8rem; }
.console-spicchio { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: 18px;
  background: var(--zeta-velo); color: var(--testo); text-decoration: none; }
.console-spicchio > span:first-child { display: flex; flex-direction: column; gap: .1rem; }
.console-spicchio strong { font-size: 1.05rem; }
.console-spicchio .spicchio-cosa { font-size: .85rem; color: var(--testo); opacity: .8; }
.console-spicchio .conto { font-weight: 600; color: var(--zeta); white-space: nowrap; }
.console-spicchio:hover { outline: 2px solid var(--zeta); }
.console-z { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.tondo-z-console { width: 11rem; height: 11rem; border-radius: 50%; background: var(--scheda); border: 6px solid var(--accento);
  box-shadow: 0 0 0 10px var(--zeta-velo); display: grid; place-items: center; color: var(--zeta); }
.tondo-z-console .segno-z { width: 62%; height: auto; color: var(--zeta); }
.tondo-z-console .segno-z svg { width: 100%; height: auto; }
.console-cerca { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.console-cerca label { grid-column: 1 / -1; font-size: .85rem; }
.console-cerca input { border: 2px solid var(--zeta); border-radius: 999px; padding: .7rem 1rem; font: inherit; min-width: 0; }
.console-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 0; }
.console-numeri > div { background: var(--scheda); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 1px 0 var(--bordo); }
.console-numeri dt { font-size: .85rem; }
.console-numeri dd { margin: .2rem 0 0; font-size: 1.6rem; font-weight: 600; }
.console-numeri dd.tipo { font-size: .8rem; font-weight: 400; }
@media (max-width: 47.99rem) {
  .console-anello { grid-template-columns: 1fr; }
  .console-anello .console-z { order: -1; justify-self: center; }
}
.barra-console { z-index: 20; }
.console-cerca button { border-radius: 999px; padding: .7rem 1.1rem; font: inherit; font-weight: 600; border: 0; background: var(--zeta); color: #fff; cursor: pointer; }

/* Lo spicchio Aziende a carte (9/11/2026). */
.console-aziende-carte { display: flex; flex-direction: column; gap: 1rem; }
.console-carta-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.console-carta-testa a { color: var(--testo); text-decoration: none; }
.etichetta-azienda { font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; background: var(--zeta-velo); color: var(--zeta); white-space: nowrap; }
.console-carta.da-guardare { outline: 2px solid var(--accento); }
.console-carta.da-guardare .etichetta-azienda { background: var(--accento); color: #0b1526; }
.console-carta.spenta { opacity: .7; }
.stato-console { margin: 0; padding: .45rem .7rem; border-radius: 10px; background: var(--zeta-velo); font-size: .92rem; }
.stato-console.giallo { background: color-mix(in srgb, var(--accento) 25%, var(--scheda)); font-weight: 600; }
.console-carta-azioni { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .2rem 0 0; font-size: .9rem; }

/* Le impostazioni chiuse finché non servono (9/11/2026). */
.impostazioni-gruppo > summary { cursor: pointer; font-weight: 600; color: var(--zeta); padding: .3rem 0; }

/* La tua posta in un anno (9/11/2026): due carte affiancate sul PC, le barre dei conteggi. */
.mappa-posta { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.mappa-totale { font-size: 1.1rem; margin: .2rem 0 .6rem; }
.mappa-barre { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .3rem; }
.mappa-barre > li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 3.5rem; gap: .6rem; align-items: center; }
.mappa-barre .barra { height: .7rem; border-radius: .35rem; background: linear-gradient(to right, var(--zeta) var(--quanto), color-mix(in srgb, var(--zeta) 12%, transparent) var(--quanto)); }
.mappa-barre .quanto { text-align: right; font-variant-numeric: tabular-nums; }

/* La conversazione dell'intervento (10/11/2026): le email del filo, le nostre a destra. */
.conversazione { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.conversazione > li { border-left: 3px solid var(--zeta-velo); padding: .2rem 0 .2rem .7rem; }
.conversazione > li.nostra { border-left-color: var(--zeta); background: color-mix(in srgb, var(--zeta-velo) 40%, transparent); }
.conversazione p { margin: .15rem 0; }

/* Chi ha scritto (10/11/2026): una carta per relazione, affiancate sul PC; la storia di chi scrive. */
.chi-ha-scritto { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.carta-chi { display: flex; flex-direction: column; gap: .25rem; background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .8rem .9rem; min-width: 0; }
.carta-chi.vista { opacity: .85; }
.carta-chi .chi-nome { text-decoration: none; color: inherit; font-size: 1.05rem; }
.carta-chi .azioni { margin-top: .3rem; }
.storia-posta .storia-quando { font-variant-numeric: tabular-nums; color: var(--testo-tenue); margin-right: .4rem; }
.chi-e > summary { cursor: pointer; color: var(--zeta); font-weight: 600; margin-top: .3rem; }
.chi-e-scelte { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

/* Le persone (10/11/2026): carte affiancate sul PC, una per persona. */
.carte-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.carta-persona { display: flex; flex-direction: column; gap: .2rem; background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .8rem .9rem; min-width: 0; }
.carta-persona.vista { opacity: .75; }

/* Le impostazioni in ordine (10/11/2026): le aree affiancate, il pallino dello stato, le carte di un'area. */
.carte-area { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .25rem; }
.carte-area > li { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.punto-stato { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: var(--bordo); display: inline-block; }
.punto-stato.manca { background: var(--meno); }
.punto-stato.nuova { background: var(--zeta); }
.area-intera { margin-top: .8rem; }
.area-intera > summary { cursor: pointer; color: var(--zeta); font-weight: 600; padding: .3rem 0; }