/* L'app di Brandon. Solo variabili per i colori: le scrive tema.js su :root (da logica/tema.js).
   I valori qui sotto sono quelli di partenza (tema scuro, arancione del marchio), per non avere un lampo prima del JavaScript. */
@font-face { font-family: "Unbounded"; src: url(/fonts/unbounded-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --sfondo: #0e0e0e; --sup: #161616; --sfondo-2: #161616; --rilievo: #1c1c1c; --linea: rgba(255,255,255,.08); --testo: #f4f2ee; --tenue: #9b9893;
  --accento: #ff4d1c; --su-accento: #0e0e0e;
  --ok: #3fb27f; --att: #e0a52a; --pericolo: #ef6a5e; --ombra: none; --vela: rgba(0,0,0,.55);
  /* La linea premium (docs/app/2026-11-02-linea-premium.md): scala dei caratteri, spazi, raggi e movimento. Non cambiano col tema. */
  --t-eti: .75rem; --t-det: .8125rem; --t-sec: .9375rem; --t-testo: 1.0625rem; --t-card: 1.25rem; --t-nome: 1.75rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-card: 14px; --r-riga: 10px; --r-pillola: 999px;
  --mov-breve: 120ms; --mov: 200ms; --uscita: ease-out;
  --raggio: 14px;
  --menu-alto: 64px;
  /* Quanto sta sotto il contenuto fisso in basso: il menu e la fascia sicura (0 mentre si scrive); --tastiera = quanto la tastiera copre il fondo (componenti/tastiera.js). */
  --sotto-menu: calc(var(--menu-alto) + env(safe-area-inset-bottom)); --tastiera: 0px;
  --lettere: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --titoli: "Unbounded", var(--lettere);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; overscroll-behavior-y: none; } /* niente rimbalzo di Safari: il tira giù è solo il nostro indicatore e il tasto Ferma resta fermo */
body {
  min-height: 100dvh; background: var(--sfondo); color: var(--testo);
  font: 16px/1.45 var(--lettere); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
/* Da telefono (3/11, sweep dei difetti): niente lampo grigio al tocco, niente zoom del testo in orizzontale, tocco subito (senza l'attesa del doppio tocco) e i comandi
   non si selezionano con il dito lungo. Il testo che si legge (mail, note, messaggi) resta selezionabile: non è un pulsante. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; } /* niente zoom a pizzico né doppio tocco (Eros 3/11) */
a, button, [role="button"], summary, label, select { touch-action: manipulation; }
button, [role="button"], .voce-menu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); }
.marchio { font-family: var(--titoli); font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* ---------- stati: carico, accesso, dentro ---------- */
body[data-stato="carico"] .guscio, body[data-stato="carico"] .accesso { visibility: hidden; }
body:not([data-stato="accesso"]) .accesso { display: none; }
body[data-stato="accesso"] .guscio { display: none; }
/* Avvio fallito (punto 17): la scheda sta dove sta l'accesso, e il guscio vuoto non si vede. */
body:not([data-stato="avvio-fallito"]) .avvio-fallito { display: none; }
body[data-stato="avvio-fallito"] .guscio { display: none; }

/* ---------- accesso ---------- */
.accesso, .avvio-fallito { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--sfondo); }
.accesso-corpo { width: min(100%, 360px); text-align: center; display: grid; gap: 14px; justify-items: center; }
.accesso .marchio, .avvio-fallito .marchio { font-size: 2.2rem; }
.segno { width: 72px; height: 72px; border-radius: 50%; background: var(--accento); }

/* ---------- elementi comuni ---------- */
.pulsante {
  border: 0; border-radius: 12px; padding: 12px 18px; cursor: pointer; font-weight: 700;
  background: var(--accento); color: var(--su-accento);
}
.pulsante.secondario { background: var(--sfondo-2); color: var(--testo); border: 1px solid var(--linea); font-weight: 500; }
.pulsante:disabled { opacity: .55; cursor: default; }
.pulsante:focus-visible, .scelta:focus-visible, .voce-menu:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.avviso { min-height: 1.4em; margin: 6px 0 0; font-size: .9rem; color: var(--tenue); }

.riquadro { background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px 16px; margin: 0 0 12px; }
.riquadro-titolo { margin: 0 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.riquadro-testo { margin: 0 0 10px; }
.riquadro-testo:last-child { margin-bottom: 0; }
.riquadro.segnaposto { background: transparent; border-style: dashed; color: var(--tenue); }

.indietro { display: inline-block; margin: 0 0 12px; color: var(--tenue); text-decoration: none; }

/* ---------- Altro: lista da app, stessa testa per ogni sezione, righe piatte (restyling del 2/11) ----------
   Solo variabili del tema. L'elenco: un gruppo per card, righe da 52 px con la tessera dell'icona, titolo, nota su una riga e la freccia; il filetto
   parte dopo l'icona. Niente :hover fuori da (hover: hover), niente lampo al tocco, tocco subito (touch-action), testo dei comandi non selezionabile. */
.riquadro.gruppo { padding: 12px 0 0; overflow: hidden; }
.riquadro.gruppo .riquadro-titolo { padding: 0 16px; margin-bottom: 4px; }
.riquadro.gruppo.esci { padding-top: 0; }
.riquadro.gruppo > .avviso { padding: 0 16px 10px; margin: 0; min-height: 0; }
.riquadro.gruppo > .avviso:empty { padding: 0; }
.voce-altro {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px;
  text-align: left; text-decoration: none; color: inherit; font: inherit; background: none; border: 0; border-radius: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.voce-altro[hidden] { display: none; }
.voce-altro + .voce-altro::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: 1px solid var(--linea); }
.voce-altro:active:not(:disabled) { background: color-mix(in srgb, var(--testo) 7%, transparent); }
.voce-altro:disabled { opacity: .6; cursor: default; }
.voce-altro:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .voce-altro:hover:not(:disabled) { background: color-mix(in srgb, var(--testo) 5%, transparent); } }
.voce-altro-icona { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--accento) 14%, var(--sfondo-2)); }
.voce-altro-icona .icona, .voce-altro-freccia .icona { width: 18px; height: 18px; fill: none; stroke: var(--accento); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.voce-altro-testo { display: grid; min-width: 0; gap: 1px; }
.voce-altro-titolo { font-weight: 500; line-height: 1.3; }
.voce-altro-nota { font-size: .82rem; line-height: 1.35; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-altro-nota.a-capo { white-space: normal; overflow: visible; }
.voce-altro-freccia { display: grid; place-items: center; }
.voce-altro-freccia .icona { width: 16px; height: 16px; stroke: var(--tenue); }
/* La testa di ogni sezione di Altro: «← Altro» da 44 px, una riga di introduzione, poi le card con lo stesso passo (12 px tra una e l'altra). */
body[data-schermata="altro"] .indietro { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding-right: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body[data-schermata="altro"] .indietro:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 6px; }
/* Un avviso vuoto non lascia un buco in fondo alla card (resta nella pagina: è una regione che legge lo schermo a voce). */
body[data-schermata="altro"] .schermata .avviso:empty { min-height: 0; margin: 0; }

/* Righe piatte dentro le card: filetto tra una e l'altra, niente riquadro nel riquadro. */
body[data-schermata="altro"] .schermata .riquadro .elenco-righe { gap: 0; }
body[data-schermata="altro"] .schermata .riquadro .riga { background: none; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 12px 0; min-height: 44px; }
body[data-schermata="altro"] .schermata .riquadro li:last-child > .riga { border-bottom: 0; }

.scelte { display: grid; gap: 8px; }
.scelta {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--sfondo); border: 1px solid var(--linea);
}
.scelta[aria-pressed="true"] { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }

.spunte { display: grid; gap: 10px; margin: 0 0 4px; }

.campo { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 1rem; color: var(--testo); background: var(--sfondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.campo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- Oggi ---------- */
.collegamento { background: none; border: 0; padding: 0; color: var(--accento); cursor: pointer; font-size: .9rem; }
.oggi-testa { margin: 0 0 10px; }
.oggi-data { margin: 0; font-size: .85rem; }
.oggi-saluto { margin: 2px 0 0; font-size: 1.25rem; }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.numero { background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 8px; text-align: center; }
.numero b { display: block; font-size: 1.6rem; line-height: 1.2; }
.numero span { font-size: .75rem; color: var(--tenue); }
/* «Prima di tutto» non ha più il bordo arancione: nella bacheca l'arancione vuol dire urgente (.riquadro.urgente). */
.prima-titolo { margin: 0 0 4px; font-weight: 700; }
.prima-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prima-azioni .pulsante { text-decoration: none; display: inline-block; }
.chiama { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.numero-telefono { display: none; font-variant-numeric: tabular-nums; }
.solo-computer { display: none; }
.chiama-esiti { align-items: center; gap: 8px; }

.riga-scheda { display: flex; align-items: center; gap: 10px; background: var(--sfondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; font-size: .92rem; }
.riga-scheda-etichetta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.riga-scheda-etichetta span { overflow-wrap: anywhere; }
.riga-scheda input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--accento); }
.riga-scheda .protetta { font-size: .75rem; color: var(--tenue); white-space: nowrap; }
.riga-scheda .apri { font-size: .85rem; color: var(--tenue); }
.riga-scheda.in-errore { flex-wrap: wrap; border-color: var(--accento); }
.riga-scheda.in-errore .scheda-esito { flex-basis: 100%; margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.riga-scheda.in-errore .avviso { flex-basis: 100%; margin: 0; }

.punto-testo { margin: 0 0 6px; white-space: pre-line; }
.avvisi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avviso-guardiano { border-left: 3px solid var(--accento); padding: 4px 0 4px 10px; font-size: .92rem; }
/* I pulsanti degli avvisi del guardiano (componenti/avviso.js), in Oggi e nella Chat */
.avviso-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.avviso-azioni { display: grid; gap: 6px; margin-top: 8px; }
.avviso-azioni .scheda-esito { margin: 0; color: var(--tenue); }
.avviso-azioni .avviso:empty { display: none; }
.avviso-cifra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avviso-cifra .tenue { flex-basis: 100%; font-size: .85rem; }
.avviso-cifra .campo { flex: 0 1 120px; }
.agenda-oggi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.agenda-oggi li { display: grid; grid-template-columns: 4.5em 1fr; gap: 8px; }

/* ---------- Chat ---------- */
.filo { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.giorno-filo { align-self: center; font-size: .75rem; color: var(--tenue); padding: 6px 0; }
.bolla { max-width: 85%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--linea); }
.bolla.brandon { align-self: flex-start; background: var(--sfondo-2); }
.bolla.tu { align-self: flex-end; background: var(--accento); color: var(--su-accento); border-color: var(--accento); }
.bolla.invio { opacity: .7; }
.bolla.coda { opacity: .55; border-style: dashed; }
.bolla.scrive .bolla-testo { color: var(--tenue); font-style: italic; }
.bolla-chi { display: block; font-size: .72rem; font-weight: 700; color: var(--accento); }
.bolla-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolla-ora { display: block; font-size: .7rem; opacity: .7; margin-top: 2px; }
.filo-vuoto { padding: 12px 0; }
.filo-scheda { align-self: stretch; }
.scheda { background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 12px 14px; display: grid; gap: 6px; }
.scheda.chiusa { opacity: .8; }
.scheda.evidenziata { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.scheda p { margin: 0; }
.scheda-testa { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.scheda-stato.stato-in_attesa { color: var(--accento); }
.scheda-testo { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sfondo); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; font-size: .92rem; max-height: 320px; overflow: auto; }
.scheda-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.scheda-nota { display: grid; gap: 8px; }
.scheda-nota textarea, .scrivi textarea {
  width: 100%; font: inherit; color: var(--testo); background: var(--sfondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; resize: none;
}
.scrivi-fondo {
  position: sticky; bottom: calc(var(--sotto-menu) + var(--tastiera)); background: var(--sfondo); padding: 8px 0; border-top: 1px solid var(--linea);
}
.scrivi { display: flex; gap: 8px; align-items: flex-end; }
.scrivi textarea { flex: 1; }
.scrivi-fondo .avviso:empty { display: none; }

/* ---------- Oggi: la home a riquadri (schermate/oggi.js, logica/bacheca.js), A2 del 2/11 ----------
   Una griglia di riquadri: due colonne sul telefono, quattro sul Mac. Il posto di ogni riquadro lo calcola impagina (--c2/--r2 e --c4/--r4).
   Il titolo è il protagonista; al posto del numero grande c'è il contenuto che conta (corpo), poi il resto in piccolo (sub); il numero è un conto
   piccolo accanto al titolo. Arancione su ogni riquadro con cose urgenti (.tessera--urgente, regola in logica/bacheca.js, disponiRiquadri).
   Un riquadro vuoto (.tessera--vuota) si abbassa e dice una frase calma. Tutto il riquadro si tocca (44 px e più). Il tocco risponde in 120 ms,
   solo opacità e trasformazione; con «riduci movimento» niente. Solo variabili del tema. */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
.bento > .tessera[style] { grid-column: var(--c2); grid-row: var(--r2); }
.tessera {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--linea);
  border-radius: 20px; background: var(--sfondo-2); color: var(--testo); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.tessera:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
.tessera:active { transform: scale(.985); opacity: .9; }
/* Il conto sta sempre in alto a destra, allineato alla prima riga del titolo; il titolo va a capo nella sua colonna e non lo spinge mai sotto. */
.tessera-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; min-width: 0; }
.tessera-nome { min-width: 0; font-family: var(--titoli); font-weight: 800; font-size: clamp(.85rem, 4vw, 1.1rem); line-height: 1.2; letter-spacing: -.01em; color: var(--testo); overflow-wrap: break-word; }
.tessera-conto { min-width: 1.4rem; padding: 1px 6px; border: 1px solid var(--linea); border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.5; text-align: center; color: var(--tenue); font-variant-numeric: tabular-nums; }
.tessera-corpo { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--testo); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.tessera-sub { font-size: .85rem; line-height: 1.35; color: var(--tenue); overflow-wrap: anywhere; }
.tessera-desc { display: none; font-size: .8rem; color: var(--tenue); margin-top: auto; padding-top: 4px; }
.tessera--grande { padding: 20px; gap: 10px; }
.tessera--grande .tessera-nome { font-size: 1.4rem; }
.tessera--grande .tessera-corpo { font-size: 1.15rem; }
.tessera--urgente { box-shadow: inset 3px 0 0 var(--accento); }
.tessera--urgente .tessera-conto { border-color: var(--accento); color: var(--accento); }
.tessera--vuota { gap: 4px; padding: 14px 16px; }
.tessera--vuota .tessera-nome { font-size: .95rem; color: var(--tenue); }
.tessera--vuota .tessera-corpo { font-size: .88rem; font-weight: 400; color: var(--tenue); }
@media (hover: hover) and (pointer: fine) { .tessera:hover { border-color: var(--tenue); } }
@media (prefers-reduced-motion: reduce) { .tessera { transition: none; } .tessera:active { transform: none; } }
/* Una parte aperta: «← Oggi» in alto, come le briciole dell'area admin. */
.briciole { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.indietro-oggi { font-weight: 700; color: var(--accento); text-decoration: none; padding: 8px 0; }
.briciole-percorso { font-size: .85rem; }

/* Le parti aperte (Avvisi): i riquadri degli avvisi in ordine di importanza, una colonna sul telefono e due sul computer.
   Urgente = una barra arancione a sinistra e l'etichetta arancione, nient'altro. */
.bacheca { display: grid; gap: 12px; align-items: start; }
.bacheca > .riquadro { margin: 0; min-width: 0; }
.riquadro.urgente { border-left: 3px solid var(--accento); padding-left: 14px; }
.riquadro.urgente .riquadro-titolo { color: var(--accento); }
.bacheca-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bacheca-testa .riquadro-titolo { margin-bottom: 6px; }
/* «Ho visto» è uno solo (componenti/avviso.js, tastoVisto): secondario e piccolo, mai arancione pieno. */
.tasto-visto { min-height: 44px; padding: 0 14px; font-size: .85rem; font-weight: 500; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bacheca-testa .tasto-visto { margin: -8px 0 -6px; align-self: center; }
/* «Guarda nel Diario» di un avviso di errore interno: un collegamento alto come «Ho visto», testo al centro. */
a.pulsante.avviso-diario { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: .85rem; font-weight: 500; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.avviso-quando { display: block; margin-top: 2px; font-size: .78rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.bacheca-apri { display: grid; gap: 2px; text-decoration: none; color: inherit; }
.bacheca-apri:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; border-radius: 6px; }
.bacheca-titolo { font-weight: 700; overflow-wrap: anywhere; }
.bacheca-testo { color: var(--tenue); font-size: .92rem; overflow-wrap: anywhere; }
@media (hover: hover) {
  .bacheca-avviso:not(.urgente):hover { border-color: var(--tenue); }
}

/* ---------- guscio: telefono, una colonna con il menu in basso ---------- */
.guscio { min-height: 100dvh; display: flex; flex-direction: column; }
.intestazione { padding: calc(env(safe-area-inset-top) + 14px) 16px 8px; }
.intestazione .marchio.piccolo { font-size: .8rem; color: var(--tenue); }
/* Le schermate interne (linea premium §3) portano la loro testa: «‹ Altro» in alto, il nome sotto. Il marchio piccolo e il titolo del guscio si tolgono. */
body:has(#schermata .pz-nome) .intestazione { padding-bottom: 0; }
body:has(#schermata .pz-nome) .intestazione .marchio.piccolo, body:has(#schermata .pz-nome) #titolo { display: none; }
.canale { margin-left: 8px; font-size: .72rem; color: var(--tenue); }
.canale::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--tenue); vertical-align: middle; }
.canale[hidden] { display: none; }
.titolo { margin: 2px 0 0; font-family: var(--titoli); font-weight: 800; font-size: var(--t-nome); line-height: 1.1; letter-spacing: -0.02em; }
/* «È pronta una versione nuova» (punto 17): sotto il tasto Ferma, calma, con «Aggiorna». */
.striscia-versione { position: fixed; top: calc(env(safe-area-inset-top) + 52px); left: 12px; right: 12px; z-index: 45; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--accento); background: var(--sfondo-2); color: var(--testo); font-size: .9rem; }
.striscia-versione .pulsante { padding: 6px 14px; }
.schermata-rotta-tasti { display: flex; gap: 8px; flex-wrap: wrap; }
.banda { margin: 0 16px 8px; padding: 8px 12px; border-radius: 10px; font-size: .85rem; border: 1px solid var(--accento); color: var(--testo); }
.schermata { flex: 1; padding: 8px 16px calc(var(--menu-alto) + env(safe-area-inset-bottom) + 20px); }
.colonna-destra { display: none; }

/* ---------- Il menu in basso: «Isola» (linea premium, 3/11) ----------
   Sul telefono una barra staccata dai bordi con le cinque voci (icona e scritta) e Brandon rialzato al centro; sul computer la stessa cosa in colonna a sinistra.
   La voce attiva ha l'icona del colore principale dentro una capsula che scorre da una voce all'altra (la misura la scrive app.js in --cap-*); premendo l'icona
   si stringe e al rilascio rimbalza una volta. Per avere le scritte solo nella voce attiva basta la classe «solo-attiva» su <nav id="menu">. Con «Riduci movimento»
   nessuno spostamento: i colori cambiano subito. Solo variabili del tema. */
/* Telefono: la barra (66 px) con il disco di Brandon che sporge e un respiro; i comandi fissi in basso (--sotto-menu) stanno sopra tutto questo. */
@media (max-width: 899px) { :root { --menu-alto: 92px; --sotto-menu: calc(max(12px, env(safe-area-inset-bottom) - 8px) + var(--menu-alto)); } }
.menu {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, calc(env(safe-area-inset-bottom) - 8px)); z-index: 10;
  display: flex; justify-content: space-around; align-items: stretch; height: 66px; padding: 0 6px;
  background: color-mix(in srgb, var(--sup) 82%, transparent); border: 1px solid var(--linea); border-radius: 28px;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.voce-menu {
  flex: 1; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 0; border-radius: 22px; font-size: 10.5px; font-weight: 500; line-height: 1.2;
  text-decoration: none; color: var(--tenue); transition: color var(--mov) ease; -webkit-tap-highlight-color: transparent;
}
.voce-menu[aria-current="page"] { color: var(--testo); font-weight: 600; }
.vm-icona { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 15px; }
.vm-icona .icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--mov) ease, transform var(--mov-breve) var(--uscita); }
.voce-menu[aria-current="page"] .vm-icona .icona { stroke: var(--accento); }
.voce-menu:active .vm-icona .icona { transform: scale(.86); }
.voce-menu[aria-current="page"] .vm-icona .icona { animation: menu-rimbalzo .38s cubic-bezier(.3, 1.5, .5, 1); }
.vm-icona::after { content: ""; position: absolute; inset: 0; border-radius: 15px; border: 1.5px solid color-mix(in srgb, var(--accento) 45%, transparent); opacity: 0; pointer-events: none; }
.voce-menu[aria-current="page"] .vm-icona::after { animation: menu-anello .5s ease-out; }
@keyframes menu-rimbalzo { 0% { transform: scale(.86); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes menu-anello { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.28); } }
/* Il segno col numero: un tondo del colore principale sull'angolo dell'icona; nascosto se non c'è niente che aspetta. */
.vm-segno {
  position: absolute; top: -4px; left: 50%; margin-left: 7px; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; box-shadow: 0 0 0 2px var(--sup);
  background: var(--accento); color: var(--su-accento); font: 700 10.5px/18px var(--lettere); text-align: center; font-variant-numeric: tabular-nums; pointer-events: none;
}
.vm-segno[hidden] { display: none; }
/* La capsula: una sola, dietro la voce attiva; senza misura (nessuna voce attiva) non si vede. Prima della prima misura non si muove (menu.capsula-pronta). */
.menu-capsula {
  position: absolute; left: 0; top: 0; width: var(--cap-l, 0px); height: var(--cap-a, 0px); transform: translate(var(--cap-x, 0px), var(--cap-y, 0px)); border-radius: 15px;
  background: color-mix(in srgb, var(--accento) 18%, transparent); opacity: var(--cap-visibile, 0); pointer-events: none;
}
.menu.capsula-pronta .menu-capsula { transition: transform .34s cubic-bezier(.3, 1.25, .4, 1), width .34s ease, height .34s ease, opacity var(--mov) ease; }
/* Il posto della nebulosa nel menu: il canvas (voce.js) sta qui sopra, grande uguale. Rialzato in un disco; a ogni cambio di voce un anello si allarga una volta. */
.posto-nebulosa {
  position: relative; flex: 0 0 68px; align-self: center; width: 68px; height: 68px; margin-top: -26px; border-radius: 50%; background: var(--sfondo); border: 1px solid var(--linea);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sup) 82%, transparent), 0 8px 22px color-mix(in srgb, var(--accento) 22%, transparent);
}
.posto-nebulosa.batte::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; animation: menu-batte .6s ease-out; }
@keyframes menu-batte { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accento) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
/* La variante «solo-attiva»: sul telefono solo le icone, e la scritta compare nella capsula della voce attiva (il nome resta per lo schermo a voce: aria-label). */
@media (max-width: 899px) {
  .menu.solo-attiva { justify-content: space-between; padding: 0 8px; }
  .menu.solo-attiva .voce-menu { flex: none; display: flex; align-items: center; align-self: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 10px; border-radius: 22px; font-size: 13px; }
  .menu.solo-attiva .vm-icona { width: 24px; height: 24px; }
  .menu.solo-attiva .vm-etichetta { display: none; }
  .menu.solo-attiva .voce-menu[aria-current="page"] { padding: 0 14px 0 10px; background: color-mix(in srgb, var(--accento) 16%, transparent); }
  .menu.solo-attiva .voce-menu[aria-current="page"] .vm-etichetta { display: inline; }
  .menu.solo-attiva .menu-capsula { display: none; }
  .menu.solo-attiva .vm-segno { top: -7px; left: auto; right: -9px; margin: 0; }
}
/* Mentre si scrive (componenti/tastiera.js) il menu si toglie: sull'iPhone la tastiera lo lascerebbe a mezz'aria sopra di sé, a mangiare spazio al campo. */
@media (max-width: 899px) { body.tastiera-aperta { --sotto-menu: 0px; } body.tastiera-aperta .menu { display: none; } }

/* ---------- la nebulosa e la finestra della voce (voce.js, nebulosa.js) ---------- */
/* Da addormentata copre solo il suo posto (left/top/width/height li scrive voce.js): il resto della schermata si tocca e
   si scorre come sempre. Da sveglia sale al centro e copre tutto; la schermata sotto si attenua. */
.nebulosa {
  position: fixed; z-index: 20; display: block; cursor: pointer; touch-action: none; -webkit-touch-callout: none; user-select: none;
  transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease;
}
.nebulosa:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; border-radius: 12px; }
/* Addormentata: dentro il suo posto nel menu, lo segue sempre (tastiera di iPhone compresa). Nessuna transizione: non si muove da sola. */
.nebulosa.a-posto { position: absolute; inset: 0; width: 100%; height: 100%; transition: none; }
.nebulosa.sveglia { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; }
.guscio { transition: opacity .4s; }
body.voce-sveglia .guscio { opacity: .28; }
body:not([data-stato="dentro"]) .nebulosa, body:not([data-stato="dentro"]) .finestra-voce { display: none; }
.finestra-voce {
  position: fixed; z-index: 30; left: 16px; right: 16px; bottom: calc(var(--sotto-menu) + var(--tastiera) + 16px);
  max-height: min(45dvh, calc(100dvh - var(--tastiera) - 32px)); overflow: auto; display: grid; gap: 8px;
  background: var(--sfondo-2); border: 1px solid var(--accento); border-radius: 16px; padding: 12px 14px; line-height: 1.4;
}
.finestra-voce p { margin: 0; }
.voce-tu { color: var(--tenue); font-style: italic; overflow-wrap: anywhere; }
.voce-tu:empty, .voce-stato:empty, .voce-risposta:empty, .voce-schede:empty { display: none; }
.voce-stato { font-size: .9rem; color: var(--tenue); }
.voce-risposta { white-space: pre-wrap; overflow-wrap: anywhere; }
.voce-muta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--tenue); }
.voce-muta[hidden] { display: none; }
.voce-muta-icona { position: relative; display: inline-flex; width: 18px; height: 18px; flex: none; }
.voce-muta-icona .icona { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.voce-muta-icona .voce-muta-barra { position: absolute; inset: 0; }
.voce-schede { display: grid; gap: 8px; }
.voce-scrivi { display: flex; gap: 8px; align-items: flex-end; }
.voce-scrivi textarea {
  flex: 1; font: inherit; color: var(--testo); background: var(--sfondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; resize: none;
}
.voce-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.scrivi .detta { padding-left: 12px; padding-right: 12px; }
.scrivi .detta[aria-pressed="true"] { border-color: var(--accento); color: var(--accento); }
/* ---------- Altro e Diario (lavoro 11) ---------- */

.titolo-sezione { margin: 0 0 4px; font-size: 1.15rem; overflow-wrap: anywhere; }
.elenco-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.riga { display: grid; gap: 2px; text-decoration: none; background: var(--sfondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; }
a.riga:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.riga.spenta { opacity: .7; }
/* Elenchi lunghi (Diario, Prove): righe semplici separate da una linea, senza riquadro per riga. */

a.pulsante { display: inline-block; text-decoration: none; }
.riga-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.riga-titolo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.riga-destra { flex: none; font-size: .82rem; }
.riga-sotto { margin: 0; font-size: .88rem; color: var(--tenue); overflow-wrap: anywhere; }

.segni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.segno-stato { font-size: .72rem; line-height: 1.5; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tenue); }
.segno-stato.forte { border-color: var(--accento); color: var(--accento); }
.testo-lungo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.modulo { display: grid; gap: 12px; }
.modulo-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.campo-modulo { display: grid; gap: 4px; font-size: .85rem; color: var(--tenue); }
.campo-modulo .campo { font-size: 1rem; }
textarea.campo { resize: vertical; }

.azioni { display: flex; flex-wrap: wrap; gap: 8px; }

.pulsante.piccolo { padding: 6px 12px; font-size: .85rem; }
.ordine { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.cifra { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cifra.piccola { font-size: 1.4rem; }
.barra { height: 10px; margin: 12px 0 8px; border-radius: 999px; overflow: hidden; background: var(--sfondo); border: 1px solid var(--linea); }

/* Altro → Costi, «Ultime settimane» (Fase 3, Task 7): una riga per settimana con la sua barra. */

@media (prefers-reduced-motion: reduce) {
  .nebulosa, .guscio { transition: none; }
}

/* ---------- computer: tre colonne, menu a sinistra ---------- */
/* La colonna di destra parte sotto il tasto «Ferma» (fisso in alto a destra), che altrimenti copre l'angolo della prima card. Le regole «Altro» di sotto valgono solo dentro la schermata, non qui. */
@media (min-width: 900px) {
  .guscio {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px;
    grid-template-rows: auto auto 1fr; grid-template-areas: "menu testa destra" "menu banda destra" "menu centro destra";
  }
  .intestazione { grid-area: testa; padding: 24px 28px 8px; }
  .banda { grid-area: banda; margin: 0 28px 8px; }
  .schermata { grid-area: centro; padding: 8px 28px 28px; max-width: 720px; }
  .colonna-destra { grid-area: destra; display: block; padding: 56px 16px 24px; border-left: 1px solid var(--linea); }
  .menu {
    grid-area: menu; position: sticky; top: 10px; left: auto; right: auto; bottom: auto; height: calc(100dvh - 20px); margin: 10px; padding: 16px 8px;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px;
    border-radius: 22px; background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .voce-menu { flex: none; grid-template-columns: 24px minmax(0, 1fr); justify-items: start; align-content: normal; align-items: center; column-gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; text-align: left; font-size: .95rem; }
  .voce-menu { position: relative; }
  .vm-icona { position: static; width: 24px; height: 24px; border-radius: 0; }
  .vm-icona::after { display: none; }
  .vm-segno { top: 50%; left: auto; right: 12px; margin: -9px 0 0; }
  .menu-capsula { border-radius: 12px; background: color-mix(in srgb, var(--accento) 14%, transparent); }
  .posto-nebulosa { flex: none; align-self: stretch; width: auto; height: 96px; margin: 10px 0 0; border: 0; border-radius: 16px; background: none; box-shadow: none; }
  .posto-nebulosa.batte::after { border-radius: 16px; inset: 0; }
  .finestra-voce { left: 50%; right: auto; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); bottom: 32px; }
  .numero-telefono { display: inline; }
  .solo-telefono { display: none; }
  .solo-computer { display: inline-flex; }
  .chiama .solo-telefono { display: none; } /* più forte di .prima-azioni .pulsante */
  .scrivi-fondo { bottom: 0; }
  /* Oggi: la home bento prende tutta la larghezza (senza la colonna di destra: agenda e avvisi sono riquadri) su quattro colonne.
     Le parti aperte (Avvisi) vanno su due colonne. */
  body[data-schermata="oggi"] .guscio { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "menu testa" "menu banda" "menu centro"; }
  body[data-schermata="oggi"] .colonna-destra { display: none; }
  body[data-schermata="oggi"] .schermata { max-width: 1120px; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(132px, auto); gap: 12px; }
  .bento > .tessera[style] { grid-column: var(--c4); grid-row: var(--r4); }
  .tessera { padding: 18px 20px; }
  .tessera-desc { display: block; }
  .tessera--grande { padding: 24px 26px; }
  .tessera--grande .tessera-nome { font-size: 1.6rem; }
  .tessera--grande .tessera-corpo { font-size: 1.3rem; }
  .bacheca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Diario A2 (schermate/diario.js, 2/11): giorni grandi, «Da guardare» in cima, il contenuto in evidenza ----------
   Solo variabili del tema. Righe da 44 px e più, senza riquadro; i problemi in arancione (l'unico uso dell'accento qui). Le righe entrano in 160 ms
   (opacità e trasformazione); con «riduci movimento» niente. Hover solo con (hover: hover) e (pointer: fine). */

@keyframes diario-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Altro: titoli e contenuto (A2, 2/11) ----------
   In tutte le sezioni di Altro (non nell'elenco, che ha i suoi gruppi): il titolo della card è grande, la frase che conta sta al posto del numero
   nudo (.frase-card), i dettagli in piccolo sotto (.dettaglio-card), le righe hanno il nome in evidenza, le barre sono sottili e neutre.
   Solo variabili del tema. L'arancione resta a chi chiede un'azione (allarme del budget, problemi). */
body[data-schermata="altro"] .schermata .riquadro:not(.gruppo) { padding: 18px; border-radius: 20px; }
body[data-schermata="altro"] .schermata .riquadro:not(.gruppo) .riquadro-titolo { margin: 0 0 12px; font-family: var(--titoli); font-weight: 800; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--testo); }
body[data-schermata="altro"] .schermata .riquadro.urgente .riquadro-titolo { color: var(--accento); }

body[data-schermata="altro"] .schermata .riga-titolo { font-size: 1.02rem; font-weight: 600; }
body[data-schermata="altro"] .schermata .riga-destra { font-size: .9rem; font-variant-numeric: tabular-nums; }
body[data-schermata="altro"] .schermata .barra { height: 6px; margin: 10px 0 8px; border: 0; border-radius: 3px; background: var(--linea); }

/* ---------- Traguardi: l'astronave di Brandon a tutto schermo (schermate/altro/traguardi.js, traguardi/scena.js) ----------
   La scena è sempre scura (è l'interno di una nave, non segue il tema): qui colori fissi della tavolozza dei disegni (osso, arancione, grigi caldi). Barra di navigazione e
   intestazione nascoste finché è aperta (classe tg-aperto su body). Solo transform e opacity per il movimento; «Riduci movimento»: dissolvenze. Tocchi da 44 px. */
body.tg-aperto { overflow: hidden; }
body.tg-aperto .fermo-tasto, body.tg-aperto .guscio > :not(.schermata) { display: none; }
.tg { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: #0b0a0d; color: #f4efe4; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.tg-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.tg-sopra { position: absolute; inset: 0; pointer-events: none; }
.tg-pillola { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 1; transform: translateX(-50%); isolation: isolate; max-width: calc(100% - 128px); min-height: 44px; padding: 0 16px;
  color: #f4efe4; background: none; border: 0; font: 600 var(--t-det)/1 var(--lettere); letter-spacing: .01em; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.tg-pillola::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: var(--r-pillola); background: rgba(12,10,8,.66); border: 1px solid rgba(244,239,228,.2); }
.tg-pillola:active { opacity: .75; }
.tg-chiudi { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 1; display: grid; place-items: center; isolation: isolate; width: 44px; height: 44px; padding: 0; color: #f4efe4; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
.tg-chiudi::before { content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 50%; background: rgba(12,10,8,.66); border: 1px solid rgba(244,239,228,.2); }
.tg-chiudi .icona { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tg-chiudi:active { opacity: .75; }
.tg-pillola:focus-visible, .tg-chiudi:focus-visible, .tg-invito:focus-visible { outline: 2px solid #f4efe4; outline-offset: 2px; }
.tg-invito { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); z-index: 1; transform: translateX(-50%); min-height: 44px; padding: 0 20px; color: #f4efe4; background: rgba(12,10,8,.66);
  border: 1px solid rgba(255,77,28,.7); border-radius: var(--r-pillola); font: 600 var(--t-sec)/1 var(--lettere); cursor: pointer; touch-action: manipulation; animation: tg-respira 2.4s ease-in-out infinite; }
.tg-tasti { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 1; display: flex; justify-content: center; gap: 22px; }
.tg-tasto { display: grid; justify-items: center; gap: 7px; min-width: 72px; padding: 0; color: #f4efe4; background: none; border: 0; font: 600 var(--t-eti)/1 var(--lettere); letter-spacing: .02em; cursor: pointer; touch-action: manipulation; }
.tg-disco { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #2b2622; transition: transform var(--mov-breve) var(--uscita);
  box-shadow: 0 0 0 3px #0b0a0d, 0 0 0 5px #5a5148, inset 0 -5px 0 rgba(0,0,0,.42), inset 0 3px 0 rgba(255,255,255,.16); }
.tg-tasto:active .tg-disco { transform: translateY(2px) scale(.95); }
.tg-tasto:focus-visible .tg-disco { outline: 2px solid #f4efe4; outline-offset: 7px; }
.tg-pixel { width: 26px; height: 26px; fill: #f4efe4; }
.tg-tasto[data-tasto="gioca"] .tg-pixel { fill: var(--accento); }
.tg-tasto[data-tasto="festeggia"] .tg-pixel { fill: #f2c14e; }
.tg-tasto.pulsa .tg-disco { animation: tg-pulsa 700ms ease-out 1; }
.tg-fumetto, .tg-targhetta { position: absolute; max-width: min(300px, calc(100% - 24px)); pointer-events: none; animation: tg-compare 160ms var(--uscita); }
.tg-fumetto { padding: 8px 12px; color: #0b0a0d; background: #f4efe4; font: 700 var(--t-sec)/1.2 var(--lettere); box-shadow: 0 -3px 0 #0b0a0d, 0 3px 0 #0b0a0d, -3px 0 0 #0b0a0d, 3px 0 0 #0b0a0d; }
.tg-targhetta { padding: 10px 14px; background: #1c1814; color: #f4efe4; box-shadow: 0 -3px 0 #f4efe4, 0 3px 0 #f4efe4, -3px 0 0 #f4efe4, 3px 0 0 #f4efe4; }
.tg-targhetta-frase { margin: 0; font: 700 var(--t-sec)/1.3 var(--lettere); }
.tg-targhetta-data { margin: 4px 0 0; color: #cbbfae; font: var(--t-det)/1.3 var(--lettere); }
.tg-errore { position: absolute; top: 50%; left: 16px; right: 16px; z-index: 2; max-width: 400px; margin: 0 auto; transform: translateY(-50%); }
.tg-album { max-height: min(62dvh, 520px); margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); overflow-y: auto; overscroll-behavior: contain; }
.pz-riga.tg-riga { grid-template-columns: 36px minmax(0, 1fr); }
.pz-riga.tg-riga + .pz-riga.tg-riga::before { left: calc(var(--s4) + 36px + var(--s3)); }
.tg-riga .pz-riga-nota { white-space: normal; }
.pz-riga.tg-prossimo { grid-template-columns: minmax(0, 1fr); }
.pz-riga.tg-prossimo::before { left: var(--s4); }
.pz-tessera.tg-mini { width: 36px; height: 36px; }
.tg-mini-disegno { width: 30px; height: 30px; image-rendering: pixelated; }
.tg-barra { display: block; height: 4px; margin: 6px 0 2px; overflow: hidden; border-radius: 2px; background: var(--linea); }
.tg-barra-pieno { display: block; height: 100%; border-radius: 2px; background: var(--accento); }
.pz-foglio-frase { white-space: pre-line; }
@keyframes tg-pulsa { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes tg-respira { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes tg-compare { from { opacity: 0; transform: translateY(4px); } }
@keyframes tg-alone { 0% { box-shadow: 0 0 0 3px #0b0a0d, 0 0 0 5px #ff4d1c; } 100% { box-shadow: 0 0 0 3px #0b0a0d, 0 0 0 5px #5a5148; } }
@keyframes tg-dissolve { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tg-invito { animation: none; }
  .tg-tasto:active .tg-disco { transform: none; }
  .tg-tasto.pulsa .tg-disco { animation: tg-alone 900ms ease-out 1; }
  .tg-fumetto, .tg-targhetta { animation: tg-dissolve 160ms ease-out; }
}

/* ---------- Clienti (Fase 3): elenco, scheda, contatti e pacchetto ---------- */

.collegamento-testo { color: var(--accento); }

.riga.inclusa .riga-destra { color: var(--accento); }

.voci-listino { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ---------- Clienti (Fase 3, Task 2): storia e decisioni ---------- */
/* La linea del tempo della pagina approvata (riferimenti-fase-3/storia-cliente.html), con le sole variabili del tema: asse a
   sinistra, tacche e date, una scheda sola aperta (quella al centro a scorrimento fermo, o al tocco; lo scorrimento è nativo e
   nessuno script lo muove: aprirla cambia l'altezza del nodo e Safari non riancora lo scroll, per questo overflow-anchor: none
   e la compensazione di scrollTop in storia.js; niente scroll-snap, perché Chrome
   riaggancia al primo nodo quando la scheda aperta cambia altezza), rombi per le decisioni
   (pieni se dette o confermate, tratteggiati se proposte), etichette di azione, scrubber a destra, «+» in basso. */
.chip { font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--tenue); cursor: pointer; }
.chip.on, .chip[aria-pressed="true"] { background: var(--testo); color: var(--sfondo); border-color: var(--testo); }
.chip:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.storia-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.storia-prossimo { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--accento); font-size: .9rem; }
.storia-prossimo.tenue { border-color: var(--linea); }
.storia-colonna { position: relative; }
.storia-linea {
  position: relative; height: min(68dvh, 640px); overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: var(--raggio);
  background-image: linear-gradient(color-mix(in srgb, var(--testo) 4%, transparent) 1px, transparent 1px); background-size: 100% 28px;
}
.storia-asse { list-style: none; margin: 0; padding: 36vh 44px 36vh 0; position: relative; }
.storia-asse::before { content: ""; position: absolute; left: 63px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--linea) 15%, var(--testo) 60%, var(--testo)); }
.storia-nodo { position: relative; min-height: 56px; padding: 14px 0 14px 84px; }
.storia-capitolo { position: absolute; left: 84px; top: -6px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.storia-tacca { position: absolute; left: 58px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--sfondo-2); border: 2.5px solid var(--testo); transform-origin: center; }
.storia-nodo.dec .storia-tacca { border-radius: 2px; background: var(--accento); border-color: var(--accento); }
.storia-nodo.dec.tratteggiata .storia-tacca { background: var(--sfondo-2); border-style: dashed; }
.storia-nodo.aperta .storia-tacca { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 30%, transparent); }
.storia-data { position: absolute; left: 0; width: 48px; top: 18px; text-align: right; font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--tenue); }
.storia-riga { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; font-size: .9rem; min-width: 0; }
.storia-riga-titolo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.storia-riga small { color: var(--tenue); font-size: .75rem; flex: none; }
.storia-nodo.dec .storia-riga-titolo { color: var(--accento); font-weight: 600; }
.storia-az { flex: none; font-size: .68rem; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accento) 18%, transparent); color: var(--accento); }
.storia-az.ok { background: color-mix(in srgb, var(--testo) 12%, transparent); color: var(--tenue); }
.storia-scheda { display: none; background: var(--sfondo); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; margin-top: 4px; gap: 4px; }
.storia-nodo.aperta .storia-riga { display: none; }
.storia-nodo.aperta .storia-scheda { display: grid; }
/* Il passaggio animato (storia.js): chi si chiude tiene la scheda finché svanisce; durante l'animazione il nodo taglia sotto
   (l'altezza animata), ma non sopra né ai lati, dove sporgono il capitolo, la tacca e la data. */
.storia-nodo.chiude .storia-riga { display: none; }
.storia-nodo.chiude .storia-scheda { display: grid; }
.storia-nodo.passa { clip-path: inset(-24px -100vw 0 -100vw); }
.storia-quando { margin: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.storia-titolo { font-size: 1rem; overflow-wrap: anywhere; }
.storia-nodo.dec .storia-titolo { color: var(--accento); }
.storia-testo { margin: 0; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.storia-fonte { margin: 0; font-size: .8rem; }
.storia-scheda .azioni { margin-top: 6px; }
.storia-vuota { margin: 0; padding: 20px 16px 20px 16px; }
.storia-scrub { position: absolute; right: 8px; top: 22%; bottom: 18%; width: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.storia-scrub::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--linea); border-radius: 2px; }
.storia-tic { position: relative; width: 24px; height: 14px; background: none; border: 0; padding: 0; cursor: pointer; }
.storia-tic::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 2px; background: var(--tenue); }
.storia-tic span { position: absolute; right: 24px; top: 0; font-size: .62rem; color: var(--tenue); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.storia-tic:focus-visible span { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .storia-scrub:hover .storia-tic span { opacity: 1; } }
.storia-piu { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accento); color: var(--su-accento); font-size: 26px; line-height: 44px; cursor: pointer; box-shadow: 0 8px 24px color-mix(in srgb, var(--accento) 35%, transparent); }
.storia-piu:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.storia-pannello { display: none; }
.storia-supera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.storia-supera .campo { flex: 1 1 160px; }

.storia-rombo { flex: none; width: 10px; height: 10px; margin-top: 14px; transform: rotate(45deg); background: var(--accento); border: 2px solid var(--accento); border-radius: 2px; }
.storia-rombo.tratteggiata { background: transparent; border-style: dashed; }

.scheda-per { display: flex; flex-wrap: wrap; gap: 8px; }
.riga-scheda .cliente { font-size: .85rem; color: var(--accento); }

@media (min-width: 900px) {
  .storia { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; }
  .storia-asse { padding-right: 36px; }
  .storia-pannello { display: block; background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px 16px; align-self: start; position: sticky; top: 16px; }
  .storia-pannello .storia-titolo { display: block; margin: 4px 0; }
  .storia-pannello .storia-testo { margin: 6px 0; }
  .storia-nodo.aperta .storia-scheda, .storia-nodo.chiude .storia-scheda { display: none; }
  .storia-nodo.chiude .storia-riga { display: flex; }
  .storia-nodo.aperta .storia-riga { display: flex; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  .storia-linea { scroll-behavior: auto; }
}

/* ---------- Clienti (Fase 3, Task 3): lavori e materiali ---------- */
/* Un colore per tipo di lavoro (pallino e bordo), con le sole variabili del tema: sito = accento, social = testo,
   Brandon = accento mescolato al testo, Studio = tenue. */
.chip-lavoro { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; line-height: 1.5; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea); color: var(--testo); }
.chip-lavoro::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none; }
.chip.chip-lavoro { font-size: .8rem; padding: 4px 10px; color: var(--tenue); }
.chip.chip-lavoro[aria-pressed="true"] { color: var(--sfondo); }
.lavoro-sito::before { background: var(--accento); }
.lavoro-social::before { background: var(--testo); }
.lavoro-brandon::before { background: color-mix(in srgb, var(--accento) 55%, var(--testo)); }
.lavoro-studio::before { background: var(--tenue); }
.chip.chip-lavoro[aria-pressed="true"]::before { background: var(--sfondo); }
.riquadro.lavoro { border-left: 3px solid var(--linea); }
.riquadro.lavoro.lavoro-sito { border-left-color: var(--accento); }
.riquadro.lavoro.lavoro-social { border-left-color: var(--testo); }
.riquadro.lavoro.lavoro-brandon { border-left-color: color-mix(in srgb, var(--accento) 55%, var(--testo)); }
.riquadro.lavoro.lavoro-studio { border-left-color: var(--tenue); }
.riquadro.lavoro.spenta { opacity: .65; }
.lavoro-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lavoro-titolo { font-size: 1rem; overflow-wrap: anywhere; }
.lavoro-riassunto { margin: 6px 0 4px; font-size: .9rem; color: var(--tenue); }

.storia-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.storia-entra { margin: 0 0 8px; font-size: .9rem; }

/* ---------- Clienti (Fase 3, Task 4): scadenze e promesse ---------- */
/* «Rosso se passata»: il tema non ha un rosso, il colore forte è l'accento (come i segni «forte»). Solo variabili del tema. */

/* ---------- Clienti (Fase 3, Task 5): documenti e preventivi ---------- */
/* Solo variabili del tema. Le righe dei documenti riusano .riga-contatto; i preventivi riusano riquadro, voce-listino e totali-pacchetto. */

body[data-stato="dentro"] .intestazione { padding-right: 96px; }
/* Ferma tutto (componenti/fermo.js): il tasto fisso in alto a destra su ogni schermata, sopra la tastiera; il foglio con la domanda; la banda. */
.fermo-tasto { display: none; position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 12px; z-index: 40; min-height: 32px; padding: 4px 12px;
  border-radius: 16px; border: 1px solid var(--accento); background: var(--sfondo); color: var(--accento); font: inherit; font-size: .8rem; opacity: .85; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
body[data-stato="dentro"] .fermo-tasto { display: block; }
.fermo-tasto:active:not(:disabled) { opacity: 1; }
.fermo-tasto:disabled { opacity: .6; cursor: default; }
/* Il tasto resta piccolo da vedere ma si tocca da 44 px: l'area di tocco esce dai bordi (min-height 32 → 44). */
.fermo-tasto::after { content: ""; position: absolute; inset: -6px -4px; }
.fermo-tasto:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; opacity: 1; }
.fermo-foglio { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: calc(env(safe-area-inset-top) + 56px) 16px 16px;
  background: rgba(0, 0, 0, .55); }
.fermo-foglio[hidden] { display: none; }
.fermo-foglio-corpo { max-width: 420px; width: 100%; padding: 16px; border-radius: 14px; background: var(--sfondo-2); color: var(--testo); border: 1px solid var(--linea); }
.fermo-banda { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .85rem; background: var(--accento); color: var(--su-accento); }
.fermo-banda[hidden] { display: none; }
.fermo-banda .collegamento { color: var(--su-accento); font-weight: 700; text-decoration: underline; }

/* ---------- la scheda di selezione della chat (conferma solo se serve, 30/10) ----------
   Una casella grande (44px) per riga, il resto della riga apre o chiude il testo della bozza; gli avvisi in arancio. Niente :hover fuori da
   (hover: hover), niente lampo al tocco, risposta subito (touch-action: manipulation), testo dei controlli non selezionabile. */
.selezione { display: grid; gap: 10px; margin-top: 8px; padding: 10px 12px; background: var(--sfondo-2); border: 1px solid var(--linea); border-radius: var(--raggio); }
.selezione-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.selezione-riga { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--linea); }
.selezione-riga:first-child { border-top: 0; }
.selezione-casella { width: 44px; height: 44px; margin: 0; accent-color: var(--accento); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.selezione-fatta { min-height: 44px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--tenue); text-align: center; }
.selezione-voce {
  display: grid; gap: 2px; min-height: 44px; padding: 4px 0; text-align: left; background: none; border: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.selezione-voce:active { opacity: .7; }
.selezione-voce:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 8px; }
.selezione-numero { font-size: .72rem; font-weight: 700; color: var(--tenue); letter-spacing: .04em; }
.selezione-titolo { font-weight: 600; overflow-wrap: anywhere; }
.selezione-chi { font-size: .85rem; overflow-wrap: anywhere; }
.selezione-avviso { font-size: .82rem; color: var(--accento); }
.selezione-testo { grid-column: 2; margin: 0; }
.selezione-riga.gestita .selezione-titolo { color: var(--tenue); }
.selezione .scheda-azioni .pulsante { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.selezione .pulsante:active:not(:disabled) { transform: scale(.98); }
.selezione-esito:empty { display: none; }
.selezione-esito { color: var(--testo); font-weight: 600; }
/* Tira giù per ricaricare (componenti/tira-giu.js): una rotellina senza scritte che richiama la nebulosa di Brandon. Solo CSS e variabili del tema.
   --p (0..1) lo scrive il componente mentre si tira: riempie e ruota l'arco. «pronto» = si illumina; «gira» = ricarica in corso; «sparisce» = dissolvenza. */
.tira-giu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; z-index: 40; pointer-events: none;
  background: var(--sfondo); box-shadow: 0 0 0 1px var(--linea); opacity: calc(.4 + var(--p, 0) * .6); transition: transform .08s linear, opacity .15s ease, box-shadow .15s ease; }
.tira-giu.pronto { box-shadow: 0 0 0 1px var(--accento), 0 0 12px color-mix(in srgb, var(--accento) 55%, transparent); opacity: 1; }
.tira-giu.gira { opacity: 1; }
.tira-giu.sparisce { opacity: 0; }
.tira-giu-arco { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accento) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--sfondo) calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--sfondo) calc(100% - 3px));
  transform: rotate(calc(var(--p, 0) * 270deg)); }
.tira-giu.gira .tira-giu-arco { --p: .7; animation: tira-giu-gira .9s linear infinite; }
.tira-giu-stella { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--testo); opacity: .75;
  transform: rotate(var(--a)) translateY(-21px) scale(calc(.4 + var(--p, 0) * .6)); }
.tira-giu-cuore { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accento); opacity: calc(.35 + var(--p, 0) * .65); }
.tira-giu.gira .tira-giu-cuore { animation: tira-giu-batte 1.2s ease-in-out infinite; }
@keyframes tira-giu-gira { to { transform: rotate(360deg); } }
@keyframes tira-giu-batte { 0%, 100% { transform: scale(.8); opacity: .7; } 14% { transform: scale(1.25); opacity: 1; } 28% { transform: scale(.9); opacity: .8; } }
@keyframes tira-giu-respira { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .tira-giu, .tira-giu-arco { transition: opacity .15s ease; }
  .tira-giu-arco { transform: none; }
  .tira-giu.gira .tira-giu-arco { animation: tira-giu-respira 1.2s ease-in-out infinite; }
  .tira-giu.gira .tira-giu-cuore { animation: none; }
}
.segno-mail { color: var(--attenzione, #b45309); font-size: .7rem; margin-right: 4px; cursor: help; }
.scheda-titolo-riga { margin: 0; }
.selezione-citazione { margin: 0 0 6px; font-size: .85rem; }
.selezione-con-si { margin: 0; font-size: .85rem; }
.selezione-con-si:empty { display: none; }

/* ---------- Altro: i riquadri vivi e i quattro gruppi richiudibili (linea premium, 3/11) ----------
   In alto sei riquadri con la riga di stato («4 senza risposta»), scelti da quello che apri di più (logica/altro-riquadri.js); sotto i gruppi si aprono con
   un tocco. I riquadri entrano uno dopo l'altro (solo opacità e posizione); premuti si stringono appena. Con «Riduci movimento» niente. Solo variabili del tema. */
.al-corpo { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.al-corpo .riquadro { margin: 0; }
.al-etichetta { margin: 6px 4px -2px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--tenue); }
.al-riquadri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .al-riquadri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al-riquadro {
  position: relative; display: grid; align-content: space-between; gap: 14px; min-height: 112px; padding: 14px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea);
  color: var(--testo); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  animation: al-entra .38s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); transition: transform var(--mov-breve) var(--uscita), background var(--mov-breve) ease;
}
.al-riquadro:active { transform: scale(.97); background: color-mix(in srgb, var(--testo) 6%, var(--sup)); }
.al-riquadro:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.al-scheletro { animation: none; background: color-mix(in srgb, var(--testo) 4%, var(--sup)); }
.al-riquadro-icona { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--accento) 14%, var(--sup)); }
.al-riquadro-icona .icona { width: 20px; height: 20px; fill: none; stroke: var(--accento); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.al-riquadro-testi { display: grid; gap: 2px; min-width: 0; }
.al-riquadro-nome { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.al-riquadro-riga { font-size: .8rem; line-height: 1.3; color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-segno {
  position: absolute; top: 12px; right: 12px; min-width: 24px; padding: 1px 7px; border: 1px solid var(--accento); border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.5;
  text-align: center; color: var(--accento); font-variant-numeric: tabular-nums;
}
.al-segno[hidden] { display: none; }
@keyframes al-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.riquadro.gruppo.al-gruppo { padding: 0; }
.al-gruppo-titolo { margin: 0; font: inherit; letter-spacing: 0; text-transform: none; }
.al-gruppo-testa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--mov-breve) ease;
}
.al-gruppo-testa:active { background: color-mix(in srgb, var(--testo) 7%, transparent); }
.al-gruppo-testa:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.al-gruppo-nome { grid-column: 1; font-weight: 600; line-height: 1.3; }
.al-gruppo-anteprima { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; line-height: 1.35; color: var(--tenue); }
.al-gruppo-freccia { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; transition: transform .24s ease; }
.al-gruppo-freccia .icona { width: 18px; height: 18px; fill: none; stroke: var(--tenue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.al-gruppo.aperto .al-gruppo-freccia { transform: rotate(180deg); }
.al-pannello { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .24s ease, visibility 0s .24s; }
.al-gruppo.aperto .al-pannello { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.al-pannello-dentro { min-height: 0; overflow: hidden; }
.al-gruppo.aperto .al-pannello-dentro { box-shadow: inset 0 1px 0 var(--linea); }
@media (hover: hover) and (pointer: fine) {
  .al-riquadro:hover { background: color-mix(in srgb, var(--testo) 5%, var(--sup)); }
  .al-gruppo-testa:hover { background: color-mix(in srgb, var(--testo) 5%, transparent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .al-riquadro:hover { transform: translateY(-1px); } }

/* ---------- Riduci movimento: il menu e Altro cambiano subito, senza rimbalzi né scorrimenti ---------- */
@media (prefers-reduced-motion: reduce) {
  .voce-menu, .vm-icona .icona, .menu.capsula-pronta .menu-capsula { transition: none; }
  .voce-menu:active .vm-icona .icona { transform: none; }
  .voce-menu[aria-current="page"] .vm-icona .icona, .voce-menu[aria-current="page"] .vm-icona::after, .posto-nebulosa.batte::after { animation: none; }
  .al-riquadro { animation: none; transition: none; }
  .al-riquadro:active { transform: none; }
  .al-gruppo-freccia, .al-pannello { transition: none; }
}

/* ---------- Pezzi comuni (linea premium del 2/11: docs/app/2026-11-02-linea-premium.md §2, §3 e §5) ----------
   Testa, indietro, riga, card, pillole, ricerca, stato vuoto, scheletri, errore, «Torna a oggi» e foglio dal basso (componenti/pezzi.js e foglio.js).
   Solo variabili del tema, scala in rem, spazi 4-32, raggi 14/10/999; tocco da 44 px; movimento da 120 a 200 ms, solo opacità e spostamento. */
.pz-testa { padding: var(--s4) 0 var(--s3); }
.pz-testa.fissa { position: sticky; top: 0; z-index: 10; background: var(--sfondo); }
.pz-testa-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pz-testa-testi { min-width: 0; }
.pz-nome { margin: 0; font-family: var(--titoli); font-weight: 800; font-size: var(--t-nome); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pz-sotto { margin: 6px 0 0; font-size: var(--t-sec); color: var(--tenue); }
.pz-testa.compatta .pz-nome { font-size: var(--t-testo); }
.pz-testa.compatta .pz-sotto { display: none; }
.pz-indietro { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 -8px; padding: 0 8px; color: var(--tenue); font-size: var(--t-sec); text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 80ms var(--uscita); }
.pz-indietro:active { opacity: .7; }
.pz-indietro:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; border-radius: var(--r-riga); }
.pz-indietro .icona, .pz-tessera .icona, .pz-riga-freccia .icona, .pz-ricerca-icona .icona, .pz-vuoto-cerchio .icona, .pz-errore-icona .icona, .pz-torna .icona {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.pz-card { margin: 0 0 var(--s3); overflow: hidden; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); box-shadow: var(--ombra); }
.pz-card-titolo { margin: 0; padding: var(--s4) var(--s4) var(--s1); font-family: var(--titoli); font-weight: 800; font-size: var(--t-card); line-height: 1.2; letter-spacing: -0.02em; }
.pz-riga { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; column-gap: var(--s3); align-items: center; width: 100%; min-height: 52px;
  padding: 10px var(--s4); text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; text-decoration: none; }
.pz-riga.pz-senza-icona { grid-template-columns: minmax(0, 1fr) auto auto; }
.pz-riga + .pz-riga::before { content: ""; position: absolute; top: 0; left: calc(var(--s4) + 30px + var(--s3)); right: 0; border-top: 1px solid var(--linea); }
.pz-riga.pz-senza-icona + .pz-riga.pz-senza-icona::before { left: var(--s4); }
.pz-tocco { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: opacity 80ms var(--uscita); }
.pz-tocco:active { opacity: .7; }
.pz-tocco:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; }
.pz-tessera { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--rilievo); color: var(--tenue); }
.pz-tessera .icona { width: 18px; height: 18px; }
.pz-tono-ric .pz-tessera { background: color-mix(in srgb, var(--accento) 14%, transparent); color: var(--accento); }
.pz-tono-ok .pz-tessera { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pz-tono-att .pz-tessera { background: color-mix(in srgb, var(--att) 16%, transparent); color: var(--att); }
.pz-riga-testi { display: grid; min-width: 0; gap: 1px; }
.pz-riga-titolo { font-weight: 600; font-size: var(--t-testo); line-height: 1.3; overflow-wrap: anywhere; }
.pz-riga-nota { display: block; font-size: var(--t-det); line-height: 1.35; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-riga-destra { color: var(--tenue); font-size: var(--t-sec); white-space: nowrap; }
.pz-riga-freccia { display: grid; place-items: center; color: var(--tenue); }
.pz-riga-freccia .icona { width: 18px; height: 18px; }

.pz-pillole { display: flex; gap: var(--s2); overflow-x: auto; margin: 0 calc(var(--s4) * -1); padding: var(--s1) var(--s4) var(--s2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pz-pillole::-webkit-scrollbar { display: none; }
.pz-pillola { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; background: none;
  color: var(--testo); font: inherit; font-size: var(--t-sec); white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.pz-pillola::before { content: ""; position: absolute; inset: var(--s1) 0; z-index: -1; border-radius: var(--r-pillola); background: var(--sup); border: 1px solid var(--linea); }
.pz-pillola.attiva { color: var(--sfondo); font-weight: 600; }
.pz-pillola.attiva::before { background: var(--testo); border-color: var(--testo); }
.pz-pillola:active { opacity: .7; }
.pz-pillola:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; border-radius: var(--r-pillola); }
.pz-conto { font-style: normal; font-size: var(--t-det); color: var(--tenue); }
.pz-pillola.attiva .pz-conto { color: inherit; opacity: .7; }

.pz-ricerca { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; color: var(--tenue); background: var(--rilievo); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-ricerca:focus-within { border-color: var(--tenue); }
.pz-ricerca-campo { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; outline: none; background: none; color: var(--testo); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.pz-ricerca-campo::placeholder { color: var(--tenue); }

.pz-vuoto { display: grid; justify-items: center; gap: var(--s3); padding: 72px var(--s6) var(--s5); text-align: center; }
.pz-vuoto-cerchio { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-pillola); background: var(--sup); border: 1px solid var(--linea); color: var(--tenue); }
.pz-vuoto-cerchio .icona { width: 28px; height: 28px; }
.pz-vuoto-titolo { margin: 0; font-weight: 600; font-size: var(--t-testo); }
.pz-vuoto-testo { margin: 0; max-width: 280px; font-size: var(--t-sec); color: var(--tenue); }
.pz-azione-vuoto { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; color: var(--testo); background: var(--rilievo); border: 1px solid var(--linea);
  border-radius: var(--r-riga); font: inherit; font-weight: 600; text-decoration: none; touch-action: manipulation; cursor: pointer; }
.pz-azione-vuoto:active { opacity: .7; }

.pz-scheletri { display: grid; gap: var(--s3); }
.pz-barra { display: block; height: 12px; width: 90%; border-radius: 6px; background: var(--rilievo); }
.pz-barra.lunga { width: 70%; }
.pz-barra.corta { width: 40%; }
.pz-tessera-sk { width: 30px; height: 30px; border-radius: 8px; background: var(--rilievo); }
.pz-barre { display: grid; gap: 8px; }
.pz-sk-riga { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3); align-items: center; min-height: 52px; padding: 10px var(--s4); }
.pz-sk-card { display: grid; gap: 10px; padding: var(--s4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); }
.pz-sk-testa { display: grid; gap: 10px; padding: var(--s4) 0; }
.pz-sk-testa .pz-barra { height: 20px; }

.pz-errore { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); font-size: var(--t-sec);
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-errore-icona { color: var(--att); padding-top: 2px; }
.pz-errore-riprova { min-height: 44px; margin: -10px -8px -10px 0; padding: 0 var(--s3); color: var(--testo); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }

.pz-torna { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sotto-menu) + var(--tastiera) + var(--s4)); z-index: 15; display: inline-flex; align-items: center;
  gap: 6px; min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pillola); background: var(--testo); color: var(--sfondo); font: inherit; font-size: var(--t-sec); font-weight: 600;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; animation: pz-sale var(--mov) var(--uscita); }
@keyframes pz-sale { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pz-torna:active { opacity: .7; }

.pz-vela { position: fixed; inset: 0; z-index: 60; background: var(--vela); opacity: 0; transition: opacity var(--mov) var(--uscita); }
.pz-vela.aperto { opacity: 1; }
/* Con un foglio aperto la pagina sotto non si muove: un dito che trascina sul velo (o su un foglio senza scorrimento) faceva scorrere la lista dietro. */
.pz-vela { touch-action: none; }
@media (pointer: coarse) { body:has(.pz-vela) { overflow: hidden; } }
.pz-foglio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 430px; margin: 0 auto; padding: var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  background: var(--sup); border: 1px solid var(--linea); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; opacity: 0; transform: translateY(24px);
  transition: transform var(--mov) var(--uscita), opacity var(--mov) var(--uscita); }
.pz-foglio.aperto { opacity: 1; transform: none; }
/* Il foglio con i campi sale sopra la tastiera (apriModulo, postoSopraTastiera): se è più alto della parte visibile, scorre dentro. */
.pz-foglio:has(.pz-foglio-modulo) { overflow-y: auto; overscroll-behavior: contain; }
.pz-presa { width: 36px; height: 5px; margin: 0 auto var(--s3); border-radius: 3px; background: color-mix(in srgb, var(--tenue) 50%, transparent); }
.pz-foglio-titolo { margin: var(--s2) 0 0; font-weight: 600; font-size: var(--t-testo); }
.pz-foglio-sotto { margin: 2px 0 var(--s2); font-size: var(--t-det); color: var(--tenue); }
.pz-foglio-info { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s3); }
.pz-foglio-voce { display: grid; gap: 2px; }
.pz-foglio-etichetta { margin: 0; font-size: var(--t-det); font-weight: 600; color: var(--tenue); }
.pz-foglio-testo { margin: 0; font-size: var(--t-testo); line-height: 1.4; overflow-wrap: anywhere; }
.pz-foglio-piccolo { font-size: var(--t-det); color: var(--tenue); }
.pz-foglio-apri { justify-self: start; min-height: 32px; padding: 0; font: inherit; font-size: var(--t-det); color: var(--tenue); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-foglio-apri:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.pz-azione { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s3); align-items: center; width: 100%; min-height: 52px; padding: 0; text-align: left;
  color: var(--testo); background: none; border: 0; border-top: 1px solid var(--linea); font: inherit; font-size: var(--t-testo); font-weight: 600; text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-azione:active { opacity: .7; }
.pz-azione:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; }
.pz-foglio-titolo + .pz-azione, .pz-foglio-sotto + .pz-azione { border-top: 0; }
.pz-foglio-info + .pz-azione { border-top: 1px solid var(--linea); }
.pz-pericolo { color: var(--pericolo); }
.pz-pericolo .pz-tessera { background: color-mix(in srgb, var(--pericolo) 14%, transparent); color: var(--pericolo); }
.pz-foglio-sep { height: var(--s2); margin: var(--s1) calc(var(--s4) * -1); background: var(--rilievo); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pz-foglio-sep + .pz-azione { border-top: 0; }
.pz-foglio-frase { margin: var(--s3) 0 var(--s4); font-size: var(--t-testo); line-height: 1.4; }
.pz-foglio-bottoni { display: grid; gap: var(--s2); }
.pz-foglio-bottoni .pz-azione { grid-template-columns: 1fr; justify-items: center; border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-foglio-bottoni .pz-verbo { color: var(--sfondo); background: var(--pericolo); border-color: var(--pericolo); }
@media (prefers-reduced-motion: reduce) {
  .pz-foglio { transform: none; transition: opacity var(--mov-breve) linear; }
  .pz-vela { transition: opacity var(--mov-breve) linear; }
  .pz-torna { animation: none; }
  .pz-pillola::before, .pz-tocco, .pz-indietro { transition: none; }
}

/* ---------- Da approvare (linea premium, ondata 2): una scheda da decidere con «Scarta» e «Approva» ---------- */
.pz-appr { display: grid; gap: var(--s2); padding: var(--s4); touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pz-appr + .pz-appr { border-top: 1px solid var(--linea); }
.pz-appr.scelta { background: var(--rilievo); }
.pz-urgenza { margin: 0; font-size: var(--t-eti); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); }
.pz-appr-testa { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; }
.pz-appr-titolo { margin: 0; font-size: var(--t-testo); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pz-appr-eta { font-size: var(--t-sec); color: var(--tenue); white-space: nowrap; }
.pz-appr-anteprima { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 0 42px; font-size: var(--t-sec); color: var(--tenue); }
.pz-appr-meta { margin: 0 0 0 42px; font-size: var(--t-det); color: var(--tenue); }
.pz-appr-azioni { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-top: var(--s1); }
/* Una mail approvata che non è potuta partire (nota «Non è partita…»): la riga di avviso, color ambra e non rosso (non è un'emergenza, è da completare), e
   i tasti un po' più stretti perché «Modifica» si aggiunge a «Scarta» e «Approva» anche a 390 pixel; se non ci stanno vanno a capo, mai fuori dalla scheda. */
.pz-appr-avviso, .scheda-avviso { margin: 0 0 0 42px; padding: var(--s2) var(--s3); font-size: var(--t-sec); line-height: 1.4; color: var(--testo); overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--att) 12%, var(--sup)); border-left: 3px solid var(--att); border-radius: var(--r-riga); }
.scheda .scheda-avviso { margin: 0; }
.pz-appr.da-completare .pz-appr-azioni { flex-wrap: wrap; }
.pz-appr.da-completare .pz-appr-azioni > button:not(.pz-piu) { padding: 0 10px; gap: 4px; }
.pz-tasto-appr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); color: var(--testo); background: var(--rilievo);
  border: 1px solid var(--linea); border-radius: var(--r-riga); font: inherit; font-size: var(--t-sec); font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: opacity 80ms var(--uscita); }
.pz-tasto-appr:active, .pz-piu:active, .pz-spunta:active { opacity: .7; }
.pz-tasto-appr.neutro { color: var(--sfondo); background: var(--testo); border-color: var(--testo); }
.pz-tasto-appr.principale { color: var(--su-accento); background: var(--accento); border-color: var(--accento); }
.pz-tasto-appr:disabled { opacity: .5; cursor: default; }
.pz-tasto-appr:focus-visible, .pz-piu:focus-visible, .pz-spunta:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.pz-icona-tasto .icona { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pz-piu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: auto; margin-left: calc(var(--s2) * -1); color: var(--tenue); background: none; border: 0; border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; }
.pz-piu .icona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-spunta { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--su-accento); background: none; border: 1.75px solid var(--tenue); border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; }
.pz-spunta.si { background: var(--ok); border-color: var(--ok); color: var(--sfondo); }
.pz-spunta .icona { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pz-barra-azioni { position: fixed; left: 0; right: 0; bottom: calc(var(--sotto-menu) + var(--tastiera)); z-index: 14; display: flex; gap: var(--s2); max-width: 430px; margin: 0 auto;
  padding: var(--s3) var(--s4); background: var(--sfondo); border-top: 1px solid var(--linea); }
.pz-barra-azioni .pz-tasto-appr { flex: 1; }
.pz-riga-testo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); color: var(--tenue); background: none; border: 0; font: inherit; font-size: var(--t-sec); cursor: pointer; touch-action: manipulation; }
.pz-riga-testo-link.forte { color: var(--testo); font-weight: 600; }
.pz-rimandate { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 var(--s2); font-size: var(--t-sec); color: var(--tenue); }
.pie-lista { margin: var(--s2) var(--s1) 0; font-size: var(--t-det); line-height: 1.4; color: var(--tenue); }
.pz-azioni-testa { display: flex; align-items: center; }

/* ---------- Diario (linea premium, ondata 3): la parte fissa, i giorni appiccicati, la frase con i nomi in grassetto ---------- */
.pz-fissa { position: sticky; top: 0; z-index: 10; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); background: var(--sfondo); }
.pz-fissa .pz-testa { padding: var(--s2) 0 var(--s1); }
.pz-compatta-riga { display: none; align-items: baseline; gap: var(--s3); min-height: 44px; padding: var(--s2) 92px 0 0; }
.pz-compatta-nome { font-family: var(--titoli); font-weight: 800; font-size: var(--t-testo); letter-spacing: -0.02em; }
.pz-compatta-conto { font-size: var(--t-sec); color: var(--tenue); }
.pz-fissa.compatta .pz-testa { display: none; }
.pz-fissa.compatta .pz-compatta-riga { display: flex; }
.pz-barra-filtri { display: flex; align-items: center; gap: var(--s1); }
.pz-barra-filtri .pz-pillole { flex: 1; min-width: 0; margin: 0; padding-left: 0; padding-right: var(--s4); }
.pz-ricerca-riga { padding: var(--s1) 0 var(--s2); }
.pz-lente { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: calc(var(--s2) * -1); color: var(--testo); background: none; border: 0; border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-lente:active { opacity: .7; }
.pz-lente .icona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-lente:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; }
.pz-da-guardare { margin: var(--s3) var(--s1) var(--s2); }
.pz-giorno { position: sticky; top: var(--alto-fissa, 0px); z-index: 9; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 calc(var(--s4) * -1); padding: var(--s3) calc(var(--s4) + var(--s1)) var(--s2); background: var(--sfondo); }
.pz-giorno-nome { margin: 0; font-family: var(--titoli); font-weight: 800; font-size: var(--t-card); line-height: 1.2; letter-spacing: -0.02em; }
.pz-diario .pz-riga-nota { white-space: normal; overflow: visible; text-overflow: clip; }
.pz-sottogiorno { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s1) var(--s1); }
.pz-sottogiorno-nome { margin: 0; font-weight: 600; font-size: var(--t-testo); line-height: 1.2; color: var(--tenue); }
.pz-giorno-conto { flex: none; font-size: var(--t-det); color: var(--tenue); white-space: nowrap; }
.pz-frase { font-weight: 400; }
.pz-frase strong { font-weight: 600; }
.pz-carica-altre { display: flex; margin: var(--s4) auto 0; }

/* ---------- Posta (linea premium, ondata 4): la mail, la scelta in un foglio ---------- */
.pz-mail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); width: 100%; min-height: 52px; padding: var(--s3) var(--s4); text-align: left; font: inherit; color: inherit;
  background: none; border: 0; text-decoration: none; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 80ms var(--uscita); }
.pz-mail + .pz-mail::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; border-top: 1px solid var(--linea); }
.pz-mail:active { opacity: .7; }
.pz-mail:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; }
.pz-mail-testi { display: grid; min-width: 0; gap: 1px; }
.pz-mail-da { font-weight: 600; font-size: var(--t-testo); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mail-da span { font-weight: 400; font-size: var(--t-det); color: var(--tenue); }
.pz-mail-oggetto { font-size: var(--t-testo); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mail-prima { font-size: var(--t-sec); line-height: 1.35; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mail-lato { display: grid; justify-items: end; align-content: start; gap: 6px; padding-top: 2px; font-size: var(--t-det); color: var(--tenue); white-space: nowrap; }
.oggi-arrivata + .oggi-arrivata { border-top: 1px solid var(--linea); }
.oggi-arrivata .pz-mail { padding-bottom: var(--s2); }
.oggi-arrivata .pz-mail-oggetto { white-space: normal; }
.oggi-arrivata-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); padding: 0 var(--s4) var(--s3); }
.pz-punto { display: block; width: 8px; height: 8px; border-radius: var(--r-pillola); background: var(--accento); }
.pz-pillola-menu .icona { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-scelte { max-height: 56vh; overflow-y: auto; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); -webkit-overflow-scrolling: touch; }
.pz-scelta { grid-template-columns: minmax(0, 1fr) auto; text-align: left; }
.pz-scelta-testi { display: grid; min-width: 0; }
.pz-scelta-nota { font-size: var(--t-det); font-weight: 400; color: var(--tenue); }
.pz-cerchietto { width: 22px; height: 22px; border: 2px solid var(--tenue); border-radius: var(--r-pillola); }
.pz-scelta.attiva .pz-cerchietto { border-color: var(--testo); background: radial-gradient(var(--testo) 0 45%, transparent 50%); }

/* ---------- Notifiche e Aspetto (linea premium, ondata 5): interruttori, scelte, miniature, riordino ---------- */
.pz-eti { margin: var(--s5) var(--s1) var(--s2); font-size: var(--t-eti); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.pz-eti-doppia { display: flex; justify-content: space-between; gap: var(--s3); }
.pz-eti-destra { font-weight: 400; letter-spacing: 0; text-transform: none; }
.pz-int { position: relative; flex: none; width: 51px; height: 31px; border-radius: var(--r-pillola); background: color-mix(in srgb, var(--tenue) 45%, transparent); }
.pz-int::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--r-pillola); background: var(--sfondo); transition: transform var(--mov-breve) var(--uscita); }
.pz-int.acceso { background: var(--ok); }
.pz-int.acceso::after { transform: translateX(20px); background: var(--sup); }
.pz-riga[role="switch"] .pz-int { grid-column: 3 / span 2; justify-self: end; }
.pz-notifica { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); background: var(--rilievo); border: 1px solid var(--linea); border-radius: var(--r-card); }
.pz-notifica-app { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--accento); color: var(--su-accento); font-family: var(--titoli); font-weight: 800; }
.pz-notifica-testi { display: grid; font-size: var(--t-sec); line-height: 1.35; }
.pz-notifica-testi strong { font-weight: 600; }
.pz-notifica-ora { font-size: var(--t-det); color: var(--tenue); }
.pz-form-riga { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4) var(--s3); border-top: 1px solid var(--linea); }
.pz-campo-mail { flex: 1; min-width: 0; padding: 0 var(--s3); background: var(--rilievo); border: 1px solid var(--linea); border-radius: var(--r-riga); }

.pz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); padding: var(--s1); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-seg-voce { min-height: 44px; padding: 0 var(--s2); color: var(--tenue); background: none; border: 0; border-radius: 8px; font: inherit; font-size: var(--t-sec); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-seg-voce.attiva { color: var(--testo); background: var(--rilievo); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linea); }
.pz-seg-voce:active { opacity: .7; }

.pz-anteprima { padding: var(--s3); }
.pz-mini { display: grid; gap: var(--s2); padding: var(--s3); color: var(--testo); background: var(--sfondo); border: 1px solid var(--linea); border-radius: var(--r-card); }
.pz-mini-nome { font-family: var(--titoli); font-weight: 800; font-size: var(--t-det); }
.pz-mini-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pz-mini-tessera { display: grid; gap: 2px; align-content: start; min-height: 62px; padding: var(--s2) var(--s3); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-mini-tessera.urgente { border-left: 3px solid var(--accento); }
.pz-mini-tessera b { font-family: var(--titoli); font-weight: 800; font-size: var(--t-eti); }
.pz-mini-tessera span { font-size: var(--t-det); color: var(--tenue); }
.pz-mini-menu { display: flex; justify-content: space-around; padding-top: var(--s2); border-top: 1px solid var(--linea); font-size: var(--t-eti); color: var(--tenue); }
.pz-mini-menu .su { color: var(--testo); font-weight: 600; }
.pz-temi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pz-tema { display: grid; gap: var(--s2); min-width: 0; padding: var(--s2); color: var(--testo); background: var(--sup); border: 1.5px solid var(--linea); border-radius: var(--r-card); font: inherit; cursor: pointer; touch-action: manipulation; text-align: center; -webkit-tap-highlight-color: transparent; }
.pz-tema.attivo { border-color: var(--testo); }
.pz-tema:active { opacity: .7; }
.pz-tema .pz-mini { gap: var(--s1); padding: var(--s2); pointer-events: none; }
.pz-tema .pz-mini-nome { font-size: var(--t-eti); }
.pz-tema .pz-mini-griglia { grid-template-columns: 1fr; }
.pz-tema .pz-mini-tessera:nth-child(n + 2) { display: none; }
.pz-tema .pz-mini-tessera { min-height: 0; padding: 6px var(--s2); }
.pz-tema .pz-mini-tessera b { font-size: var(--t-eti); line-height: 1.2; }
.pz-tema .pz-mini-tessera span { display: none; }
.pz-tema-nome { font-size: var(--t-sec); }
.pz-tema.attivo .pz-tema-nome { font-weight: 600; }
.pz-tema-auto { position: relative; border-radius: var(--r-card); overflow: hidden; }
.pz-tema-meta.chiaro { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.pz-tema-meta .pz-mini { height: 100%; border-radius: 0; }
.pz-colori { display: flex; gap: var(--s1); padding: var(--s3) var(--s1); }
.pz-colore { position: relative; flex: 1; min-width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-colore::before { content: ""; position: absolute; inset: 4px; border-radius: var(--r-pillola); background: var(--c); }
.pz-colore.libero::before { content: none; }
.pz-colore.libero { display: block; border-radius: var(--r-pillola); background-clip: content-box; padding: 4px; }
.pz-colore.scelto::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--testo); border-radius: var(--r-pillola); }
.pz-colore:active { opacity: .7; }
.pz-colore-libero { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pz-ordinabile { display: grid; }
.pz-ordina { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s1); padding-left: var(--s1); }
.pz-ordina.trascinata { z-index: 5; background: var(--rilievo); box-shadow: var(--ombra); transition: none; }
.pz-ordina:not(.trascinata) { transition: transform var(--mov-breve) var(--uscita); }
.pz-maniglia { display: grid; place-items: center; width: 44px; height: 44px; margin-left: calc(var(--s1) * -1); color: var(--tenue); background: none; border: 0; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pz-maniglia .icona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-maniglia:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; border-radius: var(--r-riga); }
.pz-interruttore-solo { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-interruttore-solo:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; border-radius: var(--r-pillola); }
.pz-da-rifare { display: grid; gap: var(--s2); }
.pz-errore-fine { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 var(--s4) var(--s3); font-size: var(--t-det); color: var(--tenue); }
.pz-errore-fine .pz-errore-riprova { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .pz-int, .pz-int::after, .pz-ordina:not(.trascinata) { transition: none; }
}

/* ---------- Procedure guidate e moduli (Google, Il tuo Brandon): un passo per schermata ---------- */
.pz-google, .pz-brandon { display: grid; gap: var(--s3); align-content: start; }
.pz-spiega { margin: 0 var(--s1); font-size: var(--t-sec); line-height: 1.5; color: var(--tenue); }
.pz-link { margin: 0 var(--s1); font-size: var(--t-sec); color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
.pz-tasto { display: grid; place-items: center; min-height: 48px; padding: 0 var(--s5); color: var(--su-accento); background: var(--accento); border: 0; border-radius: var(--r-riga); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-tasto:active { opacity: .7; }
.pz-tasto:disabled { color: var(--tenue); background: var(--rilievo); cursor: default; opacity: 1; }
.pz-tasto-sec { color: var(--testo); background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea); }
/* Il risultato di «Prova la casella»: una barra di colore a sinistra (verde se risponde, arancione se no), la causa e sotto cosa fare. */
/* Altro → Primo giorno: il riquadro in cima finché mancano cose (nasce nascosto e compare quando il programma risponde). */
.pz-primo-giorno { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.pz-primo-giorno[hidden] { display: none; }
.pz-primo-giorno > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
.pz-primo-giorno .pz-card { margin-bottom: 0; }
.pz-primo-giorno .pz-riga-nota { white-space: normal; }
.pz-esito-prova { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--sup); border: 1px solid var(--linea); border-left: 4px solid var(--att); border-radius: var(--r-riga); overflow-wrap: anywhere; }
.pz-esito-prova.ok { border-left-color: var(--ok); }
.pz-esito-titolo { margin: 0; font-weight: 600; line-height: 1.35; }
.pz-esito-passo { margin: 0; font-size: var(--t-sec); line-height: 1.45; color: var(--tenue); }

.pz-campo-riga { display: grid; gap: var(--s1); padding: 0 var(--s1); font-size: var(--t-sec); }
.pz-campo { min-height: 48px; padding: 0 var(--s3); color: var(--testo); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); font: inherit; font-size: 1rem; }
.pz-campo:focus-visible { outline: 2px solid var(--testo); outline-offset: 1px; }
.pz-aiuto { font-size: var(--t-det); line-height: 1.4; color: var(--tenue); }
.pz-riga-azione { display: grid; }
.pz-riga-azione > .pz-pillola-tasto, .pz-riga-azione > .pz-inviata { justify-self: end; margin: calc(var(--s1) * -1) var(--s4) var(--s3) 0; }
.pz-riga-azione > .pz-riga { padding-right: 0; }
.pz-pillola-tasto { min-height: 44px; padding: 0 var(--s4); color: var(--testo); background: none; border: 1px solid var(--linea); border-radius: var(--r-pillola); font: inherit; font-size: var(--t-sec); font-weight: 600; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-pillola-tasto:active { opacity: .7; }
.pz-pillola-tasto:disabled { color: var(--tenue); cursor: default; }
.pz-inviata { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font-size: var(--t-sec); color: var(--tenue); white-space: nowrap; }
.pz-inviata-icona .icona { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pz-foglio-modulo { display: grid; gap: var(--s3); }
.pz-foglio-messaggio { margin: 0; font-size: var(--t-sec); color: var(--tenue); }
.pz-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.pz-logo-anteprima { max-height: 48px; width: auto; justify-self: start; border-radius: 8px; }

.pz-brandon .pz-riga-nota, .pz-google .pz-riga-nota { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
.pz-gruppi, .pz-risultati { margin-top: var(--s3); }
.pz-gruppi[hidden] { display: none; }

/* ---------- Impostazioni (Silenzio, Priorità, Voce, Budget, Passkey): righe con il valore a destra ---------- */
.pz-impostazione { display: grid; gap: var(--s3); align-content: start; }
.pz-modulo { display: grid; gap: var(--s3); }
.pz-riga-campo { justify-content: space-between; cursor: pointer; }
.pz-campo-destra { flex: none; width: 7.5rem; min-height: 44px; padding: 0 var(--s2); color: var(--testo); background: none; border: 0; font: inherit; font-size: var(--t-testo); text-align: right; }
.pz-campo-destra:focus-visible { outline: 2px solid var(--testo); outline-offset: -2px; border-radius: var(--r-riga); }
.pz-campo-destra::placeholder { color: var(--tenue); }
.pz-campo-regola { min-height: 96px; padding: var(--s3); resize: vertical; }
.pz-avanzamento-blocco { display: grid; gap: var(--s2); padding: 0 var(--s1); }
.pz-avanzamento-blocco[hidden] { display: none; }
.pz-avanzamento { height: 6px; overflow: hidden; border-radius: var(--r-pillola); background: var(--linea); }
.pz-avanzamento-riempita { height: 100%; border-radius: var(--r-pillola); background: var(--ok); }
.pz-avanzamento-blocco .pz-spiega { margin: 0; }
.pz-testo-resoconto { margin: 0 var(--s1); color: var(--testo); }

/* ---------- Rubrica: iniziali, indice A-Z, scheda della persona ---------- */
.pz-iniziali { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-pillola); color: var(--testo); background: var(--rilievo); box-shadow: inset 0 0 0 1px var(--linea); font-family: var(--titoli); font-weight: 800; font-size: var(--t-det); letter-spacing: -.02em; }
.pz-iniziali.grande { width: 72px; height: 72px; font-size: var(--t-testo); }
/* La foto nel cerchio (3/11/2026): riempie il cerchio, ritagliata al centro; senza foto restano le iniziali. */
.pz-iniziali { position: relative; overflow: hidden; }
.pz-iniziali img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-iniziali.con-foto { background: var(--rilievo); }
.pz-foto-anteprima { display: grid; place-items: center; padding: var(--s2) 0; }
.pz-foto-anteprima:empty { display: none; }
.pz-foto-anteprima .pz-iniziali.grande { width: 132px; height: 132px; font-size: var(--t-titolo, 28px); }
.pz-foto-tasto { position: relative; flex: none; display: grid; padding: 0; color: inherit; background: none; border: 0; border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-foto-tasto:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
.pz-foto-segno { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; color: var(--su-accento); background: var(--accento); border-radius: var(--r-pillola); box-shadow: 0 0 0 2px var(--sfondo); }
.pz-foto-segno svg { width: 14px; height: 14px; }
.pz-persona { grid-template-columns: 36px minmax(0, 1fr) auto auto; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.pz-persona + .pz-persona::before { left: calc(var(--s4) + 36px + var(--s3)); }
.pz-persona .pz-iniziali { width: 36px; height: 36px; font-size: var(--t-eti); }
.pz-persona .pz-riga-testi { gap: 0; }
.pz-persona.spenta { opacity: .6; }
.pz-lettera { scroll-margin-top: var(--s5); }
.pz-rubrica { position: relative; }
.pz-indice { position: fixed; top: 50%; right: 2px; z-index: 6; display: grid; transform: translateY(-50%); }
.pz-indice-lettera { min-width: 22px; min-height: 18px; padding: 0; color: var(--tenue); background: none; border: 0; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.pz-scheda-capo { display: flex; align-items: center; gap: var(--s2); }
.pz-scheda-azienda { min-width: 0; margin: 0; font-size: var(--t-sec); color: var(--tenue); overflow-wrap: anywhere; }
.pz-scheda-tasti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 380px) { .pz-indice { display: none; } }
.pz-impostazione > *, .pz-google > *, .pz-brandon > * { min-width: 0; }
a.pz-tasto { text-decoration: none; }
.pz-scheda-tasti { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ---------- Agenda: la striscia della settimana e la lista del giorno ---------- */
.pz-mese-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.pz-mese { font-family: var(--titoli); font-weight: 800; font-size: var(--t-testo); }
.pz-mese-comandi { display: flex; align-items: center; gap: var(--s1); }
.pz-freccia { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--testo); background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-freccia:disabled { color: var(--tenue); opacity: .4; cursor: default; }
.pz-freccia:active:not(:disabled) { opacity: .7; }
.pz-freccia .icona { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); touch-action: pan-y; }
.pz-sg { display: grid; justify-items: center; gap: 2px; min-height: 72px; padding: var(--s2) 0; color: var(--testo); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-sg:active { opacity: .7; }
.pz-sg-sigla { font-size: var(--t-eti); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.pz-sg-numero { font-family: var(--titoli); font-weight: 800; font-size: var(--t-testo); }
.pz-sg.oggi .pz-sg-numero { color: var(--accento); }
.pz-sg.scelto { color: var(--sfondo); background: var(--testo); border-color: var(--testo); }
.pz-sg.scelto .pz-sg-sigla, .pz-sg.scelto.oggi .pz-sg-numero { color: inherit; }
.pz-sg-punto { width: 6px; height: 6px; border-radius: var(--r-pillola); background: none; }
.pz-sg-punto.pieno { background: var(--tenue); }
.pz-sg.scelto .pz-sg-punto.pieno { background: currentColor; }
.pz-evento { display: grid; grid-template-columns: 4.5rem 4px minmax(0, 1fr); gap: var(--s3); align-items: stretch; padding: var(--s3) var(--s4); }
.pz-evento + .pz-evento { border-top: 1px solid var(--linea); }
.pz-evento-ora { display: grid; align-content: start; gap: 2px; font-size: var(--t-sec); font-weight: 600; }
.pz-evento-fine { font-weight: 400; color: var(--tenue); }
.pz-evento-barra { border-radius: var(--r-pillola); background: var(--tenue); }
.pz-evento-barra.meet { background: var(--ok); }
.pz-evento-barra.luogo { background: var(--att); }
.pz-evento .pz-riga-testi { display: grid; gap: 2px; }
.pz-evento .pz-riga-nota { white-space: normal; }

/* ---------- Ragioniamo: i fili come note, il filo con le schede «Brandon ha trovato» e «Tocca e parla» ---------- */
.pz-nota { display: grid; gap: var(--s2); padding: var(--s4); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pz-nota + .pz-nota { border-top: 1px solid var(--linea); }
.pz-nota:active { opacity: .7; }
.pz-nota.chiusa { opacity: .75; }
.pz-nota-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pz-nota-titolo { font-family: var(--titoli); font-weight: 800; font-size: var(--t-testo); line-height: 1.25; }
.pz-nota-ora { flex: none; font-size: var(--t-sec); color: var(--tenue); }
.pz-nota-testo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-sec); line-height: 1.45; color: var(--tenue); }
.pz-nota-etichette { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pz-etichetta { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; padding: 0 var(--s3); font-size: var(--t-det); color: var(--tenue); border: 1px solid var(--linea); border-radius: var(--r-pillola); }
.pz-etichetta.ric { color: var(--accento); border-color: var(--accento); }
.pz-etichetta-punto { width: 6px; height: 6px; border-radius: var(--r-pillola); background: var(--accento); }
.pz-fab { position: fixed; right: var(--s4); bottom: calc(var(--sotto-menu) + var(--tastiera) + var(--s4)); z-index: 12; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; color: var(--su-accento); background: var(--accento); border: 0; border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-fab:active { opacity: .7; }
.pz-fab .icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pz-filo-pagina { display: grid; gap: var(--s3); align-content: start; }
.pz-filo-colonne { display: grid; gap: var(--s4); align-content: start; }
.pz-filo-pagina .filo { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.pz-trovato { display: grid; gap: var(--s2); min-width: 0; }
.pz-trovato[hidden] { display: none; }
.pz-schede-trovate { display: flex; gap: var(--s3); overflow-x: auto; margin: 0 calc(var(--s4) * -1) 0 0; padding: 0 var(--s4) var(--s2) 0; scroll-snap-type: x proximity; scrollbar-width: none; }
.pz-schede-trovate::-webkit-scrollbar { display: none; }
.pz-scheda-trovata { flex: none; display: grid; gap: var(--s3); width: min(82%, 20rem); padding: var(--s4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); scroll-snap-align: start; }
/* Il capo della scheda «Brandon ha trovato» (non quello della persona in Rubrica e del cliente, che hanno lo stesso nome di classe: l'email e il referente uscivano in maiuscolo spaziato). */
.pz-scheda-trovata .pz-scheda-capo { margin: 0; font-size: var(--t-eti); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.pz-scheda-icona .icona { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-scheda-ok { display: grid; place-items: center; margin-left: auto; width: 24px; height: 24px; color: var(--sfondo); background: var(--ok); border-radius: var(--r-pillola); }
.pz-scheda-ok .icona { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pz-scheda-testo { margin: 0; font-size: var(--t-testo); line-height: 1.4; }
.pz-scheda-tasti { display: flex; align-items: center; gap: var(--s2); }
.pz-scheda-tasto { min-height: 44px; padding: 0 var(--s4); color: var(--testo); background: none; border: 1px solid var(--linea); border-radius: var(--r-riga); font: inherit; font-size: var(--t-sec); font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-scheda-tasto:active { opacity: .7; }
.pz-scheda-tasto.scarta { margin-left: auto; color: var(--pericolo); }
.pz-scheda-nota { font-size: var(--t-sec); color: var(--tenue); }
.pz-filo-fondo { display: grid; justify-items: center; gap: var(--s2); padding: var(--s3) 0 var(--s4); }
.pz-mic { display: grid; place-items: center; width: 88px; height: 88px; padding: 0; color: var(--su-accento); background: var(--accento); border: 0; border-radius: var(--r-pillola); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-mic:active { opacity: .7; }
.pz-mic:disabled { opacity: .4; cursor: default; }
.pz-mic.ascolta { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accento) 25%, transparent); }
.pz-mic .icona { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-mic-testo { margin: 0; font-size: var(--t-sec); color: var(--tenue); }
.pz-link-tasto { min-height: 44px; padding: 0 var(--s3); color: var(--tenue); background: none; border: 0; font: inherit; font-size: var(--t-sec); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pz-scrivi { display: grid; gap: var(--s2); width: 100%; }
.pz-scrivi[hidden], .pz-filo-fondo[hidden] { display: none; }
.pz-campo-filo { min-height: 72px; padding: var(--s3); resize: vertical; }
/* Le bolle del filo nello stile premium: neutre, le tue a destra e più strette, quelle di Brandon a sinistra; il nome sta nel piede. */
.pz-filo-pagina .bolla { max-width: 86%; padding: var(--s3) var(--s4); color: var(--testo); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); }
.pz-filo-pagina .bolla.tu { justify-self: end; background: var(--rilievo); }
.pz-filo-pagina .bolla.brandon { justify-self: start; }
.pz-filo-pagina .bolla-chi { display: none; }
.pz-filo-pagina .bolla-testo { margin: 0; font-size: var(--t-testo); line-height: 1.45; }
.pz-filo-pagina .bolla-ora { display: block; margin-top: var(--s1); font-size: var(--t-det); color: var(--tenue); }
.pz-filo-pagina .bolla.brandon .bolla-ora::before { content: "Brandon · "; }
.pz-fili { padding-bottom: calc(56px + var(--s5)); }
@media (min-width: 1280px) {
  .pz-filo-colonne { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "conv scheda" "fondo scheda"; align-items: start; }
  .pz-filo-colonne > .filo { grid-area: conv; }
  .pz-filo-colonne > .pz-filo-fondo { grid-area: fondo; }
  .pz-filo-colonne > .pz-trovato { grid-area: scheda; }
  .pz-trovato { position: sticky; top: var(--s4); }
  .pz-schede-trovate { display: grid; overflow: visible; margin: 0; padding: 0; }
  .pz-scheda-trovata { width: auto; }
}

/* ---------- Social: la coda a colonne per stato, i pezzi, il calendario dei sette giorni ---------- */
.pz-colonna { display: none; min-width: 0; }
.pz-colonna.aperta { display: block; }
.pz-pezzi { display: grid; gap: var(--s2); }
.pz-pezzo { display: grid; gap: var(--s2); width: 100%; padding: var(--s4); color: var(--testo); text-align: left; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-pezzo:active { opacity: .7; }
.pz-pezzo .pz-riga-nota { white-space: normal; }
.pz-sg.vuoto { border-color: var(--att); }
.pz-sg.vuoto .pz-sg-punto { background: var(--att); }
.pz-pillole-social { min-width: 0; }
@media (min-width: 1100px) {
  .pz-pillole-social { display: none; }
  .pz-colonne { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: var(--s4); overflow-x: auto; align-items: start; }
  .pz-colonna { display: block; }
}
.pz-settimana-costi .pz-riga-testi { display: grid; gap: var(--s2); }
.pz-avanzamento-riempita.allarme { background: var(--att); }

/* ---------- Chat: le schede da approvare nel filo nello stile della linea (come «Da approvare») ---------- */
.filo .scheda { gap: var(--s3); padding: var(--s4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); }
.filo .scheda-testa { font-size: var(--t-eti); font-weight: 600; letter-spacing: .08em; }
.filo .scheda-titolo { font-family: var(--titoli); font-weight: 800; font-size: var(--t-testo); line-height: 1.3; }
.filo .scheda-testo { padding: var(--s3); font-size: var(--t-sec); line-height: 1.45; background: var(--sfondo); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.filo .scheda-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filo .scheda-azioni .pulsante { min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-riga); font-size: var(--t-sec); font-weight: 600; }
.filo .scheda .avviso:empty { display: none; }

/* ---------- Pacchetto e preventivo: il riepilogo dei totali resta in vista mentre scegli le voci ---------- */
.pz-riepilogo { position: sticky; top: 0; z-index: 8; display: grid; gap: var(--s2); padding: var(--s3) 0; background: var(--sfondo); }
.pz-card-voci .pz-riga-nota { white-space: normal; }

/* ---------- Chat: le bolle neutre e il campo per scrivere nello stile della linea (come nel filo di Ragioniamo) ---------- */
.filo { gap: var(--s3); }
.filo .bolla { max-width: 86%; padding: var(--s3) var(--s4); color: var(--testo); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-card); }
.filo .bolla.tu { align-self: flex-end; background: var(--rilievo); color: var(--testo); border-color: var(--linea); }
.filo .bolla.brandon { align-self: flex-start; }
.filo .bolla.coda { border-style: dashed; }
.filo .bolla-chi { display: none; }
.filo .bolla-testo { font-size: var(--t-testo); line-height: 1.45; }
.filo .bolla-ora { margin-top: var(--s1); font-size: var(--t-det); color: var(--tenue); opacity: 1; }
.filo .bolla.brandon .bolla-ora::before { content: "Brandon · "; }
.giorno-filo { font-size: var(--t-det); letter-spacing: .04em; }
.scrivi-fondo { padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--linea); }
/* Il campo di scrittura sta sempre in fondo allo schermo, anche con la Chat vuota o corta (prima stava sotto l'ultimo messaggio e scendeva man mano che ne arrivavano: lo schermo «saltava»).
   Il -20px rimette il campo dove lo tiene fermo il suo sticky (la schermata ha 20 px di fiato sotto), così non si sposta quando la pagina comincia a scorrere. */
@media (max-width: 899px) {
  body[data-schermata="chat"] .schermata { display: flex; flex-direction: column; }
  body[data-schermata="chat"] .filo { flex: 1 0 auto; }
  body[data-schermata="chat"] .scrivi-fondo { flex: none; margin-bottom: -20px; z-index: 2; }
  /* Sotto il campo, fino al fondo dello schermo, lo sfondo pieno: con la barra «Isola» staccata dai bordi i messaggi si vedevano scorrere tra il
     campo e la barra (Eros 3/11). */
  body[data-schermata="chat"] .scrivi-fondo::after { content: ''; position: absolute; left: -16px; right: -16px; top: 100%; height: calc(var(--sotto-menu) + 24px); background: var(--sfondo); pointer-events: none; }
}
/* Mentre scrivi una nota dentro una scheda (Modifica) il campo di scrittura si nasconde (resta al suo posto): il telefono porta la nota sopra la tastiera, e il campo fisso la coprirebbe. */
body.tastiera-aperta:has(.filo :is(textarea, input):focus) .scrivi-fondo { visibility: hidden; }
.scrivi { gap: var(--s2); }
.scrivi textarea { min-height: 44px; padding: 10px var(--s3); font-size: var(--t-testo); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.scrivi .pulsante { min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-riga); font-size: var(--t-sec); font-weight: 600; touch-action: manipulation; }
.pz-azioni-testa .pz-seleziona { min-height: 44px; padding: 0 var(--s4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-pillola); }
.pz-azioni-testa .pz-seleziona:active { opacity: .7; }

/* ---------- Copie (Altro → Copie, solo nel Brandon di Hold My Brand): la barra della spesa e l'esito ---------- */
.pz-copia-barra { padding: 0 var(--s4) var(--s3); }
.pz-copia-esito { margin: 0; min-width: 0; }

/* ---------- Copie, la copia aperta (Altro → Copie, docs/app/2026-11-03-copie-comandi.md): la frase, l'aggiornamento, il foglio «cosa cambia» ---------- */
.pz-copie { gap: var(--s3); }
.pz-copia-frase { display: block; margin: 0 var(--s1); font-size: var(--t-testo); line-height: 1.5; }
.pz-copia-frase strong { font-weight: 600; }
.pz-copia-punto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: var(--r-pillola); background: var(--tenue); vertical-align: 1px; }
.pz-copia-ok .pz-copia-punto { background: var(--ok); }
.pz-copia-att .pz-copia-punto { background: var(--att); }
.pz-copia-esito:empty { display: none; }
.pz-aggiorna { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: color-mix(in srgb, var(--att) 10%, var(--sup)); border: 1px solid color-mix(in srgb, var(--att) 35%, transparent); border-radius: var(--r-card); font-size: var(--t-sec); }
.pz-aggiorna-testi { display: grid; min-width: 0; }
.pz-aggiorna small { color: var(--tenue); font-size: var(--t-det); overflow-wrap: anywhere; }
.pz-aggiorna .pz-pillola-tasto { flex: none; min-height: 40px; }
.pz-copia-sezione { margin: var(--s4) var(--s1) 0; font-size: var(--t-det); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.pz-copia-guardare .pz-riga-titolo { font-size: var(--t-sec); font-weight: 500; }
.pz-cosa { display: grid; margin: 0; padding: 0; list-style: none; background: var(--sfondo); border: 1px solid var(--linea); border-radius: var(--r-riga); }
.pz-cosa li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s2); padding: 10px var(--s3); font-size: var(--t-sec); line-height: 1.4; }
.pz-cosa li + li { border-top: 1px solid var(--linea); }
.pz-cosa .icona { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--tenue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pz-cosa-ok .icona { stroke: var(--ok); }
.pz-copia-azioni { display: flex; gap: var(--s2); }
.pz-foglio-modulo .pz-cosa { margin-bottom: var(--s1); }

/* ---------- Computer: quello che si tocca si accende passandoci sopra col mouse (sul telefono niente: resterebbe acceso dopo il tocco) ---------- */
@media (hover: hover) and (pointer: fine) {
  .voce-menu:hover:not([aria-current="page"]) { color: var(--testo); background: color-mix(in srgb, var(--testo) 5%, transparent); }
  .pz-riga.pz-tocco:hover, .pz-azione:hover:not(.pz-verbo), .pz-mail:hover, .pz-pezzo:hover, .pz-nota:hover { background: color-mix(in srgb, var(--testo) 5%, transparent); }
  .pz-pillola:not(.attiva):hover::before, .pz-seg-voce:not(.attiva):hover { background: var(--rilievo); }
  .pz-indietro:hover, .indietro:hover, .collegamento:hover, .pz-link-tasto:hover { color: var(--testo); }
  .pulsante:hover:not(:disabled), .pz-tasto:hover:not(:disabled), .pz-tasto-appr:hover:not(:disabled), .pz-scheda-tasto:hover, .pz-pillola-tasto:hover:not(:disabled), .pz-fab:hover { filter: brightness(1.12); }
  .chip:not(.on):hover { color: var(--testo); border-color: var(--tenue); }
}