How to make the details html element to behave on Safari the way it does on other browsers?

Question

Take a look at the HTML code in this snippet:

<div class="container">
  <details>
    <summary>In a hole in the ground there lived a hobbit.
      <input type="checkbox" id="read-check" />
      <label for="read-check">
        I've read this one
      </label>
    </summary>
    Not a nasty, dirty wet hole or a dry, bare sandy hole. It was a hobbit-hole and that means comfort.
  </details>
</div>

On Chrome and its derivatives, as well as Firefox (haven't checked Edge yet), this behaves the way I assumed it would -- clicking on the input label only toggles the checkbox. But on Safari, both desktop and mobile, while clicking on the checkbox itself does the same thing, clicking on the label also toggles the details expansion.

How can I (with CSS and HTML only, no JS) make a details view with a labeled checkbox behave consistently across browsers?