Settings Row Switch

<!--
  A settings-list row: title + helper text on the left, switch on the right. The
  helper text is wired to the input via aria-describedby, and the whole row is a
  <label> so the tap target is the entire row, not just the 44px track. The row
  survives 320px because the text column can shrink (min-w-0) while the switch
  stays put.
-->
<label class="flex w-full max-w-md cursor-pointer items-start justify-between gap-4 rounded-xl border border-gray-200 p-4 dark:border-gray-800">
  <span class="min-w-0">
    <span class="block text-sm font-medium text-gray-900 dark:text-gray-100">Weekly digest</span>
    <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">A Monday summary of everything that changed.</span>
  </span>
  <input type="checkbox" role="switch" class="peer sr-only" checked />
  <span
    aria-hidden="true"
    class="relative mt-0.5 h-6 w-11 shrink-0 rounded-full bg-gray-300 transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-transform after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-5 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-600 motion-reduce:transition-none motion-reduce:after:transition-none dark:bg-gray-600 dark:peer-checked:bg-blue-500 dark:peer-focus-visible:outline-blue-400"
  ></span>
</label>