/* ------------------------------------------------------------------------------------------------------
   H326 — LA HOME COME CENTRO DI COMANDO (1/11/2026, docs/ideas/2026-11-01-la-home-centro-di-comando.md § 3 e § 8).
   ONDA MZ — LA Z AD ANELLO CON SEI SPICCHI FISSI (3/11/2026, docs/ideas/2026-11-03-l-interfaccia-a-moduli.md § 7.2,
   variante A): la testata di oggi, l'anello con la Z grande al centro (H352: la casella si apre toccandola), «Adesso», il
   resto di oggi, «Fatto da solo». I colori vengono solo dai gettoni di app.css, quindi il tema scuro segue da solo: il blu del marchio per
   l'azione principale, il giallo d'accento per la Z e per «Adesso». Il giallo è un accento, non un allarme: l'urgenza
   resta il rosso. Niente immagini: gli archi dell'anello sono bordi arrotondati.
   ------------------------------------------------------------------------------------------------------ */

.home { display: grid; gap: 1.25rem; margin: .5rem 0 1.5rem; }
@media (min-width: 75rem) { main.larga .home { grid-column: 1 / -1; } }

/* IL SALUTO: una riga che orienta, non un titolo che urla. */
.saluto {
  margin: .25rem 0 0; text-align: center;
  font-size: 1.35rem; font-weight: 600; letter-spacing: .01em; color: var(--testo);
}

/* LA CASELLA DELLA Z: la prima cosa e la più grande. Il bordo e l'alone diventano gialli quando ci si scrive. */
.casella-z {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .6rem .55rem .9rem;
  background: var(--scheda);
  border: 2px solid var(--bordo);
  border-radius: 999px;
  box-shadow: var(--ombra);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.casella-z:focus-within {
  border-color: var(--accento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 35%, transparent), var(--ombra);
}
.casella-z-segno { height: 2.2rem; flex: none; }
.casella-z-testo {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.1rem; color: var(--testo);
  background: transparent; border: 0; outline: none;
  padding: .55rem .25rem;
}
.casella-z-testo::placeholder { color: var(--tenue); }
.casella-z-allega, .casella-z-manda {
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.casella-z-allega {
  color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
}
.casella-z-allega:hover { border-color: var(--accento); }
/* Il campo file vero è nascosto: l'anello di fuoco va sull'etichetta che lo contiene. */
.casella-z-allega:focus-within { outline: 3px solid var(--accento); outline-offset: 2px; }
.casella-z-manda {
  color: var(--scheda);
  background: var(--marchio);
  border: 0;
}
.casella-z-manda:hover { background: var(--marchio-scuro); }
.casella-z-manda:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* ---- L'ANELLO DELLA Z (onda MZ) ------------------------------------------------------------------------------------
   SEI AREE CON NOME SUL PC, SEMPRE NELLO STESSO POSTO (regola 1): Da decidere in alto e poi, in senso orario, Soldi,
   Clienti e vendite, Documenti e posta, Acquisti e magazzino, Lavori. Uno spicchio che la persona non ha lascia il suo
   posto vuoto: la geometria non si sposta.
   LA Z SOLA AL CENTRO (H352, 3/11/2026): Giuseppe voleva vedere la Z, non la Z con la barra accanto. La Z grande sta nelle
   due colonne e nelle due righe di mezzo, e i sei spicchi le girano intorno in senso orario: Da decidere sopra, Soldi e
   Clienti a destra, Documenti e posta sotto, Magazzino e Lavori a sinistra. La casella si apre toccando la Z (un <details>)
   e scende nella fascia sotto l'anello, che si allarga solo quando è aperta. */
.anello-della-z {
  position: relative;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    ".         decidere  decidere  .      "
    "lavori    z         z         soldi  "
    "magazzino z         z         clienti"
    ".         posta     posta     .      ";
  width: 100%; max-width: 60rem; margin: .25rem auto 0;
}
.anello-centro { grid-area: z; display: grid; place-items: center; padding: .35rem 0; }
/* L'ANELLO HA BISOGNO DI SPAZIO SUL PC (3/11/2026, visto dal vivo): dentro la colonna di 46rem delle altre pagine gli
   spicchi laterali erano schiacciati a 6rem e intorno restava il vuoto. La home allarga la pagina a 64rem per l'anello;
   «Adesso» e il resto restano nella colonna di lettura di sempre, centrati sotto. */
@media (min-width: 48rem) {
  main:has(.anello-della-z) { max-width: 64rem; }
  .home > :not(.anello-della-z):not(.saluto) { max-width: 46rem; margin-inline: auto; }
  .anello-della-z { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr); }
  .anello-della-z > .spicchio { min-height: 6.5rem; }
}

/* LA Z GRANDE: un cerchio con la Z del marchio (blu sul chiaro, bianca sullo scuro, scelta da <picture>), bordo giallo
   d'accento come la casella di prima. È il <summary>: si tocca tutta, e la tastiera la apre con Invio o Spazio. */
.z-centrale > summary { list-style: none; }
.z-centrale > summary::-webkit-details-marker { display: none; }
.z-grande {
  display: grid; place-items: center;
  /* PIÙ GRANDE (3/11/2026, Giuseppe: «ingrandiscila insieme al cerchio»): 13rem sul PC, la Z dentro resta al 60%. */
  width: 13rem; height: 13rem; border-radius: 50%;
  cursor: pointer;
  background: var(--scheda);
  border: 3px solid color-mix(in srgb, var(--accento) 70%, var(--bordo));
  box-shadow: var(--ombra);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.z-grande:hover { border-color: var(--accento); }
.z-grande:focus-visible { outline: 3px solid var(--accento); outline-offset: 4px; }
.z-centrale[open] > .z-grande {
  border-color: var(--accento);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accento) 30%, transparent), var(--ombra);
}
/* Più forte di «.segno-z» di app.css (1,6rem): la Z grande è alta 7rem, e l'immagine la segue al 100%. */
/* LA Z DENTRO IL CERCHIO, MAI SOPRA IL BORDO (3/11/2026, visto dal vivo): il segno è più largo che alto e a 7rem di altezza
   toccava il bordo giallo. Ora sta nel quadrato inscritto nel cerchio (circa il 60% del diametro), qualunque sia la sua forma. */
.z-grande { overflow: hidden; }
.z-grande .segno-z { display: flex; align-items: center; justify-content: center; width: 60%; height: 60%; }
/* Più forte di «.segno-z img» di app.css (altezza 100%, larghezza automatica), che la lasciava appoggiata in fondo. */
.z-grande .segno-z svg { width: 100%; height: auto; max-height: 100%; margin: auto; }
/* IL CENTRO ALL'OCCHIO (3/11/2026): il segno pesa a destra (le volute e il corpo della Z), le righe a sinistra sono sottili;
   centrato al pixel sembrava spinto verso il bordo destro. Un passo a sinistra lo rimette in mezzo all'occhio. */
.z-grande .segno-z { transform: translateX(-6%); }
@media (prefers-reduced-motion: no-preference) { .z-grande:active { transform: scale(.97); } }

/* LA CASELLA SOTTO L'ANELLO: la fascia in fondo alla griglia, riservata solo con la Z aperta. */
.anello-della-z:has(.z-centrale[open]) { padding-bottom: 5.25rem; }
.z-casella { position: absolute; left: 0; right: 0; bottom: 0; }
.spicchio-decidere { grid-area: decidere; }
.spicchio-soldi { grid-area: soldi; }
.spicchio-clienti { grid-area: clienti; }
.spicchio-posta { grid-area: posta; }
.spicchio-magazzino { grid-area: magazzino; }
.spicchio-lavori { grid-area: lavori; }

/* LA CASELLA DELLA Z APERTA: la stessa casella di sempre, con l'accento giallo anche a riposo. */
.anello-centro .casella-z {
  border-color: color-mix(in srgb, var(--accento) 55%, var(--bordo));
  padding-top: .7rem; padding-bottom: .7rem;
}

/* LO SPICCHIO È UN COLLEGAMENTO, tutto: il titolo della famiglia, una riga, «+N». Almeno 48 px di altezza. */
.spicchio {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 3rem; padding: .85rem 1.4rem;
  text-align: center; text-decoration: none; color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  transition: border-color .15s ease, background .15s ease;
}
.spicchio:hover { border-color: var(--marchio); background: color-mix(in srgb, var(--marchio) 6%, var(--vetro)); }
.spicchio:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* GLI ARCHI: l'angolo verso l'esterno dell'anello è il più tondo, così i sei spicchi disegnano il cerchio intorno alla Z. */
.spicchio-decidere { border-radius: 3rem 3rem var(--raggio) var(--raggio); }
.spicchio-lavori { border-radius: 3rem var(--raggio) var(--raggio) var(--raggio-grande); }
.spicchio-soldi { border-radius: var(--raggio) 3rem var(--raggio-grande) var(--raggio); }
.spicchio-magazzino { border-radius: var(--raggio-grande) var(--raggio) var(--raggio) 3rem; }
.spicchio-clienti { border-radius: var(--raggio) var(--raggio-grande) 3rem var(--raggio); }
.spicchio-posta { border-radius: var(--raggio) var(--raggio) 3rem 3rem; }

.spicchio-titolo {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue);
}
.titolo-breve { display: none; }
.spicchio-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .5rem;
  font-weight: 600; line-height: 1.3;
}
.spicchio .quanto { font-variant-numeric: lining-nums tabular-nums; font-weight: 700; white-space: nowrap; }
.spicchio .quanto.piu { color: var(--piu); }
.spicchio .quanto.meno { color: var(--meno); }
.spicchio-dettaglio { font-size: .84rem; color: var(--tenue); }
.spicchio-altre {
  display: inline-block; padding: 0 .45rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--tenue);
  background: color-mix(in srgb, var(--testo) 7%, transparent);
}

/* L'URGENZA È IL ROSSO, come in «Adesso»: il bordo, mai il giallo. */
.spicchio.urgente { border-color: var(--meno); box-shadow: inset 0 0 0 1px var(--meno), var(--ombra); }

/* LO SPICCHIO SPENTO: resta al suo posto, grigio e senza numero, così l'occhio va dove c'è qualcosa. */
.spicchio.spento {
  background: var(--spicchio-spento);
  border-style: dashed;
  box-shadow: none;
  color: var(--tenue);
}
.spicchio-vuoto { font-size: .9rem; color: var(--tenue); }

/* IL NUMERO DELLO SPICCHIO (grafica B, onda 3, B-Home): la cifra grande e la parola accanto; la riga di prima resta sotto,
   più piccola. A zero «in ordine», tranquillo, in grigio: niente più «Niente…» in cinque scatole vuote. */
.spicchio-numero {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .4rem; line-height: 1.15;
}
.spicchio-cifra {
  font-size: var(--fs-xl); font-weight: 700; color: var(--testo);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.spicchio-cifra.meno { color: var(--meno); }
.spicchio-cifra.piu { color: var(--piu); }
.spicchio-parola { font-size: var(--fs-s); font-weight: 500; color: var(--testo); }
.spicchio-numero.in-ordine .spicchio-parola { font-size: var(--fs-m); font-weight: 500; color: var(--tenue); }
.spicchio-numero + .spicchio-riga { font-size: var(--fs-s); font-weight: 500; color: var(--tenue); }
.spicchio-numero + .spicchio-riga .quanto { font-weight: 600; }

/* IL RESTO DI OGGI: i riquadri sotto «Adesso», con le stesse classi delle aree di H326. */
.il-resto { display: grid; gap: .6rem; }

/* L'ESITO DI UNA DECISIONE PRESA DALLA HOME. */
.home > .fatto, .home > .negato { margin: 0; }

/* ADESSO: il titolo con il conto, la carta grande con la barra gialla, poi le righe. */
.adesso h2 { margin: 0 0 .6rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--testo); }
.conto-adesso { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tenue); }

.carta-adesso {
  position: relative;
  padding: 1.1rem 1.15rem 1.1rem 1.4rem;
  background: var(--scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  overflow: hidden;
}
.carta-adesso::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--accento);
}
.carta-adesso.urgente { border-color: var(--meno); }
.carta-adesso.urgente::before { background: var(--meno); }
.carta-adesso.carta-vuota::before { background: var(--piu); }
.carta-titolo {
  margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--testo);
  text-transform: none; letter-spacing: 0;
}
.carta-perche { margin: .35rem 0 0; color: var(--tenue); }
.carta-perche a { color: var(--marchio); }
.carta-adesso .etichetta-urgente { margin-bottom: .35rem; color: var(--meno); }

.carta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .9rem; }
.modulo-carta { margin: 0; display: inline; }

/* UN'AZIONE PRINCIPALE PER CARTA (regola 4): blu pieno. «Non ora» e «Apri» restano leggeri. */
.azione-principale {
  display: inline-flex; align-items: center;
  padding: .6rem 1.15rem; border-radius: var(--raggio);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--scheda); background: var(--marchio); border: 0;
}
.azione-principale:hover { background: var(--marchio-scuro); color: var(--scheda); }
.azione-principale.pericolo { background: var(--meno); }
.azione-principale:focus-visible, .azione-seconda:focus-visible, .azione-apri:focus-visible, .azione-poi:focus-visible {
  outline: 3px solid var(--accento); outline-offset: 2px;
}
.azione-seconda {
  display: inline-flex; align-items: center;
  padding: .55rem .9rem; border-radius: var(--raggio);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  color: var(--testo); background: transparent; border: 1px solid var(--bordo);
}
.azione-seconda:hover { border-color: var(--marchio); color: var(--marchio); }
.azione-apri { color: var(--marchio); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }

/* IL «POI»: una riga per cosa, con il suo verbo. */
.poi { list-style: none; margin: .6rem 0 0; padding: 0 .25rem; display: grid; gap: .1rem; }
.poi-riga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .9rem;
  padding: .55rem .5rem; border-bottom: 1px solid var(--bordo);
}
.poi-riga:last-child { border-bottom: 0; }
.poi-riga.urgente .poi-cosa::before { content: "● "; color: var(--meno); }
.poi-cosa { flex: 1 1 16rem; min-width: 0; color: var(--testo); }
.poi-azioni { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.azione-poi {
  display: inline-flex; align-items: center;
  padding: .35rem .75rem; border-radius: var(--raggio);
  font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--marchio); background: transparent;
  border: 1px solid color-mix(in srgb, var(--marchio) 35%, transparent);
}
.azione-poi:hover { background: color-mix(in srgb, var(--marchio) 10%, transparent); }
.azione-poi.pericolo { color: var(--meno); border-color: color-mix(in srgb, var(--meno) 40%, transparent); }

/* I PRIMI PASSI DENTRO LA CARTA: l'elenco completo resta a un tocco, senza script. */
.tutti-i-passi { margin-top: .75rem; }
.tutti-i-passi > summary { cursor: pointer; color: var(--marchio); font-weight: 500; }
.tutti-i-passi .scheda { margin: .6rem 0 0; box-shadow: none; }
.poi-riga .tutti-i-passi { flex-basis: 100%; margin-top: .25rem; }

/* I RIQUADRI DEL RESTO DI OGGI (erano le tre aree fisse di H326): uno sotto l'altro sul telefono, affiancati sul PC. */
.aree-fisse { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .aree-fisse { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: stretch; }
}
.area-fissa {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1rem 1.1rem;
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
}
.area-fissa h2 {
  margin: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue);
}
.area-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; flex: 1; }
.area-righe li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .6rem; }
.area-righe a { color: var(--testo); text-decoration: none; font-weight: 500; }
.area-righe a:hover { color: var(--marchio); text-decoration: underline; }
.area-dettaglio { flex-basis: 100%; font-size: .84rem; color: var(--tenue); }
.area-numeri .quanto { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; white-space: nowrap; }
.area-numeri .quanto.piu { color: var(--piu); }
.area-numeri .quanto.meno { color: var(--meno); }
.area-vuota { margin: 0; flex: 1; color: var(--tenue); }
.area-altre { margin: 0; font-size: .86rem; color: var(--tenue); }
.area-apri { margin-top: .3rem; color: var(--marchio); font-weight: 600; text-decoration: none; }
.area-apri:hover { text-decoration: underline; }
.area-apri:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; border-radius: 4px; }

/* FATTO DA SOLO: una riga, in fondo. */
.fatto-da-solo-riga { margin: 0; text-align: center; color: var(--tenue); }
.fatto-da-solo-riga a { color: var(--marchio); font-weight: 500; }

@media (max-width: 30rem) {
  .saluto { font-size: 1.15rem; }
  .casella-z { padding-left: .65rem; }
  .casella-z-testo { font-size: 1rem; }
}

/* ---- IL TELEFONO (sotto i 40rem, come la barra in basso di testata.css) -------------------------------------------------
   L'ANELLO DIVENTA UNA GRIGLIA 2×3 NELLO STESSO ORDINE LETTO RIGA PER RIGA: Da decidere, Soldi / Lavori, Clienti /
   Magazzino, Posta, con la Z grande sopra, al centro. Qui i posti vanno in fila («order») invece che sulle aree con
   nome: così lo spicchio che la persona non ha accorcia la griglia senza lasciare un buco, e l'ordine resta.
   LA Z SOPRA LA GRIGLIA, LA CASELLA SUBITO SOTTO LA Z (H352): al centro della 2×3 la Z spezzerebbe la lettura riga per
   riga; sopra si vede per prima e si tocca col pollice, e la casella che si apre resta vicina a lei, larga quanto lo
   schermo, senza fascia riservata in fondo. */
@media (max-width: 40rem) {
  .anello-della-z { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; gap: .55rem; }
  .anello-della-z > .anello-centro, .anello-della-z > .spicchio { grid-area: auto; }
  .anello-centro { grid-column: 1 / -1; order: 0; padding: 0 0 .2rem; }
  .z-centrale { width: 100%; display: grid; justify-items: center; gap: .6rem; }
  .z-grande { width: 8.5rem; height: 8.5rem; }

  .anello-della-z:has(.z-centrale[open]) { padding-bottom: 0; }
  .z-casella { position: static; width: 100%; }
  .anello-della-z > .spicchio {
    align-items: flex-start; justify-content: flex-start; text-align: left;
    min-height: 4.5rem; padding: .65rem .8rem;
    border-radius: var(--raggio-grande);
  }
  .spicchio-riga { justify-content: flex-start; font-size: .95rem; }
  .spicchio-numero { justify-content: flex-start; }
  .spicchio-decidere { order: 1; }
  .spicchio-soldi { order: 2; }
  .spicchio-lavori { order: 3; }
  .spicchio-clienti { order: 4; }
  .spicchio-magazzino { order: 5; }
  .spicchio-posta { order: 6; }
  /* IL TITOLO CORTO E UNA RIGA SOLA: metà schermo non regge «Acquisti e magazzino» né il dettaglio. */
  .titolo-lungo { display: none; }
  .titolo-breve { display: inline; }
  .spicchio-dettaglio { display: none; }
}

/* ---- L'ACCENSIONE DEL MOTORE (9/11/2026, «Entra in Zeta»): la Z entra da sinistra come i tre tratti della velocità del marchio,
   il cerchio si accende, gli spicchi seguono in senso orario. Una volta sola (la home con ?acceso=1); fermo con meno movimento. ---- */
@keyframes zeta-entra { from { opacity: 0; transform: translateX(-60%) skewX(-12deg); } 70% { opacity: 1; transform: translateX(4%) skewX(0); } to { transform: none; } }
@keyframes zeta-cerchio { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zeta) 45%, transparent); } to { box-shadow: 0 0 0 1.6rem transparent; } }
@keyframes spicchio-acceso { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes frase-accesa { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; transform: none; } }
.accensione .z-grande .segno-z { animation: zeta-entra .9s cubic-bezier(.2, .8, .2, 1) both; }
.accensione .z-grande { animation: zeta-cerchio 1.2s ease-out .7s 2; }
.accensione .anello-della-z > .spicchio { animation: spicchio-acceso .45s ease-out both; }
.accensione .anello-della-z > .spicchio-decidere { animation-delay: 1s; }
.accensione .anello-della-z > .spicchio-soldi { animation-delay: 1.12s; }
.accensione .anello-della-z > .spicchio-clienti { animation-delay: 1.24s; }
.accensione .anello-della-z > .spicchio-posta { animation-delay: 1.36s; }
.accensione .anello-della-z > .spicchio-magazzino { animation-delay: 1.48s; }
.accensione .anello-della-z > .spicchio-lavori { animation-delay: 1.6s; }
.accensione-frase { animation: frase-accesa .6s ease-out 1.9s both; }
@media (prefers-reduced-motion: reduce) {
  .accensione .z-grande .segno-z, .accensione .z-grande, .accensione .anello-della-z > .spicchio, .accensione-frase { animation: none; }
}