/* Hallmark · genre: editorial · macrostructure: Stat-Led · hero: giant figure + worded headline, left figure / right words
 * theme: custom · vibe: "referto diretto, quasi bianco, giallo evidenziatore" · paper: oklch(99.4% 0.003 90) · accent: oklch(84.6% 0.173 85.6)
 * display: Inter 800 (scelta di Gianluca: ricalca il font di sistema della homepage) · body: IBM Plex Sans · axes: light / geometric-sans / chromatic-amber ~86°
 * nav: N9 edge-aligned minimal · footer: Ft6 letter close · enrichment: Tier B hand-built SVG radar + E7 animated background (accesso, solo giallo, richiesta di Gianluca)
 * studied: no · context: redesign of v1 (audit 2026-09-30) · contrast: pass (40–41) · v1.1.0
 */

/* ---------- Base ---------- */

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.lead { font-size: var(--text-md); color: var(--color-ink-2); max-width: var(--measure); margin: 0; }

/* ---------- Sfondo animato (solo pagina di accesso) ---------- */

.sfondo-animato {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
body.con-sfondo .sfondo-animato { opacity: 1; }

.sfondo-animato span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
  animation: deriva var(--dur-deriva) var(--ease-out) infinite alternate;
}
.sfondo-animato span:nth-child(1) { top: -30vmax; right: -20vmax; background: radial-gradient(circle, var(--color-luce-1), transparent 65%); }
.sfondo-animato span:nth-child(2) { bottom: -38vmax; left: -22vmax; background: radial-gradient(circle, var(--color-luce-2), transparent 65%); animation-duration: calc(var(--dur-deriva) * 1.3); animation-direction: alternate-reverse; }
.sfondo-animato span:nth-child(3) { top: 20%; left: 30%; width: 45vmax; height: 45vmax; background: radial-gradient(circle, var(--color-luce-3), transparent 65%); animation-duration: calc(var(--dur-deriva) * 0.8); }

/* grana da carta sopra le luci, appena percettibile */
.sfondo-animato::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@keyframes deriva {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12); }
  100% { transform: translate3d(5vmax, -4vmax, 0) scale(0.94); }
}

/* ---------- Testata (N9) ---------- */

.testata {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-gutter);
}
.marchio {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
}
.testata-stato { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

main { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }

/* ---------- Bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.bottone:hover { background: var(--color-accent-deep); }
.bottone:active { transform: translateY(1px); }
.bottone:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; transform: none; }

.bottone-testo {
  background: none;
  border: 0;
  padding: var(--space-xs) 0;
  font: inherit;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  white-space: nowrap;
  cursor: pointer;
}
.bottone-testo:hover { color: var(--color-ink); }
.bottone-testo:disabled { visibility: hidden; }

.errore { color: var(--color-critica); font-size: var(--text-sm); margin: var(--space-sm) 0 0; min-height: 1lh; }
.errore[hidden] { display: block !important; visibility: hidden; }

/* ---------- 1. Accesso ---------- */

.accesso {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.accesso h1 { font-size: var(--text-display); margin-bottom: var(--space-lg); }

.come-funziona {
  list-style: none;
  counter-reset: passo;
  margin: var(--space-xl) 0 0;
  padding: 0;
  max-width: 34rem;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.come-funziona li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
}
.come-funziona li::before {
  content: counter(passo);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--color-ink);
}
.come-funziona p { margin: 0; }
.come-funziona span { display: block; color: var(--color-ink); font-weight: 600; }

.accesso-form {
  background: var(--color-paper-2);
  border-radius: var(--radius-panel);
  padding: var(--space-xl) var(--space-lg);
}
.accesso-form h2 { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.accesso-form .bottone { width: 100%; margin-top: var(--space-sm); }

.campo { margin-bottom: var(--space-md); }
.campo label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.campo input {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.campo input:hover { border-color: var(--color-muted); }
.campo input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }

.spunta { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-sm); cursor: pointer; }
.spunta input { margin: var(--space-2xs) 0 0; width: 1.125rem; height: 1.125rem; accent-color: var(--color-ink); flex-shrink: 0; }
.spunte-facoltative { margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 2. Domande ---------- */

.domande-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-xl) 0 var(--space-3xl);
}

.binario { position: sticky; top: var(--space-lg); }
.binario-aree { list-style: none; margin: 0; padding: 0; border-left: var(--rule-hair) solid var(--color-rule); }
.binario-aree li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--lh-snug);
}
.binario-aree li.fatta { color: var(--color-ink-2); }
.binario-aree li.fatta::after { content: " ✓"; color: var(--color-forza); }
.binario-aree li.attuale { color: var(--color-ink); font-weight: 600; }
.binario-aree li.attuale::before {
  content: "";
  position: absolute;
  left: -2px;
  top: var(--space-xs);
  bottom: var(--space-xs);
  width: 3px;
  background: var(--color-accent);
}
.binario-nota { font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-lg) 0 0; max-width: 14rem; }

.avanzamento-mobile { display: none; }
.barra-progresso { height: 4px; background: var(--color-rule-2); border-radius: 2px; overflow: hidden; }
.barra-progresso > div { height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }

.area-titolo { font-size: var(--text-display); margin-bottom: var(--space-md); }
.area-descrizione { color: var(--color-ink-2); max-width: var(--measure); margin: 0 0 var(--space-xl); }

.domande { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.domanda { padding: var(--space-lg) 0 var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.domanda-testo { display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: 0; margin: 0 0 var(--space-md); }
.domanda-testo .n { font-family: var(--font-display); font-weight: 800; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.domanda-testo p { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: var(--lh-snug); max-width: 60ch; }

/* Scala a 6 posizioni: una sola barra divisa, non 6 schede */
.scala {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  overflow: hidden;
  margin: 0 0 0 var(--space-xl);
  padding: 0;
  min-width: 0;
}
.scala legend { position: absolute; left: -9999px; }
.gradino { position: relative; border-left: var(--rule-hair) solid var(--color-rule-2); }
.gradino:first-of-type { border-left: 0; }
.gradino input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gradino span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 5rem;
  padding: var(--space-xs) var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.gradino span b { font-size: var(--text-xl); line-height: 1; font-weight: 400; }
.gradino input:hover + span { background: var(--color-paper-2); }
.gradino input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.gradino input:checked + span { background: var(--color-accent-soft); color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--color-accent); }

.navigazione {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.contatore { text-align: right; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ---------- 3. Risultato (Stat-Led) ---------- */

.esito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) 0 var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.esito-cifra {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-figure);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.esito-cifra span { background: linear-gradient(transparent 56%, var(--color-accent) 56%, var(--color-accent) 80%, transparent 80%); }
.esito-testo h1 { font-size: var(--text-2xl); margin-bottom: var(--space-md); max-width: 22ch; }

.analisi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0 var(--space-xl);
}

.ruota { margin: 0; position: sticky; top: var(--space-lg); }
.ruota-grafico svg { display: block; width: 100%; height: auto; }
.ruota figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); max-width: 40ch; }
.radar-anello { fill: none; stroke: var(--color-rule-2); stroke-width: 1; }
.radar-anello.esterno { stroke: var(--color-rule); }
.radar-raggio { stroke: var(--color-rule-2); stroke-width: 1; }
.radar-area { fill: var(--color-accent); fill-opacity: 0.55; stroke: var(--color-accent-deep); stroke-width: 2; stroke-linejoin: round; }
.radar-punto { fill: var(--color-ink); }
.radar-etichetta { fill: var(--color-ink-2); font-family: var(--font-body); font-size: 17px; }
.radar-scala { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; }

.classifica h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.legenda { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-lg); }

.stato { font-weight: 600; white-space: nowrap; }
.stato::before { content: "●"; margin-right: var(--space-2xs); font-size: 0.7em; vertical-align: 0.15em; }
.stato.critica { color: var(--color-critica); }
.stato.migliorare { color: var(--color-migliorare); }
.stato.forza { color: var(--color-forza); }

.classifica-aree { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.classifica-aree > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.classifica-aree summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 10.5rem;
  grid-template-areas: "pos nome voto" "pos barra stato";
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  align-items: center;
  padding: var(--space-md) 0;
  list-style: none;
  cursor: pointer;
}
.classifica-aree summary::-webkit-details-marker { display: none; }
.classifica-aree summary:hover .riga-nome { text-decoration: underline; text-underline-offset: 0.18em; }
.riga-pos { grid-area: pos; align-self: start; font-family: var(--font-display); font-weight: 800; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.riga-nome { grid-area: nome; font-weight: 600; }
.riga-voto { grid-area: voto; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); font-variant-numeric: tabular-nums; text-align: right; }
.riga-barra { grid-area: barra; height: 6px; background: var(--color-rule-2); border-radius: 3px; overflow: hidden; }
.riga-barra i { display: block; height: 100%; background: var(--color-ink-2); border-radius: 3px; }
.riga-stato { grid-area: stato; font-size: var(--text-sm); text-align: right; }

/* Le prime tre righe sono le priorità: più grandi, numero evidenziato */
.priorita .riga-pos { color: var(--color-ink); }
.priorita .riga-pos span { background: var(--color-accent); padding: 0 var(--space-2xs); border-radius: var(--space-2xs); }
.priorita .riga-nome { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.priorita .riga-barra i { background: var(--color-ink); }

.approfondimento { padding: 0 0 var(--space-lg) calc(2rem + var(--space-md)); max-width: 60ch; }
.approfondimento p { margin: 0 0 var(--space-sm); color: var(--color-ink-2); }
.approfondimento .approf-testo { color: var(--color-ink); }
.approfondimento .approf-invito { margin-top: var(--space-md); }
.approf-link { font-weight: 600; color: var(--color-ink); text-decoration: none; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 88% / 100% 0.35em no-repeat; }
.approf-link:hover { background-size: 100% 0.7em; }
.approf-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* Le risposte più basse dell'area: la parte personale del pannello */
.approf-risposte { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-input); }
.approfondimento .approf-etichetta { margin: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.approf-risposte ul { list-style: none; margin: 0; padding: 0; }
.approf-risposte li { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.approf-risposte li:last-child { margin-bottom: 0; }
.approf-voce { display: inline-block; margin-right: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--space-2xs); background: var(--color-paper-3); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.approfondimento .approf-nota { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.riga-apri { display: inline-block; width: 1em; margin-left: var(--space-xs); font-family: var(--font-display); font-weight: 800; color: var(--color-muted); text-align: center; }
.riga-apri::after { content: "+"; }
details[open] .riga-apri::after { content: "\2212"; }

/* ---------- Chiusura (Ft6) ---------- */

.chiusura { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter) var(--space-xl); }
.chiusura-lettera {
  max-width: 38rem;
  margin-left: auto;
  padding: var(--space-2xl) 0 var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.chiusura-testo { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-lg); }
.chiusura-firma { margin: var(--space-xl) 0 0; font-weight: 600; }
.chiusura-ps { margin: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.chiusura-ps .bottone-testo { font-size: inherit; padding: 0; }
.chiusura-legale { font-size: var(--text-xs); color: var(--color-muted); margin: 0; }

/* ---------- Tablet e telefono ---------- */

@media (max-width: 880px) {
  .accesso, .domande-layout, .analisi { grid-template-columns: minmax(0, 1fr); }
  .accesso { gap: var(--space-xl); padding-top: var(--space-lg); }
  .binario { display: none; }
  .avanzamento-mobile { display: block; margin-bottom: var(--space-lg); }
  .avanzamento-mobile p { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
  .ruota { position: static; max-width: 30rem; }
  .chiusura-lettera { margin-left: 0; }
}

@media (max-width: 560px) {
  .scala { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 0; }
  .gradino:nth-of-type(4) { border-left: 0; }
  .gradino:nth-of-type(n+4) { border-top: var(--rule-hair) solid var(--color-rule-2); }
  .esito { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .classifica-aree summary { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "pos nome voto" "pos barra barra" "pos stato stato"; }
  .riga-stato { text-align: left; }
  .navigazione { grid-template-columns: auto 1fr; }
  .navigazione .contatore { display: none; }
  .navigazione .bottone { justify-self: end; }
  .testata-stato { font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .sfondo-animato span { animation: none; }
}