/* ============================================================
   UpZid — Componenti firma V3
   Ogni componente si ripete sempre uguale: è così che diventa
   firma. Tre famiglie:
     A. segnaletica  — pill di tipo, badge di accesso, legenda
     B. struttura    — albero, spina, gate, ragioni, decisione
     C. contenitori  — aree, schede, dialogo, avvisi, stati
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   A. SEGNALETICA
   ══════════════════════════════════════════════════════════ */

/* --- Pill di tipo: la doppia natura del prodotto ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px 3px 8px;
  border-radius:var(--pill);
  font-size:var(--t-3xs);font-weight:700;
  letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
}
.pill::before{content:"";width:7px;height:7px;flex:none;}
.pill-for{color:var(--for);background:var(--for-bg);border-color:color-mix(in srgb,var(--for) 22%,transparent);}
.pill-for::before{border-radius:var(--pill);border:1.5px solid currentColor;}
.pill-dec{color:var(--dec);background:var(--dec-bg);border-color:color-mix(in srgb,var(--dec-piano) 30%,transparent);}
.pill-dec::before{transform:rotate(45deg);border:1.5px solid currentColor;}
.pill-fatto{color:var(--done);background:var(--done-bg);border-color:color-mix(in srgb,var(--done) 22%,transparent);}
.pill-fatto::before{border-radius:var(--pill);background:currentColor;}
.pill-bloccato{color:var(--mu);background:var(--card);border-color:var(--ln);}
.pill-bloccato::before{border-radius:var(--pill);border:1.5px dashed currentColor;}
.pill-gemma{color:var(--dec);background:transparent;border:1px dashed var(--dec-piano);}
.pill-gemma::before{border-radius:var(--pill);border:1.5px dashed currentColor;}

/* --- Badge di accesso: cosa puoi fare, sempre allo stesso modo ---
   Tre soli stati in tutta la piattaforma. Forma + parola, mai colore solo. */
.stato{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-3xs);font-weight:700;
  padding:2px 8px;border-radius:var(--pill);
  border:1px solid transparent;white-space:nowrap;
}
.stato svg{width:11px;height:11px;flex:none;}
.stato--aperto{color:var(--done);background:var(--done-bg);border-color:color-mix(in srgb,var(--done) 22%,transparent);}
.stato--limite{color:var(--dec);background:var(--dec-bg);border-color:color-mix(in srgb,var(--dec-piano) 30%,transparent);}
.stato--pro{color:var(--mu);background:transparent;border:1px dashed var(--ln-forte);}
.rail .stato{padding:1px 6px;font-size:10px;}

/* --- Legenda: forma + parola, sempre insieme --------------- */
.legenda{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);
  padding:var(--s3) var(--s4);
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--card);
  font-size:var(--t-3xs);color:var(--mu);
}
.legenda span{display:inline-flex;align-items:center;gap:6px;}

/* ══════════════════════════════════════════════════════════
   B. STRUTTURA
   ══════════════════════════════════════════════════════════ */

/* --- L'albero: la firma visiva di UpZid -------------------
   Rami curvi che si disegnano, nodi che compaiono, il nodo
   corrente che pulsa in arancio. È la traduzione visiva di
   "il percorso si costruisce sulla tua situazione". */
.albero{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb,var(--A) 7%,transparent), transparent 62%),
    var(--cs);
  border:1px solid var(--ln);
  border-radius:var(--rs);
  overflow:hidden;
}
.albero svg{width:100%;height:auto;display:block;}
/* sotto una certa larghezza il testo dei nodi diventa illeggibile:
   meglio farlo scorrere che rimpicciolirlo */
.albero-scorri{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.albero-scorri > svg{min-width:600px;}

.albero .ramo-linea{
  fill:none;stroke:var(--svg-branch);
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,340);stroke-dashoffset:var(--len,340);
  animation:disegna .9s cubic-bezier(.32,.72,0,1) forwards;
}
.albero .ramo-linea.tronco{stroke:var(--svg-accent);stroke-width:3;}
@keyframes disegna{to{stroke-dashoffset:0;}}

.albero .nodo-svg{opacity:0;animation:compari .35s ease forwards;}
.albero .nodo-svg circle,.albero .nodo-svg rect{
  fill:var(--svg-node-fill);stroke:var(--svg-node-stroke);stroke-width:1.8;
}
.albero .nodo-svg.tipo-for circle{stroke:var(--for-piano);}
.albero .nodo-svg.tipo-dec rect{stroke:var(--dec-piano);}
.albero .nodo-svg.tipo-fatto circle{fill:var(--done-piano);stroke:var(--done-piano);}
.albero .nodo-svg.tipo-chiuso circle{stroke:var(--mu);stroke-dasharray:3 3;}
.albero .nodo-svg text{
  font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--svg-text);
}
/* l'etichetta del ramo pesa più di quella del passo: è un livello sopra */
.albero .ramo-etichetta text{fill:var(--tx);font-weight:700;font-size:10.5px;}
@keyframes compari{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}

/* il nodo dove sei adesso: pulsa in arancio — l'unico
   movimento continuo della piattaforma, e il suo segno */
.albero .nodo-svg.attivo circle,.albero .nodo-svg.attivo rect{
  stroke:var(--dec-piano);stroke-width:2.4;
}
.albero .alone{
  fill:none;stroke:var(--dec-piano);stroke-width:2;
  transform-origin:center;transform-box:fill-box;
  animation:alone 2.2s ease-in-out infinite;
}
@keyframes alone{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:0;transform:scale(1.9);}
}

.albero-piede{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  padding:var(--s3) var(--s4);
  border-top:1px solid var(--ln);
  background:var(--card);
}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-3xs);color:var(--mu);
  border:1px solid var(--ln);border-radius:var(--pill);
  padding:5px 10px;background:var(--cs);
}
.tag b{color:var(--tx);font-weight:700;}

/* --- La spina: l'elenco dei passi -------------------------- */
.spina{position:relative;padding-left:var(--s7);}
.spina::before{
  content:"";position:absolute;left:13px;top:10px;bottom:10px;
  width:2px;border-radius:2px;
  background:linear-gradient(var(--ln-forte),var(--ln));
}
.spina > li{position:relative;margin-bottom:var(--s3);}
.spina > li:last-child{margin-bottom:0;}

.nodo{
  position:absolute;left:calc(var(--s7) * -1);top:14px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--zona);border-radius:var(--pill);
}
.nodo::before{
  content:"";width:13px;height:13px;
  border:2.5px solid var(--mu);border-radius:var(--pill);
  background:var(--cs);
}
.passo--for  .nodo::before{border-color:var(--for-piano);}
.passo--dec  .nodo::before{border-color:var(--dec-piano);border-radius:3px;transform:rotate(45deg);}
.passo--fatto .nodo::before{border-color:var(--done-piano);background:var(--done-piano);}
.passo--fatto .nodo::after{
  content:"";position:absolute;width:5px;height:9px;
  border:solid var(--cs);border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.passo--bloccato .nodo::before{border-style:dashed;border-color:var(--mu);background:transparent;}
.passo--gemma .nodo::before{width:10px;height:10px;border-style:dashed;border-color:var(--dec-piano);}

/* il passo è una scheda, non testo appoggiato sul fondo */
.passo-apri{
  display:block;width:100%;text-align:left;
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);
  padding:var(--s4);
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
  cursor:pointer;
}
.passo-apri:hover{box-shadow:var(--ombra-2);border-color:var(--ln-forte);transform:translateY(-1px);}
.passo-testa{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin-bottom:var(--s2);
}
.passo-titolo{font-size:var(--t-lead);font-weight:700;letter-spacing:-.01em;}
.passo-nota{display:block;font-size:var(--t-sm);color:var(--mu);max-width:64ch;}
.passo-azioni{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.passo-conteggio{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);}

.passo--bloccato .passo-apri{
  background:transparent;box-shadow:none;border-style:dashed;cursor:default;
}
.passo--bloccato .passo-apri:hover{box-shadow:none;transform:none;border-color:var(--ln);}
.passo--bloccato .passo-titolo{color:var(--mu);}

.passo--corrente .passo-apri{
  border-color:var(--dec-piano);
  box-shadow:var(--ombra-2), inset 3px 0 0 var(--dec-piano);
}
.passo--corrente .nodo::before{
  box-shadow:0 0 0 4px var(--dec-bg);
  animation:battito 2.4s ease-in-out infinite;
}
@keyframes battito{
  0%,100%{box-shadow:0 0 0 3px var(--dec-bg);}
  50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--dec-piano) 6%,transparent);}
}

/* raggruppamento in rami */
.ramo{margin-bottom:var(--s6);}
.ramo:last-child{margin-bottom:0;}
.ramo-testa{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s4);
}
.ramo-numero{
  width:26px;height:26px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--ln);
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
}
.ramo-testa h3{font-size:var(--t-h3);}
.ramo-conteggio{font-family:var(--mono);font-size:var(--t-xs);color:var(--mu);margin-left:auto;}

/* --- Gate decisionale: una soglia ------------------------- */
.gate{
  position:relative;
  margin:var(--s5) 0 var(--s5) calc(var(--s7) * -1);
  padding:var(--s5) var(--s5) var(--s5) var(--s7);
  border:1.5px solid var(--dec-piano);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--dec-piano) 9%,transparent), transparent 70%),
    var(--cs);
  box-shadow:var(--ombra-2);
}
.gate::before{
  content:"";position:absolute;left:-11px;top:calc(50% - 11px);
  width:22px;height:22px;
  background:var(--cs);border:2.5px solid var(--dec-piano);
  border-radius:4px;transform:rotate(45deg);
}
.gate-etichetta{
  font-family:var(--mono);font-size:var(--t-3xs);
  color:var(--dec);margin-bottom:var(--s2);
}
.gate h3{font-size:var(--t-h3);margin-bottom:var(--s2);}
.gate p{font-size:var(--t-sm);color:var(--mu);max-width:60ch;}

/* --- Le ragioni della scelta ------------------------------ */
.ragioni{
  border:1px solid color-mix(in srgb,var(--dec-piano) 30%,var(--ln));
  border-left-width:3px;border-left-color:var(--dec-piano);
  border-radius:var(--rs);
  background:var(--dec-bg);
  padding:var(--s4);
  margin:var(--s5) 0;
}
.ragioni > .occhiello{color:var(--dec);margin-bottom:var(--s3);display:block;}
.ragioni dt{font-size:var(--t-xs);font-weight:700;color:var(--tx);margin-top:var(--s3);}
.ragioni dt:first-of-type{margin-top:0;}
.ragioni dd{font-size:var(--t-sm);color:var(--mu);max-width:62ch;margin-top:2px;}

/* --- Decisione tracciata ---------------------------------- */
.decisione{
  border:1px solid var(--ln-forte);
  border-radius:var(--r);
  background:var(--cs);
  box-shadow:var(--ombra-2);
  overflow:hidden;
}
.decisione-testa{
  padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--ln);
  background:var(--card);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
}
.decisione-testa .id{color:var(--tx);}
.decisione-corpo{padding:var(--s5);}
.decisione-corpo h3{font-size:var(--t-h3);margin-bottom:var(--s3);}
.decisione-corpo dt{font-size:var(--t-xs);font-weight:700;margin-top:var(--s4);}
.decisione-corpo dd{font-size:var(--t-sm);color:var(--mu);margin-top:2px;max-width:62ch;}
.decisione-piede{padding:var(--s3) var(--s5);border-top:1px solid var(--ln);background:var(--card);display:flex;gap:var(--s2);flex-wrap:wrap;}

/* --- Avanzamento ------------------------------------------ */
.pgb{margin:var(--s4) 0;}
.pgb-etichette{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:var(--s3);}
.pgb-testo{font-size:var(--t-xs);color:var(--mu);}
.pgb-numero{font-family:var(--mono);font-size:var(--t-xs);color:var(--tx);}
.pgb-pista{height:6px;border-radius:var(--pill);background:var(--pgbg);overflow:hidden;}
.pgb-riempimento{
  height:100%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--done-piano),color-mix(in srgb,var(--done-piano) 70%,var(--B)));
  transition:width .5s cubic-bezier(.32,.72,0,1);
}

/* quota */
.quota{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  font-size:var(--t-xs);color:var(--mu);
  padding:var(--s3) var(--s4);border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--card);
}
.quota .pgb{flex:1;min-width:140px;margin:0;}
.quota--avviso .pgb-riempimento{background:var(--dec-piano);}
.quota--esaurita .pgb-riempimento{background:var(--err);}

/* ══════════════════════════════════════════════════════════
   C. CONTENITORI
   ══════════════════════════════════════════════════════════ */

/* --- Scheda area: il cuore della plancia ------------------
   Dice in tre righe: cosa è, cosa puoi farci, com'è l'accesso. */
.aree{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);}
.area{
  display:flex;flex-direction:column;gap:var(--s2);
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);padding:var(--s4);
  text-decoration:none;
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.area:hover{box-shadow:var(--ombra-2);border-color:var(--ln-forte);transform:translateY(-2px);}
.area-testa{display:flex;align-items:center;gap:var(--s3);}
.area-icona{
  width:34px;height:34px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--ln);color:var(--dec);
}
.area-icona svg{width:17px;height:17px;}
.area h3{font-size:var(--t-lead);}
.area .stato{margin-left:auto;}
.area p{font-size:var(--t-sm);color:var(--mu);}
.area .azione{
  margin-top:auto;padding-top:var(--s3);
  font-size:var(--t-xs);font-weight:700;color:var(--dec);
  display:inline-flex;align-items:center;gap:6px;
}
.area .azione svg{width:14px;height:14px;flex:none;transition:transform var(--ease);}
.area:hover .azione svg{transform:translateX(3px);}
.area--bloccata{border-style:dashed;box-shadow:none;}
.area--bloccata .area-icona{color:var(--mu);}
.area--bloccata .azione{color:var(--mu);}

/* --- Chip di filtro --------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.chip{
  min-height:38px;padding:0 var(--s4);
  border-radius:var(--pill);border:1px solid var(--ln-forte);
  background:var(--cs);box-shadow:var(--ombra-1);
  font-size:var(--t-xs);font-weight:600;color:var(--mu);
  display:inline-flex;align-items:center;gap:7px;
  transition:var(--ease);cursor:pointer;text-decoration:none;
}
.chip:hover{color:var(--tx);border-color:var(--mu);}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{
  color:var(--tx);font-weight:700;
  background:var(--dec-bg);
  border-color:color-mix(in srgb,var(--dec-piano) 50%,transparent);
  box-shadow:none;
}
.chip[aria-pressed="true"]::before{
  content:"";width:7px;height:7px;border-radius:var(--pill);background:var(--dec-piano);
}

/* --- Ricerca ---------------------------------------------- */
.ricerca{position:relative;}
.ricerca input{
  padding-left:46px;min-height:56px;font-size:var(--t-h3);
  border-radius:var(--rs);box-shadow:var(--ombra-1);
}
.ricerca input:focus{box-shadow:var(--ombra-2);}
.ricerca svg{
  position:absolute;left:16px;top:calc(50% - 9px);
  width:18px;height:18px;color:var(--mu);pointer-events:none;
}
.ricerca-suggerimenti{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);align-items:center;}
.ricerca-suggerimenti .occhiello{margin-right:var(--s1);}

/* --- Elenco risultati / domande --------------------------- */
.risultati{display:grid;gap:var(--s3);}
.risultati > li > a{
  display:block;padding:var(--s4);text-decoration:none;
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.risultati > li > a:hover{box-shadow:var(--ombra-2);border-color:var(--ln-forte);transform:translateY(-1px);}
.risultati .titolo{display:block;font-size:var(--t-lead);font-weight:700;margin-bottom:6px;letter-spacing:-.01em;}
.risultati .estratto{display:block;font-size:var(--t-sm);color:var(--mu);max-width:70ch;}
.risultati .riga-meta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s3);}

/* catalogo dei temi */
.temi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3);}
.tema{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s4);text-decoration:none;
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.tema:hover{box-shadow:var(--ombra-2);border-color:var(--ln-forte);transform:translateY(-1px);}
.tema .nome{font-size:var(--t-sm);font-weight:700;}
.tema .quante{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);}
.tema .barra{height:3px;border-radius:2px;background:var(--pgbg);overflow:hidden;margin-top:2px;}
.tema .barra i{display:block;height:100%;background:var(--dec-piano);opacity:.75;}

/* domande affini */
.affini{display:grid;gap:var(--s2);}
.affini a{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;
  transition:var(--ease);
}
.affini a:hover{border-color:var(--ln-forte);box-shadow:var(--ombra-1);}
.affini a .area-tema{margin-left:auto;font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);white-space:nowrap;font-weight:400;}

.briciole{font-size:var(--t-xs);color:var(--mu);display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.briciole a{text-decoration:none;}
.briciole a:hover{text-decoration:underline;text-underline-offset:3px;}
.briciole span[aria-hidden]{opacity:.5;}

/* --- Invito al piano -------------------------------------- */
.invito{
  border:1.5px dashed color-mix(in srgb,var(--dec-piano) 45%,var(--ln-forte));
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--dec-bg),transparent 70%);
  padding:var(--s5);
  margin:var(--s5) 0;
}
.invito .occhiello{display:block;margin-bottom:var(--s2);color:var(--dec);}
.invito h3{font-size:var(--t-h3);margin-bottom:var(--s2);}
.invito p{font-size:var(--t-sm);color:var(--mu);max-width:62ch;margin-bottom:var(--s4);}

/* --- Avvisi ------------------------------------------------ */
.avviso{
  display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--ln);border-left-width:3px;
  border-radius:var(--rs);padding:var(--s3) var(--s4);
  background:var(--cs);box-shadow:var(--ombra-1);
  font-size:var(--t-sm);margin:var(--s4) 0;
}
.avviso p{max-width:64ch;color:var(--mu);}
.avviso strong{display:block;color:var(--tx);margin-bottom:2px;}
.avviso--errore{border-left-color:var(--err);background:var(--err-bg);}
.avviso--fatto{border-left-color:var(--done-piano);background:var(--done-bg);}
.avviso--decisione{border-left-color:var(--dec-piano);background:var(--dec-bg);}
.avviso-segno{
  width:22px;height:22px;flex:none;border-radius:var(--pill);
  display:grid;place-items:center;margin-top:1px;
  font-family:var(--mono);font-weight:500;font-size:var(--t-3xs);
  background:var(--cs);border:1px solid var(--ln);
}
.avviso--errore .avviso-segno{color:var(--err);}
.avviso--fatto .avviso-segno{color:var(--done);}
.avviso--decisione .avviso-segno{color:var(--dec);}

/* --- Stato vuoto ------------------------------------------- */
.vuoto{
  border:1.5px dashed var(--ln-forte);
  border-radius:var(--r);
  background:var(--card);
  padding:var(--s6) var(--s5);
}
.vuoto h2,.vuoto h3{font-size:var(--t-h3);margin-bottom:var(--s2);}
.vuoto p{font-size:var(--t-sm);color:var(--mu);max-width:58ch;margin-bottom:var(--s4);}

/* --- Dialogo dell'assistente ------------------------------- */
.dialogo{display:flex;flex-direction:column;gap:var(--s4);}
.battuta{max-width:88%;}
.battuta .chi{
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
  margin-bottom:5px;display:flex;align-items:center;gap:6px;
}
.battuta .testo{
  font-size:var(--t-sm);line-height:1.65;
  border:1px solid var(--ln);border-radius:var(--rs);
  padding:var(--s3) var(--s4);background:var(--cs);
  box-shadow:var(--ombra-1);
}
.battuta--utente{align-self:flex-end;}
.battuta--utente .chi{justify-content:flex-end;}
.battuta--utente .testo{
  background:var(--dec-bg);
  border-color:color-mix(in srgb,var(--dec-piano) 26%,transparent);
}

/* i tre puntini: il segno che l'assistente sta lavorando */
.puntini{display:inline-flex;gap:4px;align-items:center;}
.puntini i{
  width:5px;height:5px;border-radius:var(--pill);background:var(--dec-piano);
  animation:salta 1.2s infinite ease-in-out;
}
.puntini i:nth-child(2){animation-delay:.15s;}
.puntini i:nth-child(3){animation-delay:.3s;}
@keyframes salta{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-4px);opacity:1;}}

.proposta{
  border:1px solid color-mix(in srgb,var(--dec-piano) 34%,var(--ln));
  border-radius:var(--r);padding:var(--s5);margin-top:var(--s3);
  background:var(--cs);box-shadow:var(--ombra-2);
}
.proposta .perche{
  font-size:var(--t-sm);color:var(--mu);
  border-left:3px solid var(--dec-piano);padding-left:var(--s4);margin:var(--s4) 0;
}
.proposta .perche strong{color:var(--tx);}
.composizione{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) 0;}
.composizione input{width:20px;height:20px;min-height:0;accent-color:var(--dec-piano);box-shadow:none;}

/* --- Note -------------------------------------------------- */
.note{display:grid;gap:var(--s3);}
.nota{
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);padding:var(--s4);
}
.nota-origine{
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s3);
}
.nota-origine a{color:var(--tx);text-decoration:none;text-underline-offset:3px;}
.nota-origine a:hover{text-decoration:underline;}
.nota-testo{font-size:var(--t-sm);max-width:70ch;white-space:pre-line;}
.nota-azioni{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;}

/* --- Piani ------------------------------------------------- */
.piani{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s4);}
.piano{
  border:1px solid var(--ln-forte);border-radius:var(--r);
  background:var(--cs);box-shadow:var(--ombra-1);
  padding:var(--s5);display:flex;flex-direction:column;
}
.piano--attuale{border-color:var(--done-piano);box-shadow:var(--ombra-1), inset 3px 0 0 var(--done-piano);}
.piano--pro{
  background:linear-gradient(180deg,var(--dec-bg),transparent 40%),var(--cs);
  border-color:color-mix(in srgb,var(--dec-piano) 40%,transparent);
}
.piano h2{font-size:var(--t-h3);margin-bottom:var(--s1);}
.piano .prezzo{font-family:var(--mono);font-size:var(--t-h2);margin:var(--s3) 0 var(--s1);}
.piano .prezzo small{font-size:var(--t-xs);color:var(--mu);font-family:var(--sans);}
.piano .puoi{margin:var(--s4) 0;flex:1;}
.piano .puoi li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2);font-size:var(--t-sm);}
.piano .puoi li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:5px;
  border:solid var(--done-piano);border-width:0 0 2px 2px;transform:rotate(-45deg);
}
.piano .puoi li[data-escluso]::before{
  border-width:0 0 2px 0;transform:none;border-color:var(--mu);top:.72em;width:11px;
}
.piano .puoi li[data-escluso]{color:var(--mu);}

/* --- Tabs --------------------------------------------------- */
[role="tablist"]{
  display:inline-flex;flex-wrap:wrap;gap:2px;
  padding:3px;border-radius:var(--rs);
  background:var(--card);border:1px solid var(--ln);
  margin-bottom:var(--s5);
}
[role="tab"]{
  min-height:36px;padding:0 var(--s4);border-radius:var(--rb);
  font-size:var(--t-sm);font-weight:600;color:var(--mu);
  transition:var(--ease);cursor:pointer;
}
[role="tab"]:hover{color:var(--tx);}
[role="tab"][aria-selected="true"]{
  color:var(--tx);background:var(--cs);box-shadow:var(--ombra-1);font-weight:700;
}

/* --- FAQ ---------------------------------------------------- */
.faq{display:grid;gap:var(--s2);}
.faq details{
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--cs);box-shadow:var(--ombra-1);
  transition:border-color var(--ease);
}
.faq details[open]{border-color:var(--ln-forte);}
.faq summary{
  cursor:pointer;list-style:none;
  padding:var(--s4) var(--s7) var(--s4) var(--s4);position:relative;
  font-size:var(--t-lead);font-weight:600;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:var(--s4);top:calc(50% - 4px);
  width:8px;height:8px;border:solid var(--mu);border-width:0 2px 2px 0;
  transform:rotate(45deg);transition:transform var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq details p{padding:0 var(--s4) var(--s4);color:var(--mu);font-size:var(--t-sm);max-width:70ch;}

/* --- Sblocco: l'unico movimento orchestrato ----------------- */
@keyframes sblocco{
  0%{opacity:.3;transform:translateY(10px) scale(.98);}
  100%{opacity:1;transform:none;}
}
.si-sblocca .passo-apri{animation:sblocco .5s cubic-bezier(.32,.72,0,1) both;}

/* --- Mobile ------------------------------------------------- */
@media (max-width:768px){
  .spina{padding-left:var(--s6);}
  .spina::before{left:11px;}
  .nodo{left:calc(var(--s6) * -1);width:24px;height:24px;top:12px;}
  .gate{margin-left:calc(var(--s6) * -1);padding-left:var(--s5);}
  .gate::before{left:-9px;width:18px;height:18px;top:calc(50% - 9px);}
  .battuta{max-width:94%;}
  .ricerca input{min-height:50px;font-size:var(--t-lead);}
  .temi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .aree{grid-template-columns:1fr;}
  .decisione-corpo,.decisione-testa,.decisione-piede{padding-left:var(--s4);padding-right:var(--s4);}
}

/* ============================================================
   Da telefono ogni comando è grande almeno 44px.
   Sta in fondo al foglio perché deve vincere sulle regole
   dei singoli componenti definite sopra.
   ============================================================ */
@media (max-width:768px){
  .chip{min-height:44px;padding:0 var(--s4);}
  .aggiungi{min-height:44px;padding:0 var(--s4);}
  .vista-commuta button{min-height:44px;}
  .ramo-riga .ordina button{width:44px;height:44px;}
  [role="tab"]{min-height:44px;}
  .faq summary{padding-top:var(--s4);padding-bottom:var(--s4);}
  .nota-azioni .btn,.passo-azioni .btn,.decisione-piede .btn,.zona-piede .btn{min-height:44px;}
}

/* ════════════════════════════════════════════════════════════
   V4 — I pezzi nuovi
   1. percorso lineare      la mappa orizzontale con il "sei qui"
   2. area di lavoro        chat a sinistra, percorso che si costruisce a destra
   3. suggeriti             carte con il motivo e il bottone Aggiungi
   4. il mio piano          composizione: includi, escludi, riordina
   5. percorso correlato    l'aggancio fra una domanda e un percorso
   ════════════════════════════════════════════════════════════ */

/* ── 1. PERCORSO LINEARE ───────────────────────────────────── */
.lineare{
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--cs);box-shadow:var(--ombra-1);
  overflow:hidden;
}
.lineare-dove{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline;
  padding:var(--s4);border-bottom:1px solid var(--ln);background:var(--card);
  font-size:var(--t-sm);
}
.lineare-dove strong{color:var(--tx);}
.lineare-dove .conteggio{margin-left:auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--mu);}

.lineare-pista{
  display:flex;align-items:stretch;gap:var(--s2);
  padding:var(--s5) var(--s4);
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.lineare-pista::-webkit-scrollbar{height:8px;}
.lineare-pista::-webkit-scrollbar-thumb{background:var(--ln-forte);border-radius:var(--pill);}

.tappa-l{
  position:relative;flex:0 0 156px;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s3);border-radius:var(--rs);
  border:1px solid var(--ln);background:var(--zona);
  text-align:left;text-decoration:none;
  transition:var(--ease);
}
.tappa-l:hover{border-color:var(--ln-forte);box-shadow:var(--ombra-1);}
/* il filo che unisce le tappe */
.tappa-l::after{
  content:"";position:absolute;right:calc(var(--s2) * -1 - 1px);top:26px;
  width:calc(var(--s2) + 2px);height:2px;background:var(--ln-forte);
}
.tappa-l:last-child::after{display:none;}

.tappa-l .segno{
  width:22px;height:22px;border-radius:var(--pill);
  display:grid;place-items:center;
  border:2px solid var(--mu);background:var(--cs);
  font-family:var(--mono);font-size:11px;color:var(--mu);
}
.tappa-l .nome{font-size:var(--t-xs);font-weight:700;line-height:1.35;}
.tappa-l .stato-t{font-size:var(--t-3xs);color:var(--mu);}

.tappa-l--fatto{background:var(--done-bg);border-color:color-mix(in srgb,var(--done) 26%,transparent);}
.tappa-l--fatto .segno{border-color:var(--done-piano);background:var(--done-piano);color:var(--cs);}
.tappa-l--fatto::after{background:var(--done-piano);}
.tappa-l--for .segno{border-color:var(--for-piano);color:var(--for);}
.tappa-l--dec .segno{border-color:var(--dec-piano);color:var(--dec);border-radius:4px;transform:rotate(45deg);}
.tappa-l--dec .segno > span{display:block;transform:rotate(-45deg);}
.tappa-l--chiuso{border-style:dashed;background:transparent;}
.tappa-l--chiuso .nome{color:var(--mu);}
.tappa-l--chiuso .segno{border-style:dashed;}

/* dove sei adesso: l'unica tappa con l'accento */
.tappa-l--qui{
  border-color:var(--dec-piano);background:var(--dec-bg);
  box-shadow:var(--ombra-2);flex-basis:190px;
}
.tappa-l--qui .segno{border-color:var(--dec-piano);color:var(--dec);animation:battito 2.4s ease-in-out infinite;}
.tappa-l--qui .nome{font-size:var(--t-sm);}
.qui-etichetta{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:var(--t-3xs);font-weight:700;color:var(--dec);
  background:var(--cs);border:1px solid color-mix(in srgb,var(--dec-piano) 40%,transparent);
  border-radius:var(--pill);padding:1px 8px;
}

/* il gate dentro la pista */
.tappa-l--gate{
  flex-basis:130px;border-color:var(--dec-piano);border-width:1.5px;
  background:linear-gradient(180deg,var(--dec-bg),transparent 70%),var(--cs);
}
.tappa-l--gate .segno{
  border-radius:4px;transform:rotate(45deg);
  border-color:var(--dec-piano);background:var(--dec-piano);
}
.tappa-l--gate .segno > span{display:none;}

.lineare-piede{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  padding:var(--s3) var(--s4);border-top:1px solid var(--ln);background:var(--card);
}

/* commutatore lineare / albero */
.vista-commuta{display:inline-flex;gap:2px;padding:3px;border-radius:var(--rs);
  background:var(--card);border:1px solid var(--ln);}
.vista-commuta button{
  min-height:34px;padding:0 var(--s3);border-radius:var(--rb);
  font-size:var(--t-xs);font-weight:600;color:var(--mu);transition:var(--ease);
}
.vista-commuta button[aria-pressed="true"]{background:var(--cs);color:var(--tx);font-weight:700;box-shadow:var(--ombra-1);}

/* ── 2. AREA DI LAVORO CON LA CHAT ─────────────────────────── */
.lavoro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:var(--s5);align-items:start;
}
.lavoro--sola{grid-template-columns:minmax(0,860px);justify-content:center;}

.conversazione{
  display:flex;flex-direction:column;
  background:var(--zona);border:1px solid var(--ln);border-radius:var(--r);
  box-shadow:var(--ombra-1);overflow:hidden;
  min-height:min(72vh,680px);
}
.conv-testa{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--ln);background:var(--card);
}
.conv-testa .icona{
  width:36px;height:36px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;color:#160f04;background:var(--gradiente);
}
.conv-testa .icona svg{width:18px;height:18px;}
.conv-testa h1,.conv-testa h2{font-size:var(--t-h3);}
.conv-testa p{font-size:var(--t-xs);color:var(--mu);}
.conv-corpo{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);}
.conv-piede{border-top:1px solid var(--ln);padding:var(--s4);background:var(--cs);}

.scrivi{display:flex;gap:var(--s2);align-items:flex-end;}
.scrivi textarea{
  min-height:52px;max-height:160px;resize:none;border-radius:var(--rs);
  font-size:var(--t-body);
}
.scrivi .invia{
  width:52px;height:52px;flex:none;border-radius:var(--rs);
  background:var(--dec-piano);color:#160f04;
  display:grid;place-items:center;border:none;
  box-shadow:0 1px 2px rgba(160,80,6,.25), 0 6px 18px rgba(224,120,18,.26);
  transition:var(--ease);
}
.scrivi .invia:hover{background:#d47a0c;}
.scrivi .invia svg{width:20px;height:20px;}
.scrivi-nota{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s3);
  font-size:var(--t-xs);color:var(--mu);}

/* scorciatoie sopra il campo, quando la conversazione è vuota */
.avvii{display:grid;gap:var(--s2);}
.avvio{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s4);text-align:left;text-decoration:none;
  background:var(--cs);border:1px solid var(--ln);border-radius:var(--rs);
  box-shadow:var(--ombra-1);transition:var(--ease);
}
.avvio:hover{border-color:var(--dec-piano);box-shadow:var(--ombra-2);transform:translateY(-1px);}
.avvio .segno{
  width:30px;height:30px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;background:var(--dec-bg);color:var(--dec);
}
.avvio .segno svg{width:16px;height:16px;}
.avvio .t{font-size:var(--t-sm);font-weight:700;display:block;}
.avvio .s{font-size:var(--t-xs);color:var(--mu);display:block;margin-top:2px;}

/* colonna destra: il percorso che si costruisce */
.cantiere{
  position:sticky;top:calc(var(--topbar-h) + var(--s5));
  background:var(--zona);border:1px solid var(--ln);border-radius:var(--r);
  box-shadow:var(--ombra-1);overflow:hidden;
}
.cantiere-testa{padding:var(--s4) var(--s5);border-bottom:1px solid var(--ln);background:var(--card);}
.cantiere-testa h2{font-size:var(--t-h3);}
.cantiere-testa p{font-size:var(--t-xs);color:var(--mu);margin-top:2px;}
.cantiere-corpo{padding:var(--s4) var(--s5);max-height:60vh;overflow-y:auto;}
.cantiere-piede{padding:var(--s3) var(--s5);border-top:1px solid var(--ln);background:var(--card);
  display:flex;gap:var(--s2);flex-wrap:wrap;}

/* ── 3. SUGGERITI ──────────────────────────────────────────── */
.suggeriti{display:grid;gap:var(--s3);}
.suggerito{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border-radius:var(--rs);
  border:1px solid color-mix(in srgb,var(--dec-piano) 26%,var(--ln));
  background:linear-gradient(180deg,var(--dec-bg),transparent 60%),var(--cs);
  box-shadow:var(--ombra-1);
}
.suggerito .corpo{flex:1;min-width:0;}
.suggerito h3{font-size:var(--t-sm);margin-bottom:2px;}
.suggerito .motivo{
  font-size:var(--t-xs);color:var(--dec);font-weight:600;margin-bottom:4px;
}
.suggerito p{font-size:var(--t-xs);color:var(--mu);}
.suggerito .meta{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);margin-top:6px;}

/* il bottone aggiungi/aggiunto: stesso oggetto in due stati */
.aggiungi{
  flex:none;min-height:38px;padding:0 var(--s3);
  border-radius:var(--rb);border:1px solid color-mix(in srgb,var(--dec-piano) 45%,transparent);
  background:var(--dec-bg);color:var(--dec);
  font-size:var(--t-xs);font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  transition:var(--ease);cursor:pointer;white-space:nowrap;
}
.aggiungi:hover{background:color-mix(in srgb,var(--dec-piano) 18%,transparent);}
.aggiungi svg{width:14px;height:14px;}
.aggiungi[aria-pressed="true"]{
  background:var(--done-bg);color:var(--done);
  border-color:color-mix(in srgb,var(--done) 34%,transparent);
}

/* ── 4. IL MIO PIANO ───────────────────────────────────────── */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3);}
.numero{
  border:1px solid var(--ln);border-radius:var(--rs);background:var(--cs);
  box-shadow:var(--ombra-1);padding:var(--s4);
}
/* il numero è pieno, non in gradiente: il testo in gradiente non regge
   il contrasto minimo, e il gradiente resta riservato all'elemento forte */
.numero .n{
  font-family:var(--mono);font-size:26px;font-weight:500;line-height:1;color:var(--tx);
}
.numero{border-top:3px solid var(--dec-piano);}
.numero .l{font-size:var(--t-xs);color:var(--mu);margin-top:6px;display:block;}

.piano-percorso{
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--cs);box-shadow:var(--ombra-1);margin-bottom:var(--s3);
  overflow:hidden;
}
.piano-testa{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:var(--s4);cursor:pointer;width:100%;text-align:left;background:none;
}
.piano-testa:hover{background:var(--card);}
.piano-testa h3{font-size:var(--t-sm);}
.piano-testa .meta{font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);display:block;margin-top:2px;}
.piano-testa .freccia{
  margin-left:auto;width:20px;height:20px;flex:none;color:var(--mu);
  transition:transform var(--ease);
}
.piano-percorso[data-aperto="si"] .piano-testa .freccia{transform:rotate(180deg);}
.piano-rami{border-top:1px solid var(--ln);padding:var(--s3) var(--s4) var(--s4);}

.ramo-riga{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--ln);
}
.ramo-riga:last-child{border-bottom:0;}
.ramo-riga .titolo{flex:1;min-width:0;font-size:var(--t-sm);font-weight:600;}
.ramo-riga .titolo small{display:block;font-weight:400;color:var(--mu);font-size:var(--t-xs);margin-top:2px;}
.ramo-riga[data-incluso="no"] .titolo{color:var(--mu);}
.ramo-riga .ordina{display:flex;gap:2px;}
.ramo-riga .ordina button{
  width:32px;height:32px;border-radius:var(--rb);border:1px solid var(--ln);
  color:var(--mu);display:grid;place-items:center;transition:var(--ease);
}
.ramo-riga .ordina button:hover:not([disabled]){color:var(--tx);border-color:var(--ln-forte);background:var(--card);}
.ramo-riga .ordina button[disabled]{opacity:.35;cursor:not-allowed;}
.ramo-riga .ordina svg{width:14px;height:14px;}

/* ── 5. PERCORSO CORRELATO A UNA DOMANDA ───────────────────── */
.correlato{
  border:1.5px solid color-mix(in srgb,var(--dec-piano) 40%,var(--ln));
  border-radius:var(--r);overflow:hidden;
  background:var(--cs);box-shadow:var(--ombra-2);
  margin:var(--s6) 0;
}
.correlato-testa{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  background:linear-gradient(180deg,var(--dec-bg),transparent),var(--card);
  border-bottom:1px solid var(--ln);
}
.correlato-testa .occhiello{color:var(--dec);width:100%;}
.correlato-testa h2{font-size:var(--t-h3);}
.correlato-corpo{padding:var(--s5);}
.correlato-corpo > p{font-size:var(--t-sm);color:var(--mu);max-width:64ch;}
.correlato-piede{padding:var(--s3) var(--s5);border-top:1px solid var(--ln);background:var(--card);
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}

/* anteprima della struttura: titoli sì, contenuti no */
.struttura{display:grid;gap:6px;margin:var(--s4) 0;}
.struttura li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--rb);
  background:var(--card);font-size:var(--t-xs);
}
.struttura li .n{font-family:var(--mono);color:var(--mu);}
.struttura li .t{flex:1;min-width:0;}
.struttura li[data-qui="si"]{
  background:var(--dec-bg);font-weight:700;
  box-shadow:inset 2px 0 0 var(--dec-piano);
}
/* quando è bloccato, la struttura si vede sfocata: c'è, non si apre */
.correlato--bloccato .struttura li .t{filter:blur(0);}
.correlato--bloccato{border-style:dashed;box-shadow:var(--ombra-1);}

/* scelta di dove innestare */
.destinazioni{display:grid;gap:var(--s3);}
.destinazione{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border:1px solid var(--ln-forte);border-radius:var(--rs);
  background:var(--cs);text-align:left;width:100%;transition:var(--ease);cursor:pointer;
}
.destinazione:hover{border-color:var(--dec-piano);background:var(--dec-bg);}
.destinazione[aria-pressed="true"]{border-color:var(--dec-piano);background:var(--dec-bg);box-shadow:var(--ombra-1);}
.destinazione .segno{
  width:32px;height:32px;flex:none;border-radius:var(--rb);
  display:grid;place-items:center;background:var(--card);color:var(--dec);
  border:1px solid var(--ln);
}
.destinazione .segno svg{width:16px;height:16px;}
.destinazione .t{font-size:var(--t-sm);font-weight:700;display:block;}
.destinazione .s{font-size:var(--t-xs);color:var(--mu);display:block;margin-top:2px;}

/* ── responsive dei pezzi nuovi ────────────────────────────── */
@media (max-width:1100px){
  .lavoro{grid-template-columns:minmax(0,1fr);}
  .cantiere{position:static;}
}
@media (max-width:768px){
  .conversazione{min-height:auto;}
  .conv-corpo{padding:var(--s4);}
  .tappa-l{flex-basis:150px;}
  .tappa-l--qui{flex-basis:178px;}
  .numeri{grid-template-columns:1fr 1fr;}
  .ramo-riga{flex-wrap:wrap;}
  .ramo-riga .titolo{flex-basis:100%;}
}

/* ════════════════════════════════════════════════════════════
   Ultimo blocco del foglio: da telefono ogni comando arriva a
   44px. Sta qui in fondo perché deve vincere su tutte le regole
   dei componenti scritte sopra.
   ════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .aggiungi{min-height:44px;padding:0 var(--s4);}
  .vista-commuta button{min-height:44px;}
  .ramo-riga .ordina button{width:44px;height:44px;}
  .ramo-riga{gap:var(--s2);}
}

/* ════════════════════════════════════════════════════════════
   V5 — la pista semplificata
   Tre grandezze invece di una: le tappe fatte e quelle ancora
   chiuse diventano segni piccoli, la tappa dove sei resta una
   scheda leggibile. Meno cose da guardare, stessa informazione.
   ════════════════════════════════════════════════════════════ */
.lineare--semplice .lineare-pista{
  align-items:center;gap:0;padding:var(--s5) var(--s4);
}
.lineare--semplice .tappa-l{
  flex:0 0 auto;border:none;background:none;box-shadow:none;
  padding:0;gap:0;align-items:center;
}
.lineare--semplice .tappa-l::after{display:none;}
.lineare--semplice .tappa-l:hover{box-shadow:none;}

/* il segno, unico elemento delle tappe minori */
.lineare--semplice .tappa-l .segno{
  width:34px;height:34px;font-size:var(--t-xs);font-weight:700;
  transition:var(--ease);
}
.lineare--semplice .tappa-l:hover .segno{border-color:var(--tx);color:var(--tx);}
.lineare--semplice .tappa-l .nome,
.lineare--semplice .tappa-l .stato-t{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}

/* il filo che unisce */
.lineare--semplice .filo{
  flex:0 0 22px;height:2px;border-radius:2px;background:var(--ln-forte);
}
.lineare--semplice .filo--fatto{background:var(--done-piano);}

/* la tappa dove sei: l'unica scheda intera */
.lineare--semplice .tappa-l--qui{
  flex:0 0 auto;max-width:260px;
  border:1.5px solid var(--dec-piano);background:var(--dec-bg);
  border-radius:var(--rs);box-shadow:var(--ombra-2);
  padding:var(--s3) var(--s4);gap:var(--s3);
  flex-direction:row;align-items:center;
  margin:0 var(--s2);
}
.lineare--semplice .tappa-l--qui .nome,
.lineare--semplice .tappa-l--qui .stato-t{
  position:static;width:auto;height:auto;clip-path:none;overflow:visible;
}
.lineare--semplice .tappa-l--qui .nome{font-size:var(--t-sm);}
.lineare--semplice .tappa-l--qui .testo-qui{display:block;min-width:0;}
.lineare--semplice .tappa-l--qui .qui-etichetta{margin-bottom:2px;}

/* il gate resta riconoscibile anche da piccolo */
.lineare--semplice .tappa-l--gate .segno{width:30px;height:30px;}

.lineare-dove{font-size:var(--t-body);}
.lineare--semplice .lineare-piede{justify-content:flex-end;}

@media (max-width:768px){
  .lineare--semplice .filo{flex-basis:14px;}
  .lineare--semplice .tappa-l--qui{max-width:210px;}
}

/* ════════════════════════════════════════════════════════════
   V5 — il piano, più calmo
   Una riga di numeri invece di quattro riquadri, e i suggeriti
   in fondo come una cosa sola invece che come scheda concorrente.
   ════════════════════════════════════════════════════════════ */
.riga-numeri{
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:baseline;
  padding:var(--s4) var(--s5);
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--card);margin-bottom:var(--s5);
}
.riga-numeri > span{display:inline-flex;align-items:baseline;gap:7px;font-size:var(--t-sm);color:var(--mu);}
.riga-numeri b{font-family:var(--mono);font-size:var(--t-h3);color:var(--tx);font-weight:500;}

/* il percorso nel piano: una riga per volta, senza fronzoli */
.piano-percorso{margin-bottom:var(--s3);}
.piano-testa{gap:var(--s3);align-items:flex-start;}
.piano-testa .avanzamento-mini{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--mu);margin-top:4px;
}
.piano-testa .avanzamento-mini .barra{
  width:70px;height:4px;border-radius:2px;background:var(--pgbg);overflow:hidden;
}
.piano-testa .avanzamento-mini .barra i{display:block;height:100%;background:var(--done-piano);}

/* la riga dei numeri: cifra grande, etichetta piccola accanto */
.riga-numeri .voce{display:inline-flex;align-items:baseline;gap:7px;}
.riga-numeri .n{font-family:var(--mono);font-size:var(--t-h3);color:var(--tx);font-weight:500;}
.riga-numeri .l{font-size:var(--t-sm);color:var(--mu);}

/* il titolo che apre una sezione fuori dalle zone */
.titolo-sezione{font-size:var(--t-h3);margin-bottom:4px;}

/* il catalogo: stesse carte dei suggeriti, ma senza il tono della proposta */
.suggerito--quieto{background:var(--cs);border-color:var(--ln);}
.suggerito--quieto h3 a{text-decoration:none;color:inherit;}
.suggerito--quieto h3 a:hover{text-decoration:underline;}

/* la riga di Zid dentro una pagina: consiglio, non comando */
.zid-riga--quieta{background:var(--card);border-style:dashed;border-color:var(--ln-forte);}
.zid-riga .azioni{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);}

/* Zid dentro uno stato vuoto */
.vuoto .zid{margin-bottom:var(--s3);}

@media (max-width:768px){
  .riga-numeri{gap:var(--s3) var(--s4);padding:var(--s3) var(--s4);}
  .riga-numeri .n{font-size:var(--t-lead);}
}

/* dentro una zona "per capire" la misura è blu, non arancione:
   l'arancione resta la lingua delle decisioni */
.zona--capire .tema .barra i{background:var(--for);}

/* la chiusa decisionale: ogni contenuto finisce dicendo a cosa serve */
.chiusa-decisionale{
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--ln);
  font-size:var(--t-sm);color:var(--mu);
}
.chiusa-decisionale strong{color:var(--dec);}

/* da telefono anche i segni della pista sono toccabili */
@media (max-width:768px){
  .lineare--semplice .tappa-l{min-height:44px;justify-content:center;}
  .lineare--semplice .tappa-l .segno{width:34px;height:34px;}
  .lineare--semplice .tappa-l--gate .segno{width:32px;height:32px;}
  .campo input[type="checkbox"],.consenso input[type="checkbox"]{width:22px;height:22px;flex:none;}
  .consenso{min-height:44px;align-items:center;}
}

/* dentro la tappa «Sei qui» ogni informazione sta sulla sua riga */
.lineare--semplice .tappa-l--qui .testo-qui .nome{display:block;margin-top:2px;}
.lineare--semplice .tappa-l--qui .testo-qui .stato-t{display:block;}

/* sotto il prezzo: come è composto, e per chi */
.prezzo-iva{
  margin:calc(var(--s3) * -1) 0 var(--s4);
  padding:var(--s3) var(--s4);
  border-radius:var(--rb);background:var(--card);
  display:grid;gap:6px;
}
.prezzo-iva p{font-size:var(--t-xs);color:var(--mu);line-height:1.6;}
.prezzo-iva strong{color:var(--tx);}

/* le note respirano: una nota per volta, staccata dalla successiva */
.nota{margin-bottom:var(--s5);}
.nota:last-child{margin-bottom:0;}

/* ── l'albero da telefono: impaginato in verticale, niente scorrimento ── */
.albero.albero--stretto{overflow-x:visible;}
.albero.albero--stretto > svg{min-width:0;width:100%;height:auto;}
.albero--stretto text{font-size:11px;}
.albero--stretto .ramo-etichetta text{font-size:11.5px;}