/* "Posso aplicar agora?": três campos grandes e o resultado em cor, ícone e texto */
.spray-form { max-width: none; }

.spray-inputs { display: grid; gap: 0 var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spray-inputs__field .field__input { font-size: var(--font-size-large); font-weight: 700; padding-inline: var(--space-2); }
.spray-inputs__field .field__suffix { padding-inline: var(--space-2); font-size: var(--font-size-small); }

.spray-hint { color: var(--color-text-muted); }

.spray-result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4);
  border: 2px solid;
  border-radius: var(--radius-large);
}

.spray-result--good { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-primary-strong); }
.spray-result--attention { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); }
.spray-result--bad { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }

.spray-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  font-size: var(--font-size-large);
  font-weight: 700;
}

.spray-result__icon { color: inherit; }
.spray-result--good .spray-result__icon,
.spray-result--attention .spray-result__icon,
.spray-result--bad .spray-result__icon { background: none; border: 2px solid currentColor; }

.spray-result__text { display: grid; gap: var(--space-1); }
.spray-result__title { font-size: var(--font-size-title); line-height: 1.2; }
.spray-result__cause { font-size: var(--font-size-large); font-weight: var(--font-weight-medium); }
.spray-result__others { margin: 0; padding-left: var(--space-5); }

.spray-detail { margin-top: var(--space-2); }
.spray-links { margin-top: var(--space-4); }
.spray-cause { display: block; }

.spray-badge--good { background: var(--color-success-soft); color: var(--color-primary-strong); }
.spray-badge--attention { background: var(--color-warning-soft); color: var(--color-warning); }
.spray-badge--bad { background: var(--color-danger-soft); color: var(--color-danger); }

.action-tile--spray { border-left-color: var(--color-info); }
.spray-link .choices { margin-bottom: var(--space-3); }