/*
 * Check AI Act - foglio di stile
 *
 * Idea guida: il report è un "fascicolo annotato". Il testo principale sta a
 * sinistra; norme, date e stato di verifica stanno a margine, come le note
 * a lato di un codice commentato. È l'unico elemento "forte" della pagina:
 * tutto il resto resta sobrio.
 *
 * Manrope e Inter sono ospitati localmente con licenze OFL allegate.
 * Nessuna richiesta a servizi terzi. Identità AV, fascicolo e contenuti invariati.
 */

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --av-red: #D3132C;
  --av-red-hover: #A90F24;
  --av-white: #FFFFFF;
  --carta: #F4F5F7;
  --carta-alta: #FFFFFF;
  --titoli: #1B1E23;
  --inchiostro: #3A3A3A;
  --inchiostro-tenue: #616873;
  --linea: #E2E5E9;
  --linea-forte: #8A9099;
  --accento: #D3132C;
  --accento-scuro: #A90F24;
  --accento-tenue: #FBE8EA;
  --focus: #D3132C;
  --margine: #FFFFFF;
  /* Colori semantici distinti dall'accento del marchio; simboli e testo restano primari. */
  --vietato: #1B1E23;
  --alto: #8A4B00;
  --trasparenza: #24578A;
  --minimo: #27633D;
  --serif: 'Manrope Variable', 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Inter Variable', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --t-xs: 0.875rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.375rem;
  --t-xl: 1.875rem;
  --t-xxl: 2.625rem;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --colonna: 42rem; --pagina: 64rem; --raggio: 4px;
  color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --carta: #14171C; --carta-alta: #22262D;
    --titoli: #FFFFFF; --inchiostro: #F4F5F7; --inchiostro-tenue: #A9AFB9;
    --linea: #434A55; --linea-forte: #8A9099;
    --accento: #FFFFFF; --accento-scuro: #F4F5F7;
    --accento-tenue: #30353D; --focus: #FFFFFF; --margine: #22262D;
    --vietato: #F4F5F7; --alto: #F0BD7D; --trasparenza: #A8C8F5; --minimo: #A6D7B6;
    color-scheme: dark;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; width: 100%; max-width: var(--pagina); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-8); }
main:focus { outline: none; }

h1, h2, h3 { color: var(--titoli); font-family: var(--serif); font-weight: 750; line-height: 1.2; margin: 0; }
p { margin: 0; }

a { color: var(--accento); text-underline-offset: 0.15em; }
a:hover { color: var(--accento-scuro); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--accento); color: var(--carta-alta);
  padding: var(--s-2) var(--s-4); border-radius: var(--raggio); z-index: 10;
}
.salta:focus { top: var(--s-2); }

/* ---------- Testata e piede ---------- */

.testata { border-top: 3px solid var(--av-red); border-bottom: 1px solid var(--linea); background: var(--carta-alta); }
.testata__interno {
  max-width: var(--pagina); margin: 0 auto; padding: var(--s-3) var(--s-4);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4);
}
.marchio { display: inline-flex; align-items: center; background: var(--av-white); padding: var(--s-2) var(--s-3); border-radius: var(--raggio); flex-shrink: 0; }
.marchio__logo { display: block; width: 160px; height: auto; max-width: 100%; }
.testata__titolo { font-size: var(--t-s); color: var(--inchiostro-tenue); }

.banner-bozza {
  background: var(--accento-tenue); color: var(--inchiostro);
  font-size: var(--t-s); text-align: center; padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--linea);
}

.piede { border-top: 1px solid var(--linea); color: var(--inchiostro-tenue); font-size: var(--t-xs); }
.piede__interno { max-width: var(--pagina); margin: 0 auto; padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); }

/* ---------- Elementi comuni ---------- */

.nota { font-size: var(--t-s); color: var(--inchiostro-tenue); max-width: var(--colonna); }

.avviso {
  max-width: var(--colonna);
  border-left: 3px solid var(--alto);
  padding: var(--s-3) var(--s-4);
  background: var(--carta-alta);
  margin-top: var(--s-4);
}

.errore { color: var(--vietato); font-size: var(--t-s); margin-top: var(--s-2); }

.bottone {
  font: inherit; font-size: var(--t-s); font-weight: 600;
  border-radius: var(--raggio); padding: 0.7rem 1.25rem; cursor: pointer;
  border: 1px solid transparent; line-height: 1.2; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.bottone--primario { background: var(--av-red); color: var(--av-white); }
.bottone--primario:hover { background: var(--av-red-hover); color: var(--av-white); }
.bottone--secondario { background: var(--carta-alta); color: var(--inchiostro); border-color: var(--linea-forte); }
.bottone--secondario:hover { border-color: var(--inchiostro-tenue); }
.bottone--testo { background: none; color: var(--accento); padding-inline: var(--s-2); text-decoration: underline; text-underline-offset: 0.15em; }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .bottone--primario { border-color: var(--av-white); }
  :root:not([data-tema="chiaro"]) .classe__simbolo { filter: brightness(0) invert(1); }
}

/* ---------- Scelte (radio e checkbox) ---------- */

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

.scelta {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--linea-forte); border-radius: var(--raggio); min-height: 48px;
  background: var(--carta-alta); cursor: pointer;
}
.scelta + .scelta { margin-top: var(--s-2); }
.scelta:hover { border-color: var(--linea-forte); }
.scelta:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.scelta input { margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accento); flex-shrink: 0; }
.scelta__testo { display: grid; gap: var(--s-1); }
.scelta__etichetta { font-size: var(--t-m); }
.scelta__descrizione { font-size: var(--t-s); color: var(--inchiostro-tenue); }

/* ---------- Home ---------- */

.home { display: grid; gap: var(--s-6); max-width: var(--colonna); }
.home__apertura { display: grid; gap: var(--s-4); padding-top: var(--s-4); }
.home__titolo { font-size: var(--t-xxl); letter-spacing: -0.01em; max-width: 22ch; }
.home__sottotitolo { font-size: var(--t-l); line-height: 1.45; color: var(--inchiostro-tenue); font-family: var(--sans); }
.home__fatti {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-s); color: var(--inchiostro-tenue);
}
.home__fatti li { padding-left: var(--s-4); position: relative; }
.home__fatti li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--av-red);
}
.home__modulo { display: grid; gap: var(--s-5); justify-items: start; }
.home__modulo fieldset { width: 100%; }
.home__legenda { font-family: var(--serif); font-size: var(--t-l); font-weight: 700; margin-bottom: var(--s-3); }

/* ---------- Passi ---------- */

.passo { max-width: var(--colonna); display: grid; gap: var(--s-4); }

.avanzamento { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.avanzamento__testo { font-size: var(--t-s); color: var(--inchiostro-tenue); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.avanzamento__barra { height: 4px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.avanzamento__riempimento { display: block; height: 100%; background: var(--accento); transition: width 300ms ease; }

.passo__titolo { font-size: var(--t-xl); }
.passo__intro { color: var(--inchiostro-tenue); font-family: var(--sans); font-size: var(--t-m); line-height: 1.6; }
.passo__modulo { display: grid; gap: var(--s-6); margin-top: var(--s-4); }
.passo__domande { display: grid; gap: var(--s-6); }
.passo__navigazione { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--linea); }

.domanda__testo { font-weight: 600; font-size: var(--t-m); margin-bottom: var(--s-2); }
.domanda__aiuto { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--s-3); }
.domanda__scelte--riga { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.domanda__scelte--riga .scelta { margin-top: 0; padding: var(--s-2) var(--s-3); align-items: center; }

@media (max-width: 34rem) {
  .domanda__scelte--riga { grid-template-columns: repeat(2, 1fr); }
  .home__titolo { font-size: var(--t-xl); }
}

/* ---------- Report ---------- */

.report { display: grid; gap: var(--s-7); }

.report__testata { display: grid; gap: var(--s-3); max-width: var(--colonna); }
.report__titolo { font-size: var(--t-xxl); letter-spacing: -0.01em; }
.report__meta { color: var(--inchiostro-tenue); }
.report__azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.report__sezione { display: grid; gap: var(--s-4); }
.report__sezione > h2 { font-size: var(--t-xl); padding-bottom: var(--s-2); border-bottom: 2px solid var(--inchiostro); }
.report__intro { color: var(--inchiostro-tenue); max-width: var(--colonna); }
.report__sottotitolo { font-size: var(--t-l); margin-top: var(--s-4); }

.sintesi {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0;
  border-top: 1px solid var(--linea-forte); border-bottom: 1px solid var(--linea-forte);
}
.sintesi__voce { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.sintesi__voce + .sintesi__voce { padding-left: var(--s-4); border-left: 1px solid var(--linea); }
.sintesi dt { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--s-2); }
.sintesi dd { margin: 0; }
.sintesi__numero { font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; }
.sintesi__unita { color: var(--inchiostro-tenue); }

@media (max-width: 44rem) {
  .sintesi { grid-template-columns: 1fr; }
  .sintesi__voce + .sintesi__voce { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
}

/* Classe di rischio */
.classe {
  display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-s); font-weight: 600;
  padding: var(--s-1) var(--s-2); border-radius: var(--raggio); border: 2px solid currentColor; background: var(--carta-alta);
  white-space: normal;
}
.classe__simbolo { width: 1.25em; height: 1.25em; flex: 0 0 1.25em; }
.classe--vietato { color: var(--vietato); border-style: double; border-width: 3px; }
.classe--alto { color: var(--alto); border-style: solid; }
.classe--trasparenza { color: var(--trasparenza); border-style: dashed; }
.classe--minimo { color: var(--minimo); border-style: dotted; }

/* Il fascicolo annotato: corpo a sinistra, note a margine a destra. */
.fascicolo {
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem;
  border-top: 1px solid var(--linea);
}
.fascicolo__corpo { padding: var(--s-5) var(--s-6) var(--s-5) 0; display: grid; gap: var(--s-3); align-content: start; }
.fascicolo__margine {
  background: var(--margine);
  border-left: 1px solid var(--linea-forte);
  padding: var(--s-5) var(--s-4);
  font-family: var(--sans); font-style: normal; font-size: var(--t-s);
  color: var(--inchiostro-tenue); line-height: 1.5;
  display: grid; gap: var(--s-3); align-content: start;
}
.fascicolo__margine a { font-style: normal; }

@media (max-width: 44rem) {
  .fascicolo { grid-template-columns: 1fr; }
  .fascicolo__corpo { padding-right: 0; }
  .fascicolo__margine { border-left: 0; border-top: 1px dashed var(--linea-forte); margin-bottom: var(--s-4); }
}

.usi { list-style: none; padding: 0; margin: 0; }
.usi .fascicolo__corpo { grid-template-columns: 1fr auto; align-items: start; gap: var(--s-4); }
.usi .fascicolo__corpo,
.usi .fascicolo__margine { padding-block: var(--s-4); }

.voce--critica .fascicolo__corpo { border-left: 4px solid var(--vietato); padding-left: var(--s-4); }
.voce__etichette { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-xs); }
.etichetta { color: var(--inchiostro-tenue); }
.etichetta + .etichetta::before { content: "/"; margin-right: var(--s-2); color: var(--linea-forte); }
.etichetta--priorita-critica { color: var(--vietato); font-weight: 600; }
.etichetta--priorita-alta { color: var(--alto); font-weight: 600; }
.voce__titolo { font-size: var(--t-l); }
.voce__sintesi { max-width: 38rem; }
.voce__sottotitolo { font-weight: 600; font-size: var(--t-s); }
.voce__azioni { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); max-width: 38rem; }

.margine__ambito { font-style: normal; font-family: var(--sans); font-weight: 600; color: var(--inchiostro); font-size: var(--t-xs); }
.margine__stato { font-style: normal; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; }
.margine__stato--in-vigore { color: var(--inchiostro); }
.margine__stato--in-arrivo { color: var(--trasparenza); }
.margine__stato--caso-per-caso { color: var(--alto); }
.margine__verifica { font-size: var(--t-xs); border-top: 1px solid var(--linea); padding-top: var(--s-2); }

/* Maturità */
.aree { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); max-width: var(--colonna); }
.aree__voce { display: grid; grid-template-columns: 11rem 1fr 2.5rem; align-items: center; gap: var(--s-3); }
.aree__nome { font-size: var(--t-s); }
.aree__barra { height: 8px; background: var(--linea); border-radius: 4px; overflow: hidden; }
.aree__riempimento { display: block; height: 100%; background: var(--inchiostro); }
.aree__valore { font-family: var(--serif); font-weight: 600; text-align: right; }
.lacune { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-2); max-width: var(--colonna); }

@media (max-width: 34rem) {
  .aree__voce { grid-template-columns: 1fr 2.5rem; }
  .aree__barra { grid-column: 1 / -1; grid-row: 2; }
}

/* Servizi */
.report__sezione--servizi { background: var(--carta-alta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-6); }
.report__sezione--servizi > h2 { border-bottom: 0; padding-bottom: 0; }
.servizi { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.servizi h3 { font-size: var(--t-m); margin-bottom: var(--s-1); }
.servizi p { font-size: var(--t-s); color: var(--inchiostro-tenue); }
.servizi__contatto { font-weight: 600; }

.fonti { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); font-size: var(--t-s); }

.errore-pagina { max-width: var(--colonna); display: grid; gap: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Stampa / PDF ---------- */

@media print {
  :root { --carta: #fff; --carta-alta: #fff; --margine: #fff; --titoli: #000; --inchiostro: #000; --inchiostro-tenue: #333; --linea: #999; --linea-forte: #555; --accento: #000; --vietato: #000; --alto: #000; --trasparenza: #000; --minimo: #000; color-scheme: light; }
  body { font-size: 10.5pt; }
  .classe { background: #fff; color: #000; break-inside: avoid; }
  .classe__simbolo { filter: none; }
  .fascicolo__margine { background: #fff; }
  .testata, .banner-bozza, .report__azioni, .salta { display: none !important; }
  main { padding: 0; max-width: none; }
  .report { gap: 1.2rem; }
  .report__titolo { font-size: 20pt; }
  .fascicolo { break-inside: avoid; grid-template-columns: minmax(0, 1fr) 5.5cm; }
  .report__sezione > h2 { break-after: avoid; }
  a { color: inherit; }
  .fascicolo__margine a::after { content: " (" attr(href) ")"; font-size: 7pt; word-break: break-all; }
  .report__sezione--servizi { border: 1px solid #999; }
  @page { size: A4; margin: 1.6cm 1.4cm; }
}

/* Reflow con testo ingrandito e viewport stretti. */
.usi .fascicolo__corpo { grid-template-columns: minmax(0, 1fr) auto; }
.usi__etichetta, .servizi, .servizi__contatto, .fonti { min-width: 0; overflow-wrap: anywhere; }
.report__stato-contenuti { max-width: none; }
@media (max-width: 34rem) { .usi .fascicolo__corpo { grid-template-columns: 1fr; } }
@media print { .report__stato-contenuti { display: block !important; border: 2px solid #555; } }