/* WS Form: "Add details (optional)" toggle — polish + spacing */
.wsf-toggle-details{
  display: inline-flex;
  align-items: center;
  gap: .4rem;

  /* visual style (looks intentional, not random link text) */
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor; /* underline, but cleaner */
  padding: .15rem 0;

  /* line-break replacement for the old <p>&nbsp;</p> spacer */
  margin-top: .35rem;
  margin-bottom: .75rem;
}

/* Hover/focus states (better clickability + keyboard access) */
.wsf-toggle-details:hover{
  opacity: .85;
}
.wsf-toggle-details:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* Optional: add a chevron icon via CSS (no HTML change) */
.wsf-toggle-details::before{
  content: "▸";
  display: inline-block;
  transform: translateY(-1px);
  transition: transform .2s ease;
}

/* If your JS flips aria-expanded, this animates the chevron open */
.wsf-toggle-details[aria-expanded="true"]::before{
  transform: rotate(90deg) translateX(1px);
}