/* ============================================================
   DIAGNOSI — /diagnosi/
   Strumento interattivo a 9 domande (checklist del Modello Operativo)
   ============================================================ */

.diag-tool {
  padding-block: var(--s10, 64px) var(--s12, 80px);
}

.diag-progress {
  max-width: 720px;
  margin: 0 auto var(--s8, 40px);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.diag-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width .35s ease;
}

.diag-form {
  max-width: 720px;
  margin: 0 auto;
}

.diag-question {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s6, 28px) var(--s6, 28px);
  margin-bottom: var(--s5, 20px);
  background: var(--color-bg-page);
}

.diag-question--mercato {
  border-left: 4px solid var(--color-area-02);
}
.diag-question--infrastruttura {
  border-left: 4px solid var(--color-area-01);
}
.diag-question--cervello {
  border-left: 4px solid var(--color-navy);
  background: var(--color-primary-soft);
}

.diag-question__legend {
  display: flex;
  flex-direction: column;
  gap: var(--s2, 8px);
  margin-bottom: var(--s3, 12px);
}

.diag-question__tag {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-eyebrow-on-light);
  text-transform: uppercase;
}

.diag-question__text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-headline);
  line-height: 1.35;
}

.diag-question__context {
  color: var(--color-text-muted);
  margin-bottom: var(--s5, 20px);
}

.diag-question__answers {
  display: flex;
  gap: var(--s3, 12px);
}

.diag-answer {
  flex: 1;
  padding: var(--s3, 12px) var(--s4, 16px);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-dark);
  background: transparent;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s ease;
}

.diag-answer--yes:hover,
.diag-answer--yes.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.diag-answer--no:hover,
.diag-answer--no.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.diag-question__seno {
  margin-top: var(--s4, 16px);
  padding: var(--s4, 16px);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-text-body);
  font-size: 0.95rem;
}

.diag-question__seno a {
  display: inline-block;
  margin-top: var(--s2, 8px);
  font-weight: 600;
}

.diag-question.is-active {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.diag-result {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.diag-result__inner {
  border-radius: var(--radius-xl);
  padding: var(--s8, 40px) var(--s6, 28px);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
}

.diag-result__eyebrow {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-eyebrow-on-light);
  margin-bottom: var(--s3, 12px);
}

.diag-result__title {
  font-size: 1.6rem;
  color: var(--color-text-headline);
  margin-bottom: var(--s4, 16px);
}

.diag-result__text {
  color: var(--color-text-muted);
  margin-bottom: var(--s5, 20px);
}

.diag-result__domains {
  display: flex;
  justify-content: center;
  gap: var(--s3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--s6, 28px);
}

.diag-result__domain-tag {
  padding: var(--s2, 8px) var(--s4, 16px);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 600;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-dark);
}

.diag-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3, 12px);
  justify-content: center;
  margin-bottom: var(--s4, 16px);
}

.diag-result__note {
  font-size: .85rem;
  color: var(--color-text-muted);
}

.diag-noscript {
  max-width: 720px;
  margin: var(--s8, 40px) auto 0;
  text-align: center;
  padding: var(--s6, 28px);
  border: 1px dashed var(--color-border-dark);
  border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
  .diag-question__answers {
    flex-direction: column;
  }
}