/* Quisquilia · Compliance (21/10, v2). Scheda tecnica: testa compatta con progetto.yml, indice orizzontale fisso,
   quattro paragrafi numerati. Le isole scure (yml, anatomia) usano i token della notte di .isola. */

.cp .isola { background: #071c27; }
.cp .mono { font-family: var(--mono); }

/* ------------------------------------------------------------ testa */
.cp-testa { padding: calc(var(--testa-h, 76px) + clamp(56px, 9vh, 110px)) 0 clamp(48px, 8vh, 88px); }
.cp-testa-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.cp-occhiello { color: #c41f36; font-size: var(--t-dato); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.cp-titolo { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; color: var(--titolo); text-wrap: balance; }
.cp-lead { margin-top: 22px; font-size: var(--t-lead); line-height: 1.55; color: var(--sky-chiaro); }
.cp-meta { margin: 32px 0 0; border-top: 1px solid var(--linea); font-size: var(--t-piccolo); }
.cp-meta > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.cp-meta dt { color: var(--nebbia); }
.cp-meta dd { margin: 0; color: var(--mint); }

.cp-yml { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(7, 28, 39, .55); }
.cp-yml figcaption { display: flex; align-items: center; gap: 14px; padding: 12px 18px; font-size: var(--t-dato); color: var(--sky-chiaro); border-bottom: 1px solid var(--linea); }
.cp-yml-punti { display: inline-flex; gap: 6px; }
.cp-yml-punti i { width: 9px; height: 9px; border-radius: 50%; background: rgba(214, 229, 238, .22); }
.cp-yml pre { margin: 0; padding: 20px 22px 24px; font-size: var(--t-piccolo); line-height: 1.7; color: #d6e5ee; overflow-x: auto; }
.cp-yml .k { color: #8eb7ce; }
.cp-yml .v { color: #f7cdb6; }
.cp-yml .s { color: #7fd6a4; }
.cp-yml .n { color: #ff7c8b; }
.cp-yml .c { color: #7f98a6; font-style: italic; }
.cp-yml .riga-yml { opacity: 0; transition: opacity .25s; }
.cp-yml .riga-yml.vista { opacity: 1; }

/* ------------------------------------------------------------ indice orizzontale fisso */
.cp-indice { position: sticky; top: var(--testa-h, 64px); z-index: 30; background: color-mix(in srgb, var(--notte) 94%, transparent); border-block: 1px solid var(--linea); }
.cp-indice-riga { position: relative; }
.cp-indice ol { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(8px, 2vw, 32px); overflow-x: auto; scrollbar-width: none; }
.cp-indice a { display: flex; gap: 10px; align-items: baseline; padding: 14px 4px; color: var(--sky-chiaro); text-decoration: none; white-space: nowrap; font-size: var(--t-piccolo); transition: color .2s; }
.cp-indice a .mono { color: var(--nebbia); font-size: var(--t-dato); }
.cp-indice a:hover, .cp-indice a[aria-current="true"] { color: var(--titolo); }
.cp-indice a[aria-current="true"] { font-weight: 600; }
.cp-indice a[aria-current="true"] .mono { color: #c41f36; }
.cp-indice-barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.cp-indice-barra i { display: block; height: 100%; background: var(--fucsia); transform-origin: left; transform: scaleX(var(--letto, 0)); }

/* ------------------------------------------------------------ blocchi */
.cp-blocco { padding: clamp(64px, 11vh, 128px) 0; scroll-margin-top: calc(var(--testa-h, 64px) + 48px); }
.cp-blocco + .cp-blocco:not(.isola) { border-top: 1px solid var(--linea); }
.cp-capo { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 6px clamp(16px, 2vw, 32px); align-items: baseline; margin-bottom: clamp(32px, 5vh, 56px); }
.cp-num { color: #c41f36; font-size: var(--t-piccolo); }
.isola .cp-num { color: #ff7c8b; }
.cp-capo h2 { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; color: var(--titolo); }
.cp-capo p:not(.cp-num) { grid-column: 2; font-size: var(--t-testo); line-height: 1.55; color: var(--sky-chiaro); }
.cp-capo .etichetta-finta { grid-column: 3; grid-row: 1; }

/* ------------------------------------------------------------ §1 anatomia */
.an-passi { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.an-passi button { width: 100%; text-align: left; font: inherit; font-size: var(--t-testo); color: var(--sky-chiaro); background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 16px 0; cursor: pointer; display: flex; gap: 10px; align-items: baseline; transition: color .2s, border-color .2s; }
.an-passi button .mono { font-size: var(--t-dato); color: var(--nebbia); }
.an-passi button[aria-selected="true"] { color: #fff; border-top-color: #ff7c8b; }
.an-passi button[aria-selected="true"] .mono { color: #ff7c8b; }
.an-passi button:focus-visible { outline: 2px solid #ff7c8b; outline-offset: 2px; }
.an-corpo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.an-frase { min-height: 15em; }
.an-testo { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; color: #f9fffb; }
.an .id { border-radius: 4px; padding: 0 .12em; transition: background-color .4s, color .4s; }
.an[data-passo="1"] .id { background: rgba(247, 205, 182, .16); box-shadow: inset 0 -2px 0 rgba(247, 205, 182, .7); }
.an:not([data-passo="1"]) .id { font-family: var(--mono); font-size: .78em; color: #071c27; background: #f7cdb6; padding: .05em .35em; }
.an .id.lampo { animation: an-lampo .5s steps(4); }
@keyframes an-lampo { 0%, 50% { background: repeating-linear-gradient(-45deg, rgba(247, 205, 182, .9) 0 3px, rgba(247, 205, 182, .4) 3px 6px); color: transparent; } }
.an .cod { border-radius: 4px; transition: background-color .4s; }
.an[data-passo="3"] .cod { background: rgba(142, 183, 206, .16); box-shadow: inset 0 -2px 0 #8eb7ce; }
.an .cod::after { content: attr(data-tag); display: none; margin-left: .4em; vertical-align: .25em; font: 500 var(--t-dato)/1 var(--mono); letter-spacing: 0; color: #071c27; background: #8eb7ce; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.an[data-passo="3"] .cod::after { display: inline-block; animation: an-entra .45s cubic-bezier(.16, 1, .3, 1); }
.an[data-passo="4"] .an-testo { font-size: var(--t-testo); line-height: 1.6; color: var(--nebbia); }
.an-report { display: none; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.an[data-passo="4"] .an-report { display: block; animation: an-entra .5s cubic-bezier(.16, 1, .3, 1); }
.an-report-testo { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; color: #f9fffb; }
.an-report-testo b { color: #f7cdb6; font-weight: 600; }
.an-report-nota { margin-top: 12px; font-size: var(--t-dato); color: var(--nebbia); }
.an[data-vista="aggregato"] [data-per="individuale"], .an[data-vista="individuale"] [data-per="aggregato"] { display: none; }
.an-scelta { display: inline-flex; margin-top: 22px; padding: 4px; border-radius: 999px; background: rgba(214, 229, 238, .08); }
.an-scelta button { font: inherit; font-size: var(--t-piccolo); border: 0; background: none; color: var(--sky-chiaro); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.an-scelta button[aria-checked="true"] { background: #f9fffb; color: #071c27; }
.an-scelta button:focus-visible { outline: 2px solid #ff7c8b; outline-offset: 2px; }
.an-log { margin: 0; font-size: var(--t-piccolo); line-height: 1.55; }
.an-log > div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linea); color: var(--nebbia); transition: color .3s; }
.an-log > div:last-child { border-bottom: 1px solid var(--linea); }
.an-log dd { margin: 0; }
.an[data-passo="1"] .an-log [data-per="1"], .an[data-passo="2"] .an-log [data-per="2"], .an[data-passo="3"] .an-log [data-per="3"], .an[data-passo="4"] .an-log [data-per="4"] { color: #f9fffb; }
.an[data-passo="1"] .an-log [data-per="1"] dt, .an[data-passo="2"] .an-log [data-per="2"] dt, .an[data-passo="3"] .an-log [data-per="3"] dt, .an[data-passo="4"] .an-log [data-per="4"] dt { color: #ff7c8b; }
@keyframes an-entra { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ §2 perimetro (lo schema lo disegna interne.js) */
.pm { margin: 0; }
.pm-tela svg { display: block; width: 100%; height: auto; overflow: visible; }
.pm-tela .ue { fill: rgba(142, 183, 206, .08); stroke: var(--sky); stroke-width: 1.5; stroke-dasharray: 6 6; }
.pm-tela .ue-etichetta { font: 500 var(--t-dato) var(--mono); fill: var(--sky); }
.pm-tela .filo { fill: none; stroke: var(--linea-forte); stroke-width: 1.5; }
.pm-tela .pacchetto { fill: var(--fucsia); }
.pm-tela .nodo rect { fill: #fff; stroke: var(--linea-forte); stroke-width: 1.2; }
.pm-tela .nodo.fine rect { stroke: var(--fucsia); stroke-width: 1.6; }
.pm-tela .nodo .nome { font: 600 var(--t-piccolo) var(--display); fill: var(--titolo); }
.pm-tela .nodo .sotto { font: 400 var(--t-micro) var(--mono); fill: var(--nebbia); }
.pm-tela .lucchetto circle { fill: var(--notte); stroke: var(--imperial); stroke-width: 1.2; }
.pm-tela .lucchetto rect, .pm-tela .lucchetto path { fill: none; stroke: var(--imperial); stroke-width: 1.3; }
.pm-tela .persona circle.fondo { fill: var(--fucsia); }
.pm-tela .persona path, .pm-tela .persona circle.testa { fill: none; stroke: #fff; stroke-width: 1.5; }
.pm-legenda { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--t-dato); color: var(--sky-chiaro); }
.pm-legenda li { display: flex; gap: 8px; align-items: center; }
.pm-legenda i { width: 14px; height: 14px; display: inline-block; border-radius: 50%; }
.pm-l-lucchetto { box-shadow: 0 0 0 1.5px var(--imperial) inset; }
.pm-l-persona { background: var(--fucsia); }
.pm-legenda .pm-l-ue { border-radius: 3px; border: 1.5px dashed var(--sky); }

/* ------------------------------------------------------------ §3 requisiti */
.rq-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rq-filtri button { font: inherit; font-size: var(--t-piccolo); border: 1px solid var(--linea-forte); background: none; color: var(--sky-chiaro); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.rq-filtri button .mono { font-size: var(--t-micro); color: var(--nebbia); margin-left: 4px; }
.rq-filtri button[aria-pressed="true"] { background: var(--titolo); border-color: var(--titolo); color: #fff; }
.rq-filtri button[aria-pressed="true"] .mono { color: rgba(255, 255, 255, .75); }
.rq { margin: 0; }
.rq > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px clamp(20px, 3vw, 56px); padding: 18px 0; border-top: 1px solid var(--linea); }
.rq > div:last-child { border-bottom: 1px solid var(--linea); }
.rq > div[hidden] { display: none; }
.rq dt { font-weight: 600; font-size: var(--t-testo); color: var(--titolo); line-height: 1.4; }
.rq dd { margin: 0; color: var(--sky-chiaro); line-height: 1.55; }
.rq-tag { display: inline-block; margin-left: 10px; font-size: var(--t-micro); color: var(--imperial); border: 1px solid rgba(29, 47, 122, .25); border-radius: 4px; padding: 2px 7px; vertical-align: .1em; white-space: nowrap; }
.rq-tag + .rq-tag { margin-left: 6px; }
.rq > div.entra { animation: an-entra .35s cubic-bezier(.16, 1, .3, 1); }
/* elenchi dentro un requisito: scenari dell'AI Act e tempi di conservazione, righe a filo */
.rq-lista { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.rq-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: var(--t-piccolo); }
.rq-lista b { font-weight: 600; color: var(--titolo); }

/* ------------------------------------------------------------ §4 cartella: i documenti come fogli con l'angolo piegato */
.ct { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 18px; }
.ct li { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 210px; padding: 22px 20px 20px; background: #fff; border-radius: 4px 22px 4px 4px; box-shadow: 0 0 0 1px var(--linea) inset, 0 18px 36px -28px rgba(14, 46, 62, .35); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ct li::before { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--notte) 50%, var(--carta-linea) 50%); border-bottom-left-radius: 4px; }
.ct li:hover { transform: translateY(-4px); }
.ct-tipo { align-self: flex-start; font-size: var(--t-micro); color: #fff; background: var(--imperial); border-radius: 4px; padding: 3px 8px; }
.ct b { font: 600 var(--t-testo)/1.55 var(--display); color: var(--titolo); margin-top: auto; }
.ct-nota { color: var(--sky-chiaro); font-size: var(--t-piccolo); line-height: 1.45; }

/* ------------------------------------------------------------ larghezze */
@media (max-width: 1000px) {
  .cp-testa-griglia, .an-corpo { grid-template-columns: minmax(0, 1fr); }
  .an-frase { min-height: 0; }
}
@media (max-width: 700px) {
  .cp-capo { grid-template-columns: minmax(0, 1fr); }
  .cp-capo p:not(.cp-num), .cp-capo .etichetta-finta { grid-column: 1; grid-row: auto; }
  .cp-capo .etichetta-finta { justify-self: start; }
  .an-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq > div { grid-template-columns: minmax(0, 1fr); }
  .cp-meta > div { grid-template-columns: 90px 1fr; }
  .cp-indice ol { justify-content: space-between; }
  .cp-indice a { font-size: var(--t-piccolo); }
  .cp-indice a:not([aria-current]) .ix-nome { display: none; }
  .ct li { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .an .id.lampo, .an[data-passo="3"] .cod::after, .an[data-passo="4"] .an-report, .rq > div.entra { animation: none; }
  .ct li { transition: none; }
}