<div class="pvv-darkness-chooser" style="display:flex; flex-direction:column; gap:8px;">
  <p class="notes" style="margin:0 0 4px 0;">Choose how the selected light(s) should behave.</p>
  <div class="pvv-options">
    <div class="pvv-option pvv-variant-plain" data-action="plain">
      <div class="pvv-option-icon"><i class="fa-regular fa-moon" aria-hidden="true"></i></div>
      <div class="pvv-option-copy">
        <div class="pvv-option-title">Darkness Source (non-heightened)</div>
        <div class="pvv-option-sub">Darkvision and Greater darkvision see as Observed.</div>
      </div>
    </div>

    <div class="pvv-option pvv-variant-heightened" data-action="heightened">
      <div class="pvv-option-icon"><i class="fa-solid fa-moon" aria-hidden="true"></i></div>
      <div class="pvv-option-copy">
        <div class="pvv-option-title">Heightened Darkness (rank 4+)</div>
        <div class="pvv-option-sub">Restricts darkvision to Concealed; Greater darkvision remains Observed.</div>
      </div>
    </div>
  </div>

  <footer class="form-footer pvv-footer">
    <button type="button" class="dialog-button pvv-btn-clear" data-action="clear"><i class="fas fa-eraser" aria-hidden="true"></i> Clear Darkness</button>
  </footer>
</div>
