/* ============================================================
   UpZid V6 — il carattere
   Si carica per ultimo, dopo upzid.css, componenti.css e zid.css
   (e, nel sito, dopo sito.css). Non cambia nessuna funzione e
   nessun attributo letto dallo script: cambia la grammatica.

   Le cinque regole del carattere
   1. I titoli hanno voce: Petrona per ciò che nomina, DM Sans per
      ciò che si legge, DM Mono solo per ciò che si misura.
   2. Tessere, non scatole: superfici piene con raggio morbido, senza
      bordo e senza ombra. L'ombra è solo di ciò che galleggia
      (pannelli, cassetto, dimostrazione, menu).
   3. Un solo campo arancio pieno per schermata: il punto della
      decisione nell'app, l'iscrizione alla lista nel sito.
   4. «Sei qui» è caldo, mai un blocco nero o bianco: tinta arancio
      chiara, segno pieno, parola.
   5. Il tratteggio separa e unisce: separatori di sezione e il filo
      che lega i passi numerati. Altrove la linea è piena e leggera.
   I token stanno in upzid.css (fondo, superfici, testi, tinte).
   ============================================================ */

:root{
  --r-tessera:22px;
  --r-scheda:16px;
  --rs:12px; --rb:10px;
  --qui-fondo:#fff3e3;
  --qui-bordo:rgba(224,120,18,.45);
  --tessera-tenue:#eceef2;
  --tessera-piena:#f18e17;
  --su-arancio:#0b1220;
  --su-arancio-tenue:#3a2306;
  --linea-arancio:rgba(11,18,32,.2);
  --su-inchiostro:#c9ced8;
  --segmento-binario:#eceef2;
  --segmento-scelto:#ffffff;
  --selezione:rgba(241,142,23,.24);
}
html[data-theme="dark"]{
  --qui-fondo:rgba(241,142,23,.10);
  --qui-bordo:rgba(241,142,23,.40);
  --tessera-tenue:#121418;
  --linea-arancio:rgba(11,18,32,.22);
  --su-inchiostro:#3b4250;
  --segmento-binario:#121418;
  --segmento-scelto:#23262c;
  --selezione:rgba(241,142,23,.32);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --qui-fondo:rgba(241,142,23,.10); --qui-bordo:rgba(241,142,23,.40);
    --tessera-tenue:#121418; --su-inchiostro:#3b4250;
    --segmento-binario:#121418; --segmento-scelto:#23262c;
    --selezione:rgba(241,142,23,.32);
  }
}

/* ============================================================
   1. Base e tipografia
   ============================================================ */
body{font-size:15.5px;}
::selection{background:var(--selezione);color:var(--tx);}
textarea,input{caret-color:var(--dec-piano);}
p,dd,li{text-wrap:pretty;}

/* ciò che nomina: Petrona */
h1,h2,
.zona-testa h2,.zona-testa h3,
.vuoto h2,.vuoto h3,.invito h3,
.pannello-testa h2{
  font-family:var(--serif);font-weight:500;letter-spacing:-.012em;line-height:1.15;text-wrap:balance;
}
h1{font-weight:450;}
.intestazione h1{font-size:38px;line-height:1.08;max-width:22ch;margin-bottom:var(--s3);}
.intestazione p{font-size:16px;line-height:1.55;}
.zona-testa h2{font-size:23px;}
.zona-testa h3{font-size:21px;}
h3{letter-spacing:-.01em;}

/* le etichette non sono occhielli in codice: DM Sans, piccole, quiete */
.occhiello{font-family:var(--sans);letter-spacing:0;font-size:13px;font-weight:500;color:var(--mu);}
.rail-gruppo{font-family:var(--sans);font-weight:600;letter-spacing:0;font-size:12.5px;}
.mono{font-size:inherit;}
.battuta .chi,.zid-riga .nome,.zid-scena .zid-nome,.gate-etichetta,.nota-origine,
.decisione-testa,.affini a .area-tema,.chiusa-etichetta,.temi-etichetta{
  font-family:var(--sans);font-weight:600;letter-spacing:0;font-size:13px;
}
.gate-zid-dice strong{font-family:var(--sans);font-weight:700;}
.zid-scena .zid-nome{font-family:var(--serif);font-size:19px;font-weight:520;}

/* ============================================================
   2. Guscio: barra, colonna di navigazione
   ============================================================ */
.topbar{background:var(--nav);backdrop-filter:none;border-bottom:1px solid var(--ln);}
.rail{background:var(--bg);border-right:1px solid var(--ln);}
.rail a{border:1px solid transparent;border-radius:var(--rs);}
.rail a[aria-current="page"]{background:var(--cs);border-color:var(--ln);box-shadow:none;font-weight:650;color:var(--tx);}
.rail a[aria-current="page"] svg{color:var(--dec-piano);}
html[data-rail="chiuso"] .rail a[aria-current="page"]{box-shadow:none;border-color:var(--ln-forte);}
.rail .stato{font-size:12px;padding:1px 7px;}
.briciole{font-size:13px;}

/* ============================================================
   3. Bottoni, campi, scelte
   ============================================================ */
.btn{border-radius:var(--rs);box-shadow:none;font-weight:600;}
.btn:hover{box-shadow:none;border-color:var(--tx);}
.btn:active{box-shadow:none;}
.btn--piccolo{border-radius:var(--rb);}
.btn--primario{background:var(--tessera-piena);color:#160f04;border-color:transparent;box-shadow:none;font-weight:700;}
.btn--primario:hover{background:#d47a0c;border-color:transparent;box-shadow:none;}
html[data-theme="dark"] .btn--primario:hover{background:#ffa22e;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--primario:hover{background:#ffa22e;}}
.btn--quieto{border-color:transparent;background:transparent;}
.scrivi .invia{box-shadow:none;}
.btn--quieto:hover{background:var(--card);border-color:transparent;}
.btn--distruttivo:hover{border-color:var(--err);}

input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  border-radius:var(--rs);box-shadow:none;background:var(--cs);
}
input:focus,textarea:focus,select:focus{border-color:var(--dec-piano);}
.campo .aiuto{font-size:12.5px;}
.ricerca input{box-shadow:none;border-radius:16px;}
.ricerca input:focus{box-shadow:var(--ombra-2);}

.chip{box-shadow:none;background:var(--cs);border-color:var(--ln-forte);}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--qui-fondo);border-color:var(--qui-bordo);}

/* Elenco / Mappa, In fila / A mappa: un controllo segmentato morbido */
[role="tablist"]{background:var(--segmento-binario);border:0;border-radius:14px;padding:4px;gap:2px;box-shadow:none;}
[role="tab"]{background:transparent;border:1px solid transparent;color:var(--mu);border-radius:10px;min-height:36px;box-shadow:none;font-weight:600;}
[role="tab"]:hover{color:var(--tx);}
[role="tab"][aria-selected="true"]{
  background:var(--segmento-scelto);color:var(--tx);border-color:var(--ln);
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 2px 6px rgba(11,18,32,.06);
}
.vista-commuta{background:var(--segmento-binario);border:0;border-radius:14px;padding:4px;box-shadow:none;}
.vista-commuta button{border-radius:10px;box-shadow:none;}
.vista-commuta button[aria-pressed="true"],.vista-commuta button[aria-selected="true"]{
  background:var(--segmento-scelto);color:var(--tx);border-color:var(--ln);
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 2px 6px rgba(11,18,32,.06);
}

/* ============================================================
   4. Etichette: pill di tipo e badge di accesso
   ============================================================ */
.pill{font-size:12.5px;font-weight:600;letter-spacing:0;padding:2px 10px 2px 8px;}
.stato{font-weight:600;}

/* ============================================================
   5. Tessere: zone, schede, aree, temi, risultati
   ============================================================ */
.zona{border:0;border-radius:var(--r-tessera);box-shadow:none;background:var(--zona);}
.zona--capire{background:var(--zona-capire);}
.zona--decidere{background:var(--zona-decidere);}
.zona--spazio{background:var(--zona-spazio);}
.zona-testa{background:transparent;border-bottom:0;padding:var(--s5) var(--s6) var(--s2);}
.zona-testa .icona{display:none;}
.zona-testa .sotto{font-size:14px;line-height:1.5;}
.zona-corpo{padding:var(--s4) var(--s6) var(--s6);}
.zona-corpo--stretto{padding:var(--s3) var(--s5) var(--s5);}
.zona-piede{background:transparent;border-top:1px dashed var(--ln-forte);padding:var(--s4) var(--s6);}
.zona--capire > .zona-testa,.zona--decidere > .zona-testa,.zona--spazio > .zona-testa{background:transparent;}
.zona--capire > .zona-piede,.zona--decidere > .zona-piede{background:transparent;border-top-color:var(--ln-forte);}
.zona-funzione{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:2px 10px;}
.zona--capire .zona-funzione{background:var(--cs);}
.zona--decidere .zona-funzione{background:var(--cs);}
.zona--spazio .zona-funzione{background:var(--bg);}

.scheda,.area,.tema,.risultati > li > a,.affini a{
  border:0;border-radius:var(--r-scheda);box-shadow:none;background:var(--cs);
}
.zona:not(.zona--capire):not(.zona--decidere) .scheda,
.zona:not(.zona--capire):not(.zona--decidere) .area,
.zona:not(.zona--capire):not(.zona--decidere) .tema,
.zona:not(.zona--capire):not(.zona--decidere) .risultati > li > a,
.zona:not(.zona--capire):not(.zona--decidere) .affini a{background:var(--bg);}
a.scheda:hover,button.scheda:hover,.area:hover,.tema:hover,.risultati > li > a:hover,.affini a:hover{
  box-shadow:inset 0 0 0 1px var(--ln-forte);transform:none;border-color:transparent;
}
a.scheda:active,button.scheda:active{transform:none;box-shadow:inset 0 0 0 1px var(--ln-forte);}
.area-icona{border:0;border-radius:50%;background:var(--qui-fondo);color:var(--dec);}
.area h3{font-family:var(--serif);font-size:19px;font-weight:520;letter-spacing:-.01em;}
.area--bloccata{box-shadow:inset 0 0 0 1px var(--ln-forte);background:transparent !important;}
.area--bloccata:hover{box-shadow:inset 0 0 0 1px var(--mu);}
.tema .quante{font-family:var(--sans);font-size:12.5px;}
.risultati .titolo{font-family:var(--serif);font-size:19px;font-weight:520;letter-spacing:-.01em;line-height:1.25;}


/* ============================================================
   5bis. Tutti gli altri contenitori parlano la stessa lingua:
   tessera piena, raggio morbido, niente bordo, niente ombra,
   niente sfumature. Il colore di fondo dice la funzione.
   ============================================================ */
.battuta .testo,.proposta,.nota,.piano,.piano-percorso,.correlato,.cantiere,.suggerito,
.conversazione,.avvio,.destinazione,.scelta-zid,.zid-riga,.zid-bolla .dice,.faq details,
.riga-numeri,.numero,.quota,.lineare,.decisione,.albero-piede,.legenda{
  border:0;box-shadow:none;
}
.battuta .testo,.proposta,.nota,.piano,.piano-percorso,.correlato,.cantiere,.suggerito,
.conversazione,.faq details{border-radius:var(--r-scheda);}
.conversazione,.cantiere{border-radius:var(--r-tessera);background:var(--cs);}
.conv-testa,.cantiere-testa{background:transparent;border-bottom:1px solid var(--ln);}
.conv-testa h1,.conv-testa h2,.cantiere-testa h2,.cantiere-testa h3{font-family:var(--serif);font-weight:520;font-size:21px;letter-spacing:-.01em;}
.conv-piede,.cantiere-piede{background:transparent;border-top:1px solid var(--ln);}
.conv-testa .icona{background:var(--qui-fondo);color:var(--dec);}

/* su una tessera bianca i figli stanno sul grigio del fondo, e viceversa */
.battuta .testo,.avvio,.scelta-zid,.destinazione{background:var(--bg);border-radius:var(--r-scheda);}
.zona--capire .scelta-zid,.zona--decidere .scelta-zid,.zona--capire .avvio,.zona--decidere .avvio{background:var(--cs);}
.avvio:hover,.scelta-zid:hover,.destinazione:hover{box-shadow:inset 0 0 0 1px var(--ln-forte);transform:none;}
.destinazione[aria-pressed="true"]{background:var(--qui-fondo);box-shadow:inset 0 0 0 1.5px var(--qui-bordo);}
.scelta-zid .segno,.destinazione .segno{border:0;background:var(--qui-fondo);color:var(--dec);}

.nota,.piano,.piano-percorso,.correlato,.suggerito,.proposta{background:var(--cs);}
.zona:not(.zona--capire):not(.zona--decidere) :is(.nota,.piano-percorso,.correlato,.suggerito,.proposta){background:var(--bg);}
.piano--attuale{box-shadow:inset 0 0 0 1.5px var(--done-piano);}
.piano--pro{background:var(--cs);}
.piano .prezzo{font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:-.01em;}
.piano h2,.piano h3,.piano-testa h3,.correlato-testa h3,.suggerito h3{font-family:var(--serif);font-weight:520;letter-spacing:-.01em;}
.correlato-testa{background:var(--qui-fondo);border-bottom:0;}
.correlato-piede{background:transparent;border-top:1px dashed var(--ln-forte);}
.suggerito{background:var(--cs);}

/* la riga dei numeri: misure in DM Mono sulla tessera, senza scatola grigia */
.riga-numeri{background:var(--cs);border-radius:var(--r-scheda);}
.numero{border-top:0;background:var(--cs);border-radius:var(--r-scheda);}

/* Zid nella pagina: una tessera tenue, mai un riquadro grigio bordato */
.zid-riga{background:var(--cs);border-radius:var(--r-tessera);}
.zona .zid-riga,.zid-riga--nuda{background:transparent;}
.zid-bolla .dice{background:var(--cs);border-radius:var(--r-scheda);}
.zid-scena{background:var(--qui-fondo);border:0;box-shadow:none;border-radius:var(--r-tessera);}
.zid-scena--larga{background:var(--qui-fondo);}
.zid-ritratto{background:var(--qui-fondo);border:0;}

/* il percorso in fila della plancia */
.lineare{background:var(--cs);border-radius:var(--r-scheda);}
.lineare-piede{background:transparent;border-top:1px solid var(--ln);}
.lineare-dove{border-bottom:1px solid var(--ln);}
.lineare--semplice .tappa-l--qui{background:var(--qui-fondo);border:0;box-shadow:none;}
.tappa-l:hover{box-shadow:none;}
.tappa-l--qui{box-shadow:none;}

/* l'albero dei percorsi: tessera piena, senza alone sfumato */
.albero{background:var(--cs);}
.albero-piede{background:transparent;border-top:1px solid var(--ln);}
.quota{background:var(--cs);border-radius:var(--rs);}
.zona .quota{background:var(--bg);}
.pgb-riempimento{background:var(--done-piano);}

/* i passi, fuori dalla pagina del percorso (anteprima, risposta): righe su tessera */
.passo-apri{border:0;box-shadow:none;background:var(--cs);border-radius:14px;}
.passo-apri:hover{box-shadow:inset 0 0 0 1px var(--ln-forte);transform:none;}
.passo--corrente .passo-apri{background:var(--qui-fondo);box-shadow:none;}
.ragioni{border:0;}
.ramo-numero{border:0;background:var(--bg);font-family:var(--sans);font-weight:700;}
.struttura li{background:var(--bg);border-radius:var(--rb);}
.riga-meta .mono{font-family:var(--sans);font-size:13px;}
.struttura li[data-qui="si"]{background:var(--qui-fondo);box-shadow:none;}
.piano-testa h3{font-size:18px;}

/* il punto della decisione in forma compatta (dove non c'è la tessera piena) */
.gate:not(.gate--tessera){background:var(--qui-fondo);border:0;box-shadow:none;border-radius:var(--r-tessera);}
.gate:not(.gate--tessera)::before{display:none;}
.gate:not(.gate--tessera) h3{font-family:var(--serif);font-weight:520;font-size:23px;}
.tappa-l--gate .segno{background:var(--dec-piano);}

/* FAQ e domande frequenti */
.faq details{background:var(--cs);}
.faq summary{font-family:var(--serif);font-size:19px;font-weight:520;letter-spacing:-.01em;}

/* avvisi: una tessera con il suo segno, nessuna striscia laterale */
.avviso{border:0;border-radius:var(--rs);box-shadow:none;background:var(--cs);}
.avviso--errore{background:var(--err-bg);}
.avviso--fatto{background:var(--done-bg);}
.avviso--decisione{background:var(--qui-fondo);}
.avviso-segno{font-family:var(--sans);font-weight:700;border:0;}
/* i segni scritti con un carattere (i, !, →) non entrano: l'avviso ha già titolo e tinta */
.avviso-segno:not(:has(svg)){display:none;}
.avviso-segno svg{width:13px;height:13px;}

/* stati vuoti e inviti: tessere tenui con il filo tratteggiato */
.vuoto{border:1.5px dashed var(--ln-forte);border-radius:var(--r-tessera);background:transparent;}
.invito{background:var(--qui-fondo);border:0;border-radius:var(--r-tessera);}
.invito .occhiello{font-family:var(--sans);}
.legenda{border:0;border-radius:var(--rs);background:var(--cs);}
.filetto{height:0;background:none;border-top:1px dashed var(--ln-forte);}

/* ============================================================
   6. Pannelli laterali: galleggiano, quindi hanno l'ombra
   ============================================================ */
.pannello{box-shadow:var(--ombra-2);background:var(--cs);border-left:1px solid var(--ln);}
.pannello-testa,.pannello-piede{background:var(--cs);}
.pannello-testa h2{font-size:23px;line-height:1.12;}
.pannello-meta{font-family:var(--mono);font-size:12.5px;color:var(--mu);margin-top:4px;}
.ragioni{border:0;border-radius:16px;background:var(--bg);}
.ragioni-titolo{font-family:var(--serif);font-size:18px;font-weight:540;margin-bottom:var(--s3);color:var(--tx);}

/* ============================================================
   7. Il percorso in fila (plancia): «Sei qui» caldo
   ============================================================ */
.lineare{border:0;border-radius:var(--r-scheda);box-shadow:none;}
.tappa-l--qui .tappa-l-scheda,.lineare--semplice .tappa-l--qui{box-shadow:none;}
.qui-etichetta{color:var(--dec);border-color:var(--qui-bordo);background:var(--cs);font-weight:700;}

/* ============================================================
   8. La pagina del percorso
   ============================================================ */
.colonna--tessere .colonna-interna{max-width:1120px;container-type:inline-size;}
.titolo-grande{
  font-family:var(--serif);font-size:46px;line-height:1.04;font-weight:450;letter-spacing:-.012em;
  max-width:17ch;margin:var(--s4) 0 var(--s3);text-wrap:balance;
}
.sotto-grande{font-size:17px;line-height:1.5;color:var(--mu);max-width:56ch;margin-bottom:var(--s4);}
.risposta-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s7);}
.colonna--tessere .risposta-meta .mono{font-size:13px;}

/* il cassetto accanto al flusso */
.percorso-griglia{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start;}
.percorso-flusso{min-width:0;container-type:inline-size;}
.cassetto{position:sticky;top:calc(var(--topbar-h) + var(--s5));}
.tessera{background:var(--cs);border-radius:var(--r-tessera);padding:var(--s5);}
.tessera--cassetto{box-shadow:var(--ombra-2);}
.tessera-titolo{font-family:var(--serif);font-size:21px;font-weight:520;letter-spacing:-.012em;margin-bottom:var(--s4);}
.tessera-sottotitolo{font-size:14px;font-weight:650;margin:var(--s5) 0 var(--s3);}
.tessera--cassetto .pgb{margin:0 0 var(--s4);}
.pgb-testo{font-size:13px;color:var(--mu);}
.pgb-numero{font-size:13px;}
.pgb-pista{height:8px;background:var(--tessera-tenue);}
.pgb-riempimento{background:var(--done-piano);}
.cassetto-rami{display:grid;gap:2px;margin:0;}
.cassetto-rami li{border-top:1px solid var(--ln);}
.cassetto-rami a{
  display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--tx);
  text-decoration:none;border-radius:var(--rb);padding:0 var(--s1);
}
.cassetto-rami a::after{
  content:"";width:14px;height:14px;flex:none;margin-left:auto;background:var(--mu);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13'/%3E%3Cpath d='M6.5 13 12 18.5 17.5 13'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13'/%3E%3Cpath d='M6.5 13 12 18.5 17.5 13'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cassetto-rami a:hover{background:var(--bg);}
.cassetto-rami a[aria-current="step"]{font-weight:650;}
.cassetto-qui{
  margin-left:var(--s2);font-size:12px;font-weight:650;color:var(--dec);
  border:1px solid var(--qui-bordo);background:var(--qui-fondo);border-radius:6px;padding:0 6px;line-height:1.5;white-space:nowrap;
}
.ramo-testa h2{scroll-margin-top:calc(var(--topbar-h) + var(--s5));}
.colonna-interna:has(#v-elenco[hidden]) .tessera--cassetto .tessera-sottotitolo,
.colonna-interna:has(#v-elenco[hidden]) .tessera--cassetto .legenda{display:none;}
.tessera--cassetto .legenda{background:transparent;border:0;padding:0;gap:var(--s2);display:flex;flex-wrap:wrap;}
@container (max-width:620px){
  .percorso-flusso .gate.gate--tessera{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) var(--s5);}
  .percorso-flusso .gate--tessera h3{font-size:25px;}
}
@container (max-width:860px){
  .percorso-griglia{grid-template-columns:minmax(0,1fr) 240px;gap:var(--s5);}
}
@container (max-width:640px){
  .percorso-griglia{grid-template-columns:1fr;gap:var(--s5);}
  .cassetto{position:static;order:-1;}
  #decisione{max-width:none !important;}
}
.colonna--tessere [role="tablist"]{margin-bottom:var(--s6);display:inline-flex;}

/* i rami: titolo con voce, passi in una tessera */
.ramo{margin-bottom:var(--s7);}
.ramo-testa{margin-bottom:var(--s3);align-items:baseline;padding:0 var(--s2);}
.ramo-testa h2,.ramo-testa h3{font-family:var(--serif);font-size:23px;font-weight:520;letter-spacing:-.012em;}
.ramo-conteggio{font-size:13px;}
.colonna--tessere .spina{
  background:var(--cs);border-radius:var(--r-tessera);
  padding:var(--s2) var(--s2) var(--s2) 52px;
}
.colonna--tessere .spina::before{display:none;}
.colonna--tessere .spina > li{margin:0;}
.colonna--tessere .spina > li + li{border-top:1px solid var(--ln);}
.colonna--tessere .nodo{left:-44px;top:14px;width:30px;height:30px;background:transparent;}
.colonna--tessere .nodo::before{width:12px;height:12px;border-width:2px;background:var(--cs);}
.colonna--tessere .passo-apri{background:transparent;border:0;box-shadow:none;border-radius:14px;padding:var(--s3) var(--s4);}
.colonna--tessere .passo-apri:hover{background:var(--bg);box-shadow:none;transform:none;}
.colonna--tessere .passo-testa{margin-bottom:4px;}
.colonna--tessere .passo-titolo{font-size:16px;font-weight:650;letter-spacing:-.01em;}
.colonna--tessere .passo-nota{font-size:14.5px;color:var(--mu);}
.colonna--tessere .passo--fatto .passo-titolo{color:var(--mu);}

/* dove sei: riga calda, segno pieno arancio, parola */
.qui{display:none;}
.passo--corrente .qui{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:700;padding:1px 8px;border-radius:6px;
  color:var(--dec);border:1px solid var(--qui-bordo);background:var(--cs);
}
.colonna--tessere .passo--corrente .passo-apri{background:var(--qui-fondo);border:0;box-shadow:none;margin:var(--s1) 0;}
.colonna--tessere .passo--corrente .passo-apri:hover{background:var(--qui-fondo);}
.colonna--tessere .passo--corrente .passo-titolo{color:var(--tx);}
.colonna--tessere .passo--corrente .passo-nota{color:var(--mu);}
.passo--corrente .pill{background:var(--cs) !important;color:var(--dec);border-color:var(--qui-bordo);}
.colonna--tessere .passo--corrente .nodo::before{animation:none;box-shadow:none;background:var(--dec-piano);border-color:var(--dec-piano);width:14px;height:14px;}
.passo-conteggio{font-family:var(--mono);font-size:12.5px;margin:var(--s1) 0 var(--s2) var(--s4) !important;}
.colonna--tessere .pill{background:var(--cs) !important;}

/* ciò che si apre dopo la decisione sta su una tessera più tenue */
.colonna--tessere .spina:has(> .passo--bloccato){background:var(--tessera-tenue);}
.colonna--tessere .passo--bloccato .passo-apri{background:transparent;border:0;}
.colonna--tessere .passo--bloccato .passo-apri:hover{background:transparent;}

/* la tessera piena del punto della decisione: l'unico campo arancio */
.gate.gate--tessera{
  margin:var(--s4) 0;padding:var(--s7);border:0;border-radius:24px;
  background:var(--tessera-piena);color:var(--su-arancio);box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s6);align-items:start;
}
.gate.gate--tessera::before{display:none;}
.gate--tessera h3{
  font-family:var(--serif);font-weight:520;font-size:29px;line-height:1.08;letter-spacing:-.012em;
  margin-bottom:var(--s4);color:var(--su-arancio);text-wrap:balance;
}
.gate--tessera p{color:var(--su-arancio);font-size:15.5px;max-width:52ch;}
.gate-zid-riga{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--linea-arancio);}
.gate-zid-riga .gate-zid{position:static;flex:none;}
.gate--tessera .gate-zid-dice{font-size:14.5px;color:var(--su-arancio-tenue);border:0;padding:0;margin:0;}
.gate--tessera .gate-zid-dice strong{color:var(--su-arancio);font-family:var(--sans);}
.gate--tessera .passo-azioni{margin-top:var(--s6);gap:var(--s2) var(--s4);align-items:center;}
.gate--tessera .passo-azioni .btn--quieto{padding:0 var(--s1);min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.gate--tessera .btn--primario{background:#0b1220;color:#ffffff;}
.gate--tessera .btn--primario:hover{background:#25304a;}
.gate--tessera .btn--quieto{color:var(--su-arancio);}
.gate--tessera .btn--quieto:hover{background:rgba(11,18,32,.08);}
.gate--tessera :focus-visible{outline-color:#0b1220;}

/* il foglio: il documento che la decisione produrrà, ancora vuoto */
.gate-foglio{margin:0;background:#ffffff;color:#0b1220;border-radius:16px;padding:var(--s5);}
.gate-foglio figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:baseline;font-size:14px;font-weight:650;margin-bottom:var(--s3);}
.gate-foglio figcaption .foglio-stato{font-size:13px;font-weight:400;color:#5a6272;white-space:nowrap;}
.gate-foglio dl{margin:0;counter-reset:domanda;}
.gate-foglio dt{
  font-size:13.5px;font-weight:600;padding-top:var(--s3);border-top:1px solid rgba(11,18,32,.1);
  counter-increment:domanda;display:flex;gap:var(--s2);align-items:baseline;
}
.gate-foglio dt::before{
  content:counter(domanda);flex:none;font-family:var(--sans);font-size:12px;font-weight:700;
  width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;
  background:#fff3e3;color:#8a4705;border:1px solid rgba(224,120,18,.45);
}
.gate-foglio dd{font-size:14px;color:#5a6272;margin:2px 0 var(--s3);padding-left:28px;}
.gate-foglio-piede{font-size:12.5px !important;color:#5a6272 !important;margin-top:var(--s2);}

/* sotto il percorso: la decisione tracciata */
#v-elenco > .passo-azioni{margin-top:var(--s4);}
.colonna--tessere .filetto{margin:var(--s8) 0 var(--s7);}
.titolo-sezione-grande{font-family:var(--serif);font-size:34px;line-height:1.1;font-weight:450;letter-spacing:-.012em;margin-bottom:var(--s3);max-width:22ch;}
.decisione{background:var(--cs);border:0;box-shadow:var(--ombra-2);border-radius:var(--r-tessera);}
.colonna--tessere #decisione{max-width:calc(100% - 300px - var(--s7));}
@container (max-width:860px){.colonna--tessere #decisione{max-width:calc(100% - 240px - var(--s5));}}
.decisione-testa{background:transparent;border-bottom:1px solid var(--ln);font-size:13px;padding:var(--s4) var(--s6);}
.decisione-corpo{padding:var(--s5) var(--s6) var(--s4);}
.decisione-corpo h3{font-family:var(--serif);font-weight:520;font-size:25px;line-height:1.12;letter-spacing:-.012em;max-width:28ch;margin-bottom:var(--s5);text-wrap:balance;}
.decisione-corpo dl{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);column-gap:var(--s6);}
.decisione-corpo dt,.decisione-corpo dd{margin:0;padding:var(--s4) 0;border-top:1px solid var(--ln);}
.decisione-corpo dt{font-size:14px;font-weight:650;color:var(--tx);}
.decisione-corpo dd{font-size:15px;color:var(--tx);max-width:62ch;}
.decisione-piede{background:transparent;border-top:1px solid var(--ln);padding:var(--s4) var(--s6);}

/* la mappa sta su una tessera; dove sei è segno pieno arancio e nome sottolineato */
.albero{background:var(--cs) !important;border:0 !important;box-shadow:none !important;border-radius:var(--r-tessera);}
.albero .nodo-svg.attivo circle,.albero .nodo-svg.attivo rect{fill:var(--dec-piano);stroke:var(--dec-piano);}
.albero .nodo-svg.attivo text{font-weight:800;fill:var(--tx);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.albero .nodo-svg.attivo .alone{display:block;fill:none;stroke:var(--dec-piano);stroke-width:1.2;opacity:1;animation:none;transform:scale(1.45);}
.legenda-qui{font-size:12.5px;font-weight:800;color:var(--dec);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
#v-mappa .legenda{background:transparent;border:0;padding:0;}

/* il pannello del passo: il bottone del passo è deciso ma non arancio,
   perché l'arancio pieno della pagina è già del punto della decisione */
#pannello-passo .btn--primario{background:color-mix(in srgb,var(--tx) 82%,var(--bg));color:var(--bg);}
html[data-theme="dark"] #pannello-passo .btn--primario{background:#2a2e35;color:var(--tx);border:1px solid rgba(238,240,244,.16);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #pannello-passo .btn--primario{background:#2a2e35;color:var(--tx);border:1px solid rgba(238,240,244,.16);}
}

/* il pannello della decisione: stessa testata arancio, quattro passi numerati sul filo */
#pannello-gate{--pannello-w:440px;width:440px;}
#pannello-gate .pannello-testa{background:var(--tessera-piena);color:#0b1220;border-bottom:0;padding:var(--s5) var(--s5) var(--s6);align-items:flex-start;}
.pannello-gate-testa{display:flex;flex-direction:column;gap:var(--s3);}
.pannello-gate-testa .gate-zid{position:static;inset:auto;display:block;}
.pannello-gate-testa .zid{width:52px;height:52px;}
#pannello-gate .pannello-testa h2{font-size:26px;line-height:1.1;color:#0b1220;}
#pannello-gate .pannello-chiudi{color:#0b1220;}
#pannello-gate .pannello-chiudi:hover{background:rgba(11,18,32,.08);}
#pannello-gate .pannello-chiudi:focus-visible{outline-color:#0b1220;}
#pannello-gate .pannello-corpo{counter-reset:passo-decisione;padding:var(--s5) var(--s5) var(--s4);}
#pannello-gate .pannello-corpo > p.piccolo{font-size:15px;color:var(--tx);margin-bottom:var(--s6) !important;}
#pannello-gate .campo{counter-increment:passo-decisione;position:relative;padding-left:46px;margin-bottom:var(--s6);}
#pannello-gate .campo::before{
  content:counter(passo-decisione);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--sans);font-size:14px;font-weight:700;
  background:var(--dec-piano);color:#160f04;border:0;
}
#pannello-gate .campo::after{content:"";position:absolute;left:14.5px;top:34px;bottom:calc(var(--s6) * -1 + 4px);border-left:1.5px dashed var(--dec-piano);}
#pannello-gate label.campo:last-of-type::after{display:none;}
#pannello-gate .campo > span:first-child{font-family:var(--serif);font-size:19px;font-weight:540;letter-spacing:-.01em;margin-bottom:var(--s2);line-height:1.2;}
#pannello-gate textarea{border-radius:14px;background:var(--bg);border:1px solid var(--ln-forte);padding:var(--s3) var(--s4);font-size:15px;}
#pannello-gate textarea:focus{border-color:var(--dec-piano);background:var(--cs);}
#pannello-gate .avviso{background:var(--bg);border:1px dashed var(--ln-forte);margin-left:46px;}
#pannello-gate .pannello-piede{border-top:1px solid var(--ln);padding:var(--s4) var(--s5);}
#pannello-gate .pannello-piede .btn--primario{min-height:48px;padding:0 var(--s6);font-size:15px;}

/* ============================================================
   9. Movimento: nessun movimento decorativo
   ============================================================ */

/* ============================================================
   10. Telefono
   ============================================================ */
@media (max-width:768px){
  :root{--t-body:15px;--t-sm:14px;--t-xs:13px;--t-3xs:12.5px;}
  [role="tab"]{min-height:44px;}
  .briciole a{display:inline-flex;align-items:center;min-height:44px;}
  .intestazione h1{font-size:30px;}
  .zona-testa{padding:var(--s4) var(--s4) var(--s2);}
  .zona-corpo{padding:var(--s3) var(--s4) var(--s5);}
  .zona-piede{padding:var(--s3) var(--s4);}
  .zona-testa h2{font-size:21px;}
  .titolo-grande{font-size:34px;}
  .sotto-grande{font-size:16px;}
  .colonna--tessere .spina{padding-left:42px;}
  .colonna--tessere .nodo{left:-36px;}
  .gate.gate--tessera{grid-template-columns:1fr;padding:var(--s5);gap:var(--s5);}
  .gate--tessera h3{font-size:25px;}
  .decisione-corpo dl{grid-template-columns:1fr;}
  .decisione-corpo dd{border-top:0;padding-top:0;}
  .decisione-testa,.decisione-corpo,.decisione-piede{padding-left:var(--s4);padding-right:var(--s4);}
  .rail{background:var(--nav);backdrop-filter:none;box-shadow:0 -1px 0 var(--ln);}
  .rail a{font-size:12px;}
  .rail a[aria-current="page"]{background:var(--qui-fondo);color:var(--dec);border-color:transparent;}
  .titolo-sezione-grande{font-size:28px;}
  #pannello-gate{width:100%;}
  .pannello{border-radius:var(--r-tessera) var(--r-tessera) 0 0;}
}

/* un titolo che riceve il fuoco dallo script (tabindex=-1) non mostra il riquadro */
[tabindex="-1"]:focus{outline:none;}

.zona-piede .stato{white-space:normal;}

/* misura di lettura: nessuna riga oltre gli ottanta caratteri */
.avviso p,.battuta .testo p,.nota-testo,.risposta-breve p,.zid-riga .testo p,.scheda p,.correlato-corpo p{max-width:54ch;}

/* ============================================================
   11. Rifiniture dopo la revisione finale
   ============================================================ */
/* passo completato: cerchio pieno verde, anche sulla tessera bianca */
.colonna--tessere .passo--fatto .nodo::before{background:var(--done-piano);border-color:var(--done-piano);}
/* tappa completata nella pista della plancia: segno pieno e spunta leggibile */
.tappa-l--fatto .segno,.tappa-l--fatto.tappa-l--for .segno,.tappa-l--fatto.tappa-l--dec .segno{
  border-color:var(--done-piano);background:var(--done-piano);color:var(--cs);font-weight:700;
}

/* l'etichetta di funzione sta nella riga del titolo, a destra: mai sopra il titolo.
   Fluttua a destra, così occupa spazio solo nella prima riga del titolo. */
.intestazione--spazio > .zona-funzione,
.zona-corpo > .zona-funzione:has(+ h1){
  float:right;margin:10px 0 var(--s2) var(--s4) !important;white-space:nowrap;
}
.intestazione--spazio::after,.zona-corpo:has(> .zona-funzione + h1)::after{content:"";display:block;clear:both;}
/* le etichette che stavano sopra un titolo passano sotto, come sottotitolo */
.correlato-testa{flex-wrap:wrap;}
.correlato-testa > .occhiello{order:5;flex-basis:100%;margin:0;}
.pannello-testa > div{display:flex;flex-direction:column;}
.pannello-testa > div > .occhiello{order:2;margin:4px 0 0 !important;}

/* un solo arancio pieno: l'invito di Zid e l'invio dalla plancia sono secondari */
.zid-riga .btn--primario{background:var(--cs);color:var(--tx);border-color:var(--ln-forte);font-weight:600;}
.zid-riga .btn--primario:hover{background:var(--cs);border-color:var(--tx);}
.zona .scrivi .invia{background:var(--tx);color:var(--bg);}
.zona .scrivi .invia:hover{background:color-mix(in srgb,var(--tx) 84%,var(--bg));}
html[data-theme="dark"] .zona .scrivi .invia{background:#2a2e35;color:var(--tx);border:1px solid var(--ln-forte);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .zona .scrivi .invia{background:#2a2e35;color:var(--tx);border:1px solid var(--ln-forte);}}

/* le icone delle scelte stanno nella riga, senza tessera dietro */
.scelta-zid .segno,.destinazione .segno,.avvio .segno,.area-icona,.conv-testa .icona{background:transparent;border:0;box-shadow:none;}
.avvio .segno svg{color:var(--dec);}
.scelta-zid .segno svg,.area-icona svg{color:var(--dec);}

/* DM Mono solo per le misure */
.piano-testa .meta,.passo-conteggio,.lineare-dove .conteggio{font-family:var(--sans);font-size:13px;}
.piccolo .mono,.attenuato .mono{font-family:var(--sans);font-weight:600;font-size:inherit;}
.risposta-meta .mono{font-family:var(--sans);font-size:13px;}

/* pagine di accesso: una tessera, senza bordo né ombra */
.accesso-box{border:0 !important;box-shadow:none !important;border-radius:var(--r-tessera) !important;}
.accesso-piede{border-top:1px dashed var(--ln-forte);}
.piano h2 .piano-tuo{font-family:var(--sans);vertical-align:middle;margin-left:var(--s2);}
@media (max-width:600px){
  .intestazione--spazio,.zona-corpo:has(> .zona-funzione + h1){display:flex;flex-direction:column;align-items:flex-start;}
  .intestazione--spazio > .zona-funzione,.zona-corpo > .zona-funzione:has(+ h1){float:none;order:2;margin:4px 0 var(--s3) !important;}
  .intestazione--spazio > h1,.zona-corpo:has(> .zona-funzione + h1) > h1{order:1;}
  .intestazione--spazio > :not(h1):not(.zona-funzione),.zona-corpo:has(> .zona-funzione + h1) > :not(h1):not(.zona-funzione){order:3;align-self:stretch;}
}