/* Optimvs v4 · vista «Da chiarire»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-chiarire-
   Riquadro, scelte, tabella, etichette, «Da fare ora», avanzamento e dato con fonte vengono
   da assets/optimvs.css e qui non si riscrivono. Colori: solo variabili.
   Movimento: solo opacità e trasformazioni, 150-300 ms (con ?fermo=1 lo spegne il guscio). */

/* con il documento nascosto il centro è largo: l'elenco tiene una misura che si legge */
.vista.v-chiarire { max-width: 920px; }

/* ---------- «Da fare ora»: resta in vista mentre si scorre ---------- */
/* il fondo pieno copre l'elenco che passa sotto (nel tema scuro la tinta della riga è trasparente) */
.v-chiarire-barra { position: sticky; top: 0; z-index: 6; margin: -8px -6px; padding: 8px 6px; background: var(--fondo); }
/* sotto la riga il fondo sfuma: l'elenco che scorre non finisce contro uno spigolo */
.v-chiarire-barra::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(var(--fondo), transparent); pointer-events: none; }
.v-chiarire-ora { background: linear-gradient(var(--blu-tinta), var(--blu-tinta)) var(--fondo); }
/* la frase è corta e non si accorcia mai: è l'avanzamento a prendere il posto che resta (fino a 204 px), a destra */
.v-chiarire-ora .ora-frase { flex: 0 0 auto; overflow: visible; white-space: nowrap; }
/* gara aperta: accanto al titolo della vista, il termine dei quesiti. Una data e i giorni che mancano, in grigio */
.v-chiarire-termine { display: flex; gap: 6px; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
.v-chiarire-termine span { color: var(--testo-3); }
.v-chiarire-avanza { flex: 1 1 0; max-width: 204px; margin-left: auto; gap: 12px; }
.v-chiarire-avanza .avanzamento-testo b { font-size: var(--t-16); letter-spacing: -0.01em; }
/* un tratto per punto, nell'ordine dei punti: pieno = scelta fatta, contorno = punto aperto */
.v-chiarire-passi { flex: 1; display: flex; gap: 3px; min-width: 0; }
/* il tratto vuoto usa il colore dei bordi forti: si legge anche nel tema scuro, sopra la tinta della riga */
.v-chiarire-passi > i { flex: 1; height: 6px; border-radius: 3px; background: var(--bordo-forte); transition: background-color var(--t-medio) var(--curva), box-shadow var(--t-rapido); }
.v-chiarire-passi > .v-chiarire-passo-qui { box-shadow: inset 0 0 0 1.5px var(--blu); }
.v-chiarire-passi > .v-chiarire-passo-fatto { background: var(--blu); }
.v-chiarire-passi > .v-chiarire-passo-fatto.v-chiarire-passo-qui { box-shadow: 0 0 0 2px var(--blu-tinta-2); }
@container centro (max-width: 659px) {
  /* centro stretto (finestra da 1280): resta il conto, i tratti lasciano il posto alla frase */
  .v-chiarire-avanza { flex: none; max-width: none; }
  .v-chiarire-passi { display: none; }
}

/* ---------- i punti ---------- */
/* un riquadro senza margine interno, ma che non taglia: il punto aperto si alza sopra i vicini */
.v-chiarire-punti { position: relative; padding: 0; }
.v-chiarire-punto { position: relative; transition: background-color var(--t-rapido), box-shadow var(--t-rapido); }
.v-chiarire-punto + .v-chiarire-punto { border-top: 1px solid var(--bordo); }
.v-chiarire-punto:first-child, .v-chiarire-punto:first-child > .v-chiarire-testa { border-radius: 7px 7px 0 0; }
.v-chiarire-punto:last-child { border-radius: 0 0 7px 7px; }
.v-chiarire-punto:last-child:not(.v-chiarire-aperto) > .v-chiarire-testa { border-radius: 0 0 7px 7px; }

/* il binario: un filo che lega i numeri, dal primo all'ultimo */
.v-chiarire-punto::before {
  content: ''; position: absolute; left: 25.5px; top: 0; bottom: 0; width: 1px;
  background: var(--bordo-forte); pointer-events: none;
}
.v-chiarire-punto:first-child::before { top: 20px; }
.v-chiarire-punto:last-child::before { bottom: auto; height: 20px; }

/* la testa del punto: numero, titolo, tipo, esito. È un dato: un clic e il documento va alla frase */
.v-chiarire-testa {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  width: 100%; padding: 7px 14px; border-radius: 0;
}
.v-chiarire-n {
  position: relative; z-index: 1;
  grid-area: 1 / 1 / 3 / 2; align-self: start;
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px;
  font-size: var(--t-13); font-weight: 500; line-height: 1; color: var(--testo-2);
  background: var(--riquadro); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bordo-forte);
  transition: background-color var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido);
}
/* al passaggio il numero risponde insieme alla riga */
.v-chiarire-testa:hover .v-chiarire-n { color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--testo-3); }
.v-chiarire-titolo { grid-area: 1 / 2; min-width: 0; font-weight: 500; line-height: 20px; text-wrap: balance; }
.v-chiarire-tipo { grid-area: 2 / 2; display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; font-size: var(--t-13); color: var(--testo-2); }
.v-chiarire-tipo .sim { width: 12px; height: 12px; }
.v-chiarire-tipo-nome { display: inline-block; white-space: nowrap; }
.v-chiarire-tipo-nome::first-letter { text-transform: uppercase; }
/* il tipo che pesa di più («Rischio di esclusione») si legge per primo */
.v-chiarire-grave .v-chiarire-tipo-nome { font-weight: 500; color: var(--testo); }
.v-chiarire-tipo > .pg { margin-left: -2px; }
/* due pagine: a riposo un punto solo, le due etichette compaiono al passaggio e sul punto aperto */
.v-chiarire-tipo > .pg + .pg::after { display: none; }
.v-chiarire-esito { grid-area: 1 / 3 / 3 / 4; display: flex; }
.v-chiarire-esito:empty { display: none; }

/* esito: tre disegni, tre trattamenti */
.v-chiarire-esito .ico { width: 14px; height: 14px; }
.v-chiarire-esito-coincide { color: var(--testo); }
.v-chiarire-esito-diverso { color: var(--blu-testo); background: var(--blu-tinta); }
.v-chiarire-esito-chiedere { color: var(--testo); background: transparent; box-shadow: inset 0 0 0 1px var(--bordo-forte); }

/* punto con una scelta: il numero si riempie */
.v-chiarire-punto.v-chiarire-deciso .v-chiarire-n,
.v-chiarire-punto.v-chiarire-deciso .v-chiarire-testa:hover .v-chiarire-n { color: var(--su-blu-pieno); background: var(--blu-pieno); box-shadow: none; }
/* scelta appena fatta: un cerchio parte dal numero, una volta sola */
.v-chiarire-n::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--blu); opacity: 0; pointer-events: none; }
.v-chiarire-punto.v-chiarire-colpo .v-chiarire-n::after { animation: v-chiarire-colpo var(--t-lento) var(--curva); }
@keyframes v-chiarire-colpo { from { opacity: 0.85; transform: none; } to { opacity: 0; transform: scale(1.75); } }

/* punto aperto: si alza di un piano, titolo più grande, numero con l'anello */
.v-chiarire-punto.v-chiarire-aperto { z-index: 1; background: var(--riquadro); box-shadow: var(--ombra-2); }
.v-chiarire-punto.v-chiarire-aperto > .v-chiarire-testa { padding-top: 12px; padding-bottom: 4px; }
.v-chiarire-punto.v-chiarire-aperto > .v-chiarire-testa:hover { background: transparent; }
.v-chiarire-punto.v-chiarire-aperto .v-chiarire-titolo { font-size: var(--t-16); font-weight: 600; line-height: 22px; letter-spacing: -0.011em; }
.v-chiarire-punto.v-chiarire-aperto .v-chiarire-n,
.v-chiarire-punto.v-chiarire-aperto .v-chiarire-testa:hover .v-chiarire-n { margin-top: -1px; color: var(--blu-testo); box-shadow: inset 0 0 0 1.5px var(--blu), 0 0 0 3px var(--blu-tinta-2); }
.v-chiarire-punto.v-chiarire-aperto.v-chiarire-deciso .v-chiarire-n,
.v-chiarire-punto.v-chiarire-aperto.v-chiarire-deciso .v-chiarire-testa:hover .v-chiarire-n { color: var(--su-blu-pieno); box-shadow: 0 0 0 3px var(--blu-tinta-2); }
.v-chiarire-punto.v-chiarire-aperto:first-child::before { top: 24px; }
.v-chiarire-punto.v-chiarire-aperto:last-child::before { height: 24px; }
/* sul punto aperto la scelta si legge nelle tre risposte: l'esito accanto al titolo la ripeterebbe */
.v-chiarire-punto.v-chiarire-aperto .v-chiarire-esito { display: none; }

/* punto mostrato nel documento: la tinta e il filo blu prendono tutto il punto, non solo la testa */
.v-chiarire-testa.attivo, .v-chiarire-testa.attivo:hover { background: transparent; box-shadow: none; }
.v-chiarire-testa:focus-visible { outline-offset: -2px; }
.v-chiarire-punto:has(> .v-chiarire-testa.attivo) { background: linear-gradient(var(--blu-tinta), var(--blu-tinta)) var(--riquadro); box-shadow: inset 0 0 0 1.5px var(--blu); }
.v-chiarire-punto.v-chiarire-aperto:has(> .v-chiarire-testa.attivo) { box-shadow: inset 0 0 0 1.5px var(--blu), var(--ombra-2); }

/* il dettaglio del punto aperto, allineato al titolo */
.v-chiarire-dettaglio { display: grid; justify-items: start; gap: 10px; padding: 2px 14px 14px 50px; }
.v-chiarire-dettaglio > * { min-width: 0; max-width: 100%; }
/* due righe al massimo: pari, senza una parola sola in fondo */
.v-chiarire-perche { max-width: 64ch; text-wrap: balance; }

/* le tre risposte: è la decisione del team, quella scelta deve vedersi da lontano */
/* risposte con parole proprie del punto (più lunghe) vanno a capo dentro il loro binario: mai fuori dal riquadro */
.v-chiarire-scelte { position: relative; flex-wrap: wrap; width: auto; }
.v-chiarire-scelte .scelte-voce { white-space: nowrap; }
.v-chiarire-scelte .scelte-voce {
  height: 32px;
  transition: color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva);
}
.v-chiarire-scelte .scelte-voce:active { transform: scale(0.97); }
/* l'anello di fuoco resta dentro il binario delle risposte: non copre la risposta accanto */
.v-chiarire-scelte .scelte-voce:focus-visible { outline-offset: 0; }
.v-chiarire-scelte .ico { width: 14px; height: 14px; color: var(--testo-3); transition: color var(--t-rapido); }
.v-chiarire-scelte .scelte-voce:hover .ico { color: var(--testo-2); }
/* al passaggio la risposta non ancora scelta si prepara: un velo, come le schede */
.v-chiarire-scelte .scelte-voce:not([aria-pressed="true"]):hover { background: var(--velo); }
.v-chiarire-scelte .scelte-voce[aria-pressed="true"] { color: var(--blu-testo); box-shadow: inset 0 0 0 1.5px var(--blu), var(--ombra-1); }
.v-chiarire-scelte .scelte-voce[aria-pressed="true"] .ico { color: var(--blu-testo); }
/* richiamo: un filo blu attorno alle risposte, che arriva in fretta e se ne va piano (opacità e scala) */
.v-chiarire-scelte::after {
  content: ''; position: absolute; inset: -3px; border-radius: 11px; box-shadow: 0 0 0 2px var(--blu);
  opacity: 0; transform: scale(0.985); pointer-events: none;
  transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva);
}
.v-chiarire-scelte.v-chiarire-richiamo::after { opacity: 1; transform: none; transition-duration: var(--t-rapido); }
@container centro (max-width: 659px) {
  /* centro stretto: le tre risposte restano su una riga */
  .v-chiarire-scelte .scelte-voce { gap: 5px; padding: 0 8px; }
}

/* le frasi citate, se sono più d'una: sul punto aperto stanno accanto al tipo, dove negli altri punti c'è
   l'etichetta di pagina (che qui si nasconde). Sono pulsanti: fuori dalla testa, ancorati al nome del tipo */
.v-chiarire-fonti { display: inline-flex; align-items: center; gap: 4px; }
.v-chiarire-fonte { background: var(--etichetta); }
.v-chiarire-punto.v-chiarire-aperto.v-chiarire-piu-fonti .v-chiarire-tipo > .pg { display: none; }
@supports (anchor-name: --a) {
  .v-chiarire-punto.v-chiarire-aperto .v-chiarire-tipo-nome { anchor-name: --v-chiarire-tipo; }
  .v-chiarire-fonti {
    position: absolute; z-index: 1; position-anchor: --v-chiarire-tipo;
    left: calc(anchor(right) + 6px); top: anchor(top); height: anchor-size(height);
  }
}

/* la nota di «Da noi è diverso» */
.v-chiarire-nota { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; }
.v-chiarire-nota > .campo-testo { flex: 1; }
.v-chiarire-nota > .btn { flex: none; }
.v-chiarire-nota > .btn[data-fatta="true"] { opacity: 1; color: var(--testo-2); background: transparent; border-color: transparent; box-shadow: none; }
.v-chiarire-nota > .btn[data-fatta="true"] .ico { color: var(--certo); }

/* la scelta in vigore è nel registro: quando e chi */
/* sta con la scelta (più vicino a lei), il quesito è un altro gruppo (più lontano) */
.v-chiarire-timbro { margin-top: -4px; font-size: var(--t-13); color: var(--testo-2); }
.v-chiarire-timbro:not([hidden]) + .v-chiarire-quesito { margin-top: 2px; }
/* compare con la scelta: solo opacità, il resto del punto non si muove due volte */
.v-chiarire-timbro:not([hidden]) { animation: v-chiarire-compare var(--t-medio) ease-out backwards; }
@keyframes v-chiarire-compare { from { opacity: 0; } }

/* il quesito proposto: si apre a richiesta (o da solo, scelto «Da chiedere»). «Copia» sta accanto al titolo,
   il testo prende tutta la larghezza */
.v-chiarire-quesito { display: grid; gap: 4px; width: 100%; }
.v-chiarire-quesito-testa { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.v-chiarire-quesito-apri {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 2px; margin-left: -2px;
  font-size: var(--t-13); border-radius: var(--r-1); transition: background-color var(--t-rapido);
}
.v-chiarire-quesito-apri:hover { background: var(--velo); }
.v-chiarire-quesito-apri > .ico { color: var(--testo-2); transition: transform var(--t-medio) var(--curva); }
.v-chiarire-quesito-apri[aria-expanded="true"] > .ico { transform: rotate(90deg); }
.v-chiarire-quesito-apri .sim { width: 13px; height: 13px; }
.v-chiarire-copia.v-chiarire-copiato { color: var(--testo); }
.v-chiarire-copia.v-chiarire-copiato .ico { color: var(--certo); }
.v-chiarire-quesito-corpo { display: grid; gap: 6px; max-width: 68ch; }
.v-chiarire-quesito-testo { text-wrap: pretty; }
/* il termine dei quesiti: lo dice una riga sotto il testo, senza allarme */
.v-chiarire-quesito-nota { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-13); color: var(--testo-2); }
.v-chiarire-quesito-nota > .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* quello che si apre entra con un leggero scorrimento (solo opacità e posizione) */
/* «backwards», non «both»: a ingresso finito il pezzo non ha più una trasformazione (la classe la toglie il JS).
   Finché entra, le etichette ancorate al tipo del punto restano invisibili: compaiono al loro posto subito dopo */
.v-chiarire-entra { animation: v-chiarire-entra var(--t-medio) var(--curva) backwards; }
.v-chiarire-fonti { transition: opacity var(--t-rapido) ease-out; }
.v-chiarire-entra .v-chiarire-fonti { opacity: 0; transition: none; }
@keyframes v-chiarire-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- «Tutte le voci» ---------- */
/* un altro gruppo: più aria sopra, e un filo che porta il titolo fino al bordo */
.v-chiarire-tutte { margin-top: 8px; }
.v-chiarire-tutte > summary { width: 100%; gap: 8px; padding: 6px 8px 6px 2px; color: var(--testo); }
.v-chiarire-tutte > summary::after { content: ''; flex: 1; height: 1px; margin-left: 4px; background: var(--bordo); }
.v-chiarire-tutte-nome { font-size: var(--t-14); font-weight: 600; }
.v-chiarire-tutte-corpo { display: grid; gap: 10px; min-width: 0; }
.v-chiarire-filtri { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* se accanto ai cinque filtri non restano 200 px, il campo va a capo e prende la riga */
.v-chiarire-cerca { flex: 1 1 200px; min-width: 200px; }
/* quante voci ha trovato la ricerca: accanto al campo */
.v-chiarire-conta { flex: none; padding: 0 2px; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
.v-chiarire-conta:empty { display: none; }
/* la legenda sta sopra le colonne che spiega, nello stesso ordine */
.v-chiarire-guida { justify-content: flex-end; padding-right: 2px; }
.v-chiarire-guida .ico { width: 14px; height: 14px; color: var(--testo-2); }

/* la tabella: nome, pagina, tre colonne per la scelta */
.v-chiarire-tabella td { height: 36px; padding-top: 4px; padding-bottom: 4px; }
.v-chiarire-tabella thead .ico { display: block; width: 14px; height: 14px; margin: 0 auto; }
.v-chiarire-tabella .v-chiarire-cella-s { width: 1%; padding-left: 4px; padding-right: 4px; }
.v-chiarire-tabella .v-chiarire-cella-s:last-child { padding-right: 12px; }
.v-chiarire-tabella .col-pag { padding-right: 6px; }
.v-chiarire-gruppo > th { padding-top: 7px; padding-bottom: 7px; font-size: var(--t-13); }
.v-chiarire-gruppo .sim { width: 13px; height: 13px; }

.v-chiarire-riga { cursor: pointer; }
.v-chiarire-nome-fila { position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.v-chiarire-nome {
  display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding: 2px 4px 2px 0;
  font-weight: 500; line-height: 20px; text-align: left; border-radius: var(--r-1);
}
.v-chiarire-nome > .ico { margin-top: 2px; color: var(--testo-3); transition: transform var(--t-medio) var(--curva), color var(--t-rapido); }
.v-chiarire-riga:hover .v-chiarire-nome > .ico { color: var(--testo-2); }
.v-chiarire-nome[aria-expanded="true"] > .ico, .v-chiarire-riga:hover .v-chiarire-nome[aria-expanded="true"] > .ico { transform: rotate(90deg); color: var(--testo); }
.v-chiarire-nome-testo { min-width: 0; text-wrap: pretty; }
/* la riga intera fa da bersaglio: il nome non ha un suo fondo */
.v-chiarire-nome:hover, .v-chiarire-nome.attivo, .v-chiarire-nome.attivo:hover { background: transparent; box-shadow: none; }
.v-chiarire-riga:has(.v-chiarire-nome.attivo), .v-chiarire-riga:has(.v-chiarire-nome.attivo):hover { background: var(--blu-tinta); box-shadow: inset 2px 0 0 var(--blu); }
/* «punto N»: alta quanto la riga del nome. Dove il browser sa ancorare, sta subito dopo l'ultima parola
   (anche con il nome su due righe); altrimenti resta accanto al nome */
.v-chiarire-posto { display: none; }
.v-chiarire-al-punto { height: 20px; margin-top: 2px; cursor: pointer; transition: background-color var(--t-rapido), transform var(--t-rapido) var(--curva); }
.v-chiarire-al-punto:hover { background: var(--blu-tinta-2); }
.v-chiarire-al-punto:active { transform: scale(0.97); }
@supports (anchor-name: --a) {
  .v-chiarire-posto { display: inline-flex; visibility: hidden; height: 20px; margin-left: 2px; vertical-align: top; }
  /* il posto è invisibile apposta: senza «always» Chrome nasconde anche il pulsante ancorato a lui */
  .v-chiarire-al-punto { position: absolute; left: anchor(left); top: anchor(top); margin-top: 0; position-visibility: always; }
}
.v-chiarire-dove { width: 24px; height: 24px; margin-right: 1px; }

/* la scelta in riga: tre tondi, uno per colonna. Pieno = scelto */
.v-chiarire-pallino {
  display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto;
  color: var(--testo-3); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bordo-forte);
  transition: background-color var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva);
}
.v-chiarire-pallino .ico { width: 14px; height: 14px; }
.v-chiarire-pallino:hover { color: var(--blu-testo); background: var(--blu-tinta); box-shadow: inset 0 0 0 1px var(--blu-bordo); }
.v-chiarire-pallino:active { transform: scale(0.94); }
.v-chiarire-pallino[aria-pressed="true"] { color: var(--su-blu-pieno); background: var(--blu-pieno); box-shadow: none; }

/* la scheda della riga aperta */
.v-chiarire-riga.v-chiarire-riga-aperta > td { border-bottom-color: transparent; }
.v-chiarire-tabella tr.v-chiarire-espansa, .v-chiarire-tabella tr.v-chiarire-espansa:hover { background: transparent; }
.v-chiarire-tabella .v-chiarire-espansa > td { height: auto; padding: 0 14px 14px 36px; }
.v-chiarire-scheda { display: grid; justify-items: start; gap: 6px; max-width: 68ch; }
.v-chiarire-scheda > .coppie { width: 100%; }
.v-chiarire-scheda dd { font-weight: 400; }
.v-chiarire-scheda > .v-chiarire-nota { width: 100%; margin-top: 4px; }

/* ---------- le voci certe, ripiegate in fondo a «Tutte»: il titolo del gruppo le apre e le richiude ---------- */
.v-chiarire-certe { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: -3px -6px; padding: 0 6px; font: inherit; color: inherit; border-radius: var(--r-1); transition: background-color var(--t-rapido); }
.v-chiarire-certe:hover { background: var(--velo); }
.v-chiarire-certe > .ico { width: 14px; height: 14px; color: var(--testo-2); transition: transform var(--t-medio) var(--curva); }
.v-chiarire-certe[aria-expanded="false"] > .ico { transform: rotate(-90deg); }