/* Percentili: curva di crescita sotto il risultato */
.cq-curva {
  margin: 1rem 0 0;
  padding: .75rem .75rem .5rem;
  border: 1px solid var(--cq-line);
  border-radius: 14px;
  background: var(--cq-surface);
}
.cq-curva svg { display: block; width: 100%; height: auto; }
.cq-curva__grid { stroke: var(--cq-line); stroke-width: 1; }
.cq-curva__ax { fill: var(--cq-muted); font-size: 12px; }
.cq-curva__band { fill: color-mix(in srgb, var(--cq-primary) 9%, transparent); stroke: none; }
.cq-curva__band--in { fill: color-mix(in srgb, var(--cq-primary) 14%, transparent); }
.cq-curva__line { fill: none; stroke: color-mix(in srgb, var(--cq-primary) 45%, var(--cq-surface)); stroke-width: 1.4; }
.cq-curva__line--med { stroke: var(--cq-primary); stroke-width: 2.2; }
.cq-curva__lab { fill: var(--cq-muted); font-size: 11px; font-weight: 600; }
.cq-curva__dot { fill: #f59e0b; stroke: var(--cq-surface); stroke-width: 3; }
.cq-curva figcaption { margin-top: .4rem; color: var(--cq-muted); font-size: .85rem; line-height: 1.4; }
.cq-percentili .cq-result__value { font-size: clamp(1.6rem, 6.8vw, 3rem); }
/* Sopra o sotto i limiti non è "bene" o "male": colore d'attenzione invece di verde e rosso */
.cq-percentili .cq-result__trend[data-trend="up"],
.cq-percentili .cq-result__trend[data-trend="down"] { color: #b35c00; background: #fff4e0; }