/* =========================================================================
   Leadership Readiness Assessment — extends assessment.css (asx-* classes)
   Adds: profilazione meta tag, radar chart, readiness band, path variants,
   under-threshold areas, L2 teaser.
   ========================================================================= */

/* Question phase tag (Profilazione / Competenze / Obiettivo) */
.asx-q__phase { color: rgba(255,255,255,0.5); }
.asx-q__phase b { color: var(--lead-accent); }

/* Intro readiness facts reuse .asx-facts */

/* ---------- Result: readiness band ---------- */
.lra-band {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 18px;
  font-family: var(--cp-font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lead-navy);
  background: var(--lead-accent); padding: 8px 16px;
}
.lra-band--low { background: #C2410C; color: #fff; }
.lra-band--mid { background: var(--lead-accent); color: var(--lead-navy); }
.lra-band--high { background: #1F8A5B; color: #fff; }

/* ---------- Radar ---------- */
.lra-radar { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; border: 1px solid rgba(255,255,255,0.16); padding: 30px 32px; margin-bottom: 24px; }
.lra-radar__chart { width: 300px; height: 300px; }
.lra-radar__chart svg { width: 100%; height: 100%; overflow: visible; }
.lra-radar .grid { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.lra-radar .axis { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.lra-radar .poly { fill: rgba(239,160,46,0.22); stroke: var(--lead-accent); stroke-width: 2; stroke-linejoin: round; transition: all 0.9s var(--cp-ease-out); }
.lra-radar .pt { fill: var(--lead-accent); }
.lra-radar .rlabel { font-family: var(--cp-font-body); font-size: 11px; font-weight: 600; fill: rgba(255,255,255,0.7); }
.lra-radar__legend { display: flex; flex-direction: column; gap: 0; }
.lra-leg { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.lra-leg:first-child { border-top: none; }
.lra-leg__name { flex: 1; font-size: 14.5px; color: rgba(255,255,255,0.85); }
.lra-leg__bar { width: 90px; height: 7px; background: rgba(255,255,255,0.12); flex-shrink: 0; position: relative; }
.lra-leg__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lead-accent); width: 0; transition: width 0.9s var(--cp-ease-out); }
.lra-leg__pct { width: 44px; text-align: right; font-family: var(--cp-font-display); font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0; }
.lra-leg__pct.under { color: #F0A36A; }

/* ---------- Gap / threshold note ---------- */
.lra-gap { border-left: 3px solid var(--lead-accent); background: rgba(239,160,46,0.10); padding: 18px 20px; margin-bottom: 24px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.lra-gap strong { color: #fff; }

/* ---------- L2 teaser ---------- */
.lra-l2 { border: 1px dashed rgba(255,255,255,0.28); padding: 22px 26px; margin-top: 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.lra-l2__l { font-family: var(--cp-font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lead-accent); }
.lra-l2 p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.lra-l2 p b { color: #fff; font-weight: 600; }

/* ---------- Legal microcopy ---------- */
.lra-legal { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.45); margin: 28px auto 0; max-width: 60ch; text-align: center; }

@media (max-width: 760px) {
  .lra-radar { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .lra-radar__chart { width: 260px; height: 260px; }
  .lra-radar__legend { width: 100%; }
}