{# Density tab — hosts both the Appearance (light/dark/system) toggle and
   the Density (compact/comfortable/tax-view) toggle.

   Both write through the same POST /preferences pipeline (account_id is
   None so the change applies globally). Tab title remains "Density" for
   backwards-compat with the existing settings drawer chrome and tests; the
   visible content is now Appearance + Density side-by-side.

   Guard: when no accounts exist neither toggle is rendered. #}

<div class="space-y-5">
  {% set _psd = profile_switcher_data() %}
  {% if _psd.show_switcher %}
    <div>
      <h3 class="text-[14px] font-semibold m-0 mb-1">Appearance</h3>
      <p class="text-label-2 text-[12px] m-0 mb-2">
        Light, Dark, or follow your system preference.
      </p>
      {% with profile=_psd.profile, account_id=none %}
        {% include "_appearance_toggle.html" %}
      {% endwith %}
    </div>

    <div>
      <h3 class="text-[14px] font-semibold m-0 mb-1">Density</h3>
      <p class="text-label-2 text-[12px] m-0 mb-2">
        Controls row height and number formatting on tables across the app.
        Tax-view adds LT/ST + Lockout + Disallowed columns by default.
      </p>
      {% with profile=_psd.profile, page_key="/", selected_account="", account_id=none %}
        {% include "_density_toggle.html" %}
      {% endwith %}
    </div>
  {% else %}
    <p class="text-label-2 text-[12px] m-0">
      Import a CSV file to set up your first account, then appearance and density
      preferences will appear here.
    </p>
  {% endif %}
</div>