Parent highlight on child focus

.form-group {
  padding: 1.25rem;
  background: oklch(0.19 0.02 260);
  border: 2px solid oklch(0.25 0.02 260);
  border-radius: 1rem;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.form-group:has(:focus-visible) {
  border-color: oklch(0.72 0.19 265);
  box-shadow: 0 0 0 4px oklch(0.52 0.22 265 / 0.15);
}

You are a senior frontend engineer building a form component.

Goal: A card/form group that highlights its border when any child input receives keyboard focus — using CSS :has() only, no JavaScript.

Technical constraints:
- Use :has(:focus-visible) on the parent container.
- Highlight: change border-color + add a soft glow via box-shadow.
- Use oklch() for all colors, not hex or rgba().
- Transition: border-color and box-shadow on 0.2s ease-out.
- The individual input should also show its own focus style.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept children (form fields) and highlight automatically.

Edge cases to handle:
- :has(:focus-visible) triggers on keyboard focus only, not mouse click — matches :focus-visible behavior.
- Browser support: Chrome 105+, Safari 15.4+, Firefox 121+.
- Multiple inputs in one card: highlight should persist while any child has focus.

Return HTML + CSS.