/*
  Visual treatment for conditional child containers (declared via
  data-show-when). Nested children inherit the same treatment naturally —
  indent compounds at each level so deeper relationships read visually.

  Hidden containers don't render (display: none), so the styling only shows
  once the parent has been answered. The reveal animation runs every time a
  container transitions from hidden to visible.
*/
[data-show-when] {
  margin-top: 0.75rem;
  margin-left: 1.5rem;
  padding: 1rem 1rem 0.75rem 1.25rem;
  border-left: 3px solid #d1d5db;        /* gray-300 — slightly stronger than gray-200 */
  border-radius: 0 10px 10px 0;
  background: linear-gradient(
    to right,
    rgba(243, 244, 246, 0.7) 0%,         /* gray-100 ~70% */
    rgba(243, 244, 246, 0.25) 60%,
    rgba(243, 244, 246, 0) 100%
  );
  animation: dn-conditional-reveal 0.32s cubic-bezier(0.22, 0.94, 0.49, 1.0) both;
}

/* Slight visual cue at deeper nesting: soften the rail color so the
   primary parent-child boundary stays the most prominent. */
[data-show-when] [data-show-when] {
  border-left-color: #e5e7eb;            /* gray-200 */
}

@keyframes dn-conditional-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}