/* =====================================================================
   Asse v3 · COMPONENTI DI RIFERIMENTO
   Resa esatta dei componenti del design system (DESIGN_SYSTEM.md §6–§9).
   Caricare dopo marca.css e tokens.css. Classi `ui-*`; ogni componente
   porta anche `data-ui="<nome>"`, che lo script delle misure conta.
   Colori, caratteri, spazi di layout, raggi, durate e curve vengono solo dai token.
   Le misure interne di un componente (altezza di un chip, diametro di un punto,
   spessore di un contorno) sono scritte qui e valgono come specifica.
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--c-sfondo); color: var(--c-testo); font: var(--fw-normale) var(--fs-corpo) / var(--lh-testo) var(--f-testo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--c-link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
[hidden] { display: none !important; }   /* hidden vince sempre sul display dei componenti */
.ui-solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Contesto «sul palco»: dentro, i token prendono i valori del palco ---------- */
.su-palco {
  --c-testo: var(--c-testo-palco); --c-testo-2: var(--c-testo-palco-2); --c-testo-3: var(--c-testo-palco-2);
  --c-azione: var(--c-azione-palco); --c-azione-hover: var(--c-azione-palco-hover); --c-azione-premuto: var(--c-azione-palco);
  --c-su-azione: var(--c-su-azione-palco); --c-bordo: var(--c-bordo-palco); --c-bordo-forte: var(--c-testo-palco-2);
  --c-superficie-2: var(--c-incasso-palco); --c-fase-posa: var(--c-testo-palco); --c-fase-vuota: var(--c-traccia-palco);
  --c-focus: var(--c-focus-palco); --c-link: var(--c-testo-palco);
  color: var(--c-testo-palco);
}

/* ---------- Ruoli tipografici ---------- */
.t-protagonista { font: var(--fw-normale) var(--fs-protagonista) / var(--lh-stretta) var(--f-titoli); letter-spacing: var(--ls-protagonista); text-wrap: balance; }
.t-numero { font: var(--fw-leggero) var(--fs-numero) / 1 var(--f-titoli); letter-spacing: var(--ls-protagonista); font-variant-numeric: tabular-nums; }
.t-titolo-1 { font: var(--fw-normale) var(--fs-titolo-1) / var(--lh-titoli) var(--f-titoli); text-wrap: balance; }
.t-titolo-2 { font: var(--fw-normale) var(--fs-titolo-2) / var(--lh-titoli) var(--f-titoli); text-wrap: balance; }
.t-titolo-3 { font: var(--fw-forte) var(--fs-titolo-3) / var(--lh-titoli) var(--f-testo); }
.t-corpo { font-size: var(--fs-corpo); max-width: var(--testo-max); text-wrap: pretty; }
.t-secondario { font-size: var(--fs-secondario); color: var(--c-testo-2); }
.t-nota { font-size: var(--fs-nota); color: var(--c-testo-3); }
.t-occhiello { font: var(--fw-forte) var(--fs-nota) / 1.2 var(--f-testo); letter-spacing: var(--ls-maiuscoletto); text-transform: uppercase; color: var(--c-testo-3); }
.t-tempo { font: var(--fw-leggero) var(--fs-tempo) / 1 var(--f-testo); letter-spacing: var(--ls-protagonista); font-variant-numeric: tabular-nums; }
.t-unita { font: var(--fw-normale) 0.32em / 1 var(--f-testo); letter-spacing: 0; color: var(--c-testo-2); margin-left: 0.25em; }

/* ---------- Disposizione ---------- */
.ui-pagina { width: 100%; max-width: calc(var(--contenuto-max) + 2 * var(--margine)); margin-inline: auto; padding: calc(var(--sp-4) + var(--safe-t)) var(--margine) calc(var(--nav-h) + var(--safe-b) + var(--sp-9)); }
.ui-gruppi { display: grid; gap: var(--spazio-gruppi); }
.ui-pila { display: grid; gap: var(--spazio-elementi); }
.ui-pila--stretta { gap: var(--sp-1); }
.ui-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ui-fila--estremi { justify-content: space-between; flex-wrap: nowrap; }
.ui-contenitore { container-type: inline-size; }

/* ---------- Icona ---------- */
.ui-icona { width: var(--icona-m); height: var(--icona-m); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-icona--s { width: var(--icona-s); height: var(--icona-s); }
.ui-icona--l { width: var(--icona-l); height: var(--icona-l); }

/* =====================================================================
   AZIONI
   ===================================================================== */
.ui-pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-comando); padding: 0 var(--sp-6); border: 1.5px solid transparent; border-radius: var(--r-tondo);
  background: var(--c-azione); color: var(--c-su-azione); font: var(--fw-forte) var(--fs-corpo) / 1 var(--f-testo);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--m-istante) var(--e-standard), transform var(--m-istante) var(--e-standard), opacity var(--m-istante) var(--e-standard);
}
.ui-pulsante:active { transform: scale(0.97); background: var(--c-azione-premuto); }
.ui-pulsante:disabled, .ui-pulsante[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ui-pulsante[aria-busy="true"] { pointer-events: none; }
.ui-pulsante[aria-busy="true"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: ui-respiro var(--m-attesa) ease-in-out infinite; }
.ui-pulsante--grande { min-height: var(--h-comando-grande); padding: 0 var(--sp-7); }
.ui-pulsante--pieno { width: 100%; }
.ui-pulsante--secondario { background: transparent; color: var(--c-testo); border-color: var(--c-bordo-forte); }
.ui-pulsante--secondario:active { background: var(--c-superficie-2); }
.ui-pulsante--quieto { background: transparent; color: var(--c-azione); padding: 0 var(--sp-4); }
.ui-pulsante--quieto:active { background: var(--c-superficie-2); }
.ui-pulsante--pericolo { background: transparent; color: var(--c-errore); border-color: var(--c-errore); }
.ui-pulsante--pericolo:active { background: var(--c-errore-sfondo); }
.ui-pulsante--icona { width: var(--h-comando); min-width: var(--h-comando); padding: 0; background: transparent; color: var(--c-testo); }
.ui-pulsante--icona:active { background: var(--c-superficie-2); }
.ui-riproduci { display: inline-grid; place-items: center; width: var(--tocco-primario); height: var(--tocco-primario); border: 0; border-radius: 50%; background: var(--c-azione); color: var(--c-su-azione); cursor: pointer; transition: transform var(--m-istante) var(--e-standard); }
.ui-riproduci:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .ui-pulsante:hover:not(:disabled) { background: var(--c-azione-hover); }
  .ui-pulsante--secondario:hover:not(:disabled), .ui-pulsante--quieto:hover:not(:disabled), .ui-pulsante--icona:hover:not(:disabled) { background: var(--c-superficie-2); }
  .ui-pulsante--pericolo:hover:not(:disabled) { background: var(--c-errore-sfondo); }
  .ui-pulsante--compatto { min-height: var(--h-comando-compatto); padding: 0 var(--sp-5); font-size: var(--fs-secondario); }
}

/* Barra d'azione: l'azione primaria sta in basso, sempre nello stesso posto */
.ui-barra-azione {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--margine) calc(var(--sp-3) + var(--safe-b));
  background: var(--c-barra); -webkit-backdrop-filter: var(--sfocatura-barra); backdrop-filter: var(--sfocatura-barra); box-shadow: var(--om-barra);
}
.ui-barra-azione--sopra-nav { bottom: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--sp-3); }
.ui-barra-azione > .ui-pulsante:first-child { flex: 1; }
@media (min-width: 600px) {
  .ui-barra-azione, .ui-barra-azione--sopra-nav { position: sticky; bottom: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-xl); box-shadow: var(--om-foglio); }
  .ui-barra-azione > .ui-pulsante:first-child { flex: 0 1 320px; }
}

/* =====================================================================
   SCELTA
   ===================================================================== */
/* Tessera di scelta: una risposta = un tocco */
.ui-tessere { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.ui-tessere--colonna { grid-template-columns: 1fr; }
.ui-tessera {
  position: relative; display: grid; align-content: start; gap: var(--sp-1); min-height: 76px; padding: var(--sp-4);
  border: 1.5px solid var(--c-bordo); border-radius: var(--r-l); background: var(--c-superficie); color: var(--c-testo);
  text-align: left; cursor: pointer; transition: background-color var(--m-istante) var(--e-standard), border-color var(--m-istante) var(--e-standard), transform var(--m-istante) var(--e-standard);
}
.ui-tessera:active { transform: scale(0.98); }
.ui-tessera[aria-checked="true"], .ui-tessera[aria-pressed="true"] { background: var(--c-azione-tenue); border-color: var(--c-azione); color: var(--c-su-azione-tenue); }
.ui-tessera__titolo { font: var(--fw-forte) var(--fs-corpo) / 1.25 var(--f-testo); }
.ui-tessera__nota { font-size: var(--fs-secondario); color: var(--c-testo-2); }
.ui-tessera[aria-checked="true"] .ui-tessera__nota, .ui-tessera[aria-pressed="true"] .ui-tessera__nota { color: inherit; }
.ui-tessera .ui-etichetta { justify-self: start; margin-bottom: var(--sp-1); }
.ui-tessera__sagoma { width: 56px; height: 56px; margin-bottom: var(--sp-2); }
.ui-tessera--prezzo .ui-tessera__titolo { font: var(--fw-normale) var(--fs-titolo-1) / 1.1 var(--f-titoli); }

/* Etichetta; «Consigliata» è l'unico segno della proposta in tutta l'app */
.ui-etichetta { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px; padding: 0 var(--sp-3); border-radius: var(--r-tondo); background: var(--c-superficie-2); color: var(--c-testo-2); font: var(--fw-forte) var(--fs-nota) / 1 var(--f-testo); white-space: nowrap; }
/* v2: «Consigliata» porta il motivo («Per iniziare»); la parola «Consigliata:» resta ai lettori di schermo; data-ui="consigliata" */
.ui-etichetta--consigliata { max-width: 100%; padding-block: var(--sp-1); background: var(--c-azione-tenue); color: var(--c-su-azione-tenue); white-space: normal; line-height: 1.25; }   /* il motivo può andare a capo */
.ui-etichetta--consigliata::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-etichetta--mattina { background: var(--c-mattina-tenue); color: var(--c-mattina); }
.ui-etichetta--sera { background: var(--c-sera-tenue); color: var(--c-sera); }
.su-palco .ui-etichetta { background: var(--c-incasso-palco); color: var(--c-testo-palco); }

/* Segmenti: al massimo uno per schermata, 2–4 voci */
.ui-segmenti { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--sp-1); border-radius: var(--r-tondo); background: var(--c-superficie-2); }
.ui-segmenti > button { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-tondo); background: transparent; color: var(--c-testo-2); font: var(--fw-forte) var(--fs-secondario) / 1 var(--f-testo); cursor: pointer; transition: background-color var(--m-istante) var(--e-standard), color var(--m-istante) var(--e-standard); }
.ui-segmenti > button[aria-pressed="true"] { background: var(--c-rilievo); color: var(--c-testo); }

/* Chip di filtro: al massimo una riga per schermata; la riga scorre, la pagina no */
.ui-chip-riga { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scroll-padding-inline: var(--margine); }
.ui-chip-riga::-webkit-scrollbar { display: none; }
.ui-chip { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4); border: 1.5px solid transparent; border-radius: var(--r-tondo); background: var(--c-superficie-2); color: var(--c-testo); font: var(--fw-forte) var(--fs-secondario) / 1 var(--f-testo); white-space: nowrap; cursor: pointer; }
.ui-chip::after { content: ""; position: absolute; inset: -4px 0; }   /* bersaglio di 44 px */
.ui-chip[aria-pressed="true"] { background: var(--c-azione-tenue); border-color: var(--c-azione); color: var(--c-su-azione-tenue); }

/* Interruttore: tutta la riga è il bersaglio */
.ui-interruttore-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 60px; cursor: pointer; }
.ui-interruttore { position: relative; flex: none; width: 51px; height: 31px; appearance: none; -webkit-appearance: none; margin: 0; border-radius: var(--r-tondo); background: var(--c-bordo-forte); cursor: pointer; transition: background-color var(--m-entrata) var(--e-standard); }
.ui-interruttore::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--c-sfondo); transition: transform var(--m-entrata) var(--e-standard); }
.ui-interruttore:checked { background: var(--c-azione); }
.ui-interruttore:checked::before { transform: translateX(20px); }

/* Campo di testo */
.ui-campo { display: grid; gap: var(--sp-2); }
.ui-campo__etichetta { font: var(--fw-forte) var(--fs-secondario) / 1.3 var(--f-testo); }
.ui-campo__riga { position: relative; display: flex; align-items: center; }
.ui-campo__controllo { width: 100%; min-height: var(--h-comando-grande); padding: 0 var(--sp-4); border: 1.5px solid var(--c-bordo-forte); border-radius: var(--r-m); background: var(--c-superficie); color: var(--c-testo); font-size: var(--fs-corpo); transition: border-color var(--m-istante) var(--e-standard); }
.ui-campo__controllo::placeholder { color: var(--c-testo-2); opacity: 1; }
.ui-campo__controllo:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
.ui-campo__controllo[aria-invalid="true"] { border-color: var(--c-errore); }
.ui-campo__accessorio { position: absolute; right: var(--sp-1); }
.ui-campo__aiuto { font-size: var(--fs-nota); color: var(--c-testo-3); }
.ui-campo__errore { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-nota); color: var(--c-errore); }
.ui-campo--ricerca .ui-campo__controllo { border-color: transparent; border-radius: var(--r-tondo); background: var(--c-superficie-2); padding-left: var(--sp-9); }
.ui-campo--ricerca .ui-icona { position: absolute; left: var(--sp-4); color: var(--c-testo-2); pointer-events: none; }

/* Passo (− valore +) e cursore: al posto dei menu a tendina per numeri e durate */
.ui-passo { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1); border-radius: var(--r-tondo); background: var(--c-superficie-2); }
.ui-passo > button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-rilievo); color: var(--c-testo); cursor: pointer; display: grid; place-items: center; }
.ui-passo > output { min-width: 72px; text-align: center; font: var(--fw-forte) var(--fs-corpo) / 1 var(--f-testo); font-variant-numeric: tabular-nums; }
.ui-cursore { width: 100%; height: 44px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.ui-cursore::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-tondo); background: var(--c-superficie-3); }
.ui-cursore::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; border: 0; background: var(--c-azione); }
.ui-cursore::-moz-range-track { height: 6px; border-radius: var(--r-tondo); background: var(--c-superficie-3); }
.ui-cursore::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c-azione); }

/* =====================================================================
   PALCO E CORPO
   ===================================================================== */
.ui-palco { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-l); background: linear-gradient(180deg, var(--c-palco-alto), var(--c-palco) 72%); }
.ui-palco::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 85% at 12% 0%, var(--luce, var(--c-luce-neutra)), transparent 62%); }
.ui-palco[data-luce="mattina"] { --luce: var(--c-luce-mattina); }
.ui-palco[data-luce="sera"] { --luce: var(--c-luce-sera); }
.ui-palco[data-luce="sera"]::before { background: radial-gradient(120% 85% at 88% 0%, var(--luce), transparent 62%); }
.ui-palco__pavimento { position: absolute; z-index: -1; left: 50%; bottom: 7%; width: 80%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--c-pavimento), transparent); }
.ui-palco__corpo { display: block; width: 100%; height: 100%; color: var(--c-manichino); }
.ui-palco__comandi { position: absolute; z-index: var(--z-palco-comandi); display: flex; gap: var(--sp-2); }
.ui-palco__comandi--alto { top: var(--sp-3); right: var(--sp-3); }
.ui-palco__comandi--basso { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); justify-content: space-between; }
.ui-palco__comando { display: inline-grid; place-items: center; min-width: var(--tocco-min); height: var(--tocco-min); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-tondo); background: var(--c-velo-palco); color: var(--c-testo-palco); font: var(--fw-forte) var(--fs-nota) / 1 var(--f-testo); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ui-palco__comando[aria-pressed="true"] { background: var(--c-azione-palco); color: var(--c-su-azione-palco); }
.ui-sagoma { position: relative; display: block; flex: none; width: 56px; height: 56px; border-radius: var(--r-s); background: linear-gradient(180deg, var(--c-palco-alto), var(--c-palco)); color: var(--c-manichino); overflow: hidden; }
.ui-sagoma svg { width: 100%; height: 100%; }
.ui-sagoma--grande { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-l); }

/* Scheda della pratica: il protagonista di Oggi (unica superficie piena della schermata) */
.ui-scheda-pratica { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(400px, 60svh, 580px); border-radius: var(--r-xl); text-decoration: none; }
.ui-scheda-pratica__figura { position: relative; min-height: 0; padding: var(--sp-5) var(--sp-5) 0; }
.ui-scheda-pratica__testo { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ui-scheda-pratica__azioni { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.ui-scheda-pratica .t-protagonista { font-size: clamp(2.5rem, 8.5cqi, 4.5rem); }   /* segue la scheda, non la finestra */
@container (min-width: 480px) {
  .ui-scheda-pratica { grid-template-rows: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: clamp(380px, min(70svh, 46vw), 760px); }
  .ui-scheda-pratica__figura { padding: var(--sp-6) 0 0 var(--sp-6); }
  .ui-scheda-pratica__testo { align-content: end; padding: var(--sp-7) var(--sp-7) var(--sp-7) var(--sp-5); }
  .ui-scheda-pratica__azioni { justify-items: start; gap: var(--sp-2); }
}

/* =====================================================================
   CONTENUTO
   ===================================================================== */
.ui-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); min-height: var(--h-comando); }
.ui-sezione { display: grid; gap: var(--sp-4); }
.ui-sezione__testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }

/* Tre fatti: minuti, intensità, zona. Mai più di tre */
.ui-fatti { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--c-testo-2); font-size: var(--fs-secondario); }
.ui-fatti > * { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.ui-intensita { display: inline-flex; gap: 3px; }
.ui-intensita i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.ui-intensita i[data-pieno] { background: currentColor; }

/* Riga di elenco: sagoma, titolo su una riga, tre fatti */
.ui-lista > li + li { border-top: var(--filetto); }
.ui-riga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); min-height: 76px; padding: var(--sp-3) 0; color: inherit; text-decoration: none; }
.ui-riga__titolo { font: var(--fw-forte) var(--fs-corpo) / 1.3 var(--f-testo); overflow-wrap: anywhere; }
.ui-riga__fine { color: var(--c-testo-3); }
.ui-riga:active { opacity: 0.7; }

/* Griglia delle pose e striscia delle sagome */
.ui-griglia { display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
@media (min-width: 1024px) { .ui-griglia { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-6) var(--sp-4); } }
@media (min-width: 1440px) { .ui-griglia { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.ui-tessera-posa { display: grid; gap: var(--sp-2); color: inherit; text-decoration: none; font: var(--fw-forte) var(--fs-secondario) / 1.25 var(--f-testo); }
.ui-striscia { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); }
.ui-striscia::-webkit-scrollbar { display: none; }
.ui-striscia > .ui-sagoma { width: 48px; height: 48px; }
.ui-striscia > .ui-striscia__stacco { flex: none; width: var(--sp-2); }

/* Anello: tempo, respiro, settimana. --valore da 0 a 1 */
.ui-anello { --d: 96px; --tratto: 8; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--d); height: var(--d); }
.ui-anello > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-anello circle { fill: none; stroke-width: var(--tratto); stroke-linecap: round; }
.ui-anello__traccia { stroke: var(--c-superficie-2); }
.ui-anello__arco { stroke: var(--c-azione); stroke-dasharray: calc(var(--valore, 0) * 100) 100; transition: stroke-dasharray var(--m-conferma) var(--e-standard); }
.ui-anello__arco--mattina { stroke: var(--c-mattina); }
.ui-anello__arco--sera { stroke: var(--c-sera); stroke-dashoffset: calc(var(--prima, 0) * -100); }
.ui-anello__centro { position: relative; text-align: center; font: var(--fw-forte) var(--fs-secondario) / 1.1 var(--f-testo); font-variant-numeric: tabular-nums; }
.ui-anello--grande { --d: 168px; --tratto: 7; }
.ui-anello--respiro { animation: ui-respiro-anello calc(var(--m-respiro) * 2) ease-in-out infinite; }

/* Settimana: sette giorni, oggi in evidenza, un punto per pratica */
.ui-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); text-align: center; }
.ui-giorno { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border: 0; border-radius: var(--r-m); background: transparent; color: var(--c-testo-3); font: var(--fw-forte) var(--fs-nota) / 1 var(--f-testo); cursor: pointer; }
.ui-giorno > b { font: var(--fw-forte) var(--fs-corpo) / 1 var(--f-testo); color: var(--c-testo); font-variant-numeric: tabular-nums; }
.ui-giorno[aria-current="date"] { background: var(--c-superficie); }
.ui-giorno__segni { display: flex; gap: 3px; min-height: 6px; }
.ui-giorno__segni > i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--c-bordo-forte); }
.ui-giorno__segni > i[data-momento="mattina"][data-fatto] { background: var(--c-mattina); border-color: var(--c-mattina); }
.ui-giorno__segni > i[data-momento="sera"][data-fatto] { background: var(--c-sera); border-color: var(--c-sera); }

/* Avanzamento della pratica: un punto per posa */
.ui-avanzamento { display: flex; align-items: center; gap: 5px; }
.ui-avanzamento > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-fase-vuota); transition: transform var(--m-entrata) var(--e-standard), background-color var(--m-entrata) var(--e-standard); }
.ui-avanzamento > i[data-fatto] { background: var(--c-fase-posa); }
.ui-avanzamento > i[aria-current="step"] { background: var(--c-fase-posa); transform: scale(1.9); }

/* Numeri: filetti, non riquadri */
.ui-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-5) var(--sp-4); }
.ui-numeri dt { font-size: var(--fs-nota); color: var(--c-testo-3); }
.ui-numeri dd { margin: 0; font: var(--fw-normale) var(--fs-titolo-1) / 1.1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.ui-numeri--piccoli dd { font: var(--fw-forte) var(--fs-corpo) / 1.25 var(--f-testo); }   /* accanto a un numero protagonista */

/* Grafico a barre: solo linea di base e obiettivo tratteggiato */
.ui-barre { display: flex; align-items: flex-end; gap: var(--sp-1); height: 120px; border-bottom: var(--filetto); position: relative; }
.ui-barre > i { flex: 1; display: flex; flex-direction: column-reverse; gap: 1px; min-width: 4px; }
.ui-barre > i > b { display: block; border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--c-mattina); }
.ui-barre > i > b + b { background: var(--c-sera); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.ui-barre__obiettivo { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--c-obiettivo); opacity: 0.5; }

/* Mappa del corpo: legenda (il corpo colorato è del visore) */
.ui-mappa-scala { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-nota); color: var(--c-testo-palco-2); }
.ui-mappa-scala > i { width: 18px; height: 8px; border-radius: var(--r-xs); }

/* Schede: solo dove il contenuto cambia davvero */
.ui-schede { display: flex; gap: var(--sp-6); border-bottom: var(--filetto); }
.ui-schede > button { min-height: var(--tocco-min); padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--c-testo-2); font: var(--fw-forte) var(--fs-corpo) / 1 var(--f-testo); cursor: pointer; }
.ui-schede > button[aria-selected="true"] { color: var(--c-testo); border-bottom-color: var(--c-testo); }

/* Dettagli: il testo arriva su richiesta */
.ui-dettagli > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tocco-min); cursor: pointer; list-style: none; font: var(--fw-forte) var(--fs-corpo) / 1.3 var(--f-testo); }
.ui-dettagli > summary::-webkit-details-marker { display: none; }
.ui-dettagli > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform var(--m-entrata) var(--e-standard); }
.ui-dettagli[open] > summary::after { transform: rotate(-135deg); }
.ui-dettagli > :not(summary) { padding-bottom: var(--sp-4); color: var(--c-testo-2); }

/* =====================================================================
   NAVIGAZIONE
   ===================================================================== */
.ui-nav { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--c-barra); -webkit-backdrop-filter: var(--sfocatura-barra); backdrop-filter: var(--sfocatura-barra); box-shadow: var(--om-barra); }
.ui-nav__marchio { display: none; }
.ui-nav__voce { display: grid; justify-items: center; align-content: center; gap: 2px; color: var(--c-testo-2); text-decoration: none; font: var(--fw-forte) var(--fs-nota) / 1 var(--f-testo); }
.ui-nav__segno { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-tondo); transition: background-color var(--m-entrata) var(--e-standard); }
.ui-nav__voce[aria-current="page"] { color: var(--c-testo); }
.ui-nav__voce[aria-current="page"] .ui-nav__segno { background: var(--c-azione-tenue); color: var(--c-su-azione-tenue); }
.ui-ritorno { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tocco-min); margin-left: calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--c-testo-2); font: var(--fw-forte) var(--fs-secondario) / 1 var(--f-testo); text-decoration: none; cursor: pointer; }
@media (min-width: 600px) {
  .ui-nav { top: 0; right: auto; width: var(--rail-w); height: auto; grid-auto-flow: row; grid-auto-rows: max-content; align-content: start; gap: var(--sp-2); padding: calc(var(--sp-4) + var(--safe-t)) 0 var(--sp-4); box-shadow: none; border-right: var(--filetto); background: var(--c-sfondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ui-nav__voce { padding: var(--sp-2) 0; }
  .ui-pagina { padding-left: calc(var(--rail-w) + var(--margine)); padding-bottom: var(--sp-9); max-width: calc(var(--contenuto-max) + var(--rail-w) + 2 * var(--margine)); }
}
@media (min-width: 1024px) {
  .ui-nav { width: var(--sidebar-w); padding-inline: var(--sp-4); }
  .ui-nav__marchio { display: flex; align-items: center; min-height: var(--h-comando); padding: 0 var(--sp-3); margin-bottom: var(--sp-4); color: var(--c-testo); text-decoration: none; }   /* il logo orizzontale, mai il nome scritto */
  .ui-nav__marchio > svg { height: 28px; width: auto; }
  .ui-nav__voce { grid-auto-flow: column; justify-content: start; justify-items: start; gap: var(--sp-3); min-height: var(--h-comando); padding: 0 var(--sp-3); border-radius: var(--r-m); font-size: var(--fs-secondario); }
  .ui-nav__segno { width: auto; height: auto; }
  .ui-nav__voce[aria-current="page"] { background: var(--c-azione-tenue); color: var(--c-su-azione-tenue); }
  .ui-nav__voce[aria-current="page"] .ui-nav__segno { background: transparent; }
  .ui-pagina { padding-left: calc(var(--sidebar-w) + var(--margine)); max-width: calc(var(--contenuto-max) + var(--sidebar-w) + 2 * var(--margine)); }
}

/* =====================================================================
   SOVRAPPOSIZIONI E RISCONTRO
   ===================================================================== */
/* Foglio dal basso: l'unico contenitore per scelte rapide; mai un foglio sopra un foglio */
.ui-foglio { width: 100%; max-width: 560px; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--c-superficie); color: var(--c-testo); box-shadow: var(--om-foglio); overflow: hidden auto; }
.ui-foglio::backdrop { background: var(--c-velo); }
.ui-foglio[open] { animation: ui-foglio-su var(--m-passaggio) var(--e-standard); }
.ui-foglio__maniglia { width: 36px; height: 4px; margin: var(--sp-2) auto 0; border-radius: var(--r-tondo); background: var(--c-superficie-3); }
.ui-foglio__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) 0 var(--sp-6); }
.ui-foglio__corpo { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) calc(var(--sp-6) + var(--safe-b)); }
@media (min-width: 600px) {
  .ui-foglio { margin: auto; border-radius: var(--r-xl); }
  .ui-foglio[open] { animation-name: ui-entra; animation-duration: var(--m-entrata); }
  .ui-foglio__maniglia { display: none; }
}
/* Voce di un foglio: azione + conseguenza scritta */
.ui-voce { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); width: 100%; min-height: 64px; padding: var(--sp-2) 0; border: 0; background: transparent; color: var(--c-testo); text-align: left; cursor: pointer; }
.ui-voce + .ui-voce { border-top: var(--filetto); }
.ui-voce__titolo { display: block; font: var(--fw-forte) var(--fs-corpo) / 1.3 var(--f-testo); }
.ui-voce__nota { display: block; font-size: var(--fs-secondario); color: var(--c-testo-2); }
.ui-voce:active { opacity: 0.7; }

/* Riscontro: l'azione è già fatta, «Annulla» per 6 secondi */
.ui-riscontro { position: fixed; z-index: var(--z-riscontro); left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-4)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-3); width: max-content; max-width: min(calc(100vw - 2 * var(--margine)), 480px); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); border-radius: var(--r-tondo); background: var(--c-testo); color: var(--c-sfondo); box-shadow: var(--om-foglio); font-size: var(--fs-secondario); animation: ui-riscontro-su var(--m-entrata) var(--e-entrata) both; }
.ui-riscontro > button { min-height: 36px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-tondo); background: transparent; color: inherit; font: var(--fw-forte) var(--fs-secondario) / 1 var(--f-testo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Avviso in linea: icona + testo + al più un'azione; mai solo colore */
.ui-avviso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-l); background: var(--c-info-sfondo); color: var(--c-testo); font-size: var(--fs-secondario); }
.ui-avviso > .ui-icona { color: var(--c-info); }
.ui-avviso--attenzione { background: var(--c-avviso-sfondo); } .ui-avviso--attenzione > .ui-icona { color: var(--c-avviso); }
.ui-avviso--errore { background: var(--c-errore-sfondo); } .ui-avviso--errore > .ui-icona { color: var(--c-errore); }
.ui-avviso--successo { background: var(--c-successo-sfondo); } .ui-avviso--successo > .ui-icona { color: var(--c-successo); }

/* Suggerimento di primo uso: uno per schermata, una volta sola */
.ui-suggerimento { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); max-width: 300px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--c-testo); color: var(--c-sfondo); font-size: var(--fs-secondario); line-height: 1.35; box-shadow: var(--om-foglio); }
.ui-suggerimento::after { content: ""; position: absolute; left: var(--sp-6); bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ui-suggerimento > button { flex: none; min-height: 36px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-tondo); background: transparent; color: inherit; font: var(--fw-forte) var(--fs-nota) / 1 var(--f-testo); cursor: pointer; }

/* Stato vuoto: il corpo a riposo, una riga, un'azione */
.ui-vuoto { display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-8) 0; text-align: center; }
.ui-vuoto__corpo { width: 120px; height: 120px; color: var(--c-testo-3); }

/* Attesa che respira: al posto delle rotelle; compare dopo 150 ms, resta almeno 300 ms */
.ui-scheletro { display: block; border-radius: var(--r-s); background: var(--c-superficie-2); animation: ui-respiro var(--m-attesa) ease-in-out infinite; }
.ui-scheletro--riga { height: 14px; }
.ui-scheletro--titolo { height: 22px; width: 60%; }
.ui-scheletro--sagoma { width: 56px; height: 56px; }

/* Indicatore di stato (sincronizzazione, offline): un'icona; testo solo se serve attenzione */
.ui-stato { display: inline-grid; place-items: center; width: var(--tocco-min); height: var(--tocco-min); color: var(--c-testo-3); }
.ui-stato[data-attenzione] { color: var(--c-avviso); }

/* =====================================================================
   SESSIONE
   ===================================================================== */
.ui-sessione { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; border-radius: 0; }
.ui-sessione__alto { position: absolute; z-index: var(--z-palco-comandi); top: calc(var(--sp-3) + var(--safe-t)); left: var(--sp-3); right: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ui-sessione__figura { position: relative; min-height: 0; padding: var(--sp-10) var(--sp-5) 0; }
.ui-sessione__didascalia { text-align: center; padding: 0 var(--sp-6); font: var(--fw-normale) var(--fs-titolo-3) / 1.35 var(--f-titoli); text-wrap: balance; min-height: 2.7em; }
.ui-sessione__pannello { display: grid; gap: var(--sp-4); justify-items: center; padding: var(--sp-4) var(--margine) calc(var(--sp-5) + var(--safe-b)); text-align: center; }
.ui-sessione__comandi { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); transition: opacity var(--m-passaggio) var(--e-standard); }
.ui-sessione[data-quieta] .ui-sessione__comandi, .ui-sessione[data-quieta] .ui-sessione__alto, .ui-sessione[data-quieta] .ui-poi { opacity: 0; pointer-events: none; }
.ui-poi { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1); border-radius: var(--r-tondo); background: var(--c-incasso-palco); font-size: var(--fs-nota); color: var(--c-testo-palco-2); }
.ui-poi > .ui-sagoma { width: 28px; height: 28px; border-radius: 50%; }
@media (min-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .ui-sessione { grid-template-rows: none; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
  .ui-sessione__pannello { align-content: center; padding: var(--sp-7); }
  .ui-sessione__figura { padding-top: var(--sp-7); }
}

/* =====================================================================
   COMPOSIZIONE E AGGIUNTE v2 (U0) · DESIGN_SYSTEM.md §6.9–§6.12
   ===================================================================== */
/* Corpo come immagine (resa del visore o sua anteprima): poggia in basso, non si deforma (PDS-01) */
img.ui-palco__corpo, .ui-sagoma > img, .ui-vuoto__corpo > img, .ui-tessera__sagoma > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ui-sagoma > img { padding: 6%; }
/* Muscoli: ciò che porta data-muscoli compare solo quando il palco ha data-muscoli (corpo colorato, legenda) */
.ui-palco:not([data-muscoli]) [data-muscoli] { display: none; }
.ui-palco[data-muscoli] .ui-palco__corpo:not([data-muscoli]) { display: none; }

/* Due colonne: protagonista a sinistra (fermo), contesto a destra (PDS-02) */
.ui-due { display: grid; gap: var(--spazio-gruppi); }
@media (min-width: 1024px) {
  .ui-due { grid-template-columns: minmax(0, 1.6fr) minmax(var(--colonna-2-w), 1fr); align-items: start; }
  .ui-due > :first-child { position: sticky; top: var(--sp-6); }
  .ui-due--pari { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .ui-due--pari > :first-child { position: static; }
}

/* Palco in pagina: a tutta larghezza sul telefono, 4:3 da 600, quadrato da 1024 (PDS-03) */
.ui-palco--pagina { aspect-ratio: 1; margin-inline: calc(-1 * var(--margine)); padding: var(--sp-7) var(--sp-5) 0; border-radius: 0; }
@media (min-width: 600px) { .ui-palco--pagina { aspect-ratio: 4 / 3; margin-inline: 0; border-radius: var(--r-l); } }
@media (min-width: 1024px) { .ui-palco--pagina { aspect-ratio: 1; } }

/* Pagina senza navigazione (ingresso, accesso, fine prova) e modulo stretto (PDS-04) */
.ui-pagina--sola { padding-left: var(--margine); padding-bottom: calc(var(--h-comando-grande) + var(--sp-9) + var(--safe-b)); max-width: calc(var(--contenuto-max) + 2 * var(--margine)); }
.ui-modulo { display: grid; align-content: start; gap: var(--spazio-gruppi); width: 100%; max-width: var(--modulo-w); margin-inline: auto; }
.ui-modulo--largo { max-width: calc(var(--modulo-w) * 1.6); }
@media (min-width: 1024px) { .ui-pagina--sola { max-width: calc(var(--contenuto-max) + var(--sidebar-w) + 2 * var(--margine)); } }   /* stessa larghezza delle pagine con navigazione */
@media (min-width: 600px) { .ui-pagina--sola { padding-bottom: var(--sp-9); } .ui-modulo { padding-top: var(--sp-9); } }

/* Pausa della sessione: un velo sul palco, tre scelte (PDS-05) */
.ui-sessione__pausa { position: absolute; inset: 0; z-index: var(--z-palco-comandi); display: grid; align-content: center; justify-items: center; gap: var(--sp-4); padding: var(--margine); background: var(--c-velo-palco); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; }
.ui-sessione__pausa > .ui-pulsante { width: 100%; max-width: var(--colonna-2-w); }

/* Dettagli: navigazione solo da 600 px; sotto c'è il ritorno e l'azione in basso (PDS-06) */
.ui-nav--dettaglio { display: none; }
.ui-pulsante--largo { display: none; }
@media (min-width: 600px) {
  .ui-nav--dettaglio { display: grid; }
  .ui-barra-azione--telefono { display: none; }
  .ui-pulsante--largo { display: inline-flex; }
}
.ui-pagina--dettaglio { padding-bottom: calc(var(--h-comando-grande) + var(--sp-9) + var(--safe-b)); }
@media (min-width: 600px) { .ui-pagina--dettaglio { padding-bottom: var(--sp-9); } }

/* Collegamento silenzioso: titolo o giorno che porta altrove (PDS-07) */
.ui-collegamento, a.ui-giorno, a.ui-tessera, a.ui-voce, a.ui-fila { color: inherit; text-decoration: none; }
/* L'etichetta non si allarga mai alla colonna */
.ui-pila > .ui-etichetta, .ui-sezione > .ui-etichetta, .ui-scheda-pratica__testo > .ui-etichetta, .ui-modulo > .ui-etichetta { justify-self: start; }
/* Palco che centra un anello o un numero (Momento) */
.ui-palco--centro { display: grid; place-items: center; align-content: center; gap: var(--sp-4); padding: var(--sp-7); text-align: center; }

/* Avviso con al massimo due azioni quiete (PDS-11) */
.ui-avviso__azioni { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: calc(-1 * var(--sp-4)); }

/* Regolazioni della pratica: una riga per regolazione, il valore a destra (PDS-14) */
.ui-regolazioni { display: grid; gap: var(--sp-2); }
.ui-regolazioni > button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: var(--h-comando-grande); padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-l); background: var(--c-superficie); color: var(--c-testo); font: var(--fw-forte) var(--fs-corpo) / 1.2 var(--f-testo); text-align: left; cursor: pointer; }
.ui-regolazioni > button > span:first-child { flex: 1; }
.ui-regolazioni > button > span + span { color: var(--c-testo-2); font-weight: var(--fw-normale); }

/* Tessera del prezzo: piano · prezzo · periodo, in colonna (PDS-17) */
/* Tessere con figura grande (obiettivi in Pratiche): la sagoma riempie la tessera */
.ui-tessere--figure { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ui-tessere--figure .ui-tessera__sagoma { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-m); }
@media (min-width: 1024px) { .ui-tessere--figure { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (min-width: 1440px) { .ui-tessere--figure { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

.ui-tessere--prezzi { grid-template-columns: 1fr; }
@media (min-width: 600px) { .ui-tessere--prezzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Barra in alto delle pagine senza navigazione: ritorno a sinistra, passi o marchio al centro */
.ui-barra-alta { display: grid; grid-template-columns: minmax(var(--h-comando), 1fr) auto minmax(var(--h-comando), 1fr); align-items: center; min-height: var(--h-comando); margin-bottom: var(--sp-4); }
.ui-barra-alta > :nth-child(2) { justify-self: center; }
.ui-barra-alta > :nth-child(3) { justify-self: end; }

/* Codice a 6 cifre: un solo campo vero, sei celle disegnate (D17) */
.ui-codice { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); max-width: var(--modulo-w); }
.ui-codice__campo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: var(--fs-corpo); letter-spacing: 3em; opacity: 0.01; cursor: text; }
.ui-codice__cella { display: grid; place-items: center; height: var(--tocco-primario); border: 1.5px solid var(--c-bordo-forte); border-radius: var(--r-m); background: var(--c-superficie); font: var(--fw-normale) var(--fs-titolo-1) / 1 var(--f-titoli); font-variant-numeric: tabular-nums; transition: border-color var(--m-istante) var(--e-standard); }
.ui-codice__cella[data-attiva] { border-color: var(--c-focus); box-shadow: 0 0 0 1px var(--c-focus); }
.ui-codice[data-errore] .ui-codice__cella { border-color: var(--c-errore); }
.ui-codice[data-verifica] .ui-codice__cella { animation: ui-respiro var(--m-attesa) ease-in-out infinite; }

/* Marchio: simbolo o logo orizzontale dai tracciati (mai il nome scritto con un carattere) */
.ui-marchio { display: inline-flex; align-items: center; color: var(--c-testo); text-decoration: none; }
.ui-marchio > svg { display: block; height: 28px; width: auto; }
.ui-marchio--grande > svg { height: 48px; }

/* Landing: schermate dell'app in fila (UI-12) */
.ui-schermate { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ui-schermata { display: grid; gap: var(--sp-3); }
.ui-schermata > img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--om-foglio); }
.ui-pagina--landing { padding-top: calc(var(--sp-4) + var(--safe-t)); padding-bottom: var(--sp-11); }
@media (min-width: 600px) { .ui-pagina--landing { padding-left: var(--margine); max-width: calc(var(--contenuto-max) + 2 * var(--margine)); } }
.ui-eroe { display: grid; gap: var(--sp-6); align-items: center; min-height: calc(100svh - var(--h-comando) - 2 * var(--sp-4)); }   /* il primo schermo è tutto della promessa */
@media (min-width: 1024px) {
  .ui-eroe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ui-eroe > .ui-palco { order: 2; border-radius: var(--r-xl); }
}

/* Visibilità per classe di schermo (solo soglie di finestra ammesse) */
.ui-da-600, .ui-da-1024 { display: none; }
@media (min-width: 600px) { .ui-da-600 { display: revert; } .ui-fino-600 { display: none; } }
@media (min-width: 1024px) { .ui-da-1024 { display: revert; } .ui-fino-1024 { display: none; } }


/* =====================================================================
   MOVIMENTO: tre gesti e basta
   ===================================================================== */
/* 1 · entrata: comparsa con salita; in gruppo, sfalsata di 40 ms per i primi tre elementi */
.ui-entra { animation: ui-entra var(--m-entrata) var(--e-entrata) both; animation-delay: calc(min(var(--i, 0), 3) * 40ms); }
@keyframes ui-entra { from { opacity: 0; transform: translateY(var(--salita)); } }
@keyframes ui-foglio-su { from { transform: translateY(100%); } }
@keyframes ui-riscontro-su { from { opacity: 0; transform: translate(-50%, var(--salita)); } }
/* 2 · passaggio: l'elemento toccato diventa la pagina nuova */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--m-entrata); animation-timing-function: var(--e-standard); }
.vt-palco { view-transition-name: palco; }
.vt-titolo { view-transition-name: titolo; }
::view-transition-group(palco), ::view-transition-group(titolo) { animation-duration: var(--m-passaggio); animation-timing-function: var(--e-standard); }
/* 3 · conferma: l'anello si riempie (transizione su .ui-anello__arco), il segno di spunta si disegna */
.ui-spunta { stroke-dasharray: 24; stroke-dashoffset: 24; animation: ui-spunta var(--m-conferma) var(--e-standard) forwards; }
@keyframes ui-spunta { to { stroke-dashoffset: 0; } }
/* attese e respiro */
@keyframes ui-respiro { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ui-respiro-anello { 0%, 100% { transform: scale(0.86); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ui-entra, .ui-foglio[open], .ui-riscontro, .ui-scheletro, .ui-anello--respiro, .ui-spunta, .ui-pulsante[aria-busy="true"]::before, .ui-codice[data-verifica] .ui-codice__cella { animation: none; }
  .ui-spunta { stroke-dashoffset: 0; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}