/* ============================================================
   AUTOVALUTAZIONE — stili quiz (allineati al linguaggio del sito:
   tagli angolari, etichette mono, accenti a barra come risk-item/pillar)
   ============================================================ */

.quiz-section{ padding:0 0 120px; }
.quiz-app-wrap{ max-width:720px; margin:0 auto; }

/* tag mono riutilizzabili fuori da .process-item (es. nella hero) */
.tags{ display:flex; gap:.6em; flex-wrap:wrap; }
.tags span{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.25); color:#C7C8DA;
  padding:.4em .8em;
}

/* ---------- come funziona: ponte visivo tra hero e quiz ---------- */
.how-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--mist-deep); border:1px solid var(--mist-deep);
  margin-bottom:0;
}
.how-step{ background:var(--ink-deep); padding:2em 1.8em; }
.how-step .num{ font-family:var(--font-mono); font-size:1.6rem; color:var(--signal); display:block; margin-bottom:.4em; }
.how-step h4{ color:#fff; font-family:var(--font-display); font-size:1rem; margin:0 0 .4em; }
.how-step p{ color:#B9BAD6; font-size:.86rem; margin:0; }

/* ---------- progress: segmenti angolari, uno per domanda ---------- */
.quiz-progress{ padding-top:64px; margin-bottom:2em; }
.quiz-progress-label{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate); margin-bottom:.8em;
  display:flex; justify-content:space-between;
}
.quiz-progress-label b{ color:var(--signal); }
.quiz-progress-track{ display:flex; gap:4px; }
.quiz-progress-seg{
  flex:1; height:5px; background:var(--mist);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.quiz-progress-seg.done{ background:var(--signal); }
.quiz-progress-seg.current{ background:var(--ink); }

/* ---------- card domanda: taglio d'angolo come il resto del sito ---------- */
.quiz-card{
  background:var(--paper-raised);
  border:1px solid var(--mist);
  border-left:3px solid var(--signal);
  padding:2.8em;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.quiz-card h3{ margin-bottom:1.4em; font-size:1.4rem; }

.quiz-options{ display:grid; gap:.7em; }

.scope-select{
  width:100%; padding:.85em 1em; border:1.5px solid var(--mist); background:var(--paper-raised);
  font-family:var(--font-body); font-size:.95rem; border-radius:var(--radius);
}
.scope-select:focus{ outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal); }
.quiz-option{
  display:flex; align-items:center; gap:1em;
  border:1.5px solid var(--mist);
  padding:.9em 1.2em .9em .9em;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.quiz-option input{ position:absolute; opacity:0; pointer-events:none; }
.quiz-option .opt-letter{
  font-family:var(--font-mono); font-size:.82rem; font-weight:700;
  color:var(--slate);
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--mist);
  clip-path:polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
.quiz-option:hover{ border-color:var(--signal-soft); }
.quiz-option.is-selected{ border-color:var(--signal); background:#FFF6F1; }
.quiz-option.is-selected .opt-letter{ background:var(--signal); border-color:var(--signal); color:#fff; }
.quiz-option span.opt-text{ font-size:.98rem; }

.quiz-nav{ display:flex; justify-content:space-between; margin-top:2em; }
.quiz-nav .btn:disabled{ opacity:.4; cursor:not-allowed; }

.consent-row{
  display:flex; align-items:flex-start; gap:.7em;
  font-size:.86rem; color:var(--slate);
  margin-top:1.2em;
  cursor:pointer;
}
.consent-row input{ margin-top:.2em; accent-color:var(--signal); flex-shrink:0; }
.consent-row b{ color:var(--ink-deep); font-weight:600; }

.link-inline{
  background:none; border:none; padding:0; margin:0;
  color:var(--ink); text-decoration:underline; font:inherit; cursor:pointer;
}

.informativa{
  margin-top:1.4em; padding:1em 1.2em;
  border:1px solid var(--mist); background:var(--paper);
  font-size:.85rem; color:var(--slate);
}
.informativa summary{ cursor:pointer; font-weight:600; color:var(--ink-deep); }
.informativa p{ margin:.8em 0 0; }

/* ---------- risultato: scudo che si riempie, stessa iconografia della hero ---------- */
.result-card{ text-align:left; border-left-color:var(--band-color, var(--signal)); }
.shield-wrap{ display:flex; flex-direction:column; align-items:center; margin-top:.6em; }
.shield-gauge{ width:200px; height:210px; }
.shield-fill-mask{ transition: transform 1.6s cubic-bezier(.16,1,.3,1); transform: translateY(var(--fill-y, 176px)); }
.shield-pct{
  font-family:var(--font-display); font-weight:700; font-size:2.1rem;
  fill:var(--ink-deep);
  paint-order: stroke;
  stroke:#fff; stroke-width:7px; stroke-linejoin:round;
}
.result-band{
  margin-top:1.2em;
  color:#fff; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em;
  padding:.5em 1.4em;
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.weak-areas{
  text-align:center; font-family:var(--font-mono); font-size:.82rem; color:var(--slate);
  margin-top:1.8em; letter-spacing:.02em;
}
.weak-areas b{ color:var(--ink-deep); }

/* ---------- blocco settore-specifico ---------- */
.sector-alert{
  margin-top:2em; padding:2em 2.2em;
  border:1.5px solid var(--mist);
  border-left:3px solid var(--signal);
}
.sector-alert h3{ margin-bottom:1.2em; }
.sector-alert.is-critical{
  background:var(--signal);
  border:none;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.sector-risks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em; }
.sector-risk-item h4{
  font-family:var(--font-display); font-size:1rem; margin:0 0 .4em;
  color:inherit;
}
.sector-risk-item p{ font-size:.88rem; margin:0; opacity:.9; }
.sector-alert:not(.is-critical) .sector-risk-item h4{ color:var(--ink-deep); }
.sector-alert:not(.is-critical) .sector-risk-item p{ color:var(--slate); }
.sector-alert.is-critical .sector-risk-item h4,
.sector-alert.is-critical .sector-risk-item p{ color:#fff; }

@media (max-width: 640px){
  .sector-risks{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .quiz-card{ padding:1.8em; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
  .quiz-nav{ flex-direction:column-reverse; gap:.8em; }
  .quiz-nav .btn{ width:100%; justify-content:center; }
  .how-strip{ grid-template-columns:1fr; }
}